diff --git a/.changeset/thirty-fans-stay.md b/.changeset/thirty-fans-stay.md
new file mode 100644
index 00000000..3f76c1af
--- /dev/null
+++ b/.changeset/thirty-fans-stay.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/mcp': minor
+---
+
+Adds LLM-condensed documentation for smaller context usage
diff --git a/.cocoignore b/.cocoignore
index 0e2ab02e..fc0ef7ba 100644
--- a/.cocoignore
+++ b/.cocoignore
@@ -1,3 +1,4 @@
 .claude
 .github
-.vscode
\ No newline at end of file
+.vscode
+documentation/
\ No newline at end of file
diff --git a/.cocominify b/.cocominify
index 83d7467e..a13b59a8 100644
--- a/.cocominify
+++ b/.cocominify
@@ -1 +1,4 @@
-packages/mcp-server/src/use_cases.json
\ No newline at end of file
+packages/mcp-server/src/use_cases.json
+packages/mcp-server/src/mcp/autofixers
+packages/mcp-server/src/distilled.json
+packages/mcp-server/src/distilled-verification.json
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index b6c88732..3394b049 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,4 +11,7 @@ bun.lockb
 /**/.svelte-kit/*
 
 # Claude Code
-.claude/
\ No newline at end of file
+.claude/
+
+# MCP Server Markdown Files
+packages/mcp-server/**/*.md
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
index 855c15cb..59bdedc9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -2,72 +2,234 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Development Commands
+## Project Structure
+
+This is a monorepo containing the official Svelte MCP (Model Context Protocol) server implementation with multiple packages:
 
-This is a Svelte MCP (Model Context Protocol) server implementation that includes both SvelteKit web interface and MCP server functionality.
+- **`packages/mcp-server/`** - Core MCP server logic with tools, prompts, and autofixers
+- **`packages/mcp-stdio/`** - CLI wrapper for running MCP server via stdio transport (`@sveltejs/mcp` on npm)
+- **`packages/mcp-schema/`** - Shared database schema definitions using Drizzle ORM
+- **`apps/mcp-remote/`** - SvelteKit web application for remote HTTP MCP access and documentation comparison
+
+## Development Commands
 
 ### Setup
 
 ```bash
 pnpm i
-cp .env.example .env
-# Set the VOYAGE_API_KEY for embeddings support in .env
+cp apps/mcp-remote/.env.example apps/mcp-remote/.env
+# Set DATABASE_URL, DATABASE_TOKEN, and VOYAGE_API_KEY (optional) in apps/mcp-remote/.env
 pnpm dev
 ```
 
 ### Common Commands
 
-- `pnpm dev` - Start SvelteKit development server
-- `pnpm build` - Build the application for production
-- `pnpm start` - Run the MCP server (Node.js entry point)
-- `pnpm check` - Run Svelte type checking
-- `pnpm check:watch` - Run type checking in watch mode
+- `pnpm dev` - Start SvelteKit development server (apps/mcp-remote)
+- `pnpm build` - Build all packages
+- `pnpm check` - Run type checking across all packages
 - `pnpm lint` - Run prettier check and eslint
+- `pnpm lint:fix` - Auto-fix linting issues
 - `pnpm format` - Format code with prettier
 - `pnpm test` - Run unit tests with vitest
 - `pnpm test:watch` - Run tests in watch mode
 
-### Database Commands (Drizzle ORM)
+### Database Commands (apps/mcp-remote)
 
-- `pnpm db:push` - Push schema changes to database
+- `pnpm db:push` - Push schema changes to Turso database
 - `pnpm db:generate` - Generate migration files
 - `pnpm db:migrate` - Run migrations
 - `pnpm db:studio` - Open Drizzle Studio
 
+### Documentation Generation Commands (packages/mcp-server)
+
+#### Generate Use Case Summaries
+
+Generate short descriptions of when each documentation section would be useful:
+
+- `pnpm generate-summaries` - Generate use case summaries for all sections
+- `pnpm generate-summaries:dry-run` - Preview what would be generated without making API calls
+- `pnpm generate-summaries:debug` - Process only 2 sections for debugging
+
+#### Generate Distilled Documentation
+
+Generate condensed versions of the documentation to reduce context size:
+
+- `pnpm generate-distilled` - Generate distilled versions for all sections
+- `pnpm generate-distilled:dry-run` - Preview what would be generated without making API calls
+- `pnpm generate-distilled:debug` - Process only 2 sections for debugging
+
+#### Verify Distilled Documentation
+
+Verify the accuracy of distilled summaries against original documentation:
+
+- `pnpm verify-distilled` - Verify all distilled summaries for accuracy
+- `pnpm show-verification-errors` - Display all sections that failed verification
+
+The verification workflow:
+
+1. Run `pnpm verify-distilled` to verify all distilled summaries
+   - Loads `distilled.json` containing summaries and original content
+   - Uses the Anthropic Batch API to send each summary and original content to Claude
+   - Claude evaluates whether the summary is accurate or contains errors/omissions
+   - Generates `distilled-verification.json` with results (ACCURATE/NOT_ACCURATE) and reasoning
+   - Outputs statistics about accuracy rates
+2. Run `pnpm show-verification-errors` to see detailed list of all sections that are NOT_ACCURATE
+   - Displays each problematic section with its reasoning
+   - Shows summary statistics
+
+**Note:** All documentation generation and verification commands require `ANTHROPIC_API_KEY` to be set in `packages/mcp-server/.env`
+
+### Documentation Updates
+
+- `pnpm generate-prompt-docs` - Update documentation/docs/30-capabilities/30-prompts.md based on prompt handlers
+
+### Publishing Commands
+
+- `pnpm release` - Build and publish to npm using changesets
+- `pnpm changeset:version` - Update versions and sync package.json with server.json
+
+### Development Tools
+
+- `pnpm inspect` - Launch MCP inspector at http://localhost:6274/ for testing tools and prompts
+
 ## Architecture
 
-### MCP Server Implementation
+### MCP Server Implementation (`packages/mcp-server/src/mcp/`)
 
-The core MCP server is implemented in `src/lib/mcp/index.ts` using the `tmcp` library with:
+The core MCP server is implemented using the `tmcp` library with:
 
-- **Transport Layers**: Both HTTP (`HttpTransport`) and STDIO (`StdioTransport`) support
+- **Transport Layers**: Both HTTP (`@tmcp/transport-http`) and STDIO (`@tmcp/transport-stdio`) support
 - **Schema Validation**: Uses Valibot with `ValibotJsonSchemaAdapter`
-- **Main Tool**: `svelte-autofixer` - analyzes Svelte code and provides suggestions/fixes
+- **Server Definition**: `packages/mcp-server/src/mcp/index.ts` exports the configured server instance
+
+### MCP Tools (`packages/mcp-server/src/mcp/handlers/tools/`)
+
+#### get-documentation
+
+Retrieves documentation content for Svelte 5 or SvelteKit sections. Supports:
+
+- Single or multiple section names
+- Search by title (e.g., "$state") or file path (e.g., "cli/overview")
+- Optional distilled versions to optimize context size (default: true)
+- Automatically loads distilled content from `distilled.json` when available
+
+#### list-sections
+
+Lists all available Svelte 5 and SvelteKit documentation sections with:
+
+- Section titles and file paths
+- "use_cases" metadata describing when each section is useful
+- Helps LLMs determine which documentation to fetch
+
+#### svelte-autofixer
+
+Analyzes Svelte component or module code and returns suggestions/fixes:
+
+- Runs compilation checks
+- Runs ESLint checks
+- Runs custom autofixer visitors
+- Requires `code`, `desired_svelte_version` (4 or 5), and optional `filename`
+- Returns issues, suggestions, and whether another tool call is needed
+
+#### playground-link
+
+Generates a Svelte Playground link from code snippets:
+
+- Accepts multiple files (must include `App.svelte` as entry point)
+- Optional Tailwind CSS support
+- Compresses and encodes files into URL hash
+
+### MCP Prompts (`packages/mcp-server/src/mcp/handlers/prompts/`)
 
-### Code Analysis Engine
+#### svelte-task
 
-Located in `src/lib/server/analyze/`:
+A prompt template that instructs LLMs on how to:
 
-- **Parser** (`parse.ts`): Uses `svelte-eslint-parser` and TypeScript parser to analyze Svelte components
+- Query available documentation sections
+- Use the autofixer iteratively until no issues remain
+- Generate playground links when appropriate
+- Follows best practices for Svelte development
+
+Prompts are defined with:
+
+- `generate_for_docs()` - Function to generate prompt text for documentation
+- `docs_description` - Human-readable description
+- Prompt handler - Server registration logic with schema and completions
+
+### MCP Resources (`packages/mcp-server/src/mcp/handlers/resources/`)
+
+#### Svelte-Doc-Section
+
+URI template: `svelte://{/slug*}.md`
+
+Lists and fetches individual documentation sections:
+
+- Lists all sections with metadata (title, use_cases, URI)
+- Provides completions for slug parameter
+- Fetches content from svelte.dev/docs/
+
+### Code Analysis & Parsing (`packages/mcp-server/src/parse/`)
+
+- **Parser** (`parse.ts`): Uses `svelte-eslint-parser` and TypeScript parser
 - **Scope Analysis**: Tracks variables, references, and scopes across the AST
 - **Rune Detection**: Identifies Svelte 5 runes (`$state`, `$effect`, `$derived`, etc.)
 
-### Autofixer System
+### Autofixer System (`packages/mcp-server/src/mcp/autofixers/`)
 
-- **Autofixers** (`src/lib/mcp/autofixers.ts`): Visitor pattern implementations for code analysis
-- **Walker Utility** (`src/lib/index.ts`): Enhanced AST walking with visitor mixing capabilities
-- **Current Autofixer**: `assign_in_effect` - detects assignments to `$state` variables inside `$effect` blocks
+The autofixer system uses a visitor pattern to analyze Svelte components:
 
-### Database Layer
+#### Core Autofixer Files
 
-- **ORM**: Drizzle with SQLite backend
-- **Schema** (`src/lib/server/db/schema.ts`): Vector table for embeddings support
-- **Utils** (`src/lib/server/db/utils.ts`): Custom float32 array type for vectors
+- **`add-compile-issues.ts`** - Runs Svelte compiler and adds compilation errors
+- **`add-eslint-issues.ts`** - Runs ESLint with svelte-eslint-parser
+- **`add-autofixers-issues.ts`** - Orchestrates all custom autofixer visitors
 
-### SvelteKit Integration
+#### AST Walking (`ast/`)
+
+- **`walk.ts`** - Enhanced AST walking with visitor mixing capabilities using zimmerframe
+- **`utils.ts`** - Utility functions for AST manipulation
+
+#### Autofixer Visitors (`visitors/`)
+
+Each visitor checks for specific issues:
+
+- **`assign-in-effect.ts`** - Detects assignments to `$state` variables inside `$effect` blocks
+- **`derived-with-function.ts`** - Suggests using `$derived.by()` when passing a function to `$derived()`
+- **`imported-runes.ts`** - Detects attempts to import runes (they're globals)
+- **`read-state-with-dollar.ts`** - Detects reading `$state` variables with `$` prefix in Svelte 5
+- **`suggest-attachments.ts`** - Suggests attachments API for bind:this and actions
+- **`use-runes-instead-of-store.ts`** - Suggests migrating from stores to runes in Svelte 5
+- **`wrong-property-access-state.ts`** - Detects incorrect property access patterns on `$state` variables
+
+### Database Layer (`packages/mcp-schema/`)
+
+- **ORM**: Drizzle with LibSQL/Turso backend
+- **Schema** (`src/schema.js`):
+  - `content` - Original documentation with embeddings
+  - `content_distilled` - Distilled/condensed documentation with embeddings
+  - `distillations` - Stored distilled documentation versions
+  - `distillation_jobs` - Batch processing job tracking
+- **Utils** (`src/utils.js`): Custom `float_32_array` type for vector embeddings
+
+### SvelteKit Web App (`apps/mcp-remote/`)
+
+Remote HTTP MCP server with documentation comparison interface:
 
 - **Hooks** (`src/hooks.server.ts`): Integrates MCP HTTP transport with SvelteKit requests
-- **Routes**: Basic web interface for the MCP server
+- **Routes**:
+  - `/` - Landing page
+  - `/compare/use_cases` - Compare use case summaries with original docs
+  - `/compare/distilled` - Compare distilled docs with original docs
+- **MCP Setup** (`src/lib/mcp/index.ts`): HTTP transport configuration
+
+### CLI Package (`packages/mcp-stdio/`)
+
+Standalone npm package (`@sveltejs/mcp`) that:
+
+- Runs the MCP server via stdio transport
+- Built with tsdown for optimal bundling
+- Externalizes `eslint` dependency (required at runtime)
+- Published to npm registry and MCP registry
 
 ## Key Dependencies
 
@@ -75,27 +237,87 @@ Located in `src/lib/server/analyze/`:
 - **@tmcp/transport-http** & **@tmcp/transport-stdio**: Transport layers
 - **@tmcp/adapter-valibot**: Schema validation adapter
 - **svelte-eslint-parser**: Svelte component parsing
+- **typescript-eslint**: TypeScript AST parsing
 - **zimmerframe**: AST walking utilities
-- **drizzle-orm**: Database ORM with SQLite
+- **drizzle-orm**: Database ORM with LibSQL
 - **valibot**: Schema validation library
+- **@anthropic-ai/sdk**: Anthropic Batch API for documentation processing
+- **tsdown**: TypeScript bundler for CLI package
 
 ## Environment Configuration
 
-Required environment variables:
+### apps/mcp-remote/.env
+
+Required for the remote MCP server:
+
+- `DATABASE_URL`: LibSQL/Turso database URL (e.g., `libsql://db-name.turso.io`)
+- `DATABASE_TOKEN`: Turso authentication token
+- `VOYAGE_API_KEY`: API key for embeddings support (optional, for vector search features)
+
+### packages/mcp-server/.env
+
+Required for documentation generation scripts:
+
+- `ANTHROPIC_API_KEY`: API key for generating and verifying distilled documentation
+
+## Using the MCP Server
+
+### Available MCP Tools
+
+1. **list-sections** - ALWAYS call this FIRST to discover available documentation
+   - Returns structured list with titles, paths, and use_cases metadata
+   - Use the use_cases field to determine relevant sections
+
+2. **get-documentation** - Retrieves documentation content
+   - Accepts single section name or array of section names
+   - Searches by title or file path
+   - Optional `use_distilled` parameter (default: true) for condensed versions
+   - After calling list-sections, fetch ALL relevant sections at once
+
+3. **svelte-autofixer** - Analyzes Svelte code
+   - MUST be used whenever writing Svelte code before returning to user
+   - Keep calling until no issues/suggestions remain
+   - Provides compilation errors, ESLint issues, and custom suggestions
+
+4. **playground-link** - Generates Svelte Playground URLs
+   - Only use after code is finalized and user confirms
+   - Requires App.svelte as entry point
+   - Can include multiple files
+
+### Available MCP Prompts
+
+- **svelte-task** - Use for any Svelte-related task
+  - Instructs LLM on proper tool usage
+  - Enforces iterative autofixer workflow
+  - Guides documentation querying
+
+## Constants & Configuration
+
+### Svelte Runes (`packages/mcp-server/src/constants.ts`)
+
+Base runes:
 
-- `DATABASE_URL`: SQLite database path (default: `file:test.db`)
-- `VOYAGE_API_KEY`: API key for embeddings support (optional)
+- `$state`, `$effect`, `$derived`, `$inspect`, `$props`, `$bindable`, `$host`
 
-When connected to the svelte-llm MCP server, you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+Nested runes:
 
-## Available MCP Tools:
+- `$state.raw`, `$state.snapshot`, `$effect.pre`, `$effect.tracking`, `$effect.pending`, `$effect.root`, `$derived.by`, `$inspect.trace`, `$props.id`
 
-### 1. list-sections
+## Code Style & Standards
 
-Use this FIRST to discover all available documentation sections. Returns a structured list with titles and paths.
-When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+- **Naming**: Use `snake_case` for variables and functions
+- **Types**: Prefer TypeScript type imports with JSDoc where needed
+- **Formatting**: Tabs for indentation, single quotes, trailing commas
+- **File Extensions**: Include `.js` extension in imports even for TypeScript files
+- **Linting**: Run `pnpm lint:fix` before committing
 
-### 2. get-documentation
+## Testing
 
-Retrieves full documentation content for specific sections. Accepts single or multiple sections.
-After calling the list-sections tool, you MUST analyze the returned documentation sections and then use the get_documentation tool to fetch ALL documentation sections that are relevant for the users task.
+- Unit tests use Vitest
+- Test files use `.test.ts` or `.spec.ts` suffix
+- Run `pnpm test` to execute all tests
+- Run `pnpm test:watch` for watch mode
+- Test coverage includes:
+  - Documentation generation and verification
+  - Autofixer visitors
+  - Parsing and AST analysis
diff --git a/apps/mcp-remote/src/hooks.server.ts b/apps/mcp-remote/src/hooks.server.ts
index a8e4dad7..d455260d 100644
--- a/apps/mcp-remote/src/hooks.server.ts
+++ b/apps/mcp-remote/src/hooks.server.ts
@@ -7,7 +7,10 @@ export async function handle({ event, resolve }) {
 		const accept = event.request.headers.get('accept');
 		if (accept) {
 			const accepts = accept.split(',');
-			if (!accepts.includes('text/event-stream')) {
+			if (
+				!accepts.includes('text/event-stream') &&
+				(event.url.pathname.startsWith('/mcp') || event.url.pathname === '/')
+			) {
 				// the request it's a browser request, not an MCP client request
 				// it means someone probably opened it from the docs...we should redirect to the docs
 				redirect(302, 'https://svelte.dev/docs/mcp/overview');
diff --git a/apps/mcp-remote/src/routes/+page.svelte b/apps/mcp-remote/src/routes/+page.svelte
deleted file mode 100644
index 39f691e8..00000000
--- a/apps/mcp-remote/src/routes/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>Official Svelte MCP</h1>
diff --git a/apps/mcp-remote/src/routes/compare/[type]/+page.server.ts b/apps/mcp-remote/src/routes/compare/[type]/+page.server.ts
new file mode 100644
index 00000000..d0a2ed87
--- /dev/null
+++ b/apps/mcp-remote/src/routes/compare/[type]/+page.server.ts
@@ -0,0 +1,73 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import distilled_data from '@sveltejs/mcp-server/distilled.json';
+import use_cases_data from '@sveltejs/mcp-server/use-cases.json';
+
+interface SummaryData {
+	generated_at: string;
+	model: string;
+	total_sections: number;
+	successful_summaries: number;
+	summaries: Record<string, string>;
+	content: Record<string, string>;
+}
+
+const VALID_TYPES = ['use_cases', 'distilled'] as const;
+type ValidType = (typeof VALID_TYPES)[number];
+
+function is_valid_type(type: string): type is ValidType {
+	return VALID_TYPES.includes(type as ValidType);
+}
+
+export const load: PageServerLoad = async ({ params }) => {
+	const { type } = params;
+
+	if (!is_valid_type(type)) {
+		throw error(404, 'Comparison type not found');
+	}
+
+	const data = (type === 'use_cases' ? use_cases_data : distilled_data) as SummaryData;
+
+	const sections = Object.keys(data.summaries).map((slug) => {
+		const summary = data.summaries[slug] || '';
+		const content = data.content[slug] || '';
+		const original_length = content.length;
+		const distilled_length = summary.length;
+		const space_savings =
+			original_length > 0 ? ((original_length - distilled_length) / original_length) * 100 : 0;
+
+		return {
+			slug,
+			summary,
+			content,
+			original_length,
+			distilled_length,
+			space_savings,
+		};
+	});
+
+	const total_original_length = sections.reduce((sum, s) => sum + s.original_length, 0);
+	const total_distilled_length = sections.reduce((sum, s) => sum + s.distilled_length, 0);
+	const total_space_savings =
+		total_original_length > 0
+			? ((total_original_length - total_distilled_length) / total_original_length) * 100
+			: 0;
+
+	const title =
+		type === 'use_cases' ? 'Use Cases Comparison' : 'Distilled Documentation Comparison';
+
+	return {
+		type,
+		title,
+		metadata: {
+			generated_at: data.generated_at,
+			model: data.model,
+			total_sections: data.total_sections,
+			successful_summaries: data.successful_summaries,
+			total_original_length,
+			total_distilled_length,
+			total_space_savings,
+		},
+		sections,
+	};
+};
diff --git a/apps/mcp-remote/src/routes/compare/[type]/+page.svelte b/apps/mcp-remote/src/routes/compare/[type]/+page.svelte
new file mode 100644
index 00000000..b8d4e972
--- /dev/null
+++ b/apps/mcp-remote/src/routes/compare/[type]/+page.svelte
@@ -0,0 +1,427 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let selected_slug = $state<string | null>(null);
+	let search_query = $state('');
+	let sort_order = $state<'default' | 'largest' | 'smallest'>('default');
+
+	let filtered_sections = $derived.by(() => {
+		// First, filter sections
+		const filtered = data.sections.filter(
+			(section) =>
+				section.slug.toLowerCase().includes(search_query.toLowerCase()) ||
+				section.summary.toLowerCase().includes(search_query.toLowerCase()),
+		);
+
+		// Then, sort based on selected sort order
+		if (sort_order === 'largest') {
+			return [...filtered].sort((a, b) => b.space_savings - a.space_savings);
+		} else if (sort_order === 'smallest') {
+			return [...filtered].sort((a, b) => a.space_savings - b.space_savings);
+		}
+
+		return filtered;
+	});
+
+	let selected_section = $derived(
+		selected_slug ? data.sections.find((s) => s.slug === selected_slug) : null,
+	);
+
+	let summary_title = $derived(
+		data.type === 'use_cases' ? 'Use Cases Summary' : 'Distilled Version',
+	);
+	let is_distilled = $derived(data.type === 'distilled');
+
+	function select_section(slug: string) {
+		selected_slug = selected_slug === slug ? null : slug;
+	}
+</script>
+
+<svelte:head>
+	<title>{data.title}</title>
+</svelte:head>
+
+<div class="container">
+	<header>
+		<h1>{data.title}</h1>
+		<div class="metadata">
+			<span>Generated: {new Date(data.metadata.generated_at).toLocaleString()}</span>
+			<span>Model: {data.metadata.model}</span>
+			<span>Sections: {data.metadata.successful_summaries}/{data.metadata.total_sections}</span>
+			<span
+				>Space Savings: {data.metadata.total_distilled_length.toLocaleString()}/{data.metadata.total_original_length.toLocaleString()}
+				chars ({data.metadata.total_space_savings.toFixed(1)}% reduction)</span
+			>
+		</div>
+	</header>
+
+	<div class="main-content">
+		<aside class="sidebar">
+			<div class="sort-controls">
+				<span class="sort-label">Sort by:</span>
+				<div class="sort-buttons">
+					<button
+						class="sort-button"
+						class:active={sort_order === 'default'}
+						onclick={() => (sort_order = 'default')}
+					>
+						Default
+					</button>
+					<button
+						class="sort-button"
+						class:active={sort_order === 'largest'}
+						onclick={() => (sort_order = 'largest')}
+					>
+						Largest Reduction
+					</button>
+					<button
+						class="sort-button"
+						class:active={sort_order === 'smallest'}
+						onclick={() => (sort_order = 'smallest')}
+					>
+						Smallest Reduction
+					</button>
+				</div>
+			</div>
+			<div class="search-box">
+				<input
+					type="search"
+					bind:value={search_query}
+					placeholder="Search sections..."
+					class="search-input"
+				/>
+			</div>
+			<ul class="section-list">
+				{#each filtered_sections as section (section.slug)}
+					<li>
+						<button
+							class="section-item"
+							class:active={selected_slug === section.slug}
+							onclick={() => select_section(section.slug)}
+						>
+							<div class="section-header">
+								<div class="section-title">{section.slug}</div>
+								<div class="section-savings" class:negative={section.space_savings < 0}>
+									{section.space_savings.toFixed(1)}%
+								</div>
+							</div>
+							<div class="section-preview">
+								{is_distilled
+									? section.summary.slice(0, 100) + (section.summary.length > 100 ? '...' : '')
+									: section.summary}
+							</div>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		</aside>
+
+		<main class="comparison-view">
+			{#if selected_section}
+				<div class="comparison-grid">
+					<div class="comparison-column">
+						<h2>
+							Original Content
+							<span class="char-count"
+								>{selected_section.original_length.toLocaleString()} chars</span
+							>
+						</h2>
+						<div class="content-box">
+							<pre>{selected_section.content}</pre>
+						</div>
+					</div>
+					<div class="comparison-column">
+						<h2>
+							{summary_title}
+							<span class="char-count"
+								>{selected_section.distilled_length.toLocaleString()} chars ({selected_section.space_savings.toFixed(
+									1,
+								)}% savings)</span
+							>
+						</h2>
+						<div class="content-box">
+							<pre>{selected_section.summary}</pre>
+						</div>
+					</div>
+				</div>
+			{:else}
+				<div class="empty-state">
+					<p>Select a section from the list to view the comparison</p>
+				</div>
+			{/if}
+		</main>
+	</div>
+</div>
+
+<style>
+	.container {
+		max-width: 100%;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+	}
+
+	header {
+		background: white;
+		border-bottom: 1px solid #e0e0e0;
+		padding: 1.5rem 2rem;
+	}
+
+	h1 {
+		margin: 0 0 0.5rem 0;
+		font-size: 1.875rem;
+		font-weight: 600;
+		color: #1a1a1a;
+	}
+
+	.metadata {
+		display: flex;
+		gap: 1.5rem;
+		font-size: 0.9375rem;
+		color: #666;
+		flex-wrap: wrap;
+	}
+
+	.main-content {
+		display: flex;
+		flex: 1;
+		overflow: hidden;
+	}
+
+	.sidebar {
+		width: 350px;
+		background: white;
+		border-right: 1px solid #e0e0e0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.sort-controls {
+		padding: 1rem;
+		border-bottom: 1px solid #e0e0e0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.sort-label {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: #666;
+	}
+
+	.sort-buttons {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.sort-button {
+		padding: 0.375rem 0.75rem;
+		border: 1px solid #e0e0e0;
+		border-radius: 4px;
+		background: white;
+		font-size: 0.8125rem;
+		font-family: inherit;
+		cursor: pointer;
+		transition: all 0.15s;
+		color: #666;
+	}
+
+	.sort-button:hover {
+		background: #f9fafb;
+		border-color: #d0d0d0;
+	}
+
+	.sort-button.active {
+		background: #3b82f6;
+		border-color: #3b82f6;
+		color: white;
+	}
+
+	.search-box {
+		padding: 1rem;
+		border-bottom: 1px solid #e0e0e0;
+	}
+
+	.search-input {
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		border: 1px solid #e0e0e0;
+		border-radius: 4px;
+		font-size: 0.9375rem;
+		font-family: inherit;
+	}
+
+	.search-input:focus {
+		outline: none;
+		border-color: #3b82f6;
+	}
+
+	.section-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		overflow-y: auto;
+		flex: 1;
+	}
+
+	.section-item {
+		width: 100%;
+		text-align: left;
+		padding: 0.75rem 1rem;
+		border: none;
+		border-bottom: 1px solid #f0f0f0;
+		background: white;
+		cursor: pointer;
+		transition: background-color 0.15s;
+		font-family: inherit;
+	}
+
+	.section-item:hover {
+		background: #f9fafb;
+	}
+
+	.section-item.active {
+		background: #eff6ff;
+		border-left: 3px solid #3b82f6;
+	}
+
+	.section-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.25rem;
+	}
+
+	.section-title {
+		font-size: 0.9375rem;
+		font-weight: 500;
+		color: #1a1a1a;
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.section-savings {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: #10b981;
+		padding: 0.125rem 0.375rem;
+		background: #d1fae5;
+		border-radius: 3px;
+		white-space: nowrap;
+	}
+
+	.section-savings.negative {
+		color: #ef4444;
+		background: #fee2e2;
+	}
+
+	.section-preview {
+		font-size: 0.8125rem;
+		color: #666;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.comparison-view {
+		flex: 1;
+		overflow: auto;
+		background: #fafafa;
+	}
+
+	.comparison-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+		padding: 1rem;
+		height: 100%;
+	}
+
+	.comparison-column {
+		background: white;
+		border: 1px solid #e0e0e0;
+		border-radius: 4px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.comparison-column h2 {
+		margin: 0;
+		padding: 1rem;
+		font-size: 1.125rem;
+		font-weight: 600;
+		color: #1a1a1a;
+		border-bottom: 1px solid #e0e0e0;
+		background: #fafafa;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.char-count {
+		font-size: 0.8125rem;
+		font-weight: 400;
+		color: #666;
+		white-space: nowrap;
+	}
+
+	.content-box {
+		padding: 1rem;
+		overflow: auto;
+		flex: 1;
+		font-size: 0.9375rem;
+		line-height: 1.6;
+	}
+
+	.content-box pre {
+		margin: 0;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
+		font-size: 0.875rem;
+		color: #333;
+	}
+
+	.empty-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		color: #666;
+		font-size: 0.9375rem;
+	}
+
+	@media (max-width: 768px) {
+		.comparison-grid {
+			grid-template-columns: 1fr;
+		}
+
+		.sidebar {
+			width: 100%;
+			max-height: 25vh;
+		}
+
+		.main-content {
+			flex-direction: column;
+		}
+
+		.comparison-column h2 {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 0.5rem;
+		}
+
+		.char-count {
+			font-size: 0.75rem;
+		}
+	}
+</style>
diff --git a/eslint.config.js b/eslint.config.js
index 1b15e185..8ba88a73 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -57,6 +57,7 @@ export default /** @type {import("eslint").Linter.Config} */ ([
 					svelte: 'always',
 				},
 			],
+			'svelte/no-navigation-without-resolve': 'off',
 		},
 	},
 	{
diff --git a/package.json b/package.json
index bbfaf5e7..cb5cf121 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,15 @@
 		"test:watch": "npm run test:unit -- --watch",
 		"inspect": "pnpm mcp-inspector",
 		"generate-summaries": "pnpm --filter @sveltejs/mcp-server run generate-summaries",
+		"generate-summaries:dry-run": "pnpm --filter @sveltejs/mcp-server run generate-summaries:dry-run",
+		"generate-summaries:debug": "pnpm --filter @sveltejs/mcp-server run generate-summaries:debug",
+		"generate-distilled": "pnpm --filter @sveltejs/mcp-server run generate-distilled",
+		"generate-distilled:dry-run": "pnpm --filter @sveltejs/mcp-server run generate-distilled:dry-run",
+		"generate-distilled:debug": "pnpm --filter @sveltejs/mcp-server run generate-distilled:debug",
+		"verify-distilled": "pnpm --filter @sveltejs/mcp-server run verify-distilled",
+		"show-verification-errors": "pnpm --filter @sveltejs/mcp-server run show-verification-errors",
+		"export-summaries": "pnpm --filter @sveltejs/mcp-server run export-summaries",
 		"generate-prompt-docs": "node --import node-resolve-ts/register scripts/update-docs-prompts.ts",
-		"debug:generate-summaries": "pnpm --filter @sveltejs/mcp-server run debug:generate-summaries",
 		"release": "pnpm --filter @sveltejs/mcp run build && changeset publish",
 		"changeset:version": "changeset version && pnpm --filter @sveltejs/mcp run update:version && git add --all"
 	},
@@ -46,6 +53,7 @@
 		"publint": "^0.3.13",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.44.1",
+		"vite-node": "^3.2.4",
 		"vitest": "^3.2.3"
 	},
 	"pnpm": {
diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
index 6c2125a6..fc725415 100644
--- a/packages/mcp-server/package.json
+++ b/packages/mcp-server/package.json
@@ -10,11 +10,20 @@
 	"type": "module",
 	"scripts": {
 		"test": "vitest",
-		"generate-summaries": "node scripts/generate-summaries.ts --experimental-strip-types",
-		"debug:generate-summaries": "DEBUG_MODE=1 node scripts/generate-summaries.ts --experimental-strip-types"
+		"generate-summaries": "node --import node-resolve-ts/register scripts/generate-summaries.ts && prettier --write --log-level silent 'src/**/*.{js,ts,json}'",
+		"generate-summaries:dry-run": "node --import node-resolve-ts/register scripts/generate-summaries.ts --dry-run && prettier --write --log-level silent 'src/**/*.{js,ts,json}'",
+		"generate-summaries:debug": "DEBUG_MODE=1 node --import node-resolve-ts/register scripts/generate-summaries.ts && prettier --write --log-level silent 'src/**/*.{js,ts,json}'",
+		"generate-distilled": "node --import node-resolve-ts/register scripts/generate-summaries.ts --prompt-type distilled && prettier --write --log-level silent 'src/**/*.{js,ts,json}'",
+		"generate-distilled:dry-run": "node --import node-resolve-ts/register scripts/generate-summaries.ts --prompt-type distilled --dry-run && prettier --write --log-level silent 'src/**/*.{js,ts,json}'",
+		"generate-distilled:debug": "DEBUG_MODE=1 node --import node-resolve-ts/register scripts/generate-summaries.ts --prompt-type distilled && prettier --write --log-level silent 'src/**/*.{js,ts,json}'",
+		"verify-distilled": "node --import node-resolve-ts/register scripts/verify-distilled.ts",
+		"show-verification-errors": "node --import node-resolve-ts/register scripts/show-verification-errors.ts",
+		"export-summaries": "node --import node-resolve-ts/register scripts/export-summaries.ts && prettier --write --log-level silent 'src/**/*.{js,ts,json}'"
 	},
 	"exports": {
-		".": "./src/index.ts"
+		".": "./src/index.ts",
+		"./distilled.json": "./src/distilled.json",
+		"./use-cases.json": "./src/use_cases.json"
 	},
 	"peerDependencies": {
 		"drizzle-orm": "^0.44.0"
@@ -40,6 +49,7 @@
 		"@types/eslint-scope": "^8.3.2",
 		"@types/estree": "^1.0.8",
 		"@typescript-eslint/types": "^8.44.0",
+		"commander": "^13.1.0",
 		"dotenv": "^17.2.3"
 	}
 }
diff --git a/packages/mcp-server/scripts/export-summaries.ts b/packages/mcp-server/scripts/export-summaries.ts
new file mode 100644
index 00000000..13c54029
--- /dev/null
+++ b/packages/mcp-server/scripts/export-summaries.ts
@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+import 'dotenv/config';
+import { readFile, access } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { Command } from 'commander';
+import * as v from 'valibot';
+import { summary_data_schema, type SummaryData } from '../src/lib/schemas.ts';
+import { export_summaries_to_markdown } from './lib/export-markdown.ts';
+
+interface CliOptions {
+	type: 'use_cases' | 'distilled' | 'both';
+}
+
+const current_filename = fileURLToPath(import.meta.url);
+const current_dirname = path.dirname(current_filename);
+
+const program = new Command();
+
+program
+	.name('export-summaries')
+	.description('Export summaries from JSON files to individual markdown files')
+	.version('1.0.0')
+	.option('-t, --type <type>', 'Type to export: "use_cases", "distilled", or "both"', 'both');
+
+async function read_file_as_string(
+	file_path: string,
+	encoding: BufferEncoding = 'utf-8',
+): Promise<string> {
+	const content = await readFile(file_path, encoding);
+	return v.parse(v.string(), content);
+}
+
+async function load_summaries_json(output_path: string): Promise<SummaryData | null> {
+	try {
+		await access(output_path);
+	} catch {
+		return null;
+	}
+
+	const content = await read_file_as_string(output_path, 'utf-8');
+	const data = JSON.parse(content);
+
+	const validated = v.safeParse(summary_data_schema, data);
+	if (!validated.success) {
+		throw new Error(
+			`File has invalid schema: ${output_path}\n` +
+				`Validation errors: ${JSON.stringify(validated.issues, null, 2)}`,
+		);
+	}
+
+	return validated.output;
+}
+
+async function export_summaries_for_type(type: 'use_cases' | 'distilled'): Promise<void> {
+	const json_filename = type === 'distilled' ? 'distilled.json' : 'use_cases.json';
+	const input_path = path.join(current_dirname, `../src/${json_filename}`);
+
+	console.log(`\n📁 Processing ${type.toUpperCase()}...`);
+	console.log(`  Input: ${json_filename}`);
+
+	// Load the JSON file
+	console.log(`  📂 Loading ${json_filename}...`);
+	const data = await load_summaries_json(input_path);
+
+	if (!data) {
+		console.error(`  ❌ Error: Could not load ${json_filename}`);
+		return;
+	}
+
+	const summaries = data.summaries;
+	console.log(`  ✅ Found ${Object.keys(summaries).length} summaries`);
+
+	// Use shared export function
+	await export_summaries_to_markdown(summaries, type, path.join(current_dirname, '../summaries'));
+}
+
+async function main() {
+	program.parse();
+	const options = program.opts<CliOptions>();
+
+	console.log('🚀 Starting summary export...');
+
+	// Validate type option
+	if (!['use_cases', 'distilled', 'both'].includes(options.type)) {
+		console.error('❌ Error: --type must be "use_cases", "distilled", or "both"');
+		process.exit(1);
+	}
+
+	// Export based on type option
+	if (options.type === 'both') {
+		await export_summaries_for_type('use_cases');
+		await export_summaries_for_type('distilled');
+	} else {
+		await export_summaries_for_type(options.type);
+	}
+
+	console.log('\n✅ Export complete!');
+	console.log(
+		'\n📊 Summary files have been written to:',
+		path.join(current_dirname, '../summaries/'),
+	);
+}
+
+main().catch((error) => {
+	console.error('❌ Fatal error:', error);
+	process.exit(1);
+});
diff --git a/packages/mcp-server/scripts/generate-summaries.ts b/packages/mcp-server/scripts/generate-summaries.ts
index 3acd082e..b58e2cb9 100644
--- a/packages/mcp-server/scripts/generate-summaries.ts
+++ b/packages/mcp-server/scripts/generate-summaries.ts
@@ -1,58 +1,59 @@
 #!/usr/bin/env node
 import 'dotenv/config';
-import { writeFile, mkdir } from 'fs/promises';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import { writeFile, mkdir, readFile, access } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { Command } from 'commander';
 import { get_sections } from '../src/mcp/utils.ts';
 import { AnthropicProvider } from '../src/lib/anthropic.ts';
-import { type AnthropicBatchRequest, type SummaryData } from '../src/lib/schemas.ts';
+import {
+	type AnthropicBatchRequest,
+	type SummaryData,
+	summary_data_schema,
+} from '../src/lib/schemas.ts';
+import * as v from 'valibot';
+import { DISTILLED_PROMPT, USE_CASES_PROMPT } from '../src/mcp/handlers/tools/prompts.ts';
+import { export_summaries_to_markdown } from './lib/export-markdown.ts';
+
+interface CliOptions {
+	force: boolean;
+	dryRun: boolean;
+	debug: boolean;
+	promptType: 'use-cases' | 'distilled';
+}
+
+interface SectionChange {
+	slug: string;
+	title: string;
+	url: string;
+	change_type: 'new' | 'changed' | 'removed';
+}
 
 const current_filename = fileURLToPath(import.meta.url);
 const current_dirname = path.dirname(current_filename);
 
-const USE_CASES_PROMPT = `
-You are tasked with analyzing Svelte 5 and SvelteKit documentation pages to identify when they would be useful.
-
-Your task:
-1. Read the documentation page content provided
-2. Identify the main use cases, scenarios, or queries where this documentation would be relevant
-3. Create a VERY SHORT, comma-separated list of use cases (maximum 200 characters total)
-4. Think about what a developer might be trying to build or accomplish when they need this documentation
-
-Guidelines:
-- Focus on WHEN this documentation would be needed, not WHAT it contains
-- Consider specific project types (e.g., "e-commerce site", "blog", "dashboard", "social media app")
-- Consider specific features (e.g., "authentication", "forms", "data fetching", "animations")
-- Consider specific components (e.g., "slider", "modal", "dropdown", "card")
-- Consider development stages (e.g., "project setup", "deployment", "testing", "migration")
-- Use "always" for fundamental concepts that apply to virtually all Svelte projects
-- Be concise but specific
-- Use lowercase
-- Separate multiple use cases with commas
-
-Examples of good use_cases:
-- "always, any svelte project, core reactivity"
-- "authentication, login systems, user management"
-- "e-commerce, product listings, shopping carts"
-- "forms, user input, data submission"
-- "deployment, production builds, hosting setup"
-- "animation, transitions, interactive ui"
-- "routing, navigation, multi-page apps"
-- "blog, content sites, markdown rendering"
-
-Requirements:
-- Maximum 200 characters (including spaces and commas)
-- Lowercase only
-- Comma-separated list of use cases
-- Focus on WHEN/WHY someone would need this, not what it is
-- Be specific about project types, features, or components when applicable
-- Use "always" sparingly, only for truly universal concepts
-- Do not include quotes or special formatting in your response
-- Respond with ONLY the use cases text, no additional text
-
-Here is the documentation page content to analyze:
-
-`;
+async function read_file_as_string(
+	file_path: string,
+	encoding: BufferEncoding = 'utf-8',
+): Promise<string> {
+	const content = await readFile(file_path, encoding);
+	return v.parse(v.string(), content);
+}
+
+const program = new Command();
+
+program
+	.name('generate-summaries')
+	.description('Generate use case summaries for Svelte documentation sections')
+	.version('1.0.0')
+	.option('-f, --force', 'Force regeneration of all summaries', false)
+	.option('-d, --dry-run', 'Show what would be changed without making API calls', false)
+	.option('--debug', 'Debug mode: process only 2 sections', false)
+	.option(
+		'-p, --prompt-type <type>',
+		'Prompt type to use: "use-cases" or "distilled"',
+		'use-cases',
+	);
 
 async function fetch_section_content(url: string) {
 	const response = await fetch(url, { signal: AbortSignal.timeout(30000) });
@@ -62,180 +63,382 @@ async function fetch_section_content(url: string) {
 	return await response.text();
 }
 
+export async function load_existing_summaries(output_path: string): Promise<SummaryData | null> {
+	try {
+		await access(output_path);
+	} catch {
+		return null;
+	}
+
+	const content = await read_file_as_string(output_path, 'utf-8');
+	const data = JSON.parse(content);
+
+	const validated = v.safeParse(summary_data_schema, data);
+	if (!validated.success) {
+		throw new Error(
+			`Existing file has invalid schema. Please fix or delete the file at: ${output_path}\n` +
+				`Validation errors: ${JSON.stringify(validated.issues, null, 2)}`,
+		);
+	}
+
+	return validated.output;
+}
+
+function detect_changes(
+	current_sections: Array<{ slug: string; title: string; url: string }>,
+	existing_data: SummaryData | null,
+	current_content: Map<string, string>,
+	force: boolean,
+): {
+	to_process: Array<{ slug: string; title: string; url: string }>;
+	to_remove: string[];
+	changes: SectionChange[];
+} {
+	if (!existing_data || force) {
+		// First run or force regeneration
+		return {
+			to_process: current_sections,
+			to_remove: [],
+			changes: current_sections.map((s) => ({
+				...s,
+				change_type: force ? 'changed' : 'new',
+			})),
+		};
+	}
+
+	const existing_summaries = existing_data.summaries;
+	const existing_content = existing_data.content;
+	const existing_slugs = new Set(Object.keys(existing_summaries));
+	const current_slugs = new Set(current_sections.map((s) => s.slug));
+
+	const sections_to_process: typeof current_sections = [];
+	const changes: SectionChange[] = [];
+
+	// Check for new and changed sections
+	for (const section of current_sections) {
+		const content = current_content.get(section.slug);
+		if (!content) {
+			throw new Error(`No content found for section: ${section.slug}`);
+		}
+
+		if (!existing_slugs.has(section.slug)) {
+			// New section
+			sections_to_process.push(section);
+			changes.push({ ...section, change_type: 'new' });
+		} else {
+			// Existing section - check if content changed
+			const stored_content = existing_content[section.slug] ?? '';
+
+			if (content !== stored_content) {
+				// Content has changed
+				sections_to_process.push(section);
+				changes.push({ ...section, change_type: 'changed' });
+			}
+		}
+	}
+
+	// Find removed sections
+	const removed_slugs: string[] = [];
+	for (const slug of existing_slugs) {
+		if (!current_slugs.has(slug)) {
+			removed_slugs.push(slug);
+			changes.push({
+				slug,
+				title: '<removed>',
+				url: '',
+				change_type: 'removed',
+			});
+		}
+	}
+
+	return {
+		to_process: sections_to_process,
+		to_remove: removed_slugs,
+		changes,
+	};
+}
+
 async function main() {
+	program.parse();
+	const options = program.opts<CliOptions>();
+
+	// Allow DEBUG_MODE env var as well
+	const debug = options.debug || process.env.DEBUG_MODE === '1';
+
 	console.log('🚀 Starting use cases generation...');
 
-	// Check for API key
-	const api_key = process.env.ANTHROPIC_API_KEY;
-	if (!api_key) {
-		console.error('❌ Error: ANTHROPIC_API_KEY environment variable is required');
-		console.error('Please set it in packages/mcp-server/.env file or export it:');
-		console.error('export ANTHROPIC_API_KEY=your_api_key_here');
-		process.exit(1);
+	// Determine output file based on prompt type
+	const output_filename = options.promptType === 'distilled' ? 'distilled.json' : 'use_cases.json';
+	const output_path = path.join(current_dirname, `../src/${output_filename}`);
+
+	// Select prompt based on prompt type
+	const selected_prompt = options.promptType === 'distilled' ? DISTILLED_PROMPT : USE_CASES_PROMPT;
+
+	// Display mode information
+	console.log(`📝 PROMPT MODE: ${options.promptType.toUpperCase()} → ${output_filename}\n`);
+	if (options.dryRun) {
+		console.log('🔍 DRY RUN MODE - No API calls will be made\n');
+	}
+	if (options.force) {
+		console.log('⚡ FORCE MODE - Regenerating all summaries\n');
+	}
+	if (debug) {
+		console.log('🐛 DEBUG MODE - Will process only 2 sections\n');
+	}
+
+	// Load existing summaries
+	console.log('📂 Loading existing summaries...');
+	const existing_data = await load_existing_summaries(output_path);
+
+	if (existing_data) {
+		console.log(
+			`✅ Found existing summaries with ${Object.keys(existing_data.summaries).length} entries`,
+		);
+	} else {
+		console.log('📝 No existing summaries found - will process all sections');
 	}
 
-	// Get all sections
 	console.log('📚 Fetching documentation sections...');
-	let sections = await get_sections();
-	console.log(`Found ${sections.length} sections`);
+	const all_sections = await get_sections();
+	console.log(`Found ${all_sections.length} sections from API`);
+
+	// Download content for ALL sections (needed to compute hashes)
+	console.log('\n📥 Downloading section content...');
+	const section_content = new Map<string, string>();
+
+	for (let i = 0; i < all_sections.length; i++) {
+		const section = all_sections[i]!;
+		console.log(`  Fetching ${i + 1}/${all_sections.length}: ${section.title}`);
+		const content = await fetch_section_content(section.url);
+		section_content.set(section.slug, content);
+	}
+
+	console.log(`✅ Successfully downloaded ${section_content.size} sections`);
+
+	// Detect what needs to be processed
+	console.log('\n🔍 Checking for content changes...');
+	const { to_process, to_remove, changes } = detect_changes(
+		all_sections,
+		existing_data,
+		section_content,
+		options.force,
+	);
+
+	// Display changes
+	console.log('\n📊 Change Summary:');
+	const new_count = changes.filter((c) => c.change_type === 'new').length;
+	const changed_count = changes.filter((c) => c.change_type === 'changed').length;
+	const removed_count = changes.filter((c) => c.change_type === 'removed').length;
+
+	console.log(`  ✨ New sections: ${new_count}`);
+	console.log(`  🔄 Changed sections: ${changed_count}`);
+	console.log(`  ❌ Removed sections: ${removed_count}`);
+	console.log(`  📝 To process: ${to_process.length}`);
+
+	if (changes.length > 0) {
+		console.log('\n📋 Detailed changes:');
+		for (const change of changes) {
+			const emoji =
+				change.change_type === 'new' ? '  ✨' : change.change_type === 'changed' ? '  🔄' : '  ❌';
+			console.log(`${emoji} [${change.change_type.toUpperCase()}] ${change.slug}`);
+		}
+	}
 
-	// Debug mode: limit to 2 sections
-	const debug_mode = process.env.DEBUG_MODE === '1';
-	if (debug_mode) {
-		console.log('🐛 DEBUG_MODE enabled - processing only 2 sections');
-		sections = sections.slice(0, 2);
+	// Exit early if nothing to do
+	if (to_process.length === 0 && to_remove.length === 0) {
+		console.log('\n✅ No changes detected - everything is up to date!');
+		return;
 	}
 
-	// Fetch content for each section
-	console.log('📥 Downloading section content...');
+	// Debug mode: limit sections
+	let sections_to_process = to_process;
+	if (debug) {
+		console.log('\n🐛 Processing only 2 sections for debugging');
+		sections_to_process = to_process.slice(0, 2);
+	}
+
+	// Dry run mode: exit before API calls
+	if (options.dryRun) {
+		console.log('\n🔍 DRY RUN complete - no changes were made');
+		console.log(`Would have processed ${sections_to_process.length} sections`);
+		console.log(`Would have removed ${to_remove.length} sections`);
+		return;
+	}
+
+	// Process with Anthropic API if we have sections to process
+	const new_summaries: Record<string, string> = {};
 	const sections_with_content: Array<{
-		section: (typeof sections)[number];
+		section: (typeof sections_to_process)[number];
 		content: string;
 		index: number;
 	}> = [];
-	const download_errors: Array<{ section: string; error: string }> = [];
 
-	for (let i = 0; i < sections.length; i++) {
-		const section = sections[i]!;
-		try {
-			console.log(`Fetching ${i + 1}/${sections.length}: ${section.title}`);
-			const content = await fetch_section_content(section.url);
+	if (sections_to_process.length === 0) {
+		console.log('\n📦 Only removing old sections, no API calls needed');
+	} else {
+		// Check for API key
+		const api_key = process.env.ANTHROPIC_API_KEY;
+		if (!api_key) {
+			console.error('❌ Error: ANTHROPIC_API_KEY environment variable is required');
+			console.error('Please set it in packages/mcp-server/.env file or export it:');
+			console.error('export ANTHROPIC_API_KEY=your_api_key_here');
+			process.exit(1);
+		}
+
+		// Build sections_with_content from already-downloaded content
+		console.log('\n📦 Preparing sections for processing...');
+
+		for (let i = 0; i < sections_to_process.length; i++) {
+			const section = sections_to_process[i]!;
+			const content = section_content.get(section.slug);
+
+			if (!content) {
+				throw new Error(`No content available for ${section.title}`);
+			}
+
 			sections_with_content.push({
 				section,
 				content,
 				index: i,
 			});
-		} catch (error) {
-			const error_msg = error instanceof Error ? error.message : String(error);
-			console.error(`⚠️  Failed to fetch ${section.title}:`, error_msg);
-			download_errors.push({ section: section.title, error: error_msg });
 		}
-	}
 
-	console.log(`✅ Successfully downloaded ${sections_with_content.length} sections`);
-
-	if (sections_with_content.length === 0) {
-		console.error('❌ No sections were successfully downloaded');
-		process.exit(1);
-	}
-
-	// Initialize Anthropic client
-	console.log('🤖 Initializing Anthropic API...');
-	const anthropic = new AnthropicProvider('claude-sonnet-4-5-20250929', api_key);
-
-	// Prepare batch requests
-	console.log('📦 Preparing batch requests...');
-	const batch_requests: AnthropicBatchRequest[] = sections_with_content.map(
-		({ content, index }) => ({
-			custom_id: `section-${index}`,
-			params: {
-				model: anthropic.get_model_identifier(),
-				max_tokens: 250,
-				messages: [
-					{
-						role: 'user',
-						content: USE_CASES_PROMPT + content,
-					},
-				],
-				temperature: 0,
-			},
-		}),
-	);
+		console.log(`✅ Prepared ${sections_with_content.length} sections for processing`);
+
+		console.log('\n🤖 Initializing Anthropic API...');
+		const anthropic = new AnthropicProvider('claude-sonnet-4-5-20250929', api_key);
+
+		// Prepare batch requests
+		console.log('📦 Preparing batch requests...');
+		const batch_requests: AnthropicBatchRequest[] = sections_with_content.map(
+			({ content, index }) => ({
+				custom_id: `section-${index}`,
+				params: {
+					model: anthropic.get_model_identifier(),
+					max_tokens: 8192,
+					messages: [
+						{
+							role: 'user',
+							content:
+								`<instructions>${selected_prompt}</instructions>` +
+								`<documentation>${content}</documentation>`,
+						},
+					],
+					temperature: 0,
+				},
+			}),
+		);
+
+		// Create and process batch
+		console.log('🚀 Creating batch job...');
+		const batch_response = await anthropic.create_batch(batch_requests);
+		console.log(`✅ Batch created with ID: ${batch_response.id}`);
+
+		// Poll for completion
+		console.log('⏳ Waiting for batch to complete...');
+		let batch_status = await anthropic.get_batch_status(batch_response.id);
+
+		while (batch_status.processing_status === 'in_progress') {
+			const { succeeded, processing, errored } = batch_status.request_counts;
+			console.log(
+				`  Progress: ${succeeded} succeeded, ${processing} processing, ${errored} errored`,
+			);
+			await new Promise((resolve) => setTimeout(resolve, 5000));
+			batch_status = await anthropic.get_batch_status(batch_response.id);
+		}
 
-	// Create and process batch
-	console.log('🚀 Creating batch job...');
-	const batch_response = await anthropic.create_batch(batch_requests);
-	console.log(`✅ Batch created with ID: ${batch_response.id}`);
+		console.log('✅ Batch processing completed!');
 
-	// Poll for completion
-	console.log('⏳ Waiting for batch to complete...');
-	let batch_status = await anthropic.get_batch_status(batch_response.id);
+		// Get results
+		if (!batch_status.results_url) {
+			throw new Error('Batch completed but no results URL available');
+		}
 
-	while (batch_status.processing_status === 'in_progress') {
-		const { succeeded, processing, errored } = batch_status.request_counts;
-		console.log(`  Progress: ${succeeded} succeeded, ${processing} processing, ${errored} errored`);
-		await new Promise((resolve) => setTimeout(resolve, 5000));
-		batch_status = await anthropic.get_batch_status(batch_response.id);
-	}
+		console.log('📥 Downloading results...');
+		const results = await anthropic.get_batch_results(batch_status.results_url);
 
-	console.log('✅ Batch processing completed!');
+		// Process results
+		console.log('📊 Processing results...');
 
-	// Get results
-	if (!batch_status.results_url) {
-		throw new Error('Batch completed but no results URL available');
-	}
+		for (const result of results) {
+			const index = parseInt(result.custom_id.split('-')[1] ?? '0');
+			const section_data = sections_with_content.find((s) => s.index === index);
 
-	console.log('📥 Downloading results...');
-	const results = await anthropic.get_batch_results(batch_status.results_url);
+			if (!section_data) {
+				throw new Error(`Could not find section for index ${index}`);
+			}
 
-	// Process results
-	console.log('📊 Processing results...');
-	const summaries: Record<string, string> = {};
-	const errors: Array<{ section: string; error: string }> = [];
+			const { section } = section_data;
 
-	for (const result of results) {
-		const index = parseInt(result.custom_id.split('-')[1] ?? '0');
-		const section_data = sections_with_content.find((s) => s.index === index);
+			if (result.result.type !== 'succeeded' || !result.result.message) {
+				const error_msg = result.result.error?.message || 'Failed or no message';
+				throw new Error(`Failed to generate summary for ${section.title}: ${error_msg}`);
+			}
 
-		if (!section_data) {
-			console.warn(`⚠️  Could not find section for index ${index}`);
-			continue;
+			const output_content = result.result.message.content[0]?.text;
+			if (!output_content) {
+				throw new Error(`No text content in result for ${section.title}`);
+			}
+
+			new_summaries[section.slug] = output_content.trim();
+			console.log(`  ✅ ${section.title}`);
 		}
 
-		const { section } = section_data;
+		// Merge with existing summaries
+		console.log('\n📦 Merging results...');
+	}
 
-		if (result.result.type !== 'succeeded' || !result.result.message) {
-			const error_msg = result.result.error?.message || 'Failed or no message';
-			console.error(`  ❌ ${section.title}: ${error_msg}`);
-			errors.push({ section: section.title, error: error_msg });
-			continue;
-		}
+	// Start with existing summaries or empty object
+	const merged_summaries: Record<string, string> = existing_data
+		? { ...existing_data.summaries }
+		: {};
 
-		const output_content = result.result.message.content[0]?.text;
-		if (output_content) {
-			summaries[section.slug] = output_content.trim();
-			console.log(`  ✅ ${section.title}`);
-		}
+	// Add/update new summaries
+	Object.assign(merged_summaries, new_summaries);
+
+	// Remove deleted sections from summaries
+	for (const slug of to_remove) {
+		delete merged_summaries[slug];
+		console.log(`  🗑️  Removed: ${slug}`);
 	}
 
-	// Write output to JSON file
-	console.log('💾 Writing results to file...');
-	const output_path = path.join(current_dirname, '../src/use_cases.json');
+	// Write output
+	console.log('\n💾 Writing results to file...');
 	const output_dir = path.dirname(output_path);
-
 	await mkdir(output_dir, { recursive: true });
 
 	const summary_data: SummaryData = {
 		generated_at: new Date().toISOString(),
-		model: anthropic.get_model_identifier(),
-		total_sections: sections.length,
-		successful_summaries: Object.keys(summaries).length,
-		failed_summaries: errors.length,
-		summaries,
-		errors: errors.length > 0 ? errors : undefined,
-		download_errors: download_errors.length > 0 ? download_errors : undefined,
+		model: 'claude-sonnet-4-5-20250929',
+		total_sections: all_sections.length,
+		successful_summaries: Object.keys(merged_summaries).length,
+		summaries: merged_summaries,
+		content: Object.fromEntries(section_content),
 	};
 
 	await writeFile(output_path, JSON.stringify(summary_data, null, 2), 'utf-8');
 
+	// Export summaries to markdown files
+	console.log('\n📁 Exporting summaries to markdown files...');
+	const markdown_type = options.promptType === 'distilled' ? 'distilled' : 'use_cases';
+	const markdown_files_created = await export_summaries_to_markdown(
+		merged_summaries,
+		markdown_type,
+		path.join(current_dirname, '../summaries'),
+	);
+
 	// Print summary
-	console.log('\n📊 Summary:');
-	console.log(`  Total sections: ${sections.length}`);
-	console.log(`  Successfully downloaded: ${sections_with_content.length}`);
-	console.log(`  Download failures: ${download_errors.length}`);
-	console.log(`  Successfully analyzed: ${Object.keys(summaries).length}`);
-	console.log(`  Analysis failures: ${errors.length}`);
+	console.log('\n📊 Final Summary:');
+	console.log(`  Total sections in API: ${all_sections.length}`);
+	console.log(`  Sections processed: ${sections_with_content.length}`);
+	console.log(`  New summaries generated: ${Object.keys(new_summaries).length}`);
+	console.log(`  Sections removed: ${to_remove.length}`);
+	console.log(`  Total summaries in file: ${Object.keys(merged_summaries).length}`);
+	console.log(`  Markdown files created: ${markdown_files_created}`);
 	console.log(`\n✅ Results written to: ${output_path}`);
-
-	if (download_errors.length > 0) {
-		console.log('\n⚠️  Some sections failed to download:');
-		download_errors.forEach((e) => console.log(`  - ${e.section}: ${e.error}`));
-	}
-
-	if (errors.length > 0) {
-		console.log('\n⚠️  Some sections failed to analyze:');
-		errors.forEach((e) => console.log(`  - ${e.section}: ${e.error}`));
-	}
+	console.log(
+		`✅ Markdown files written to: ${path.join(current_dirname, `../summaries/${markdown_type}/`)}`,
+	);
 }
 
 main().catch((error) => {
diff --git a/packages/mcp-server/scripts/lib/export-markdown.ts b/packages/mcp-server/scripts/lib/export-markdown.ts
new file mode 100644
index 00000000..896ab12f
--- /dev/null
+++ b/packages/mcp-server/scripts/lib/export-markdown.ts
@@ -0,0 +1,54 @@
+import { writeFile, mkdir, rm } from 'node:fs/promises';
+import path from 'node:path';
+
+/**
+ * Export summaries to markdown files in nested directory structure
+ * @param summaries - Record of slug -> content mappings
+ * @param type - Type of summaries ('use_cases' or 'distilled')
+ * @param base_dir - Base directory for summaries (e.g., 'packages/mcp-server/summaries')
+ * @returns Number of files created
+ */
+export async function export_summaries_to_markdown(
+	summaries: Record<string, string>,
+	type: 'use_cases' | 'distilled',
+	base_dir: string,
+): Promise<number> {
+	const output_base_dir = path.join(base_dir, type);
+	const summary_count = Object.keys(summaries).length;
+
+	console.log(`  📁 Target: summaries/${type}/`);
+	console.log(`  📊 Total summaries: ${summary_count}`);
+
+	// Clean existing directory for this type
+	console.log(`  🧹 Cleaning ${type} directory...`);
+	try {
+		await rm(output_base_dir, { recursive: true, force: true });
+	} catch {
+		// Directory might not exist, that's okay
+	}
+
+	// Create base output directory
+	await mkdir(output_base_dir, { recursive: true });
+
+	let created_count = 0;
+
+	// Write each summary to a markdown file
+	for (const [slug, content] of Object.entries(summaries)) {
+		const file_path = path.join(output_base_dir, `${slug}.md`);
+		const file_dir = path.dirname(file_path);
+
+		// Create nested directories if needed
+		await mkdir(file_dir, { recursive: true });
+
+		// Write the markdown file
+		await writeFile(file_path, content, 'utf-8');
+		created_count++;
+
+		if (created_count % 10 === 0) {
+			console.log(`  📝 Created ${created_count}/${summary_count} files...`);
+		}
+	}
+
+	console.log(`  ✅ Successfully created ${created_count} markdown files`);
+	return created_count;
+}
diff --git a/packages/mcp-server/scripts/show-verification-errors.ts b/packages/mcp-server/scripts/show-verification-errors.ts
new file mode 100644
index 00000000..239f17d2
--- /dev/null
+++ b/packages/mcp-server/scripts/show-verification-errors.ts
@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as v from 'valibot';
+
+const current_filename = fileURLToPath(import.meta.url);
+const current_dirname = path.dirname(current_filename);
+
+const verification_output_schema = v.object({
+	generated_at: v.string(),
+	model: v.string(),
+	total_sections: v.number(),
+	verified_sections: v.number(),
+	accurate_count: v.number(),
+	not_accurate_count: v.number(),
+	results: v.array(
+		v.object({
+			slug: v.string(),
+			status: v.union([v.literal('ACCURATE'), v.literal('NOT_ACCURATE')]),
+			reasoning: v.string(),
+		}),
+	),
+});
+
+async function main() {
+	const verification_path = path.join(current_dirname, '../src/distilled-verification.json');
+
+	console.log('📂 Reading verification results...\n');
+
+	let content: string;
+	try {
+		content = await readFile(verification_path, 'utf-8');
+	} catch {
+		console.error('❌ Error: Could not find distilled-verification.json');
+		console.error('Please run `pnpm verify-distilled` first to generate the file.');
+		process.exit(1);
+	}
+
+	const data = JSON.parse(content);
+	const validated = v.safeParse(verification_output_schema, data);
+
+	if (!validated.success) {
+		console.error('❌ Error: Invalid verification file format');
+		console.error(JSON.stringify(validated.issues, null, 2));
+		process.exit(1);
+	}
+
+	const verification_data = validated.output;
+
+	// Filter for NOT_ACCURATE results
+	const not_accurate = verification_data.results.filter((r) => r.status === 'NOT_ACCURATE');
+
+	// Print header
+	console.log('📊 Verification Results Summary');
+	console.log('═'.repeat(80));
+	console.log(`Generated: ${new Date(verification_data.generated_at).toLocaleString()}`);
+	console.log(`Model: ${verification_data.model}`);
+	console.log(`Total Sections: ${verification_data.total_sections}`);
+	console.log(`Verified: ${verification_data.verified_sections}`);
+	console.log(
+		`✅ Accurate: ${verification_data.accurate_count} (${((verification_data.accurate_count / verification_data.verified_sections) * 100).toFixed(1)}%)`,
+	);
+	console.log(
+		`❌ Not Accurate: ${verification_data.not_accurate_count} (${((verification_data.not_accurate_count / verification_data.verified_sections) * 100).toFixed(1)}%)`,
+	);
+	console.log('═'.repeat(80));
+
+	if (not_accurate.length === 0) {
+		console.log('\n🎉 All sections are accurate! No issues found.');
+		return;
+	}
+
+	// Print all NOT_ACCURATE entries
+	console.log(`\n❌ NOT ACCURATE SECTIONS (${not_accurate.length}):\n`);
+
+	for (let i = 0; i < not_accurate.length; i++) {
+		const result = not_accurate[i]!;
+		console.log(`${i + 1}. ${result.slug}`);
+		console.log(`   Reasoning: ${result.reasoning}`);
+		console.log('');
+	}
+
+	console.log('═'.repeat(80));
+	console.log(`\nFound ${not_accurate.length} section(s) that need review or regeneration.`);
+}
+
+main().catch((error) => {
+	console.error('❌ Fatal error:', error);
+	process.exit(1);
+});
diff --git a/packages/mcp-server/scripts/verify-distilled.ts b/packages/mcp-server/scripts/verify-distilled.ts
new file mode 100644
index 00000000..7f505b08
--- /dev/null
+++ b/packages/mcp-server/scripts/verify-distilled.ts
@@ -0,0 +1,292 @@
+#!/usr/bin/env node
+import 'dotenv/config';
+import { writeFile, mkdir } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { AnthropicProvider } from '../src/lib/anthropic.ts';
+import type { AnthropicBatchRequest } from '../src/lib/schemas.ts';
+import distilled_data from '../src/distilled.json' with { type: 'json' };
+import * as v from 'valibot';
+
+interface VerificationResult {
+	slug: string;
+	status: 'ACCURATE' | 'NOT_ACCURATE';
+	reasoning: string;
+}
+
+interface VerificationOutput {
+	generated_at: string;
+	model: string;
+	total_sections: number;
+	verified_sections: number;
+	accurate_count: number;
+	not_accurate_count: number;
+	results: VerificationResult[];
+}
+
+const current_filename = fileURLToPath(import.meta.url);
+const current_dirname = path.dirname(current_filename);
+
+const verification_output_schema = v.object({
+	generated_at: v.string(),
+	model: v.string(),
+	total_sections: v.number(),
+	verified_sections: v.number(),
+	accurate_count: v.number(),
+	not_accurate_count: v.number(),
+	results: v.array(
+		v.object({
+			slug: v.string(),
+			status: v.union([v.literal('ACCURATE'), v.literal('NOT_ACCURATE')]),
+			reasoning: v.string(),
+		}),
+	),
+});
+
+const VERIFICATION_PROMPT = `You are tasked with verifying the accuracy of a distilled/condensed version of documentation against the original content.
+
+Your task:
+1. Read both the ORIGINAL documentation and the DISTILLED version provided below
+2. Determine if the distilled version accurately represents the key information from the original
+3. Check for any factual errors, misleading statements, or critical omissions
+4. Return your verdict as either "ACCURATE" or "NOT_ACCURATE"
+
+Guidelines for determining accuracy:
+- ACCURATE: The distilled version correctly captures the essential information, even if shortened
+- ACCURATE: Minor formatting changes or reasonable simplifications are acceptable
+- ACCURATE: Examples may be condensed as long as the core concept is preserved
+- NOT_ACCURATE: Any factual errors or contradictions with the original
+- NOT_ACCURATE: Missing critical information that would mislead developers
+- NOT_ACCURATE: Incorrect code examples or API usage
+
+You must respond in exactly this format:
+
+STATUS: [ACCURATE or NOT_ACCURATE]
+REASONING: [Brief explanation of your decision in one sentence]
+
+Do not include any other text, formatting, or markdown in your response.`;
+
+function parse_verification_response(text: string): {
+	status: 'ACCURATE' | 'NOT_ACCURATE';
+	reasoning: string;
+} | null {
+	// Try to extract STATUS and REASONING using regex
+	const status_match = text.match(/STATUS:\s*(ACCURATE|NOT_ACCURATE)/i);
+	const reasoning_match = text.match(/REASONING:\s*(.+?)(?:\n|$)/i);
+
+	if (status_match && reasoning_match) {
+		return {
+			status: status_match[1]!.toUpperCase() as 'ACCURATE' | 'NOT_ACCURATE',
+			reasoning: reasoning_match[1]!.trim(),
+		};
+	}
+
+	// Fallback: try to find just "ACCURATE" or "NOT_ACCURATE" anywhere in the response
+	const accurate_match = text.match(/\b(NOT_ACCURATE|ACCURATE)\b/i);
+	if (accurate_match) {
+		// Extract some context as reasoning
+		const lines = text.split('\n').filter((line) => line.trim());
+		const reasoning = lines.slice(0, 3).join(' ').slice(0, 200);
+
+		return {
+			status: accurate_match[1]!.toUpperCase() as 'ACCURATE' | 'NOT_ACCURATE',
+			reasoning: reasoning || 'Could not extract detailed reasoning',
+		};
+	}
+
+	return null;
+}
+
+async function main() {
+	console.log('🔍 Starting distilled verification...\n');
+
+	const output_path = path.join(current_dirname, '../src/distilled-verification.json');
+
+	// Load distilled data
+	console.log('📂 Loading distilled.json...');
+	const { summaries, content } = distilled_data;
+
+	const sections = Object.keys(summaries);
+	console.log(`Found ${sections.length} sections to verify\n`);
+
+	// Check for API key
+	const api_key = process.env.ANTHROPIC_API_KEY;
+	if (!api_key) {
+		console.error('❌ Error: ANTHROPIC_API_KEY environment variable is required');
+		console.error('Please set it in packages/mcp-server/.env file or export it:');
+		console.error('export ANTHROPIC_API_KEY=your_api_key_here');
+		process.exit(1);
+	}
+
+	// Initialize Anthropic API
+	console.log('🤖 Initializing Anthropic API...');
+	const anthropic = new AnthropicProvider('claude-sonnet-4-5-20250929', api_key);
+
+	// Prepare batch requests
+	console.log('📦 Preparing batch requests...');
+	const batch_requests: AnthropicBatchRequest[] = sections.map((slug, index) => {
+		const original = content[slug] || '';
+		const distilled = summaries[slug] || '';
+
+		return {
+			custom_id: `verify-${index}`,
+			params: {
+				model: anthropic.get_model_identifier(),
+				max_tokens: 4096,
+				messages: [
+					{
+						role: 'user',
+						content:
+							`${VERIFICATION_PROMPT}\n\n` +
+							`<original>${original}</original>\n\n` +
+							`<distilled>${distilled}</distilled>`,
+					},
+				],
+				temperature: 0,
+			},
+		};
+	});
+
+	// Create and process batch
+	console.log('🚀 Creating batch job...');
+	const batch_response = await anthropic.create_batch(batch_requests);
+	console.log(`✅ Batch created with ID: ${batch_response.id}`);
+
+	// Poll for completion
+	console.log('⏳ Waiting for batch to complete...');
+	let batch_status = await anthropic.get_batch_status(batch_response.id);
+
+	while (batch_status.processing_status === 'in_progress') {
+		const { succeeded, processing, errored } = batch_status.request_counts;
+		console.log(`  Progress: ${succeeded} succeeded, ${processing} processing, ${errored} errored`);
+		await new Promise((resolve) => setTimeout(resolve, 5000));
+		batch_status = await anthropic.get_batch_status(batch_response.id);
+	}
+
+	console.log('✅ Batch processing completed!');
+
+	// Get results
+	if (!batch_status.results_url) {
+		throw new Error('Batch completed but no results URL available');
+	}
+
+	console.log('📥 Downloading results...');
+	const results = await anthropic.get_batch_results(batch_status.results_url);
+
+	// Process results
+	console.log('📊 Processing results...');
+	const verification_results: VerificationResult[] = [];
+
+	for (const result of results) {
+		const index = parseInt(result.custom_id.split('-')[1] ?? '0');
+		const slug = sections[index];
+
+		if (!slug) {
+			throw new Error(`Could not find slug for index ${index}`);
+		}
+
+		if (result.result.type !== 'succeeded' || !result.result.message) {
+			const error_msg = result.result.error?.message || 'Failed or no message';
+			console.error(`  ❌ Failed to verify ${slug}: ${error_msg}`);
+			verification_results.push({
+				slug,
+				status: 'NOT_ACCURATE',
+				reasoning: `Verification failed: ${error_msg}`,
+			});
+			continue;
+		}
+
+		const output_content = result.result.message.content[0]?.text;
+		if (!output_content) {
+			console.error(`  ❌ No text content in result for ${slug}`);
+			verification_results.push({
+				slug,
+				status: 'NOT_ACCURATE',
+				reasoning: 'No response from verification',
+			});
+			continue;
+		}
+
+		// Parse using regex instead of strict JSON parsing
+		const parsed = parse_verification_response(output_content);
+
+		if (!parsed) {
+			console.error(`  ❌ Failed to parse response for ${slug}`);
+			console.error(`  Raw response: ${output_content.slice(0, 200)}...`);
+			verification_results.push({
+				slug,
+				status: 'NOT_ACCURATE',
+				reasoning: `Failed to parse verification response: ${output_content.slice(0, 100)}`,
+			});
+			continue;
+		}
+
+		verification_results.push({
+			slug,
+			status: parsed.status,
+			reasoning: parsed.reasoning,
+		});
+
+		const emoji = parsed.status === 'ACCURATE' ? '✅' : '❌';
+		console.log(`  ${emoji} ${slug}: ${parsed.status}`);
+	}
+
+	// Calculate statistics
+	const accurate_count = verification_results.filter((r) => r.status === 'ACCURATE').length;
+	const not_accurate_count = verification_results.filter((r) => r.status === 'NOT_ACCURATE').length;
+
+	// Write output
+	console.log('\n💾 Writing results to file...');
+	const output_dir = path.dirname(output_path);
+	await mkdir(output_dir, { recursive: true });
+
+	const output_data: VerificationOutput = {
+		generated_at: new Date().toISOString(),
+		model: 'claude-sonnet-4-5-20250929',
+		total_sections: sections.length,
+		verified_sections: sections.length,
+		accurate_count,
+		not_accurate_count,
+		results: verification_results,
+	};
+
+	// Validate output before writing
+	const validated = v.safeParse(verification_output_schema, output_data);
+	if (!validated.success) {
+		throw new Error(`Output validation failed: ${JSON.stringify(validated.issues, null, 2)}`);
+	}
+
+	await writeFile(output_path, JSON.stringify(output_data, null, 2), 'utf-8');
+
+	// Print summary
+	console.log('\n📊 Verification Summary:');
+	console.log(`  Total sections: ${sections.length}`);
+	console.log(`  Verified sections: ${sections.length}`);
+	console.log(
+		`  ✅ Accurate: ${accurate_count} (${((accurate_count / sections.length) * 100).toFixed(1)}%)`,
+	);
+	console.log(
+		`  ❌ Not Accurate: ${not_accurate_count} (${((not_accurate_count / sections.length) * 100).toFixed(1)}%)`,
+	);
+
+	if (not_accurate_count > 0) {
+		console.log('\n⚠️  Sections with issues (first 10):');
+		verification_results
+			.filter((r) => r.status === 'NOT_ACCURATE')
+			.slice(0, 10)
+			.forEach((r) => {
+				console.log(`  - ${r.slug}: ${r.reasoning}`);
+			});
+		if (not_accurate_count > 10) {
+			console.log(`  ... and ${not_accurate_count - 10} more`);
+		}
+		console.log('\n💡 Run `pnpm show-verification-errors` to see all issues');
+	}
+
+	console.log(`\n✅ Results written to: ${output_path}`);
+}
+
+main().catch((error) => {
+	console.error('❌ Fatal error:', error);
+	process.exit(1);
+});
diff --git a/packages/mcp-server/src/distilled-verification.json b/packages/mcp-server/src/distilled-verification.json
new file mode 100644
index 00000000..0419fa49
--- /dev/null
+++ b/packages/mcp-server/src/distilled-verification.json
@@ -0,0 +1,875 @@
+{
+	"generated_at": "2025-10-12T22:35:10.647Z",
+	"model": "claude-sonnet-4-5-20250929",
+	"total_sections": 173,
+	"verified_sections": 173,
+	"accurate_count": 159,
+	"not_accurate_count": 14,
+	"results": [
+		{
+			"slug": "cli/overview",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the essential information about the sv CLI tool, its usage with npx/pnpx, and the behavior of using local vs. downloaded versions, with only the acknowledgements section reasonably omitted."
+		},
+		{
+			"slug": "cli/faq",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including commands for each package manager, troubleshooting context, and references to the same GitHub issues, with only formatting changes and reasonable condensation."
+		},
+		{
+			"slug": "cli/sv-create",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information, options, and examples from the original documentation with appropriate condensation and no factual errors or critical omissions."
+		},
+		{
+			"slug": "cli/sv-add",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including usage, options, and add-ons list, with only minor acceptable simplifications in wording and removal of non-critical elements like links and HTML comments."
+		},
+		{
+			"slug": "cli/sv-check",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information, options, and examples from the original documentation with appropriate condensation and no factual errors or critical omissions."
+		},
+		{
+			"slug": "cli/sv-migrate",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including usage, migration types, and their purposes, with only minor formatting simplifications and no factual errors or critical omissions."
+		},
+		{
+			"slug": "cli/devtools-json",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the plugin's purpose, security note, alternatives, usage, and code example, with only minor formatting simplifications that preserve the core content."
+		},
+		{
+			"slug": "cli/drizzle",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including setup commands, features, database options, client options, and Docker configuration while maintaining factual accuracy through reasonable condensation."
+		},
+		{
+			"slug": "cli/eslint",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the tool's purpose, installation command, and key components installed, with only minor simplification of wording."
+		},
+		{
+			"slug": "cli/lucia",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the command, what it provides (SvelteKit + Drizzle auth setup following Lucia), and the demo option, with only minor formatting changes and reasonable simplifications."
+		},
+		{
+			"slug": "cli/mdsvex",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the definition, comparison to MDX, installation command, and configuration details, with only minor simplification of wording."
+		},
+		{
+			"slug": "cli/paraglide",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the library description, installation command, included features, and configuration options, with only minor formatting simplifications that preserve the original meaning."
+		},
+		{
+			"slug": "cli/playwright",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information from the original, with only minor formatting changes and reasonable simplification of the bullet points."
+		},
+		{
+			"slug": "cli/prettier",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the tool description, installation command, and what gets added to the project, with only minor rewording that preserves meaning."
+		},
+		{
+			"slug": "cli/storybook",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the installation command, automatic initialization, framework options, and key features like module mocking and link handling."
+		},
+		{
+			"slug": "cli/sveltekit-adapter",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including usage, adapter options with their purposes, and the example command, with only minor formatting simplifications and no factual errors or critical omissions."
+		},
+		{
+			"slug": "cli/tailwind",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including setup command, installed components, prettier integration, and plugin options, with only minor formatting changes and reasonable simplifications."
+		},
+		{
+			"slug": "cli/vitest",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the framework description, installation command, and the four key outcomes of running the command, with only minor rewording for brevity."
+		},
+		{
+			"slug": "kit/introduction",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential technical information, features, and links from the original, with only the introductory notes and some explanatory prose reasonably condensed."
+		},
+		{
+			"slug": "kit/creating-a-project",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the setup commands, core concepts of pages/routing/rendering, and editor recommendations, with only minor formatting changes and reasonable condensation of explanatory text."
+		},
+		{
+			"slug": "kit/project-types",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information from the original, preserving key concepts, links, and technical details while appropriately condensing explanations and formatting for brevity."
+		},
+		{
+			"slug": "kit/project-structure",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version incorrectly names the file as \"instrumentation.server.js\" when the original clearly states it is \"tracing.server.js\" in the directory structure, though the description section does mention \"instrumentation.server.js\" creating ambiguity that should have been preserved."
+		},
+		{
+			"slug": "kit/web-standards",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the special fetch behavior, API interfaces, code examples, and usage contexts, with only minor formatting simplifications that preserve the original meaning."
+		},
+		{
+			"slug": "kit/routing",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including routing concepts, file types, code examples, and key behaviors, with appropriate condensation and no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/load",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including load function types, data flow, URL handling, fetch behavior, cookies, headers, parent data access, errors, redirects, streaming, parallel loading, rerunning logic, authentication implications, and getRequestEvent usage, with appropriate code examples preserved."
+		},
+		{
+			"slug": "kit/form-actions",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key concepts, code examples, and important notes from the original documentation, with appropriate condensation and no factual errors or misleading omissions."
+		},
+		{
+			"slug": "kit/page-options",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the five main page options (prerender, entries, ssr, csr, trailingSlash, config), their usage, code examples, and important warnings, with appropriate condensation but no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/state-management",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information, preserves critical warnings and code examples, maintains accurate technical details, and only condenses explanatory text while keeping all key concepts intact."
+		},
+		{
+			"slug": "kit/remote-functions",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all essential information including setup, all four function types (query, form, command, prerender), their usage patterns, validation, and key features like batching, single-flight mutations, and error handling, with no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/building-your-app",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the two-stage build process, the building flag usage with accurate code example, and preview limitations, with only minor formatting simplifications."
+		},
+		{
+			"slug": "kit/adapters",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the purpose of adapters, the list of official adapters, configuration method with code example, and platform-specific context details, with only minor formatting simplifications that don't alter meaning."
+		},
+		{
+			"slug": "kit/adapter-auto",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the adapter list, best practices, configuration limitations, and extension process, with appropriate simplification and no factual errors."
+		},
+		{
+			"slug": "kit/adapter-node",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all essential information including installation, deployment, environment variables, options, graceful shutdown, socket activation, and custom server setup, with appropriate condensation of explanatory text while preserving critical technical details and code examples."
+		},
+		{
+			"slug": "kit/adapter-static",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including installation, configuration, options, and GitHub Pages setup, with appropriate condensation of explanatory text while preserving critical technical details and code examples."
+		},
+		{
+			"slug": "kit/single-page-apps",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including SPA setup, performance warnings, configuration steps, prerendering options, and Apache configuration, with appropriate simplifications and no factual errors."
+		},
+		{
+			"slug": "kit/adapter-cloudflare",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all essential information, configuration options, code examples, and key concepts from the original documentation with appropriate condensation and no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/adapter-cloudflare-workers",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including deprecation notice, installation, configuration, deployment, runtime APIs, testing, and troubleshooting, with appropriate simplifications and no factual errors."
+		},
+		{
+			"slug": "kit/adapter-netlify",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including installation, configuration options, edge functions, Netlify-specific features, and troubleshooting, with only minor formatting simplifications and no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/adapter-vercel",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all essential information, configuration options, warnings, and troubleshooting steps from the original, with appropriate condensation and formatting changes that preserve the core technical content."
+		},
+		{
+			"slug": "kit/writing-adapters",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the API structure, required/optional fields, adapt method tasks, and recommendations, with appropriate condensation and reorganization for clarity."
+		},
+		{
+			"slug": "kit/advanced-routing",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key concepts including rest parameters, optional parameters, matchers, sorting rules, encoding, and advanced layouts with correct code examples and essential notes, though condensed for brevity."
+		},
+		{
+			"slug": "kit/hooks",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key hooks, their purposes, parameters, and code examples while appropriately condensing explanatory text and preserving critical technical details."
+		},
+		{
+			"slug": "kit/errors",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including expected/unexpected errors, error handling, responses, type safety, and code examples, with only minor formatting simplifications that preserve the core concepts."
+		},
+		{
+			"slug": "kit/link-options",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all key information, attribute values, code examples, and important warnings from the original documentation, with appropriate condensation but no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/service-workers",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including setup, the $service-worker module exports, the complete code example, development considerations, and alternative solutions, with only minor formatting changes and reasonable condensation of explanatory text."
+		},
+		{
+			"slug": "kit/server-only-modules",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the two methods for creating server-only modules, how the protection works, the import chain example, dynamic imports support, and the testing exception, with no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/snapshots",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the purpose, usage pattern, timing of capture/restore functions, serialization requirements, and the warning about large objects, with only minor formatting simplifications."
+		},
+		{
+			"slug": "kit/shallow-routing",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version incorrectly states that shallow routing allows you to \"Navigate without triggering `load` functions or replacing page components\" when the original clearly states that navigating through history entries \"re-runs any `load` functions and replaces page components as necessary\" - shallow routing creates history entries WITHOUT navigating, not a way to navigate differently."
+		},
+		{
+			"slug": "kit/observability",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including setup, traced components, code examples, and important warnings, with only reasonable condensation of explanatory text."
+		},
+		{
+			"slug": "kit/packaging",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including package.json configuration, TypeScript handling, CLI options, and caveats, with appropriate condensation of examples while preserving technical accuracy."
+		},
+		{
+			"slug": "kit/auth",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the definitions, session vs token tradeoffs, integration points, and Lucia implementation details without any factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/performance",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information, performance tips, and technical details from the original, with appropriate condensation and formatting changes that preserve the core concepts and critical guidance."
+		},
+		{
+			"slug": "kit/icons",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the key points about CSS-based icons via Iconify and the warning against per-icon Svelte component libraries that slow down Vite, with appropriate links preserved."
+		},
+		{
+			"slug": "kit/images",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including setup, usage patterns, configuration details, and best practices, with appropriate condensation of explanatory text while preserving critical technical details and code examples."
+		},
+		{
+			"slug": "kit/accessibility",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including route announcements, focus management, lang attribute configuration, and further reading resources, with appropriate condensation but no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/seo",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including SSR defaults, performance considerations, URL normalization, manual setup requirements, and complete AMP implementation steps with accurate code examples, though reasonably condensed."
+		},
+		{
+			"slug": "kit/faq",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all essential information, code examples, and key concepts from the original while appropriately condensing explanatory text and maintaining technical accuracy."
+		},
+		{
+			"slug": "kit/integrations",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including vitePreprocess functionality, TypeScript requirements, add-ons list, svelte-preprocess differences, and Vite plugins, with appropriate condensation and no factual errors."
+		},
+		{
+			"slug": "kit/debugging",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including setup steps, code examples, limitations, and references, with only minor formatting simplifications that preserve the core content."
+		},
+		{
+			"slug": "kit/migrating-to-sveltekit-2",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all key breaking changes, code examples, and migration steps from the original documentation, with appropriate simplifications and no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/migrating",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key migration steps, API changes, file renames, and code examples from the original documentation without introducing factual errors or omitting critical information."
+		},
+		{
+			"slug": "kit/additional-resources",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version preserves all key information including FAQ links, example repositories, community resources, and support channels with appropriate guidance about searching first, using reasonable condensation without factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/glossary",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information, key concepts, default behaviors, configuration options, and important warnings from the original documentation without introducing factual errors or misleading statements."
+		},
+		{
+			"slug": "kit/@sveltejs-kit",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all essential information from the original documentation, including function signatures, type definitions, important warnings, and version availability notes, with appropriate condensation of verbose descriptions while preserving critical technical details."
+		},
+		{
+			"slug": "kit/@sveltejs-kit-hooks",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the behavior of each option, the complete code example, expected output, and type signature with appropriate simplifications in formatting and structure."
+		},
+		{
+			"slug": "kit/@sveltejs-kit-node-polyfills",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the import path, function purpose, the specific APIs (crypto and File), and the TypeScript definition, with only minor formatting changes."
+		},
+		{
+			"slug": "kit/@sveltejs-kit-node",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including function signatures, parameters, and the version availability note, with only minor formatting changes and reasonable additions of clarifying descriptions."
+		},
+		{
+			"slug": "kit/@sveltejs-kit-vite",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version preserves all essential information including the import statement, function description, and TypeScript signature, with only minor formatting changes that don't affect accuracy."
+		},
+		{
+			"slug": "kit/$app-environment",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the import statement, the meaning of each exported constant, their types, and important caveats, with only minor wording simplifications that preserve accuracy."
+		},
+		{
+			"slug": "kit/$app-forms",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including function purposes, parameters, return types, code examples, and the detailed behavior of the enhance function's default and custom callback options."
+		},
+		{
+			"slug": "kit/$app-navigation",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key information, function signatures, and important behavioral details from the original documentation, with appropriate condensation that preserves essential meaning."
+		},
+		{
+			"slug": "kit/$app-paths",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including function signatures, usage examples, and deprecation notices, with only minor formatting simplifications that preserve the core content."
+		},
+		{
+			"slug": "kit/$app-server",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key information including function signatures, version availability, descriptions, and code examples, with only minor formatting simplifications that preserve the essential content."
+		},
+		{
+			"slug": "kit/$app-state",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the three state objects, their properties, usage examples, the critical runes vs legacy reactivity distinction, and server/browser behavior differences, with only minor formatting simplifications."
+		},
+		{
+			"slug": "kit/$app-stores",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including deprecation notices, functionality of each store, server/browser subscription constraints, and type signatures, with only minor formatting simplifications."
+		},
+		{
+			"slug": "kit/$app-types",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The LayoutParams type definition incorrectly shows \"RouteParams\" instead of \"LayoutParams\" in the distilled version, which is a factual error copied from the original."
+		},
+		{
+			"slug": "kit/$env-dynamic-private",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the key rules about prefix filtering, client-side restriction, usage example, and the dev/prod behavior note."
+		},
+		{
+			"slug": "kit/$env-dynamic-public",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the public prefix requirement, client-side safety, network payload concern, recommendation to prefer static version, and preserves the accurate code example."
+		},
+		{
+			"slug": "kit/$env-static-private",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the static injection behavior, prefix filtering rules, server-only nature, and best practices, with appropriate simplification and reformatting."
+		},
+		{
+			"slug": "kit/$env-static-public",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the PUBLIC_ prefix requirement, configurability, client-side safety, build-time replacement, and preserves the code example accurately."
+		},
+		{
+			"slug": "kit/$lib",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the essential information about the $lib import alias, its default location, configurability, and includes the same code examples demonstrating its usage."
+		},
+		{
+			"slug": "kit/$service-worker",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the module availability, each export's type and purpose, development behavior, and configuration references without introducing factual errors or omitting critical details."
+		},
+		{
+			"slug": "kit/configuration",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential configuration options, defaults, code examples, and important notes from the original documentation, with appropriate condensation and no factual errors or critical omissions."
+		},
+		{
+			"slug": "kit/cli",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including Vite CLI commands, svelte-kit sync functionality, and automatic execution, with only minor simplifications that preserve meaning."
+		},
+		{
+			"slug": "kit/types",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including generated types, helper types, setup requirements, $lib aliases, and app.d.ts interfaces, with appropriate code examples and version-specific details preserved."
+		},
+		{
+			"slug": "mcp/overview",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version preserves all critical information including setup options, the complete usage prompt, and tool descriptions, with only minor formatting simplifications that don't alter meaning."
+		},
+		{
+			"slug": "mcp/local-setup",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including installation commands, configuration examples for each client, and maintains factual accuracy with appropriate condensation of instructional text."
+		},
+		{
+			"slug": "mcp/remote-setup",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly preserves all essential setup instructions, commands, and configuration details for each client while appropriately condensing explanatory text and formatting."
+		},
+		{
+			"slug": "mcp/tools",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all four tools and their essential functions, with only minor formatting changes and reasonable condensation of descriptions."
+		},
+		{
+			"slug": "mcp/resources",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the essential information about the doc-section resource including URI format, return type, and use case, with only minor formatting changes and reasonable simplification."
+		},
+		{
+			"slug": "mcp/prompts",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version omits critical information about the extensive list of available documentation paths with their specific use cases, which is essential for the LLM to know when to invoke the get_documentation tool with the correct path parameter."
+		},
+		{
+			"slug": "svelte/overview",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the essential information about Svelte being a compiler-based framework, preserves the complete code example, and accurately notes the key syntax detail about event handlers and SvelteKit usage."
+		},
+		{
+			"slug": "svelte/getting-started",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including setup commands, alternatives, tooling options, and help resources without introducing factual errors or omitting critical details."
+		},
+		{
+			"slug": "svelte/svelte-files",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including component structure, script behaviors, module-level logic, scoping rules, and includes the key code examples, with only minor formatting simplifications and removal of non-critical notes."
+		},
+		{
+			"slug": "svelte/svelte-js-files",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the file types, their behavior, use cases, and the critical limitation about exporting reassigned state."
+		},
+		{
+			"slug": "svelte/what-are-runes",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information about runes including their purpose, syntax, and three key characteristics, with only the etymology note and legacy information reasonably omitted."
+		},
+		{
+			"slug": "svelte/$state",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including key concepts, code examples, gotchas, and the two options for sharing state across modules, with appropriate simplifications and no factual errors."
+		},
+		{
+			"slug": "svelte/$derived",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key concepts including $derived, $derived.by, dependencies, overriding values, reactivity behavior, destructuring, and update propagation with correct code examples and essential details preserved."
+		},
+		{
+			"slug": "svelte/$effect",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key concepts, correctly represents the code examples, maintains critical warnings about when not to use effects, and preserves the essential technical details about lifecycle, dependencies, and the various effect runes."
+		},
+		{
+			"slug": "svelte/$props",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including props usage, fallback values, renaming, rest props, updating behavior with warnings about mutation, type safety examples, and $props.id() functionality, with appropriate condensation of examples while preserving core concepts."
+		},
+		{
+			"slug": "svelte/$bindable",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the bidirectional data flow concept, $bindable syntax, usage examples, fallback values, and the warning about sparing use, with only minor formatting changes."
+		},
+		{
+			"slug": "svelte/$inspect",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including development-only behavior, deep reactivity tracking, the `.with()` method signature, `$inspect.trace()` requirements, and preserves critical details like the first-statement requirement and optional label parameter."
+		},
+		{
+			"slug": "svelte/$host",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the essential information about the $host rune, preserves the code examples accurately, and adds helpful key points without introducing any factual errors or contradictions."
+		},
+		{
+			"slug": "svelte/basic-markup",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including tags, attributes, props, events, delegation, text expressions, and comments with accurate technical details and no misleading omissions."
+		},
+		{
+			"slug": "svelte/if",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including syntax, examples, and the note about blocks wrapping elements or text, with only minor formatting improvements."
+		},
+		{
+			"slug": "svelte/each",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including syntax, keyed blocks, destructuring, itemless iteration, and else clauses with appropriate examples and explanations."
+		},
+		{
+			"slug": "svelte/key",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including syntax, core behavior (destroy/recreate on change), and both key use cases (component reinstantiation and transition replay) with accurate code examples."
+		},
+		{
+			"slug": "svelte/await",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version incorrectly states that omitting the catch block is a \"shorthand pattern\" when the original shows this requires omitting the initial pending block as well, and it fails to mention that the catch block can be omitted while keeping the pending block."
+		},
+		{
+			"slug": "svelte/snippet",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including syntax, scope rules, component passing methods, TypeScript typing, exporting capabilities, and the key restrictions, with appropriate condensation of examples while preserving core concepts."
+		},
+		{
+			"slug": "svelte/@render",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version preserves all key information including syntax, code examples, optional chaining usage, and fallback patterns with only minor formatting changes and reasonable simplifications."
+		},
+		{
+			"slug": "svelte/@html",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version incorrectly shows `article :global` (with a space) instead of `article :global(*)` or the nested syntax shown in the original, which would target different elements than intended."
+		},
+		{
+			"slug": "svelte/@attach",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including basic usage, attachment factories, inline attachments, component passing, reactivity control, and utility functions, with appropriate code examples and key concepts preserved."
+		},
+		{
+			"slug": "svelte/@const",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the essential information about {@const} tag usage, its purpose, code example, and placement restrictions, with only minor formatting differences."
+		},
+		{
+			"slug": "svelte/@debug",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the core functionality, syntax rules, valid/invalid examples, and the no-arguments behavior, with only minor formatting improvements."
+		},
+		{
+			"slug": "svelte/bind",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including syntax, binding types, version-specific features, and important notes/warnings, with appropriate condensation of examples while preserving core concepts."
+		},
+		{
+			"slug": "svelte/use",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the note about attachments, action syntax, argument usage, the key behavior that actions don't re-run on argument changes, and typing details, with only minor formatting simplifications."
+		},
+		{
+			"slug": "svelte/transition",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including transition behavior, local vs global distinctions, parameters, custom functions with css/tick details, and transition events, with appropriate condensation but no factual errors or critical omissions."
+		},
+		{
+			"slug": "svelte/in-and-out",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the key concepts of non-bidirectional behavior, simultaneous play of in/out transitions, and restart behavior when aborted, with the same code example preserved."
+		},
+		{
+			"slug": "svelte/animate",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including animation triggers, usage patterns, custom function signatures, and the distinction between css and tick methods, with appropriate simplifications and no factual errors."
+		},
+		{
+			"slug": "svelte/style",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including basic usage, expressions, shorthand form, multiple styles, important modifier, and precedence rules with accurate code examples."
+		},
+		{
+			"slug": "svelte/class",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the two ways to set classes, version-specific features, code examples, and the recommendation to prefer the class attribute over the class: directive."
+		},
+		{
+			"slug": "svelte/await-expressions",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the experimental flag configuration, synchronized updates behavior, concurrency rules, loading state handling, error handling, SSR support, and caveats, with appropriate code examples preserved."
+		},
+		{
+			"slug": "svelte/scoped-styles",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including scoped styles, specificity increases, :where() usage, and scoped keyframes with accurate technical details and preserved code examples."
+		},
+		{
+			"slug": "svelte/global-styles",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version preserves all essential information including syntax, examples, and key concepts about global styling and keyframes, with only minor formatting changes and removal of a non-critical note about alternative selector syntax."
+		},
+		{
+			"slug": "svelte/custom-properties",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including syntax, desugaring behavior, SVG handling, var() usage with fallbacks, inheritance, and the CSS selector gotcha, with only minor formatting changes."
+		},
+		{
+			"slug": "svelte/nested-style-elements",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all key information including the one top-level style tag limit, nested style tag behavior, lack of scoping/processing for nested tags, and preserves the illustrative code example."
+		},
+		{
+			"slug": "svelte/svelte-boundary",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version incorrectly states that boundaries only catch errors during \"top-level $effect\" when the original says \"running effects\" more broadly, and it omits the critical note about the playground's built-in boundary behavior for the pending snippet."
+		},
+		{
+			"slug": "svelte/svelte-window",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including syntax, rules, event listener usage, bindable properties with their readonly/writable distinctions, and the important scrolling behavior note."
+		},
+		{
+			"slug": "svelte/svelte-document",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including syntax, usage constraints, event handling, actions support, and the four readonly bindable properties without any factual errors or critical omissions."
+		},
+		{
+			"slug": "svelte/svelte-body",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including syntax, usage, supported features (events and actions), and the critical constraint about top-level placement."
+		},
+		{
+			"slug": "svelte/svelte-head",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including functionality, SSR behavior, placement restrictions, and preserves the code example accurately."
+		},
+		{
+			"slug": "svelte/svelte-element",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including usage, limitations, void element behavior, nullish handling, namespace requirements, and valid tag restrictions without any factual errors or critical omissions."
+		},
+		{
+			"slug": "svelte/svelte-options",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version omits critical information about deprecated Svelte 4 options (immutable and accessors) and removes important reference links to the compiler section, Legacy APIs section, and custom elements component options documentation."
+		},
+		{
+			"slug": "svelte/stores",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all essential information including the $ prefix syntax, when to use stores vs runes in Svelte 5, all API methods with correct examples, and the store contract requirements without any factual errors or critical omissions."
+		},
+		{
+			"slug": "svelte/context",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version incorrectly shows `counter.count = 0` in the \"Correct\" example when the original uses `+++counter.count = 0+++` (which appears to be markup indicating emphasis, but the actual code should be `counter.count = 0`), and more critically, it omits the important context about when Parent.svelte renders Child.svelte as part of a children snippet, which is described as \"particularly useful\" in the original."
+		},
+		{
+			"slug": "svelte/lifecycle-hooks",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including lifecycle concepts, API usage, server-side behavior notes, cleanup patterns, the deprecation of beforeUpdate/afterUpdate, and the chat autoscroll example with accurate code."
+		},
+		{
+			"slug": "svelte/imperative-component-api",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including API signatures, key behavioral differences from Svelte 4, return values, and critical notes about effects and flushSync, with only minor formatting improvements."
+		},
+		{
+			"slug": "svelte/testing",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version preserves all critical information, code examples, and key concepts from the original while appropriately condensing explanatory text and maintaining technical accuracy."
+		},
+		{
+			"slug": "svelte/typescript",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including TypeScript setup, limitations, configuration requirements, typing patterns, and code examples, with appropriate condensation but no factual errors or critical omissions."
+		},
+		{
+			"slug": "svelte/custom-elements",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all essential information including lifecycle behavior, component options, usage patterns, and caveats, with appropriate condensation and preserved code examples."
+		},
+		{
+			"slug": "svelte/v4-migration-guide",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key migration information, requirements, code examples, and breaking changes from the original documentation, with appropriate condensation and formatting that preserves the essential technical details."
+		},
+		{
+			"slug": "svelte/v5-migration-guide",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key migration information, breaking changes, and code examples from the original documentation, with appropriate condensation while preserving critical technical details and warnings."
+		},
+		{
+			"slug": "svelte/faq",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information from the original, with appropriate condensation of explanations while preserving key facts, links, code examples, and critical details like the Svelte Native limitation in Svelte 5."
+		},
+		{
+			"slug": "svelte/svelte",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information, properly marks deprecated features, preserves critical code examples and type signatures, and accurately represents the migration guidance from Svelte 4 to Svelte 5."
+		},
+		{
+			"slug": "svelte/svelte-action",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version incorrectly states \"Use `use:` directive to apply them\" which is not mentioned in the original documentation and could be misleading since the original explicitly states actions have been superseded by attachments."
+		},
+		{
+			"slug": "svelte/svelte-animate",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly preserves all key information including the flip function signature, its purpose, the FLIP acronym explanation, and complete interface definitions for AnimationConfig and FlipParams."
+		},
+		{
+			"slug": "svelte/svelte-attachments",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version omits the critical \"Available since 5.29\" version information for createAttachmentKey, which is essential for developers to know compatibility requirements."
+		},
+		{
+			"slug": "svelte/svelte-compiler",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including function signatures, key options with defaults, type definitions, and important notes about deprecations and version changes, with appropriate simplifications that preserve meaning."
+		},
+		{
+			"slug": "svelte/svelte-easing",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the import path, function signature, all available easing functions with their variants, and adds helpful context about the parameter/return value ranges and easing types without introducing any factual errors."
+		},
+		{
+			"slug": "svelte/svelte-events",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the essential functionality, key benefit, and API usage, with the type signatures reasonably simplified into a single generic form that encompasses all the specific overloads shown in the original."
+		},
+		{
+			"slug": "svelte/svelte-legacy",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all key functions, their purposes, and type signatures while appropriately condensing descriptions and maintaining the deprecated/temporary nature of the module."
+		},
+		{
+			"slug": "svelte/svelte-motion",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including API signatures, key properties, methods, availability dates, deprecation notices, and code examples, with appropriate simplifications that preserve the core concepts."
+		},
+		{
+			"slug": "svelte/svelte-reactivity-window",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the reactive nature, usage examples, all exports, server-side behavior, and critical implementation details like browser differences and requestAnimationFrame updates."
+		},
+		{
+			"slug": "svelte/svelte-reactivity",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key information, including API signatures, critical warnings (SSR/hydration, deep reactivity), and complete code examples, with only minor formatting simplifications."
+		},
+		{
+			"slug": "svelte/svelte-server",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version incorrectly simplifies the type signature by removing the conditional types that make props required when the component has required props (the `{} extends Props` conditional logic and the two different function overloads)."
+		},
+		{
+			"slug": "svelte/svelte-store",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential functions, their signatures, and key type definitions with appropriate simplifications to descriptions while maintaining technical accuracy."
+		},
+		{
+			"slug": "svelte/svelte-transition",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including function signatures, parameters, behavior descriptions, and type definitions, with only minor formatting simplifications and reasonable condensation of explanatory text."
+		},
+		{
+			"slug": "svelte/compiler-errors",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key error messages, their meanings, and critical code examples while appropriately condensing the content without introducing factual errors or misleading information."
+		},
+		{
+			"slug": "svelte/compiler-warnings",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version accurately captures all key warnings with their essential information, code examples, and solutions, using appropriate condensation while preserving critical details for developers."
+		},
+		{
+			"slug": "svelte/runtime-errors",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version contains a syntax error in the effect_update_depth_exceeded section with an extra closing brace (`});` appears twice), which would mislead developers trying to understand the code example."
+		},
+		{
+			"slug": "svelte/runtime-warnings",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all key warnings with their essential explanations and code examples, using reasonable condensation while preserving critical technical details and fixes."
+		},
+		{
+			"slug": "svelte/legacy-overview",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the key information about Svelte 5 changes, the two modes, and the reference to v4 documentation, with only minor simplifications that preserve the essential meaning."
+		},
+		{
+			"slug": "svelte/legacy-let",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the auto-reactive nature of top-level variables, the array methods gotcha, and preserves the code examples accurately, with only minor formatting changes for condensation."
+		},
+		{
+			"slug": "svelte/legacy-reactive-assignments",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including basic usage, topological ordering, dependencies, gotchas, and browser-only code, with appropriate simplifications and no factual errors."
+		},
+		{
+			"slug": "svelte/legacy-export-let",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including prop declaration syntax, default value behavior, the critical difference about undefined values not reverting, component exports, and prop renaming, with appropriate code examples preserved."
+		},
+		{
+			"slug": "svelte/legacy-$$props-and-$$restProps",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the distinction between legacy and runes mode, the definitions of $$props and $$restProps, the complete code example, and the performance warning."
+		},
+		{
+			"slug": "svelte/legacy-on",
+			"status": "NOT_ACCURATE",
+			"reasoning": "The distilled version omits the legacy createEventDispatcher implementation details and example usage that are still part of the current documentation, which could mislead developers who need to work with existing code using that pattern."
+		},
+		{
+			"slug": "svelte/legacy-slots",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including basic slots, named slots, fallback content, and passing data to slots, with appropriate code examples and no factual errors or critical omissions."
+		},
+		{
+			"slug": "svelte/legacy-$$slots",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the essential information about $$slots in legacy mode, preserves the code examples intact, and appropriately notes the runes mode alternative, with only minor formatting changes."
+		},
+		{
+			"slug": "svelte/legacy-svelte-fragment",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures the essential functionality, preserves the complete code examples, and accurately conveys the Svelte 5+ obsolescence note, with only minor acceptable formatting changes."
+		},
+		{
+			"slug": "svelte/legacy-svelte-component",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all key information including the legacy mode behavior, runes mode alternative, and the falsy condition, with appropriate reorganization for clarity."
+		},
+		{
+			"slug": "svelte/legacy-svelte-self",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including the recursive functionality, the requirement to prevent infinite loops, the code example, and the obsolescence note with the self-import alternative."
+		},
+		{
+			"slug": "svelte/legacy-component-api",
+			"status": "ACCURATE",
+			"reasoning": "The distilled version correctly captures all essential information including API methods, options tables, key behaviors (async vs sync updates), and Svelte 5 migration notes, with appropriate condensation of explanatory text while preserving critical technical details."
+		}
+	]
+}
diff --git a/packages/mcp-server/src/distilled.json b/packages/mcp-server/src/distilled.json
new file mode 100644
index 00000000..58103733
--- /dev/null
+++ b/packages/mcp-server/src/distilled.json
@@ -0,0 +1,356 @@
+{
+	"generated_at": "2025-10-14T19:10:20.969Z",
+	"model": "claude-sonnet-4-5-20250929",
+	"total_sections": 173,
+	"successful_summaries": 173,
+	"summaries": {
+		"cli/overview": "# CLI (`sv`)\n\nToolkit for creating and maintaining Svelte applications.\n\n## Usage\n\nRun with `npx` (or `pnpx` for pnpm):\n\n```sh\nnpx sv <command> <args>\n```\n\nUses local installation if available, otherwise downloads latest version without installing.",
+		"cli/faq": "# sv CLI\n\n## Running sv CLI\n\n```bash\nnpm:  npx sv create\npnpm: pnpx sv create / pnpm dlx sv create\nbun:  bunx sv create\ndeno: deno run npm:sv create\nyarn: yarn dlx sv create\n```\n\n## Troubleshooting\n\nIf `npx sv` doesn't work, package managers may prioritize local tools over registry packages. Common issues:\n- Command does nothing\n- Name collision with `runit` \n- Windows PowerShell conflict with `Set-Variable`\n\nSee: [GitHub issues #472](https://github.com/sveltejs/cli/issues/472), [#259](https://github.com/sveltejs/cli/issues/259), [#317](https://github.com/sveltejs/cli/issues/317)",
+		"cli/sv-create": "# sv create\n\nSets up a new SvelteKit project with optional additional functionality.\n\n## Usage\n\n```sh\nnpx sv create [options] [path]\n```\n\n## Options\n\n### `--from-playground <url>`\nCreate project from a [playground](/playground) URL. Downloads files, detects dependencies, and sets up complete project structure.\n\n```sh\nnpx sv create --from-playground=\"https://svelte.dev/playground/hello-world\"\n```\n\n### `--template <name>`\n- `minimal` — barebones scaffolding\n- `demo` — showcase app with word guessing game (works without JS)\n- `library` — Svelte library template with `svelte-package`\n\n### `--types <option>`\n- `ts` — `.ts` files and `lang=\"ts\"` in `.svelte` components\n- `jsdoc` — [JSDoc syntax](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) for types\n\n### `--no-types`\nDisable typechecking (not recommended)\n\n### `--no-add-ons`\nSkip interactive add-ons prompt\n\n### `--install <package-manager>`\nInstall dependencies with: `npm`, `pnpm`, `yarn`, `bun`, or `deno`\n\n### `--no-install`\nSkip dependency installation",
+		"cli/sv-add": "# sv add\n\nAdds functionality to existing Svelte projects.\n\n## Usage\n\n```sh\nnpx sv add\n```\n\n```sh\nnpx sv add [add-ons]\n```\n\nSelect multiple space-separated add-ons or use interactive prompt.\n\n## Options\n\n- `-C`, `--cwd` — path to project root\n- `--no-git-check` — skip dirty files prompt\n- `--install` — install dependencies with specified package manager\n- `--no-install` — skip dependency installation\n\n## Official add-ons\n\n- `devtools-json`\n- `drizzle`\n- `eslint`\n- `lucia`\n- `mdsvex`\n- `paraglide`\n- `playwright`\n- `prettier`\n- `storybook`\n- `sveltekit-adapter`\n- `tailwindcss`\n- `vitest`",
+		"cli/sv-check": "# sv check\n\nFinds errors and warnings in your project: unused CSS, accessibility hints, JS/TS compiler errors.\n\nRequires Node 16+.\n\n## Installation\n\n```sh\nnpm i -D svelte-check\n```\n\n## Usage\n\n```sh\nnpx sv check\n```\n\n## Options\n\n### `--workspace <path>`\nPath to workspace. Checks all subdirectories except `node_modules` and ignored paths.\n\n### `--output <format>`\nDisplay format: `human`, `human-verbose`, `machine`, `machine-verbose`\n\n### `--watch`\nWatch mode for changes.\n\n### `--preserveWatchOutput`\nDon't clear screen in watch mode.\n\n### `--tsconfig <path>`\nPath to `tsconfig`/`jsconfig`. Only files matched by config's `files`/`include`/`exclude` are checked. Reports errors from TS/JS files. If not provided, searches upward from project directory.\n\n### `--no-tsconfig`\nOnly check Svelte files, ignore `.js`/`.ts` files.\n\n### `--ignore <paths>`\nComma-separated quoted paths relative to workspace root:\n\n```sh\nnpx sv check --ignore \"dist,build\"\n```\n\nOnly effective with `--no-tsconfig` for diagnostics. With `--tsconfig`, only affects watched files.\n\n### `--fail-on-warnings`\nExit with error code on warnings.\n\n### `--compiler-warnings <warnings>`\nComma-separated `code:behaviour` pairs (`ignore` or `error`):\n\n```sh\nnpx sv check --compiler-warnings \"css_unused_selector:ignore,a11y_missing_attribute:error\"\n```\n\n### `--diagnostic-sources <sources>`\nComma-separated sources (default: all active):\n- `js` (includes TypeScript)\n- `svelte`\n- `css`\n\n```sh\nnpx sv check --diagnostic-sources \"js,svelte\"\n```\n\n### `--threshold <level>`\nFilter diagnostics:\n- `warning` (default) — errors and warnings\n- `error` — only errors\n\n## Machine-readable output\n\n`--output machine` or `machine-verbose` formats output for CI/automation.\n\nEach row: columns separated by single space. First column: timestamp (ms). Second column: row type.\n\n**START row:** workspace folder (quoted)\n```\n1590680325583 START \"/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles\"\n```\n\n**machine format:** filename, line, column, message (quoted)\n```\n1590680326283 ERROR \"codeactions.svelte\" 1:16 \"Cannot find module 'blubb' or its corresponding type declarations.\"\n1590680326778 WARNING \"imported-file.svelte\" 0:37 \"Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`\"\n```\n\n**machine-verbose format:** ndjson with timestamp prefix\n```\n1590680326283 {\"type\":\"ERROR\",\"fn\":\"codeaction.svelte\",\"start\":{\"line\":1,\"character\":16},\"end\":{\"line\":1,\"character\":23},\"message\":\"Cannot find module 'blubb' or its corresponding type declarations.\",\"code\":2307,\"source\":\"js\"}\n1590680326778 {\"type\":\"WARNING\",\"filename\":\"imported-file.svelte\",\"start\":{\"line\":0,\"character\":37},\"end\":{\"line\":0,\"character\":51},\"message\":\"Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`\",\"code\":\"unused-export-let\",\"source\":\"svelte\"}\n```\n\n**COMPLETED row:** summary\n```\n1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS\n```\n\n**FAILURE row:** runtime errors\n```\n1590680328921 FAILURE \"Connection closed\"\n```\n\n## FAQ\n\n**Why no option to check only specific files?**\n`svelte-check` needs the whole project for valid checks. Partial checks miss errors in unchanged files (e.g., renamed prop not updated at usage sites).",
+		"cli/sv-migrate": "# sv migrate\n\nCLI tool for migrating Svelte(Kit) codebases. Delegates to [`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate).\n\nMay add `@migration` task annotations in code for manual completion.\n\n## Usage\n\n```sh\nnpx sv migrate\n```\n\nOr specify migration:\n```sh\nnpx sv migrate [migration]\n```\n\n## Migrations\n\n### `app-state`\nMigrates `$app/stores` → `$app/state` in `.svelte` files. [Details](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated)\n\n### `svelte-5`\nUpgrades Svelte 4 → 5, converts components to [runes](../svelte/what-are-runes) syntax. [Migration guide](../svelte/v5-migration-guide)\n\n### `self-closing-tags`\nReplaces self-closing non-void elements. [PR](https://github.com/sveltejs/kit/pull/12128)\n\n### `svelte-4`\nUpgrades Svelte 3 → 4. [Migration guide](../svelte/v4-migration-guide)\n\n### `sveltekit-2`\nUpgrades SvelteKit 1 → 2. [Migration guide](../kit/migrating-to-sveltekit-2)\n\n### `package`\nUpgrades `@sveltejs/package` v1 → v2. [PR](https://github.com/sveltejs/kit/pull/8922)\n\n### `routes`\nUpgrades pre-release SvelteKit to v1 filesystem routing. [Discussion](https://github.com/sveltejs/kit/discussions/5774)",
+		"cli/devtools-json": "# devtools-json Add-on\n\nInstalls [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json/) - a Vite plugin that generates a Chromium DevTools settings file at `/.well-known/appspecific/com.chrome.devtools.json`. Enables [workspaces feature](https://developer.chrome.com/docs/devtools/workspaces) to edit source files directly in Chromium browsers.\n\n> [!NOTE]\n> Enables feature for all dev server users with Chromium browsers. Allows browser to read/write all files in directory. Chrome's AI Assistance may send data to Google.\n\n## Alternatives\n\n**Disable in browser:** Visit `chrome://flags` and disable \"DevTools Project Settings\" and \"DevTools Automatic Workspace Folders\".\n\n**Handle request manually:** Create `.well-known/appspecific/com.chrome.devtools.json` file or add to `handle` hook:\n\n```js\n/// file: src/hooks.server.js\nimport { dev } from '$app/environment';\n\nexport function handle({ event, resolve }) {\n\tif (dev && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {\n\t\treturn new Response(undefined, { status: 404 });\n\t}\n\n\treturn resolve(event);\n}\n```\n\n## Usage\n\n```sh\nnpx sv add devtools-json\n```\n\nAdds `vite-plugin-devtools-json` to Vite config.",
+		"cli/drizzle": "# Drizzle ORM\n\nTypeScript ORM with relational and SQL-like query APIs, serverless-ready.\n\n## Setup\n\n```sh\nnpx sv add drizzle\n```\n\n**Includes:**\n- Database access in SvelteKit server files\n- `.env` for credentials\n- Lucia auth compatibility\n- Optional Docker config for local database\n\n## Options\n\n### database\nChoose database variant:\n- `postgresql` — popular open source\n- `mysql` — popular open source  \n- `sqlite` — file-based, no server needed\n\n```sh\nnpx sv add drizzle=database:postgresql\n```\n\n### client\nSQL client (depends on database):\n- **postgresql**: `postgres.js`, `neon`\n- **mysql**: `mysql2`, `planetscale`\n- **sqlite**: `better-sqlite3`, `libsql`, `turso`\n\n```sh\nnpx sv add drizzle=database:postgresql+client:postgres.js\n```\n\n*Note: Can swap for [other Drizzle-compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps) after setup*\n\n### docker\nAdd Docker Compose config (postgresql/mysql only):\n\n```sh\nnpx sv add drizzle=database:postgresql+client:postgres.js+docker:yes\n```",
+		"cli/eslint": "# ESLint\n\nLints and fixes code problems.\n\n## Setup\n\n```sh\nnpx sv add eslint\n```\n\nInstalls:\n- `eslint-plugin-svelte`\n- `eslint.config.js`\n- Updated `.vscode/settings.json`\n- Auto-configured for TypeScript and Prettier if present",
+		"cli/lucia": "# Lucia Auth\n\nAuth setup following [Lucia auth guide](https://lucia-auth.com/).\n\n## Usage\n\n```sh\nnpx sv add lucia\n```\n\nAdds auth setup for SvelteKit + Drizzle following Lucia best practices.\n\n## Options\n\n**demo** - Include demo registration/login pages:\n```sh\nnpx sv add lucia=demo:yes\n```",
+		"cli/mdsvex": "# mdsvex\n\n[mdsvex](https://mdsvex.pngwn.io) is a markdown preprocessor for Svelte - allows using Svelte components in markdown and vice versa.\n\n## Installation\n\n```sh\nnpx sv add mdsvex\n```\n\nInstalls and configures mdsvex in `svelte.config.js`.",
+		"cli/paraglide": "# Paraglide i18n\n\nCompiler-based i18n library with tree-shakable messages, small bundles, type-safety.\n\n## Installation\n\n```sh\nnpx sv add paraglide\n```\n\n## Includes\n\n- Inlang project settings\n- Paraglide Vite plugin\n- SvelteKit `reroute` and `handle` hooks\n- `text-direction` and `lang` attributes in `app.html`\n- Updated `.gitignore`\n- Optional demo page\n\n## Options\n\n**languageTags** - IETF BCP 47 language tags:\n```sh\nnpx sv add paraglide=\"languageTags:en,es\"\n```\n\n**demo** - Generate demo page:\n```sh\nnpx sv add paraglide=\"demo:yes\"\n```",
+		"cli/playwright": "# Playwright\n\nBrowser testing with [Playwright](https://playwright.dev).\n\n## Usage\n\n```sh\nnpx sv add playwright\n```\n\nAdds:\n- Test scripts to `package.json`\n- Playwright config file\n- Updated `.gitignore`\n- Demo test",
+		"cli/prettier": "# Prettier\n\nOpinionated code formatter for Svelte projects.\n\n## Usage\n\n```sh\nnpx sv add prettier\n```\n\n## Adds\n\n- `package.json` scripts\n- `.prettierignore` and `.prettierrc` config files\n- ESLint config updates (if ESLint installed)",
+		"cli/storybook": "# Storybook\n\nComponent workshop for Svelte/SvelteKit.\n\n## Installation\n\n```sh\nnpx sv add storybook\n```\n\n## Features\n\n- Runs `npx storybook init` automatically\n- Configures either [Storybook for SvelteKit](https://storybook.js.org/docs/get-started/frameworks/sveltekit) or [Storybook for Svelte & Vite](https://storybook.js.org/docs/get-started/frameworks/svelte-vite)\n- Includes SvelteKit module mocking and automatic link handling",
+		"cli/sveltekit-adapter": "# SvelteKit Adapters\n\nAdapters enable deployment to various platforms.\n\n## Usage\n\n```sh\nnpx sv add sveltekit-adapter\n```\n\nInstalls and configures chosen adapter in `svelte.config.js`.\n\n## Adapter Options\n\n- `auto` — [`@sveltejs/adapter-auto`](/docs/kit/adapter-auto) - auto-selects adapter, less configurable\n- `node` — [`@sveltejs/adapter-node`](/docs/kit/adapter-node) - standalone Node server\n- `static` — [`@sveltejs/adapter-static`](/docs/kit/adapter-static) - static site generator (SSG)\n- `vercel` — [`@sveltejs/adapter-vercel`](/docs/kit/adapter-vercel) - Vercel deployment\n- `cloudflare` — [`@sveltejs/adapter-cloudflare`](/docs/kit/adapter-cloudflare) - Cloudflare deployment\n- `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) - Netlify deployment\n\n```sh\nnpx sv add sveltekit-adapter=adapter:node\n```",
+		"cli/tailwind": "# Tailwind CSS\n\n## Setup\n\n```sh\nnpx sv add tailwindcss\n```\n\n## What's Installed\n\n- Tailwind config following SvelteKit guide\n- Tailwind Vite plugin\n- Updated `app.css` and `+layout.svelte` (SvelteKit) or `App.svelte` (Vite)\n- Prettier integration (if installed)\n\n## Options\n\nAdd plugins via CLI:\n\n```sh\nnpx sv add tailwindcss=\"plugins:typography\"\n```\n\nAvailable plugins:\n- `typography` — [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography)\n- `forms` — [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)",
+		"cli/vitest": "# Vitest\n\nVite-native testing framework for SvelteKit.\n\n## Setup\n\n```sh\nnpx sv add vitest\n```\n\nInstalls packages, adds scripts to `package.json`, configures client/server-aware Svelte testing in Vite config, and includes demo tests.",
+		"kit/introduction": "# SvelteKit Introduction\n\n## What is SvelteKit?\n\nFramework for building robust, performant web apps using Svelte. Similar to Next (React) or Nuxt (Vue).\n\n## What is Svelte?\n\nUI component framework. Compiler converts components to JavaScript (renders HTML) and CSS. Components handle user interfaces like navigation bars, forms, etc.\n\n## SvelteKit vs Svelte\n\n**Svelte**: Renders UI components only.\n\n**SvelteKit**: Full-featured framework providing:\n- Router\n- [Build optimizations](https://vitejs.dev/guide/features.html#build-optimizations) - minimal code loading\n- [Offline support](service-workers)\n- [Preloading](link-options#data-sveltekit-preload-data) - fetch before navigation\n- [Configurable rendering](page-options):\n  - [SSR](glossary#SSR) - server-side rendering\n  - [CSR](glossary#CSR) - client-side rendering  \n  - [Prerendering](glossary#Prerendering) - build-time rendering\n- [Image optimization](images)\n- [Vite](https://vitejs.dev/) + [HMR](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#hot) for instant dev updates\n\nSee [project types](project-types) for application examples.",
+		"kit/creating-a-project": "# Getting Started\n\n## Quick Start\n\n```sh\nnpx sv create my-app\ncd my-app\nnpm run dev\n```\n\n- `npx sv create` scaffolds project with optional TypeScript setup\n- `npm run dev` starts dev server at [localhost:5173](http://localhost:5173)\n\n## Core Concepts\n\n- **Pages** = Svelte components\n- **Routing** = Files in `src/routes/` directory\n- **Rendering** = Server-rendered first visit, then client-side app\n\n## Editor Setup\n\nRecommended: [VS Code](https://code.visualstudio.com/download) + [Svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)",
+		"kit/project-types": "# Rendering & Deployment\n\nSvelteKit supports multiple rendering modes and deployment targets. Rendering is controlled by your adapter choice and configuration. Project structure and routing remain the same across all types.\n\n## Default Rendering\n\n- First page: [SSR](glossary#SSR) (server-side rendering)\n- Subsequent pages: [CSR](glossary#CSR) (client-side rendering)\n- Benefits: Better SEO, faster navigation, no flash between pages\n- Also called \"transitional apps\"\n\n## Static Site Generation (SSG)\n\n- Use [`adapter-static`](adapter-static) to prerender entire site\n- Or use [prerender option](page-options#prerender) for specific pages only\n- For very large sites: Use [ISR with `adapter-vercel`](adapter-vercel#Incremental-Static-Regeneration)\n- Can mix rendering types across pages\n\n## Single-Page App (SPA)\n\n- CSR only\n- See [single-page apps guide](single-page-apps)\n- Skip `server` file documentation if no backend needed\n\n## Multi-Page App (MPA)\n\n- Not typical for SvelteKit\n- Use [`csr = false`](page-options#csr) to remove JS and force server rendering\n- Or use [`data-sveltekit-reload`](link-options#data-sveltekit-reload) for specific server-rendered links\n\n## Separate Backend\n\nIf backend is in another language (Go, Java, PHP, Ruby, Rust, C#):\n- **Recommended**: Deploy frontend separately with `adapter-node` or serverless adapter\n- Alternative: Deploy as SPA served by backend (worse SEO/performance)\n- Skip `server` file docs\n- See [FAQ on external backends](faq#How-do-I-use-a-different-backend-API-server)\n\n## Deployment Targets\n\n**Serverless**: \n- [adapter-auto](adapter-auto) (zero config)\n- [`adapter-vercel`](adapter-vercel), [`adapter-netlify`](adapter-netlify), [`adapter-cloudflare`](adapter-cloudflare)\n- Some support `edge` option for [edge rendering](glossary#Edge)\n\n**Your Server/VPS**: [`adapter-node`](adapter-node)\n\n**Container**: [`adapter-node`](adapter-node) for Docker/LXC\n\n**Library**: Use [`@sveltejs/package`](packaging) with [`sv create`](/docs/cli/sv-create)\n\n**Offline/PWA**: Full [service worker](service-workers) support\n\n**Mobile**: Convert SPA with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte)\n- Use [`bundleStrategy: 'single'`](configuration#output) to reduce requests (helpful for HTTP/1 servers)\n\n**Desktop**: Convert SPA with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/), [Wails](https://wails.io/docs/guides/sveltekit/), or [Electron](https://www.electronjs.org/)\n\n**Browser Extension**: Use [`adapter-static`](adapter-static) or [community adapters](/packages#sveltekit-adapters)\n\n**Embedded Devices**: Svelte runs on low-power devices. Use [`bundleStrategy: 'single'`](configuration#output) to limit concurrent connections",
+		"kit/project-structure": "# SvelteKit Project Structure\n\n## Directory Structure\n\n```tree\nmy-project/\n├ src/\n│ ├ lib/\n│ │ ├ server/          # Server-only code\n│ │ └ [lib files]      # Utilities/components\n│ ├ params/            # Param matchers\n│ ├ routes/            # App routes\n│ ├ app.html           # Page template\n│ ├ error.html         # Error page\n│ ├ hooks.client.js\n│ ├ hooks.server.js\n│ ├ service-worker.js\n│ └ instrumentation.server.js\n├ static/              # Static assets\n├ tests/\n├ package.json\n├ svelte.config.js\n├ tsconfig.json\n└ vite.config.js\n```\n\n## Key Directories\n\n### src/lib\n- Import via `$lib` alias\n- `lib/server`: Server-only code, import via `$lib/server`. Client imports are blocked.\n\n### src/routes\nContains app routes and colocated components.\n\n### src/params\nParam matchers for advanced routing.\n\n## Key Files\n\n### app.html\nPage template with placeholders:\n- `%sveltekit.head%` - `<link>`, `<script>`, `<svelte:head>` content\n- `%sveltekit.body%` - Rendered markup (must be inside `<div>`, not directly in `<body>`)\n- `%sveltekit.assets%` - `paths.assets` or relative to `paths.base`\n- `%sveltekit.nonce%` - CSP nonce\n- `%sveltekit.env.[NAME]%` - Environment variables (must start with `publicPrefix`, usually `PUBLIC_`)\n- `%sveltekit.version%` - App version\n\n### error.html\nFallback error page with placeholders:\n- `%sveltekit.status%` - HTTP status\n- `%sveltekit.error.message%` - Error message\n\n### hooks.client.js / hooks.server.js\nClient and server hooks.\n\n### service-worker.js\nService worker code.\n\n### instrumentation.server.js\nObservability setup. Runs before app code (requires adapter support).\n\n### package.json\nMust include `@sveltejs/kit`, `svelte`, `vite` as `devDependencies`.\nMust have `\"type\": \"module\"` (`.cjs` for CommonJS).\n\n### svelte.config.js\nSvelte and SvelteKit configuration.\n\n### tsconfig.json\nTypeScript config. Extends generated `.svelte-kit/tsconfig.json`. Use `typescript.config` setting for top-level changes.\n\n### vite.config.js\nVite config using `@sveltejs/kit/vite` plugin.\n\n## Other\n\n### static/\nStatic assets served as-is (e.g., `robots.txt`, `favicon.png`).\n\n### .svelte-kit/\nGenerated files (configurable via `outDir`). Can be deleted and regenerated.",
+		"kit/web-standards": "# Web APIs\n\nSvelteKit builds on standard Web APIs. These work in modern browsers and non-browser environments (Cloudflare Workers, Deno, Vercel Functions, Node via polyfills).\n\n## Fetch APIs\n\n[`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) is available in hooks, server routes, and browser.\n\n> [!NOTE] \n> Special `fetch` in `load` functions, server hooks, and API routes:\n> - Invokes endpoints directly during SSR (no HTTP call)\n> - Preserves credentials automatically\n> - Allows relative requests (normally requires fully qualified URL)\n> - For credentialled fetches outside `load`, explicitly pass `cookie`/`authorization` headers\n\n### Request\n\n[`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) available as `event.request` in hooks and server routes. Use `request.json()` and `request.formData()` to get posted data.\n\n### Response\n\n[`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) returned from `await fetch(...)` and `+server.js` handlers. SvelteKit turns a `Request` into a `Response`.\n\n### Headers\n\n[`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) interface for reading `request.headers` and setting `response.headers`:\n\n```js\n// @errors: 2461\n/// file: src/routes/what-is-my-user-agent/+server.js\nimport { json } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport function GET({ request }) {\n\t// log all headers\n\tconsole.log(...request.headers);\n\n\t// create a JSON Response using a header we received\n\treturn json({\n\t\t// retrieve a specific header\n\t\tuserAgent: request.headers.get('user-agent')\n\t}, {\n\t\t// set a header on the response\n\t\theaders: { 'x-custom-header': 'potato' }\n\t});\n}\n```\n\n## FormData\n\n[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) for HTML form submissions:\n\n```js\n// @errors: 2461\n/// file: src/routes/hello/+server.js\nimport { json } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function POST(event) {\n\tconst body = await event.request.formData();\n\n\t// log all fields\n\tconsole.log([...body]);\n\n\treturn json({\n\t\t// get a specific field's value\n\t\tname: body.get('name') ?? 'world'\n\t});\n}\n```\n\n## Stream APIs\n\nFor large/chunked responses: [ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream), [WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream), [TransformStream](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream).\n\n## URL APIs\n\n[`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) interface with `origin`, `pathname`, `hash` properties. Available as:\n- `event.url` in hooks/server routes\n- `page.url` in pages\n- `from`/`to` in `beforeNavigate`/`afterNavigate`\n\n### URLSearchParams\n\nAccess query parameters via `url.searchParams` ([`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)):\n\n```js\nconst foo = url.searchParams.get('foo');\n```\n\n## Web Crypto\n\n[Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) via `crypto` global:\n\n```js\nconst uuid = crypto.randomUUID();\n```",
+		"kit/routing": "# Routing\n\nSvelteKit uses **filesystem-based routing**. Routes are defined by directories in your codebase:\n\n- `src/routes` → root route\n- `src/routes/about` → `/about` route  \n- `src/routes/blog/[slug]` → route with parameter `slug`\n\n## Key Rules\n\n- All files run on server\n- All files run on client except `+server` files\n- `+layout` and `+error` files apply to subdirectories\n\n## +page\n\n### +page.svelte\n\nDefines a page. Rendered on server (SSR) initially, then client (CSR) for navigation.\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<h1>Hello and welcome to my site!</h1>\n<a href=\"/about\">About my site</a>\n```\n\nUse `<a>` elements for navigation, not framework-specific components.\n\nReceive data from `load` via `data` prop:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.title}</h1>\n<div>{@html data.content}</div>\n```\n\n### +page.js\n\nExport `load` function to fetch data. Runs on server (SSR) and client (navigation).\n\n```js\n/// file: src/routes/blog/[slug]/+page.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageLoad} */\nexport function load({ params }) {\n\tif (params.slug === 'hello-world') {\n\t\treturn {\n\t\t\ttitle: 'Hello world!',\n\t\t\tcontent: 'Welcome to our blog. Lorem ipsum dolor sit amet...'\n\t\t};\n\t}\n\n\terror(404, 'Not found');\n}\n```\n\nCan export page options: `prerender`, `ssr`, `csr`\n\n### +page.server.js\n\nServer-only `load` function. Use for database access or private env variables. Return value must be serializable.\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\tconst post = await getPostFromDatabase(params.slug);\n\n\tif (post) {\n\t\treturn post;\n\t}\n\n\terror(404, 'Not found');\n}\n```\n\nCan also export **actions** for writing data via `<form>` elements.\n\n## +error\n\nCustomize error pages per route:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+error.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.status}: {page.error.message}</h1>\n```\n\nSvelteKit walks up tree to find closest error boundary. If all fail, renders `src/error.html`.\n\n**Note:** `+error.svelte` not used for errors in `handle` hook or `+server.js` handlers.\n\n## +layout\n\n### +layout.svelte\n\nShared UI across pages. Must include `{@render children()}` for page content.\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<script>\n\tlet { children } = $props();\n</script>\n\n<nav>\n\t<a href=\"/\">Home</a>\n\t<a href=\"/about\">About</a>\n\t<a href=\"/settings\">Settings</a>\n</nav>\n\n{@render children()}\n```\n\nLayouts can be nested. Each inherits parent layout by default.\n\n### +layout.js\n\nLoad data for layouts:\n\n```js\n/// file: src/routes/settings/+layout.js\n/** @type {import('./$types').LayoutLoad} */\nexport function load() {\n\treturn {\n\t\tsections: [\n\t\t\t{ slug: 'profile', title: 'Profile' },\n\t\t\t{ slug: 'notifications', title: 'Notifications' }\n\t\t]\n\t};\n}\n```\n\nLayout data available to all child pages:\n\n```svelte\n<!--- file: src/routes/settings/profile/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tconsole.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]\n</script>\n```\n\nCan export page options as defaults for children.\n\n### +layout.server.js\n\nServer-only layout `load`. Change type to `LayoutServerLoad`.\n\n## +server\n\nAPI routes. Export HTTP verb functions (`GET`, `POST`, etc.) that return `Response` objects.\n\n```js\n/// file: src/routes/api/random-number/+server.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport function GET({ url }) {\n\tconst min = Number(url.searchParams.get('min') ?? '0');\n\tconst max = Number(url.searchParams.get('max') ?? '1');\n\n\tconst d = max - min;\n\n\tif (isNaN(d) || d < 0) {\n\t\terror(400, 'min and max must be numbers, and min must be less than max');\n\t}\n\n\tconst random = min + Math.random() * d;\n\n\treturn new Response(String(random));\n}\n```\n\n### Receiving data\n\n```js\n/// file: src/routes/api/add/+server.js\nimport { json } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request }) {\n\tconst { a, b } = await request.json();\n\treturn json(a + b);\n}\n```\n\n**Note:** Form actions are generally better for browser-to-server data submission.\n\n### Fallback handler\n\nHandles unhandled HTTP methods:\n\n```js\n/// file: src/routes/api/add/+server.js\n/** @type {import('./$types').RequestHandler} */\nexport async function fallback({ request }) {\n\treturn text(`I caught your ${request.method} request!`);\n}\n```\n\n### Content negotiation\n\n`+server.js` can coexist with `+page` files:\n- `PUT`/`PATCH`/`DELETE`/`OPTIONS` → always `+server.js`\n- `GET`/`POST`/`HEAD` → page if `accept` header prioritizes `text/html`, else `+server.js`\n\n## $types\n\nSvelteKit generates `$types.d.ts` for type safety:\n\n```svelte\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n```\n\nTypes: `PageProps`, `LayoutProps`, `PageLoad`, `PageServerLoad`, `LayoutLoad`, `LayoutServerLoad`, `RequestHandler`\n\nWith proper IDE tooling, types can be omitted entirely—they're auto-inserted.\n\n## Other files\n\nNon-route files in route directories are ignored. Colocate components with routes or use `$lib` for shared modules.",
+		"kit/load": "# Loading Data\n\n`load` functions fetch data before rendering `+page.svelte` and `+layout.svelte` components.\n\n## Page data\n\n`+page.js` exports a `load` function whose return value is available via the `data` prop:\n\n```js\n/// file: src/routes/blog/[slug]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport function load({ params }) {\n\treturn {\n\t\tpost: {\n\t\t\ttitle: `Title for ${params.slug} goes here`,\n\t\t\tcontent: `Content for ${params.slug} goes here`\n\t\t}\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n```\n\n`+page.js` runs on both server and browser (unless `export const ssr = false`). For server-only `load` (private env vars, database access), use `+page.server.js`:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\treturn {\n\t\tpost: await db.getPost(params.slug)\n\t};\n}\n```\n\n## Layout data\n\n`+layout.js` or `+layout.server.js` load data for layouts:\n\n```js\n/// file: src/routes/blog/[slug]/+layout.server.js\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function load() {\n\treturn {\n\t\tposts: await db.getPostSummaries()\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+layout.svelte --->\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data, children } = $props();\n</script>\n\n<main>\n\t{@render children()}\n</main>\n\n<aside>\n\t<h2>More posts</h2>\n\t<ul>\n\t\t{#each data.posts as post}\n\t\t\t<li>\n\t\t\t\t<a href=\"/blog/{post.slug}\">\n\t\t\t\t\t{post.title}\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n</aside>\n```\n\nChild components access parent layout data. If multiple `load` functions return the same key, the last one wins.\n\n## page.data\n\nParent layouts can access page/child data via `page.data`:\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<svelte:head>\n\t<title>{page.data.title}</title>\n</svelte:head>\n```\n\n## Universal vs server\n\n**Server `load`** (`+page.server.js`, `+layout.server.js`):\n- Always runs server-side\n- Access to `cookies`, `locals`, `platform`, `request`, `clientAddress`\n- Must return serializable data (devalue format)\n\n**Universal `load`** (`+page.js`, `+layout.js`):\n- Runs on server during SSR, then in browser during hydration\n- Subsequent runs happen in browser\n- Can return any values (custom classes, components)\n- Has `data` property containing server `load` return value\n\n**When to use:**\n- Server: database access, private env vars\n- Universal: external API calls without credentials, non-serializable returns\n- Both: pass server data to universal `load` via `data` property\n\n## Using URL data\n\n### url\n`URL` instance with `origin`, `hostname`, `pathname`, `searchParams`. `url.hash` unavailable during `load`.\n\n### route\nCurrent route directory relative to `src/routes`:\n\n```js\n/// file: src/routes/a/[b]/[...c]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport function load({ route }) {\n\tconsole.log(route.id); // '/a/[b]/[...c]'\n}\n```\n\n### params\nDerived from `url.pathname` and `route.id`. For `/a/[b]/[...c]` and pathname `/a/x/y/z`:\n\n```json\n{\n\t\"b\": \"x\",\n\t\"c\": \"y/z\"\n}\n```\n\n## Making fetch requests\n\nUse provided `fetch` function with enhanced features:\n- Inherits `cookie` and `authorization` headers on server\n- Allows relative requests on server\n- Internal requests go directly to handler (no HTTP overhead)\n- Response captured and inlined during SSR\n- Response read from HTML during hydration (no extra network request)\n\n```js\n/// file: src/routes/items/[id]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch, params }) {\n\tconst res = await fetch(`/api/items/${params.id}`);\n\tconst item = await res.json();\n\n\treturn { item };\n}\n```\n\nCookies passed through `fetch` only if target host is same as app or more specific subdomain.\n\n## Cookies\n\nServer `load` functions can get/set cookies:\n\n```js\n/// file: src/routes/+layout.server.js\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function load({ cookies }) {\n\tconst sessionid = cookies.get('sessionid');\n\n\treturn {\n\t\tuser: await db.getUser(sessionid)\n\t};\n}\n```\n\n## Headers\n\n`setHeaders` sets response headers (server-side only):\n\n```js\n/// file: src/routes/products/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/products.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}\n```\n\nCan only set each header once. Use `cookies.set()` for `set-cookie`.\n\n## Using parent data\n\nAccess parent `load` data with `await parent()`:\n\n```js\n/// file: src/routes/+layout.js\n/** @type {import('./$types').LayoutLoad} */\nexport function load() {\n\treturn { a: 1 };\n}\n```\n\n```js\n/// file: src/routes/abc/+layout.js\n/** @type {import('./$types').LayoutLoad} */\nexport async function load({ parent }) {\n\tconst { a } = await parent();\n\treturn { b: a + 1 };\n}\n```\n\n```js\n/// file: src/routes/abc/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ parent }) {\n\tconst { a, b } = await parent();\n\treturn { c: a + b };\n}\n```\n\n**Avoid waterfalls:** Call independent operations before `await parent()`.\n\n## Errors\n\nThrow expected errors with `error` helper:\n\n```js\n/// file: src/routes/admin/+layout.server.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function load({ locals }) {\n\tif (!locals.user) {\n\t\terror(401, 'not logged in');\n\t}\n\n\tif (!locals.user.isAdmin) {\n\t\terror(403, 'not an admin');\n\t}\n}\n```\n\nUnexpected errors treated as 500 and invoke `handleError`.\n\n## Redirects\n\nUse `redirect` helper with 3xx status code:\n\n```js\n/// file: src/routes/user/+layout.server.js\nimport { redirect } from '@sveltejs/kit';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function load({ locals }) {\n\tif (!locals.user) {\n\t\tredirect(307, '/login');\n\t}\n}\n```\n\nDon't use inside `try {...}` blocks. For client-side navigation outside `load`, use `goto` from `$app/navigation`.\n\n## Streaming with promises\n\nServer `load` promises stream to browser as they resolve:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\treturn {\n\t\tcomments: loadComments(params.slug), // streams\n\t\tpost: await loadPost(params.slug) // awaited\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n{#await data.comments}\n\tLoading comments...\n{:then comments}\n\t{#each comments as comment}\n\t\t<p>{comment.content}</p>\n\t{/each}\n{:catch error}\n\t<p>error loading comments: {error.message}</p>\n{/await}\n```\n\nHandle rejections to avoid unhandled promise errors. Attach noop-`catch` or use SvelteKit's `fetch`.\n\n**Limitations:**\n- Doesn't work without JavaScript\n- Can't `setHeaders` or redirect inside streamed promises\n- Not supported on some platforms (AWS Lambda, Firebase)\n\n## Parallel loading\n\nAll `load` functions run concurrently. Server `load` results grouped into single response during client navigation.\n\n## Rerunning load functions\n\nSvelteKit tracks dependencies to avoid unnecessary reruns.\n\n**A `load` function reruns when:**\n- Referenced `params` property changes\n- Referenced `url` property changes (`pathname`, `search`, etc.)\n- Calls `url.searchParams.get/getAll/has` and parameter changes\n- Calls `await parent()` and parent reruns\n- Declared dependency via `fetch` or `depends` and URL invalidated with `invalidate(url)`\n- `invalidateAll()` called\n\n```js\n/// file: src/routes/random-number/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch, depends }) {\n\tconst response = await fetch('https://api.example.com/random-number');\n\tdepends('app:random');\n\n\treturn {\n\t\tnumber: await response.json()\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/random-number/+page.svelte --->\n<script>\n\timport { invalidate, invalidateAll } from '$app/navigation';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tfunction rerunLoadFunction() {\n\t\tinvalidate('app:random');\n\t\tinvalidate('https://api.example.com/random-number');\n\t\tinvalidate(url => url.href.includes('random-number'));\n\t\tinvalidateAll();\n\t}\n</script>\n\n<p>random number: {data.number}</p>\n<button onclick={rerunLoadFunction}>Update random number</button>\n```\n\n### Untracking dependencies\n\nExclude from tracking with `untrack`:\n\n```js\n/// file: src/routes/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ untrack, url }) {\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}\n```\n\n## Implications for authentication\n\n- Layout `load` doesn't run on every request (e.g., client-side navigation)\n- Layout and page `load` run concurrently unless `await parent()` called\n\n**Auth strategies:**\n- Use hooks to protect routes before `load` runs\n- Put auth guards in `+page.server.js` for route-specific protection\n- Avoid auth in `+layout.server.js` unless all children call `await parent()`\n\n## Using `getRequestEvent`\n\nAccess request event in shared logic:\n\n```js\n/// file: src/lib/server/auth.js\nimport { redirect } from '@sveltejs/kit';\nimport { getRequestEvent } from '$app/server';\n\nexport function requireLogin() {\n\tconst { locals, url } = getRequestEvent();\n\n\tif (!locals.user) {\n\t\tconst redirectTo = url.pathname + url.search;\n\t\tconst params = new URLSearchParams({ redirectTo });\n\n\t\tredirect(307, `/login?${params}`);\n\t}\n\n\treturn locals.user;\n}\n```\n\n```js\n/// file: +page.server.js\nimport { requireLogin } from '$lib/server/auth';\n\nexport function load() {\n\tconst user = requireLogin();\n\n\treturn {\n\t\tmessage: `hello ${user.name}!`\n\t};\n}\n```",
+		"kit/form-actions": "# Form Actions\n\n`+page.server.js` files export actions to `POST` data to the server using `<form>` elements. Works without JavaScript, but can be progressively enhanced.\n\n## Default Actions\n\n```js\n/// file: src/routes/login/+page.server.js\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tdefault: async (event) => {\n\t\t// TODO log the user in\n\t}\n};\n```\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<form method=\"POST\">\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\">\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n</form>\n```\n\nInvoke from other pages with `action` attribute:\n\n```html\n<form method=\"POST\" action=\"/login\">\n```\n\n> Actions always use `POST` requests.\n\n## Named Actions\n\n```js\n/// file: src/routes/login/+page.server.js\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async (event) => {\n\t\t// TODO log the user in\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\nInvoke with query parameter prefixed by `/`:\n\n```svelte\n<form method=\"POST\" action=\"?/register\">\n```\n\n```svelte\n<form method=\"POST\" action=\"/login?/register\">\n```\n\nUse `formaction` on buttons:\n\n```svelte\n<form method=\"POST\" action=\"?/login\">\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\">\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n\t<button formaction=\"?/register\">Register</button>\n</form>\n```\n\n> Can't have default actions next to named actions - query parameter persists in URL.\n\n## Action Anatomy\n\nActions receive `RequestEvent`, read data with `request.formData()`. Return data available via `form` prop and `page.form`.\n\n```js\n/// file: src/routes/login/+page.server.js\nimport * as db from '$lib/server/db';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ cookies }) {\n\tconst user = await db.getUserFromSession(cookies.get('sessionid'));\n\treturn { user };\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async ({ cookies, request }) => {\n\t\tconst data = await request.formData();\n\t\tconst email = data.get('email');\n\t\tconst password = data.get('password');\n\n\t\tconst user = await db.getUser(email);\n\t\tcookies.set('sessionid', await db.createSession(user), { path: '/' });\n\n\t\treturn { success: true };\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data, form } = $props();\n</script>\n\n{#if form?.success}\n\t<p>Successfully logged in! Welcome back, {data.user.name}</p>\n{/if}\n```\n\n### Validation Errors\n\nUse `fail()` to return HTTP status code (400/422) with validation errors:\n\n```js\n/// file: src/routes/login/+page.server.js\nimport { fail } from '@sveltejs/kit';\nimport * as db from '$lib/server/db';\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async ({ cookies, request }) => {\n\t\tconst data = await request.formData();\n\t\tconst email = data.get('email');\n\t\tconst password = data.get('password');\n\n\t\tif (!email) {\n\t\t\treturn fail(400, { email, missing: true });\n\t\t}\n\n\t\tconst user = await db.getUser(email);\n\n\t\tif (!user || user.password !== db.hash(password)) {\n\t\t\treturn fail(400, { email, incorrect: true });\n\t\t}\n\n\t\tcookies.set('sessionid', await db.createSession(user), { path: '/' });\n\n\t\treturn { success: true };\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<form method=\"POST\" action=\"?/login\">\n\t{#if form?.missing}<p class=\"error\">The email field is required</p>{/if}\n\t{#if form?.incorrect}<p class=\"error\">Invalid credentials!</p>{/if}\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\" value={form?.email ?? ''}>\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n\t<button formaction=\"?/register\">Register</button>\n</form>\n```\n\n### Redirects\n\n```js\n/// file: src/routes/login/+page.server.js\nimport { fail, redirect } from '@sveltejs/kit';\nimport * as db from '$lib/server/db';\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async ({ cookies, request, url }) => {\n\t\tconst data = await request.formData();\n\t\tconst email = data.get('email');\n\t\tconst password = data.get('password');\n\n\t\tconst user = await db.getUser(email);\n\t\tif (!user) {\n\t\t\treturn fail(400, { email, missing: true });\n\t\t}\n\n\t\tif (user.password !== db.hash(password)) {\n\t\t\treturn fail(400, { email, incorrect: true });\n\t\t}\n\n\t\tcookies.set('sessionid', await db.createSession(user), { path: '/' });\n\n\t\tif (url.searchParams.has('redirectTo')) {\n\t\t\tredirect(303, url.searchParams.get('redirectTo'));\n\t\t}\n\n\t\treturn { success: true };\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\n## Loading Data\n\nPage re-renders after action runs. `load` functions run after action completes.\n\n`handle` runs before action and doesn't rerun before `load`. Update `event.locals` in actions if needed:\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tevent.locals.user = await getUser(event.cookies.get('sessionid'));\n\treturn resolve(event);\n}\n```\n\n```js\n/// file: src/routes/account/+page.server.js\n/** @type {import('./$types').PageServerLoad} */\nexport function load(event) {\n\treturn {\n\t\tuser: event.locals.user\n\t};\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogout: async (event) => {\n\t\tevent.cookies.delete('sessionid', { path: '/' });\n\t\tevent.locals.user = null;\n\t}\n};\n```\n\n## Progressive Enhancement\n\n### use:enhance\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<script>\n\timport { enhance } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n</script>\n\n<form method=\"POST\" use:enhance>\n```\n\n> Only works with `method=\"POST\"` pointing to `+page.server.js` actions.\n\nWithout arguments, `use:enhance`:\n- Updates `form`, `page.form`, `page.status` on success/invalid response (only if action is on same page)\n- Resets `<form>` element\n- Invalidates all data with `invalidateAll` on success\n- Calls `goto` on redirect\n- Renders nearest `+error` boundary on error\n- Resets focus\n\n### Customising use:enhance\n\n```svelte\n<form\n\tmethod=\"POST\"\n\tuse:enhance={({ formElement, formData, action, cancel, submitter }) => {\n\t\t// `formElement` is this `<form>` element\n\t\t// `formData` is its `FormData` object that's about to be submitted\n\t\t// `action` is the URL to which the form is posted\n\t\t// calling `cancel()` will prevent the submission\n\t\t// `submitter` is the `HTMLElement` that caused the form to be submitted\n\n\t\treturn async ({ result, update }) => {\n\t\t\t// `result` is an `ActionResult` object\n\t\t\t// `update` is a function which triggers the default logic that would be triggered if this callback wasn't set\n\t\t};\n\t}}\n>\n```\n\nUse `applyAction` to apply default behavior:\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<script>\n\timport { enhance, applyAction } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n</script>\n\n<form\n\tmethod=\"POST\"\n\tuse:enhance={({ formElement, formData, action, cancel }) => {\n\t\treturn async ({ result }) => {\n\t\t\t// `result` is an `ActionResult` object\n\t\t\tif (result.type === 'redirect') {\n\t\t\t\tgoto(result.location);\n\t\t\t} else {\n\t\t\t\tawait applyAction(result);\n\t\t\t}\n\t\t};\n\t}}\n>\n```\n\n`applyAction(result)` behavior:\n- `success`, `failure` — sets `page.status`, updates `form` and `page.form` (regardless of submission location)\n- `redirect` — calls `goto(result.location, { invalidateAll: true })`\n- `error` — renders nearest `+error` boundary\n\n### Custom Event Listener\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<script>\n\timport { invalidateAll, goto } from '$app/navigation';\n\timport { applyAction, deserialize } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n\n\t/** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */\n\tasync function handleSubmit(event) {\n\t\tevent.preventDefault();\n\t\tconst data = new FormData(event.currentTarget, event.submitter);\n\n\t\tconst response = await fetch(event.currentTarget.action, {\n\t\t\tmethod: 'POST',\n\t\t\tbody: data\n\t\t});\n\n\t\t/** @type {import('@sveltejs/kit').ActionResult} */\n\t\tconst result = deserialize(await response.text());\n\n\t\tif (result.type === 'success') {\n\t\t\t// rerun all `load` functions, following the successful update\n\t\t\tawait invalidateAll();\n\t\t}\n\n\t\tapplyAction(result);\n\t}\n</script>\n\n<form method=\"POST\" onsubmit={handleSubmit}>\n\t<!-- content -->\n</form>\n```\n\nUse `deserialize()` not `JSON.parse()` - supports `Date` and `BigInt`.\n\nIf `+server.js` exists alongside `+page.server.js`, add header to POST to action:\n\n```js\nconst response = await fetch(this.action, {\n\tmethod: 'POST',\n\tbody: data,\n\theaders: {\n\t\t'x-sveltekit-action': 'true'\n\t}\n});\n```\n\n## Alternatives\n\nUse `+server.js` for JSON APIs:\n\n```svelte\n<!--- file: src/routes/send-message/+page.svelte --->\n<script>\n\tfunction rerun() {\n\t\tfetch('/api/ci', {\n\t\t\tmethod: 'POST'\n\t\t});\n\t}\n</script>\n\n<button onclick={rerun}>Rerun CI</button>\n```\n\n```js\n/// file: src/routes/api/ci/+server.js\n/** @type {import('./$types').RequestHandler} */\nexport function POST() {\n\t// do something\n}\n```\n\n## GET vs POST\n\nUse `method=\"GET\"` for forms that don't POST data (e.g., search). SvelteKit treats them like `<a>` elements:\n\n```html\n<form action=\"/search\">\n\t<label>\n\t\tSearch\n\t\t<input name=\"q\">\n\t</label>\n</form>\n```\n\nNavigates to `/search?q=...`, invokes `load` but not actions. Supports `data-sveltekit-*` attributes like links.",
+		"kit/page-options": "# Page Options\n\nSvelteKit renders components on the server first, sends HTML to client, then hydrates for interactivity. Export options from `+page.js`, `+page.server.js`, `+layout.js`, or `+layout.server.js` to control behavior per page or page groups. Child layouts/pages override parent values.\n\n## prerender\n\nGenerate static HTML at build time for routes that don't need dynamic rendering.\n\n```js\n/// file: +page.js/+page.server.js/+server.js\nexport const prerender = true;\n```\n\nOr prerender everything except specific pages:\n\n```js\n/// file: +page.js/+page.server.js/+server.js\nexport const prerender = false;\n```\n\nUse `'auto'` to prerender but keep in manifest for dynamic SSR:\n\n```js\n/// file: +page.js/+page.server.js/+server.js\nexport const prerender = 'auto';\n```\n\nPrerenderer starts at root and follows `<a>` links. Configure entry points via `config.kit.prerender.entries` or [`entries`](#entries) function.\n\nDuring prerendering, `building` from `$app/environment` is `true`.\n\n### Prerendering server routes\n\n`+server.js` files inherit `prerender` from pages that fetch from them:\n\n```js\n/// file: +page.js\nexport const prerender = true;\n\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch }) {\n\tconst res = await fetch('/my-server-route.json');\n\treturn await res.json();\n}\n```\n\n### When not to prerender\n\n**Rule:** Two users hitting a page directly must get identical server content.\n\n- Don't prerender personalized content\n- `url.searchParams` forbidden during prerender (use in browser only, e.g., `onMount`)\n- Pages with [actions](form-actions) can't be prerendered\n\n### Route conflicts\n\nAvoid directory/file name conflicts. Use file extensions: `foo.json/+server.js` and `foo/bar.json/+server.js` create `foo.json` and `foo/bar.json`. Pages write `foo/index.html`.\n\n### Troubleshooting\n\nError \"routes marked as prerenderable, but were not prerendered\" means crawler didn't reach the route. Fix by:\n\n- Ensure links exist from `config.kit.prerender.entries` or [`entries`](#entries)\n- Add links from other prerendered pages with SSR enabled\n- Change to `export const prerender = 'auto'`\n\n## entries\n\nSvelteKit auto-discovers pages by crawling from entry points (non-dynamic routes). For dynamic routes without discoverable links, export `entries`:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n/** @type {import('./$types').EntryGenerator} */\nexport function entries() {\n\treturn [\n\t\t{ slug: 'hello-world' },\n\t\t{ slug: 'another-blog-post' }\n\t];\n}\n\nexport const prerender = true;\n```\n\n`entries` can be `async` for fetching from CMS/database.\n\n## ssr\n\nDisable server-side rendering to render empty shell (client-only):\n\n```js\n/// file: +page.js\nexport const ssr = false;\n// If both `ssr` and `csr` are `false`, nothing will be rendered!\n```\n\nIn root `+layout.js`, this turns app into SPA. Not recommended for most cases.\n\n> **Note:** If page options are static values, SvelteKit evaluates them statically. Otherwise, it imports files on server. Browser-only code must not run on module load—import in `+page.svelte` or `+layout.svelte` instead.\n\n## csr\n\nDisable client-side rendering for pages not requiring JavaScript:\n\n```js\n/// file: +page.js\nexport const csr = false;\n// If both `csr` and `ssr` are `false`, nothing will be rendered!\n```\n\n**Effects:**\n- No JavaScript shipped\n- `<script>` tags removed from components\n- `<form>` can't be progressively enhanced\n- Full-page browser navigation\n- HMR disabled\n\nEnable in dev only:\n\n```js\n/// file: +page.js\nimport { dev } from '$app/environment';\n\nexport const csr = dev;\n```\n\n## trailingSlash\n\nControl URL trailing slash behavior: `'never'` (default), `'always'`, or `'ignore'`.\n\n```js\n/// file: src/routes/+layout.js\nexport const trailingSlash = 'always';\n```\n\nAffects prerendering: `'always'` creates `about/index.html`, otherwise `about.html`.\n\n> **Note:** Don't use `'ignore'`—relative paths differ (`./y` from `/x` vs `/x/`), and `/x` vs `/x/` are separate URLs (bad for SEO).\n\n## config\n\nAdapter-specific deployment configuration. Shape depends on adapter. Top-level merge only.\n\n```js\n/// file: src/routes/+page.js\n/** @type {import('some-adapter').Config} */\nexport const config = {\n\truntime: 'edge'\n};\n```\n\n**Merge example:**\n\n```js\n/// file: src/routes/+layout.js\nexport const config = {\n\truntime: 'edge',\n\tregions: 'all',\n\tfoo: { bar: true }\n}\n```\n\n```js\n/// file: src/routes/+page.js\nexport const config = {\n\tregions: ['us1', 'us2'],\n\tfoo: { baz: true }\n}\n```\n\n**Result:** `{ runtime: 'edge', regions: ['us1', 'us2'], foo: { baz: true } }`",
+		"kit/state-management": "# State Management\n\n## Avoid shared state on the server\n\nServers are shared by multiple users. **Never store data in shared variables** - it will leak between users.\n\n```js\n// @errors: 7034 7005\n/// file: +page.server.js\nlet user;\n\n/** @type {import('./$types').PageServerLoad} */\nexport function load() {\n\treturn { user };\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tdefault: async ({ request }) => {\n\t\tconst data = await request.formData();\n\n\t\t// NEVER DO THIS!\n\t\tuser = {\n\t\t\tname: data.get('name'),\n\t\t\tembarrassingSecret: data.get('secret')\n\t\t};\n\t}\n}\n```\n\n**Solution:** Use [`cookies`](load#Cookies) for authentication and persist to a database.\n\n## No side-effects in load\n\n`load` functions must be **pure** - no side-effects. Don't write to stores or global state:\n\n```js\n/// file: +page.js\n// @filename: ambient.d.ts\ndeclare module '$lib/user' {\n\texport const user: { set: (value: any) => void };\n}\n\n// @filename: index.js\n// ---cut---\nimport { user } from '$lib/user';\n\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch }) {\n\tconst response = await fetch('/api/user');\n\n\t// NEVER DO THIS!\n\tuser.set(await response.json());\n}\n```\n\n**Solution:** Return data directly:\n\n```js\n/// file: +page.js\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ fetch }) {\n\tconst response = await fetch('/api/user');\n\n\treturn {\n\t\tuser: await response.json()\n\t};\n}\n```\n\nPass to components or use [`page.data`](load#page.data).\n\n## Using state with context\n\nUse Svelte's context API to share state safely:\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data } = $props();\n\n\t// Pass a function referencing our state\n\t// to the context for child components to access\n\tsetContext('user', () => data.user);\n</script>\n```\n\n```svelte\n<!--- file: src/routes/user/+page.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\t// Retrieve user store from context\n\tconst user = getContext('user');\n</script>\n\n<p>Welcome {user().name}</p>\n```\n\n> **Note:** Pass a function to `setContext` to maintain reactivity. See [$state docs](/docs/svelte/$state#Passing-state-into-functions).\n\n**Gotcha:** Updating context state in child components during SSR won't affect parent components (already rendered). Prefer passing state down.\n\nWithout SSR, you can use shared modules safely.\n\n## Component state is preserved\n\nComponents are **reused** during navigation. State doesn't reset automatically:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\t// THIS CODE IS BUGGY!\n\tconst wordCount = data.content.split(' ').length;\n\tconst estimatedReadingTime = wordCount / 250;\n</script>\n\n<header>\n\t<h1>{data.title}</h1>\n\t<p>Reading time: {Math.round(estimatedReadingTime)} minutes</p>\n</header>\n\n<div>{@html data.content}</div>\n```\n\n**Solution:** Use `$derived`:\n\n```svelte\n/// file: src/routes/blog/[slug]/+page.svelte\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tlet wordCount = $derived(data.content.split(' ').length);\n\tlet estimatedReadingTime = $derived(wordCount / 250);\n</script>\n```\n\n> **Note:** Use [afterNavigate]($app-navigation#afterNavigate) and [beforeNavigate]($app-navigation#beforeNavigate) if you need to re-run `onMount`/`onDestroy` logic.\n\n**Force remount** with `{#key}`:\n\n```svelte\n<script>\n\timport { page } from '$app/state';\n</script>\n\n{#key page.url.pathname}\n\t<BlogPost title={data.title} content={data.title} />\n{/key}\n```\n\n## State storage patterns\n\n- **URL search params** (`?sort=price`): For state that should survive reload/affect SSR. Access via `url` in `load` or `page.url.searchParams` in components.\n- **Snapshots**: For ephemeral UI state (e.g., \"is accordion open?\") that should persist across navigation but not reload. See [snapshots](snapshots).",
+		"kit/remote-functions": "# Remote Functions\n\n**Available since 2.27** - Experimental feature for type-safe client-server communication.\n\n## Setup\n\nEnable in `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nconst config = {\n\tkit: {\n\t\texperimental: {\n\t\t\tremoteFunctions: true\n\t\t}\n\t},\n\tcompilerOptions: {\n\t\texperimental: {\n\t\t\tasync: true // optional, for await in components\n\t\t}\n\t}\n};\n```\n\n## Overview\n\nExport from `.remote.js` or `.remote.ts` files in `src/`. Four types: `query`, `form`, `command`, `prerender`. Client calls become `fetch` wrappers to generated HTTP endpoints.\n\n---\n\n## query\n\nRead dynamic data from server:\n\n```js\n/// file: src/routes/blog/data.remote.js\nimport { query } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = query(async () => {\n\tconst posts = await db.sql`\n\t\tSELECT title, slug FROM post ORDER BY published_at DESC\n\t`;\n\treturn posts;\n});\n```\n\nUse with `await`:\n\n```svelte\n<!--- file: src/routes/blog/+page.svelte --->\n<script>\n\timport { getPosts } from './data.remote';\n</script>\n\n<ul>\n\t{#each await getPosts() as { title, slug }}\n\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t{/each}\n</ul>\n```\n\nOr with properties:\n\n```svelte\n<script>\n\tconst query = getPosts();\n</script>\n\n{#if query.error}\n\t<p>oops!</p>\n{:else if query.loading}\n\t<p>loading...</p>\n{:else}\n\t<ul>\n\t\t{#each query.current as { title, slug }}\n\t\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t\t{/each}\n\t</ul>\n{/if}\n```\n\n### Query arguments\n\nValidate with Standard Schema (Zod/Valibot):\n\n```js\nimport * as v from 'valibot';\nimport { error } from '@sveltejs/kit';\nimport { query } from '$app/server';\n\nexport const getPost = query(v.string(), async (slug) => {\n\tconst [post] = await db.sql`SELECT * FROM post WHERE slug = ${slug}`;\n\tif (!post) error(404, 'Not found');\n\treturn post;\n});\n```\n\n```svelte\n<script>\n\tlet { params } = $props();\n\tconst post = $derived(await getPost(params.slug));\n</script>\n```\n\nArguments and return values serialized with [devalue](https://github.com/sveltejs/devalue).\n\n### Refreshing\n\n```svelte\n<button onclick={() => getPosts().refresh()}>\n\tCheck for new posts\n</button>\n```\n\nQueries are cached: `getPosts() === getPosts()`.\n\n---\n\n## query.batch\n\nBatches requests in same macrotask (solves n+1 problem):\n\n```js\nimport * as v from 'valibot';\nimport { query } from '$app/server';\n\nexport const getWeather = query.batch(v.string(), async (cities) => {\n\tconst weather = await db.sql`SELECT * FROM weather WHERE city = ANY(${cities})`;\n\tconst lookup = new Map(weather.map(w => [w.city, w]));\n\treturn (city) => lookup.get(city);\n});\n```\n\n---\n\n## form\n\nWrite data to server:\n\n```js\n/// file: src/routes/blog/data.remote.js\nimport * as v from 'valibot';\nimport { error, redirect } from '@sveltejs/kit';\nimport { form } from '$app/server';\nimport * as auth from '$lib/server/auth';\n\nexport const createPost = form(\n\tv.object({\n\t\ttitle: v.pipe(v.string(), v.nonEmpty()),\n\t\tcontent: v.pipe(v.string(), v.nonEmpty())\n\t}),\n\tasync ({ title, content }) => {\n\t\tconst user = await auth.getUser();\n\t\tif (!user) error(401, 'Unauthorized');\n\n\t\tconst slug = title.toLowerCase().replace(/ /g, '-');\n\t\tawait db.sql`INSERT INTO post (slug, title, content) VALUES (${slug}, ${title}, ${content})`;\n\t\tredirect(303, `/blog/${slug}`);\n\t}\n);\n```\n\n```svelte\n<script>\n\timport { createPost } from '../data.remote';\n</script>\n\n<form {...createPost}>\n\t<button>Publish!</button>\n</form>\n```\n\nWorks without JS (native form submission) and progressively enhances.\n\n### Fields\n\nUse `.as(type)` for field attributes:\n\n```svelte\n<form {...createPost}>\n\t<label>\n\t\t<h2>Title</h2>\n\t\t<input {...createPost.fields.title.as('text')} />\n\t</label>\n\n\t<label>\n\t\t<h2>Write your post</h2>\n\t\t<textarea {...createPost.fields.content.as('text')}></textarea>\n\t</label>\n\n\t<button>Publish!</button>\n</form>\n```\n\nSupports nested objects, arrays, strings, numbers, booleans, `File`:\n\n```js\nconst datingProfile = v.object({\n\tname: v.string(),\n\tphoto: v.file(),\n\tinfo: v.object({\n\t\theight: v.number(),\n\t\tlikesDogs: v.optional(v.boolean(), false)\n\t}),\n\tattributes: v.array(v.string())\n});\n\nexport const createProfile = form(datingProfile, (data) => { /* ... */ });\n```\n\n```svelte\n<form {...createProfile} enctype=\"multipart/form-data\">\n\t<input {...name.as('text')} />\n\t<input {...photo.as('file')} />\n\t<input {...info.height.as('number')} />\n\t<input {...info.likesDogs.as('checkbox')} />\n\t<input {...attributes[0].as('text')} />\n\t<button>submit</button>\n</form>\n```\n\nFor `radio`/`checkbox` groups, pass value as second arg:\n\n```svelte\n{#each ['windows', 'mac', 'linux'] as os}\n\t<label>\n\t\t<input {...survey.fields.operatingSystem.as('radio', os)}>\n\t\t{os}\n\t</label>\n{/each}\n```\n\nOr use `select`:\n\n```svelte\n<select {...survey.fields.operatingSystem.as('select')}>\n\t<option>windows</option>\n\t<option>mac</option>\n</select>\n```\n\n### Programmatic validation\n\nUse `invalid` function in handler:\n\n```js\nexport const buyHotcakes = form(\n\tv.object({ qty: v.pipe(v.number(), v.minValue(1)) }),\n\tasync (data, invalid) => {\n\t\ttry {\n\t\t\tawait db.buy(data.qty);\n\t\t} catch (e) {\n\t\t\tif (e.code === 'OUT_OF_STOCK') {\n\t\t\t\tinvalid(invalid.qty(`we don't have enough hotcakes`));\n\t\t\t}\n\t\t}\n\t}\n);\n```\n\n### Validation\n\nShow issues per field:\n\n```svelte\n{#each createPost.fields.title.issues() as issue}\n\t<p class=\"issue\">{issue.message}</p>\n{/each}\n<input {...createPost.fields.title.as('text')} />\n```\n\nValidate programmatically:\n\n```svelte\n<form {...createPost} oninput={() => createPost.validate()}>\n```\n\nClient-side preflight validation:\n\n```svelte\n<script>\n\timport * as v from 'valibot';\n\tconst schema = v.object({\n\t\ttitle: v.pipe(v.string(), v.nonEmpty()),\n\t\tcontent: v.pipe(v.string(), v.nonEmpty())\n\t});\n</script>\n\n<form {...createPost.preflight(schema)}>\n```\n\nAll issues: `createPost.fields.allIssues()`.\n\n### Getting/setting values\n\n```svelte\n<div class=\"preview\">\n\t<h2>{createPost.fields.title.value()}</h2>\n</div>\n```\n\nSet values:\n\n```svelte\n<script>\n\tcreatePost.fields.set({\n\t\ttitle: 'My new blog post',\n\t\tcontent: 'Lorem ipsum...'\n\t});\n</script>\n```\n\n### Sensitive data\n\nPrefix with `_` to prevent sending back to client:\n\n```svelte\n<input {...register.fields._password.as('password')} />\n```\n\n### Single-flight mutations\n\nRefresh specific queries instead of all:\n\n```js\nexport const createPost = form(\n\tv.object({/* ... */}),\n\tasync (data) => {\n\t\t// ...\n\t\tawait getPosts().refresh();\n\t\t// or: await getPost(post.id).set(result);\n\t\tredirect(303, `/blog/${slug}`);\n\t}\n);\n```\n\n### Returns\n\nReturn data instead of redirecting:\n\n```js\nexport const createPost = form(\n\tv.object({/* ... */}),\n\tasync (data) => {\n\t\t// ...\n\t\treturn { success: true };\n\t}\n);\n```\n\n```svelte\n{#if createPost.result?.success}\n\t<p>Successfully published!</p>\n{/if}\n```\n\n### enhance\n\nCustomize submission:\n\n```svelte\n<form {...createPost.enhance(async ({ form, data, submit }) => {\n\ttry {\n\t\tawait submit();\n\t\tform.reset();\n\t\tshowToast('Successfully published!');\n\t} catch (error) {\n\t\tshowToast('Oh no! Something went wrong');\n\t}\n})}>\n```\n\nClient-driven single-flight mutations:\n\n```ts\nawait submit().updates(getPosts());\n```\n\nWith optimistic updates:\n\n```ts\nawait submit().updates(\n\tgetPosts().withOverride((posts) => [newPost, ...posts])\n);\n```\n\n### Multiple instances\n\nIsolate forms in lists:\n\n```svelte\n{#each await getTodos() as todo}\n\t{@const modify = modifyTodo.for(todo.id)}\n\t<form {...modify}>\n\t\t<button disabled={!!modify.pending}>save changes</button>\n\t</form>\n{/each}\n```\n\n### buttonProps\n\nDifferent action per button:\n\n```svelte\n<form {...login}>\n\t<button>login</button>\n\t<button {...register.buttonProps}>register</button>\n</form>\n```\n\n---\n\n## command\n\nCall from anywhere (not element-specific):\n\n```js\nimport * as v from 'valibot';\nimport { query, command } from '$app/server';\n\nexport const getLikes = query(v.string(), async (id) => {\n\tconst [row] = await db.sql`SELECT likes FROM item WHERE id = ${id}`;\n\treturn row.likes;\n});\n\nexport const addLike = command(v.string(), async (id) => {\n\tawait db.sql`UPDATE item SET likes = likes + 1 WHERE id = ${id}`;\n});\n```\n\n```svelte\n<button\n\tonclick={async () => {\n\t\ttry {\n\t\t\tawait addLike(item.id);\n\t\t} catch (error) {\n\t\t\tshowToast('Something went wrong!');\n\t\t}\n\t}}\n>\n\tadd like\n</button>\n```\n\nCannot be called during render.\n\n### Updating queries\n\nIn command:\n\n```js\nexport const addLike = command(v.string(), async (id) => {\n\tawait db.sql`UPDATE item SET likes = likes + 1 WHERE id = ${id}`;\n\tgetLikes(id).refresh();\n});\n```\n\nOr when calling:\n\n```ts\nawait addLike(item.id).updates(getLikes(item.id));\n```\n\nWith optimistic update:\n\n```ts\nawait addLike(item.id).updates(\n\tgetLikes(item.id).withOverride((n) => n + 1)\n);\n```\n\n---\n\n## prerender\n\nInvoked at build time for static data:\n\n```js\nimport { prerender } from '$app/server';\n\nexport const getPosts = prerender(async () => {\n\tconst posts = await db.sql`SELECT title, slug FROM post ORDER BY published_at DESC`;\n\treturn posts;\n});\n```\n\nCached using Cache API, survives reloads, cleared on new deployment.\n\n### Prerender arguments\n\n```js\nexport const getPost = prerender(v.string(), async (slug) => {\n\tconst [post] = await db.sql`SELECT * FROM post WHERE slug = ${slug}`;\n\tif (!post) error(404, 'Not found');\n\treturn post;\n});\n```\n\nSpecify inputs:\n\n```js\nexport const getPost = prerender(\n\tv.string(),\n\tasync (slug) => { /* ... */ },\n\t{\n\t\tinputs: () => ['first-post', 'second-post', 'third-post']\n\t}\n);\n```\n\nAllow dynamic calls:\n\n```js\nexport const getPost = prerender(\n\tv.string(),\n\tasync (slug) => { /* ... */ },\n\t{\n\t\tdynamic: true,\n\t\tinputs: () => [/* ... */]\n\t}\n);\n```\n\n---\n\n## Validation errors\n\nHandle with `handleValidationError` hook:\n\n```js\n/// file: src/hooks.server.ts\nexport function handleValidationError({ event, issues }) {\n\treturn {\n\t\tmessage: 'Nice try, hacker!'\n\t};\n}\n```\n\nOpt out with `'unchecked'`:\n\n```ts\nexport const getStuff = query('unchecked', async ({ id }: { id: string }) => {\n\t// no validation\n});\n```\n\n---\n\n## getRequestEvent\n\nAccess `RequestEvent` inside remote functions:\n\n```ts\nimport { getRequestEvent, query } from '$app/server';\n\nconst getUser = query(() => {\n\tconst { cookies } = getRequestEvent();\n\treturn await findUser(cookies.get('session_id'));\n});\n```\n\n**Note:** `route`, `params`, `url` relate to calling page, not endpoint. Queries don't re-run on navigation unless argument changes.\n\n---\n\n## Redirects\n\nUse `redirect(...)` in `query`, `form`, `prerender`. **Not** in `command`.",
+		"kit/building-your-app": "# Building\n\nBuild happens in two stages via `vite build`:\n1. Vite creates optimized production build (server, browser, service worker). Prerendering runs here.\n2. Adapter tunes build for target environment.\n\n## During build\n\nCode in `+page/layout(.server).js` files executes during build analysis. Prevent execution with `building` check:\n\n```js\nimport { building } from '$app/environment';\nimport { setupMyDatabase } from '$lib/server/database';\n\nif (!building) {\n\tsetupMyDatabase();\n}\n\nexport function load() {\n\t// ...\n}\n```\n\n## Preview\n\n`vite preview` runs production build locally in Node. Not perfect reproduction - adapter-specific features like `platform` object don't apply.",
+		"kit/adapters": "# Adapters\n\nAdapters are plugins that transform your built SvelteKit app for specific deployment targets.\n\n## Official Adapters\n\n- `@sveltejs/adapter-cloudflare` - Cloudflare Workers/Pages\n- `@sveltejs/adapter-netlify` - Netlify\n- `@sveltejs/adapter-node` - Node servers\n- `@sveltejs/adapter-static` - Static site generation (SSG)\n- `@sveltejs/adapter-vercel` - Vercel\n\nCommunity adapters available for other platforms.\n\n## Configuration\n\nSpecify adapter in `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\n// @filename: ambient.d.ts\ndeclare module 'svelte-adapter-foo' {\n\tconst adapter: (opts: any) => import('@sveltejs/kit').Adapter;\n\texport default adapter;\n}\n\n// @filename: index.js\n// ---cut---\nimport adapter from 'svelte-adapter-foo';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// adapter options go here\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Platform-Specific Context\n\nSome adapters provide additional request info via the `platform` property in `RequestEvent` (available in hooks and server routes). Example: Cloudflare Workers expose `env` object with KV namespaces. Check adapter docs for details.",
+		"kit/adapter-auto": "# adapter-auto\n\n`adapter-auto` is installed by default with `npx sv create`. It automatically detects and uses the correct adapter for supported platforms at deploy time:\n\n- `@sveltejs/adapter-cloudflare` - Cloudflare Pages\n- `@sveltejs/adapter-netlify` - Netlify\n- `@sveltejs/adapter-vercel` - Vercel\n- `svelte-adapter-azure-swa` - Azure Static Web Apps\n- `svelte-kit-sst` - AWS via SST\n- `@sveltejs/adapter-node` - Google Cloud Run\n\n**Best practice:** Install the specific adapter to `devDependencies` once you've chosen a platform for better lockfile management and faster CI installs.\n\n## Configuration\n\n`adapter-auto` accepts no options. To configure adapter-specific options (e.g., `{ edge: true }` for Vercel/Netlify), install and use the underlying adapter directly.\n\n## Extending\n\nAdd support for more adapters by editing [adapters.js](https://github.com/sveltejs/kit/blob/main/packages/adapter-auto/adapters.js) and submitting a PR.",
+		"kit/adapter-node": "# adapter-node\n\nGenerates a standalone Node server.\n\n## Usage\n\nInstall and configure:\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-node';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n## Deploying\n\nBuild with `npm run build`. Creates production server in output directory (default: `build`).\n\nNeed: output directory, `package.json`, and production `node_modules`. Generate production deps:\n```sh\nnpm ci --omit dev\n```\n\nStart server:\n```sh\nnode build\n```\n\n**Dev dependencies** are bundled via Rollup. **Dependencies** are externalized. Control this via `package.json` placement.\n\n### Compressing responses\n\nUse reverse proxy compression for better performance (Node is single-threaded). If using custom server middleware, use [`@polka/compression`](https://www.npmjs.com/package/@polka/compression) (supports streaming, unlike `compression` package).\n\n## Environment variables\n\n- **Dev/preview**: Reads `.env` files automatically\n- **Production**: `.env` files NOT auto-loaded\n\nLoad in production:\n```sh\n# Using dotenv\nnode -r dotenv/config build\n\n# Node.js v20.6+\nnode --env-file=.env build\n```\n\n### `PORT`, `HOST` and `SOCKET_PATH`\n\nDefault: `0.0.0.0:3000`\n\n```sh\nHOST=127.0.0.1 PORT=4000 node build\n```\n\nUse socket path (ignores HOST/PORT):\n```sh\nSOCKET_PATH=/tmp/socket node build\n```\n\n### `ORIGIN`, `PROTOCOL_HEADER`, `HOST_HEADER`, and `PORT_HEADER`\n\nSet origin directly:\n```sh\nORIGIN=https://my.site node build\n```\n\nOr use headers (only behind trusted reverse proxy):\n```sh\nPROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build\n```\n\nStandard headers: `x-forwarded-proto`, `x-forwarded-host`, `x-forwarded-port` (set via `PORT_HEADER`).\n\n**Incorrect URL causes error**: \"Cross-site POST form submissions are forbidden\"\n\n### `ADDRESS_HEADER` and `XFF_DEPTH`\n\n`event.getClientAddress()` returns connecting IP by default. Behind proxies, set:\n\n```sh\nADDRESS_HEADER=True-Client-IP node build\n```\n\nFor `X-Forwarded-For`, set `XFF_DEPTH` to number of trusted proxies (reads from right to avoid spoofing):\n\n```sh\nXFF_DEPTH=3\n```\n\n### `BODY_SIZE_LIMIT`\n\nMax request body size. Default: `512kb`. Supports units: `K`, `M`, `G`. Disable with `Infinity`.\n\n### `SHUTDOWN_TIMEOUT`\n\nSeconds to wait before force-closing connections on `SIGTERM`/`SIGINT`. Default: `30`.\n\n### `IDLE_TIMEOUT`\n\nWith systemd socket activation: seconds of inactivity before auto-sleep. Unset = runs continuously.\n\n## Options\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-node';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// default options are shown\n\t\t\tout: 'build',\n\t\t\tprecompress: true,\n\t\t\tenvPrefix: ''\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n### out\n\nBuild directory. Default: `build`.\n\n### precompress\n\nGzip/brotli precompression for assets and prerendered pages. Default: `true`.\n\n### envPrefix\n\nPrefix for environment variables:\n\n```js\nenvPrefix: 'MY_CUSTOM_';\n```\n\n```sh\nMY_CUSTOM_HOST=127.0.0.1 MY_CUSTOM_PORT=4000 node build\n```\n\n## Graceful shutdown\n\nOn `SIGTERM`/`SIGINT`:\n1. Rejects new requests\n2. Waits for pending requests to finish\n3. Closes remaining connections after `SHUTDOWN_TIMEOUT`\n\nListen to shutdown event:\n\n```js\n// @errors: 2304\nprocess.on('sveltekit:shutdown', async (reason) => {\n  await jobs.stop();\n  await db.close();\n});\n```\n\n`reason` values: `SIGINT`, `SIGTERM`, `IDLE`\n\n## Socket activation\n\nUse systemd for on-demand scaling. Adapter listens on file descriptor 3 when `LISTEN_PID` and `LISTEN_FDS` are set.\n\n1. Create service:\n\n```ini\n/// file: /etc/systemd/system/myapp.service\n[Service]\nEnvironment=NODE_ENV=production IDLE_TIMEOUT=60\nExecStart=/usr/bin/node /usr/bin/myapp/build\n```\n\n2. Create socket:\n\n```ini\n/// file: /etc/systemd/system/myapp.socket\n[Socket]\nListenStream=3000\n\n[Install]\nWantedBy=sockets.target\n```\n\n3. Enable:\n```sh\nsudo systemctl daemon-reload\nsudo systemctl enable --now myapp.socket\n```\n\n## Custom server\n\nAdapter creates `index.js` (standalone server) and `handler.js` (export for custom servers).\n\n```js\n// @errors: 2307 7006\n/// file: my-server.js\nimport { handler } from './build/handler.js';\nimport express from 'express';\n\nconst app = express();\n\n// add a route that lives separately from the SvelteKit app\napp.get('/healthcheck', (req, res) => {\n\tres.end('ok');\n});\n\n// let SvelteKit handle everything else, including serving prerendered pages and static assets\napp.use(handler);\n\napp.listen(3000, () => {\n\tconsole.log('listening on port 3000');\n});\n```\n\nWorks with Express, Connect, Polka, or `http.createServer`.",
+		"kit/adapter-static": "# adapter-static\n\nUse SvelteKit as a static site generator (SSG) with [`adapter-static`](https://github.com/sveltejs/kit/tree/main/packages/adapter-static). Prerender entire site as static files.\n\n## Usage\n\nInstall: `npm i -D @sveltejs/adapter-static`\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\tpages: 'build',\n\t\t\tassets: 'build',\n\t\t\tfallback: undefined,\n\t\t\tprecompress: false,\n\t\t\tstrict: true\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\nEnable prerendering in root layout:\n\n```js\n/// file: src/routes/+layout.js\nexport const prerender = true;\n```\n\n**Important:** Set [`trailingSlash`](page-options#trailingSlash) correctly. If host doesn't render `/a.html` for `/a` requests, use `trailingSlash: 'always'` to create `/a/index.html`.\n\n## Zero-config support\n\nPlatforms like Vercel auto-configure. Omit options:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n## Options\n\n- **pages**: Output directory for prerendered pages (default: `build`)\n- **assets**: Output directory for static assets (default: same as `pages`)\n- **fallback**: Filename for SPA entry point (e.g., `200.html`). Avoid `index.html`. Has negative performance/SEO impact. See [single page apps](single-page-apps) docs.\n- **precompress**: If `true`, generates `.br` and `.gz` files\n- **strict**: If `true` (default), checks all pages prerendered or `fallback` set. Set `false` to skip check.\n\n## GitHub Pages\n\nFor repos not named `your-username.github.io`, set [`config.kit.paths.base`](configuration#paths) to repo name (site served from `https://your-username.github.io/your-repo-name`).\n\n```js\n// @errors: 2322\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\tfallback: '404.html'\n\t\t}),\n\t\tpaths: {\n\t\t\tbase: process.argv.includes('dev') ? '' : process.env.BASE_PATH\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\nExample GitHub Actions workflow:\n\n```yaml\n### file: .github/workflows/deploy.yml\nname: Deploy to GitHub Pages\n\non:\n  push:\n    branches: 'main'\n\njobs:\n  build_site:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`\n      # - name: Install pnpm\n      #   uses: pnpm/action-setup@v3\n      #   with:\n      #     version: 8\n\n      - name: Install Node.js\n        uses: actions/setup-node@v4\n        with:\n          node-version: 20\n          cache: npm\n\n      - name: Install dependencies\n        run: npm i\n\n      - name: build\n        env:\n          BASE_PATH: '/${{ github.event.repository.name }}'\n        run: |\n          npm run build\n\n      - name: Upload Artifacts\n        uses: actions/upload-pages-artifact@v3\n        with:\n          # this should match the `pages` option in your adapter-static options\n          path: 'build/'\n\n  deploy:\n    needs: build_site\n    runs-on: ubuntu-latest\n\n    permissions:\n      pages: write\n      id-token: write\n\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n\n    steps:\n      - name: Deploy\n        id: deployment\n        uses: actions/deploy-pages@v4\n```\n\n**Note:** If not using GitHub Actions, add empty `.nojekyll` file in `static` directory.",
+		"kit/single-page-apps": "# SPA Mode\n\nTurn a SvelteKit app into a client-rendered SPA using a **fallback page** that serves URLs not handled by prerendered pages.\n\n> **Warning:** SPA mode has major performance drawbacks:\n> - Multiple network round trips before content shows\n> - Poor SEO and Core Web Vitals\n> - Inaccessible if JavaScript fails\n> \n> Mitigate by prerendering as many pages as possible, especially your homepage.\n\n## Usage\n\n**1. Disable SSR:**\n\n```js\n/// file: src/routes/+layout.js\nexport const ssr = false;\n```\n\n**2. Configure adapter-static:**\n\nInstall: `npm i -D @sveltejs/adapter-static`\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\tfallback: '200.html' // may differ from host to host\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\nThe `fallback` page is an HTML file that loads your app and navigates to the correct route. The filename depends on your host (e.g., `200.html` for Surge). Avoid `index.html` as it may conflict with prerendering.\n\n> **Note:** Fallback page always uses absolute asset paths (starting with `/`) regardless of `paths.relative` config.\n\n## Prerendering Individual Pages\n\nRe-enable SSR and prerendering for specific pages:\n\n```js\n/// file: src/routes/my-prerendered-page/+page.js\nexport const prerender = true;\nexport const ssr = true;\n```\n\nThese pages render at build time as static `.html` files—no Node server needed.\n\n## Apache\n\nAdd `static/.htaccess` to route requests to fallback:\n\n```\n<IfModule mod_rewrite.c>\n\tRewriteEngine On\n\tRewriteBase /\n\tRewriteRule ^200\\.html$ - [L]\n\tRewriteCond %{REQUEST_FILENAME} !-f\n\tRewriteCond %{REQUEST_FILENAME} !-d\n\tRewriteRule . /200.html [L]\n</IfModule>\n```",
+		"kit/adapter-cloudflare": "# Cloudflare Adapter\n\nDeploy to Cloudflare Workers or Cloudflare Pages using `adapter-cloudflare`.\n\n## Comparisons\n\n- `adapter-cloudflare` – all SvelteKit features; builds for Workers Static Assets and Pages\n- `adapter-cloudflare-workers` – deprecated\n- `adapter-static` – client-side only; compatible with Workers Static Assets and Pages\n\n## Usage\n\n```bash\nnpm i -D @sveltejs/adapter-cloudflare\n```\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-cloudflare';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\tconfig: undefined,\n\t\t\tplatformProxy: {\n\t\t\t\tconfigPath: undefined,\n\t\t\t\tenvironment: undefined,\n\t\t\t\tpersist: undefined\n\t\t\t},\n\t\t\tfallback: 'plaintext',\n\t\t\troutes: {\n\t\t\t\tinclude: ['/*'],\n\t\t\t\texclude: ['<all>']\n\t\t\t}\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Options\n\n### config\nPath to Wrangler config file (if not using default `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml`).\n\n### platformProxy\nPreferences for emulated `platform.env` local bindings. See [getPlatformProxy docs](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1).\n\n### fallback\nRender `plaintext` or `spa` 404 page for non-matching assets. Default `plaintext` is usually sufficient. Use `spa` if using `routes.exclude` to avoid unstyled 404s.\n\n### routes\n**Cloudflare Pages only.** Customizes `_routes.json`:\n- `include` – routes that invoke a function (default `['/*']`)\n- `exclude` – routes that don't invoke a function (faster/cheaper for static assets)\n  - `<build>` – Vite build artifacts\n  - `<files>` – `static` directory contents\n  - `<prerendered>` – prerendered pages\n  - `<all>` – all above (default)\n\nMax 100 combined rules. Useful if `<prerendered>` exceeds limit (e.g., use `'/articles/*'` instead of individual paths).\n\n## Cloudflare Workers\n\n### Basic Configuration\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"name\": \"<any-name-you-want>\",\n\t\"main\": \".svelte-kit/cloudflare/_worker.js\",\n\t\"compatibility_date\": \"2025-01-01\",\n\t\"assets\": {\n\t\t\"binding\": \"ASSETS\",\n\t\t\"directory\": \".svelte-kit/cloudflare\",\n\t}\n}\n```\n\n### Deployment\nFollow [Cloudflare Workers framework guide](https://developers.cloudflare.com/workers/frameworks/framework-guides/svelte/).\n\n## Cloudflare Pages\n\n### Deployment\nFollow [Get Started Guide](https://developers.cloudflare.com/pages/get-started/).\n\n**Git integration build settings:**\n- Framework preset: SvelteKit\n- Build command: `npm run build` or `vite build`\n- Build output directory: `.svelte-kit/cloudflare`\n\n### Notes\nFunctions in `/functions` directory are ignored. Use SvelteKit [server endpoints](routing#server) instead (compiled to single `_worker.js`).\n\n## Runtime APIs\n\nAccess `env` (bindings), `ctx`, `caches`, and `cf` via `platform` in hooks and endpoints:\n\n```js\n// @filename: ambient.d.ts\nimport { DurableObjectNamespace } from '@cloudflare/workers-types';\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n\t\t\tenv: {\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};\n\t\t}\n\t}\n}\n// @filename: +server.js\n// ---cut---\n// @errors: 2355 2322\n/// file: +server.js\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request, platform }) {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n}\n```\n\n> [!NOTE] Use SvelteKit's `$env` module for environment variables.\n\n**Type definitions:**\n\n```ts\n/// file: src/app.d.ts\n+++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n+++\t\t\tenv: {\n\t\t\t\tYOUR_KV_NAMESPACE: KVNamespace;\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};+++\n\t\t}\n\t}\n}\n\nexport {};\n```\n\n### Testing Locally\n\n`platform` values are emulated in dev/preview using Wrangler config bindings. Use `platformProxy` option to customize.\n\nFor build testing, use Wrangler 4:\n- Workers: `wrangler dev .svelte-kit/cloudflare`\n- Pages: `wrangler pages dev .svelte-kit/cloudflare`\n\n## Headers and Redirects\n\n`_headers` and `_redirects` files (in project root) only affect static assets. For dynamic responses, use server endpoints or `handle` hook.\n\n## Troubleshooting\n\n### Node.js Compatibility\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"compatibility_flags\": [\"nodejs_compat\"]\n}\n```\n\n### Worker Size Limits\n\nIf exceeding [size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size), import large libraries client-side only. See [FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window).\n\n### Accessing File System\n\nCan't use `fs`. Use [`read`]($app-server#read) from `$app/server` (fetches from deployed assets) or [prerender](page-options#prerender) routes.\n\n## Migrating from Workers Sites\n\nReplace `adapter-cloudflare-workers` with `adapter-cloudflare`. Update config:\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\n---import adapter from '@sveltejs/adapter-cloudflare-workers';---\n+++import adapter from '@sveltejs/adapter-cloudflare';+++\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n```jsonc\n/// file: wrangler.jsonc\n{\n---\t\"site\": {\n\t\t\"bucket\": \".cloudflare/public\"\n\t},---\n+++\t\"assets\": {\n\t\t\"directory\": \".cloudflare/public\",\n\t\t\"binding\": \"ASSETS\" // Exclude this if you don't have a `main` key configured.\n\t}+++\n}\n```",
+		"kit/adapter-cloudflare-workers": "# adapter-cloudflare-workers\n\n> **DEPRECATED**: Use [`adapter-cloudflare`](adapter-cloudflare) instead. Cloudflare Workers Sites is being deprecated in favor of Workers with Static Assets.\n\nDeploys to [Cloudflare Workers](https://workers.cloudflare.com/) with [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/).\n\n## Installation\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-cloudflare-workers';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// see options below\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Options\n\n- **`config`**: Path to Wrangler config file (if not using default `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml`)\n- **`platformProxy`**: Preferences for emulated `platform.env` local bindings. See [getPlatformProxy docs](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1)\n\n## Configuration\n\nCreate Wrangler config in project root:\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"name\": \"<your-service-name>\",\n\t\"account_id\": \"<your-account-id>\",\n\t\"main\": \"./.cloudflare/worker.js\",\n\t\"site\": {\n\t\t\"bucket\": \"./.cloudflare/public\"\n\t},\n\t\"build\": {\n\t\t\"command\": \"npm run build\"\n\t},\n\t\"compatibility_date\": \"2021-11-12\"\n}\n```\n\nGet `<your-account-id>` from `wrangler whoami` or Cloudflare dashboard URL.\n\nAdd `.cloudflare` and `.wrangler` to `.gitignore`.\n\n## Deploy\n\n```sh\nnpm i -D wrangler\nwrangler login\nwrangler deploy\n```\n\n## Runtime APIs\n\nAccess Cloudflare bindings (KV, DO, etc.) via `platform` in hooks and endpoints:\n\n```js\n/// file: +server.js\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request, platform }) {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n}\n```\n\n**Type definitions:**\n\n```ts\n/// file: src/app.d.ts\nimport { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n\t\t\tenv?: {\n\t\t\t\tYOUR_KV_NAMESPACE: KVNamespace;\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};\n\t\t}\n\t}\n}\n\nexport {};\n```\n\nUse SvelteKit's `$env` module for environment variables.\n\n## Local Testing\n\n`platform` values are emulated in dev/preview using Wrangler config bindings. Configure via `platformProxy` option.\n\nFor testing builds, use Wrangler v4: `wrangler dev`\n\n## Troubleshooting\n\n**Node.js compatibility**: Add to Wrangler config:\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"compatibility_flags\": [\"nodejs_compat\"]\n}\n```\n\n**Worker size limits**: If bundle exceeds [size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size), import large libraries client-side only.\n\n**File system**: `fs` unavailable — [prerender](page-options#prerender) routes that need it.",
+		"kit/adapter-netlify": "# Netlify Adapter\n\nDeploy to Netlify using [`adapter-netlify`](https://github.com/sveltejs/kit/tree/main/packages/adapter-netlify). Auto-installed with `adapter-auto`.\n\n## Usage\n\nInstall: `npm i -D @sveltejs/adapter-netlify`\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-netlify';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\t// default options are shown\n\t\tadapter: adapter({\n\t\t\t// if true, will create a Netlify Edge Function rather\n\t\t\t// than using standard Node-based functions\n\t\t\tedge: false,\n\n\t\t\t// if true, will split your app into multiple functions\n\t\t\t// instead of creating a single one for the entire app.\n\t\t\t// if `edge` is true, this option cannot be used\n\t\t\tsplit: false\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\nRequires `netlify.toml` in project root:\n\n```toml\n[build]\n\tcommand = \"npm run build\"\n\tpublish = \"build\"\n```\n\nDefault publish directory is `\"build\"` if not specified.\n\n## Edge Functions\n\nSet `edge: true` for Deno-based edge functions (deployed close to visitors). Default `false` uses Node-based functions.\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-netlify';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// will create a Netlify Edge Function using Deno-based\n\t\t\t// rather than using standard Node-based functions\n\t\t\tedge: true\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Netlify-Specific Features\n\n### Headers & Redirects\n\nPlace `_headers` and `_redirects` files in project root for static assets.\n\n**Gotchas:**\n- `_redirects` has higher priority than `[[redirects]]` in `netlify.toml`\n- Don't add catch-all rules like `/* /foobar/:splat` - they'll prevent auto-appended rules from working\n- Only first matching rule is processed\n\n### Forms\n\n1. Create HTML form with hidden `form-name` input\n2. Prerender the page (`export const prerender = true`) - Netlify's bot parses HTML at deploy time\n3. Prerender custom success pages if specified\n\n### Functions\n\nAccess Netlify context (including Identity info) via `event.platform.context`:\n\n```js\n// @errors: 2339\n// @filename: ambient.d.ts\n/// <reference types=\"@sveltejs/adapter-netlify\" />\n// @filename: +page.server.js\n// ---cut---\n/// file: +page.server.js\n/** @type {import('./$types').PageServerLoad} */\nexport const load = async (event) => {\n\tconst context = event.platform?.context;\n\tconsole.log(context); // shows up in your functions log in the Netlify app\n};\n```\n\nAdd custom functions via `netlify.toml`:\n\n```toml\n[build]\n\tcommand = \"npm run build\"\n\tpublish = \"build\"\n\n[functions]\n\tdirectory = \"functions\"\n```\n\n## Troubleshooting\n\n**File system access:**\n- `fs` doesn't work in edge deployments\n- In serverless, files aren't copied to deployment\n- Use `read()` from `$app/server` instead (works in both edge and serverless)\n- Or prerender the routes",
+		"kit/adapter-vercel": "# Vercel Adapter\n\nDeploy to Vercel using [`adapter-vercel`](https://github.com/sveltejs/kit/tree/main/packages/adapter-vercel). Auto-installed with `adapter-auto`.\n\n## Setup\n\n```bash\nnpm i -D @sveltejs/adapter-vercel\n```\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-vercel';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// options here\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Deployment Configuration\n\nConfigure via adapter options or `export const config` in `+server.js`, `+page(.server).js`, `+layout(.server).js`.\n\n```js\n/// file: about/+page.js\n/** @type {import('@sveltejs/adapter-vercel').Config} */\nexport const config = {\n\tsplit: true\n};\n```\n\n### All Functions\n- `runtime`: `'edge'`, `'nodejs18.x'`, `'nodejs20.x'`, `'nodejs22.x'` (deprecated, use Vercel dashboard config)\n- `regions`: array of [edge regions](https://vercel.com/docs/concepts/edge-network/regions) or `'all'` for edge (default `[\"iad1\"]` for serverless)\n- `split`: deploy route as individual function\n\n### Edge Functions Only\n- `external`: dependencies to exclude from esbuild bundling\n\n### Serverless Functions Only\n- `memory`: 128-3008 Mb (default 1024)\n- `maxDuration`: seconds (10 Hobby, 15 Pro, 900 Enterprise)\n- `isr`: Incremental Static Regeneration config\n\nConfig in layouts applies to child routes unless overridden.\n\n## Image Optimization\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-vercel';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\timages: {\n\t\t\t\tsizes: [640, 828, 1200, 1920, 3840],\n\t\t\t\tformats: ['image/avif', 'image/webp'],\n\t\t\t\tminimumCacheTTL: 300,\n\t\t\t\tdomains: ['example-app.vercel.app'],\n\t\t\t}\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Incremental Static Regeneration (ISR)\n\n[ISR](https://vercel.com/docs/incremental-static-regeneration) provides prerendered performance with dynamic flexibility.\n\n**⚠️ Use only for content identical across all visitors. No user-specific data (sessions, cookies) or it will leak.**\n\n```js\nimport { BYPASS_TOKEN } from '$env/static/private';\n\n/** @type {import('@sveltejs/adapter-vercel').Config} */\nexport const config = {\n\tisr: {\n\t\texpiration: 60,\n\t\tbypassToken: BYPASS_TOKEN,\n\t\tallowQuery: ['search']\n\t}\n};\n```\n\n**Note:** ISR ignored on routes with `export const prerender = true`.\n\n### Options\n- `expiration` (required): seconds before re-generation (`false` = never)\n- `bypassToken`: 32+ char token for cache bypass via `__prerender_bypass=<token>` cookie or `x-prerender-revalidate: <token>` header\n- `allowQuery`: query params contributing to cache key (others ignored)\n\nGenerate token: `crypto.randomUUID()`. Set as `BYPASS_TOKEN` env var in Vercel. Pull locally: `vercel env pull .env.development.local`\n\n## Environment Variables\n\nAccess [Vercel system env vars](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) from `$env/static/private` or `$env/dynamic/private`.\n\n```js\n/// file: +layout.server.js\nimport { VERCEL_COMMIT_REF } from '$env/static/private';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function load() {\n\treturn {\n\t\tdeploymentGitBranch: VERCEL_COMMIT_REF\n\t};\n}\n```\n\n```svelte\n<!--- file: +layout.svelte --->\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data } = $props();\n</script>\n\n<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>\n```\n\n**Prefer `$env/static/private`** for static replacement and dead code elimination.\n\n## Skew Protection\n\n[Skew protection](https://vercel.com/docs/deployments/skew-protection) routes users to their original deployment via cookie. Enable in Vercel project settings > Advanced.\n\n**Caveat:** Multiple tabs with different versions will route to newest, falling back to SvelteKit's built-in protection.\n\n## Notes\n\n### Vercel Functions\n`/api/*` requests bypass SvelteKit if `api` directory exists at project root. Use [API routes](routing#server) instead.\n\n### Node Version\nUpdate in [project settings](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/node-js#node.js-version) if using old default.\n\n## Troubleshooting\n\n### File System Access\n- **Edge functions:** `fs` unavailable\n- **Serverless functions:** `fs` won't work as expected. Use [`read()`]($app-server#read) from `$app/server` instead\n- Alternative: [prerender](page-options#prerender) routes\n\n### Deployment Protection\nIf using [`read()`]($app-server#read) in edge functions with [Deployment Protection](https://vercel.com/docs/deployment-protection), enable [Protection Bypass for Automation](https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation) to avoid 401 errors.",
+		"kit/writing-adapters": "# Building Adapters\n\n## Adapter API\n\nAdapters implement this structure:\n\n```js\n// @errors: 2322\n// @filename: ambient.d.ts\ntype AdapterSpecificOptions = any;\n\n// @filename: index.js\n// ---cut---\n/** @param {AdapterSpecificOptions} options */\nexport default function (options) {\n\t/** @type {import('@sveltejs/kit').Adapter} */\n\tconst adapter = {\n\t\tname: 'adapter-package-name',\n\t\tasync adapt(builder) {\n\t\t\t// adapter implementation\n\t\t},\n\t\tasync emulate() {\n\t\t\treturn {\n\t\t\t\tasync platform({ config, prerender }) {\n\t\t\t\t\t// the returned object becomes `event.platform` during dev, build and\n\t\t\t\t\t// preview. Its shape is that of `App.Platform`\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tsupports: {\n\t\t\tread: ({ config, route }) => {\n\t\t\t\t// Return `true` if the route with the given `config` can use `read`\n\t\t\t\t// from `$app/server` in production, return `false` if it can't.\n\t\t\t\t// Or throw a descriptive error describing how to configure the deployment\n\t\t\t},\n\t\t\ttracing: () => {\n\t\t\t\t// Return `true` if this adapter supports loading `tracing.server.js`.\n\t\t\t\t// Return `false if it can't, or throw a descriptive error.\n\t\t\t}\n\t\t}\n\t};\n\n\treturn adapter;\n}\n```\n\n**Required:** `name`, `adapt`  \n**Optional:** `emulate`, `supports`\n\n## `adapt` Method Tasks\n\n1. Clear build directory\n2. Write output: `builder.writeClient`, `builder.writeServer`, `builder.writePrerendered`\n3. Output code that:\n   - Imports `Server` from `${builder.getServerDirectory()}/index.js`\n   - Instantiates app with `builder.generateManifest({ relativePath })`\n   - Converts platform requests to standard `Request`\n   - Calls `server.respond(request, { getClientAddress })` to generate `Response`\n   - Exposes platform info via `platform` option in `server.respond`\n   - Shims `fetch` if needed (use `@sveltejs/kit/node/polyfills` for undici-compatible platforms)\n4. Bundle output to avoid dependencies on target platform\n5. Place static files and JS/CSS in correct locations\n\n**Recommended structure:** Output under `build/`, intermediate files under `.svelte-kit/[adapter-name]`\n\n**Tip:** Copy an existing [adapter source](https://github.com/sveltejs/kit/tree/main/packages) as starting point.",
+		"kit/advanced-routing": "# Advanced Routing\n\n## Rest Parameters\n\nUse `[...param]` for unknown number of segments:\n\n```sh\n/[org]/[repo]/tree/[branch]/[...file]\n```\n\nRequest `/sveltejs/kit/tree/main/documentation/docs/04-advanced-routing.md` produces:\n\n```js\n// @noErrors\n{\n\torg: 'sveltejs',\n\trepo: 'kit',\n\tbranch: 'main',\n\tfile: 'documentation/docs/04-advanced-routing.md'\n}\n```\n\n**Note:** `src/routes/a/[...rest]/z/+page.svelte` matches `/a/z` (no parameter), `/a/b/z`, `/a/b/c/z`, etc. Validate rest parameters using matchers.\n\n### 404 Pages\n\nCreate catch-all route for custom 404s:\n\n```tree\nsrc/routes/\n├ marx-brothers/\n│ ├ [...path]/\n│ ├ chico/\n│ ├ harpo/\n│ ├ groucho/\n│ └ +error.svelte\n└ +error.svelte\n```\n\n```js\n/// file: src/routes/marx-brothers/[...path]/+page.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageLoad} */\nexport function load(event) {\n\terror(404, 'Not Found');\n}\n```\n\n**Note:** Unhandled 404s appear in `handleError`.\n\n## Optional Parameters\n\nWrap parameter in double brackets: `[[lang]]/home` matches both `/home` and `/en/home`.\n\n**Note:** Optional parameters cannot follow rest parameters (`[...rest]/[[optional]]`).\n\n## Matching\n\nValidate parameters with matchers in `src/params/`:\n\n```js\n/// file: src/params/fruit.js\n/**\n * @param {string} param\n * @return {param is ('apple' | 'orange')}\n * @satisfies {import('@sveltejs/kit').ParamMatcher}\n */\nexport function match(param) {\n\treturn param === 'apple' || param === 'orange';\n}\n```\n\nUse in routes: `src/routes/fruits/[page=fruit]`\n\n**Note:** Matchers run on server and browser. `*.test.js` and `*.spec.js` files are ignored.\n\n## Sorting\n\nMultiple routes can match same path. Priority rules:\n\n1. More specific routes rank higher\n2. Parameters with matchers (`[name=type]`) beat those without (`[name]`)\n3. `[[optional]]` and `[...rest]` have lowest priority (ignored unless final segment)\n4. Ties resolved alphabetically\n\nExample ordering:\n\n```sh\nsrc/routes/foo-abc/+page.svelte\nsrc/routes/foo-[c]/+page.svelte\nsrc/routes/[[a=x]]/+page.svelte\nsrc/routes/[b]/+page.svelte\nsrc/routes/[...catchall]/+page.svelte\n```\n\n## Encoding\n\nUse hexadecimal escapes `[x+nn]` for special characters:\n\n- `\\` — `[x+5c]`, `/` — `[x+2f]`, `:` — `[x+3a]`, `*` — `[x+2a]`\n- `?` — `[x+3f]`, `\"` — `[x+22]`, `<` — `[x+3c]`, `>` — `[x+3e]`\n- `|` — `[x+7c]`, `#` — `[x+23]`, `%` — `[x+25]`\n- `[` — `[x+5b]`, `]` — `[x+5d]`, `(` — `[x+28]`, `)` — `[x+29]`\n\nExample: `/smileys/:-)` → `src/routes/smileys/[x+3a]-[x+29]/+page.svelte`\n\nUnicode escapes: `[u+nnnn]` (e.g., `[u+d83e][u+dd2a]` or `🤪`)\n\n**Tip:** Encode leading `.` for TypeScript compatibility: `[x+2e]well-known`\n\n## Advanced Layouts\n\n### (group)\n\nParentheses create route groups without affecting URLs:\n\n```tree\nsrc/routes/\n│ (app)/\n│ ├ dashboard/\n│ ├ item/\n│ └ +layout.svelte\n│ (marketing)/\n│ ├ about/\n│ ├ testimonials/\n│ └ +layout.svelte\n├ admin/\n└ +layout.svelte\n```\n\n`/admin` doesn't inherit `(app)` or `(marketing)` layouts.\n\n### +page@\n\nBreak out of layouts with `@segment`:\n\n```tree\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n│ │ │ │ └ +page@(app).svelte\n│ │ │ └ +layout.svelte\n│ │ └ +layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\nOptions:\n- `+page@[id].svelte` — inherits from `[id]/+layout.svelte`\n- `+page@item.svelte` — inherits from `item/+layout.svelte`\n- `+page@(app).svelte` — inherits from `(app)/+layout.svelte`\n- `+page@.svelte` — inherits from root layout\n\n### +layout@\n\nLayouts can also break out:\n\n```\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n│ │ │ │ └ +page.svelte  // uses (app)/item/[id]/+layout.svelte\n│ │ │ ├ +layout.svelte  // inherits from (app)/item/+layout@.svelte\n│ │ │ └ +page.svelte    // uses (app)/item/+layout@.svelte\n│ │ └ +layout@.svelte   // inherits from root layout, skipping (app)/+layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\n### When to Use Groups\n\nGroups aren't always necessary. Alternative: reuse components/functions:\n\n```svelte\n<!--- file: src/routes/nested/route/+layout@.svelte --->\n<script>\n\timport ReusableLayout from '$lib/ReusableLayout.svelte';\n\tlet { data, children } = $props();\n</script>\n\n<ReusableLayout {data}>\n\t{@render children()}\n</ReusableLayout>\n```\n\n```js\n/// file: src/routes/nested/route/+layout.js\n// @filename: ambient.d.ts\ndeclare module \"$lib/reusable-load-function\" {\n\texport function reusableLoad(event: import('@sveltejs/kit').LoadEvent): Promise<Record<string, any>>;\n}\n// @filename: index.js\n// ---cut---\nimport { reusableLoad } from '$lib/reusable-load-function';\n\n/** @type {import('./$types').PageLoad} */\nexport function load(event) {\n\t// Add additional logic here, if needed\n\treturn reusableLoad(event);\n}\n```",
+		"kit/hooks": "# Hooks\n\nApp-wide functions that SvelteKit calls in response to specific events.\n\nThree optional hook files:\n- `src/hooks.server.js` — server hooks\n- `src/hooks.client.js` — client hooks  \n- `src/hooks.js` — universal hooks (run on both)\n\nCode runs at app startup, useful for initializing database clients.\n\n## Server hooks\n\n### handle\n\nRuns on every server request (including prerendering). Receives `event` and `resolve` function.\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tif (event.url.pathname.startsWith('/custom')) {\n\t\treturn new Response('custom response');\n\t}\n\n\tconst response = await resolve(event);\n\treturn response;\n}\n```\n\nDefault: `({ event, resolve }) => resolve(event)`\n\n**locals**: Add custom data to `event.locals` for use in handlers and `load` functions:\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tevent.locals.user = await getUserInformation(event.cookies.get('sessionid'));\n\n\tconst response = await resolve(event);\n\n\tresponse.headers.set('x-custom-header', 'potato');\n\n\treturn response;\n}\n```\n\n**resolve options** (second parameter):\n- `transformPageChunk({ html, done })` — transform HTML chunks\n- `filterSerializedResponseHeaders(name, value)` — filter headers in serialized responses (default: none)\n- `preload({ type, path })` — determine which files to preload (default: `js` and `css`)\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tconst response = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => html.replace('old', 'new'),\n\t\tfilterSerializedResponseHeaders: (name) => name.startsWith('x-'),\n\t\tpreload: ({ type, path }) => type === 'js' || path.includes('/important/')\n\t});\n\n\treturn response;\n}\n```\n\n### handleFetch\n\nModify `event.fetch` calls on server/during prerendering:\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').HandleFetch} */\nexport async function handleFetch({ request, fetch }) {\n\tif (request.url.startsWith('https://api.yourapp.com/')) {\n\t\trequest = new Request(\n\t\t\trequest.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),\n\t\t\trequest\n\t\t);\n\t}\n\n\treturn fetch(request);\n}\n```\n\nFor sibling subdomains, manually include cookies:\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').HandleFetch} */\nexport async function handleFetch({ event, request, fetch }) {\n\tif (request.url.startsWith('https://api.my-domain.com/')) {\n\t\trequest.headers.set('cookie', event.request.headers.get('cookie'));\n\t}\n\n\treturn fetch(request);\n}\n```\n\n### handleValidationError\n\nCalled when remote function argument doesn't match schema. Returns `App.Error` shape:\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').HandleValidationError} */\nexport function handleValidationError({ issues }) {\n\treturn {\n\t\tmessage: 'No thank you'\n\t};\n}\n```\n\n## Shared hooks\n\nAvailable in both `src/hooks.server.js` and `src/hooks.client.js`:\n\n### handleError\n\nCalled for unexpected errors. Log errors and return safe error representation:\n\n```js\n/// file: src/hooks.server.js\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({/*...*/})\n\n/** @type {import('@sveltejs/kit').HandleServerError} */\nexport async function handleError({ error, event, status, message }) {\n\tconst errorId = crypto.randomUUID();\n\n\tSentry.captureException(error, {\n\t\textra: { event, errorId, status }\n\t});\n\n\treturn {\n\t\tmessage: 'Whoops!',\n\t\terrorId\n\t};\n}\n```\n\n```js\n/// file: src/hooks.client.js\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({/*...*/})\n\n/** @type {import('@sveltejs/kit').HandleClientError} */\nexport async function handleError({ error, event, status, message }) {\n\tconst errorId = crypto.randomUUID();\n\n\tSentry.captureException(error, {\n\t\textra: { event, errorId, status }\n\t});\n\n\treturn {\n\t\tmessage: 'Whoops!',\n\t\terrorId\n\t};\n}\n```\n\nCustomize error shape via `App.Error` interface:\n\n```ts\n/// file: src/app.d.ts\ndeclare global {\n\tnamespace App {\n\t\tinterface Error {\n\t\t\tmessage: string;\n\t\t\terrorId: string;\n\t\t}\n\t}\n}\n\nexport {};\n```\n\n> **Note**: `handleError` must never throw. Not called for expected errors (using `error()` from `@sveltejs/kit`).\n\n### init\n\nRuns once at server creation or app start. For async initialization:\n\n```js\n/// file: src/hooks.server.js\nimport * as db from '$lib/server/database';\n\n/** @type {import('@sveltejs/kit').ServerInit} */\nexport async function init() {\n\tawait db.connect();\n}\n```\n\n## Universal hooks\n\nIn `src/hooks.js`, runs on both server and client:\n\n### reroute\n\nChanges URL-to-route translation. Runs before `handle`:\n\n```js\n/// file: src/hooks.js\n/** @type {Record<string, string>} */\nconst translated = {\n\t'/en/about': '/en/about',\n\t'/de/ueber-uns': '/de/about',\n\t'/fr/a-propos': '/fr/about',\n};\n\n/** @type {import('@sveltejs/kit').Reroute} */\nexport function reroute({ url }) {\n\tif (url.pathname in translated) {\n\t\treturn translated[url.pathname];\n\t}\n}\n```\n\nCan be async (since v2.18):\n\n```js\n/// file: src/hooks.js\n/** @type {import('@sveltejs/kit').Reroute} */\nexport async function reroute({ url, fetch }) {\n\tif (url.pathname === '/api/reroute') return;\n\n\tconst api = new URL('/api/reroute', url);\n\tapi.searchParams.set('pathname', url.pathname);\n\n\tconst result = await fetch(api).then(r => r.json());\n\treturn result.pathname;\n}\n```\n\n> **Note**: `reroute` is pure/idempotent. Result is cached per unique URL on client.\n\n### transport\n\nPass custom types across server/client boundary:\n\n```js\n/// file: src/hooks.js\nimport { Vector } from '$lib/math';\n\n/** @type {import('@sveltejs/kit').Transport} */\nexport const transport = {\n\tVector: {\n\t\tencode: (value) => value instanceof Vector && [value.x, value.y],\n\t\tdecode: ([x, y]) => new Vector(x, y)\n\t}\n};\n```",
+		"kit/errors": "# Errors\n\n## Error Objects\n\nSvelteKit distinguishes between **expected** and **unexpected** errors. Both are `{ message: string }` objects by default.\n\n## Expected Errors\n\nCreated with `error()` helper from `@sveltejs/kit`:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\nimport { error } from '@sveltejs/kit';\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\tconst post = await db.getPost(params.slug);\n\n\tif (!post) {\n\t\terror(404, {\n\t\t\tmessage: 'Not found'\n\t\t});\n\t}\n\n\treturn { post };\n}\n```\n\nSets response status and renders nearest `+error.svelte` component where `page.error` is the error object.\n\n```svelte\n<!--- file: src/routes/+error.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.error.message}</h1>\n```\n\nAdd extra properties:\n\n```js\nerror(404, {\n\tmessage: 'Not found',\n\tcode: 'NOT_FOUND'\n});\n```\n\nOr use string shorthand:\n\n```js\nerror(404, 'Not found');\n```\n\n## Unexpected Errors\n\nAny other exception during request handling. Not exposed to users (default: `{ \"message\": \"Internal Error\" }`).\n\nLogged to console/server logs and passed through `handleError` hook for custom handling.\n\n## Responses\n\n**In `handle` or `+server.js`:** Returns fallback error page or JSON based on `Accept` headers.\n\n**In `load` functions:** Renders nearest `+error.svelte` component. If error occurs in `+layout(.server).js`, uses `+error.svelte` _above_ that layout.\n\n**Root layout errors:** Use fallback error page since root layout contains `+error.svelte`.\n\n### Custom Fallback Error Page\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>%sveltekit.error.message%</title>\n\t</head>\n\t<body>\n\t\t<h1>My custom error page</h1>\n\t\t<p>Status: %sveltekit.status%</p>\n\t\t<p>Message: %sveltekit.error.message%</p>\n\t</body>\n</html>\n```\n\n## Type Safety\n\nCustomize error shape via `App.Error` interface:\n\n```ts\n/// file: src/app.d.ts\ndeclare global {\n\tnamespace App {\n\t\tinterface Error {\n\t\t\tcode: string;\n\t\t\tid: string;\n\t\t}\n\t}\n}\n\nexport {};\n```\n\nAlways includes `message: string` property.",
+		"kit/link-options": "# Link Options\n\nSvelteKit uses native `<a>` elements for navigation. Customize behavior with `data-sveltekit-*` attributes on links or parent elements. Also applies to `<form method=\"GET\">`.\n\n## data-sveltekit-preload-data\n\nPreload page data on hover/touch before click happens.\n\n**Values:**\n- `\"hover\"` - preload on mouse rest over link (desktop) or `touchstart` (mobile)\n- `\"tap\"` - preload on `touchstart` or `mousedown` only\n\n**Default template:**\n```html\n<body data-sveltekit-preload-data=\"hover\">\n\t<div style=\"display: contents\">%sveltekit.body%</div>\n</body>\n```\n\n**Override for specific links:**\n```html\n<a data-sveltekit-preload-data=\"tap\" href=\"/stonks\">\n\tGet current stonk values\n</a>\n```\n\n> Ignored if user has `navigator.connection.saveData` enabled.\n\n## data-sveltekit-preload-code\n\nPreload route code without data.\n\n**Values (decreasing eagerness):**\n- `\"eager\"` - preload immediately\n- `\"viewport\"` - preload when link enters viewport\n- `\"hover\"` - preload on hover (code only)\n- `\"tap\"` - preload on tap (code only)\n\n> `viewport` and `eager` only work for links present immediately after navigation, not dynamically added links.\n> Only takes effect if more eager than `data-sveltekit-preload-data`.\n> Ignored if user has reduced data usage enabled.\n\n## data-sveltekit-reload\n\nForce full-page navigation instead of client-side routing.\n\n```html\n<a data-sveltekit-reload href=\"/path\">Path</a>\n```\n\n> Links with `rel=\"external\"` get same treatment and are ignored during prerendering.\n\n## data-sveltekit-replacestate\n\nReplace current history entry instead of creating new one.\n\n```html\n<a data-sveltekit-replacestate href=\"/path\">Path</a>\n```\n\n## data-sveltekit-keepfocus\n\nPrevent focus reset after navigation.\n\n```html\n<form data-sveltekit-keepfocus>\n\t<input type=\"text\" name=\"query\">\n</form>\n```\n\n> Avoid on links. Only use on elements that persist after navigation.\n\n## data-sveltekit-noscroll\n\nPrevent scroll to top (or `#hash`) after navigation.\n\n```html\n<a href=\"path\" data-sveltekit-noscroll>Path</a>\n```\n\n## Disabling Options\n\nUse `\"false\"` value to disable inherited attributes:\n\n```html\n<div data-sveltekit-preload-data>\n\t<!-- these links will be preloaded -->\n\t<a href=\"/a\">a</a>\n\t<a href=\"/b\">b</a>\n\t<a href=\"/c\">c</a>\n\n\t<div data-sveltekit-preload-data=\"false\">\n\t\t<!-- these links will NOT be preloaded -->\n\t\t<a href=\"/d\">d</a>\n\t\t<a href=\"/e\">e</a>\n\t\t<a href=\"/f\">f</a>\n\t</div>\n</div>\n```\n\n**Conditional attributes:**\n```svelte\n<div data-sveltekit-preload-data={condition ? 'hover' : false}>\n```",
+		"kit/service-workers": "# Service Workers\n\nService workers act as proxy servers for network requests, enabling offline support and faster navigation by precaching assets.\n\n## Setup\n\nCreate `src/service-worker.js` (or `src/service-worker/index.js`) - it will be bundled and auto-registered.\n\nDefault registration (can be [disabled](configuration#serviceWorker)):\n```js\nif ('serviceWorker' in navigator) {\n\taddEventListener('load', function () {\n\t\tnavigator.serviceWorker.register('./path/to/service-worker.js');\n\t});\n}\n```\n\n## `$service-worker` Module\n\nProvides:\n- `build` - paths to built app files\n- `files` - paths to static assets\n- `version` - app version string for cache naming\n- `base` - deployment base path\n\n## Example: Offline-Capable Service Worker\n\nCaches built app and static files eagerly, caches other requests on-demand:\n\n```js\n/// file: src/service-worker.js\n// Disables access to DOM typings like `HTMLElement` which are not available\n// inside a service worker and instantiates the correct globals\n/// <reference no-default-lib=\"true\"/>\n/// <reference lib=\"esnext\" />\n/// <reference lib=\"webworker\" />\n\n// Ensures that the `$service-worker` import has proper type definitions\n/// <reference types=\"@sveltejs/kit\" />\n\n// Only necessary if you have an import from `$env/static/public`\n/// <reference types=\"../.svelte-kit/ambient.d.ts\" />\n\nimport { build, files, version } from '$service-worker';\n\n// This gives `self` the correct types\nconst self = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (globalThis.self));\n\n// Create a unique cache name for this deployment\nconst CACHE = `cache-${version}`;\n\nconst ASSETS = [\n\t...build, // the app itself\n\t...files  // everything in `static`\n];\n\nself.addEventListener('install', (event) => {\n\t// Create a new cache and add all files to it\n\tasync function addFilesToCache() {\n\t\tconst cache = await caches.open(CACHE);\n\t\tawait cache.addAll(ASSETS);\n\t}\n\n\tevent.waitUntil(addFilesToCache());\n});\n\nself.addEventListener('activate', (event) => {\n\t// Remove previous cached data from disk\n\tasync function deleteOldCaches() {\n\t\tfor (const key of await caches.keys()) {\n\t\t\tif (key !== CACHE) await caches.delete(key);\n\t\t}\n\t}\n\n\tevent.waitUntil(deleteOldCaches());\n});\n\nself.addEventListener('fetch', (event) => {\n\t// ignore POST requests etc\n\tif (event.request.method !== 'GET') return;\n\n\tasync function respond() {\n\t\tconst url = new URL(event.request.url);\n\t\tconst cache = await caches.open(CACHE);\n\n\t\t// `build`/`files` can always be served from the cache\n\t\tif (ASSETS.includes(url.pathname)) {\n\t\t\tconst response = await cache.match(url.pathname);\n\n\t\t\tif (response) {\n\t\t\t\treturn response;\n\t\t\t}\n\t\t}\n\n\t\t// for everything else, try the network first, but\n\t\t// fall back to the cache if we're offline\n\t\ttry {\n\t\t\tconst response = await fetch(event.request);\n\n\t\t\t// if we're offline, fetch can return a value that is not a Response\n\t\t\t// instead of throwing - and we can't pass this non-Response to respondWith\n\t\t\tif (!(response instanceof Response)) {\n\t\t\t\tthrow new Error('invalid response from fetch');\n\t\t\t}\n\n\t\t\tif (response.status === 200) {\n\t\t\t\tcache.put(event.request, response.clone());\n\t\t\t}\n\n\t\t\treturn response;\n\t\t} catch (err) {\n\t\t\tconst response = await cache.match(event.request);\n\n\t\t\tif (response) {\n\t\t\t\treturn response;\n\t\t\t}\n\n\t\t\t// if there's no cache, then just error out\n\t\t\t// as there is nothing we can do to respond to this request\n\t\t\tthrow err;\n\t\t}\n\t}\n\n\tevent.respondWith(respond());\n});\n```\n\n**Gotchas:**\n- Be careful caching - stale data may be worse than no data\n- Browsers empty caches when full - avoid caching large assets like videos\n\n## Development\n\nService worker is bundled for production only. In dev, requires browsers supporting [modules in service workers](https://web.dev/es-modules-in-sw).\n\nManual registration in dev needs module type:\n```js\nimport { dev } from '$app/environment';\n\nnavigator.serviceWorker.register('/service-worker.js', {\n\ttype: dev ? 'module' : 'classic'\n});\n```\n\n**Note:** `build` and `prerendered` are empty arrays during development.\n\n## Alternatives\n\n- [Workbox](https://web.dev/learn/pwa/workbox) - popular PWA library\n- [Vite PWA plugin](https://vite-pwa-org.netlify.app/frameworks/sveltekit.html) - Workbox integration for SvelteKit",
+		"kit/server-only-modules": "# Server-only modules\n\nSvelteKit prevents accidental import of sensitive server code into client-side bundles.\n\n## Private environment variables\n\n`$env/static/private` and `$env/dynamic/private` can only be imported in server modules like `hooks.server.js` or `+page.server.js`.\n\n## Server-only utilities\n\n`$app/server` module (contains `read()` for filesystem access) only works on server.\n\n## Making your modules server-only\n\nTwo ways:\n1. Add `.server` to filename: `secrets.server.js`\n2. Place in `$lib/server`: `$lib/server/secrets.js`\n\n## How it works\n\nSvelteKit errors if client code imports server-only modules (directly or indirectly):\n\n```js\n/// file: $lib/server/secrets.js\nexport const atlantisCoordinates = [/* redacted */];\n```\n\n```js\n/// file: src/routes/utils.js\nexport { atlantisCoordinates } from '$lib/server/secrets.js';\nexport const add = (a, b) => a + b;\n```\n\n```html\n/// file: src/routes/+page.svelte\n<script>\n\timport { add } from './utils.js';\n</script>\n```\n\n**Error:**\n```\nCannot import $lib/server/secrets.ts into code that runs in the browser\n\n src/routes/+page.svelte imports\n  src/routes/utils.js imports\n   $lib/server/secrets.ts\n```\n\nEven though `+page.svelte` only uses `add`, the entire import chain is blocked to prevent leaking `atlantisCoordinates`.\n\n**Works with dynamic imports**, including interpolated ones like `` await import(`./${foo}.js`) ``.\n\n> **Note:** Detection disabled when `process.env.TEST === 'true'` (for Vitest, etc.)",
+		"kit/snapshots": "# Snapshots\n\nPreserve ephemeral DOM state (scroll positions, input values, etc.) across navigation.\n\n## Usage\n\nExport a `snapshot` object with `capture` and `restore` methods from `+page.svelte` or `+layout.svelte`:\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\tlet comment = $state('');\n\n\t/** @type {import('./$types').Snapshot<string>} */\n\texport const snapshot = {\n\t\tcapture: () => comment,\n\t\trestore: (value) => comment = value\n\t};\n</script>\n\n<form method=\"POST\">\n\t<label for=\"comment\">Comment</label>\n\t<textarea id=\"comment\" bind:value={comment} />\n\t<button>Post comment</button>\n</form>\n```\n\n- `capture` - called before page updates, returns value stored in browser history\n- `restore` - called when navigating back, receives stored value\n\n## Constraints\n\n- Data must be JSON serializable (persisted to `sessionStorage`)\n- Avoid large objects - retained in memory for session duration",
+		"kit/shallow-routing": "# Shallow Routing\n\nNavigate without triggering `load` functions or replacing page components. Useful for modals that users can dismiss by navigating back.\n\n## Basic Usage\n\nUse `pushState` and `replaceState` to associate state with history entries:\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\timport { pushState } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\n\tfunction showModal() {\n\t\tpushState('', {\n\t\t\tshowModal: true\n\t\t});\n\t}\n</script>\n\n{#if page.state.showModal}\n\t<Modal close={() => history.back()} />\n{/if}\n```\n\nModal dismisses via back button or `history.back()` call.\n\n## API\n\n- **`pushState(url, state)`**: Creates new history entry\n  - First arg: URL relative to current (use `''` to stay on current URL)\n  - Second arg: page state accessible via `page.state`\n- **`replaceState(url, state)`**: Sets state without creating history entry\n- Type-safe state: declare `App.PageState` interface in `src/app.d.ts`\n\n## Loading Data for Routes\n\nRender another `+page.svelte` inside current page using `preloadData`:\n\n```svelte\n<!--- file: src/routes/photos/+page.svelte --->\n<script>\n\timport { preloadData, pushState, goto } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\timport PhotoPage from './[id]/+page.svelte';\n\n\tlet { data } = $props();\n</script>\n\n{#each data.thumbnails as thumbnail}\n\t<a\n\t\thref=\"/photos/{thumbnail.id}\"\n\t\tonclick={async (e) => {\n\t\t\tif (innerWidth < 640        // bail if the screen is too small\n\t\t\t\t|| e.shiftKey             // or the link is opened in a new window\n\t\t\t\t|| e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey)\n\t\t\t\t// should also consider clicking with a mouse scroll wheel\n\t\t\t) return;\n\n\t\t\t// prevent navigation\n\t\t\te.preventDefault();\n\n\t\t\tconst { href } = e.currentTarget;\n\n\t\t\t// run `load` functions (or rather, get the result of the `load` functions\n\t\t\t// that are already running because of `data-sveltekit-preload-data`)\n\t\t\tconst result = await preloadData(href);\n\n\t\t\tif (result.type === 'loaded' && result.status === 200) {\n\t\t\t\tpushState(href, { selected: result.data });\n\t\t\t} else {\n\t\t\t\t// something bad happened! try navigating\n\t\t\t\tgoto(href);\n\t\t\t}\n\t\t}}\n\t>\n\t\t<img alt={thumbnail.alt} src={thumbnail.src} />\n\t</a>\n{/each}\n\n{#if page.state.selected}\n\t<Modal onclose={() => history.back()}>\n\t\t<!-- pass page data to the +page.svelte component,\n\t\t     just like SvelteKit would on navigation -->\n\t\t<PhotoPage data={page.state.selected} />\n\t</Modal>\n{/if}\n```\n\n`preloadData` reuses requests from `data-sveltekit-preload-data`.\n\n## Caveats\n\n- `page.state` is empty object during SSR and on first page load\n- State not applied on page reload/return from another document\n- Requires JavaScript - provide fallback behavior",
+		"kit/observability": "# OpenTelemetry Tracing\n\n**Available since 2.31** - Experimental feature\n\n## Setup\n\nEnable in `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\texperimental: {\n\t\t\ttracing: {\n\t\t\t\tserver: true\n\t\t\t},\n\t\t\tinstrumentation: {\n\t\t\t\tserver: true\n\t\t\t}\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\n## What Gets Traced\n\n- `handle` hook and `sequence` functions\n- Server `load` functions (including universal `load` on server)\n- Form actions\n- Remote functions\n\n## Augmenting Spans\n\nAccess `root` and `current` spans via request event:\n\n```js\n/// file: $lib/authenticate.ts\nimport { getRequestEvent } from '$app/server';\nimport { getAuthenticatedUser } from '$lib/auth-core';\n\nasync function authenticate() {\n\tconst user = await getAuthenticatedUser();\n\tconst event = getRequestEvent();\n\tevent.tracing.root.setAttribute('userId', user.id);\n}\n```\n\n## Local Development Setup\n\nInstall dependencies:\n```sh\nnpm i @opentelemetry/sdk-node @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-proto import-in-the-middle\n```\n\nCreate `src/instrumentation.server.js`:\n\n```js\n/// file: src/instrumentation.server.js\nimport { NodeSDK } from '@opentelemetry/sdk-node';\nimport { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';\nimport { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';\nimport { createAddHookMessageChannel } from 'import-in-the-middle';\nimport { register } from 'node:module';\n\nconst { registerOptions } = createAddHookMessageChannel();\nregister('import-in-the-middle/hook.mjs', import.meta.url, registerOptions);\n\nconst sdk = new NodeSDK({\n\tserviceName: 'test-sveltekit-tracing',\n\ttraceExporter: new OTLPTraceExporter(),\n\tinstrumentations: [getNodeAutoInstrumentations()]\n});\n\nsdk.start();\n```\n\nView traces at [localhost:16686](http://localhost:16686) with Jaeger.\n\n## Notes\n\n- `src/instrumentation.server.ts` runs before app code (if platform/adapter supports it)\n- Tracing has performance overhead - consider dev/preview only\n- `@opentelemetry/api` is optional peer dependency, usually satisfied by SDK packages",
+		"kit/packaging": "# Packaging Svelte Libraries\n\nUse `@sveltejs/package` to build component libraries. Structure is same as SvelteKit apps, but `src/lib` is public-facing (not `src/routes`).\n\n## svelte-package Command\n\nGenerates `dist` directory from `src/lib`:\n- Preprocesses Svelte components\n- Transpiles TypeScript to JavaScript  \n- Generates `.d.ts` type definitions (requires `typescript >= 4.0.0`)\n\n## package.json Configuration\n\n### Key Fields\n\n**name** - Package identifier for npm\n```json\n{ \"name\": \"your-library\" }\n```\n\n**license** - Usage terms (e.g., `\"MIT\"`)\n\n**files** - What gets published (README/LICENSE auto-included)\n```json\n{ \"files\": [\"dist\"] }\n```\n\n**exports** - Entry points with conditions\n```json\n{\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"svelte\": \"./dist/index.js\"\n    }\n  }\n}\n```\n\nExport conditions:\n- `types` - TypeScript definitions\n- `svelte` - For Svelte-aware tooling (use `default` for non-Svelte libraries)\n\nMultiple entry points:\n```json\n{\n  \"exports\": {\n    \"./Foo.svelte\": {\n      \"types\": \"./dist/Foo.svelte.d.ts\",\n      \"svelte\": \"./dist/Foo.svelte\"\n    }\n  }\n}\n```\n\n**svelte** - Legacy field for backwards compatibility\n```json\n{ \"svelte\": \"./dist/index.js\" }\n```\n\n**sideEffects** - Enables tree-shaking. Mark CSS files as side effects for webpack compatibility:\n```json\n{ \"sideEffects\": [\"**/*.css\"] }\n```\n\n## TypeScript\n\nType definitions auto-generated by default. For non-root exports (e.g., `your-library/foo`), TypeScript won't resolve `types` condition correctly. Two solutions:\n\n**Option 1:** Users set `\"moduleResolution\": \"bundler\"` (TS 5+), `\"node16\"`, or `\"nodenext\"` in tsconfig\n\n**Option 2:** Use `typesVersions` in package.json:\n```json\n{\n  \"exports\": {\n    \"./foo\": {\n      \"types\": \"./dist/foo.d.ts\",\n      \"svelte\": \"./dist/foo.js\"\n    }\n  },\n  \"typesVersions\": {\n    \">4.0\": {\n      \"foo\": [\"./dist/foo.d.ts\"]\n    }\n  }\n}\n```\n\n## Best Practices\n\n- Avoid SvelteKit-specific modules (`$app/*`) unless targeting only SvelteKit projects. Use `esm-env` instead\n- Add aliases via `svelte.config.js` (not `vite.config.js`)\n- Removing exports or export conditions is a breaking change\n- Adding new exports is non-breaking\n\n## Source Maps\n\nEnable declaration maps for \"Go to Definition\" support:\n1. Set `\"declarationMap\": true` in tsconfig.json\n2. Publish source files alongside dist:\n```json\n{\n  \"files\": [\n    \"dist\",\n    \"!dist/**/*.test.*\",\n    \"src/lib\",\n    \"!src/lib/**/*.test.*\"\n  ]\n}\n```\n\n## CLI Options\n\n```sh\nsvelte-package [options]\n```\n\n- `-w`/`--watch` - Rebuild on changes\n- `-i`/`--input` - Input directory (default: `src/lib`)\n- `-o`/`--output` - Output directory (default: `dist`)\n- `-p`/`--preserve-output` - Don't empty output first (default: `false`)\n- `-t`/`--types` - Generate type definitions (default: `true`)\n- `--tsconfig` - Path to tsconfig/jsconfig\n\n## Publishing\n\n```sh\nnpm publish\n```\n\n## Caveats\n\n**Relative imports must be fully specified** with extensions:\n```js\nimport { something } from './something/index.js';\n```\n\nFor TypeScript, import `.ts` files using `.js` extension. Set `\"moduleResolution\": \"NodeNext\"` in tsconfig for help.",
+		"kit/auth": "# Auth\n\nAuthentication verifies user identity via credentials. Authorization determines allowed actions.\n\n## Sessions vs Tokens\n\n**Sessions:**\n- Stored in database\n- Can be immediately revoked\n- Require DB query per request\n\n**JWT:**\n- Not checked against datastore\n- Cannot be immediately revoked\n- Better latency, reduced DB load\n\n## Integration\n\n- Check auth [cookies](@sveltejs-kit#Cookies) in [server hooks](hooks#Server-hooks)\n- Store user info in [`locals`](hooks#Server-hooks-locals)\n\n## Implementation\n\n[Lucia](https://lucia-auth.com/) provides session-based auth examples for SvelteKit.\n\nAdd via:\n- `npx sv create` (new project)\n- `npx sv add lucia` (existing project)\n\nSvelteKit-specific guides preferred over generic JS auth libraries to avoid multiple framework dependencies.",
+		"kit/performance": "# Performance\n\n## Built-in Optimizations\n\nSvelteKit automatically provides:\n- Code-splitting\n- Asset preloading\n- File hashing for caching\n- Request coalescing (groups server `load` functions into single HTTP request)\n- Parallel loading for universal `load` functions\n- Data inlining (replays server `fetch` in browser without new request)\n- Conservative invalidation (only re-runs `load` when necessary)\n- Prerendering\n- Link preloading\n\n## Diagnosing Issues\n\n**Tools:**\n- [PageSpeed Insights](https://pagespeed.web.dev/)\n- [WebPageTest](https://www.webpagetest.org/)\n- Browser devtools: Lighthouse, Network, Performance tabs\n\n**Important:** Test in preview mode after building, not dev mode.\n\n**Instrumenting:** Use [OpenTelemetry](https://opentelemetry.io/) or [Server-Timing headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing) to debug slow API calls.\n\n## Optimizing Assets\n\n### Images\nUse `@sveltejs/enhanced-img` package (see [images](images) page).\n\n### Videos\n- Compress with [Handbrake](https://handbrake.fr/), convert to `.webm` or `.mp4`\n- Lazy-load below-the-fold videos: `preload=\"none\"`\n- Strip audio from muted videos with [FFmpeg](https://ffmpeg.org/)\n\n### Fonts\nSvelteKit doesn't preload fonts by default. Preload in `handle` hook with `resolve` and `preload` filter. [Subset fonts](https://web.dev/learn/performance/optimize-web-fonts#subset_your_web_fonts) to reduce size.\n\n## Reducing Code Size\n\n### Svelte Version\nUse latest version. Svelte 5 < Svelte 4 < Svelte 3 (size and speed).\n\n### Packages\nUse [`rollup-plugin-visualizer`](https://www.npmjs.com/package/rollup-plugin-visualizer) to identify large packages. Inspect build output with `build: { minify: false }` in Vite config.\n\n### External Scripts\nMinimize third-party scripts. Use server-side analytics (Cloudflare, Netlify, Vercel). Run scripts in web worker with [Partytown's SvelteKit integration](https://partytown.builder.io/sveltekit).\n\n### Selective Loading\nUse dynamic `import(...)` for conditional code instead of static `import`.\n\n## Navigation\n\n### Preloading\nConfigure [link options](link-options) for eager preloading (default on `<body>`).\n\n### Non-essential Data\nReturn promises in `load` functions for slow data. Server `load` functions will [stream](load#Streaming-with-promises) data after navigation.\n\n### Preventing Waterfalls\n\n**Waterfalls** = sequential requests that kill performance.\n\n**Browser waterfalls:**\n- SvelteKit adds `modulepreload` tags/headers automatically\n- Check network tab for additional preload needs\n- Manually handle web fonts\n- **Avoid SPA mode** — creates waterfalls (empty page → JS → render)\n\n**Backend waterfalls:**\n- Use [server `load` functions](load#Universal-vs-server) to make backend requests from server, not browser\n- Use database joins instead of sequential queries\n\n## Hosting\n\n- Locate frontend in same data center as backend\n- Use edge deployment (many adapters support this, some [per-route](page-options#config))\n- Use CDN for images (often automatic)\n- Ensure HTTP/2 or newer for parallel file loading\n\n## Further Reading\n\n[Core Web Vitals](https://web.dev/explore/learn-core-web-vitals)",
+		"kit/icons": "# Icons\n\n## CSS Approach\nUse Iconify's CSS-based icons from [popular icon sets](https://icon-sets.iconify.design/). Supports [Tailwind CSS](https://iconify.design/docs/usage/css/tailwind/) and [UnoCSS](https://iconify.design/docs/usage/css/unocss/) plugins. No imports needed in `.svelte` files.\n\n## Svelte Libraries\n**Avoid** libraries with one `.svelte` file per icon - thousands of `.svelte` files severely slow Vite's dependency optimization, especially with mixed umbrella/subpath imports.\n\nSee [icon libraries](/packages#icons) for options.",
+		"kit/images": "# Images\n\n## Vite Built-in Handling\n\nVite automatically processes imported assets, adding hashes for caching and inlining small assets.\n\n```svelte\n<script>\n\timport logo from '$lib/assets/logo.png';\n</script>\n\n<img alt=\"The project logo\" src={logo} />\n```\n\n## @sveltejs/enhanced-img\n\nPlugin that generates multiple formats (avif, webp), sizes, strips EXIF, and prevents layout shift. Only optimizes files available at build time.\n\n### Setup\n\n```sh\nnpm i -D @sveltejs/enhanced-img\n```\n\n```js\nimport { sveltekit } from '@sveltejs/kit/vite';\nimport { enhancedImages } from '@sveltejs/enhanced-img';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n\tplugins: [\n\t\tenhancedImages(), // must come before SvelteKit plugin\n\t\tsveltekit()\n\t]\n});\n```\n\nBuild output cached in `./node_modules/.cache/imagetools`.\n\n### Basic Usage\n\n```svelte\n<enhanced:img src=\"./path/to/your/image.jpg\" alt=\"An alt text\" />\n```\n\nGenerates `<picture>` with multiple formats/sizes. Provide images at 2x resolution for HiDPI displays.\n\n**Note:** Use `enhanced\\:img` in CSS selectors to escape the colon.\n\n### Dynamic Images\n\n```svelte\n<script>\n\timport MyImage from './path/to/your/image.jpg?enhanced';\n</script>\n\n<enhanced:img src={MyImage} alt=\"some alt text\" />\n```\n\nWith `import.meta.glob`:\n\n```svelte\n<script>\n\tconst imageModules = import.meta.glob(\n\t\t'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp,svg}',\n\t\t{\n\t\t\teager: true,\n\t\t\tquery: {\n\t\t\t\tenhanced: true\n\t\t\t}\n\t\t}\n\t)\n</script>\n\n{#each Object.entries(imageModules) as [_path, module]}\n\t<enhanced:img src={module.default} alt=\"some alt text\" />\n{/each}\n```\n\n### Dimensions\n\n`width` and `height` auto-inferred to prevent layout shift. Override with CSS:\n\n```svelte\n<style>\n\t.hero-image img {\n\t\twidth: var(--size);\n\t\theight: auto;\n\t}\n</style>\n```\n\n### srcset and sizes\n\nFor large images, specify `sizes` to serve smaller versions on smaller devices:\n\n```svelte\n<enhanced:img src=\"./image.png\" sizes=\"min(1280px, 100vw)\"/>\n```\n\nCustom widths with `w` parameter (smallest auto-generated is 540px):\n\n```svelte\n<enhanced:img\n  src=\"./image.png?w=1280;640;400\"\n  sizes=\"(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px\"\n/>\n```\n\nWithout `sizes`, generates 2x and 1x resolution images.\n\n### Per-image Transforms\n\nApply transforms via query string:\n\n```svelte\n<enhanced:img src=\"./path/to/your/image.jpg?blur=15\" alt=\"An alt text\" />\n```\n\n[Full directive list](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md).\n\n## Dynamic CDN Images\n\nFor images not available at build time (CMS, backend), use CDNs. Libraries:\n- [`@unpic/svelte`](https://unpic.pics/img/svelte/) - CDN-agnostic\n- [Cloudinary](https://svelte.cloudinary.dev/)\n- CMS-specific: Contentful, Storyblok, Contentstack\n\n## Best Practices\n\n- Mix solutions as needed per use case\n- Serve via CDN to reduce latency\n- Provide 2x resolution source images for HiDPI\n- Use `sizes` for images larger than ~400px\n- For LCP images: set `fetchpriority=\"high\"`, avoid `loading=\"lazy\"`\n- `width`/`height` prevent layout shift (auto-added by enhanced-img)\n- Always provide `alt` text (compiler warns if missing)\n- Don't use `em`/`rem` in `sizes` or change their default size with CSS",
+		"kit/accessibility": "# Accessibility\n\nSvelteKit provides accessible defaults. You're responsible for ensuring your application code is accessible.\n\n## Route Announcements\n\nSvelteKit injects a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) that announces page changes during client-side navigation by reading the `<title>` element.\n\n**Every page needs a unique, descriptive title:**\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<svelte:head>\n\t<title>Todo List</title>\n</svelte:head>\n```\n\n## Focus Management\n\nAfter each navigation and enhanced form submission, SvelteKit focuses `<body>` (or an element with `autofocus` if present).\n\n**Customize focus with `afterNavigate`:**\n\n```js\nimport { afterNavigate } from '$app/navigation';\n\nafterNavigate(() => {\n\t/** @type {HTMLElement | null} */\n\tconst to_focus = document.querySelector('.focus-me');\n\tto_focus?.focus();\n});\n```\n\n**`goto` with `keepFocus` option:** Preserves current focus instead of resetting. Ensure the focused element still exists after navigation.\n\n## Lang Attribute\n\nDefault is English. Update `src/app.html` for other languages:\n\n```html\n/// file: src/app.html\n<html lang=\"de\">\n```\n\n**For multiple languages, use a placeholder and `handle` hook:**\n\n```html\n/// file: src/app.html\n<html lang=\"%lang%\">\n```\n\n```js\n/// file: src/hooks.server.js\n/**\n * @param {import('@sveltejs/kit').RequestEvent} event\n */\nfunction get_lang(event) {\n\treturn 'en';\n}\n// ---cut---\n/** @type {import('@sveltejs/kit').Handle} */\nexport function handle({ event, resolve }) {\n\treturn resolve(event, {\n\t\ttransformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event))\n\t});\n}\n```\n\n## Further Reading\n\n- [MDN Web Docs: Accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility)\n- [The A11y Project](https://www.a11yproject.com/)\n- [How to Meet WCAG](https://www.w3.org/WAI/WCAG21/quickref/)",
+		"kit/seo": "# SEO\n\n## Out of the box\n\n### SSR\nSearch engines index server-side rendered content more reliably. SvelteKit uses SSR by default—keep it enabled unless necessary to disable in [`handle`](hooks#Server-hooks-handle).\n\n### Performance\n[Core Web Vitals](https://web.dev/vitals/#core-web-vitals) impact search ranking. Use [hybrid rendering](glossary#Hybrid-app), [optimize images](images), and test with [PageSpeed Insights](https://pagespeed.web.dev/) or [Lighthouse](https://developers.google.com/web/tools/lighthouse). See [performance page](performance) for details.\n\n### Normalized URLs\nSvelteKit redirects trailing slashes based on [`trailingSlash`](page-options#trailingSlash) config to avoid duplicate URLs.\n\n## Manual setup\n\n### &lt;title&gt; and &lt;meta&gt;\nEvery page needs unique `<title>` and `<meta name=\"description\">` in [`<svelte:head>`](../svelte/svelte-head). See [Lighthouse SEO audits](https://web.dev/lighthouse-seo/).\n\n**Pattern:** Return SEO data from page [`load`](load) functions, use as [`page.data`]($app-state) in `<svelte:head>` in root [layout](routing#layout).\n\n### Sitemaps\nCreate dynamic sitemaps with endpoints:\n\n```js\n/// file: src/routes/sitemap.xml/+server.js\nexport async function GET() {\n\treturn new Response(\n\t\t`\n\t\t<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n\t\t<urlset\n\t\t\txmlns=\"https://www.sitemaps.org/schemas/sitemap/0.9\"\n\t\t\txmlns:xhtml=\"https://www.w3.org/1999/xhtml\"\n\t\t\txmlns:mobile=\"https://www.google.com/schemas/sitemap-mobile/1.0\"\n\t\t\txmlns:news=\"https://www.google.com/schemas/sitemap-news/0.9\"\n\t\t\txmlns:image=\"https://www.google.com/schemas/sitemap-image/1.1\"\n\t\t\txmlns:video=\"https://www.google.com/schemas/sitemap-video/1.1\"\n\t\t>\n\t\t\t<!-- <url> elements go here -->\n\t\t</urlset>`.trim(),\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Content-Type': 'application/xml'\n\t\t\t}\n\t\t}\n\t);\n}\n```\n\n### AMP\nFor [AMP](https://amp.dev/) sites:\n\n1. Set [`inlineStyleThreshold`](configuration#inlineStyleThreshold) to `Infinity`\n2. Disable `csr` in root layout\n3. Add `amp` to `app.html`\n4. Transform HTML with `@sveltejs/amp` in `transformPageChunk`\n\n```js\n/// file: src/hooks.server.js\nimport * as amp from '@sveltejs/amp';\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tlet buffer = '';\n\treturn await resolve(event, {\n\t\ttransformPageChunk: ({ html, done }) => {\n\t\t\tbuffer += html;\n\t\t\tif (done) return amp.transform(buffer);\n\t\t}\n\t});\n}\n```\n\n**Optional:** Remove unused CSS with [`dropcss`](https://www.npmjs.com/package/dropcss):\n\n```js\n/// file: src/hooks.server.js\n// @errors: 2307\nimport * as amp from '@sveltejs/amp';\nimport dropcss from 'dropcss';\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tlet buffer = '';\n\n\treturn await resolve(event, {\n\t\ttransformPageChunk: ({ html, done }) => {\n\t\t\tbuffer += html;\n\n\t\t\tif (done) {\n\t\t\t\tlet css = '';\n\t\t\t\tconst markup = amp\n\t\t\t\t\t.transform(buffer)\n\t\t\t\t\t.replace('⚡', 'amp') // dropcss can't handle this character\n\t\t\t\t\t.replace(/<style amp-custom([^>]*?)>([^]+?)<\\/style>/, (match, attributes, contents) => {\n\t\t\t\t\t\tcss = contents;\n\t\t\t\t\t\treturn `<style amp-custom${attributes}></style>`;\n\t\t\t\t\t});\n\n\t\t\t\tcss = dropcss({ css, html: markup }).css;\n\t\t\t\treturn markup.replace('</style>', `${css}</style>`);\n\t\t\t}\n\t\t}\n\t});\n}\n```\n\n> Validate transformed HTML with `amphtml-validator` in `handle` hook, but only when prerendering (it's slow).",
+		"kit/faq": "# SvelteKit FAQ\n\n## Including package.json data\n\nLoad JSON with import attributes:\n\n```ts\n/// file: svelte.config.js\nimport pkg from './package.json' with { type: 'json' };\n```\n\n## Package inclusion issues\n\nCheck packaging compatibility at [publint.dev](https://publint.dev/).\n\n**Key packaging requirements:**\n- `exports` takes precedence over `main`/`module` (prevents deep imports)\n- ESM files: `.mjs` extension OR `\"type\": \"module\"` in package.json (then CJS uses `.cjs`)\n- `main` should be defined if no `exports`\n- Svelte components: distribute as uncompiled `.svelte` files with ESM JS only\n- Preprocess TypeScript/SCSS to vanilla JS/CSS (use [`svelte-package`](./packaging))\n\nESM versions work best with Vite. CJS dependencies are auto-converted by `vite-plugin-svelte` using `esbuild`.\n\nIf issues persist, check [Vite issues](https://github.com/vitejs/vite/issues) or try adjusting [`optimizeDeps`](https://vitejs.dev/config/#dep-optimization-options)/[`ssr`](https://vitejs.dev/config/#ssr-options) config (temporary workaround).\n\n## View transitions API\n\nUse `document.startViewTransition` in `onNavigate`:\n\n```js\nimport { onNavigate } from '$app/navigation';\n\nonNavigate((navigation) => {\n\tif (!document.startViewTransition) return;\n\n\treturn new Promise((resolve) => {\n\t\tdocument.startViewTransition(async () => {\n\t\t\tresolve();\n\t\t\tawait navigation.complete;\n\t\t});\n\t});\n});\n```\n\n## Database setup\n\n- Query databases in [server routes](./routing#server), not `.svelte` files\n- Create `db.js` singleton for connection\n- Run setup code in `hooks.server.js`\n- Use [Svelte CLI](/docs/cli/overview) for automatic setup\n\n## Client-side only code\n\n**Browser check:**\n```js\nimport { browser } from '$app/environment';\n\nif (browser) {\n\t// client-only code\n}\n```\n\n**onMount (runs after first render):**\n```js\nimport { onMount } from 'svelte';\n\nonMount(async () => {\n\tconst { method } = await import('some-browser-only-library');\n\tmethod('hello world');\n});\n```\n\n**Static import (tree-shaken on server):**\n```js\nimport { onMount } from 'svelte';\nimport { method } from 'some-browser-only-library';\n\nonMount(() => {\n\tmethod('hello world');\n});\n```\n\n**Await block:**\n```svelte\n<script>\n\timport { browser } from '$app/environment';\n\n\tconst ComponentConstructor = browser ?\n\t\timport('some-browser-only-library').then((module) => module.Component) :\n\t\tnew Promise(() => {});\n</script>\n\n{#await ComponentConstructor}\n\t<p>Loading...</p>\n{:then component}\n\t<svelte:component this={component} />\n{:catch error}\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\n## External API server\n\n**Options:**\n1. Use [`event.fetch`](./load#Making-fetch-requests) (requires handling CORS)\n2. Set up proxy: production rewrites or Vite's [`server.proxy`](https://vitejs.dev/config/server-options.html#server-proxy)\n3. Create API route proxy:\n\n```js\n/// file: src/routes/api/[...path]/+server.js\n/** @type {import('./$types').RequestHandler} */\nexport function GET({ params, url }) {\n\treturn fetch(`https://example.com/${params.path + url.search}`);\n}\n```\n\nSee [`handleFetch`](./hooks#Server-hooks-handleFetch) for fetch customization.\n\n## Middleware\n\n**Production:** `adapter-node` builds middleware for custom servers\n\n**Dev:** Use Vite plugin:\n\n```js\nimport { sveltekit } from '@sveltejs/kit/vite';\n\n/** @type {import('vite').Plugin} */\nconst myPlugin = {\n\tname: 'log-request-middleware',\n\tconfigureServer(server) {\n\t\tserver.middlewares.use((req, res, next) => {\n\t\t\tconsole.log(`Got request ${req.url}`);\n\t\t\tnext();\n\t\t});\n\t}\n};\n\n/** @type {import('vite').UserConfig} */\nconst config = {\n\tplugins: [myPlugin, sveltekit()]\n};\n\nexport default config;\n```\n\nSee [Vite's `configureServer` docs](https://vitejs.dev/guide/api-plugin.html#configureserver).\n\n## Yarn compatibility\n\n**Yarn 2:** PnP is broken with ESM. Use `nodeLinker: 'node-modules'` in `.yarnrc.yml` or switch to npm/pnpm.\n\n**Yarn 3:** ESM support is experimental. Setup:\n\n```sh\nyarn create svelte myapp\ncd myapp\nyarn set version berry\nyarn install\n```\n\nAdd to `.yarnrc.yml`:\n```yaml\nnodeLinker: node-modules\n```\n\n(Avoids build failures with `enableGlobalCache`)",
+		"kit/integrations": "# Integrations\n\n## `vitePreprocess`\n\nEnables Vite-supported CSS flavors: PostCSS, SCSS, Less, Stylus, SugarSS. Included by default in TypeScript projects.\n\n```js\n// svelte.config.js\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n  preprocess: [vitePreprocess()]\n};\n\nexport default config;\n```\n\n**TypeScript notes:**\n- Svelte 4: Requires preprocessor\n- Svelte 5: Native support for type syntax only. For complex TS syntax, use `vitePreprocess({ script: true })`\n\n## Add-ons\n\nRun `npx sv add` to setup integrations:\n- prettier, eslint, vitest, playwright\n- lucia (auth), tailwind, drizzle (DB)\n- paraglide (i18n), mdsvex (markdown), storybook\n\n## Packages\n\nSee [packages page](/packages) or [sveltesociety.dev](https://sveltesociety.dev/) for libraries and resources.\n\n## `svelte-preprocess`\n\nAlternative to `vitePreprocess` with additional features: Pug, Babel, global styles. May be slower and need more config. CoffeeScript not supported.\n\nInstall: `npm i -D svelte-preprocess` + add to `svelte.config.js` + install language library (e.g., `npm i -D sass`)\n\n## Vite Plugins\n\nUse any Vite plugin. See [`vitejs/awesome-vite`](https://github.com/vitejs/awesome-vite?tab=readme-ov-file#plugins).",
+		"kit/debugging": "# Debugging\n\nDebug Svelte/SvelteKit projects using breakpoints in frontend and backend code. Assumes Node.js runtime.\n\n## Visual Studio Code\n\n### Built-in Debug Terminal\n\n1. Open command palette: `CMD/Ctrl` + `Shift` + `P`\n2. Launch \"Debug: JavaScript Debug Terminal\"\n3. Start project: `npm run dev`\n4. Set breakpoints in source files\n5. Trigger breakpoint\n\n### Launch via Debug Pane\n\nCreate `.vscode/launch.json`:\n\n```json\n{\n\t\"version\": \"0.2.0\",\n\t\"configurations\": [\n\t\t{\n\t\t\t\"command\": \"npm run dev\",\n\t\t\t\"name\": \"Run development server\",\n\t\t\t\"request\": \"launch\",\n\t\t\t\"type\": \"node-terminal\"\n\t\t}\n\t]\n}\n\n```\n\nOr auto-generate: Go to \"Run and Debug\" pane → Select \"Node.js...\" → Choose run script → Press `F5`\n\nDocs: <https://code.visualstudio.com/docs/editor/debugging>\n\n## Other Editors\n\n- [WebStorm Svelte: Debug Your Application](https://www.jetbrains.com/help/webstorm/svelte.html#ws_svelte_debug)\n- [Debugging JavaScript Frameworks in Neovim](https://theosteiner.de/debugging-javascript-frameworks-in-neovim)\n\n## Chrome/Edge DevTools\n\n**Note:** Only works with client-side SvelteKit source maps.\n\n1. Start with `--inspect` flag: `NODE_OPTIONS=\"--inspect\" npm run dev`\n2. Open site (typically `localhost:5173`)\n3. Open dev tools → Click \"Open dedicated DevTools for Node.js\" icon (Node.js logo)\n4. Set breakpoints\n\nAlternative: Navigate to `chrome://inspect` (Chrome) or `edge://inspect` (Edge)\n\n## References\n\n- [Debugging Node.js](https://nodejs.org/en/learn/getting-started/debugging)",
+		"kit/migrating-to-sveltekit-2": "# SvelteKit v1 to v2 Migration Guide\n\nUse `npx sv migrate sveltekit-2` to auto-migrate many changes.\n\n## `redirect` and `error` no longer thrown\n\nDon't `throw` these anymore — just call them:\n\n```js\nimport { error } from '@sveltejs/kit'\n\n// Before\nthrow error(500, 'something went wrong');\n// After\nerror(500, 'something went wrong');\n```\n\nInside `try` blocks, use `isHttpError` and `isRedirect` from `@sveltejs/kit` to distinguish them.\n\n## `path` required for cookies\n\nMust specify `path` when setting/deleting cookies. Usually `path: '/'`:\n\n```js\nexport function load({ cookies }) {\n\tcookies.set(name, value, { path: '/' });\n\treturn { response }\n}\n```\n\n## Top-level promises not auto-awaited\n\nPromises in `load` return values are no longer automatically awaited. Use `await` explicitly:\n\n```js\n// Single promise\nexport async function load({ fetch }) {\n\tconst response = await fetch(url).then(r => r.json());\n\treturn { response }\n}\n```\n\n```js\n// Multiple promises - use Promise.all to avoid waterfalls\nexport async function load({ fetch }) {\n\tconst [a, b] = await Promise.all([\n\t  fetch(url1).then(r => r.json()),\n\t  fetch(url2).then(r => r.json()),\n\t]);\n\treturn { a, b };\n}\n```\n\n## `goto()` changes\n\n- No longer accepts external URLs (use `window.location.href = url`)\n- `state` object now sets `$page.state` and must match `App.PageState` interface\n\n## Paths relative by default\n\n[`paths.relative`](configuration#paths) defaults to `true`. All paths (including `%sveltekit.assets%`, `base`, `assets`) are consistently relative or absolute based on this setting.\n\n## Server fetches not trackable\n\n`dangerZone.trackServerFetches` removed due to security concerns.\n\n## `preloadCode` requires `base` prefix\n\nBoth [`preloadCode`]($app-navigation#preloadCode) and [`preloadData`]($app-navigation#preloadData) now require `base` prefix if set. `preloadCode` takes single argument instead of multiple.\n\n## `resolvePath` → `resolveRoute`\n\n```js\n// Before\nimport { resolvePath } from '@sveltejs/kit';\nimport { base } from '$app/paths';\nconst path = base + resolvePath('/blog/[slug]', { slug });\n\n// After\nimport { resolveRoute } from '$app/paths';\nconst path = resolveRoute('/blog/[slug]', { slug });\n```\n\n## Improved error handling\n\n`handleError` hook now receives `status` and `message` properties. Errors from your code have `status: 500` and `message: \"Internal Error\"`.\n\n## Dynamic env vars unavailable during prerendering\n\n`$env/dynamic/public` and `$env/dynamic/private` cannot be read during prerendering — use `$env/static/*` instead. Browser gets fresh values from `/_app/env.js`.\n\n## `use:enhance` callback changes\n\n`form` and `data` removed — use `formElement` and `formData` instead.\n\n## File input forms require `multipart/form-data`\n\nForms with `<input type=\"file\">` must have `enctype=\"multipart/form-data\"` or SvelteKit throws error.\n\n## Stricter `tsconfig.json`\n\nDon't use `paths` or `baseUrl` in `tsconfig.json` — use [`alias` config](configuration#alias) in `svelte.config.js` instead.\n\n## `getRequest` error handling\n\nErrors for oversized `Content-Length` thrown when reading body, not when calling `getRequest`.\n\n## `vitePreprocess` import change\n\nImport from `@sveltejs/vite-plugin-svelte` instead of `@sveltejs/kit/vite`.\n\n## Dependency requirements\n\n- Node `18.13+`\n- `svelte@4+`\n- `vite@5+`\n- `typescript@5+`\n- `@sveltejs/vite-plugin-svelte@3+` (now peer dependency)\n\nGenerated `tsconfig.json` uses `\"moduleResolution\": \"bundler\"` and `verbatimModuleSyntax`.\n\n## SvelteKit 2.12: `$app/stores` deprecated\n\nReplace with `$app/state` (Svelte 5 runes-based). Provides fine-grained reactivity.\n\n```svelte\n<script>\n\t// Before\n\timport { page } from '$app/stores';\n\t// After\n\timport { page } from '$app/state';\n</script>\n\n<!-- Before -->\n{$page.data}\n<!-- After -->\n{page.data}\n```\n\nUse `npx sv migrate app-state` to auto-migrate.",
+		"kit/migrating": "# Migrating from Sapper to SvelteKit\n\n## package.json Changes\n\n### type: \"module\"\nAdd `\"type\": \"module\"` to `package.json`.\n\n### dependencies\nRemove `polka`, `express`, and middleware like `sirv` or `compression`.\n\n### devDependencies\nReplace `sapper` with `@sveltejs/kit` and an [adapter](adapters).\n\n### scripts\n- `sapper build` → `vite build` (with Node adapter)\n- `sapper export` → `vite build` (with static adapter)\n- `sapper dev` → `vite dev`\n- `node __sapper__/build` → `node build`\n\n## Project Files\n\n### Configuration\nReplace `webpack.config.js`/`rollup.config.js` with `svelte.config.js`. Move preprocessor options to `config.preprocess`. Add an [adapter](adapters).\n\nFor non-Vite filetypes, add Vite equivalents to [Vite config](project-structure#Project-files-vite.config.js).\n\n### src/client.js\nNo equivalent. Move custom logic to `+layout.svelte` inside `onMount`.\n\n### src/server.js\nUse [custom server](adapter-node#Custom-server) with `adapter-node`, otherwise no equivalent (serverless environments).\n\n### src/service-worker.js\n`@sapper/service-worker` → [`$service-worker`]($service-worker):\n- `files` unchanged\n- `routes` removed\n- `shell` → `build`\n- `timestamp` → `version`\n\n### src/template.html\nRename to `src/app.html`.\n\nRemove `%sapper.base%`, `%sapper.scripts%`, `%sapper.styles%`.\n- `%sapper.head%` → `%sveltekit.head%`\n- `%sapper.html%` → `%sveltekit.body%`\n- Remove `<div id=\"sapper\">`\n\n### src/node_modules\nUse [`src/lib`]($lib) instead (Vite incompatible).\n\n## Pages and Layouts\n\n### Renamed Files\n| Old | New |\n|-----|-----|\n| routes/about/index.svelte | routes/about/+page.svelte |\n| routes/about.svelte | routes/about/+page.svelte |\n| _error.svelte | +error.svelte |\n| _layout.svelte | +layout.svelte |\n\n### Imports\n- `@sapper/app`: `goto`, `prefetch`, `prefetchRoutes` → [`$app/navigation`]($app-navigation): `goto`, `preloadData`, `preloadCode`\n- `src/node_modules/*` → [`$lib`]($lib)\n\n### Preload\n`preload` → [`load`](load) in `+page.js`/`+layout.js`.\n\n**API changes:**\n- Single `event` argument (not `page` and `session`)\n- No `this` object\n- `this.fetch` → `fetch` from input\n- `this.error`/`this.redirect` → throw [`error`](load#Errors)/[`redirect`](load#Redirects)\n\n### Stores\n```js\n// Old\nimport { stores } from '@sapper/app';\nconst { preloading, page, session } = stores();\n```\n\n**New:** Import directly from [`$app/stores`]($app-stores) (or [`$app/state`]($app-state) for Svelte 5 + SvelteKit 2.12+):\n- `preloading` → `navigating` (with `from`/`to` properties)\n- `page` now has `url` and `params` (no `path` or `query`)\n\n### Routing\nRegex routes removed. Use [advanced route matching](advanced-routing#Matching).\n\n### Segments\n`segment` prop removed. Use `$page.url.pathname` instead.\n\n### URLs\nRelative URLs now resolve against current page, not base URL. Use root-relative URLs (`/...`) for context-independence.\n\n### &lt;a&gt; Attributes\n- `sapper:prefetch` → `data-sveltekit-preload-data`\n- `sapper:noscroll` → `data-sveltekit-noscroll`\n\n## Endpoints\n\nNo direct `req`/`res` access. Update to new signature for platform-agnostic behavior.\n\n`fetch` now globally available (no need for `node-fetch`).\n\n## Integrations\n\n### HTML Minifier\nNot included by default. Add as prod dependency and use via [hook](hooks#Server-hooks-handle):\n\n```js\n// @filename: ambient.d.ts\n/// <reference types=\"@sveltejs/kit\" />\ndeclare module 'html-minifier';\n\n// @filename: index.js\n// ---cut---\nimport { minify } from 'html-minifier';\nimport { building } from '$app/environment';\n\nconst minification_options = {\n\tcollapseBooleanAttributes: true,\n\tcollapseWhitespace: true,\n\tconservativeCollapse: true,\n\tdecodeEntities: true,\n\thtml5: true,\n\tignoreCustomComments: [/^#/],\n\tminifyCSS: true,\n\tminifyJS: false,\n\tremoveAttributeQuotes: true,\n\tremoveComments: false, // some hydration code needs comments, so leave them in\n\tremoveOptionalTags: true,\n\tremoveRedundantAttributes: true,\n\tremoveScriptTypeAttributes: true,\n\tremoveStyleLinkTypeAttributes: true,\n\tsortAttributes: true,\n\tsortClassName: true\n};\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tlet page = '';\n\n\treturn resolve(event, {\n\t\ttransformPageChunk: ({ html, done }) => {\n\t\t\tpage += html;\n\t\t\tif (done) {\n\t\t\t\treturn building ? minify(page, minification_options) : page;\n\t\t\t}\n\t\t}\n\t});\n}\n```\n\n**Note:** `prerendering` is `false` with `vite preview`, so inspect built HTML files directly to verify minification.",
+		"kit/additional-resources": "# Resources\n\n## FAQs\n- [SvelteKit FAQ](faq)\n- [Svelte FAQ](../svelte/faq)\n- [`vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md)\n\n## Examples\nOfficial:\n- [`sveltejs/realworld`](https://github.com/sveltejs/realworld) - blog site\n- [HackerNews clone](https://github.com/sveltejs/sites/tree/master/sites/hn.svelte.dev)\n- [`svelte.dev`](https://github.com/sveltejs/svelte.dev)\n\nCommunity: [#sveltekit](https://github.com/topics/sveltekit), [#sveltekit-template](https://github.com/topics/sveltekit-template), [Svelte Society](https://sveltesociety.dev/templates?category=sveltekit)\n\n## Support\n[Discord](/chat) | [StackOverflow](https://stackoverflow.com/questions/tagged/sveltekit)\n\nSearch FAQ/docs/issues first before asking.",
+		"kit/glossary": "# SvelteKit Rendering\n\n## Key Terms\n\n### CSR (Client-Side Rendering)\nPage generation in the browser using JavaScript. Enabled by default.\n- Disable with `csr = false` page option\n\n### SSR (Server-Side Rendering)\nPage generation on the server. Enabled by default. Improves performance and SEO.\n- Disable with `ssr = false` page option\n\n### Hybrid App (Default)\nSvelteKit's default mode: initial HTML from server (SSR), then subsequent navigations via CSR.\n\n### Hydration\nProcess where client-side components initialize with server-sent data, attach event listeners, and become interactive. Data fetched during SSR is transmitted to client to avoid duplicate API calls.\n- Disabled when `csr = false`\n\n### Prerendering\nComputing page contents at build time, saving HTML. Same content served to all users.\n- **Rule**: Any two users must get identical content; page cannot contain actions\n- Can include personalized content if fetched client-side\n- Control with `prerender` page option or config in `svelte.config.js`\n\n### SSG (Static Site Generation)\nEvery page is prerendered. No SSR servers needed, served from CDNs.\n- Use `adapter-static` or set all pages to prerender\n\n### ISR (Incremental Static Regeneration)\nGenerate static pages on-demand as visitors request them. Reduces build times vs full SSG.\n- Available with `adapter-vercel`\n\n### Routing (Client-Side)\nSvelteKit intercepts navigation and updates page on client instead of server requests. Enabled by default.\n- Skip with `data-sveltekit-reload` attribute\n\n### SPA (Single-Page App)\nEmpty HTML shell on initial request, all rendering client-side. **Not recommended** due to performance/SEO impacts.\n- Build with `adapter-static`\n\n### Edge\nRendering in CDN near user for lower latency.\n\n### MPA (Multi-Page App)\nTraditional server-rendered apps (non-JavaScript).\n\n### PWA (Progressive Web App)\nWeb app functioning like native app. Can be installed, use service workers for offline capability.",
+		"kit/@sveltejs-kit": "# @sveltejs/kit Server APIs\n\n## Core Functions\n\n### error\nThrows HTTP error with status code and optional message. Stops request handling and returns error response.\n\n```ts\nfunction error(status: number, body: App.Error): never;\nfunction error(status: number, body?: { message: string }): never;\n```\n\n**Important**: Don't catch the thrown error - it prevents SvelteKit from handling it.\n\n### redirect\nRedirects a request. Common status codes:\n- `303`: GET redirect (often after form POST)\n- `307`: Temporary redirect (keeps method)\n- `308`: Permanent redirect (keeps method, SEO transfer)\n\n```ts\nfunction redirect(\n  status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308,\n  location: string | URL\n): never;\n```\n\n**Important**: Don't catch the thrown redirect.\n\n### fail\nCreates `ActionFailure` for failed form submissions.\n\n```ts\nfunction fail(status: number): ActionFailure<undefined>;\nfunction fail<T>(status: number, data: T): ActionFailure<T>;\n```\n\n### json / text\nCreate Response objects:\n\n```ts\nfunction json(data: any, init?: ResponseInit): Response;\nfunction text(body: string, init?: ResponseInit): Response;\n```\n\n### normalizeUrl\nStrips SvelteKit-internal suffixes and trailing slashes. Available since 2.18.0.\n\n```ts\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json\n```\n\n## Type Checkers\n\n```ts\nfunction isActionFailure(e: unknown): e is ActionFailure;\nfunction isHttpError(e: unknown, status?: number): e is HttpError;\nfunction isRedirect(e: unknown): e is Redirect;\n```\n\n## Server Class\n\n```ts\nclass Server {\n  constructor(manifest: SSRManifest);\n  init(options: ServerInitOptions): Promise<void>;\n  respond(request: Request, options: RequestOptions): Promise<Response>;\n}\n```\n\n## Hooks\n\n### Handle\nRuns on every request. Receives `event` and `resolve` function.\n\n```ts\ntype Handle = (input: {\n  event: RequestEvent;\n  resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;\n}) => MaybePromise<Response>;\n```\n\n### HandleFetch\nModifies `event.fetch()` calls on server/during prerendering.\n\n```ts\ntype HandleFetch = (input: {\n  event: RequestEvent;\n  request: Request;\n  fetch: typeof fetch;\n}) => MaybePromise<Response>;\n```\n\n### HandleError\n\n**Client-side**: Runs on unexpected navigation errors. Must never throw.\n\n```ts\ntype HandleClientError = (input: {\n  error: unknown;\n  event: NavigationEvent;\n  status: number;\n  message: string;\n}) => MaybePromise<void | App.Error>;\n```\n\n**Server-side**: Runs on unexpected request errors. Must never throw.\n\n```ts\ntype HandleServerError = (input: {\n  error: unknown;\n  event: RequestEvent;\n  status: number;\n  message: string;\n}) => MaybePromise<void | App.Error>;\n```\n\n### HandleValidationError\nRuns when remote function argument validation fails.\n\n```ts\ntype HandleValidationError = (input: {\n  issues: StandardSchemaV1.Issue[];\n  event: RequestEvent;\n}) => MaybePromise<App.Error>;\n```\n\n### Reroute\nModifies URL before route determination. Available since 2.3.0.\n\n```ts\ntype Reroute = (event: {\n  url: URL;\n  fetch: typeof fetch;\n}) => MaybePromise<void | string>;\n```\n\n### Init Hooks\nAvailable since 2.10.0.\n\n```ts\ntype ClientInit = () => MaybePromise<void>; // Runs when app starts in browser\ntype ServerInit = () => MaybePromise<void>; // Runs before first request\n```\n\n### Transport\nCustom type serialization across server/client. Available since 2.11.0.\n\n```ts\ntype Transport = Record<string, Transporter>;\n\ninterface Transporter<T, U> {\n  encode: (value: T) => false | U;\n  decode: (data: U) => T;\n}\n```\n\n## RequestEvent\n\nCore event object for server-side code:\n\n```ts\ninterface RequestEvent<Params, RouteId> {\n  cookies: Cookies;\n  fetch: typeof fetch; // Enhanced with cookie/auth inheritance, relative URLs, direct internal calls\n  getClientAddress: () => string;\n  locals: App.Locals;\n  params: Params;\n  platform: App.Platform | undefined;\n  request: Request;\n  route: { id: RouteId };\n  setHeaders: (headers: Record<string, string>) => void;\n  url: URL;\n  isDataRequest: boolean; // True for +page/layout.server.js data requests\n  isSubRequest: boolean; // True for same-origin fetch without HTTP overhead\n  isRemoteRequest: boolean; // True for remote function calls\n  tracing: { enabled: boolean; root: Span; current: Span }; // Since 2.31.0\n}\n```\n\n## Cookies\n\n```ts\ninterface Cookies {\n  get(name: string, opts?: CookieParseOptions): string | undefined;\n  getAll(opts?: CookieParseOptions): Array<{ name: string; value: string }>;\n  set(name: string, value: string, opts: CookieSerializeOptions & { path: string }): void;\n  delete(name: string, opts: CookieSerializeOptions & { path: string }): void;\n  serialize(name: string, value: string, opts: CookieSerializeOptions & { path: string }): string;\n}\n```\n\n**Defaults**: `httpOnly` and `secure` are `true` (except on http://localhost). `sameSite` defaults to `lax`.\n\n**Important**: Must specify `path` (usually `path: '/'`). Can't set `set-cookie` via `setHeaders` - use `cookies` API in server-only `load`.\n\n## Load Functions\n\n### LoadEvent (Client/Universal)\n\n```ts\ninterface LoadEvent<Params, Data, ParentData, RouteId> {\n  fetch: typeof fetch; // Enhanced with cookie inheritance, relative URLs, inlining\n  data: Data; // From server load\n  params: Params;\n  route: { id: RouteId };\n  url: URL;\n  setHeaders: (headers: Record<string, string>) => void; // No effect in browser\n  parent: () => Promise<ParentData>;\n  depends: (...deps: Array<`${string}:${string}`>) => void;\n  untrack: <T>(fn: () => T) => T;\n  tracing: { enabled: boolean; root: Span; current: Span }; // Since 2.31.0\n}\n```\n\n### ServerLoadEvent\n\nExtends `RequestEvent` with:\n\n```ts\ninterface ServerLoadEvent<Params, ParentData, RouteId> extends RequestEvent<Params, RouteId> {\n  parent: () => Promise<ParentData>;\n  depends: (...deps: string[]) => void;\n  untrack: <T>(fn: () => T) => T;\n  tracing: { enabled: boolean; root: Span; current: Span }; // Since 2.31.0\n}\n```\n\n**Gotcha**: Call `parent()` after fetching other data to avoid waterfalls.\n\n## Actions\n\n### Action Type\n\n```ts\ntype Action<Params, OutputData, RouteId> = (\n  event: RequestEvent<Params, RouteId>\n) => MaybePromise<OutputData>;\n\ntype Actions<Params, OutputData, RouteId> = Record<string, Action<Params, OutputData, RouteId>>;\n```\n\n### ActionResult\n\n```ts\ntype ActionResult<Success, Failure> =\n  | { type: 'success'; status: number; data?: Success }\n  | { type: 'failure'; status: number; data?: Failure }\n  | { type: 'redirect'; status: number; location: string }\n  | { type: 'error'; status?: number; error: any };\n```\n\n### SubmitFunction\n\n```ts\ntype SubmitFunction<Success, Failure> = (input: {\n  action: URL;\n  formData: FormData;\n  formElement: HTMLFormElement;\n  controller: AbortController;\n  submitter: HTMLElement | null;\n  cancel: () => void;\n}) => MaybePromise<void | ((opts: {\n  formData: FormData;\n  formElement: HTMLFormElement;\n  action: URL;\n  result: ActionResult<Success, Failure>;\n  update: (options?: { reset?: boolean; invalidateAll?: boolean }) => Promise<void>;\n}) => MaybePromise<void>)>;\n```\n\n## Remote Functions\n\n### RemoteQuery\n\n```ts\ntype RemoteQuery<T> = RemoteResource<T> & {\n  set(value: T): void;\n  refresh(): Promise<void>;\n  withOverride(update: (current: Awaited<T>) => Awaited<T>): RemoteQueryOverride;\n};\n\ntype RemoteQueryFunction<Input, Output> = (arg: Input) => RemoteQuery<Output>;\n```\n\n### RemoteCommand\n\n```ts\ntype RemoteCommand<Input, Output> = {\n  (arg: Input): Promise<Awaited<Output>> & {\n    updates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<Awaited<Output>>;\n  };\n  get pending(): number;\n};\n```\n\n### RemoteForm\n\n```ts\ntype RemoteForm<Input, Output> = {\n  [attachment: symbol]: (node: HTMLFormElement) => void;\n  method: 'POST';\n  action: string;\n  enhance(callback: (opts: { form: HTMLFormElement; data: Input; submit: () => Promise<void> }) => void): { ... };\n  for(id: ExtractId<Input>): Omit<RemoteForm<Input, Output>, 'for'>;\n  preflight(schema: StandardSchemaV1<Input, any>): RemoteForm<Input, Output>;\n  validate(options?: { includeUntouched?: boolean; submitter?: HTMLButtonElement }): Promise<void>;\n  get result(): Output | undefined;\n  get pending(): number;\n  fields: RemoteFormFields<Input>;\n  buttonProps: { ... };\n};\n```\n\n### RemotePrerenderFunction\n\n```ts\ntype RemotePrerenderFunction<Input, Output> = (arg: Input) => RemoteResource<Output>;\n```\n\n### RemoteResource\n\n```ts\ntype RemoteResource<T> = Promise<Awaited<T>> & {\n  get error(): any;\n  get loading(): boolean;\n} & ({ get current(): undefined; ready: false } | { get current(): Awaited<T>; ready: true });\n```\n\n## Navigation Types\n\n### NavigationType\n\n```ts\ntype NavigationType = 'enter' | 'form' | 'leave' | 'link' | 'goto' | 'popstate';\n```\n\n### AfterNavigate\n\n```ts\ntype AfterNavigate = (Navigation | NavigationEnter) & {\n  type: Exclude<NavigationType, 'leave'>;\n  willUnload: false;\n};\n```\n\n### BeforeNavigate\n\n```ts\ntype BeforeNavigate = Navigation & {\n  cancel: () => void;\n};\n```\n\n### OnNavigate\n\n```ts\ntype OnNavigate = Navigation & {\n  type: Exclude<NavigationType, 'enter' | 'leave'>;\n  willUnload: false;\n};\n```\n\n## Page\n\n```ts\ninterface Page<Params, RouteId> {\n  url: URL & { pathname: ResolvedPathname };\n  params: Params;\n  route: { id: RouteId };\n  status: number;\n  error: App.Error | null;\n  data: App.PageData & Record<string, any>;\n  state: App.PageState;\n  form: any; // Filled after form submission\n}\n```\n\n## Adapter\n\n```ts\ninterface Adapter {\n  name: string;\n  adapt: (builder: Builder) => MaybePromise<void>;\n  supports?: {\n    read?: (details: { config: any; route: { id: string } }) => boolean;\n    instrumentation?: () => boolean; // Since 2.31.0\n  };\n  emulate?: () => MaybePromise<Emulator>;\n}\n```\n\n### Builder\n\nKey methods:\n- `writeClient(dest: string): string[]`\n- `writeServer(dest: string): string[]`\n- `writePrerendered(dest: string): string[]`\n- `generateManifest(opts: { relativePath: string; routes?: RouteDefinition[] }): string`\n- `compress(directory: string): Promise<void>`\n- `instrument(args: { entrypoint: string; instrumentation: string; ... }): void` (Since 2.31.0)\n\n## Snapshot\n\n```ts\ninterface Snapshot<T> {\n  capture: () => T;\n  restore: (snapshot: T) => void;\n}\n```\n\n## Constants\n\n```ts\nconst VERSION: string; // SvelteKit version\n```",
+		"kit/@sveltejs-kit-hooks": "# sequence\n\nHelper for chaining multiple `handle` functions in middleware-like manner.\n\n```js\nimport { sequence } from '@sveltejs/kit/hooks';\n```\n\n## Behavior\n\n- `transformPageChunk`: applied in **reverse order**, merged\n- `preload`: applied in **forward order**, first wins (subsequent calls skipped)\n- `filterSerializedResponseHeaders`: same as `preload` (first wins)\n\n## Example\n\n```js\n/// file: src/hooks.server.js\nimport { sequence } from '@sveltejs/kit/hooks';\n\n/** @type {import('@sveltejs/kit').Handle} */\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/** @type {import('@sveltejs/kit').Handle} */\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);\n```\n\n**Output:**\n```\nfirst pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processing\n```\n\n## Type\n\n```dts\nfunction sequence(...handlers: Handle[]): Handle;\n```",
+		"kit/@sveltejs-kit-node-polyfills": "# installPolyfills\n\nMakes web APIs available as globals: `crypto`, `File`\n\n```js\nimport { installPolyfills } from '@sveltejs/kit/node/polyfills';\n```\n\n```dts\nfunction installPolyfills(): void;\n```",
+		"kit/@sveltejs-kit-node": "# @sveltejs/kit/node\n\nNode.js adapter utilities for converting between Node.js and Web APIs.\n\n## createReadableStream\n\nConverts a file on disk to a readable stream.\n\n```ts\nfunction createReadableStream(file: string): ReadableStream;\n```\n\n*Available since 2.4.0*\n\n## getRequest\n\nConverts Node.js `IncomingMessage` to Web `Request`.\n\n```ts\nfunction getRequest({\n\trequest,\n\tbase,\n\tbodySizeLimit\n}: {\n\trequest: import('http').IncomingMessage;\n\tbase: string;\n\tbodySizeLimit?: number;\n}): Promise<Request>;\n```\n\n## setResponse\n\nConverts Web `Response` to Node.js `ServerResponse`.\n\n```ts\nfunction setResponse(\n\tres: import('http').ServerResponse,\n\tresponse: Response\n): Promise<void>;\n```",
+		"kit/@sveltejs-kit-vite": "# sveltekit\n\nReturns the SvelteKit Vite plugins.\n\n```js\nimport { sveltekit } from '@sveltejs/kit/vite';\n```\n\n```ts\nfunction sveltekit(): Promise<import('vite').Plugin[]>;\n```",
+		"kit/$app-environment": "# $app/environment\n\n```js\nimport { browser, building, dev, version } from '$app/environment';\n```\n\n## browser\n`true` if app is running in the browser.\n\n```dts\nconst browser: boolean;\n```\n\n## building\n`true` during the build step and prerendering.\n\n```dts\nconst building: boolean;\n```\n\n## dev\nWhether dev server is running. Not guaranteed to match `NODE_ENV` or `MODE`.\n\n```dts\nconst dev: boolean;\n```\n\n## version\nThe value of `config.kit.version.name`.\n\n```dts\nconst version: string;\n```",
+		"kit/$app-forms": "# $app/forms\n\n```js\nimport { applyAction, deserialize, enhance } from '$app/forms';\n```\n\n## applyAction\n\nUpdates `form` property and `page.status` of current page with given data. Redirects to nearest error page on error.\n\n```dts\nfunction applyAction<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tresult: import('@sveltejs/kit').ActionResult<Success, Failure>\n): Promise<void>;\n```\n\n## deserialize\n\nDeserializes form submission response.\n\n```js\n// @errors: 7031\nimport { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n\tconst response = await fetch('/form?/action', {\n\t\tmethod: 'POST',\n\t\tbody: new FormData(event.target)\n\t});\n\n\tconst result = deserialize(await response.text());\n\t// ...\n}\n```\n\n```dts\nfunction deserialize<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tresult: string\n): import('@sveltejs/kit').ActionResult<Success, Failure>;\n```\n\n## enhance\n\nProgressive enhancement for `<form>` elements.\n\n**`submit` function**: Called on submission with FormData and `action`. Call `cancel` to prevent submission. Use abort `controller` to cancel if another submission starts. Return a function to handle server response, or return nothing for default behavior.\n\n**Default behavior**:\n- Updates `form` prop if action is on same page\n- Updates `page.status`\n- Resets form and invalidates all data on successful submission (no redirect)\n- Redirects on redirect response\n- Redirects to error page on unexpected error\n\n**Custom callback**: Call `update` for default behavior with options:\n- `reset: false` - don't reset form values after success\n- `invalidateAll: false` - don't call `invalidateAll` after submission\n\n```dts\nfunction enhance<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tform_element: HTMLFormElement,\n\tsubmit?: import('@sveltejs/kit').SubmitFunction<Success, Failure>\n): {\n\tdestroy(): void;\n};\n```",
+		"kit/$app-navigation": "# $app/navigation\n\n```js\nimport {\n\tafterNavigate,\n\tbeforeNavigate,\n\tdisableScrollHandling,\n\tgoto,\n\tinvalidate,\n\tinvalidateAll,\n\tonNavigate,\n\tpreloadCode,\n\tpreloadData,\n\tpushState,\n\trefreshAll,\n\treplaceState\n} from '$app/navigation';\n```\n\n## afterNavigate\n\nRuns callback when component mounts and on every navigation. Must be called during component initialization. Active while component is mounted.\n\n```dts\nfunction afterNavigate(\n\tcallback: (navigation: import('@sveltejs/kit').AfterNavigate) => void\n): void;\n```\n\n## beforeNavigate\n\nIntercepts navigation before it happens (links, `goto()`, browser back/forward). Call `cancel()` to prevent navigation. For `'leave'` navigations (closing tab/navigating away), `cancel()` triggers native browser confirmation dialog.\n\n- `navigation.to.route.id` is `null` for non-SvelteKit routes\n- `navigation.willUnload` is `true` for `'leave'` navigations and `'link'` navigations where `navigation.to.route === null`\n\nMust be called during component initialization. Active while component is mounted.\n\n```dts\nfunction beforeNavigate(\n\tcallback: (navigation: import('@sveltejs/kit').BeforeNavigate) => void\n): void;\n```\n\n## disableScrollHandling\n\nDisables SvelteKit's built-in scroll handling when called during page update (in `onMount`, `afterNavigate`, or actions). Discouraged as it breaks user expectations.\n\n```dts\nfunction disableScrollHandling(): void;\n```\n\n## goto\n\nNavigate programmatically. Returns Promise that resolves on navigation completion. For external URLs, use `window.location = url` instead.\n\n```dts\nfunction goto(\n\turl: string | URL,\n\topts?: {\n\t\treplaceState?: boolean | undefined;\n\t\tnoScroll?: boolean | undefined;\n\t\tkeepFocus?: boolean | undefined;\n\t\tinvalidateAll?: boolean | undefined;\n\t\tinvalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;\n\t\tstate?: App.PageState | undefined;\n\t}\n): Promise<void>;\n```\n\n## invalidate\n\nRe-runs `load` functions that depend on the URL (via `fetch` or `depends`). Returns Promise that resolves when page updates.\n\n- String/URL must match exactly what was passed to `fetch`/`depends` (including query params)\n- Custom identifiers: use format `[a-z]+:` (e.g. `custom:state`)\n- Function predicate receives full URL, re-runs if returns `true`\n\n```ts\n// Match '/path' regardless of query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');\n```\n\n```dts\nfunction invalidate(\n\tresource: string | URL | ((url: URL) => boolean)\n): Promise<void>;\n```\n\n## invalidateAll\n\nRe-runs all `load` functions for current page. Returns Promise that resolves when page updates.\n\n```dts\nfunction invalidateAll(): Promise<void>;\n```\n\n## onNavigate\n\nRuns callback immediately before navigation (except full-page navigations). Return Promise to delay navigation completion (useful for `document.startViewTransition`). Avoid slow promises as navigation appears stalled.\n\nReturning a function (or Promise resolving to function) calls it after DOM updates.\n\nMust be called during component initialization. Active while component is mounted.\n\n```dts\nfunction onNavigate(\n\tcallback: (navigation: import('@sveltejs/kit').OnNavigate) => \n\t\tMaybePromise<(() => void) | void>\n): void;\n```\n\n## preloadCode\n\nImports code for routes not yet fetched. Specify routes by pathname: `/about` or `/blog/*`. Doesn't call `load` functions. Returns Promise resolving when modules imported.\n\n```dts\nfunction preloadCode(pathname: string): Promise<void>;\n```\n\n## preloadData\n\nPreloads page: imports code and calls `load` functions. Same as hovering/tapping `<a>` with `data-sveltekit-preload-data`. Makes navigation instantaneous if next navigation is to `href`. Returns Promise with `load` results.\n\n```dts\nfunction preloadData(href: string): Promise<\n\t| { type: 'loaded'; status: number; data: Record<string, any>; }\n\t| { type: 'redirect'; location: string; }\n>;\n```\n\n## pushState\n\nCreates new history entry with given `page.state`. Pass `''` for current URL. Used for shallow routing.\n\n```dts\nfunction pushState(url: string | URL, state: App.PageState): void;\n```\n\n## refreshAll\n\nRefreshes all active remote functions and re-runs `load` functions (unless disabled). Returns Promise resolving when page updates.\n\n```dts\nfunction refreshAll({\n\tincludeLoadFunctions\n}?: {\n\tincludeLoadFunctions?: boolean;\n}): Promise<void>;\n```\n\n## replaceState\n\nReplaces current history entry with given `page.state`. Pass `''` for current URL. Used for shallow routing.\n\n```dts\nfunction replaceState(url: string | URL, state: App.PageState): void;\n```",
+		"kit/$app-paths": "# $app/paths\n\n```js\nimport { asset, assets, base, resolve, resolveRoute } from '$app/paths';\n```\n\n## asset\n\nResolve URL of an asset in `static` directory by prefixing with `config.kit.paths.assets` or base path.\n\nDuring SSR, base path is relative and depends on current page.\n\n```svelte\n<script>\n\timport { asset } from '$app/paths';\n</script>\n\n<img alt=\"a potato\" src={asset('/potato.jpg')} />\n```\n\n```dts\nfunction asset(file: Asset): string;\n```\n\n## resolve\n\nResolve pathname by prefixing with base path, or resolve route ID by populating dynamic segments with parameters.\n\nDuring SSR, base path is relative and depends on current page.\n\n```js\n// @errors: 7031\nimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});\n```\n\n```dts\nfunction resolve<T extends RouteId | Pathname>(\n\t...args: ResolveArgs<T>\n): ResolvedPathname;\n```\n\n## Deprecated\n\n- **assets**: Use `asset(...)` instead. Absolute path matching `config.kit.paths.assets`.\n- **base**: Use `resolve(...)` instead. String matching `config.kit.paths.base`.\n- **resolveRoute**: Use `resolve(...)` instead.",
+		"kit/$app-server": "# $app/server\n\n```js\nimport {\n\tcommand,\n\tform,\n\tgetRequestEvent,\n\tprerender,\n\tquery,\n\tread\n} from '$app/server';\n```\n\n## command\n*Available since 2.27*\n\nCreates a remote command. When called from browser, invokes function on server via `fetch`.\n\n```dts\nfunction command<Output>(fn: () => Output): RemoteCommand<void, Output>;\n\nfunction command<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => Output\n): RemoteCommand<Input, Output>;\n\nfunction command<Schema extends StandardSchemaV1, Output>(\n\tvalidate: Schema,\n\tfn: (arg: StandardSchemaV1.InferOutput<Schema>) => Output\n): RemoteCommand<StandardSchemaV1.InferInput<Schema>, Output>;\n```\n\nSee [Remote functions](/docs/kit/remote-functions#command).\n\n## form\n*Available since 2.27*\n\nCreates a form object that can be spread onto a `<form>` element.\n\n```dts\nfunction form<Output>(\n\tfn: (invalid: Invalid<void>) => MaybePromise<Output>\n): RemoteForm<void, Output>;\n\nfunction form<Input extends RemoteFormInput, Output>(\n\tvalidate: 'unchecked',\n\tfn: (data: Input, invalid: Invalid<Input>) => MaybePromise<Output>\n): RemoteForm<Input, Output>;\n\nfunction form<Schema extends StandardSchemaV1<RemoteFormInput, Record<string, any>>, Output>(\n\tvalidate: Schema,\n\tfn: (data: StandardSchemaV1.InferOutput<Schema>, invalid: Invalid<StandardSchemaV1.InferOutput<Schema>>) => MaybePromise<Output>\n): RemoteForm<StandardSchemaV1.InferInput<Schema>, Output>;\n```\n\nSee [Remote functions](/docs/kit/remote-functions#form).\n\n## getRequestEvent\n*Available since 2.20.0*\n\nReturns current `RequestEvent`. Use in server hooks, server `load` functions, actions, and endpoints.\n\n**Important:** In environments without `AsyncLocalStorage`, must be called synchronously (not after `await`).\n\n```dts\nfunction getRequestEvent(): RequestEvent;\n```\n\n## prerender\n*Available since 2.27*\n\nCreates a remote prerender function. When called from browser, invokes function on server via `fetch`.\n\n```dts\nfunction prerender<Output>(\n\tfn: () => MaybePromise<Output>,\n\toptions?: { inputs?: RemotePrerenderInputsGenerator<void>; dynamic?: boolean; }\n): RemotePrerenderFunction<void, Output>;\n\nfunction prerender<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => MaybePromise<Output>,\n\toptions?: { inputs?: RemotePrerenderInputsGenerator<Input>; dynamic?: boolean; }\n): RemotePrerenderFunction<Input, Output>;\n\nfunction prerender<Schema extends StandardSchemaV1, Output>(\n\tschema: Schema,\n\tfn: (arg: StandardSchemaV1.InferOutput<Schema>) => MaybePromise<Output>,\n\toptions?: { inputs?: RemotePrerenderInputsGenerator<StandardSchemaV1.InferInput<Schema>>; dynamic?: boolean; }\n): RemotePrerenderFunction<StandardSchemaV1.InferInput<Schema>, Output>;\n```\n\nSee [Remote functions](/docs/kit/remote-functions#prerender).\n\n## query\n*Available since 2.27*\n\nCreates a remote query. When called from browser, invokes function on server via `fetch`.\n\n```dts\nfunction query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output>;\n\nfunction query<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => MaybePromise<Output>\n): RemoteQueryFunction<Input, Output>;\n\nfunction query<Schema extends StandardSchemaV1, Output>(\n\tschema: Schema,\n\tfn: (arg: StandardSchemaV1.InferOutput<Schema>) => MaybePromise<Output>\n): RemoteQueryFunction<StandardSchemaV1.InferInput<Schema>, Output>;\n```\n\n### query.batch\n*Available since 2.35*\n\nCollects multiple calls and executes them in a single request.\n\n```dts\nfunction batch<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (args: Input[]) => MaybePromise<(arg: Input, idx: number) => Output>\n): RemoteQueryFunction<Input, Output>;\n\nfunction batch<Schema extends StandardSchemaV1, Output>(\n\tschema: Schema,\n\tfn: (args: StandardSchemaV1.InferOutput<Schema>[]) => MaybePromise<(arg: StandardSchemaV1.InferOutput<Schema>, idx: number) => Output>\n): RemoteQueryFunction<StandardSchemaV1.InferInput<Schema>, Output>;\n```\n\nSee [Remote functions](/docs/kit/remote-functions#query) and [query.batch](/docs/kit/remote-functions#query.batch).\n\n## read\n*Available since 2.4.0*\n\nReads contents of an imported asset from filesystem.\n\n```js\nimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();\n```\n\n```dts\nfunction read(asset: string): Response;\n```",
+		"kit/$app-state": "# $app/state\n\nThree read-only state objects for SvelteKit apps. Added in 2.12 (use `$app/stores` for earlier versions).\n\n```js\nimport { navigating, page, updated } from '$app/state';\n```\n\n## navigating\n\nRead-only object representing in-progress navigation. `null` when no navigation occurring or during SSR.\n\n```dts\nconst navigating:\n\t| import('@sveltejs/kit').Navigation\n\t| {\n\t\t\tfrom: null;\n\t\t\tto: null;\n\t\t\ttype: null;\n\t\t\twillUnload: null;\n\t\t\tdelta: null;\n\t\t\tcomplete: null;\n\t  };\n```\n\nProperties: `from`, `to`, `type`, and `delta` (if `type === 'popstate'`).\n\n## page\n\nRead-only reactive object with current page info:\n- Combined `data` from all pages/layouts\n- Current `form` prop value\n- Page state from `goto`, `pushState`, `replaceState`\n- Metadata: URL, route, params, error status\n\n```svelte\n<!--- file: +layout.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<p>Currently at {page.url.pathname}</p>\n\n{#if page.error}\n\t<span class=\"red\">Problem detected</span>\n{:else}\n\t<span class=\"small\">All systems operational</span>\n{/if}\n```\n\n**Important:** Changes only work with runes, not legacy reactivity:\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\timport { page } from '$app/state';\n\tconst id = $derived(page.params.id); // ✓ Updates correctly\n\t$: badId = page.params.id; // ✗ Never updates after initial load\n</script>\n```\n\nServer: read only during rendering (not in `load` functions).  \nBrowser: read anytime.\n\n```dts\nconst page: import('@sveltejs/kit').Page;\n```\n\n## updated\n\nRead-only reactive value, initially `false`. Becomes `true` when new app version detected (if `version.pollInterval` configured). `updated.check()` forces immediate check.\n\n```dts\nconst updated: {\n\tget current(): boolean;\n\tcheck(): Promise<boolean>;\n};\n```",
+		"kit/$app-stores": "# $app/stores\n\n**DEPRECATED**: Use `$app/state` instead (SvelteKit 2.12+). Store-based equivalents for legacy support.\n\n```js\nimport { getStores, navigating, page, updated } from '$app/stores';\n```\n\n## getStores\n\n```dts\nfunction getStores(): {\n\tpage: typeof page;\n\tnavigating: typeof navigating;\n\tupdated: typeof updated;\n};\n```\n\n## navigating\n\n**Readable store** for navigation state.\n\n- **During navigation**: `Navigation` object with `from`, `to`, `type`, and `delta` (if `type === 'popstate'`)\n- **When idle**: `null`\n\n**Server**: Subscribe only during component initialization  \n**Browser**: Subscribe anytime\n\n```dts\nconst navigating: import('svelte/store').Readable<\n\timport('@sveltejs/kit').Navigation | null\n>;\n```\n\n## page\n\n**Readable store** containing page data.\n\n**Server**: Subscribe only during component initialization  \n**Browser**: Subscribe anytime\n\n```dts\nconst page: import('svelte/store').Readable<\n\timport('@sveltejs/kit').Page\n>;\n```\n\n## updated\n\n**Readable store** for app version updates.\n\n- Initial value: `false`\n- Becomes `true` when new version detected (if `version.pollInterval` configured)\n- `updated.check()`: Force immediate version check\n\n**Server**: Subscribe only during component initialization  \n**Browser**: Subscribe anytime\n\n```dts\nconst updated: import('svelte/store').Readable<boolean> & {\n\tcheck(): Promise<boolean>;\n};\n```",
+		"kit/$app-types": "# $app/types\n\nGenerated types for routes in your app (available since SvelteKit 2.26).\n\n```js\nimport type { RouteId, RouteParams, LayoutParams } from '$app/types';\n```\n\n## Asset\n\nUnion of all filenames in `static` directory + wildcard for imported asset paths.\n\n```dts\ntype Asset = '/favicon.png' | '/robots.txt' | (string & {});\n```\n\n## RouteId\n\nUnion of all route IDs. Used for `page.route.id` and `event.route.id`.\n\n```dts\ntype RouteId = '/' | '/my-route' | '/my-other-route/[param]';\n```\n\n## Pathname\n\nUnion of all valid pathnames.\n\n```dts\ntype Pathname = '/' | '/my-route' | `/my-other-route/${string}` & {};\n```\n\n## ResolvedPathname\n\nLike `Pathname` but possibly prefixed with base path. Used for `page.url.pathname`.\n\n```dts\ntype ResolvedPathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {};\n```\n\n## RouteParams\n\nGet parameters for a route.\n\n```ts\ntype BlogParams = RouteParams<'/blog/[slug]'>; // { slug: string }\n```\n\n```dts\ntype RouteParams<T extends RouteId> = { /* generated */ } | Record<string, never>;\n```\n\n## LayoutParams\n\nGet parameters for a layout, including optional parameters from child routes.\n\n```dts\ntype RouteParams<T extends RouteId> = { /* generated */ } | Record<string, never>;\n```",
+		"kit/$env-dynamic-private": "# $env/dynamic/private\n\nAccess to runtime environment variables from the platform (e.g., `process.env` in adapter-node).\n\n**Rules:**\n- Only includes variables that do NOT start with `config.kit.env.publicPrefix`\n- Only includes variables that DO start with `config.kit.env.privatePrefix` (if configured)\n- **Cannot be imported in client-side code**\n\n```ts\nimport { env } from '$env/dynamic/private';\nconsole.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);\n```\n\n**Note:** In dev, always includes `.env` variables. In prod, depends on adapter.",
+		"kit/$env-dynamic-public": "# $env/dynamic/public\n\nRuntime access to public environment variables (prefixed with `PUBLIC_` by default via `config.kit.env.publicPrefix`).\n\n**Key differences:**\n- Only includes variables with public prefix (safe for client-side)\n- All public dynamic env vars sent server→client (increases network payload)\n- **Prefer `$env/static/public`** when possible to avoid larger requests\n\n```ts\nimport { env } from '$env/dynamic/public';\nconsole.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);\n```",
+		"kit/$env-static-private": "# $env/static/private\n\nServer-only module for private environment variables loaded from `.env` files and `process.env`.\n\n**Key characteristics:**\n- Cannot be imported in client-side code\n- Includes variables that do NOT begin with `config.kit.env.publicPrefix`\n- Optionally filtered by `config.kit.env.privatePrefix`\n- Values are **statically injected at build time** (enables dead code elimination)\n\n## Usage\n\n```ts\nimport { API_KEY } from '$env/static/private';\n```\n\n## Best practices\n\nDeclare all referenced env vars (even if empty) in `.env`:\n\n```\nMY_FEATURE_FLAG=\"\"\n```\n\nOverride from command line:\n\n```sh\nMY_FEATURE_FLAG=\"enabled\" npm run dev\n```",
+		"kit/$env-static-public": "# $env/static/public\n\nEnvironment variables with `PUBLIC_` prefix (configurable via `config.kit.env.publicPrefix`). Safe for client-side code. Values replaced at build time.\n\n```ts\nimport { PUBLIC_BASE_URL } from '$env/static/public';\n```",
+		"kit/$lib": "# $lib Import Alias\n\nSvelteKit provides `$lib` alias for importing from `src/lib`. Configure via [config file](configuration#files).\n\n```svelte\n<!--- file: src/lib/Component.svelte --->\nA reusable component\n```\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<script>\n    import Component from '$lib/Component.svelte';\n</script>\n\n<Component />\n```",
+		"kit/$service-worker": "# $service-worker\n\n```js\nimport { base, build, files, prerendered, version } from '$service-worker';\n```\n\nOnly available to [service workers](/docs/kit/service-workers).\n\n## base\n\n```ts\nconst base: string;\n```\n\nBase path of deployment. Equivalent to `config.kit.paths.base`, calculated from `location.pathname`. Works correctly in subdirectories.\n\nNote: No `assets` export since service workers can't be used if `config.kit.paths.assets` is specified.\n\n## build\n\n```ts\nconst build: string[];\n```\n\nArray of URLs for Vite-generated files. Use with `cache.addAll(build)`. Empty during development.\n\n## files\n\n```ts\nconst files: string[];\n```\n\nArray of URLs from static directory (`config.kit.files.assets`). Customize via [`config.kit.serviceWorker.files`](/docs/kit/configuration#serviceWorker).\n\n## prerendered\n\n```ts\nconst prerendered: string[];\n```\n\nArray of prerendered page/endpoint pathnames. Empty during development.\n\n## version\n\n```ts\nconst version: string;\n```\n\nFrom [`config.kit.version`](/docs/kit/configuration#version). Use for unique cache names to invalidate old caches on deployment.",
+		"kit/configuration": "# svelte.config.js\n\nConfiguration file at project root. Used by SvelteKit and other Svelte tooling.\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-auto';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n## adapter\n\n**Default:** `undefined`\n\nRuns during `vite build`. Determines how output is converted for different platforms.\n\n## alias\n\n**Default:** `{}`\n\nReplace values in `import` statements. Automatically passed to Vite and TypeScript.\n\n```js\n/// file: svelte.config.js\nconst config = {\n\tkit: {\n\t\talias: {\n\t\t\t'my-file': 'path/to/my-file.js',\n\t\t\t'my-directory': 'path/to/my-directory',\n\t\t\t'my-directory/*': 'path/to/my-directory/*'\n\t\t}\n\t}\n};\n```\n\n> Built-in `$lib` alias controlled by `config.kit.files.lib`. Run `npm run dev` to generate alias config in `jsconfig.json`/`tsconfig.json`.\n\n## appDir\n\n**Default:** `\"_app\"`\n\nDirectory for SvelteKit assets (JS, CSS) and internal routes.\n\n## csp\n\nContent Security Policy configuration. Protects against XSS attacks.\n\n```js\n/// file: svelte.config.js\nconst config = {\n\tkit: {\n\t\tcsp: {\n\t\t\tdirectives: {\n\t\t\t\t'script-src': ['self']\n\t\t\t},\n\t\t\treportOnly: {\n\t\t\t\t'script-src': ['self'],\n\t\t\t\t'report-uri': ['/']\n\t\t\t}\n\t\t}\n\t}\n};\n```\n\nSvelteKit augments directives with nonces/hashes for inline styles/scripts. Use `%sveltekit.nonce%` placeholder in `src/app.html`.\n\nFor prerendered pages, CSP added via `<meta http-equiv>` tag (`frame-ancestors`, `report-uri`, `sandbox` ignored).\n\n**mode:** `'hash' | 'nonce' | 'auto'` - `'auto'` uses hashes for prerendered, nonces for dynamic pages.\n\n> Most Svelte transitions create inline `<style>` elements. Leave `style-src` unspecified or add `unsafe-inline`.\n\n## csrf\n\n**Default:** `{ checkOrigin: true, trustedOrigins: [] }`\n\nProtection against cross-site request forgery.\n\n- **checkOrigin** (deprecated, use `trustedOrigins: ['*']`): Verifies `origin` header for POST/PUT/PATCH/DELETE form submissions matches server origin.\n- **trustedOrigins:** Array of origins allowed for cross-origin form submissions (e.g., `['https://payment-gateway.com']`). Use `['*']` to trust all (not recommended).\n\n> CSRF checks only apply in production.\n\n## embedded\n\n**Default:** `false`\n\nIf `true`, SvelteKit adds event listeners on parent of `%sveltekit.body%` instead of `window`, and uses server `params` instead of inferring from `location.pathname`.\n\n## env\n\nEnvironment variable configuration.\n\n- **dir** (default: `\".\"`): Directory to search for `.env` files.\n- **publicPrefix** (default: `\"PUBLIC_\"`): Prefix for client-safe env vars. See `$env/static/public` and `$env/dynamic/public`.\n- **privatePrefix** (default: `\"\"`, since v1.21.0): Prefix for server-only env vars. Vars matching neither prefix are discarded. See `$env/static/private` and `$env/dynamic/private`.\n\n## experimental\n\nExperimental features (not subject to semver).\n\n- **tracing.server** (default: `false`, since v2.31.0): Enable OpenTelemetry tracing for `handle` hook, `load` functions, form actions, remote functions.\n- **instrumentation.server** (default: `false`, since v2.31.0): Enable `instrumentation.server.js` for tracing/observability.\n- **remoteFunctions** (default: `false`): Enable experimental remote functions feature.\n\n## files (deprecated)\n\n- **src** (default: `\"src\"`, since v2.28): Source code location.\n- **assets** (default: `\"static\"`): Static files with stable URLs.\n- **hooks.client** (default: `\"src/hooks.client\"`): Client hooks location.\n- **hooks.server** (default: `\"src/hooks.server\"`): Server hooks location.\n- **hooks.universal** (default: `\"src/hooks\"`, since v2.3.0): Universal hooks location.\n- **lib** (default: `\"src/lib\"`): Internal library, accessible as `$lib`.\n- **params** (default: `\"src/params\"`): Parameter matchers directory.\n- **routes** (default: `\"src/routes\"`): App structure/routing files.\n- **serviceWorker** (default: `\"src/service-worker\"`): Service worker entry point.\n- **appTemplate** (default: `\"src/app.html\"`): HTML response template.\n- **errorTemplate** (default: `\"src/error.html\"`): Fallback error response template.\n\n## inlineStyleThreshold\n\n**Default:** `0`\n\nInline CSS in `<style>` block if file length (UTF-16 code units) is below threshold. Reduces initial requests but increases HTML size and reduces browser cache effectiveness.\n\n## moduleExtensions\n\n**Default:** `[\".js\", \".ts\"]`\n\nFile extensions SvelteKit treats as modules. Files not matching `config.extensions` or `config.kit.moduleExtensions` are ignored by router.\n\n## outDir\n\n**Default:** `\".svelte-kit\"`\n\nDirectory for SvelteKit build files. Exclude from version control.\n\n## output\n\n### preloadStrategy\n\n**Default:** `\"modulepreload\"` (since v1.8.4)\n\nPreload strategy for initial page JS modules:\n- `'modulepreload'`: Uses `<link rel=\"modulepreload\">`. Best for Chromium, Firefox 115+, Safari 17+.\n- `'preload-js'`: Uses `<link rel=\"preload\">`. Prevents waterfalls but Chromium parses modules twice. Modules requested twice in Firefox.\n- `'preload-mjs'`: Uses `<link rel=\"preload\">` with `.mjs` extension. Prevents double-parsing in Chromium but some servers may not serve `.mjs` correctly.\n\n### bundleStrategy\n\n**Default:** `'split'` (since v2.13.0)\n\n- `'split'`: Multiple .js/.css files loaded lazily (recommended).\n- `'single'`: One .js bundle and one .css file for entire app.\n- `'inline'`: Inlines all JS/CSS into HTML (usable without server).\n\nFor `'split'`, adjust bundling via Vite's `build.rollupOptions` (`output.experimentalMinChunkSize`, `output.manualChunks`).\n\nFor inline assets, set Vite's `build.assetsInlineLimit`:\n\n```js\n/// file: vite.config.js\nimport { sveltekit } from '@sveltejs/kit/vite';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n\tplugins: [sveltekit()],\n\tbuild: {\n\t\tassetsInlineLimit: Infinity\n\t}\n});\n```\n\n```svelte\n/// file: src/routes/+layout.svelte\n<script>\n\timport favicon from './favicon.png';\n</script>\n\n<svelte:head>\n\t<link rel=\"icon\" href={favicon} />\n</svelte:head>\n```\n\n## paths\n\n- **assets** (default: `\"\"`): Absolute path for serving app files (e.g., storage bucket URL).\n- **base** (default: `\"\"`): Root-relative path starting with `/` (e.g., `/base-path`). Prepend to links: `<a href=\"{base}/your-page\">`. Import from `$app/paths`.\n- **relative** (default: `true`, since v1.9.0): Use relative asset paths. If `true`, `base` and `assets` from `$app/paths` replaced with relative paths during SSR. If `false`, always root-relative. Set to `false` if using `<base>` element. SPA fallback pages always use absolute paths.\n\n## prerender\n\n- **concurrency** (default: `1`): Max simultaneous prerendered pages.\n- **crawl** (default: `true`): Follow links from `entries` to find pages.\n- **entries** (default: `[\"*\"]`): Pages to prerender or start crawling from. `*` includes all routes with no required `[parameters]`.\n- **handleHttpError** (default: `\"fail\"`, since v1.15.7): `'fail' | 'ignore' | 'warn' | (details) => void`. Custom handler receives `status`, `path`, `referrer`, `referenceType`, `message`.\n\n```js\n/// file: svelte.config.js\nconst config = {\n\tkit: {\n\t\tprerender: {\n\t\t\thandleHttpError: ({ path, referrer, message }) => {\n\t\t\t\tif (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tthrow new Error(message);\n\t\t\t}\n\t\t}\n\t}\n};\n```\n\n- **handleMissingId** (default: `\"fail\"`, since v1.15.7): `'fail' | 'ignore' | 'warn' | (details) => void`. Handler for hash links without corresponding `id`. Receives `path`, `id`, `referrers`, `message`.\n- **handleEntryGeneratorMismatch** (default: `\"fail\"`, since v1.16.0): `'fail' | 'ignore' | 'warn' | (details) => void`. Handler for entry/route mismatch. Receives `generatedFromId`, `entry`, `matchedId`, `message`.\n- **handleUnseenRoutes** (default: `\"fail\"`, since v2.16.0): `'fail' | 'ignore' | 'warn' | (details) => void`. Handler for prerenderable routes not prerendered. Receives `routes`.\n- **origin** (default: `\"http://sveltekit-prerender\"`): Value of `url.origin` during prerendering.\n\n## router\n\n- **type** (default: `\"pathname\"`, since v2.14.0): `'pathname' | 'hash'`. `'pathname'` uses URL pathname. `'hash'` uses `location.hash` (disables SSR/prerendering, links must start with `#/`).\n- **resolution** (default: `\"client\"`, since v2.17.0): `'client' | 'server'`. `'client'` uses route manifest in browser. `'server'` determines route on server for each unvisited path (faster initial load, hidden routes, server interception, but slightly slower for unvisited paths).\n\n## version\n\nClient-side navigation version management. Detects new deployments and falls back to full-page navigation on errors.\n\n```html\n/// file: +layout.svelte\n<script>\n\timport { beforeNavigate } from '$app/navigation';\n\timport { updated } from '$app/state';\n\n\tbeforeNavigate(({ willUnload, to }) => {\n\t\tif (updated.current && !willUnload && to?.url) {\n\t\t\tlocation.href = to.url.href;\n\t\t}\n\t});\n</script>\n```\n\n- **name:** App version string (must be deterministic, e.g., commit hash). Defaults to build timestamp.\n\n```js\n/// file: svelte.config.js\nimport * as child_process from 'node:child_process';\n\nexport default {\n\tkit: {\n\t\tversion: {\n\t\t\tname: child_process.execSync('git rev-parse HEAD').toString().trim()\n\t\t}\n\t}\n};\n```\n\n- **pollInterval** (default: `0`): Milliseconds to poll for version changes. Sets `updated.current` to `true` when new version detected.\n\n## typescript\n\n- **config** (default: `(config) => config`, since v1.3.0): Function to edit generated `tsconfig.json`. Mutate or return new config. Paths relative to `.svelte-kit/tsconfig.json`.",
+		"kit/cli": "# SvelteKit CLI\n\nSvelteKit uses [Vite](https://vitejs.dev) CLI via npm scripts:\n\n- `vite dev` — dev server\n- `vite build` — production build\n- `vite preview` — preview production build\n\n## svelte-kit sync\n\nCreates `tsconfig.json` and generated types (importable as `./$types` in routing files). Runs automatically as `prepare` script in npm lifecycle.",
+		"kit/types": "# Generated Types\n\n## Auto-generated `$types`\n\nSvelteKit generates `.d.ts` files for each endpoint/page to avoid manually typing `params`:\n\n**Before (manual typing):**\n```js\n/// file: src/routes/[foo]/[bar]/[baz]/+server.js\n/** @type {import('@sveltejs/kit').RequestHandler<{\n    foo: string;\n    bar: string;\n    baz: string\n  }>} */\nexport async function GET({ params }) {\n\t// ...\n}\n```\n\n**After (using generated types):**\n```js\n/// file: src/routes/[foo]/[bar]/[baz]/+server.js\n/** @type {import('./$types').RequestHandler} */\nexport async function GET({ params }) {\n\t// ...\n}\n```\n\n```js\n/// file: src/routes/[foo]/[bar]/[baz]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ params, fetch }) {\n\t// ...\n}\n```\n\n## Helper Types\n\n- `PageData` / `LayoutData`: Return types of load functions\n- `ActionData`: Union of all `Actions` return values\n- `PageProps`: Defines `data: PageData` and `form: ActionData` (v2.16.0+)\n- `LayoutProps`: Defines `data: LayoutData` and `children: Snippet` (v2.16.0+)\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data, form } = $props();\n</script>\n```\n\n## Setup\n\nYour `tsconfig.json` must extend the generated config:\n\n```json\n{ \"extends\": \"./.svelte-kit/tsconfig.json\" }\n```\n\n## $lib Aliases\n\n- `$lib`: Alias to `src/lib` (or `config.kit.files.lib`)\n- `$lib/server`: Server-only modules, prevented from importing client-side\n\n## app.d.ts\n\nDefine ambient types in the `App` namespace:\n\n### `App.Error`\nShape of expected/unexpected errors:\n```ts\ninterface Error {\n  message: string;\n}\n```\n\n### `App.Locals`\nType for `event.locals` (available in hooks, server load functions, `+server.js`):\n```ts\ninterface Locals {}\n```\n\n### `App.PageData`\nCommon shape of `page.data` across all pages. Use optional properties for page-specific data:\n```ts\ninterface PageData {}\n```\n\n### `App.PageState`\nShape of `page.state` for `pushState`/`replaceState`:\n```ts\ninterface PageState {}\n```\n\n### `App.Platform`\nPlatform-specific context from adapters:\n```ts\ninterface Platform {}\n```",
+		"mcp/overview": "# Svelte MCP Server\n\nThe Svelte MCP ([Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro)) server provides documentation and static analysis to help LLMs write better Svelte code.\n\n## Setup\n\nChoose setup based on your MCP client (Claude Code, Codex CLI, GitHub Copilot):\n- **Local**: `@sveltejs/mcp`\n- **Remote**: `https://mcp.svelte.dev/mcp`\n\nSee [local setup](local-setup) or [remote setup](remote-setup) docs.\n\n## Usage\n\nAdd to `AGENTS.md` (or `CLAUDE.md` for Claude Code):\n\n```md\nYou are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:\n\n## Available MCP Tools:\n\n### 1. list-sections\n\nUse this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.\nWhen asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.\n\n### 2. get-documentation\n\nRetrieves full documentation content for specific sections. Accepts single or multiple sections.\nAfter calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.\n\n### 3. svelte-autofixer\n\nAnalyzes Svelte code and returns issues and suggestions.\nYou MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.\n\n### 4. playground-link\n\nGenerates a Svelte Playground link with the provided code.\nAfter completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.\n```\n\nIf supported, use the [svelte-task](prompts#svelte-task) prompt for optimal MCP usage.",
+		"mcp/local-setup": "# MCP Server Setup\n\nThe Svelte MCP server is available via [`@sveltejs/mcp`](https://www.npmjs.com/package/@sveltejs/mcp). Run with:\n\n```bash\nnpx -y @sveltejs/mcp\n```\n\n## Client Configuration\n\n### Claude Code\n```bash\nclaude mcp add -t stdio -s [scope] svelte -- npx -y @sveltejs/mcp\n```\n`[scope]`: `user`, `project`, or `local`\n\n### Claude Desktop\nSettings > Developer > Edit Config, add to `claude_desktop_config.json`:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"command\": \"npx\",\n\t\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t\t}\n\t}\n}\n```\n\n### Codex CLI\nAdd to `config.toml` (default: `~/.codex/config.toml`):\n\n```toml\n[mcp_servers.svelte]\ncommand = \"npx\"\nargs = [\"-y\", \"@sveltejs/mcp\"]\n```\n\n### Gemini CLI\n```bash\ngemini mcp add -t stdio -s [scope] svelte npx -y @sveltejs/mcp\n```\n`[scope]`: `user`, `project`, or `local`\n\n### OpenCode\n```bash\nopencode mcp add\n```\nSelect 'Local' and enter `npx -y @sveltejs/mcp`\n\n### VS Code\nCommand palette > \"MCP: Add Server...\" > \"Command (stdio)\" > `npx -y @sveltejs/mcp` > name: `svelte`\n\n### Cursor\nCommand palette > \"View: Open MCP Settings\" > \"Add custom MCP\", add:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"command\": \"npx\",\n\t\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t\t}\n\t}\n}\n```\n\n### Zed\nCommand palette > \"agent:open settings\" > `Model Context Protocol (MCP) Servers` > \"Add Server\" > \"Add Custom Server\":\n\n```json\n{\n\t\"svelte\": {\n\t\t\"command\": \"npx\",\n\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t}\n}\n```\n\n### Other Clients\nUse `stdio` server with command `npx` and args `-y @sveltejs/mcp`",
+		"mcp/remote-setup": "# MCP Server Setup\n\nRemote MCP server URL: `https://mcp.svelte.dev/mcp`\n\n## Claude Code\n\n```bash\nclaude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp\n```\n\n`scope` must be `user`, `project`, or `local`\n\n## Claude Desktop\n\nSettings > Connectors > Add Custom Connector\n- Name: `svelte`\n- URL: `https://mcp.svelte.dev/mcp`\n\n## Codex CLI\n\nAdd to `config.toml` (default: `~/.codex/config.toml`):\n\n```toml\nexperimental_use_rmcp_client = true\n[mcp_servers.svelte]\nurl = \"https://mcp.svelte.dev/mcp\"\n```\n\n## Gemini CLI\n\n```bash\ngemini mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp\n```\n\n`[scope]` must be `user`, `project`, or `local`\n\n## OpenCode\n\n```bash\nopencode mcp add\n```\n\nSelect 'Remote' type, enter name `svelte` and URL `https://mcp.svelte.dev/mcp`\n\n## VS Code\n\nCommand palette > \"MCP: Add Server...\" > \"HTTP (HTTP or Server-Sent-Events)\"\n- URL: `https://mcp.svelte.dev/mcp`\n- Choose Global or Workspace\n\n## Cursor\n\nCommand palette > \"View: Open MCP Settings\" > \"Add custom MCP\"\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"url\": \"https://mcp.svelte.dev/mcp\"\n\t\t}\n\t}\n}\n```\n\n## Other Clients\n\nUse `https://mcp.svelte.dev/mcp` as remote server URL per client documentation.",
+		"mcp/tools": "# MCP Server Tools\n\nThe MCP server provides these tools for LLM interaction with Svelte documentation:\n\n## Available Tools\n\n**`list-sections`** - Lists all available documentation sections\n\n**`get-documentation`** - Fetches current documentation from svelte.dev/docs for requested sections\n\n**`svelte-autofixer`** - Static analysis tool that suggests fixes for generated code. Can run iteratively until all issues resolved\n\n**`playground-link`** - Creates ephemeral playground URL with generated code (code stored in URL only, not on server)",
+		"mcp/resources": "# MCP Server Resources\n\n## doc-section\n\nDynamic resource for accessing Svelte documentation sections.\n\n**URI format:** `svelte://slug-of-the-docs.md`\n\n**Returns:** `llms.txt` version of the specified documentation page\n\n**Use case:** Include specific documentation (e.g., transitions) directly in your session without LLM retrieval.",
+		"mcp/prompts": "# MCP Server Prompts\n\n## svelte-task\n\nUse this prompt for any Svelte-related task. It instructs the LLM on available documentation, tools, and workflows.\n\n### Key Instructions\n\n**Documentation Access:**\n- Use `get_documentation` tool with paths from the available docs list (CLI, Kit, Svelte core, etc.)\n- Paths cover: project setup, routing, data loading, forms, deployment, testing, styling, authentication, etc.\n\n**Code Validation Workflow:**\n1. Write Svelte component/module\n2. **MUST** invoke `svelte-autofixer` tool with the code\n3. Fix any issues/suggestions returned\n4. Repeat steps 2-3 until no issues remain\n5. Only then return code to user\n\n**Playground Links:**\n- After final code version, ask user if they want a playground link\n- If yes, call `playground-link` tool\n- Must include `App.svelte` as entry point\n- Can include multiple files at root\n\n### Available Documentation Categories\n\n- **CLI**: `sv create`, `sv add`, `sv check`, `sv migrate`, integrations (Drizzle, ESLint, Lucia, Playwright, Tailwind, Vitest, etc.)\n- **SvelteKit**: routing, loading data, form actions, adapters, hooks, errors, state management, remote functions, deployment\n- **Svelte**: runes (`$state`, `$derived`, `$effect`, `$props`, `$bindable`), markup, transitions, stores, context, TypeScript, custom elements\n- **Legacy**: migration guides, deprecated APIs, Svelte 3/4 patterns\n\n### Syntax Rules (Svelte 5)\n\n- No colon in event modifiers: `onclick` not `on:click`\n- Runes are globals (no import needed)\n- `$state()` uses `let`, never `const`\n- `$derived` with function: `$derived.by(() => ...)`\n- Error boundaries: catch render errors and top-level `$effect` errors only (not event handlers)",
+		"svelte/overview": "# Svelte Overview\n\nSvelte is a compiler-based UI framework that transforms declarative components (HTML, CSS, JavaScript) into optimized JavaScript.\n\n## Basic Component Structure\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\tfunction greet() {\n\t\talert('Welcome to Svelte!');\n\t}\n</script>\n\n<button onclick={greet}>click me</button>\n\n<style>\n\tbutton {\n\t\tfont-size: 2em;\n\t}\n</style>\n```\n\n**Key Points:**\n- Components contain `<script>`, markup, and `<style>` blocks\n- Event handlers use `onclick` (no colon)\n- Use standalone or with SvelteKit for full-stack apps",
+		"svelte/getting-started": "# Getting Started\n\n## SvelteKit (Recommended)\n\nOfficial framework powered by Vite. Create a project:\n\n```sh\nnpx sv create myapp\ncd myapp\nnpm install\nnpm run dev\n```\n\n## Alternatives\n\n**Vite standalone:**\n```sh\nnpm create vite@latest\n```\nSelect `svelte` option. Generates HTML/JS/CSS in `dist`. You'll likely need a [routing library](/packages#routing).\n\n**Other bundlers:** [Plugins available](/packages#bundler-plugins), but Vite recommended.\n\n## Tooling\n\n- [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)\n- [Other editor integrations](https://sveltesociety.dev/resources#editor-support)\n- CLI checking: `sv check`\n\n## Help\n\n- [Discord](/chat)\n- [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte)",
+		"svelte/svelte-files": "# Components\n\nComponents are written in `.svelte` files. All three sections (script, styles, markup) are optional.\n\n```svelte\n/// file: MyComponent.svelte\n<script module>\n\t// module-level logic goes here\n\t// (you will rarely use this)\n</script>\n\n<script>\n\t// instance-level logic goes here\n</script>\n\n<!-- markup (zero or more items) goes here -->\n\n<style>\n\t/* styles go here */\n</style>\n```\n\n## `<script>`\n\nRuns when component instance is created. Top-level variables can be referenced in markup.\n\nUse runes for props and reactivity.\n\n## `<script module>`\n\nRuns once when module first evaluates (not per instance). Variables declared here can be referenced in component, but not vice versa.\n\n```svelte\n<script module>\n\tlet total = 0;\n</script>\n\n<script>\n\ttotal += 1;\n\tconsole.log(`instantiated ${total} times`);\n</script>\n```\n\nCan `export` bindings (becomes module exports). Cannot `export default` (component is default export).\n\n> **Note:** In Svelte 4, this was `<script context=\"module\">`\n\n## `<style>`\n\nCSS is scoped to the component.\n\n```svelte\n<style>\n\tp {\n\t\t/* this will only affect <p> elements in this component */\n\t\tcolor: burlywood;\n\t}\n</style>\n```",
+		"svelte/svelte-js-files": "# `.svelte.js` and `.svelte.ts` files\n\nSvelte operates on `.svelte.js` and `.svelte.ts` files in addition to `.svelte` files.\n\n**Key points:**\n- Behave like regular `.js`/`.ts` modules but can use runes\n- Useful for reusable reactive logic or sharing reactive state\n- **Gotcha:** Cannot export reassigned state",
+		"svelte/what-are-runes": "# Runes\n\nRunes are symbols that control the Svelte compiler in `.svelte` and `.svelte.js`/`.svelte.ts` files. They are keywords, not functions.\n\n## Syntax\n\nRunes have a `$` prefix and look like functions:\n\n```js\nlet message = $state('hello');\n```\n\n## Key Characteristics\n\n- **No import needed** — they are globals\n- **Not values** — cannot be assigned to variables or passed as arguments\n- **Position-specific** — only valid in certain positions (compiler enforces this)",
+		"svelte/$state": "# $state\n\nCreates reactive state that updates the UI when changed.\n\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n\n<button onclick={() => count++}>\n\tclicks: {count}\n</button>\n```\n\n`count` is just a number, not an object or function. Update it like any variable.\n\n## Deep state\n\nArrays and simple objects become deeply reactive proxies. Svelte intercepts reads/writes to trigger granular updates.\n\n```js\nlet todos = $state([\n\t{\n\t\tdone: false,\n\t\ttext: 'add more todos'\n\t}\n]);\n```\n\nModifying nested properties triggers updates:\n\n```js\ntodos[0].done = !todos[0].done;\n```\n\nPushed objects are also proxified:\n\n```js\ntodos.push({\n\tdone: false,\n\ttext: 'eat lunch'\n});\n```\n\n**Gotcha:** Destructuring breaks reactivity (evaluated at destructure time):\n\n```js\nlet { done, text } = todos[0];\n\n// this will NOT affect the value of `done`\ntodos[0].done = !todos[0].done;\n```\n\n## Classes\n\nUse `$state` in class fields or as first assignment in constructor:\n\n```js\nclass Todo {\n\tdone = $state(false);\n\n\tconstructor(text) {\n\t\tthis.text = $state(text);\n\t}\n\n\treset() {\n\t\tthis.text = '';\n\t\tthis.done = false;\n\t}\n}\n```\n\n**Gotcha:** `this` binding in methods. This won't work:\n\n```svelte\n<button onclick={todo.reset}>\n\treset\n</button>\n```\n\nFix with inline function:\n\n```svelte\n<button onclick={() => todo.reset()}>\n\treset\n</button>\n```\n\nOr arrow function in class:\n\n```js\nclass Todo {\n\tdone = $state(false);\n\n\tconstructor(text) {\n\t\tthis.text = $state(text);\n\t}\n\n\treset = () => {\n\t\tthis.text = '';\n\t\tthis.done = false;\n\t}\n}\n```\n\n## Built-in classes\n\nImport reactive `Set`, `Map`, `Date`, `URL` from `svelte/reactivity`.\n\n## $state.raw\n\nNon-deeply reactive state. Cannot mutate, only reassign:\n\n```js\nlet person = $state.raw({\n\tname: 'Heraclitus',\n\tage: 49\n});\n\n// no effect\nperson.age += 1;\n\n// works - new object\nperson = {\n\tname: 'Heraclitus',\n\tage: 50\n};\n```\n\nImproves performance for large arrays/objects you won't mutate. Raw state can contain reactive state.\n\n## $state.snapshot\n\nTakes static snapshot of reactive proxy:\n\n```svelte\n<script>\n\tlet counter = $state({ count: 0 });\n\n\tfunction onclick() {\n\t\t// Logs `{ count: ... }` not `Proxy { ... }`\n\t\tconsole.log($state.snapshot(counter));\n\t}\n</script>\n```\n\nUseful for external libraries/APIs that don't expect proxies (e.g., `structuredClone`).\n\n## Passing state into functions\n\nJavaScript is pass-by-value. To access current values, use functions:\n\n```js\nfunction add(getA, getB) {\n\treturn () => getA() + getB();\n}\n\nlet a = $state(1);\nlet b = $state(2);\nlet total = add(() => a, () => b);\nconsole.log(total()); // 3\n\na = 3;\nb = 4;\nconsole.log(total()); // 7\n```\n\nOr use getters:\n\n```js\nfunction add(input) {\n\treturn {\n\t\tget value() {\n\t\t\treturn input.a + input.b;\n\t\t}\n\t};\n}\n\nlet input = $state({ a: 1, b: 2 });\nlet total = add(input);\nconsole.log(total.value); // 3\n\ninput.a = 3;\ninput.b = 4;\nconsole.log(total.value); // 7\n```\n\n## Passing state across modules\n\n**Cannot directly export reassignable state:**\n\n```js\n// ❌ Not allowed\nexport let count = $state(0);\n\nexport function increment() {\n\tcount += 1;\n}\n```\n\n**Option 1:** Export object, update properties:\n\n```js\nexport const counter = $state({\n\tcount: 0\n});\n\nexport function increment() {\n\tcounter.count += 1;\n}\n```\n\n**Option 2:** Export getter/setter functions:\n\n```js\nlet count = $state(0);\n\nexport function getCount() {\n\treturn count;\n}\n\nexport function increment() {\n\tcount += 1;\n}\n```",
+		"svelte/$derived": "# Derived State\n\n## `$derived`\n\nCreates reactive derived values that automatically update when dependencies change:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $derived(count * 2);\n</script>\n\n<button onclick={() => count++}>\n\t{doubled}\n</button>\n\n<p>{count} doubled is {doubled}</p>\n```\n\n**Key points:**\n- Expression must be side-effect free (no `count++`)\n- Can mark class fields as `$derived`\n- Without `$derived`, values don't update when dependencies change\n\n## `$derived.by`\n\nFor complex derivations requiring multiple statements:\n\n```svelte\n<script>\n\tlet numbers = $state([1, 2, 3]);\n\tlet total = $derived.by(() => {\n\t\tlet total = 0;\n\t\tfor (const n of numbers) {\n\t\t\ttotal += n;\n\t\t}\n\t\treturn total;\n\t});\n</script>\n\n<button onclick={() => numbers.push(numbers.length + 1)}>\n\t{numbers.join(' + ')} = {total}\n</button>\n```\n\n`$derived(expression)` equals `$derived.by(() => expression)`\n\n## Dependencies\n\nAnything read synchronously inside `$derived` is a dependency. Use [`untrack`](svelte#untrack) to exempt state from being a dependency.\n\n## Overriding Derived Values\n\nCan temporarily reassign derived values (unless `const`) for optimistic UI:\n\n```svelte\n<script>\n\tlet { post, like } = $props();\n\n\tlet likes = $derived(post.likes);\n\n\tasync function onclick() {\n\t\t// increment the `likes` count immediately...\n\t\tlikes += 1;\n\n\t\t// and tell the server, which will eventually update `post`\n\t\ttry {\n\t\t\tawait like();\n\t\t} catch {\n\t\t\t// failed! roll back the change\n\t\t\tlikes -= 1;\n\t\t}\n\t}\n</script>\n\n<button {onclick}>🧡 {likes}</button>\n```\n\n## Deriveds and Reactivity\n\nUnlike `$state`, `$derived` values aren't converted to deeply reactive proxies. Mutating a derived object still affects the underlying reactive source.\n\n## Destructuring\n\nDestructured variables from `$derived` are all reactive:\n\n```js\nlet { a, b, c } = $derived(stuff());\n```\n\nEquivalent to:\n\n```js\nlet _stuff = $derived(stuff());\nlet a = $derived(_stuff.a);\nlet b = $derived(_stuff.b);\nlet c = $derived(_stuff.c);\n```\n\n## Update Propagation\n\n**Push-pull reactivity:** Dependencies are notified immediately (push), but derived values only re-evaluate when read (pull).\n\nIf a derived's new value is referentially identical to its previous value, downstream updates are skipped:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet large = $derived(count > 10);\n</script>\n\n<button onclick={() => count++}>\n\t{large}\n</button>\n```\n\nButton text only updates when `large` changes, not `count`.",
+		"svelte/$effect": "# Effects\n\nEffects run when state updates. They only run in the browser, not during SSR.\n\n**Don't update state inside effects** — use alternatives like `$derived` instead.\n\n## `$effect`\n\nCreates an effect that tracks reactive dependencies and re-runs when they change.\n\n```svelte\n<script>\n\tlet size = $state(50);\n\tlet color = $state('#ff3e00');\n\n\tlet canvas;\n\n\t$effect(() => {\n\t\tconst context = canvas.getContext('2d');\n\t\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\n\t\t// this will re-run whenever `color` or `size` change\n\t\tcontext.fillStyle = color;\n\t\tcontext.fillRect(0, 0, size, size);\n\t});\n</script>\n\n<canvas bind:this={canvas} width=\"100\" height=\"100\"></canvas>\n```\n\n### Lifecycle\n\n- Runs after component mounts to DOM\n- Re-runs in a microtask after state changes\n- Re-runs are batched\n- Can be used anywhere, not just top level (must be called while parent effect is running)\n\n### Teardown\n\nReturn a function to clean up before re-run or component destruction:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet milliseconds = $state(1000);\n\n\t$effect(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tcount += 1;\n\t\t}, milliseconds);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<h1>{count}</h1>\n\n<button onclick={() => (milliseconds *= 2)}>slower</button>\n<button onclick={() => (milliseconds /= 2)}>faster</button>\n```\n\n### Dependencies\n\n- Auto-tracks `$state`, `$derived`, `$props` read **synchronously**\n- Values read after `await` or in `setTimeout` are **not tracked**\n- Reading object doesn't track properties inside it (only reassignment)\n- Conditional code affects dependencies — only tracks what was read in last run\n\n```ts\n$effect(() => {\n\tconst context = canvas.getContext('2d');\n\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\n\t// this will re-run whenever `color` changes...\n\tcontext.fillStyle = color;\n\n\tsetTimeout(() => {\n\t\t// ...but not when `size` changes\n\t\tcontext.fillRect(0, 0, size, size);\n\t}, 0);\n});\n```\n\n```svelte\n<script>\n\tlet state = $state({ value: 0 });\n\tlet derived = $derived({ value: state.value * 2 });\n\n\t// this will run once, because `state` is never reassigned (only mutated)\n\t$effect(() => {\n\t\tstate;\n\t});\n\n\t// this will run whenever `state.value` changes...\n\t$effect(() => {\n\t\tstate.value;\n\t});\n\n\t// ...and so will this, because `derived` is a new object each time\n\t$effect(() => {\n\t\tderived;\n\t});\n</script>\n```\n\n## `$effect.pre`\n\nRuns **before** DOM updates (vs `$effect` which runs after):\n\n```svelte\n<script>\n\timport { tick } from 'svelte';\n\n\tlet div = $state();\n\tlet messages = $state([]);\n\n\t$effect.pre(() => {\n\t\tif (!div) return; // not yet mounted\n\n\t\tmessages.length;\n\n\t\t// autoscroll when new messages are added\n\t\tif (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {\n\t\t\ttick().then(() => {\n\t\t\t\tdiv.scrollTo(0, div.scrollHeight);\n\t\t\t});\n\t\t}\n\t});\n</script>\n\n<div bind:this={div}>\n\t{#each messages as message}\n\t\t<p>{message}</p>\n\t{/each}\n</div>\n```\n\n## `$effect.tracking`\n\nReturns `true` if code is running inside a tracking context (effect or template):\n\n```svelte\n<script>\n\tconsole.log('in component setup:', $effect.tracking()); // false\n\n\t$effect(() => {\n\t\tconsole.log('in effect:', $effect.tracking()); // true\n\t});\n</script>\n\n<p>in template: {$effect.tracking()}</p> <!-- true -->\n```\n\n## `$effect.pending`\n\nReturns count of pending promises in current boundary (not including child boundaries):\n\n```svelte\n<button onclick={() => a++}>a++</button>\n<button onclick={() => b++}>b++</button>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n\n{#if $effect.pending()}\n\t<p>pending promises: {$effect.pending()}</p>\n{/if}\n```\n\n## `$effect.root`\n\nCreates non-tracked scope that doesn't auto-cleanup. For manual control of effects:\n\n```js\nconst destroy = $effect.root(() => {\n\t$effect(() => {\n\t\t// setup\n\t});\n\n\treturn () => {\n\t\t// cleanup\n\t};\n});\n\n// later...\ndestroy();\n```\n\n## When NOT to use `$effect`\n\n### ❌ Don't synchronize state\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $state();\n\n\t// don't do this!\n\t$effect(() => {\n\t\tdoubled = count * 2;\n\t});\n</script>\n```\n\n### ✅ Use `$derived` instead\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $derived(count * 2);\n</script>\n```\n\n### ❌ Don't link values with effects\n\n```svelte\n<script>\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $state(total);\n\n\t$effect(() => {\n\t\tleft = total - spent;\n\t});\n\n\t$effect(() => {\n\t\tspent = total - left;\n\t});\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" bind:value={left} max={total} />\n\t{left}/{total} left\n</label>\n```\n\n### ✅ Use function bindings\n\n```svelte\n<script>\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $derived(total - spent);\n\n\tfunction updateLeft(left) {\n\t\tspent = total - left;\n\t}\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" bind:value={() => left, updateLeft} max={total} />\n\t{left}/{total} left\n</label>\n```\n\n**Note:** As of Svelte 5.25, deriveds can be directly overridden for optimistic UI patterns.\n\n**Gotcha:** If you must update `$state` in an effect and hit infinite loops, use `untrack()`.",
+		"svelte/$props": "# Props\n\nPass props to components like attributes:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport MyComponent from './MyComponent.svelte';\n</script>\n\n<MyComponent adjective=\"cool\" />\n```\n\nReceive props with `$props` rune (destructuring is common):\n\n```svelte\n<!--- file: MyComponent.svelte --->\n<script>\n\tlet { adjective } = $props();\n</script>\n\n<p>this component is {adjective}</p>\n```\n\n## Fallback values\n\nUse destructuring defaults for fallback values:\n\n```js\nlet { adjective = 'happy' } = $props();\n```\n\n> **Note:** Fallback values are not turned into reactive state proxies.\n\n## Renaming props\n\nRename props for invalid identifiers or keywords:\n\n```js\nlet { super: trouper = 'lights are gonna find me' } = $props();\n```\n\n## Rest props\n\nGet remaining props with rest property:\n\n```js\nlet { a, b, c, ...others } = $props();\n```\n\n## Updating props\n\nProps update when parent changes. Child can temporarily **reassign** props but should **not mutate** them unless they are `$bindable`.\n\n**Reassignment works** (temporary override):\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { count } = $props();\n</script>\n\n<button onclick={() => (count += 1)}>\n\tclicks (child): {count}\n</button>\n```\n\n**Mutating regular objects has no effect:**\n\n```svelte\n<button onclick={() => {\n\t// has no effect\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\n**Mutating reactive state proxies causes `ownership_invalid_mutation` warning** — don't mutate objects you don't own.\n\n**Mutating fallback values has no effect** (not reactive).\n\n**Solution:** Use callback props or `$bindable` to share state between parent and child.\n\n## Type safety\n\nTypeScript:\n\n```svelte\n<script lang=\"ts\">\n\tlet { adjective }: { adjective: string } = $props();\n</script>\n```\n\nJSDoc:\n\n```svelte\n<script>\n\t/** @type {{ adjective: string }} */\n\tlet { adjective } = $props();\n</script>\n```\n\nWith interface:\n\n```svelte\n<script lang=\"ts\">\n\tinterface Props {\n\t\tadjective: string;\n\t}\n\n\tlet { adjective }: Props = $props();\n</script>\n```\n\n> **Note:** Native DOM element interfaces available in `svelte/elements` module.\n\n## `$props.id()`\n\nGenerates unique ID per component instance (consistent during SSR hydration). Useful for linking elements:\n\n```svelte\n<script>\n\tconst uid = $props.id();\n</script>\n\n<form>\n\t<label for=\"{uid}-firstname\">First Name: </label>\n\t<input id=\"{uid}-firstname\" type=\"text\" />\n\n\t<label for=\"{uid}-lastname\">Last Name: </label>\n\t<input id=\"{uid}-lastname\" type=\"text\" />\n</form>\n```",
+		"svelte/$bindable": "# Component Bindings\n\nProps normally flow parent → child. With `$bindable`, data can also flow child → parent, allowing children to mutate parent state.\n\n> **Note:** Mutating normal props triggers a warning. Use `$bindable` to explicitly allow mutation.\n\n## Basic Usage\n\nMark a prop as bindable with `$bindable()`:\n\n```svelte\n/// file: FancyInput.svelte\n<script>\n\tlet { value = $bindable(), ...props } = $props();\n</script>\n\n<input bind:value={value} {...props} />\n\n<style>\n\tinput {\n\t\tfont-family: 'Comic Sans MS';\n\t\tcolor: deeppink;\n\t}\n</style>\n```\n\nParent uses `bind:` directive to create two-way binding:\n\n```svelte\n/// file: App.svelte\n<script>\n\timport FancyInput from './FancyInput.svelte';\n\n\tlet message = $state('hello');\n</script>\n\n<FancyInput bind:value={message} />\n<p>{message}</p>\n```\n\n## Fallback Values\n\nParents can pass normal props without `bind:`. Provide a fallback for when no prop is passed:\n\n```js\n/// file: FancyInput.svelte\nlet { value = $bindable('fallback'), ...props } = $props();\n```\n\n**Best Practice:** Use sparingly — one-way data flow is easier to understand.",
+		"svelte/$inspect": "# $inspect\n\n**Development only** - becomes noop in production.\n\nRe-runs `console.log` whenever arguments change. Tracks reactive state deeply.\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet message = $state('hello');\n\n\t$inspect(count, message); // logs when count or message change\n</script>\n\n<button onclick={() => count++}>Increment</button>\n<input bind:value={message} />\n```\n\n## $inspect(...).with\n\nCustom callback instead of `console.log`. First arg is `\"init\"` or `\"update\"`, rest are inspected values.\n\n```svelte\n<script>\n\tlet count = $state(0);\n\n\t$inspect(count).with((type, count) => {\n\t\tif (type === 'update') {\n\t\t\tdebugger; // or console.trace, etc\n\t\t}\n\t});\n</script>\n\n<button onclick={() => count++}>Increment</button>\n```\n\n**Tip:** Pass `console.trace` to find change origin:\n\n```js\n// @errors: 2304\n$inspect(stuff).with(console.trace);\n```\n\n## $inspect.trace(...)\n\nAdded in 5.14. Traces function re-runs in [$effect]($effect) or [$derived]($derived), logging which reactive state caused the update.\n\n**Must be first statement in function body.**\n\n```svelte\n<script>\n\timport { doSomeWork } from './elsewhere';\n\n\t$effect(() => {\n\t\t// $inspect.trace must be the first statement of a function body\n\t\t$inspect.trace();\n\t\tdoSomeWork();\n\t});\n</script>\n```\n\nTakes optional label as first argument.",
+		"svelte/$host": "# $host Rune\n\nThe `$host` rune provides access to the host element when compiling a component as a custom element.\n\n## Usage\n\n```svelte\n/// file: Stepper.svelte\n<svelte:options customElement=\"my-stepper\" />\n\n<script>\n\tfunction dispatch(type) {\n\t\t$host().dispatchEvent(new CustomEvent(type));\n\t}\n</script>\n\n<button onclick={() => dispatch('decrement')}>decrement</button>\n<button onclick={() => dispatch('increment')}>increment</button>\n```\n\n```svelte\n/// file: App.svelte\n<script>\n\timport './Stepper.svelte';\n\n\tlet count = $state(0);\n</script>\n\n<my-stepper\n\tondecrement={() => count -= 1}\n\tonincrement={() => count += 1}\n></my-stepper>\n\n<p>count: {count}</p>\n```\n\n**Key points:**\n- Only available in custom element components (requires `<svelte:options customElement=\"...\" />`)\n- Commonly used to dispatch custom events from the host element\n- `$host()` is a global rune, no import needed",
+		"svelte/basic-markup": "# Svelte Markup\n\n## Tags\n\n- Lowercase tags (`<div>`) = HTML elements\n- Capitalized or dot notation (`<Widget>`, `<my.stuff>`) = components\n\n```svelte\n<script>\n\timport Widget from './Widget.svelte';\n</script>\n\n<div>\n\t<Widget />\n</div>\n```\n\n## Element Attributes\n\nAttributes work like HTML. Values can contain or be JavaScript expressions.\n\n```svelte\n<div class=\"foo\">\n\t<button disabled>can't touch this</button>\n</div>\n\n<input type=checkbox />\n\n<a href=\"page/{p}\">page {p}</a>\n\n<button disabled={!clickable}>...</button>\n```\n\n**Inclusion rules:**\n- Boolean attributes: included if truthy, excluded if falsy\n- Other attributes: included unless nullish (`null`/`undefined`)\n\n```svelte\n<input required={false} placeholder=\"This input field is not required\" />\n<div title={null}>This div has no title attribute</div>\n```\n\n**Shorthand:** `{name}` replaces `name={name}`\n\n```svelte\n<button {disabled}>...</button>\n```\n\n## Component Props\n\nSame rules as attributes. Use `{name}` shorthand.\n\n```svelte\n<Widget foo={bar} answer={42} text=\"hello\" />\n```\n\n## Spread Attributes\n\nSpread multiple attributes/props at once. Order matters for precedence.\n\n```svelte\n<Widget a=\"b\" {...things} c=\"d\" />\n```\n\n## Events\n\nUse `on` prefix (case sensitive). `onclick` listens to `click`, `onClick` listens to `Click`.\n\n```svelte\n<button onclick={() => console.log('clicked')}>click me</button>\n```\n\nEvent attributes support shorthand and spreading. Fire after bindings update.\n\n**Passive events:** `ontouchstart` and `ontouchmove` are passive for performance. Use `on` from `svelte/events` if you need `preventDefault()`.\n\n### Event Delegation\n\nSvelte delegates certain events to the application root for performance.\n\n**Gotchas:**\n- Manually dispatched events need `{ bubbles: true }`\n- Avoid `stopPropagation` with `addEventListener` directly\n- Use `on` from `svelte/events` instead of `addEventListener` for correct ordering\n\n**Delegated events:** `beforeinput`, `click`, `change`, `dblclick`, `contextmenu`, `focusin`, `focusout`, `input`, `keydown`, `keyup`, `mousedown`, `mousemove`, `mouseout`, `mouseover`, `mouseup`, `pointerdown`, `pointermove`, `pointerout`, `pointerover`, `pointerup`, `touchend`, `touchmove`, `touchstart`\n\n## Text Expressions\n\nJavaScript expressions in curly braces. `null`/`undefined` omitted, others coerced to strings.\n\n```svelte\n<h1>Hello {name}!</h1>\n<p>{a} + {b} = {a + b}.</p>\n\n<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>\n```\n\n**HTML rendering:** Use `{@html}` (escape to prevent XSS)\n\n```svelte\n{@html potentiallyUnsafeHtmlString}\n```\n\n## Comments\n\nHTML comments work. `svelte-ignore` disables warnings for next markup block.\n\n```svelte\n<!-- this is a comment! --><h1>Hello world</h1>\n\n<!-- svelte-ignore a11y_autofocus -->\n<input bind:value={name} autofocus />\n```\n\n**Component docs:** `@component` comments show on hover.\n\n````svelte\n<!--\n@component\n- You can use markdown here.\n- Usage:\n  ```html\n  <Main name=\"Arethra\">\n  ```\n-->\n<script>\n\tlet { name } = $props();\n</script>\n\n<main>\n\t<h1>Hello, {name}</h1>\n</main>\n````",
+		"svelte/if": "# Conditional Rendering\n\n## Syntax\n\n```svelte\n{#if expression}...{/if}\n{#if expression}...{:else if expression}...{/if}\n{#if expression}...{:else}...{/if}\n```\n\n## Usage\n\nBasic conditional:\n\n```svelte\n{#if answer === 42}\n\t<p>what was the question?</p>\n{/if}\n```\n\nMultiple conditions with `{:else if}` and optional `{:else}`:\n\n```svelte\n{#if porridge.temperature > 100}\n\t<p>too hot!</p>\n{:else if 80 > porridge.temperature}\n\t<p>too cold!</p>\n{:else}\n\t<p>just right!</p>\n{/if}\n```\n\n**Note:** Blocks can wrap elements or text within elements.",
+		"svelte/each": "# {#each} blocks\n\n## Basic syntax\n\n```svelte\n{#each expression as name}...{/each}\n{#each expression as name, index}...{/each}\n```\n\nIterates over arrays, array-like objects (with `length`), or iterables (`Map`, `Set`, anything usable with `Array.from`).\n\n```svelte\n<ul>\n\t{#each items as item}\n\t\t<li>{item.name} x {item.qty}</li>\n\t{/each}\n</ul>\n```\n\nWith index:\n\n```svelte\n{#each items as item, i}\n\t<li>{i + 1}: {item.name} x {item.qty}</li>\n{/each}\n```\n\n## Keyed each blocks\n\n```svelte\n{#each expression as name (key)}...{/each}\n{#each expression as name, index (key)}...{/each}\n```\n\nKeys uniquely identify items. Svelte uses them to intelligently insert/move/delete items instead of updating in place. Use strings or numbers for keys.\n\n```svelte\n{#each items as item (item.id)}\n\t<li>{item.name} x {item.qty}</li>\n{/each}\n\n{#each items as item, i (item.id)}\n\t<li>{i + 1}: {item.name} x {item.qty}</li>\n{/each}\n```\n\nDestructuring and rest patterns work:\n\n```svelte\n{#each items as { id, name, qty }, i (id)}\n\t<li>{i + 1}: {name} x {qty}</li>\n{/each}\n\n{#each objects as { id, ...rest }}\n\t<li><span>{id}</span><MyComponent {...rest} /></li>\n{/each}\n\n{#each items as [id, ...rest]}\n\t<li><span>{id}</span><MyComponent values={rest} /></li>\n{/each}\n```\n\n## Without an item\n\n```svelte\n{#each expression}...{/each}\n{#each expression, index}...{/each}\n```\n\nRender something `n` times without binding items:\n\n```svelte\n<div class=\"chess-board\">\n\t{#each { length: 8 }, rank}\n\t\t{#each { length: 8 }, file}\n\t\t\t<div class:black={(rank + file) % 2 === 1}></div>\n\t\t{/each}\n\t{/each}\n</div>\n```\n\n## {:else} clause\n\n```svelte\n{#each expression as name}...{:else}...{/each}\n```\n\nRenders when list is empty:\n\n```svelte\n{#each todos as todo}\n\t<p>{todo.text}</p>\n{:else}\n\t<p>No tasks today!</p>\n{/each}\n```",
+		"svelte/key": "# {#key} Block\n\n**Syntax:**\n```svelte\n{#key expression}...{/key}\n```\n\nDestroys and recreates contents when expression changes.\n\n**Reinstantiate components:**\n```svelte\n{#key value}\n\t<Component />\n{/key}\n```\n\n**Replay transitions on value change:**\n```svelte\n{#key value}\n\t<div transition:fade>{value}</div>\n{/key}\n```",
+		"svelte/await": "# {#await} Block\n\nHandles the three states of a Promise: pending, fulfilled, rejected.\n\n## Syntax Variants\n\n```svelte\n{#await expression}...{:then name}...{:catch name}...{/await}\n{#await expression}...{:then name}...{/await}\n{#await expression then name}...{/await}\n{#await expression catch name}...{/await}\n```\n\n## Full Example\n\n```svelte\n{#await promise}\n\t<!-- promise is pending -->\n\t<p>waiting for the promise to resolve...</p>\n{:then value}\n\t<!-- promise was fulfilled or not a Promise -->\n\t<p>The value is {value}</p>\n{:catch error}\n\t<!-- promise was rejected -->\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\n## Gotchas\n\n- **SSR**: Only pending branch renders on server\n- **Non-Promise**: If expression isn't a Promise, only `:then` branch renders (including SSR)\n\n## Shorthand Patterns\n\n**Omit catch block:**\n```svelte\n{#await promise then value}\n\t<p>The value is {value}</p>\n{/await}\n```\n\n**Omit then block (error only):**\n```svelte\n{#await promise catch error}\n\t<p>The error is {error}</p>\n{/await}\n```\n\n## Lazy Component Loading\n\n```svelte\n{#await import('./Component.svelte') then { default: Component }}\n\t<Component />\n{/await}\n```",
+		"svelte/snippet": "# Snippets\n\nReusable chunks of markup inside components. Alternative to duplicative code.\n\n## Syntax\n\n```svelte\n{#snippet name()}...{/snippet}\n```\n\n```svelte\n{#snippet name(param1, param2, paramN)}...{/snippet}\n```\n\n## Basic Usage\n\n```svelte\n{#snippet figure(image)}\n\t<figure>\n\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t<figcaption>{image.caption}</figcaption>\n\t</figure>\n{/snippet}\n\n{#each images as image}\n\t{#if image.href}\n\t\t<a href={image.href}>\n\t\t\t{@render figure(image)}\n\t\t</a>\n\t{:else}\n\t\t{@render figure(image)}\n\t{/if}\n{/each}\n```\n\n- Arbitrary number of parameters with default values\n- Can destructure parameters\n- **Cannot** use rest parameters\n\n## Scope\n\nSnippets reference values from `<script>` or `{#each}` blocks:\n\n```svelte\n<script>\n\tlet { message = `it's great to see you!` } = $props();\n</script>\n\n{#snippet hello(name)}\n\t<p>hello {name}! {message}!</p>\n{/snippet}\n\n{@render hello('alice')}\n{@render hello('bob')}\n```\n\nVisible to siblings and children of siblings only:\n\n```svelte\n<div>\n\t{#snippet x()}\n\t\t{#snippet y()}...{/snippet}\n\t\t{@render y()} <!-- fine -->\n\t{/snippet}\n\t\n\t{@render y()} <!-- error: not in scope -->\n</div>\n\n{@render x()} <!-- error: not in scope -->\n```\n\nSnippets can reference themselves (recursion):\n\n```svelte\n{#snippet countdown(n)}\n\t{#if n > 0}\n\t\t<span>{n}...</span>\n\t\t{@render countdown(n - 1)}\n\t{:else}\n\t\t{@render blastoff()}\n\t{/if}\n{/snippet}\n```\n\n## Passing to Components\n\n### Explicit props\n\n```svelte\n<script>\n\timport Table from './Table.svelte';\n\tconst fruits = [\n\t\t{ name: 'apples', qty: 5, price: 2 },\n\t\t{ name: 'bananas', qty: 10, price: 1 }\n\t];\n</script>\n\n{#snippet header()}\n\t<th>fruit</th>\n\t<th>qty</th>\n\t<th>price</th>\n{/snippet}\n\n{#snippet row(d)}\n\t<td>{d.name}</td>\n\t<td>{d.qty}</td>\n\t<td>{d.price}</td>\n{/snippet}\n\n<Table data={fruits} {header} {row} />\n```\n\n### Implicit props\n\nSnippets declared inside component tags become props:\n\n```svelte\n<Table data={fruits}>\n\t{#snippet header()}\n\t\t<th>fruit</th>\n\t\t<th>qty</th>\n\t{/snippet}\n\n\t{#snippet row(d)}\n\t\t<td>{d.name}</td>\n\t\t<td>{d.qty}</td>\n\t{/snippet}\n</Table>\n```\n\n### Implicit `children` snippet\n\nContent not in snippet declarations becomes `children`:\n\n```svelte\n<!--- file: App.svelte --->\n<Button>click me</Button>\n```\n\n```svelte\n<!--- file: Button.svelte --->\n<script>\n\tlet { children } = $props();\n</script>\n\n<button>{@render children()}</button>\n```\n\n> **Note:** Avoid props named `children` if you have content inside component tags\n\n## Optional Snippets\n\nOptional chaining:\n\n```svelte\n<script>\n    let { children } = $props();\n</script>\n\n{@render children?.()}\n```\n\nWith fallback:\n\n```svelte\n{#if children}\n    {@render children()}\n{:else}\n    fallback content\n{/if}\n```\n\n## TypeScript\n\n```svelte\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\n\tinterface Props {\n\t\tdata: any[];\n\t\tchildren: Snippet;\n\t\trow: Snippet<[any]>;\n\t}\n\n\tlet { data, children, row }: Props = $props();\n</script>\n```\n\nWith generics:\n\n```svelte\n<script lang=\"ts\" generics=\"T\">\n\timport type { Snippet } from 'svelte';\n\n\tlet {\n\t\tdata,\n\t\tchildren,\n\t\trow\n\t}: {\n\t\tdata: T[];\n\t\tchildren: Snippet;\n\t\trow: Snippet<[T]>;\n\t} = $props();\n</script>\n```\n\n## Exporting Snippets\n\nTop-level snippets can be exported (Svelte 5.5+):\n\n```svelte\n<script module>\n\texport { add };\n</script>\n\n{#snippet add(a, b)}\n\t{a} + {b} = {a + b}\n{/snippet}\n```\n\n**Restriction:** Cannot reference non-module `<script>` declarations\n\n## Advanced\n\n- Programmatic creation: [`createRawSnippet`](svelte#createRawSnippet) API\n- Snippets replace deprecated Svelte 4 slots",
+		"svelte/@render": "# {@render}\n\nRenders a [snippet](snippet) using `{@render ...}` tag.\n\n## Basic usage\n\n```svelte\n{#snippet sum(a, b)}\n\t<p>{a} + {b} = {a + b}</p>\n{/snippet}\n\n{@render sum(1, 2)}\n{@render sum(3, 4)}\n{@render sum(5, 6)}\n```\n\nExpression can be an identifier or any JavaScript expression:\n\n```svelte\n{@render (cool ? coolSnippet : lameSnippet)()}\n```\n\n## Optional snippets\n\nUse optional chaining for potentially undefined snippets (e.g., props):\n\n```svelte\n{@render children?.()}\n```\n\nOr use `{#if}` with `:else` for fallback content:\n\n```svelte\n{#if children}\n\t{@render children()}\n{:else}\n\t<p>fallback content</p>\n{/if}\n```",
+		"svelte/@html": "# {@html} Tag\n\nInject raw HTML into components:\n\n```svelte\n<article>\n\t{@html content}\n</article>\n```\n\n**Security:** Escape or control all values to prevent XSS attacks. Never render unsanitized content.\n\n**Limitations:**\n- Expression must be valid standalone HTML (can't split tags)\n- Does not compile Svelte code\n\n## Styling\n\n`{@html}` content is invisible to scoped styles. Use `:global` modifier:\n\n```svelte\n<style>\n\tarticle :global {\n\t\ta { color: hotpink }\n\t\timg { width: 100% }\n\t}\n</style>\n```",
+		"svelte/@attach": "# Attachments\n\nFunctions that run in an effect when an element mounts or when state updates. Can return a cleanup function.\n\n**Available in Svelte 5.29+**\n\n## Basic usage\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {import('svelte/attachments').Attachment} */\n\tfunction myAttachment(element) {\n\t\tconsole.log(element.nodeName); // 'DIV'\n\n\t\treturn () => {\n\t\t\tconsole.log('cleaning up');\n\t\t};\n\t}\n</script>\n\n<div {@attach myAttachment}>...</div>\n```\n\nElements can have multiple attachments.\n\n## Attachment factories\n\nFunctions that return attachments:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport tippy from 'tippy.js';\n\n\tlet content = $state('Hello!');\n\n\t/**\n\t * @param {string} content\n\t * @returns {import('svelte/attachments').Attachment}\n\t */\n\tfunction tooltip(content) {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<button {@attach tooltip(content)}>\n\tHover me\n</button>\n```\n\nAttachment recreates when `content` changes or any state read inside the attachment function changes.\n\n## Inline attachments\n\n```svelte\n<!--- file: App.svelte --->\n<canvas\n\twidth={32}\n\theight={32}\n\t{@attach (canvas) => {\n\t\tconst context = canvas.getContext('2d');\n\n\t\t$effect(() => {\n\t\t\tcontext.fillStyle = color;\n\t\t\tcontext.fillRect(0, 0, canvas.width, canvas.height);\n\t\t});\n\t}}\n></canvas>\n```\n\nNested effect runs when `color` changes; outer effect runs once.\n\n## Passing to components\n\n`{@attach ...}` creates a Symbol-keyed prop. Spreading props onto an element passes attachments through:\n\n```svelte\n<!--- file: Button.svelte --->\n<script>\n\t/** @type {import('svelte/elements').HTMLButtonAttributes} */\n\tlet { children, ...props } = $props();\n</script>\n\n<!-- `props` includes attachments -->\n<button {...props}>\n\t{@render children?.()}\n</button>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport tippy from 'tippy.js';\n\timport Button from './Button.svelte';\n\n\tlet content = $state('Hello!');\n\n\t/**\n\t * @param {string} content\n\t * @returns {import('svelte/attachments').Attachment}\n\t */\n\tfunction tooltip(content) {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<Button {@attach tooltip(content)}>\n\tHover me\n</Button>\n```\n\n## Controlling re-runs\n\nAttachments are fully reactive: `{@attach foo(bar)}` re-runs on changes to `foo`, `bar`, or any state read inside `foo`.\n\nTo avoid expensive re-runs, pass data in a function and read it in a child effect:\n\n```js\n// @errors: 7006 2304 2552\nfunction foo(getBar) {\n\treturn (node) => {\n\t\tveryExpensiveSetupWork(node);\n\n\t\t$effect(() => {\n\t\t\tupdate(node, getBar());\n\t\t});\n\t}\n}\n```\n\n## Programmatic creation\n\nUse [`createAttachmentKey`](svelte-attachments#createAttachmentKey) to add attachments to objects for spreading.\n\n## Converting actions\n\nUse [`fromAction`](svelte-attachments#fromAction) to convert actions to attachments.",
+		"svelte/@const": "# {@const}\n\nDefines a local constant within a block.\n\n```svelte\n{#each boxes as box}\n\t{@const area = box.width * box.height}\n\t{box.width} * {box.height} = {area}\n{/each}\n```\n\n**Restriction:** Only allowed as immediate child of `{#if}`, `{#each}`, `{#snippet}`, `<Component />`, or `<svelte:boundary>`.",
+		"svelte/@debug": "# {@debug}\n\nLogs variable values when they change and pauses execution if devtools open.\n\n## Usage\n\n```svelte\n<script>\n\tlet user = {\n\t\tfirstname: 'Ada',\n\t\tlastname: 'Lovelace'\n\t};\n</script>\n\n{@debug user}\n\n<h1>Hello {user.firstname}!</h1>\n```\n\n## Syntax Rules\n\n**Accepts:** Comma-separated variable names only\n**Rejects:** Expressions, property access, array indices, operators\n\n```svelte\n<!-- ✓ Valid -->\n{@debug user}\n{@debug user1, user2, user3}\n\n<!-- ✗ Invalid -->\n{@debug user.firstname}\n{@debug myArray[0]}\n{@debug !isReady}\n{@debug typeof user === 'object'}\n```\n\n**No arguments:** `{@debug}` triggers on any state change",
+		"svelte/bind": "# Bindings\n\n`bind:` directive allows data to flow from child to parent (reverse of normal flow).\n\n## Syntax\n\n```svelte\n<input bind:value={value} />\n<input bind:value /> <!-- shorthand when names match -->\n```\n\nSvelte creates event listeners to update bound values. Most bindings are two-way; some are readonly.\n\n## Function Bindings\n\nUse `bind:property={get, set}` for validation/transformation:\n\n```svelte\n<input bind:value={\n\t() => value,\n\t(v) => value = v.toLowerCase()}\n/>\n```\n\nFor readonly bindings, set `get` to `null`:\n\n```svelte\n<div\n\tbind:clientWidth={null, redraw}\n\tbind:clientHeight={null, redraw}\n>...</div>\n```\n\n> Available in Svelte 5.9.0+\n\n## `<input bind:value>`\n\n```svelte\n<script>\n\tlet message = $state('hello');\n</script>\n\n<input bind:value={message} />\n<p>{message}</p>\n```\n\nNumeric inputs (`type=\"number\"` or `type=\"range\"`) coerce to numbers. Empty/invalid inputs are `undefined`.\n\nSince 5.6.0: `defaultValue` attribute sets reset value for forms (takes precedence over empty string). Binding value takes precedence on initial render unless `null`/`undefined`.\n\n```svelte\n<script>\n\tlet value = $state('');\n</script>\n\n<form>\n\t<input bind:value defaultValue=\"not the empty string\">\n\t<input type=\"reset\" value=\"Reset\">\n</form>\n```\n\n## `<input bind:checked>`\n\n```svelte\n<label>\n\t<input type=\"checkbox\" bind:checked={accepted} />\n\tAccept terms and conditions\n</label>\n```\n\nSince 5.6.0: `defaultChecked` sets reset value for forms.\n\n> Use `bind:group` for radio inputs, not `bind:checked`\n\n## `<input bind:indeterminate>`\n\n```svelte\n<script>\n\tlet checked = $state(false);\n\tlet indeterminate = $state(true);\n</script>\n\n<form>\n\t<input type=\"checkbox\" bind:checked bind:indeterminate>\n\n\t{#if indeterminate}\n\t\twaiting...\n\t{:else if checked}\n\t\tchecked\n\t{:else}\n\t\tunchecked\n\t{/if}\n</form>\n```\n\n## `<input bind:group>`\n\n```svelte\n<script>\n\tlet tortilla = $state('Plain');\n\n\t/** @type {string[]} */\n\tlet fillings = $state([]);\n</script>\n\n<!-- grouped radio inputs are mutually exclusive -->\n<label><input type=\"radio\" bind:group={tortilla} value=\"Plain\" /> Plain</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Whole wheat\" /> Whole wheat</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Spinach\" /> Spinach</label>\n\n<!-- grouped checkbox inputs populate an array -->\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Rice\" /> Rice</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Beans\" /> Beans</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Cheese\" /> Cheese</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Guac (extra)\" /> Guac (extra)</label>\n```\n\n> Only works if inputs are in same component\n\n## `<input bind:files>`\n\n```svelte\n<script>\n\tlet files = $state();\n\n\tfunction clear() {\n\t\tfiles = new DataTransfer().files; // null or undefined does not work\n\t}\n</script>\n\n<label for=\"avatar\">Upload a picture:</label>\n<input accept=\"image/png, image/jpeg\" bind:files id=\"avatar\" name=\"avatar\" type=\"file\" />\n<button onclick={clear}>clear</button>\n```\n\nMust use `FileList` objects. Create via `DataTransfer` since `FileList` can't be constructed directly or modified.\n\n## `<select bind:value>`\n\nBinds to `value` property of selected `<option>` (any value type, not just strings):\n\n```svelte\n<select bind:value={selected}>\n\t<option value={a}>a</option>\n\t<option value={b}>b</option>\n\t<option value={c}>c</option>\n</select>\n```\n\n`<select multiple>` binds to array:\n\n```svelte\n<select multiple bind:value={fillings}>\n\t<option>Rice</option>\n\t<option>Beans</option>\n\t<option>Cheese</option>\n\t<option>Guac (extra)</option>\n</select>\n```\n\nUse `selected` attribute for default values (used on form reset). Binding value takes precedence on initial render unless `undefined`.\n\n## `<audio>`\n\n**Two-way bindings:**\n- `currentTime`, `playbackRate`, `paused`, `volume`, `muted`\n\n**Readonly bindings:**\n- `duration`, `buffered`, `seekable`, `seeking`, `ended`, `readyState`, `played`\n\n```svelte\n<audio src={clip} bind:duration bind:currentTime bind:paused></audio>\n```\n\n## `<video>`\n\nSame as `<audio>` plus readonly `videoWidth` and `videoHeight`.\n\n## `<img>`\n\nReadonly: `naturalWidth`, `naturalHeight`\n\n## `<details bind:open>`\n\n```svelte\n<details bind:open={isOpen}>\n\t<summary>How do you comfort a JavaScript bug?</summary>\n\t<p>You console it.</p>\n</details>\n```\n\n## Contenteditable Bindings\n\nElements with `contenteditable` support: `innerHTML`, `innerText`, `textContent`\n\n```svelte\n<div contenteditable=\"true\" bind:innerHTML={html}></div>\n```\n\n## Dimensions\n\nAll visible elements have readonly bindings (measured with `ResizeObserver`):\n- `clientWidth`, `clientHeight`, `offsetWidth`, `offsetHeight`\n- `contentRect`, `contentBoxSize`, `borderBoxSize`, `devicePixelContentBoxSize`\n\n```svelte\n<div bind:offsetWidth={width} bind:offsetHeight={height}>\n\t<Chart {width} {height} />\n</div>\n```\n\n> `display: inline` elements (except intrinsic dimensions like `<img>`) need different display style. CSS transforms don't trigger callbacks.\n\n## bind:this\n\nGet DOM node reference (available after mount, read in effects/event handlers):\n\n```svelte\n<script>\n\t/** @type {HTMLCanvasElement} */\n\tlet canvas;\n\n\t$effect(() => {\n\t\tconst ctx = canvas.getContext('2d');\n\t\tdrawStuff(ctx);\n\t});\n</script>\n\n<canvas bind:this={canvas}></canvas>\n```\n\nWorks with components too:\n\n```svelte\n<!--- file: App.svelte --->\n<ShoppingCart bind:this={cart} />\n\n<button onclick={() => cart.empty()}> Empty shopping cart </button>\n```\n\n```svelte\n<!--- file: ShoppingCart.svelte --->\n<script>\n\t// All instance exports are available on the instance object\n\texport function empty() {\n\t\t// ...\n\t}\n</script>\n```\n\n> With function bindings, getter is required for proper nullification on destruction.\n\n## Component Property Bindings\n\nBind to component props:\n\n```svelte\n<Keypad bind:value={pin} />\n```\n\nMark properties as bindable with `$bindable()`:\n\n```svelte\n<script>\n\tlet { readonlyProperty, bindableProperty = $bindable() } = $props();\n</script>\n```\n\nBindable properties _can_ use `bind:`, not _must_.\n\nFallback values:\n\n```svelte\n<script>\n\tlet { bindableProperty = $bindable('fallback value') } = $props();\n</script>\n```\n\nFallback only applies when not bound. When bound with fallback, parent must provide non-`undefined` value or runtime error occurs.",
+		"svelte/use": "# Actions\n\n> **Note:** Svelte 5.29+ recommends using [attachments](@attach) instead for better flexibility and composability.\n\nActions are functions called when an element mounts. Added with `use:` directive. Typically use `$effect` for cleanup on unmount:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {import('svelte/action').Action} */\n\tfunction myaction(node) {\n\t\t// node mounted in DOM\n\n\t\t$effect(() => {\n\t\t\t// setup goes here\n\n\t\t\treturn () => {\n\t\t\t\t// teardown goes here\n\t\t\t};\n\t\t});\n\t}\n</script>\n\n<div use:myaction>...</div>\n```\n\n## With Arguments\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {import('svelte/action').Action} */\n\tfunction myaction(node, data) {\n\t\t// ...\n\t}\n</script>\n\n<div use:myaction={data}>...</div>\n```\n\n**Key:** Action called once on mount (not SSR). Does NOT re-run if argument changes.\n\n## Typing\n\n`Action<NodeType, Parameter, CustomEvents>`:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/**\n\t * @type {import('svelte/action').Action<\n\t * \tHTMLDivElement,\n\t * \tundefined,\n\t * \t{\n\t * \t\tonswiperight: (e: CustomEvent) => void;\n\t * \t\tonswipeleft: (e: CustomEvent) => void;\n\t * \t\t// ...\n\t * \t}\n\t * >}\n\t */\n\tfunction gestures(node) {\n\t\t$effect(() => {\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swipeleft'));\n\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swiperight'));\n\t\t});\n\t}\n</script>\n\n<div\n\tuse:gestures\n\tonswipeleft={next}\n\tonswiperight={prev}\n>...</div>\n```",
+		"svelte/transition": "# Transitions\n\nTransitions trigger when elements enter/leave the DOM due to state changes. Use `transition:` directive for bidirectional transitions.\n\n```svelte\n<script>\n\timport { fade } from 'svelte/transition';\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>toggle</button>\n\n{#if visible}\n\t<div transition:fade>fades in and out</div>\n{/if}\n```\n\n**Key behavior:** When a block transitions out, all elements inside remain in DOM until all transitions complete.\n\n## Local vs Global\n\n**Local (default):** Transitions play only when their own block is created/destroyed.\n\n**Global:** Transitions play when any parent block changes.\n\n```svelte\n{#if x}\n\t{#if y}\n\t\t<p transition:fade>fades in and out only when y changes</p>\n\n\t\t<p transition:fade|global>fades in and out when x or y change</p>\n\t{/if}\n{/if}\n```\n\n## Built-in Transitions\n\nImport from `svelte/transition` module.\n\n## Parameters\n\nPass parameters using object literal:\n\n```svelte\n{#if visible}\n\t<div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div>\n{/if}\n```\n\n## Custom Transition Functions\n\n```js\ntransition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {\n\tdelay?: number,\n\tduration?: number,\n\teasing?: (t: number) => number,\n\tcss?: (t: number, u: number) => string,\n\ttick?: (t: number, u: number) => void\n}\n```\n\n**`css` function:** Generates web animation keyframes. `t` = `0` to `1` (after easing), `u` = `1 - t`. For _in_ transitions: `0`→`1`. For _out_: `1`→`0`. Value `1` = element's natural state.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { elasticOut } from 'svelte/easing';\n\n\t/** @type {boolean} */\n\texport let visible;\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ delay?: number, duration?: number, easing?: (t: number) => number }} params\n\t */\n\tfunction whoosh(node, params) {\n\t\tconst existingTransform = getComputedStyle(node).transform.replace('none', '');\n\n\t\treturn {\n\t\t\tdelay: params.delay || 0,\n\t\t\tduration: params.duration || 400,\n\t\t\teasing: params.easing || elasticOut,\n\t\t\tcss: (t, u) => `transform: ${existingTransform} scale(${t})`\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<div in:whoosh>whooshes in</div>\n{/if}\n```\n\n**`tick` function:** Called during transition with same `t`/`u` arguments. Prefer `css` over `tick` - web animations run off main thread.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\texport let visible = false;\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ speed?: number }} params\n\t */\n\tfunction typewriter(node, { speed = 1 }) {\n\t\tconst valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;\n\n\t\tif (!valid) {\n\t\t\tthrow new Error(`This transition only works on elements with a single text node child`);\n\t\t}\n\n\t\tconst text = node.textContent;\n\t\tconst duration = text.length / (speed * 0.01);\n\n\t\treturn {\n\t\t\tduration,\n\t\t\ttick: (t) => {\n\t\t\t\tconst i = ~~(text.length * t);\n\t\t\t\tnode.textContent = text.slice(0, i);\n\t\t\t}\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>\n{/if}\n```\n\n**Returning a function:** Enables crossfade effects by coordinating multiple transitions (called in next microtask).\n\n**`options` parameter:** Contains `direction` (`'in'`, `'out'`, or `'both'`).\n\n## Transition Events\n\nElements with transitions dispatch:\n- `introstart`\n- `introend`\n- `outrostart`\n- `outroend`\n\n```svelte\n{#if visible}\n\t<p\n\t\ttransition:fly={{ y: 200, duration: 2000 }}\n\t\tonintrostart={() => (status = 'intro started')}\n\t\tonoutrostart={() => (status = 'outro started')}\n\t\tonintroend={() => (status = 'intro ended')}\n\t\tonoutroend={() => (status = 'outro ended')}\n\t>\n\t\tFlies in and out\n\t</p>\n{/if}\n```",
+		"svelte/in-and-out": "# `in:` and `out:` Directives\n\nSeparate directives for enter/exit transitions. Unlike `transition:`, these are **not bidirectional** — `in` and `out` play simultaneously if block is toggled during transition.\n\n```svelte\n<script>\n  import { fade, fly } from 'svelte/transition';\n  \n  let visible = $state(false);\n</script>\n\n<label>\n  <input type=\"checkbox\" bind:checked={visible}>\n  visible\n</label>\n\n{#if visible}\n\t<div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>\n{/if}\n```\n\n**Key difference**: If `out` transition is aborted, transitions restart from scratch (no reversal).",
+		"svelte/animate": "# Animations\n\nAnimations trigger when contents of a **keyed each block** are re-ordered. They do NOT run on add/remove, only when existing item indices change. Must be on immediate child of keyed each block.\n\n## Basic Usage\n\n```svelte\n<!-- When `list` is reordered the animation will run -->\n{#each list as item, index (item)}\n\t<li animate:flip>{item}</li>\n{/each}\n```\n\n## Animation Parameters\n\n```svelte\n{#each list as item, index (item)}\n\t<li animate:flip={{ delay: 500 }}>{item}</li>\n{/each}\n```\n\n## Custom Animation Functions\n\n**Signature:**\n```js\nanimation = (node: HTMLElement, { from: DOMRect, to: DOMRect }, params: any) => {\n\tdelay?: number,\n\tduration?: number,\n\teasing?: (t: number) => number,\n\tcss?: (t: number, u: number) => string,\n\ttick?: (t: number, u: number) => void\n}\n```\n\n- `from`: DOMRect at start position\n- `to`: DOMRect at end position (after reorder)\n- `t`: eased value from 0→1\n- `u`: equals `1 - t`\n\n### Using `css` (preferred)\n\nCreates web animation that runs off main thread.\n\n```svelte\n<script>\n\timport { cubicOut } from 'svelte/easing';\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ from: DOMRect; to: DOMRect }} states\n\t * @param {any} params\n\t */\n\tfunction whizz(node, { from, to }, params) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\tcss: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```\n\n### Using `tick`\n\nRuns during animation. Use `css` when possible to avoid jank.\n\n```svelte\n<script>\n\timport { cubicOut } from 'svelte/easing';\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ from: DOMRect; to: DOMRect }} states\n\t * @param {any} params\n\t */\n\tfunction whizz(node, { from, to }, params) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\ttick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```",
+		"svelte/style": "# style: directive\n\nShorthand for setting styles on elements.\n\n## Basic Usage\n\n```svelte\n<!-- These are equivalent -->\n<div style:color=\"red\">...</div>\n<div style=\"color: red;\">...</div>\n```\n\n## With Expressions\n\n```svelte\n<div style:color={myColor}>...</div>\n```\n\n## Shorthand Form\n\n```svelte\n<div style:color>...</div>\n```\n\n## Multiple Styles\n\n```svelte\n<div style:color style:width=\"12rem\" style:background-color={darkMode ? 'black' : 'white'}>...</div>\n```\n\n## Important Modifier\n\n```svelte\n<div style:color|important=\"red\">...</div>\n```\n\n## Precedence\n\n`style:` directives always take precedence over `style` attributes, even over `!important`:\n\n```svelte\n<div style:color=\"red\" style=\"color: blue\">This will be red</div>\n<div style:color=\"red\" style=\"color: blue !important\">This will still be red</div>\n```",
+		"svelte/class": "# Classes\n\n## `class` Attribute\n\n### Primitive values\n```svelte\n<div class={large ? 'large' : 'small'}>...</div>\n```\n\n**Note:** Falsy values are stringified (`class=\"false\"`), except `undefined`/`null` which omit the attribute.\n\n### Objects (Svelte 5.16+)\nTruthy keys are added as classes:\n\n```svelte\n<script>\n\tlet { cool } = $props();\n</script>\n\n<!-- results in `class=\"cool\"` if `cool` is truthy,\n     `class=\"lame\"` otherwise -->\n<div class={{ cool, lame: !cool }}>...</div>\n```\n\n### Arrays (Svelte 5.16+)\nTruthy values are combined:\n\n```svelte\n<!-- if `faded` and `large` are both truthy, results in\n     `class=\"saturate-0 opacity-50 scale-200\"` -->\n<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>\n```\n\nArrays can contain nested arrays/objects (flattened via [clsx](https://github.com/lukeed/clsx)). Useful for combining local classes with props:\n\n```svelte\n<!--- file: Button.svelte --->\n<script>\n\tlet props = $props();\n</script>\n\n<button {...props} class={['cool-button', props.class]}>\n\t{@render props.children?.()}\n</button>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Button from './Button.svelte';\n\tlet useTailwind = $state(false);\n</script>\n\n<Button\n\tonclick={() => useTailwind = true}\n\tclass={{ 'bg-blue-700 sm:w-1/2': useTailwind }}\n>\n\tAccept the inevitability of Tailwind\n</Button>\n```\n\n### TypeScript (Svelte 5.19+)\nUse `ClassValue` type for component props:\n\n```svelte\n<script lang=\"ts\">\n\timport type { ClassValue } from 'svelte/elements';\n\n\tconst props: { class: ClassValue } = $props();\n</script>\n\n<div class={['original', props.class]}>...</div>\n```\n\n## `class:` Directive (Legacy)\n\nConditional classes (pre-5.16 approach):\n\n```svelte\n<!-- These are equivalent -->\n<div class={{ cool, lame: !cool }}>...</div>\n<div class:cool={cool} class:lame={!cool}>...</div>\n```\n\nShorthand when name matches value:\n\n```svelte\n<div class:cool class:lame={!cool}>...</div>\n```\n\n**Note:** Prefer `class` attribute over `class:` directive (more powerful and composable).",
+		"svelte/await-expressions": "# Async `await` in Components\n\n**Experimental feature (Svelte 5.36+)** - opt in via config:\n\n```js\n/// file: svelte.config.js\nexport default {\n\tcompilerOptions: {\n\t\texperimental: {\n\t\t\tasync: true\n\t\t}\n\t}\n};\n```\n\nFlag removed in Svelte 6.\n\n## Usage\n\nUse `await` in three places:\n- Top level of `<script>`\n- Inside `$derived(...)` declarations\n- Inside markup\n\n## Synchronized Updates\n\nState changes wait for async work to complete before UI updates, preventing inconsistent states:\n\n```svelte\n<script>\n\tlet a = $state(1);\n\tlet b = $state(2);\n\n\tasync function add(a, b) {\n\t\tawait new Promise((f) => setTimeout(f, 500)); // artificial delay\n\t\treturn a + b;\n\t}\n</script>\n\n<input type=\"number\" bind:value={a}>\n<input type=\"number\" bind:value={b}>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n```\n\nIncrementing `a` won't show `2 + 2 = 3`, waits to show `2 + 2 = 4`. Fast updates can overtake slow ones.\n\n## Concurrency\n\nIndependent `await` expressions run in parallel:\n\n```svelte\n<p>{await one()}</p>\n<p>{await two()}</p>\n```\n\nBoth functions run simultaneously. Sequential `await` in `<script>` runs normally. Independent `$derived` expressions update independently:\n\n```js\n// these will run sequentially the first time,\n// but will update independently\nlet a = $derived(await one());\nlet b = $derived(await two());\n```\n\n> **Note:** Expect [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning\n\n## Loading States\n\n**Initial loading:** Use `<svelte:boundary>` with `pending` snippet (shown only on first load, not updates).\n\n**Subsequent updates:** Use `$effect.pending()` for spinners/indicators.\n\n**Wait for completion:** Use `settled()`:\n\n```js\nimport { tick, settled } from 'svelte';\n\nasync function onclick() {\n\tupdating = true;\n\n\t// without this, the change to `updating` will be\n\t// grouped with the other changes, meaning it\n\t// won't be reflected in the UI\n\tawait tick();\n\n\tcolor = 'octarine';\n\tanswer = 42;\n\n\tawait settled();\n\n\t// any updates affected by `color` or `answer`\n\t// have now been applied\n\tupdating = false;\n}\n```\n\n## Error Handling\n\nErrors bubble to nearest [error boundary](svelte-boundary).\n\n## SSR\n\nAwait `render()` for async SSR:\n\n```js\n/// file: server.js\nimport { render } from 'svelte/server';\nimport App from './App.svelte';\n\nconst { head, body } = await render(App);\n```\n\nBoundaries with `pending` snippets render that snippet during SSR. Other `await` expressions resolve before `render()` returns.\n\n## Caveats\n\n- Experimental: breaking changes possible outside semver major\n- Effect order changes: block effects (`{#if}`, `{#each}`) now run before `$effect.pre`/`beforeUpdate` in same component",
+		"svelte/scoped-styles": "# Styles\n\nComponent `<style>` elements are **scoped by default** via a hash-based class (e.g. `svelte-123xyz`).\n\n```svelte\n<style>\n\tp {\n\t\t/* this will only affect <p> elements in this component */\n\t\tcolor: burlywood;\n\t}\n</style>\n```\n\n## Specificity\n\nScoped selectors get **+0-1-0 specificity** from the scoping class. Component `p` selector beats global `p` selector, even if global loads later.\n\nMultiple scoping classes use `:where(.svelte-xyz123)` after the first to avoid further specificity increases.\n\n## Scoped keyframes\n\n`@keyframes` names are hashed per-component. `animation` rules automatically adjusted.\n\n```svelte\n<style>\n\t.bouncy {\n\t\tanimation: bounce 10s;\n\t}\n\n\t/* these keyframes are only accessible inside this component */\n\t@keyframes bounce {\n\t\t/* ... */\n\t}\n</style>\n```",
+		"svelte/global-styles": "# Global Styles\n\n## `:global(...)` modifier\n\nApply styles to a single selector globally:\n\n```svelte\n<style>\n\t:global(body) {\n\t\t/* applies to <body> */\n\t\tmargin: 0;\n\t}\n\n\tdiv :global(strong) {\n\t\t/* applies to all <strong> elements, in any component,\n\t\t   that are inside <div> elements belonging\n\t\t   to this component */\n\t\tcolor: goldenrod;\n\t}\n\n\tp:global(.big.red) {\n\t\t/* applies to all <p> elements belonging to this component\n\t\t   with `class=\"big red\"`, even if it is applied\n\t\t   programmatically (for example by a library) */\n\t}\n</style>\n```\n\n**Global keyframes:** Prepend with `-global-`, which gets removed at compile time:\n\n```svelte\n<style>\n\t@keyframes -global-my-animation-name {\n\t\t/* code goes here */\n\t}\n</style>\n```\n\n## `:global {...}` block\n\nApply styles to multiple selectors globally:\n\n```svelte\n<style>\n\t:global {\n\t\t/* applies to every <div> in your application */\n\t\tdiv { ... }\n\n\t\t/* applies to every <p> in your application */\n\t\tp { ... }\n\t}\n\n\t.a :global {\n\t\t/* applies to every `.b .c .d` element, in any component,\n\t\t   that is inside an `.a` element in this component */\n\t\t.b .c .d {...}\n\t}\n</style>\n```",
+		"svelte/custom-properties": "# CSS Custom Properties\n\nPass CSS custom properties (static or dynamic) to components:\n\n```svelte\n<Slider\n\tbind:value\n\tmin={0}\n\tmax={100}\n\t--track-color=\"black\"\n\t--thumb-color=\"rgb({r} {g} {b})\"\n/>\n```\n\n**Desugars to:**\n\n```svelte\n<svelte-css-wrapper style=\"display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})\">\n\t<Slider\n\t\tbind:value\n\t\tmin={0}\n\t\tmax={100}\n\t/>\n</svelte-css-wrapper>\n```\n\nFor SVG elements, uses `<g>` instead:\n\n```svelte\n<g style=\"--track-color: black; --thumb-color: rgb({r} {g} {b})\">\n\t<Slider\n\t\tbind:value\n\t\tmin={0}\n\t\tmax={100}\n\t/>\n</g>\n```\n\n**Inside component, use `var()` with fallbacks:**\n\n```svelte\n<style>\n\t.track {\n\t\tbackground: var(--track-color, #aaa);\n\t}\n\n\t.thumb {\n\t\tbackground: var(--thumb-color, blue);\n\t}\n</style>\n```\n\nProperties don't need to be on the component directly—they inherit from parent elements. Common pattern: define on `:root` in global stylesheet.\n\n**Gotcha:** Wrapper element affects CSS selectors using `>` combinator.",
+		"svelte/nested-style-elements": "# Component Styles\n\n## Top-level `<style>` tag\n\n- Only **one** top-level `<style>` tag allowed per component\n- Top-level styles are scoped and processed\n\n## Nested `<style>` tags\n\n- `<style>` tags can be nested inside elements or logic blocks\n- **No scoping or processing** - inserted as-is into DOM\n- Styles apply globally\n\n```svelte\n<div>\n\t<style>\n\t\t/* this style tag will be inserted as-is */\n\t\tdiv {\n\t\t\t/* this will apply to all `<div>` elements in the DOM */\n\t\t\tcolor: red;\n\t\t}\n\t</style>\n</div>\n```",
+		"svelte/svelte-boundary": "# `<svelte:boundary>`\n\n```svelte\n<svelte:boundary onerror={handler}>...</svelte:boundary>\n```\n\n**Added in 5.3.0**\n\nBoundaries isolate parts of your app to:\n- Show UI while `await` expressions resolve\n- Catch rendering/effect errors and show fallback UI\n\n**Key limitation:** Only catches errors during rendering and at top level of `$effect` inside the boundary. Does NOT catch errors in event handlers or async callbacks.\n\nWhen a boundary handles an error, existing content is removed.\n\n## Properties\n\n### `pending`\n\nShows while `await` expressions first resolve:\n\n```svelte\n<svelte:boundary>\n\t<p>{await delayed('hello!')}</p>\n\n\t{#snippet pending()}\n\t\t<p>loading...</p>\n\t{/snippet}\n</svelte:boundary>\n```\n\nOnly shows on initial load. For subsequent updates, use `$effect.pending()`.\n\n### `failed`\n\nRenders when error occurs. Receives `error` and `reset` function:\n\n```svelte\n<svelte:boundary>\n\t<FlakyComponent />\n\n\t{#snippet failed(error, reset)}\n\t\t<button onclick={reset}>oops! try again</button>\n\t{/snippet}\n</svelte:boundary>\n```\n\nCan be passed explicitly as property or declared inline.\n\n### `onerror`\n\nFunction called with `error` and `reset` arguments. Useful for error tracking or managing error state externally:\n\n```svelte\n<script>\n\tlet error = $state(null);\n\tlet reset = $state(() => {});\n\n\tfunction onerror(e, r) {\n\t\terror = e;\n\t\treset = r;\n\t}\n</script>\n\n<svelte:boundary {onerror}>\n\t<FlakyComponent />\n</svelte:boundary>\n\n{#if error}\n\t<button onclick={() => {\n\t\terror = null;\n\t\treset();\n\t}}>\n\t\toops! try again\n\t</button>\n{/if}\n```\n\nErrors in `onerror` bubble to parent boundary if it exists.",
+		"svelte/svelte-window": "# `<svelte:window>`\n\nAdd event listeners to `window` without cleanup or SSR checks.\n\n**Syntax:**\n```svelte\n<svelte:window onevent={handler} />\n<svelte:window bind:prop={value} />\n```\n\n**Rules:**\n- Must be at top level (not inside blocks/elements)\n\n## Event Listeners\n\n```svelte\n<script>\n\tfunction handleKeydown(event) {\n\t\talert(`pressed the ${event.key} key`);\n\t}\n</script>\n\n<svelte:window onkeydown={handleKeydown} />\n```\n\n## Bindable Properties\n\n**Readonly:**\n- `innerWidth`, `innerHeight`\n- `outerWidth`, `outerHeight`\n- `online` (alias for `window.navigator.onLine`)\n- `devicePixelRatio`\n\n**Writable:**\n- `scrollX`, `scrollY`\n\n```svelte\n<svelte:window bind:scrollY={y} />\n```\n\n**Gotcha:** Initial binding values don't trigger scrolling (accessibility). Only subsequent changes scroll. To scroll on render, use `scrollTo()` in `$effect`.",
+		"svelte/svelte-document": "# `<svelte:document>`\n\nAdd event listeners and actions to `document`. Bind to document properties.\n\n## Syntax\n\n```svelte\n<svelte:document onevent={handler} />\n```\n\n```svelte\n<svelte:document bind:prop={value} />\n```\n\n## Usage\n\n- Handles events that fire on `document` but not `window` (e.g., `visibilitychange`)\n- Supports [actions](use)\n- **Must be at top level** (not inside blocks or elements)\n\n```svelte\n<svelte:document onvisibilitychange={handleVisibilityChange} use:someAction />\n```\n\n## Bindable Properties (readonly)\n\n- `activeElement`\n- `fullscreenElement`\n- `pointerLockElement`\n- `visibilityState`",
+		"svelte/svelte-body": "# `<svelte:body>`\n\nAdds event listeners and actions to `document.body`.\n\n**Syntax:**\n```svelte\n<svelte:body onevent={handler} />\n```\n\n**Usage:**\n```svelte\n<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />\n```\n\n**Key points:**\n- Use for events that don't fire on `window` (e.g., `mouseenter`, `mouseleave`)\n- Supports [actions](use)\n- Must be at top level of component (not inside blocks or elements)",
+		"svelte/svelte-head": "# `<svelte:head>`\n\nInserts elements into `document.head`. During SSR, head content is exposed separately from body content.\n\n**Restrictions:**\n- Must be at top level of component\n- Cannot be inside blocks or elements\n\n```svelte\n<svelte:head>\n\t<title>Hello world!</title>\n\t<meta name=\"description\" content=\"This is where the description goes for SEO\" />\n</svelte:head>\n```",
+		"svelte/svelte-element": "# `<svelte:element>`\n\nRenders a dynamic element determined at runtime.\n\n```svelte\n<svelte:element this={expression} />\n```\n\n## Usage\n\nUse when element type is unknown at author time (e.g., from CMS). Properties and event listeners apply to the rendered element.\n\n```svelte\n<script>\n\tlet tag = $state('hr');\n</script>\n\n<svelte:element this={tag}>\n\tThis text cannot appear inside an hr element\n</svelte:element>\n```\n\n## Key Points\n\n- **Only `bind:this` supported** - built-in bindings don't work with generic elements\n- **Nullish values** - if `this` is null/undefined, element and children won't render\n- **Void elements** - runtime error if void element (e.g., `br`, `hr`) has children\n- **Valid DOM tags only** - `#text` or `svelte:head` won't work\n\n## Namespace\n\nExplicitly set namespace when Svelte can't infer:\n\n```svelte\n<svelte:element this={tag} xmlns=\"http://www.w3.org/2000/svg\" />\n```",
+		"svelte/svelte-options": "# `<svelte:options>`\n\n```svelte\n<svelte:options option={value} />\n```\n\nSpecifies per-component compiler options.\n\n## Options\n\n- `runes={true}` — forces runes mode\n- `runes={false}` — forces legacy mode\n- `namespace=\"...\"` — namespace for component: `\"html\"` (default), `\"svg\"`, or `\"mathml\"`\n- `customElement={...}` — options for compiling as custom element. String value sets `tag` option\n- `css=\"injected\"` — injects styles inline: `<style>` tag in `head` during SSR, via JavaScript on client\n\n## Example\n\n```svelte\n<svelte:options customElement=\"my-custom-element\" />\n```",
+		"svelte/stores": "# Stores\n\nA store is an object that allows reactive access to a value via a store contract. The `svelte/store` module provides minimal store implementations.\n\n## `$` Prefix Syntax\n\nAccess store values in components by prefixing with `$`. Svelte auto-subscribes/unsubscribes.\n\n- Store must be declared at top level (not inside `if` blocks or functions)\n- Assignments to `$`-prefixed variables call the store's `.set` method\n- Local variables must NOT have `$` prefix\n\n```svelte\n<script>\n\timport { writable } from 'svelte/store';\n\n\tconst count = writable(0);\n\tconsole.log($count); // logs 0\n\n\tcount.set(1);\n\tconsole.log($count); // logs 1\n\n\t$count = 2;\n\tconsole.log($count); // logs 2\n</script>\n```\n\n## When to Use Stores\n\nIn Svelte 5, runes replace most store use cases:\n\n**Use runes instead:**\n- Extract logic using runes in `.svelte.js`/`.svelte.ts` files\n- Create shared state with `$state` objects\n\n```ts\n/// file: state.svelte.js\nexport const userState = $state({\n\tname: 'name',\n\t/* ... */\n});\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { userState } from './state.svelte.js';\n</script>\n\n<p>User name: {userState.name}</p>\n<button onclick={() => {\n\tuserState.name = 'new name';\n}}>\n\tchange name\n</button>\n```\n\n**Still use stores for:**\n- Complex asynchronous data streams\n- Manual control over updates/subscriptions\n- RxJS integration\n\n## svelte/store API\n\n### `writable`\n\nStore with `set` and `update` methods for external updates.\n\n```js\nimport { writable } from 'svelte/store';\n\nconst count = writable(0);\n\ncount.subscribe((value) => {\n\tconsole.log(value);\n}); // logs '0'\n\ncount.set(1); // logs '1'\ncount.update((n) => n + 1); // logs '2'\n```\n\n**Optional second argument:** Function called when subscribers go from 0→1. Must return cleanup function called when subscribers go 1→0.\n\n```js\nconst count = writable(0, () => {\n\tconsole.log('got a subscriber');\n\treturn () => console.log('no more subscribers');\n});\n\ncount.set(1); // does nothing\n\nconst unsubscribe = count.subscribe((value) => {\n\tconsole.log(value);\n}); // logs 'got a subscriber', then '1'\n\nunsubscribe(); // logs 'no more subscribers'\n```\n\n### `readable`\n\nStore that cannot be set from outside. Takes initial value and setup function (same as `writable` second argument).\n\n```ts\nimport { readable } from 'svelte/store';\n\nconst time = readable(new Date(), (set) => {\n\tset(new Date());\n\n\tconst interval = setInterval(() => {\n\t\tset(new Date());\n\t}, 1000);\n\n\treturn () => clearInterval(interval);\n});\n\nconst ticktock = readable('tick', (set, update) => {\n\tconst interval = setInterval(() => {\n\t\tupdate((sound) => (sound === 'tick' ? 'tock' : 'tick'));\n\t}, 1000);\n\n\treturn () => clearInterval(interval);\n});\n```\n\n### `derived`\n\nDerives store from one or more stores. Runs on first subscription and when dependencies change.\n\n**Synchronous:**\n```ts\nimport { derived } from 'svelte/store';\n\nconst doubled = derived(a, ($a) => $a * 2);\n```\n\n**Asynchronous:** Use `set`/`update` arguments. Third argument is initial value (defaults to `undefined`).\n\n```ts\nconst delayed = derived(\n\ta,\n\t($a, set) => {\n\t\tsetTimeout(() => set($a), 1000);\n\t},\n\t2000\n);\n\nconst delayedIncrement = derived(a, ($a, set, update) => {\n\tset($a);\n\tsetTimeout(() => update((x) => x + 1), 1000);\n});\n```\n\n**Cleanup:** Return function for cleanup on re-run or unsubscribe.\n\n```ts\nconst tick = derived(\n\tfrequency,\n\t($frequency, set) => {\n\t\tconst interval = setInterval(() => {\n\t\t\tset(Date.now());\n\t\t}, 1000 / $frequency);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t},\n\t2000\n);\n```\n\n**Multiple stores:** Pass array as first argument.\n\n```ts\nconst summed = derived([a, b], ([$a, $b]) => $a + $b);\n\nconst delayed = derived([a, b], ([$a, $b], set) => {\n\tsetTimeout(() => set($a + $b), 1000);\n});\n```\n\n### `readonly`\n\nMakes a store readonly while allowing subscriptions.\n\n```js\nimport { readonly, writable } from 'svelte/store';\n\nconst writableStore = writable(1);\nconst readableStore = readonly(writableStore);\n\nreadableStore.subscribe(console.log);\n\nwritableStore.set(2); // console: 2\nreadableStore.set(2); // ERROR\n```\n\n### `get`\n\nRetrieves current value without subscribing. Not recommended in hot code paths.\n\n```ts\nimport { get } from 'svelte/store';\n\nconst value = get(store);\n```\n\n## Store Contract\n\n```ts\nstore = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }\n```\n\nCustom stores must implement:\n\n1. `.subscribe(fn)` - Immediately calls `fn` with current value synchronously. Returns unsubscribe function.\n2. Unsubscribe function stops subscription and prevents future calls.\n3. Optional `.set(value)` - Synchronously calls all active subscriptions (makes it a writable store).\n\n**RxJS compatibility:** `.subscribe` can return object with `.unsubscribe` method.",
+		"svelte/context": "# Context\n\nContext allows components to access values from parent components without prop-drilling.\n\n## Basic Usage\n\nParent sets context with `setContext(key, value)`:\n\n```svelte\n<!--- file: Parent.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\tsetContext('my-context', 'hello from Parent.svelte');\n</script>\n```\n\nChild retrieves with `getContext`:\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst message = getContext('my-context');\n</script>\n\n<h1>{message}, inside Child.svelte</h1>\n```\n\nKey and value can be any JavaScript value.\n\n**Available functions:** `setContext`, `getContext`, `hasContext`, `getAllContexts`\n\n## Context with Reactive State\n\nStore reactive state in context:\n\n```svelte\n<script>\n\timport { setContext } from 'svelte';\n\timport Child from './Child.svelte';\n\n\tlet counter = $state({\n\t\tcount: 0\n\t});\n\n\tsetContext('counter', counter);\n</script>\n\n<button onclick={() => counter.count += 1}>\n\tincrement\n</button>\n\n<Child />\n<Child />\n<Child />\n```\n\n**Gotcha:** Mutate properties, don't reassign:\n\n```svelte\n<!-- ❌ Wrong - breaks the link -->\n<button onclick={() => counter = { count: 0 }}>\n\treset\n</button>\n\n<!-- ✅ Correct -->\n<button onclick={() => counter.count = 0}>\n\treset\n</button>\n```\n\n## Type-Safe Context Pattern\n\nWrap context calls in helper functions:\n\n```js\n/// file: context.js\nimport { getContext, setContext } from 'svelte';\n\nconst key = {};\n\n/** @param {User} user */\nexport function setUserContext(user) {\n\tsetContext(key, user);\n}\n\nexport function getUserContext() {\n\treturn /** @type {User} */ (getContext(key));\n}\n```\n\n## Context vs Global State\n\nGlobal state modules work but have SSR risks:\n\n```js\n/// file: state.svelte.js\nexport const myGlobalState = $state({\n\tuser: {\n\t\t// ...\n\t}\n});\n```\n\n**Problem:** Mutating during SSR can leak data between requests. Context is request-scoped and solves this.",
+		"svelte/lifecycle-hooks": "# Component Lifecycle\n\nIn Svelte 5, lifecycle = creation + destruction. Updates aren't component-level; only affected render effects react to state changes. No \"before/after update\" hooks exist.\n\n## `onMount`\n\nRuns callback when component mounts to DOM. Must be called during component initialization (can be in external module). **Does not run on server.**\n\n```svelte\n<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(() => {\n\t\tconsole.log('the component has mounted');\n\t});\n</script>\n```\n\n**Cleanup:** Return a function to run on unmount.\n\n```svelte\n<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tconsole.log('beep');\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t});\n</script>\n```\n\n> **Note:** Only works with synchronous functions. `async` functions return a `Promise`.\n\n## `onDestroy`\n\nRuns immediately before component unmounts. **Only lifecycle hook that runs server-side.**\n\n```svelte\n<script>\n\timport { onDestroy } from 'svelte';\n\n\tonDestroy(() => {\n\t\tconsole.log('the component is being destroyed');\n\t});\n</script>\n```\n\n## `tick`\n\nReturns promise that resolves after pending state changes apply (or next microtask if none).\n\n```svelte\n<script>\n\timport { tick } from 'svelte';\n\n\t$effect.pre(() => {\n\t\tconsole.log('the component is about to update');\n\t\ttick().then(() => {\n\t\t\t\tconsole.log('the component just updated');\n\t\t});\n\t});\n</script>\n```\n\n## Deprecated: `beforeUpdate` / `afterUpdate`\n\n**Svelte 4 only** (shimmed in Svelte 5, unavailable with runes).\n\n**Use instead:**\n- `$effect.pre` instead of `beforeUpdate`\n- `$effect` instead of `afterUpdate`\n\nRunes offer granular control and only react to relevant changes.\n\n### Example: Chat autoscroll\n\n`$effect.pre` runs before DOM updates. Explicitly reference `messages` to run only when it changes (not when `theme` changes).\n\n```svelte\n<script>\n\timport { tick } from 'svelte';\n\n\tlet theme = $state('dark');\n\tlet messages = $state([]);\n\n\tlet viewport;\n\n\t$effect.pre(() => {\n\t\tmessages;\n\t\tconst autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;\n\n\t\tif (autoscroll) {\n\t\t\ttick().then(() => {\n\t\t\t\tviewport.scrollTo(0, viewport.scrollHeight);\n\t\t\t});\n\t\t}\n\t});\n\n\tfunction handleKeydown(event) {\n\t\tif (event.key === 'Enter') {\n\t\t\tconst text = event.target.value;\n\t\t\tif (!text) return;\n\n\t\t\tmessages = [...messages, text];\n\t\t\tevent.target.value = '';\n\t\t}\n\t}\n\n\tfunction toggle() {\n\t\ttheme = theme === 'dark' ? 'light' : 'dark';\n\t}\n</script>\n\n<div class:dark={theme === 'dark'}>\n\t<div bind:this={viewport}>\n\t\t{#each messages as message}\n\t\t\t<p>{message}</p>\n\t\t{/each}\n\t</div>\n\n\t<input onkeydown={handleKeydown} />\n\n\t<button onclick={toggle}> Toggle dark mode </button>\n</div>\n```",
+		"svelte/imperative-component-api": "# Imperative Component API\n\nRoot components are created imperatively. Client components mount to elements; server components render to HTML strings.\n\n## `mount`\n\nInstantiates and mounts a component to a target element:\n\n```js\n// @errors: 2322\nimport { mount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, {\n\ttarget: document.querySelector('#app'),\n\tprops: { some: 'property' }\n});\n```\n\n**Key differences from Svelte 4:**\n- Effects (including `onMount` and actions) don't run during `mount`\n- Use `flushSync()` to force pending effects to run (e.g., in tests)\n\nCan mount multiple components per page or dynamically within your app.\n\n## `unmount`\n\nUnmounts a component created with `mount` or `hydrate`:\n\n```js\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later\nunmount(app, { outro: true });\n```\n\n- `options.outro: true` plays transitions before removal\n- Returns `Promise` that resolves after transitions (if `outro: true`) or immediately\n\n## `render`\n\nServer-only (requires `server` compile option). Returns `body` and `head` HTML strings:\n\n```js\n// @errors: 2724 2305 2307\nimport { render } from 'svelte/server';\nimport App from './App.svelte';\n\nconst result = render(App, {\n\tprops: { some: 'property' }\n});\nresult.body; // HTML for somewhere in this <body> tag\nresult.head; // HTML for somewhere in this <head> tag\n```\n\n## `hydrate`\n\nLike `mount`, but reuses SSR-rendered HTML and makes it interactive:\n\n```js\n// @errors: 2322\nimport { hydrate } from 'svelte';\nimport App from './App.svelte';\n\nconst app = hydrate(App, {\n\ttarget: document.querySelector('#app'),\n\tprops: { some: 'property' }\n});\n```\n\nEffects don't run during `hydrate` — use `flushSync()` immediately after if needed.",
+		"svelte/testing": "# Testing\n\nSvelte is unopinionated about testing frameworks. Use Vitest, Jasmine, Cypress, Playwright, etc. for unit, integration, and E2E tests.\n\n## Unit and Component Tests with Vitest\n\n### Setup\n\nInstall Vitest:\n```sh\nnpm install -D vitest\n```\n\nConfigure `vite.config.js`:\n```js\n/// file: vite.config.js\nimport { defineConfig } from 'vitest/config';\n\nexport default defineConfig({\n\t// ...\n\t// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node\n\tresolve: process.env.VITEST\n\t\t? {\n\t\t\t\tconditions: ['browser']\n\t\t\t}\n\t\t: undefined\n});\n```\n\n### Unit Tests\n\nTest code in `.js/.ts` files:\n\n```js\n/// file: multiplier.svelte.test.js\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { multiplier } from './multiplier.svelte.js';\n\ntest('Multiplier', () => {\n\tlet double = multiplier(0, 2);\n\n\texpect(double.value).toEqual(0);\n\n\tdouble.set(5);\n\n\texpect(double.value).toEqual(10);\n});\n```\n\n```js\n/// file: multiplier.svelte.js\n/**\n * @param {number} initial\n * @param {number} k\n */\nexport function multiplier(initial, k) {\n\tlet count = $state(initial);\n\n\treturn {\n\t\tget value() {\n\t\t\treturn count * k;\n\t\t},\n\t\t/** @param {number} c */\n\t\tset: (c) => {\n\t\t\tcount = c;\n\t\t}\n\t};\n}\n```\n\n### Using Runes in Tests\n\nUse runes in test files with `.svelte` extension:\n\n```js\n/// file: multiplier.svelte.test.js\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { multiplier } from './multiplier.svelte.js';\n\ntest('Multiplier', () => {\n\tlet count = $state(0);\n\tlet double = multiplier(() => count, 2);\n\n\texpect(double.value).toEqual(0);\n\n\tcount = 5;\n\n\texpect(double.value).toEqual(10);\n});\n```\n\nFor code using effects, wrap tests in `$effect.root`:\n\n```js\n/// file: logger.svelte.test.js\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { logger } from './logger.svelte.js';\n\ntest('Effect', () => {\n\tconst cleanup = $effect.root(() => {\n\t\tlet count = $state(0);\n\n\t\t// logger uses an $effect to log updates of its input\n\t\tlet log = logger(() => count);\n\n\t\t// effects normally run after a microtask,\n\t\t// use flushSync to execute all pending effects synchronously\n\t\tflushSync();\n\t\texpect(log).toEqual([0]);\n\n\t\tcount = 1;\n\t\tflushSync();\n\n\t\texpect(log).toEqual([0, 1]);\n\t});\n\n\tcleanup();\n});\n```\n\n### Component Testing\n\n**Note:** Consider testing logic separately from components when possible.\n\nInstall jsdom:\n```sh\nnpm install -D jsdom\n```\n\nUpdate `vite.config.js`:\n```js\n/// file: vite.config.js\nimport { defineConfig } from 'vitest/config';\n\nexport default defineConfig({\n\tplugins: [\n\t\t/* ... */\n\t],\n\ttest: {\n\t\t// If you are testing components client-side, you need to setup a DOM environment.\n\t\t// If not all your files should have this environment, you can use a\n\t\t// `// @vitest-environment jsdom` comment at the top of the test files instead.\n\t\tenvironment: 'jsdom'\n\t},\n\t// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node\n\tresolve: process.env.VITEST\n\t\t? {\n\t\t\t\tconditions: ['browser']\n\t\t\t}\n\t\t: undefined\n});\n```\n\nBasic component test:\n\n```js\n/// file: component.test.js\nimport { flushSync, mount, unmount } from 'svelte';\nimport { expect, test } from 'vitest';\nimport Component from './Component.svelte';\n\ntest('Component', () => {\n\t// Instantiate the component using Svelte's `mount` API\n\tconst component = mount(Component, {\n\t\ttarget: document.body, // `document` exists because of jsdom\n\t\tprops: { initial: 0 }\n\t});\n\n\texpect(document.body.innerHTML).toBe('<button>0</button>');\n\n\t// Click the button, then flush the changes so you can synchronously write expectations\n\tdocument.body.querySelector('button').click();\n\tflushSync();\n\n\texpect(document.body.innerHTML).toBe('<button>1</button>');\n\n\t// Remove the component from the DOM\n\tunmount(component);\n});\n```\n\nUsing [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/):\n\n```js\n/// file: component.test.js\nimport { render, screen } from '@testing-library/svelte';\nimport userEvent from '@testing-library/user-event';\nimport { expect, test } from 'vitest';\nimport Component from './Component.svelte';\n\ntest('Component', async () => {\n\tconst user = userEvent.setup();\n\trender(Component);\n\n\tconst button = screen.getByRole('button');\n\texpect(button).toHaveTextContent(0);\n\n\tawait user.click(button);\n\texpect(button).toHaveTextContent(1);\n});\n```\n\nFor two-way bindings, context, or snippet props, create wrapper components for tests.\n\n## Component Tests with Storybook\n\nStorybook tests run with Vitest's browser mode in a real browser.\n\nSetup: `npx sv add storybook`\n\nExample with play function:\n\n```svelte\n/// file: LoginForm.stories.svelte\n<script module>\n\timport { defineMeta } from '@storybook/addon-svelte-csf';\n\timport { expect, fn } from 'storybook/test';\n\n\timport LoginForm from './LoginForm.svelte';\n\n\tconst { Story } = defineMeta({\n\t\tcomponent: LoginForm,\n\t\targs: {\n\t\t\t// Pass a mock function to the `onSubmit` prop\n\t\t\tonSubmit: fn(),\n\t\t}\n\t});\n</script>\n \n<Story name=\"Empty Form\" />\n \n<Story\n\tname=\"Filled Form\"\n\tplay={async ({ args, canvas, userEvent }) => {\n\t\t// Simulate a user filling out the form\n\t\tawait userEvent.type(canvas.getByTestId('email'), 'email@provider.com');\n\t\tawait userEvent.type(canvas.getByTestId('password'), 'a-random-password');\n\t\tawait userEvent.click(canvas.getByRole('button'));\n\n\t\t// Run assertions\n\t\tawait expect(args.onSubmit).toHaveBeenCalledTimes(1);\n\t\tawait expect(canvas.getByText('You're in!')).toBeInTheDocument();\n\t}}\n/>\n```\n\n## E2E Tests with Playwright\n\nSetup via Svelte CLI or `npm init playwright`.\n\nConfigure to start app before tests:\n\n```js\n/// file: playwright.config.js\nconst config = {\n\twebServer: {\n\t\tcommand: 'npm run build && npm run preview',\n\t\tport: 4173\n\t},\n\ttestDir: 'tests',\n\ttestMatch: /(.+\\.)?(test|spec)\\.[jt]s/\n};\n\nexport default config;\n```\n\nWrite tests that interact with DOM:\n\n```js\n// @errors: 2307 7031\n/// file: tests/hello-world.spec.js\nimport { expect, test } from '@playwright/test';\n\ntest('home page has expected h1', async ({ page }) => {\n\tawait page.goto('/');\n\tawait expect(page.locator('h1')).toBeVisible();\n});\n```",
+		"svelte/typescript": "# TypeScript in Svelte\n\n## `<script lang=\"ts\">`\n\nAdd `lang=\"ts\"` to use TypeScript:\n\n```svelte\n<script lang=\"ts\">\n\tlet name: string = 'world';\n\n\tfunction greet(name: string) {\n\t\talert(`Hello, ${name}!`);\n\t}\n</script>\n\n<button onclick={(e: Event) => greet(e.target.innerText)}>\n\t{name as string}\n</button>\n```\n\n**Limitation**: Only _type-only_ features supported (types, interfaces). Not supported:\n- Enums\n- `private`/`protected`/`public` with initializers\n- Non-stage-4 ECMAScript features\n\nFor these, use a preprocessor.\n\n## Preprocessor Setup\n\n```ts\n/// file: svelte.config.js\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nconst config = {\n\tpreprocess: vitePreprocess({ script: true })\n};\n\nexport default config;\n```\n\n**Recommended**: Use `npx sv create` (SvelteKit) or `npm create vite@latest` (Vite with `svelte-ts`).\n\n## tsconfig.json\n\nRequired settings:\n- `target`: `ES2015` minimum\n- `verbatimModuleSyntax`: `true`\n- `isolatedModules`: `true`\n\n## Typing `$props`\n\n```svelte\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\n\tinterface Props {\n\t\trequiredProperty: number;\n\t\toptionalProperty?: boolean;\n\t\tsnippetWithStringArgument: Snippet<[string]>;\n\t\teventHandler: (arg: string) => void;\n\t\t[key: string]: unknown;\n\t}\n\n\tlet {\n\t\trequiredProperty,\n\t\toptionalProperty,\n\t\tsnippetWithStringArgument,\n\t\teventHandler,\n\t\t...everythingElse\n\t}: Props = $props();\n</script>\n\n<button onclick={() => eventHandler('clicked button')}>\n\t{@render snippetWithStringArgument('hello')}\n</button>\n```\n\n## Generic `$props`\n\nUse `generics` attribute for type relationships:\n\n```svelte\n<script lang=\"ts\" generics=\"Item extends { text: string }\">\n\tinterface Props {\n\t\titems: Item[];\n\t\tselect(item: Item): void;\n\t}\n\n\tlet { items, select }: Props = $props();\n</script>\n\n{#each items as item}\n\t<button onclick={() => select(item)}>\n\t\t{item.text}\n\t</button>\n{/each}\n```\n\n## Typing Wrapper Components\n\nUse `svelte/elements` types:\n\n```svelte\n<script lang=\"ts\">\n\timport type { HTMLButtonAttributes } from 'svelte/elements';\n\n\tlet { children, ...rest }: HTMLButtonAttributes = $props();\n</script>\n\n<button {...rest}>\n\t{@render children?.()}\n</button>\n```\n\nFor elements without dedicated types:\n\n```svelte\n<script lang=\"ts\">\n\timport type { SvelteHTMLElements } from 'svelte/elements';\n\n\tlet { children, ...rest }: SvelteHTMLElements['div'] = $props();\n</script>\n\n<div {...rest}>\n\t{@render children?.()}\n</div>\n```\n\n## Typing `$state`\n\n```ts\nlet count: number = $state(0);\n```\n\nWithout initial value, type includes `undefined`. Use `as` casting if you know it will be defined:\n\n```ts\nclass Counter {\n\tcount = $state() as number;\n\tconstructor(initial: number) {\n\t\tthis.count = initial;\n\t}\n}\n```\n\n## The `Component` Type\n\nConstrain dynamic components:\n\n```svelte\n<script lang=\"ts\">\n\timport type { Component } from 'svelte';\n\n\tinterface Props {\n\t\tDynamicComponent: Component<{ prop: string }>;\n\t}\n\n\tlet { DynamicComponent }: Props = $props();\n</script>\n\n<DynamicComponent prop=\"foo\" />\n```\n\nExtract props with `ComponentProps`:\n\n```ts\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {}\n\nwithProps(MyComponent, { foo: 'bar' });\n```\n\nConstructor/instance types:\n\n```svelte\n<script lang=\"ts\">\n\timport MyComponent from './MyComponent.svelte';\n\n\tlet componentConstructor: typeof MyComponent = MyComponent;\n\tlet componentInstance: MyComponent;\n</script>\n\n<MyComponent bind:this={componentInstance} />\n```\n\n## Enhancing DOM Types\n\nAugment `svelte/elements` for custom/experimental attributes:\n\n```ts\n/// file: additional-svelte-typings.d.ts\nimport { HTMLButtonAttributes } from 'svelte/elements';\n\ndeclare module 'svelte/elements' {\n\texport interface SvelteHTMLElements {\n\t\t'custom-button': HTMLButtonAttributes;\n\t}\n\n\texport interface HTMLAttributes<T> {\n\t\tglobalattribute?: string;\n\t}\n\n\texport interface HTMLButtonAttributes {\n\t\tveryexperimentalattribute?: string;\n\t}\n}\n\nexport {};\n```\n\nEnsure file is in `tsconfig.json` `include` path.",
+		"svelte/custom-elements": "# Custom Elements (Web Components)\n\nCompile Svelte components to custom elements using `customElement: true` compiler option. Specify tag name with `<svelte:options>`. Access host element via `$host` rune.\n\n```svelte\n<svelte:options customElement=\"my-element\" />\n\n<script>\n\tlet { name = 'world' } = $props();\n</script>\n\n<h1>Hello {name}!</h1>\n<slot />\n```\n\n## Defining Elements\n\nOmit tag name for inner components. Define later using static `element` property:\n\n```js\n// @noErrors\nimport MyElement from './MyElement.svelte';\n\ncustomElements.define('my-element', MyElement.element);\n```\n\n## Usage\n\nUse as regular DOM elements. Props exposed as DOM properties and attributes:\n\n```js\n// @noErrors\nconst el = document.querySelector('my-element');\nconsole.log(el.name);\nel.name = 'everybody';\n```\n\n**Important:** Must explicitly list all props. `let props = $props()` without declaring props in component options won't expose them on DOM element.\n\n## Lifecycle\n\n- Component created in next tick after `connectedCallback`\n- Properties assigned before insertion are saved and applied on creation\n- Exported functions only available after mount (workaround: use `extend` option)\n- Shadow DOM updates in next tick (batched)\n- Component destroyed in next tick after `disconnectedCallback`\n\n## Component Options\n\nConfigure via object in `<svelte:options customElement={{...}}>`:\n\n- **`tag`**: Custom element name\n- **`shadow`**: Set to `\"none\"` to skip shadow root (no style encapsulation, no slots)\n- **`props`**: Configure prop behavior:\n  - `attribute`: Custom attribute name (default: lowercase prop name)\n  - `reflect`: Reflect prop changes to DOM (default: false)\n  - `type`: `'String' | 'Boolean' | 'Number' | 'Array' | 'Object'` (default: String)\n- **`extend`**: Function to extend custom element class\n\n```svelte\n<svelte:options\n\tcustomElement={{\n\t\ttag: 'custom-element',\n\t\tshadow: 'none',\n\t\tprops: {\n\t\t\tname: { reflect: true, type: 'Number', attribute: 'element-index' }\n\t\t},\n\t\textend: (customElementConstructor) => {\n\t\t\t// Extend the class so we can let it participate in HTML forms\n\t\t\treturn class extends customElementConstructor {\n\t\t\t\tstatic formAssociated = true;\n\n\t\t\t\tconstructor() {\n\t\t\t\t\tsuper();\n\t\t\t\t\tthis.attachedInternals = this.attachInternals();\n\t\t\t\t}\n\n\t\t\t\t// Add the function here, not below in the component so that\n\t\t\t\t// it's always available, not just when the inner Svelte component\n\t\t\t\t// is mounted\n\t\t\t\trandomIndex() {\n\t\t\t\t\tthis.elementIndex = Math.random();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}}\n/>\n\n<script>\n\tlet { elementIndex, attachedInternals } = $props();\n\t// ...\n\tfunction check() {\n\t\tattachedInternals.checkValidity();\n\t}\n</script>\n\n...\n```\n\n> **Note:** TypeScript in `extend` requires `lang=\"ts\"` and only [erasable syntax](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly).\n\n## Caveats\n\n- Styles are **encapsulated** (unless `shadow: \"none\"`). Global styles and `:global()` don't apply\n- Styles inlined as JavaScript, not separate CSS file\n- Not suitable for SSR (shadow DOM invisible until JS loads)\n- Slotted content renders eagerly (always created, even in `{#if}` blocks)\n- `<slot>` in `{#each}` doesn't render content multiple times\n- `let:` directive has no effect\n- Polyfills needed for older browsers\n- Context API doesn't work across custom elements (only within)\n- **Don't use props/attributes starting with `on`** - interpreted as event listeners",
+		"svelte/v4-migration-guide": "# Svelte 3 to 4 Migration Guide\n\nMigration script: `npx svelte-migrate@latest svelte-4`\n\n## Minimum Requirements\n\n- Node 16+\n- SvelteKit 1.20.4+\n- `vite-plugin-svelte` 2.4.1+ (Vite without SvelteKit)\n- webpack 5+ and `svelte-loader` 3.1.8+\n- `rollup-plugin-svelte` 7.1.5+\n- TypeScript 5+\n\n## Browser Conditions for Bundlers\n\nBundlers must specify `browser` condition for frontend bundles or lifecycle callbacks like `onMount` won't work.\n\n- **Rollup**: Set `browser: true` in `@rollup/plugin-node-resolve`\n- **webpack**: Add `\"browser\"` to `conditionNames` array\n\n## CJS Output Removed\n\nNo more CommonJS format, `svelte/register` hook, or CJS runtime. Use a bundler to convert ESM to CJS if needed.\n\n## Stricter Types\n\n### `createEventDispatcher`\n\nNow enforces optional/required/non-existent payloads:\n\n```ts\n// @errors: 2554 2345\nimport { createEventDispatcher } from 'svelte';\n\nconst dispatch = createEventDispatcher<{\n\toptional: number | null;\n\trequired: string;\n\tnoArgument: null;\n}>();\n\n// Svelte version 3:\ndispatch('optional');\ndispatch('required'); // I can still omit the detail argument\ndispatch('noArgument', 'surprise'); // I can still add a detail argument\n\n// Svelte version 4 using TypeScript strict mode:\ndispatch('optional');\ndispatch('required'); // error, missing argument\ndispatch('noArgument', 'surprise'); // error, cannot pass an argument\n```\n\n### `Action` and `ActionReturn`\n\nDefault parameter type is now `undefined`. Must type generic if action receives parameters:\n\n```ts\n// @noErrors\nconst action: Action = (node, params) => { ... } // this is now an error if you use params in any way\nconst action: Action<HTMLElement, string> = (node, params) => { ... } // params is of type string\n```\n\n### `onMount`\n\nType error if returning function asynchronously (reveals bugs where cleanup won't be called):\n\n```js\n// @noErrors\n// Example where this change reveals an actual bug\nonMount(\n\t// someCleanup() not called because function handed to onMount is async\n\tasync () => {\n\t\tconst something = await foo();\n\t\t// ...\n\t\treturn () => someCleanup();\n\t}\n);\n```\n\n## Custom Elements\n\n`tag` option deprecated, use `customElement`:\n\n```svelte\n<svelte:options tag=\"my-component\" />\n<svelte:options customElement=\"my-component\" />\n```\n\n## `SvelteComponentTyped` Deprecated\n\nReplace with `SvelteComponent`:\n\n```js\nimport { SvelteComponentTyped } from 'svelte';\nimport { SvelteComponent } from 'svelte';\n\nexport class Foo extends SvelteComponentTyped<{ aProp: string }> {}\nexport class Foo extends SvelteComponent<{ aProp: string }> {}\n```\n\nFor component instance types, change `: typeof SvelteComponent` to `: typeof SvelteComponent<any>`:\n\n```svelte\n<script>\n\timport ComponentA from './ComponentA.svelte';\n\timport ComponentB from './ComponentB.svelte';\n\timport { SvelteComponent } from 'svelte';\n\n\tlet component: typeof SvelteComponent<any>;\n\n\tfunction choseRandomly() {\n\t\tcomponent = Math.random() > 0.5 ? ComponentA : ComponentB;\n\t}\n</script>\n\n<button on:click={choseRandomly}>random</button>\n<svelte:element this={component} />\n```\n\n## Transitions Local by Default\n\nTransitions only play when direct parent block is created/destroyed, not ancestor blocks:\n\n```svelte\n{#if show}\n\t...\n\t{#if success}\n\t\t<p in:slide>Success</p>\n\t{/each}\n{/if}\n```\n\nUse `|global` modifier for old behavior. Migration script adds this automatically.\n\n## Default Slot Bindings\n\nDefault slot bindings not exposed to named slots and vice versa:\n\n```svelte\n<script>\n\timport Nested from './Nested.svelte';\n</script>\n\n<Nested let:count>\n\t<p>\n\t\tcount in default slot - is available: {count}\n\t</p>\n\t<p slot=\"bar\">\n\t\tcount in bar slot - is not available: {count}\n\t</p>\n</Nested>\n```\n\n## Preprocessors\n\nExecute in order: markup → script → style within each preprocessor group:\n\n```js\n// @errors: 2304\nimport { preprocess } from 'svelte/compiler';\n\nconst { code } = await preprocess(\n\tsource,\n\t[\n\t\t{\n\t\t\tmarkup: () => {\n\t\t\t\tconsole.log('markup-1');\n\t\t\t},\n\t\t\tscript: () => {\n\t\t\t\tconsole.log('script-1');\n\t\t\t},\n\t\t\tstyle: () => {\n\t\t\t\tconsole.log('style-1');\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tmarkup: () => {\n\t\t\t\tconsole.log('markup-2');\n\t\t\t},\n\t\t\tscript: () => {\n\t\t\t\tconsole.log('script-2');\n\t\t\t},\n\t\t\tstyle: () => {\n\t\t\t\tconsole.log('style-2');\n\t\t\t}\n\t\t}\n\t],\n\t{\n\t\tfilename: 'App.svelte'\n\t}\n);\n\n// Svelte 3 logs:\n// markup-1\n// markup-2\n// script-1\n// script-2\n// style-1\n// style-2\n\n// Svelte 4 logs:\n// markup-1\n// script-1\n// style-1\n// markup-2\n// script-2\n// style-2\n```\n\nPut MDsveX before script/style preprocessors:\n\n```js\n// @noErrors\npreprocess: [\n\tvitePreprocess(),\n\tmdsvex(mdsvexConfig)\n\tmdsvex(mdsvexConfig),\n\tvitePreprocess()\n]\n```\n\nEach preprocessor must have a name.\n\n## ESLint\n\n`eslint-plugin-svelte3` deprecated. Use [eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte).\n\n## Other Breaking Changes\n\n- `inert` attribute applied to outroing elements\n- Runtime uses `classList.toggle(name, boolean)` (polyfill for old browsers)\n- Runtime uses `CustomEvent` constructor (polyfill for old browsers)\n- `StartStopNotifier` interface requires update function in addition to set function\n- `derived` throws error on falsy values instead of stores\n- `svelte/internal` type definitions removed\n- DOM node removal batched (affects `MutationObserver` event order)\n- `svelte.JSX` namespace → `svelteHTML` namespace; use types from `svelte/elements`",
+		"svelte/v5-migration-guide": "# Svelte 5 Migration Guide\n\nSvelte 5 supports Svelte 4 syntax - you can mix old and new components. A migration script helps automate upgrades: `npx sv migrate svelte-5`.\n\n## Reactivity Syntax Changes\n\n### `let` → `$state`\n\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n```\n\n`$state` makes reactivity explicit. The variable is still the value itself, no wrapper needed.\n\n### `$:` → `$derived`/`$effect`\n\n**Derivations:**\n```svelte\n<script>\n\tlet count = $state(0);\n\tconst double = $derived(count * 2);\n</script>\n```\n\n**Side effects:**\n```svelte\n<script>\n\tlet count = $state(0);\n\n\t$effect(() => {\n\t\tif (count > 5) {\n\t\t\talert('Count is too high!');\n\t\t}\n\t});\n</script>\n```\n\nNote: `$effect` runs differently than `$:`.\n\n### `export let` → `$props`\n\n```svelte\n<script>\n\tlet { optional = 'unset', required } = $props();\n</script>\n```\n\n**Renaming, rest props, all props:**\n```svelte\n<script>\n\tlet { class: klass, ...rest } = $props();\n</script>\n<button class={klass} {...rest}>click me</button>\n```\n\n## Event Changes\n\n### Event handlers are properties\n\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n\n<button onclick={() => count++}>\n\tclicks: {count}\n</button>\n```\n\nShorthand works:\n```svelte\n<script>\n\tlet count = $state(0);\n\n\tfunction onclick() {\n\t\tcount++;\n\t}\n</script>\n\n<button {onclick}>\n\tclicks: {count}\n</button>\n```\n\n### Component events\n\nReplace `createEventDispatcher` with callback props:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Pump from './Pump.svelte';\n\n\tlet size = $state(15);\n\tlet burst = $state(false);\n\n\tfunction reset() {\n\t\tsize = 15;\n\t\tburst = false;\n\t}\n</script>\n\n<Pump\n\tinflate={(power) => {\n\t\tsize += power;\n\t\tif (size > 75) burst = true;\n\t}}\n\tdeflate={(power) => {\n\t\tif (size > 0) size -= power;\n\t}}\n/>\n\n{#if burst}\n\t<button onclick={reset}>new balloon</button>\n\t<span class=\"boom\">💥</span>\n{:else}\n\t<span class=\"balloon\" style=\"scale: {0.01 * size}\">\n\t\t🎈\n\t</span>\n{/if}\n```\n\n```svelte\n<!--- file: Pump.svelte --->\n<script>\n\tlet { inflate, deflate } = $props();\n\tlet power = $state(5);\n</script>\n\n<button onclick={() => inflate(power)}>\n\tinflate\n</button>\n<button onclick={() => deflate(power)}>\n\tdeflate\n</button>\n<button onclick={() => power--}>-</button>\nPump power: {power}\n<button onclick={() => power++}>+</button>\n```\n\n### Bubbling events\n\nAccept callback prop instead of forwarding:\n\n```svelte\n<script>\n\tlet { onclick } = $props();\n</script>\n\n<button {onclick}>\n\tclick me\n</button>\n```\n\nSpread all props including handlers:\n```svelte\n<script>\n\tlet props = $props();\n</script>\n\n<button {...props}>\n\tclick me\n</button>\n```\n\n### Event modifiers\n\nNo modifiers on event attributes. Add logic inside handler or create wrappers:\n\n```svelte\n<script>\n\tfunction once(fn) {\n\t\treturn function (event) {\n\t\t\tif (fn) fn.call(this, event);\n\t\t\tfn = null;\n\t\t};\n\t}\n\n\tfunction preventDefault(fn) {\n\t\treturn function (event) {\n\t\t\tevent.preventDefault();\n\t\t\tfn.call(this, event);\n\t\t};\n\t}\n</script>\n\n<button onclick={once(preventDefault(handler))}>...</button>\n```\n\nFor `capture`, add to event name:\n```svelte\n<button onclickcapture={...}>...</button>\n```\n\n### Multiple event handlers\n\n```svelte\n<button\n\tonclick={(e) => {\n\t\tone(e);\n\t\ttwo(e);\n\t}}\n>\n\t...\n</button>\n```\n\nWhen spreading, local handlers go after:\n```svelte\n<button\n\t{...props}\n\tonclick={(e) => {\n\t\tdoStuff(e);\n\t\tprops.onclick?.(e);\n\t}}\n>\n\t...\n</button>\n```\n\n## Snippets Instead of Slots\n\nSlots are deprecated. Snippets work with components using slots, but not vice versa.\n\n### Default content\n\n```svelte\n<script>\n\tlet { children } = $props();\n</script>\n\n{@render children?.()}\n```\n\n### Multiple placeholders\n\n```svelte\n<script>\n\tlet { header, main, footer } = $props();\n</script>\n\n<header>\n\t{@render header()}\n</header>\n\n<main>\n\t{@render main()}\n</main>\n\n<footer>\n\t{@render footer()}\n</footer>\n```\n\n### Passing data back\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport List from './List.svelte';\n</script>\n\n<List items={['one', 'two', 'three']}>\n\t{#snippet item(text)}\n\t\t<span>{text}</span>\n\t{/snippet}\n\t{#snippet empty()}\n\t\t<span>No items yet</span>\n\t{/snippet}\n</List>\n```\n\n```svelte\n<!--- file: List.svelte --->\n<script>\n\tlet { items, item, empty } = $props();\n</script>\n\n{#if items.length}\n\t<ul>\n\t\t{#each items as entry}\n\t\t\t<li>\n\t\t\t\t{@render item(entry)}\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n{:else}\n\t{@render empty?.()}\n{/if}\n```\n\n## Migration Script\n\nRun `npx sv migrate svelte-5` to automatically:\n- Bump dependencies\n- Migrate to runes\n- Migrate to event attributes\n- Migrate slots to render tags\n- Migrate slot usages to snippets\n- Migrate component instantiation\n\n### `run` function\n\nMigration script may convert `$:` to `run` (from `svelte/legacy`) when it can't determine if it's a derivation or side effect. Usually should be changed to `$derived` or `$effect`:\n\n```svelte\n<script>\n\t$effect(() => {\n\t\t// some side effect code\n\t})\n</script>\n```\n\n### Event modifiers\n\nImported from `svelte/legacy`, should be replaced with manual logic:\n\n```svelte\n<script>\n</script>\n\n<button\n\tonclick={(event) => {\n\t\tevent.preventDefault();\n\t\t// ...\n\t}}\n>\n\tclick me\n</button>\n```\n\n### Not auto-migrated\n\n- `createEventDispatcher` - too risky, manual migration needed\n- `beforeUpdate/afterUpdate` - use `$effect.pre` and `tick` instead\n\n## Components Are No Longer Classes\n\nUse `mount` or `hydrate` instead of `new Component()`:\n\n```js\nimport { mount } from 'svelte';\nimport App from './App.svelte'\n\nconst app = mount(App, { target: document.getElementById(\"app\") });\n\nexport default app;\n```\n\n### Replacements for class methods\n\n**`$on` → `events` option:**\n```js\nimport { mount } from 'svelte';\nimport App from './App.svelte'\n\nconst app = mount(App, { target: document.getElementById(\"app\"), events: { event: callback } });\n```\n\n**`$set` → `$state`:**\n```js\nimport { mount } from 'svelte';\nimport App from './App.svelte'\n\nconst props = $state({ foo: 'bar' });\nconst app = mount(App, { target: document.getElementById(\"app\"), props });\nprops.foo = 'baz';\n```\n\n**`$destroy` → `unmount`:**\n```js\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte'\n\nconst app = mount(App, { target: document.getElementById(\"app\") });\nunmount(app);\n```\n\n**Stop-gap:** Use `createClassComponent` or `asClassComponent` from `svelte/legacy`, or set `compatibility.componentApi: 4` compiler option.\n\n**Note:** `mount`/`hydrate` are not synchronous. Call `flushSync()` after if you need guarantees.\n\n### Server API\n\n```js\nimport { render } from 'svelte/server';\nimport App from './App.svelte';\n\nconst { html, head } = render(App, { props: { message: 'hello' }});\n```\n\nCSS no longer returned by default. Set `css: 'injected'` compiler option if needed.\n\n### Component typing\n\n```ts\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{\n\tfoo: string;\n}>;\n```\n\n```js\nimport { ComponentA, ComponentB } from 'component-library';\nimport type { Component } from 'svelte';\n\nlet C: Component<{ foo: string }> = $state(\n\tMath.random() ? ComponentA : ComponentB\n);\n```\n\n`ComponentEvents` and `ComponentType` are deprecated.\n\n### `bind:this` changes\n\nNo longer returns `$set`, `$on`, `$destroy`. Only returns instance exports and accessors (if `accessors: true`).\n\n## `<svelte:component>` No Longer Necessary\n\nComponents are now dynamic by default:\n\n```svelte\n<script>\n\timport A from './A.svelte';\n\timport B from './B.svelte';\n\n\tlet Thing = $state();\n</script>\n\n<select bind:value={Thing}>\n\t<option value={A}>A</option>\n\t<option value={B}>B</option>\n</select>\n\n<!-- these are equivalent -->\n<Thing />\n<svelte:component this={Thing} />\n```\n\nComponent names should be capitalized or use dot notation.\n\n### Dot notation indicates component\n\n```svelte\n{#each items as item}\n\t<item.component {...item.props} />\n{/each}\n```\n\n## Whitespace Handling Changed\n\nRules:\n- Whitespace between nodes collapses to one\n- Whitespace at start/end of tags removed\n- Exceptions like `<pre>` tags apply\n\nUse `preserveWhitespace` option to disable trimming.\n\n## Modern Browser Required\n\nSvelte 5 requires:\n- `Proxy` support\n- `ResizeObserver` for dimension bindings\n- `input` event for range inputs\n\nNo IE support. `legacy` compiler option repurposed.\n\n## Compiler Options Changes\n\n- `css` option: removed `false`/`true`/`\"none\"` values\n- `legacy` repurposed\n- `hydratable` removed (always hydratable)\n- `enableSourcemap` removed (always generated)\n- `tag` removed (use `<svelte:options customElement=\"tag-name\" />`)\n- `loopGuardTimeout`, `format`, `sveltePath`, `errorMode`, `varsReport` removed\n\n## Reserved Props\n\n`children` prop is reserved for content snippets.\n\n## Breaking Changes in Runes Mode\n\n### No binding to component exports\n\nCan't do `<A bind:foo />` on exports. Use `bind:this` instead:\n\n```svelte\n<A bind:this={a} />\n<!-- access as a.foo -->\n```\n\n### Bindings need `$bindable()`\n\nProps not bindable by default. Use `$bindable` rune:\n\n```svelte\n<script>\n\tlet { foo = $bindable('bar') } = $props();\n</script>\n```\n\nMust pass non-`undefined` value when binding to props with defaults.\n\n### `accessors` option ignored\n\nProperties never accessible on instance. Use component exports:\n\n```svelte\n<script>\n\tlet { name } = $props();\n\texport const getName = () => name;\n</script>\n```\n\nOr use `$state` in `.svelte.js`/`.svelte.ts` files:\n\n```js\nimport { mount } from 'svelte';\nimport App from './App.svelte'\n\nconst props = $state({ foo: 'bar' });\nconst app = mount(App, { target: document.getElementById(\"app\"), props });\nprops.foo = 'baz';\n```\n\n### `immutable` option ignored\n\nReplaced by `$state` behavior.\n\n### Classes not auto-reactive\n\nDefine reactive fields with `$state` inside class. Wrapping `new Foo()` with `$state(...)` has no effect.\n\n### Touch/wheel events passive\n\n`onwheel`, `onmousewheel`, `ontouchstart`, `ontouchmove` are passive by default. Use `on` from `svelte/events` for non-passive.\n\n### Stricter attribute/prop syntax\n\nMust quote concatenated values:\n\n```svelte\n<Component prop=\"this{is}valid\" />\n```\n\n### Stricter HTML structure\n\nBrowser-repaired HTML now causes compiler errors. Write valid HTML.\n\n## Other Breaking Changes\n\n### Stricter `@const` validation\n\nCan't assign to destructured parts of `@const`.\n\n### `:is()`, `:has()`, `:where()` scoped\n\nNow analyzed in component context. Use `:global(...)` inside if needed:\n\n```css\nmain :global {\n\t@apply bg-blue-100 dark:bg-blue-900;\n}\n```\n\n### CSS hash position non-deterministic\n\nHash no longer guaranteed to be last.\n\n### Scoped CSS uses `:where(...)`\n\nSelectors now use `:where(.svelte-xyz123)` alongside `.svelte-xyz123`.\n\nFor ancient browsers:\n```js\n// @errors: 2552\ncss = css.replace(/:where\\((.+?)\\)/, '$1');\n```\n\n### Error/warning codes renamed\n\nDashes replaced with underscores (e.g., `foo-bar` → `foo_bar`).\n\n### Reduced namespaces\n\nValid namespaces: `html` (default), `mathml`, `svg`. `foreign` removed.\n\n### `beforeUpdate`/`afterUpdate` changes\n\n- `beforeUpdate` no longer runs twice on initial render\n- `afterUpdate` in parent runs after child's\n- Don't run when `<slot>` content updates\n- Disallowed in runes mode (use `$effect.pre`/`$effect`)\n\n### `contenteditable` behavior\n\nBinding takes full control - reactive values inside won't update.\n\n### `oneventname` no string values\n\nCan't use `<button onclick=\"alert('hello')\">` anymore.\n\n### `null`/`undefined` become empty string\n\nNo longer printed as strings.\n\n### `bind:files` values restricted\n\nMust be `null`, `undefined`, or `FileList`.\n\n### Bindings react to form resets\n\nNow properly sync with DOM on form reset.\n\n### `walk` no longer exported\n\nImport from `estree-walker` directly.\n\n### Content inside `<svelte:options>` forbidden\n\nCompiler error if content present.\n\n### `<slot>` preserved in shadow roots\n\nPreserved when child of `<template shadowrootmode=\"...\">`.\n\n### `<svelte:element>` needs expression\n\n```svelte\n<svelte:element this={\"div\"}>\n```\n\n### `mount` plays transitions by default\n\nSet `intro: false` to disable.\n\n### Hydration mismatches not repaired\n\n`<img src>` and `{@html}` mismatches warn in dev but don't auto-repair. Force update manually if needed.\n\n### Hydration uses comments\n\nDon't remove comments from SSR HTML. Manually authored HTML needs adjustment.\n\n### `onevent` attributes delegated\n\nSome events delegated - don't stop propagation manually.\n\n### `--style-props` uses different element\n\nUses `<svelte-css-wrapper>` instead of `<div>`.",
+		"svelte/faq": "# Svelte FAQ\n\n## Getting Started\n- Start with the interactive [tutorial](/tutorial) - 5-10 minutes to get running, 1.5 hours for full tutorial\n- [Reference docs](/docs/svelte) for syntax questions\n\n## Support\n- **Stack Overflow**: Code-level questions, tagged [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3)\n- **Community**: [Discord](/chat), [Reddit](https://www.reddit.com/r/sveltejs/)\n- **Resources**: [Svelte Society books/videos](https://sveltesociety.dev/resources)\n\n## Tooling\n\n**VS Code**: [Official extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)\n\n**Formatting**: [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte)\n\n**Documentation**: Use JSDoc comments for components:\n\n````svelte\n<script>\n\t/** What should we call the user? */\n\texport let name = 'world';\n</script>\n\n<!--\n@component\nHere's some documentation for this component.\nIt will show up on hover.\n\n- You can use markdown here.\n- You can also use code blocks here.\n- Usage:\n  ```svelte\n  <main name=\"Arethra\">\n  ```\n-->\n<main>\n\t<h1>\n\t\tHello, {name}\n\t</h1>\n</main>\n````\n\nNote: `@component` is required in HTML comments.\n\n## Testing\n\nThree test types:\n\n1. **Unit Tests**: Business logic in isolation. Use [Vitest](https://vitest.dev/) or other test runners.\n2. **Component Tests**: Mount/interact with components. Use Vitest + jsdom, [Playwright](https://playwright.dev/docs/test-components), or [Cypress](https://www.cypress.io/).\n3. **E2E Tests**: Full application testing. Use [Playwright](https://playwright.dev/) or alternatives.\n\nResources:\n- [Svelte testing docs](/docs/svelte/testing)\n- [Vitest setup via CLI](/docs/cli/vitest)\n- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)\n\n## Routing\n**Official**: [SvelteKit](/docs/kit) - filesystem router with SSR and HMR\n\n**Alternatives**: See [packages page](/packages#routing)\n\n## Mobile Apps\n- Use [SvelteKit SPA](https://kit.svelte.dev/docs/single-page-apps) with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte)\n- Custom renderer support for Svelte 5 [in progress](https://github.com/sveltejs/svelte/issues/15470)\n- Svelte Native not currently supported in Svelte 5\n\n## UI Components\nSee [component libraries](/packages#component-libraries) and [packages page](/packages)\n\n## Styling Gotchas\n**Unused styles are removed by design.** Svelte scopes styles by adding unique classes. If the compiler can't identify elements at compile time:\n\n- Use `:global(...)` for global styles\n- Use partial global selectors: `.foo :global(.bar) { ... }` styles `.bar` elements within component's `.foo` elements\n\n## HMR\nUse [SvelteKit](/docs/kit) (built on [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr))\n\nCommunity plugins: [rollup](https://github.com/rixo/rollup-plugin-svelte-hot), [webpack](https://github.com/sveltejs/svelte-loader)\n\n## Scaling\nSee [this issue](https://github.com/sveltejs/svelte/issues/2546)\n\n## Svelte v2\n[Documentation available](https://v2.svelte.dev/guide) but no new features",
+		"svelte/svelte": "# Svelte 5 API Reference\n\n## Component Lifecycle\n\n### onMount\nRuns once after component mounts to DOM. Returns cleanup function if provided synchronously. Does not run during SSR.\n\n```ts\nfunction onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;\n```\n\n### onDestroy\nRuns before component unmounts. Only lifecycle function that runs server-side.\n\n```ts\nfunction onDestroy(fn: () => any): void;\n```\n\n### ~~afterUpdate~~ → Use `$effect`\n### ~~beforeUpdate~~ → Use `$effect.pre`\n\n## Component Instantiation\n\n### mount\nMounts component to target, returns exports. Transitions play by default unless `intro: false`.\n\n```ts\nfunction mount<Props, Exports>(\n  component: Component<Props, Exports, any>,\n  options: MountOptions<Props>\n): Exports;\n```\n\n**MountOptions:**\n- `target`: Document | Element | ShadowRoot (required)\n- `anchor?`: Node - renders before this node\n- `props?`: Props (required if Props not empty)\n- `events?`: Record<string, (e: any) => any> (deprecated)\n- `context?`: Map<any, any>\n- `intro?`: boolean (default: true)\n\n### hydrate\nHydrates server-rendered component. Same signature as `mount`.\n\n### unmount\nUnmounts component. Returns Promise if `outro: true` (plays transitions).\n\n```js\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\nunmount(app, { outro: true });\n```\n\n## Context API\n\nMust be called during component initialization.\n\n```ts\nfunction setContext<T>(key: any, context: T): T;\nfunction getContext<T>(key: any): T;\nfunction hasContext(key: any): boolean;\nfunction getAllContexts<T extends Map<any, any>>(): T;\n```\n\n## Timing & Updates\n\n### tick\nReturns promise that resolves after pending state changes applied.\n\n```ts\nfunction tick(): Promise<void>;\n```\n\n### settled\nReturns promise that resolves after state changes, async work, and DOM updates complete. (Since 5.36)\n\n```ts\nfunction settled(): Promise<void>;\n```\n\n### flushSync\nSynchronously flush pending updates. Returns callback result if provided.\n\n```ts\nfunction flushSync<T = void>(fn?: () => T): T;\n```\n\n## Utilities\n\n### untrack\nReads state inside `$derived` or `$effect` without creating dependency.\n\n```ts\n$effect(() => {\n  // runs when `data` changes, not when `time` changes\n  save(data, {\n    timestamp: untrack(() => time)\n  });\n});\n```\n\n```ts\nfunction untrack<T>(fn: () => T): T;\n```\n\n### getAbortSignal\nReturns AbortSignal that aborts when current derived/effect re-runs or destroys. Must be called inside derived/effect.\n\n```svelte\n<script>\nimport { getAbortSignal } from 'svelte';\n\nlet { id } = $props();\n\nasync function getData(id) {\n  const response = await fetch(`/items/${id}`, {\n    signal: getAbortSignal()\n  });\n  return await response.json();\n}\n\nconst data = $derived(await getData(id));\n</script>\n```\n\n### createRawSnippet\nCreate snippet programmatically.\n\n```ts\nfunction createRawSnippet<Params extends unknown[]>(\n  fn: (...params: Getters<Params>) => {\n    render: () => string;\n    setup?: (element: Element) => void | (() => void);\n  }\n): Snippet<Params>;\n```\n\n## TypeScript Types\n\n### Component\nType for Svelte 5 components (functions, not classes).\n\n```ts\ninterface Component<\n  Props extends Record<string, any> = {},\n  Exports extends Record<string, any> = {},\n  Bindings extends keyof Props | '' = string\n> {\n  (internals: ComponentInternals, props: Props): Exports;\n  element?: typeof HTMLElement; // if compiled with customElement\n}\n```\n\n**Example:**\n```ts\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}\n```\n\n### ComponentProps\nGet props type from component.\n\n```ts\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };\n\n// Generic function\nfunction withProps<TComponent extends Component<any>>(\n  component: TComponent,\n  props: ComponentProps<TComponent>\n) {}\n```\n\n### Snippet\nType for `#snippet` blocks.\n\n```ts\ninterface Snippet<Parameters extends unknown[] = []> {\n  (...args: Parameters): typeof SnippetReturn;\n}\n\n// Usage\nlet { banner }: { banner: Snippet<[{ text: string }]> } = $props();\n```\n\nCall snippets with `{@render ...}` tag only.\n\n## Deprecated (Svelte 4 Legacy)\n\n- ~~`SvelteComponent`~~ → Use `Component` type and `mount()` function\n- ~~`SvelteComponentTyped`~~ → Use `Component`\n- ~~`createEventDispatcher`~~ → Use callback props or `$host()` rune\n- ~~`ComponentConstructorOptions`~~ → Use `mount()`\n- ~~`ComponentType`~~ → Obsolete with new `Component` type",
+		"svelte/svelte-action": "# Actions (Legacy - superseded by attachments)\n\nActions are functions called when an element is created. Use `use:` directive to apply them.\n\n## Action Type\n\nType actions with `Action<Element, Parameter, Attributes>`:\n\n```ts\nexport const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {\n\t// ...\n}\n```\n\n- `Action<HTMLDivElement>` or `Action<HTMLDivElement, undefined>` = no parameters accepted\n- Can return object with `update` and `destroy` methods\n- Can specify additional attributes/events (TypeScript only)\n\n```dts\ninterface Action<\n\tElement = HTMLElement,\n\tParameter = undefined,\n\tAttributes extends Record<string, any> = Record<\n\t\tnever,\n\t\tany\n\t>\n> {\n\t<Node extends Element>(\n\t\t...args: undefined extends Parameter\n\t\t\t? [node: Node, parameter?: Parameter]\n\t\t\t: [node: Node, parameter: Parameter]\n\t): void | ActionReturn<Parameter, Attributes>;\n}\n```\n\n## ActionReturn Type\n\nOptional return object from actions:\n\n- `update`: Called when parameter changes after markup updates\n- `destroy`: Called after element unmounts\n- `Attributes`: Type additional attributes/events (TypeScript only)\n\n```ts\ninterface Attributes {\n\tnewprop?: string;\n\t'on:event': (e: CustomEvent<boolean>) => void;\n}\n\nexport function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {\n\t// ...\n\treturn {\n\t\tupdate: (updatedParameter) => {...},\n\t\tdestroy: () => {...}\n\t};\n}\n```\n\n```dts\ninterface ActionReturn<\n\tParameter = undefined,\n\tAttributes extends Record<string, any> = Record<\n\t\tnever,\n\t\tany\n\t>\n> {\n\tupdate?: (parameter: Parameter) => void;\n\tdestroy?: () => void;\n}\n```",
+		"svelte/svelte-animate": "# svelte/animate\n\n## flip\n\nAnimates an element between start and end positions by translating x and y values. FLIP = First, Last, Invert, Play.\n\n```js\nimport { flip } from 'svelte/animate';\n```\n\n```dts\nfunction flip(\n\tnode: Element,\n\t{\n\t\tfrom,\n\t\tto\n\t}: {\n\t\tfrom: DOMRect;\n\t\tto: DOMRect;\n\t},\n\tparams?: FlipParams\n): AnimationConfig;\n```\n\n## AnimationConfig\n\n```dts\ninterface AnimationConfig {\n\tdelay?: number;\n\tduration?: number;\n\teasing?: (t: number) => number;\n\tcss?: (t: number, u: number) => string;\n\ttick?: (t: number, u: number) => void;\n}\n```\n\n## FlipParams\n\n```dts\ninterface FlipParams {\n\tdelay?: number;\n\tduration?: number | ((len: number) => number);\n\teasing?: (t: number) => number;\n}\n```",
+		"svelte/svelte-attachments": "# svelte/attachments\n\n```js\nimport { createAttachmentKey, fromAction } from 'svelte/attachments';\n```\n\n## createAttachmentKey\n\nCreates a symbol key for programmatic attachments (alternative to `{@attach ...}`). Useful for library authors.\n\n```svelte\n<script>\n\timport { createAttachmentKey } from 'svelte/attachments';\n\n\tconst props = {\n\t\tclass: 'cool',\n\t\tonclick: () => alert('clicked'),\n\t\t[createAttachmentKey()]: (node) => {\n\t\t\tnode.textContent = 'attached!';\n\t\t}\n\t};\n</script>\n\n<button {...props}>click me</button>\n```\n\n```dts\nfunction createAttachmentKey(): symbol;\n```\n\n## fromAction\n\nConverts an action into an attachment with same behavior. Second argument must be a function that returns the action's argument.\n\n```svelte\n<!-- with an action -->\n<div use:foo={bar}>...</div>\n\n<!-- with an attachment -->\n<div {@attach fromAction(foo, () => bar)}>...</div>\n```\n\n```dts\nfunction fromAction<E extends EventTarget, T extends unknown>(\n\taction: Action<E, T> | ((element: E, arg: T) => void | ActionReturn<T>),\n\tfn: () => T\n): Attachment<E>;\n\nfunction fromAction<E extends EventTarget>(\n\taction: Action<E, void> | ((element: E) => void | ActionReturn<void>)\n): Attachment<E>;\n```\n\n## Attachment\n\nFunction that runs when element mounts, optionally returns cleanup function. Used with `{@attach ...}` or via `createAttachmentKey`.\n\n```dts\ninterface Attachment<T extends EventTarget = Element> {\n\t(element: T): void | (() => void);\n}\n```",
+		"svelte/svelte-compiler": "# svelte/compiler\n\n## Imports\n\n```js\nimport {\n\tVERSION,\n\tcompile,\n\tcompileModule,\n\tmigrate,\n\tparse,\n\tpreprocess,\n\twalk\n} from 'svelte/compiler';\n```\n\n## VERSION\n\nCurrent version from package.json.\n\n```dts\nconst VERSION: string;\n```\n\n## compile\n\nConverts `.svelte` source code into a JavaScript module that exports a component.\n\n```dts\nfunction compile(\n\tsource: string,\n\toptions: CompileOptions\n): CompileResult;\n```\n\n## compileModule\n\nConverts JavaScript source code containing runes into a JavaScript module.\n\n```dts\nfunction compileModule(\n\tsource: string,\n\toptions: ModuleCompileOptions\n): CompileResult;\n```\n\n## migrate\n\nBest-effort migration of Svelte code to runes, event attributes, and render tags. May throw if code is too complex.\n\n```dts\nfunction migrate(\n\tsource: string,\n\t{ filename, use_ts }?: { filename?: string; use_ts?: boolean; }\n): { code: string; };\n```\n\n## parse\n\nParses a component and returns its AST. Set `modern: true` for modern AST (default in Svelte 6).\n\n```dts\nfunction parse(\n\tsource: string,\n\toptions: { filename?: string; modern: true; loose?: boolean; }\n): AST.Root;\n```\n\n## preprocess\n\nProvides hooks for transforming component source code (e.g., converting `<style lang=\"sass\">` to CSS).\n\n```dts\nfunction preprocess(\n\tsource: string,\n\tpreprocessor: PreprocessorGroup | PreprocessorGroup[],\n\toptions?: { filename?: string; }\n): Promise<Processed>;\n```\n\n## walk\n\n**Deprecated:** Use `import { walk } from 'estree-walker'` instead.\n\n## CompileOptions\n\n```dts\ninterface CompileOptions extends ModuleCompileOptions {\n\tname?: string; // Class name, inferred from filename if unspecified\n\tcustomElement?: boolean; // Generate custom element constructor (default: false)\n\taccessors?: boolean; // Create getters/setters for props (default: false, deprecated in runes mode)\n\tnamespace?: Namespace; // Element namespace: 'html', 'svg', 'mathml' (default: 'html')\n\timmutable?: boolean; // Promise not to mutate objects (default: false, deprecated in runes mode)\n\tcss?: 'injected' | 'external'; // How to handle CSS\n\tcssHash?: CssHashGetter; // Custom CSS class name generator\n\tpreserveComments?: boolean; // Keep HTML comments (default: false)\n\tpreserveWhitespace?: boolean; // Keep whitespace as typed (default: false)\n\tfragments?: 'html' | 'tree'; // DOM fragment cloning strategy (default: 'html', since v5.33)\n\trunes?: boolean | undefined; // Force runes mode on/off/infer (default: undefined, true by default in Svelte 6)\n\tdiscloseVersion?: boolean; // Expose Svelte version in browser (default: true)\n\tcompatibility?: {\n\t\tcomponentApi?: 4 | 5; // Svelte 4 instantiation compatibility (default: 5, deprecated)\n\t};\n\tsourcemap?: object | string; // Initial sourcemap to merge\n\toutputFilename?: string; // For JS sourcemap\n\tcssOutputFilename?: string; // For CSS sourcemap\n\thmr?: boolean; // Hot reloading support (default: false)\n\tmodernAst?: boolean; // Return modern AST (default: false, true in Svelte 6)\n}\n```\n\n**Key options:**\n- `css: 'injected'` - styles in `<head>` or shadow root\n- `css: 'external'` - CSS returned separately for static generation\n- `fragments: 'html'` - faster but requires CSP compatibility\n- `fragments: 'tree'` - slower but works with strict CSP\n\n## ModuleCompileOptions\n\n```dts\ninterface ModuleCompileOptions {\n\tdev?: boolean; // Runtime checks and debugging (default: false)\n\tgenerate?: 'client' | 'server' | false; // Output target (default: 'client')\n\tfilename?: string; // For debugging and sourcemaps\n\trootDir?: string; // Prevent filesystem info leaks (default: process.cwd())\n\twarningFilter?: (warning: Warning) => boolean; // Filter warnings\n\texperimental?: {\n\t\tasync?: boolean; // Allow await in deriveds/templates (since v5.36)\n\t};\n}\n```\n\n## CompileResult\n\n```dts\ninterface CompileResult {\n\tjs: {\n\t\tcode: string;\n\t\tmap: SourceMap;\n\t};\n\tcss: null | {\n\t\tcode: string;\n\t\tmap: SourceMap;\n\t\thasGlobal: boolean;\n\t};\n\twarnings: Warning[];\n\tmetadata: {\n\t\trunes: boolean; // Whether compiled in runes mode\n\t};\n\tast: any;\n}\n```\n\n## Preprocessor Types\n\n### MarkupPreprocessor\n\n```dts\ntype MarkupPreprocessor = (options: {\n\tcontent: string; // Whole Svelte file\n\tfilename?: string;\n}) => Processed | void | Promise<Processed | void>;\n```\n\n### Preprocessor\n\n```dts\ntype Preprocessor = (options: {\n\tcontent: string; // Script/style tag content\n\tattributes: Record<string, string | boolean>;\n\tmarkup: string; // Whole Svelte file\n\tfilename?: string;\n}) => Processed | void | Promise<Processed | void>;\n```\n\n### PreprocessorGroup\n\n```dts\ninterface PreprocessorGroup {\n\tname?: string; // Will be required in next major version\n\tmarkup?: MarkupPreprocessor;\n\tstyle?: Preprocessor;\n\tscript?: Preprocessor;\n}\n```\n\n### Processed\n\n```dts\ninterface Processed {\n\tcode: string; // New code\n\tmap?: string | object; // Source map\n\tdependencies?: string[]; // Files to watch\n\tattributes?: Record<string, string | boolean>; // Updated tag attributes (script/style only)\n\ttoString?: () => string;\n}\n```\n\n## AST Types\n\nKey AST node types:\n\n- **Root**: `{ type: 'Root', options: SvelteOptions | null, fragment: Fragment, css, instance, module, comments }`\n- **Elements**: `Component`, `RegularElement`, `SvelteElement`, `SvelteComponent`, `SvelteSelf`, `SvelteBody`, `SvelteWindow`, `SvelteDocument`, `SvelteHead`, `SvelteBoundary`, `SvelteFragment`, `TitleElement`, `SlotElement`\n- **Tags**: `ExpressionTag`, `HtmlTag`, `RenderTag`, `AttachTag`, `ConstTag`, `DebugTag`\n- **Blocks**: `EachBlock`, `IfBlock`, `AwaitBlock`, `KeyBlock`, `SnippetBlock`\n- **Directives**: `AnimateDirective`, `BindDirective`, `ClassDirective`, `LetDirective`, `OnDirective`, `StyleDirective`, `TransitionDirective`, `UseDirective`\n- **Other**: `Text`, `Comment`, `Attribute`, `SpreadAttribute`, `Script`, `Fragment`",
+		"svelte/svelte-easing": "# svelte/easing\n\nEasing functions for animations. All functions take a number `t` (0-1) and return a number (0-1).\n\n```js\nimport {\n\tbackIn, backInOut, backOut,\n\tbounceIn, bounceInOut, bounceOut,\n\tcircIn, circInOut, circOut,\n\tcubicIn, cubicInOut, cubicOut,\n\telasticIn, elasticInOut, elasticOut,\n\texpoIn, expoInOut, expoOut,\n\tlinear,\n\tquadIn, quadInOut, quadOut,\n\tquartIn, quartInOut, quartOut,\n\tquintIn, quintInOut, quintOut,\n\tsineIn, sineInOut, sineOut\n} from 'svelte/easing';\n```\n\n**Signature:** `(t: number) => number`\n\n**Available functions:**\n- `linear` - No easing\n- `quad`, `cubic`, `quart`, `quint` - Polynomial easing (power of 2, 3, 4, 5)\n- `sine` - Sinusoidal easing\n- `expo` - Exponential easing\n- `circ` - Circular easing\n- `back` - Overshooting easing\n- `bounce` - Bouncing easing\n- `elastic` - Elastic easing\n\nEach (except `linear`) has `In`, `Out`, and `InOut` variants.",
+		"svelte/svelte-events": "# on\n\nAttaches event handlers and returns a cleanup function. Preserves correct order relative to declarative handlers (like `onclick`) which use event delegation.\n\n```js\nimport { on } from 'svelte/events';\n```\n\n## API\n\n```dts\nfunction on(\n\telement: EventTarget, // Window, Document, HTMLElement, MediaQueryList, etc.\n\ttype: string,\n\thandler: EventListener,\n\toptions?: AddEventListenerOptions\n): () => void;\n```\n\n**Key benefit:** Maintains proper event ordering with Svelte's declarative event handlers.\n\n**Returns:** Cleanup function to remove the handler.",
+		"svelte/svelte-legacy": "# svelte/legacy\n\nMigration utilities for Svelte 4 to 5 transition. All imports are deprecated - migrate away over time.\n\n```js\nimport {\n\tasClassComponent,\n\tcreateBubbler,\n\tcreateClassComponent,\n\thandlers,\n\tnonpassive,\n\tonce,\n\tpassive,\n\tpreventDefault,\n\trun,\n\tself,\n\tstopImmediatePropagation,\n\tstopPropagation,\n\ttrusted\n} from 'svelte/legacy';\n```\n\n## Component Class Compatibility\n\n### asClassComponent\nConverts component function to Svelte 4 compatible constructor.\n\n```dts\nfunction asClassComponent<Props, Exports, Events, Slots>(\n\tcomponent: SvelteComponent<Props, Events, Slots> | Component<Props>\n): ComponentType<SvelteComponent<Props, Events, Slots> & Exports>;\n```\n\n### createClassComponent\nCreates Svelte 4 compatible component from options + component function.\n\n```dts\nfunction createClassComponent<Props, Exports, Events, Slots>(\n\toptions: ComponentConstructorOptions<Props> & {\n\t\tcomponent: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;\n\t}\n): SvelteComponent<Props, Events, Slots> & Exports;\n```\n\n## Event Handling\n\n### createBubbler\nMimics `on:click` (no handler) behavior from Svelte 4.\n\n```dts\nfunction createBubbler(): (type: string) => (event: Event) => boolean;\n```\n\n### handlers\nAllows multiple event listeners (Svelte 4 behavior).\n\n```dts\nfunction handlers(...handlers: EventListener[]): EventListener;\n```\n\n## Event Modifiers (as functions/actions)\n\n### once\n```dts\nfunction once(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;\n```\n\n### preventDefault\n```dts\nfunction preventDefault(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;\n```\n\n### stopPropagation\n```dts\nfunction stopPropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;\n```\n\n### stopImmediatePropagation\n```dts\nfunction stopImmediatePropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;\n```\n\n### self\n```dts\nfunction self(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;\n```\n\n### trusted\n```dts\nfunction trusted(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;\n```\n\n### passive (action)\n```dts\nfunction passive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;\n```\n\n### nonpassive (action)\n```dts\nfunction nonpassive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;\n```\n\n## Other\n\n### run\nRuns once immediately on server, like `$effect.pre` on client.\n\n```dts\nfunction run(fn: () => void | (() => void)): void;\n```\n\n### LegacyComponentType\nType for components usable as both class and function during transition.\n\n```dts\ntype LegacyComponentType = {\n\tnew (o: ComponentConstructorOptions): SvelteComponent;\n\t(...args: Parameters<Component<Record<string, any>>>): ReturnType<Component<Record<string, any>, Record<string, any>>>;\n};\n```",
+		"svelte/svelte-motion": "# svelte/motion\n\n```js\nimport { Spring, Tween, prefersReducedMotion, spring, tweened } from 'svelte/motion';\n```\n\n## Spring\n\n**Available since 5.8.0**\n\nWrapper for spring-like animated values. Changes to `spring.target` cause `spring.current` to move towards it based on `stiffness` and `damping`.\n\n```svelte\n<script>\n\timport { Spring } from 'svelte/motion';\n\n\tconst spring = new Spring(0);\n</script>\n\n<input type=\"range\" bind:value={spring.target} />\n<input type=\"range\" bind:value={spring.current} disabled />\n```\n\n### Constructor\n```dts\nconstructor(value: T, options?: SpringOpts);\n```\n\n### Static Method\n```dts\nSpring.of<U>(fn: () => U, options?: SpringOpts): Spring<U>;\n```\nCreates spring bound to `fn` return value. Must be called inside effect root (e.g., component initialization).\n\n```svelte\n<script>\n\timport { Spring } from 'svelte/motion';\n\n\tlet { number } = $props();\n\n\tconst spring = Spring.of(() => number);\n</script>\n```\n\n### Methods\n```dts\nset(value: T, options?: SpringUpdateOpts): Promise<void>;\n```\nSets `spring.target` to `value`, returns Promise resolving when `spring.current` catches up.\n- `options.instant`: immediately match target\n- `options.preserveMomentum`: continue trajectory for specified milliseconds (useful for fling gestures)\n\n### Properties\n- `target: T` - end value\n- `current: T` (getter) - current value\n- `stiffness: number`\n- `damping: number`\n- `precision: number`\n\n## Tween\n\n**Available since 5.8.0**\n\nWrapper for smoothly tweened values. Changes to `tween.target` cause `tween.current` to move towards it based on `delay`, `duration`, and `easing`.\n\n```svelte\n<script>\n\timport { Tween } from 'svelte/motion';\n\n\tconst tween = new Tween(0);\n</script>\n\n<input type=\"range\" bind:value={tween.target} />\n<input type=\"range\" bind:value={tween.current} disabled />\n```\n\n### Constructor\n```dts\nconstructor(value: T, options?: TweenedOptions<T>);\n```\n\n### Static Method\n```dts\nTween.of<U>(fn: () => U, options?: TweenedOptions<U>): Tween<U>;\n```\nCreates tween bound to `fn` return value. Must be called inside effect root.\n\n```svelte\n<script>\n\timport { Tween } from 'svelte/motion';\n\n\tlet { number } = $props();\n\n\tconst tween = Tween.of(() => number);\n</script>\n```\n\n### Methods\n```dts\nset(value: T, options?: TweenedOptions<T>): Promise<void>;\n```\nSets `tween.target`, returns Promise. Options override defaults.\n\n### Properties\n- `target: T` (getter/setter)\n- `current: T` (getter)\n\n## prefersReducedMotion\n\n**Available since 5.7.0**\n\nMedia query matching user's [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) preference.\n\n```svelte\n<script>\n\timport { prefersReducedMotion } from 'svelte/motion';\n\timport { fly } from 'svelte/transition';\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>\n\ttoggle\n</button>\n\n{#if visible}\n\t<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>\n\t\tflies in, unless the user prefers reduced motion\n\t</p>\n{/if}\n```\n\n## spring (deprecated)\n\n**Use `Spring` instead**\n\n```dts\nfunction spring<T = any>(value?: T, opts?: SpringOpts): Spring<T>;\n```\n\n## tweened (deprecated)\n\n**Use `Tween` instead**\n\n```dts\nfunction tweened<T>(value?: T, defaults?: TweenedOptions<T>): Tweened<T>;\n```",
+		"svelte/svelte-reactivity-window": "# svelte/reactivity/window\n\nReactive versions of `window` values. Each has a `.current` property usable in templates, `$derived`, and `$effect` without manual event listeners.\n\n```svelte\n<script>\n\timport { innerWidth, innerHeight } from 'svelte/reactivity/window';\n</script>\n\n<p>{innerWidth.current}x{innerHeight.current}</p>\n```\n\n## Available Exports\n\n```js\nimport {\n\tdevicePixelRatio,\n\tinnerHeight,\n\tinnerWidth,\n\tonline,\n\touterHeight,\n\touterWidth,\n\tscreenLeft,\n\tscreenTop,\n\tscrollX,\n\tscrollY\n} from 'svelte/reactivity/window';\n```\n\nAll values are `undefined` on the server.\n\n## API Reference\n\n| Export | Maps to | Notes |\n|--------|---------|-------|\n| `devicePixelRatio.current` | `window.devicePixelRatio` | Chrome: responds to zoom; Firefox/Safari: doesn't |\n| `innerHeight.current` | `window.innerHeight` | |\n| `innerWidth.current` | `window.innerWidth` | |\n| `online.current` | `navigator.onLine` | Returns `boolean \\| undefined` |\n| `outerHeight.current` | `window.outerHeight` | |\n| `outerWidth.current` | `window.outerWidth` | |\n| `screenLeft.current` | `window.screenLeft` | Updated in `requestAnimationFrame` |\n| `screenTop.current` | `window.screenTop` | Updated in `requestAnimationFrame` |\n| `scrollX.current` | `window.scrollX` | |\n| `scrollY.current` | `window.scrollY` | |",
+		"svelte/svelte-reactivity": "# svelte/reactivity\n\nReactive versions of built-ins (`Map`, `Set`, `URL`, etc.) and reactivity utilities.\n\n```js\nimport {\n\tMediaQuery,\n\tSvelteDate,\n\tSvelteMap,\n\tSvelteSet,\n\tSvelteURL,\n\tSvelteURLSearchParams,\n\tcreateSubscriber\n} from 'svelte/reactivity';\n```\n\n## MediaQuery\n\nCreates a reactive media query with a `current` property.\n\n**Warning:** No way to know correct value during SSR, may cause hydration mismatch. Use CSS media queries when possible.\n\n```svelte\n<script>\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tconst large = new MediaQuery('min-width: 800px');\n</script>\n\n<h1>{large.current ? 'large screen' : 'small screen'}</h1>\n```\n\n```dts\nconstructor(query: string, fallback?: boolean | undefined);\n```\n\n## SvelteDate\n\nReactive `Date` object. Reading in `$effect` or `$derived` re-evaluates when date changes.\n\n```svelte\n<script>\n\timport { SvelteDate } from 'svelte/reactivity';\n\n\tconst date = new SvelteDate();\n\n\tconst formatter = new Intl.DateTimeFormat(undefined, {\n\t  hour: 'numeric',\n\t  minute: 'numeric',\n\t  second: 'numeric'\n\t});\n\n\t$effect(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tdate.setTime(Date.now());\n\t\t}, 1000);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<p>The time is {formatter.format(date)}</p>\n```\n\n## SvelteMap\n\nReactive `Map`. Reading contents (iterating, `.size`, `.get()`, `.has()`) in `$effect` or `$derived` re-evaluates when updated.\n\n**Note:** Values are NOT deeply reactive.\n\n```svelte\n<script>\n\timport { SvelteMap } from 'svelte/reactivity';\n\timport { result } from './game.js';\n\n\tlet board = new SvelteMap();\n\tlet player = $state('x');\n\tlet winner = $derived(result(board));\n\n\tfunction reset() {\n\t\tplayer = 'x';\n\t\tboard.clear();\n\t}\n</script>\n\n<div class=\"board\">\n\t{#each Array(9), i}\n\t\t<button\n\t\t\tdisabled={board.has(i) || winner}\n\t\t\tonclick={() => {\n\t\t\t\tboard.set(i, player);\n\t\t\t\tplayer = player === 'x' ? 'o' : 'x';\n\t\t\t}}\n\t\t>{board.get(i)}</button>\n\t{/each}\n</div>\n\n{#if winner}\n\t<p>{winner} wins!</p>\n\t<button onclick={reset}>reset</button>\n{:else}\n\t<p>{player} is next</p>\n{/if}\n```\n\n## SvelteSet\n\nReactive `Set`. Reading contents (iterating, `.size`, `.has()`) in `$effect` or `$derived` re-evaluates when updated.\n\n**Note:** Values are NOT deeply reactive.\n\n```svelte\n<script>\n\timport { SvelteSet } from 'svelte/reactivity';\n\tlet monkeys = new SvelteSet();\n\n\tfunction toggle(monkey) {\n\t\tif (monkeys.has(monkey)) {\n\t\t\tmonkeys.delete(monkey);\n\t\t} else {\n\t\t\tmonkeys.add(monkey);\n\t\t}\n\t}\n</script>\n\n{#each ['🙈', '🙉', '🙊'] as monkey}\n\t<button onclick={() => toggle(monkey)}>{monkey}</button>\n{/each}\n\n<button onclick={() => monkeys.clear()}>clear</button>\n\n{#if monkeys.has('🙈')}<p>see no evil</p>{/if}\n{#if monkeys.has('🙉')}<p>hear no evil</p>{/if}\n{#if monkeys.has('🙊')}<p>speak no evil</p>{/if}\n```\n\n## SvelteURL\n\nReactive `URL`. Reading properties (`.href`, `.pathname`, etc.) in `$effect` or `$derived` re-evaluates when changed.\n\n`.searchParams` is a `SvelteURLSearchParams` instance.\n\n```svelte\n<script>\n\timport { SvelteURL } from 'svelte/reactivity';\n\n\tconst url = new SvelteURL('https://example.com/path');\n</script>\n\n<!-- changes to these... -->\n<input bind:value={url.protocol} />\n<input bind:value={url.hostname} />\n<input bind:value={url.pathname} />\n\n<hr />\n\n<!-- will update `href` and vice versa -->\n<input bind:value={url.href} size=\"65\" />\n```\n\n## SvelteURLSearchParams\n\nReactive `URLSearchParams`. Reading contents (iterating, `.get()`, `.getAll()`) in `$effect` or `$derived` re-evaluates when updated.\n\n```svelte\n<script>\n\timport { SvelteURLSearchParams } from 'svelte/reactivity';\n\n\tconst params = new SvelteURLSearchParams('message=hello');\n\n\tlet key = $state('key');\n\tlet value = $state('value');\n</script>\n\n<input bind:value={key} />\n<input bind:value={value} />\n<button onclick={() => params.append(key, value)}>append</button>\n\n<p>?{params.toString()}</p>\n\n{#each params as [key, value]}\n\t<p>{key}: {value}</p>\n{/each}\n```\n\n## createSubscriber\n\nIntegrates external event-based systems with Svelte reactivity. Returns a `subscribe` function.\n\nWhen called inside `$effect`, the `start` callback receives an `update` function. Calling `update` re-runs the effect. `start` can return cleanup function.\n\nMultiple effects share one `start` call; cleanup runs when all effects destroyed.\n\nExample `MediaQuery` implementation:\n\n```js\n// @errors: 7031\nimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}\n```\n\n```dts\nfunction createSubscriber(\n\tstart: (update: () => void) => (() => void) | void\n): () => void;\n```",
+		"svelte/svelte-server": "# svelte/server\n\n## render\n\nServer-only function (requires `server` compiler option). Renders a component and returns `body` and `head` properties for populating HTML during SSR.\n\n```js\nimport { render } from 'svelte/server';\n```\n\n**Type signature:**\n\n```dts\nfunction render<\n\tComp extends SvelteComponent<any> | Component<any>,\n\tProps extends ComponentProps<Comp> = ComponentProps<Comp>\n>(\n\tcomponent: Comp,\n\toptions?: {\n\t\tprops?: Omit<Props, '$$slots' | '$$events'>;\n\t\tcontext?: Map<any, any>;\n\t\tidPrefix?: string;\n\t}\n): RenderOutput;\n```\n\n**Usage:** Pass component and optional `props`, `context`, or `idPrefix` to generate server-rendered output.",
+		"svelte/svelte-store": "# svelte/store\n\n```js\nimport {\n\tderived,\n\tfromStore,\n\tget,\n\treadable,\n\treadonly,\n\ttoStore,\n\twritable\n} from 'svelte/store';\n```\n\n## Core Store Types\n\n### writable\nCreate a store with read/write access via subscription.\n\n```dts\nfunction writable<T>(\n\tvalue?: T | undefined,\n\tstart?: StartStopNotifier<T> | undefined\n): Writable<T>;\n```\n\n### readable\nCreate a read-only store.\n\n```dts\nfunction readable<T>(\n\tvalue?: T | undefined,\n\tstart?: StartStopNotifier<T> | undefined\n): Readable<T>;\n```\n\n### derived\nDerive values from one or more stores with aggregation function.\n\n```dts\nfunction derived<S extends Stores, T>(\n\tstores: S,\n\tfn: (values: StoresValues<S>) => T,\n\tinitial_value?: T | undefined\n): Readable<T>;\n```\n\n```dts\nfunction derived<S extends Stores, T>(\n\tstores: S,\n\tfn: (\n\t\tvalues: StoresValues<S>,\n\t\tset: (value: T) => void,\n\t\tupdate: (fn: Updater<T>) => void\n\t) => Unsubscriber | void,\n\tinitial_value?: T | undefined\n): Readable<T>;\n```\n\n## Utilities\n\n### get\nGet current value by subscribing and immediately unsubscribing.\n\n```dts\nfunction get<T>(store: Readable<T>): T;\n```\n\n### readonly\nConvert any store to read-only.\n\n```dts\nfunction readonly<T>(store: Readable<T>): Readable<T>;\n```\n\n### toStore\nConvert getter/setter to store.\n\n```dts\nfunction toStore<V>(get: () => V, set: (v: V) => void): Writable<V>;\nfunction toStore<V>(get: () => V): Readable<V>;\n```\n\n### fromStore\nConvert store to reactive object.\n\n```dts\nfunction fromStore<V>(store: Writable<V>): { current: V };\nfunction fromStore<V>(store: Readable<V>): { readonly current: V };\n```\n\n## Interfaces & Types\n\n### Readable\n```dts\ninterface Readable<T> {\n\tsubscribe(run: Subscriber<T>, invalidate?: () => void): Unsubscriber;\n}\n```\n\n### Writable\n```dts\ninterface Writable<T> extends Readable<T> {\n\tset(value: T): void;\n\tupdate(updater: Updater<T>): void;\n}\n```\n\n### Types\n```dts\ntype Subscriber<T> = (value: T) => void;\ntype Unsubscriber = () => void;\ntype Updater<T> = (value: T) => T;\ntype StartStopNotifier<T> = (\n\tset: (value: T) => void,\n\tupdate: (fn: Updater<T>) => void\n) => void | (() => void);\n```",
+		"svelte/svelte-transition": "# Svelte Transitions\n\n## Import\n\n```js\nimport { blur, crossfade, draw, fade, fly, scale, slide } from 'svelte/transition';\n```\n\n## Built-in Transitions\n\n### blur\nAnimates blur filter + opacity.\n\n```dts\nfunction blur(\n\tnode: Element,\n\t{ delay, duration, easing, amount, opacity }?: BlurParams\n): TransitionConfig;\n```\n\n### fade\nAnimates opacity from 0 to current (in) or current to 0 (out).\n\n```dts\nfunction fade(\n\tnode: Element,\n\t{ delay, duration, easing }?: FadeParams\n): TransitionConfig;\n```\n\n### fly\nAnimates x/y position + opacity. `in` animates from provided values to defaults, `out` animates from defaults to provided values.\n\n```dts\nfunction fly(\n\tnode: Element,\n\t{ delay, duration, easing, x, y, opacity }?: FlyParams\n): TransitionConfig;\n```\n\n### scale\nAnimates scale + opacity. `in` animates from provided values to defaults, `out` animates from defaults to provided values.\n\n```dts\nfunction scale(\n\tnode: Element,\n\t{ delay, duration, easing, start, opacity }?: ScaleParams\n): TransitionConfig;\n```\n\n### slide\nSlides element in/out.\n\n```dts\nfunction slide(\n\tnode: Element,\n\t{ delay, duration, easing, axis }?: SlideParams\n): TransitionConfig;\n```\n\n### draw\nAnimates SVG stroke (snake-in-tube effect). Works with elements having `getTotalLength()` like `<path>` and `<polyline>`.\n\n```dts\nfunction draw(\n\tnode: SVGElement & { getTotalLength(): number },\n\t{ delay, speed, duration, easing }?: DrawParams\n): TransitionConfig;\n```\n\n### crossfade\nCreates `send`/`receive` transition pair. Sent element transforms to received element's position and fades out. If no counterpart, uses `fallback` transition.\n\n```dts\nfunction crossfade({\n\tfallback,\n\t...defaults\n}: CrossfadeParams & {\n\tfallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;\n}): [send, receive];\n```\n\n## Type Definitions\n\n```dts\ntype EasingFunction = (t: number) => number;\n\ninterface TransitionConfig {\n\tdelay?: number;\n\tduration?: number;\n\teasing?: EasingFunction;\n\tcss?: (t: number, u: number) => string;\n\ttick?: (t: number, u: number) => void;\n}\n\ninterface BlurParams {\n\tdelay?: number;\n\tduration?: number;\n\teasing?: EasingFunction;\n\tamount?: number | string;\n\topacity?: number;\n}\n\ninterface FadeParams {\n\tdelay?: number;\n\tduration?: number;\n\teasing?: EasingFunction;\n}\n\ninterface FlyParams {\n\tdelay?: number;\n\tduration?: number;\n\teasing?: EasingFunction;\n\tx?: number | string;\n\ty?: number | string;\n\topacity?: number;\n}\n\ninterface ScaleParams {\n\tdelay?: number;\n\tduration?: number;\n\teasing?: EasingFunction;\n\tstart?: number;\n\topacity?: number;\n}\n\ninterface SlideParams {\n\tdelay?: number;\n\tduration?: number;\n\teasing?: EasingFunction;\n\taxis?: 'x' | 'y';\n}\n\ninterface DrawParams {\n\tdelay?: number;\n\tspeed?: number;\n\tduration?: number | ((len: number) => number);\n\teasing?: EasingFunction;\n}\n\ninterface CrossfadeParams {\n\tdelay?: number;\n\tduration?: number | ((len: number) => number);\n\teasing?: EasingFunction;\n}\n```",
+		"svelte/compiler-errors": "# Svelte 5 Error Messages Reference\n\n## Animation Directives\n\n- **animation_duplicate**: Only one `animate:` directive per element\n- **animation_invalid_placement**: `animate:` must be on the only child of a keyed `{#each}` block\n- **animation_missing_key**: Did you forget to add a key to your each block?\n\n## Attributes\n\n- **attribute_contenteditable_dynamic**: `contenteditable` must be static when using two-way binding\n- **attribute_contenteditable_missing**: `contenteditable` required for `textContent`, `innerHTML`, `innerText` bindings\n- **attribute_duplicate**: Attributes must be unique\n- **attribute_invalid_event_handler**: Event attributes must be JavaScript expressions, not strings\n- **attribute_invalid_multiple**: `multiple` must be static on `<select>` with two-way binding\n- **attribute_invalid_type**: `type` must be static on `<input>` with two-way binding\n- **attribute_unquoted_sequence**: Attribute values with `{...}` must be quoted unless only containing the expression\n\n## Bindings\n\n- **bind_group_invalid_expression**: `bind:group` only accepts Identifier or MemberExpression\n- **bind_invalid_expression**: Can only bind to Identifier, MemberExpression, or `{get, set}` pair\n- **bind_invalid_value**: Can only bind to state or props\n\n### Each Block Binding (Runes Mode)\n\n**each_item_invalid_assignment**: Cannot reassign/bind to each block argument in runes mode.\n\n```svelte\n<!-- ❌ Legacy (not allowed in runes) -->\n{#each array as entry}\n  <button onclick={() => entry = 4}>change</button>\n  <input bind:value={entry}>\n{/each}\n\n<!-- ✅ Runes mode -->\n<script>\n  let array = $state([1, 2, 3]);\n</script>\n\n{#each array as entry, i}\n  <button onclick={() => array[i] = 4}>change</button>\n  <input bind:value={array[i]}>\n{/each}\n```\n\n## Blocks\n\n- **block_invalid_elseif**: Use `else if`, not `elseif`\n- **block_unclosed**: Block was left open\n- **block_unexpected_close**: Unexpected block closing tag\n\n## {@const} Tag\n\n- **const_tag_invalid_placement**: `{@const}` must be immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`\n\n**const_tag_invalid_reference**: `{@const}` not available across snippet boundaries\n\n```svelte\n<!-- ❌ Error -->\n<svelte:boundary>\n  {@const foo = 'bar'}\n  {#snippet failed()}\n    {foo} <!-- Not available here -->\n  {/snippet}\n</svelte:boundary>\n\n<!-- Equivalent to: -->\n<svelte:boundary>\n  {#snippet children()}\n    {@const foo = 'bar'}\n  {/snippet}\n  {#snippet failed()}\n    {foo} <!-- foo is in different snippet -->\n  {/snippet}\n</svelte:boundary>\n```\n\n## CSS\n\n- **css_global_block_invalid_list**: Cannot mix `:global` with scoped selectors in same list\n\n```css\n/* ❌ Invalid */\n:global, x {\n  y { color: red; }\n}\n\n/* ✅ Split into two */\n:global {\n  y { color: red; }\n}\nx y {\n  color: red; }\n```\n\n- **css_global_invalid_placement**: `:global(...)` must be at start or end of selector, not middle\n- **css_type_selector_invalid_placement**: `:global(...)` cannot be followed by type selector\n\n## Runes\n\n### $state\n\n**state_invalid_placement**: `$state()` only valid as:\n- Variable declaration initializer\n- Class field declaration  \n- First assignment to class field in constructor\n\n**state_field_duplicate**: Cannot declare same state field twice\n\n```js\nclass Counter {\n  count = $state(0); // Declaration in class body\n}\n\n// OR\n\nclass Counter {\n  constructor() {\n    this.count = $state(0); // Declaration in constructor\n  }\n}\n```\n\n### $derived\n\n**derived_invalid_export**: Cannot export derived state. Export a function returning its value instead.\n\n### $effect\n\n**effect_invalid_placement**: `$effect()` can only be used as an expression statement\n\n### $props\n\n- **props_invalid_placement**: `$props()` only at top level as variable declaration initializer\n- **props_invalid_identifier**: `$props()` requires object destructuring pattern\n- **props_invalid_pattern**: No nested properties or computed keys in `$props()`\n- **props_duplicate**: Cannot use `$props()` more than once\n\n### $bindable\n\n**bindable_invalid_location**: `$bindable()` only inside `$props()` declaration\n\n### General Rune Errors\n\n- **rune_invalid_usage**: Cannot use runes in non-runes mode\n- **rune_missing_parentheses**: Runes require parentheses\n- **dollar_prefix_invalid**: `$` prefix reserved, cannot use for variables/imports\n\n## Legacy Mode Restrictions\n\n- **legacy_export_invalid**: Cannot use `export let` in runes mode — use `$props()`\n- **legacy_reactive_statement_invalid**: `$:` not allowed in runes mode — use `$derived` or `$effect`\n- **legacy_props_invalid**: Cannot use `$$props` in runes mode\n- **legacy_rest_props_invalid**: Cannot use `$$restProps` in runes mode\n\n## Event Handlers\n\n- **mixed_event_handler_syntaxes**: Don't mix `on:name` and `onname` syntaxes\n- **event_handler_invalid_component_modifier**: Only `once` modifier valid on components\n\n## Snippets\n\n**snippet_invalid_export**: Exported snippet can only reference `<script module>` declarations or other exportable snippets\n\n```svelte\n<!-- ❌ Error -->\n<script module>\n  export { greeting };\n</script>\n<script>\n  let message = 'hello';\n</script>\n{#snippet greeting(name)}\n  <p>{message} {name}!</p> <!-- references non-module script -->\n{/snippet}\n```\n\n- **snippet_conflict**: Cannot use explicit children snippet with implicit children content\n- **slot_snippet_conflict**: Cannot mix `<slot>` and `{@render ...}` in same component\n- **snippet_parameter_assignment**: Cannot reassign/bind to snippet parameter\n\n## Special Elements\n\n### `<svelte:component>`\n- **svelte_component_missing_this**: Requires `this` attribute\n\n### `<svelte:element>`\n- **svelte_element_missing_this**: Requires `this` attribute with value\n\n### `<svelte:boundary>`\n- **svelte_boundary_invalid_attribute**: Valid attributes: `onerror`, `failed`\n\n### `<svelte:options>`\n- **svelte_options_deprecated_tag**: Use `customElement` instead of `tag`\n- **svelte_options_invalid_customelement**: Must be string or object: `{ tag?: string; shadow?: \"open\" | \"none\"; props?: {...} }`\n\n### `<svelte:self>`\n- **svelte_self_invalid_placement**: Only inside `{#if}`, `{#each}`, `{#snippet}` blocks or slots\n\n## HTML Validation\n\n**node_invalid_placement**: Browser will repair invalid HTML, breaking Svelte assumptions\n\nExamples:\n- `<p><div>...</div></p>` → `<p></p><div>...</div><p></p>`\n- `<option><div>...</div></option>` → `<option>...</option>`\n- `<table><tr>...</tr></table>` → `<table><tbody><tr>...</tr></tbody></table>`\n\n## Stores\n\n- **store_invalid_subscription_module**: Cannot reference store value outside `.svelte` files\n- **store_invalid_scoped_subscription**: Cannot subscribe to stores not declared at component top level\n\n## Miscellaneous\n\n- **void_element_invalid_content**: Void elements cannot have children/closing tags\n- **textarea_invalid_content**: `<textarea>` can have value attribute OR child content, not both\n- **import_svelte_internal_forbidden**: `svelte/internal/*` imports forbidden",
+		"svelte/compiler-warnings": "# Svelte Warnings\n\n## Disabling Warnings\n\nUse `<!-- svelte-ignore <code> -->` above the line causing the warning:\n\n```svelte\n<!-- svelte-ignore a11y_autofocus -->\n<input autofocus />\n```\n\nMultiple rules (comma-separated) with optional note:\n\n```svelte\n<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->\n<div onclick>...</div>\n```\n\n## Accessibility (a11y)\n\n### a11y_accesskey\nAvoid `accesskey` - creates accessibility complications.\n\n### a11y_aria_activedescendant_has_tabindex\nElements with `aria-activedescendant` must have `tabindex`.\n\n### a11y_aria_attributes\nReserved elements (`meta`, `html`, `script`, `style`) cannot have `aria-*` attributes.\n\n### a11y_autofocus\nAvoid `autofocus` - causes usability issues.\n\n### a11y_click_events_have_key_events\nVisible, non-interactive elements with `onclick` need keyboard handler (`onkeyup`/`onkeydown`) and `tabindex`. Consider using `<button>` or `<a>` instead.\n\n```svelte\n<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. -->\n<div onclick={() => {}}></div>\n```\n\n### a11y_distracting_elements\nAvoid `<marquee>` and `<blink>`.\n\n### a11y_figcaption_index / a11y_figcaption_parent\n`<figcaption>` must be first/last child and immediate child of `<figure>`.\n\n### a11y_hidden\nDon't hide important elements (headings, etc.) with `aria-hidden`.\n\n### a11y_img_redundant_alt\nDon't use \"image\", \"photo\", \"picture\" in alt text - screen readers already announce images.\n\n### a11y_incorrect_aria_attribute_type\nUse correct value types for ARIA attributes (e.g., `aria-hidden` needs boolean).\n\n### a11y_interactive_supports_focus\nInteractive roles need `tabindex`.\n\n### a11y_invalid_attribute\nAttributes like `href` shouldn't be empty, `'#'`, or `javascript:`.\n\n### a11y_label_has_associated_control\nLabels need associated control (wrap input or use `for` attribute).\n\n### a11y_media_has_caption\n`<video>` needs `<track kind=\"captions\">` (unless `muted`).\n\n### a11y_misplaced_role\nReserved elements (`meta`, `html`, `script`, `style`) cannot have `role`.\n\n### a11y_misplaced_scope\n`scope` attribute only for `<th>` elements.\n\n### a11y_missing_attribute\nRequired attributes:\n- `<a>`: `href`\n- `<area>`: `alt`, `aria-label`, or `aria-labelledby`\n- `<html>`: `lang`\n- `<iframe>`: `title`\n- `<img>`: `alt`\n- `<object>`: `title`, `aria-label`, or `aria-labelledby`\n- `<input type=\"image\">`: `alt`, `aria-label`, or `aria-labelledby`\n\n### a11y_missing_content\nHeadings and anchors need accessible content.\n\n### a11y_mouse_events_have_key_events\n`onmouseover` needs `onfocus`, `onmouseout` needs `onblur`.\n\n### a11y_no_abstract_role\nDon't use abstract ARIA roles.\n\n### a11y_no_interactive_element_to_noninteractive_role\nDon't convert interactive elements (e.g., `<textarea>`) to non-interactive roles.\n\n### a11y_no_noninteractive_element_interactions\nNon-interactive elements (`<main>`, `<p>`, `<img>`, `<li>`, etc.) shouldn't have mouse/keyboard handlers.\n\n### a11y_no_noninteractive_element_to_interactive_role\nDon't convert non-interactive elements to interactive roles.\n\n### a11y_no_noninteractive_tabindex\nNon-interactive elements can't have non-negative `tabindex`.\n\n### a11y_no_redundant_roles\nDon't specify roles already set by browser (e.g., `<button role=\"button\">`).\n\n### a11y_no_static_element_interactions\nElements like `<div>` with handlers need ARIA role.\n\n### a11y_positive_tabindex\nAvoid `tabindex` values above zero.\n\n### a11y_role_has_required_aria_props\nARIA roles need all required attributes.\n\n### a11y_role_supports_aria_props\nOnly use `aria-*` attributes supported by the role.\n\n### a11y_unknown_aria_attribute\nUse valid ARIA attributes from WAI-ARIA spec.\n\n### a11y_unknown_role\nUse valid, non-abstract ARIA roles.\n\n## HTML & Attributes\n\n### attribute_avoid_is\nAvoid `is` attribute - not cross-browser compatible.\n\n### attribute_illegal_colon\nDon't use `:` in attributes (conflicts with Svelte directives).\n\n### attribute_quoted\nQuoted attributes on components/custom elements will be stringified in future versions.\n\n### bidirectional_control_characters\nBidirectional control characters detected - can alter code direction unexpectedly.\n\n### element_implicitly_closed\nSome elements implicitly close others (e.g., `<p>` inside `<p>`). Use explicit closing tags.\n\n### element_invalid_self_closing_tag\nUse `<span></span>` not `<span />` for non-void elements. Run `npx sv migrate self-closing-tags`.\n\n### node_invalid_placement_ssr\nHTML structure violations cause browser repairs, breaking hydration.\n\n## Component & Script\n\n### bind_invalid_each_rest\nRest operator creates new object - binding won't work with original.\n\n### component_name_lowercase\nComponents must start with capital letter.\n\n### export_let_unused\nUnused export property. Use `export const` for external reference.\n\n### legacy_component_creation\nUse `mount` or `hydrate` (from 'svelte') instead of class instantiation.\n\n### script_context_deprecated\nUse `<script module>` instead of `<script context=\"module\">`.\n\n### script_unknown_attribute\nValid attributes: `generics`, `lang`, `module`.\n\n## Svelte 5 Specific\n\n### event_directive_deprecated\nUse `on%name%` instead of `on:%name%`.\n\n### slot_element_deprecated\nUse `{@render ...}` instead of `<slot>`.\n\n### svelte_component_deprecated\nComponents are dynamic by default - `<svelte:component>` unnecessary. Use `<Component />` or intermediary variable:\n\n```svelte\n{#each items as item}\n\t{@const Component = item.condition ? Y : Z}\n\t<Component />\n{/each}\n```\n\n### svelte_self_deprecated\nUse self-imports instead: `import %name% from './%basename%'`.\n\n### custom_element_props_identifier\nDestructure `$props()` or specify `customElement.props` for custom elements.\n\n## State & Reactivity\n\n### non_reactive_update\nVariable updated but not declared with `$state()`. Wrap with `$state`:\n\n```svelte\n<script>\n\tlet reactive = $state('reactive');\n\tlet stale = 'stale'; // Warning: won't trigger updates\n</script>\n```\n\n### state_referenced_locally\nPassing state directly breaks reactivity link. Wrap in function for lazy evaluation:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\t// Wrong: setContext('count', count);\n\tsetContext('count', () => count); // Correct\n</script>\n```\n\n### reactive_declaration_invalid_placement\nReactive declarations only at top level of instance script.\n\n### store_rune_conflict\nRename local binding to avoid conflict with `$` rune prefix.\n\n## Options & Config\n\n### options_deprecated_accessors / options_deprecated_immutable\nNo effect in runes mode.\n\n### options_removed_enable_sourcemap\nSource maps always generated.\n\n### options_removed_hydratable\nComponents always hydratable.\n\n### options_renamed_ssr_dom\nUse `\"client\"` and `\"server\"` instead of `\"dom\"` and `\"ssr\"`.\n\n## CSS\n\n### css_unused_selector\nUnused selector. Use `:global` for `{@html}` or child component styles:\n\n```svelte\n<style>\n  .post :global {\n    p {...}\n  }\n</style>\n```\n\n## Performance\n\n### perf_avoid_inline_class / perf_avoid_nested_class\nDeclare classes at top level scope.",
+		"svelte/runtime-errors": "# Client Errors\n\n## async_derived_orphan\nCannot create `$derived(...)` with `await` outside an effect tree.\n\n`$derived` runs lazily and can be garbage collected. `$effect` runs eagerly until destroyed. Async deriveds use an effect internally, so they must be created inside another effect or effect root (like component initialization).\n\n## bind_invalid_checkbox_value\nUse `bind:checked` instead of `bind:value` with checkbox inputs.\n\n## bind_invalid_export\nCannot use `bind:key` on component exports. Use `bind:this` instead:\n```svelte\n<Component bind:this={component} />\n<!-- then access: component.key -->\n```\n\n## bind_not_bindable\nTo make a property bindable: `let { key = $bindable() } = $props()`\n\n## component_api_changed / component_api_invalid_new\nComponents are no longer classes in Svelte 5. Cannot call methods or use `new` on component instances. See migration guide.\n\n## derived_references_self\nA derived value cannot reference itself recursively.\n\n## each_key_duplicate\nKeyed each block has duplicate keys.\n\n## effect_in_teardown\n`%rune%` cannot be used inside effect cleanup functions.\n\n## effect_in_unowned_derived\nEffect cannot be created inside a `$derived` that wasn't itself created inside an effect.\n\n## effect_orphan\n`%rune%` can only be used inside an effect (e.g. during component initialization).\n\n## effect_pending_outside_reaction\n`$effect.pending()` can only be called inside an effect or derived.\n\n## effect_update_depth_exceeded\nEffect reads and writes the same state, causing infinite loop:\n\n```js\nlet count = $state(0);\n\n$effect(() => {\n\t// reads and writes count - infinite loop\n\tcount += 1;\n});\n```\n\n```js\nlet array = $state(['hello']);\n\n$effect(() => {\n\tarray.push('goodbye'); // mutates array it depends on\n});\n});\n```\n\n**Fix:** Use non-reactive values or `untrack()` to read without adding dependency. Effects that settle are fine:\n\n```js\n$effect(() => {\n\tarray.sort(); // OK if already sorted\n});\n```\n\n## flush_sync_in_effect\nCannot use `flushSync()` inside an effect. Call it after state changes, not during effect execution. (Applies with `experimental.async` option)\n\n## get_abort_signal_outside_reaction\n`getAbortSignal()` can only be called inside an effect or derived.\n\n## hydration_failed\nFailed to hydrate the application.\n\n## invalid_snippet\nUse optional chaining for nullable snippets: `{@render snippet?.()}`\n\n## lifecycle_legacy_only\n`%name%(...)` cannot be used in runes mode.\n\n## props_invalid_value\nCannot do `bind:key={undefined}` when `key` has a fallback value.\n\n## props_rest_readonly\nRest element properties of `$props()` are readonly.\n\n## rune_outside_svelte\nRunes only available inside `.svelte` and `.svelte.js/ts` files.\n\n## set_context_after_init\n`setContext` must be called during component initialization, not in effects or after `await`. (Applies with `experimental.async` option)\n\n## state_descriptors_fixed\nProperty descriptors on `$state` objects must contain `value` and be `enumerable`, `configurable`, and `writable`.\n\n## state_prototype_fixed\nCannot set prototype of `$state` object.\n\n## state_unsafe_mutation\nCannot update state inside `$derived(...)`, `$inspect(...)`, or template expressions.\n\n**Wrong:**\n```js\nlet count = $state(0);\nlet even = $state(true);\n\nlet odd = $derived.by(() => {\n\teven = count % 2 === 0; // mutation in derived\n\treturn !even;\n});\n```\n\n**Fix:** Make everything derived:\n```js\nlet even = $derived(count % 2 === 0);\nlet odd = $derived(!even);\n```\n\nUse `$effect` if side-effects are unavoidable.\n\n## svelte_boundary_reset_onerror\nCannot call `reset()` synchronously in `<svelte:boundary>` `onerror`. Wait for boundary to settle:\n\n```svelte\n<svelte:boundary onerror={async (error, reset) => {\n\tfixTheError();\n\tawait tick();\n\treset();\n}}>\n</svelte:boundary>\n```\n\n# Server Errors\n\n## await_invalid\nEncountered async work while rendering synchronously. Either `await` the result of `render()` or wrap `await` in `<svelte:boundary>` with `pending` snippet.\n\n## html_deprecated\nUse `body` instead of `html` property in server render results.\n\n## lifecycle_function_unavailable\nMethods like `mount()` unavailable on server. Don't call them during render.\n\n# Shared Errors\n\n## invalid_default_snippet\nCannot use `{@render children(...)}` if parent uses `let:` directives. Use named snippets instead.\n\n## invalid_snippet_arguments\nSnippets should only be instantiated via `{@render ...}`.\n\n## lifecycle_outside_component\nLifecycle methods only work during component initialization at top level:\n\n```svelte\n<script>\n    import { onMount } from 'svelte';\n\n    function handleClick() {\n        onMount(() => {}) // Wrong\n    }\n\n    onMount(() => {}) // Correct\n</script>\n```\n\n## snippet_without_render_tag\nUse `{@render snippet()}` instead of `{snippet}` to render snippet content.\n\n## store_invalid_shape\n`%name%` is not a store with a `subscribe` method.\n\n## svelte_element_invalid_this_value\nThe `this` prop on `<svelte:element>` must be a string, if defined.",
+		"svelte/runtime-warnings": "# Client Warnings\n\n## assignment_value_stale\n\nAssignment to a property will evaluate to the right-hand side, not the resulting value after assignment.\n\n```svelte\n<script>\n\tlet object = $state({ array: null });\n\n\tfunction add() {\n\t\t(object.array ??= []).push(object.array.length);\n\t}\n</script>\n\n<button onclick={add}>add</button>\n<p>items: {JSON.stringify(object.items)}</p>\n```\n\nThe array being pushed to is `[]` on the right-hand side, but `object.array` becomes an empty state proxy. The pushed value is discarded.\n\n**Fix:** Separate into two statements:\n\n```js\nfunction add() {\n\tobject.array ??= [];\n\tobject.array.push(object.array.length);\n}\n```\n\n## await_reactivity_loss\n\nState read after `await` in async functions isn't tracked.\n\n```js\nasync function sum() {\n\treturn await a + b;\n}\n\nlet total = $derived(await sum());\n```\n\n`total` depends on `a` but not `b`. **Fix:** Pass values as arguments:\n\n```js\nasync function sum(a, b) {\n\treturn await a + b;\n}\n\nlet total = $derived(await sum(a, b));\n```\n\n## await_waterfall\n\nAsync deriveds not read immediately after resolving create unnecessary waterfalls.\n\n```js\nlet a = $derived(await one());\nlet b = $derived(await two());\n```\n\n`b` waits for `a` unnecessarily. **Fix:** Create promises first:\n\n```js\nlet aPromise = $derived(one());\nlet bPromise = $derived(two());\n\nlet a = $derived(await aPromise);\nlet b = $derived(await bPromise);\n```\n\n## console_log_state\n\nLogging `$state` proxies shows the proxy, not the value.\n\n**Fix:** Use [`$inspect(...)`](/docs/svelte/$inspect) or [`$state.snapshot(...)`](/docs/svelte/$state#$state.snapshot).\n\n## hydration_attribute_changed\n\nCertain attributes (like `src` on `<img>`) keep server values during hydration to avoid refetching.\n\n**Fix:** Ensure values match between server/client, or force update:\n\n```svelte\n<script>\n\tlet { src } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\tconst initial = src;\n\t\tsrc = undefined;\n\t\t$effect(() => {\n\t\t\tsrc = initial;\n\t\t});\n\t}\n</script>\n\n<img {src} />\n```\n\n## hydration_html_changed\n\n`{@html ...}` values aren't repaired during hydration.\n\n**Fix:** Same pattern as `hydration_attribute_changed` above.\n\n## hydration_mismatch\n\nInitial UI doesn't match server-rendered HTML. Often caused by invalid HTML structure.\n\n## ownership_invalid_binding\n\nWhen passing bound props through components, all intermediate components must use `bind:`.\n\n```svelte\n<!-- GrandParent.svelte -->\n<Parent bind:value />  <!-- Not just {value} -->\n\n<!-- Parent.svelte -->\n<Child bind:value />\n```\n\n## ownership_invalid_mutation\n\nMutating unbound props is discouraged.\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { person } = $props();\n</script>\n\n<input bind:value={person.name}>\n```\n\n**Fix:** Use callbacks or mark prop as [`$bindable`]($bindable).\n\n## select_multiple_invalid_value\n\n`<select multiple value={...}>` expects an array. Use `null`/`undefined` to keep selection as-is.\n\n## state_proxy_equality_mismatch\n\n`$state(...)` creates a proxy with different identity than the original value:\n\n```svelte\n<script>\n\tlet value = { foo: 'bar' };\n\tlet proxy = $state(value);\n\n\tvalue === proxy; // always false\n</script>\n```\n\n**Fix:** Compare values that are both proxies or both non-proxies. Use `$state.raw(...)` to avoid proxies.\n\n## state_proxy_unmount\n\nDon't pass `$state` values to `unmount()`. Use `$state.raw()` if reactivity is needed.\n\n## svelte_boundary_reset_noop\n\n`<svelte:boundary>` `reset` function only works on first call.\n\n## transition_slide_display\n\n`slide` transition requires `display: block/flex/grid`. Doesn't work with `inline`, `table`, or `contents`.\n\n# Shared Warnings\n\n## dynamic_void_element_content\n\nVoid elements like `<input>` cannot have content in `<svelte:element>`.\n\n## state_snapshot_uncloneable\n\n`$state.snapshot()` returns original value for uncloneable objects (like DOM elements):\n\n```js\nconst object = $state({ property: 'this is cloneable', window })\nconst snapshot = $state.snapshot(object);\n```\n\n`property` is cloned, `window` is not.",
+		"svelte/legacy-overview": "# Legacy Features\n\nSvelte 5 introduced **runes**, **snippets**, and **event attributes**. Svelte 3/4 features are deprecated but still supported.\n\n## Modes\n\n- **Legacy mode**: Svelte 3/4 syntax (default for components without runes)\n- **Runes mode**: Svelte 5 syntax (enabled by using runes or `runes: true` compiler option)\n\nOnce in runes mode, legacy features are unavailable.\n\nFor Svelte 3/4 docs: [v4.svelte.dev](https://v4.svelte.dev)",
+		"svelte/legacy-let": "# Legacy Mode Reactivity\n\n## Auto-reactive Variables\n\nIn legacy mode (non-runes), top-level component variables are automatically reactive. Reassignment/mutation triggers UI updates.\n\n```svelte\n<script>\n\tlet count = 0;\n</script>\n\n<button on:click={() => count += 1}>\n\tclicks: {count}\n</button>\n```\n\n## Gotcha: Array Methods\n\nArray methods like `.push()` and `.splice()` don't trigger updates. Requires subsequent assignment:\n\n```svelte\n<script>\n\tlet numbers = [1, 2, 3, 4];\n\n\tfunction addNumber() {\n\t\t// this method call does not trigger an update\n\t\tnumbers.push(numbers.length + 1);\n\n\t\t// this assignment will update anything\n\t\t// that depends on `numbers`\n\t\tnumbers = numbers;\n\t}\n</script>\n```",
+		"svelte/legacy-reactive-assignments": "# Reactive Statements (Legacy Mode)\n\n> **Note:** In runes mode, use [`$derived`]($derived) and [`$effect`]($effect) instead.\n\n## Basic Usage\n\nIn legacy mode, prefix top-level statements with `$:` to make them reactive. They run after `<script>` code and before rendering, then re-run when dependencies change.\n\n```svelte\n<script>\n\tlet a = 1;\n\tlet b = 2;\n\n\t// this is a 'reactive statement', and it will re-run\n\t// when `a`, `b` or `sum` change\n\t$: console.log(`${a} + ${b} = ${sum}`);\n\n\t// this is a 'reactive assignment' — `sum` will be\n\t// recalculated when `a` or `b` change. It is\n\t// not necessary to declare `sum` separately\n\t$: sum = a + b;\n</script>\n```\n\nStatements are ordered topologically by dependencies. `sum` calculates first despite appearing later.\n\n## Multiple Statements\n\nUse blocks for multiple statements:\n\n```js\n// @noErrors\n$: {\n\t// recalculate `total` when `items` changes\n\ttotal = 0;\n\n\tfor (const item of items) {\n\t\ttotal += item.value;\n\t}\n}\n```\n\n## Destructuring\n\nLeft-hand side can be destructuring:\n\n```js\n// @noErrors\n$: ({ larry, moe, curly } = stooges);\n```\n\n## Dependencies Gotcha\n\nDependencies are determined at **compile time** from variables referenced (not assigned) in the statement.\n\n**Won't work** - indirect reference:\n```js\n// @noErrors\nlet count = 0;\nlet double = () => count * 2;\n\n$: doubled = double();\n```\n\n**Won't work** - indirect dependency ordering:\n```svelte\n<script>\n\tlet x = 0;\n\tlet y = 0;\n\n\t$: z = y;\n\t$: setY(x);\n\n\tfunction setY(value) {\n\t\ty = value;\n\t}\n</script>\n```\nFix: Move `$: z = y` below `$: setY(x)`.\n\n## Browser-Only Code\n\nReactive statements run during SSR. Wrap browser-only code:\n\n```js\n// @noErrors\n$: if (browser) {\n\tdocument.title = title;\n}\n```",
+		"svelte/legacy-export-let": "# Legacy Props\n\n## Declaring Props\n\nIn legacy mode (non-runes), use `export` to declare props:\n\n```svelte\n<script>\n\texport let foo;\n\texport let bar = 'default value';\n\n\t// Props are immediately available\n\tconsole.log({ foo });\n</script>\n```\n\n**Key differences from runes mode:**\n- Default values apply only when prop is `undefined` at creation\n- If parent changes prop from defined → `undefined`, it does NOT revert to default\n\n**Required props:** Props without defaults are required. Svelte warns if missing. To silence warning:\n\n```js\nexport let foo = undefined;\n```\n\n## Component Exports\n\nExported `const`, `class`, or `function` become component API (not props):\n\n```svelte\n<!--- file: Greeter.svelte--->\n<script>\n\texport function greet(name) {\n\t\talert(`hello ${name}!`);\n\t}\n</script>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Greeter from './Greeter.svelte';\n\n\tlet greeter;\n</script>\n\n<Greeter bind:this={greeter} />\n\n<button on:click={() => greeter.greet('world')}>\n\tgreet\n</button>\n```\n\n## Renaming Props\n\nUse separate `export` to rename props (useful for reserved words):\n\n```svelte\n<script>\n\t/** @type {string} */\n\tlet className;\n\n\t// Creates a `class` prop\n\texport { className as class };\n</script>\n```",
+		"svelte/legacy-$$props-and-$$restProps": "# Legacy Props Access\n\n## `$$props` and `$$restProps`\n\nIn **legacy mode** (not runes mode), use these special variables to access props:\n\n- **`$$props`** - all props passed to component, including undeclared ones\n- **`$$restProps`** - all props except those declared with `export`\n\n### Example\n\n```svelte\n<script>\n\texport let variant;\n</script>\n\n<button {...$$restProps} class=\"variant-{variant} {$$props.class ?? ''}\">\n\tclick me\n</button>\n\n<style>\n\t.variant-danger {\n\t\tbackground: red;\n\t}\n</style>\n```\n\n**Note:** In Svelte 3/4, `$$props` and `$$restProps` have performance cost. Use only when needed.\n\n**Runes mode:** Use [`$props`]($props) rune instead.",
+		"svelte/legacy-on": "# Event Handlers\n\n## Runes Mode vs Legacy Mode\n\n**Runes mode**: Event handlers are just attributes/props.\n\n**Legacy mode**: Use `on:` directive.\n\n## Basic Usage\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\tlet count = 0;\n\n\t/** @param {MouseEvent} event */\n\tfunction handleClick(event) {\n\t\tcount += 1;\n\t}\n</script>\n\n<button on:click={handleClick}>\n\tcount: {count}\n</button>\n```\n\nInline handlers (no performance penalty):\n\n```svelte\n<button on:click={() => (count += 1)}>\n\tcount: {count}\n</button>\n```\n\n## Event Modifiers\n\nAdd modifiers with `|` character:\n\n```svelte\n<form on:submit|preventDefault={handleSubmit}>\n\t<!-- the `submit` event's default is prevented,\n\t     so the page won't reload -->\n</form>\n```\n\n**Available modifiers:**\n- `preventDefault` — calls `event.preventDefault()`\n- `stopPropagation` — prevents event reaching next element\n- `stopImmediatePropagation` — prevents other listeners of same event\n- `passive` — improves scrolling performance (auto-added when safe)\n- `nonpassive` — explicitly set `passive: false`\n- `capture` — fires during capture phase\n- `once` — remove handler after first run\n- `self` — only trigger if `event.target` is the element itself\n- `trusted` — only trigger if `event.isTrusted` is `true`\n\nChain modifiers: `on:click|once|capture={...}`\n\n## Event Forwarding\n\nEmpty `on:` directive forwards the event:\n\n```svelte\n<button on:click>\n\tThe component itself will emit the click event\n</button>\n```\n\n## Multiple Listeners\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\tlet count = 0;\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n\n\t/** @param {MouseEvent} event */\n\tfunction log(event) {\n\t\tconsole.log(event);\n\t}\n</script>\n\n<button on:click={increment} on:click={log}>\n\tclicks: {count}\n</button>\n```\n\n## Component Events (Legacy - Deprecated)\n\n**Note**: Use callback props instead for Svelte 5. `createEventDispatcher` is deprecated.\n\n**Callback props approach (recommended):**\n\n```svelte\n<!--- file: Stepper.svelte --->\n<script>\n\texport let decrement;\n\texport let increment;\n</script>\n\n<button on:click={decrement}>decrement</button>\n<button on:click={increment}>increment</button>\n```\n\n**Key points:**\n- Component events don't bubble (only immediate children)\n- Only `once` modifier valid on component events",
+		"svelte/legacy-slots": "# Legacy Slots\n\nIn Svelte 5, use [snippets](snippet) and [render tags](@render). In legacy mode, use `<slot>` elements.\n\n## Basic Usage\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Modal from './Modal.svelte';\n</script>\n\n<Modal>This is some slotted content</Modal>\n```\n\n```svelte\n<!--- file: Modal.svelte --->\n<div class=\"modal\">\n\t<slot></slot>\n</div>\n```\n\n> To render an actual `<slot>` element: `<svelte:element this={'slot'} />`\n\n## Named Slots\n\nParent uses `slot=\"...\"` attribute:\n\n```svelte\n<!--- file: App.svelte --->\n<Modal>\n\tThis is some slotted content\n\n\t<div slot=\"buttons\">\n\t\t<button on:click={() => open = false}>\n\t\t\tclose\n\t\t</button>\n\t</div>\n</Modal>\n```\n\nChild uses `<slot name=\"...\">`:\n\n```svelte\n<!--- file: Modal.svelte --->\n<div class=\"modal\">\n\t<slot></slot>\n\t<hr>\n\t<slot name=\"buttons\"></slot>\n</div>\n```\n\n## Fallback Content\n\n```svelte\n<slot>\n\tThis will be rendered if no slotted content is provided\n</slot>\n```\n\n## Passing Data to Slots\n\nSlots pass values back to parent using props. Parent uses `let:` directive:\n\n```svelte\n<!--- file: FancyList.svelte --->\n<ul>\n\t{#each items as data}\n\t\t<li class=\"fancy\">\n\t\t\t<slot item={process(data)} />\n\t\t</li>\n\t{/each}\n</ul>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<FancyList {items} let:item={processed}>\n\t<div>{processed.text}</div>\n</FancyList>\n```\n\nShorthand: `let:item` = `let:item={item}`, `<slot {item}>` = `<slot item={item}>`\n\n**Named slots with data:** `let:` goes on element with `slot` attribute:\n\n```svelte\n<!--- file: FancyList.svelte --->\n<ul>\n\t{#each items as item}\n\t\t<li class=\"fancy\">\n\t\t\t<slot name=\"item\" item={process(data)} />\n\t\t</li>\n\t{/each}\n</ul>\n\n<slot name=\"footer\" />\n```\n\n```svelte\n<!--- file: App.svelte --->\n<FancyList {items}>\n\t<div slot=\"item\" let:item>{item.text}</div>\n\t<p slot=\"footer\">Copyright (c) 2019 Svelte Industries</p>\n</FancyList>\n```",
+		"svelte/legacy-$$slots": "# $$slots (Legacy Mode)\n\nIn legacy mode, use `$$slots` object to check if slot content was provided. Keys are slot names.\n\n```svelte\n<!--- file: Card.svelte --->\n<div>\n\t<slot name=\"title\" />\n\t{#if $$slots.description}\n\t\t<!-- This <hr> and slot will render only if `slot=\"description\"` is provided. -->\n\t\t<hr />\n\t\t<slot name=\"description\" />\n\t{/if}\n</div>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<Card>\n\t<h1 slot=\"title\">Blog Post Title</h1>\n\t<!-- No slot named \"description\" was provided so the optional slot will not be rendered. -->\n</Card>\n```\n\n**Note:** In runes mode, use snippets as props instead.",
+		"svelte/legacy-svelte-fragment": "# `<svelte:fragment>`\n\nAllows placing content in a named slot without a wrapper DOM element.\n\n```svelte\n<!--- file: Widget.svelte --->\n<div>\n\t<slot name=\"header\">No header was provided</slot>\n\t<p>Some content between header and footer</p>\n\t<slot name=\"footer\" />\n</div>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Widget from './Widget.svelte';\n</script>\n\n<Widget>\n\t<h1 slot=\"header\">Hello</h1>\n\t<svelte:fragment slot=\"footer\">\n\t\t<p>All rights reserved.</p>\n\t\t<p>Copyright (c) 2019 Svelte Industries</p>\n\t</svelte:fragment>\n</Widget>\n```\n\n**Note:** Obsolete in Svelte 5+ — use snippets instead (no wrapper element needed).",
+		"svelte/legacy-svelte-component": "# `<svelte:component>`\n\n**Legacy mode only** - destroys and recreates component when `this` expression changes:\n\n```svelte\n<svelte:component this={MyComponent} />\n```\n\nIf `this` is falsy, no component is rendered.\n\n**Svelte 5 runes mode**: Use `<MyComponent>` directly - it re-renders automatically when the component value changes. `<svelte:component>` is no longer necessary.",
+		"svelte/legacy-svelte-self": "# `<svelte:self>`\n\nAllows a component to recursively include itself. Must be inside an `{#if}`, `{#each}` block, or slot to prevent infinite loops.\n\n```svelte\n<script>\n\texport let count;\n</script>\n\n{#if count > 0}\n\t<p>counting down... {count}</p>\n\t<svelte:self count={count - 1} />\n{:else}\n\t<p>lift-off!</p>\n{/if}\n```\n\n**Note:** Obsolete - components can now import themselves directly:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Self from './App.svelte'\n\texport let count;\n</script>\n\n{#if count > 0}\n\t<p>counting down... {count}</p>\n\t<Self count={count - 1} />\n{:else}\n\t<p>lift-off!</p>\n{/if}\n```",
+		"svelte/legacy-component-api": "# Legacy Component API (Svelte 3/4)\n\n> **Note:** This does NOT apply to Svelte 5 components or legacy mode in Svelte 5 apps.\n\n## Creating a Component\n\n```ts\nconst component = new Component(options);\n```\n\n**Options:**\n\n| option    | default     | description                                                                                          |\n| --------- | ----------- | ---------------------------------------------------------------------------------------------------- |\n| `target`  | **required**| `HTMLElement` or `ShadowRoot` to render to                                                           |\n| `anchor`  | `null`      | Child of `target` to render before                                                                   |\n| `props`   | `{}`        | Properties to supply to component                                                                    |\n| `context` | `new Map()` | Root-level context key-value pairs                                                                   |\n| `hydrate` | `false`     | Upgrade existing DOM instead of creating new (requires `hydratable: true` compile option)            |\n| `intro`   | `false`     | Play transitions on initial render                                                                   |\n\n```ts\nimport App from './App.svelte';\n\nconst app = new App({\n\ttarget: document.body,\n\tprops: { answer: 42 }\n});\n```\n\n**Svelte 5:** Use [`mount`](svelte#mount) instead\n\n## `$set`\n\n```ts\ncomponent.$set(props);\n```\n\nProgrammatically set props. Schedules update for next microtask (async).\n\n```ts\ncomponent.$set({ answer: 42 });\n```\n\n**Svelte 5:** Use `$state` for props:\n```js\nlet props = $state({ answer: 42 });\nconst component = mount(Component, { props });\nprops.answer = 24;\n```\n\n## `$on`\n\n```ts\ncomponent.$on(ev, callback);\n```\n\nListen to component events. Returns function to remove listener.\n\n```ts\nconst off = component.$on('selected', (event) => {\n\tconsole.log(event.detail.selection);\n});\noff();\n```\n\n**Svelte 5:** Use callback props instead\n\n## `$destroy`\n\n```js\ncomponent.$destroy();\n```\n\nRemove component from DOM and trigger `onDestroy` handlers.\n\n**Svelte 5:** Use [`unmount`](svelte#unmount) instead\n\n## Component Props (accessors)\n\n```js\ncomponent.prop;\ncomponent.prop = value;\n```\n\nWith `accessors: true` compile option, get/set props directly. Setting causes **synchronous** update (unlike `$set`).\n\n**Svelte 5:** Export properties to make them accessible\n\n## Server-Side API\n\n```js\nconst result = Component.render(...)\n```\n\nReturns object with `head`, `html`, `css` properties.\n\n```js\nrequire('svelte/register');\nconst App = require('./App.svelte').default;\n\nconst { head, html, css } = App.render(\n\t{ answer: 42 },\n\t{ context: new Map([['context-key', 'context-value']]) }\n);\n```\n\n**Svelte 5:** Use [`render`](svelte-server#render) instead"
+	},
+	"content": {
+		"cli/overview": "The command line interface (CLI), `sv`, is a toolkit for creating and maintaining Svelte applications.\n\n## Usage\n\nThe easiest way to run `sv` is with [`npx`](https://docs.npmjs.com/cli/v8/commands/npx) (or the equivalent command if you're using a different package manager — for example, `pnpx` if you're using [pnpm](https://pnpm.io/)):\n\n```sh\nnpx sv <command> <args>\n```\n\nIf you're inside a project where `sv` is already installed, this will use the local installation, otherwise it will download the latest version and run it without installing it, which is particularly useful for [`sv create`](sv-create).\n\n## Acknowledgements\n\nThank you to [Christopher Brown](https://github.com/chbrown) who originally owned the `sv` name on npm for graciously allowing it to be used for the Svelte CLI. You can find the original `sv` package at [`@chbrown/sv`](https://www.npmjs.com/package/@chbrown/sv).",
+		"cli/faq": "## How do I run the `sv` CLI?\n\nRunning `sv` looks slightly different for each package manager. Here is a list of the most common commands:\n\n- **npm** : `npx sv create`\n- **pnpm** : `pnpx sv create` or `pnpm dlx sv create`\n- **Bun** : `bunx sv create`\n- **Deno** : `deno run npm:sv create`\n- **Yarn** : `yarn dlx sv create`\n\n## `npx sv` is not working\n\nSome package managers prefer to run locally installed tools instead of downloading and executing packages from the registry. This issue mostly occurs with `npm` and `yarn`. This usually results in an error message or looks like the command you were trying to execute did not do anything.\n\nHere is a list of issues with possible solutions that users have encountered in the past:\n\n- [`npx sv` create does nothing](https://github.com/sveltejs/cli/issues/472)\n- [`sv` command name collides with `runit`](https://github.com/sveltejs/cli/issues/259)\n- [`sv` in windows powershell conflicts with `Set-Variable`](https://github.com/sveltejs/cli/issues/317)",
+		"cli/sv-create": "`sv create` sets up a new SvelteKit project, with options to [setup additional functionality](sv-add#Official-add-ons).\n\n## Usage\n\n```sh\nnpx sv create [options] [path]\n```\n\n## Options\n\n### `--from-playground <url>`\n\nCreate a SvelteKit project from a [playground](/playground) URL. This downloads all playground files, detects external dependencies, and sets up a complete SvelteKit project structure with everything ready to go.\n\nExample:\n\n```sh\nnpx sv create --from-playground=\"https://svelte.dev/playground/hello-world\"\n```\n\n### `--template <name>`\n\nWhich project template to use:\n\n- `minimal` — barebones scaffolding for your new app\n- `demo` — showcase app with a word guessing game that works without JavaScript\n- `library` — template for a Svelte library, set up with `svelte-package`\n\n### `--types <option>`\n\nWhether and how to add typechecking to the project:\n\n- `ts` — default to `.ts` files and use `lang=\"ts\"` for `.svelte` components\n- `jsdoc` — use [JSDoc syntax](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) for types\n\n### `--no-types`\n\nPrevent typechecking from being added. Not recommended!\n\n### `--no-add-ons`\n\nRun the command without the interactive add-ons prompt\n\n### `--install <package-manager>`\n\nInstalls dependencies with a specified package manager:\n\n- `npm`\n- `pnpm`\n- `yarn`\n- `bun`\n- `deno`\n\n### `--no-install`\n\nPrevents installing dependencies.\n\n<!-- ## Programmatic interface\n\n```js\n// TODO: this gives type checking errors in the docs site when not commented out. Need to release sv, install it in the site, and uncomment this.\n// import { create } from 'sv';\n\n// // todo: check if this is right\n// create(cwd, {\n// \t// add your options here\n// \t// todo: list available option\n// });\n```\n-->",
+		"cli/sv-add": "`sv add` updates an existing project with new functionality.\n\n## Usage\n\n```sh\nnpx sv add\n```\n\n```sh\nnpx sv add [add-ons]\n```\n\nYou can select multiple space-separated add-ons from [the list below](#Official-add-ons), or you can use the interactive prompt.\n\n## Options\n\n- `-C`, `--cwd` — path to the root of your Svelte(Kit) project\n- `--no-git-check` — even if some files are dirty, no prompt will be shown\n- `--install` — installs dependencies with a specified package manager\n- `--no-install` — prevents installing dependencies\n\n## Official add-ons\n\n<!-- TODO: it'd be nice for this to live on the \"add-ons\" page, but we first need svelte.dev to support making pages from headings -->\n\n- [`devtools-json`](devtools-json)\n- [`drizzle`](drizzle)\n- [`eslint`](eslint)\n- [`lucia`](lucia)\n- [`mdsvex`](mdsvex)\n- [`paraglide`](paraglide)\n- [`playwright`](playwright)\n- [`prettier`](prettier)\n- [`storybook`](storybook)\n- [`sveltekit-adapter`](sveltekit-adapter)\n- [`tailwindcss`](tailwind)\n- [`vitest`](vitest)",
+		"cli/sv-check": "`sv check` finds errors and warnings in your project, such as:\n\n- unused CSS\n- accessibility hints\n- JavaScript/TypeScript compiler errors\n\nRequires Node 16 or later.\n\n## Installation\n\nYou will need to have the `svelte-check` package installed in your project:\n\n```sh\nnpm i -D svelte-check\n```\n\n## Usage\n\n```sh\nnpx sv check\n```\n\n## Options\n\n### `--workspace <path>`\n\nPath to your workspace. All subdirectories except `node_modules` and those listed in `--ignore` are checked.\n\n### `--output <format>`\n\nHow to display errors and warnings. See [machine-readable output](#Machine-readable-output).\n\n- `human`\n- `human-verbose`\n- `machine`\n- `machine-verbose`\n\n### `--watch`\n\nKeeps the process alive and watches for changes.\n\n### `--preserveWatchOutput`\n\nPrevents the screen from being cleared in watch mode.\n\n### `--tsconfig <path>`\n\nPass a path to a `tsconfig` or `jsconfig` file. The path can be relative to the workspace path or absolute. Doing this means that only files matched by the `files`/`include`/`exclude` pattern of the config file are diagnosed. It also means that errors from TypeScript and JavaScript files are reported. If not given, will traverse upwards from the project directory looking for the next `jsconfig`/`tsconfig.json` file.\n\n### `--no-tsconfig`\n\nUse this if you only want to check the Svelte files found in the current directory and below and ignore any `.js`/`.ts` files (they will not be type-checked)\n\n### `--ignore <paths>`\n\nFiles/folders to ignore, relative to workspace root. Paths should be comma-separated and quoted. Example:\n\n```sh\nnpx sv check --ignore \"dist,build\"\n```\n\n<!-- TODO what the hell does this mean? is it possible to use --tsconfig AND --no-tsconfig? if so what would THAT mean? -->\n\nOnly has an effect when used in conjunction with `--no-tsconfig`. When used in conjunction with `--tsconfig`, this will only have effect on the files watched, not on the files that are diagnosed, which is then determined by the `tsconfig.json`.\n\n### `--fail-on-warnings`\n\nIf provided, warnings will cause `sv check` to exit with an error code.\n\n### `--compiler-warnings <warnings>`\n\nA quoted, comma-separated list of `code:behaviour` pairs where `code` is a [compiler warning code](../svelte/compiler-warnings) and `behaviour` is either `ignore` or `error`:\n\n```sh\nnpx sv check --compiler-warnings \"css_unused_selector:ignore,a11y_missing_attribute:error\"\n```\n\n### `--diagnostic-sources <sources>`\n\nA quoted, comma-separated list of sources that should run diagnostics on your code. By default, all are active:\n\n<!-- TODO would be nice to have a clearer definition of what these are -->\n- `js` (includes TypeScript)\n- `svelte`\n- `css`\n\nExample:\n\n```sh\nnpx sv check --diagnostic-sources \"js,svelte\"\n```\n\n### `--threshold <level>`\n\nFilters the diagnostics:\n\n- `warning` (default) — both errors and warnings are shown\n- `error` — only errors are shown\n\n## Troubleshooting\n\n[See the language-tools documentation](https://github.com/sveltejs/language-tools/blob/master/docs/README.md) for more information on preprocessor setup and other troubleshooting.\n\n## Machine-readable output\n\nSetting the `--output` to `machine` or `machine-verbose` will format output in a way that is easier to read\nby machines, e.g. inside CI pipelines, for code quality checks, etc.\n\nEach row corresponds to a new record. Rows are made up of columns that are separated by a\nsingle space character. The first column of every row contains a timestamp in milliseconds\nwhich can be used for monitoring purposes. The second column gives us the \"row type\", based\non which the number and types of subsequent columns may differ.\n\nThe first row is of type `START` and contains the workspace folder (wrapped in quotes). Example:\n\n```\n1590680325583 START \"/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles\"\n```\n\nAny number of `ERROR` or `WARNING` records may follow. Their structure is identical and depends on the output argument.\n\nIf the argument is `machine` it will tell us the filename, the starting line and column numbers, and the error message. The filename is relative to the workspace directory. The filename and the message are both wrapped in quotes. Example:\n\n```\n1590680326283 ERROR \"codeactions.svelte\" 1:16 \"Cannot find module 'blubb' or its corresponding type declarations.\"\n1590680326778 WARNING \"imported-file.svelte\" 0:37 \"Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`\"\n```\n\nIf the argument is `machine-verbose` it will tell us the filename, the starting line and column numbers, the ending line and column numbers, the error message, the code of diagnostic, the human-friendly description of the code and the human-friendly source of the diagnostic (eg. svelte/typescript). The filename is relative to the workspace directory. Each diagnostic is represented as an [ndjson](https://en.wikipedia.org/wiki/JSON_streaming#Newline-Delimited_JSON) line prefixed by the timestamp of the log. Example:\n\n```\n1590680326283 {\"type\":\"ERROR\",\"fn\":\"codeaction.svelte\",\"start\":{\"line\":1,\"character\":16},\"end\":{\"line\":1,\"character\":23},\"message\":\"Cannot find module 'blubb' or its corresponding type declarations.\",\"code\":2307,\"source\":\"js\"}\n1590680326778 {\"type\":\"WARNING\",\"filename\":\"imported-file.svelte\",\"start\":{\"line\":0,\"character\":37},\"end\":{\"line\":0,\"character\":51},\"message\":\"Component has unused export property 'prop'. If it is for external reference only, please consider using `export\nconst prop`\",\"code\":\"unused-export-let\",\"source\":\"svelte\"}\n```\n\nThe output concludes with a `COMPLETED` message that summarizes total numbers of files, errors and warnings that were encountered during the check. Example:\n\n```\n1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS\n```\n\nIf the application experiences a runtime error, this error will appear as a `FAILURE` record. Example:\n\n```\n1590680328921 FAILURE \"Connection closed\"\n```\n\n## Credits\n\n- Vue's [VTI](https://github.com/vuejs/vetur/tree/master/vti) which laid the foundation for `svelte-check`\n\n## FAQ\n\n### Why is there no option to only check specific files (for example only staged files)?\n\n`svelte-check` needs to 'see' the whole project for checks to be valid. Suppose you renamed a component prop but didn't update any of the places where the prop is used — the usage sites are all errors now, but you would miss them if checks only ran on changed files.",
+		"cli/sv-migrate": "`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate) package.\n\nSome migrations may annotate your codebase with tasks for completion that you can find by searching for `@migration`.\n\n## Usage\n\n```sh\nnpx sv migrate\n```\n\nYou can also specify a migration directly via the CLI:\n```sh\nnpx sv migrate [migration]\n```\n\n## Migrations\n\n### `app-state`\n\nMigrates `$app/stores` usage to `$app/state` in `.svelte` files. See the [migration guide](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated) for more details.\n\n### `svelte-5`\n\nUpgrades a Svelte 4 app to use Svelte 5, and updates individual components to use [runes](../svelte/what-are-runes) and other Svelte 5 syntax ([see migration guide](../svelte/v5-migration-guide)).\n\n### `self-closing-tags`\n\nReplaces all the self-closing non-void elements in your `.svelte` files. See the [pull request](https://github.com/sveltejs/kit/pull/12128) for more details.\n\n### `svelte-4`\n\nUpgrades a Svelte 3 app to use Svelte 4 ([see migration guide](../svelte/v4-migration-guide)).\n\n### `sveltekit-2`\n\nUpgrades a SvelteKit 1 app to SvelteKit 2 ([see migration guide](../kit/migrating-to-sveltekit-2)).\n\n### `package`\n\nUpgrades a library using `@sveltejs/package` version 1 to version 2. See the [pull request](https://github.com/sveltejs/kit/pull/8922) for more details.\n\n### `routes`\n\nUpgrades a pre-release SvelteKit app to use the filesystem routing conventions in SvelteKit 1. See the [pull request](https://github.com/sveltejs/kit/discussions/5774) for more details.",
+		"cli/devtools-json": "The `devtools-json` add-on installs [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json/), which is a Vite plugin for generating a Chromium DevTools project settings file on-the-fly in the development server. This file is served from `/.well-known/appspecific/com.chrome.devtools.json` and tells Chromium browsers where your project's source code lives so that you can use [the workspaces feature](https://developer.chrome.com/docs/devtools/workspaces) to edit source files in the browser.\n\n> [!NOTE]\n> Installing the plugin enables the feature for all users connecting to the dev server with a Chromium browser, and allows the browser to read and write all files within the directory. If using Chrome's AI Assistance feature, this may also result in data being sent to Google.\n\n## Alternatives\n\nIf you'd prefer not to install the plugin, but still want to avoid seeing a message about the missing file, you have a couple of options.\n\nFirstly, you can prevent the request from being issued on your machine by disabling the feature in your browser. You can do this in Chrome by visiting `chrome://flags` and disabling the \"DevTools Project Settings\". You may also be interested in disabling \"DevTools Automatic Workspace Folders\" since it’s closely related.\n\nYou can also prevent the web server from issuing a notice regarding the incoming request for all developers of your application by handling the request yourself. For example, you can create a file named `.well-known/appspecific/com.chrome.devtools.json` with the contents `\"Go away, Chrome DevTools!\"` or you can add logic to respond to the request in your [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) hook:\n\n```js\n/// file: src/hooks.server.js\nimport { dev } from '$app/environment';\n\nexport function handle({ event, resolve }) {\n\tif (dev && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {\n\t\treturn new Response(undefined, { status: 404 });\n\t}\n\n\treturn resolve(event);\n}\n```\n\n## Usage\n\n```sh\nnpx sv add devtools-json\n```\n\n## What you get\n\n- `vite-plugin-devtools-json` added to your Vite plugin options",
+		"cli/drizzle": "[Drizzle ORM](https://orm.drizzle.team/) is a TypeScript ORM offering both relational and SQL-like query APIs, and which is serverless-ready by design.\n\n## Usage\n\n```sh\nnpx sv add drizzle\n```\n\n## What you get\n\n- a setup that keeps your database access in SvelteKit's server files\n- an `.env` file to store your credentials\n- compatibility with the Lucia auth add-on\n- an optional Docker configuration to help with running a local database\n\n## Options\n\n### database\n\nWhich database variant to use:\n\n- `postgresql` — the most popular open source database\n- `mysql` — another popular open source database\n- `sqlite` — file-based database not requiring a database server\n\n```sh\nnpx sv add drizzle=database:postgresql\n```\n\n### client\n\nThe SQL client to use, depends on `database`:\n\n- For `postgresql`: `postgres.js`, `neon`,\n- For `mysql`: `mysql2`, `planetscale`\n- For `sqlite`: `better-sqlite3`, `libsql`, `turso`\n\n```sh\nnpx sv add drizzle=database:postgresql+client:postgres.js\n```\n\nDrizzle is compatible with well over a dozen database drivers. We just offer a few of the most common ones here for simplicity, but if you'd like to use another one you can choose one as a placeholder and swap it out for another after setup by choosing from [Drizzle's full list of compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps).\n\n### docker\n\nWhether to add Docker Compose configuration. Only available for [`database`](#Options-database) `postgresql` or `mysql`\n\n```sh\nnpx sv add drizzle=database:postgresql+client:postgres.js+docker:yes\n```",
+		"cli/eslint": "[ESLint](https://eslint.org/) finds and fixes problems in your code.\n\n## Usage\n\n```sh\nnpx sv add eslint\n```\n\n## What you get\n\n- the relevant packages installed including `eslint-plugin-svelte`\n- an `eslint.config.js` file\n- updated `.vscode/settings.json`\n- configured to work with TypeScript and `prettier` if you're using those packages",
+		"cli/lucia": "An auth setup following [the Lucia auth guide](https://lucia-auth.com/).\n\n## Usage\n\n```sh\nnpx sv add lucia\n```\n\n## What you get\n\n- an auth setup for SvelteKit and Drizzle following the best practices from the Lucia auth guide\n- optional demo registration and login pages\n\n## Options\n\n### demo\n\nWhether to include demo registration and login pages.\n\n```sh\nnpx sv add lucia=demo:yes\n```",
+		"cli/mdsvex": "[mdsvex](https://mdsvex.pngwn.io) is a markdown preprocessor for Svelte components - basically MDX for Svelte. It allows you to use Svelte components in your markdown, or markdown in your Svelte components.\n\n## Usage\n\n```sh\nnpx sv add mdsvex\n```\n\n## What you get\n\n- mdsvex installed and configured in your `svelte.config.js`",
+		"cli/paraglide": "[Paraglide from Inlang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) is a compiler-based i18n library that emits tree-shakable message functions with small bundle sizes, no async waterfalls, full type-safety, and more.\n\n## Usage\n\n```sh\nnpx sv add paraglide\n```\n\n## What you get\n\n- Inlang project settings\n- paraglide Vite plugin\n- SvelteKit `reroute` and `handle` hooks\n- `text-direction` and `lang` attributes in `app.html`\n- updated `.gitignore`\n- an optional demo page showing how to use paraglide\n\n## Options\n\n### languageTags\n\nThe languages you'd like to support specified as IETF BCP 47 language tags.\n\n```sh\nnpx sv add paraglide=\"languageTags:en,es\"\n```\n\n### demo\n\nWhether to generate an optional demo page showing how to use paraglide.\n\n```sh\nnpx sv add paraglide=\"demo:yes\"\n```",
+		"cli/playwright": "[Playwright](https://playwright.dev) browser testing.\n\n## Usage\n\n```sh\nnpx sv add playwright\n```\n\n## What you get\n\n- scripts added in your `package.json`\n- a Playwright config file\n- an updated `.gitignore`\n- a demo test",
+		"cli/prettier": "[Prettier](https://prettier.io) is an opinionated code formatter.\n\n## Usage\n\n```sh\nnpx sv add prettier\n```\n\n## What you get\n\n- scripts in your `package.json`\n- `.prettierignore` and `.prettierrc` files\n- updates to your eslint config if you're using that package",
+		"cli/storybook": "[Storybook](https://storybook.js.org/) is a frontend component workshop.\n\n## Usage\n\n```sh\nnpx sv add storybook\n```\n\n## What you get\n\n- `npx storybook init` run for you from the same convenient `sv` CLI used for all other add-ons\n- [Storybook for SvelteKit](https://storybook.js.org/docs/get-started/frameworks/sveltekit) or [Storybook for Svelte & Vite](https://storybook.js.org/docs/get-started/frameworks/svelte-vite) with default config provided, easy mocking of many SvelteKit modules, automatic link handling, and more.",
+		"cli/sveltekit-adapter": "[SvelteKit adapters](/docs/kit/adapters) allow you to deploy your site to numerous platforms. This add-on allows you to configure officially provided SvelteKit adapters, but a number of [community-provided adapters](https://www.sveltesociety.dev/packages?category=sveltekit-adapters) are also available.\n\n## Usage\n\n```sh\nnpx sv add sveltekit-adapter\n```\n\n## What you get\n\n- the chosen SvelteKit adapter installed and configured in your `svelte.config.js`\n\n## Options\n\n### adapter\n\nWhich SvelteKit adapter to use:\n\n- `auto` — [`@sveltejs/adapter-auto`](/docs/kit/adapter-auto) automatically chooses the proper adapter to use, but is less configurable\n- `node` — [`@sveltejs/adapter-node`](/docs/kit/adapter-node) generates a standalone Node server\n- `static` — [`@sveltejs/adapter-static`](/docs/kit/adapter-static) allows you to use SvelteKit as a static site generator (SSG)\n- `vercel` — [`@sveltejs/adapter-vercel`](/docs/kit/adapter-vercel) allows you to deploy to Vercel\n- `cloudflare` — [`@sveltejs/adapter-cloudflare`](/docs/kit/adapter-cloudflare) allows you to deploy to Cloudflare\n- `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) allows you to deploy to Netlify\n\n```sh\nnpx sv add sveltekit-adapter=adapter:node\n```",
+		"cli/tailwind": "[Tailwind CSS](https://tailwindcss.com/) allows you to rapidly build modern websites without ever leaving your HTML.\n\n## Usage\n\n```sh\nnpx sv add tailwindcss\n```\n\n## What you get\n\n- Tailwind setup following the [Tailwind for SvelteKit guide](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)\n- Tailwind Vite plugin\n- updated `app.css` and `+layout.svelte` (for SvelteKit) or `App.svelte` (for non-SvelteKit Vite apps)\n- integration with `prettier` if using that package\n\n## Options\n\n### plugins\n\nWhich plugin to use:\n\n- `typography` — [`@tailwindcss/typography`](https://github.com/tailwindlabs/tailwindcss-typography)\n- `forms` — [`@tailwindcss/forms`](https://github.com/tailwindlabs/tailwindcss-forms)\n\n```sh\nnpx sv add tailwindcss=\"plugins:typography\"\n```",
+		"cli/vitest": "[Vitest](https://vitest.dev/) is a Vite-native testing framework.\n\n## Usage\n\n```sh\nnpx sv add vitest\n```\n\n## What you get\n\n- the relevant packages installed and scripts added to your `package.json`\n- client/server-aware testing setup for Svelte in your Vite config file\n- demo tests",
+		"kit/introduction": "## Before we begin\n\n> [!NOTE] If you're new to Svelte or SvelteKit we recommend checking out the [interactive tutorial](/tutorial/kit).\n>\n> If you get stuck, reach out for help in the [Discord chatroom](/chat).\n\n## What is SvelteKit?\n\nSvelteKit is a framework for rapidly developing robust, performant web applications using [Svelte](../svelte). If you're coming from React, SvelteKit is similar to Next. If you're coming from Vue, SvelteKit is similar to Nuxt.\n\nTo learn more about the kinds of applications you can build with SvelteKit, see the [documentation regarding project types](project-types).\n\n## What is Svelte?\n\nIn short, Svelte is a way of writing user interface components — like a navigation bar, comment section, or contact form — that users see and interact with in their browsers. The Svelte compiler converts your components to JavaScript that can be run to render the HTML for the page and to CSS that styles the page. You don't need to know Svelte to understand the rest of this guide, but it will help. If you'd like to learn more, check out [the Svelte tutorial](/tutorial).\n\n## SvelteKit vs Svelte\n\nSvelte renders UI components. You can compose these components and render an entire page with just Svelte, but you need more than just Svelte to write an entire app.\n\nSvelteKit helps you build web apps while following modern best practices and providing solutions to common development challenges. It offers everything from basic functionalities — like a [router](glossary#Routing) that updates your UI when a link is clicked — to more advanced capabilities. Its extensive list of features includes [build optimizations](https://vitejs.dev/guide/features.html#build-optimizations) to load only the minimal required code; [offline support](service-workers); [preloading](link-options#data-sveltekit-preload-data) pages before user navigation; [configurable rendering](page-options) to handle different parts of your app on the server via [SSR](glossary#SSR), in the browser through [client-side rendering](glossary#CSR), or at build-time with [prerendering](glossary#Prerendering); [image optimization](images); and much more. Building an app with all the modern best practices is fiendishly complicated, but SvelteKit does all the boring stuff for you so that you can get on with the creative part.\n\nIt reflects changes to your code in the browser instantly to provide a lightning-fast and feature-rich development experience by leveraging [Vite](https://vitejs.dev/) with a [Svelte plugin](https://github.com/sveltejs/vite-plugin-svelte) to do [Hot Module Replacement (HMR)](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#hot).",
+		"kit/creating-a-project": "The easiest way to start building a SvelteKit app is to run `npx sv create`:\n\n```sh\nnpx sv create my-app\ncd my-app\nnpm run dev\n```\n\nThe first command will scaffold a new project in the `my-app` directory asking if you'd like to set up some basic tooling such as TypeScript. See [the CLI docs](/docs/cli/overview) for information about these options and [the integrations page](./integrations) for pointers on setting up additional tooling. `npm run dev` will then start the development server on [localhost:5173](http://localhost:5173) - make sure you install dependencies before running this if you didn't do so during project creation.\n\nThere are two basic concepts:\n\n- Each page of your app is a [Svelte](../svelte) component\n- You create pages by adding files to the `src/routes` directory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over\n\nTry editing the files to get a feel for how everything works.\n\n## Editor setup\n\nWe recommend using [Visual Studio Code (aka VS Code)](https://code.visualstudio.com/download) with [the Svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), but [support also exists for numerous other editors](https://sveltesociety.dev/resources#editor-support).",
+		"kit/project-types": "SvelteKit offers configurable rendering, which allows you to build and deploy your project in several different ways. You can build all of the below types of applications and more with SvelteKit. Rendering settings are not mutually exclusive and you may choose the optimal manner with which to render different parts of your application.\n\nIf you don't have a particular way you'd like to build your application in mind, don't worry! The way your application is built, deployed, and rendered is controlled by which adapter you've chosen and a small amount of configuration and these can always be changed later. The [project structure](project-structure) and [routing](glossary#Routing) will be the same regardless of the project type that you choose.\n\n## Default rendering\n\nBy default, when a user visits a site, SvelteKit will render the first page with [server-side rendering (SSR)](glossary#SSR) and subsequent pages with [client-side rendering (CSR)](glossary#CSR). Using SSR for the initial render improves SEO and perceived performance of the initial page load. Client-side rendering then takes over and updates the page without having to rerender common components, which is typically faster and eliminates a flash when navigating between pages. Apps built with this hybrid rendering approach have also been called [transitional apps](https://www.youtube.com/watch?v=860d8usGC0o).\n\n## Static site generation\n\nYou can use SvelteKit as a [static site generator (SSG)](glossary#SSG) that fully [prerenders](glossary#Prerendering) your site with static rendering using [`adapter-static`](adapter-static). You may also use [the prerender option](page-options#prerender) to prerender only some pages and then choose a different adapter with which to dynamically server-render other pages.\n\nTools built solely to do static site generation may scale the prerendering process more efficiently during build when rendering a very large number of pages. When working with very large statically generated sites, you can avoid long build times with [Incremental Static Regeneration (ISR) if using `adapter-vercel`](adapter-vercel#Incremental-Static-Regeneration). And in contrast to purpose-built SSGs, SvelteKit allows for nicely mixing and matching different rendering types on different pages.\n\n## Single-page app\n\n[Single-page apps (SPAs)](glossary#SPA) exclusively use [client-side rendering (CSR)](glossary#CSR). You can [build single-page apps (SPAs)](single-page-apps) with SvelteKit. As with all types of SvelteKit applications, you can write your backend in SvelteKit or [another language or framework](#Separate-backend). If you are building an application with no backend or a [separate backend](#Separate-backend), you can simply skip over and ignore the parts of the docs talking about `server` files.\n\n## Multi-page app\n\nSvelteKit isn't typically used to build [traditional multi-page apps](glossary#MPA). However, in SvelteKit you can remove all JavaScript on a page with [`csr = false`](page-options#csr), which will render subsequent links on the server, or you can use [`data-sveltekit-reload`](link-options#data-sveltekit-reload) to render specific links on the server.\n\n## Separate backend\n\nIf your backend is written in another language such as Go, Java, PHP, Ruby, Rust, or C#, there are a couple of ways that you can deploy your application. The most recommended way would be to deploy your SvelteKit frontend separately from your backend utilizing `adapter-node` or a serverless adapter. Some users prefer not to have a separate process to manage and decide to deploy their application as a [single-page app (SPA)](single-page-apps) served by their backend server, but note that single-page apps have worse SEO and performance characteristics.\n\nIf you are using an external backend, you can simply skip over and ignore the parts of the docs talking about `server` files. You may also want to reference [the FAQ about how to make calls to a separate backend](faq#How-do-I-use-a-different-backend-API-server).\n\n## Serverless app\n\nSvelteKit apps are simple to run on serverless platforms. [The default zero config adapter](adapter-auto) will automatically run your app on a number of supported platforms or you can use [`adapter-vercel`](adapter-vercel), [`adapter-netlify`](adapter-netlify), or [`adapter-cloudflare`](adapter-cloudflare) to provide platform-specific configuration. And [community adapters](/packages#sveltekit-adapters) allow you to deploy your application to almost any serverless environment. Some of these adapters such as [`adapter-vercel`](adapter-vercel) and [`adapter-netlify`](adapter-netlify) offer an `edge` option, to support [edge rendering](glossary#Edge) for improved latency.\n\n## Your own server\n\nYou can deploy to your own server or VPS using [`adapter-node`](adapter-node).\n\n## Container\n\nYou can use [`adapter-node`](adapter-node) to run a SvelteKit app within a container such as Docker or LXC.\n\n## Library\n\nYou can create a library to be used by other Svelte apps with the [`@sveltejs/package`](packaging) add-on to SvelteKit by choosing the library option when running [`sv create`](/docs/cli/sv-create).\n\n## Offline app\n\nSvelteKit has full support for [service workers](service-workers) allowing you to build many types of applications such as offline apps and [progressive web apps](glossary#PWA).\n\n## Mobile app\n\nYou can turn a [SvelteKit SPA](single-page-apps) into a mobile app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte). Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms.\n\nThese mobile development platforms work by starting a local web server and then serving your application like a static host on your phone. You may find [`bundleStrategy: 'single'`](configuration#output) to be a helpful option to limit the number of requests made. E.g. at the time of writing, the Capacitor local server uses HTTP/1, which limits the number of concurrent connections.\n\n## Desktop app\n\nYou can turn a [SvelteKit SPA](single-page-apps) into a desktop app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/), [Wails](https://wails.io/docs/guides/sveltekit/), or [Electron](https://www.electronjs.org/).\n\n## Browser extension\n\nYou can build browser extensions using either [`adapter-static`](adapter-static) or [community adapters](/packages#sveltekit-adapters) specifically tailored towards browser extensions.\n\n## Embedded device\n\nBecause of its efficient rendering, Svelte can be run on low power devices. Embedded devices like microcontrollers and TVs may limit the number of concurrent connections. In order to reduce the number of concurrent requests, you may find [`bundleStrategy: 'single'`](configuration#output) to be a helpful option in this deployment configuration.",
+		"kit/project-structure": "A typical SvelteKit project looks like this:\n\n```tree\nmy-project/\n├ src/\n│ ├ lib/\n│ │ ├ server/\n│ │ │ └ [your server-only lib files]\n│ │ └ [your lib files]\n│ ├ params/\n│ │ └ [your param matchers]\n│ ├ routes/\n│ │ └ [your routes]\n│ ├ app.html\n│ ├ error.html\n│ ├ hooks.client.js\n│ ├ hooks.server.js\n| ├ service-worker.js\n│ └ tracing.server.js\n├ static/\n│ └ [your static assets]\n├ tests/\n│ └ [your tests]\n├ package.json\n├ svelte.config.js\n├ tsconfig.json\n└ vite.config.js\n```\n\nYou'll also find common files like `.gitignore` and `.npmrc` (and `.prettierrc` and `eslint.config.js` and so on, if you chose those options when running `npx sv create`).\n\n## Project files\n\n### src\n\nThe `src` directory contains the meat of your project. Everything except `src/routes` and `src/app.html` is optional.\n\n- `lib` contains your library code (utilities and components), which can be imported via the [`$lib`]($lib) alias, or packaged up for distribution using [`svelte-package`](packaging)\n  - `server` contains your server-only library code. It can be imported by using the [`$lib/server`](server-only-modules) alias. SvelteKit will prevent you from importing these in client code.\n- `params` contains any [param matchers](advanced-routing#Matching) your app needs\n- `routes` contains the [routes](routing) of your application. You can also colocate other components that are only used within a single route here\n- `app.html` is your page template — an HTML document containing the following placeholders:\n  - `%sveltekit.head%` — `<link>` and `<script>` elements needed by the app, plus any `<svelte:head>` content\n  - `%sveltekit.body%` — the markup for a rendered page. This should live inside a `<div>` or other element, rather than directly inside `<body>`, to prevent bugs caused by browser extensions injecting elements that are then destroyed by the hydration process. SvelteKit will warn you in development if this is not the case\n  - `%sveltekit.assets%` — either [`paths.assets`](configuration#paths), if specified, or a relative path to [`paths.base`](configuration#paths)\n  - `%sveltekit.nonce%` — a [CSP](configuration#csp) nonce for manually included links and scripts, if used\n  - `%sveltekit.env.[NAME]%` - this will be replaced at render time with the `[NAME]` environment variable, which must begin with the [`publicPrefix`](configuration#env) (usually `PUBLIC_`). It will fallback to `''` if not matched.\n  - `%sveltekit.version%` — the app version, which can be specified with the [`version`](configuration#version) configuration\n- `error.html` is the page that is rendered when everything else fails. It can contain the following placeholders:\n  - `%sveltekit.status%` — the HTTP status\n  - `%sveltekit.error.message%` — the error message\n- `hooks.client.js` contains your client [hooks](hooks)\n- `hooks.server.js` contains your server [hooks](hooks)\n- `service-worker.js` contains your [service worker](service-workers)\n- `instrumentation.server.js` contains your [observability](observability) setup and instrumentation code\n  - Requires adapter support. If your adapter supports it, it is guarnteed to run prior to loading and running your application code.\n\n(Whether the project contains `.js` or `.ts` files depends on whether you opt to use TypeScript when you create your project.)\n\nIf you added [Vitest](https://vitest.dev) when you set up your project, your unit tests will live in the `src` directory with a `.test.js` extension.\n\n### static\n\nAny static assets that should be served as-is, like `robots.txt` or `favicon.png`, go in here.\n\n### tests\n\nIf you added [Playwright](https://playwright.dev/) for browser testing when you set up your project, the tests will live in this directory.\n\n### package.json\n\nYour `package.json` file must include `@sveltejs/kit`, `svelte` and `vite` as `devDependencies`.\n\nWhen you create a project with `npx sv create`, you'll also notice that `package.json` includes `\"type\": \"module\"`. This means that `.js` files are interpreted as native JavaScript modules with `import` and `export` keywords. Legacy CommonJS files need a `.cjs` file extension.\n\n### svelte.config.js\n\nThis file contains your Svelte and SvelteKit [configuration](configuration).\n\n### tsconfig.json\n\nThis file (or `jsconfig.json`, if you prefer type-checked `.js` files over `.ts` files) configures TypeScript, if you added typechecking during `npx sv create`. Since SvelteKit relies on certain configuration being set a specific way, it generates its own `.svelte-kit/tsconfig.json` file which your own config `extends`. To make changes to top-level options such as `include` and `exclude`, we recommend extending the generated config; see the [`typescript.config` setting](configuration#typescript) for more details.\n\n### vite.config.js\n\nA SvelteKit project is really just a [Vite](https://vitejs.dev) project that uses the [`@sveltejs/kit/vite`](@sveltejs-kit-vite) plugin, along with any other [Vite configuration](https://vitejs.dev/config/).\n\n## Other files\n\n### .svelte-kit\n\nAs you develop and build your project, SvelteKit will generate files in a `.svelte-kit` directory (configurable as [`outDir`](configuration#outDir)). You can ignore its contents, and delete them at any time (they will be regenerated when you next `dev` or `build`).",
+		"kit/web-standards": "Throughout this documentation, you'll see references to the standard [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) that SvelteKit builds on top of. Rather than reinventing the wheel, we _use the platform_, which means your existing web development skills are applicable to SvelteKit. Conversely, time spent learning SvelteKit will help you be a better web developer elsewhere.\n\nThese APIs are available in all modern browsers and in many non-browser environments like Cloudflare Workers, Deno, and Vercel Functions. During development, and in [adapters](adapters) for Node-based environments (including AWS Lambda), they're made available via polyfills where necessary (for now, that is — Node is rapidly adding support for more web standards).\n\nIn particular, you'll get comfortable with the following:\n\n## Fetch APIs\n\nSvelteKit uses [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) for getting data from the network. It's available in [hooks](hooks) and [server routes](routing#server) as well as in the browser.\n\n> [!NOTE] A special version of `fetch` is available in [`load`](load) functions, [server hooks](hooks#Server-hooks) and [API routes](routing#server) for invoking endpoints directly during server-side rendering, without making an HTTP call, while preserving credentials. (To make credentialled fetches in server-side code outside `load`, you must explicitly pass `cookie` and/or `authorization` headers.) It also allows you to make relative requests, whereas server-side `fetch` normally requires a fully qualified URL.\n\nBesides `fetch` itself, the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) includes the following interfaces:\n\n### Request\n\nAn instance of [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) is accessible in [hooks](hooks) and [server routes](routing#server) as `event.request`. It contains useful methods like `request.json()` and `request.formData()` for getting data that was posted to an endpoint.\n\n### Response\n\nAn instance of [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) is returned from `await fetch(...)` and handlers in `+server.js` files. Fundamentally, a SvelteKit app is a machine for turning a `Request` into a `Response`.\n\n### Headers\n\nThe [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) interface allows you to read incoming `request.headers` and set outgoing `response.headers`. For example, you can get the `request.headers` as shown below, and use the [`json` convenience function](@sveltejs-kit#json) to send modified `response.headers`:\n\n```js\n// @errors: 2461\n/// file: src/routes/what-is-my-user-agent/+server.js\nimport { json } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport function GET({ request }) {\n\t// log all headers\n\tconsole.log(...request.headers);\n\n\t// create a JSON Response using a header we received\n\treturn json({\n\t\t// retrieve a specific header\n\t\tuserAgent: request.headers.get('user-agent')\n\t}, {\n\t\t// set a header on the response\n\t\theaders: { 'x-custom-header': 'potato' }\n\t});\n}\n```\n\n## FormData\n\nWhen dealing with HTML native form submissions you'll be working with [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) objects.\n\n```js\n// @errors: 2461\n/// file: src/routes/hello/+server.js\nimport { json } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function POST(event) {\n\tconst body = await event.request.formData();\n\n\t// log all fields\n\tconsole.log([...body]);\n\n\treturn json({\n\t\t// get a specific field's value\n\t\tname: body.get('name') ?? 'world'\n\t});\n}\n```\n\n## Stream APIs\n\nMost of the time, your endpoints will return complete data, as in the `userAgent` example above. Sometimes, you may need to return a response that's too large to fit in memory in one go, or is delivered in chunks, and for this the platform provides [streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) — [ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream), [WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) and [TransformStream](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream).\n\n## URL APIs\n\nURLs are represented by the [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) interface, which includes useful properties like `origin` and `pathname` (and, in the browser, `hash`). This interface shows up in various places — `event.url` in [hooks](hooks) and [server routes](routing#server), [`page.url`]($app-state) in [pages](routing#page), `from` and `to` in [`beforeNavigate` and `afterNavigate`]($app-navigation) and so on.\n\n### URLSearchParams\n\nWherever you encounter a URL, you can access query parameters via `url.searchParams`, which is an instance of [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams):\n\n```js\n// @filename: ambient.d.ts\ndeclare global {\n\tconst url: URL;\n}\n\nexport {};\n\n// @filename: index.js\n// ---cut---\nconst foo = url.searchParams.get('foo');\n```\n\n## Web Crypto\n\nThe [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is made available via the `crypto` global. It's used internally for [Content Security Policy](configuration#csp) headers, but you can also use it for things like generating UUIDs:\n\n```js\nconst uuid = crypto.randomUUID();\n```",
+		"kit/routing": "At the heart of SvelteKit is a _filesystem-based router_. The routes of your app — i.e. the URL paths that users can access — are defined by the directories in your codebase:\n\n- `src/routes` is the root route\n- `src/routes/about` creates an `/about` route\n- `src/routes/blog/[slug]` creates a route with a _parameter_, `slug`, that can be used to load data dynamically when a user requests a page like `/blog/hello-world`\n\n> [!NOTE] You can change `src/routes` to a different directory by editing the [project config](configuration).\n\nEach route directory contains one or more _route files_, which can be identified by their `+` prefix.\n\nWe'll introduce these files in a moment in more detail, but here are a few simple rules to help you remember how SvelteKit's routing works:\n\n* All files can run on the server\n* All files run on the client except `+server` files\n* `+layout` and `+error` files apply to subdirectories as well as the directory they live in\n\n## +page\n\n### +page.svelte\n\nA `+page.svelte` component defines a page of your app. By default, pages are rendered both on the server ([SSR](glossary#SSR)) for the initial request and in the browser ([CSR](glossary#CSR)) for subsequent navigation.\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<h1>Hello and welcome to my site!</h1>\n<a href=\"/about\">About my site</a>\n```\n\n```svelte\n<!--- file: src/routes/about/+page.svelte --->\n<h1>About this site</h1>\n<p>TODO...</p>\n<a href=\"/\">Home</a>\n```\n\n> [!NOTE] SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.\n\nPages can receive data from `load` functions via the `data` prop.\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.title}</h1>\n<div>{@html data.content}</div>\n```\n\n> [!LEGACY]\n> `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` property manually with `PageData` instead, see [$types](#\\$types).\n>\n> In Svelte 4, you'd use `export let data` instead.\n\n### +page.js\n\nOften, a page will need to load some data before it can be rendered. For this, we add a `+page.js` module that exports a `load` function:\n\n```js\n/// file: src/routes/blog/[slug]/+page.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageLoad} */\nexport function load({ params }) {\n\tif (params.slug === 'hello-world') {\n\t\treturn {\n\t\t\ttitle: 'Hello world!',\n\t\t\tcontent: 'Welcome to our blog. Lorem ipsum dolor sit amet...'\n\t\t};\n\t}\n\n\terror(404, 'Not found');\n}\n```\n\nThis function runs alongside `+page.svelte`, which means it runs on the server during server-side rendering and in the browser during client-side navigation. See [`load`](load) for full details of the API.\n\nAs well as `load`, `+page.js` can export values that configure the page's behaviour:\n\n- `export const prerender = true` or `false` or `'auto'`\n- `export const ssr = true` or `false`\n- `export const csr = true` or `false`\n\nYou can find more information about these in [page options](page-options).\n\n### +page.server.js\n\nIf your `load` function can only run on the server — for example, if it needs to fetch data from a database or you need to access private [environment variables]($env-static-private) like API keys — then you can rename `+page.js` to `+page.server.js` and change the `PageLoad` type to `PageServerLoad`.\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n\n// @filename: ambient.d.ts\ndeclare global {\n\tconst getPostFromDatabase: (slug: string) => {\n\t\ttitle: string;\n\t\tcontent: string;\n\t}\n}\n\nexport {};\n\n// @filename: index.js\n// ---cut---\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\tconst post = await getPostFromDatabase(params.slug);\n\n\tif (post) {\n\t\treturn post;\n\t}\n\n\terror(404, 'Not found');\n}\n```\n\nDuring client-side navigation, SvelteKit will load this data from the server, which means that the returned value must be serializable using [devalue](https://github.com/rich-harris/devalue). See [`load`](load) for full details of the API.\n\nLike `+page.js`, `+page.server.js` can export [page options](page-options) — `prerender`, `ssr` and `csr`.\n\nA `+page.server.js` file can also export _actions_. If `load` lets you read data from the server, `actions` let you write data _to_ the server using the `<form>` element. To learn how to use them, see the [form actions](form-actions) section.\n\n## +error\n\nIf an error occurs during `load`, SvelteKit will render a default error page. You can customise this error page on a per-route basis by adding an `+error.svelte` file:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+error.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.status}: {page.error.message}</h1>\n```\n\n> [!LEGACY]\n> `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead.\n\nSvelteKit will 'walk up the tree' looking for the closest error boundary — if the file above didn't exist it would try `src/routes/blog/+error.svelte` and then `src/routes/+error.svelte` before rendering the default error page. If _that_ fails (or if the error was thrown from the `load` function of the root `+layout`, which sits 'above' the root `+error`), SvelteKit will bail out and render a static fallback error page, which you can customise by creating a `src/error.html` file.\n\nIf the error occurs inside a `load` function in `+layout(.server).js`, the closest error boundary in the tree is an `+error.svelte` file _above_ that layout (not next to it).\n\nIf no route can be found (404), `src/routes/+error.svelte` (or the default error page, if that file does not exist) will be used.\n\n> [!NOTE] `+error.svelte` is _not_ used when an error occurs inside [`handle`](hooks#Server-hooks-handle) or a [+server.js](#server) request handler.\n\nYou can read more about error handling [here](errors).\n\n## +layout\n\nSo far, we've treated pages as entirely standalone components — upon navigation, the existing `+page.svelte` component will be destroyed, and a new one will take its place.\n\nBut in many apps, there are elements that should be visible on _every_ page, such as top-level navigation or a footer. Instead of repeating them in every `+page.svelte`, we can put them in _layouts_.\n\n### +layout.svelte\n\nTo create a layout that applies to every page, make a file called `src/routes/+layout.svelte`. The default layout (the one that SvelteKit uses if you don't bring your own) looks like this...\n\n```svelte\n<script>\n\tlet { children } = $props();\n</script>\n\n{@render children()}\n```\n\n...but we can add whatever markup, styles and behaviour we want. The only requirement is that the component includes a `@render` tag for the page content. For example, let's add a nav bar:\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<script>\n\tlet { children } = $props();\n</script>\n\n<nav>\n\t<a href=\"/\">Home</a>\n\t<a href=\"/about\">About</a>\n\t<a href=\"/settings\">Settings</a>\n</nav>\n\n{@render children()}\n```\n\nIf we create pages for `/`, `/about` and `/settings`...\n\n```html\n/// file: src/routes/+page.svelte\n<h1>Home</h1>\n```\n\n```html\n/// file: src/routes/about/+page.svelte\n<h1>About</h1>\n```\n\n```html\n/// file: src/routes/settings/+page.svelte\n<h1>Settings</h1>\n```\n\n...the nav will always be visible, and clicking between the three pages will only result in the `<h1>` being replaced.\n\nLayouts can be _nested_. Suppose we don't just have a single `/settings` page, but instead have nested pages like `/settings/profile` and `/settings/notifications` with a shared submenu (for a real-life example, see [github.com/settings](https://github.com/settings)).\n\nWe can create a layout that only applies to pages below `/settings` (while inheriting the root layout with the top-level nav):\n\n```svelte\n<!--- file: src/routes/settings/+layout.svelte --->\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data, children } = $props();\n</script>\n\n<h1>Settings</h1>\n\n<div class=\"submenu\">\n\t{#each data.sections as section}\n\t\t<a href=\"/settings/{section.slug}\">{section.title}</a>\n\t{/each}\n</div>\n\n{@render children()}\n```\n\n> [!LEGACY]\n> `LayoutProps` was added in 2.16.0. In earlier versions, you had to [type the properties manually instead](#\\$types).\n\nYou can see how `data` is populated by looking at the `+layout.js` example in the next section just below.\n\nBy default, each layout inherits the layout above it. Sometimes that isn't what you want - in this case, [advanced layouts](advanced-routing#Advanced-layouts) can help you.\n\n### +layout.js\n\nJust like `+page.svelte` loading data from `+page.js`, your `+layout.svelte` component can get data from a [`load`](load) function in `+layout.js`.\n\n```js\n/// file: src/routes/settings/+layout.js\n/** @type {import('./$types').LayoutLoad} */\nexport function load() {\n\treturn {\n\t\tsections: [\n\t\t\t{ slug: 'profile', title: 'Profile' },\n\t\t\t{ slug: 'notifications', title: 'Notifications' }\n\t\t]\n\t};\n}\n```\n\nIf a `+layout.js` exports [page options](page-options) — `prerender`, `ssr` and `csr` — they will be used as defaults for child pages.\n\nData returned from a layout's `load` function is also available to all its child pages:\n\n```svelte\n<!--- file: src/routes/settings/profile/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tconsole.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]\n</script>\n```\n\n> [!NOTE] Often, layout data is unchanged when navigating between pages. SvelteKit will intelligently rerun [`load`](load) functions when necessary.\n\n### +layout.server.js\n\nTo run your layout's `load` function on the server, move it to `+layout.server.js`, and change the `LayoutLoad` type to `LayoutServerLoad`.\n\nLike `+layout.js`, `+layout.server.js` can export [page options](page-options) — `prerender`, `ssr` and `csr`.\n\n## +server\n\nAs well as pages, you can define routes with a `+server.js` file (sometimes referred to as an 'API route' or an 'endpoint'), which gives you full control over the response. Your `+server.js` file exports functions corresponding to HTTP verbs like `GET`, `POST`, `PATCH`, `PUT`, `DELETE`, `OPTIONS`, and `HEAD` that take a [`RequestEvent`](@sveltejs-kit#RequestEvent) argument and return a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object.\n\nFor example we could create an `/api/random-number` route with a `GET` handler:\n\n```js\n/// file: src/routes/api/random-number/+server.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport function GET({ url }) {\n\tconst min = Number(url.searchParams.get('min') ?? '0');\n\tconst max = Number(url.searchParams.get('max') ?? '1');\n\n\tconst d = max - min;\n\n\tif (isNaN(d) || d < 0) {\n\t\terror(400, 'min and max must be numbers, and min must be less than max');\n\t}\n\n\tconst random = min + Math.random() * d;\n\n\treturn new Response(String(random));\n}\n```\n\nThe first argument to `Response` can be a [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream), making it possible to stream large amounts of data or create server-sent events (unless deploying to platforms that buffer responses, like AWS Lambda).\n\nYou can use the [`error`](@sveltejs-kit#error), [`redirect`](@sveltejs-kit#redirect) and [`json`](@sveltejs-kit#json) methods from `@sveltejs/kit` for convenience (but you don't have to).\n\nIf an error is thrown (either `error(...)` or an unexpected error), the response will be a JSON representation of the error or a fallback error page — which can be customised via `src/error.html` — depending on the `Accept` header. The [`+error.svelte`](#error) component will _not_ be rendered in this case. You can read more about error handling [here](errors).\n\n> [!NOTE] When creating an `OPTIONS` handler, note that Vite will inject `Access-Control-Allow-Origin` and `Access-Control-Allow-Methods` headers — these will not be present in production unless you add them.\n\n> [!NOTE] `+layout` files have no effect on `+server.js` files. If you want to run some logic before each request, add it to the server [`handle`](hooks#Server-hooks-handle) hook.\n\n### Receiving data\n\nBy exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.js` files can be used to create a complete API:\n\n```svelte\n<!--- file: src/routes/add/+page.svelte --->\n<script>\n\tlet a = 0;\n\tlet b = 0;\n\tlet total = 0;\n\n\tasync function add() {\n\t\tconst response = await fetch('/api/add', {\n\t\t\tmethod: 'POST',\n\t\t\tbody: JSON.stringify({ a, b }),\n\t\t\theaders: {\n\t\t\t\t'content-type': 'application/json'\n\t\t\t}\n\t\t});\n\n\t\ttotal = await response.json();\n\t}\n</script>\n\n<input type=\"number\" bind:value={a}> +\n<input type=\"number\" bind:value={b}> =\n{total}\n\n<button onclick={add}>Calculate</button>\n```\n\n```js\n/// file: src/routes/api/add/+server.js\nimport { json } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request }) {\n\tconst { a, b } = await request.json();\n\treturn json(a + b);\n}\n```\n\n> [!NOTE] In general, [form actions](form-actions) are a better way to submit data from the browser to the server.\n\n> [!NOTE] If a `GET` handler is exported, a `HEAD` request will return the `content-length` of the `GET` handler's response body.\n\n### Fallback method handler\n\nExporting the `fallback` handler will match any unhandled request methods, including methods like `MOVE` which have no dedicated export from `+server.js`.\n\n```js\n/// file: src/routes/api/add/+server.js\nimport { json, text } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request }) {\n\tconst { a, b } = await request.json();\n\treturn json(a + b);\n}\n\n// This handler will respond to PUT, PATCH, DELETE, etc.\n/** @type {import('./$types').RequestHandler} */\nexport async function fallback({ request }) {\n\treturn text(`I caught your ${request.method} request!`);\n}\n```\n\n> [!NOTE] For `HEAD` requests, the `GET` handler takes precedence over the `fallback` handler.\n\n### Content negotiation\n\n`+server.js` files can be placed in the same directory as `+page` files, allowing the same route to be either a page or an API endpoint. To determine which, SvelteKit applies the following rules:\n\n- `PUT`/`PATCH`/`DELETE`/`OPTIONS` requests are always handled by `+server.js` since they do not apply to pages\n- `GET`/`POST`/`HEAD` requests are treated as page requests if the `accept` header prioritises `text/html` (in other words, it's a browser page request), else they are handled by `+server.js`.\n- Responses to `GET` requests will include a `Vary: Accept` header, so that proxies and browsers cache HTML and JSON responses separately.\n\n## $types\n\nThroughout the examples above, we've been importing types from a `$types.d.ts` file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files.\n\nFor example, annotating `let { data } = $props()` with `PageProps` (or `LayoutProps`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n```\n\n> [!NOTE]\n> The `PageProps` and `LayoutProps` types, added in 2.16.0, are a shortcut for typing the `data` prop as `PageData` or `LayoutData`, as well as other props, such as `form` for pages, or `children` for layouts. In earlier versions, you had to type these properties manually. For example, for a page:\n>\n> ```js\n> /// file: +page.svelte\n> /** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */\n> let { data, form } = $props();\n> ```\n>\n> Or, for a layout:\n>\n> ```js\n> /// file: +layout.svelte\n> /** @type {{ data: import('./$types').LayoutData, children: Snippet }} */\n> let { data, children } = $props();\n> ```\n\nIn turn, annotating the `load` function with `PageLoad`, `PageServerLoad`, `LayoutLoad` or `LayoutServerLoad` (for `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` respectively) ensures that `params` and the return value are correctly typed.\n\nIf you're using VS Code or any IDE that supports the language server protocol and TypeScript plugins then you can omit these types _entirely_! Svelte's IDE tooling will insert the correct types for you, so you'll get type checking without writing them yourself. It also works with our command line tool `svelte-check`.\n\nYou can read more about omitting `$types` in our [blog post](/blog/zero-config-type-safety) about it.\n\n## Other files\n\nAny other files inside a route directory are ignored by SvelteKit. This means you can colocate components and utility modules with the routes that need them.\n\nIf components and modules are needed by multiple routes, it's a good idea to put them in [`$lib`]($lib).\n\n## Further reading\n\n- [Tutorial: Routing](/tutorial/kit/pages)\n- [Tutorial: API routes](/tutorial/kit/get-handlers)\n- [Docs: Advanced routing](advanced-routing)",
+		"kit/load": "Before a [`+page.svelte`](routing#page-page.svelte) component (and its containing [`+layout.svelte`](routing#layout-layout.svelte) components) can be rendered, we often need to get some data. This is done by defining `load` functions.\n\n## Page data\n\nA `+page.svelte` file can have a sibling `+page.js` that exports a `load` function, the return value of which is available to the page via the `data` prop:\n\n```js\n/// file: src/routes/blog/[slug]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport function load({ params }) {\n\treturn {\n\t\tpost: {\n\t\t\ttitle: `Title for ${params.slug} goes here`,\n\t\t\tcontent: `Content for ${params.slug} goes here`\n\t\t}\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n```\n\n> [!LEGACY]\n> Before version 2.16.0, the props of a page and layout had to be typed individually:\n> ```js\n> /// file: +page.svelte\n> /** @type {{ data: import('./$types').PageData }} */\n> let { data } = $props();\n> ```\n>\n> In Svelte 4, you'd use `export let data` instead.\n\nThanks to the generated `$types` module, we get full type safety.\n\nA `load` function in a `+page.js` file runs both on the server and in the browser (unless combined with `export const ssr = false`, in which case it will [only run in the browser](page-options#ssr)). If your `load` function should _always_ run on the server (because it uses private environment variables, for example, or accesses a database) then it would go in a `+page.server.js` instead.\n\nA more realistic version of your blog post's `load` function, that only runs on the server and pulls data from a database, might look like this:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPost(slug: string): Promise<{ title: string, content: string }>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\treturn {\n\t\tpost: await db.getPost(params.slug)\n\t};\n}\n```\n\nNotice that the type changed from `PageLoad` to `PageServerLoad`, because server `load` functions can access additional arguments. To understand when to use `+page.js` and when to use `+page.server.js`, see [Universal vs server](load#Universal-vs-server).\n\n## Layout data\n\nYour `+layout.svelte` files can also load data, via `+layout.js` or `+layout.server.js`.\n\n```js\n/// file: src/routes/blog/[slug]/+layout.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPostSummaries(): Promise<Array<{ title: string, slug: string }>>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function load() {\n\treturn {\n\t\tposts: await db.getPostSummaries()\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+layout.svelte --->\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data, children } = $props();\n</script>\n\n<main>\n\t<!-- +page.svelte is `@render`ed here -->\n\t{@render children()}\n</main>\n\n<aside>\n\t<h2>More posts</h2>\n\t<ul>\n\t\t{#each data.posts as post}\n\t\t\t<li>\n\t\t\t\t<a href=\"/blog/{post.slug}\">\n\t\t\t\t\t{post.title}\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n</aside>\n```\n\n> [!LEGACY]\n> `LayoutProps` was added in 2.16.0. In earlier versions, properties had to be typed individually:\n> ```js\n> /// file: +layout.svelte\n> /** @type {{ data: import('./$types').LayoutData, children: Snippet }} */\n> let { data, children } = $props();\n> ```\n\nData returned from layout `load` functions is available to child `+layout.svelte` components and the `+page.svelte` component as well as the layout that it 'belongs' to.\n\n```svelte\n/// file: src/routes/blog/[slug]/+page.svelte\n<script>\n\t+++import { page } from '$app/state';+++\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n+++\t// we can access `data.posts` because it's returned from\n\t// the parent layout `load` function\n\tlet index = $derived(data.posts.findIndex(post => post.slug === page.params.slug));\n\tlet next = $derived(data.posts[index + 1]);+++\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n+++{#if next}\n\t<p>Next post: <a href=\"/blog/{next.slug}\">{next.title}</a></p>\n{/if}+++\n```\n\n> [!NOTE] If multiple `load` functions return data with the same key, the last one 'wins' — the result of a layout `load` returning `{ a: 1, b: 2 }` and a page `load` returning `{ b: 3, c: 4 }` would be `{ a: 1, b: 3, c: 4 }`.\n\n## page.data\n\nThe `+page.svelte` component, and each `+layout.svelte` component above it, has access to its own data plus all the data from its parents.\n\nIn some cases, we might need the opposite — a parent layout might need to access page data or data from a child layout. For example, the root layout might want to access a `title` property returned from a `load` function in `+page.js` or `+page.server.js`. This can be done with `page.data`:\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<svelte:head>\n\t<title>{page.data.title}</title>\n</svelte:head>\n```\n\nType information for `page.data` is provided by `App.PageData`.\n\n> [!LEGACY]\n> `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead.\n> It provides a `page` store with the same interface that you can subscribe to, e.g. `$page.data.title`.\n\n## Universal vs server\n\nAs we've seen, there are two types of `load` function:\n\n* `+page.js` and `+layout.js` files export _universal_ `load` functions that run both on the server and in the browser\n* `+page.server.js` and `+layout.server.js` files export _server_ `load` functions that only run server-side\n\nConceptually, they're the same thing, but there are some important differences to be aware of.\n\n### When does which load function run?\n\nServer `load` functions _always_ run on the server.\n\nBy default, universal `load` functions run on the server during SSR when the user first visits your page. They will then run again during hydration, reusing any responses from [fetch requests](#Making-fetch-requests). All subsequent invocations of universal `load` functions happen in the browser. You can customize the behavior through [page options](page-options). If you disable [server-side rendering](page-options#ssr), you'll get an SPA and universal `load` functions _always_ run on the client.\n\nIf a route contains both universal and server `load` functions, the server `load` runs first.\n\nA `load` function is invoked at runtime, unless you [prerender](page-options#prerender) the page — in that case, it's invoked at build time.\n\n### Input\n\nBoth universal and server `load` functions have access to properties describing the request (`params`, `route` and `url`) and various functions (`fetch`, `setHeaders`, `parent`, `depends` and `untrack`). These are described in the following sections.\n\nServer `load` functions are called with a `ServerLoadEvent`, which inherits `clientAddress`, `cookies`, `locals`, `platform` and `request` from `RequestEvent`.\n\nUniversal `load` functions are called with a `LoadEvent`, which has a `data` property. If you have `load` functions in both `+page.js` and `+page.server.js` (or `+layout.js` and `+layout.server.js`), the return value of the server `load` function is the `data` property of the universal `load` function's argument.\n\n### Output\n\nA universal `load` function can return an object containing any values, including things like custom classes and component constructors.\n\nA server `load` function must return data that can be serialized with [devalue](https://github.com/rich-harris/devalue) — anything that can be represented as JSON plus things like `BigInt`, `Date`, `Map`, `Set` and `RegExp`, or repeated/cyclical references — so that it can be transported over the network. Your data can include [promises](#Streaming-with-promises), in which case it will be streamed to browsers. If you need to serialize/deserialize custom types, use [transport hooks](hooks#Universal-hooks-transport).\n\n### When to use which\n\nServer `load` functions are convenient when you need to access data directly from a database or filesystem, or need to use private environment variables.\n\nUniversal `load` functions are useful when you need to `fetch` data from an external API and don't need private credentials, since SvelteKit can get the data directly from the API rather than going via your server. They are also useful when you need to return something that can't be serialized, such as a Svelte component constructor.\n\nIn rare cases, you might need to use both together — for example, you might need to return an instance of a custom class that was initialised with data from your server. When using both, the server `load` return value is _not_ passed directly to the page, but to the universal `load` function (as the `data` property):\n\n```js\n/// file: src/routes/+page.server.js\n/** @type {import('./$types').PageServerLoad} */\nexport async function load() {\n\treturn {\n\t\tserverMessage: 'hello from server load function'\n\t};\n}\n```\n\n```js\n/// file: src/routes/+page.js\n// @errors: 18047\n/** @type {import('./$types').PageLoad} */\nexport async function load({ data }) {\n\treturn {\n\t\tserverMessage: data.serverMessage,\n\t\tuniversalMessage: 'hello from universal load function'\n\t};\n}\n```\n\n## Using URL data\n\nOften the `load` function depends on the URL in one way or another. For this, the `load` function provides you with `url`, `route` and `params`.\n\n### url\n\nAn instance of [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL), containing properties like the `origin`, `hostname`, `pathname` and `searchParams` (which contains the parsed query string as a [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object). `url.hash` cannot be accessed during `load`, since it is unavailable on the server.\n\n> [!NOTE] In some environments this is derived from request headers during server-side rendering. If you're using [adapter-node](adapter-node), for example, you may need to configure the adapter in order for the URL to be correct.\n\n### route\n\nContains the name of the current route directory, relative to `src/routes`:\n\n```js\n/// file: src/routes/a/[b]/[...c]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport function load({ route }) {\n\tconsole.log(route.id); // '/a/[b]/[...c]'\n}\n```\n\n### params\n\n`params` is derived from `url.pathname` and `route.id`.\n\nGiven a `route.id` of `/a/[b]/[...c]` and a `url.pathname` of `/a/x/y/z`, the `params` object would look like this:\n\n```json\n{\n\t\"b\": \"x\",\n\t\"c\": \"y/z\"\n}\n```\n\n## Making fetch requests\n\nTo get data from an external API or a `+server.js` handler, you can use the provided `fetch` function, which behaves identically to the [native `fetch` web API](https://developer.mozilla.org/en-US/docs/Web/API/fetch) with a few additional features:\n\n- It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request.\n- It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context).\n- Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\n- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text`, `json` and `arrayBuffer` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](hooks#Server-hooks-handle).\n- During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request - if you received a warning in your browser console when using the browser `fetch` instead of the `load` `fetch`, this is why.\n\n```js\n/// file: src/routes/items/[id]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch, params }) {\n\tconst res = await fetch(`/api/items/${params.id}`);\n\tconst item = await res.json();\n\n\treturn { item };\n}\n```\n\n## Cookies\n\nA server `load` function can get and set [`cookies`](@sveltejs-kit#Cookies).\n\n```js\n/// file: src/routes/+layout.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getUser(sessionid: string | undefined): Promise<{ name: string, avatar: string }>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function load({ cookies }) {\n\tconst sessionid = cookies.get('sessionid');\n\n\treturn {\n\t\tuser: await db.getUser(sessionid)\n\t};\n}\n```\n\nCookies will only be passed through the provided `fetch` function if the target host is the same as the SvelteKit application or a more specific subdomain of it.\n\nFor example, if SvelteKit is serving my.domain.com:\n- domain.com WILL NOT receive cookies\n- my.domain.com WILL receive cookies\n- api.domain.com WILL NOT receive cookies\n- sub.my.domain.com WILL receive cookies\n\nOther cookies will not be passed when `credentials: 'include'` is set, because SvelteKit does not know which domain which cookie belongs to (the browser does not pass this information along), so it's not safe to forward any of them. Use the [handleFetch hook](hooks#Server-hooks-handleFetch) to work around it.\n\n## Headers\n\nBoth server and universal `load` functions have access to a `setHeaders` function that, when running on the server, can set headers for the response. (When running in the browser, `setHeaders` has no effect.) This is useful if you want the page to be cached, for example:\n\n```js\n// @errors: 2322 1360\n/// file: src/routes/products/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/products.json`;\n\tconst response = await fetch(url);\n\n\t// Headers are only set during SSR, caching the page's HTML\n\t// for the same length of time as the underlying data.\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}\n```\n\nSetting the same header multiple times (even in separate `load` functions) is an error. You can only set a given header once using the `setHeaders` function. You cannot add a `set-cookie` header with `setHeaders` — use `cookies.set(name, value, options)` instead.\n\n## Using parent data\n\nOccasionally it's useful for a `load` function to access data from a parent `load` function, which can be done with `await parent()`:\n\n```js\n/// file: src/routes/+layout.js\n/** @type {import('./$types').LayoutLoad} */\nexport function load() {\n\treturn { a: 1 };\n}\n```\n\n```js\n/// file: src/routes/abc/+layout.js\n/** @type {import('./$types').LayoutLoad} */\nexport async function load({ parent }) {\n\tconst { a } = await parent();\n\treturn { b: a + 1 };\n}\n```\n\n```js\n/// file: src/routes/abc/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ parent }) {\n\tconst { a, b } = await parent();\n\treturn { c: a + b };\n}\n```\n\n```svelte\n<!--- file: src/routes/abc/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<!-- renders `1 + 2 = 3` -->\n<p>{data.a} + {data.b} = {data.c}</p>\n```\n\n> [!NOTE] Notice that the `load` function in `+page.js` receives the merged data from both layout `load` functions, not just the immediate parent.\n\nInside `+page.server.js` and `+layout.server.js`, `parent` returns data from parent `+layout.server.js` files.\n\nIn `+page.js` or `+layout.js` it will return data from parent `+layout.js` files. However, a missing `+layout.js` is treated as a `({ data }) => data` function, meaning that it will also return data from parent `+layout.server.js` files that are not 'shadowed' by a `+layout.js` file\n\nTake care not to introduce waterfalls when using `await parent()`. Here, for example, `getData(params)` does not depend on the result of calling `parent()`, so we should call it first to avoid a delayed render.\n\n```js\n/// file: +page.js\n// @filename: ambient.d.ts\ndeclare function getData(params: Record<string, string>): Promise<{ meta: any }>\n\n// @filename: index.js\n// ---cut---\n/** @type {import('./$types').PageLoad} */\nexport async function load({ params, parent }) {\n\t---const parentData = await parent();---\n\tconst data = await getData(params);\n\t+++const parentData = await parent();+++\n\n\treturn {\n\t\t...data,\n\t\tmeta: { ...parentData.meta, ...data.meta }\n\t};\n}\n```\n\n## Errors\n\nIf an error is thrown during `load`, the nearest [`+error.svelte`](routing#error) will be rendered. For [_expected_](errors#Expected-errors) errors, use the `error` helper from `@sveltejs/kit` to specify the HTTP status code and an optional message:\n\n```js\n/// file: src/routes/admin/+layout.server.js\n// @filename: ambient.d.ts\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser?: {\n\t\t\tname: string;\n\t\t\tisAdmin: boolean;\n\t\t}\n\t}\n}\n\n// @filename: index.js\n// ---cut---\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function load({ locals }) {\n\tif (!locals.user) {\n\t\terror(401, 'not logged in');\n\t}\n\n\tif (!locals.user.isAdmin) {\n\t\terror(403, 'not an admin');\n\t}\n}\n```\n\nCalling `error(...)` will throw an exception, making it easy to stop execution from inside helper functions.\n\nIf an [_unexpected_](errors#Unexpected-errors) error is thrown, SvelteKit will invoke [`handleError`](hooks#Shared-hooks-handleError) and treat it as a 500 Internal Error.\n\n> [!NOTE] [In SvelteKit 1.x](migrating-to-sveltekit-2#redirect-and-error-are-no-longer-thrown-by-you) you had to `throw` the error yourself\n\n## Redirects\n\nTo redirect users, use the `redirect` helper from `@sveltejs/kit` to specify the location to which they should be redirected alongside a `3xx` status code. Like `error(...)`, calling `redirect(...)` will throw an exception, making it easy to stop execution from inside helper functions.\n\n```js\n/// file: src/routes/user/+layout.server.js\n// @filename: ambient.d.ts\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser?: {\n\t\t\tname: string;\n\t\t}\n\t}\n}\n\n// @filename: index.js\n// ---cut---\nimport { redirect } from '@sveltejs/kit';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function load({ locals }) {\n\tif (!locals.user) {\n\t\tredirect(307, '/login');\n\t}\n}\n```\n\n> [!NOTE] Don't use `redirect()` inside a `try {...}` block, as the redirect will immediately trigger the catch statement.\n\nIn the browser, you can also navigate programmatically outside of a `load` function using [`goto`]($app-navigation#goto) from [`$app.navigation`]($app-navigation).\n\n> [!NOTE] [In SvelteKit 1.x](migrating-to-sveltekit-2#redirect-and-error-are-no-longer-thrown-by-you) you had to `throw` the `redirect` yourself\n\n## Streaming with promises\n\nWhen using a server `load`, promises will be streamed to the browser as they resolve. This is useful if you have slow, non-essential data, since you can start rendering the page before all the data is available:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n// @filename: ambient.d.ts\ndeclare global {\n\tconst loadPost: (slug: string) => Promise<{ title: string, content: string }>;\n\tconst loadComments: (slug: string) => Promise<{ content: string }>;\n}\n\nexport {};\n\n// @filename: index.js\n// ---cut---\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\treturn {\n\t\t// make sure the `await` happens at the end, otherwise we\n\t\t// can't start loading comments until we've loaded the post\n\t\tcomments: loadComments(params.slug),\n\t\tpost: await loadPost(params.slug)\n\t};\n}\n```\n\nThis is useful for creating skeleton loading states, for example:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n{#await data.comments}\n\tLoading comments...\n{:then comments}\n\t{#each comments as comment}\n\t\t<p>{comment.content}</p>\n\t{/each}\n{:catch error}\n\t<p>error loading comments: {error.message}</p>\n{/await}\n```\n\nWhen streaming data, be careful to handle promise rejections correctly. More specifically, the server could crash with an \"unhandled promise rejection\" error if a lazy-loaded promise fails before rendering starts (at which point it's caught) and isn't handling the error in some way. When using SvelteKit's `fetch` directly in the `load` function, SvelteKit will handle this case for you. For other promises, it is enough to attach a noop-`catch` to the promise to mark it as handled.\n\n```js\n/// file: src/routes/+page.server.js\n/** @type {import('./$types').PageServerLoad} */\nexport function load({ fetch }) {\n\tconst ok_manual = Promise.reject();\n\tok_manual.catch(() => {});\n\n\treturn {\n\t\tok_manual,\n\t\tok_fetch: fetch('/fetch/that/could/fail'),\n\t\tdangerous_unhandled: Promise.reject()\n\t};\n}\n```\n\n> [!NOTE] On platforms that do not support streaming, such as AWS Lambda or Firebase, responses will be buffered. This means the page will only render once all promises resolve. If you are using a proxy (e.g. NGINX), make sure it does not buffer responses from the proxied server.\n\n> [!NOTE] Streaming data will only work when JavaScript is enabled. You should avoid returning promises from a universal `load` function if the page is server rendered, as these are _not_ streamed — instead, the promise is recreated when the function reruns in the browser.\n\n> [!NOTE] The headers and status code of a response cannot be changed once the response has started streaming, therefore you cannot `setHeaders` or throw redirects inside a streamed promise.\n\n> [!NOTE] [In SvelteKit 1.x](migrating-to-sveltekit-2#Top-level-promises-are-no-longer-awaited) top-level promises were automatically awaited, only nested promises were streamed.\n\n## Parallel loading\n\nWhen rendering (or navigating to) a page, SvelteKit runs all `load` functions concurrently, avoiding a waterfall of requests. During client-side navigation, the result of calling multiple server `load` functions are grouped into a single response. Once all `load` functions have returned, the page is rendered.\n\n## Rerunning load functions\n\nSvelteKit tracks the dependencies of each `load` function to avoid rerunning it unnecessarily during navigation.\n\nFor example, given a pair of `load` functions like these...\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPost(slug: string): Promise<{ title: string, content: string }>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\treturn {\n\t\tpost: await db.getPost(params.slug)\n\t};\n}\n```\n\n```js\n/// file: src/routes/blog/[slug]/+layout.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPostSummaries(): Promise<Array<{ title: string, slug: string }>>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function load() {\n\treturn {\n\t\tposts: await db.getPostSummaries()\n\t};\n}\n```\n\n...the one in `+page.server.js` will rerun if we navigate from `/blog/trying-the-raw-meat-diet` to `/blog/i-regret-my-choices` because `params.slug` has changed. The one in `+layout.server.js` will not, because the data is still valid. In other words, we won't call `db.getPostSummaries()` a second time.\n\nA `load` function that calls `await parent()` will also rerun if a parent `load` function is rerun.\n\nDependency tracking does not apply _after_ the `load` function has returned — for example, accessing `params.x` inside a nested [promise](#Streaming-with-promises) will not cause the function to rerun when `params.x` changes. (Don't worry, you'll get a warning in development if you accidentally do this.) Instead, access the parameter in the main body of your `load` function.\n\nSearch parameters are tracked independently from the rest of the url. For example, accessing `event.url.searchParams.get(\"x\")` inside a `load` function will make that `load` function re-run when navigating from `?x=1` to `?x=2`, but not when navigating from `?x=1&y=1` to `?x=1&y=2`.\n\n### Untracking dependencies\n\nIn rare cases, you may wish to exclude something from the dependency tracking mechanism. You can do this with the provided `untrack` function:\n\n```js\n/// file: src/routes/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}\n```\n\n### Manual invalidation\n\nYou can also rerun `load` functions that apply to the current page using [`invalidate(url)`]($app-navigation#invalidate), which reruns all `load` functions that depend on `url`, and [`invalidateAll()`]($app-navigation#invalidateAll), which reruns every `load` function. Server load functions will never automatically depend on a fetched `url` to avoid leaking secrets to the client.\n\nA `load` function depends on `url` if it calls `fetch(url)` or `depends(url)`. Note that `url` can be a custom identifier that starts with `[a-z]:`:\n\n```js\n/// file: src/routes/random-number/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch, depends }) {\n\t// load reruns when `invalidate('https://api.example.com/random-number')` is called...\n\tconst response = await fetch('https://api.example.com/random-number');\n\n\t// ...or when `invalidate('app:random')` is called\n\tdepends('app:random');\n\n\treturn {\n\t\tnumber: await response.json()\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/random-number/+page.svelte --->\n<script>\n\timport { invalidate, invalidateAll } from '$app/navigation';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tfunction rerunLoadFunction() {\n\t\t// any of these will cause the `load` function to rerun\n\t\tinvalidate('app:random');\n\t\tinvalidate('https://api.example.com/random-number');\n\t\tinvalidate(url => url.href.includes('random-number'));\n\t\tinvalidateAll();\n\t}\n</script>\n\n<p>random number: {data.number}</p>\n<button onclick={rerunLoadFunction}>Update random number</button>\n```\n\n### When do load functions rerun?\n\nTo summarize, a `load` function will rerun in the following situations:\n\n- It references a property of `params` whose value has changed\n- It references a property of `url` (such as `url.pathname` or `url.search`) whose value has changed. Properties in `request.url` are _not_ tracked\n- It calls `url.searchParams.get(...)`, `url.searchParams.getAll(...)` or `url.searchParams.has(...)` and the parameter in question changes. Accessing other properties of `url.searchParams` will have the same effect as accessing `url.search`.\n- It calls `await parent()` and a parent `load` function reran\n- A child `load` function calls `await parent()` and is rerunning, and the parent is a server load function\n- It declared a dependency on a specific URL via [`fetch`](#Making-fetch-requests) (universal load only) or [`depends`](@sveltejs-kit#LoadEvent), and that URL was marked invalid with [`invalidate(url)`]($app-navigation#invalidate)\n- All active `load` functions were forcibly rerun with [`invalidateAll()`]($app-navigation#invalidateAll)\n\n`params` and `url` can change in response to a `<a href=\"..\">` link click, a [`<form>` interaction](form-actions#GET-vs-POST), a [`goto`]($app-navigation#goto) invocation, or a [`redirect`](@sveltejs-kit#redirect).\n\nNote that rerunning a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`]($app-navigation#afterNavigate) callback, and/or wrap your component in a [`{#key ...}`](../svelte/key) block.\n\n## Implications for authentication\n\nA couple features of loading data have important implications for auth checks:\n- Layout `load` functions do not run on every request, such as during client side navigation between child routes. [(When do load functions rerun?)](load#Rerunning-load-functions-When-do-load-functions-rerun)\n- Layout and page `load` functions run concurrently unless `await parent()` is called. If a layout `load` throws, the page `load` function runs, but the client will not receive the returned data.\n\nThere are a few possible strategies to ensure an auth check occurs before protected code.\n\nTo prevent data waterfalls and preserve layout `load` caches:\n- Use [hooks](hooks) to protect multiple routes before any `load` functions run\n- Use auth guards directly in `+page.server.js` `load` functions for route specific protection\n\nPutting an auth guard in `+layout.server.js` requires all child pages to call `await parent()` before protected code. Unless every child page depends on returned data from `await parent()`, the other options will be more performant.\n\n## Using `getRequestEvent`\n\nWhen running server `load` functions, the `event` object passed to the function as an argument can also be retrieved with [`getRequestEvent`]($app-server#getRequestEvent). This allows shared logic (such as authentication guards) to access information about the current request without it needing to be passed around.\n\nFor example, you might have a function that requires users to be logged in, and redirects them to `/login` if not:\n\n```js\n/// file: src/lib/server/auth.js\n// @filename: ambient.d.ts\ninterface User {\n\tname: string;\n}\n\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser?: User;\n\t}\n}\n\n// @filename: index.ts\n// ---cut---\nimport { redirect } from '@sveltejs/kit';\nimport { getRequestEvent } from '$app/server';\n\nexport function requireLogin() {\n\tconst { locals, url } = getRequestEvent();\n\n\t// assume `locals.user` is populated in `handle`\n\tif (!locals.user) {\n\t\tconst redirectTo = url.pathname + url.search;\n\t\tconst params = new URLSearchParams({ redirectTo });\n\n\t\tredirect(307, `/login?${params}`);\n\t}\n\n\treturn locals.user;\n}\n```\n\nNow, you can call `requireLogin` in any `load` function (or [form action](form-actions), for example) to guarantee that the user is logged in:\n\n```js\n/// file: +page.server.js\n// @filename: ambient.d.ts\n\ndeclare module '$lib/server/auth' {\n\tinterface User {\n\t\tname: string;\n\t}\n\n\texport function requireLogin(): User;\n}\n\n// @filename: index.ts\n// ---cut---\nimport { requireLogin } from '$lib/server/auth';\n\nexport function load() {\n\tconst user = requireLogin();\n\n\t// `user` is guaranteed to be a user object here, because otherwise\n\t// `requireLogin` would throw a redirect and we wouldn't get here\n\treturn {\n\t\tmessage: `hello ${user.name}!`\n\t};\n}\n```\n\n## Further reading\n\n- [Tutorial: Loading data](/tutorial/kit/page-data)\n- [Tutorial: Errors and redirects](/tutorial/kit/error-basics)\n- [Tutorial: Advanced loading](/tutorial/kit/await-parent)",
+		"kit/form-actions": "A `+page.server.js` file can export _actions_, which allow you to `POST` data to the server using the `<form>` element.\n\nWhen using `<form>`, client-side JavaScript is optional, but you can easily _progressively enhance_ your form interactions with JavaScript to provide the best user experience.\n\n## Default actions\n\nIn the simplest case, a page declares a `default` action:\n\n```js\n/// file: src/routes/login/+page.server.js\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tdefault: async (event) => {\n\t\t// TODO log the user in\n\t}\n};\n```\n\nTo invoke this action from the `/login` page, just add a `<form>` — no JavaScript needed:\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<form method=\"POST\">\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\">\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n</form>\n```\n\nIf someone were to click the button, the browser would send the form data via `POST` request to the server, running the default action.\n\n> [!NOTE] Actions always use `POST` requests, since `GET` requests should never have side-effects.\n\nWe can also invoke the action from other pages (for example if there's a login widget in the nav in the root layout) by adding the `action` attribute, pointing to the page:\n\n```html\n/// file: src/routes/+layout.svelte\n<form method=\"POST\" action=\"/login\">\n\t<!-- content -->\n</form>\n```\n\n## Named actions\n\nInstead of one `default` action, a page can have as many named actions as it needs:\n\n```js\n/// file: src/routes/login/+page.server.js\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n---\tdefault: async (event) => {---\n+++\tlogin: async (event) => {+++\n\t\t// TODO log the user in\n\t},\n+++\tregister: async (event) => {\n\t\t// TODO register the user\n\t}+++\n};\n```\n\nTo invoke a named action, add a query parameter with the name prefixed by a `/` character:\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<form method=\"POST\" action=\"?/register\">\n```\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<form method=\"POST\" action=\"/login?/register\">\n```\n\nAs well as the `action` attribute, we can use the `formaction` attribute on a button to `POST` the same form data to a different action than the parent `<form>`:\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<form method=\"POST\" +++action=\"?/login\"+++>\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\">\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n\t+++<button formaction=\"?/register\">Register</button>+++\n</form>\n```\n\n> [!NOTE] We can't have default actions next to named actions, because if you POST to a named action without a redirect, the query parameter is persisted in the URL, which means the next default POST would go through the named action from before.\n\n## Anatomy of an action\n\nEach action receives a `RequestEvent` object, allowing you to read the data with `request.formData()`. After processing the request (for example, logging the user in by setting a cookie), the action can respond with data that will be available through the `form` property on the corresponding page and through `page.form` app-wide until the next update.\n\n```js\n/// file: src/routes/login/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/db';\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/db';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ cookies }) {\n\tconst user = await db.getUserFromSession(cookies.get('sessionid'));\n\treturn { user };\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async ({ cookies, request }) => {\n\t\tconst data = await request.formData();\n\t\tconst email = data.get('email');\n\t\tconst password = data.get('password');\n\n\t\tconst user = await db.getUser(email);\n\t\tcookies.set('sessionid', await db.createSession(user), { path: '/' });\n\n\t\treturn { success: true };\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data, form } = $props();\n</script>\n\n{#if form?.success}\n\t<!-- this message is ephemeral; it exists because the page was rendered in\n\t       response to a form submission. it will vanish if the user reloads -->\n\t<p>Successfully logged in! Welcome back, {data.user.name}</p>\n{/if}\n```\n\n> [!LEGACY]\n> `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` and `form` properties individually:\n> ```js\n> /// file: +page.svelte\n> /** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */\n> let { data, form } = $props();\n> ```\n>\n> In Svelte 4, you'd use `export let data` and `export let form` instead to declare properties.\n\n### Validation errors\n\nIf the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `page.status` and the data through `form`:\n\n```js\n/// file: src/routes/login/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/db';\n\n// @filename: index.js\n// ---cut---\n+++import { fail } from '@sveltejs/kit';+++\nimport * as db from '$lib/server/db';\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async ({ cookies, request }) => {\n\t\tconst data = await request.formData();\n\t\tconst email = data.get('email');\n\t\tconst password = data.get('password');\n\n+++\t\tif (!email) {\n\t\t\treturn fail(400, { email, missing: true });\n\t\t}+++\n\n\t\tconst user = await db.getUser(email);\n\n+++\t\tif (!user || user.password !== db.hash(password)) {\n\t\t\treturn fail(400, { email, incorrect: true });\n\t\t}+++\n\n\t\tcookies.set('sessionid', await db.createSession(user), { path: '/' });\n\n\t\treturn { success: true };\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\n> [!NOTE] Note that as a precaution, we only return the email back to the page — not the password.\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<form method=\"POST\" action=\"?/login\">\n+++\t{#if form?.missing}<p class=\"error\">The email field is required</p>{/if}\n\t{#if form?.incorrect}<p class=\"error\">Invalid credentials!</p>{/if}+++\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\" +++value={form?.email ?? ''}+++>\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n\t<button formaction=\"?/register\">Register</button>\n</form>\n```\n\nThe returned data must be serializable as JSON. Beyond that, the structure is entirely up to you. For example, if you had multiple forms on the page, you could distinguish which `<form>` the returned `form` data referred to with an `id` property or similar.\n\n### Redirects\n\nRedirects (and errors) work exactly the same as in [`load`](load#Redirects):\n\n```js\n// @errors: 2345\n/// file: src/routes/login/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/db';\n\n// @filename: index.js\n// ---cut---\nimport { fail, +++redirect+++ } from '@sveltejs/kit';\nimport * as db from '$lib/server/db';\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async ({ cookies, request, +++url+++ }) => {\n\t\tconst data = await request.formData();\n\t\tconst email = data.get('email');\n\t\tconst password = data.get('password');\n\n\t\tconst user = await db.getUser(email);\n\t\tif (!user) {\n\t\t\treturn fail(400, { email, missing: true });\n\t\t}\n\n\t\tif (user.password !== db.hash(password)) {\n\t\t\treturn fail(400, { email, incorrect: true });\n\t\t}\n\n\t\tcookies.set('sessionid', await db.createSession(user), { path: '/' });\n\n+++\t\tif (url.searchParams.has('redirectTo')) {\n\t\t\tredirect(303, url.searchParams.get('redirectTo'));\n\t\t}+++\n\n\t\treturn { success: true };\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\n## Loading data\n\nAfter an action runs, the page will be re-rendered (unless a redirect or an unexpected error occurs), with the action's return value available to the page as the `form` prop. This means that your page's `load` functions will run after the action completes.\n\nNote that `handle` runs before the action is invoked, and does not rerun before the `load` functions. This means that if, for example, you use `handle` to populate `event.locals` based on a cookie, you must update `event.locals` when you set or delete the cookie in an action:\n\n```js\n/// file: src/hooks.server.js\n// @filename: ambient.d.ts\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser: {\n\t\t\tname: string;\n\t\t} | null\n\t}\n}\n\n// @filename: global.d.ts\ndeclare global {\n\tfunction getUser(sessionid: string | undefined): {\n\t\tname: string;\n\t};\n}\n\nexport {};\n\n// @filename: index.js\n// ---cut---\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tevent.locals.user = await getUser(event.cookies.get('sessionid'));\n\treturn resolve(event);\n}\n```\n\n```js\n/// file: src/routes/account/+page.server.js\n// @filename: ambient.d.ts\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser: {\n\t\t\tname: string;\n\t\t} | null\n\t}\n}\n\n// @filename: index.js\n// ---cut---\n/** @type {import('./$types').PageServerLoad} */\nexport function load(event) {\n\treturn {\n\t\tuser: event.locals.user\n\t};\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogout: async (event) => {\n\t\tevent.cookies.delete('sessionid', { path: '/' });\n\t\tevent.locals.user = null;\n\t}\n};\n```\n\n## Progressive enhancement\n\nIn the preceding sections we built a `/login` action that [works without client-side JavaScript](https://kryogenix.org/code/browser/everyonehasjs.html) — not a `fetch` in sight. That's great, but when JavaScript _is_ available we can progressively enhance our form interactions to provide a better user experience.\n\n### use:enhance\n\nThe easiest way to progressively enhance a form is to add the `use:enhance` action:\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<script>\n\t+++import { enhance } from '$app/forms';+++\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n</script>\n\n<form method=\"POST\" +++use:enhance+++>\n```\n\n> [!NOTE] `use:enhance` can only be used with forms that have `method=\"POST\"` and point to actions defined in a `+page.server.js` file. It will not work with `method=\"GET\"`, which is the default for forms without a specified method. Attempting to use `use:enhance` on forms without `method=\"POST\"` or posting to a `+server.js` endpoint will result in an error.\n\n> [!NOTE] Yes, it's a little confusing that the `enhance` action and `<form action>` are both called 'action'. These docs are action-packed. Sorry.\n\nWithout an argument, `use:enhance` will emulate the browser-native behaviour, just without the full-page reloads. It will:\n\n- update the `form` property, `page.form` and `page.status` on a successful or invalid response, but only if the action is on the same page you're submitting from. For example, if your form looks like `<form action=\"/somewhere/else\" ..>`, the `form` prop and the `page.form` state will _not_ be updated. This is because in the native form submission case you would be redirected to the page the action is on. If you want to have them updated either way, use [`applyAction`](#Progressive-enhancement-Customising-use:enhance)\n- reset the `<form>` element\n- invalidate all data using `invalidateAll` on a successful response\n- call `goto` on a redirect response\n- render the nearest `+error` boundary if an error occurs\n- [reset focus](accessibility#Focus-management) to the appropriate element\n\n### Customising use:enhance\n\nTo customise the behaviour, you can provide a `SubmitFunction` that runs immediately before the form is submitted, and (optionally) returns a callback that runs with the `ActionResult`.\n\n```svelte\n<form\n\tmethod=\"POST\"\n\tuse:enhance={({ formElement, formData, action, cancel, submitter }) => {\n\t\t// `formElement` is this `<form>` element\n\t\t// `formData` is its `FormData` object that's about to be submitted\n\t\t// `action` is the URL to which the form is posted\n\t\t// calling `cancel()` will prevent the submission\n\t\t// `submitter` is the `HTMLElement` that caused the form to be submitted\n\n\t\treturn async ({ result, update }) => {\n\t\t\t// `result` is an `ActionResult` object\n\t\t\t// `update` is a function which triggers the default logic that would be triggered if this callback wasn't set\n\t\t};\n\t}}\n>\n```\n\nYou can use these functions to show and hide loading UI, and so on.\n\nIf you return a callback, you override the default post-submission behavior. To get it back, call `update`, which accepts `invalidateAll` and `reset` parameters, or use `applyAction` on the result:\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<script>\n\timport { enhance, +++applyAction+++ } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n</script>\n\n<form\n\tmethod=\"POST\"\n\tuse:enhance={({ formElement, formData, action, cancel }) => {\n\t\treturn async ({ result }) => {\n\t\t\t// `result` is an `ActionResult` object\n+++\t\t\tif (result.type === 'redirect') {\n\t\t\t\tgoto(result.location);\n\t\t\t} else {\n\t\t\t\tawait applyAction(result);\n\t\t\t}+++\n\t\t};\n\t}}\n>\n```\n\nThe behaviour of `applyAction(result)` depends on `result.type`:\n\n- `success`, `failure` — sets `page.status` to `result.status` and updates `form` and `page.form` to `result.data` (regardless of where you are submitting from, in contrast to `update` from `enhance`)\n- `redirect` — calls `goto(result.location, { invalidateAll: true })`\n- `error` — renders the nearest `+error` boundary with `result.error`\n\nIn all cases, [focus will be reset](accessibility#Focus-management).\n\n### Custom event listener\n\nWe can also implement progressive enhancement ourselves, without `use:enhance`, with a normal event listener on the `<form>`:\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<script>\n\timport { invalidateAll, goto } from '$app/navigation';\n\timport { applyAction, deserialize } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n\n\t/** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */\n\tasync function handleSubmit(event) {\n\t\tevent.preventDefault();\n\t\tconst data = new FormData(event.currentTarget, event.submitter);\n\n\t\tconst response = await fetch(event.currentTarget.action, {\n\t\t\tmethod: 'POST',\n\t\t\tbody: data\n\t\t});\n\n\t\t/** @type {import('@sveltejs/kit').ActionResult} */\n\t\tconst result = deserialize(await response.text());\n\n\t\tif (result.type === 'success') {\n\t\t\t// rerun all `load` functions, following the successful update\n\t\t\tawait invalidateAll();\n\t\t}\n\n\t\tapplyAction(result);\n\t}\n</script>\n\n<form method=\"POST\" onsubmit={handleSubmit}>\n\t<!-- content -->\n</form>\n```\n\nNote that you need to `deserialize` the response before processing it further using the corresponding method from `$app/forms`. `JSON.parse()` isn't enough because form actions - like `load` functions - also support returning `Date` or `BigInt` objects.\n\nIf you have a `+server.js` alongside your `+page.server.js`, `fetch` requests will be routed there by default. To `POST` to an action in `+page.server.js` instead, use the custom `x-sveltekit-action` header:\n\n```js\n// @errors: 2532 2304\nconst response = await fetch(this.action, {\n\tmethod: 'POST',\n\tbody: data,\n+++\theaders: {\n\t\t'x-sveltekit-action': 'true'\n\t}+++\n});\n```\n\n## Alternatives\n\nForm actions are the preferred way to send data to the server, since they can be progressively enhanced, but you can also use [`+server.js`](routing#server) files to expose (for example) a JSON API. Here's how such an interaction could look like:\n\n```svelte\n<!--- file: src/routes/send-message/+page.svelte --->\n<script>\n\tfunction rerun() {\n\t\tfetch('/api/ci', {\n\t\t\tmethod: 'POST'\n\t\t});\n\t}\n</script>\n\n<button onclick={rerun}>Rerun CI</button>\n```\n\n```js\n// @errors: 2355 1360 2322\n/// file: src/routes/api/ci/+server.js\n/** @type {import('./$types').RequestHandler} */\nexport function POST() {\n\t// do something\n}\n```\n\n## GET vs POST\n\nAs we've seen, to invoke a form action you must use `method=\"POST\"`.\n\nSome forms don't need to `POST` data to the server — search inputs, for example. For these you can use `method=\"GET\"` (or, equivalently, no `method` at all), and SvelteKit will treat them like `<a>` elements, using the client-side router instead of a full page navigation:\n\n```html\n<form action=\"/search\">\n\t<label>\n\t\tSearch\n\t\t<input name=\"q\">\n\t</label>\n</form>\n```\n\nSubmitting this form will navigate to `/search?q=...` and invoke your load function but will not invoke an action. As with `<a>` elements, you can set the [`data-sveltekit-reload`](link-options#data-sveltekit-reload), [`data-sveltekit-replacestate`](link-options#data-sveltekit-replacestate), [`data-sveltekit-keepfocus`](link-options#data-sveltekit-keepfocus) and [`data-sveltekit-noscroll`](link-options#data-sveltekit-noscroll) attributes on the `<form>` to control the router's behaviour.\n\n## Further reading\n\n- [Tutorial: Forms](/tutorial/kit/the-form-element)",
+		"kit/page-options": "By default, SvelteKit will render (or [prerender](glossary#Prerendering)) any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called [_hydration_](glossary#Hydration). For this reason, you need to ensure that components can run in both places. SvelteKit will then initialize a [_router_](routing) that takes over subsequent navigations.\n\nYou can control each of these on a page-by-page basis by exporting options from [`+page.js`](routing#page-page.js) or [`+page.server.js`](routing#page-page.server.js), or for groups of pages using a shared [`+layout.js`](routing#layout-layout.js) or [`+layout.server.js`](routing#layout-layout.server.js). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered.\n\nYou can mix and match these options in different areas of your app. For example, you could prerender your marketing page for maximum speed, server-render your dynamic pages for SEO and accessibility and turn your admin section into an SPA by rendering it on the client only. This makes SvelteKit very versatile.\n\n## prerender\n\nIt's likely that at least some routes of your app can be represented as a simple HTML file generated at build time. These routes can be [_prerendered_](glossary#Prerendering).\n\n```js\n/// file: +page.js/+page.server.js/+server.js\nexport const prerender = true;\n```\n\nAlternatively, you can set `export const prerender = true` in your root `+layout.js` or `+layout.server.js` and prerender everything except pages that are explicitly marked as _not_ prerenderable:\n\n```js\n/// file: +page.js/+page.server.js/+server.js\nexport const prerender = false;\n```\n\nRoutes with `prerender = true` will be excluded from manifests used for dynamic SSR, making your server (or serverless/edge functions) smaller. In some cases you might want to prerender a route but also include it in the manifest (for example, with a route like `/blog/[slug]` where you want to prerender your most recent/popular content but server-render the long tail) — for these cases, there's a third option, 'auto':\n\n```js\n/// file: +page.js/+page.server.js/+server.js\nexport const prerender = 'auto';\n```\n\n> [!NOTE] If your entire app is suitable for prerendering, you can use [`adapter-static`](adapter-static), which will output files suitable for use with any static webserver.\n\nThe prerenderer will start at the root of your app and generate files for any prerenderable pages or `+server.js` routes it finds. Each page is scanned for `<a>` elements that point to other pages that are candidates for prerendering — because of this, you generally don't need to specify which pages should be accessed. If you _do_ need to specify which pages should be accessed by the prerenderer, you can do so with [`config.kit.prerender.entries`](configuration#prerender), or by exporting an [`entries`](#entries) function from your dynamic route.\n\nWhile prerendering, the value of `building` imported from [`$app/environment`]($app-environment) will be `true`.\n\n### Prerendering server routes\n\nUnlike the other page options, `prerender` also applies to `+server.js` files. These files are _not_ affected by layouts, but will inherit default values from the pages that fetch data from them, if any. For example if a `+page.js` contains this `load` function...\n\n```js\n/// file: +page.js\nexport const prerender = true;\n\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch }) {\n\tconst res = await fetch('/my-server-route.json');\n\treturn await res.json();\n}\n```\n\n...then `src/routes/my-server-route.json/+server.js` will be treated as prerenderable if it doesn't contain its own `export const prerender = false`.\n\n### When not to prerender\n\nThe basic rule is this: for a page to be prerenderable, any two users hitting it directly must get the same content from the server.\n\n> [!NOTE] Not all pages are suitable for prerendering. Any content that is prerendered will be seen by all users. You can of course fetch personalized data in `onMount` in a prerendered page, but this may result in a poorer user experience since it will involve blank initial content or loading indicators.\n\nNote that you can still prerender pages that load data based on the page's parameters, such as a `src/routes/blog/[slug]/+page.svelte` route.\n\nAccessing [`url.searchParams`](load#Using-URL-data-url) during prerendering is forbidden. If you need to use it, ensure you are only doing so in the browser (for example in `onMount`).\n\nPages with [actions](form-actions) cannot be prerendered, because a server must be able to handle the action `POST` requests.\n\n### Route conflicts\n\nBecause prerendering writes to the filesystem, it isn't possible to have two endpoints that would cause a directory and a file to have the same name. For example, `src/routes/foo/+server.js` and `src/routes/foo/bar/+server.js` would try to create `foo` and `foo/bar`, which is impossible.\n\nFor that reason among others, it's recommended that you always include a file extension — `src/routes/foo.json/+server.js` and `src/routes/foo/bar.json/+server.js` would result in `foo.json` and `foo/bar.json` files living harmoniously side-by-side.\n\nFor _pages_, we skirt around this problem by writing `foo/index.html` instead of `foo`.\n\n### Troubleshooting\n\nIf you encounter an error like 'The following routes were marked as prerenderable, but were not prerendered' it's because the route in question (or a parent layout, if it's a page) has `export const prerender = true` but the page wasn't reached by the prerendering crawler and thus wasn't prerendered.\n\nSince these routes cannot be dynamically server-rendered, this will cause errors when people try to access the route in question. There are a few ways to fix it:\n\n* Ensure that SvelteKit can find the route by following links from [`config.kit.prerender.entries`](configuration#prerender) or the [`entries`](#entries) page option. Add links to dynamic routes (i.e. pages with `[parameters]` ) to this option if they are not found through crawling the other entry points, else they are not prerendered because SvelteKit doesn't know what value the parameters should have. Pages not marked as prerenderable will be ignored and their links to other pages will not be crawled, even if some of them would be prerenderable.\n* Ensure that SvelteKit can find the route by discovering a link to it from one of your other prerendered pages that have server-side rendering enabled.\n* Change `export const prerender = true` to `export const prerender = 'auto'`. Routes with `'auto'` can be dynamically server rendered\n\n## entries\n\nSvelteKit will discover pages to prerender automatically, by starting at _entry points_ and crawling them. By default, all your non-dynamic routes are considered entry points — for example, if you have these routes...\n\n```sh\n/             # non-dynamic\n/blog         # non-dynamic\n/blog/[slug]  # dynamic, because of `[slug]`\n```\n\n...SvelteKit will prerender `/` and `/blog`, and in the process discover links like `<a href=\"/blog/hello-world\">` which give it new pages to prerender.\n\nMost of the time, that's enough. In some situations, links to pages like `/blog/hello-world` might not exist (or might not exist on prerendered pages), in which case we need to tell SvelteKit about their existence.\n\nThis can be done with [`config.kit.prerender.entries`](configuration#prerender), or by exporting an `entries` function from a `+page.js`, a `+page.server.js` or a `+server.js` belonging to a dynamic route:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n/** @type {import('./$types').EntryGenerator} */\nexport function entries() {\n\treturn [\n\t\t{ slug: 'hello-world' },\n\t\t{ slug: 'another-blog-post' }\n\t];\n}\n\nexport const prerender = true;\n```\n\n`entries` can be an `async` function, allowing you to (for example) retrieve a list of posts from a CMS or database, in the example above.\n\n## ssr\n\nNormally, SvelteKit renders your page on the server first and sends that HTML to the client where it's [hydrated](glossary#Hydration). If you set `ssr` to `false`, it renders an empty 'shell' page instead. This is useful if your page is unable to be rendered on the server (because you use browser-only globals like `document` for example), but in most situations it's not recommended ([see appendix](glossary#SSR)).\n\n```js\n/// file: +page.js\nexport const ssr = false;\n// If both `ssr` and `csr` are `false`, nothing will be rendered!\n```\n\nIf you add `export const ssr = false` to your root `+layout.js`, your entire app will only be rendered on the client — which essentially means you turn your app into an SPA.\n\n> [!NOTE] If all your page options are boolean or string literal values, SvelteKit will evaluate them statically. If not, it will import your `+page.js` or `+layout.js` file on the server (both at build time, and at runtime if your app isn't fully static) so it can evaluate the options. In the second case, browser-only code must not run when the module is loaded. In practice, this means you should import browser-only code in your `+page.svelte` or `+layout.svelte` file instead.\n\n## csr\n\nOrdinarily, SvelteKit [hydrates](glossary#Hydration) your server-rendered HTML into an interactive client-side-rendered (CSR) page. Some pages don't require JavaScript at all — many blog posts and 'about' pages fall into this category. In these cases you can disable CSR:\n\n```js\n/// file: +page.js\nexport const csr = false;\n// If both `csr` and `ssr` are `false`, nothing will be rendered!\n```\n\nDisabling CSR does not ship any JavaScript to the client. This means:\n\n* The webpage should work with HTML and CSS only.\n* `<script>` tags inside all Svelte components are removed.\n* `<form>` elements cannot be [progressively enhanced](form-actions#Progressive-enhancement).\n* Links are handled by the browser with a full-page navigation.\n* Hot Module Replacement (HMR) will be disabled.\n\nYou can enable `csr` during development (for example to take advantage of HMR) like so:\n\n```js\n/// file: +page.js\nimport { dev } from '$app/environment';\n\nexport const csr = dev;\n```\n\n## trailingSlash\n\nBy default, SvelteKit will remove trailing slashes from URLs — if you visit `/about/`, it will respond with a redirect to `/about`. You can change this behaviour with the `trailingSlash` option, which can be one of `'never'` (the default), `'always'`, or `'ignore'`.\n\nAs with other page options, you can export this value from a `+layout.js` or a `+layout.server.js` and it will apply to all child pages. You can also export the configuration from `+server.js` files.\n\n```js\n/// file: src/routes/+layout.js\nexport const trailingSlash = 'always';\n```\n\nThis option also affects [prerendering](#prerender). If `trailingSlash` is `always`, a route like `/about` will result in an `about/index.html` file, otherwise it will create `about.html`, mirroring static webserver conventions.\n\n> [!NOTE] Ignoring trailing slashes is not recommended — the semantics of relative paths differ between the two cases (`./y` from `/x` is `/y`, but from `/x/` is `/x/y`), and `/x` and `/x/` are treated as separate URLs which is harmful to SEO.\n\n## config\n\nWith the concept of [adapters](adapters), SvelteKit is able to run on a variety of platforms. Each of these might have specific configuration to further tweak the deployment — for example on Vercel you could choose to deploy some parts of your app on the edge and others on serverless environments.\n\n`config` is an object with key-value pairs at the top level. Beyond that, the concrete shape is dependent on the adapter you're using. Every adapter should provide a `Config` interface to import for type safety. Consult the documentation of your adapter for more information.\n\n```js\n// @filename: ambient.d.ts\ndeclare module 'some-adapter' {\n\texport interface Config { runtime: string }\n}\n\n// @filename: index.js\n// ---cut---\n/// file: src/routes/+page.js\n/** @type {import('some-adapter').Config} */\nexport const config = {\n\truntime: 'edge'\n};\n```\n\n`config` objects are merged at the top level (but _not_ deeper levels). This means you don't need to repeat all the values in a `+page.js` if you want to only override some of the values in the upper `+layout.js`. For example this layout configuration...\n\n```js\n/// file: src/routes/+layout.js\nexport const config = {\n\truntime: 'edge',\n\tregions: 'all',\n\tfoo: {\n\t\tbar: true\n\t}\n}\n```\n\n...is overridden by this page configuration...\n\n```js\n/// file: src/routes/+page.js\nexport const config = {\n\tregions: ['us1', 'us2'],\n\tfoo: {\n\t\tbaz: true\n\t}\n}\n```\n\n...which results in the config value `{ runtime: 'edge', regions: ['us1', 'us2'], foo: { baz: true } }` for that page.\n\n## Further reading\n\n- [Tutorial: Page options](/tutorial/kit/page-options)",
+		"kit/state-management": "If you're used to building client-only apps, state management in an app that spans server and client might seem intimidating. This section provides tips for avoiding some common gotchas.\n\n## Avoid shared state on the server\n\nBrowsers are _stateful_ — state is stored in memory as the user interacts with the application. Servers, on the other hand, are _stateless_ — the content of the response is determined entirely by the content of the request.\n\nConceptually, that is. In reality, servers are often long-lived and shared by multiple users. For that reason it's important not to store data in shared variables. For example, consider this code:\n\n```js\n// @errors: 7034 7005\n/// file: +page.server.js\nlet user;\n\n/** @type {import('./$types').PageServerLoad} */\nexport function load() {\n\treturn { user };\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tdefault: async ({ request }) => {\n\t\tconst data = await request.formData();\n\n\t\t// NEVER DO THIS!\n\t\tuser = {\n\t\t\tname: data.get('name'),\n\t\t\tembarrassingSecret: data.get('secret')\n\t\t};\n\t}\n}\n```\n\nThe `user` variable is shared by everyone who connects to this server. If Alice submitted an embarrassing secret, and Bob visited the page after her, Bob would know Alice's secret. In addition, when Alice returns to the site later in the day, the server may have restarted, losing her data.\n\nInstead, you should _authenticate_ the user using [`cookies`](load#Cookies) and persist the data to a database.\n\n## No side-effects in load\n\nFor the same reason, your `load` functions should be _pure_ — no side-effects (except maybe the occasional `console.log(...)`). For example, you might be tempted to write to a store or global state inside a `load` function so that you can use the value in your components:\n\n```js\n/// file: +page.js\n// @filename: ambient.d.ts\ndeclare module '$lib/user' {\n\texport const user: { set: (value: any) => void };\n}\n\n// @filename: index.js\n// ---cut---\nimport { user } from '$lib/user';\n\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch }) {\n\tconst response = await fetch('/api/user');\n\n\t// NEVER DO THIS!\n\tuser.set(await response.json());\n}\n```\n\nAs with the previous example, this puts one user's information in a place that is shared by _all_ users. Instead, just return the data...\n\n```js\n/// file: +page.js\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ fetch }) {\n\tconst response = await fetch('/api/user');\n\n+++\treturn {\n\t\tuser: await response.json()\n\t};+++\n}\n```\n\n...and pass it around to the components that need it, or use [`page.data`](load#page.data).\n\nIf you're not using SSR, then there's no risk of accidentally exposing one user's data to another. But you should still avoid side-effects in your `load` functions — your application will be much easier to reason about without them.\n\n## Using state and stores with context\n\nYou might wonder how we're able to use `page.data` and other [app state]($app-state) (or [app stores]($app-stores)) if we can't use global state. The answer is that app state and app stores on the server use Svelte's [context API](/tutorial/svelte/context-api) — the state (or store) is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own state:\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data } = $props();\n\n\t// Pass a function referencing our state\n\t// to the context for child components to access\n\tsetContext('user', () => data.user);\n</script>\n```\n\n```svelte\n<!--- file: src/routes/user/+page.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\t// Retrieve user store from context\n\tconst user = getContext('user');\n</script>\n\n<p>Welcome {user().name}</p>\n```\n\n> [!NOTE] We're passing a function into `setContext` to keep reactivity across boundaries. Read more about it [here](/docs/svelte/$state#Passing-state-into-functions)\n\n> [!LEGACY]\n> You also use stores from `svelte/store` for this, but when using Svelte 5 it is recommended to make use of universal reactivity instead.\n\nUpdating the value of context-based state in deeper-level pages or components while the page is being rendered via SSR will not affect the value in the parent component because it has already been rendered by the time the state value is updated. In contrast, on the client (when CSR is enabled, which is the default) the value will be propagated and components, pages, and layouts higher in the hierarchy will react to the new value. Therefore, to avoid values 'flashing' during state updates during hydration, it is generally recommended to pass state down into components rather than up.\n\nIf you're not using SSR (and can guarantee that you won't need to use SSR in future) then you can safely keep state in a shared module, without using the context API.\n\n## Component and page state is preserved\n\nWhen you navigate around your application, SvelteKit reuses existing layout and page components. For example, if you have a route like this...\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\t// THIS CODE IS BUGGY!\n\tconst wordCount = data.content.split(' ').length;\n\tconst estimatedReadingTime = wordCount / 250;\n</script>\n\n<header>\n\t<h1>{data.title}</h1>\n\t<p>Reading time: {Math.round(estimatedReadingTime)} minutes</p>\n</header>\n\n<div>{@html data.content}</div>\n```\n\n...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the layout, page and any other components within to be destroyed and recreated. Instead the `data` prop (and by extension `data.title` and `data.content`) will update (as it would with any other Svelte component) and, because the code isn't rerunning, lifecycle methods like `onMount` and `onDestroy` won't rerun and `estimatedReadingTime` won't be recalculated.\n\nInstead, we need to make the value [_reactive_](/tutorial/svelte/state):\n\n```svelte\n/// file: src/routes/blog/[slug]/+page.svelte\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n+++\tlet wordCount = $derived(data.content.split(' ').length);\n\tlet estimatedReadingTime = $derived(wordCount / 250);+++\n</script>\n```\n\n> [!NOTE] If your code in `onMount` and `onDestroy` has to run again after navigation you can use [afterNavigate]($app-navigation#afterNavigate) and [beforeNavigate]($app-navigation#beforeNavigate) respectively.\n\nReusing components like this means that things like sidebar scroll state are preserved, and you can easily animate between changing values. In the case that you do need to completely destroy and remount a component on navigation, you can use this pattern:\n\n```svelte\n<script>\n\timport { page } from '$app/state';\n</script>\n\n{#key page.url.pathname}\n\t<BlogPost title={data.title} content={data.title} />\n{/key}\n```\n\n## Storing state in the URL\n\nIf you have state that should survive a reload and/or affect SSR, such as filters or sorting rules on a table, URL search parameters (like `?sort=price&order=ascending`) are a good place to put them. You can put them in `<a href=\"...\">` or `<form action=\"...\">` attributes, or set them programmatically via `goto('?key=value')`. They can be accessed inside `load` functions via the `url` parameter, and inside components via `page.url.searchParams`.\n\n## Storing ephemeral state in snapshots\n\nSome UI state, such as 'is the accordion open?', is disposable — if the user navigates away or refreshes the page, it doesn't matter if the state is lost. In some cases, you _do_ want the data to persist if the user navigates to a different page and comes back, but storing the state in the URL or in a database would be overkill. For this, SvelteKit provides [snapshots](snapshots), which let you associate component state with a history entry.",
+		"kit/remote-functions": "<blockquote class=\"since note\">\n\t<p>Available since 2.27</p>\n</blockquote>\n\nRemote functions are a tool for type-safe communication between client and server. They can be _called_ anywhere in your app, but always _run_ on the server, meaning they can safely access [server-only modules](server-only-modules) containing things like environment variables and database clients.\n\nCombined with Svelte's experimental support for [`await`](/docs/svelte/await-expressions), it allows you to load and manipulate data directly inside your components.\n\nThis feature is currently experimental, meaning it is likely to contain bugs and is subject to change without notice. You must opt in by adding the `kit.experimental.remoteFunctions` option in your `svelte.config.js` and optionally, the `compilerOptions.experimental.async` option to use `await` in components:\n\n```js\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\texperimental: {\n\t\t\t+++remoteFunctions: true+++\n\t\t}\n\t},\n\tcompilerOptions: {\n\t\texperimental: {\n\t\t\t+++async: true+++\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\n## Overview\n\nRemote functions are exported from a `.remote.js` or `.remote.ts` file, and come in four flavours: `query`, `form`, `command` and `prerender`. On the client, the exported functions are transformed to `fetch` wrappers that invoke their counterparts on the server via a generated HTTP endpoint. Remote files must be placed in your `src` directory.\n\n## query\n\nThe `query` function allows you to read dynamic data from the server (for _static_ data, consider using [`prerender`](#prerender) instead):\n\n```js\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport { query } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = query(async () => {\n\tconst posts = await db.sql`\n\t\tSELECT title, slug\n\t\tFROM post\n\t\tORDER BY published_at\n\t\tDESC\n\t`;\n\n\treturn posts;\n});\n```\n\n> [!NOTE] Throughout this page, you'll see imports from fictional modules like `$lib/server/database` and `$lib/server/auth`. These are purely for illustrative purposes — you can use whatever database client and auth setup you like.\n>\n> The `db.sql` function above is a [tagged template function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) that escapes any interpolated values.\n\nThe query returned from `getPosts` works as a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves to `posts`:\n\n```svelte\n<!--- file: src/routes/blog/+page.svelte --->\n<script>\n\timport { getPosts } from './data.remote';\n</script>\n\n<h1>Recent posts</h1>\n\n<ul>\n\t{#each await getPosts() as { title, slug }}\n\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t{/each}\n</ul>\n```\n\nUntil the promise resolves — and if it errors — the nearest [`<svelte:boundary>`](../svelte/svelte-boundary) will be invoked.\n\nWhile using `await` is recommended, as an alternative the query also has `loading`, `error` and `current` properties:\n\n```svelte\n<!--- file: src/routes/blog/+page.svelte --->\n<script>\n\timport { getPosts } from './data.remote';\n\n\tconst query = getPosts();\n</script>\n\n<h1>Recent posts</h1>\n\n{#if query.error}\n\t<p>oops!</p>\n{:else if query.loading}\n\t<p>loading...</p>\n{:else}\n\t<ul>\n\t\t{#each query.current as { title, slug }}\n\t\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t\t{/each}\n\t</ul>\n{/if}\n```\n\n> [!NOTE] For the rest of this document, we'll use the `await` form.\n\n### Query arguments\n\nQuery functions can accept an argument, such as the `slug` of an individual post:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\timport { getPost } from '../data.remote';\n\n\tlet { params } = $props();\n\n\tconst post = $derived(await getPost(params.slug));\n</script>\n\n<h1>{post.title}</h1>\n<div>{@html post.content}</div>\n```\n\nSince `getPost` exposes an HTTP endpoint, it's important to validate this argument to be sure that it's the correct type. For this, we can use any [Standard Schema](https://standardschema.dev/) validation library such as [Zod](https://zod.dev/) or [Valibot](https://valibot.dev/):\n\n```js\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { error } from '@sveltejs/kit';\nimport { query } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = query(async () => { /* ... */ });\n\nexport const getPost = query(v.string(), async (slug) => {\n\tconst [post] = await db.sql`\n\t\tSELECT * FROM post\n\t\tWHERE slug = ${slug}\n\t`;\n\n\tif (!post) error(404, 'Not found');\n\treturn post;\n});\n```\n\nBoth the argument and the return value are serialized with [devalue](https://github.com/sveltejs/devalue), which handles types like `Date` and `Map` (and custom types defined in your [transport hook](hooks#Universal-hooks-transport)) in addition to JSON.\n\n### Refreshing queries\n\nAny query can be re-fetched via its `refresh` method, which retrieves the latest value from the server:\n\n```svelte\n<button onclick={() => getPosts().refresh()}>\n\tCheck for new posts\n</button>\n```\n\n> [!NOTE] Queries are cached while they're on the page, meaning `getPosts() === getPosts()`. This means you don't need a reference like `const posts = getPosts()` in order to update the query.\n\n## query.batch\n\n`query.batch` works like `query` except that it batches requests that happen within the same macrotask. This solves the so-called n+1 problem: rather than each query resulting in a separate database call (for example), simultaneous queries are grouped together.\n\nOn the server, the callback receives an array of the arguments the function was called with. It must return a function of the form `(input: Input, index: number) => Output`. SvelteKit will then call this with each of the input arguments to resolve the individual calls with their results.\n\n```js\n/// file: weather.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { query } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getWeather = query.batch(v.string(), async (cities) => {\n\tconst weather = await db.sql`\n\t\tSELECT * FROM weather\n\t\tWHERE city = ANY(${cities})\n\t`;\n\tconst lookup = new Map(weather.map(w => [w.city, w]));\n\n\treturn (city) => lookup.get(city);\n});\n```\n\n```svelte\n<!--- file: Weather.svelte --->\n<script>\n\timport CityWeather from './CityWeather.svelte';\n\timport { getWeather } from './weather.remote.js';\n\n\tlet { cities } = $props();\n\tlet limit = $state(5);\n</script>\n\n<h2>Weather</h2>\n\n{#each cities.slice(0, limit) as city}\n\t<h3>{city.name}</h3>\n\t<CityWeather weather={await getWeather(city.id)} />\n{/each}\n\n{#if cities.length > limit}\n\t<button onclick={() => limit += 5}>\n\t\tLoad more\n\t</button>\n{/if}\n```\n\n## form\n\nThe `form` function makes it easy to write data to the server. It takes a callback that receives `data` constructed from the submitted [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)...\n\n```ts\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n\ndeclare module '$lib/server/auth' {\n\tinterface User {\n\t\tname: string;\n\t}\n\n\t/**\n\t * Gets a user's info from their cookies, using `getRequestEvent`\n\t */\n\texport function getUser(): Promise<User | null>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { error, redirect } from '@sveltejs/kit';\nimport { query, form } from '$app/server';\nimport * as db from '$lib/server/database';\nimport * as auth from '$lib/server/auth';\n\nexport const getPosts = query(async () => { /* ... */ });\n\nexport const getPost = query(v.string(), async (slug) => { /* ... */ });\n\nexport const createPost = form(\n\tv.object({\n\t\ttitle: v.pipe(v.string(), v.nonEmpty()),\n\t\tcontent:v.pipe(v.string(), v.nonEmpty())\n\t}),\n\tasync ({ title, content }) => {\n\t\t// Check the user is logged in\n\t\tconst user = await auth.getUser();\n\t\tif (!user) error(401, 'Unauthorized');\n\n\t\tconst slug = title.toLowerCase().replace(/ /g, '-');\n\n\t\t// Insert into the database\n\t\tawait db.sql`\n\t\t\tINSERT INTO post (slug, title, content)\n\t\t\tVALUES (${slug}, ${title}, ${content})\n\t\t`;\n\n\t\t// Redirect to the newly created page\n\t\tredirect(303, `/blog/${slug}`);\n\t}\n);\n```\n\n...and returns an object that can be spread onto a `<form>` element. The callback is called whenever the form is submitted.\n\n```svelte\n<!--- file: src/routes/blog/new/+page.svelte --->\n<script>\n\timport { createPost } from '../data.remote';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost}>\n\t<!-- form content goes here -->\n\n\t<button>Publish!</button>\n</form>\n```\n\nThe form object contains `method` and `action` properties that allow it to work without JavaScript (i.e. it submits data and reloads the page). It also has an [attachment](/docs/svelte/@attach) that progressively enhances the form when JavaScript is available, submitting data *without* reloading the entire page.\n\nAs with `query`, if the callback uses the submitted `data`, it should be [validated](#query-Query-arguments) by passing a [Standard Schema](https://standardschema.dev) as the first argument to `form`.\n\n### Fields\n\nA form is composed of a set of _fields_, which are defined by the schema. In the case of `createPost`, we have two fields, `title` and `content`, which are both strings. To get the attributes for a field, call its `.as(...)` method, specifying which [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types) to use:\n\n```svelte\n<form {...createPost}>\n\t<label>\n\t\t<h2>Title</h2>\n\t\t+++<input {...createPost.fields.title.as('text')} />+++\n\t</label>\n\n\t<label>\n\t\t<h2>Write your post</h2>\n\t\t+++<textarea {...createPost.fields.content.as('text')}></textarea>+++\n\t</label>\n\n\t<button>Publish!</button>\n</form>\n```\n\nThese attributes allow SvelteKit to set the correct input type, set a `name` that is used to construct the `data` passed to the handler, populate the `value` of the form (for example following a failed submission, to save the user having to re-enter everything), and set the [`aria-invalid`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid) state.\n\nFields can be nested in objects and arrays, and their values can be strings, numbers, booleans or `File` objects. For example, if your schema looked like this...\n\n```js\n/// file: data.remote.js\nimport * as v from 'valibot';\nimport { form } from '$app/server';\n// ---cut---\nconst datingProfile = v.object({\n\tname: v.string(),\n\tphoto: v.file(),\n\tinfo: v.object({\n\t\theight: v.number(),\n\t\tlikesDogs: v.optional(v.boolean(), false)\n\t}),\n\tattributes: v.array(v.string())\n});\n\nexport const createProfile = form(datingProfile, (data) => { /* ... */ });\n```\n\n...your form could look like this:\n\n```svelte\n<script>\n\timport { createProfile } from './data.remote';\n\n\tconst { name, photo, info, attributes } = createProfile.fields;\n</script>\n\n<form {...createProfile} enctype=\"multipart/form-data\">\n\t<label>\n\t\t<input {...name.as('text')} /> Name\n\t</label>\n\n\t<label>\n\t\t<input {...photo.as('file')} /> Photo\n\t</label>\n\n\t<label>\n\t\t<input {...info.height.as('number')} /> Height (cm)\n\t</label>\n\n\t<label>\n\t\t<input {...info.likesDogs.as('checkbox')} /> I like dogs\n\t</label>\n\n\t<h2>My best attributes</h2>\n\t<input {...attributes[0].as('text')} />\n\t<input {...attributes[1].as('text')} />\n\t<input {...attributes[2].as('text')} />\n\n\t<button>submit</button>\n</form>\n```\n\nBecause our form contains a `file` input, we've added an `enctype=\"multipart/form-data\"` attribute. The values for `info.height` and `info.likesDogs` are coerced to a number and a boolean respectively.\n\n> [!NOTE] If a `checkbox` input is unchecked, the value is not included in the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object that SvelteKit constructs the data from. As such, we have to make the value optional in our schema. In Valibot that means using `v.optional(v.boolean(), false)` instead of just `v.boolean()`, whereas in Zod it would mean using `z.coerce.boolean<boolean>()`.\n\nIn the case of `radio` and `checkbox` inputs that all belong to the same field, the `value` must be specified as a second argument to `.as(...)`:\n\n```js\n/// file: data.remote.js\nimport * as v from 'valibot';\nimport { form } from '$app/server';\n// ---cut---\nexport const survey = form(\n\tv.object({\n\t\toperatingSystem: v.picklist(['windows', 'mac', 'linux']),\n\t\tlanguages: v.optional(v.array(v.picklist(['html', 'css', 'js'])), [])\n\t}),\n\t(data) => { /* ... */ }\n);\n```\n\n```svelte\n<form {...survey}>\n\t<h2>Which operating system do you use?</h2>\n\n\t{#each ['windows', 'mac', 'linux'] as os}\n\t\t<label>\n\t\t\t<input {...survey.fields.operatingSystem.as('radio', os)}>\n\t\t\t{os}\n\t\t</label>\n\t{/each}\n\n\t<h2>Which languages do you write code in?</h2>\n\n\t{#each ['html', 'css', 'js'] as language}\n\t\t<label>\n\t\t\t<input {...survey.fields.languages.as('checkbox', language)}>\n\t\t\t{language}\n\t\t</label>\n\t{/each}\n\n\t<button>submit</button>\n</form>\n```\n\nAlternatively, you could use `select` and `select multiple`:\n\n```svelte\n<form {...survey}>\n\t<h2>Which operating system do you use?</h2>\n\n\t<select {...survey.fields.operatingSystem.as('select')}>\n\t\t<option>windows</option>\n\t\t<option>mac</option>\n\t\t<option>linux</option>\n\t</select>\n\n\t<h2>Which languages do you write code in?</h2>\n\n\t<select {...survey.fields.languages.as('select multiple')}>\n\t\t<option>html</option>\n\t\t<option>css</option>\n\t\t<option>js</option>\n\t</select>\n\n\t<button>submit</button>\n</form>\n```\n\n> [!NOTE] As with unchecked `checkbox` inputs, if no selections are made then the data will be `undefined`. For this reason, the `languages` field uses `v.optional(v.array(...), [])` rather than just `v.array(...)`.\n\n### Programmatic validation\n\nIn addition to declarative schema validation, you can programmatically mark fields as invalid inside the form handler using the `invalid` function. This is useful for cases where you can't know if something is valid until you try to perform some action:\n\n```js\n/// file: src/routes/shop/data.remote.js\nimport * as v from 'valibot';\nimport { form } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const buyHotcakes = form(\n\tv.object({\n\t\tqty: v.pipe(\n\t\t\tv.number(),\n\t\t\tv.minValue(1, 'you must buy at least one hotcake')\n\t\t)\n\t}),\n\tasync (data, invalid) => {\n\t\ttry {\n\t\t\tawait db.buy(data.qty);\n\t\t} catch (e) {\n\t\t\tif (e.code === 'OUT_OF_STOCK') {\n\t\t\t\tinvalid(\n\t\t\t\t\tinvalid.qty(`we don't have enough hotcakes`)\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n);\n```\n\nThe `invalid` function works as both a function and a proxy:\n\n- Call `invalid(issue1, issue2, ...issueN)` to throw a validation error\n- If an issue is a `string`, it applies to the form as a whole (and will show up in `fields.allIssues()`)\n- Use `invalid.fieldName(message)` to create an issue for a specific field. Like `fields` this is type-safe and you can use regular property access syntax to create issues for deeply nested objects (e.g. `invalid.profile.email('Email already exists')` or `invalid.items[0].qty('Insufficient stock')`)\n\n### Validation\n\nIf the submitted data doesn't pass the schema, the callback will not run. Instead, each invalid field's `issues()` method will return an array of `{ message: string }` objects, and the `aria-invalid` attribute (returned from `as(...)`) will be set to `true`:\n\n```svelte\n<form {...createPost}>\n\t<label>\n\t\t<h2>Title</h2>\n\n+++\t\t{#each createPost.fields.title.issues() as issue}\n\t\t\t<p class=\"issue\">{issue.message}</p>\n\t\t{/each}+++\n\n\t\t<input {...createPost.fields.title.as('text')} />\n\t</label>\n\n\t<label>\n\t\t<h2>Write your post</h2>\n\n+++\t\t{#each createPost.fields.content.issues() as issue}\n\t\t\t<p class=\"issue\">{issue.message}</p>\n\t\t{/each}+++\n\n\t\t<textarea {...createPost.fields.content.as('text')}></textarea>\n\t</label>\n\n\t<button>Publish!</button>\n</form>\n```\n\nYou don't need to wait until the form is submitted to validate the data — you can call `validate()` programmatically, for example in an `oninput` callback (which will validate the data on every keystroke) or an `onchange` callback:\n\n```svelte\n<form {...createPost} oninput={() => createPost.validate()}>\n\t<!-- -->\n</form>\n```\n\nBy default, issues will be ignored if they belong to form controls that haven't yet been interacted with. To validate _all_ inputs, call `validate({ includeUntouched: true })`.\n\nFor client-side validation, you can specify a _preflight_ schema which will populate `issues()` and prevent data being sent to the server if the data doesn't validate:\n\n```svelte\n<script>\n\timport * as v from 'valibot';\n\timport { createPost } from '../data.remote';\n\n\tconst schema = v.object({\n\t\ttitle: v.pipe(v.string(), v.nonEmpty()),\n\t\tcontent: v.pipe(v.string(), v.nonEmpty())\n\t});\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...+++createPost.preflight(schema)+++}>\n\t<!-- -->\n</form>\n```\n\n> [!NOTE] The preflight schema can be the same object as your server-side schema, if appropriate, though it won't be able to do server-side checks like 'this value already exists in the database'. Note that you cannot export a schema from a `.remote.ts` or `.remote.js` file, so the schema must either be exported from a shared module, or from a `<script module>` block in the component containing the `<form>`.\n\nTo get a list of _all_ issues, rather than just those belonging to a single field, you can use the `fields.allIssues()` method:\n\n```svelte\n{#each createPost.fields.allIssues() as issue}\n\t<p>{issue.message}</p>\n{/each}\n```\n\n### Getting/setting inputs\n\nEach field has a `value()` method that reflects its current value. As the user interacts with the form, it is automatically updated:\n\n```svelte\n<form {...createPost}>\n\t<!-- -->\n</form>\n\n<div class=\"preview\">\n\t<h2>{createPost.fields.title.value()}</h2>\n\t<div>{@html render(createPost.fields.content.value())}</div>\n</div>\n```\n\nAlternatively, `createPost.fields.value()` would return a `{ title, content }` object.\n\nYou can update a field (or a collection of fields) via the `set(...)` method:\n\n```svelte\n<script>\n\timport { createPost } from '../data.remote';\n\n\t// this...\n\tcreatePost.fields.set({\n\t\ttitle: 'My new blog post',\n\t\tcontent: 'Lorem ipsum dolor sit amet...'\n\t});\n\n\t// ...is equivalent to this:\n\tcreatePost.fields.title.set('My new blog post');\n\tcreatePost.fields.content.set('Lorem ipsum dolor sit amet');\n</script>\n```\n\n### Handling sensitive data\n\nIn the case of a non-progressively-enhanced form submission (i.e. where JavaScript is unavailable, for whatever reason) `value()` is also populated if the submitted data is invalid, so that the user does not need to fill the entire form out from scratch.\n\nYou can prevent sensitive data (such as passwords and credit card numbers) from being sent back to the user by using a name with a leading underscore:\n\n```svelte\n<form {...register}>\n\t<label>\n\t\tUsername\n\t\t<input {...register.fields.username.as('text')} />\n\t</label>\n\n\t<label>\n\t\tPassword\n\t\t<input +++{...register.fields._password.as('password')}+++ />\n\t</label>\n\n\t<button>Sign up!</button>\n</form>\n```\n\nIn this example, if the data does not validate, only the first `<input>` will be populated when the page reloads.\n\n### Single-flight mutations\n\nBy default, all queries used on the page (along with any `load` functions) are automatically refreshed following a successful form submission. This ensures that everything is up-to-date, but it's also inefficient: many queries will be unchanged, and it requires a second trip to the server to get the updated data.\n\nInstead, we can specify which queries should be refreshed in response to a particular form submission. This is called a _single-flight mutation_, and there are two ways to achieve it. The first is to refresh the query on the server, inside the form handler:\n\n```js\nimport * as v from 'valibot';\nimport { error, redirect } from '@sveltejs/kit';\nimport { query, form } from '$app/server';\nconst slug = '';\nconst post = { id: '' };\n/** @type {any} */\nconst externalApi = '';\n// ---cut---\nexport const getPosts = query(async () => { /* ... */ });\n\nexport const getPost = query(v.string(), async (slug) => { /* ... */ });\n\nexport const createPost = form(\n\tv.object({/* ... */}),\n\tasync (data) => {\n\t\t// form logic goes here...\n\n\t\t// Refresh `getPosts()` on the server, and send\n\t\t// the data back with the result of `createPost`\n\t\t+++await getPosts().refresh();+++\n\n\t\t// Redirect to the newly created page\n\t\tredirect(303, `/blog/${slug}`);\n\t}\n);\n\nexport const updatePost = form(\n\tv.object({/* ... */}),\n\tasync (data) => {\n\t\t// form logic goes here...\n\t\tconst result = externalApi.update(post);\n\n\t\t// The API already gives us the updated post,\n\t\t// no need to refresh it, we can set it directly\n\t\t+++await getPost(post.id).set(result);+++\n\t}\n);\n```\n\nThe second is to drive the single-flight mutation from the client, which we'll see in the section on [`enhance`](#form-enhance).\n\n### Returns and redirects\n\nThe example above uses [`redirect(...)`](@sveltejs-kit#redirect), which sends the user to the newly created page. Alternatively, the callback could return data, in which case it would be available as `createPost.result`:\n\n```ts\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n\ndeclare module '$lib/server/auth' {\n\tinterface User {\n\t\tname: string;\n\t}\n\n\t/**\n\t * Gets a user's info from their cookies, using `getRequestEvent`\n\t */\n\texport function getUser(): Promise<User | null>;\n}\n// @filename: index.js\nimport * as v from 'valibot';\nimport { error, redirect } from '@sveltejs/kit';\nimport { query, form } from '$app/server';\nimport * as db from '$lib/server/database';\nimport * as auth from '$lib/server/auth';\n\nexport const getPosts = query(async () => { /* ... */ });\n\nexport const getPost = query(v.string(), async (slug) => { /* ... */ });\n\n// ---cut---\nexport const createPost = form(\n\tv.object({/* ... */}),\n\tasync (data) => {\n\t\t// ...\n\n\t\treturn { success: true };\n\t}\n);\n```\n\n```svelte\n<!--- file: src/routes/blog/new/+page.svelte --->\n<script>\n\timport { createPost } from '../data.remote';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost}>\n\t<!-- -->\n</form>\n\n{#if createPost.result?.success}\n\t<p>Successfully published!</p>\n{/if}\n```\n\nThis value is _ephemeral_ — it will vanish if you resubmit, navigate away, or reload the page.\n\n> [!NOTE] The `result` value need not indicate success — it can also contain validation errors, along with any data that should repopulate the form on page reload.\n\nIf an error occurs during submission, the nearest `+error.svelte` page will be rendered.\n\n### enhance\n\nWe can customize what happens when the form is submitted with the `enhance` method:\n\n```svelte\n<!--- file: src/routes/blog/new/+page.svelte --->\n<script>\n\timport { createPost } from '../data.remote';\n\timport { showToast } from '$lib/toast';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost.enhance(async ({ form, data, submit }) => {\n\ttry {\n\t\tawait submit();\n\t\tform.reset();\n\n\t\tshowToast('Successfully published!');\n\t} catch (error) {\n\t\tshowToast('Oh no! Something went wrong');\n\t}\n})}>\n\t<!-- -->\n</form>\n```\n\n> When using `enhance`, the `<form>` is not automatically reset — you must call `form.reset()` if you want to clear the inputs.\n\nThe callback receives the `form` element, the `data` it contains, and a `submit` function.\n\nTo enable client-driven [single-flight mutations](#form-Single-flight-mutations), use `submit().updates(...)`. For example, if the `getPosts()` query was used on this page, we could refresh it like so:\n\n```ts\nimport type { RemoteQuery, RemoteQueryOverride } from '@sveltejs/kit';\ninterface Post {}\ndeclare function submit(): Promise<any> & {\n\tupdates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<any>;\n}\n\ndeclare function getPosts(): RemoteQuery<Post[]>;\n// ---cut---\nawait submit().updates(getPosts());\n```\n\nWe can also _override_ the current data while the submission is ongoing:\n\n```ts\nimport type { RemoteQuery, RemoteQueryOverride } from '@sveltejs/kit';\ninterface Post {}\ndeclare function submit(): Promise<any> & {\n\tupdates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<any>;\n}\n\ndeclare function getPosts(): RemoteQuery<Post[]>;\ndeclare const newPost: Post;\n// ---cut---\nawait submit().updates(\n\tgetPosts().withOverride((posts) => [newPost, ...posts])\n);\n```\n\nThe override will be applied immediately, and released when the submission completes (or fails).\n\n### Multiple instances of a form\n\nSome forms may be repeated as part of a list. In this case you can create separate instances of a form function via `for(id)` to achieve isolation.\n\n```svelte\n<!--- file: src/routes/todos/+page.svelte --->\n<script>\n\timport { getTodos, modifyTodo } from '../data.remote';\n</script>\n\n<h1>Todos</h1>\n\n{#each await getTodos() as todo}\n\t{@const modify = modifyTodo.for(todo.id)}\n\t<form {...modify}>\n\t\t<!-- -->\n\t\t<button disabled={!!modify.pending}>save changes</button>\n\t</form>\n{/each}\n```\n\n### buttonProps\n\nBy default, submitting a form will send a request to the URL indicated by the `<form>` element's [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form#attributes_for_form_submission) attribute, which in the case of a remote function is a property on the form object generated by SvelteKit.\n\nIt's possible for a `<button>` inside the `<form>` to send the request to a _different_ URL, using the [`formaction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#formaction) attribute. For example, you might have a single form that allows you to log in or register depending on which button was clicked.\n\nThis attribute exists on the `buttonProps` property of a form object:\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<script>\n\timport { login, register } from '$lib/auth';\n</script>\n\n<form {...login}>\n\t<label>\n\t\tYour username\n\t\t<input {...login.fields.username.as('text')} />\n\t</label>\n\n\t<label>\n\t\tYour password\n\t\t<input {...login.fields._password.as('password')} />\n\t</label>\n\n\t<button>login</button>\n\t<button {...register.buttonProps}>register</button>\n</form>\n```\n\nLike the form object itself, `buttonProps` has an `enhance` method for customizing submission behaviour.\n\n## command\n\nThe `command` function, like `form`, allows you to write data to the server. Unlike `form`, it's not specific to an element and can be called from anywhere.\n\n> [!NOTE] Prefer `form` where possible, since it gracefully degrades if JavaScript is disabled or fails to load.\n\nAs with `query` and `form`, if the function accepts an argument, it should be [validated](#query-Query-arguments) by passing a [Standard Schema](https://standardschema.dev) as the first argument to `command`.\n\n```ts\n/// file: likes.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { query, command } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getLikes = query(v.string(), async (id) => {\n\tconst [row] = await db.sql`\n\t\tSELECT likes\n\t\tFROM item\n\t\tWHERE id = ${id}\n\t`;\n\n\treturn row.likes;\n});\n\nexport const addLike = command(v.string(), async (id) => {\n\tawait db.sql`\n\t\tUPDATE item\n\t\tSET likes = likes + 1\n\t\tWHERE id = ${id}\n\t`;\n});\n```\n\nNow simply call `addLike`, from (for example) an event handler:\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\timport { getLikes, addLike } from './likes.remote';\n\timport { showToast } from '$lib/toast';\n\n\tlet { item } = $props();\n</script>\n\n<button\n\tonclick={async () => {\n\t\ttry {\n\t\t\tawait addLike(item.id);\n\t\t} catch (error) {\n\t\t\tshowToast('Something went wrong!');\n\t\t}\n\t}}\n>\n\tadd like\n</button>\n\n<p>likes: {await getLikes(item.id)}</p>\n```\n\n> [!NOTE] Commands cannot be called during render.\n\n### Updating queries\n\nTo update `getLikes(item.id)`, or any other query, we need to tell SvelteKit _which_ queries need to be refreshed (unlike `form`, which by default invalidates everything, to approximate the behaviour of a native form submission).\n\nWe either do that inside the command itself...\n\n```js\n/// file: likes.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { query, command } from '$app/server';\nimport * as db from '$lib/server/database';\n// ---cut---\nexport const getLikes = query(v.string(), async (id) => { /* ... */ });\n\nexport const addLike = command(v.string(), async (id) => {\n\tawait db.sql`\n\t\tUPDATE item\n\t\tSET likes = likes + 1\n\t\tWHERE id = ${id}\n\t`;\n\n\t+++getLikes(id).refresh();+++\n\t// Just like within form functions you can also do\n\t// getLikes(id).set(...)\n\t// in case you have the result already\n});\n```\n\n...or when we call it:\n\n```ts\nimport { RemoteCommand, RemoteQueryFunction } from '@sveltejs/kit';\n\ninterface Item { id: string }\n\ndeclare const addLike: RemoteCommand<string, void>;\ndeclare const getLikes: RemoteQueryFunction<string, number>;\ndeclare function showToast(message: string): void;\ndeclare const item: Item;\n// ---cut---\ntry {\n\tawait addLike(item.id).+++updates(getLikes(item.id))+++;\n} catch (error) {\n\tshowToast('Something went wrong!');\n}\n```\n\nAs before, we can use `withOverride` for optimistic updates:\n\n```ts\nimport { RemoteCommand, RemoteQueryFunction } from '@sveltejs/kit';\n\ninterface Item { id: string }\n\ndeclare const addLike: RemoteCommand<string, void>;\ndeclare const getLikes: RemoteQueryFunction<string, number>;\ndeclare function showToast(message: string): void;\ndeclare const item: Item;\n// ---cut---\ntry {\n\tawait addLike(item.id).updates(\n\t\tgetLikes(item.id).+++withOverride((n) => n + 1)+++\n\t);\n} catch (error) {\n\tshowToast('Something went wrong!');\n}\n```\n\n## prerender\n\nThe `prerender` function is similar to `query`, except that it will be invoked at build time to prerender the result. Use this for data that changes at most once per redeployment.\n\n```js\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport { prerender } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = prerender(async () => {\n\tconst posts = await db.sql`\n\t\tSELECT title, slug\n\t\tFROM post\n\t\tORDER BY published_at\n\t\tDESC\n\t`;\n\n\treturn posts;\n});\n```\n\nYou can use `prerender` functions on pages that are otherwise dynamic, allowing for partial prerendering of your data. This results in very fast navigation, since prerendered data can live on a CDN along with your other static assets.\n\nIn the browser, prerendered data is saved using the [`Cache`](https://developer.mozilla.org/en-US/docs/Web/API/Cache) API. This cache survives page reloads, and will be cleared when the user first visits a new deployment of your app.\n\n> [!NOTE] When the entire page has `export const prerender = true`, you cannot use queries, as they are dynamic.\n\n### Prerender arguments\n\nAs with queries, prerender functions can accept an argument, which should be [validated](#query-Query-arguments) with a [Standard Schema](https://standardschema.dev/):\n\n```js\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { error } from '@sveltejs/kit';\nimport { prerender } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = prerender(async () => { /* ... */ });\n\nexport const getPost = prerender(v.string(), async (slug) => {\n\tconst [post] = await db.sql`\n\t\tSELECT * FROM post\n\t\tWHERE slug = ${slug}\n\t`;\n\n\tif (!post) error(404, 'Not found');\n\treturn post;\n});\n```\n\nAny calls to `getPost(...)` found by SvelteKit's crawler while [prerendering pages](page-options#prerender) will be saved automatically, but you can also specify which values it should be called with using the `inputs` option:\n\n```js\n/// file: src/routes/blog/data.remote.js\nimport * as v from 'valibot';\nimport { prerender } from '$app/server';\n// ---cut---\n\nexport const getPost = prerender(\n\tv.string(),\n\tasync (slug) => { /* ... */ },\n\t{\n\t\tinputs: () => [\n\t\t\t'first-post',\n\t\t\t'second-post',\n\t\t\t'third-post'\n\t\t]\n\t}\n);\n```\n\n> [!NOTE] Svelte does not yet support asynchronous server-side rendering, so it's likely that you're only calling remote functions from the browser, rather than during prerendering. Because of this, you will need to use `inputs`, for now. We're actively working on this roadblock.\n\nBy default, prerender functions are excluded from your server bundle, which means that you cannot call them with any arguments that were _not_ prerendered. You can set `dynamic: true` to change this behaviour:\n\n```js\n/// file: src/routes/blog/data.remote.js\nimport * as v from 'valibot';\nimport { prerender } from '$app/server';\n// ---cut---\n\nexport const getPost = prerender(\n\tv.string(),\n\tasync (slug) => { /* ... */ },\n\t{\n\t\t+++dynamic: true+++,\n\t\tinputs: () => [\n\t\t\t'first-post',\n\t\t\t'second-post',\n\t\t\t'third-post'\n\t\t]\n\t}\n);\n```\n\n## Handling validation errors\n\nAs long as _you're_ not passing invalid data to your remote functions, there are only two reasons why the argument passed to a `command`, `query` or `prerender` function would fail validation:\n\n- the function signature changed between deployments, and some users are currently on an older version of your app\n- someone is trying to attack your site by poking your exposed endpoints with bad data\n\nIn the second case, we don't want to give the attacker any help, so SvelteKit will generate a generic [400 Bad Request](https://http.dog/400) response. You can control the message by implementing the [`handleValidationError`](hooks#Server-hooks-handleValidationError) server hook, which, like [`handleError`](hooks#Shared-hooks-handleError), must return an [`App.Error`](errors#Type-safety) (which defaults to `{ message: string }`):\n\n```js\n/// file: src/hooks.server.ts\n/** @type {import('@sveltejs/kit').HandleValidationError} */\nexport function handleValidationError({ event, issues }) {\n\treturn {\n\t\tmessage: 'Nice try, hacker!'\n\t};\n}\n```\n\nIf you know what you're doing and want to opt out of validation, you can pass the string `'unchecked'` in place of a schema:\n\n```ts\n/// file: data.remote.ts\nimport { query } from '$app/server';\n\nexport const getStuff = query('unchecked', async ({ id }: { id: string }) => {\n\t// the shape might not actually be what TypeScript thinks\n\t// since bad actors might call this function with other arguments\n});\n```\n\n## Using `getRequestEvent`\n\nInside `query`, `form` and `command` you can use [`getRequestEvent`]($app-server#getRequestEvent) to get the current [`RequestEvent`](@sveltejs-kit#RequestEvent) object. This makes it easy to build abstractions for interacting with cookies, for example:\n\n```ts\n/// file: user.remote.ts\nimport { getRequestEvent, query } from '$app/server';\nimport { findUser } from '$lib/server/database';\n\nexport const getProfile = query(async () => {\n\tconst user = await getUser();\n\n\treturn {\n\t\tname: user.name,\n\t\tavatar: user.avatar\n\t};\n});\n\n// this query could be called from multiple places, but\n// the function will only run once per request\nconst getUser = query(() => {\n\tconst { cookies } = getRequestEvent();\n\n\treturn await findUser(cookies.get('session_id'));\n});\n```\n\nNote that some properties of `RequestEvent` are different inside remote functions:\n\n- you cannot set headers (other than writing cookies, and then only inside `form` and `command` functions)\n- `route`, `params` and `url` relate to the page the remote function was called from, _not_ the URL of the endpoint SvelteKit creates for the remote function. Queries are not re-run when the user navigates (unless the argument to the query changes as a result of navigation), and so you should be mindful of how you use these values. In particular, never use them to determine whether or not a user is authorized to access certain data.\n\n## Redirects\n\nInside `query`, `form` and `prerender` functions it is possible to use the [`redirect(...)`](@sveltejs-kit#redirect) function. It is *not* possible inside `command` functions, as you should avoid redirecting here. (If you absolutely have to, you can return a `{ redirect: location }` object and deal with it in the client.)",
+		"kit/building-your-app": "Building a SvelteKit app happens in two stages, which both happen when you run `vite build` (usually via `npm run build`).\n\nFirstly, Vite creates an optimized production build of your server code, your browser code, and your service worker (if you have one). [Prerendering](page-options#prerender) is executed at this stage, if appropriate.\n\nSecondly, an _adapter_ takes this production build and tunes it for your target environment — more on this on the following pages.\n\n## During the build\n\nSvelteKit will load your `+page/layout(.server).js` files (and all files they import) for analysis during the build. Any code that should _not_ be executed at this stage must check that `building` from [`$app/environment`]($app-environment) is `false`:\n\n```js\n+++import { building } from '$app/environment';+++\nimport { setupMyDatabase } from '$lib/server/database';\n\n+++if (!building) {+++\n\tsetupMyDatabase();\n+++}+++\n\nexport function load() {\n\t// ...\n}\n```\n\n## Preview your app\n\nAfter building, you can view your production build locally with `vite preview` (via `npm run preview`). Note that this will run the app in Node, and so is not a perfect reproduction of your deployed app — adapter-specific adjustments like the [`platform` object](adapters#Platform-specific-context) do not apply to previews.",
+		"kit/adapters": "Before you can deploy your SvelteKit app, you need to _adapt_ it for your deployment target. Adapters are small plugins that take the built app as input and generate output for deployment.\n\nOfficial adapters exist for a variety of platforms — these are documented on the following pages:\n\n- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for Cloudflare Workers and Cloudflare Pages\n- [`@sveltejs/adapter-netlify`](adapter-netlify) for Netlify\n- [`@sveltejs/adapter-node`](adapter-node) for Node servers\n- [`@sveltejs/adapter-static`](adapter-static) for static site generation (SSG)\n- [`@sveltejs/adapter-vercel`](adapter-vercel) for Vercel\n\nAdditional [community-provided adapters](/packages#sveltekit-adapters) exist for other platforms.\n\n## Using adapters\n\nYour adapter is specified in `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\n// @filename: ambient.d.ts\ndeclare module 'svelte-adapter-foo' {\n\tconst adapter: (opts: any) => import('@sveltejs/kit').Adapter;\n\texport default adapter;\n}\n\n// @filename: index.js\n// ---cut---\nimport adapter from 'svelte-adapter-foo';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// adapter options go here\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Platform-specific context\n\nSome adapters may have access to additional information about the request. For example, Cloudflare Workers can access an `env` object containing KV namespaces etc. This can be passed to the `RequestEvent` used in [hooks](hooks) and [server routes](routing#server) as the `platform` property — consult each adapter's documentation to learn more.",
+		"kit/adapter-auto": "When you create a new SvelteKit project with `npx sv create`, it installs [`adapter-auto`](https://github.com/sveltejs/kit/tree/main/packages/adapter-auto) by default. This adapter automatically installs and uses the correct adapter for supported environments when you deploy:\n\n- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for [Cloudflare Pages](https://developers.cloudflare.com/pages/)\n- [`@sveltejs/adapter-netlify`](adapter-netlify) for [Netlify](https://netlify.com/)\n- [`@sveltejs/adapter-vercel`](adapter-vercel) for [Vercel](https://vercel.com/)\n- [`svelte-adapter-azure-swa`](https://github.com/geoffrich/svelte-adapter-azure-swa) for [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/)\n- [`svelte-kit-sst`](https://github.com/sst/v2/tree/master/packages/svelte-kit-sst) for [AWS via SST](https://sst.dev/docs/start/aws/svelte)\n- [`@sveltejs/adapter-node`](adapter-node) for [Google Cloud Run](https://cloud.google.com/run)\n\nIt's recommended to install the appropriate adapter to your `devDependencies` once you've settled on a target environment, since this will add the adapter to your lockfile and slightly improve install times on CI.\n\n## Environment-specific configuration\n\nTo add configuration options, such as `{ edge: true }` in [`adapter-vercel`](adapter-vercel) and [`adapter-netlify`](adapter-netlify), you must install the underlying adapter — `adapter-auto` does not take any options.\n\n## Adding community adapters\n\nYou can add zero-config support for additional adapters by editing [adapters.js](https://github.com/sveltejs/kit/blob/main/packages/adapter-auto/adapters.js) and opening a pull request.",
+		"kit/adapter-node": "To generate a standalone Node server, use [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node).\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-node`, then add the adapter to your `svelte.config.js`:\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-node';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n## Deploying\n\nFirst, build your app with `npm run build`. This will create the production server in the output directory specified in the adapter options, defaulting to `build`.\n\nYou will need the output directory, the project's `package.json`, and the production dependencies in `node_modules` to run the application. Production dependencies can be generated by copying the `package.json` and `package-lock.json` and then running `npm ci --omit dev` (you can skip this step if your app doesn't have any dependencies). You can then start your app with this command:\n\n```sh\nnode build\n```\n\nDevelopment dependencies will be bundled into your app using [Rollup](https://rollupjs.org). To control whether a given package is bundled or externalised, place it in `devDependencies` or `dependencies` respectively in your `package.json`.\n\n### Compressing responses\n\nYou will typically want to compress responses coming from the server. If you're already deploying your server behind a reverse proxy for SSL or load balancing, it typically results in better performance to also handle compression at that layer since Node.js is single-threaded.\n\nHowever, if you're building a [custom server](#Custom-server) and do want to add a compression middleware there, note that we would recommend using [`@polka/compression`](https://www.npmjs.com/package/@polka/compression) since SvelteKit streams responses and the more popular `compression` package does not support streaming and may cause errors when used.\n\n## Environment variables\n\nIn `dev` and `preview`, SvelteKit will read environment variables from your `.env` file (or `.env.local`, or `.env.[mode]`, [as determined by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files).)\n\nIn production, `.env` files are _not_ automatically loaded. To do so, install `dotenv` in your project...\n\n```sh\nnpm install dotenv\n```\n\n...and invoke it before running the built app:\n\n```sh\nnode +++-r dotenv/config+++ build\n```\n\nIf you use Node.js v20.6+, you can use the [`--env-file`](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs) flag instead:\n\n```sh\nnode +++--env-file=.env+++ build\n```\n\n### `PORT`, `HOST` and `SOCKET_PATH`\n\nBy default, the server will accept connections on `0.0.0.0` using port 3000. These can be customised with the `PORT` and `HOST` environment variables:\n\n```sh\nHOST=127.0.0.1 PORT=4000 node build\n```\n\nAlternatively, the server can be configured to accept connections on a specified socket path. When this is done using the `SOCKET_PATH` environment variable, the `HOST` and `PORT` environment variables will be disregarded.\n\n```sh\nSOCKET_PATH=/tmp/socket node build\n```\n\n### `ORIGIN`, `PROTOCOL_HEADER`, `HOST_HEADER`, and `PORT_HEADER`\n\nHTTP doesn't give SvelteKit a reliable way to know the URL that is currently being requested. The simplest way to tell SvelteKit where the app is being served is to set the `ORIGIN` environment variable:\n\n```sh\nORIGIN=https://my.site node build\n\n# or e.g. for local previewing and testing\nORIGIN=http://localhost:3000 node build\n```\n\nWith this, a request for the `/stuff` pathname will correctly resolve to `https://my.site/stuff`. Alternatively, you can specify headers that tell SvelteKit about the request protocol and host, from which it can construct the origin URL:\n\n```sh\nPROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build\n```\n\n> [!NOTE] [`x-forwarded-proto`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Proto) and [`x-forwarded-host`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Host) are de facto standard headers that forward the original protocol and host if you're using a reverse proxy (think load balancers and CDNs). You should only set these variables if your server is behind a trusted reverse proxy; otherwise, it'd be possible for clients to spoof these headers.\n>\n> If you're hosting your proxy on a non-standard port and your reverse proxy supports `x-forwarded-port`, you can also set `PORT_HEADER=x-forwarded-port`.\n\nIf `adapter-node` can't correctly determine the URL of your deployment, you may experience this error when using [form actions](form-actions):\n\n> [!NOTE] Cross-site POST form submissions are forbidden\n\n### `ADDRESS_HEADER` and `XFF_DEPTH`\n\nThe [`RequestEvent`](@sveltejs-kit#RequestEvent) object passed to hooks and endpoints includes an `event.getClientAddress()` function that returns the client's IP address. By default this is the connecting `remoteAddress`. If your server is behind one or more proxies (such as a load balancer), this value will contain the innermost proxy's IP address rather than the client's, so we need to specify an `ADDRESS_HEADER` to read the address from:\n\n```sh\nADDRESS_HEADER=True-Client-IP node build\n```\n\n> [!NOTE] Headers can easily be spoofed. As with `PROTOCOL_HEADER` and `HOST_HEADER`, you should [know what you're doing](https://adam-p.ca/blog/2022/03/x-forwarded-for/) before setting these.\n\nIf the `ADDRESS_HEADER` is `X-Forwarded-For`, the header value will contain a comma-separated list of IP addresses. The `XFF_DEPTH` environment variable should specify how many trusted proxies sit in front of your server. E.g. if there are three trusted proxies, proxy 3 will forward the addresses of the original connection and the first two proxies:\n\n```\n<client address>, <proxy 1 address>, <proxy 2 address>\n```\n\nSome guides will tell you to read the left-most address, but this leaves you [vulnerable to spoofing](https://adam-p.ca/blog/2022/03/x-forwarded-for/):\n\n```\n<spoofed address>, <client address>, <proxy 1 address>, <proxy 2 address>\n```\n\nWe instead read from the _right_, accounting for the number of trusted proxies. In this case, we would use `XFF_DEPTH=3`.\n\n> [!NOTE] If you need to read the left-most address instead (and don't care about spoofing) — for example, to offer a geolocation service, where it's more important for the IP address to be _real_ than _trusted_, you can do so by inspecting the `x-forwarded-for` header within your app.\n\n### `BODY_SIZE_LIMIT`\n\nThe maximum request body size to accept in bytes including while streaming. The body size can also be specified with a unit suffix for kilobytes (`K`), megabytes (`M`), or gigabytes (`G`). For example, `512K` or `1M`. Defaults to 512kb. You can disable this option with a value of `Infinity` (0 in older versions of the adapter) and implement a custom check in [`handle`](hooks#Server-hooks-handle) if you need something more advanced.\n\n### `SHUTDOWN_TIMEOUT`\n\nThe number of seconds to wait before forcefully closing any remaining connections after receiving a `SIGTERM` or `SIGINT` signal. Defaults to `30`. Internally the adapter calls [`closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections). See [Graceful shutdown](#Graceful-shutdown) for more details.\n\n### `IDLE_TIMEOUT`\n\nWhen using systemd socket activation, `IDLE_TIMEOUT` specifies the number of seconds after which the app is automatically put to sleep when receiving no requests. If not set, the app runs continuously. See [Socket activation](#Socket-activation) for more details.\n\n## Options\n\nThe adapter can be configured with various options:\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-node';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// default options are shown\n\t\t\tout: 'build',\n\t\t\tprecompress: true,\n\t\t\tenvPrefix: ''\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n### out\n\nThe directory to build the server to. It defaults to `build` — i.e. `node build` would start the server locally after it has been created.\n\n### precompress\n\nEnables precompressing using gzip and brotli for assets and prerendered pages. It defaults to `true`.\n\n### envPrefix\n\nIf you need to change the name of the environment variables used to configure the deployment (for example, to deconflict with environment variables you don't control), you can specify a prefix:\n\n```js\nenvPrefix: 'MY_CUSTOM_';\n```\n\n```sh\nMY_CUSTOM_HOST=127.0.0.1 \\\nMY_CUSTOM_PORT=4000 \\\nMY_CUSTOM_ORIGIN=https://my.site \\\nnode build\n```\n\n## Graceful shutdown\n\nBy default `adapter-node` gracefully shuts down the HTTP server when a `SIGTERM` or `SIGINT` signal is received. It will:\n\n1. reject new requests ([`server.close`](https://nodejs.org/api/http.html#serverclosecallback))\n2. wait for requests that have already been made but not received a response yet to finish and close connections once they become idle ([`server.closeIdleConnections`](https://nodejs.org/api/http.html#servercloseidleconnections))\n3. and finally, close any remaining connections that are still active after [`SHUTDOWN_TIMEOUT`](#Environment-variables-SHUTDOWN_TIMEOUT) seconds. ([`server.closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections))\n\n> [!NOTE] If you want to customize this behaviour you can use a [custom server](#Custom-server).\n\nYou can listen to the `sveltekit:shutdown` event which is emitted after the HTTP server has closed all connections. Unlike Node's `exit` event, the `sveltekit:shutdown` event supports asynchronous operations and is always emitted when all connections are closed even if the server has dangling work such as open database connections.\n\n```js\n// @errors: 2304\nprocess.on('sveltekit:shutdown', async (reason) => {\n  await jobs.stop();\n  await db.close();\n});\n```\n\nThe parameter `reason` has one of the following values:\n\n- `SIGINT` - shutdown was triggered by a `SIGINT` signal\n- `SIGTERM` - shutdown was triggered by a `SIGTERM` signal\n- `IDLE` - shutdown was triggered by [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT)\n\n## Socket activation\n\nMost Linux operating systems today use a modern process manager called systemd to start the server and run and manage services. You can configure your server to allocate a socket and start and scale your app on demand. This is called [socket activation](https://0pointer.de/blog/projects/socket-activated-containers.html). In this case, the OS will pass two environment variables to your app — `LISTEN_PID` and `LISTEN_FDS`. The adapter will then listen on file descriptor 3 which refers to a systemd socket unit that you will have to create.\n\n> [!NOTE] You can still use [`envPrefix`](#Options-envPrefix) with systemd socket activation. `LISTEN_PID` and `LISTEN_FDS` are always read without a prefix.\n\nTo take advantage of socket activation follow these steps.\n\n1. Run your app as a [systemd service](https://www.freedesktop.org/software/systemd/man/latest/systemd.service.html). It can either run directly on the host system or inside a container (using Docker or a systemd portable service for example). If you additionally pass an [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT) environment variable to your app it will gracefully shutdown if there are no requests for `IDLE_TIMEOUT` seconds. systemd will automatically start your app again when new requests are coming in.\n\n```ini\n/// file: /etc/systemd/system/myapp.service\n[Service]\nEnvironment=NODE_ENV=production IDLE_TIMEOUT=60\nExecStart=/usr/bin/node /usr/bin/myapp/build\n```\n\n2. Create an accompanying [socket unit](https://www.freedesktop.org/software/systemd/man/latest/systemd.socket.html). The adapter only accepts a single socket.\n\n```ini\n/// file: /etc/systemd/system/myapp.socket\n[Socket]\nListenStream=3000\n\n[Install]\nWantedBy=sockets.target\n```\n\n3. Make sure systemd has recognised both units by running `sudo systemctl daemon-reload`. Then enable the socket on boot and start it immediately using `sudo systemctl enable --now myapp.socket`. The app will then automatically start once the first request is made to `localhost:3000`.\n\n## Custom server\n\nThe adapter creates two files in your build directory — `index.js` and `handler.js`. Running `index.js` — e.g. `node build`, if you use the default build directory — will start a server on the configured port.\n\nAlternatively, you can import the `handler.js` file, which exports a handler suitable for use with [Express](https://github.com/expressjs/express), [Connect](https://github.com/senchalabs/connect) or [Polka](https://github.com/lukeed/polka) (or even just the built-in [`http.createServer`](https://nodejs.org/dist/latest/docs/api/http.html#httpcreateserveroptions-requestlistener)) and set up your own server:\n\n```js\n// @errors: 2307 7006\n/// file: my-server.js\nimport { handler } from './build/handler.js';\nimport express from 'express';\n\nconst app = express();\n\n// add a route that lives separately from the SvelteKit app\napp.get('/healthcheck', (req, res) => {\n\tres.end('ok');\n});\n\n// let SvelteKit handle everything else, including serving prerendered pages and static assets\napp.use(handler);\n\napp.listen(3000, () => {\n\tconsole.log('listening on port 3000');\n});\n```",
+		"kit/adapter-static": "To use SvelteKit as a static site generator (SSG), use [`adapter-static`](https://github.com/sveltejs/kit/tree/main/packages/adapter-static).\n\nThis will prerender your entire site as a collection of static files. If you'd like to prerender only some pages and dynamically server-render others, you will need to use a different adapter together with [the `prerender` option](page-options#prerender).\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-static`, then add the adapter to your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// default options are shown. On some platforms\n\t\t\t// these options are set automatically — see below\n\t\t\tpages: 'build',\n\t\t\tassets: 'build',\n\t\t\tfallback: undefined,\n\t\t\tprecompress: false,\n\t\t\tstrict: true\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n...and add the [`prerender`](page-options#prerender) option to your root layout:\n\n```js\n/// file: src/routes/+layout.js\n// If you're using a fallback (i.e. SPA mode) you don't need to prerender all\n// pages by setting this here, but should prerender as many as possible to\n// avoid large performance and SEO impacts\nexport const prerender = true;\n```\n\n> [!NOTE] You must ensure SvelteKit's [`trailingSlash`](page-options#trailingSlash) option is set appropriately for your environment. If your host does not render `/a.html` upon receiving a request for `/a` then you will need to set `trailingSlash: 'always'` in your root layout to create `/a/index.html` instead.\n\n## Zero-config support\n\nSome platforms have zero-config support (more to come in future):\n\n- [Vercel](https://vercel.com)\n\nOn these platforms, you should omit the adapter options so that `adapter-static` can provide the optimal configuration:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter(---{...}---)\n\t}\n};\n\nexport default config;\n```\n\n## Options\n\n### pages\n\nThe directory to write prerendered pages to. It defaults to `build`.\n\n### assets\n\nThe directory to write static assets (the contents of `static`, plus client-side JS and CSS generated by SvelteKit) to. Ordinarily this should be the same as `pages`, and it will default to whatever the value of `pages` is, but in rare circumstances you might need to output pages and assets to separate locations.\n\n### fallback\n\nTo create a [single page app (SPA)](single-page-apps) you must specify the name of the fallback page to be generated by SvelteKit, which is used as the entry point for URLs that have not been prerendered. This is commonly `200.html`, but can vary depending on your deployment platform. You should avoid `index.html` where possible to avoid conflicting with a prerendered homepage. \n\n> This option has large negative performance and SEO impacts. It is only recommended in certain circumstances such as wrapping the site in a mobile app. See the [single page apps](single-page-apps) documentation for more details and alternatives.\n\n### precompress\n\nIf `true`, precompresses files with brotli and gzip. This will generate `.br` and `.gz` files.\n\n### strict\n\nBy default, `adapter-static` checks that either all pages and endpoints (if any) of your app were prerendered, or you have the `fallback` option set. This check exists to prevent you from accidentally publishing an app where some parts of it are not accessible, because they are not contained in the final output. If you know this is ok (for example when a certain page only exists conditionally), you can set `strict` to `false` to turn off this check.\n\n## GitHub Pages\n\nWhen building for [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages), if your repo name is not equivalent to `your-username.github.io`, make sure to update [`config.kit.paths.base`](configuration#paths) to match your repo name. This is because the site will be served from `https://your-username.github.io/your-repo-name` rather than from the root.\n\nYou'll also want to generate a fallback `404.html` page to replace the default 404 page shown by GitHub Pages.\n\nA config for GitHub Pages might look like the following:\n\n```js\n// @errors: 2322\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\tfallback: '404.html'\n\t\t}),\n\t\tpaths: {\n\t\t\tbase: process.argv.includes('dev') ? '' : process.env.BASE_PATH\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\nYou can use GitHub actions to automatically deploy your site to GitHub Pages when you make a change. Here's an example workflow:\n\n```yaml\n### file: .github/workflows/deploy.yml\nname: Deploy to GitHub Pages\n\non:\n  push:\n    branches: 'main'\n\njobs:\n  build_site:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`\n      # - name: Install pnpm\n      #   uses: pnpm/action-setup@v3\n      #   with:\n      #     version: 8\n\n      - name: Install Node.js\n        uses: actions/setup-node@v4\n        with:\n          node-version: 20\n          cache: npm\n\n      - name: Install dependencies\n        run: npm i\n\n      - name: build\n        env:\n          BASE_PATH: '/${{ github.event.repository.name }}'\n        run: |\n          npm run build\n\n      - name: Upload Artifacts\n        uses: actions/upload-pages-artifact@v3\n        with:\n          # this should match the `pages` option in your adapter-static options\n          path: 'build/'\n\n  deploy:\n    needs: build_site\n    runs-on: ubuntu-latest\n\n    permissions:\n      pages: write\n      id-token: write\n\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n\n    steps:\n      - name: Deploy\n        id: deployment\n        uses: actions/deploy-pages@v4\n```\n\nIf you're not using GitHub actions to deploy your site (for example, you're pushing the built site to its own repo), add an empty `.nojekyll` file in your `static` directory to prevent Jekyll from interfering.",
+		"kit/single-page-apps": "You can turn a SvelteKit app into a fully client-rendered single-page app (SPA) by specifying a _fallback page_. This page will be served for any URLs that can't be served by other means such as returning a prerendered page.\n\n> [!NOTE] SPA mode has a large negative performance impact by forcing multiple network round trips (for the blank HTML document, then for the JavaScript, and then for any data needed for the page) before content can be shown. Unless you are serving the app from a local network (e.g.a mobile app that wraps a locally-served SPA) this will delay startup, especially when considering the latency of mobile devices. It also harms SEO by often causing sites to be downranked for performance (SPAs are much more likely to fail [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals)), excluding search engines that don't render JS, and causing your site to receive less frequent updates from those that do. And finally, it makes your app inaccessible to users if JavaScript fails or is disabled (which happens [more often than you probably think](https://kryogenix.org/code/browser/everyonehasjs.html)).\n>\n> You can avoid these drawbacks by [prerendering](#Prerendering-individual-pages) as many pages as possible when using SPA mode (especially your homepage). If you can prerender all pages, you can simply use [static site generation](adapter-static) rather than a SPA. Otherwise, you should strongly consider using an adapter which supports server side rendering. SvelteKit has officially supported adapters for various providers with generous free tiers.\n\n## Usage\n\nFirst, disable SSR for the pages you don't want to prerender. These pages will be served via the fallback page. E.g. to serve all pages via the fallback by default, you can update the root layout as shown below. You should [opt back into prerendering individual pages and directories](#Prerendering-individual-pages) where possible.\n```js\n/// file: src/routes/+layout.js\nexport const ssr = false;\n```\n\nIf you don't have any server-side logic (i.e. `+page.server.js`, `+layout.server.js` or `+server.js` files) you can use [`adapter-static`](adapter-static) to create your SPA. Install `adapter-static` with `npm i -D @sveltejs/adapter-static` and add it to your `svelte.config.js` with the `fallback` option:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\tfallback: '200.html' // may differ from host to host\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\nThe `fallback` page is an HTML page created by SvelteKit from your page template (e.g. `app.html`) that loads your app and navigates to the correct route. For example [Surge](https://surge.sh/help/adding-a-200-page-for-client-side-routing), a static web host, lets you add a `200.html` file that will handle any requests that don't correspond to static assets or prerendered pages.\n\nOn some hosts it may be something else entirely — consult your platform's documentation. We recommend avoiding `index.html` if possible as it may conflict with prerendering.\n\n> [!NOTE] Note that the fallback page will always contain absolute asset paths (i.e. beginning with `/` rather than `.`) regardless of the value of [`paths.relative`](configuration#paths), since it is used to respond to requests for arbitrary paths.\n\n## Prerendering individual pages\n\nIf you want certain pages to be prerendered, you can re-enable `ssr` alongside `prerender` for just those parts of your app:\n\n```js\n/// file: src/routes/my-prerendered-page/+page.js\nexport const prerender = true;\nexport const ssr = true;\n```\n\nYou won't need a Node server or server capable of running JavaScript to deploy this page. It will only server render your page while building your project for the purposes of outputting an `.html` page that can be served from any static web host.\n\n## Apache\n\nTo run an SPA on [Apache](https://httpd.apache.org/), you should add a `static/.htaccess` file to route requests to the fallback page:\n\n```\n<IfModule mod_rewrite.c>\n\tRewriteEngine On\n\tRewriteBase /\n\tRewriteRule ^200\\.html$ - [L]\n\tRewriteCond %{REQUEST_FILENAME} !-f\n\tRewriteCond %{REQUEST_FILENAME} !-d\n\tRewriteRule . /200.html [L]\n</IfModule>\n```",
+		"kit/adapter-cloudflare": "To deploy to [Cloudflare Workers](https://workers.cloudflare.com/) or [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).\n\nThis adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that `event.platform` is emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.\n\n## Comparisons\n\n- `adapter-cloudflare` – supports all SvelteKit features; builds for Cloudflare Workers Static Assets and Cloudflare Pages\n- `adapter-cloudflare-workers` – deprecated. Supports all SvelteKit features; builds for Cloudflare Workers Sites\n- `adapter-static` – only produces client-side static assets; compatible with Cloudflare Workers Static Assets and Cloudflare Pages\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-cloudflare`, then add the adapter to your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-cloudflare';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// See below for an explanation of these options\n\t\t\tconfig: undefined,\n\t\t\tplatformProxy: {\n\t\t\t\tconfigPath: undefined,\n\t\t\t\tenvironment: undefined,\n\t\t\t\tpersist: undefined\n\t\t\t},\n\t\t\tfallback: 'plaintext',\n\t\t\troutes: {\n\t\t\t\tinclude: ['/*'],\n\t\t\t\texclude: ['<all>']\n\t\t\t}\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Options\n\n### config\n\nPath to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml` you can specify it using this option.\n\n### platformProxy\n\nPreferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.\n\n### fallback\n\nWhether to render a plaintext 404.html page or a rendered SPA fallback page for non-matching asset requests.\n\nFor Cloudflare Workers, the default behaviour is to return a null-body 404-status response for non-matching assets requests. However, if the [`assets.not_found_handling`](https://developers.cloudflare.com/workers/static-assets/routing/#2-not_found_handling) Wrangler configuration setting is set to `\"404-page\"`, this page will be served if a request fails to match an asset. If `assets.not_found_handling` is set to `\"single-page-application\"`, the adapter will render a SPA fallback index.html page regardless of the `fallback` option specified.\n\nFor Cloudflare Pages, this page will only be served when a request that matches an entry in `routes.exclude` fails to match an asset.\n\nMost of the time `plaintext` is sufficient, but if you are using `routes.exclude` to manually\nexclude a set of prerendered pages without exceeding the 100 route limit, you may wish to\nuse `spa` instead to avoid showing an unstyled 404 page to users.\n\nSee Cloudflare Pages' [Not Found behaviour](https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior) for more info.\n\n### routes\n\nOnly for Cloudflare Pages. Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.\n\n- `include` defines routes that will invoke a function, and defaults to `['/*']`\n- `exclude` defines routes that will _not_ invoke a function — this is a faster and cheaper way to serve your app's static assets. This array can include the following special values:\n\t- `<build>` contains your app's build artifacts (the files generated by Vite)\n\t- `<files>` contains the contents of your `static` directory\n\t- `<prerendered>` contains a list of prerendered pages\n\t- `<all>` (the default) contains all of the above\n\nYou can have up to 100 `include` and `exclude` rules combined. Generally you can omit the `routes` options, but if (for example) your `<prerendered>` paths exceed that limit, you may find it helpful to manually create an `exclude` list that includes `'/articles/*'` instead of the auto-generated `['/articles/foo', '/articles/bar', '/articles/baz', ...]`.\n\n## Cloudflare Workers\n\n### Basic configuration\n\nWhen building for Cloudflare Workers, this adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/configuration/sites/configuration/) in the project root. It should look something like this:\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"name\": \"<any-name-you-want>\",\n\t\"main\": \".svelte-kit/cloudflare/_worker.js\",\n\t\"compatibility_date\": \"2025-01-01\",\n\t\"assets\": {\n\t\t\"binding\": \"ASSETS\",\n\t\t\"directory\": \".svelte-kit/cloudflare\",\n\t}\n}\n```\n\n### Deployment\n\nPlease follow the [framework guide](https://developers.cloudflare.com/workers/frameworks/framework-guides/svelte/) for Cloudflare Workers to begin.\n\n## Cloudflare Pages\n\n### Deployment\n\nPlease follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started/) for Cloudflare Pages to begin.\n\nIf you're using the [Git integration](https://developers.cloudflare.com/pages/get-started/git-integration/), your build settings should look like this:\n\n- Framework preset – SvelteKit\n- Build command – `npm run build` or `vite build`\n- Build output directory – `.svelte-kit/cloudflare`\n\n### Further reading\n\nYou may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site on Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site/).\n\n### Notes\n\nFunctions contained in the [`/functions` directory](https://developers.cloudflare.com/pages/functions/routing/) at the project's root will _not_ be included in the deployment. Instead, functions should be implemented as [server endpoints](routing#server) in your SvelteKit app, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/functions/advanced-mode/).\n\n## Runtime APIs\n\nThe [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`ctx`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:\n\n```js\n// @filename: ambient.d.ts\nimport { DurableObjectNamespace } from '@cloudflare/workers-types';\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n\t\t\tenv: {\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};\n\t\t}\n\t}\n}\n// @filename: +server.js\n// ---cut---\n// @errors: 2355 2322\n/// file: +server.js\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request, platform }) {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n}\n```\n\n> [!NOTE] SvelteKit's built-in [`$env` module]($env-static-private) should be preferred for environment variables.\n\nTo make these types available to your app, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and reference them in your `src/app.d.ts`:\n\n```ts\n/// file: src/app.d.ts\n+++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n+++\t\t\tenv: {\n\t\t\t\tYOUR_KV_NAMESPACE: KVNamespace;\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};+++\n\t\t}\n\t}\n}\n\nexport {};\n```\n\n### Testing locally\n\nCloudflare specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.\n\nFor testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev .svelte-kit/cloudflare` if you're testing for Cloudflare Workers or `wrangler pages dev .svelte-kit/cloudflare` for Cloudflare Pages.\n\n## Headers and redirects\n\nThe [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) and [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/) files, specific to Cloudflare, can be used for static asset responses (like images) by putting them into the project root folder.\n\nHowever, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](routing#server) or with the [`handle`](hooks#Server-hooks-handle) hook.\n\n## Troubleshooting\n\n### Node.js compatibility\n\nIf you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), you can add the `nodejs_compat` compatibility flag to your Wrangler configuration file:\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"compatibility_flags\": [\"nodejs_compat\"]\n}\n```\n\n### Worker size limits\n\nWhen deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.\n\n### Accessing the file system\n\nYou can't use `fs` in Cloudflare Workers.\n\nInstead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It works by fetching the file from the deployed public assets location.\n\nAlternatively, you can [prerender](page-options#prerender) the routes in question.\n\n## Migrating from Workers Sites\n\nCloudflare no longer recommends using [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/configuration/) and instead recommends using [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/). To migrate, replace `@sveltejs/adapter-cloudflare-workers` with `@sveltejs/adapter-cloudflare` and remove all `site` configuration settings from your Wrangler configuration file, then add the `assets.directory` and `assets.binding` configuration settings:\n\n### svelte.config.js\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\n---import adapter from '@sveltejs/adapter-cloudflare-workers';---\n+++import adapter from '@sveltejs/adapter-cloudflare';+++\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n### wrangler.toml\n\n```toml\n/// file: wrangler.toml\n---site.bucket = \".cloudflare/public\"---\n+++assets.directory = \".cloudflare/public\"\nassets.binding = \"ASSETS\" # Exclude this if you don't have a `main` key configured.+++\n```\n\n### wrangler.jsonc\n\n```jsonc\n/// file: wrangler.jsonc\n{\n---\t\"site\": {\n\t\t\"bucket\": \".cloudflare/public\"\n\t},---\n+++\t\"assets\": {\n\t\t\"directory\": \".cloudflare/public\",\n\t\t\"binding\": \"ASSETS\" // Exclude this if you don't have a `main` key configured.\n\t}+++\n}\n```",
+		"kit/adapter-cloudflare-workers": "> [!NOTE] `adapter-cloudflare-workers` has been deprecated in favour of [`adapter-cloudflare`](adapter-cloudflare). We recommend using `adapter-cloudflare` to deploy to Cloudflare Workers with [Static Assets](https://developers.cloudflare.com/workers/static-assets/) since Cloudflare Workers Sites will be deprecated in favour of it.\n\nTo deploy to [Cloudflare Workers](https://workers.cloudflare.com/) with [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/), use `adapter-cloudflare-workers`.\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-cloudflare-workers`, then add the adapter to your `svelte.config.js`:\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-cloudflare-workers';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// see below for options that can be set here\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Options\n\n### config\n\nPath to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml` you can specify it using this option.\n\n### platformProxy\n\nPreferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.\n\n## Basic Configuration\n\nThis adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/configuration/sites/configuration/) in the project root. It should look something like this:\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"name\": \"<your-service-name>\",\n\t\"account_id\": \"<your-account-id>\",\n\t\"main\": \"./.cloudflare/worker.js\",\n\t\"site\": {\n\t\t\"bucket\": \"./.cloudflare/public\"\n\t},\n\t\"build\": {\n\t\t\"command\": \"npm run build\"\n\t},\n\t\"compatibility_date\": \"2021-11-12\"\n}\n```\n\n`<your-service-name>` can be anything. `<your-account-id>` can be found by running `wrangler whoami` using the Wrangler CLI tool or by logging into your [Cloudflare dashboard](https://dash.cloudflare.com) and grabbing it from the end of the URL:\n\n```\nhttps://dash.cloudflare.com/<your-account-id>/home\n```\n\n> [!NOTE] You should add the `.cloudflare` directory (or whichever directories you specified for `main` and `site.bucket`) and the `.wrangler` directory to your `.gitignore`.\n\nYou will need to install [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/) and log in, if you haven't already:\n\n```sh\nnpm i -D wrangler\nwrangler login\n```\n\nThen, you can build your app and deploy it:\n\n```sh\nwrangler deploy\n```\n\n## Runtime APIs\n\nThe [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`ctx`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:\n\n```js\n// @filename: ambient.d.ts\nimport { DurableObjectNamespace } from '@cloudflare/workers-types';\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n\t\t\tenv: {\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};\n\t\t}\n\t}\n}\n// @filename: +server.js\n// ---cut---\n// @errors: 2355 2322\n/// file: +server.js\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request, platform }) {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n}\n```\n\n> [!NOTE] SvelteKit's built-in [`$env` module]($env-static-private) should be preferred for environment variables.\n\nTo make these types available to your app, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and reference them in your `src/app.d.ts`:\n\n```ts\n/// file: src/app.d.ts\n+++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n+++\t\t\tenv?: {\n\t\t\t\tYOUR_KV_NAMESPACE: KVNamespace;\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};+++\n\t\t}\n\t}\n}\n\nexport {};\n```\n\n### Testing Locally\n\nCloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.\n\nFor testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev`.\n\n## Troubleshooting\n\n### Node.js compatibility\n\nIf you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), you can add the `nodejs_compat` compatibility flag to your Wrangler configuration file:\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"compatibility_flags\": [\"nodejs_compat\"]\n}\n```\n\n### Worker size limits\n\nWhen deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.\n\n### Accessing the file system\n\nYou can't use `fs` in Cloudflare Workers — you must [prerender](page-options#prerender) the routes in question.",
+		"kit/adapter-netlify": "To deploy to Netlify, use [`adapter-netlify`](https://github.com/sveltejs/kit/tree/main/packages/adapter-netlify).\n\nThis adapter will be installed by default when you use [`adapter-auto`](adapter-auto), but adding it to your project allows you to specify Netlify-specific options.\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-netlify`, then add the adapter to your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-netlify';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\t// default options are shown\n\t\tadapter: adapter({\n\t\t\t// if true, will create a Netlify Edge Function rather\n\t\t\t// than using standard Node-based functions\n\t\t\tedge: false,\n\n\t\t\t// if true, will split your app into multiple functions\n\t\t\t// instead of creating a single one for the entire app.\n\t\t\t// if `edge` is true, this option cannot be used\n\t\t\tsplit: false\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\nThen, make sure you have a [netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration) file in the project root. This will determine where to write static assets based on the `build.publish` settings, as per this sample configuration:\n\n```toml\n[build]\n\tcommand = \"npm run build\"\n\tpublish = \"build\"\n```\n\nIf the `netlify.toml` file or the `build.publish` value is missing, a default value of `\"build\"` will be used. Note that if you have set the publish directory in the Netlify UI to something else then you will need to set it in `netlify.toml` too, or use the default value of `\"build\"`.\n\n### Node version\n\nNew projects will use the current Node LTS version by default. However, if you're upgrading a project you created a while ago it may be stuck on an older version. See [the Netlify docs](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) for details on manually specifying a current Node version.\n\n## Netlify Edge Functions\n\nSvelteKit supports [Netlify Edge Functions](https://docs.netlify.com/build/edge-functions/overview/). If you pass the option `edge: true` to the `adapter` function, server-side rendering will happen in a Deno-based edge function that's deployed close to the site visitor. If set to `false` (the default), the site will deploy to Node-based Netlify Functions.\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-netlify';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// will create a Netlify Edge Function using Deno-based\n\t\t\t// rather than using standard Node-based functions\n\t\t\tedge: true\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Netlify alternatives to SvelteKit functionality\n\nYou may build your app using functionality provided directly by SvelteKit without relying on any Netlify functionality. Using the SvelteKit versions of these features will allow them to be used in dev mode, tested with integration tests, and to work with other adapters should you ever decide to switch away from Netlify. However, in some scenarios you may find it beneficial to use the Netlify versions of these features. One example would be if you're migrating an app that's already hosted on Netlify to SvelteKit.\n\n### `_headers` and `_redirects`\n\nThe [`_headers`](https://docs.netlify.com/routing/headers/#syntax-for-the-headers-file) and [`_redirects`](https://docs.netlify.com/routing/redirects/redirect-options/) files specific to Netlify can be used for static asset responses (like images) by putting them into the project root folder.\n\n### Redirect rules\n\nDuring compilation, redirect rules are automatically appended to your `_redirects` file. (If it doesn't exist yet, it will be created.) That means:\n\n- `[[redirects]]` in `netlify.toml` will never match as `_redirects` has a [higher priority](https://docs.netlify.com/routing/redirects/#rule-processing-order). So always put your rules in the [`_redirects` file](https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file).\n- `_redirects` shouldn't have any custom \"catch all\" rules such as `/* /foobar/:splat`. Otherwise the automatically appended rule will never be applied as Netlify is only processing [the first matching rule](https://docs.netlify.com/routing/redirects/#rule-processing-order).\n\n### Netlify Forms\n\n1. Create your Netlify HTML form as described [here](https://docs.netlify.com/forms/setup/#html-forms), e.g. as `/routes/contact/+page.svelte`. (Don't forget to add the hidden `form-name` input element!)\n2. Netlify's build bot parses your HTML files at deploy time, which means your form must be [prerendered](page-options#prerender) as HTML. You can either add `export const prerender = true` to your `contact.svelte` to prerender just that page or set the `kit.prerender.force: true` option to prerender all pages.\n3. If your Netlify form has a [custom success message](https://docs.netlify.com/forms/setup/#success-messages) like `<form netlify ... action=\"/success\">` then ensure the corresponding `/routes/success/+page.svelte` exists and is prerendered.\n\n### Netlify Functions\n\nWith this adapter, SvelteKit endpoints are hosted as [Netlify Functions](https://docs.netlify.com/functions/overview/). Netlify function handlers have additional context, including [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) information. You can access this context via the `event.platform.context` field inside your hooks and `+page.server` or `+layout.server` endpoints. These are [serverless functions](https://docs.netlify.com/functions/overview/) when the `edge` property is `false` in the adapter config or [edge functions](https://docs.netlify.com/edge-functions/overview/#app) when it is `true`.\n\n```js\n// @errors: 2339\n// @filename: ambient.d.ts\n/// <reference types=\"@sveltejs/adapter-netlify\" />\n// @filename: +page.server.js\n// ---cut---\n/// file: +page.server.js\n/** @type {import('./$types').PageServerLoad} */\nexport const load = async (event) => {\n\tconst context = event.platform?.context;\n\tconsole.log(context); // shows up in your functions log in the Netlify app\n};\n```\n\nAdditionally, you can add your own Netlify functions by creating a directory for them and adding the configuration to your `netlify.toml` file. For example:\n\n```toml\n[build]\n\tcommand = \"npm run build\"\n\tpublish = \"build\"\n\n[functions]\n\tdirectory = \"functions\"\n```\n\n## Troubleshooting\n\n### Accessing the file system\n\nYou can't use `fs` in edge deployments.\n\nYou _can_ use it in serverless deployments, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It also works inside edge deployments by fetching the file from the deployed public assets location.\n\nAlternatively, you can [prerender](page-options#prerender) the routes in question.",
+		"kit/adapter-vercel": "To deploy to Vercel, use [`adapter-vercel`](https://github.com/sveltejs/kit/tree/main/packages/adapter-vercel).\n\nThis adapter will be installed by default when you use [`adapter-auto`](adapter-auto), but adding it to your project allows you to specify Vercel-specific options.\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-vercel`, then add the adapter to your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-vercel';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// see below for options that can be set here\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Deployment configuration\n\nTo control how your routes are deployed to Vercel as functions, you can specify deployment configuration, either through the option shown above or with [`export const config`](page-options#config) inside `+server.js`, `+page(.server).js` and `+layout(.server).js` files.\n\nFor example you could deploy one specific route as an individual serverless function, separate from the rest of your app:\n\n```js\n/// file: about/+page.js\n/** @type {import('@sveltejs/adapter-vercel').Config} */\nexport const config = {\n\tsplit: true\n};\n```\n\nThe following options apply to all functions:\n\n- `runtime`: `'edge'`, `'nodejs18.x'`, `'nodejs20.x'` or `'nodejs22.x'`. By default, the adapter will select the `'nodejs<version>.x'` corresponding to the Node version your project is configured to use on the Vercel dashboard\n  > [!NOTE] This option is deprecated and will be removed in a future version, at which point all your functions will use whichever Node version is specified in the project configuration on Vercel\n- `regions`: an array of [edge network regions](https://vercel.com/docs/concepts/edge-network/regions) (defaulting to `[\"iad1\"]` for serverless functions) or `'all'` if `runtime` is `edge` (its default). Note that multiple regions for serverless functions are only supported on Enterprise plans\n- `split`: if `true`, causes a route to be deployed as an individual function. If `split` is set to `true` at the adapter level, all routes will be deployed as individual functions\n\nAdditionally, the following option applies to edge functions:\n- `external`: an array of dependencies that esbuild should treat as external when bundling functions. This should only be used to exclude optional dependencies that will not run outside Node\n\nAnd the following option apply to serverless functions:\n- `memory`: the amount of memory available to the function. Defaults to `1024` Mb, and can be decreased to `128` Mb or [increased](https://vercel.com/docs/concepts/limits/overview#serverless-function-memory) in 64Mb increments up to `3008` Mb on Pro or Enterprise accounts\n- `maxDuration`: [maximum execution duration](https://vercel.com/docs/functions/runtimes#max-duration) of the function. Defaults to `10` seconds for Hobby accounts, `15` for Pro and `900` for Enterprise\n- `isr`: configuration Incremental Static Regeneration, described below\n\nConfiguration set in a layout applies to all the routes beneath that layout, unless overridden at a more granular level.\n\nIf your functions need to access data in a specific region, it's recommended that they be deployed in the same region (or close to it) for optimal performance.\n\n## Image Optimization\n\nYou may set the `images` config to control how Vercel builds your images. See the [image configuration reference](https://vercel.com/docs/build-output-api/v3/configuration#images) for full details. As an example, you may set:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-vercel';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\timages: {\n\t\t\t\tsizes: [640, 828, 1200, 1920, 3840],\n\t\t\t\tformats: ['image/avif', 'image/webp'],\n\t\t\t\tminimumCacheTTL: 300,\n\t\t\t\tdomains: ['example-app.vercel.app'],\n\t\t\t}\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Incremental Static Regeneration\n\nVercel supports [Incremental Static Regeneration](https://vercel.com/docs/incremental-static-regeneration) (ISR), which provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content.\n\n> [!NOTE] Use ISR only on routes where every visitor should see the same content (much like when you prerender). If there's anything user-specific happening (like session cookies), they should happen on the client via JavaScript only to not leak sensitive information across visits\n\nTo add ISR to a route, include the `isr` property in your `config` object:\n\n```js\nimport { BYPASS_TOKEN } from '$env/static/private';\n\n/** @type {import('@sveltejs/adapter-vercel').Config} */\nexport const config = {\n\tisr: {\n\t\texpiration: 60,\n\t\tbypassToken: BYPASS_TOKEN,\n\t\tallowQuery: ['search']\n\t}\n};\n```\n\n> [!NOTE] Using ISR on a route with `export const prerender = true` will have no effect, since the route is prerendered at build time\n\nThe `expiration` property is required; all others are optional. The properties are discussed in more detail below.\n\n### expiration\n\nThe expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function. Setting the value to `false` means it will never expire. In that case, you likely want to define a bypass token to re-generate on demand.\n\n### bypassToken\n\nA random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset with a `__prerender_bypass=<token>` cookie.\n\nMaking a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.\n\nNote that the `BYPASS_TOKEN` string must be at least 32 characters long. You could generate one using the JavaScript console like so:\n\n```js\ncrypto.randomUUID();\n```\n\nSet this string as an environment variable on Vercel by logging in and going to your project then Settings > Environment Variables. For \"Key\" put `BYPASS_TOKEN` and for \"value\" use the string generated above, then hit \"Save\".\n\nTo get this key known about for local development, you can use the [Vercel CLI](https://vercel.com/docs/cli/env) by running the `vercel env pull` command locally like so:\n\n```sh\nvercel env pull .env.development.local\n```\n\n### allowQuery\n\nA list of valid query parameters that contribute to the cache key. Other parameters (such as utm tracking codes) will be ignored, ensuring that they do not result in content being re-generated unnecessarily. By default, query parameters are ignored.\n\n> [!NOTE] Pages that are  [prerendered](page-options#prerender) will ignore ISR configuration.\n\n## Environment variables\n\nVercel makes a set of [deployment-specific environment variables](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) available. Like other environment variables, these are accessible from `$env/static/private` and `$env/dynamic/private` (sometimes — more on that later), and inaccessible from their public counterparts. To access one of these variables from the client:\n\n```js\n/// file: +layout.server.js\nimport { VERCEL_COMMIT_REF } from '$env/static/private';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function load() {\n\treturn {\n\t\tdeploymentGitBranch: VERCEL_COMMIT_REF\n\t};\n}\n```\n\n```svelte\n<!--- file: +layout.svelte --->\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data } = $props();\n</script>\n\n<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>\n```\n\nSince all of these variables are unchanged between build time and run time when building on Vercel, we recommend using `$env/static/private` — which will statically replace the variables, enabling optimisations like dead code elimination — rather than `$env/dynamic/private`.\n\n## Skew protection\n\nWhen a new version of your app is deployed, assets belonging to the previous version may no longer be accessible. If a user is actively using your app when this happens, it can cause errors when they navigate — this is known as _version skew_. SvelteKit mitigates this by detecting errors resulting from version skew and causing a hard reload to get the latest version of the app, but this will cause any client-side state to be lost. (You can also proactively mitigate it by observing [`updated.current`]($app-state#updated) from `$app/state`, which tells clients when a new version has been deployed.)\n\n[Skew protection](https://vercel.com/docs/deployments/skew-protection) is a Vercel feature that routes client requests to their original deployment. When a user visits your app, a cookie is set with the deployment ID, and any subsequent requests will be routed to that deployment for as long as skew protection is active. When they reload the page, they will get the newest deployment. (`updated.current` is exempted from this behaviour, and so will continue to report new deployments.) To enable it, visit the Advanced section of your project settings on Vercel.\n\nCookie-based skew protection comes with one caveat: if a user has multiple versions of your app open in multiple tabs, requests from older versions will be routed to the newer one, meaning they will fall back to SvelteKit's built-in skew protection.\n\n## Notes\n\n### Vercel functions\n\nIf you have Vercel functions contained in the `api` directory at the project's root, any requests for `/api/*` will _not_ be handled by SvelteKit. You should implement these as [API routes](routing#server) in your SvelteKit app instead, unless you need to use a non-JavaScript language in which case you will need to ensure that you don't have any `/api/*` routes in your SvelteKit app.\n\n### Node version\n\nProjects created before a certain date may default to using an older Node version than what SvelteKit currently requires. You can [change the Node version in your project settings](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/node-js#node.js-version).\n\n## Troubleshooting\n\n### Accessing the file system\n\nYou can't use `fs` in edge functions.\n\nYou _can_ use it in serverless functions, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It also works inside routes deployed as edge functions by fetching the file from the deployed public assets location.\n\nAlternatively, you can [prerender](page-options#prerender) the routes in question.\n\n### Deployment protection\n\nIf using [`read`]($app-server#read) in an edge function, SvelteKit will `fetch` the file in question from your deployment. If you are using [Deployment Protection](https://vercel.com/docs/deployment-protection), you must also enable [Protection Bypass for Automation](https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation) so that the request does not result in a [401 Unauthorized](https://http.dog/401) response.",
+		"kit/writing-adapters": "If an adapter for your preferred environment doesn't yet exist, you can build your own. We recommend [looking at the source for an adapter](https://github.com/sveltejs/kit/tree/main/packages) to a platform similar to yours and copying it as a starting point.\n\nAdapter packages implement the following API, which creates an `Adapter`:\n\n```js\n// @errors: 2322\n// @filename: ambient.d.ts\ntype AdapterSpecificOptions = any;\n\n// @filename: index.js\n// ---cut---\n/** @param {AdapterSpecificOptions} options */\nexport default function (options) {\n\t/** @type {import('@sveltejs/kit').Adapter} */\n\tconst adapter = {\n\t\tname: 'adapter-package-name',\n\t\tasync adapt(builder) {\n\t\t\t// adapter implementation\n\t\t},\n\t\tasync emulate() {\n\t\t\treturn {\n\t\t\t\tasync platform({ config, prerender }) {\n\t\t\t\t\t// the returned object becomes `event.platform` during dev, build and\n\t\t\t\t\t// preview. Its shape is that of `App.Platform`\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tsupports: {\n\t\t\tread: ({ config, route }) => {\n\t\t\t\t// Return `true` if the route with the given `config` can use `read`\n\t\t\t\t// from `$app/server` in production, return `false` if it can't.\n\t\t\t\t// Or throw a descriptive error describing how to configure the deployment\n\t\t\t},\n\t\t\ttracing: () => {\n\t\t\t\t// Return `true` if this adapter supports loading `tracing.server.js`.\n\t\t\t\t// Return `false if it can't, or throw a descriptive error.\n\t\t\t}\n\t\t}\n\t};\n\n\treturn adapter;\n}\n```\n\nOf these, `name` and `adapt` are required. `emulate` and `supports` are optional.\n\nWithin the `adapt` method, there are a number of things that an adapter should do:\n\n- Clear out the build directory\n- Write SvelteKit output with `builder.writeClient`, `builder.writeServer`, and `builder.writePrerendered`\n- Output code that:\n\t- Imports `Server` from `${builder.getServerDirectory()}/index.js`\n\t- Instantiates the app with a manifest generated with `builder.generateManifest({ relativePath })`\n\t- Listens for requests from the platform, converts them to a standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) if necessary, calls the `server.respond(request, { getClientAddress })` function to generate a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) and responds with it\n\t- expose any platform-specific information to SvelteKit via the `platform` option passed to `server.respond`\n\t- Globally shims `fetch` to work on the target platform, if necessary. SvelteKit provides a `@sveltejs/kit/node/polyfills` helper for platforms that can use `undici`\n- Bundle the output to avoid needing to install dependencies on the target platform, if necessary\n- Put the user's static files and the generated JS/CSS in the correct location for the target platform\n\nWhere possible, we recommend putting the adapter output under the `build/` directory with any intermediate output placed under `.svelte-kit/[adapter-name]`.",
+		"kit/advanced-routing": "## Rest parameters\n\nIf the number of route segments is unknown, you can use rest syntax — for example you might implement GitHub's file viewer like so...\n\n```sh\n/[org]/[repo]/tree/[branch]/[...file]\n```\n\n...in which case a request for `/sveltejs/kit/tree/main/documentation/docs/04-advanced-routing.md` would result in the following parameters being available to the page:\n\n```js\n// @noErrors\n{\n\torg: 'sveltejs',\n\trepo: 'kit',\n\tbranch: 'main',\n\tfile: 'documentation/docs/04-advanced-routing.md'\n}\n```\n\n> [!NOTE] `src/routes/a/[...rest]/z/+page.svelte` will match `/a/z` (i.e. there's no parameter at all) as well as `/a/b/z` and `/a/b/c/z` and so on. Make sure you check that the value of the rest parameter is valid, for example using a [matcher](#Matching).\n\n### 404 pages\n\nRest parameters also allow you to render custom 404s. Given these routes...\n\n```tree\nsrc/routes/\n├ marx-brothers/\n│ ├ chico/\n│ ├ harpo/\n│ ├ groucho/\n│ └ +error.svelte\n└ +error.svelte\n```\n\n...the `marx-brothers/+error.svelte` file will _not_ be rendered if you visit `/marx-brothers/karl`, because no route was matched. If you want to render the nested error page, you should create a route that matches any `/marx-brothers/*` request, and return a 404 from it:\n\n```tree\nsrc/routes/\n├ marx-brothers/\n+++| ├ [...path]/+++\n│ ├ chico/\n│ ├ harpo/\n│ ├ groucho/\n│ └ +error.svelte\n└ +error.svelte\n```\n\n```js\n/// file: src/routes/marx-brothers/[...path]/+page.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageLoad} */\nexport function load(event) {\n\terror(404, 'Not Found');\n}\n```\n\n> [!NOTE] If you don't handle 404 cases, they will appear in [`handleError`](hooks#Shared-hooks-handleError)\n\n## Optional parameters\n\nA route like `[lang]/home` contains a parameter named `lang` which is required. Sometimes it's beneficial to make these parameters optional, so that in this example both `home` and `en/home` point to the same page. You can do that by wrapping the parameter in another bracket pair: `[[lang]]/home`\n\nNote that an optional route parameter cannot follow a rest parameter (`[...rest]/[[optional]]`), since parameters are matched 'greedily' and the optional parameter would always be unused.\n\n## Matching\n\nA route like `src/routes/fruits/[page]` would match `/fruits/apple`, but it would also match `/fruits/rocketship`. We don't want that. You can ensure that route parameters are well-formed by adding a _matcher_ — which takes the parameter string (`\"apple\"` or `\"rocketship\"`) and returns `true` if it is valid — to your [`params`](configuration#files) directory...\n\n```js\n/// file: src/params/fruit.js\n/**\n * @param {string} param\n * @return {param is ('apple' | 'orange')}\n * @satisfies {import('@sveltejs/kit').ParamMatcher}\n */\nexport function match(param) {\n\treturn param === 'apple' || param === 'orange';\n}\n```\n\n...and augmenting your routes:\n\n```\nsrc/routes/fruits/[page+++=fruit+++]\n```\n\nIf the pathname doesn't match, SvelteKit will try to match other routes (using the sort order specified below), before eventually returning a 404.\n\nEach module in the `params` directory corresponds to a matcher, with the exception of `*.test.js` and `*.spec.js` files which may be used to unit test your matchers.\n\n> [!NOTE] Matchers run both on the server and in the browser.\n\n## Sorting\n\nIt's possible for multiple routes to match a given path. For example each of these routes would match `/foo-abc`:\n\n```sh\nsrc/routes/[...catchall]/+page.svelte\nsrc/routes/[[a=x]]/+page.svelte\nsrc/routes/[b]/+page.svelte\nsrc/routes/foo-[c]/+page.svelte\nsrc/routes/foo-abc/+page.svelte\n```\n\nSvelteKit needs to know which route is being requested. To do so, it sorts them according to the following rules...\n\n- More specific routes are higher priority (e.g. a route with no parameters is more specific than a route with one dynamic parameter, and so on)\n- Parameters with [matchers](#Matching) (`[name=type]`) are higher priority than those without (`[name]`)\n- `[[optional]]` and `[...rest]` parameters are ignored unless they are the final part of the route, in which case they are treated with lowest priority. In other words `x/[[y]]/z` is treated equivalently to `x/z` for the purposes of sorting\n- Ties are resolved alphabetically\n\n...resulting in this ordering, meaning that `/foo-abc` will invoke `src/routes/foo-abc/+page.svelte`, and `/foo-def` will invoke `src/routes/foo-[c]/+page.svelte` rather than less specific routes:\n\n```sh\nsrc/routes/foo-abc/+page.svelte\nsrc/routes/foo-[c]/+page.svelte\nsrc/routes/[[a=x]]/+page.svelte\nsrc/routes/[b]/+page.svelte\nsrc/routes/[...catchall]/+page.svelte\n```\n\n## Encoding\n\nSome characters can't be used on the filesystem — `/` on Linux and Mac, `\\ / : * ? \" < > |` on Windows. The `#` and `%` characters have special meaning in URLs, and the `[ ] ( )` characters have special meaning to SvelteKit, so these also can't be used directly as part of your route.\n\nTo use these characters in your routes, you can use hexadecimal escape sequences, which have the format `[x+nn]` where `nn` is a hexadecimal character code:\n\n- `\\` — `[x+5c]`\n- `/` — `[x+2f]`\n- `:` — `[x+3a]`\n- `*` — `[x+2a]`\n- `?` — `[x+3f]`\n- `\"` — `[x+22]`\n- `<` — `[x+3c]`\n- `>` — `[x+3e]`\n- `|` — `[x+7c]`\n- `#` — `[x+23]`\n- `%` — `[x+25]`\n- `[` — `[x+5b]`\n- `]` — `[x+5d]`\n- `(` — `[x+28]`\n- `)` — `[x+29]`\n\nFor example, to create a `/smileys/:-)` route, you would create a `src/routes/smileys/[x+3a]-[x+29]/+page.svelte` file.\n\nYou can determine the hexadecimal code for a character with JavaScript:\n\n```js\n':'.charCodeAt(0).toString(16); // '3a', hence '[x+3a]'\n```\n\nYou can also use Unicode escape sequences. Generally you won't need to as you can use the unencoded character directly, but if — for some reason — you can't have a filename with an emoji in it, for example, then you can use the escaped characters. In other words, these are equivalent:\n\n```\nsrc/routes/[u+d83e][u+dd2a]/+page.svelte\nsrc/routes/🤪/+page.svelte\n```\n\nThe format for a Unicode escape sequence is `[u+nnnn]` where `nnnn` is a valid value between `0000` and `10ffff`. (Unlike JavaScript string escaping, there's no need to use surrogate pairs to represent code points above `ffff`.) To learn more about Unicode encodings, consult [Programming with Unicode](https://unicodebook.readthedocs.io/unicode_encodings.html).\n\n> [!NOTE] Since TypeScript [struggles](https://github.com/microsoft/TypeScript/issues/13399) with directories with a leading `.` character, you may find it useful to encode these characters when creating e.g. [`.well-known`](https://en.wikipedia.org/wiki/Well-known_URI) routes: `src/routes/[x+2e]well-known/...`\n\n## Advanced layouts\n\nBy default, the _layout hierarchy_ mirrors the _route hierarchy_. In some cases, that might not be what you want.\n\n### (group)\n\nPerhaps you have some routes that are 'app' routes that should have one layout (e.g. `/dashboard` or `/item`), and others that are 'marketing' routes that should have a different layout (`/about` or `/testimonials`). We can group these routes with a directory whose name is wrapped in parentheses — unlike normal directories, `(app)` and `(marketing)` do not affect the URL pathname of the routes inside them:\n\n```tree\nsrc/routes/\n+++│ (app)/+++\n│ ├ dashboard/\n│ ├ item/\n│ └ +layout.svelte\n+++│ (marketing)/+++\n│ ├ about/\n│ ├ testimonials/\n│ └ +layout.svelte\n├ admin/\n└ +layout.svelte\n```\n\nYou can also put a `+page` directly inside a `(group)`, for example if `/` should be an `(app)` or a `(marketing)` page.\n\n### Breaking out of layouts\n\nThe root layout applies to every page of your app — if omitted, it defaults to `{@render children()}`. If you want some pages to have a different layout hierarchy than the rest, then you can put your entire app inside one or more groups _except_ the routes that should not inherit the common layouts.\n\nIn the example above, the `/admin` route does not inherit either the `(app)` or `(marketing)` layouts.\n\n### +page@\n\nPages can break out of the current layout hierarchy on a route-by-route basis. Suppose we have an `/item/[id]/embed` route inside the `(app)` group from the previous example:\n\n```tree\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n+++│ │ │ │ └ +page.svelte+++\n│ │ │ └ +layout.svelte\n│ │ └ +layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\nOrdinarily, this would inherit the root layout, the `(app)` layout, the `item` layout and the `[id]` layout. We can reset to one of those layouts by appending `@` followed by the segment name — or, for the root layout, the empty string. In this example, we can choose from the following options:\n\n- `+page@[id].svelte` - inherits from `src/routes/(app)/item/[id]/+layout.svelte`\n- `+page@item.svelte` - inherits from `src/routes/(app)/item/+layout.svelte`\n- `+page@(app).svelte` - inherits from `src/routes/(app)/+layout.svelte`\n- `+page@.svelte` - inherits from `src/routes/+layout.svelte`\n\n```tree\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n+++│ │ │ │ └ +page@(app).svelte+++\n│ │ │ └ +layout.svelte\n│ │ └ +layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\n### +layout@\n\nLike pages, layouts can _themselves_ break out of their parent layout hierarchy, using the same technique. For example, a `+layout@.svelte` component would reset the hierarchy for all its child routes.\n\n```\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n│ │ │ │ └ +page.svelte  // uses (app)/item/[id]/+layout.svelte\n│ │ │ ├ +layout.svelte  // inherits from (app)/item/+layout@.svelte\n│ │ │ └ +page.svelte    // uses (app)/item/+layout@.svelte\n│ │ └ +layout@.svelte   // inherits from root layout, skipping (app)/+layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\n### When to use layout groups\n\nNot all use cases are suited for layout grouping, nor should you feel compelled to use them. It might be that your use case would result in complex `(group)` nesting, or that you don't want to introduce a `(group)` for a single outlier. It's perfectly fine to use other means such as composition (reusable `load` functions or Svelte components) or if-statements to achieve what you want. The following example shows a layout that rewinds to the root layout and reuses components and functions that other layouts can also use:\n\n```svelte\n<!--- file: src/routes/nested/route/+layout@.svelte --->\n<script>\n\timport ReusableLayout from '$lib/ReusableLayout.svelte';\n\tlet { data, children } = $props();\n</script>\n\n<ReusableLayout {data}>\n\t{@render children()}\n</ReusableLayout>\n```\n\n```js\n/// file: src/routes/nested/route/+layout.js\n// @filename: ambient.d.ts\ndeclare module \"$lib/reusable-load-function\" {\n\texport function reusableLoad(event: import('@sveltejs/kit').LoadEvent): Promise<Record<string, any>>;\n}\n// @filename: index.js\n// ---cut---\nimport { reusableLoad } from '$lib/reusable-load-function';\n\n/** @type {import('./$types').PageLoad} */\nexport function load(event) {\n\t// Add additional logic here, if needed\n\treturn reusableLoad(event);\n}\n```\n\n## Further reading\n\n- [Tutorial: Advanced Routing](/tutorial/kit/optional-params)",
+		"kit/hooks": "'Hooks' are app-wide functions you declare that SvelteKit will call in response to specific events, giving you fine-grained control over the framework's behaviour.\n\nThere are three hooks files, all optional:\n\n- `src/hooks.server.js` — your app's server hooks\n- `src/hooks.client.js` — your app's client hooks\n- `src/hooks.js` — your app's hooks that run on both the client and server\n\nCode in these modules will run when the application starts up, making them useful for initializing database clients and so on.\n\n> [!NOTE] You can configure the location of these files with [`config.kit.files.hooks`](configuration#files).\n\n## Server hooks\n\nThe following hooks can be added to `src/hooks.server.js`:\n\n### handle\n\nThis function runs every time the SvelteKit server receives a [request](web-standards#Fetch-APIs-Request) — whether that happens while the app is running, or during [prerendering](page-options#prerender) — and determines the [response](web-standards#Fetch-APIs-Response). It receives an `event` object representing the request and a function called `resolve`, which renders the route and generates a `Response`. This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tif (event.url.pathname.startsWith('/custom')) {\n\t\treturn new Response('custom response');\n\t}\n\n\tconst response = await resolve(event);\n\treturn response;\n}\n```\n\n> [!NOTE] Requests for static assets — which includes pages that were already prerendered — are _not_ handled by SvelteKit.\n\nIf unimplemented, defaults to `({ event, resolve }) => resolve(event)`.\n\nDuring prerendering, SvelteKit crawls your pages for links and renders each route it finds. Rendering the route invokes the `handle` function (and all other route dependencies, like `load`). If you need to exclude some code from running during this phase, check that the app is not [`building`]($app-environment#building) beforehand.\n\n### locals\n\nTo add custom data to the request, which is passed to handlers in `+server.js` and server `load` functions, populate the `event.locals` object, as shown below.\n\n```js\n/// file: src/hooks.server.js\n// @filename: ambient.d.ts\ntype User = {\n\tname: string;\n}\n\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser: User;\n\t}\n}\n\nconst getUserInformation: (cookie: string | void) => Promise<User>;\n\n// @filename: index.js\n// ---cut---\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tevent.locals.user = await getUserInformation(event.cookies.get('sessionid'));\n\n\tconst response = await resolve(event);\n\n\t// Note that modifying response headers isn't always safe.\n\t// Response objects can have immutable headers\n\t// (e.g. Response.redirect() returned from an endpoint).\n\t// Modifying immutable headers throws a TypeError.\n\t// In that case, clone the response or avoid creating a\n\t// response object with immutable headers.\n\tresponse.headers.set('x-custom-header', 'potato');\n\n\treturn response;\n}\n```\n\nYou can define multiple `handle` functions and execute them with [the `sequence` helper function](@sveltejs-kit-hooks).\n\n`resolve` also supports a second, optional parameter that gives you more control over how the response will be rendered. That parameter is an object that can have the following fields:\n\n- `transformPageChunk(opts: { html: string, done: boolean }): MaybePromise<string | undefined>` — applies custom transforms to HTML. If `done` is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML (they could include an element's opening tag but not its closing tag, for example) but they will always be split at sensible boundaries such as `%sveltekit.head%` or layout/page components.\n- `filterSerializedResponseHeaders(name: string, value: string): boolean` — determines which headers should be included in serialized responses when a `load` function loads a resource with `fetch`. By default, none will be included.\n- `preload(input: { type: 'js' | 'css' | 'font' | 'asset', path: string }): boolean` — determines what files should be added to the `<head>` tag to preload it. The method is called with each file that was found at build time while constructing the code chunks — so if you for example have `import './styles.css` in your `+page.svelte`, `preload` will be called with the resolved path to that CSS file when visiting that page. Note that in dev mode `preload` is _not_ called, since it depends on analysis that happens at build time. Preloading can improve performance by downloading assets sooner, but it can also hurt if too much is downloaded unnecessarily. By default, `js` and `css` files will be preloaded. `asset` files are not preloaded at all currently, but we may add this later after evaluating feedback.\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tconst response = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => html.replace('old', 'new'),\n\t\tfilterSerializedResponseHeaders: (name) => name.startsWith('x-'),\n\t\tpreload: ({ type, path }) => type === 'js' || path.includes('/important/')\n\t});\n\n\treturn response;\n}\n```\n\nNote that `resolve(...)` will never throw an error, it will always return a `Promise<Response>` with the appropriate status code. If an error is thrown elsewhere during `handle`, it is treated as fatal, and SvelteKit will respond with a JSON representation of the error or a fallback error page — which can be customised via `src/error.html` — depending on the `Accept` header. You can read more about error handling [here](errors).\n\n### handleFetch\n\nThis function allows you to modify (or replace) the result of an [`event.fetch`](load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`.\n\nFor example, your `load` function might make a request to a public URL like `https://api.yourapp.com` when the user performs a client-side navigation to the respective page, but during SSR it might make sense to hit the API directly (bypassing whatever proxies and load balancers sit between it and the public internet).\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').HandleFetch} */\nexport async function handleFetch({ request, fetch }) {\n\tif (request.url.startsWith('https://api.yourapp.com/')) {\n\t\t// clone the original request, but change the URL\n\t\trequest = new Request(\n\t\t\trequest.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),\n\t\t\trequest\n\t\t);\n\t}\n\n\treturn fetch(request);\n}\n```\n\nRequests made with `event.fetch` follow the browser's credentials model — for same-origin requests, `cookie` and `authorization` headers are forwarded unless the `credentials` option is set to `\"omit\"`. For cross-origin requests, `cookie` will be included if the request URL belongs to a subdomain of the app — for example if your app is on `my-domain.com`, and your API is on `api.my-domain.com`, cookies will be included in the request.\n\nThere is one caveat: if your app and your API are on sibling subdomains — `www.my-domain.com` and `api.my-domain.com` for example — then a cookie belonging to a common parent domain like `my-domain.com` will _not_ be included, because SvelteKit has no way to know which domain the cookie belongs to. In these cases you will need to manually include the cookie using `handleFetch`:\n\n```js\n/// file: src/hooks.server.js\n// @errors: 2345\n/** @type {import('@sveltejs/kit').HandleFetch} */\nexport async function handleFetch({ event, request, fetch }) {\n\tif (request.url.startsWith('https://api.my-domain.com/')) {\n\t\trequest.headers.set('cookie', event.request.headers.get('cookie'));\n\t}\n\n\treturn fetch(request);\n}\n```\n\n### handleValidationError\n\nThis hook is called when a remote function is called with an argument that does not match the provided [Standard Schema](https://standardschema.dev/). It must return an object matching the shape of [`App.Error`](types#Error).\n\nSay you have a remote function that expects a string as its argument ...\n\n```js\n/// file: todos.remote.js\nimport * as v from 'valibot';\nimport { query } from '$app/server';\n\nexport const getTodo = query(v.string(), (id) => {\n\t// implementation...\n});\n```\n\n...but it is called with something that doesn't match the schema — such as a number (e.g `await getTodos(1)`) — then validation will fail, the server will respond with a [400 status code](https://http.dog/400), and the function will throw with the message 'Bad Request'.\n\nTo customise this message and add additional properties to the error object, implement `handleValidationError`:\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').HandleValidationError} */\nexport function handleValidationError({ issues }) {\n\treturn {\n\t\tmessage: 'No thank you'\n\t};\n}\n```\n\nBe thoughtful about what information you expose here, as the most likely reason for validation to fail is that someone is sending malicious requests to your server.\n\n## Shared hooks\n\nThe following can be added to `src/hooks.server.js` _and_ `src/hooks.client.js`:\n\n### handleError\n\nIf an [unexpected error](errors#Unexpected-errors) is thrown during loading, rendering, or from an endpoint, this function will be called with the `error`, `event`, `status` code and `message`. This allows for two things:\n\n- you can log the error\n- you can generate a custom representation of the error that is safe to show to users, omitting sensitive details like messages and stack traces. The returned value, which defaults to `{ message }`, becomes the value of `$page.error`.\n\nFor errors thrown from your code (or library code called by your code) the status will be 500 and the message will be \"Internal Error\". While `error.message` may contain sensitive information that should not be exposed to users, `message` is safe (albeit meaningless to the average user).\n\nTo add more information to the `$page.error` object in a type-safe way, you can customize the expected shape by declaring an `App.Error` interface (which must include `message: string`, to guarantee sensible fallback behavior). This allows you to — for example — append a tracking ID for users to quote in correspondence with your technical support staff:\n\n```ts\n/// file: src/app.d.ts\ndeclare global {\n\tnamespace App {\n\t\tinterface Error {\n\t\t\tmessage: string;\n\t\t\terrorId: string;\n\t\t}\n\t}\n}\n\nexport {};\n```\n\n```js\n/// file: src/hooks.server.js\n// @errors: 2322 2353\n// @filename: ambient.d.ts\ndeclare module '@sentry/sveltekit' {\n\texport const init: (opts: any) => void;\n\texport const captureException: (error: any, opts: any) => void;\n}\n\n// @filename: index.js\n// ---cut---\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({/*...*/})\n\n/** @type {import('@sveltejs/kit').HandleServerError} */\nexport async function handleError({ error, event, status, message }) {\n\tconst errorId = crypto.randomUUID();\n\n\t// example integration with https://sentry.io/\n\tSentry.captureException(error, {\n\t\textra: { event, errorId, status }\n\t});\n\n\treturn {\n\t\tmessage: 'Whoops!',\n\t\terrorId\n\t};\n}\n```\n\n```js\n/// file: src/hooks.client.js\n// @errors: 2322 2353\n// @filename: ambient.d.ts\ndeclare module '@sentry/sveltekit' {\n\texport const init: (opts: any) => void;\n\texport const captureException: (error: any, opts: any) => void;\n}\n\n// @filename: index.js\n// ---cut---\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({/*...*/})\n\n/** @type {import('@sveltejs/kit').HandleClientError} */\nexport async function handleError({ error, event, status, message }) {\n\tconst errorId = crypto.randomUUID();\n\n\t// example integration with https://sentry.io/\n\tSentry.captureException(error, {\n\t\textra: { event, errorId, status }\n\t});\n\n\treturn {\n\t\tmessage: 'Whoops!',\n\t\terrorId\n\t};\n}\n```\n\n> [!NOTE] In `src/hooks.client.js`, the type of `handleError` is `HandleClientError` instead of `HandleServerError`, and `event` is a `NavigationEvent` rather than a `RequestEvent`.\n\nThis function is not called for _expected_ errors (those thrown with the [`error`](@sveltejs-kit#error) function imported from `@sveltejs/kit`).\n\nDuring development, if an error occurs because of a syntax error in your Svelte code, the passed in error has a `frame` property appended highlighting the location of the error.\n\n> [!NOTE] Make sure that `handleError` _never_ throws an error\n\n### init\n\nThis function runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection.\n\n> [!NOTE] If your environment supports top-level await, the `init` function is really no different from writing your initialisation logic at the top level of the module, but some environments — most notably, Safari — don't.\n\n```js\n// @errors: 2307\n/// file: src/hooks.server.js\nimport * as db from '$lib/server/database';\n\n/** @type {import('@sveltejs/kit').ServerInit} */\nexport async function init() {\n\tawait db.connect();\n}\n```\n\n> [!NOTE]\n> In the browser, asynchronous work in `init` will delay hydration, so be mindful of what you put in there.\n\n## Universal hooks\n\nThe following can be added to `src/hooks.js`. Universal hooks run on both server and client (not to be confused with shared hooks, which are environment-specific).\n\n### reroute\n\nThis function runs before `handle` and allows you to change how URLs are translated into routes. The returned pathname (which defaults to `url.pathname`) is used to select the route and its parameters.\n\nFor example, you might have a `src/routes/[[lang]]/about/+page.svelte` page, which should be accessible as `/en/about` or `/de/ueber-uns` or `/fr/a-propos`. You could implement this with `reroute`:\n\n```js\n// @errors: 2345 2304\n/// file: src/hooks.js\n\n/** @type {Record<string, string>} */\nconst translated = {\n\t'/en/about': '/en/about',\n\t'/de/ueber-uns': '/de/about',\n\t'/fr/a-propos': '/fr/about',\n};\n\n/** @type {import('@sveltejs/kit').Reroute} */\nexport function reroute({ url }) {\n\tif (url.pathname in translated) {\n\t\treturn translated[url.pathname];\n\t}\n}\n```\n\nThe `lang` parameter will be correctly derived from the returned pathname.\n\nUsing `reroute` will _not_ change the contents of the browser's address bar, or the value of `event.url`.\n\nSince version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise. If you need to fetch data, use the `fetch` provided as an argument. It has the [same benefits](load#Making-fetch-requests) as the `fetch` provided to `load` functions, with the caveat that `params` and `id` are unavailable to [`handleFetch`](#Server-hooks-handleFetch) because the route is not yet known.\n\n```js\n// @errors: 2345 2304\n/// file: src/hooks.js\n\n/** @type {import('@sveltejs/kit').Reroute} */\nexport async function reroute({ url, fetch }) {\n\t// Ask a special endpoint within your app about the destination\n\tif (url.pathname === '/api/reroute') return;\n\n\tconst api = new URL('/api/reroute', url);\n\tapi.searchParams.set('pathname', url.pathname);\n\n\tconst result = await fetch(api).then(r => r.json());\n\treturn result.pathname;\n}\n```\n\n\n> [!NOTE] `reroute` is considered a pure, idempotent function. As such, it must always return the same output for the same input and not have side effects. Under these assumptions, SvelteKit caches the result of `reroute` on the client so it is only called once per unique URL.\n\n### transport\n\nThis is a collection of _transporters_, which allow you to pass custom types — returned from `load` and form actions — across the server/client boundary. Each transporter contains an `encode` function, which encodes values on the server (or returns a falsy value for anything that isn't an instance of the type) and a corresponding `decode` function:\n\n```js\n// @errors: 2307\n/// file: src/hooks.js\nimport { Vector } from '$lib/math';\n\n/** @type {import('@sveltejs/kit').Transport} */\nexport const transport = {\n\tVector: {\n\t\tencode: (value) => value instanceof Vector && [value.x, value.y],\n\t\tdecode: ([x, y]) => new Vector(x, y)\n\t}\n};\n```\n\n\n## Further reading\n\n- [Tutorial: Hooks](/tutorial/kit/handle)",
+		"kit/errors": "Errors are an inevitable fact of software development. SvelteKit handles errors differently depending on where they occur, what kind of errors they are, and the nature of the incoming request.\n\n## Error objects\n\nSvelteKit distinguishes between expected and unexpected errors, both of which are represented as simple `{ message: string }` objects by default.\n\nYou can add additional properties, like a `code` or a tracking `id`, as shown in the examples below. (When using TypeScript this requires you to redefine the `Error` type as described in  [type safety](errors#Type-safety)).\n\n## Expected errors\n\nAn _expected_ error is one created with the [`error`](@sveltejs-kit#error) helper imported from `@sveltejs/kit`:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPost(slug: string): Promise<{ title: string, content: string } | undefined>\n}\n\n// @filename: index.js\n// ---cut---\nimport { error } from '@sveltejs/kit';\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\tconst post = await db.getPost(params.slug);\n\n\tif (!post) {\n\t\terror(404, {\n\t\t\tmessage: 'Not found'\n\t\t});\n\t}\n\n\treturn { post };\n}\n```\n\nThis throws an exception that SvelteKit catches, causing it to set the response status code to 404 and render an [`+error.svelte`](routing#error) component, where `page.error` is the object provided as the second argument to `error(...)`.\n\n```svelte\n<!--- file: src/routes/+error.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.error.message}</h1>\n```\n\n> [!LEGACY]\n> `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead.\n\nYou can add extra properties to the error object if needed...\n\n```js\n// @filename: ambient.d.ts\ndeclare global {\n\tnamespace App {\n\t\tinterface Error {\n\t\t\tmessage: string;\n\t\t\tcode: string;\n\t\t}\n\t}\n}\nexport {}\n\n// @filename: index.js\nimport { error } from '@sveltejs/kit';\n// ---cut---\nerror(404, {\n\tmessage: 'Not found',\n\t+++code: 'NOT_FOUND'+++\n});\n```\n\n...otherwise, for convenience, you can pass a string as the second argument:\n\n```js\nimport { error } from '@sveltejs/kit';\n// ---cut---\n---error(404, { message: 'Not found' });---\n+++error(404, 'Not found');+++\n```\n\n> [!NOTE] [In SvelteKit 1.x](migrating-to-sveltekit-2#redirect-and-error-are-no-longer-thrown-by-you) you had to `throw` the `error` yourself\n\n## Unexpected errors\n\nAn _unexpected_ error is any other exception that occurs while handling a request. Since these can contain sensitive information, unexpected error messages and stack traces are not exposed to users.\n\nBy default, unexpected errors are printed to the console (or, in production, your server logs), while the error that is exposed to the user has a generic shape:\n\n```json\n{ \"message\": \"Internal Error\" }\n```\n\nUnexpected errors will go through the [`handleError`](hooks#Shared-hooks-handleError) hook, where you can add your own error handling — for example, sending errors to a reporting service, or returning a custom error object which becomes `$page.error`.\n\n## Responses\n\nIf an error occurs inside `handle` or inside a [`+server.js`](routing#server) request handler, SvelteKit will respond with either a fallback error page or a JSON representation of the error object, depending on the request's `Accept` headers.\n\nYou can customise the fallback error page by adding a `src/error.html` file:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>%sveltekit.error.message%</title>\n\t</head>\n\t<body>\n\t\t<h1>My custom error page</h1>\n\t\t<p>Status: %sveltekit.status%</p>\n\t\t<p>Message: %sveltekit.error.message%</p>\n\t</body>\n</html>\n```\n\nSvelteKit will replace `%sveltekit.status%` and `%sveltekit.error.message%` with their corresponding values.\n\nIf the error instead occurs inside a `load` function while rendering a page, SvelteKit will render the [`+error.svelte`](routing#error) component nearest to where the error occurred. If the error occurs inside a `load` function in `+layout(.server).js`, the closest error boundary in the tree is an `+error.svelte` file _above_ that layout (not next to it).\n\nThe exception is when the error occurs inside the root `+layout.js` or `+layout.server.js`, since the root layout would ordinarily _contain_ the `+error.svelte` component. In this case, SvelteKit uses the fallback error page.\n\n## Type safety\n\nIf you're using TypeScript and need to customize the shape of errors, you can do so by declaring an `App.Error` interface in your app (by convention, in `src/app.d.ts`, though it can live anywhere that TypeScript can 'see'):\n\n```ts\n/// file: src/app.d.ts\ndeclare global {\n\tnamespace App {\n\t\tinterface Error {\n+++\t\t\tcode: string;\n\t\t\tid: string;+++\n\t\t}\n\t}\n}\n\nexport {};\n```\n\nThis interface always includes a `message: string` property.\n\n## Further reading\n\n- [Tutorial: Errors and redirects](/tutorial/kit/error-basics)\n- [Tutorial: Hooks](/tutorial/kit/handle)",
+		"kit/link-options": "In SvelteKit, `<a>` elements (rather than framework-specific `<Link>` components) are used to navigate between the routes of your app. If the user clicks on a link whose `href` is 'owned' by the app (as opposed to, say, a link to an external site) then SvelteKit will navigate to the new page by importing its code and then calling any `load` functions it needs to fetch data.\n\nYou can customise the behaviour of links with `data-sveltekit-*` attributes. These can be applied to the `<a>` itself, or to a parent element.\n\nThese options also apply to `<form>` elements with [`method=\"GET\"`](form-actions#GET-vs-POST).\n\n## data-sveltekit-preload-data\n\nBefore the browser registers that the user has clicked on a link, we can detect that they've hovered the mouse over it (on desktop) or that a `touchstart` or `mousedown` event was triggered. In both cases, we can make an educated guess that a `click` event is coming.\n\nSvelteKit can use this information to get a head start on importing the code and fetching the page's data, which can give us an extra couple of hundred milliseconds — the difference between a user interface that feels laggy and one that feels snappy.\n\nWe can control this behaviour with the `data-sveltekit-preload-data` attribute, which can have one of two values:\n\n- `\"hover\"` means that preloading will start if the mouse comes to a rest over a link. On mobile, preloading begins on `touchstart`\n- `\"tap\"` means that preloading will start as soon as a `touchstart` or `mousedown` event is registered\n\nThe default project template has a `data-sveltekit-preload-data=\"hover\"` attribute applied to the `<body>` element in `src/app.html`, meaning that every link is preloaded on hover by default:\n\n```html\n<body data-sveltekit-preload-data=\"hover\">\n\t<div style=\"display: contents\">%sveltekit.body%</div>\n</body>\n```\n\nSometimes, calling `load` when the user hovers over a link might be undesirable, either because it's likely to result in false positives (a click needn't follow a hover) or because data is updating very quickly and a delay could mean staleness.\n\nIn these cases, you can specify the `\"tap\"` value, which causes SvelteKit to call `load` only when the user taps or clicks on a link:\n\n```html\n<a data-sveltekit-preload-data=\"tap\" href=\"/stonks\">\n\tGet current stonk values\n</a>\n```\n\n> [!NOTE] You can also programmatically invoke `preloadData` from `$app/navigation`.\n\nData will never be preloaded if the user has chosen reduced data usage, meaning [`navigator.connection.saveData`](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData) is `true`.\n\n## data-sveltekit-preload-code\n\nEven in cases where you don't want to preload _data_ for a link, it can be beneficial to preload the _code_. The `data-sveltekit-preload-code` attribute works similarly to `data-sveltekit-preload-data`, except that it can take one of four values, in decreasing 'eagerness':\n\n- `\"eager\"` means that links will be preloaded straight away\n- `\"viewport\"` means that links will be preloaded once they enter the viewport\n- `\"hover\"` - as above, except that only code is preloaded\n- `\"tap\"` - as above, except that only code is preloaded\n\nNote that `viewport` and `eager` only apply to links that are present in the DOM immediately following navigation — if a link is added later (in an `{#if ...}` block, for example) it will not be preloaded until triggered by `hover` or `tap`. This is to avoid performance pitfalls resulting from aggressively observing the DOM for changes.\n\n> [!NOTE] Since preloading code is a prerequisite for preloading data, this attribute will only have an effect if it specifies a more eager value than any `data-sveltekit-preload-data` attribute that is present.\n\nAs with `data-sveltekit-preload-data`, this attribute will be ignored if the user has chosen reduced data usage.\n\n## data-sveltekit-reload\n\nOccasionally, we need to tell SvelteKit not to handle a link, but allow the browser to handle it. Adding a `data-sveltekit-reload` attribute to a link...\n\n```html\n<a data-sveltekit-reload href=\"/path\">Path</a>\n```\n\n...will cause a full-page navigation when the link is clicked.\n\nLinks with a `rel=\"external\"` attribute will receive the same treatment. In addition, they will be ignored during [prerendering](page-options#prerender).\n\n## data-sveltekit-replacestate\n\nSometimes you don't want navigation to create a new entry in the browser's session history. Adding a `data-sveltekit-replacestate` attribute to a link...\n\n```html\n<a data-sveltekit-replacestate href=\"/path\">Path</a>\n```\n\n...will replace the current `history` entry rather than creating a new one with `pushState` when the link is clicked.\n\n## data-sveltekit-keepfocus\n\nSometimes you don't want [focus to be reset](accessibility#Focus-management) after navigation. For example, maybe you have a search form that submits as the user is typing, and you want to keep focus on the text input.  Adding a `data-sveltekit-keepfocus` attribute to it...\n\n```html\n<form data-sveltekit-keepfocus>\n\t<input type=\"text\" name=\"query\">\n</form>\n```\n\n...will cause the currently focused element to retain focus after navigation. In general, avoid using this attribute on links, since the focused element would be the `<a>` tag (and not a previously focused element) and screen reader and other assistive technology users often expect focus to be moved after a navigation. You should also only use this attribute on elements that still exist after navigation. If the element no longer exists, the user's focus will be lost, making for a confusing experience for assistive technology users.\n\n## data-sveltekit-noscroll\n\nWhen navigating to internal links, SvelteKit mirrors the browser's default navigation behaviour: it will change the scroll position to 0,0 so that the user is at the very top left of the page (unless the link includes a `#hash`, in which case it will scroll to the element with a matching ID).\n\nIn certain cases, you may wish to disable this behaviour. Adding a `data-sveltekit-noscroll` attribute to a link...\n\n```html\n<a href=\"path\" data-sveltekit-noscroll>Path</a>\n```\n\n...will prevent scrolling after the link is clicked.\n\n## Disabling options\n\nTo disable any of these options inside an element where they have been enabled, use the `\"false\"` value:\n\n```html\n<div data-sveltekit-preload-data>\n\t<!-- these links will be preloaded -->\n\t<a href=\"/a\">a</a>\n\t<a href=\"/b\">b</a>\n\t<a href=\"/c\">c</a>\n\n\t<div data-sveltekit-preload-data=\"false\">\n\t\t<!-- these links will NOT be preloaded -->\n\t\t<a href=\"/d\">d</a>\n\t\t<a href=\"/e\">e</a>\n\t\t<a href=\"/f\">f</a>\n\t</div>\n</div>\n```\n\nTo apply an attribute to an element conditionally, do this:\n\n```svelte\n<div data-sveltekit-preload-data={condition ? 'hover' : false}>\n```",
+		"kit/service-workers": "Service workers act as proxy servers that handle network requests inside your app. This makes it possible to make your app work offline, but even if you don't need offline support (or can't realistically implement it because of the type of app you're building), it's often worth using service workers to speed up navigation by precaching your built JS and CSS.\n\nIn SvelteKit, if you have a `src/service-worker.js` file (or `src/service-worker/index.js`) it will be bundled and automatically registered. You can change the [location of your service worker](configuration#files) if you need to.\n\nYou can [disable automatic registration](configuration#serviceWorker) if you need to register the service worker with your own logic or use another solution. The default registration looks something like this:\n\n```js\nif ('serviceWorker' in navigator) {\n\taddEventListener('load', function () {\n\t\tnavigator.serviceWorker.register('./path/to/service-worker.js');\n\t});\n}\n```\n\n## Inside the service worker\n\nInside the service worker you have access to the [`$service-worker` module]($service-worker), which provides you with the paths to all static assets, build files and prerendered pages. You're also provided with an app version string, which you can use for creating a unique cache name, and the deployment's `base` path. If your Vite config specifies `define` (used for global variable replacements), this will be applied to service workers as well as your server/client builds.\n\nThe following example caches the built app and any files in `static` eagerly, and caches all other requests as they happen. This would make each page work offline once visited.\n\n```js\n/// file: src/service-worker.js\n// Disables access to DOM typings like `HTMLElement` which are not available\n// inside a service worker and instantiates the correct globals\n/// <reference no-default-lib=\"true\"/>\n/// <reference lib=\"esnext\" />\n/// <reference lib=\"webworker\" />\n\n// Ensures that the `$service-worker` import has proper type definitions\n/// <reference types=\"@sveltejs/kit\" />\n\n// Only necessary if you have an import from `$env/static/public`\n/// <reference types=\"../.svelte-kit/ambient.d.ts\" />\n\nimport { build, files, version } from '$service-worker';\n\n// This gives `self` the correct types\nconst self = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (globalThis.self));\n\n// Create a unique cache name for this deployment\nconst CACHE = `cache-${version}`;\n\nconst ASSETS = [\n\t...build, // the app itself\n\t...files  // everything in `static`\n];\n\nself.addEventListener('install', (event) => {\n\t// Create a new cache and add all files to it\n\tasync function addFilesToCache() {\n\t\tconst cache = await caches.open(CACHE);\n\t\tawait cache.addAll(ASSETS);\n\t}\n\n\tevent.waitUntil(addFilesToCache());\n});\n\nself.addEventListener('activate', (event) => {\n\t// Remove previous cached data from disk\n\tasync function deleteOldCaches() {\n\t\tfor (const key of await caches.keys()) {\n\t\t\tif (key !== CACHE) await caches.delete(key);\n\t\t}\n\t}\n\n\tevent.waitUntil(deleteOldCaches());\n});\n\nself.addEventListener('fetch', (event) => {\n\t// ignore POST requests etc\n\tif (event.request.method !== 'GET') return;\n\n\tasync function respond() {\n\t\tconst url = new URL(event.request.url);\n\t\tconst cache = await caches.open(CACHE);\n\n\t\t// `build`/`files` can always be served from the cache\n\t\tif (ASSETS.includes(url.pathname)) {\n\t\t\tconst response = await cache.match(url.pathname);\n\n\t\t\tif (response) {\n\t\t\t\treturn response;\n\t\t\t}\n\t\t}\n\n\t\t// for everything else, try the network first, but\n\t\t// fall back to the cache if we're offline\n\t\ttry {\n\t\t\tconst response = await fetch(event.request);\n\n\t\t\t// if we're offline, fetch can return a value that is not a Response\n\t\t\t// instead of throwing - and we can't pass this non-Response to respondWith\n\t\t\tif (!(response instanceof Response)) {\n\t\t\t\tthrow new Error('invalid response from fetch');\n\t\t\t}\n\n\t\t\tif (response.status === 200) {\n\t\t\t\tcache.put(event.request, response.clone());\n\t\t\t}\n\n\t\t\treturn response;\n\t\t} catch (err) {\n\t\t\tconst response = await cache.match(event.request);\n\n\t\t\tif (response) {\n\t\t\t\treturn response;\n\t\t\t}\n\n\t\t\t// if there's no cache, then just error out\n\t\t\t// as there is nothing we can do to respond to this request\n\t\t\tthrow err;\n\t\t}\n\t}\n\n\tevent.respondWith(respond());\n});\n```\n\n> [!NOTE] Be careful when caching! In some cases, stale data might be worse than data that's unavailable while offline. Since browsers will empty caches if they get too full, you should also be careful about caching large assets like video files.\n\n## During development\n\nThe service worker is bundled for production, but not during development. For that reason, only browsers that support [modules in service workers](https://web.dev/es-modules-in-sw) will be able to use them at dev time. If you are manually registering your service worker, you will need to pass the `{ type: 'module' }` option in development:\n\n```js\nimport { dev } from '$app/environment';\n\nnavigator.serviceWorker.register('/service-worker.js', {\n\ttype: dev ? 'module' : 'classic'\n});\n```\n\n> [!NOTE] `build` and `prerendered` are empty arrays during development\n\n## Other solutions\n\nSvelteKit's service worker implementation is designed to be easy to work with and is probably a good solution for most users. However, outside of SvelteKit, many PWA applications leverage the [Workbox](https://web.dev/learn/pwa/workbox) library. If you're used to using Workbox you may prefer [Vite PWA plugin](https://vite-pwa-org.netlify.app/frameworks/sveltekit.html).\n\n## References\n\nFor more general information on service workers, we recommend [the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers).",
+		"kit/server-only-modules": "Like a good friend, SvelteKit keeps your secrets. When writing your backend and frontend in the same repository, it can be easy to accidentally import sensitive data into your front-end code (environment variables containing API keys, for example). SvelteKit provides a way to prevent this entirely: server-only modules.\n\n## Private environment variables\n\nThe [`$env/static/private`]($env-static-private) and [`$env/dynamic/private`]($env-dynamic-private) modules can only be imported into modules that only run on the server, such as [`hooks.server.js`](hooks#Server-hooks) or [`+page.server.js`](routing#page-page.server.js).\n\n## Server-only utilities\n\nThe [`$app/server`]($app-server) module, which contains a [`read`]($app-server#read) function for reading assets from the filesystem, can likewise only be imported by code that runs on the server.\n\n## Your modules\n\nYou can make your own modules server-only in two ways:\n\n- adding `.server` to the filename, e.g. `secrets.server.js`\n- placing them in `$lib/server`, e.g. `$lib/server/secrets.js`\n\n## How it works\n\nAny time you have public-facing code that imports server-only code (whether directly or indirectly)...\n\n```js\n// @errors: 7005\n/// file: $lib/server/secrets.js\nexport const atlantisCoordinates = [/* redacted */];\n```\n\n```js\n// @errors: 2307 7006 7005\n/// file: src/routes/utils.js\nexport { atlantisCoordinates } from '$lib/server/secrets.js';\n\nexport const add = (a, b) => a + b;\n```\n\n```html\n/// file: src/routes/+page.svelte\n<script>\n\timport { add } from './utils.js';\n</script>\n```\n\n...SvelteKit will error:\n\n```\nCannot import $lib/server/secrets.ts into code that runs in the browser, as this could leak sensitive information.\n\n src/routes/+page.svelte imports\n  src/routes/utils.js imports\n   $lib/server/secrets.ts\n\nIf you're only using the import as a type, change it to `import type`.\n```\n\nEven though the public-facing code — `src/routes/+page.svelte` — only uses the `add` export and not the secret `atlantisCoordinates` export, the secret code could end up in JavaScript that the browser downloads, and so the import chain is considered unsafe.\n\nThis feature also works with dynamic imports, even interpolated ones like ``await import(`./${foo}.js`)``.\n\n> [!NOTE] Unit testing frameworks like Vitest do not distinguish between server-only and public-facing code. For this reason, illegal import detection is disabled when running tests, as determined by `process.env.TEST === 'true'`.\n\n## Further reading\n\n- [Tutorial: Environment variables](/tutorial/kit/env-static-private)",
+		"kit/snapshots": "Ephemeral DOM state — like scroll positions on sidebars, the content of `<input>` elements and so on — is discarded when you navigate from one page to another.\n\nFor example, if the user fills out a form but navigates away and then back before submitting, or if the user refreshes the page, the values they filled in will be lost. In cases where it's valuable to preserve that input, you can take a _snapshot_ of DOM state, which can then be restored if the user navigates back.\n\nTo do this, export a `snapshot` object with `capture` and `restore` methods from a `+page.svelte` or `+layout.svelte`:\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\tlet comment = $state('');\n\n\t/** @type {import('./$types').Snapshot<string>} */\n\texport const snapshot = {\n\t\tcapture: () => comment,\n\t\trestore: (value) => comment = value\n\t};\n</script>\n\n<form method=\"POST\">\n\t<label for=\"comment\">Comment</label>\n\t<textarea id=\"comment\" bind:value={comment} />\n\t<button>Post comment</button>\n</form>\n```\n\nWhen you navigate away from this page, the `capture` function is called immediately before the page updates, and the returned value is associated with the current entry in the browser's history stack. If you navigate back, the `restore` function is called with the stored value as soon as the page is updated.\n\nThe data must be serializable as JSON so that it can be persisted to `sessionStorage`. This allows the state to be restored when the page is reloaded, or when the user navigates back from a different site.\n\n> [!NOTE] Avoid returning very large objects from `capture` — once captured, objects will be retained in memory for the duration of the session, and in extreme cases may be too large to persist to `sessionStorage`.",
+		"kit/shallow-routing": "As you navigate around a SvelteKit app, you create _history entries_. Clicking the back and forward buttons traverses through this list of entries, re-running any `load` functions and replacing page components as necessary.\n\nSometimes, it's useful to create history entries _without_ navigating. For example, you might want to show a modal dialog that the user can dismiss by navigating back. This is particularly valuable on mobile devices, where swipe gestures are often more natural than interacting directly with the UI. In these cases, a modal that is _not_ associated with a history entry can be a source of frustration, as a user may swipe backwards in an attempt to dismiss it and find themselves on the wrong page.\n\nSvelteKit makes this possible with the [`pushState`]($app-navigation#pushState) and [`replaceState`]($app-navigation#replaceState) functions, which allow you to associate state with a history entry without navigating. For example, to implement a history-driven modal:\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\timport { pushState } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\n\tfunction showModal() {\n\t\tpushState('', {\n\t\t\tshowModal: true\n\t\t});\n\t}\n</script>\n\n{#if page.state.showModal}\n\t<Modal close={() => history.back()} />\n{/if}\n```\n\nThe modal can be dismissed by navigating back (unsetting `page.state.showModal`) or by interacting with it in a way that causes the `close` callback to run, which will navigate back programmatically.\n\n## API\n\nThe first argument to `pushState` is the URL, relative to the current URL. To stay on the current URL, use `''`.\n\nThe second argument is the new page state, which can be accessed via the [page object]($app-state#page) as `page.state`. You can make page state type-safe by declaring an [`App.PageState`](types#PageState) interface (usually in `src/app.d.ts`).\n\nTo set page state without creating a new history entry, use `replaceState` instead of `pushState`.\n\n> [!LEGACY]\n> `page.state` from `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$page.state` from `$app/stores` instead.\n\n## Loading data for a route\n\nWhen shallow routing, you may want to render another `+page.svelte` inside the current page. For example, clicking on a photo thumbnail could pop up the detail view without navigating to the photo page.\n\nFor this to work, you need to load the data that the `+page.svelte` expects. A convenient way to do this is to use [`preloadData`]($app-navigation#preloadData) inside the `click` handler of an `<a>` element. If the element (or a parent) uses [`data-sveltekit-preload-data`](link-options#data-sveltekit-preload-data), the data will have already been requested, and `preloadData` will reuse that request.\n\n```svelte\n<!--- file: src/routes/photos/+page.svelte --->\n<script>\n\timport { preloadData, pushState, goto } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\timport PhotoPage from './[id]/+page.svelte';\n\n\tlet { data } = $props();\n</script>\n\n{#each data.thumbnails as thumbnail}\n\t<a\n\t\thref=\"/photos/{thumbnail.id}\"\n\t\tonclick={async (e) => {\n\t\t\tif (innerWidth < 640        // bail if the screen is too small\n\t\t\t\t|| e.shiftKey             // or the link is opened in a new window\n\t\t\t\t|| e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey)\n\t\t\t\t// should also consider clicking with a mouse scroll wheel\n\t\t\t) return;\n\n\t\t\t// prevent navigation\n\t\t\te.preventDefault();\n\n\t\t\tconst { href } = e.currentTarget;\n\n\t\t\t// run `load` functions (or rather, get the result of the `load` functions\n\t\t\t// that are already running because of `data-sveltekit-preload-data`)\n\t\t\tconst result = await preloadData(href);\n\n\t\t\tif (result.type === 'loaded' && result.status === 200) {\n\t\t\t\tpushState(href, { selected: result.data });\n\t\t\t} else {\n\t\t\t\t// something bad happened! try navigating\n\t\t\t\tgoto(href);\n\t\t\t}\n\t\t}}\n\t>\n\t\t<img alt={thumbnail.alt} src={thumbnail.src} />\n\t</a>\n{/each}\n\n{#if page.state.selected}\n\t<Modal onclose={() => history.back()}>\n\t\t<!-- pass page data to the +page.svelte component,\n\t\t     just like SvelteKit would on navigation -->\n\t\t<PhotoPage data={page.state.selected} />\n\t</Modal>\n{/if}\n```\n\n## Caveats\n\nDuring server-side rendering, `page.state` is always an empty object. The same is true for the first page the user lands on — if the user reloads the page (or returns from another document), state will _not_ be applied until they navigate.\n\nShallow routing is a feature that requires JavaScript to work. Be mindful when using it and try to think of sensible fallback behavior in case JavaScript isn't available.",
+		"kit/observability": "<blockquote class=\"since note\">\n\t<p>Available since 2.31</p>\n</blockquote>\n\nSometimes, you may need to observe how your application is behaving in order to improve performance or find the root cause of a pesky bug. To help with this, SvelteKit can emit server-side [OpenTelemetry](https://opentelemetry.io) spans for the following:\n\n- The [`handle`](hooks#Server-hooks-handle) hook and `handle` functions running in a [`sequence`](@sveltejs-kit-hooks#sequence) (these will show up as children of each other and the root `handle` hook)\n- Server [`load`](load) functions and universal `load` functions when they're run on the server\n- [Form actions](form-actions)\n- [Remote functions](remote-functions)\n\nJust telling SvelteKit to emit spans won't get you far, though — you need to actually collect them somewhere to be able to view them. SvelteKit provides `src/instrumentation.server.ts` as a place to write your tracing setup and instrumentation code. It's guaranteed to be run prior to your application code being imported, providing your deployment platform supports it and your adapter is aware of it.\n\nBoth of these features are currently experimental, meaning they are likely to contain bugs and are subject to change without notice. You must opt in by adding the `kit.experimental.tracing.server` and `kit.experimental.instrumentation.server` option in your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\texperimental: {\n\t\t\t+++tracing: {\n\t\t\t\tserver: true\n\t\t\t},\n\t\t\tinstrumentation: {\n\t\t\t\tserver: true\n\t\t\t}+++\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\n> [!NOTE] Tracing — and more significantly, observability instrumentation — can have a nontrivial overhead. Before you go all-in on tracing, consider whether or not you really need it, or if it might be more appropriate to turn it on in development and preview environments only.\n\n## Augmenting the built-in tracing\n\nSvelteKit provides access to the `root` span and the `current` span on the request event. The root span is the one associated with your root `handle` function, and the current span could be associated with `handle`, `load`, a form action, or a remote function, depending on the context. You can annotate these spans with any attributes you wish to record:\n\n```js\n/// file: $lib/authenticate.ts\n\n// @filename: ambient.d.ts\ndeclare module '$lib/auth-core' {\n\texport function getAuthenticatedUser(): Promise<{ id: string }>\n}\n\n// @filename: index.js\n// ---cut---\nimport { getRequestEvent } from '$app/server';\nimport { getAuthenticatedUser } from '$lib/auth-core';\n\nasync function authenticate() {\n\tconst user = await getAuthenticatedUser();\n\tconst event = getRequestEvent();\n\tevent.tracing.root.setAttribute('userId', user.id);\n}\n```\n\n## Development quickstart\n\nTo view your first trace, you'll need to set up a local collector. We'll use [Jaeger](https://www.jaegertracing.io/docs/getting-started/) in this example, as they provide an easy-to-use quickstart command. Once your collector is running locally:\n\n- Turn on the experimental flags mentioned earlier in your `svelte.config.js` file\n- Use your package manager to install the dependencies you'll need:\n  ```sh\n  npm i @opentelemetry/sdk-node @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-proto import-in-the-middle\n  ```\n- Create `src/instrumentation.server.js` with the following:\n\n```js\n/// file: src/instrumentation.server.js\nimport { NodeSDK } from '@opentelemetry/sdk-node';\nimport { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';\nimport { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';\nimport { createAddHookMessageChannel } from 'import-in-the-middle';\nimport { register } from 'node:module';\n\nconst { registerOptions } = createAddHookMessageChannel();\nregister('import-in-the-middle/hook.mjs', import.meta.url, registerOptions);\n\nconst sdk = new NodeSDK({\n\tserviceName: 'test-sveltekit-tracing',\n\ttraceExporter: new OTLPTraceExporter(),\n\tinstrumentations: [getNodeAutoInstrumentations()]\n});\n\nsdk.start();\n```\n\nNow, server-side requests will begin generating traces, which you can view in Jaeger's web console at [localhost:16686](http://localhost:16686).\n\n## `@opentelemetry/api`\n\nSvelteKit uses `@opentelemetry/api` to generate its spans. This is declared as an optional peer dependency so that users not needing traces see no impact on install size or runtime performance. In most cases, if you're configuring your application to collect SvelteKit's spans, you'll end up installing a library like `@opentelemetry/sdk-node` or `@vercel/otel`, which in turn depend on `@opentelemetry/api`, which will satisfy SvelteKit's dependency as well. If you see an error from SvelteKit telling you it can't find `@opentelemetry/api`, it may just be because you haven't set up your trace collection yet. If you _have_ done that and are still seeing the error, you can install `@opentelemetry/api` yourself.",
+		"kit/packaging": "You can use SvelteKit to build apps as well as component libraries, using the `@sveltejs/package` package (`npx sv create` has an option to set this up for you).\n\nWhen you're creating an app, the contents of `src/routes` is the public-facing stuff; [`src/lib`]($lib) contains your app's internal library.\n\nA component library has the exact same structure as a SvelteKit app, except that `src/lib` is the public-facing bit, and your root `package.json` is used to publish the package. `src/routes` might be a documentation or demo site that accompanies the library, or it might just be a sandbox you use during development.\n\nRunning the `svelte-package` command from `@sveltejs/package` will take the contents of `src/lib` and generate a `dist` directory (which can be [configured](#Options)) containing the following:\n\n- All the files in `src/lib`. Svelte components will be preprocessed, TypeScript files will be transpiled to JavaScript.\n- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](#Options), but we strongly recommend against it — people using your library might use TypeScript, for which they require these type definition files.\n\n> [!NOTE] `@sveltejs/package` version 1 generated a `package.json`. This is no longer the case and it will now use the `package.json` from your project and validate that it is correct instead. If you're still on version 1, see [this PR](https://github.com/sveltejs/kit/pull/8922) for migration instructions.\n\n## Anatomy of a package.json\n\nSince you're now building a library for public use, the contents of your `package.json` will become more important. Through it, you configure the entry points of your package, which files are published to npm, and which dependencies your library has. Let's go through the most important fields one by one.\n\n### name\n\nThis is the name of your package. It will be available for others to install using that name, and visible on `https://npmjs.com/package/<name>`.\n\n```json\n{\n\t\"name\": \"your-library\"\n}\n```\n\nRead more about it [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#name).\n\n### license\n\nEvery package should have a license field so people know how they are allowed to use it. A very popular license which is also very permissive in terms of distribution and reuse without warranty is `MIT`.\n\n```json\n{\n\t\"license\": \"MIT\"\n}\n```\n\nRead more about it [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#license). Note that you should also include a `LICENSE` file in your package.\n\n### files\n\nThis tells npm which files it will pack up and upload to npm. It should contain your output folder (`dist` by default). Your `package.json` and `README` and `LICENSE` will always be included, so you don't need to specify them.\n\n```json\n{\n\t\"files\": [\"dist\"]\n}\n```\n\nTo exclude unnecessary files (such as unit tests, or modules that are only imported from `src/routes` etc) you can add them to an `.npmignore` file. This will result in smaller packages that are faster to install.\n\nRead more about it [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#files).\n\n### exports\n\nThe `\"exports\"` field contains the package's entry points. If you set up a new library project through `npx sv create`, it's set to a single export, the package root:\n\n```json\n{\n\t\"exports\": {\n\t\t\".\": {\n\t\t\t\"types\": \"./dist/index.d.ts\",\n\t\t\t\"svelte\": \"./dist/index.js\"\n\t\t}\n\t}\n}\n```\n\nThis tells bundlers and tooling that your package only has one entry point, the root, and everything should be imported through that, like this:\n\n```js\n// @errors: 2307\nimport { Something } from 'your-library';\n```\n\nThe `types` and `svelte` keys are [export conditions](https://nodejs.org/api/packages.html#conditional-exports). They tell tooling what file to import when they look up the `your-library` import:\n\n- TypeScript sees the `types` condition and looks up the type definition file. If you don't publish type definitions, omit this condition.\n- Svelte-aware tooling sees the `svelte` condition and knows this is a Svelte component library. If you publish a library that does not export any Svelte components and that could also work in non-Svelte projects (for example a Svelte store library), you can replace this condition with `default`.\n\n> [!NOTE] Previous versions of `@sveltejs/package` also added a `package.json` export. This is no longer part of the template because all tooling can now deal with a `package.json` not being explicitly exported.\n\nYou can adjust `exports` to your liking and provide more entry points. For example, if instead of a `src/lib/index.js` file that re-exported components you wanted to expose a `src/lib/Foo.svelte` component directly, you could create the following export map...\n\n```json\n{\n\t\"exports\": {\n\t\t\"./Foo.svelte\": {\n\t\t\t\"types\": \"./dist/Foo.svelte.d.ts\",\n\t\t\t\"svelte\": \"./dist/Foo.svelte\"\n\t\t}\n\t}\n}\n```\n\n...and a consumer of your library could import the component like so:\n\n```js\n// @filename: ambient.d.ts\ndeclare module 'your-library/Foo.svelte';\n\n// @filename: index.js\n// ---cut---\nimport Foo from 'your-library/Foo.svelte';\n```\n\n> [!NOTE] Beware that doing this will need additional care if you provide type definitions. Read more about the caveat [here](#TypeScript)\n\nIn general, each key of the exports map is the path the user will have to use to import something from your package, and the value is the path to the file that will be imported or a map of export conditions which in turn contains these file paths.\n\nRead more about `exports` [here](https://nodejs.org/docs/latest-v18.x/api/packages.html#package-entry-points).\n\n### svelte\n\nThis is a legacy field that enabled tooling to recognise Svelte component libraries. It's no longer necessary when using the `svelte` [export condition](#Anatomy-of-a-package.json-exports), but for backwards compatibility with outdated tooling that doesn't yet know about export conditions it's good to keep it around. It should point towards your root entry point.\n\n```json\n{\n\t\"svelte\": \"./dist/index.js\"\n}\n```\n\n### sideEffects\n\nThe `sideEffects` field in `package.json` is used by bundlers to determine if a module may contain code that has side effects. A module is considered to have side effects if it makes changes that are observable from other scripts outside the module when it's imported. For example, side effects include modifying global variables or the prototype of built-in JavaScript objects. Because a side effect could potentially affect the behavior of other parts of the application, these files/modules will be included in the final bundle regardless of whether their exports are used in the application. It is a best practice to avoid side effects in your code.\n\nSetting the `sideEffects` field in `package.json` can help the bundler to be more aggressive in eliminating unused exports from the final bundle, a process known as tree-shaking. This results in smaller and more efficient bundles. Different bundlers handle `sideEffects` in various manners. While not necessary for Vite, we recommend that libraries state that all CSS files have side effects so that your library will be [compatible with webpack](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free). This is the configuration that comes with newly created projects:\n\n```json\n/// file: package.json\n{\n\t\"sideEffects\": [\"**/*.css\"]\n}\n```\n\n> [!NOTE] If the scripts in your library have side effects, ensure that you update the `sideEffects` field. All scripts are marked as side effect free by default in newly created projects. If a file with side effects is incorrectly marked as having no side effects, it can result in broken functionality.\n\nIf your package has files with side effects, you can specify them in an array:\n\n```json\n/// file: package.json\n{\n    \"sideEffects\": [\n    \t\"**/*.css\",\n    \t\"./dist/sideEffectfulFile.js\"\n    ]\n}\n```\n\nThis will treat only the specified files as having side effects.\n\n## TypeScript\n\nYou should ship type definitions for your library even if you don't use TypeScript yourself so that people who do get proper intellisense when using your library. `@sveltejs/package` makes the process of generating types mostly opaque to you. By default, when packaging your library, type definitions are auto-generated for JavaScript, TypeScript and Svelte files. All you need to ensure is that the `types` condition in the [exports](#Anatomy-of-a-package.json-exports) map points to the correct files. When initialising a library project through `npx sv create`, this is automatically setup for the root export.\n\nIf you have something else than a root export however — for example providing a `your-library/foo` import — you need to take additional care for providing type definitions. Unfortunately, TypeScript by default will _not_ resolve the `types` condition for an export like `{ \"./foo\": { \"types\": \"./dist/foo.d.ts\", ... }}`. Instead, it will search for a `foo.d.ts` relative to the root of your library (i.e. `your-library/foo.d.ts` instead of `your-library/dist/foo.d.ts`). To fix this, you have two options:\n\nThe first option is to require people using your library to set the `moduleResolution` option in their `tsconfig.json` (or `jsconfig.json`) to `bundler` (available since TypeScript 5, the best and recommended option in the future), `node16` or `nodenext`. This opts TypeScript into actually looking at the exports map and resolving the types correctly.\n\nThe second option is to (ab)use the `typesVersions` feature from TypeScript to wire up the types. This is a field inside `package.json` TypeScript uses to check for different type definitions depending on the TypeScript version, and also contains a path mapping feature for that. We leverage that path mapping feature to get what we want. For the mentioned `foo` export above, the corresponding `typesVersions` looks like this:\n\n```json\n{\n\t\"exports\": {\n\t\t\"./foo\": {\n\t\t\t\"types\": \"./dist/foo.d.ts\",\n\t\t\t\"svelte\": \"./dist/foo.js\"\n\t\t}\n\t},\n\t\"typesVersions\": {\n\t\t\">4.0\": {\n\t\t\t\"foo\": [\"./dist/foo.d.ts\"]\n\t\t}\n\t}\n}\n```\n\n`>4.0` tells TypeScript to check the inner map if the used TypeScript version is greater than 4 (which should in practice always be true). The inner map tells TypeScript that the typings for `your-library/foo` are found within `./dist/foo.d.ts`, which essentially replicates the `exports` condition. You also have `*` as a wildcard at your disposal to make many type definitions at once available without repeating yourself. Note that if you opt into `typesVersions` you have to declare all type imports through it, including the root import (which is defined as `\"index.d.ts\": [..]`).\n\nYou can read more about that feature [here](https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#version-selection-with-typesversions).\n\n## Best practices\n\nYou should avoid using SvelteKit-specific modules like `$app/environment` in your packages unless you intend for them to only be consumable by other SvelteKit projects. E.g. rather than using `import { browser } from '$app/environment'` you could use `import { BROWSER } from 'esm-env'` ([see esm-env docs](https://github.com/benmccann/esm-env)). You may also wish to pass in things like the current URL or a navigation action as a prop rather than relying directly on `$app/state`, `$app/navigation`, etc. Writing your app in this more generic fashion will also make it easier to setup tools for testing, UI demos and so on.\n\nEnsure that you add [aliases](configuration#alias) via `svelte.config.js` (not `vite.config.js` or `tsconfig.json`), so that they are processed by `svelte-package`.\n\nYou should think carefully about whether or not the changes you make to your package are a bug fix, a new feature, or a breaking change, and update the package version accordingly. Note that if you remove any paths from `exports` or any `export` conditions inside them from your existing library, that should be regarded as a breaking change.\n\n```json\n{\n\t\"exports\": {\n\t\t\".\": {\n\t\t\t\"types\": \"./dist/index.d.ts\",\n// changing `svelte` to `default` is a breaking change:\n---\t\t\t\"svelte\": \"./dist/index.js\"---\n+++\t\t\t\"default\": \"./dist/index.js\"+++\n\t\t},\n// removing this is a breaking change:\n---\t\t\"./foo\": {\n\t\t\t\"types\": \"./dist/foo.d.ts\",\n\t\t\t\"svelte\": \"./dist/foo.js\",\n\t\t\t\"default\": \"./dist/foo.js\"\n\t\t},---\n// adding this is ok:\n+++\t\t\"./bar\": {\n\t\t\t\"types\": \"./dist/bar.d.ts\",\n\t\t\t\"svelte\": \"./dist/bar.js\",\n\t\t\t\"default\": \"./dist/bar.js\"\n\t\t}+++\n\t}\n}\n```\n\n## Source maps\n\nYou can create so-called declaration maps (`d.ts.map` files) by setting `\"declarationMap\": true` in your `tsconfig.json`. This will allow editors such as VS Code to go to the original `.ts` or `.svelte` file when using features like _Go to Definition_. This means you also need to publish your source files alongside your dist folder in a way that the relative path inside the declaration files leads to a file on disk. Assuming that you have all your library code inside `src/lib` as suggested by Svelte's CLI, this is as simple as adding `src/lib` to `files` in your `package.json`:\n\n```json\n{\n\t\"files\": [\n\t\t\"dist\",\n\t\t\"!dist/**/*.test.*\",\n\t\t\"!dist/**/*.spec.*\",\n\t\t+++\"src/lib\",\n\t\t\"!src/lib/**/*.test.*\",\n\t\t\"!src/lib/**/*.spec.*\"+++\n\t]\n}\n```\n\n## Options\n\n`svelte-package` accepts the following options:\n\n- `-w`/`--watch` — watch files in `src/lib` for changes and rebuild the package\n- `-i`/`--input` — the input directory which contains all the files of the package. Defaults to `src/lib`\n- `-o`/`--output` — the output directory where the processed files are written to. Your `package.json`'s `exports` should point to files inside there, and the `files` array should include that folder. Defaults to `dist`\n- `-p`/`--preserve-output` — prevent deletion of the output directory before packaging. Defaults to `false`, which means that the output directory will be emptied first\n- `-t`/`--types` — whether or not to create type definitions (`d.ts` files). We strongly recommend doing this as it fosters ecosystem library quality. Defaults to `true`\n- `--tsconfig` - the path to a tsconfig or jsconfig. When not provided, searches for the next upper tsconfig/jsconfig in the workspace path.\n\n## Publishing\n\nTo publish the generated package:\n\n```sh\nnpm publish\n```\n\n## Caveats\n\nAll relative file imports need to be fully specified, adhering to Node's ESM algorithm. This means that for a file like `src/lib/something/index.js`, you must include the filename with the extension:\n\n```js\n// @errors: 2307\nimport { something } from './something+++/index.js+++';\n```\n\nIf you are using TypeScript, you need to import `.ts` files the same way, but using a `.js` file ending, _not_ a `.ts` file ending. (This is a TypeScript design decision outside our control.) Setting `\"moduleResolution\": \"NodeNext\"` in your `tsconfig.json` or `jsconfig.json` will help you with this.\n\nAll files except Svelte files (preprocessed) and TypeScript files (transpiled to JavaScript) are copied across as-is.",
+		"kit/auth": "Auth refers to authentication and authorization, which are common needs when building a web application. Authentication means verifying that the user is who they say they are based on their provided credentials. Authorization means determining which actions they are allowed to take.\n\n## Sessions vs tokens\n\nAfter the user has provided their credentials such as a username and password, we want to allow them to use the application without needing to provide their credentials again for future requests. Users are commonly authenticated on subsequent requests with either a session identifier or signed token such as a JSON Web Token (JWT).\n\nSession IDs are most commonly stored in a database. They can be immediately revoked, but require a database query to be made on each request.\n\nIn contrast, JWT generally are not checked against a datastore, which means they cannot be immediately revoked. The advantage of this method is improved latency and reduced load on your datastore.\n\n## Integration points\n\nAuth [cookies](@sveltejs-kit#Cookies) can be checked inside [server hooks](hooks#Server-hooks). If a user is found matching the provided credentials, the user information can be stored in [`locals`](hooks#Server-hooks-locals).\n\n## Guides\n\n[Lucia](https://lucia-auth.com/) is a good reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.\n\nAn auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-auth.com/) rather than having multiple web frameworks inside their project.",
+		"kit/performance": "Out of the box, SvelteKit does a lot of work to make your applications as performant as possible:\n\n- Code-splitting, so that only the code you need for the current page is loaded\n- Asset preloading, so that 'waterfalls' (of files requesting other files) are prevented\n- File hashing, so that your assets can be cached forever\n- Request coalescing, so that data fetched from separate server `load` functions is grouped into a single HTTP request\n- Parallel loading, so that separate universal `load` functions fetch data simultaneously\n- Data inlining, so that requests made with `fetch` during server rendering can be replayed in the browser without issuing a new request\n- Conservative invalidation, so that `load` functions are only re-run when necessary\n- Prerendering (configurable on a per-route basis, if necessary) so that pages without dynamic data can be served instantaneously\n- Link preloading, so that data and code requirements for a client-side navigation are eagerly anticipated\n\nNevertheless, we can't (yet) eliminate all sources of slowness. To eke out maximum performance, you should be mindful of the following tips.\n\n## Diagnosing issues\n\nGoogle's [PageSpeed Insights](https://pagespeed.web.dev/) and (for more advanced analysis) [WebPageTest](https://www.webpagetest.org/) are excellent ways to understand the performance characteristics of a site that is already deployed to the internet.\n\nYour browser also includes useful developer tools for analysing your site, whether deployed or running locally:\n\n* Chrome - [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview#devtools), [Network](https://developer.chrome.com/docs/devtools/network), and [Performance](https://developer.chrome.com/docs/devtools/performance) devtools\n* Edge - [Lighthouse](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/lighthouse/lighthouse-tool), [Network](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/), and [Performance](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/evaluate-performance/) devtools\n* Firefox - [Network](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/) and [Performance](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/) devtools\n* Safari - [enhancing the performance of your webpage](https://developer.apple.com/library/archive/documentation/NetworkingInternetWeb/Conceptual/Web_Inspector_Tutorial/EnhancingyourWebpagesPerformance/EnhancingyourWebpagesPerformance.html)\n\nNote that your site running locally in `dev` mode will exhibit different behaviour than your production app, so you should do performance testing in [preview](building-your-app#Preview-your-app) mode after building.\n\n### Instrumenting\n\nIf you see in the network tab of your browser that an API call is taking a long time and you'd like to understand why, you may consider instrumenting your backend with a tool like [OpenTelemetry](https://opentelemetry.io/) or [Server-Timing headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing).\n\n## Optimizing assets\n\n### Images\n\nReducing the size of image files is often one of the most impactful changes you can make to a site's performance. Svelte provides the `@sveltejs/enhanced-img` package, detailed on the [images](images) page, for making this easier. Additionally, Lighthouse is useful for identifying the worst offenders.\n\n### Videos\n\nVideo files can be very large, so extra care should be taken to ensure that they're optimized:\n\n- Compress videos with tools such as [Handbrake](https://handbrake.fr/). Consider converting the videos to web-friendly formats such as `.webm` or `.mp4`.\n- You can [lazy-load videos](https://web.dev/articles/lazy-loading-video) located below the fold with `preload=\"none\"` (though note that this will slow down playback when the user _does_ initiate it).\n- Strip the audio track out of muted videos using a tool like [FFmpeg](https://ffmpeg.org/).\n\n### Fonts\n\nSvelteKit automatically preloads critical `.js` and `.css` files when the user visits a page, but it does _not_ preload fonts by default, since this may cause unnecessary files (such as font weights that are referenced by your CSS but not actually used on the current page) to be downloaded. Having said that, preloading fonts correctly can make a big difference to how fast your site feels. In your [`handle`](hooks#Server-hooks-handle) hook, you can call `resolve` with a `preload` filter that includes your fonts.\n\nYou can reduce the size of font files by [subsetting](https://web.dev/learn/performance/optimize-web-fonts#subset_your_web_fonts) your fonts.\n\n## Reducing code size\n\n### Svelte version\n\nWe recommend running the latest version of Svelte. Svelte 5 is smaller and faster than Svelte 4, which is smaller and faster than Svelte 3.\n\n### Packages\n\n[`rollup-plugin-visualizer`](https://www.npmjs.com/package/rollup-plugin-visualizer) can be helpful for identifying which packages are contributing the most to the size of your site. You may also find opportunities to remove code by manually inspecting the build output (use `build: { minify: false }` in your [Vite config](https://vitejs.dev/config/build-options.html#build-minify) to make the output readable, but remember to undo that before deploying your app), or via the network tab of your browser's devtools.\n\n### External scripts\n\nTry to minimize the number of third-party scripts running in the browser. For example, instead of using JavaScript-based analytics consider using server-side implementations, such as those offered by many platforms with SvelteKit adapters including [Cloudflare](https://www.cloudflare.com/web-analytics/), [Netlify](https://docs.netlify.com/monitor-sites/site-analytics/), and [Vercel](https://vercel.com/docs/analytics).\n\nTo run third party scripts in a web worker (which avoids blocking the main thread), use [Partytown's SvelteKit integration](https://partytown.builder.io/sveltekit).\n\n### Selective loading\n\nCode imported with static `import` declarations will be automatically bundled with the rest of your page. If there is a piece of code you need only when some condition is met, use the dynamic `import(...)` form to selectively lazy-load the component.\n\n## Navigation\n\n### Preloading\n\nYou can speed up client-side navigations by eagerly preloading the necessary code and data, using [link options](link-options). This is configured by default on the `<body>` element when you create a new SvelteKit app.\n\n### Non-essential data\n\nFor slow-loading data that isn't needed immediately, the object returned from your `load` function can contain promises rather than the data itself. For server `load` functions, this will cause the data to [stream](load#Streaming-with-promises) in after the navigation (or initial page load).\n\n### Preventing waterfalls\n\nOne of the biggest performance killers is what is referred to as a _waterfall_, which is a series of requests that is made sequentially. This can happen on the server or in the browser, but is especially costly when dealing with data that has to travel further or across slower networks, such as a mobile user making a call to a distant server.\n\nIn the browser, waterfalls can occur when your HTML kicks off request chains such as requesting JS which requests CSS which requests a background image and web font. SvelteKit will largely solve this class of problems for you by adding [`modulepreload`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload) tags or headers, but you should view [the network tab in your devtools](#Diagnosing-issues) to check whether additional resources need to be preloaded.\n- Pay special attention to this if you use [web fonts](#Optimizing-assets-Fonts) since they need to be handled manually.\n- Enabling [single page app (SPA) mode](single-page-apps) will cause such waterfalls. With SPA mode, an empty page is generated, which fetches JavaScript, which ultimately loads and renders the page. This results in extra network round trips before a single pixel can be displayed.\n\nWaterfalls can also occur on calls to the backend whether made from the browser or server. E.g. if a universal `load` function makes an API call to fetch the current user, then uses the details from that response to fetch a list of saved items, and then uses _that_ response to fetch the details for each item, the browser will end up making multiple sequential requests. This is deadly for performance, especially for users that are physically located far from your backend.\n- Avoid this issue by using [server `load` functions](load#Universal-vs-server) to make requests to backend services that are dependencies from the server rather than from the browser. Note, however, that server `load` functions are also not immune to waterfalls (though they are much less costly since they rarely involve round trips with high latency). For example, if you query a database to get the current user and then use that data to make a second query for a list of saved items, it will typically be more performant to issue a single query with a database join.\n\n## Hosting\n\nYour frontend should be located in the same data center as your backend to minimize latency. For sites with no central backend, many SvelteKit adapters support deploying to the _edge_, which means handling each user's requests from a nearby server. This can reduce load times significantly. Some adapters even support [configuring deployment on a per-route basis](page-options#config). You should also consider serving images from a CDN (which are typically edge networks) — the hosts for many SvelteKit adapters will do this automatically.\n\nEnsure your host uses HTTP/2 or newer. Vite's code splitting creates numerous small files for improved cacheability, which results in excellent performance, but this does assume that your files can be loaded in parallel with HTTP/2.\n\n## Further reading\n\nFor the most part, building a performant SvelteKit app is the same as building any performant web app. You should be able to apply information from general performance resources such as [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals) to any web experience you build.",
+		"kit/icons": "## CSS\n\nA great way to use icons is to define them purely via CSS. Iconify offers support for [many popular icon sets](https://icon-sets.iconify.design/) that [can be included via CSS](https://iconify.design/docs/usage/css/). This method can also be used with popular CSS frameworks by leveraging the Iconify [Tailwind CSS plugin](https://iconify.design/docs/usage/css/tailwind/) or [UnoCSS plugin](https://iconify.design/docs/usage/css/unocss/). As opposed to libraries based on Svelte components, it doesn't require each icon to be imported into your `.svelte` file.\n\n## Svelte\n\nThere are many [icon libraries for Svelte](/packages#icons). When choosing an icon library, it is recommended to avoid those that provide a `.svelte` file per icon as these libraries can have thousands of `.svelte` files which really slow down [Vite's dependency optimization](https://vite.dev/guide/dep-pre-bundling.html). This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).",
+		"kit/images": "Images can have a big impact on your app's performance. For best results, you should optimize them by doing the following:\n\n- generate optimal formats like `.avif` and `.webp`\n- create different sizes for different screens\n- ensure that assets can be cached effectively\n\nDoing this manually is tedious. There are a variety of techniques you can use, depending on your needs and preferences.\n\n## Vite's built-in handling\n\n[Vite will automatically process imported assets](https://vitejs.dev/guide/assets.html) for improved performance. This includes assets referenced via the CSS `url()` function. Hashes will be added to the filenames so that they can be cached, and assets smaller than `assetsInlineLimit` will be inlined. Vite's asset handling is most often used for images, but is also useful for video, audio, etc.\n\n```svelte\n<script>\n\timport logo from '$lib/assets/logo.png';\n</script>\n\n<img alt=\"The project logo\" src={logo} />\n```\n\n## @sveltejs/enhanced-img\n\n`@sveltejs/enhanced-img` is a plugin offered on top of Vite's built-in asset handling. It provides plug and play image processing that serves smaller file formats like `avif` or `webp`, automatically sets the intrinsic `width` and `height` of the image to avoid layout shift, creates images of multiple sizes for various devices, and strips EXIF data for privacy. It will work in any Vite-based project including, but not limited to, SvelteKit projects.\n\n> [!NOTE] As a build plugin, `@sveltejs/enhanced-img` can only optimize files located on your machine during the build process. If you have an image located elsewhere (such as a path served from your database, CMS, or backend), please read about [loading images dynamically from a CDN](#Loading-images-dynamically-from-a-CDN).\n\n### Setup\n\nInstall:\n\n```sh\nnpm i -D @sveltejs/enhanced-img\n```\n\nAdjust `vite.config.js`:\n\n```js\nimport { sveltekit } from '@sveltejs/kit/vite';\n+++import { enhancedImages } from '@sveltejs/enhanced-img';+++\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n\tplugins: [\n\t\t+++enhancedImages(), // must come before the SvelteKit plugin+++\n\t\tsveltekit()\n\t]\n});\n```\n\nBuilding will take longer on the first build due to the computational expense of transforming images. However, the build output will be cached in `./node_modules/.cache/imagetools` so that subsequent builds will be fast.\n\n### Basic usage\n\nUse in your `.svelte` components by using `<enhanced:img>` rather than `<img>` and referencing the image file with a [Vite asset import](https://vitejs.dev/guide/assets.html#static-asset-handling) path:\n\n```svelte\n<enhanced:img src=\"./path/to/your/image.jpg\" alt=\"An alt text\" />\n```\n\nAt build time, your `<enhanced:img>` tag will be replaced with an `<img>` wrapped by a `<picture>` providing multiple image types and sizes. It's only possible to downscale images without losing quality, which means that you should provide the highest resolution image that you need — smaller versions will be generated for the various device types that may request an image.\n\nYou should provide your image at 2x resolution for HiDPI displays (a.k.a. retina displays). `<enhanced:img>` will automatically take care of serving smaller versions to smaller devices.\n\n> [!NOTE] if you wish to use a [tag name CSS selector](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#type_selectors) in your `<style>` block you will need to write `enhanced\\:img` to escape the colon in the tag name.\n\n### Dynamically choosing an image\n\nYou can also manually import an image asset and pass it to an `<enhanced:img>`. This is useful when you have a collection of static images and would like to dynamically choose one or [iterate over them](https://github.com/sveltejs/kit/blob/0ab1733e394b6310895a1d3bf0f126ce34531170/sites/kit.svelte.dev/src/routes/home/Showcase.svelte). In this case you will need to update both the `import` statement and `<img>` element as shown below to indicate you'd like process them.\n\n```svelte\n<script>\n\timport MyImage from './path/to/your/image.jpg?enhanced';\n</script>\n\n<enhanced:img src={MyImage} alt=\"some alt text\" />\n```\n\nYou can also use [Vite's `import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import). Note that you will have to specify `enhanced` via a [custom query](https://vitejs.dev/guide/features.html#custom-queries):\n\n```svelte\n<script>\n\tconst imageModules = import.meta.glob(\n\t\t'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp,svg}',\n\t\t{\n\t\t\teager: true,\n\t\t\tquery: {\n\t\t\t\tenhanced: true\n\t\t\t}\n\t\t}\n\t)\n</script>\n\n{#each Object.entries(imageModules) as [_path, module]}\n\t<enhanced:img src={module.default} alt=\"some alt text\" />\n{/each}\n```\n\n### Intrinsic Dimensions\n\n`width` and `height` are optional as they can be inferred from the source image and will be automatically added when the `<enhanced:img>` tag is preprocessed. With these attributes, the browser can reserve the correct amount of space, preventing [layout shift](https://web.dev/articles/cls). If you'd like to use a different `width` and `height` you can style the image with CSS. Because the preprocessor adds a `width` and `height` for you, if you'd like one of the dimensions to be automatically calculated then you will need to specify that:\n\n```svelte\n<style>\n\t.hero-image img {\n\t\twidth: var(--size);\n\t\theight: auto;\n\t}\n</style>\n```\n\n### `srcset` and `sizes`\n\nIf you have a large image, such as a hero image taking the width of the design, you should specify `sizes` so that smaller versions are requested on smaller devices. E.g. if you have a 1280px image you may want to specify something like:\n\n```svelte\n<enhanced:img src=\"./image.png\" sizes=\"min(1280px, 100vw)\"/>\n```\n\nIf `sizes` is specified, `<enhanced:img>` will generate small images for smaller devices and populate the `srcset` attribute.\n\nThe smallest picture generated automatically will have a width of 540px. If you'd like smaller images or would otherwise like to specify custom widths, you can do that with the `w` query parameter:\n```svelte\n<enhanced:img\n  src=\"./image.png?w=1280;640;400\"\n  sizes=\"(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px\"\n/>\n```\n\nIf `sizes` is not provided, then a HiDPI/Retina image and a standard resolution image will be generated. The image you provide should be 2x the resolution you wish to display so that the browser can display that image on devices with a high [device pixel ratio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio).\n\n### Per-image transforms\n\nBy default, enhanced images will be transformed to more efficient formats. However, you may wish to apply other transforms such as a blur, quality, flatten, or rotate operation. You can run per-image transforms by appending a query string:\n\n```svelte\n<enhanced:img src=\"./path/to/your/image.jpg?blur=15\" alt=\"An alt text\" />\n```\n\n[See the imagetools repo for the full list of directives](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md).\n\n## Loading images dynamically from a CDN\n\nIn some cases, the images may not be accessible at build time — e.g. they may live inside a content management system or elsewhere.\n\nUsing a content delivery network (CDN) can allow you to optimize these images dynamically, and provides more flexibility with regards to sizes, but it may involve some setup overhead and usage costs. Depending on caching strategy, the browser may not be able to use a cached copy of the asset until a [304 response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304) is received from the CDN. Building HTML to target CDNs allows using an `<img>` tag since the CDN can serve the appropriate format based on the `User-Agent` header, whereas build-time optimizations must produce `<picture>` tags with multiple sources. Finally, some CDNs may generate images lazily, which could have a negative performance impact for sites with low traffic and frequently changing images.\n\nCDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.\n\n## Best practices\n\n- For each image type, use the appropriate solution from those discussed above. You can mix and match all three solutions in one project. For example, you may use Vite's built-in handling to provide images for `<meta>` tags, display images on your homepage with `@sveltejs/enhanced-img`, and display user-submitted content with a dynamic approach.\n- Consider serving all images via CDN regardless of the image optimization types you use. CDNs reduce latency by distributing copies of static assets globally.\n- Your original images should have a good quality/resolution and should have 2x the width it will be displayed at to serve HiDPI devices. Image processing can size images down to save bandwidth when serving smaller screens, but it would be a waste of bandwidth to invent pixels to size images up.\n- For images which are much larger than the width of a mobile device (roughly 400px), such as a hero image taking the width of the page design, specify `sizes` so that smaller images can be served on smaller devices.\n- For important images, such as the [largest contentful paint (LCP)](https://web.dev/articles/lcp) image, set `fetchpriority=\"high\"` and avoid `loading=\"lazy\"` to prioritize loading as early as possible.\n- Give the image a container or styling so that it is constrained and does not jump around while the page is loading affecting your [cumulative layout shift (CLS)](https://web.dev/articles/cls). `width` and `height` help the browser to reserve space while the image is still loading, so `@sveltejs/enhanced-img` will add a `width` and `height` for you.\n- Always provide a good `alt` text. The Svelte compiler will warn you if you don't do this.\n- Do not use `em` or `rem` in `sizes` and change the default size of these measures. When used in `sizes` or `@media` queries, `em` and `rem` are both defined to mean the user's default `font-size`. For a `sizes` declaration like `sizes=\"(min-width: 768px) min(100vw, 108rem), 64rem\"`, the actual `em` or `rem` that controls how the image is laid out on the page can be different if changed by CSS. For example, do not do something like `html { font-size: 62.5%; }` as the slot reserved by the browser preloader will now end up being larger than the actual slot of the CSS object model once it has been created.",
+		"kit/accessibility": "SvelteKit strives to provide an accessible platform for your app by default. Svelte's [compile-time accessibility checks](../svelte/compiler-warnings) will also apply to any SvelteKit application you build.\n\nHere's how SvelteKit's built-in accessibility features work and what you need to do to help these features to work as well as possible. Keep in mind that while SvelteKit provides an accessible foundation, you are still responsible for making sure your application code is accessible. If you're new to accessibility, see the [\"further reading\"](accessibility#Further-reading) section of this guide for additional resources.\n\nWe recognize that accessibility can be hard to get right. If you want to suggest improvements to how SvelteKit handles accessibility, please [open a GitHub issue](https://github.com/sveltejs/kit/issues).\n\n## Route announcements\n\nIn traditional server-rendered applications, every navigation (e.g. clicking on an `<a>` tag) triggers a full page reload. When this happens, screen readers and other assistive technology will read out the new page's title so that users understand that the page has changed.\n\nSince navigation between pages in SvelteKit happens without reloading the page (known as [client-side routing](glossary#Routing)), SvelteKit injects a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) onto the page that will read out the new page name after each navigation. This determines the page name to announce by inspecting the `<title>` element.\n\nBecause of this behavior, every page in your app should have a unique, descriptive title. In SvelteKit, you can do this by placing a `<svelte:head>` element on each page:\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<svelte:head>\n\t<title>Todo List</title>\n</svelte:head>\n```\n\nThis will allow screen readers and other assistive technology to identify the new page after a navigation occurs. Providing a descriptive title is also important for [SEO](seo#Manual-setup-title-and-meta).\n\n## Focus management\n\nIn traditional server-rendered applications, every navigation will reset focus to the top of the page. This ensures that people browsing the web with a keyboard or screen reader will start interacting with the page from the beginning.\n\nTo simulate this behavior during client-side routing, SvelteKit focuses the `<body>` element after each navigation and [enhanced form submission](form-actions#Progressive-enhancement). There is one exception - if an element with the [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) attribute is present, SvelteKit will focus that element instead. Make sure to [consider the implications for assistive technology](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations) when using that attribute.\n\nIf you want to customize SvelteKit's focus management, you can use the `afterNavigate` hook:\n\n```js\n/// <reference types=\"@sveltejs/kit\" />\n// ---cut---\nimport { afterNavigate } from '$app/navigation';\n\nafterNavigate(() => {\n\t/** @type {HTMLElement | null} */\n\tconst to_focus = document.querySelector('.focus-me');\n\tto_focus?.focus();\n});\n```\n\nYou can also programmatically navigate to a different page using the [`goto`]($app-navigation#goto) function. By default, this will have the same client-side routing behavior as clicking on a link. However, `goto` also accepts a `keepFocus` option that will preserve the currently-focused element instead of resetting focus. If you enable this option, make sure the currently-focused element still exists on the page after navigation. If the element no longer exists, the user's focus will be lost, making for a confusing experience for assistive technology users.\n\n## The \"lang\" attribute\n\nBy default, SvelteKit's page template sets the default language of the document to English. If your content is not in English, you should update the `<html>` element in `src/app.html` to have the correct [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#accessibility) attribute. This will ensure that any assistive technology reading the document uses the correct pronunciation. For example, if your content is in German, you should update `app.html` to the following:\n\n```html\n/// file: src/app.html\n<html lang=\"de\">\n```\n\nIf your content is available in multiple languages, you should set the `lang` attribute based on the language of the current page. You can do this with SvelteKit's [handle hook](hooks#Server-hooks-handle):\n\n```html\n/// file: src/app.html\n<html lang=\"%lang%\">\n```\n\n```js\n/// file: src/hooks.server.js\n/**\n * @param {import('@sveltejs/kit').RequestEvent} event\n */\nfunction get_lang(event) {\n\treturn 'en';\n}\n// ---cut---\n/** @type {import('@sveltejs/kit').Handle} */\nexport function handle({ event, resolve }) {\n\treturn resolve(event, {\n\t\ttransformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event))\n\t});\n}\n```\n\n## Further reading\n\nFor the most part, building an accessible SvelteKit app is the same as building an accessible web app. You should be able to apply information from the following general accessibility resources to any web experience you build:\n\n- [MDN Web Docs: Accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility)\n- [The A11y Project](https://www.a11yproject.com/)\n- [How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)",
+		"kit/seo": "The most important aspect of SEO is to create high-quality content that is widely linked to from around the web. However, there are a few technical considerations for building sites that rank well.\n\n## Out of the box\n\n### SSR\n\nWhile search engines have got better in recent years at indexing content that was rendered with client-side JavaScript, server-side rendered content is indexed more frequently and reliably. SvelteKit employs SSR by default, and while you can disable it in [`handle`](hooks#Server-hooks-handle), you should leave it on unless you have a good reason not to.\n\n> [!NOTE] SvelteKit's rendering is highly configurable and you can implement [dynamic rendering](https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering) if necessary. It's not generally recommended, since SSR has other benefits beyond SEO.\n\n### Performance\n\nSignals such as [Core Web Vitals](https://web.dev/vitals/#core-web-vitals) impact search engine ranking. Because Svelte and SvelteKit introduce minimal overhead, they make it easier to build high performance sites. You can test your site's performance using Google's [PageSpeed Insights](https://pagespeed.web.dev/) or [Lighthouse](https://developers.google.com/web/tools/lighthouse). With just a few key actions like using SvelteKit's default [hybrid rendering](glossary#Hybrid-app) mode and [optimizing your images](images), you can greatly improve your site's speed. Read [the performance page](performance) for more details.\n\n### Normalized URLs\n\nSvelteKit redirects pathnames with trailing slashes to ones without (or vice versa depending on your [configuration](page-options#trailingSlash)), as duplicate URLs are bad for SEO.\n\n## Manual setup\n\n### &lt;title&gt; and &lt;meta&gt;\n\nEvery page should have well-written and unique `<title>` and `<meta name=\"description\">` elements inside a [`<svelte:head>`](../svelte/svelte-head). Guidance on how to write descriptive titles and descriptions, along with other suggestions on making content understandable by search engines, can be found on Google's [Lighthouse SEO audits](https://web.dev/lighthouse-seo/) documentation.\n\n> [!NOTE] A common pattern is to return SEO-related `data` from page [`load`](load) functions, then use it (as [`page.data`]($app-state)) in a `<svelte:head>` in your root [layout](routing#layout).\n\n### Sitemaps\n\n[Sitemaps](https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap) help search engines prioritize pages within your site, particularly when you have a large amount of content. You can create a sitemap dynamically using an endpoint:\n\n```js\n/// file: src/routes/sitemap.xml/+server.js\nexport async function GET() {\n\treturn new Response(\n\t\t`\n\t\t<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n\t\t<urlset\n\t\t\txmlns=\"https://www.sitemaps.org/schemas/sitemap/0.9\"\n\t\t\txmlns:xhtml=\"https://www.w3.org/1999/xhtml\"\n\t\t\txmlns:mobile=\"https://www.google.com/schemas/sitemap-mobile/1.0\"\n\t\t\txmlns:news=\"https://www.google.com/schemas/sitemap-news/0.9\"\n\t\t\txmlns:image=\"https://www.google.com/schemas/sitemap-image/1.1\"\n\t\t\txmlns:video=\"https://www.google.com/schemas/sitemap-video/1.1\"\n\t\t>\n\t\t\t<!-- <url> elements go here -->\n\t\t</urlset>`.trim(),\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Content-Type': 'application/xml'\n\t\t\t}\n\t\t}\n\t);\n}\n```\n\n### AMP\n\nAn unfortunate reality of modern web development is that it is sometimes necessary to create an [Accelerated Mobile Pages (AMP)](https://amp.dev/) version of your site. In SvelteKit this can be done by setting the [`inlineStyleThreshold`](configuration#inlineStyleThreshold) option...\n\n```js\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\t// since <link rel=\"stylesheet\"> isn't\n\t\t// allowed, inline all styles\n\t\tinlineStyleThreshold: Infinity\n\t}\n};\n\nexport default config;\n```\n\n...disabling `csr` in your root `+layout.js`/`+layout.server.js`...\n\n```js\n/// file: src/routes/+layout.server.js\nexport const csr = false;\n```\n\n...adding `amp` to your `app.html`\n\n```html\n<html amp>\n...\n```\n\n...and transforming the HTML using `transformPageChunk` along with `transform` imported from `@sveltejs/amp`:\n\n```js\n/// file: src/hooks.server.js\nimport * as amp from '@sveltejs/amp';\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tlet buffer = '';\n\treturn await resolve(event, {\n\t\ttransformPageChunk: ({ html, done }) => {\n\t\t\tbuffer += html;\n\t\t\tif (done) return amp.transform(buffer);\n\t\t}\n\t});\n}\n```\n\nTo prevent shipping any unused CSS as a result of transforming the page to amp, we can use [`dropcss`](https://www.npmjs.com/package/dropcss):\n\n```js\n// @filename: ambient.d.ts\ndeclare module 'dropcss';\n\n// @filename: index.js\n// ---cut---\n/// file: src/hooks.server.js\n// @errors: 2307\nimport * as amp from '@sveltejs/amp';\nimport dropcss from 'dropcss';\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tlet buffer = '';\n\n\treturn await resolve(event, {\n\t\ttransformPageChunk: ({ html, done }) => {\n\t\t\tbuffer += html;\n\n\t\t\tif (done) {\n\t\t\t\tlet css = '';\n\t\t\t\tconst markup = amp\n\t\t\t\t\t.transform(buffer)\n\t\t\t\t\t.replace('⚡', 'amp') // dropcss can't handle this character\n\t\t\t\t\t.replace(/<style amp-custom([^>]*?)>([^]+?)<\\/style>/, (match, attributes, contents) => {\n\t\t\t\t\t\tcss = contents;\n\t\t\t\t\t\treturn `<style amp-custom${attributes}></style>`;\n\t\t\t\t\t});\n\n\t\t\t\tcss = dropcss({ css, html: markup }).css;\n\t\t\t\treturn markup.replace('</style>', `${css}</style>`);\n\t\t\t}\n\t\t}\n\t});\n}\n\n```\n\n> [!NOTE] It's a good idea to use the `handle` hook to validate the transformed HTML using `amphtml-validator`, but only if you're prerendering pages since it's very slow.",
+		"kit/faq": "## Other resources\n\nPlease see [the Svelte FAQ](../svelte/faq) and [`vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md) as well for the answers to questions deriving from those libraries.\n\n## What can I make with SvelteKit?\n\nSee [the documentation regarding project types](project-types) for more details.\n\n## How do I include details from package.json in my application?\n\nIf you'd like to include your application's version number or other information from `package.json` in your application, you can load JSON like so:\n\n```ts\n// @errors: 2732\n/// file: svelte.config.js\nimport pkg from './package.json' with { type: 'json' };\n```\n\n## How do I fix the error I'm getting trying to include a package?\n\nMost issues related to including a library are due to incorrect packaging. You can check if a library's packaging is compatible with Node.js by entering it into [the publint website](https://publint.dev/).\n\nHere are a few things to keep in mind when checking if a library is packaged correctly:\n\n- `exports` takes precedence over the other entry point fields such as `main` and `module`. Adding an `exports` field may not be backwards-compatible as it prevents deep imports.\n- ESM files should end with `.mjs` unless `\"type\": \"module\"` is set in which any case CommonJS files should end with `.cjs`.\n- `main` should be defined if `exports` is not. It should be either a CommonJS or ESM file and adhere to the previous bullet. If a `module` field is defined, it should refer to an ESM file.\n- Svelte components should be distributed as uncompiled `.svelte` files with any JS in the package written as ESM only. Custom script and style languages, like TypeScript and SCSS, should be preprocessed as vanilla JS and CSS respectively. We recommend using [`svelte-package`](./packaging) for packaging Svelte libraries, which will do this for you.\n\nLibraries work best in the browser with Vite when they distribute an ESM version, especially if they are dependencies of a Svelte component library. You may wish to suggest to library authors that they provide an ESM version. However, CommonJS (CJS) dependencies should work as well since, by default, [`vite-plugin-svelte` will ask Vite to pre-bundle them](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies) using `esbuild` to convert them to ESM.\n\nIf you are still encountering issues we recommend searching both [the Vite issue tracker](https://github.com/vitejs/vite/issues) and the issue tracker of the library in question. Sometimes issues can be worked around by fiddling with the [`optimizeDeps`](https://vitejs.dev/config/#dep-optimization-options) or [`ssr`](https://vitejs.dev/config/#ssr-options) config values though we recommend this as only a short-term workaround in favor of fixing the library in question.\n\n## How do I use the view transitions API?\n\nWhile SvelteKit does not have any specific integration with [view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/), you can call `document.startViewTransition` in [`onNavigate`]($app-navigation#onNavigate) to trigger a view transition on every client-side navigation.\n\n```js\n// @errors: 2339 2810\nimport { onNavigate } from '$app/navigation';\n\nonNavigate((navigation) => {\n\tif (!document.startViewTransition) return;\n\n\treturn new Promise((resolve) => {\n\t\tdocument.startViewTransition(async () => {\n\t\t\tresolve();\n\t\t\tawait navigation.complete;\n\t\t});\n\t});\n});\n```\n\nFor more, see [\"Unlocking view transitions\"](/blog/view-transitions) on the Svelte blog.\n\n## How do I set up a database?\n\nPut the code to query your database in a [server route](./routing#server) - don't query the database in .svelte files. You can create a `db.js` or similar that sets up a connection immediately and makes the client accessible throughout the app as a singleton. You can execute any one-time setup code in `hooks.server.js` and import your database helpers into any endpoint that needs them.\n\nYou can use [the Svelte CLI](/docs/cli/overview) to automatically set up database integrations.\n\n## How do I use a client-side library accessing `document` or `window`?\n\nIf you need access to the `document` or `window` variables or otherwise need code to run only on the client-side you can wrap it in a `browser` check:\n\n```js\n/// <reference types=\"@sveltejs/kit\" />\n// ---cut---\nimport { browser } from '$app/environment';\n\nif (browser) {\n\t// client-only code here\n}\n```\n\nYou can also run code in `onMount` if you'd like to run it after the component has been first rendered to the DOM:\n\n```js\n// @filename: ambient.d.ts\n// @lib: ES2015\ndeclare module 'some-browser-only-library';\n\n// @filename: index.js\n// ---cut---\nimport { onMount } from 'svelte';\n\nonMount(async () => {\n\tconst { method } = await import('some-browser-only-library');\n\tmethod('hello world');\n});\n```\n\nIf the library you'd like to use is side-effect free you can also statically import it and it will be tree-shaken out in the server-side build where `onMount` will be automatically replaced with a no-op:\n\n```js\n// @filename: ambient.d.ts\n// @lib: ES2015\ndeclare module 'some-browser-only-library';\n\n// @filename: index.js\n// ---cut---\nimport { onMount } from 'svelte';\nimport { method } from 'some-browser-only-library';\n\nonMount(() => {\n\tmethod('hello world');\n});\n```\n\nFinally, you may also consider using an `{#await}` block:\n```svelte\n<!--- file: index.svelte --->\n<script>\n\timport { browser } from '$app/environment';\n\n\tconst ComponentConstructor = browser ?\n\t\timport('some-browser-only-library').then((module) => module.Component) :\n\t\tnew Promise(() => {});\n</script>\n\n{#await ComponentConstructor}\n\t<p>Loading...</p>\n{:then component}\n\t<svelte:component this={component} />\n{:catch error}\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\n## How do I use a different backend API server?\n\nYou can use [`event.fetch`](./load#Making-fetch-requests) to request data from an external API server, but be aware that you would need to deal with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), which will result in complications such as generally requiring requests to be preflighted resulting in higher latency. Requests to a separate subdomain may also increase latency due to an additional DNS lookup, TLS setup, etc. If you wish to use this method, you may find [`handleFetch`](./hooks#Server-hooks-handleFetch) helpful.\n\nAnother approach is to set up a proxy to bypass CORS headaches. In production, you would rewrite a path like `/api` to the API server; for local development, use Vite's [`server.proxy`](https://vitejs.dev/config/server-options.html#server-proxy) option.\n\nHow to setup rewrites in production will depend on your deployment platform. If rewrites aren't an option, you could alternatively add an [API route](./routing#server):\n\n```js\n/// file: src/routes/api/[...path]/+server.js\n/** @type {import('./$types').RequestHandler} */\nexport function GET({ params, url }) {\n\treturn fetch(`https://example.com/${params.path + url.search}`);\n}\n```\n\n(Note that you may also need to proxy `POST`/`PATCH` etc requests, and forward `request.headers`, depending on your needs.)\n\n## How do I use middleware?\n\n`adapter-node` builds a middleware that you can use with your own server for production mode. In dev, you can add middleware to Vite by using a Vite plugin. For example:\n\n```js\n// @errors: 2322\n// @filename: ambient.d.ts\ndeclare module '@sveltejs/kit/vite'; // TODO this feels unnecessary, why can't it 'see' the declarations?\n\n// @filename: index.js\n// ---cut---\nimport { sveltekit } from '@sveltejs/kit/vite';\n\n/** @type {import('vite').Plugin} */\nconst myPlugin = {\n\tname: 'log-request-middleware',\n\tconfigureServer(server) {\n\t\tserver.middlewares.use((req, res, next) => {\n\t\t\tconsole.log(`Got request ${req.url}`);\n\t\t\tnext();\n\t\t});\n\t}\n};\n\n/** @type {import('vite').UserConfig} */\nconst config = {\n\tplugins: [myPlugin, sveltekit()]\n};\n\nexport default config;\n```\n\nSee [Vite's `configureServer` docs](https://vitejs.dev/guide/api-plugin.html#configureserver) for more details including how to control ordering.\n\n## How do I use Yarn?\n\n### Does it work with Yarn 2?\n\nSort of. The Plug'n'Play feature, aka 'pnp', is broken (it deviates from the Node module resolution algorithm, and [doesn't yet work with native JavaScript modules](https://github.com/yarnpkg/berry/issues/638) which SvelteKit — along with an [increasing number of packages](https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77) — uses). You can use `nodeLinker: 'node-modules'` in your [`.yarnrc.yml`](https://yarnpkg.com/configuration/yarnrc#nodeLinker) file to disable pnp, but it's probably easier to just use npm or [pnpm](https://pnpm.io/), which is similarly fast and efficient but without the compatibility headaches.\n\n### How do I use with Yarn 3?\n\nCurrently ESM Support within the latest Yarn (version 3) is considered [experimental](https://github.com/yarnpkg/berry/pull/2161).\n\nThe below seems to work although your results may vary. First create a new application:\n\n```sh\nyarn create svelte myapp\ncd myapp\n```\n\nAnd enable Yarn Berry:\n\n```sh\nyarn set version berry\nyarn install\n```\n\nOne of the more interesting features of Yarn Berry is the ability to have a single global cache for packages, instead of having multiple copies for each project on the disk. However, setting `enableGlobalCache` to true causes building to fail, so it is recommended to add the following to the `.yarnrc.yml` file:\n\n```yaml\nnodeLinker: node-modules\n```\n\nThis will cause packages to be downloaded into a local node_modules directory but avoids the above problem and is your best bet for using version 3 of Yarn at this point in time.",
+		"kit/integrations": "## `vitePreprocess`\n\nIncluding [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) in your project will allow you to use the various flavors of CSS that Vite supports: PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:\n\n```js\n// svelte.config.js\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n  preprocess: [vitePreprocess()]\n};\n\nexport default config;\n```\n\nYou will also need to use a preprocessor if you're using TypeScript with Svelte 4. TypeScript is supported natively in Svelte 5 if you're using only the type syntax. To use more complex TypeScript syntax in Svelte 5, you will need still need a preprocessor and can use `vitePreprocess({ script: true })`.\n\n## Add-ons\n\nRun [`npx sv add`](/docs/cli/sv-add) to setup many different complex integrations with a single command including:\n- prettier (formatting)\n- eslint (linting)\n- vitest (unit testing)\n- playwright (e2e testing)\n- lucia (auth)\n- tailwind (CSS)\n- drizzle (DB)\n- paraglide (i18n)\n- mdsvex (markdown)\n- storybook (frontend workshop)\n\n## Packages\n\nCheck out [the packages page](/packages) for a curated set of high quality Svelte packages. You can also see [sveltesociety.dev](https://sveltesociety.dev/) for additional libraries, templates, and resources.\n\n## Additional integrations\n\n### `svelte-preprocess`\n\n`svelte-preprocess` has some additional functionality not found in `vitePreprocess` such as support for Pug, Babel, and global styles. However, `vitePreprocess` may be faster and require less configuration, so it is used by default. Note that CoffeeScript is [not supported](https://github.com/sveltejs/kit/issues/2920#issuecomment-996469815) by SvelteKit.\n\nYou will need to install `svelte-preprocess` with `npm i -D svelte-preprocess` and [add it to your `svelte.config.js`](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md#with-svelte-config). After that, you will often need to [install the corresponding library](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md) such as `npm i -D sass` or `npm i -D less`.\n\n## Vite plugins\n\nSince SvelteKit projects are built with Vite, you can use Vite plugins to enhance your project. See a list of available plugins at [`vitejs/awesome-vite`](https://github.com/vitejs/awesome-vite?tab=readme-ov-file#plugins).\n\n## Integration FAQs\n\n[The SvelteKit FAQ](./faq) answers many questions about how to do X with SvelteKit, which may be helpful if you still have questions.",
+		"kit/debugging": "In addition to the [`@debug`](../svelte/@debug) tag, you can also debug Svelte and SvelteKit projects using breakpoints within various tools and development environments. This includes both frontend and backend code.\n\nThe following guides assume your JavaScript runtime environment is Node.js.\n\n## Visual Studio Code\n\nWith the built-in debug terminal, you can set up breakpoints in source files within VSCode.\n\n1. Open the command palette: `CMD/Ctrl` + `Shift` + `P`.\n2. Find and launch \"Debug: JavaScript Debug Terminal\".\n3. Start your project using the debug terminal. For example: `npm run dev`.\n4. Set some breakpoints in your client or server-side source code.\n5. Trigger the breakpoint.\n\n### Launch via debug pane\n\nYou may alternatively set up a `.vscode/launch.json` in your project. To set one up automatically:\n\n1. Go to the \"Run and Debug\" pane.\n2. In the \"Run\" select menu, choose \"Node.js...\".\n3. Select the \"run script\" that corresponds to your project, such as \"Run script: dev\".\n4. Press the \"Start debugging\" play button, or hit `F5` to begin breakpoint debugging.\n\nHere's an example `launch.json`:\n\n```json\n{\n\t\"version\": \"0.2.0\",\n\t\"configurations\": [\n\t\t{\n\t\t\t\"command\": \"npm run dev\",\n\t\t\t\"name\": \"Run development server\",\n\t\t\t\"request\": \"launch\",\n\t\t\t\"type\": \"node-terminal\"\n\t\t}\n\t]\n}\n```\n\nFurther reading: <https://code.visualstudio.com/docs/editor/debugging>.\n\n## Other Editors\n\nIf you use a different editor, these community guides might be useful for you:\n\n- [WebStorm Svelte: Debug Your Application](https://www.jetbrains.com/help/webstorm/svelte.html#ws_svelte_debug)\n- [Debugging JavaScript Frameworks in Neovim](https://theosteiner.de/debugging-javascript-frameworks-in-neovim)\n\n## Google Chrome and Microsoft Edge Developer Tools\n\nIt's possible to debug Node.js applications using a browser-based debugger.\n\n> [!NOTE] Note this only works with debugging client-side SvelteKit source maps.\n\n1. Run the `--inspect` flag when starting the Vite server with Node.js. For instance: `NODE_OPTIONS=\"--inspect\" npm run dev`\n2. Open your site in a new tab. Typically at `localhost:5173`.\n3. Open your browser's dev tools, and click on the \"Open dedicated DevTools for Node.js\" icon near the top-left. It should display the Node.js logo.\n4. Set up breakpoints and debug your application.\n\nYou may alternatively open the debugger devtools by navigating to `chrome://inspect` in Google Chrome, or `edge://inspect` in Microsoft Edge.\n\n## References\n\n- [Debugging Node.js](https://nodejs.org/en/learn/getting-started/debugging)",
+		"kit/migrating-to-sveltekit-2": "Upgrading from SvelteKit version 1 to version 2 should be mostly seamless. There are a few breaking changes to note, which are listed here. You can use `npx sv migrate sveltekit-2` to migrate some of these changes automatically.\n\nWe highly recommend upgrading to the most recent 1.x version before upgrading to 2.0, so that you can take advantage of targeted deprecation warnings. We also recommend [updating to Svelte 4](../svelte/v4-migration-guide) first: Later versions of SvelteKit 1.x support it, and SvelteKit 2.0 requires it.\n\n## `redirect` and `error` are no longer thrown by you\n\nPreviously, you had to `throw` the values returned from `error(...)` and `redirect(...)` yourself. In SvelteKit 2 this is no longer the case — calling the functions is sufficient.\n\n```js\nimport { error } from '@sveltejs/kit'\n\n// ...\n---throw error(500, 'something went wrong');---\n+++error(500, 'something went wrong');+++\n```\n\n`svelte-migrate` will do these changes automatically for you.\n\nIf the error or redirect is thrown inside a `try {...}` block (hint: don't do this!), you can distinguish them from unexpected errors using [`isHttpError`](@sveltejs-kit#isHttpError) and [`isRedirect`](@sveltejs-kit#isRedirect) imported from `@sveltejs/kit`.\n\n## path is required when setting cookies\n\nWhen receiving a `Set-Cookie` header that doesn't specify a `path`, browsers will [set the cookie path](https://www.rfc-editor.org/rfc/rfc6265#section-5.1.4) to the parent of the resource in question. This behaviour isn't particularly helpful or intuitive, and frequently results in bugs because the developer expected the cookie to apply to the domain as a whole.\n\nAs of SvelteKit 2.0, you need to set a `path` when calling `cookies.set(...)`, `cookies.delete(...)` or `cookies.serialize(...)` so that there's no ambiguity. Most of the time, you probably want to use `path: '/'`, but you can set it to whatever you like, including relative paths — `''` means 'the current path', `'.'` means 'the current directory'.\n\n```js\n/** @type {import('./$types').PageServerLoad} */\nexport function load({ cookies }) {\n\tcookies.set(name, value, +++{ path: '/' }+++);\n\treturn { response }\n}\n```\n\n`svelte-migrate` will add comments highlighting the locations that need to be adjusted.\n\n## Top-level promises are no longer awaited\n\nIn SvelteKit version 1, if the top-level properties of the object returned from a `load` function were promises, they were automatically awaited. With the introduction of [streaming](/blog/streaming-snapshots-sveltekit) this behavior became a bit awkward as it forces you to nest your streamed data one level deep.\n\nAs of version 2, SvelteKit no longer differentiates between top-level and non-top-level promises. To get back the blocking behavior, use `await` (with `Promise.all` to prevent waterfalls, where appropriate):\n\n```js\n// @filename: ambient.d.ts\ndeclare const url: string;\n\n// @filename: index.js\n// ---cut---\n// If you have a single promise\n/** @type {import('./$types').PageServerLoad} */\nexport +++async+++ function load({ fetch }) {\n\tconst response = +++await+++ fetch(url).then(r => r.json());\n\treturn { response }\n}\n```\n\n```js\n// @filename: ambient.d.ts\ndeclare const url1: string;\ndeclare const url2: string;\n\n// @filename: index.js\n// ---cut---\n// If you have multiple promises\n/** @type {import('./$types').PageServerLoad} */\nexport +++async+++ function load({ fetch }) {\n---\tconst a = fetch(url1).then(r => r.json());---\n---\tconst b = fetch(url2).then(r => r.json());---\n+++\tconst [a, b] = await Promise.all([\n\t  fetch(url1).then(r => r.json()),\n\t  fetch(url2).then(r => r.json()),\n\t]);+++\n\treturn { a, b };\n}\n```\n\n## goto(...) changes\n\n`goto(...)` no longer accepts external URLs. To navigate to an external URL, use `window.location.href = url`. The `state` object now determines `$page.state` and must adhere to the `App.PageState` interface, if declared. See [shallow routing](shallow-routing) for more details.\n\n## paths are now relative by default\n\nIn SvelteKit 1, `%sveltekit.assets%` in your `app.html` was replaced with a relative path by default (i.e. `.` or `..` or `../..` etc, depending on the path being rendered) during server-side rendering unless the [`paths.relative`](configuration#paths) config option was explicitly set to `false`. The same was true for `base` and `assets` imported from `$app/paths`, but only if the `paths.relative` option was explicitly set to `true`.\n\nThis inconsistency is fixed in version 2. Paths are either always relative or always absolute, depending on the value of [`paths.relative`](configuration#paths). It defaults to `true` as this results in more portable apps: if the `base` is something other than the app expected (as is the case when viewed on the [Internet Archive](https://archive.org/), for example) or unknown at build time (as is the case when deploying to [IPFS](https://ipfs.tech/) and so on), fewer things are likely to break.\n\n## Server fetches are not trackable anymore\n\nPreviously it was possible to track URLs from `fetch`es on the server in order to rerun load functions. This poses a possible security risk (private URLs leaking), and for this reason it was behind the `dangerZone.trackServerFetches` setting, which is now removed.\n\n## `preloadCode` arguments must be prefixed with `base`\n\nSvelteKit exposes two functions, [`preloadCode`]($app-navigation#preloadCode) and [`preloadData`]($app-navigation#preloadData), for programmatically loading the code and data associated with a particular path. In version 1, there was a subtle inconsistency — the path passed to `preloadCode` did not need to be prefixed with the `base` path (if set), while the path passed to `preloadData` did.\n\nThis is fixed in SvelteKit 2 — in both cases, the path should be prefixed with `base` if it is set.\n\nAdditionally, `preloadCode` now takes a single argument rather than _n_ arguments.\n\n## `resolvePath` has been removed\n\nSvelteKit 1 included a function called `resolvePath` which allows you to resolve a route ID (like `/blog/[slug]`) and a set of parameters (like `{ slug: 'hello' }`) to a pathname. Unfortunately the return value didn't include the `base` path, limiting its usefulness in cases where `base` was set.\n\nFor this reason, SvelteKit 2 replaces `resolvePath` with a (slightly better named) function called `resolveRoute`, which is imported from `$app/paths` and which takes `base` into account.\n\n```js\n---import { resolvePath } from '@sveltejs/kit';\nimport { base } from '$app/paths';---\n+++import { resolveRoute } from '$app/paths';+++\n\n---const path = base + resolvePath('/blog/[slug]', { slug });---\n+++const path = resolveRoute('/blog/[slug]', { slug });+++\n```\n\n`svelte-migrate` will do the method replacement for you, though if you later prepend the result with `base`, you need to remove that yourself.\n\n## Improved error handling\n\nErrors are handled inconsistently in SvelteKit 1. Some errors trigger the `handleError` hook but there is no good way to discern their status (for example, the only way to tell a 404 from a 500 is by seeing if `event.route.id` is `null`), while others (such as 405 errors for `POST` requests to pages without actions) don't trigger `handleError` at all, but should. In the latter case, the resulting `$page.error` will deviate from the [`App.Error`](types#Error) type, if it is specified.\n\nSvelteKit 2 cleans this up by calling `handleError` hooks with two new properties: `status` and `message`. For errors thrown from your code (or library code called by your code) the status will be `500` and the message will be `Internal Error`. While `error.message` may contain sensitive information that should not be exposed to users, `message` is safe.\n\n## Dynamic environment variables cannot be used during prerendering\n\nThe `$env/dynamic/public` and `$env/dynamic/private` modules provide access to _run time_ environment variables, as opposed to the _build time_ environment variables exposed by `$env/static/public` and `$env/static/private`.\n\nDuring prerendering in SvelteKit 1, they are one and the same. This means that prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.\n\nBecause of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `/_app/env.js`) instead of reading them from the server-rendered HTML.\n\n## `form` and `data` have been removed from `use:enhance` callbacks\n\nIf you provide a callback to [`use:enhance`](form-actions#Progressive-enhancement-use:enhance), it will be called with an object containing various useful properties.\n\nIn SvelteKit 1, those properties included `form` and `data`. These were deprecated some time ago in favour of `formElement` and `formData`, and have been removed altogether in SvelteKit 2.\n\n## Forms containing file inputs must use `multipart/form-data`\n\nIf a form contains an `<input type=\"file\">` but does not have an `enctype=\"multipart/form-data\"` attribute, non-JS submissions will omit the file. SvelteKit 2 will throw an error if it encounters a form like this during a `use:enhance` submission to ensure that your forms work correctly when JavaScript is not present.\n\n## Generated `tsconfig.json` is more strict\n\nPreviously, the generated `tsconfig.json` was trying its best to still produce a somewhat valid config when your `tsconfig.json` included `paths` or `baseUrl`. In SvelteKit 2, the validation is more strict and will warn when you use either `paths` or `baseUrl` in your `tsconfig.json`. These settings are used to generate path aliases and you should use [the `alias` config](configuration#alias) option in your `svelte.config.js` instead, to also create a corresponding alias for the bundler.\n\n## `getRequest` no longer throws errors\n\nThe `@sveltejs/kit/node` module exports helper functions for use in Node environments, including `getRequest` which turns a Node [`ClientRequest`](https://nodejs.org/api/http.html#class-httpclientrequest) into a standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) object.\n\nIn SvelteKit 1, `getRequest` could throw if the `Content-Length` header exceeded the specified size limit. In SvelteKit 2, the error will not be thrown until later, when the request body (if any) is being read. This enables better diagnostics and simpler code.\n\n## `vitePreprocess` is no longer exported from `@sveltejs/kit/vite`\n\nSince `@sveltejs/vite-plugin-svelte` is now a peer dependency, SvelteKit 2 no longer re-exports `vitePreprocess`. You should import it directly from `@sveltejs/vite-plugin-svelte`.\n\n## Updated dependency requirements\n\nSvelteKit 2 requires Node `18.13` or higher, and the following minimum dependency versions:\n\n- `svelte@4`\n- `vite@5`\n- `typescript@5`\n- `@sveltejs/vite-plugin-svelte@3` (this is now required as a `peerDependency` of SvelteKit — previously it was directly depended upon)\n- `@sveltejs/adapter-cloudflare@3` (if you're using these adapters)\n- `@sveltejs/adapter-cloudflare-workers@2`\n- `@sveltejs/adapter-netlify@3`\n- `@sveltejs/adapter-node@2`\n- `@sveltejs/adapter-static@3`\n- `@sveltejs/adapter-vercel@4`\n\n`svelte-migrate` will update your `package.json` for you.\n\nAs part of the TypeScript upgrade, the generated `tsconfig.json` (the one your `tsconfig.json` extends from) now uses `\"moduleResolution\": \"bundler\"` (which is recommended by the TypeScript team, as it properly resolves types from packages with an `exports` map in package.json) and `verbatimModuleSyntax` (which replaces the existing `importsNotUsedAsValues ` and `preserveValueImports` flags — if you have those in your `tsconfig.json`, remove them. `svelte-migrate` will do this for you).\n\n## SvelteKit 2.12: $app/stores deprecated\n\nSvelteKit 2.12 introduced `$app/state` based on the [Svelte 5 runes API](/docs/svelte/what-are-runes). `$app/state` provides everything that `$app/stores` provides but with more flexibility as to where and how you use it. Most importantly, the `page` object is now fine-grained, e.g. updates to `page.state` will not invalidate `page.data` and vice-versa.\n\nAs a consequence, `$app/stores` is deprecated and subject to be removed in SvelteKit 3. We recommend [upgrading to Svelte 5](/docs/svelte/v5-migration-guide), if you haven't already, and then migrate away from `$app/stores`. Most of the replacements should be pretty simple: Replace the `$app/stores` import with `$app/state` and remove the `$` prefixes from the usage sites.\n\n```svelte\n<script>\n\t---import { page } from '$app/stores';---\n\t+++import { page } from '$app/state';+++\n</script>\n\n---{$page.data}---\n+++{page.data}+++\n```\n\nUse `npx sv migrate app-state` to auto-migrate most of your `$app/stores` usages inside `.svelte` components.",
+		"kit/migrating": "SvelteKit is the successor to Sapper and shares many elements of its design.\n\nIf you have an existing Sapper app that you plan to migrate to SvelteKit, there are a number of changes you will need to make. You may find it helpful to view [some examples](additional-resources#Examples) while migrating.\n\n## package.json\n\n### type: \"module\"\n\nAdd `\"type\": \"module\"` to your `package.json`. You can do this step separately from the rest as part of an incremental migration if you are using Sapper 0.29.3\nor newer.\n\n### dependencies\n\nRemove `polka` or `express`, if you're using one of those, and any middleware such as `sirv` or `compression`.\n\n### devDependencies\n\nRemove `sapper` from your `devDependencies` and replace it with `@sveltejs/kit` and whichever [adapter](adapters) you plan to use (see [next section](migrating#Project-files-Configuration)).\n\n### scripts\n\nAny scripts that reference `sapper` should be updated:\n\n- `sapper build` should become `vite build` using the Node [adapter](adapters)\n- `sapper export` should become `vite build` using the static [adapter](adapters)\n- `sapper dev` should become `vite dev`\n- `node __sapper__/build` should become `node build`\n\n## Project files\n\nThe bulk of your app, in `src/routes`, can be left where it is, but several project files will need to be moved or updated.\n\n### Configuration\n\nYour `webpack.config.js` or `rollup.config.js` should be replaced with a `svelte.config.js`, as documented [here](configuration). Svelte preprocessor options should be moved to `config.preprocess`.\n\nYou will need to add an [adapter](adapters). `sapper build` is roughly equivalent to [adapter-node](adapter-node) while `sapper export` is roughly equivalent to [adapter-static](adapter-static), though you might prefer to use an adapter designed for the platform you're deploying to.\n\nIf you were using plugins for filetypes that are not automatically handled by [Vite](https://vitejs.dev), you will need to find Vite equivalents and add them to the [Vite config](project-structure#Project-files-vite.config.js).\n\n### src/client.js\n\nThis file has no equivalent in SvelteKit. Any custom logic (beyond `sapper.start(...)`) should be expressed in your `+layout.svelte` file, inside an `onMount` callback.\n\n### src/server.js\n\nWhen using `adapter-node` the equivalent is a [custom server](adapter-node#Custom-server). Otherwise, this file has no direct equivalent, since SvelteKit apps can run in serverless environments.\n\n### src/service-worker.js\n\nMost imports from `@sapper/service-worker` have equivalents in [`$service-worker`]($service-worker):\n\n- `files` is unchanged\n- `routes` has been removed\n- `shell` is now `build`\n- `timestamp` is now `version`\n\n### src/template.html\n\nThe `src/template.html` file should be renamed `src/app.html`.\n\nRemove `%sapper.base%`, `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%sveltekit.head%` and `%sapper.html%` with `%sveltekit.body%`. The `<div id=\"sapper\">` is no longer necessary.\n\n### src/node_modules\n\nA common pattern in Sapper apps is to put your internal library in a directory inside `src/node_modules`. This doesn't work with Vite, so we use [`src/lib`]($lib) instead.\n\n## Pages and layouts\n\n### Renamed files\n\nRoutes now are made up of the folder name exclusively to remove ambiguity, the folder names leading up to a `+page.svelte` correspond to the route. See [the routing docs](routing) for an overview. The following shows a old/new comparison:\n\n| Old                       | New                       |\n| ------------------------- | ------------------------- |\n| routes/about/index.svelte | routes/about/+page.svelte |\n| routes/about.svelte       | routes/about/+page.svelte |\n\nYour custom error page component should be renamed from `_error.svelte` to `+error.svelte`. Any `_layout.svelte` files should likewise be renamed `+layout.svelte`. [Any other files are ignored](routing#Other-files).\n\n### Imports\n\nThe `goto`, `prefetch` and `prefetchRoutes` imports from `@sapper/app` should be replaced with `goto`, `preloadData` and `preloadCode` imports respectively from [`$app/navigation`]($app-navigation).\n\nThe `stores` import from `@sapper/app` should be replaced — see the [Stores](migrating#Pages-and-layouts-Stores) section below.\n\nAny files you previously imported from directories in `src/node_modules` will need to be replaced with [`$lib`]($lib) imports.\n\n### Preload\n\nAs before, pages and layouts can export a function that allows data to be loaded before rendering takes place.\n\nThis function has been renamed from `preload` to [`load`](load), it now lives in a `+page.js` (or `+layout.js`) next to its `+page.svelte` (or `+layout.svelte`), and its API has changed. Instead of two arguments — `page` and `session` — there is a single `event` argument.\n\nThere is no more `this` object, and consequently no `this.fetch`, `this.error` or `this.redirect`. Instead, you can get [`fetch`](load#Making-fetch-requests) from the input methods, and both [`error`](load#Errors) and [`redirect`](load#Redirects) are now thrown.\n\n### Stores\n\nIn Sapper, you would get references to provided stores like so:\n\n```js\n// @filename: ambient.d.ts\ndeclare module '@sapper/app';\n\n// @filename: index.js\n// ---cut---\nimport { stores } from '@sapper/app';\nconst { preloading, page, session } = stores();\n```\n\nThe `page` store still exists; `preloading` has been replaced with a `navigating` store that contains `from` and `to` properties. `page` now has `url` and `params` properties, but no `path` or `query`.\n\nYou access them differently in SvelteKit. `stores` is now `getStores`, but in most cases it is unnecessary since you can import `navigating`, and `page` directly from [`$app/stores`]($app-stores). If you're on Svelte 5 and SvelteKit 2.12 or higher, consider using [`$app/state`]($app-state) instead.\n\n### Routing\n\nRegex routes are no longer supported. Instead, use [advanced route matching](advanced-routing#Matching).\n\n### Segments\n\nPreviously, layout components received a `segment` prop indicating the child segment. This has been removed; you should use the more flexible `$page.url.pathname` (or `page.url.pathname`) value to derive the segment you're interested in.\n\n### URLs\n\nIn Sapper, all relative URLs were resolved against the base URL — usually `/`, unless the `basepath` option was used — rather than against the current page.\n\nThis caused problems and is no longer the case in SvelteKit. Instead, relative URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. In most cases, it's easier to use root-relative (i.e. starts with `/`) URLs, since their meaning is not context-dependent.\n\n### &lt;a&gt; attributes\n\n- `sapper:prefetch` is now `data-sveltekit-preload-data`\n- `sapper:noscroll` is now `data-sveltekit-noscroll`\n\n## Endpoints\n\nIn Sapper, [server routes](routing#server) received the `req` and `res` objects exposed by Node's `http` module (or the augmented versions provided by frameworks like Polka and Express).\n\nSvelteKit is designed to be agnostic as to where the app is running — it could be running on a Node server, but could equally be running on a serverless platform or in a Cloudflare Worker. For that reason, you no longer interact directly with `req` and `res`. Your endpoints will need to be updated to match the new signature.\n\nTo support this environment-agnostic behavior, `fetch` is now available in the global context, so you don't need to import `node-fetch`, `cross-fetch`, or similar server-side fetch implementations in order to use it.\n\n## Integrations\n\nSee [integrations](./integrations) for detailed information about integrations.\n\n### HTML minifier\n\nSapper includes `html-minifier` by default. SvelteKit does not include this, but you can add it as a prod dependency and then use it through a [hook](hooks#Server-hooks-handle):\n\n```js\n// @filename: ambient.d.ts\n/// <reference types=\"@sveltejs/kit\" />\ndeclare module 'html-minifier';\n\n// @filename: index.js\n// ---cut---\nimport { minify } from 'html-minifier';\nimport { building } from '$app/environment';\n\nconst minification_options = {\n\tcollapseBooleanAttributes: true,\n\tcollapseWhitespace: true,\n\tconservativeCollapse: true,\n\tdecodeEntities: true,\n\thtml5: true,\n\tignoreCustomComments: [/^#/],\n\tminifyCSS: true,\n\tminifyJS: false,\n\tremoveAttributeQuotes: true,\n\tremoveComments: false, // some hydration code needs comments, so leave them in\n\tremoveOptionalTags: true,\n\tremoveRedundantAttributes: true,\n\tremoveScriptTypeAttributes: true,\n\tremoveStyleLinkTypeAttributes: true,\n\tsortAttributes: true,\n\tsortClassName: true\n};\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tlet page = '';\n\n\treturn resolve(event, {\n\t\ttransformPageChunk: ({ html, done }) => {\n\t\t\tpage += html;\n\t\t\tif (done) {\n\t\t\t\treturn building ? minify(page, minification_options) : page;\n\t\t\t}\n\t\t}\n\t});\n}\n```\n\nNote that `prerendering` is `false` when using `vite preview` to test the production build of the site, so to verify the results of minifying, you'll need to inspect the built HTML files directly.",
+		"kit/additional-resources": "## FAQs\n\nPlease see the [SvelteKit FAQ](faq) for solutions to common issues and helpful tips and tricks.\n\nThe [Svelte FAQ](../svelte/faq) and [`vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md) may also be helpful for questions deriving from those libraries.\n\n## Examples\n\nWe've written and published a few different SvelteKit sites as examples:\n\n- [`sveltejs/realworld`](https://github.com/sveltejs/realworld) contains an example blog site\n- [A HackerNews clone](https://github.com/sveltejs/sites/tree/master/sites/hn.svelte.dev)\n- [`svelte.dev`](https://github.com/sveltejs/svelte.dev)\n\nSvelteKit users have also published plenty of examples on GitHub, under the [#sveltekit](https://github.com/topics/sveltekit) and [#sveltekit-template](https://github.com/topics/sveltekit-template) topics, as well as on [the Svelte Society site](https://sveltesociety.dev/templates?category=sveltekit). Note that these have not been vetted by the maintainers and may not be up to date.\n\n## Support\n\nYou can ask for help on [Discord](/chat) and [StackOverflow](https://stackoverflow.com/questions/tagged/sveltekit). Please first search for information related to your issue in the FAQ, Google or another search engine, issue tracker, and Discord chat history in order to be respectful of others' time. There are many more people asking questions than answering them, so this will help in allowing the community to grow in a scalable fashion.",
+		"kit/glossary": "The core of SvelteKit provides a highly configurable rendering engine. This section describes some of the terms used when discussing rendering. A reference for setting these options is provided in the documentation above.\n\n## CSR\n\nClient-side rendering (CSR) is the generation of the page contents in the web browser using JavaScript.\n\nIn SvelteKit, client-side rendering will be used by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).\n\n## Edge\n\nRendering on the edge refers to rendering an application in a content delivery network (CDN) near the user. Edge rendering allows the request and response for a page to travel a shorter distance thus improving latency.\n\n## Hybrid app\n\nSvelteKit uses a hybrid rendering mode by default where it loads the initial HTML from the server (SSR), and then updates the page contents on subsequent navigations via client-side rendering (CSR).\n\n## Hydration\n\nSvelte components store some state and update the DOM when the state is updated. When fetching data during SSR, by default SvelteKit will store this data and transmit it to the client along with the server-rendered HTML. The components can then be initialized on the client with that data without having to call the same API endpoints again. Svelte will then check that the DOM is in the expected state and attach event listeners in a process called hydration. Once the components are fully hydrated, they can react to changes to their properties just like any newly created Svelte component.\n\nIn SvelteKit, pages will be hydrated by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).\n\n## ISR\n\nIncremental static regeneration (ISR) allows you to generate static pages on your site as visitors request those pages without redeploying. This may reduces build times compared to [SSG](#SSG) sites with a large number of pages. You can do [ISR with `adapter-vercel`](adapter-vercel#Incremental-Static-Regeneration).\n\n## MPA\n\nTraditional applications that render each page view on the server — such as those written in languages other than JavaScript — are often referred to as multi-page apps (MPA).\n\n## Prerendering\n\nPrerendering means computing the contents of a page at build time and saving the HTML for display. This approach has the same benefits as traditional server-rendered pages, but avoids recomputing the page for each visitor and so scales nearly for free as the number of visitors increases. The tradeoff is that the build process is more expensive and prerendered content can only be updated by building and deploying a new version of the application.\n\nNot all pages can be prerendered. The basic rule is this: for content to be prerenderable, any two users hitting it directly must get the same content from the server, and the page must not contain [actions](form-actions). Note that you can still prerender content that is loaded based on the page's parameters as long as all users will be seeing the same prerendered content.\n\nPre-rendered pages are not limited to static content. You can build personalized pages if user-specific data is fetched and rendered client-side. This is subject to the caveat that you will experience the downsides of not doing SSR for that content as discussed above.\n\nIn SvelteKit, you can control prerendering with [the `prerender` page option](page-options#prerender) and [`prerender` config](configuration#prerender) in `svelte.config.js`.\n\n## PWA\n\nA progressive web app (PWA) is an app that's built using web APIs and technologies, but functions like a mobile or desktop app. Sites served as [PWAs can be installed](https://web.dev/learn/pwa/installation), allowing you to add a shortcut to the application on your launcher, home screen, or start menu. Many PWAs will utilize [service workers](service-workers) to build offline capabilities.\n\n## Routing\n\nBy default, when you navigate to a new page (by clicking on a link or using the browser's forward or back buttons), SvelteKit will intercept the attempted navigation and handle it instead of allowing the browser to send a request to the server for the destination page. SvelteKit will then update the displayed contents on the client by rendering the component for the new page, which in turn can make calls to the necessary API endpoints. This process of updating the page on the client in response to attempted navigation is called client-side routing.\n\nIn SvelteKit, client-side routing will be used by default, but you can skip it with [`data-sveltekit-reload`](link-options#data-sveltekit-reload).\n\n## SPA\n\nA single-page app (SPA) is an application in which all requests to the server load a single HTML file which then does client-side rendering based on the requested URL. All navigation is handled on the client-side in a process called client-side routing with per-page contents being updated and common layout elements remaining largely unchanged. Throughout this site, when we refer to a SPA, we use this definition where a SPA simply serves an empty shell on the initial request. It should not be confused with a [hybrid app](#Hybrid-app), which serves HTML on the initial request. It has a large performance impact by forcing two network round trips before rendering can begin. Because SPA mode has large negative performance and SEO impacts, it is recommended only in very limited circumstances such as when being wrapped in a mobile app.\n\nIn SvelteKit, you can [build SPAs with `adapter-static`](single-page-apps).\n\n## SSG\n\nStatic Site Generation (SSG) is a term that refers to a site where every page is prerendered. One benefit of fully prerendering a site is that you do not need to maintain or pay for servers to perform SSR. Once generated, the site can be served from CDNs, leading to great “time to first byte” performance. This delivery model is often referred to as JAMstack.\n\nIn SvelteKit, you can do static site generation by using [`adapter-static`](adapter-static) or by configuring every page to be prerendered using [the `prerender` page option](page-options#prerender) or [`prerender` config](configuration#prerender) in `svelte.config.js`.\n\n## SSR\n\nServer-side rendering (SSR) is the generation of the page contents on the server. Returning the page contents from the server via SSR or prerendering is highly preferred for performance and SEO. It significantly improves performance by avoiding the introduction of extra round trips necessary in a SPA, and makes your app accessible to users if JavaScript fails or is disabled (which happens [more often than you probably think](https://kryogenix.org/code/browser/everyonehasjs.html)). While some search engines can index content that is dynamically generated on the client-side, it is likely to take longer even in these cases.\n\nIn SvelteKit, pages are server-side rendered by default. You can disable SSR with [the `ssr` page option](page-options#ssr).",
+		"kit/@sveltejs-kit": "```js\n// @noErrors\nimport {\n\tServer,\n\tVERSION,\n\terror,\n\tfail,\n\tisActionFailure,\n\tisHttpError,\n\tisRedirect,\n\tjson,\n\tnormalizeUrl,\n\tredirect,\n\ttext\n} from '@sveltejs/kit';\n```\n\n## Server\n\n<div class=\"ts-block\">\n\n```dts\nclass Server {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(manifest: SSRManifest);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ninit(options: ServerInitOptions): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrespond(request: Request, options: RequestOptions): Promise<Response>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## VERSION\n\n<div class=\"ts-block\">\n\n```dts\nconst VERSION: string;\n```\n\n</div>\n\n\n\n## error\n\nThrows an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking `handleError`.\nMake sure you're not catching the thrown error, which would prevent SvelteKit from handling it.\n\n<div class=\"ts-block\">\n\n```dts\nfunction error(status: number, body: App.Error): never;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction error(\n\tstatus: number,\n\tbody?: {\n\t\tmessage: string;\n\t} extends App.Error\n\t\t? App.Error | string | undefined\n\t\t: never\n): never;\n```\n\n</div>\n\n\n\n## fail\n\nCreate an `ActionFailure` object. Call when form submission fails.\n\n<div class=\"ts-block\">\n\n```dts\nfunction fail(status: number): ActionFailure<undefined>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction fail<T = undefined>(\n\tstatus: number,\n\tdata: T\n): ActionFailure<T>;\n```\n\n</div>\n\n\n\n## isActionFailure\n\nChecks whether this is an action failure thrown by `fail`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction isActionFailure(e: unknown): e is ActionFailure;\n```\n\n</div>\n\n\n\n## isHttpError\n\nChecks whether this is an error thrown by `error`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction isHttpError<T extends number>(\n\te: unknown,\n\tstatus?: T\n): e is HttpError_1 & {\n\tstatus: T extends undefined ? never : T;\n};\n```\n\n</div>\n\n\n\n## isRedirect\n\nChecks whether this is a redirect thrown by `redirect`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction isRedirect(e: unknown): e is Redirect_1;\n```\n\n</div>\n\n\n\n## json\n\nCreate a JSON `Response` object from the supplied data.\n\n<div class=\"ts-block\">\n\n```dts\nfunction json(data: any, init?: ResponseInit): Response;\n```\n\n</div>\n\n\n\n## normalizeUrl\n\n<blockquote class=\"since note\">\n\nAvailable since 2.18.0\n\n</blockquote>\n\nStrips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname.\nReturns the normalized URL as well as a method for adding the potential suffix back\nbased on a new pathname (possibly including search) or URL.\n```js\n// @errors: 7031\nimport { normalizeUrl } from '@sveltejs/kit';\n\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction normalizeUrl(url: URL | string): {\n\turl: URL;\n\twasNormalized: boolean;\n\tdenormalize: (url?: string | URL) => URL;\n};\n```\n\n</div>\n\n\n\n## redirect\n\nRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you're not catching the thrown redirect, which would prevent SvelteKit from handling it.\n\nMost common status codes:\n * `303 See Other`: redirect as a GET request (often used after a form POST request)\n * `307 Temporary Redirect`: redirect will keep the request method\n * `308 Permanent Redirect`: redirect will keep the request method, SEO will be transferred to the new page\n\n[See all redirect status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages)\n\n<div class=\"ts-block\">\n\n```dts\nfunction redirect(\n\tstatus:\n\t\t| 300\n\t\t| 301\n\t\t| 302\n\t\t| 303\n\t\t| 304\n\t\t| 305\n\t\t| 306\n\t\t| 307\n\t\t| 308\n\t\t| ({} & number),\n\tlocation: string | URL\n): never;\n```\n\n</div>\n\n\n\n## text\n\nCreate a `Response` object from the supplied body.\n\n<div class=\"ts-block\">\n\n```dts\nfunction text(body: string, init?: ResponseInit): Response;\n```\n\n</div>\n\n\n\n## Action\n\nShape of a form action method that is part of `export const actions = {...}` in `+page.server.js`.\nSee [form actions](/docs/kit/form-actions) for more information.\n\n<div class=\"ts-block\">\n\n```dts\ntype Action<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tOutputData extends Record<string, any> | void = Record<\n\t\tstring,\n\t\tany\n\t> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: RequestEvent<Params, RouteId>\n) => MaybePromise<OutputData>;\n```\n\n</div>\n\n## ActionFailure\n\n<div class=\"ts-block\">\n\n```dts\ninterface ActionFailure<T = undefined> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatus: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndata: T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n[uniqueSymbol]: true;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## ActionResult\n\nWhen calling a form action via fetch, the response will be one of these shapes.\n```svelte\n<form method=\"post\" use:enhance={() => {\n\treturn ({ result }) => {\n\t\t// result is of type ActionResult\n\t};\n}}\n```\n\n<div class=\"ts-block\">\n\n```dts\ntype ActionResult<\n\tSuccess extends\n\t\t| Record<string, unknown>\n\t\t| undefined = Record<string, any>,\n\tFailure extends\n\t\t| Record<string, unknown>\n\t\t| undefined = Record<string, any>\n> =\n\t| { type: 'success'; status: number; data?: Success }\n\t| { type: 'failure'; status: number; data?: Failure }\n\t| { type: 'redirect'; status: number; location: string }\n\t| { type: 'error'; status?: number; error: any };\n```\n\n</div>\n\n## Actions\n\nShape of the `export const actions = {...}` object in `+page.server.js`.\nSee [form actions](/docs/kit/form-actions) for more information.\n\n<div class=\"ts-block\">\n\n```dts\ntype Actions<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tOutputData extends Record<string, any> | void = Record<\n\t\tstring,\n\t\tany\n\t> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = Record<string, Action<Params, OutputData, RouteId>>;\n```\n\n</div>\n\n## Adapter\n\n[Adapters](/docs/kit/adapters) are responsible for taking the production build and turning it into something that can be deployed to a platform of your choosing.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Adapter {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nname: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe name of the adapter, using for logging. Will typically correspond to the package name.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nadapt: (builder: Builder) => MaybePromise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `builder` An object provided by SvelteKit that contains methods for adapting the app\n\n</div>\n\nThis function is called after SvelteKit has built your app.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsupports?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nChecks called during dev and build to determine whether specific features will work in production with this adapter.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nread?: (details: { config: any; route: { id: string } }) => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `details.config` The merged route config\n\n</div>\n\nTest support for `read` from `$app/server`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\ninstrumentation?: () => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nTest support for `instrumentation.server.js`. To pass, the adapter must support running `instrumentation.server.js` prior to the application code.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nemulate?: () => MaybePromise<Emulator>;\n```\n\n<div class=\"ts-block-property-details\">\n\nCreates an `Emulator`, which allows the adapter to influence the environment\nduring dev, build and prerendering.\n\n</div>\n</div></div>\n\n## AfterNavigate\n\nThe argument passed to [`afterNavigate`](/docs/kit/$app-navigation#afterNavigate) callbacks.\n\n<div class=\"ts-block\">\n\n```dts\ntype AfterNavigate = (Navigation | NavigationEnter) & {\n\t/**\n\t * The type of navigation:\n\t * - `enter`: The app has hydrated/started\n\t * - `form`: The user submitted a `<form method=\"GET\">`\n\t * - `link`: Navigation was triggered by a link click\n\t * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n\t * - `popstate`: Navigation was triggered by back/forward navigation\n\t */\n\ttype: Exclude<NavigationType, 'leave'>;\n\t/**\n\t * Since `afterNavigate` callbacks are called after a navigation completes, they will never be called with a navigation that unloads the page.\n\t */\n\twillUnload: false;\n};\n```\n\n</div>\n\n## AwaitedActions\n\n<div class=\"ts-block\">\n\n```dts\ntype AwaitedActions<\n\tT extends Record<string, (...args: any) => any>\n> = OptionalUnion<\n\t{\n\t\t[Key in keyof T]: UnpackValidationError<\n\t\t\tAwaited<ReturnType<T[Key]>>\n\t\t>;\n\t}[keyof T]\n>;\n```\n\n</div>\n\n## BeforeNavigate\n\nThe argument passed to [`beforeNavigate`](/docs/kit/$app-navigation#beforeNavigate) callbacks.\n\n<div class=\"ts-block\">\n\n```dts\ntype BeforeNavigate = Navigation & {\n\t/**\n\t * Call this to prevent the navigation from starting.\n\t */\n\tcancel: () => void;\n};\n```\n\n</div>\n\n## Builder\n\nThis object is passed to the `adapt` function of adapters.\nIt contains various methods and properties that are useful for adapting the app.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Builder {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nlog: Logger;\n```\n\n<div class=\"ts-block-property-details\">\n\nPrint messages to the console. `log.info` and `log.minor` are silent unless Vite's `logLevel` is `info`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrimraf: (dir: string) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nRemove `dir` and all its contents.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmkdirp: (dir: string) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nCreate `dir` and any required parent directories.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nconfig: ValidatedConfig;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe fully resolved Svelte config.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprerendered: Prerendered;\n```\n\n<div class=\"ts-block-property-details\">\n\nInformation about prerendered pages and assets, if any.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroutes: RouteDefinition[];\n```\n\n<div class=\"ts-block-property-details\">\n\nAn array of all routes (including prerendered)\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncreateEntries: (fn: (route: RouteDefinition) => AdapterEntry) => Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `fn` A function that groups a set of routes into an entry point\n- <span class=\"tag deprecated\">deprecated</span> Use `builder.routes` instead\n\n</div>\n\nCreate separate functions that map to one or more routes of your app.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfindServerAssets: (routes: RouteDefinition[]) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\nFind all the assets imported by server files belonging to `routes`\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngenerateFallback: (dest: string) => Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nGenerate a fallback page for a static webserver to use when no route is matched. Useful for single-page apps.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngenerateEnvModule: () => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nGenerate a module exposing build-time environment variables as `$env/dynamic/public`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngenerateManifest: (opts: { relativePath: string; routes?: RouteDefinition[] }) => string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `opts` a relative path to the base directory of the app and optionally in which format (esm or cjs) the manifest should be generated\n\n</div>\n\nGenerate a server-side manifest to initialise the SvelteKit [server](/docs/kit/@sveltejs-kit#Server) with.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetBuildDirectory: (name: string) => string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` path to the file, relative to the build directory\n\n</div>\n\nResolve a path to the `name` directory inside `outDir`, e.g. `/path/to/.svelte-kit/my-adapter`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetClientDirectory: () => string;\n```\n\n<div class=\"ts-block-property-details\">\n\nGet the fully resolved path to the directory containing client-side assets, including the contents of your `static` directory.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetServerDirectory: () => string;\n```\n\n<div class=\"ts-block-property-details\">\n\nGet the fully resolved path to the directory containing server-side code.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetAppPath: () => string;\n```\n\n<div class=\"ts-block-property-details\">\n\nGet the application path including any configured `base` path, e.g. `my-base-path/_app`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwriteClient: (dest: string) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `dest` the destination folder\n- <span class=\"tag\">returns</span> an array of files written to `dest`\n\n</div>\n\nWrite client assets to `dest`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwritePrerendered: (dest: string) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `dest` the destination folder\n- <span class=\"tag\">returns</span> an array of files written to `dest`\n\n</div>\n\nWrite prerendered files to `dest`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwriteServer: (dest: string) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `dest` the destination folder\n- <span class=\"tag\">returns</span> an array of files written to `dest`\n\n</div>\n\nWrite server-side code to `dest`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncopy: (\n\tfrom: string,\n\tto: string,\n\topts?: {\n\t\tfilter?(basename: string): boolean;\n\t\treplace?: Record<string, string>;\n\t}\n) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `from` the source file or directory\n- `to` the destination file or directory\n- `opts.filter` a function to determine whether a file or directory should be copied\n- `opts.replace` a map of strings to replace\n- <span class=\"tag\">returns</span> an array of files that were copied\n\n</div>\n\nCopy a file or directory.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nhasServerInstrumentationFile: () => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">returns</span> true if the server instrumentation file exists, false otherwise\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nCheck if the server instrumentation file exists.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ninstrument: (args: {\n\tentrypoint: string;\n\tinstrumentation: string;\n\tstart?: string;\n\tmodule?:\n\t\t| {\n\t\t\t\texports: string[];\n\t\t  }\n\t\t| {\n\t\t\t\tgenerateText: (args: { instrumentation: string; start: string }) => string;\n\t\t  };\n}) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `options` an object containing the following properties:\n- `options.entrypoint` the path to the entrypoint to trace.\n- `options.instrumentation` the path to the instrumentation file.\n- `options.start` the name of the start file. This is what `entrypoint` will be renamed to.\n- `options.module` configuration for the resulting entrypoint module.\n- `options.module.generateText` a function that receives the relative paths to the instrumentation and start files, and generates the text of the module to be traced. If not provided, the default implementation will be used, which uses top-level await.\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nInstrument `entrypoint` with `instrumentation`.\n\nRenames `entrypoint` to `start` and creates a new module at\n`entrypoint` which imports `instrumentation` and then dynamically imports `start`. This allows\nthe module hooks necessary for instrumentation libraries to be loaded prior to any application code.\n\nCaveats:\n- \"Live exports\" will not work. If your adapter uses live exports, your users will need to manually import the server instrumentation on startup.\n- If `tla` is `false`, OTEL auto-instrumentation may not work properly. Use it if your environment supports it.\n- Use `hasServerInstrumentationFile` to check if the user has a server instrumentation file; if they don't, you shouldn't do this.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncompress: (directory: string) => Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `directory` The directory containing the files to be compressed\n\n</div>\n\nCompress files in `directory` with gzip and brotli, where appropriate. Generates `.gz` and `.br` files alongside the originals.\n\n</div>\n</div></div>\n\n## ClientInit\n\n<blockquote class=\"since note\">\n\nAvailable since 2.10.0\n\n</blockquote>\n\nThe [`init`](/docs/kit/hooks#Shared-hooks-init) will be invoked once the app starts in the browser\n\n<div class=\"ts-block\">\n\n```dts\ntype ClientInit = () => MaybePromise<void>;\n```\n\n</div>\n\n## Config\n\nSee the [configuration reference](/docs/kit/configuration) for details.\n\n## Cookies\n\n<div class=\"ts-block\">\n\n```dts\ninterface Cookies {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nget: (name: string, opts?: import('cookie').CookieParseOptions) => string | undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` the name of the cookie\n- `opts` the options, passed directly to `cookie.parse`. See documentation [here](https://github.com/jshttp/cookie#cookieparsestr-options)\n\n</div>\n\nGets a cookie that was previously set with `cookies.set`, or from the request headers.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetAll: (opts?: import('cookie').CookieParseOptions) => Array<{ name: string; value: string }>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `opts` the options, passed directly to `cookie.parse`. See documentation [here](https://github.com/jshttp/cookie#cookieparsestr-options)\n\n</div>\n\nGets all cookies that were previously set with `cookies.set`, or from the request headers.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset: (\n\tname: string,\n\tvalue: string,\n\topts: import('cookie').CookieSerializeOptions & { path: string }\n) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` the name of the cookie\n- `value` the cookie value\n- `opts` the options, passed directly to `cookie.serialize`. See documentation [here](https://github.com/jshttp/cookie#cookieserializename-value-options)\n\n</div>\n\nSets a cookie. This will add a `set-cookie` header to the response, but also make the cookie available via `cookies.get` or `cookies.getAll` during the current request.\n\nThe `httpOnly` and `secure` options are `true` by default (except on http://localhost, where `secure` is `false`), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The `sameSite` option defaults to `lax`.\n\nYou must specify a `path` for the cookie. In most cases you should explicitly set `path: '/'` to make the cookie available throughout your app. You can use relative paths, or set `path: ''` to make the cookie only available on the current path and its children\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelete: (name: string, opts: import('cookie').CookieSerializeOptions & { path: string }) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` the name of the cookie\n- `opts` the options, passed directly to `cookie.serialize`. The `path` must match the path of the cookie you want to delete. See documentation [here](https://github.com/jshttp/cookie#cookieserializename-value-options)\n\n</div>\n\nDeletes a cookie by setting its value to an empty string and setting the expiry date in the past.\n\nYou must specify a `path` for the cookie. In most cases you should explicitly set `path: '/'` to make the cookie available throughout your app. You can use relative paths, or set `path: ''` to make the cookie only available on the current path and its children\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nserialize: (\n\tname: string,\n\tvalue: string,\n\topts: import('cookie').CookieSerializeOptions & { path: string }\n) => string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` the name of the cookie\n- `value` the cookie value\n- `opts` the options, passed directly to `cookie.serialize`. See documentation [here](https://github.com/jshttp/cookie#cookieserializename-value-options)\n\n</div>\n\nSerialize a cookie name-value pair into a `Set-Cookie` header string, but don't apply it to the response.\n\nThe `httpOnly` and `secure` options are `true` by default (except on http://localhost, where `secure` is `false`), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The `sameSite` option defaults to `lax`.\n\nYou must specify a `path` for the cookie. In most cases you should explicitly set `path: '/'` to make the cookie available throughout your app. You can use relative paths, or set `path: ''` to make the cookie only available on the current path and its children\n\n</div>\n</div></div>\n\n## Emulator\n\nA collection of functions that influence the environment during dev, build and prerendering\n\n<div class=\"ts-block\">\n\n```dts\ninterface Emulator {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nplatform?(details: { config: any; prerender: PrerenderOption }): MaybePromise<App.Platform>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that is called with the current route `config` and `prerender` option\nand returns an `App.Platform` object\n\n</div>\n</div></div>\n\n## Handle\n\nThe [`handle`](/docs/kit/hooks#Server-hooks-handle) hook runs every time the SvelteKit server receives a [request](/docs/kit/web-standards#Fetch-APIs-Request) and\ndetermines the [response](/docs/kit/web-standards#Fetch-APIs-Response).\nIt receives an `event` object representing the request and a function called `resolve`, which renders the route and generates a `Response`.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\n\n<div class=\"ts-block\">\n\n```dts\ntype Handle = (input: {\n\tevent: RequestEvent;\n\tresolve: (\n\t\tevent: RequestEvent,\n\t\topts?: ResolveOptions\n\t) => MaybePromise<Response>;\n}) => MaybePromise<Response>;\n```\n\n</div>\n\n## HandleClientError\n\nThe client-side [`handleError`](/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while navigating.\n\nIf an unexpected error is thrown during loading or the following render, this function will be called with the error and the event.\nMake sure that this function _never_ throws an error.\n\n<div class=\"ts-block\">\n\n```dts\ntype HandleClientError = (input: {\n\terror: unknown;\n\tevent: NavigationEvent;\n\tstatus: number;\n\tmessage: string;\n}) => MaybePromise<void | App.Error>;\n```\n\n</div>\n\n## HandleFetch\n\nThe [`handleFetch`](/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) the result of an [`event.fetch`](/docs/kit/load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`.\n\n<div class=\"ts-block\">\n\n```dts\ntype HandleFetch = (input: {\n\tevent: RequestEvent;\n\trequest: Request;\n\tfetch: typeof fetch;\n}) => MaybePromise<Response>;\n```\n\n</div>\n\n## HandleServerError\n\nThe server-side [`handleError`](/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while responding to a request.\n\nIf an unexpected error is thrown during loading or rendering, this function will be called with the error and the event.\nMake sure that this function _never_ throws an error.\n\n<div class=\"ts-block\">\n\n```dts\ntype HandleServerError = (input: {\n\terror: unknown;\n\tevent: RequestEvent;\n\tstatus: number;\n\tmessage: string;\n}) => MaybePromise<void | App.Error>;\n```\n\n</div>\n\n## HandleValidationError\n\nThe [`handleValidationError`](/docs/kit/hooks#Server-hooks-handleValidationError) hook runs when the argument to a remote function fails validation.\n\nIt will be called with the validation issues and the event, and must return an object shape that matches `App.Error`.\n\n<div class=\"ts-block\">\n\n```dts\ntype HandleValidationError<\n\tIssue extends\n\t\tStandardSchemaV1.Issue = StandardSchemaV1.Issue\n> = (input: {\n\tissues: Issue[];\n\tevent: RequestEvent;\n}) => MaybePromise<App.Error>;\n```\n\n</div>\n\n## HttpError\n\nThe object returned by the [`error`](/docs/kit/@sveltejs-kit#error) function.\n\n<div class=\"ts-block\">\n\n```dts\ninterface HttpError {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatus: number;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses), in the range 400-599.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nbody: App.Error;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe content of the error.\n\n</div>\n</div></div>\n\n## Invalid\n\nA function and proxy object used to imperatively create validation errors in form handlers.\n\nCall `invalid(issue1, issue2, ...issueN)` to throw a validation error.\nIf an issue is a `string`, it applies to the form as a whole (and will show up in `fields.allIssues()`)\nAccess properties to create field-specific issues: `invalid.fieldName('message')`.\nThe type structure mirrors the input data structure for type-safe field access.\n\n<div class=\"ts-block\">\n\n```dts\ntype Invalid<Input = any> = ((\n\t...issues: Array<string | StandardSchemaV1.Issue>\n) => never) &\n\tInvalidField<Input>;\n```\n\n</div>\n\n## KitConfig\n\nSee the [configuration reference](/docs/kit/configuration) for details.\n\n## LessThan\n\n<div class=\"ts-block\">\n\n```dts\ntype LessThan<\n\tTNumber extends number,\n\tTArray extends any[] = []\n> = TNumber extends TArray['length']\n\t? TArray[number]\n\t: LessThan<TNumber, [...TArray, TArray['length']]>;\n```\n\n</div>\n\n## Load\n\nThe generic form of `PageLoad` and `LayoutLoad`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types))\nrather than using `Load` directly.\n\n<div class=\"ts-block\">\n\n```dts\ntype Load<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tInputData extends Record<string, unknown> | null = Record<\n\t\tstring,\n\t\tany\n\t> | null,\n\tParentData extends Record<string, unknown> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tOutputData extends Record<\n\t\tstring,\n\t\tunknown\n\t> | void = Record<string, any> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: LoadEvent<Params, InputData, ParentData, RouteId>\n) => MaybePromise<OutputData>;\n```\n\n</div>\n\n## LoadEvent\n\nThe generic form of `PageLoadEvent` and `LayoutLoadEvent`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types))\nrather than using `LoadEvent` directly.\n\n<div class=\"ts-block\">\n\n```dts\ninterface LoadEvent<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tData extends Record<string, unknown> | null = Record<\n\t\tstring,\n\t\tany\n\t> | null,\n\tParentData extends Record<string, unknown> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> extends NavigationEvent<Params, RouteId> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nfetch: typeof fetch;\n```\n\n<div class=\"ts-block-property-details\">\n\n`fetch` is equivalent to the [native `fetch` web API](https://developer.mozilla.org/en-US/docs/Web/API/fetch), with a few additional features:\n\n- It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request.\n- It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context).\n- Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\n- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/kit/hooks#Server-hooks-handle)\n- During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies)\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndata: Data;\n```\n\n<div class=\"ts-block-property-details\">\n\nContains the data returned by the route's server `load` function (in `+layout.server.js` or `+page.server.js`), if any.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsetHeaders: (headers: Record<string, string>) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nIf you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:\n\n```js\n// @errors: 7031\n/// file: src/routes/blog/+page.js\nexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}\n```\n\nSetting the same header multiple times (even in separate `load` functions) is an error — you can only set a given header once.\n\nYou cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](/docs/kit/@sveltejs-kit#Cookies) API in a server-only `load` function instead.\n\n`setHeaders` has no effect when a `load` function runs in the browser.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nparent: () => Promise<ParentData>;\n```\n\n<div class=\"ts-block-property-details\">\n\n`await parent()` returns data from parent `+layout.js` `load` functions.\nImplicitly, a missing `+layout.js` is treated as a `({ data }) => data` function, meaning that it will return and forward data from parent `+layout.server.js` files.\n\nBe careful not to introduce accidental waterfalls when using `await parent()`. If for example you only want to merge parent data into the returned output, call it _after_ fetching your other data.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndepends: (...deps: Array<`${string}:${string}`>) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nThis function declares that the `load` function has a _dependency_ on one or more URLs or custom identifiers, which can subsequently be used with [`invalidate()`](/docs/kit/$app-navigation#invalidate) to cause `load` to rerun.\n\nMost of the time you won't need this, as `fetch` calls `depends` on your behalf — it's only necessary if you're using a custom API client that bypasses `fetch`.\n\nURLs can be absolute or relative to the page being loaded, and must be [encoded](https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding).\n\nCustom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the [URI specification](https://www.rfc-editor.org/rfc/rfc3986.html).\n\nThe following example shows how to use `depends` to register a dependency on a custom identifier, which is `invalidate`d after a button click, making the `load` function rerun.\n\n```js\n// @errors: 7031\n/// file: src/routes/+page.js\nlet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}\n```\n\n```html\n/// file: src/routes/+page.svelte\n<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nuntrack: <T>(fn: () => T) => T;\n```\n\n<div class=\"ts-block-property-details\">\n\nUse this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example:\n\n```js\n// @errors: 7031\n/// file: src/routes/+page.server.js\nexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntracing: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nAccess to spans for tracing. If tracing is not enabled or the function is being run in the browser, these spans will do nothing.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nenabled: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether tracing is enabled.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nroot: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe root span for the request. This span is named `sveltekit.handle.root`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\ncurrent: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe span associated with the current `load` function.\n\n</div>\n</div></div>\n\n</div>\n</div></div>\n\n## LoadProperties\n\n<div class=\"ts-block\">\n\n```dts\ntype LoadProperties<\n\tinput extends Record<string, any> | void\n> = input extends void\n\t? undefined // needs to be undefined, because void will break intellisense\n\t: input extends Record<string, any>\n\t\t? input\n\t\t: unknown;\n```\n\n</div>\n\n## Navigation\n\n<div class=\"ts-block\">\n\n```dts\ntype Navigation =\n\t| NavigationExternal\n\t| NavigationFormSubmit\n\t| NavigationPopState\n\t| NavigationLink;\n```\n\n</div>\n\n## NavigationBase\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nfrom: NavigationTarget | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhere navigation was triggered from\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nto: NavigationTarget | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhere navigation is going to/has gone to\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwillUnload: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether or not the navigation will result in the page being unloaded (i.e. not a client-side navigation)\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncomplete: Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA promise that resolves once the navigation is complete, and rejects if the navigation\nfails or is aborted. In the case of a `willUnload` navigation, the promise will never resolve\n\n</div>\n</div></div>\n\n## NavigationEnter\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationEnter extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: 'enter';\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nevent?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nDispatched `Event` object when navigation occured by `popstate` or `link`.\n\n</div>\n</div></div>\n\n## NavigationEvent\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationEvent<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nparams: Params;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroute: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nInfo about the current route\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nid: RouteId;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nurl: URL;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe URL of the current page\n\n</div>\n</div></div>\n\n## NavigationExternal\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationExternal extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: Exclude<NavigationType, 'enter' | 'popstate' | 'link' | 'form'>;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div></div>\n\n## NavigationFormSubmit\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationFormSubmit extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: 'form';\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nevent: SubmitEvent;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe `SubmitEvent` that caused the navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div></div>\n\n## NavigationLink\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationLink extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: 'link';\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nevent: PointerEvent;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe `PointerEvent` that caused the navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div></div>\n\n## NavigationPopState\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationPopState extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: 'popstate';\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta: number;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nevent: PopStateEvent;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe `PopStateEvent` that caused the navigation\n\n</div>\n</div></div>\n\n## NavigationTarget\n\nInformation about the target of a specific navigation.\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationTarget<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nparams: Params | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nParameters of the target page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.\nIs `null` if the target is not part of the SvelteKit app (could not be resolved to a route).\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroute: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nInfo about the target route\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nid: RouteId | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nurl: URL;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe URL that is navigated to\n\n</div>\n</div></div>\n\n## NavigationType\n\n- `enter`: The app has hydrated/started\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n<div class=\"ts-block\">\n\n```dts\ntype NavigationType =\n\t| 'enter'\n\t| 'form'\n\t| 'leave'\n\t| 'link'\n\t| 'goto'\n\t| 'popstate';\n```\n\n</div>\n\n## NumericRange\n\n<div class=\"ts-block\">\n\n```dts\ntype NumericRange<\n\tTStart extends number,\n\tTEnd extends number\n> = Exclude<TEnd | LessThan<TEnd>, LessThan<TStart>>;\n```\n\n</div>\n\n## OnNavigate\n\nThe argument passed to [`onNavigate`](/docs/kit/$app-navigation#onNavigate) callbacks.\n\n<div class=\"ts-block\">\n\n```dts\ntype OnNavigate = Navigation & {\n\t/**\n\t * The type of navigation:\n\t * - `form`: The user submitted a `<form method=\"GET\">`\n\t * - `link`: Navigation was triggered by a link click\n\t * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n\t * - `popstate`: Navigation was triggered by back/forward navigation\n\t */\n\ttype: Exclude<NavigationType, 'enter' | 'leave'>;\n\t/**\n\t * Since `onNavigate` callbacks are called immediately before a client-side navigation, they will never be called with a navigation that unloads the page.\n\t */\n\twillUnload: false;\n};\n```\n\n</div>\n\n## Page\n\nThe shape of the [`page`](/docs/kit/$app-state#page) reactive object and the [`$page`](/docs/kit/$app-stores) store.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Page<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nurl: URL & { pathname: ResolvedPathname };\n```\n\n<div class=\"ts-block-property-details\">\n\nThe URL of the current page.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nparams: Params;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroute: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nInfo about the current route.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nid: RouteId;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstatus: number;\n```\n\n<div class=\"ts-block-property-details\">\n\nHTTP status code of the current page.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nerror: App.Error | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe error object of the current page, if any. Filled from the `handleError` hooks.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndata: App.PageData & Record<string, any>;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe merged result of all data from all `load` functions on the current page. You can type a common denominator through `App.PageData`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstate: App.PageState;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe page state, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nform: any;\n```\n\n<div class=\"ts-block-property-details\">\n\nFilled only after a form submission. See [form actions](/docs/kit/form-actions) for more info.\n\n</div>\n</div></div>\n\n## ParamMatcher\n\nThe shape of a param matcher. See [matching](/docs/kit/advanced-routing#Matching) for more info.\n\n<div class=\"ts-block\">\n\n```dts\ntype ParamMatcher = (param: string) => boolean;\n```\n\n</div>\n\n## PrerenderOption\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderOption = boolean | 'auto';\n```\n\n</div>\n\n## Redirect\n\nThe object returned by the [`redirect`](/docs/kit/@sveltejs-kit#redirect) function.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Redirect {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatus: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages), in the range 300-308.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nlocation: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe location to redirect to.\n\n</div>\n</div></div>\n\n## RemoteCommand\n\nThe return value of a remote `command` function. See [Remote functions](/docs/kit/remote-functions#command) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteCommand<Input, Output> = {\n\t(arg: Input): Promise<Awaited<Output>> & {\n\t\tupdates(\n\t\t\t...queries: Array<\n\t\t\t\tRemoteQuery<any> | RemoteQueryOverride\n\t\t\t>\n\t\t): Promise<Awaited<Output>>;\n\t};\n\t/** The number of pending command executions */\n\tget pending(): number;\n};\n```\n\n</div>\n\n## RemoteForm\n\nThe return value of a remote `form` function. See [Remote functions](/docs/kit/remote-functions#form) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteForm<\n\tInput extends RemoteFormInput | void,\n\tOutput\n> = {\n\t/** Attachment that sets up an event handler that intercepts the form submission on the client to prevent a full page reload */\n\t[attachment: symbol]: (node: HTMLFormElement) => void;\n\tmethod: 'POST';\n\t/** The URL to send the form to. */\n\taction: string;\n\t/** Use the `enhance` method to influence what happens when the form is submitted. */\n\tenhance(\n\t\tcallback: (opts: {\n\t\t\tform: HTMLFormElement;\n\t\t\tdata: Input;\n\t\t\tsubmit: () => Promise<void> & {\n\t\t\t\tupdates: (\n\t\t\t\t\t...queries: Array<\n\t\t\t\t\t\tRemoteQuery<any> | RemoteQueryOverride\n\t\t\t\t\t>\n\t\t\t\t) => Promise<void>;\n\t\t\t};\n\t\t}) => void | Promise<void>\n\t): {\n\t\tmethod: 'POST';\n\t\taction: string;\n\t\t[attachment: symbol]: (node: HTMLFormElement) => void;\n\t};\n\t/**\n\t * Create an instance of the form for the given `id`.\n\t * The `id` is stringified and used for deduplication to potentially reuse existing instances.\n\t * Useful when you have multiple forms that use the same remote form action, for example in a loop.\n\t * ```svelte\n\t * {#each todos as todo}\n\t *\t{@const todoForm = updateTodo.for(todo.id)}\n\t *\t<form {...todoForm}>\n\t *\t\t{#if todoForm.result?.invalid}<p>Invalid data</p>{/if}\n\t *\t\t...\n\t *\t</form>\n\t *\t{/each}\n\t * ```\n\t */\n\tfor(\n\t\tid: ExtractId<Input>\n\t): Omit<RemoteForm<Input, Output>, 'for'>;\n\t/** Preflight checks */\n\tpreflight(\n\t\tschema: StandardSchemaV1<Input, any>\n\t): RemoteForm<Input, Output>;\n\t/** Validate the form contents programmatically */\n\tvalidate(options?: {\n\t\tincludeUntouched?: boolean;\n\t\t/** Perform validation as if the form was submitted by the given button. */\n\t\tsubmitter?: HTMLButtonElement | HTMLInputElement;\n\t}): Promise<void>;\n\t/** The result of the form submission */\n\tget result(): Output | undefined;\n\t/** The number of pending submissions */\n\tget pending(): number;\n\t/** Access form fields using object notation */\n\tfields: Input extends void\n\t\t? never\n\t\t: RemoteFormFields<Input>;\n\t/** Spread this onto a `<button>` or `<input type=\"submit\">` */\n\tbuttonProps: {\n\t\ttype: 'submit';\n\t\tformmethod: 'POST';\n\t\tformaction: string;\n\t\tonclick: (event: Event) => void;\n\t\t/** Use the `enhance` method to influence what happens when the form is submitted. */\n\t\tenhance(\n\t\t\tcallback: (opts: {\n\t\t\t\tform: HTMLFormElement;\n\t\t\t\tdata: Input;\n\t\t\t\tsubmit: () => Promise<void> & {\n\t\t\t\t\tupdates: (\n\t\t\t\t\t\t...queries: Array<\n\t\t\t\t\t\t\tRemoteQuery<any> | RemoteQueryOverride\n\t\t\t\t\t\t>\n\t\t\t\t\t) => Promise<void>;\n\t\t\t\t};\n\t\t\t}) => void | Promise<void>\n\t\t): {\n\t\t\ttype: 'submit';\n\t\t\tformmethod: 'POST';\n\t\t\tformaction: string;\n\t\t\tonclick: (event: Event) => void;\n\t\t};\n\t\t/** The number of pending submissions */\n\t\tget pending(): number;\n\t};\n};\n```\n\n</div>\n\n## RemoteFormField\n\nForm field accessor type that provides name(), value(), and issues() methods\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteFormField<Value extends RemoteFormFieldValue> =\n\tRemoteFormFieldMethods<Value> & {\n\t\t/**\n\t\t * Returns an object that can be spread onto an input element with the correct type attribute,\n\t\t * aria-invalid attribute if the field is invalid, and appropriate value/checked property getters/setters.\n\t\t * @example\n\t\t * ```svelte\n\t\t * <input {...myForm.fields.myString.as('text')} />\n\t\t * <input {...myForm.fields.myNumber.as('number')} />\n\t\t * <input {...myForm.fields.myBoolean.as('checkbox')} />\n\t\t * ```\n\t\t */\n\t\tas<T extends RemoteFormFieldType<Value>>(\n\t\t\t...args: AsArgs<T, Value>\n\t\t): InputElementProps<T>;\n\t};\n```\n\n</div>\n\n## RemoteFormFieldType\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteFormFieldType<T> = {\n\t[K in keyof InputTypeMap]: T extends InputTypeMap[K]\n\t\t? K\n\t\t: never;\n}[keyof InputTypeMap];\n```\n\n</div>\n\n## RemoteFormFieldValue\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteFormFieldValue =\n\t| string\n\t| string[]\n\t| number\n\t| boolean\n\t| File\n\t| File[];\n```\n\n</div>\n\n## RemoteFormInput\n\n<div class=\"ts-block\">\n\n```dts\ninterface RemoteFormInput {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n[key: string]: MaybeArray<string | number | boolean | File | RemoteFormInput>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## RemoteFormIssue\n\n<div class=\"ts-block\">\n\n```dts\ninterface RemoteFormIssue {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nmessage: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## RemotePrerenderFunction\n\nThe return value of a remote `prerender` function. See [Remote functions](/docs/kit/remote-functions#prerender) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\ntype RemotePrerenderFunction<Input, Output> = (\n\targ: Input\n) => RemoteResource<Output>;\n```\n\n</div>\n\n## RemoteQuery\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteQuery<T> = RemoteResource<T> & {\n\t/**\n\t * On the client, this function will update the value of the query without re-fetching it.\n\t *\n\t * On the server, this can be called in the context of a `command` or `form` and the specified data will accompany the action response back to the client.\n\t * This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\n\t */\n\tset(value: T): void;\n\t/**\n\t * On the client, this function will re-fetch the query from the server.\n\t *\n\t * On the server, this can be called in the context of a `command` or `form` and the refreshed data will accompany the action response back to the client.\n\t * This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\n\t */\n\trefresh(): Promise<void>;\n\t/**\n\t * Temporarily override the value of a query. This is used with the `updates` method of a [command](https://svelte.dev/docs/kit/remote-functions#command-Updating-queries) or [enhanced form submission](https://svelte.dev/docs/kit/remote-functions#form-enhance) to provide optimistic updates.\n\t *\n\t * ```svelte\n\t * <script>\n\t *   import { getTodos, addTodo } from './todos.remote.js';\n\t *   const todos = getTodos();\n\t * </script>\n\t *\n\t * <form {...addTodo.enhance(async ({ data, submit }) => {\n\t *   await submit().updates(\n\t *     todos.withOverride((todos) => [...todos, { text: data.get('text') }])\n\t *   );\n\t * })}>\n\t *   <input type=\"text\" name=\"text\" />\n\t *   <button type=\"submit\">Add Todo</button>\n\t * </form>\n\t * ```\n\t */\n\twithOverride(\n\t\tupdate: (current: Awaited<T>) => Awaited<T>\n\t): RemoteQueryOverride;\n};\n```\n\n</div>\n\n## RemoteQueryFunction\n\nThe return value of a remote `query` function. See [Remote functions](/docs/kit/remote-functions#query) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteQueryFunction<Input, Output> = (\n\targ: Input\n) => RemoteQuery<Output>;\n```\n\n</div>\n\n## RemoteQueryOverride\n\n<div class=\"ts-block\">\n\n```dts\ninterface RemoteQueryOverride {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n_key: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrelease(): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## RemoteResource\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteResource<T> = Promise<Awaited<T>> & {\n\t/** The error in case the query fails. Most often this is a [`HttpError`](https://svelte.dev/docs/kit/@sveltejs-kit#HttpError) but it isn't guaranteed to be. */\n\tget error(): any;\n\t/** `true` before the first result is available and during refreshes */\n\tget loading(): boolean;\n} & (\n\t\t| {\n\t\t\t\t/** The current value of the query. Undefined until `ready` is `true` */\n\t\t\t\tget current(): undefined;\n\t\t\t\tready: false;\n\t\t  }\n\t\t| {\n\t\t\t\t/** The current value of the query. Undefined until `ready` is `true` */\n\t\t\t\tget current(): Awaited<T>;\n\t\t\t\tready: true;\n\t\t  }\n\t);\n```\n\n</div>\n\n## RequestEvent\n\n<div class=\"ts-block\">\n\n```dts\ninterface RequestEvent<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ncookies: Cookies;\n```\n\n<div class=\"ts-block-property-details\">\n\nGet or set cookies related to the current request\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfetch: typeof fetch;\n```\n\n<div class=\"ts-block-property-details\">\n\n`fetch` is equivalent to the [native `fetch` web API](https://developer.mozilla.org/en-US/docs/Web/API/fetch), with a few additional features:\n\n- It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request.\n- It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context).\n- Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\n- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/kit/hooks#Server-hooks-handle)\n- During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies).\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetClientAddress: () => string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe client's IP address, set by the adapter.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nlocals: App.Locals;\n```\n\n<div class=\"ts-block-property-details\">\n\nContains custom data that was added to the request within the [`server handle hook`](/docs/kit/hooks#Server-hooks-handle).\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nparams: Params;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe parameters of the current route - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nplatform: Readonly<App.Platform> | undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nAdditional data made available through the adapter.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrequest: Request;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe original request object.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroute: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nInfo about the current route.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nid: RouteId;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsetHeaders: (headers: Record<string, string>) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nIf you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:\n\n```js\n// @errors: 7031\n/// file: src/routes/blog/+page.js\nexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}\n```\n\nSetting the same header multiple times (even in separate `load` functions) is an error — you can only set a given header once.\n\nYou cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](/docs/kit/@sveltejs-kit#Cookies) API instead.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nurl: URL;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe requested URL.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nisDataRequest: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n`true` if the request comes from the client asking for `+page/layout.server.js` data. The `url` property will be stripped of the internal information\nrelated to the data request in this case. Use this property instead if the distinction is important to you.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nisSubRequest: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n`true` for `+server.js` calls coming from SvelteKit without the overhead of actually making an HTTP request. This happens when you make same-origin `fetch` requests on the server.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntracing: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nAccess to spans for tracing. If tracing is not enabled, these spans will do nothing.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nenabled: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether tracing is enabled.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nroot: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe root span for the request. This span is named `sveltekit.handle.root`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\ncurrent: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe span associated with the current `handle` hook, `load` function, or form action.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nisRemoteRequest: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n`true` if the request comes from the client via a remote function. The `url` property will be stripped of the internal information\nrelated to the data request in this case. Use this property instead if the distinction is important to you.\n\n</div>\n</div></div>\n\n## RequestHandler\n\nA `(event: RequestEvent) => Response` function exported from a `+server.js` file that corresponds to an HTTP verb (`GET`, `PUT`, `PATCH`, etc) and handles requests with that method.\n\nIt receives `Params` as the first generic argument, which you can skip by using [generated types](/docs/kit/types#Generated-types) instead.\n\n<div class=\"ts-block\">\n\n```dts\ntype RequestHandler<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: RequestEvent<Params, RouteId>\n) => MaybePromise<Response>;\n```\n\n</div>\n\n## Reroute\n\n<blockquote class=\"since note\">\n\nAvailable since 2.3.0\n\n</blockquote>\n\nThe [`reroute`](/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render.\n\n<div class=\"ts-block\">\n\n```dts\ntype Reroute = (event: {\n\turl: URL;\n\tfetch: typeof fetch;\n}) => MaybePromise<void | string>;\n```\n\n</div>\n\n## ResolveOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface ResolveOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntransformPageChunk?: (input: { html: string; done: boolean }) => MaybePromise<string | undefined>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `input` the html chunk and the info if this is the last chunk\n\n</div>\n\nApplies custom transforms to HTML. If `done` is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element's opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as `%sveltekit.head%` or layout/page components.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfilterSerializedResponseHeaders?: (name: string, value: string) => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` header name\n- `value` header value\n\n</div>\n\nDetermines which headers should be included in serialized responses when a `load` function loads a resource with `fetch`.\nBy default, none will be included.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npreload?: (input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }) => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `input` the type of the file and its path\n\n</div>\n\nDetermines what should be added to the `<head>` tag to preload it.\nBy default, `js` and `css` files will be preloaded.\n\n</div>\n</div></div>\n\n## RouteDefinition\n\n<div class=\"ts-block\">\n\n```dts\ninterface RouteDefinition<Config = any> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nid: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\napi: {\n\tmethods: Array<HttpMethod | '*'>;\n};\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npage: {\n\tmethods: Array<Extract<HttpMethod, 'GET' | 'POST'>>;\n};\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npattern: RegExp;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprerender: PrerenderOption;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsegments: RouteSegment[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmethods: Array<HttpMethod | '*'>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nconfig: Config;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## SSRManifest\n\n<div class=\"ts-block\">\n\n```dts\ninterface SSRManifest {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nappDir: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nappPath: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nassets: Set<string>;\n```\n\n<div class=\"ts-block-property-details\">\n\nStatic files from `kit.config.files.assets` and the service worker (if any).\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmimeTypes: Record<string, string>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n_: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nprivate fields\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nclient: NonNullable<BuildData['client']>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nnodes: SSRNodeLoader[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nremotes: Record<string, () => Promise<any>>;\n```\n\n<div class=\"ts-block-property-details\">\n\nhashed filename -> import to that file\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nroutes: SSRRoute[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nprerendered_routes: Set<string>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nmatchers: () => Promise<Record<string, ParamMatcher>>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nserver_assets: Record<string, number>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA `[file]: size` map of all assets imported by server code.\n\n</div>\n</div></div>\n\n</div>\n</div></div>\n\n## ServerInit\n\n<blockquote class=\"since note\">\n\nAvailable since 2.10.0\n\n</blockquote>\n\nThe [`init`](/docs/kit/hooks#Shared-hooks-init) will be invoked before the server responds to its first request\n\n<div class=\"ts-block\">\n\n```dts\ntype ServerInit = () => MaybePromise<void>;\n```\n\n</div>\n\n## ServerInitOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface ServerInitOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nenv: Record<string, string>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA map of environment variables.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nread?: (file: string) => MaybePromise<ReadableStream | null>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that turns an asset filename into a `ReadableStream`. Required for the `read` export from `$app/server` to work.\n\n</div>\n</div></div>\n\n## ServerLoad\n\nThe generic form of `PageServerLoad` and `LayoutServerLoad`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types))\nrather than using `ServerLoad` directly.\n\n<div class=\"ts-block\">\n\n```dts\ntype ServerLoad<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tParentData extends Record<string, any> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tOutputData extends Record<string, any> | void = Record<\n\t\tstring,\n\t\tany\n\t> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: ServerLoadEvent<Params, ParentData, RouteId>\n) => MaybePromise<OutputData>;\n```\n\n</div>\n\n## ServerLoadEvent\n\n<div class=\"ts-block\">\n\n```dts\ninterface ServerLoadEvent<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tParentData extends Record<string, any> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> extends RequestEvent<Params, RouteId> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nparent: () => Promise<ParentData>;\n```\n\n<div class=\"ts-block-property-details\">\n\n`await parent()` returns data from parent `+layout.server.js` `load` functions.\n\nBe careful not to introduce accidental waterfalls when using `await parent()`. If for example you only want to merge parent data into the returned output, call it _after_ fetching your other data.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndepends: (...deps: string[]) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nThis function declares that the `load` function has a _dependency_ on one or more URLs or custom identifiers, which can subsequently be used with [`invalidate()`](/docs/kit/$app-navigation#invalidate) to cause `load` to rerun.\n\nMost of the time you won't need this, as `fetch` calls `depends` on your behalf — it's only necessary if you're using a custom API client that bypasses `fetch`.\n\nURLs can be absolute or relative to the page being loaded, and must be [encoded](https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding).\n\nCustom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the [URI specification](https://www.rfc-editor.org/rfc/rfc3986.html).\n\nThe following example shows how to use `depends` to register a dependency on a custom identifier, which is `invalidate`d after a button click, making the `load` function rerun.\n\n```js\n// @errors: 7031\n/// file: src/routes/+page.js\nlet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}\n```\n\n```html\n/// file: src/routes/+page.svelte\n<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nuntrack: <T>(fn: () => T) => T;\n```\n\n<div class=\"ts-block-property-details\">\n\nUse this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example:\n\n```js\n// @errors: 7031\n/// file: src/routes/+page.js\nexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntracing: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nAccess to spans for tracing. If tracing is not enabled, these spans will do nothing.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nenabled: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether tracing is enabled.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nroot: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe root span for the request. This span is named `sveltekit.handle.root`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\ncurrent: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe span associated with the current server `load` function.\n\n</div>\n</div></div>\n\n</div>\n</div></div>\n\n## Snapshot\n\nThe type of `export const snapshot` exported from a page or layout component.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Snapshot<T = any> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ncapture: () => T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrestore: (snapshot: T) => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## SubmitFunction\n\n<div class=\"ts-block\">\n\n```dts\ntype SubmitFunction<\n\tSuccess extends\n\t\t| Record<string, unknown>\n\t\t| undefined = Record<string, any>,\n\tFailure extends\n\t\t| Record<string, unknown>\n\t\t| undefined = Record<string, any>\n> = (input: {\n\taction: URL;\n\tformData: FormData;\n\tformElement: HTMLFormElement;\n\tcontroller: AbortController;\n\tsubmitter: HTMLElement | null;\n\tcancel: () => void;\n}) => MaybePromise<\n\t| void\n\t| ((opts: {\n\t\t\tformData: FormData;\n\t\t\tformElement: HTMLFormElement;\n\t\t\taction: URL;\n\t\t\tresult: ActionResult<Success, Failure>;\n\t\t\t/**\n\t\t\t * Call this to get the default behavior of a form submission response.\n\t\t\t * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a successful submission.\n\t\t\t * @param invalidateAll Set `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission.\n\t\t\t */\n\t\t\tupdate: (options?: {\n\t\t\t\treset?: boolean;\n\t\t\t\tinvalidateAll?: boolean;\n\t\t\t}) => Promise<void>;\n\t  }) => MaybePromise<void>)\n>;\n```\n\n</div>\n\n## Transport\n\n<blockquote class=\"since note\">\n\nAvailable since 2.11.0\n\n</blockquote>\n\nThe [`transport`](/docs/kit/hooks#Universal-hooks-transport) hook allows you to transport custom types across the server/client boundary.\n\nEach transporter has a pair of `encode` and `decode` functions. On the server, `encode` determines whether a value is an instance of the custom type and, if so, returns a non-falsy encoding of the value which can be an object or an array (or `false` otherwise).\n\nIn the browser, `decode` turns the encoding back into an instance of the custom type.\n\n```ts\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};\n```\n\n<div class=\"ts-block\">\n\n```dts\ntype Transport = Record<string, Transporter>;\n```\n\n</div>\n\n## Transporter\n\nA member of the [`transport`](/docs/kit/hooks#Universal-hooks-transport) hook.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Transporter<\n\tT = any,\n\tU = Exclude<\n\t\tany,\n\t\tfalse | 0 | '' | null | undefined | typeof NaN\n\t>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nencode: (value: T) => false | U;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndecode: (data: U) => T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## Private types\n\nThe following are referenced by the public types documented above, but cannot be imported directly:\n\n## AdapterEntry\n\n<div class=\"ts-block\">\n\n```dts\ninterface AdapterEntry {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nid: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nA string that uniquely identifies an HTTP service (e.g. serverless function) and is used for deduplication.\nFor example, `/foo/a-[b]` and `/foo/[c]` are different routes, but would both\nbe represented in a Netlify _redirects file as `/foo/:param`, so they share an ID\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfilter(route: RouteDefinition): boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that compares the candidate route with the current route to determine\nif it should be grouped with the current route.\n\nUse cases:\n- Fallback pages: `/foo/[c]` is a fallback for `/foo/a-[b]`, and `/[...catchall]` is a fallback for all routes\n- Grouping routes that share a common `config`: `/foo` should be deployed to the edge, `/bar` and `/baz` should be deployed to a serverless function\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncomplete(entry: { generateManifest(opts: { relativePath: string }): string }): MaybePromise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that is invoked once the entry has been created. This is where you\nshould write the function to the filesystem and generate redirect manifests.\n\n</div>\n</div></div>\n\n## Csp\n\n<div class=\"ts-block\">\n\n```dts\nnamespace Csp {\n\ttype ActionSource = 'strict-dynamic' | 'report-sample';\n\ttype BaseSource =\n\t\t| 'self'\n\t\t| 'unsafe-eval'\n\t\t| 'unsafe-hashes'\n\t\t| 'unsafe-inline'\n\t\t| 'wasm-unsafe-eval'\n\t\t| 'none';\n\ttype CryptoSource =\n\t\t`${'nonce' | 'sha256' | 'sha384' | 'sha512'}-${string}`;\n\ttype FrameSource =\n\t\t| HostSource\n\t\t| SchemeSource\n\t\t| 'self'\n\t\t| 'none';\n\ttype HostNameScheme = `${string}.${string}` | 'localhost';\n\ttype HostSource =\n\t\t`${HostProtocolSchemes}${HostNameScheme}${PortScheme}`;\n\ttype HostProtocolSchemes = `${string}://` | '';\n\ttype HttpDelineator = '/' | '?' | '#' | '\\\\';\n\ttype PortScheme = `:${number}` | '' | ':*';\n\ttype SchemeSource =\n\t\t| 'http:'\n\t\t| 'https:'\n\t\t| 'data:'\n\t\t| 'mediastream:'\n\t\t| 'blob:'\n\t\t| 'filesystem:';\n\ttype Source =\n\t\t| HostSource\n\t\t| SchemeSource\n\t\t| CryptoSource\n\t\t| BaseSource;\n\ttype Sources = Source[];\n}\n```\n\n</div>\n\n## CspDirectives\n\n<div class=\"ts-block\">\n\n```dts\ninterface CspDirectives {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n'child-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'default-src'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'frame-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'worker-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'connect-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'font-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'img-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'manifest-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'media-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'object-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'prefetch-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'script-src'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'script-src-elem'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'script-src-attr'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'style-src'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'style-src-elem'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'style-src-attr'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'base-uri'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsandbox?: Array<\n| 'allow-downloads-without-user-activation'\n| 'allow-forms'\n| 'allow-modals'\n| 'allow-orientation-lock'\n| 'allow-pointer-lock'\n| 'allow-popups'\n| 'allow-popups-to-escape-sandbox'\n| 'allow-presentation'\n| 'allow-same-origin'\n| 'allow-scripts'\n| 'allow-storage-access-by-user-activation'\n| 'allow-top-navigation'\n| 'allow-top-navigation-by-user-activation'\n>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'form-action'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'frame-ancestors'?: Array<Csp.HostSource | Csp.SchemeSource | Csp.FrameSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'navigate-to'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'report-uri'?: string[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'report-to'?: string[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'require-trusted-types-for'?: Array<'script'>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'upgrade-insecure-requests'?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'require-sri-for'?: Array<'script' | 'style' | 'script style'>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'block-all-mixed-content'?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'plugin-types'?: Array<`${string}/${string}` | 'none'>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nreferrer?: Array<\n| 'no-referrer'\n| 'no-referrer-when-downgrade'\n| 'origin'\n| 'origin-when-cross-origin'\n| 'same-origin'\n| 'strict-origin'\n| 'strict-origin-when-cross-origin'\n| 'unsafe-url'\n| 'none'\n>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\n</div>\n</div></div>\n\n## HttpMethod\n\n<div class=\"ts-block\">\n\n```dts\ntype HttpMethod =\n\t| 'GET'\n\t| 'HEAD'\n\t| 'POST'\n\t| 'PUT'\n\t| 'DELETE'\n\t| 'PATCH'\n\t| 'OPTIONS';\n```\n\n</div>\n\n## Logger\n\n<div class=\"ts-block\">\n\n```dts\ninterface Logger {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsuccess(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nerror(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwarn(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nminor(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ninfo(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## MaybePromise\n\n<div class=\"ts-block\">\n\n```dts\ntype MaybePromise<T> = T | Promise<T>;\n```\n\n</div>\n\n## PrerenderEntryGeneratorMismatchHandler\n\n<div class=\"ts-block\">\n\n```dts\ninterface PrerenderEntryGeneratorMismatchHandler {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(details: { generatedFromId: string; entry: string; matchedId: string; message: string }): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## PrerenderEntryGeneratorMismatchHandlerValue\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderEntryGeneratorMismatchHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderEntryGeneratorMismatchHandler;\n```\n\n</div>\n\n## PrerenderHttpErrorHandler\n\n<div class=\"ts-block\">\n\n```dts\ninterface PrerenderHttpErrorHandler {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(details: {\nstatus: number;\npath: string;\nreferrer: string | null;\nreferenceType: 'linked' | 'fetched';\nmessage: string;\n}): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## PrerenderHttpErrorHandlerValue\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderHttpErrorHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderHttpErrorHandler;\n```\n\n</div>\n\n## PrerenderMap\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderMap = Map<string, PrerenderOption>;\n```\n\n</div>\n\n## PrerenderMissingIdHandler\n\n<div class=\"ts-block\">\n\n```dts\ninterface PrerenderMissingIdHandler {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(details: { path: string; id: string; referrers: string[]; message: string }): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## PrerenderMissingIdHandlerValue\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderMissingIdHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderMissingIdHandler;\n```\n\n</div>\n\n## PrerenderOption\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderOption = boolean | 'auto';\n```\n\n</div>\n\n## PrerenderUnseenRoutesHandler\n\n<div class=\"ts-block\">\n\n```dts\ninterface PrerenderUnseenRoutesHandler {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(details: { routes: string[]; message: string }): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## PrerenderUnseenRoutesHandlerValue\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderUnseenRoutesHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderUnseenRoutesHandler;\n```\n\n</div>\n\n## Prerendered\n\n<div class=\"ts-block\">\n\n```dts\ninterface Prerendered {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\npages: Map<\nstring,\n{\n\t/** The location of the .html file relative to the output directory */\n\tfile: string;\n}\n>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA map of `path` to `{ file }` objects, where a path like `/foo` corresponds to `foo.html` and a path like `/bar/` corresponds to `bar/index.html`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nassets: Map<\nstring,\n{\n\t/** The MIME type of the asset */\n\ttype: string;\n}\n>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA map of `path` to `{ type }` objects.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nredirects: Map<\nstring,\n{\n\tstatus: number;\n\tlocation: string;\n}\n>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA map of redirects encountered during prerendering.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npaths: string[];\n```\n\n<div class=\"ts-block-property-details\">\n\nAn array of prerendered paths (without trailing slashes, regardless of the trailingSlash config)\n\n</div>\n</div></div>\n\n## RequestOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface RequestOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ngetClientAddress(): string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nplatform?: App.Platform;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## RouteSegment\n\n<div class=\"ts-block\">\n\n```dts\ninterface RouteSegment {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ncontent: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndynamic: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrest: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## TrailingSlash\n\n<div class=\"ts-block\">\n\n```dts\ntype TrailingSlash = 'never' | 'always' | 'ignore';\n```\n\n</div>",
+		"kit/@sveltejs-kit-hooks": "```js\n// @noErrors\nimport { sequence } from '@sveltejs/kit/hooks';\n```\n\n## sequence\n\nA helper function for sequencing multiple `handle` calls in a middleware-like manner.\nThe behavior for the `handle` options is as follows:\n- `transformPageChunk` is applied in reverse order and merged\n- `preload` is applied in forward order, the first option \"wins\" and no `preload` options after it are called\n- `filterSerializedResponseHeaders` behaves the same as `preload`\n\n```js\n// @errors: 7031\n/// file: src/hooks.server.js\nimport { sequence } from '@sveltejs/kit/hooks';\n\n/** @type {import('@sveltejs/kit').Handle} */\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/** @type {import('@sveltejs/kit').Handle} */\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);\n```\n\nThe example above would print:\n\n```\nfirst pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processing\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction sequence(...handlers: Handle[]): Handle;\n```\n\n</div>",
+		"kit/@sveltejs-kit-node-polyfills": "```js\n// @noErrors\nimport { installPolyfills } from '@sveltejs/kit/node/polyfills';\n```\n\n## installPolyfills\n\nMake various web APIs available as globals:\n- `crypto`\n- `File`\n\n<div class=\"ts-block\">\n\n```dts\nfunction installPolyfills(): void;\n```\n\n</div>",
+		"kit/@sveltejs-kit-node": "```js\n// @noErrors\nimport {\n\tcreateReadableStream,\n\tgetRequest,\n\tsetResponse\n} from '@sveltejs/kit/node';\n```\n\n## createReadableStream\n\n<blockquote class=\"since note\">\n\nAvailable since 2.4.0\n\n</blockquote>\n\nConverts a file on disk to a readable stream\n\n<div class=\"ts-block\">\n\n```dts\nfunction createReadableStream(file: string): ReadableStream;\n```\n\n</div>\n\n\n\n## getRequest\n\n<div class=\"ts-block\">\n\n```dts\nfunction getRequest({\n\trequest,\n\tbase,\n\tbodySizeLimit\n}: {\n\trequest: import('http').IncomingMessage;\n\tbase: string;\n\tbodySizeLimit?: number;\n}): Promise<Request>;\n```\n\n</div>\n\n\n\n## setResponse\n\n<div class=\"ts-block\">\n\n```dts\nfunction setResponse(\n\tres: import('http').ServerResponse,\n\tresponse: Response\n): Promise<void>;\n```\n\n</div>",
+		"kit/@sveltejs-kit-vite": "```js\n// @noErrors\nimport { sveltekit } from '@sveltejs/kit/vite';\n```\n\n## sveltekit\n\nReturns the SvelteKit Vite plugins.\n\n<div class=\"ts-block\">\n\n```dts\nfunction sveltekit(): Promise<import('vite').Plugin[]>;\n```\n\n</div>",
+		"kit/$app-environment": "```js\n// @noErrors\nimport { browser, building, dev, version } from '$app/environment';\n```\n\n## browser\n\n`true` if the app is running in the browser.\n\n<div class=\"ts-block\">\n\n```dts\nconst browser: boolean;\n```\n\n</div>\n\n\n\n## building\n\nSvelteKit analyses your app during the `build` step by running it. During this process, `building` is `true`. This also applies during prerendering.\n\n<div class=\"ts-block\">\n\n```dts\nconst building: boolean;\n```\n\n</div>\n\n\n\n## dev\n\nWhether the dev server is running. This is not guaranteed to correspond to `NODE_ENV` or `MODE`.\n\n<div class=\"ts-block\">\n\n```dts\nconst dev: boolean;\n```\n\n</div>\n\n\n\n## version\n\nThe value of `config.kit.version.name`.\n\n<div class=\"ts-block\">\n\n```dts\nconst version: string;\n```\n\n</div>",
+		"kit/$app-forms": "```js\n// @noErrors\nimport { applyAction, deserialize, enhance } from '$app/forms';\n```\n\n## applyAction\n\nThis action updates the `form` property of the current page with the given data and updates `page.status`.\nIn case of an error, it redirects to the nearest error page.\n\n<div class=\"ts-block\">\n\n```dts\nfunction applyAction<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tresult: import('@sveltejs/kit').ActionResult<\n\t\tSuccess,\n\t\tFailure\n\t>\n): Promise<void>;\n```\n\n</div>\n\n\n\n## deserialize\n\nUse this function to deserialize the response from a form submission.\nUsage:\n\n```js\n// @errors: 7031\nimport { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n\tconst response = await fetch('/form?/action', {\n\t\tmethod: 'POST',\n\t\tbody: new FormData(event.target)\n\t});\n\n\tconst result = deserialize(await response.text());\n\t// ...\n}\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction deserialize<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tresult: string\n): import('@sveltejs/kit').ActionResult<Success, Failure>;\n```\n\n</div>\n\n\n\n## enhance\n\nThis action enhances a `<form>` element that otherwise would work without JavaScript.\n\nThe `submit` function is called upon submission with the given FormData and the `action` that should be triggered.\nIf `cancel` is called, the form will not be submitted.\nYou can use the abort `controller` to cancel the submission in case another one starts.\nIf a function is returned, that function is called with the response from the server.\nIf nothing is returned, the fallback will be used.\n\nIf this function or its return value isn't set, it\n- falls back to updating the `form` prop with the returned data if the action is on the same page as the form\n- updates `page.status`\n- resets the `<form>` element and invalidates all data in case of successful submission with no redirect response\n- redirects in case of a redirect response\n- redirects to the nearest error page in case of an unexpected error\n\nIf you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.\nIt accepts an options object\n- `reset: false` if you don't want the `<form>` values to be reset after a successful submission\n- `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission\n\n<div class=\"ts-block\">\n\n```dts\nfunction enhance<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tform_element: HTMLFormElement,\n\tsubmit?: import('@sveltejs/kit').SubmitFunction<\n\t\tSuccess,\n\t\tFailure\n\t>\n): {\n\tdestroy(): void;\n};\n```\n\n</div>",
+		"kit/$app-navigation": "```js\n// @noErrors\nimport {\n\tafterNavigate,\n\tbeforeNavigate,\n\tdisableScrollHandling,\n\tgoto,\n\tinvalidate,\n\tinvalidateAll,\n\tonNavigate,\n\tpreloadCode,\n\tpreloadData,\n\tpushState,\n\trefreshAll,\n\treplaceState\n} from '$app/navigation';\n```\n\n## afterNavigate\n\nA lifecycle function that runs the supplied `callback` when the current component mounts, and also whenever we navigate to a URL.\n\n`afterNavigate` must be called during a component initialization. It remains active as long as the component is mounted.\n\n<div class=\"ts-block\">\n\n```dts\nfunction afterNavigate(\n\tcallback: (\n\t\tnavigation: import('@sveltejs/kit').AfterNavigate\n\t) => void\n): void;\n```\n\n</div>\n\n\n\n## beforeNavigate\n\nA navigation interceptor that triggers before we navigate to a URL, whether by clicking a link, calling `goto(...)`, or using the browser back/forward controls.\n\nCalling `cancel()` will prevent the navigation from completing. If `navigation.type === 'leave'` — meaning the user is navigating away from the app (or closing the tab) — calling `cancel` will trigger the native browser unload confirmation dialog. In this case, the navigation may or may not be cancelled depending on the user's response.\n\nWhen a navigation isn't to a SvelteKit-owned route (and therefore controlled by SvelteKit's client-side router), `navigation.to.route.id` will be `null`.\n\nIf the navigation will (if not cancelled) cause the document to unload — in other words `'leave'` navigations and `'link'` navigations where `navigation.to.route === null` — `navigation.willUnload` is `true`.\n\n`beforeNavigate` must be called during a component initialization. It remains active as long as the component is mounted.\n\n<div class=\"ts-block\">\n\n```dts\nfunction beforeNavigate(\n\tcallback: (\n\t\tnavigation: import('@sveltejs/kit').BeforeNavigate\n\t) => void\n): void;\n```\n\n</div>\n\n\n\n## disableScrollHandling\n\nIf called when the page is being updated following a navigation (in `onMount` or `afterNavigate` or an action, for example), this disables SvelteKit's built-in scroll handling.\nThis is generally discouraged, since it breaks user expectations.\n\n<div class=\"ts-block\">\n\n```dts\nfunction disableScrollHandling(): void;\n```\n\n</div>\n\n\n\n## goto\n\nAllows you to navigate programmatically to a given route, with options such as keeping the current element focused.\nReturns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified `url`.\n\nFor external URLs, use `window.location = url` instead of calling `goto(url)`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction goto(\n\turl: string | URL,\n\topts?: {\n\t\treplaceState?: boolean | undefined;\n\t\tnoScroll?: boolean | undefined;\n\t\tkeepFocus?: boolean | undefined;\n\t\tinvalidateAll?: boolean | undefined;\n\t\tinvalidate?:\n\t\t\t| (string | URL | ((url: URL) => boolean))[]\n\t\t\t| undefined;\n\t\tstate?: App.PageState | undefined;\n\t}\n): Promise<void>;\n```\n\n</div>\n\n\n\n## invalidate\n\nCauses any `load` functions belonging to the currently active page to re-run if they depend on the `url` in question, via `fetch` or `depends`. Returns a `Promise` that resolves when the page is subsequently updated.\n\nIf the argument is given as a `string` or `URL`, it must resolve to the same URL that was passed to `fetch` or `depends` (including query parameters).\nTo create a custom identifier, use a string beginning with `[a-z]+:` (e.g. `custom:state`) — this is a valid URL.\n\nThe `function` argument can be used define a custom predicate. It receives the full `URL` and causes `load` to rerun if `true` is returned.\nThis can be useful if you want to invalidate based on a pattern instead of a exact match.\n\n```ts\n// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction invalidate(\n\tresource: string | URL | ((url: URL) => boolean)\n): Promise<void>;\n```\n\n</div>\n\n\n\n## invalidateAll\n\nCauses all `load` functions belonging to the currently active page to re-run. Returns a `Promise` that resolves when the page is subsequently updated.\n\n<div class=\"ts-block\">\n\n```dts\nfunction invalidateAll(): Promise<void>;\n```\n\n</div>\n\n\n\n## onNavigate\n\nA lifecycle function that runs the supplied `callback` immediately before we navigate to a new URL except during full-page navigations.\n\nIf you return a `Promise`, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use `document.startViewTransition`. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.\n\nIf a function (or a `Promise` that resolves to a function) is returned from the callback, it will be called once the DOM has updated.\n\n`onNavigate` must be called during a component initialization. It remains active as long as the component is mounted.\n\n<div class=\"ts-block\">\n\n```dts\nfunction onNavigate(\n\tcallback: (\n\t\tnavigation: import('@sveltejs/kit').OnNavigate\n\t) => MaybePromise<(() => void) | void>\n): void;\n```\n\n</div>\n\n\n\n## preloadCode\n\nProgrammatically imports the code for routes that haven't yet been fetched.\nTypically, you might call this to speed up subsequent navigation.\n\nYou can specify routes by any matching pathname such as `/about` (to match `src/routes/about/+page.svelte`) or `/blog/*` (to match `src/routes/blog/[slug]/+page.svelte`).\n\nUnlike `preloadData`, this won't call `load` functions.\nReturns a Promise that resolves when the modules have been imported.\n\n<div class=\"ts-block\">\n\n```dts\nfunction preloadCode(pathname: string): Promise<void>;\n```\n\n</div>\n\n\n\n## preloadData\n\nProgrammatically preloads the given page, which means\n 1. ensuring that the code for the page is loaded, and\n 2. calling the page's load function with the appropriate options.\n\nThis is the same behaviour that SvelteKit triggers when the user taps or mouses over an `<a>` element with `data-sveltekit-preload-data`.\nIf the next navigation is to `href`, the values returned from load will be used, making navigation instantaneous.\nReturns a Promise that resolves with the result of running the new route's `load` functions once the preload is complete.\n\n<div class=\"ts-block\">\n\n```dts\nfunction preloadData(href: string): Promise<\n\t| {\n\t\t\ttype: 'loaded';\n\t\t\tstatus: number;\n\t\t\tdata: Record<string, any>;\n\t  }\n\t| {\n\t\t\ttype: 'redirect';\n\t\t\tlocation: string;\n\t  }\n>;\n```\n\n</div>\n\n\n\n## pushState\n\nProgrammatically create a new history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).\n\n<div class=\"ts-block\">\n\n```dts\nfunction pushState(\n\turl: string | URL,\n\tstate: App.PageState\n): void;\n```\n\n</div>\n\n\n\n## refreshAll\n\nCauses all currently active remote functions to refresh, and all `load` functions belonging to the currently active page to re-run (unless disabled via the option argument).\nReturns a `Promise` that resolves when the page is subsequently updated.\n\n<div class=\"ts-block\">\n\n```dts\nfunction refreshAll({\n\tincludeLoadFunctions\n}?: {\n\tincludeLoadFunctions?: boolean;\n}): Promise<void>;\n```\n\n</div>\n\n\n\n## replaceState\n\nProgrammatically replace the current history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).\n\n<div class=\"ts-block\">\n\n```dts\nfunction replaceState(\n\turl: string | URL,\n\tstate: App.PageState\n): void;\n```\n\n</div>",
+		"kit/$app-paths": "```js\n// @noErrors\nimport { asset, assets, base, resolve, resolveRoute } from '$app/paths';\n```\n\n## asset\n\n<blockquote class=\"since note\">\n\nAvailable since 2.26\n\n</blockquote>\n\nResolve the URL of an asset in your `static` directory, by prefixing it with [`config.kit.paths.assets`](/docs/kit/configuration#paths) if configured, or otherwise by prefixing it with the base path.\n\nDuring server rendering, the base path is relative and depends on the page currently being rendered.\n\n```svelte\n<script>\n\timport { asset } from '$app/paths';\n</script>\n\n<img alt=\"a potato\" src={asset('/potato.jpg')} />\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction asset(file: Asset): string;\n```\n\n</div>\n\n\n\n## assets\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`asset(...)`](/docs/kit/$app-paths#asset) instead\n\n</blockquote>\n\nAn absolute path that matches [`config.kit.paths.assets`](/docs/kit/configuration#paths).\n\n> [!NOTE] If a value for `config.kit.paths.assets` is specified, it will be replaced with `'/_svelte_kit_assets'` during `vite dev` or `vite preview`, since the assets don't yet live at their eventual URL.\n\n<div class=\"ts-block\">\n\n```dts\nlet assets:\n\t| ''\n\t| `https://${string}`\n\t| `http://${string}`\n\t| '/_svelte_kit_assets';\n```\n\n</div>\n\n\n\n## base\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`resolve(...)`](/docs/kit/$app-paths#resolve) instead\n\n</blockquote>\n\nA string that matches [`config.kit.paths.base`](/docs/kit/configuration#paths).\n\nExample usage: `<a href=\"{base}/your-page\">Link</a>`\n\n<div class=\"ts-block\">\n\n```dts\nlet base: '' | `/${string}`;\n```\n\n</div>\n\n\n\n## resolve\n\n<blockquote class=\"since note\">\n\nAvailable since 2.26\n\n</blockquote>\n\nResolve a pathname by prefixing it with the base path, if any, or resolve a route ID by populating dynamic segments with parameters.\n\nDuring server rendering, the base path is relative and depends on the page currently being rendered.\n\n```js\n// @errors: 7031\nimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction resolve<T extends RouteId | Pathname>(\n\t...args: ResolveArgs<T>\n): ResolvedPathname;\n```\n\n</div>\n\n\n\n## resolveRoute\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`resolve(...)`](/docs/kit/$app-paths#resolve) instead\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\nfunction resolveRoute<T extends RouteId | Pathname>(\n\t...args: ResolveArgs<T>\n): ResolvedPathname;\n```\n\n</div>",
+		"kit/$app-server": "```js\n// @noErrors\nimport {\n\tcommand,\n\tform,\n\tgetRequestEvent,\n\tprerender,\n\tquery,\n\tread\n} from '$app/server';\n```\n\n## command\n\n<blockquote class=\"since note\">\n\nAvailable since 2.27\n\n</blockquote>\n\nCreates a remote command. When called from the browser, the function will be invoked on the server via a `fetch` call.\n\nSee [Remote functions](/docs/kit/remote-functions#command) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction command<Output>(\n\tfn: () => Output\n): RemoteCommand<void, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction command<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => Output\n): RemoteCommand<Input, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction command<Schema extends StandardSchemaV1, Output>(\n\tvalidate: Schema,\n\tfn: (arg: StandardSchemaV1.InferOutput<Schema>) => Output\n): RemoteCommand<\n\tStandardSchemaV1.InferInput<Schema>,\n\tOutput\n>;\n```\n\n</div>\n\n\n\n## form\n\n<blockquote class=\"since note\">\n\nAvailable since 2.27\n\n</blockquote>\n\nCreates a form object that can be spread onto a `<form>` element.\n\nSee [Remote functions](/docs/kit/remote-functions#form) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction form<Output>(\n\tfn: (\n\t\tinvalid: import('@sveltejs/kit').Invalid<void>\n\t) => MaybePromise<Output>\n): RemoteForm<void, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction form<Input extends RemoteFormInput, Output>(\n\tvalidate: 'unchecked',\n\tfn: (\n\t\tdata: Input,\n\t\tinvalid: import('@sveltejs/kit').Invalid<Input>\n\t) => MaybePromise<Output>\n): RemoteForm<Input, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction form<\n\tSchema extends StandardSchemaV1<\n\t\tRemoteFormInput,\n\t\tRecord<string, any>\n\t>,\n\tOutput\n>(\n\tvalidate: Schema,\n\tfn: (\n\t\tdata: StandardSchemaV1.InferOutput<Schema>,\n\t\tinvalid: import('@sveltejs/kit').Invalid<\n\t\t\tStandardSchemaV1.InferOutput<Schema>\n\t\t>\n\t) => MaybePromise<Output>\n): RemoteForm<StandardSchemaV1.InferInput<Schema>, Output>;\n```\n\n</div>\n\n\n\n## getRequestEvent\n\n<blockquote class=\"since note\">\n\nAvailable since 2.20.0\n\n</blockquote>\n\nReturns the current `RequestEvent`. Can be used inside server hooks, server `load` functions, actions, and endpoints (and functions called by them).\n\nIn environments without [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html#class-asynclocalstorage), this must be called synchronously (i.e. not after an `await`).\n\n<div class=\"ts-block\">\n\n```dts\nfunction getRequestEvent(): RequestEvent;\n```\n\n</div>\n\n\n\n## prerender\n\n<blockquote class=\"since note\">\n\nAvailable since 2.27\n\n</blockquote>\n\nCreates a remote prerender function. When called from the browser, the function will be invoked on the server via a `fetch` call.\n\nSee [Remote functions](/docs/kit/remote-functions#prerender) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction prerender<Output>(\n\tfn: () => MaybePromise<Output>,\n\toptions?:\n\t\t| {\n\t\t\t\tinputs?: RemotePrerenderInputsGenerator<void>;\n\t\t\t\tdynamic?: boolean;\n\t\t  }\n\t\t| undefined\n): RemotePrerenderFunction<void, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction prerender<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => MaybePromise<Output>,\n\toptions?:\n\t\t| {\n\t\t\t\tinputs?: RemotePrerenderInputsGenerator<Input>;\n\t\t\t\tdynamic?: boolean;\n\t\t  }\n\t\t| undefined\n): RemotePrerenderFunction<Input, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction prerender<Schema extends StandardSchemaV1, Output>(\n\tschema: Schema,\n\tfn: (\n\t\targ: StandardSchemaV1.InferOutput<Schema>\n\t) => MaybePromise<Output>,\n\toptions?:\n\t\t| {\n\t\t\t\tinputs?: RemotePrerenderInputsGenerator<\n\t\t\t\t\tStandardSchemaV1.InferInput<Schema>\n\t\t\t\t>;\n\t\t\t\tdynamic?: boolean;\n\t\t  }\n\t\t| undefined\n): RemotePrerenderFunction<\n\tStandardSchemaV1.InferInput<Schema>,\n\tOutput\n>;\n```\n\n</div>\n\n\n\n## query\n\n<blockquote class=\"since note\">\n\nAvailable since 2.27\n\n</blockquote>\n\nCreates a remote query. When called from the browser, the function will be invoked on the server via a `fetch` call.\n\nSee [Remote functions](/docs/kit/remote-functions#query) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction query<Output>(\n\tfn: () => MaybePromise<Output>\n): RemoteQueryFunction<void, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction query<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => MaybePromise<Output>\n): RemoteQueryFunction<Input, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction query<Schema extends StandardSchemaV1, Output>(\n\tschema: Schema,\n\tfn: (\n\t\targ: StandardSchemaV1.InferOutput<Schema>\n\t) => MaybePromise<Output>\n): RemoteQueryFunction<\n\tStandardSchemaV1.InferInput<Schema>,\n\tOutput\n>;\n```\n\n</div>\n\n\n\n## read\n\n<blockquote class=\"since note\">\n\nAvailable since 2.4.0\n\n</blockquote>\n\nRead the contents of an imported asset from the filesystem\n\n```js\n// @errors: 7031\nimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction read(asset: string): Response;\n```\n\n</div>\n\n\n\n## query\n\n<div class=\"ts-block\">\n\n```dts\nnamespace query {\n\t/**\n\t * Creates a batch query function that collects multiple calls and executes them in a single request\n\t *\n\t * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.batch) for full documentation.\n\t *\n\t * @since 2.35\n\t */\n\tfunction batch<Input, Output>(\n\t\tvalidate: 'unchecked',\n\t\tfn: (\n\t\t\targs: Input[]\n\t\t) => MaybePromise<(arg: Input, idx: number) => Output>\n\t): RemoteQueryFunction<Input, Output>;\n\t/**\n\t * Creates a batch query function that collects multiple calls and executes them in a single request\n\t *\n\t * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.batch) for full documentation.\n\t *\n\t * @since 2.35\n\t */\n\tfunction batch<Schema extends StandardSchemaV1, Output>(\n\t\tschema: Schema,\n\t\tfn: (\n\t\t\targs: StandardSchemaV1.InferOutput<Schema>[]\n\t\t) => MaybePromise<\n\t\t\t(\n\t\t\t\targ: StandardSchemaV1.InferOutput<Schema>,\n\t\t\t\tidx: number\n\t\t\t) => Output\n\t\t>\n\t): RemoteQueryFunction<\n\t\tStandardSchemaV1.InferInput<Schema>,\n\t\tOutput\n\t>;\n}\n```\n\n</div>",
+		"kit/$app-state": "SvelteKit makes three read-only state objects available via the `$app/state` module — `page`, `navigating` and `updated`.\n\n> [!NOTE]\n> This module was added in 2.12. If you're using an earlier version of SvelteKit, use [`$app/stores`]($app-stores) instead.\n\n\n\n```js\n// @noErrors\nimport { navigating, page, updated } from '$app/state';\n```\n\n## navigating\n\nA read-only object representing an in-progress navigation, with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.\nValues are `null` when no navigation is occurring, or during server rendering.\n\n<div class=\"ts-block\">\n\n```dts\nconst navigating:\n\t| import('@sveltejs/kit').Navigation\n\t| {\n\t\t\tfrom: null;\n\t\t\tto: null;\n\t\t\ttype: null;\n\t\t\twillUnload: null;\n\t\t\tdelta: null;\n\t\t\tcomplete: null;\n\t  };\n```\n\n</div>\n\n\n\n## page\n\nA read-only reactive object with information about the current page, serving several use cases:\n- retrieving the combined `data` of all pages/layouts anywhere in your component tree (also see [loading data](/docs/kit/load))\n- retrieving the current value of the `form` prop anywhere in your component tree (also see [form actions](/docs/kit/form-actions))\n- retrieving the page state that was set through `goto`, `pushState` or `replaceState` (also see [goto](/docs/kit/$app-navigation#goto) and [shallow routing](/docs/kit/shallow-routing))\n- retrieving metadata such as the URL you're on, the current route and its parameters, and whether or not there was an error\n\n```svelte\n<!--- file: +layout.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<p>Currently at {page.url.pathname}</p>\n\n{#if page.error}\n\t<span class=\"red\">Problem detected</span>\n{:else}\n\t<span class=\"small\">All systems operational</span>\n{/if}\n```\n\nChanges to `page` are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\timport { page } from '$app/state';\n\tconst id = $derived(page.params.id); // This will correctly update id for usage on this page\n\t$: badId = page.params.id; // Do not use; will never update after initial load\n</script>\n```\n\nOn the server, values can only be read during rendering (in other words _not_ in e.g. `load` functions). In the browser, the values can be read at any time.\n\n<div class=\"ts-block\">\n\n```dts\nconst page: import('@sveltejs/kit').Page;\n```\n\n</div>\n\n\n\n## updated\n\nA read-only reactive value that's initially `false`. If [`version.pollInterval`](/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update `current` to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.\n\n<div class=\"ts-block\">\n\n```dts\nconst updated: {\n\tget current(): boolean;\n\tcheck(): Promise<boolean>;\n};\n```\n\n</div>",
+		"kit/$app-stores": "This module contains store-based equivalents of the exports from [`$app/state`]($app-state). If you're using SvelteKit 2.12 or later, use that module instead.\n\n\n\n```js\n// @noErrors\nimport { getStores, navigating, page, updated } from '$app/stores';\n```\n\n## getStores\n\n<div class=\"ts-block\">\n\n```dts\nfunction getStores(): {\n\tpage: typeof page;\n\n\tnavigating: typeof navigating;\n\n\tupdated: typeof updated;\n};\n```\n\n</div>\n\n\n\n## navigating\n\n<blockquote class=\"tag deprecated note\">\n\nUse `navigating` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))\n\n</blockquote>\n\nA readable store.\nWhen navigating starts, its value is a `Navigation` object with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.\nWhen navigating finishes, its value reverts to `null`.\n\nOn the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.\n\n<div class=\"ts-block\">\n\n```dts\nconst navigating: import('svelte/store').Readable<\n\timport('@sveltejs/kit').Navigation | null\n>;\n```\n\n</div>\n\n\n\n## page\n\n<blockquote class=\"tag deprecated note\">\n\nUse `page` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))\n\n</blockquote>\n\nA readable store whose value contains page data.\n\nOn the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.\n\n<div class=\"ts-block\">\n\n```dts\nconst page: import('svelte/store').Readable<\n\timport('@sveltejs/kit').Page\n>;\n```\n\n</div>\n\n\n\n## updated\n\n<blockquote class=\"tag deprecated note\">\n\nUse `updated` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))\n\n</blockquote>\n\nA readable store whose initial value is `false`. If [`version.pollInterval`](/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.\n\nOn the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.\n\n<div class=\"ts-block\">\n\n```dts\nconst updated: import('svelte/store').Readable<boolean> & {\n\tcheck(): Promise<boolean>;\n};\n```\n\n</div>",
+		"kit/$app-types": "This module contains generated types for the routes in your app.\n\n<blockquote class=\"since note\">\n\t<p>Available since 2.26</p>\n</blockquote>\n\n```js\n// @noErrors\nimport type { RouteId, RouteParams, LayoutParams } from '$app/types';\n```\n\n## Asset\n\nA union of all the filenames of assets contained in your `static` directory, plus a `string` wildcard for asset paths generated from `import` declarations.\n\n<div class=\"ts-block\">\n\n```dts\ntype Asset = '/favicon.png' | '/robots.txt' | (string & {});\n```\n\n</div>\n\n## RouteId\n\nA union of all the route IDs in your app. Used for `page.route.id` and `event.route.id`.\n\n<div class=\"ts-block\">\n\n```dts\ntype RouteId = '/' | '/my-route' | '/my-other-route/[param]';\n```\n\n</div>\n\n## Pathname\n\nA union of all valid pathnames in your app.\n\n<div class=\"ts-block\">\n\n```dts\ntype Pathname = '/' | '/my-route' | `/my-other-route/${string}` & {};\n```\n\n</div>\n\n## ResolvedPathname\n\nSimilar to `Pathname`, but possibly prefixed with a [base path](configuration#paths). Used for `page.url.pathname`.\n\n<div class=\"ts-block\">\n\n```dts\ntype ResolvedPathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {};\n```\n\n</div>\n\n## RouteParams\n\nA utility for getting the parameters associated with a given route.\n\n```ts\n// @errors: 2552\ntype BlogParams = RouteParams<'/blog/[slug]'>; // { slug: string }\n```\n\n<div class=\"ts-block\">\n\n```dts\ntype RouteParams<T extends RouteId> = { /* generated */ } | Record<string, never>;\n```\n\n</div>\n\n## LayoutParams\n\nA utility for getting the parameters associated with a given layout, which is similar to `RouteParams` but also includes optional parameters for any child route.\n\n<div class=\"ts-block\">\n\n```dts\ntype RouteParams<T extends RouteId> = { /* generated */ } | Record<string, never>;\n```\n\n</div>",
+		"kit/$env-dynamic-private": "This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) (or running [`vite preview`](/docs/kit/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](/docs/kit/configuration#env) (if configured).\n\nThis module cannot be imported into client-side code.\n\n```ts\nimport { env } from '$env/dynamic/private';\nconsole.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);\n```\n\n> [!NOTE] In `dev`, `$env/dynamic` always includes environment variables from `.env`. In `prod`, this behavior will depend on your adapter.",
+		"kit/$env-dynamic-public": "Similar to [`$env/dynamic/private`](/docs/kit/$env-dynamic-private), but only includes variables that begin with [`config.kit.env.publicPrefix`](/docs/kit/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.\n\nNote that public dynamic environment variables must all be sent from the server to the client, causing larger network requests — when possible, use `$env/static/public` instead.\n\n```ts\nimport { env } from '$env/dynamic/public';\nconsole.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);\n```",
+		"kit/$env-static-private": "Environment variables [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env`. Like [`$env/dynamic/private`](/docs/kit/$env-dynamic-private), this module cannot be imported into client-side code. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](/docs/kit/configuration#env) (if configured).\n\n_Unlike_ [`$env/dynamic/private`](/docs/kit/$env-dynamic-private), the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination.\n\n```ts\nimport { API_KEY } from '$env/static/private';\n```\n\nNote that all environment variables referenced in your code should be declared (for example in an `.env` file), even if they don't have a value until the app is deployed:\n\n```\nMY_FEATURE_FLAG=\"\"\n```\n\nYou can override `.env` values from the command line like so:\n\n```sh\nMY_FEATURE_FLAG=\"enabled\" npm run dev\n```",
+		"kit/$env-static-public": "Similar to [`$env/static/private`](/docs/kit/$env-static-private), except that it only includes environment variables that begin with [`config.kit.env.publicPrefix`](/docs/kit/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.\n\nValues are replaced statically at build time.\n\n```ts\nimport { PUBLIC_BASE_URL } from '$env/static/public';\n```",
+		"kit/$lib": "SvelteKit automatically makes files under `src/lib` available using the `$lib` import alias. You can change which directory this alias points to in your [config file](configuration#files).\n\n```svelte\n<!--- file: src/lib/Component.svelte --->\nA reusable component\n```\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<script>\n    import Component from '$lib/Component.svelte';\n</script>\n\n<Component />\n```",
+		"kit/$service-worker": "```js\n// @noErrors\nimport { base, build, files, prerendered, version } from '$service-worker';\n```\n\nThis module is only available to [service workers](/docs/kit/service-workers).\n\n## base\n\nThe `base` path of the deployment. Typically this is equivalent to `config.kit.paths.base`, but it is calculated from `location.pathname` meaning that it will continue to work correctly if the site is deployed to a subdirectory.\nNote that there is a `base` but no `assets`, since service workers cannot be used if `config.kit.paths.assets` is specified.\n\n<div class=\"ts-block\">\n\n```dts\nconst base: string;\n```\n\n</div>\n\n\n\n## build\n\nAn array of URL strings representing the files generated by Vite, suitable for caching with `cache.addAll(build)`.\nDuring development, this is an empty array.\n\n<div class=\"ts-block\">\n\n```dts\nconst build: string[];\n```\n\n</div>\n\n\n\n## files\n\nAn array of URL strings representing the files in your static directory, or whatever directory is specified by `config.kit.files.assets`. You can customize which files are included from `static` directory using [`config.kit.serviceWorker.files`](/docs/kit/configuration#serviceWorker)\n\n<div class=\"ts-block\">\n\n```dts\nconst files: string[];\n```\n\n</div>\n\n\n\n## prerendered\n\nAn array of pathnames corresponding to prerendered pages and endpoints.\nDuring development, this is an empty array.\n\n<div class=\"ts-block\">\n\n```dts\nconst prerendered: string[];\n```\n\n</div>\n\n\n\n## version\n\nSee [`config.kit.version`](/docs/kit/configuration#version). It's useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.\n\n<div class=\"ts-block\">\n\n```dts\nconst version: string;\n```\n\n</div>",
+		"kit/configuration": "Your project's configuration lives in a `svelte.config.js` file at the root of your project. As well as SvelteKit, this config object is used by other tooling that integrates with Svelte such as editor extensions.\n\n```js\n/// file: svelte.config.js\n// @filename: ambient.d.ts\ndeclare module '@sveltejs/adapter-auto' {\n\tconst plugin: () => import('@sveltejs/kit').Adapter;\n\texport default plugin;\n}\n\n// @filename: index.js\n// ---cut---\nimport adapter from '@sveltejs/adapter-auto';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n## Config\n\nAn extension of [`vite-plugin-svelte`'s options](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#svelte-options).\n\n<div class=\"ts-block\">\n\n```dts\ninterface Config extends SvelteConfig {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nkit?: KitConfig;\n```\n\n<div class=\"ts-block-property-details\">\n\nSvelteKit options.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n[key: string]: any;\n```\n\n<div class=\"ts-block-property-details\">\n\nAny additional options required by tooling that integrates with Svelte.\n\n</div>\n</div></div>\n\n\n\n## KitConfig\n\nThe `kit` property configures SvelteKit, and can have the following properties:\n\n## adapter\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `undefined`\n\n</div>\n\nYour [adapter](/docs/kit/adapters) is run when executing `vite build`. It determines how the output is converted for different platforms.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## alias\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `{}`\n\n</div>\n\nAn object containing zero or more aliases used to replace values in `import` statements. These aliases are automatically passed to Vite and TypeScript.\n\n```js\n// @errors: 7031\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\talias: {\n\t\t\t// this will match a file\n\t\t\t'my-file': 'path/to/my-file.js',\n\n\t\t\t// this will match a directory and its contents\n\t\t\t// (`my-directory/x` resolves to `path/to/my-directory/x`)\n\t\t\t'my-directory': 'path/to/my-directory',\n\n\t\t\t// an alias ending /* will only match\n\t\t\t// the contents of a directory, not the directory itself\n\t\t\t'my-directory/*': 'path/to/my-directory/*'\n\t\t}\n\t}\n};\n```\n\n> [!NOTE] The built-in `$lib` alias is controlled by `config.kit.files.lib` as it is used for packaging.\n\n> [!NOTE] You will need to run `npm run dev` to have SvelteKit automatically generate the required alias configuration in `jsconfig.json` or `tsconfig.json`.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## appDir\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"_app\"`\n\n</div>\n\nThe directory where SvelteKit keeps its stuff, including static assets (such as JS and CSS) and internally-used routes.\n\nIf `paths.assets` is specified, there will be two app directories — `${paths.assets}/${appDir}` and `${paths.base}/${appDir}`.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## csp\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n[Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) configuration. CSP helps to protect your users against cross-site scripting (XSS) attacks, by limiting the places resources can be loaded from. For example, a configuration like this...\n\n```js\n// @errors: 7031\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tcsp: {\n\t\t\tdirectives: {\n\t\t\t\t'script-src': ['self']\n\t\t\t},\n\t\t\t// must be specified with either the `report-uri` or `report-to` directives, or both\n\t\t\treportOnly: {\n\t\t\t\t'script-src': ['self'],\n\t\t\t\t'report-uri': ['/']\n\t\t\t}\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\n...would prevent scripts loading from external sites. SvelteKit will augment the specified directives with nonces or hashes (depending on `mode`) for any inline styles and scripts it generates.\n\nTo add a nonce for scripts and links manually included in `src/app.html`, you may use the placeholder `%sveltekit.nonce%` (for example `<script nonce=\"%sveltekit.nonce%\">`).\n\nWhen pages are prerendered, the CSP header is added via a `<meta http-equiv>` tag (note that in this case, `frame-ancestors`, `report-uri` and `sandbox` directives will be ignored).\n\n> [!NOTE] When `mode` is `'auto'`, SvelteKit will use nonces for dynamically rendered pages and hashes for prerendered pages. Using nonces with prerendered pages is insecure and therefore forbidden.\n\n> [!NOTE] Note that most [Svelte transitions](/tutorial/svelte/transition) work by creating an inline `<style>` element. If you use these in your app, you must either leave the `style-src` directive unspecified or add `unsafe-inline`.\n\nIf this level of configuration is insufficient and you have more dynamic requirements, you can use the [`handle` hook](/docs/kit/hooks#Server-hooks-handle) to roll your own CSP.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nmode?: 'hash' | 'nonce' | 'auto';\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether to use hashes or nonces to restrict `<script>` and `<style>` elements. `'auto'` will use hashes for prerendered pages, and nonces for dynamically rendered pages.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ndirectives?: CspDirectives;\n```\n\n<div class=\"ts-block-property-details\">\n\nDirectives that will be added to `Content-Security-Policy` headers.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nreportOnly?: CspDirectives;\n```\n\n<div class=\"ts-block-property-details\">\n\nDirectives that will be added to `Content-Security-Policy-Report-Only` headers.\n\n</div>\n</div>\n\n</div>\n\n## csrf\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nProtection against [cross-site request forgery (CSRF)](https://owasp.org/www-community/attacks/csrf) attacks.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ncheckOrigin?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `true`\n- <span class=\"tag deprecated\">deprecated</span> Use `trustedOrigins: ['*']` instead\n\n</div>\n\nWhether to check the incoming `origin` header for `POST`, `PUT`, `PATCH`, or `DELETE` form submissions and verify that it matches the server's origin.\n\nTo allow people to make `POST`, `PUT`, `PATCH`, or `DELETE` requests with a `Content-Type` of `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain` to your app from other origins, you will need to disable this option. Be careful!\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ntrustedOrigins?: string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `[]`\n\n</div>\n\nAn array of origins that are allowed to make cross-origin form submissions to your app.\n\nEach origin should be a complete origin including protocol (e.g., `https://payment-gateway.com`).\nThis is useful for allowing trusted third-party services like payment gateways or authentication providers to submit forms to your app.\n\nIf the array contains `'*'`, all origins will be trusted. This is generally not recommended!\n\n> [!NOTE] Only add origins you completely trust, as this bypasses CSRF protection for those origins.\n\nCSRF checks only apply in production, not in local development.\n\n</div>\n</div>\n\n</div>\n\n## embedded\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nWhether or not the app is embedded inside a larger app. If `true`, SvelteKit will add its event listeners related to navigation etc on the parent of `%sveltekit.body%` instead of `window`, and will pass `params` from the server rather than inferring them from `location.pathname`.\nNote that it is generally not supported to embed multiple SvelteKit apps on the same page and use client-side SvelteKit features within them (things such as pushing to the history state assume a single instance).\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## env\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nEnvironment variable configuration\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ndir?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\".\"`\n\n</div>\n\nThe directory to search for `.env` files.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\npublicPrefix?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"PUBLIC_\"`\n\n</div>\n\nA prefix that signals that an environment variable is safe to expose to client-side code. See [`$env/static/public`](/docs/kit/$env-static-public) and [`$env/dynamic/public`](/docs/kit/$env-dynamic-public). Note that Vite's [`envPrefix`](https://vitejs.dev/config/shared-options.html#envprefix) must be set separately if you are using Vite's environment variable handling - though use of that feature should generally be unnecessary.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nprivatePrefix?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"\"`\n- <span class=\"tag since\">available since</span> v1.21.0\n\n</div>\n\nA prefix that signals that an environment variable is unsafe to expose to client-side code. Environment variables matching neither the public nor the private prefix will be discarded completely. See [`$env/static/private`](/docs/kit/$env-static-private) and [`$env/dynamic/private`](/docs/kit/$env-dynamic-private).\n\n</div>\n</div>\n\n</div>\n\n## experimental\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nExperimental features. Here be dragons. These are not subject to semantic versioning, so breaking changes or removal can happen in any release.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ntracing?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `{ server: false, serverFile: false }`\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nOptions for enabling server-side [OpenTelemetry](https://opentelemetry.io/) tracing for SvelteKit operations including the [`handle` hook](/docs/kit/hooks#Server-hooks-handle), [`load` functions](/docs/kit/load), [form actions](/docs/kit/form-actions), and [remote functions](/docs/kit/remote-functions).\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nserver?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nEnables server-side [OpenTelemetry](https://opentelemetry.io/) span emission for SvelteKit operations including the [`handle` hook](/docs/kit/hooks#Server-hooks-handle), [`load` functions](/docs/kit/load), [form actions](/docs/kit/form-actions), and [remote functions](/docs/kit/remote-functions).\n\n</div>\n</div></div>\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ninstrumentation?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nserver?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nEnables `instrumentation.server.js` for tracing and observability instrumentation.\n\n</div>\n</div></div>\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nremoteFunctions?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nWhether to enable the experimental remote functions feature. This feature is not yet stable and may be changed or removed at any time.\n\n</div>\n</div>\n\n</div>\n\n## files\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\nWhere to find various files within your project.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nsrc?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src\"`\n- <span class=\"tag since\">available since</span> v2.28\n\n</div>\n\nthe location of your source code\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nassets?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"static\"`\n\n</div>\n\na place to put static files that should have stable URLs and undergo no processing, such as `favicon.ico` or `manifest.json`\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhooks?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nclient?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/hooks.client\"`\n\n</div>\n\nThe location of your client [hooks](/docs/kit/hooks).\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nserver?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/hooks.server\"`\n\n</div>\n\nThe location of your server [hooks](/docs/kit/hooks).\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nuniversal?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/hooks\"`\n- <span class=\"tag since\">available since</span> v2.3.0\n\n</div>\n\nThe location of your universal [hooks](/docs/kit/hooks).\n\n</div>\n</div></div>\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nlib?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/lib\"`\n\n</div>\n\nyour app's internal library, accessible throughout the codebase as `$lib`\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nparams?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/params\"`\n\n</div>\n\na directory containing [parameter matchers](/docs/kit/advanced-routing#Matching)\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nroutes?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/routes\"`\n\n</div>\n\nthe files that define the structure of your app (see [Routing](/docs/kit/routing))\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nserviceWorker?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/service-worker\"`\n\n</div>\n\nthe location of your service worker's entry point (see [Service workers](/docs/kit/service-workers))\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nappTemplate?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/app.html\"`\n\n</div>\n\nthe location of the template for HTML responses\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nerrorTemplate?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/error.html\"`\n\n</div>\n\nthe location of the template for fallback error responses\n\n</div>\n</div>\n\n</div>\n\n## inlineStyleThreshold\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `0`\n\n</div>\n\nInline CSS inside a `<style>` block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file in UTF-16 code units, as specified by the [String.length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) property, to be inlined. All CSS files needed for the page that are smaller than this value are merged and inlined in a `<style>` block.\n\n> [!NOTE] This results in fewer initial requests and can improve your [First Contentful Paint](https://web.dev/first-contentful-paint) score. However, it generates larger HTML output and reduces the effectiveness of browser caches. Use it advisedly.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## moduleExtensions\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `[\".js\", \".ts\"]`\n\n</div>\n\nAn array of file extensions that SvelteKit will treat as modules. Files with extensions that match neither `config.extensions` nor `config.kit.moduleExtensions` will be ignored by the router.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## outDir\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\".svelte-kit\"`\n\n</div>\n\nThe directory that SvelteKit writes files to during `dev` and `build`. You should exclude this directory from version control.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## output\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nOptions related to the build output format\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\npreloadStrategy?: 'modulepreload' | 'preload-js' | 'preload-mjs';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"modulepreload\"`\n- <span class=\"tag since\">available since</span> v1.8.4\n\n</div>\n\nSvelteKit will preload the JavaScript modules needed for the initial page to avoid import 'waterfalls', resulting in faster application startup. There\nare three strategies with different trade-offs:\n- `modulepreload` - uses `<link rel=\"modulepreload\">`. This delivers the best results in Chromium-based browsers, in Firefox 115+, and Safari 17+. It is ignored in older browsers.\n- `preload-js` - uses `<link rel=\"preload\">`. Prevents waterfalls in Chromium and Safari, but Chromium will parse each module twice (once as a script, once as a module). Causes modules to be requested twice in Firefox. This is a good setting if you want to maximise performance for users on iOS devices at the cost of a very slight degradation for Chromium users.\n- `preload-mjs` - uses `<link rel=\"preload\">` but with the `.mjs` extension which prevents double-parsing in Chromium. Some static webservers will fail to serve .mjs files with a `Content-Type: application/javascript` header, which will cause your application to break. If that doesn't apply to you, this is the option that will deliver the best performance for the largest number of users, until `modulepreload` is more widely supported.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nbundleStrategy?: 'split' | 'single' | 'inline';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `'split'`\n- <span class=\"tag since\">available since</span> v2.13.0\n\n</div>\n\nThe bundle strategy option affects how your app's JavaScript and CSS files are loaded.\n- If `'split'`, splits the app up into multiple .js/.css files so that they are loaded lazily as the user navigates around the app. This is the default, and is recommended for most scenarios.\n- If `'single'`, creates just one .js bundle and one .css file containing code for the entire app.\n- If `'inline'`, inlines all JavaScript and CSS of the entire app into the HTML. The result is usable without a server (i.e. you can just open the file in your browser).\n\nWhen using `'split'`, you can also adjust the bundling behaviour by setting [`output.experimentalMinChunkSize`](https://rollupjs.org/configuration-options/#output-experimentalminchunksize) and [`output.manualChunks`](https://rollupjs.org/configuration-options/#output-manualchunks) inside your Vite config's [`build.rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions).\n\nIf you want to inline your assets, you'll need to set Vite's [`build.assetsInlineLimit`](https://vite.dev/config/build-options.html#build-assetsinlinelimit) option to an appropriate size then import your assets through Vite.\n\n```js\n// @errors: 7031\n/// file: vite.config.js\nimport { sveltekit } from '@sveltejs/kit/vite';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n\tplugins: [sveltekit()],\n\tbuild: {\n\t\t// inline all imported assets\n\t\tassetsInlineLimit: Infinity\n\t}\n});\n```\n\n```svelte\n/// file: src/routes/+layout.svelte\n<script>\n\t// import the asset through Vite\n\timport favicon from './favicon.png';\n</script>\n\n<svelte:head>\n\t<!-- this asset will be inlined as a base64 URL -->\n\t<link rel=\"icon\" href={favicon} />\n</svelte:head>\n```\n\n</div>\n</div>\n\n</div>\n\n## paths\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nassets?: '' | `http://${string}` | `https://${string}`;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"\"`\n\n</div>\n\nAn absolute path that your app's files are served from. This is useful if your files are served from a storage bucket of some kind.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nbase?: '' | `/${string}`;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"\"`\n\n</div>\n\nA root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](/docs/kit/$app-paths#base) for that: `<a href=\"{base}/your-page\">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nrelative?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `true`\n- <span class=\"tag since\">available since</span> v1.9.0\n\n</div>\n\nWhether to use relative asset paths.\n\nIf `true`, `base` and `assets` imported from `$app/paths` will be replaced with relative asset paths during server-side rendering, resulting in more portable HTML.\nIf `false`, `%sveltekit.assets%` and references to build artifacts will always be root-relative paths, unless `paths.assets` is an external URL\n\n[Single-page app](/docs/kit/single-page-apps) fallback pages will always use absolute paths, regardless of this setting.\n\nIf your app uses a `<base>` element, you should set this to `false`, otherwise asset URLs will incorrectly be resolved against the `<base>` URL rather than the current page.\n\nIn 1.0, `undefined` was a valid value, which was set by default. In that case, if `paths.assets` was not external, SvelteKit would replace `%sveltekit.assets%` with a relative path and use relative paths to reference build artifacts, but `base` and `assets` imported from `$app/paths` would be as specified in your config.\n\n</div>\n</div>\n\n</div>\n\n## prerender\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nSee [Prerendering](/docs/kit/page-options#prerender).\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nconcurrency?: number;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `1`\n\n</div>\n\nHow many pages can be prerendered simultaneously. JS is single-threaded, but in cases where prerendering performance is network-bound (for example loading content from a remote CMS) this can speed things up by processing other tasks while waiting on the network response.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ncrawl?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `true`\n\n</div>\n\nWhether SvelteKit should find pages to prerender by following links from `entries`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nentries?: Array<'*' | `/${string}`>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `[\"*\"]`\n\n</div>\n\nAn array of pages to prerender, or start crawling from (if `crawl: true`). The `*` string includes all routes containing no required `[parameters]`  with optional parameters included as being empty (since SvelteKit doesn't know what value any parameters should have).\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhandleHttpError?: PrerenderHttpErrorHandlerValue;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"fail\"`\n- <span class=\"tag since\">available since</span> v1.15.7\n\n</div>\n\nHow to respond to HTTP errors encountered while prerendering the app.\n\n- `'fail'` — fail the build\n- `'ignore'` - silently ignore the failure and continue\n- `'warn'` — continue, but print a warning\n- `(details) => void` — a custom error handler that takes a `details` object with `status`, `path`, `referrer`, `referenceType` and `message` properties. If you `throw` from this function, the build will fail\n\n```js\n// @errors: 7031\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tprerender: {\n\t\t\thandleHttpError: ({ path, referrer, message }) => {\n\t\t\t\t// ignore deliberate link to shiny 404 page\n\t\t\t\tif (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// otherwise fail the build\n\t\t\t\tthrow new Error(message);\n\t\t\t}\n\t\t}\n\t}\n};\n```\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhandleMissingId?: PrerenderMissingIdHandlerValue;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"fail\"`\n- <span class=\"tag since\">available since</span> v1.15.7\n\n</div>\n\nHow to respond when hash links from one prerendered page to another don't correspond to an `id` on the destination page.\n\n- `'fail'` — fail the build\n- `'ignore'` - silently ignore the failure and continue\n- `'warn'` — continue, but print a warning\n- `(details) => void` — a custom error handler that takes a `details` object with `path`, `id`, `referrers` and `message` properties. If you `throw` from this function, the build will fail\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhandleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"fail\"`\n- <span class=\"tag since\">available since</span> v1.16.0\n\n</div>\n\nHow to respond when an entry generated by the `entries` export doesn't match the route it was generated from.\n\n- `'fail'` — fail the build\n- `'ignore'` - silently ignore the failure and continue\n- `'warn'` — continue, but print a warning\n- `(details) => void` — a custom error handler that takes a `details` object with `generatedFromId`, `entry`, `matchedId` and `message` properties. If you `throw` from this function, the build will fail\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhandleUnseenRoutes?: PrerenderUnseenRoutesHandlerValue;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"fail\"`\n- <span class=\"tag since\">available since</span> v2.16.0\n\n</div>\n\nHow to respond when a route is marked as prerenderable but has not been prerendered.\n\n- `'fail'` — fail the build\n- `'ignore'` - silently ignore the failure and continue\n- `'warn'` — continue, but print a warning\n- `(details) => void` — a custom error handler that takes a `details` object with a `routes` property which contains all routes that haven't been prerendered. If you `throw` from this function, the build will fail\n\nThe default behavior is to fail the build. This may be undesirable when you know that some of your routes may never be reached under certain\ncircumstances such as a CMS not returning data for a specific area, resulting in certain routes never being reached.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\norigin?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"http://sveltekit-prerender\"`\n\n</div>\n\nThe value of `url.origin` during prerendering; useful if it is included in rendered content.\n\n</div>\n</div>\n\n</div>\n\n## router\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ntype?: 'pathname' | 'hash';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"pathname\"`\n- <span class=\"tag since\">available since</span> v2.14.0\n\n</div>\n\nWhat type of client-side router to use.\n- `'pathname'` is the default and means the current URL pathname determines the route\n- `'hash'` means the route is determined by `location.hash`. In this case, SSR and prerendering are disabled. This is only recommended if `pathname` is not an option, for example because you don't control the webserver where your app is deployed.\n\tIt comes with some caveats: you can't use server-side rendering (or indeed any server logic), and you have to make sure that the links in your app all start with #/, or they won't work. Beyond that, everything works exactly like a normal SvelteKit app.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nresolution?: 'client' | 'server';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"client\"`\n- <span class=\"tag since\">available since</span> v2.17.0\n\n</div>\n\nHow to determine which route to load when navigating to a new page.\n\nBy default, SvelteKit will serve a route manifest to the browser.\nWhen navigating, this manifest is used (along with the `reroute` hook, if it exists) to determine which components to load and which `load` functions to run.\nBecause everything happens on the client, this decision can be made immediately. The drawback is that the manifest needs to be\nloaded and parsed before the first navigation can happen, which may have an impact if your app contains many routes.\n\nAlternatively, SvelteKit can determine the route on the server. This means that for every navigation to a path that has not yet been visited, the server will be asked to determine the route.\nThis has several advantages:\n- The client does not need to load the routing manifest upfront, which can lead to faster initial page loads\n- The list of routes is hidden from public view\n- The server has an opportunity to intercept each navigation (for example through a middleware), enabling (for example) A/B testing opaque to SvelteKit\n\nThe drawback is that for unvisited paths, resolution will take slightly longer (though this is mitigated by [preloading](/docs/kit/link-options#data-sveltekit-preload-data)).\n\n> [!NOTE] When using server-side route resolution and prerendering, the resolution is prerendered along with the route itself.\n\n</div>\n</div>\n\n</div>\n\n## serviceWorker\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## typescript\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nconfig?: (config: Record<string, any>) => Record<string, any> | void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `(config) => config`\n- <span class=\"tag since\">available since</span> v1.3.0\n\n</div>\n\nA function that allows you to edit the generated `tsconfig.json`. You can mutate the config (recommended) or return a new one.\nThis is useful for extending a shared `tsconfig.json` in a monorepo root, for example.\n\nNote that any paths configured here should be relative to the generated config file, which is written to `.svelte-kit/tsconfig.json`.\n\n</div>\n</div>\n\n</div>\n\n## version\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nClient-side navigation can be buggy if you deploy a new version of your app while people are using it. If the code for the new page is already loaded, it may have stale content; if it isn't, the app's route manifest may point to a JavaScript file that no longer exists.\nSvelteKit helps you solve this problem through version management.\nIf SvelteKit encounters an error while loading the page and detects that a new version has been deployed (using the `name` specified here, which defaults to a timestamp of the build) it will fall back to traditional full-page navigation.\nNot all navigations will result in an error though, for example if the JavaScript for the next page is already loaded. If you still want to force a full-page navigation in these cases, use techniques such as setting the `pollInterval` and then using `beforeNavigate`:\n```html\n/// file: +layout.svelte\n<script>\n\timport { beforeNavigate } from '$app/navigation';\n\timport { updated } from '$app/state';\n\n\tbeforeNavigate(({ willUnload, to }) => {\n\t\tif (updated.current && !willUnload && to?.url) {\n\t\t\tlocation.href = to.url.href;\n\t\t}\n\t});\n</script>\n```\n\nIf you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of [`updated.current`](/docs/kit/$app-state#updated) `true` when it detects one.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nname?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe current app version string. If specified, this must be deterministic (e.g. a commit ref rather than `Math.random()` or `Date.now().toString()`), otherwise defaults to a timestamp of the build.\n\nFor example, to use the current commit hash, you could do use `git rev-parse HEAD`:\n\n```js\n// @errors: 7031\n/// file: svelte.config.js\nimport * as child_process from 'node:child_process';\n\nexport default {\n\tkit: {\n\t\tversion: {\n\t\t\tname: child_process.execSync('git rev-parse HEAD').toString().trim()\n\t\t}\n\t}\n};\n```\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\npollInterval?: number;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `0`\n\n</div>\n\nThe interval in milliseconds to poll for version changes. If this is `0`, no polling occurs.\n\n</div>\n</div>\n\n</div>",
+		"kit/cli": "SvelteKit projects use [Vite](https://vitejs.dev), meaning you'll mostly use its CLI (albeit via `npm run dev/build/preview` scripts):\n\n- `vite dev` — start a development server\n- `vite build` — build a production version of your app\n- `vite preview` — run the production version locally\n\nHowever SvelteKit includes its own CLI for initialising your project:\n\n## svelte-kit sync\n\n`svelte-kit sync` creates the `tsconfig.json` and all generated types (which you can import as `./$types` inside routing files) for your project. When you create a new project, it is listed as the `prepare` script and will be run automatically as part of the npm lifecycle, so you should not ordinarily have to run this command.",
+		"kit/types": "## Generated types\n\nThe `RequestHandler` and `Load` types both accept a `Params` argument allowing you to type the `params` object. For example this endpoint expects `foo`, `bar` and `baz` params:\n\n```js\n/// file: src/routes/[foo]/[bar]/[baz]/+server.js\n// @errors: 2355 2322 1360\n/** @type {import('@sveltejs/kit').RequestHandler<{\n    foo: string;\n    bar: string;\n    baz: string\n  }>} */\nexport async function GET({ params }) {\n\t// ...\n}\n```\n\nNeedless to say, this is cumbersome to write out, and less portable (if you were to rename the `[foo]` directory to `[qux]`, the type would no longer reflect reality).\n\nTo solve this problem, SvelteKit generates `.d.ts` files for each of your endpoints and pages:\n\n```ts\n/// file: .svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d.ts\n/// link: true\nimport type * as Kit from '@sveltejs/kit';\n\ntype RouteParams = {\n\tfoo: string;\n\tbar: string;\n\tbaz: string;\n};\n\nexport type RequestHandler = Kit.RequestHandler<RouteParams>;\nexport type PageLoad = Kit.Load<RouteParams>;\n```\n\nThese files can be imported into your endpoints and pages as siblings, thanks to the [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs) option in your TypeScript configuration:\n\n```js\n/// file: src/routes/[foo]/[bar]/[baz]/+server.js\n// @filename: $types.d.ts\nimport type * as Kit from '@sveltejs/kit';\n\ntype RouteParams = {\n\tfoo: string;\n\tbar: string;\n\tbaz: string;\n}\n\nexport type RequestHandler = Kit.RequestHandler<RouteParams>;\n\n// @filename: index.js\n// @errors: 2355 2322\n// ---cut---\n/** @type {import('./$types').RequestHandler} */\nexport async function GET({ params }) {\n\t// ...\n}\n```\n\n```js\n/// file: src/routes/[foo]/[bar]/[baz]/+page.js\n// @filename: $types.d.ts\nimport type * as Kit from '@sveltejs/kit';\n\ntype RouteParams = {\n\tfoo: string;\n\tbar: string;\n\tbaz: string;\n}\n\nexport type PageLoad = Kit.Load<RouteParams>;\n\n// @filename: index.js\n// @errors: 2355\n// ---cut---\n/** @type {import('./$types').PageLoad} */\nexport async function load({ params, fetch }) {\n\t// ...\n}\n```\n\nThe return types of the load functions are then available through the `$types` module as `PageData` and `LayoutData` respectively, while the union of the return values of all `Actions` is available as `ActionData`.\n\nStarting with version 2.16.0, two additional helper types are provided: `PageProps` defines `data: PageData`, as well as `form: ActionData`, when there are actions defined, while `LayoutProps` defines `data: LayoutData`, as well as `children: Snippet`.\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data, form } = $props();\n</script>\n```\n\n> [!LEGACY]\n> Before 2.16.0:\n> ```svelte\n> <!--- file: src/routes/+page.svelte --->\n> <script>\n> \t/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */\n> \tlet { data, form } = $props();\n> </script>\n> ```\n>\n> Using Svelte 4:\n> ```svelte\n> <!--- file: src/routes/+page.svelte --->\n> <script>\n>   /** @type {import('./$types').PageData} */\n>   export let data;\n>   /** @type {import('./$types').ActionData} */\n>   export let form;\n> </script>\n> ```\n\n> [!NOTE] For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json` (where `.svelte-kit` is your [`outDir`](configuration#outDir)):\n>\n> `{ \"extends\": \"./.svelte-kit/tsconfig.json\" }`\n\n### Default tsconfig.json\n\nThe generated `.svelte-kit/tsconfig.json` file contains a mixture of options. Some are generated programmatically based on your project configuration, and should generally not be overridden without good reason:\n\n```json\n/// file: .svelte-kit/tsconfig.json\n{\n\t\"compilerOptions\": {\n\t\t\"paths\": {\n\t\t\t\"$lib\": [\"../src/lib\"],\n\t\t\t\"$lib/*\": [\"../src/lib/*\"]\n\t\t},\n\t\t\"rootDirs\": [\"..\", \"./types\"]\n\t},\n\t\"include\": [\n\t\t\"ambient.d.ts\",\n\t\t\"non-ambient.d.ts\",\n\t\t\"./types/**/$types.d.ts\",\n\t\t\"../vite.config.js\",\n\t\t\"../vite.config.ts\",\n\t\t\"../src/**/*.js\",\n\t\t\"../src/**/*.ts\",\n\t\t\"../src/**/*.svelte\",\n\t\t\"../tests/**/*.js\",\n\t\t\"../tests/**/*.ts\",\n\t\t\"../tests/**/*.svelte\"\n\t],\n\t\"exclude\": [\n\t\t\"../node_modules/**\",\n\t\t\"../src/service-worker.js\",\n\t\t\"../src/service-worker/**/*.js\",\n\t\t\"../src/service-worker.ts\",\n\t\t\"../src/service-worker/**/*.ts\",\n\t\t\"../src/service-worker.d.ts\",\n\t\t\"../src/service-worker/**/*.d.ts\"\n\t]\n}\n```\n\nOthers are required for SvelteKit to work properly, and should also be left untouched unless you know what you're doing:\n\n```json\n/// file: .svelte-kit/tsconfig.json\n{\n\t\"compilerOptions\": {\n\t\t// this ensures that types are explicitly\n\t\t// imported with `import type`, which is\n\t\t// necessary as Svelte/Vite cannot\n\t\t// otherwise compile components correctly\n\t\t\"verbatimModuleSyntax\": true,\n\n\t\t// Vite compiles one TypeScript module\n\t\t// at a time, rather than compiling\n\t\t// the entire module graph\n\t\t\"isolatedModules\": true,\n\n\t\t// Tell TS it's used only for type-checking\n\t\t\"noEmit\": true,\n\n\t\t// This ensures both `vite build`\n\t\t// and `svelte-package` work correctly\n\t\t\"lib\": [\"esnext\", \"DOM\", \"DOM.Iterable\"],\n\t\t\"moduleResolution\": \"bundler\",\n\t\t\"module\": \"esnext\",\n\t\t\"target\": \"esnext\"\n\t}\n}\n```\n\nUse the [`typescript.config` setting](configuration#typescript) in `svelte.config.js` to extend or modify the generated `tsconfig.json`.\n\n## $lib\n\nThis is a simple alias to `src/lib`, or whatever directory is specified as [`config.kit.files.lib`](configuration#files). It allows you to access common components and utility modules without `../../../../` nonsense.\n\n### $lib/server\n\nA subdirectory of `$lib`. SvelteKit will prevent you from importing any modules in `$lib/server` into client-side code. See [server-only modules](server-only-modules).\n\n## app.d.ts\n\nThe `app.d.ts` file is home to the ambient types of your apps, i.e. types that are available without explicitly importing them.\n\nAlways part of this file is the `App` namespace. This namespace contains several types that influence the shape of certain SvelteKit features you interact with.\n\n## Error\n\nDefines the common shape of expected and unexpected errors. Expected errors are thrown using the `error` function. Unexpected errors are handled by the `handleError` hooks which should return this shape.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Error {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nmessage: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## Locals\n\nThe interface that defines `event.locals`, which can be accessed in server [hooks](/docs/kit/hooks) (`handle`, and `handleError`), server-only `load` functions, and `+server.js` files.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Locals {}\n```\n\n</div>\n\n## PageData\n\nDefines the common shape of the [page.data state](/docs/kit/$app-state#page) and [$page.data store](/docs/kit/$app-stores#page) - that is, the data that is shared between all pages.\nThe `Load` and `ServerLoad` functions in `./$types` will be narrowed accordingly.\nUse optional properties for data that is only present on specific pages. Do not add an index signature (`[key: string]: any`).\n\n<div class=\"ts-block\">\n\n```dts\ninterface PageData {}\n```\n\n</div>\n\n## PageState\n\nThe shape of the `page.state` object, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.\n\n<div class=\"ts-block\">\n\n```dts\ninterface PageState {}\n```\n\n</div>\n\n## Platform\n\nIf your adapter provides [platform-specific context](/docs/kit/adapters#Platform-specific-context) via `event.platform`, you can specify it here.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Platform {}\n```\n\n</div>",
+		"mcp/overview": "The Svelte MCP ([Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro)) server can help your LLM or agent of choice write better Svelte code. It works by providing documentation relevant to the task at hand, and statically analysing generated code so that it can suggest fixes and best practices.\n\n## Setup\n\nThe setup varies based on the version of the MCP you prefer — remote or local — and your chosen MCP client (e.g. Claude Code, Codex CLI or GitHub Copilot):\n\n- [local setup](local-setup) using `@sveltejs/mcp`\n- [remote setup](remote-setup) using `https://mcp.svelte.dev/mcp`\n\n## Usage\n\nTo get the most out of the MCP server we recommend including the following prompt in your [`AGENTS.md`](https://agents.md) (or [`CLAUDE.md`](https://docs.claude.com/en/docs/claude-code/memory#claude-md-imports), if using Claude Code). This will tell the LLM which tools are available and when it's appropriate to use them.\n\n```md\nYou are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:\n\n## Available MCP Tools:\n\n### 1. list-sections\n\nUse this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.\nWhen asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.\n\n### 2. get-documentation\n\nRetrieves full documentation content for specific sections. Accepts single or multiple sections.\nAfter calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.\n\n### 3. svelte-autofixer\n\nAnalyzes Svelte code and returns issues and suggestions.\nYou MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.\n\n### 4. playground-link\n\nGenerates a Svelte Playground link with the provided code.\nAfter completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.\n```\n\nIf your MCP client supports it, we also recommend using the [svelte-task](prompts#svelte-task) prompt to instruct the LLM on the best way to use the MCP server.",
+		"mcp/local-setup": "The local (or stdio) version of the MCP server is available via the [`@sveltejs/mcp`](https://www.npmjs.com/package/@sveltejs/mcp) npm package. You can either install it globally and then reference it in your configuration or run it with `npx`:\n\n```bash\nnpx -y @sveltejs/mcp\n```\n\nHere's how to set it up in some common MCP clients:\n\n## Claude Code\n\nTo include the local MCP version in Claude Code, simply run the following command:\n\n```bash\nclaude mcp add -t stdio -s [scope] svelte -- npx -y @sveltejs/mcp\n```\n\nThe `[scope]` must be `user`, `project` or `local`.\n\n## Claude Desktop\n\nIn the Settings > Developer section, click on Edit Config. It will open the folder with a `claude_desktop_config.json` file in it. Edit the file to include the following configuration:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"command\": \"npx\",\n\t\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t\t}\n\t}\n}\n```\n\n## Codex CLI\n\nAdd the following to your `config.toml` (which defaults to `~/.codex/config.toml`, but refer to [the configuration documentation](https://github.com/openai/codex/blob/main/docs/config.md) for more advanced setups):\n\n```toml\n[mcp_servers.svelte]\ncommand = \"npx\"\nargs = [\"-y\", \"@sveltejs/mcp\"]\n```\n\n## Gemini CLI\n\nTo include the local MCP version in Gemini CLI, simply run the following command:\n\n```bash\ngemini mcp add -t stdio -s [scope] svelte npx -y @sveltejs/mcp\n```\n\nThe `[scope]` must be `user`, `project` or `local`.\n\n## OpenCode\n\nRun the command:\n\n```bash\nopencode mcp add\n```\n\nand follow the instructions, selecting 'Local' under the 'Select MCP server type' prompt:\n\n```bash\nopencode mcp add\n\n┌  Add MCP server\n│\n◇  Enter MCP server name\n│  svelte\n│\n◇  Select MCP server type\n│  Local\n│\n◆  Enter command to run\n│  npx -y @sveltejs/mcp\n```\n\n## VS Code\n\n- Open the command palette\n- Select \"MCP: Add Server...\"\n- Select \"Command (stdio)\"\n- Insert `npx -y @sveltejs/mcp` in the input and press `Enter`\n- When prompted for a name, insert `svelte`\n- Select if you want to add it as a `Global` or `Workspace` MCP server\n\n## Cursor\n\n- Open the command palette\n- Select \"View: Open MCP Settings\"\n- Click on \"Add custom MCP\"\n\nIt will open a file with your MCP servers where you can add the following configuration:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"command\": \"npx\",\n\t\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t\t}\n\t}\n}\n```\n\n## Zed\n\n- Open the command palette\n- Search and select \"agent:open settings\"\n- In settings panel look for `Model Context Protocol (MCP) Servers`\n- Click on \"Add Server\"\n- Select: \"Add Custom Server\"\n\nIt will open a popup with MCP server config where you can add the following configuration:\n\n```json\n{\n\t\"svelte\": {\n\t\t\"command\": \"npx\",\n\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t}\n}\n```\n\n## Other clients\n\nIf we didn't include the MCP client you are using, refer to their documentation for `stdio` servers and use `npx` as the command and `-y @sveltejs/mcp` as the arguments.",
+		"mcp/remote-setup": "The remote version of the MCP server is available at `https://mcp.svelte.dev/mcp`.\n\nHere's how to set it up in some common MCP clients:\n\n## Claude Code\n\nTo include the remote MCP version in Claude Code, simply run the following command:\n\n```bash\nclaude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp\n```\n\nYou can choose your preferred `scope` (it must be `user`, `project` or `local`) and `name`.\n\n## Claude Desktop\n\n- Open Settings > Connectors\n- Click on Add Custom Connector\n- When prompted for a name, enter `svelte`\n- Under the Remote MCP server URL input, use `https://mcp.svelte.dev/mcp`\n- Click Add\n\n## Codex CLI\n\nAdd the following to your `config.toml` (which defaults to `~/.codex/config.toml`, but refer to [the configuration documentation](https://github.com/openai/codex/blob/main/docs/config.md) for more advanced setups):\n\n```toml\nexperimental_use_rmcp_client = true\n[mcp_servers.svelte]\nurl = \"https://mcp.svelte.dev/mcp\"\n```\n\n## Gemini CLI\n\nTo use the remote MCP server with Gemini CLI, simply run the following command:\n\n```bash\ngemini mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp\n```\n\nThe `[scope]` must be `user`, `project` or `local`.\n\n## OpenCode\n\nRun the command:\n\n```bash\nopencode mcp add\n```\n\nand follow the instructions, selecting 'Remote' under the 'Select MCP server type' prompt:\n\n```bash\nopencode mcp add\n\n┌  Add MCP server\n│\n◇  Enter MCP server name\n│  svelte\n│\n◇  Select MCP server type\n│  Remote\n│\n◇  Enter MCP server URL\n│  https://mcp.svelte.dev/mcp\n```\n\n## VS Code\n\n- Open the command palette\n- Select \"MCP: Add Server...\"\n- Select \"HTTP (HTTP or Server-Sent-Events)\"\n- Insert `https://mcp.svelte.dev/mcp` in the input and press `Enter`\n- Insert your preferred name\n- Select if you want to add it as a `Global` or `Workspace` MCP server\n\n## Cursor\n\n- Open the command palette\n- Select \"View: Open MCP Settings\"\n- Click on \"Add custom MCP\"\n\nIt will open a file with your MCP servers where you can add the following configuration:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"url\": \"https://mcp.svelte.dev/mcp\"\n\t\t}\n\t}\n}\n```\n\n## Other clients\n\nIf we didn't include the MCP client you are using, refer to their documentation for `remote` servers and use `https://mcp.svelte.dev/mcp` as the URL.",
+		"mcp/tools": "The following tools are provided by the MCP server to the model you are using, which can decide to call one or more of them during a session:\n\n## list-sections\n\nProvides a list of all the available documentation sections.\n\n## get-documentation\n\nAllows the model to get the full (and up-to-date) documentation for the requested sections directly from [svelte.dev/docs](/docs).\n\n## svelte-autofixer\n\nUses static analysis to provide suggestions for code that your LLM generates. It can be invoked in an agentic loop by your model until all issues and suggestions are resolved.\n\n## playground-link\n\nGenerates an ephemeral playground link with the generated code. It's useful when the generated code is not written to a file in your project and you want to quickly test the generated solution. The code is not stored anywhere except the URL itself (which will often, as a consequence, be quite large).",
+		"mcp/resources": "This is the list of available resources provided by the MCP server. Resources are included by the user (not by the LLM) and are useful if you want to include specific knowledge in your session. For example, if you know that the component will need to use transitions you can include the transition documentation directly without asking the LLM to do it for you.\n\n## doc-section\n\nThis dynamic resource allows you to add every section of the Svelte documentation as a resource. The URI looks like this `svelte://slug-of-the-docs.md` and the returned resource will contain the `llms.txt` version of the specific page you selected.",
+		"mcp/prompts": "This is the list of available prompts provided by the MCP server. Prompts are selected by the user and are sent as a user message. They can be useful to write repetitive instructions for the LLM on how to properly use the MCP server.\n\n## svelte-task\n\nThis prompt should be used whenever you are asking the model to work on a Svelte-related task. It will instruct the LLM which documentation sections are available, which tools to invoke, when to invoke them, and how to interpret the results.\n\n<details>\n\t<summary>Copy the prompt</summary>\n\n```md\nYou are a Svelte expert tasked to build components and utilities for Svelte developers. If you need documentation for anything related to Svelte you can invoke the tool `get_documentation` with one of the following paths:\n<available-docs>\n\n- title: Overview, use_cases: project setup, creating new svelte apps, scaffolding, cli tools, initializing projects, path: cli/overview\n- title: Frequently asked questions, use_cases: project setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration, path: cli/faq\n- title: sv create, use_cases: project setup, starting new sveltekit app, initializing project, creating from playground, choosing project template, path: cli/sv-create\n- title: sv add, use_cases: project setup, adding features to existing projects, integrating tools, testing setup, styling setup, authentication, database setup, deployment adapters, path: cli/sv-add\n- title: sv check, use_cases: code quality, ci/cd pipelines, error checking, typescript projects, pre-commit hooks, finding unused css, accessibility auditing, production builds, path: cli/sv-check\n- title: sv migrate, use_cases: migration, upgrading svelte versions, upgrading sveltekit versions, modernizing codebase, svelte 3 to 4, svelte 4 to 5, sveltekit 1 to 2, adopting runes, refactoring deprecated apis, path: cli/sv-migrate\n- title: devtools-json, use_cases: development setup, chrome devtools integration, browser-based editing, local development workflow, debugging setup, path: cli/devtools-json\n- title: drizzle, use_cases: database setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries, path: cli/drizzle\n- title: eslint, use_cases: code quality, linting, error detection, project setup, code standards, team collaboration, typescript projects, path: cli/eslint\n- title: lucia, use_cases: authentication, login systems, user management, registration pages, session handling, auth setup, path: cli/lucia\n- title: mdsvex, use_cases: blog, content sites, markdown rendering, documentation sites, technical writing, cms integration, article pages, path: cli/mdsvex\n- title: paraglide, use_cases: internationalization, multi-language sites, i18n, translation, localization, language switching, global apps, multilingual content, path: cli/paraglide\n- title: playwright, use_cases: browser testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines, testing user flows, path: cli/playwright\n- title: prettier, use_cases: code formatting, project setup, code style consistency, team collaboration, linting configuration, path: cli/prettier\n- title: storybook, use_cases: component development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase, path: cli/storybook\n- title: sveltekit-adapter, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify, path: cli/sveltekit-adapter\n- title: tailwindcss, use_cases: project setup, styling, css framework, rapid prototyping, utility-first css, design systems, responsive design, adding tailwind to svelte, path: cli/tailwind\n- title: vitest, use_cases: testing, unit tests, component testing, test setup, quality assurance, ci/cd pipelines, test-driven development, path: cli/vitest\n- title: Introduction, use_cases: learning sveltekit, project setup, understanding framework basics, choosing between svelte and sveltekit, getting started with full-stack apps, path: kit/introduction\n- title: Creating a project, use_cases: project setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects, path: kit/creating-a-project\n- title: Project types, use_cases: deployment, project setup, choosing adapters, ssg, spa, ssr, serverless, mobile apps, desktop apps, pwa, offline apps, browser extensions, separate backend, docker containers, path: kit/project-types\n- title: Project structure, use_cases: project setup, understanding file structure, organizing code, starting new project, learning sveltekit basics, path: kit/project-structure\n- title: Web standards, use_cases: always, any sveltekit project, data fetching, forms, api routes, server-side rendering, deployment to various platforms, path: kit/web-standards\n- title: Routing, use_cases: routing, navigation, multi-page apps, project setup, file structure, api endpoints, data loading, layouts, error pages, always, path: kit/routing\n- title: Loading data, use_cases: data fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data, form data, content rendering, path: kit/load\n- title: Form actions, use_cases: forms, user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors, path: kit/form-actions\n- title: Page options, use_cases: prerendering static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization, path: kit/page-options\n- title: State management, use_cases: sveltekit, server-side rendering, ssr, state management, authentication, data persistence, load functions, context api, navigation, component lifecycle, path: kit/state-management\n- title: Remote functions, use_cases: data fetching, server-side logic, database queries, type-safe client-server communication, forms, user input, mutations, authentication, crud operations, optimistic updates, path: kit/remote-functions\n- title: Building your app, use_cases: production builds, deployment preparation, build process optimization, adapter configuration, preview before deployment, path: kit/building-your-app\n- title: Adapters, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, path: kit/adapters\n- title: Zero-config deployments, use_cases: deployment, production builds, hosting setup, choosing deployment platform, ci/cd configuration, path: kit/adapter-auto\n- title: Node servers, use_cases: deployment, production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services, path: kit/adapter-node\n- title: Static site generation, use_cases: static site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites, path: kit/adapter-static\n- title: Single-page apps, use_cases: spa mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup, fallback pages, path: kit/single-page-apps\n- title: Cloudflare, use_cases: deployment, cloudflare workers, cloudflare pages, hosting setup, production builds, serverless deployment, edge computing, path: kit/adapter-cloudflare\n- title: Cloudflare Workers, use_cases: deploying to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, wrangler configuration, cloudflare platform bindings, path: kit/adapter-cloudflare-workers\n- title: Netlify, use_cases: deployment, netlify hosting, production builds, serverless functions, edge functions, static site hosting, path: kit/adapter-netlify\n- title: Vercel, use_cases: deployment, vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables, path: kit/adapter-vercel\n- title: Writing adapters, use_cases: custom deployment, building adapters, unsupported platforms, adapter development, custom hosting environments, path: kit/writing-adapters\n- title: Advanced routing, use_cases: advanced routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation, path: kit/advanced-routing\n- title: Hooks, use_cases: authentication, logging, error tracking, request interception, api proxying, custom routing, internationalization, database initialization, middleware logic, session management, path: kit/hooks\n- title: Errors, use_cases: error handling, custom error pages, 404 pages, api error responses, production error logging, error tracking, type-safe errors, path: kit/errors\n- title: Link options, use_cases: routing, navigation, multi-page apps, performance optimization, link preloading, forms with get method, search functionality, focus management, scroll behavior, path: kit/link-options\n- title: Service workers, use_cases: offline support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps, path: kit/service-workers\n- title: Server-only modules, use_cases: api keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation, path: kit/server-only-modules\n- title: Snapshots, use_cases: forms, user input, preserving form data, multi-step forms, navigation state, preventing data loss, textarea content, input fields, comment systems, surveys, path: kit/snapshots\n- title: Shallow routing, use_cases: modals, dialogs, image galleries, overlays, history-driven ui, mobile-friendly navigation, photo viewers, lightboxes, drawer menus, path: kit/shallow-routing\n- title: Observability, use_cases: performance monitoring, debugging, observability, tracing requests, production diagnostics, analyzing slow requests, finding bottlenecks, monitoring server-side operations, path: kit/observability\n- title: Packaging, use_cases: building component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution, path: kit/packaging\n- title: Auth, use_cases: authentication, login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization checks, path: kit/auth\n- title: Performance, use_cases: performance optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times, path: kit/performance\n- title: Icons, use_cases: icons, ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management, path: kit/icons\n- title: Images, use_cases: image optimization, responsive images, performance, hero images, product photos, galleries, cms integration, cdn setup, asset management, path: kit/images\n- title: Accessibility, use_cases: always, any sveltekit project, screen reader support, keyboard navigation, multi-page apps, client-side routing, internationalization, multilingual sites, path: kit/accessibility\n- title: SEO, use_cases: seo optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization, path: kit/seo\n- title: Frequently asked questions, use_cases: troubleshooting package imports, library compatibility issues, client-side code execution, external api integration, middleware setup, database configuration, view transitions, yarn configuration, path: kit/faq\n- title: Integrations, use_cases: project setup, css preprocessors, postcss, scss, sass, less, stylus, typescript setup, adding integrations, tailwind, testing, auth, linting, formatting, path: kit/integrations\n- title: Breakpoint Debugging, use_cases: debugging, breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution, path: kit/debugging\n- title: Migrating to SvelteKit v2, use_cases: migration, upgrading from sveltekit 1 to 2, breaking changes, version updates, path: kit/migrating-to-sveltekit-2\n- title: Migrating from Sapper, use_cases: migrating from sapper, upgrading legacy projects, sapper to sveltekit conversion, project modernization, path: kit/migrating\n- title: Additional resources, use_cases: troubleshooting, getting help, finding examples, learning sveltekit, project templates, common issues, community support, path: kit/additional-resources\n- title: Glossary, use_cases: rendering strategies, performance optimization, deployment configuration, seo requirements, static sites, spas, server-side rendering, prerendering, edge deployment, pwa development, path: kit/glossary\n- title: @sveltejs/kit, use_cases: forms, form actions, server-side validation, form submission, error handling, redirects, json responses, http errors, server utilities, path: kit/@sveltejs-kit\n- title: @sveltejs/kit/hooks, use_cases: middleware, request processing, authentication chains, logging, multiple hooks, request/response transformation, path: kit/@sveltejs-kit-hooks\n- title: @sveltejs/kit/node/polyfills, use_cases: node.js environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements, path: kit/@sveltejs-kit-node-polyfills\n- title: @sveltejs/kit/node, use_cases: node.js adapter, custom server setup, http integration, streaming files, node deployment, server-side rendering with node, path: kit/@sveltejs-kit-node\n- title: @sveltejs/kit/vite, use_cases: project setup, vite configuration, initial sveltekit setup, build tooling, path: kit/@sveltejs-kit-vite\n- title: $app/environment, use_cases: always, conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection, path: kit/$app-environment\n- title: $app/forms, use_cases: forms, user input, data submission, progressive enhancement, custom form handling, form validation, path: kit/$app-forms\n- title: $app/navigation, use_cases: routing, navigation, multi-page apps, programmatic navigation, data reloading, preloading, shallow routing, navigation lifecycle, scroll handling, view transitions, path: kit/$app-navigation\n- title: $app/paths, use_cases: static assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation, path: kit/$app-paths\n- title: $app/server, use_cases: remote functions, server-side logic, data fetching, form handling, api endpoints, client-server communication, prerendering, file reading, batch queries, path: kit/$app-server\n- title: $app/state, use_cases: routing, navigation, multi-page apps, loading states, url parameters, form handling, error states, version updates, page metadata, shallow routing, path: kit/$app-state\n- title: $app/stores, use_cases: legacy projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates, path: kit/$app-stores\n- title: $app/types, use_cases: routing, navigation, type safety, route parameters, dynamic routes, link generation, pathname validation, multi-page apps, path: kit/$app-types\n- title: $env/dynamic/private, use_cases: api keys, secrets management, server-side config, environment variables, backend logic, deployment-specific settings, private data handling, path: kit/$env-dynamic-private\n- title: $env/dynamic/public, use_cases: environment variables, client-side config, runtime configuration, public api keys, deployment-specific settings, multi-environment apps, path: kit/$env-dynamic-public\n- title: $env/static/private, use_cases: server-side api keys, backend secrets, database credentials, private configuration, build-time optimization, server endpoints, authentication tokens, path: kit/$env-static-private\n- title: $env/static/public, use_cases: environment variables, public config, client-side data, api endpoints, build-time configuration, public constants, path: kit/$env-static-public\n- title: $lib, use_cases: project setup, component organization, importing shared components, reusable ui elements, code structure, path: kit/$lib\n- title: $service-worker, use_cases: offline support, pwa, service workers, caching strategies, progressive web apps, offline-first apps, path: kit/$service-worker\n- title: Configuration, use_cases: project setup, configuration, adapters, deployment, build settings, environment variables, routing customization, prerendering, csp security, csrf protection, path configuration, typescript setup, path: kit/configuration\n- title: Command Line Interface, use_cases: project setup, typescript configuration, generated types, ./$types imports, initial project configuration, path: kit/cli\n- title: Types, use_cases: typescript, type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup, path: kit/types\n- title: Overview, use_cases: use title and path to estimate use case, path: mcp/overview\n- title: Local setup, use_cases: use title and path to estimate use case, path: mcp/local-setup\n- title: Remote setup, use_cases: use title and path to estimate use case, path: mcp/remote-setup\n- title: Tools, use_cases: use title and path to estimate use case, path: mcp/tools\n- title: Resources, use_cases: use title and path to estimate use case, path: mcp/resources\n- title: Prompts, use_cases: use title and path to estimate use case, path: mcp/prompts\n- title: Overview, use_cases: always, any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics, path: svelte/overview\n- title: Getting started, use_cases: project setup, starting new svelte project, initial installation, choosing between sveltekit and vite, editor configuration, path: svelte/getting-started\n- title: .svelte files, use_cases: always, any svelte project, component creation, project setup, learning svelte basics, path: svelte/svelte-files\n- title: .svelte.js and .svelte.ts files, use_cases: shared reactive state, reusable reactive logic, state management across components, global stores, custom reactive utilities, path: svelte/svelte-js-files\n- title: What are runes?, use_cases: always, any svelte 5 project, understanding core syntax, learning svelte 5, migration from svelte 4, path: svelte/what-are-runes\n- title: $state, use_cases: always, any svelte project, core reactivity, state management, counters, forms, todo apps, interactive ui, data updates, class-based components, path: svelte/$state\n- title: $derived, use_cases: always, any svelte project, computed values, reactive calculations, derived data, transforming state, dependent values, path: svelte/$derived\n- title: $effect, use_cases: canvas drawing, third-party library integration, dom manipulation, side effects, intervals, timers, network requests, analytics tracking, path: svelte/$effect\n- title: $props, use_cases: always, any svelte project, passing data to components, component communication, reusable components, component props, path: svelte/$props\n- title: $bindable, use_cases: forms, user input, two-way data binding, custom input components, parent-child communication, reusable form fields, path: svelte/$bindable\n- title: $inspect, use_cases: debugging, development, tracking state changes, reactive state monitoring, troubleshooting reactivity issues, path: svelte/$inspect\n- title: $host, use_cases: custom elements, web components, dispatching custom events, component library, framework-agnostic components, path: svelte/$host\n- title: Basic markup, use_cases: always, any svelte project, basic markup, html templating, component structure, attributes, events, props, text rendering, path: svelte/basic-markup\n- title: {#if ...}, use_cases: always, conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation, path: svelte/if\n- title: {#each ...}, use_cases: always, lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds, path: svelte/each\n- title: {#key ...}, use_cases: animations, transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state, path: svelte/key\n- title: {#await ...}, use_cases: async data fetching, api calls, loading states, promises, error handling, lazy loading components, dynamic imports, path: svelte/await\n- title: {#snippet ...}, use_cases: reusable markup, component composition, passing content to components, table rows, list items, conditional rendering, reducing duplication, path: svelte/snippet\n- title: {@render ...}, use_cases: reusable ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse, path: svelte/@render\n- title: {@html ...}, use_cases: rendering html strings, cms content, rich text editors, markdown to html, blog posts, wysiwyg output, sanitized html injection, dynamic html content, path: svelte/@html\n- title: {@attach ...}, use_cases: tooltips, popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components, path: svelte/@attach\n- title: {@const ...}, use_cases: computed values in loops, derived calculations in blocks, local variables in each iterations, complex list rendering, path: svelte/@const\n- title: {@debug ...}, use_cases: debugging, development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection, path: svelte/@debug\n- title: bind:, use_cases: forms, user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, dimension tracking, path: svelte/bind\n- title: use:, use_cases: custom directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks, path: svelte/use\n- title: transition:, use_cases: animations, interactive ui, modals, dropdowns, notifications, conditional content, show/hide elements, smooth state changes, path: svelte/transition\n- title: in: and out:, use_cases: animation, transitions, interactive ui, conditional rendering, independent enter/exit effects, modals, tooltips, notifications, path: svelte/in-and-out\n- title: animate:, use_cases: sortable lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering, path: svelte/animate\n- title: style:, use_cases: dynamic styling, conditional styles, theming, dark mode, responsive design, interactive ui, component styling, path: svelte/style\n- title: class, use_cases: always, conditional styling, dynamic classes, tailwind css, component styling, reusable components, responsive design, path: svelte/class\n- title: await, use_cases: async data fetching, loading states, server-side rendering, awaiting promises in components, async validation, concurrent data loading, path: svelte/await-expressions\n- title: Scoped styles, use_cases: always, styling components, scoped css, component-specific styles, preventing style conflicts, animations, keyframes, path: svelte/scoped-styles\n- title: Global styles, use_cases: global styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles, path: svelte/global-styles\n- title: Custom properties, use_cases: theming, custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization, path: svelte/custom-properties\n- title: Nested <style> elements, use_cases: component styling, scoped styles, dynamic styles, conditional styling, nested style tags, custom styling logic, path: svelte/nested-style-elements\n- title: <svelte:boundary>, use_cases: error handling, async data loading, loading states, error recovery, flaky components, error reporting, resilient ui, path: svelte/svelte-boundary\n- title: <svelte:window>, use_cases: keyboard shortcuts, scroll tracking, window resize handling, responsive layouts, online/offline detection, viewport dimensions, global event listeners, path: svelte/svelte-window\n- title: <svelte:document>, use_cases: document events, visibility tracking, fullscreen detection, pointer lock, focus management, document-level interactions, path: svelte/svelte-document\n- title: <svelte:body>, use_cases: mouse tracking, hover effects, cursor interactions, global body events, drag and drop, custom cursors, interactive backgrounds, body-level actions, path: svelte/svelte-body\n- title: <svelte:head>, use_cases: seo optimization, page titles, meta tags, social media sharing, dynamic head content, multi-page apps, blog posts, product pages, path: svelte/svelte-head\n- title: <svelte:element>, use_cases: dynamic content, cms integration, user-generated content, configurable ui, runtime element selection, flexible components, path: svelte/svelte-element\n- title: <svelte:options>, use_cases: migration, custom elements, web components, legacy mode compatibility, runes mode setup, svg components, mathml components, css injection control, path: svelte/svelte-options\n- title: Stores, use_cases: shared state, cross-component data, reactive values, async data streams, manual control over updates, rxjs integration, extracting logic, path: svelte/stores\n- title: Context, use_cases: shared state, avoiding prop drilling, component communication, theme providers, user context, authentication state, configuration sharing, deeply nested components, path: svelte/context\n- title: Lifecycle hooks, use_cases: component initialization, cleanup tasks, timers, subscriptions, dom measurements, chat windows, autoscroll features, migration from svelte 4, path: svelte/lifecycle-hooks\n- title: Imperative component API, use_cases: project setup, client-side rendering, server-side rendering, ssr, hydration, testing, programmatic component creation, tooltips, dynamic mounting, path: svelte/imperative-component-api\n- title: Testing, use_cases: testing, quality assurance, unit tests, integration tests, component tests, e2e tests, vitest setup, playwright setup, test automation, path: svelte/testing\n- title: TypeScript, use_cases: typescript setup, type safety, component props typing, generic components, wrapper components, dom type augmentation, project configuration, path: svelte/typescript\n- title: Custom elements, use_cases: web components, custom elements, component library, design system, framework-agnostic components, embedding svelte in non-svelte apps, shadow dom, path: svelte/custom-elements\n- title: Svelte 4 migration guide, use_cases: upgrading svelte 3 to 4, version migration, updating dependencies, breaking changes, legacy project maintenance, path: svelte/v4-migration-guide\n- title: Svelte 5 migration guide, use_cases: migrating from svelte 4 to 5, upgrading projects, learning svelte 5 syntax changes, runes migration, event handler updates, path: svelte/v5-migration-guide\n- title: Frequently asked questions, use_cases: getting started, learning svelte, beginner setup, project initialization, vs code setup, formatting, testing, routing, mobile apps, troubleshooting, community support, path: svelte/faq\n- title: svelte, use_cases: migration from svelte 4 to 5, upgrading legacy code, component lifecycle hooks, context api, mounting components, event dispatchers, typescript component types, path: svelte/svelte\n- title: svelte/action, use_cases: typescript types, actions, use directive, dom manipulation, element lifecycle, custom behaviors, third-party library integration, path: svelte/svelte-action\n- title: svelte/animate, use_cases: animated lists, sortable items, drag and drop, reordering elements, todo lists, kanban boards, playlist management, smooth position transitions, path: svelte/svelte-animate\n- title: svelte/attachments, use_cases: library development, component libraries, programmatic element manipulation, migrating from actions to attachments, spreading props onto elements, path: svelte/svelte-attachments\n- title: svelte/compiler, use_cases: build tools, custom compilers, ast manipulation, preprocessors, code transformation, migration scripts, syntax analysis, bundler plugins, dev tools, path: svelte/svelte-compiler\n- title: svelte/easing, use_cases: animations, transitions, custom easing, smooth motion, interactive ui, modals, dropdowns, carousels, page transitions, scroll effects, path: svelte/svelte-easing\n- title: svelte/events, use_cases: window events, document events, global event listeners, event delegation, programmatic event handling, cleanup functions, media queries, path: svelte/svelte-events\n- title: svelte/legacy, use_cases: migration from svelte 4 to svelte 5, upgrading legacy code, event modifiers, class components, imperative component instantiation, path: svelte/svelte-legacy\n- title: svelte/motion, use_cases: animation, smooth transitions, interactive ui, sliders, counters, physics-based motion, drag gestures, accessibility, reduced motion, path: svelte/svelte-motion\n- title: svelte/reactivity/window, use_cases: responsive design, viewport tracking, scroll effects, window resize handling, online/offline detection, zoom level tracking, path: svelte/svelte-reactivity-window\n- title: svelte/reactivity, use_cases: reactive data structures, state management with maps/sets, game boards, selection tracking, url manipulation, query params, real-time clocks, media queries, responsive design, path: svelte/svelte-reactivity\n- title: svelte/server, use_cases: server-side rendering, ssr, static site generation, seo optimization, initial page load, pre-rendering, node.js server, custom server setup, path: svelte/svelte-server\n- title: svelte/store, use_cases: state management, shared data, reactive stores, cross-component communication, global state, computed values, data synchronization, legacy svelte projects, path: svelte/svelte-store\n- title: svelte/transition, use_cases: animations, transitions, interactive ui, modals, dropdowns, tooltips, notifications, svg animations, list animations, page transitions, path: svelte/svelte-transition\n- title: Compiler errors, use_cases: animation, transitions, keyed each blocks, list animations, path: svelte/compiler-errors\n- title: Compiler warnings, use_cases: accessibility, a11y compliance, wcag standards, screen readers, keyboard navigation, aria attributes, semantic html, interactive elements, path: svelte/compiler-warnings\n- title: Runtime errors, use_cases: debugging errors, error handling, troubleshooting runtime issues, migration to svelte 5, component binding, effects and reactivity, path: svelte/runtime-errors\n- title: Runtime warnings, use_cases: debugging state proxies, console logging reactive values, inspecting state changes, development troubleshooting, path: svelte/runtime-warnings\n- title: Overview, use_cases: migrating from svelte 3/4 to svelte 5, maintaining legacy components, understanding deprecated features, gradual upgrade process, path: svelte/legacy-overview\n- title: Reactive let/var declarations, use_cases: migration, legacy svelte projects, upgrading from svelte 4, understanding old reactivity, maintaining existing code, learning runes differences, path: svelte/legacy-let\n- title: Reactive $: statements, use_cases: legacy mode, migration from svelte 4, reactive statements, computed values, derived state, side effects, path: svelte/legacy-reactive-assignments\n- title: export let, use_cases: legacy mode, migration from svelte 4, maintaining older projects, component props without runes, exporting component methods, renaming reserved word props, path: svelte/legacy-export-let\n- title: $$props and $$restProps, use_cases: legacy mode migration, component wrappers, prop forwarding, button components, reusable ui components, spreading props to child elements, path: svelte/legacy-$$props-and-$$restProps\n- title: on:, use_cases: legacy mode, event handling, button clicks, forms, user interactions, component communication, event forwarding, event modifiers, path: svelte/legacy-on\n- title: <slot>, use_cases: legacy mode, migrating from svelte 4, component composition, reusable components, passing content to components, modals, layouts, wrappers, path: svelte/legacy-slots\n- title: $$slots, use_cases: legacy mode, conditional slot rendering, optional content sections, checking if slots provided, migrating from legacy to runes, path: svelte/legacy-$$slots\n- title: <svelte:fragment>, use_cases: named slots, component composition, layout systems, avoiding wrapper divs, legacy svelte projects, slot content organization, path: svelte/legacy-svelte-fragment\n- title: <svelte:component>, use_cases: dynamic components, component switching, conditional rendering, legacy mode migration, tabbed interfaces, multi-step forms, path: svelte/legacy-svelte-component\n- title: <svelte:self>, use_cases: recursive components, tree structures, nested menus, file explorers, comment threads, hierarchical data, path: svelte/legacy-svelte-self\n- title: Imperative component API, use_cases: migration from svelte 3/4 to 5, legacy component api, maintaining old projects, understanding deprecated patterns, path: svelte/legacy-component-api\n\n</available-docs>\n\nEvery time you write a Svelte component or a Svelte module you MUST invoke the `svelte-autofixer` tool providing the code. The tool will return a list of issues or suggestions. If there are any issues or suggestions you MUST fix them and call the tool again with the updated code. You MUST keep doing this until the tool returns no issues or suggestions. Only then you can return the code to the user.\n\nThis is the task you will work on:\n\n<task>\n[YOUR TASK HERE]\n</task>\n\nIf you are not writing the code into a file, once you have the final version of the code ask the user if it wants to generate a playground link to quickly check the code in it and if it answer yes call the `playground-link` tool and return the url to the user nicely formatted. The playground link MUST be generated only once you have the final version of the code and you are ready to share it, it MUST include an entry point file called `App.svelte` where the main component should live. If you have multiple files to include in the playground link you can include them all at the root.\n```\n\n</details>",
+		"svelte/overview": "Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\tfunction greet() {\n\t\talert('Welcome to Svelte!');\n\t}\n</script>\n\n<button onclick={greet}>click me</button>\n\n<style>\n\tbutton {\n\t\tfont-size: 2em;\n\t}\n</style>\n```\n\n...into lean, tightly optimized JavaScript.\n\nYou can use it to build anything on the web, from standalone components to ambitious full stack apps (using Svelte's companion application framework, [SvelteKit](../kit)) and everything in between.\n\nThese pages serve as reference documentation. If you're new to Svelte, we recommend starting with the [interactive tutorial](/tutorial) and coming back here when you have questions.\n\nYou can also try Svelte online in the [playground](/playground) or, if you need a more fully-featured environment, on [StackBlitz](https://sveltekit.new).",
+		"svelte/getting-started": "We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:\n\n```sh\nnpx sv create myapp\ncd myapp\nnpm install\nnpm run dev\n```\n\nDon't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.\n\n## Alternatives to SvelteKit\n\nYou can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](/packages#routing) as well.\n\n>[!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).\n\nThere are also [plugins for other bundlers](/packages#bundler-plugins), but we recommend Vite.\n\n## Editor tooling\n\nThe Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.\n\nYou can also check your code from the command line using [sv check](https://github.com/sveltejs/cli).\n\n## Getting help\n\nDon't be shy about asking for help in the [Discord chatroom](/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).",
+		"svelte/svelte-files": "Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.\n\nAll three sections — script, styles and markup — are optional.\n\n<!-- prettier-ignore -->\n```svelte\n/// file: MyComponent.svelte\n<script module>\n\t// module-level logic goes here\n\t// (you will rarely use this)\n</script>\n\n<script>\n\t// instance-level logic goes here\n</script>\n\n<!-- markup (zero or more items) goes here -->\n\n<style>\n\t/* styles go here */\n</style>\n```\n\n## `<script>`\n\nA `<script>` block contains JavaScript (or TypeScript, when adding the `lang=\"ts\"` attribute) that runs when a component instance is created. Variables declared (or imported) at the top level can be referenced in the component's markup.\n\nIn addition to normal JavaScript, you can use _runes_ to declare [component props]($props) and add reactivity to your component. Runes are covered in the next section.\n\n<!-- TODO describe behaviour of `export` -->\n\n## `<script module>`\n\nA `<script>` tag with a `module` attribute runs once when the module first evaluates, rather than for each component instance. Variables declared in this block can be referenced elsewhere in the component, but not vice versa.\n\n```svelte\n<script module>\n\tlet total = 0;\n</script>\n\n<script>\n\ttotal += 1;\n\tconsole.log(`instantiated ${total} times`);\n</script>\n```\n\nYou can `export` bindings from this block, and they will become exports of the compiled module. You cannot `export default`, since the default export is the component itself.\n\n> [!NOTE] If you are using TypeScript and import such exports from a `module` block into a `.ts` file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, but in other cases you might need to setup our [TypeScript editor plugin](https://www.npmjs.com/package/typescript-svelte-plugin).\n\n> [!LEGACY]\n> In Svelte 4, this script tag was created using `<script context=\"module\">`\n\n## `<style>`\n\nCSS inside a `<style>` block will be scoped to that component.\n\n```svelte\n<style>\n\tp {\n\t\t/* this will only affect <p> elements in this component */\n\t\tcolor: burlywood;\n\t}\n</style>\n```\n\nFor more information, head to the section on [styling](scoped-styles).",
+		"svelte/svelte-js-files": "Besides `.svelte` files, Svelte also operates on `.svelte.js` and `.svelte.ts` files.\n\nThese behave like any other `.js` or `.ts` module, except that you can use runes. This is useful for creating reusable reactive logic, or sharing reactive state across your app (though note that you [cannot export reassigned state]($state#Passing-state-across-modules)).\n\n> [!LEGACY]\n> This is a concept that didn't exist prior to Svelte 5",
+		"svelte/what-are-runes": "> [!NOTE] **rune** /ruːn/ _noun_\n>\n> A letter or mark used as a mystical or magic symbol.\n\nRunes are symbols that you use in `.svelte` and `.svelte.js`/`.svelte.ts` files to control the Svelte compiler. If you think of Svelte as a language, runes are part of the syntax — they are _keywords_.\n\nRunes have a `$` prefix and look like functions:\n\n```js\nlet message = $state('hello');\n```\n\nThey differ from normal JavaScript functions in important ways, however:\n\n- You don't need to import them — they are part of the language\n- They're not values — you can't assign them to a variable or pass them as arguments to a function\n- Just like JavaScript keywords, they are only valid in certain positions (the compiler will help you if you put them in the wrong place)\n\n> [!LEGACY]\n> Runes didn't exist prior to Svelte 5.",
+		"svelte/$state": "The `$state` rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes.\n\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n\n<button onclick={() => count++}>\n\tclicks: {count}\n</button>\n```\n\nUnlike other frameworks you may have encountered, there is no API for interacting with state — `count` is just a number, rather than an object or a function, and you can update it like you would update any other variable.\n\n### Deep state\n\nIf `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.\n\nState is proxified recursively until Svelte finds something other than an array or simple object (like a class or an object created with `Object.create`). In a case like this...\n\n```js\nlet todos = $state([\n\t{\n\t\tdone: false,\n\t\ttext: 'add more todos'\n\t}\n]);\n```\n\n...modifying an individual todo's property will trigger updates to anything in your UI that depends on that specific property:\n\n```js\nlet todos = [{ done: false, text: 'add more todos' }];\n// ---cut---\ntodos[0].done = !todos[0].done;\n```\n\nIf you push a new object to the array, it will also be proxified:\n\n```js\nlet todos = [{ done: false, text: 'add more todos' }];\n// ---cut---\ntodos.push({\n\tdone: false,\n\ttext: 'eat lunch'\n});\n```\n\n> [!NOTE] When you update properties of proxies, the original object is _not_ mutated. If you need to use your own proxy handlers in a state proxy, [you should wrap the object _after_ wrapping it in `$state`](https://svelte.dev/playground/hello-world?version=latest#H4sIAAAAAAAACpWR3WoDIRCFX2UqhWyIJL3erAulL9C7XnQLMe5ksbUqOpsfln33YuyGFNJC8UKdc2bOhw7Myk9kJXsJ0nttO9jcR5KEG9AWJDwHdzwxznbaYGTl68Do5JM_FRifuh-9X8Y9Gkq1rYx4q66cJbQUWcmqqIL2VDe2IYMEbvuOikBADi-GJDSkXG-phId0G-frye2DO2psQYDFQ0Ys8gQO350dUkEydEg82T0GOs0nsSG9g2IqgxACZueo2ZUlpdvoDC6N64qsg1QKY8T2bpZp8gpIfbCQ85Zn50Ud82HkeY83uDjspenxv3jXcSDyjPWf9L1vJf0GH666J-jLu1ery4dV257IWXBWGa0-xFDMQdTTn2ScxWKsn86ROsLwQxqrVR5QM84Ij8TKFD2-cUZSm4O2LSt30kQcvwCgCmfZnAIAAA==).\n\nNote that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:\n\n```js\nlet todos = [{ done: false, text: 'add more todos' }];\n// ---cut---\nlet { done, text } = todos[0];\n\n// this will not affect the value of `done`\ntodos[0].done = !todos[0].done;\n```\n\n### Classes\n\nClass instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:\n\n```js\n// @errors: 7006 2554\nclass Todo {\n\tdone = $state(false);\n\n\tconstructor(text) {\n\t\tthis.text = $state(text);\n\t}\n\n\treset() {\n\t\tthis.text = '';\n\t\tthis.done = false;\n\t}\n}\n```\n\n> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. This means the properties are not enumerable.\n\nWhen calling methods in JavaScript, the value of [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) matters. This won't work, because `this` inside the `reset` method will be the `<button>` rather than the `Todo`:\n\n```svelte\n<button onclick={todo.reset}>\n\treset\n</button>\n```\n\nYou can either use an inline function...\n\n```svelte\n<button onclick=+++{() => todo.reset()}>+++\n\treset\n</button>\n```\n\n...or use an arrow function in the class definition:\n\n```js\n// @errors: 7006 2554\nclass Todo {\n\tdone = $state(false);\n\n\tconstructor(text) {\n\t\tthis.text = $state(text);\n\t}\n\n\t+++reset = () => {+++\n\t\tthis.text = '';\n\t\tthis.done = false;\n\t}\n}\n```\n\n### Built-in classes\n\nSvelte provides reactive implementations of built-in classes like `Set`, `Map`, `Date` and `URL` that can be imported from [`svelte/reactivity`](svelte-reactivity).\n\n## `$state.raw`\n\nIn cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.\n\nState declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:\n\n```js\nlet person = $state.raw({\n\tname: 'Heraclitus',\n\tage: 49\n});\n\n// this will have no effect\nperson.age += 1;\n\n// this will work, because we're creating a new person\nperson = {\n\tname: 'Heraclitus',\n\tage: 50\n};\n```\n\nThis can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).\n\nAs with `$state`, you can declare class fields using `$state.raw`.\n\n## `$state.snapshot`\n\nTo take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:\n\n```svelte\n<script>\n\tlet counter = $state({ count: 0 });\n\n\tfunction onclick() {\n\t\t// Will log `{ count: ... }` rather than `Proxy { ... }`\n\t\tconsole.log($state.snapshot(counter));\n\t}\n</script>\n```\n\nThis is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.\n\n## Passing state into functions\n\nJavaScript is a _pass-by-value_ language — when you call a function, the arguments are the _values_ rather than the _variables_. In other words:\n\n```js\n/// file: index.js\n// @filename: index.js\n// ---cut---\n/**\n * @param {number} a\n * @param {number} b\n */\nfunction add(a, b) {\n\treturn a + b;\n}\n\nlet a = 1;\nlet b = 2;\nlet total = add(a, b);\nconsole.log(total); // 3\n\na = 3;\nb = 4;\nconsole.log(total); // still 3!\n```\n\nIf `add` wanted to have access to the _current_ values of `a` and `b`, and to return the current `total` value, you would need to use functions instead:\n\n```js\n/// file: index.js\n// @filename: index.js\n// ---cut---\n/**\n * @param {() => number} getA\n * @param {() => number} getB\n */\nfunction add(+++getA, getB+++) {\n\treturn +++() => getA() + getB()+++;\n}\n\nlet a = 1;\nlet b = 2;\nlet total = add+++(() => a, () => b)+++;\nconsole.log(+++total()+++); // 3\n\na = 3;\nb = 4;\nconsole.log(+++total()+++); // 7\n```\n\nState in Svelte is no different — when you reference something declared with the `$state` rune...\n\n```js\nlet a = +++$state(1)+++;\nlet b = +++$state(2)+++;\n```\n\n...you're accessing its _current value_.\n\nNote that 'functions' is broad — it encompasses properties of proxies and [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)/[`set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) properties...\n\n```js\n/// file: index.js\n// @filename: index.js\n// ---cut---\n/**\n * @param {{ a: number, b: number }} input\n */\nfunction add(input) {\n\treturn {\n\t\tget value() {\n\t\t\treturn input.a + input.b;\n\t\t}\n\t};\n}\n\nlet input = $state({ a: 1, b: 2 });\nlet total = add(input);\nconsole.log(total.value); // 3\n\ninput.a = 3;\ninput.b = 4;\nconsole.log(total.value); // 7\n```\n\n...though if you find yourself writing code like that, consider using [classes](#Classes) instead.\n\n## Passing state across modules\n\nYou can declare state in `.svelte.js` and `.svelte.ts` files, but you can only _export_ that state if it's not directly reassigned. In other words you can't do this:\n\n```js\n/// file: state.svelte.js\nexport let count = $state(0);\n\nexport function increment() {\n\tcount += 1;\n}\n```\n\nThat's because every reference to `count` is transformed by the Svelte compiler — the code above is roughly equivalent to this:\n\n```js\n/// file: state.svelte.js (compiler output)\n// @filename: index.ts\ninterface Signal<T> {\n\tvalue: T;\n}\n\ninterface Svelte {\n\tstate<T>(value?: T): Signal<T>;\n\tget<T>(source: Signal<T>): T;\n\tset<T>(source: Signal<T>, value: T): void;\n}\ndeclare const $: Svelte;\n// ---cut---\nexport let count = $.state(0);\n\nexport function increment() {\n\t$.set(count, $.get(count) + 1);\n}\n```\n\n> [!NOTE] You can see the code Svelte generates by clicking the 'JS Output' tab in the [playground](/playground).\n\nSince the compiler only operates on one file at a time, if another file imports `count` Svelte doesn't know that it needs to wrap each reference in `$.get` and `$.set`:\n\n```js\n// @filename: state.svelte.js\nexport let count = 0;\n\n// @filename: index.js\n// ---cut---\nimport { count } from './state.svelte.js';\n\nconsole.log(typeof count); // 'object', not 'number'\n```\n\nThis leaves you with two options for sharing state between modules — either don't reassign it...\n\n```js\n// This is allowed — since we're updating\n// `counter.count` rather than `counter`,\n// Svelte doesn't wrap it in `$.state`\nexport const counter = $state({\n\tcount: 0\n});\n\nexport function increment() {\n\tcounter.count += 1;\n}\n```\n\n...or don't directly export it:\n\n```js\nlet count = $state(0);\n\nexport function getCount() {\n\treturn count;\n}\n\nexport function increment() {\n\tcount += 1;\n}\n```",
+		"svelte/$derived": "Derived state is declared with the `$derived` rune:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $derived(count * 2);\n</script>\n\n<button onclick={() => count++}>\n\t{doubled}\n</button>\n\n<p>{count} doubled is {doubled}</p>\n```\n\nThe expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.\n\nAs with `$state`, you can mark class fields as `$derived`.\n\n> [!NOTE] Code in Svelte components is only executed once at creation. Without the `$derived` rune, `doubled` would maintain its original value even when `count` changes.\n\n## `$derived.by`\n\nSometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.\n\n```svelte\n<script>\n\tlet numbers = $state([1, 2, 3]);\n\tlet total = $derived.by(() => {\n\t\tlet total = 0;\n\t\tfor (const n of numbers) {\n\t\t\ttotal += n;\n\t\t}\n\t\treturn total;\n\t});\n</script>\n\n<button onclick={() => numbers.push(numbers.length + 1)}>\n\t{numbers.join(' + ')} = {total}\n</button>\n```\n\nIn essence, `$derived(expression)` is equivalent to `$derived.by(() => expression)`.\n\n## Understanding dependencies\n\nAnything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.\n\nTo exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).\n\n## Overriding derived values\n\nDerived expressions are recalculated when their dependencies change, but you can temporarily override their values by reassigning them (unless they are declared with `const`). This can be useful for things like _optimistic UI_, where a value is derived from the 'source of truth' (such as data from your server) but you'd like to show immediate feedback to the user:\n\n```svelte\n<script>\n\tlet { post, like } = $props();\n\n\tlet likes = $derived(post.likes);\n\n\tasync function onclick() {\n\t\t// increment the `likes` count immediately...\n\t\tlikes += 1;\n\n\t\t// and tell the server, which will eventually update `post`\n\t\ttry {\n\t\t\tawait like();\n\t\t} catch {\n\t\t\t// failed! roll back the change\n\t\t\tlikes -= 1;\n\t\t}\n\t}\n</script>\n\n<button {onclick}>🧡 {likes}</button>\n```\n\n> [!NOTE] Prior to Svelte 5.25, deriveds were read-only.\n\n## Deriveds and reactivity\n\nUnlike `$state`, which converts objects and arrays to [deeply reactive proxies]($state#Deep-state), `$derived` values are left as-is. For example, [in a case like this](/playground/untitled#H4sIAAAAAAAAE4VU22rjMBD9lUHd3aaQi9PdstS1A3t5XvpQ2Ic4D7I1iUUV2UjjNMX431eS7TRdSosxgjMzZ45mjt0yzffIYibvy0ojFJWqDKCQVBk2ZVup0LJ43TJ6rn2aBxw-FP2o67k9oCKP5dziW3hRaUJNjoYltjCyplWmM1JIIAn3FlL4ZIkTTtYez6jtj4w8WwyXv9GiIXiQxLVs9pfTMR7EuoSLIuLFbX7Z4930bZo_nBrD1bs834tlfvsBz9_SyX6PZXu9XaL4gOWn4sXjeyzftv4ZWfyxubpzxzg6LfD4MrooxELEosKCUPigQCMPKCZh0OtQE1iSxcsmdHuBvCiHZXALLXiN08EL3RRkaJ_kDVGle0HcSD5TPEeVtj67O4Nrg9aiSNtBY5oODJkrL5QsHtN2cgXp6nSJMWzpWWGasdlsGEMbzi5jPr5KFr0Ep7pdeM2-TCelCddIhDxAobi1jqF3cMaC1RKp64bAW9iFAmXGIHfd4wNXDabtOLN53w8W53VvJoZLh7xk4Rr3CoL-UNoLhWHrT1JQGcM17u96oES5K-kc2XOzkzqGCKL5De79OUTyyrg1zgwXsrEx3ESfx4Bz0M5UjVMHB24mw9SuXtXFoN13fYKOM1tyUT3FbvbWmSWCZX2Er-41u5xPoml45svRahl9Wb9aasbINJixDZwcPTbyTLZSUsAvrg_cPuCR7s782_WU8343Y72Qtlb8OYatwuOQvuN13M_hJKNfxann1v1U_B1KZ_D_mzhzhz24fw85CSz2irtN9w9HshBK7AQAAA==)...\n\n```js\nlet items = $state([...]);\n\nlet index = $state(0);\nlet selected = $derived(items[index]);\n```\n\n...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.\n\n## Destructuring\n\nIf you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...\n\n```js\nfunction stuff() { return { a: 1, b: 2, c: 3 } }\n// ---cut---\nlet { a, b, c } = $derived(stuff());\n```\n\n...is roughly equivalent to this:\n\n```js\nfunction stuff() { return { a: 1, b: 2, c: 3 } }\n// ---cut---\nlet _stuff = $derived(stuff());\nlet a = $derived(_stuff.a);\nlet b = $derived(_stuff.b);\nlet c = $derived(_stuff.c);\n```\n\n## Update propagation\n\nSvelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').\n\nIf the new value of a derived is referentially identical to its previous value, downstream updates will be skipped. In other words, Svelte will only update the text inside the button when `large` changes, not when `count` changes, even though `large` depends on `count`:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet large = $derived(count > 10);\n</script>\n\n<button onclick={() => count++}>\n\t{large}\n</button>\n```",
+		"svelte/$effect": "Effects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `<canvas>` elements, or making network requests. They only run in the browser, not during server-side rendering.\n\nGenerally speaking, you should _not_ update state inside effects, as it will make code more convoluted and will often lead to never-ending update cycles. If you find yourself doing so, see [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.\n\nYou can create an effect with the `$effect` rune ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):\n\n```svelte\n<script>\n\tlet size = $state(50);\n\tlet color = $state('#ff3e00');\n\n\tlet canvas;\n\n\t$effect(() => {\n\t\tconst context = canvas.getContext('2d');\n\t\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\n\t\t// this will re-run whenever `color` or `size` change\n\t\tcontext.fillStyle = color;\n\t\tcontext.fillRect(0, 0, size, size);\n\t});\n</script>\n\n<canvas bind:this={canvas} width=\"100\" height=\"100\"></canvas>\n```\n\nWhen Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.\n\n> [!NOTE] If you're having difficulty understanding why your `$effect` is rerunning or is not running see [understanding dependencies](#Understanding-dependencies). Effects are triggered differently than the `$:` blocks you may be used to if coming from Svelte 4.\n\n### Understanding lifecycle\n\nYour effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes. Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.\n\nYou can use `$effect` anywhere, not just at the top level of a component, as long as it is called while a parent effect is running.\n\n> [!NOTE] Svelte uses effects internally to represent logic and expressions in your template — this is how `<h1>hello {name}!</h1>` updates when `name` changes.\n\nAn effect can return a _teardown function_ which will run immediately before the effect re-runs ([demo](/playground/untitled#H4sIAAAAAAAAE42SQVODMBCF_8pOxkPRKq3HCsx49K4n64xpskjGkDDJ0tph-O8uINo6HjxB3u7HvrehE07WKDbiyZEhi1osRWksRrF57gQdm6E2CKx_dd43zU3co6VB28mIf-nKO0JH_BmRRRVMQ8XWbXkAgfKtI8jhIpIkXKySu7lSG2tNRGZ1_GlYr1ZTD3ddYFmiosUigbyAbpC2lKbwWJkIB8ZhhxBQBWRSw6FCh3sM8GrYTthL-wqqku4N44TyqEgwF3lmRHr4Op0PGXoH31c5rO8mqV-eOZ49bikgtcHBL55tmhIkEMqg_cFB2TpFxjtg703we6NRL8HQFCS07oSUCZi6Rm04lz1yytIHBKoQpo1w6Gsm4gmyS8b8Y5PydeMdX8gwS2Ok4I-ov5NZtvQde95GMsccn_1wzNKfu3RZtS66cSl9lvL7qO1aIk7knbJGvefdtIOzi73M4bYvovUHDFk6AcX_0HRESxnpBOW_jfCDxIZCi_1L_wm4xGQ60wIAAA==)).\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet milliseconds = $state(1000);\n\n\t$effect(() => {\n\t\t// This will be recreated whenever `milliseconds` changes\n\t\tconst interval = setInterval(() => {\n\t\t\tcount += 1;\n\t\t}, milliseconds);\n\n\t\treturn () => {\n\t\t\t// if a teardown function is provided, it will run\n\t\t\t// a) immediately before the effect re-runs\n\t\t\t// b) when the component is destroyed\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<h1>{count}</h1>\n\n<button onclick={() => (milliseconds *= 2)}>slower</button>\n<button onclick={() => (milliseconds /= 2)}>faster</button>\n```\n\nTeardown functions also run when the effect is destroyed, which happens when its parent is destroyed (for example, a component is unmounted) or the parent effect re-runs.\n\n### Understanding dependencies\n\n`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body (including indirectly, via function calls) and registers them as dependencies. When those dependencies change, the `$effect` schedules a re-run.\n\nIf `$state` and `$derived` are used directly inside the `$effect` (for example, during creation of a [reactive class](https://svelte.dev/docs/svelte/$state#Classes)), those values will _not_ be treated as dependencies.\n\nValues that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):\n\n```ts\n// @filename: index.ts\ndeclare let canvas: {\n\twidth: number;\n\theight: number;\n\tgetContext(type: '2d', options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n};\ndeclare let color: string;\ndeclare let size: number;\n\n// ---cut---\n$effect(() => {\n\tconst context = canvas.getContext('2d');\n\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\n\t// this will re-run whenever `color` changes...\n\tcontext.fillStyle = color;\n\n\tsetTimeout(() => {\n\t\t// ...but not when `size` changes\n\t\tcontext.fillRect(0, 0, size, size);\n\t}, 0);\n});\n```\n\nAn effect only reruns when the object it reads changes, not when a property inside it changes. (If you want to observe changes _inside_ an object at dev time, you can use [`$inspect`]($inspect).)\n\n```svelte\n<script>\n\tlet state = $state({ value: 0 });\n\tlet derived = $derived({ value: state.value * 2 });\n\n\t// this will run once, because `state` is never reassigned (only mutated)\n\t$effect(() => {\n\t\tstate;\n\t});\n\n\t// this will run whenever `state.value` changes...\n\t$effect(() => {\n\t\tstate.value;\n\t});\n\n\t// ...and so will this, because `derived` is a new object each time\n\t$effect(() => {\n\t\tderived;\n\t});\n</script>\n\n<button onclick={() => (state.value += 1)}>\n\t{state.value}\n</button>\n\n<p>{state.value} doubled is {derived.value}</p>\n```\n\nAn effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code.\n\nFor instance, if `condition` is `true` in the code snippet below, the code inside the `if` block will run and `color` will be evaluated. This means that changes to either `condition` or `color` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE21RQW6DMBD8ytaNBJHaJFLViwNIVZ8RcnBgXVk1xsILTYT4e20TQg89IOPZ2fHM7siMaJBx9tmaWpFqjQNlAKXEihx7YVJpdIyfRkY3G4gB8Pi97cPanRtQU8AuwuF_eNUaQuPlOMtc1SlLRWlKUo1tOwJflUikQHZtA0klzCDc64Imx0ANn8bInV1CDhtHgjClrsftcSXotluLybOUb3g4JJHhOZs5WZpuIS9gjNqkJKQP5e2ClrR4SMdZ13E4xZ8zTPOTJU2A2uE_PQ9COCI926_hTVarIU4hu_REPlBrKq2q73ycrf1N-vS4TMUsulaVg3EtR8H9rFgsg8uUsT1B2F9eshigZHBRpuaD0D3mY8Qm2BfB5N2YyRzdNEYVDy0Ja-WsFjcOUuP1HvFLWA6H3XuHTUSmmDV2--0TXonxsKbp7G9C6R__NONS-MFNvxj_d6mBAgAA).\n\nConversely, if `condition` is `false`, `color` will not be evaluated, and the effect will _only_ re-run again when `condition` changes.\n\n```ts\n// @filename: ambient.d.ts\ndeclare module 'canvas-confetti' {\n\tinterface ConfettiOptions {\n\t\tcolors: string[];\n\t}\n\n\tfunction confetti(opts?: ConfettiOptions): void;\n\texport default confetti;\n}\n\n// @filename: index.js\n// ---cut---\nimport confetti from 'canvas-confetti';\n\nlet condition = $state(true);\nlet color = $state('#ff3e00');\n\n$effect(() => {\n\tif (condition) {\n\t\tconfetti({ colors: [color] });\n\t} else {\n\t\tconfetti();\n\t}\n});\n```\n\n## `$effect.pre`\n\nIn rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:\n\n```svelte\n<script>\n\timport { tick } from 'svelte';\n\n\tlet div = $state();\n\tlet messages = $state([]);\n\n\t// ...\n\n\t$effect.pre(() => {\n\t\tif (!div) return; // not yet mounted\n\n\t\t// reference `messages` array length so that this code re-runs whenever it changes\n\t\tmessages.length;\n\n\t\t// autoscroll when new messages are added\n\t\tif (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {\n\t\t\ttick().then(() => {\n\t\t\t\tdiv.scrollTo(0, div.scrollHeight);\n\t\t\t});\n\t\t}\n\t});\n</script>\n\n<div bind:this={div}>\n\t{#each messages as message}\n\t\t<p>{message}</p>\n\t{/each}\n</div>\n```\n\nApart from the timing, `$effect.pre` works exactly like `$effect`.\n\n## `$effect.tracking`\n\nThe `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)):\n\n```svelte\n<script>\n\tconsole.log('in component setup:', $effect.tracking()); // false\n\n\t$effect(() => {\n\t\tconsole.log('in effect:', $effect.tracking()); // true\n\t});\n</script>\n\n<p>in template: {$effect.tracking()}</p> <!-- true -->\n```\n\nIt is used to implement abstractions like [`createSubscriber`](/docs/svelte/svelte-reactivity#createSubscriber), which will create listeners to update reactive values but _only_ if those values are being tracked (rather than, for example, read inside an event handler).\n\n## `$effect.pending`\n\nWhen using [`await`](await-expressions) in components, the `$effect.pending()` rune tells you how many promises are pending in the current [boundary](svelte-boundary), not including child boundaries ([demo](/playground/untitled#H4sIAAAAAAAAE3WRMU_DMBCF_8rJdHDUqilILGkaiY2RgY0yOPYZWbiOFV8IleX_jpMUEAIWS_7u-d27c2ROnJBV7B6t7WDsequAozKEqmAbpo3FwKqnyOjsJ90EMr-8uvN-G97Q0sRaEfAvLjtH6CjbsDrI3nhqju5IFgkEHGAVSBDy62L_SdtvejPTzEU4Owl6cJJM50AoxcUG2gLiVM31URgChyM89N3JBORcF3BoICA9mhN2A3G9gdvdrij2UJYgejLaSCMsKLTivNj0SEOf7WEN7ZwnHV1dfqd2dTsQ5QCdk9bI10PkcxexXqcmH3W51Jt_le2kbH8os9Y3UaTcNLYpDx-Xab6GTHXpZ128MhpWqDVK2np0yrgXXqQpaLa4APDLBkIF8bd2sYql0Sn_DeE7sYr6AdNzvgljR-MUq7SwAdMHeUtgHR4CAAA=)):\n\n```svelte\n<button onclick={() => a++}>a++</button>\n<button onclick={() => b++}>b++</button>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n\n{#if $effect.pending()}\n\t<p>pending promises: {$effect.pending()}</p>\n{/if}\n```\n\n## `$effect.root`\n\nThe `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.\n\n```js\nconst destroy = $effect.root(() => {\n\t$effect(() => {\n\t\t// setup\n\t});\n\n\treturn () => {\n\t\t// cleanup\n\t};\n});\n\n// later...\ndestroy();\n```\n\n## When not to use `$effect`\n\nIn general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $state();\n\n\t// don't do this!\n\t$effect(() => {\n\t\tdoubled = count * 2;\n\t});\n</script>\n```\n\n...do this:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $derived(count * 2);\n</script>\n```\n\n> [!NOTE] For things that are more complicated than a simple expression like `count * 2`, you can also use `$derived.by`.\n\nIf you're using an effect because you want to be able to reassign the derived value (to build an optimistic UI, for example) note that [deriveds can be directly overridden]($derived#Overriding-derived-values) as of Svelte 5.25.\n\nYou might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for \"money spent\" and \"money left\" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAAE5WRTWrDMBCFryKGLBJoY3fRjWIHeoiu6i6UZBwEY0VE49TB-O6VxrFTSih0qe_Ne_OjHpxpEDS8O7ZMeIAnqC1hAP3RA1990hKI_Fb55v06XJA4sZ0J-IjvT47RcYyBIuzP1vO2chVHHFjxiQ2pUr3k-SZRQlbBx_LIFoEN4zJfzQph_UMQr4hRXmBd456Xy5Uqt6pPKHmkfmzyPAZL2PCnbRpg8qWYu63I7lu4gswOSRYqrPNt3CgeqqzgbNwRK1A76w76YqjFspfcQTWmK3vJHlQm1puSTVSeqdOc_r9GaeCHfUSY26TXry6Br4RSK3C6yMEGT-aqVU3YbUZ2NF6rfP2KzXgbuYzY46czdgyazy0On_FlLH3F-UDXhgIO35UGlA1rAgAA)):\n\n```svelte\n<script>\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $state(total);\n\n\t$effect(() => {\n\t\tleft = total - spent;\n\t});\n\n\t$effect(() => {\n\t\tspent = total - left;\n\t});\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" bind:value={left} max={total} />\n\t{left}/{total} left\n</label>\n```\n\nInstead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE5VRvW7CMBB-FcvqECQK6dDFJEgsnfoGTQdDLsjSxVjxhYKivHvPBwFUsXS8774_nwftbQva6I_e78gdvNo6Xzu_j3quG4cQtfkaNJ1DIiWA8atkE8IiHgEpYVsb4Rm-O3gCT2yji7jrXKB15StiOJKiA1lUpXrL81VCEUjFwHTGXiJZgiyf3TYIjSxq6NwR6uyifr0ohMbEZnpHH2rWf7ImS8KZGtK6osl_UqelRIyVL5b3ir5AuwWUtoXzoee6fIWy0p31e6i0XMocLfZQDuI6qtaeykGcR7UU6XWznFAZU9LN_X9B2UyVayk9f3ji0-REugen6U9upDOCcAWcLlS7GNCejWoQTqsLtrfBqHzxDu3DrUTOf0xwIm2o62H85sk6_OHG2jQWI4y_3byXXGMCAAA=)):\n\n```svelte\n<script>\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $derived(total - spent);\n\n+++\tfunction updateLeft(left) {\n\t\tspent = total - left;\n\t}+++\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" +++bind:value={() => left, updateLeft}+++ max={total} />\n\t{left}/{total} left\n</label>\n```\n\nIf you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).",
+		"svelte/$props": "The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport MyComponent from './MyComponent.svelte';\n</script>\n\n<MyComponent adjective=\"cool\" />\n```\n\nOn the other side, inside `MyComponent.svelte`, we can receive props with the `$props` rune...\n\n```svelte\n<!--- file: MyComponent.svelte --->\n<script>\n\tlet props = $props();\n</script>\n\n<p>this component is {props.adjective}</p>\n```\n\n...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:\n\n```svelte\n<!--- file: MyComponent.svelte --->\n<script>\n\tlet +++{ adjective }+++ = $props();\n</script>\n\n<p>this component is {+++adjective+++}</p>\n```\n\n## Fallback values\n\nDestructuring allows us to declare fallback values, which are used if the parent component does not set a given prop (or the value is `undefined`):\n\n```js\nlet { adjective = 'happy' } = $props();\n```\n\n> [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info)\n\n## Renaming props\n\nWe can also use the destructuring assignment to rename props, which is necessary if they're invalid identifiers, or a JavaScript keyword like `super`:\n\n```js\nlet { super: trouper = 'lights are gonna find me' } = $props();\n```\n\n## Rest props\n\nFinally, we can use a _rest property_ to get, well, the rest of the props:\n\n```js\nlet { a, b, c, ...others } = $props();\n```\n\n## Updating props\n\nReferences to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Child from './Child.svelte';\n\n\tlet count = $state(0);\n</script>\n\n<button onclick={() => (count += 1)}>\n\tclicks (parent): {count}\n</button>\n\n<Child {count} />\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { count } = $props();\n</script>\n\n<button onclick={() => (count += 1)}>\n\tclicks (child): {count}\n</button>\n```\n\nWhile you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable).\n\nIf the prop is a regular object, the mutation will have no effect ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2W1QmorQgJXk0RC3PkBwiExG9WQrC17U4Es_ztKUkQp9OjxzM7bjcjtSKjwyfKNp1aLORA4b13ADHszUED1HFE-3eyaBcy-Mw_O5eFAg8xa1wb6T9eWhVgCKiyD9sZJ3XAjZnTWCzzuzfAKvbcjbPJieR2jm_uGy-InweXqtd0baaliBG0nFgW3kBIUNWYo9CGoxE-UsgvIpw2_oc9-LmAPJBCPDJCggqvlVtvdH9puErEMlvVg9HsVtzuoaojzkKKAfRuALVDfk5ZZW0fmy05wXcFdwyktlUs-KIinljTXrRVnm7-kL9dYLVbUAQAA)):\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Child from './Child.svelte';\n</script>\n\n<Child object={{ count: 0 }} />\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { object } = $props();\n</script>\n\n<button onclick={() => {\n\t// has no effect\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nIf the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0U7DMAxFf8VESBuiauG1WycheOEbKA9p67FA6kSNszJV-XeUZhMw2GN8r-1znUmQ7FGU4pn2UqsOes-SlSGRia3S6ET5Mgk-2OiJBZGdOh6szd0eNcdaIx3-V28NMRI7UYq1awdleVNTzaq3ZmB43CndwXYwPSzyYn4dWxermqJRI4Np3rFlqODasWRcTtAaT1zCHYSbVU3r4nsyrdPMKTUFKDYiE4yfLEoePIbsQpqfy3_nOVMuJIqg0wk1RFg7GOuWfwEbz2wIDLVatR_VtLyBagNTHFIUMCqtoZXeIfAOU1JoUJsR2IC3nWTMjt7GM4yKdyBhlAMpesvhydCC0y_i0ZagHByMh26WzUhXUUxKnpbcVnBfUwhznJnNlac7JkuIURL-2VVfwxflyrWcSQIAAA==)):\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Child from './Child.svelte';\n\n\tlet object = $state({count: 0});\n</script>\n\n<Child {object} />\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { object } = $props();\n</script>\n\n<button onclick={() => {\n\t// will cause the count below to update,\n\t// but with a warning. Don't mutate\n\t// objects you don't own!\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nThe fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VkIbUVoYFraCIh7vwA4eC4G9Wta1vxpgJZ_nfkBEQp9OjxzOzTRGHlkUQlXpy9G0gq1idCL43ppDrAD84HUYheGwqieo2CP3y2Z0EU3-En79fhRIaz1slA_-nKWSbLQVRiE9SgPTetbVkfvRsYzztttugHd8RiXU6vr-jisbWb8idhN7O3bEQhmN5ZVDyMlIorcOddv_Eufq4AGmJEuG5PilEjQrnRcoV7JCTUuJlGWq7-YHYjs7NwVhmtDnVcrlA3iLmzLLGTAdaB-j736h68Oxv-JM1I0AFjoG1OzPfX023c1nhobUoT39QeKsRzS8owM8DFTG_pE6dcVl70AQAA))\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { object = { count: 0 } } = $props();\n</script>\n\n<button onclick={() => {\n\t// has no effect if the fallback value is used\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nIn summary: don't mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the [`$bindable`]($bindable) rune.\n\n## Type safety\n\nYou can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this...\n\n```svelte\n<script lang=\"ts\">\n\tlet { adjective }: { adjective: string } = $props();\n</script>\n```\n\n...while in JSDoc you can do this:\n\n```svelte\n<script>\n\t/** @type {{ adjective: string }} */\n\tlet { adjective } = $props();\n</script>\n```\n\nYou can, of course, separate the type declaration from the annotation:\n\n```svelte\n<script lang=\"ts\">\n\tinterface Props {\n\t\tadjective: string;\n\t}\n\n\tlet { adjective }: Props = $props();\n</script>\n```\n\n> [!NOTE] Interfaces for native DOM elements are provided in the `svelte/elements` module (see [Typing wrapper components](typescript#Typing-wrapper-components))\n\nAdding types is recommended, as it ensures that people using your component can easily discover which props they should provide.\n\n\n## `$props.id()`\n\nThis rune, added in version 5.20.0, generates an ID that is unique to the current component instance. When hydrating a server-rendered component, the value will be consistent between server and client.\n\nThis is useful for linking elements via attributes like `for` and `aria-labelledby`.\n\n```svelte\n<script>\n\tconst uid = $props.id();\n</script>\n\n<form>\n\t<label for=\"{uid}-firstname\">First Name: </label>\n\t<input id=\"{uid}-firstname\" type=\"text\" />\n\n\t<label for=\"{uid}-lastname\">Last Name: </label>\n\t<input id=\"{uid}-lastname\" type=\"text\" />\n</form>\n```",
+		"svelte/$bindable": "Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.\n\nIn Svelte, component props can be _bound_, which means that data can also flow _up_ from child to parent. This isn't something you should do often, but it can simplify your code if used sparingly and carefully.\n\nIt also means that a state proxy can be _mutated_ in the child.\n\n> [!NOTE] Mutation is also possible with normal props, but is strongly discouraged — Svelte will warn you if it detects that a component is mutating state it does not 'own'.\n\nTo mark a prop as bindable, we use the `$bindable` rune:\n\n<!-- prettier-ignore -->\n```svelte\n/// file: FancyInput.svelte\n<script>\n\tlet { value = $bindable(), ...props } = $props();\n</script>\n\n<input bind:value={value} {...props} />\n\n<style>\n\tinput {\n\t\tfont-family: 'Comic Sans MS';\n\t\tcolor: deeppink;\n\t}\n</style>\n```\n\nNow, a component that uses `<FancyInput>` can add the [`bind:`](bind) directive ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwWrDMBBEf2URBSfg2nfFMZRCoYeecqx6UJx1IyqvhLUONcb_XqSkTUOSk1az7DBvJtEai0HI90nw6FHIJIhckO7i78n7IhzQctS2OuAtvXHESByEFFVoeuO5VqTYdN71DC-amvGV_MDQ9q6DrCjP0skkWymKJxYZOgxBfyKs4SGwZlxke7TWZcuVoqo8-1P1z3lraCcP2g64nk4GM5S1osrXf0JV-lrkgvGbheR-wDm_g30V8JL-1vpOCZFogpQsEsWcemtxscyhKArfOx9gjps0Lq4hzRVfemaYfu-PoIqqwKPFY_XpaIqj4tYRP7a6M3aUkD27zjSw0RTgbZN6Z8WNs66XsEP03tBXUueUJFlelvYx_wCuI3leNwIAAA==)):\n\n<!-- prettier-ignore -->\n```svelte\n/// file: App.svelte\n<script>\n\timport FancyInput from './FancyInput.svelte';\n\n\tlet message = $state('hello');\n</script>\n\n<FancyInput bind:value={message} />\n<p>{message}</p>\n```\n\nThe parent component doesn't _have_ to use `bind:` — it can just pass a normal prop. Some parents don't want to listen to what their children have to say.\n\nIn this case, you can specify a fallback value for when no prop is passed at all:\n\n```js\n/// file: FancyInput.svelte\nlet { value = $bindable('fallback'), ...props } = $props();\n```",
+		"svelte/$inspect": "> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.\n\nThe `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire ([demo](/playground/untitled#H4sIAAAAAAAACkWQ0YqDQAxFfyUMhSotdZ-tCvu431AXtGOqQ2NmmMm0LOK_r7Utfby5JzeXTOpiCIPKT5PidkSVq2_n1F7Jn3uIcEMSXHSw0evHpAjaGydVzbUQCmgbWaCETZBWMPlKj29nxBDaHj_edkAiu12JhdkYDg61JGvE_s2nR8gyuBuiJZuDJTyQ7eE-IEOzog1YD80Lb0APLfdYc5F9qnFxjiKWwbImo6_llKRQVs-2u91c_bD2OCJLkT3JZasw7KLA2XCX31qKWE6vIzNk1fKE0XbmYrBTufiI8-_8D2cUWBA_AQAA)):\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet message = $state('hello');\n\n\t$inspect(count, message); // will console.log when `count` or `message` change\n</script>\n\n<button onclick={() => count++}>Increment</button>\n<input bind:value={message} />\n```\n\n## $inspect(...).with\n\n`$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `\"init\"` or `\"update\"`; subsequent arguments are the values passed to `$inspect` ([demo](/playground/untitled#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)):\n\n```svelte\n<script>\n\tlet count = $state(0);\n\n\t$inspect(count).with((type, count) => {\n\t\tif (type === 'update') {\n\t\t\tdebugger; // or `console.trace`, or whatever you want\n\t\t}\n\t});\n</script>\n\n<button onclick={() => count++}>Increment</button>\n```\n\nA convenient way to find the origin of some change is to pass `console.trace` to `with`:\n\n```js\n// @errors: 2304\n$inspect(stuff).with(console.trace);\n```\n\n## $inspect.trace(...)\n\nThis rune, added in 5.14, causes the surrounding function to be _traced_ in development. Any time the function re-runs as part of an [effect]($effect) or a [derived]($derived), information will be printed to the console about which pieces of reactive state caused the effect to fire.\n\n```svelte\n<script>\n\timport { doSomeWork } from './elsewhere';\n\n\t$effect(() => {\n\t\t+++// $inspect.trace must be the first statement of a function body+++\n\t\t+++$inspect.trace();+++\n\t\tdoSomeWork();\n\t});\n</script>\n```\n\n`$inspect.trace` takes an optional first argument which will be used as the label.",
+		"svelte/$host": "When compiling a component as a [custom element](custom-elements), the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):\n\n<!-- prettier-ignore -->\n```svelte\n/// file: Stepper.svelte\n<svelte:options customElement=\"my-stepper\" />\n\n<script>\n\tfunction dispatch(type) {\n\t\t+++$host()+++.dispatchEvent(new CustomEvent(type));\n\t}\n</script>\n\n<button onclick={() => dispatch('decrement')}>decrement</button>\n<button onclick={() => dispatch('increment')}>increment</button>\n```\n\n<!-- prettier-ignore -->\n```svelte\n/// file: App.svelte\n<script>\n\timport './Stepper.svelte';\n\n\tlet count = $state(0);\n</script>\n\n<my-stepper\n\tondecrement={() => count -= 1}\n\tonincrement={() => count += 1}\n></my-stepper>\n\n<p>count: {count}</p>\n```",
+		"svelte/basic-markup": "Markup inside a Svelte component can be thought of as HTML++.\n\n## Tags\n\nA lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag or a tag that uses dot notation, such as `<Widget>` or `<my.stuff>`, indicates a _component_.\n\n```svelte\n<script>\n\timport Widget from './Widget.svelte';\n</script>\n\n<div>\n\t<Widget />\n</div>\n```\n\n## Element attributes\n\nBy default, attributes work exactly like their HTML counterparts.\n\n```svelte\n<div class=\"foo\">\n\t<button disabled>can't touch this</button>\n</div>\n```\n\nAs in HTML, values may be unquoted.\n\n<!-- prettier-ignore -->\n```svelte\n<input type=checkbox />\n```\n\nAttribute values can contain JavaScript expressions.\n\n```svelte\n<a href=\"page/{p}\">page {p}</a>\n```\n\nOr they can _be_ JavaScript expressions.\n\n```svelte\n<button disabled={!clickable}>...</button>\n```\n\nBoolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).\n\nAll other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).\n\n```svelte\n<input required={false} placeholder=\"This input field is not required\" />\n<div title={null}>This div has no title attribute</div>\n```\n\n> [!NOTE] Quoting a singular expression does not affect how the value is parsed, but in Svelte 6 it will cause the value to be coerced to a string:\n>\n> <!-- prettier-ignore -->\n> ```svelte\n> <button disabled=\"{number !== 42}\">...</button>\n> ```\n\nWhen the attribute name and value match (`name={name}`), they can be replaced with `{name}`.\n\n```svelte\n<button {disabled}>...</button>\n<!-- equivalent to\n<button disabled={disabled}>...</button>\n-->\n```\n\n## Component props\n\nBy convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.\n\nAs with elements, `name={name}` can be replaced with the `{name}` shorthand.\n\n```svelte\n<Widget foo={bar} answer={42} text=\"hello\" />\n```\n\n## Spread attributes\n\n_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.\n\nAn element or component can have multiple spread attributes, interspersed with regular ones. Order matters — if `things.a` exists it will take precedence over `a=\"b\"`, while `c=\"d\"` would take precedence over `things.c`:\n\n```svelte\n<Widget a=\"b\" {...things} c=\"d\" />\n```\n\n## Events\n\nListening to DOM events is possible by adding attributes to the element that start with `on`. For example, to listen to the `click` event, add the `onclick` attribute to a button:\n\n```svelte\n<button onclick={() => console.log('clicked')}>click me</button>\n```\n\nEvent attributes are case sensitive. `onclick` listens to the `click` event, `onClick` listens to the `Click` event, which is different. This ensures you can listen to custom events that have uppercase characters in them.\n\nBecause events are just attributes, the same rules as for attributes apply:\n\n- you can use the shorthand form: `<button {onclick}>click me</button>`\n- you can spread them: `<button {...thisSpreadContainsEventAttributes}>click me</button>`\n\nTiming-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, some event handlers are attached directly with `addEventListener`, while others are _delegated_.\n\nWhen using `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) for better performance. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.\n\nIn the very rare cases that you need to prevent these event defaults, you should use [`on`](svelte-events#on) instead (for example inside an action).\n\n### Event delegation\n\nTo reduce memory footprint and increase performance, Svelte uses a technique called event delegation. This means that for certain events — see the list below — a single event listener at the application root takes responsibility for running any handlers on the event's path.\n\nThere are a few gotchas to be aware of:\n\n- when you manually dispatch an event with a delegated listener, make sure to set the `{ bubbles: true }` option or it won't reach the application root\n- when using `addEventListener` directly, avoid calling `stopPropagation` or the event won't reach the application root and handlers won't be invoked. Similarly, handlers added manually inside the application root will run _before_ handlers added declaratively deeper in the DOM (with e.g. `onclick={...}`), in both capturing and bubbling phases. For these reasons it's better to use the `on` function imported from `svelte/events` rather than `addEventListener`, as it will ensure that order is preserved and `stopPropagation` is handled correctly.\n\nThe following event handlers are delegated:\n\n- `beforeinput`\n- `click`\n- `change`\n- `dblclick`\n- `contextmenu`\n- `focusin`\n- `focusout`\n- `input`\n- `keydown`\n- `keyup`\n- `mousedown`\n- `mousemove`\n- `mouseout`\n- `mouseover`\n- `mouseup`\n- `pointerdown`\n- `pointermove`\n- `pointerout`\n- `pointerover`\n- `pointerup`\n- `touchend`\n- `touchmove`\n- `touchstart`\n\n## Text expressions\n\nA JavaScript expression can be included as text by surrounding it with curly braces.\n\n```svelte\n{expression}\n```\n\nExpressions that are `null` or `undefined` will be omitted; all others are [coerced to strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion).\n\nCurly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `&lbrace;`, `&lcub;`, or `&#123;` for `{` and `&rbrace;`, `&rcub;`, or `&#125;` for `}`.\n\nIf you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.\n\n<!-- prettier-ignore -->\n```svelte\n<h1>Hello {name}!</h1>\n<p>{a} + {b} = {a + b}.</p>\n\n<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>\n```\n\nThe expression will be stringified and escaped to prevent code injections. If you want to render HTML, use the `{@html}` tag instead.\n\n```svelte\n{@html potentiallyUnsafeHtmlString}\n```\n\n> [!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/)\n\n## Comments\n\nYou can use HTML comments inside components.\n\n```svelte\n<!-- this is a comment! --><h1>Hello world</h1>\n```\n\nComments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.\n\n```svelte\n<!-- svelte-ignore a11y_autofocus -->\n<input bind:value={name} autofocus />\n```\n\nYou can add a special comment starting with `@component` that will show up when hovering over the component name in other files.\n\n````svelte\n<!--\n@component\n- You can use markdown here.\n- You can also use code blocks here.\n- Usage:\n  ```html\n  <Main name=\"Arethra\">\n  ```\n-->\n<script>\n\tlet { name } = $props();\n</script>\n\n<main>\n\t<h1>\n\t\tHello, {name}\n\t</h1>\n</main>\n````",
+		"svelte/if": "```svelte\n<!--- copy: false  --->\n{#if expression}...{/if}\n```\n\n```svelte\n<!--- copy: false  --->\n{#if expression}...{:else if expression}...{/if}\n```\n\n```svelte\n<!--- copy: false  --->\n{#if expression}...{:else}...{/if}\n```\n\nContent that is conditionally rendered can be wrapped in an if block.\n\n```svelte\n{#if answer === 42}\n\t<p>what was the question?</p>\n{/if}\n```\n\nAdditional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.\n\n```svelte\n{#if porridge.temperature > 100}\n\t<p>too hot!</p>\n{:else if 80 > porridge.temperature}\n\t<p>too cold!</p>\n{:else}\n\t<p>just right!</p>\n{/if}\n```\n\n(Blocks don't have to wrap elements, they can also wrap text within elements.)",
+		"svelte/each": "```svelte\n<!--- copy: false  --->\n{#each expression as name}...{/each}\n```\n\n```svelte\n<!--- copy: false  --->\n{#each expression as name, index}...{/each}\n```\n\nIterating over values can be done with an each block. The values in question can be arrays, array-like objects (i.e. anything with a `length` property), or iterables like `Map` and `Set` — in other words, anything that can be used with `Array.from`.\n\n```svelte\n<h1>Shopping list</h1>\n<ul>\n\t{#each items as item}\n\t\t<li>{item.name} x {item.qty}</li>\n\t{/each}\n</ul>\n```\n\nAn each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:\n\n```svelte\n{#each items as item, i}\n\t<li>{i + 1}: {item.name} x {item.qty}</li>\n{/each}\n```\n\n## Keyed each blocks\n\n```svelte\n<!--- copy: false  --->\n{#each expression as name (key)}...{/each}\n```\n\n```svelte\n<!--- copy: false  --->\n{#each expression as name, index (key)}...{/each}\n```\n\nIf a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to intelligently update the list when data changes by inserting, moving and deleting items, rather than adding or removing items at the end and updating the state in the middle.\n\nThe key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.\n\n```svelte\n{#each items as item (item.id)}\n\t<li>{item.name} x {item.qty}</li>\n{/each}\n\n<!-- or with additional index value -->\n{#each items as item, i (item.id)}\n\t<li>{i + 1}: {item.name} x {item.qty}</li>\n{/each}\n```\n\nYou can freely use destructuring and rest patterns in each blocks.\n\n```svelte\n{#each items as { id, name, qty }, i (id)}\n\t<li>{i + 1}: {name} x {qty}</li>\n{/each}\n\n{#each objects as { id, ...rest }}\n\t<li><span>{id}</span><MyComponent {...rest} /></li>\n{/each}\n\n{#each items as [id, ...rest]}\n\t<li><span>{id}</span><MyComponent values={rest} /></li>\n{/each}\n```\n\n## Each blocks without an item\n\n```svelte\n<!--- copy: false  --->\n{#each expression}...{/each}\n```\n\n```svelte\n<!--- copy: false  --->\n{#each expression, index}...{/each}\n```\n\nIn case you just want to render something `n` times, you can omit the `as` part ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0W7CMAxFf8XKNAk0WsSeUEaRpn3Guoc0MbQiJFHiMlDVf18SOrZJ48259_jaVgZmxBEZZ28thgCNFV6xBdt1GgPj7wOji0t2EqI-wa_OleGEmpLWiID_6dIaQkMxhm1UdwKpRQhVzWSaVORJNdvWpqbhAYVsYQCNZk8thzWMC_DCHMZk3wPSThNQ088I3mghD9UwSwHwlLE5PMIzVFUFq3G7WUZ2OyUvU3JOuZU332wCXTRmtPy1NgzXZtUFp8WFw9536uWqpbIgPEaDsJBW90cTOHh0KGi2XsBq5-cT6-3nPauxXqHnsHJnCFZ3CvJVkyuCQ0mFF9TZyCQ162WGvteLKfG197Y3iv_pz_fmS68Hxt8iPBPj5HscP8YvCNX7uhYCAAA=)):\n\n```svelte\n<div class=\"chess-board\">\n\t{#each { length: 8 }, rank}\n\t\t{#each { length: 8 }, file}\n\t\t\t<div class:black={(rank + file) % 2 === 1}></div>\n\t\t{/each}\n\t{/each}\n</div>\n```\n\n## Else blocks\n\n```svelte\n<!--- copy: false  --->\n{#each expression as name}...{:else}...{/each}\n```\n\nAn each block can also have an `{:else}` clause, which is rendered if the list is empty.\n\n```svelte\n{#each todos as todo}\n\t<p>{todo.text}</p>\n{:else}\n\t<p>No tasks today!</p>\n{/each}\n```",
+		"svelte/key": "```svelte\n<!--- copy: false  --->\n{#key expression}...{/key}\n```\n\nKey blocks destroy and recreate their contents when the value of an expression changes. When used around components, this will cause them to be reinstantiated and reinitialised:\n\n```svelte\n{#key value}\n\t<Component />\n{/key}\n```\n\nIt's also useful if you want a transition to play whenever a value changes:\n\n```svelte\n{#key value}\n\t<div transition:fade>{value}</div>\n{/key}\n```",
+		"svelte/await": "```svelte\n<!--- copy: false  --->\n{#await expression}...{:then name}...{:catch name}...{/await}\n```\n\n```svelte\n<!--- copy: false  --->\n{#await expression}...{:then name}...{/await}\n```\n\n```svelte\n<!--- copy: false  --->\n{#await expression then name}...{/await}\n```\n\n```svelte\n<!--- copy: false  --->\n{#await expression catch name}...{/await}\n```\n\nAwait blocks allow you to branch on the three possible states of a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) — pending, fulfilled or rejected.\n\n```svelte\n{#await promise}\n\t<!-- promise is pending -->\n\t<p>waiting for the promise to resolve...</p>\n{:then value}\n\t<!-- promise was fulfilled or not a Promise -->\n\t<p>The value is {value}</p>\n{:catch error}\n\t<!-- promise was rejected -->\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\n> [!NOTE] During server-side rendering, only the pending branch will be rendered.\n>\n> If the provided expression is not a `Promise`, only the `:then` branch will be rendered, including during server-side rendering.\n\nThe `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).\n\n```svelte\n{#await promise}\n\t<!-- promise is pending -->\n\t<p>waiting for the promise to resolve...</p>\n{:then value}\n\t<!-- promise was fulfilled -->\n\t<p>The value is {value}</p>\n{/await}\n```\n\nIf you don't care about the pending state, you can also omit the initial block.\n\n```svelte\n{#await promise then value}\n\t<p>The value is {value}</p>\n{/await}\n```\n\nSimilarly, if you only want to show the error state, you can omit the `then` block.\n\n```svelte\n{#await promise catch error}\n\t<p>The error is {error}</p>\n{/await}\n```\n\n> [!NOTE] You can use `#await` with [`import(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) to render components lazily:\n>\n> ```svelte\n> {#await import('./Component.svelte') then { default: Component }}\n> \t<Component />\n> {/await}\n> ```",
+		"svelte/snippet": "```svelte\n<!--- copy: false  --->\n{#snippet name()}...{/snippet}\n```\n\n```svelte\n<!--- copy: false  --->\n{#snippet name(param1, param2, paramN)}...{/snippet}\n```\n\nSnippets, and [render tags](@render), are a way to create reusable chunks of markup inside your components. Instead of writing duplicative code like [this](/playground/untitled#H4sIAAAAAAAAE5VUYW-kIBD9K8Tmsm2yXXRzvQ-s3eR-R-0HqqOQKhAZb9sz_vdDkV1t000vRmHewMx7w2AflbIGG7GnPlK8gYhFv42JthG-m9Gwf6BGcLbVXZuPSGrzVho8ZirDGpDIhldgySN5GpEMez9kaNuckY1ANJZRamRuu2ZnhEZt6a84pvs43mzD4pMsUDDi8DMkQFYCGdkvsJwblFq5uCik9bmJ4JZwUkv1eoknWigX2eGNN6aGXa6bjV8ybP-X7sM36T58SVcrIIV2xVIaA41xeD5kKqWXuqpUJEefOqVuOkL9DfBchGrzWfu0vb-RpTd3o-zBR045Ga3HfuE5BmJpKauuhbPtENlUF2sqR9jqpsPSxWsMrlngyj3VJiyYjJXb1-lMa7IWC-iSk2M5Zzh-SJjShe-siq5kpZRPs55BbSGU5YPyte4vVV_VfFXxVb10dSLf17pS2lM5HnpPxw4Zpv6x-F57p0jI3OKlVnhv5V9wPQrNYQQ9D_f6aGHlC89fq1Z3qmDkJCTCweOGF4VUFSPJvD_DhreVdA0eu8ehJJ5x91dBaBkpWm3ureCFPt3uzRv56d4kdp-2euG38XZ6dsnd3ZmPG9yRBCrzRUvi-MccOdwz3qE-fOZ7AwAhlrtTUx3c76vRhSwlFBHDtoPhefgHX3dM0PkEAAA=)...\n\n```svelte\n{#each images as image}\n\t{#if image.href}\n\t\t<a href={image.href}>\n\t\t\t<figure>\n\t\t\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t\t\t<figcaption>{image.caption}</figcaption>\n\t\t\t</figure>\n\t\t</a>\n\t{:else}\n\t\t<figure>\n\t\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t\t<figcaption>{image.caption}</figcaption>\n\t\t</figure>\n\t{/if}\n{/each}\n```\n\n...you can write [this](/playground/untitled#H4sIAAAAAAAAE5VUYW-bMBD9KxbRlERKY4jWfSA02n5H6QcXDmwVbMs-lnaI_z6D7TTt1moTAnPvzvfenQ_GpBEd2CS_HxPJekjy5IfWyS7BFz0b9id0CM62ajDVjBS2MkLjqZQldoBE9KwFS-7I_YyUOPqlRGuqnKw5orY5pVpUduj3mitUln5LU3pI0_UuBp9FjTwnDr9AHETLMSeHK6xiGoWSLi9yYT034cwSRjohn17zcQPNFTs8s153sK9Uv_Yh0-5_5d7-o9zbD-UqCaRWrllSYZQxLw_HUhb0ta-y4NnJUxfUvc7QuLJSaO0a3oh2MLBZat8u-wsPnXzKQvTtVVF34xK5d69ThFmHEQ4SpzeVRediTG8rjD5vBSeN3E5JyHh6R1DQK9-iml5kjzQUN_lSgVU8DhYLx7wwjSvRkMDvTjiwF4zM1kXZ7DlF1eN3A7IG85e-zRrYEjjm0FkI4Cc7Ripm0pHOChexhcWXzreeZyRMU6Mk3ljxC9w4QH-cQZ_b3T5pjHxk1VNr1CDrnJy5QDh6XLO6FrLNSRb2l9gz0wo3S6m7HErSgLsPGMHkpDZK31jOanXeHPQz-eruLHUP0z6yTbpbrn223V70uMXNSpQSZjpL0y8hcxxpNqA6_ql3BQAxlxvfpQ_uT9GrWjQC6iRHM8D0MP0GQsIi92QEAAA=):\n\n```svelte\n{#snippet figure(image)}\n\t<figure>\n\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t<figcaption>{image.caption}</figcaption>\n\t</figure>\n{/snippet}\n\n{#each images as image}\n\t{#if image.href}\n\t\t<a href={image.href}>\n\t\t\t{@render figure(image)}\n\t\t</a>\n\t{:else}\n\t\t{@render figure(image)}\n\t{/if}\n{/each}\n```\n\nLike function declarations, snippets can have an arbitrary number of parameters, which can have default values, and you can destructure each parameter. You cannot use rest parameters, however.\n\n## Snippet scope\n\nSnippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `<script>` tag or in `{#each ...}` blocks ([demo](/playground/untitled#H4sIAAAAAAAAE12P0QrCMAxFfyWrwhSEvc8p-h1OcG5RC10bmkyQ0n-3HQPBx3vCPUmCemiDrOpLULYbUdXqTKR2Sj6UA7_RCKbMbvJ9Jg33XpMcW9uKQYEAIzJ3T4QD3LSUDE-PnYA4YET4uOkGMc3W5B3xZrtvbVP9HDas2GqiZHqhMW6Tr9jGbG_oOCMImcUCwrIpFk1FqRyqpRpn0cmjHdAvnrIzuscyq_4nd3dPPD01ukE_NA6qFj9hvMYvGjJADw8BAAA=))...\n\n```svelte\n<script>\n\tlet { message = `it's great to see you!` } = $props();\n</script>\n\n{#snippet hello(name)}\n\t<p>hello {name}! {message}!</p>\n{/snippet}\n\n{@render hello('alice')}\n{@render hello('bob')}\n```\n\n...and they are 'visible' to everything in the same lexical scope (i.e. siblings, and children of those siblings):\n\n```svelte\n<div>\n\t{#snippet x()}\n\t\t{#snippet y()}...{/snippet}\n\n\t\t<!-- this is fine -->\n\t\t{@render y()}\n\t{/snippet}\n\n\t<!-- this will error, as `y` is not in scope -->\n\t{@render y()}\n</div>\n\n<!-- this will also error, as `x` is not in scope -->\n{@render x()}\n```\n\nSnippets can reference themselves and each other ([demo](/playground/untitled#H4sIAAAAAAAAE2WPTQqDMBCFrxLiRqH1Zysi7TlqF1YnENBJSGJLCYGeo5tesUeosfYH3c2bee_jjaWMd6BpfrAU6x5oTvdS0g01V-mFPkNnYNRaDKrxGxto5FKCIaeu1kYwFkauwsoUWtZYPh_3W5FMY4U2mb3egL9kIwY0rbhgiO-sDTgjSEqSTvIDs-jiOP7i_MHuFGAL6p9BtiSbOTl0GtzCuihqE87cqtyam6WRGz_vRcsZh5bmRg3gju4Fptq_kzQBAAA=)):\n\n```svelte\n{#snippet blastoff()}\n\t<span>🚀</span>\n{/snippet}\n\n{#snippet countdown(n)}\n\t{#if n > 0}\n\t\t<span>{n}...</span>\n\t\t{@render countdown(n - 1)}\n\t{:else}\n\t\t{@render blastoff()}\n\t{/if}\n{/snippet}\n\n{@render countdown(10)}\n```\n\n## Passing snippets to components\n\n### Explicit props\n\nWithin the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):\n\n```svelte\n<script>\n\timport Table from './Table.svelte';\n\n\tconst fruits = [\n\t\t{ name: 'apples', qty: 5, price: 2 },\n\t\t{ name: 'bananas', qty: 10, price: 1 },\n\t\t{ name: 'cherries', qty: 20, price: 0.5 }\n\t];\n</script>\n\n{#snippet header()}\n\t<th>fruit</th>\n\t<th>qty</th>\n\t<th>price</th>\n\t<th>total</th>\n{/snippet}\n\n{#snippet row(d)}\n\t<td>{d.name}</td>\n\t<td>{d.qty}</td>\n\t<td>{d.price}</td>\n\t<td>{d.qty * d.price}</td>\n{/snippet}\n\n<Table data={fruits} {header} {row} />\n```\n\nThink about it like passing content instead of data to a component. The concept is similar to slots in web components.\n\n### Implicit props\n\nAs an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE3VSTa_aMBD8Kyu_SkAbCA-JSzBR20N_QXt6vIMTO8SqsY29tI2s_PcqTiB8vaPHs7MzuxuIZgdBMvJLo0QlOElIJZXwJHsLBBvb_XUASc7Mb9Yu_B-hsMMK5sUzvDQahUZPMkJ96aTFfKd3KA_WOISfrFACKmcOMFmk8TWUTjY73RFLoz1C5U4SPWzhrcN2GKDrlcGEWauEnyRwxCaDdQLWyVJksII2uaMWTDPNLtzX5YX8-kgua-GcHJVXI3u5WEPb0d83O03TMZSmfRzOkG1Db7mNacOL19JagVALxoWbztq-H8U6j0SaYp2P2BGbOyQ2v8PQIFMXLKRDk177pq0zf6d8bMrzwBdd0pamyPMb-IjNEzS2f86Gz_Dwf-2F9nvNSUJQ_EOSoTuJNvngqK5v4Pas7n4-OCwlEEJcQTIMO-nSQwtb-GSdsX46e9gbRoP9yGQ11I0rEuycunu6PHx1QnPhxm3SFN15MOlYEFJZtf0dUywMbwZOeBGsrKNLYB54-1R9WNqVdki7usim6VmQphf7mnpshiQRhNAXdoOfMyX3OgMlKtz0cGEcF27uLSul3mewjPjgOOoDukxjPS9rqfh0pb-8zs6aBSt_7505aZ7B9xOi0T9YKW4UooVsr0zB1BTrWQJ3EL-oWcZ572GxFoezCk37QLe3897-B2i2U62uBAAA)):\n\n```svelte\n<!-- this is semantically the same as the above -->\n<Table data={fruits}>\n\t{#snippet header()}\n\t\t<th>fruit</th>\n\t\t<th>qty</th>\n\t\t<th>price</th>\n\t\t<th>total</th>\n\t{/snippet}\n\n\t{#snippet row(d)}\n\t\t<td>{d.name}</td>\n\t\t<td>{d.qty}</td>\n\t\t<td>{d.price}</td>\n\t\t<td>{d.qty * d.price}</td>\n\t{/snippet}\n</Table>\n```\n\n### Implicit `children` snippet\n\nAny content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE3WOQQrCMBBFrzIMggql3ddY1Du4si5sOmIwnYRkFKX07lKqglqX8_7_w2uRDw1hjlsWI5ZqTPBoLEXMdy3K3fdZDzB5Ndfep_FKVnpWHSKNce1YiCVijirqYLwUJQOYxrsgsLmIOIZjcA1M02w4n-PpomSVvTclqyEutDX6DA2pZ7_ABIVugrmEC3XJH92P55_G39GodCmWBFrQJ2PrQAwdLGHig_NxNv9xrQa1dhWIawrv1Wzeqawa8953D-8QOmaEAQAA)):\n\n```svelte\n<!--- file: App.svelte --->\n<Button>click me</Button>\n```\n\n```svelte\n<!--- file: Button.svelte --->\n<script>\n\tlet { children } = $props();\n</script>\n\n<!-- result will be <button>click me</button> -->\n<button>{@render children()}</button>\n```\n\n> [!NOTE] Note that you cannot have a prop called `children` if you also have content inside the component — for this reason, you should avoid having props with that name\n\n### Optional snippet props\n\nYou can declare snippet props as being optional. You can either use optional chaining to not render anything if the snippet isn't set...\n\n```svelte\n<script>\n    let { children } = $props();\n</script>\n\n{@render children?.()}\n```\n\n...or use an `#if` block to render fallback content:\n\n```svelte\n<script>\n    let { children } = $props();\n</script>\n\n{#if children}\n    {@render children()}\n{:else}\n    fallback content\n{/if}\n```\n\n## Typing snippets\n\nSnippets implement the `Snippet` interface imported from `'svelte'`:\n\n```svelte\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\n\tinterface Props {\n\t\tdata: any[];\n\t\tchildren: Snippet;\n\t\trow: Snippet<[any]>;\n\t}\n\n\tlet { data, children, row }: Props = $props();\n</script>\n```\n\nWith this change, red squigglies will appear if you try and use the component without providing a `data` prop and a `row` snippet. Notice that the type argument provided to `Snippet` is a tuple, since snippets can have multiple parameters.\n\nWe can tighten things up further by declaring a generic, so that `data` and `row` refer to the same type:\n\n```svelte\n<script lang=\"ts\" generics=\"T\">\n\timport type { Snippet } from 'svelte';\n\n\tlet {\n\t\tdata,\n\t\tchildren,\n\t\trow\n\t}: {\n\t\tdata: T[];\n\t\tchildren: Snippet;\n\t\trow: Snippet<[T]>;\n\t} = $props();\n</script>\n```\n\n## Exporting snippets\n\nSnippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets) ([demo](/playground/untitled#H4sIAAAAAAAAE3WPwY7CMAxEf8UyB1hRgdhjl13Bga8gHFJipEqtGyUGFUX5dxJUtEB3b9bYM_MckHVLWOKut50TMuC5tpbEY4GnuiGP5T6gXG0-ykLSB8vW2oW_UCNZq7Snv_Rjx0Kc4kpc-6OrrfwoVlK3uQ4CaGMgwsl1LUwXy0f54J9-KV4vf20cNo7YkMu22aqAz4-oOLUI9YKluDPF4h_at-hX5PFyzA1tZ84N3fGpf8YfUU6GvDumLqDKmEqCjjCHUEX4hqDTWCU5PJ6Or38c4g1cPu9tnAEAAA==)):\n\n```svelte\n<script module>\n\texport { add };\n</script>\n\n{#snippet add(a, b)}\n\t{a} + {b} = {a + b}\n{/snippet}\n```\n\n> [!NOTE]\n> This requires Svelte 5.5.0 or newer\n\n## Programmatic snippets\n\nSnippets can be created programmatically with the [`createRawSnippet`](svelte#createRawSnippet) API. This is intended for advanced use cases.\n\n## Snippets and slots\n\nIn Svelte 4, content can be passed to components using [slots](legacy-slots). Snippets are more powerful and flexible, and so slots have been deprecated in Svelte 5.",
+		"svelte/@render": "To render a [snippet](snippet), use a `{@render ...}` tag.\n\n```svelte\n{#snippet sum(a, b)}\n\t<p>{a} + {b} = {a + b}</p>\n{/snippet}\n\n{@render sum(1, 2)}\n{@render sum(3, 4)}\n{@render sum(5, 6)}\n```\n\nThe expression can be an identifier like `sum`, or an arbitrary JavaScript expression:\n\n```svelte\n{@render (cool ? coolSnippet : lameSnippet)()}\n```\n\n## Optional snippets\n\nIf the snippet is potentially undefined — for example, because it's an incoming prop — then you can use optional chaining to only render it when it _is_ defined:\n\n```svelte\n{@render children?.()}\n```\n\nAlternatively, use an [`{#if ...}`](if) block with an `:else` clause to render fallback content:\n\n```svelte\n{#if children}\n\t{@render children()}\n{:else}\n\t<p>fallback content</p>\n{/if}\n```",
+		"svelte/@html": "To inject raw HTML into your component, use the `{@html ...}` tag:\n\n```svelte\n<article>\n\t{@html content}\n</article>\n```\n\n> [!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/). Never render unsanitized content.\n\nThe expression should be valid standalone HTML — this will not work, because `</div>` is not valid HTML:\n\n```svelte\n{@html '<div>'}content{@html '</div>'}\n```\n\nIt also will not compile Svelte code.\n\n## Styling\n\nContent rendered this way is 'invisible' to Svelte and as such will not receive [scoped styles](scoped-styles). In other words, this will not work, and the `a` and `img` styles will be regarded as unused:\n\n<!-- prettier-ignore -->\n```svelte\n<article>\n\t{@html content}\n</article>\n\n<style>\n\tarticle {\n\t\ta { color: hotpink }\n\t\timg { width: 100% }\n\t}\n</style>\n```\n\nInstead, use the `:global` modifier to target everything inside the `<article>`:\n\n<!-- prettier-ignore -->\n```svelte\n<style>\n\tarticle +++:global+++ {\n\t\ta { color: hotpink }\n\t\timg { width: 100% }\n\t}\n</style>\n```",
+		"svelte/@attach": "Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.\n\nOptionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.\n\n> [!NOTE]\n> Attachments are available in Svelte 5.29 and newer.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {import('svelte/attachments').Attachment} */\n\tfunction myAttachment(element) {\n\t\tconsole.log(element.nodeName); // 'DIV'\n\n\t\treturn () => {\n\t\t\tconsole.log('cleaning up');\n\t\t};\n\t}\n</script>\n\n<div {@attach myAttachment}>...</div>\n```\n\nAn element can have any number of attachments.\n\n## Attachment factories\n\nA useful pattern is for a function, such as `tooltip` in this example, to _return_ an attachment ([demo](/playground/untitled#H4sIAAAAAAAAE3VT0XLaMBD8lavbDiaNCUlbHhTItG_5h5AH2T5ArdBppDOEMv73SkbGJGnH47F9t3un3TsfMyO3mInsh2SW1Sa7zlZKo8_E0zHjg42pGAjxBPxp7cTvUHOMldLjv-IVGUbDoUw295VTlh-WZslqa8kxsLL2ACtHWxh175NffnQfAAGikSGxYQGfPEvGfPSIWtOH0TiBVo2pWJEBJtKhQp4YYzjG9JIdcuMM5IZqHMPioY8vOSA997zQoevf4a7heO7cdp34olRiTGr07OhwH1IdoO2A7dLMbwahZq6MbRhKZWqxk7rBxTGVbuHmhCgb5qDgmIx_J6XtHHukHTrYYqx_YpzYng8aO4RYayql7hU-1ZJl0akqHBE_D9KLolwL-Dibzc7iSln9XjtqTF1UpMkJ2EmXR-BgQErsN4pxIJKr0RVO1qrxAqaTO4fbc9bKulZm3cfDY3aZDgvFGErWjmzhN7KmfX5rXyDeX8Pt1mU-hXjdBOrtuB97vK4GPUtmJ41XcRMEGDLD8do0nJ73zhUhSlyRw0t3vPqD8cjfLs-axiFgNBrkUd9Ulp50c-GLxlXAVlJX-ffpZyiSn7H0eLCUySZQcQdXlxj4El0Yv_FZvIKElqqGTruVLhzu7VRKCh22_5toOyxsWqLwwzK-cCbYNdg-hy-p9D7sbiZWUnts_wLUOF3CJgQAAA==)):\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport tippy from 'tippy.js';\n\n\tlet content = $state('Hello!');\n\n\t/**\n\t * @param {string} content\n\t * @returns {import('svelte/attachments').Attachment}\n\t */\n\tfunction tooltip(content) {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<button {@attach tooltip(content)}>\n\tHover me\n</button>\n```\n\nSince the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. The same thing would happen for any state read _inside_ the attachment function when it first runs. (If this isn't what you want, see [Controlling when attachments re-run](#Controlling-when-attachments-re-run).)\n\n## Inline attachments\n\nAttachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71Wf3OaWBT9KoyTTnW3MS-I3dYmnWXVtnRAazRJzbozRSQEApiRhwKO333vuY8m225m_9yZGOT9OPfcc84D943UTfxGr_G7K6Xr3TVeNW7D2M8avT_3DVk-YAoDNF4vNB8e2tnWjyXGlm7mPzfurVPpp5JgGmeZtwkf5PtFupCxLzVvHa832rl2lElX-s2Xm2DZFNqp_hs-rZetd4v07ORpT3qmQHu7MF2td0BZp8k6z_xkvfXP902_pZ2_1_aYWEiqm0kN8I4r79qbdZ6umnq3q_2iNf22F4dE6qt2oimwdpim_uY6XMm7Fuo-IQT_iTD_CeGTHwZ38ieIJUFQRxirR1Xf39Dw0X5z0I72Af4tD61vvPNwWKQnqmfPTbduhsEd2J3vO_oBd3dc6fF2X7umNdWGf0vBRhSS6qoV7cCXfTXWfKmvWG61_si_vfU92Wz-E4RhsLhNIYinsox9QKGVd8-tuACCeKXRX12P-T_eKf7fhTq0Hvt-f3ailtSeoxJHRo1-58NoPe1UiBc1hkL8Yeh45y_vQ3mcuNl9T8s3cXPRWLnS7YWJG_gn2Tb4tUjid8jua-PVl08j_ab8I14mH8Llx0s5Tz5Err4ql52r_GYg0mVy1bEGZuD0ze64b5TWYFiM-16wSuJ4JT5vfVpDcztrcG_YkRU4s6HxufzDWF4XuVeJ1P10IbzBemt3Vp1V2e04ZXfrJd7Wicyd039brRIv_RIVu_nXi7X1cfL2sy66ztToUp1TO7qJ7NlwZ0f30pld5qNSVE5o6PbMojFHjgZB7oSicPpGteyLclQap7SvY0dXtM_LR1NT2JFHey3aaxa0VxCeYJ7RMHemoiCcgPZV9pR7o7kgcOjeGliYk9hjDZx8FAq6enwlTPSZj_vYPw9Il64dXdIY8ZmapzwfEd8-1ZyaxWhqkIZOibXUd-6Upqi1pD4uMicCV1GA_7zi73UN8BaF4sC8peJtMjfmjbHZBFwq5ov50qRaE0l96NZggnW4KqypYRAW-uhSz9ADvklwJF2J-5W0Z5fQPBhDX92R6I_0IFxRgDftge4l4dP-gH1hjD7uqU6fsOEZ9UNrCdPB-nys6uXgY6O3ZMd9sy5T9PghqrWHdjo4jB51CgLiKJaDYYA-7WgYONf1FbjkI-mE3EAfUY_rijfuJ_CVPaR50oe9JF7Q0pI8Dw3osxxYHdYPGbp2CnwHF8KvwJv2wEv0Z3ilQI6U9uwbZxbYJXvEmjjQjjCHkvNLvNg3yhzXQd1olamsT4IRrZmX0MUDpwL7R8zzHj7pSh9hPHFSHjLezKqAST51uC5zmtQ87skDUaneLokT5RbXkPWSYz53Abgjc8_o4KFGUZ-Hgv2Z1l5OTYM9D-HfUD0L-EwxH5wRnIG61gS-khfgY1bq7IAP_DA4l5xRuh9xlm8yGjutc8t-wHtkhWv3hc7aqGwiK5KzgvM5xRkZYn193uEln-su55j1GaIv7oM4iPrsVHiG0Dx7TR9-1lBfqFdwfvSd5LNL5xyZVp5NoHFZ57FkfiF6vKs4k5zvIfrX5xX6MXmt0gM5MTu8DjnhukrHHzTRd3jm0dma0_f_x5cxP9f4jBdqHvmbq2fUjzqcKh2Cp-yWj9ntcHanXmBXxhu7Q--eyjhfNFpaV7zgz4nWEUb7zUOhpevjjf_gu_KZ99pxFlZ-T3sttkmYqrco_26q35v0Ewzv5EZPbnL_8BfduWGMnyyN3q0bZ_7hb_7KG_L4CQAA)):\n\n```svelte\n<!--- file: App.svelte --->\n<canvas\n\twidth={32}\n\theight={32}\n\t{@attach (canvas) => {\n\t\tconst context = canvas.getContext('2d');\n\n\t\t$effect(() => {\n\t\t\tcontext.fillStyle = color;\n\t\t\tcontext.fillRect(0, 0, canvas.width, canvas.height);\n\t\t});\n\t}}\n></canvas>\n```\n\n> [!NOTE]\n> The nested effect runs whenever `color` changes, while the outer effect (where `canvas.getContext(...)` is called) only runs once, since it doesn't read any reactive state.\n\n## Passing attachments to components\n\nWhen used on a component, `{@attach ...}` will create a prop whose key is a [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol). If the component then [spreads](/tutorial/svelte/spread-props) props onto an element, the element will receive those attachments.\n\nThis allows you to create _wrapper components_ that augment elements ([demo](/playground/untitled#H4sIAAAAAAAAE3VUS3ObMBD-KxvajnFqsJM2PhA7TXrKob31FjITAbKtRkiMtDhJPfz3LiAMdpxhGJvdb1_fPnaeYjn3Iu-WIbJ04028lZDcetHDzsO3olbVApI74F1RhHbLJdayhFl-Sp5qhVwhufEWNjWiwJtYxSjyQhsEFEXxBiujcxg1_8O_dnQ9APwsEbVyiHDafjrvDZCgkiO4MLCEzxYZcn90z6XUZ6OxA61KlaIgV6i1pFC-sxjDrlbHaDiWRoGvdMbHsLzp5DES0mJnRxGaRBvcBHb7yFUTCQeunEWYcYtGv12TqgFUDbCK1WLaM6IWQhUlQiJUFm2ZLPly51xXMG0Rjoyd69C7UqqG2nu95QZyXvtvLVpri2-SN4hoLXXCZFfhQ8aQBU1VgdEaH_vSgyBZR_BpPp_vi0tY-rw2ulRZkGqpTQRbZvwa2BPgFC8bgbw31CbjJjAsE6WNYBZeGp7vtQXLMqHWnZx-5kM1TR5ycpkZXQR2wzL94l8Ur1C_3-g168SfQf1MyfRi3LW9fs77emJEw5QV9SREoLTq06tcczq7d6xEUcJX2vAhO1b843XK34e5unZEMBr15ekuKEusluWAF8lXhE2ZTP2r2RcIHJ-163FPKerCgYJLOB9i4GvNwviI5-gAQiFFBk3tBTOU3HFXEk0R8o86WvUD64aINhv5K3oRmpJXkw8uxMG6Hh6JY9X7OwGSqfUy9tDG3sHNoEi0d_d_fv9qndxRU0VClFqo3KVo3U655Hnt1PXB3Qra2Y2QGdEwgTAMCxopsoxOe6SD0gD8movDhT0LAnhqlE8gVCpLWnRoV7OJCkFAwEXitrYL1W7p7pbiE_P7XH6E_rihODm5s52XtiH9Ekaw0VgI9exadWL1uoEYjPtg2672k5szsxbKyWB2fdT0w5Y_0hcT8oXOlRetmLS8-g-6TLXXQgYAAA==)):\n\n```svelte\n<!--- file: Button.svelte --->\n<script>\n\t/** @type {import('svelte/elements').HTMLButtonAttributes} */\n\tlet { children, ...props } = $props();\n</script>\n\n<!-- `props` includes attachments -->\n<button {...props}>\n\t{@render children?.()}\n</button>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport tippy from 'tippy.js';\n\timport Button from './Button.svelte';\n\n\tlet content = $state('Hello!');\n\n\t/**\n\t * @param {string} content\n\t * @returns {import('svelte/attachments').Attachment}\n\t */\n\tfunction tooltip(content) {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<Button {@attach tooltip(content)}>\n\tHover me\n</Button>\n```\n\n## Controlling when attachments re-run\n\nAttachments, unlike [actions](use), are fully reactive: `{@attach foo(bar)}` will re-run on changes to `foo` _or_ `bar` (or any state read inside `foo`):\n\n```js\n// @errors: 7006 2304 2552\nfunction foo(bar) {\n\treturn (node) => {\n\t\tveryExpensiveSetupWork(node);\n\t\tupdate(node, bar);\n\t};\n}\n```\n\nIn the rare case that this is a problem (for example, if `foo` does expensive and unavoidable setup work) consider passing the data inside a function and reading it in a child effect:\n\n```js\n// @errors: 7006 2304 2552\nfunction foo(+++getBar+++) {\n\treturn (node) => {\n\t\tveryExpensiveSetupWork(node);\n\n+++\t\t$effect(() => {\n\t\t\tupdate(node, getBar());\n\t\t});+++\n\t}\n}\n```\n\n## Creating attachments programmatically\n\nTo add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).\n\n## Converting actions to attachments\n\nIf you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](svelte-attachments#fromAction), allowing you to (for example) use them with components.",
+		"svelte/@const": "The `{@const ...}` tag defines a local constant.\n\n```svelte\n{#each boxes as box}\n\t{@const area = box.width * box.height}\n\t{box.width} * {box.height} = {area}\n{/each}\n```\n\n`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — a `<Component />` or a `<svelte:boundary>`.",
+		"svelte/@debug": "The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.\n\n```svelte\n<script>\n\tlet user = {\n\t\tfirstname: 'Ada',\n\t\tlastname: 'Lovelace'\n\t};\n</script>\n\n{@debug user}\n\n<h1>Hello {user.firstname}!</h1>\n```\n\n`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).\n\n```svelte\n<!-- Compiles -->\n{@debug user}\n{@debug user1, user2, user3}\n\n<!-- WON'T compile -->\n{@debug user.firstname}\n{@debug myArray[0]}\n{@debug !isReady}\n{@debug typeof user === 'object'}\n```\n\nThe `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.",
+		"svelte/bind": "Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.\n\nThe general syntax is `bind:property={expression}`, where `expression` is an [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:\n\n<!-- prettier-ignore -->\n```svelte\n<input bind:value={value} />\n<input bind:value />\n```\n\n\nSvelte creates an event listener that updates the bound value. If an element already has a listener for the same event, that listener will be fired before the bound value is updated.\n\nMost bindings are _two-way_, meaning that changes to the value will affect the element and vice versa. A few bindings are _readonly_, meaning that changing their value will have no effect on the element.\n\n## Function bindings\n\nYou can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation:\n\n```svelte\n<input bind:value={\n\t() => value,\n\t(v) => value = v.toLowerCase()}\n/>\n```\n\nIn the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`:\n\n```svelte\n<div\n\tbind:clientWidth={null, redraw}\n\tbind:clientHeight={null, redraw}\n>...</div>\n```\n\n> [!NOTE]\n> Function bindings are available in Svelte 5.9.0 and newer.\n\n## `<input bind:value>`\n\nA `bind:value` directive on an `<input>` element binds the input's `value` property:\n\n<!-- prettier-ignore -->\n```svelte\n<script>\n\tlet message = $state('hello');\n</script>\n\n<input bind:value={message} />\n<p>{message}</p>\n```\n\nIn the case of a numeric input (`type=\"number\"` or `type=\"range\"`), the value will be coerced to a number ([demo](/playground/untitled#H4sIAAAAAAAAE6WPwYoCMQxAfyWEPeyiOOqx2w74Hds9pBql0IllmhGXYf5dKqwiyILsLXnwwsuI-5i4oPkaUX8yo7kCnKNQV7dNzoty4qSVBSr8jG-Poixa0KAt2z5mbb14TaxA4OCtKCm_rz4-f2m403WltrlrYhMFTtcLNkoeFGqZ8yhDF7j3CCHKzpwoDexGmqCL4jwuPUJHZ-dxVcfmyYGe5MAv-La5pbxYFf5Z9Zf_UJXb-sEMquFgJJhBmGyTW5yj8lnRaD_w9D1dAKSSj7zqAQAA)):\n\n```svelte\n<script>\n\tlet a = $state(1);\n\tlet b = $state(2);\n</script>\n\n<label>\n\t<input type=\"number\" bind:value={a} min=\"0\" max=\"10\" />\n\t<input type=\"range\" bind:value={a} min=\"0\" max=\"10\" />\n</label>\n\n<label>\n\t<input type=\"number\" bind:value={b} min=\"0\" max=\"10\" />\n\t<input type=\"range\" bind:value={b} min=\"0\" max=\"10\" />\n</label>\n\n<p>{a} + {b} = {a + b}</p>\n```\n\nIf the input is empty or invalid (in the case of `type=\"number\"`), the value is `undefined`.\n\nSince 5.6.0, if an `<input>` has a `defaultValue` and is part of a form, it will revert to that value instead of the empty string when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.\n\n```svelte\n<script>\n\tlet value = $state('');\n</script>\n\n<form>\n\t<input bind:value defaultValue=\"not the empty string\">\n\t<input type=\"reset\" value=\"Reset\">\n</form>\n```\n\n> [!NOTE]\n> Use reset buttons sparingly, and ensure that users won't accidentally click them while trying to submit the form.\n\n## `<input bind:checked>`\n\nCheckbox inputs can be bound with `bind:checked`:\n\n```svelte\n<label>\n\t<input type=\"checkbox\" bind:checked={accepted} />\n\tAccept terms and conditions\n</label>\n```\n\nSince 5.6.0, if an `<input>` has a `defaultChecked` attribute and is part of a form, it will revert to that value instead of `false` when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.\n\n```svelte\n<script>\n\tlet checked = $state(true);\n</script>\n\n<form>\n\t<input type=\"checkbox\" bind:checked defaultChecked={true}>\n\t<input type=\"reset\" value=\"Reset\">\n</form>\n```\n\n> [!NOTE] Use `bind:group` for radio inputs instead of `bind:checked`.\n\n## `<input bind:indeterminate>`\n\nCheckboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate) state, independently of whether they are checked or unchecked:\n\n```svelte\n<script>\n\tlet checked = $state(false);\n\tlet indeterminate = $state(true);\n</script>\n\n<form>\n\t<input type=\"checkbox\" bind:checked bind:indeterminate>\n\n\t{#if indeterminate}\n\t\twaiting...\n\t{:else if checked}\n\t\tchecked\n\t{:else}\n\t\tunchecked\n\t{/if}\n</form>\n```\n\n## `<input bind:group>`\n\nInputs that work together can use `bind:group` ([demo](/playground/untitled#H4sIAAAAAAAAE62T32_TMBDH_5XDQkpbrct7SCMGEvCEECDxsO7BSW6L2c227EvbKOv_jp0f6jYhQKJv5_P3PvdL1wstH1Bk4hMSGdgbRzUssFaM9VJciFtF6EV23QvubNRFR_BPUVfWXvodEkdfKT3-zl8Zzag5YETuK6csF1u9ZUIGNo4VkYQNvPYsGRfJF5JKJ8s3QRJE6WoFb2Nq6K-ck13u2Sl9Vxxhlc6QUBIFnz9Brm9ifJ6esun81XoNd860FmtwslYGlLYte5AO4aHlVhJ1gIeKWq92COt1iMtJlkhFPkgh1rHZiiF6K6BUus4G5KafGznCTlIbVUMfQZUWMJh5OrL-C_qjMYSwb1DyiH7iOEuCb1ZpWTUjfHqcwC_GWDVY3ZfmME_SGttSmD9IHaYatvWHIc6xLyqad3mq6KuqcCwnWn9p8p-p71BqP2IH81zc9w2in-od7XORP7ayCpd5YCeXI_-p59mObPF9WmwGpx3nqS2Gzw8TO3zOaS5_GqUXyQUkS3h8hOSz0ZhMESHGc0c4Hm3MAn00t1wrb0l2GZRkqvt4sXwczm6Qh8vnUJzI2LV4vAkvqWgfehTZrSSPx19WiVfFfAQAAA==)):\n\n```svelte\n<!--- file: BurritoChooser.svelte --->\n<script>\n\tlet tortilla = $state('Plain');\n\n\t/** @type {string[]} */\n\tlet fillings = $state([]);\n</script>\n\n<!-- grouped radio inputs are mutually exclusive -->\n<label><input type=\"radio\" bind:group={tortilla} value=\"Plain\" /> Plain</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Whole wheat\" /> Whole wheat</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Spinach\" /> Spinach</label>\n\n<!-- grouped checkbox inputs populate an array -->\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Rice\" /> Rice</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Beans\" /> Beans</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Cheese\" /> Cheese</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Guac (extra)\" /> Guac (extra)</label>\n```\n\n> [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.\n\n## `<input bind:files>`\n\nOn `<input>` elements with `type=\"file\"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). When you want to update the files programmatically, you always need to use a `FileList` object. Currently `FileList` objects cannot be constructed directly, so you need to create a new [`DataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object and get `files` from there.\n\n```svelte\n<script>\n\tlet files = $state();\n\n\tfunction clear() {\n\t\tfiles = new DataTransfer().files; // null or undefined does not work\n\t}\n</script>\n\n<label for=\"avatar\">Upload a picture:</label>\n<input accept=\"image/png, image/jpeg\" bind:files id=\"avatar\" name=\"avatar\" type=\"file\" />\n<button onclick={clear}>clear</button>\n```\n\n`FileList` objects also cannot be modified, so if you want to e.g. delete a single file from the list, you need to create a new `DataTransfer` object and add the files you want to keep.\n\n> [!NOTE] `DataTransfer` may not be available in server-side JS runtimes. Leaving the state that is bound to `files` uninitialized prevents potential errors if components are server-side rendered.\n\n## `<select bind:value>`\n\nA `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).\n\n```svelte\n<select bind:value={selected}>\n\t<option value={a}>a</option>\n\t<option value={b}>b</option>\n\t<option value={c}>c</option>\n</select>\n```\n\nA `<select multiple>` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected `<option>`.\n\n```svelte\n<select multiple bind:value={fillings}>\n\t<option value=\"Rice\">Rice</option>\n\t<option value=\"Beans\">Beans</option>\n\t<option value=\"Cheese\">Cheese</option>\n\t<option value=\"Guac (extra)\">Guac (extra)</option>\n</select>\n```\n\nWhen the value of an `<option>` matches its text content, the attribute can be omitted.\n\n```svelte\n<select multiple bind:value={fillings}>\n\t<option>Rice</option>\n\t<option>Beans</option>\n\t<option>Cheese</option>\n\t<option>Guac (extra)</option>\n</select>\n```\n\nYou can give the `<select>` a default value by adding a `selected` attribute to the`<option>` (or options, in the case of `<select multiple>`) that should be initially selected. If the `<select>` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`.\n\n```svelte\n<select bind:value={selected}>\n\t<option value={a}>a</option>\n\t<option value={b} selected>b</option>\n\t<option value={c}>c</option>\n</select>\n```\n\n## `<audio>`\n\n`<audio>` elements have their own set of bindings — five two-way ones...\n\n- [`currentTime`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime)\n- [`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate)\n- [`paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused)\n- [`volume`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume)\n- [`muted`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted)\n\n...and six readonly ones:\n\n- [`duration`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration)\n- [`buffered`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered)\n- [`seekable`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable)\n- [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event)\n- [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended)\n- [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState)\n- [`played`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played)\n\n```svelte\n<audio src={clip} bind:duration bind:currentTime bind:paused></audio>\n```\n\n## `<video>`\n\n`<video>` elements have all the same bindings as [`<audio>`](#audio) elements, plus readonly [`videoWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) and [`videoHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) bindings.\n\n## `<img>`\n\n`<img>` elements have two readonly bindings:\n\n- [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth)\n- [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight)\n\n## `<details bind:open>`\n\n`<details>` elements support binding to the `open` property.\n\n```svelte\n<details bind:open={isOpen}>\n\t<summary>How do you comfort a JavaScript bug?</summary>\n\t<p>You console it.</p>\n</details>\n```\n\n## `window` and `document`\n\nTo bind to properties of `window` and `document`, see [`<svelte:window>`](svelte-window) and [`<svelte:document>`](svelte-document).\n\n## Contenteditable bindings\n\nElements with the `contenteditable` attribute support the following bindings:\n\n- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)\n- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)\n- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)\n\n> [!NOTE] There are [subtle differences between `innerText` and `textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext).\n\n<!-- for some reason puts the comment and html on same line -->\n<!-- prettier-ignore -->\n```svelte\n<div contenteditable=\"true\" bind:innerHTML={html}></div>\n```\n\n## Dimensions\n\nAll visible elements have the following readonly bindings, measured with a `ResizeObserver`:\n\n- [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)\n- [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)\n- [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)\n- [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)\n- [`contentRect`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\n- [`contentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize)\n- [`borderBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize)\n- [`devicePixelContentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize)\n\n```svelte\n<div bind:offsetWidth={width} bind:offsetHeight={height}>\n\t<Chart {width} {height} />\n</div>\n```\n\n> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`. Note that CSS transformations do not trigger `ResizeObserver` callbacks.\n\n## bind:this\n\n```svelte\n<!--- copy: false --->\nbind:this={dom_node}\n```\n\nTo get a reference to a DOM node, use `bind:this`. The value will be `undefined` until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation:\n\n```svelte\n<script>\n\t/** @type {HTMLCanvasElement} */\n\tlet canvas;\n\n\t$effect(() => {\n\t\tconst ctx = canvas.getContext('2d');\n\t\tdrawStuff(ctx);\n\t});\n</script>\n\n<canvas bind:this={canvas}></canvas>\n```\n\nComponents also support `bind:this`, allowing you to interact with component instances programmatically.\n\n```svelte\n<!--- file: App.svelte --->\n<ShoppingCart bind:this={cart} />\n\n<button onclick={() => cart.empty()}> Empty shopping cart </button>\n```\n\n```svelte\n<!--- file: ShoppingCart.svelte --->\n<script>\n\t// All instance exports are available on the instance object\n\texport function empty() {\n\t\t// ...\n\t}\n</script>\n```\n\n> [!NOTE] In case of using [the function bindings](#Function-bindings), the getter is required to ensure that the correct value is nullified on component or element destruction.\n\n## bind:_property_ for components\n\n```svelte\nbind:property={variable}\n```\n\nYou can bind to component props using the same syntax as for elements.\n\n```svelte\n<Keypad bind:value={pin} />\n```\n\nWhile Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using `bind:property` allows changes to the property from within the component to flow back up out of the component.\n\nTo mark a property as bindable, use the [`$bindable`]($bindable) rune:\n\n```svelte\n<script>\n\tlet { readonlyProperty, bindableProperty = $bindable() } = $props();\n</script>\n```\n\nDeclaring a property as bindable means it _can_ be used using `bind:`, not that it _must_ be used using `bind:`.\n\nBindable properties can have a fallback value:\n\n```svelte\n<script>\n\tlet { bindableProperty = $bindable('fallback value') } = $props();\n</script>\n```\n\nThis fallback value _only_ applies when the property is _not_ bound. When the property is bound and a fallback value is present, the parent is expected to provide a value other than `undefined`, else a runtime error is thrown. This prevents hard-to-reason-about situations where it's unclear which value should apply.",
+		"svelte/use": "> [!NOTE]\n> In Svelte 5.29 and newer, consider using [attachments](@attach) instead, as they are more flexible and composable.\n\nActions are functions that are called when an element is mounted. They are added with the `use:` directive, and will typically use an `$effect` so that they can reset any state when the element is unmounted:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {import('svelte/action').Action} */\n\tfunction myaction(node) {\n\t\t// the node has been mounted in the DOM\n\n\t\t$effect(() => {\n\t\t\t// setup goes here\n\n\t\t\treturn () => {\n\t\t\t\t// teardown goes here\n\t\t\t};\n\t\t});\n\t}\n</script>\n\n<div use:myaction>...</div>\n```\n\nAn action can be called with an argument:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {import('svelte/action').Action} */\n\tfunction myaction(node, +++data+++) {\n\t\t// ...\n\t}\n</script>\n\n<div use:myaction={+++data+++}>...</div>\n```\n\nThe action is only called once (but not during server-side rendering) — it will _not_ run again if the argument changes.\n\n> [!LEGACY]\n> Prior to the `$effect` rune, actions could return an object with `update` and `destroy` methods, where `update` would be called with the latest value of the argument if it changed. Using effects is preferred.\n\n## Typing\n\nThe `Action` interface receives three optional type arguments — a node type (which can be `Element`, if the action applies to everything), a parameter, and any custom event handlers created by the action:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/**\n\t * @type {import('svelte/action').Action<\n\t * \tHTMLDivElement,\n\t * \tundefined,\n\t * \t{\n\t * \t\tonswiperight: (e: CustomEvent) => void;\n\t * \t\tonswipeleft: (e: CustomEvent) => void;\n\t * \t\t// ...\n\t * \t}\n\t * >}\n\t */\n\tfunction gestures(node) {\n\t\t$effect(() => {\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swipeleft'));\n\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swiperight'));\n\t\t});\n\t}\n</script>\n\n<div\n\tuse:gestures\n\tonswipeleft={next}\n\tonswiperight={prev}\n>...</div>\n```",
+		"svelte/transition": "A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change.\n\nWhen a block (such as an `{#if ...}` block) is transitioning out, all elements inside it, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed.\n\nThe `transition:` directive indicates a _bidirectional_ transition, which means it can be smoothly reversed while the transition is in progress.\n\n```svelte\n<script>\n\t+++import { fade } from 'svelte/transition';+++\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>toggle</button>\n\n{#if visible}\n\t<div +++transition:fade+++>fades in and out</div>\n{/if}\n```\n\n## Local vs global\n\nTransitions are local by default. Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed.\n\n```svelte\n{#if x}\n\t{#if y}\n\t\t<p transition:fade>fades in and out only when y changes</p>\n\n\t\t<p transition:fade|global>fades in and out when x or y change</p>\n\t{/if}\n{/if}\n```\n\n## Built-in transitions\n\nA selection of built-in transitions can be imported from the [`svelte/transition`](svelte-transition) module.\n\n## Transition parameters\n\nTransitions can have parameters.\n\n(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)\n\n```svelte\n{#if visible}\n\t<div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div>\n{/if}\n```\n\n## Custom transition functions\n\n```js\n/// copy: false\n// @noErrors\ntransition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {\n\tdelay?: number,\n\tduration?: number,\n\teasing?: (t: number) => number,\n\tcss?: (t: number, u: number) => string,\n\ttick?: (t: number, u: number) => void\n}\n```\n\nTransitions can use custom functions. If the returned object has a `css` function, Svelte will generate keyframes for a [web animation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\nThe `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.\n\nThe function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { elasticOut } from 'svelte/easing';\n\n\t/** @type {boolean} */\n\texport let visible;\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ delay?: number, duration?: number, easing?: (t: number) => number }} params\n\t */\n\tfunction whoosh(node, params) {\n\t\tconst existingTransform = getComputedStyle(node).transform.replace('none', '');\n\n\t\treturn {\n\t\t\tdelay: params.delay || 0,\n\t\t\tduration: params.duration || 400,\n\t\t\teasing: params.easing || elasticOut,\n\t\t\tcss: (t, u) => `transform: ${existingTransform} scale(${t})`\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<div in:whoosh>whooshes in</div>\n{/if}\n```\n\nA custom transition function can also return a `tick` function, which is called _during_ the transition with the same `t` and `u` arguments.\n\n> [!NOTE] If it's possible to use `css` instead of `tick`, do so — web animations can run off the main thread, preventing jank on slower devices.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\texport let visible = false;\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ speed?: number }} params\n\t */\n\tfunction typewriter(node, { speed = 1 }) {\n\t\tconst valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;\n\n\t\tif (!valid) {\n\t\t\tthrow new Error(`This transition only works on elements with a single text node child`);\n\t\t}\n\n\t\tconst text = node.textContent;\n\t\tconst duration = text.length / (speed * 0.01);\n\n\t\treturn {\n\t\t\tduration,\n\t\t\ttick: (t) => {\n\t\t\t\tconst i = ~~(text.length * t);\n\t\t\t\tnode.textContent = text.slice(0, i);\n\t\t\t}\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>\n{/if}\n```\n\nIf a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible.\n\nTransition functions also receive a third argument, `options`, which contains information about the transition.\n\nAvailable values in the `options` object are:\n\n- `direction` - one of `in`, `out`, or `both` depending on the type of transition\n\n## Transition events\n\nAn element with transitions will dispatch the following events in addition to any standard DOM events:\n\n- `introstart`\n- `introend`\n- `outrostart`\n- `outroend`\n\n```svelte\n{#if visible}\n\t<p\n\t\ttransition:fly={{ y: 200, duration: 2000 }}\n\t\tonintrostart={() => (status = 'intro started')}\n\t\tonoutrostart={() => (status = 'outro started')}\n\t\tonintroend={() => (status = 'intro ended')}\n\t\tonoutroend={() => (status = 'outro ended')}\n\t>\n\t\tFlies in and out\n\t</p>\n{/if}\n```",
+		"svelte/in-and-out": "The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.\n\n```svelte\n<script>\n  import { fade, fly } from 'svelte/transition';\n  \n  let visible = $state(false);\n</script>\n\n<label>\n  <input type=\"checkbox\" bind:checked={visible}>\n  visible\n</label>\n\n{#if visible}\n\t<div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>\n{/if}\n```",
+		"svelte/animate": "An animation is triggered when the contents of a [keyed each block](each#Keyed-each-blocks) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.\n\nAnimations can be used with Svelte's [built-in animation functions](svelte-animate) or [custom animation functions](#Custom-animation-functions).\n\n```svelte\n<!-- When `list` is reordered the animation will run -->\n{#each list as item, index (item)}\n\t<li animate:flip>{item}</li>\n{/each}\n```\n\n## Animation Parameters\n\nAs with actions and transitions, animations can have parameters.\n\n(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)\n\n```svelte\n{#each list as item, index (item)}\n\t<li animate:flip={{ delay: 500 }}>{item}</li>\n{/each}\n```\n\n## Custom animation functions\n\n```js\n/// copy: false\n// @noErrors\nanimation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {\n\tdelay?: number,\n\tduration?: number,\n\teasing?: (t: number) => number,\n\tcss?: (t: number, u: number) => string,\n\ttick?: (t: number, u: number) => void\n}\n```\n\nAnimations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, and the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.\n\nIf the returned object has a `css` method, Svelte will create a [web animation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) that plays on the element.\n\nThe `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to `1 - t`.\n\nThe function is called repeatedly _before_ the animation begins, with different `t` and `u` arguments.\n\n<!-- TODO: Types -->\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { cubicOut } from 'svelte/easing';\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ from: DOMRect; to: DOMRect }} states\n\t * @param {any} params\n\t */\n\tfunction whizz(node, { from, to }, params) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\tcss: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```\n\nA custom animation function can also return a `tick` function, which is called _during_ the animation with the same `t` and `u` arguments.\n\n> [!NOTE] If it's possible to use `css` instead of `tick`, do so — web animations can run off the main thread, preventing jank on slower devices.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { cubicOut } from 'svelte/easing';\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ from: DOMRect; to: DOMRect }} states\n\t * @param {any} params\n\t */\n\tfunction whizz(node, { from, to }, params) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\ttick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```",
+		"svelte/style": "The `style:` directive provides a shorthand for setting multiple styles on an element.\n\n```svelte\n<!-- These are equivalent -->\n<div style:color=\"red\">...</div>\n<div style=\"color: red;\">...</div>\n```\n\nThe value can contain arbitrary expressions:\n\n```svelte\n<div style:color={myColor}>...</div>\n```\n\nThe shorthand form is allowed:\n\n```svelte\n<div style:color>...</div>\n```\n\nMultiple styles can be set on a single element:\n\n```svelte\n<div style:color style:width=\"12rem\" style:background-color={darkMode ? 'black' : 'white'}>...</div>\n```\n\nTo mark a style as important, use the `|important` modifier:\n\n```svelte\n<div style:color|important=\"red\">...</div>\n```\n\nWhen `style:` directives are combined with `style` attributes, the directives will take precedence,\neven over `!important` properties:\n\n```svelte\n<div style:color=\"red\" style=\"color: blue\">This will be red</div>\n<div style:color=\"red\" style=\"color: blue !important\">This will still be red</div>\n```",
+		"svelte/class": "There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.\n\n## Attributes\n\nPrimitive values are treated like any other attribute:\n\n```svelte\n<div class={large ? 'large' : 'small'}>...</div>\n```\n\n> [!NOTE]\n> For historical reasons, falsy values (like `false` and `NaN`) are stringified (`class=\"false\"`), though `class={undefined}` (or `null`) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause `class` to be omitted.\n\n### Objects and arrays\n\nSince Svelte 5.16, `class` can be an object or array, and is converted to a string using [clsx](https://github.com/lukeed/clsx).\n\nIf the value is an object, the truthy keys are added:\n\n```svelte\n<script>\n\tlet { cool } = $props();\n</script>\n\n<!-- results in `class=\"cool\"` if `cool` is truthy,\n     `class=\"lame\"` otherwise -->\n<div class={{ cool, lame: !cool }}>...</div>\n```\n\nIf the value is an array, the truthy values are combined:\n\n```svelte\n<!-- if `faded` and `large` are both truthy, results in\n     `class=\"saturate-0 opacity-50 scale-200\"` -->\n<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>\n```\n\nNote that whether we're using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you're using things like Tailwind.\n\nArrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example:\n\n```svelte\n<!--- file: Button.svelte --->\n<script>\n\tlet props = $props();\n</script>\n\n<button {...props} class={['cool-button', props.class]}>\n\t{@render props.children?.()}\n</button>\n```\n\nThe user of this component has the same flexibility to use a mixture of objects, arrays and strings:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Button from './Button.svelte';\n\tlet useTailwind = $state(false);\n</script>\n\n<Button\n\tonclick={() => useTailwind = true}\n\tclass={{ 'bg-blue-700 sm:w-1/2': useTailwind }}\n>\n\tAccept the inevitability of Tailwind\n</Button>\n```\n\nSince Svelte 5.19, Svelte also exposes the `ClassValue` type, which is the type of value that the `class` attribute on elements accept. This is useful if you want to use a type-safe class name in component props:\n\n```svelte\n<script lang=\"ts\">\n\timport type { ClassValue } from 'svelte/elements';\n\n\tconst props: { class: ClassValue } = $props();\n</script>\n\n<div class={['original', props.class]}>...</div>\n```\n\n## The `class:` directive\n\nPrior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally.\n\n```svelte\n<!-- These are equivalent -->\n<div class={{ cool, lame: !cool }}>...</div>\n<div class:cool={cool} class:lame={!cool}>...</div>\n```\n\nAs with other directives, we can use a shorthand when the name of the class coincides with the value:\n\n```svelte\n<div class:cool class:lame={!cool}>...</div>\n```\n\n> [!NOTE] Unless you're using an older version of Svelte, consider avoiding `class:`, since the attribute is more powerful and composable.",
+		"svelte/await-expressions": "As of Svelte 5.36, you can use the `await` keyword inside your components in three places where it was previously unavailable:\n\n- at the top level of your component's `<script>`\n- inside `$derived(...)` declarations\n- inside your markup\n\nThis feature is currently experimental, and you must opt in by adding the `experimental.async` option wherever you [configure](/docs/kit/configuration) Svelte, usually `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nexport default {\n\tcompilerOptions: {\n\t\texperimental: {\n\t\t\tasync: true\n\t\t}\n\t}\n};\n```\n\nThe experimental flag will be removed in Svelte 6.\n\n## Synchronized updates\n\nWhen an `await` expression depends on a particular piece of state, changes to that state will not be reflected in the UI until the asynchronous work has completed, so that the UI is not left in an inconsistent state. In other words, in an example like [this](/playground/untitled#H4sIAAAAAAAAE42QsWrDQBBEf2VZUkhYRE4gjSwJ0qVMkS6XYk9awcFpJe5Wdoy4fw-ycdykSPt2dpiZFYVGxgrf2PsJTlPwPWTcO-U-xwIH5zli9bminudNtwEsbl-v8_wYj-x1Y5Yi_8W7SZRFI1ZYxy64WVsjRj0rEDTwEJWUs6f8cKP2Tp8vVIxSPEsHwyKdukmA-j6jAmwO63Y1SidyCsIneA_T6CJn2ZBD00Jk_XAjT4tmQwEv-32eH6AsgYK6wXWOPPTs6Xy1CaxLECDYgb3kSUbq8p5aaifzorCt0RiUZbQcDIJ10ldH8gs3K6X2Xzqbro5zu1KCHaw2QQPrtclvwVSXc2sEC1T-Vqw0LJy-ClRy_uSkx2ogHzn9ADZ1CubKAQAA)...\n\n```svelte\n<script>\n\tlet a = $state(1);\n\tlet b = $state(2);\n\n\tasync function add(a, b) {\n\t\tawait new Promise((f) => setTimeout(f, 500)); // artificial delay\n\t\treturn a + b;\n\t}\n</script>\n\n<input type=\"number\" bind:value={a}>\n<input type=\"number\" bind:value={b}>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n```\n\n...if you increment `a`, the contents of the `<p>` will _not_ immediately update to read this —\n\n```html\n<p>2 + 2 = 3</p>\n```\n\n— instead, the text will update to `2 + 2 = 4` when `add(a, b)` resolves.\n\nUpdates can overlap — a fast update will be reflected in the UI while an earlier slow update is still ongoing.\n\n## Concurrency\n\nSvelte will do as much asynchronous work as it can in parallel. For example if you have two `await` expressions in your markup...\n\n```svelte\n<p>{await one()}</p>\n<p>{await two()}</p>\n```\n\n...both functions will run at the same time, as they are independent expressions, even though they are _visually_ sequential.\n\nThis does not apply to sequential `await` expressions inside your `<script>` or inside async functions — these run like any other asynchronous JavaScript. An exception is that independent `$derived` expressions will update independently, even though they will run sequentially when they are first created:\n\n```js\nasync function one() { return 1; }\nasync function two() { return 2; }\n// ---cut---\n// these will run sequentially the first time,\n// but will update independently\nlet a = $derived(await one());\nlet b = $derived(await two());\n```\n\n> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning\n\n## Indicating loading states\n\nTo render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](svelte-boundary#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.\n\nAfter the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`]($effect#$effect.pending). This is what you would use to display a \"we're asynchronously validating your input\" spinner next to a form field, for example.\n\nYou can also use [`settled()`](svelte#settled) to get a promise that resolves when the current update is complete:\n\n```js\nlet color = 'red';\nlet answer = -1;\nlet updating = false;\n// ---cut---\nimport { tick, settled } from 'svelte';\n\nasync function onclick() {\n\tupdating = true;\n\n\t// without this, the change to `updating` will be\n\t// grouped with the other changes, meaning it\n\t// won't be reflected in the UI\n\tawait tick();\n\n\tcolor = 'octarine';\n\tanswer = 42;\n\n\tawait settled();\n\n\t// any updates affected by `color` or `answer`\n\t// have now been applied\n\tupdating = false;\n}\n```\n\n## Error handling\n\nErrors in `await` expressions will bubble to the nearest [error boundary](svelte-boundary).\n\n## Server-side rendering\n\nSvelte supports asynchronous server-side rendering (SSR) with the `render(...)` API. To use it, simply await the return value:\n\n```js\n/// file: server.js\nimport { render } from 'svelte/server';\nimport App from './App.svelte';\n\nconst { head, body } = +++await+++ render(App);\n```\n\n> [!NOTE] If you're using a framework like SvelteKit, this is done on your behalf.\n\nIf a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, that snippet will be rendered while the rest of the content is ignored. All `await` expressions encountered outside boundaries with `pending` snippets will resolve and render their contents prior to `await render(...)` returning.\n\n> [!NOTE] In the future, we plan to add a streaming implementation that renders the content in the background.\n\n## Caveats\n\nAs an experimental feature, the details of how `await` is handled (and related APIs like `$effect.pending()`) are subject to breaking changes outside of a semver major release, though we intend to keep such changes to a bare minimum.\n\n## Breaking changes\n\nEffects run in a slightly different order when the `experimental.async` option is `true`. Specifically, _block_ effects like `{#if ...}` and `{#each ...}` now run before an `$effect.pre` or `beforeUpdate` in the same component, which means that in [very rare situations](/playground/untitled?#H4sIAAAAAAAAE22R3VLDIBCFX2WLvUhnTHsf0zre-Q7WmfwtFV2BgU1rJ5N3F0jaOuoVcPbw7VkYhK4_URTiGYkMnIyjDjLsFGO3EvdCKkIvipdB8NlGXxSCPt96snbtj0gctab2-J_eGs2oOWBE6VunLO_2es-EDKZ5x5ZhC0vPNWM2gHXGouNzAex6hHH1cPHil_Lsb95YT9VQX6KUAbS2DrNsBdsdDFHe8_XSYjH1SrhELTe3MLpsemajweiWVPuxHSbKNd-8eQTdE0EBf4OOaSg2hwNhhE_ABB_ulJzjj9FULvIcqgm5vnAqUB7wWFMfhuugQWkcAr8hVD-mq8D12kOep24J_IszToOXdveGDsuNnZwbJUNlXsKnhJdhUcTo42s41YpOSneikDV5HL8BktM6yRcCAAA=) it is possible to update a block that should no longer exist, but only if you update state inside an effect, [which you should avoid]($effect#When-not-to-use-$effect).",
+		"svelte/scoped-styles": "Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question.\n\nThis works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz`).\n\n```svelte\n<style>\n\tp {\n\t\t/* this will only affect <p> elements in this component */\n\t\tcolor: burlywood;\n\t}\n</style>\n```\n\n## Specificity\n\nEach scoped selector receives a [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) increase of 0-1-0, as a result of the scoping class (e.g. `.svelte-123xyz`) being added to the selector. This means that (for example) a `p` selector defined in a component will take precedence over a `p` selector defined in a global stylesheet, even if the global stylesheet is loaded later.\n\nIn some cases, the scoping class must be added to a selector multiple times, but after the first occurrence it is added with `:where(.svelte-xyz123)` in order to not increase specificity further.\n\n## Scoped keyframes\n\nIf a component defines `@keyframes`, the name is scoped to the component using the same hashing approach. Any `animation` rules in the component will be similarly adjusted:\n\n```svelte\n<style>\n\t.bouncy {\n\t\tanimation: bounce 10s;\n\t}\n\n\t/* these keyframes are only accessible inside this component */\n\t@keyframes bounce {\n\t\t/* ... */\n\t}\n</style>\n```",
+		"svelte/global-styles": "## :global(...)\n\nTo apply styles to a single selector globally, use the `:global(...)` modifier:\n\n```svelte\n<style>\n\t:global(body) {\n\t\t/* applies to <body> */\n\t\tmargin: 0;\n\t}\n\n\tdiv :global(strong) {\n\t\t/* applies to all <strong> elements, in any component,\n\t\t   that are inside <div> elements belonging\n\t\t   to this component */\n\t\tcolor: goldenrod;\n\t}\n\n\tp:global(.big.red) {\n\t\t/* applies to all <p> elements belonging to this component\n\t\t   with `class=\"big red\"`, even if it is applied\n\t\t   programmatically (for example by a library) */\n\t}\n</style>\n```\n\nIf you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.\n\nThe `-global-` part will be removed when compiled, and the keyframe will then be referenced using just `my-animation-name` elsewhere in your code.\n\n```svelte\n<style>\n\t@keyframes -global-my-animation-name {\n\t\t/* code goes here */\n\t}\n</style>\n```\n\n## :global\n\nTo apply styles to a group of selectors globally, create a `:global {...}` block:\n\n```svelte\n<style>\n\t:global {\n\t\t/* applies to every <div> in your application */\n\t\tdiv { ... }\n\n\t\t/* applies to every <p> in your application */\n\t\tp { ... }\n\t}\n\n\t.a :global {\n\t\t/* applies to every `.b .c .d` element, in any component,\n\t\t   that is inside an `.a` element in this component */\n\t\t.b .c .d {...}\n\t}\n</style>\n```\n\n> [!NOTE] The second example above could also be written as an equivalent `.a :global .b .c .d` selector, where everything after the `:global` is unscoped, though the nested form is preferred.",
+		"svelte/custom-properties": "You can pass CSS custom properties — both static and dynamic — to components:\n\n```svelte\n<Slider\n\tbind:value\n\tmin={0}\n\tmax={100}\n\t--track-color=\"black\"\n\t--thumb-color=\"rgb({r} {g} {b})\"\n/>\n```\n\nThe above code essentially desugars to this:\n\n```svelte\n<svelte-css-wrapper style=\"display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})\">\n\t<Slider\n\t\tbind:value\n\t\tmin={0}\n\t\tmax={100}\n\t/>\n</svelte-css-wrapper>\n```\n\nFor an SVG element, it would use `<g>` instead:\n\n```svelte\n<g style=\"--track-color: black; --thumb-color: rgb({r} {g} {b})\">\n\t<Slider\n\t\tbind:value\n\t\tmin={0}\n\t\tmax={100}\n\t/>\n</g>\n```\n\nInside the component, we can read these custom properties (and provide fallback values) using [`var(...)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):\n\n```svelte\n<style>\n\t.track {\n\t\tbackground: var(--track-color, #aaa);\n\t}\n\n\t.thumb {\n\t\tbackground: var(--thumb-color, blue);\n\t}\n</style>\n```\n\nYou don't _have_ to specify the values directly on the component; as long as the custom properties are defined on a parent element, the component can use them. It's common to define custom properties on the `:root` element in a global stylesheet so that they apply to your entire application.\n\n> [!NOTE] While the extra element will not affect layout, it _will_ affect any CSS selectors that (for example) use the `>` combinator to target an element directly inside the component's container.",
+		"svelte/nested-style-elements": "There can only be one top-level `<style>` tag per component.\n\nHowever, it is possible to have a `<style>` tag nested inside other elements or logic blocks.\n\nIn that case, the `<style>` tag will be inserted as-is into the DOM; no scoping or processing will be done on the `<style>` tag.\n\n```svelte\n<div>\n\t<style>\n\t\t/* this style tag will be inserted as-is */\n\t\tdiv {\n\t\t\t/* this will apply to all `<div>` elements in the DOM */\n\t\t\tcolor: red;\n\t\t}\n\t</style>\n</div>\n```",
+		"svelte/svelte-boundary": "```svelte\n<svelte:boundary onerror={handler}>...</svelte:boundary>\n```\n\n> [!NOTE]\n> This feature was added in 5.3.0\n\nBoundaries allow you to 'wall off' parts of your app, so that you can:\n\n- provide UI that should be shown when [`await`](await-expressions) expressions are first resolving\n- handle errors that occur during rendering or while running effects, and provide UI that should be rendered when an error happens\n\nIf a boundary handles an error (with a `failed` snippet or `onerror` handler, or both) its existing content will be removed.\n\n> [!NOTE] Errors occurring outside the rendering process (for example, in event handlers or after a `setTimeout` or async work) are _not_ caught by error boundaries.\n\n## Properties\n\nFor the boundary to do anything, one or more of the following must be provided.\n\n### `pending`\n\nThis snippet will be shown when the boundary is first created, and will remain visible until all the [`await`](await-expressions) expressions inside the boundary have resolved ([demo](/playground/untitled#H4sIAAAAAAAAE21QQW6DQAz8ytY9BKQVpFdKkPqDHnorPWzAaSwt3tWugUaIv1eE0KpKD5as8YxnNBOw6RAKKOOAVrA4up5bEy6VGknOyiO3xJ8qMnmPAhpOZDFC8T6BXPyiXADQ258X77P1FWg4moj_4Y1jQZZ49W0CealqruXUcyPkWLVozQXbZDC2R606spYiNo7bqA7qab_fp2paFLUElD6wYhzVa3AdRUySgNHZAVN1qDZaLRHljTp0vSTJ9XJjrSbpX5f0eZXN6zLXXOa_QfmurIVU-moyoyH5ib87o7XuYZfOZe6vnGWmx1uZW7lJOq9upa-sMwuUZdkmmfIbfQ1xZwwaBL8ECgk9zh8axJAdiVsoTsZGnL8Bg4tX_OMBAAA=)):\n\n```svelte\n<svelte:boundary>\n\t<p>{await delayed('hello!')}</p>\n\n\t{#snippet pending()}\n\t\t<p>loading...</p>\n\t{/snippet}\n</svelte:boundary>\n```\n\nThe `pending` snippet will _not_ be shown for subsequent async updates — for these, you can use [`$effect.pending()`]($effect#$effect.pending).\n\n> [!NOTE] In the [playground](/playground), your app is rendered inside a boundary with an empty pending snippet, so that you can use `await` without having to create one.\n\n\n### `failed`\n\nIf a `failed` snippet is provided, it will be rendered when an error is thrown inside the boundary, with the `error` and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):\n\n```svelte\n<svelte:boundary>\n\t<FlakyComponent />\n\n\t{#snippet failed(error, reset)}\n\t\t<button onclick={reset}>oops! try again</button>\n\t{/snippet}\n</svelte:boundary>\n```\n\n> [!NOTE]\n> As with [snippets passed to components](snippet#Passing-snippets-to-components), the `failed` snippet can be passed explicitly as a property...\n>\n> ```svelte\n> <svelte:boundary {failed}>...</svelte:boundary>\n> ```\n>\n> ...or implicitly by declaring it directly inside the boundary, as in the example above.\n\n### `onerror`\n\nIf an `onerror` function is provided, it will be called with the same two `error` and `reset` arguments. This is useful for tracking the error with an error reporting service...\n\n```svelte\n<svelte:boundary onerror={(e) => report(e)}>\n\t...\n</svelte:boundary>\n```\n\n...or using `error` and `reset` outside the boundary itself:\n\n```svelte\n<script>\n\tlet error = $state(null);\n\tlet reset = $state(() => {});\n\n\tfunction onerror(e, r) {\n\t\terror = e;\n\t\treset = r;\n\t}\n</script>\n\n<svelte:boundary {onerror}>\n\t<FlakyComponent />\n</svelte:boundary>\n\n{#if error}\n\t<button onclick={() => {\n\t\terror = null;\n\t\treset();\n\t}}>\n\t\toops! try again\n\t</button>\n{/if}\n```\n\nIf an error occurs inside the `onerror` function (or if you rethrow the error), it will be handled by a parent boundary if such exists.",
+		"svelte/svelte-window": "```svelte\n<svelte:window onevent={handler} />\n```\n\n```svelte\n<svelte:window bind:prop={value} />\n```\n\nThe `<svelte:window>` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering.\n\nThis element may only appear at the top level of your component — it cannot be inside a block or element.\n\n```svelte\n<script>\n\tfunction handleKeydown(event) {\n\t\talert(`pressed the ${event.key} key`);\n\t}\n</script>\n\n<svelte:window onkeydown={handleKeydown} />\n```\n\nYou can also bind to the following properties:\n\n- `innerWidth`\n- `innerHeight`\n- `outerWidth`\n- `outerHeight`\n- `scrollX`\n- `scrollY`\n- `online` — an alias for `window.navigator.onLine`\n- `devicePixelRatio`\n\nAll except `scrollX` and `scrollY` are readonly.\n\n```svelte\n<svelte:window bind:scrollY={y} />\n```\n\n> [!NOTE] Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. If you have a legitimate reason to scroll when the component is rendered, call `scrollTo()` in an `$effect`.",
+		"svelte/svelte-document": "```svelte\n<svelte:document onevent={handler} />\n```\n\n```svelte\n<svelte:document bind:prop={value} />\n```\n\nSimilarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](use) on `document`.\n\nAs with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.\n\n```svelte\n<svelte:document onvisibilitychange={handleVisibilityChange} use:someAction />\n```\n\nYou can also bind to the following properties:\n\n- `activeElement`\n- `fullscreenElement`\n- `pointerLockElement`\n- `visibilityState`\n\nAll are readonly.",
+		"svelte/svelte-body": "```svelte\n<svelte:body onevent={handler} />\n```\n\nSimilarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](use) on the `<body>` element.\n\nAs with `<svelte:window>` and `<svelte:document>`, this element may only appear at the top level of your component and must never be inside a block or element.\n\n```svelte\n<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />\n```",
+		"svelte/svelte-head": "```svelte\n<svelte:head>...</svelte:head>\n```\n\nThis element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `body` content.\n\nAs with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.\n\n```svelte\n<svelte:head>\n\t<title>Hello world!</title>\n\t<meta name=\"description\" content=\"This is where the description goes for SEO\" />\n</svelte:head>\n```",
+		"svelte/svelte-element": "```svelte\n<svelte:element this={expression} />\n```\n\nThe `<svelte:element>` element lets you render an element that is unknown at author time, for example because it comes from a CMS. Any properties and event listeners present will be applied to the element.\n\nThe only supported binding is `bind:this`, since Svelte's built-in bindings do not work with generic elements.\n\nIf `this` has a nullish value, the element and its children will not be rendered.\n\nIf `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode:\n\n```svelte\n<script>\n\tlet tag = $state('hr');\n</script>\n\n<svelte:element this={tag}>\n\tThis text cannot appear inside an hr element\n</svelte:element>\n```\n\nSvelte tries its best to infer the correct namespace from the element's surroundings, but it's not always possible. You can make it explicit with an `xmlns` attribute:\n\n```svelte\n<svelte:element this={tag} xmlns=\"http://www.w3.org/2000/svg\" />\n```\n\n`this` needs to be a valid DOM element tag, things like `#text` or `svelte:head` will not work.",
+		"svelte/svelte-options": "```svelte\n<svelte:options option={value} />\n```\n\nThe `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](svelte-compiler#compile). The possible options are:\n\n- `runes={true}` — forces a component into _runes mode_ (see the [Legacy APIs](legacy-overview) section)\n- `runes={false}` — forces a component into _legacy mode_\n- `namespace=\"...\"` — the namespace where this component will be used, can be \"html\" (the default), \"svg\" or \"mathml\"\n- `customElement={...}` — the [options](custom-elements#Component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option\n- `css=\"injected\"` — the component will inject its styles inline: During server-side rendering, it's injected as a `<style>` tag in the `head`, during client side rendering, it's loaded via JavaScript\n\n> [!LEGACY] Deprecated options\n> Svelte 4 also included the following options. They are deprecated in Svelte 5 and non-functional in runes mode.\n>\n> - `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed\n> - `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed\n> - `accessors={true}` — adds getters and setters for the component's props\n> - `accessors={false}` — the default\n\n```svelte\n<svelte:options customElement=\"my-custom-element\" />\n```",
+		"svelte/stores": "<!-- - how to use\n- how to write\n- TODO should the details for the store methods belong to the reference section? -->\n\nA _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](../svelte-store) contains minimal store implementations which fulfil this contract.\n\nAny time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialisation and unsubscribe when appropriate.\n\nAssignments to `$`-prefixed variables require that the variable be a writable store, and will result in a call to the store's `.set` method.\n\nNote that the store must be declared at the top level of the component — not inside an `if` block or a function, for example.\n\nLocal variables (that do not represent store values) must _not_ have a `$` prefix.\n\n```svelte\n<script>\n\timport { writable } from 'svelte/store';\n\n\tconst count = writable(0);\n\tconsole.log($count); // logs 0\n\n\tcount.set(1);\n\tconsole.log($count); // logs 1\n\n\t$count = 2;\n\tconsole.log($count); // logs 2\n</script>\n```\n\n## When to use stores\n\nPrior to Svelte 5, stores were the go-to solution for creating cross-component reactive states or extracting logic. With runes, these use cases have greatly diminished.\n\n- when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending)\n- when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state\n\n```ts\n/// file: state.svelte.js\nexport const userState = $state({\n\tname: 'name',\n\t/* ... */\n});\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { userState } from './state.svelte.js';\n</script>\n\n<p>User name: {userState.name}</p>\n<button onclick={() => {\n\tuserState.name = 'new name';\n}}>\n\tchange name\n</button>\n```\n\nStores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you.\n\n## svelte/store\n\nThe `svelte/store` module contains a minimal store implementation which fulfil the store contract. It provides methods for creating stores that you can update from the outside, stores you can only update from the inside, and for combining and deriving stores.\n\n### `writable`\n\nFunction that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.\n\n`set` is a method that takes one argument which is the value to be set. The store value gets set to the value of the argument if the store value is not already equal to it.\n\n`update` is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.\n\n```js\n/// file: store.js\nimport { writable } from 'svelte/store';\n\nconst count = writable(0);\n\ncount.subscribe((value) => {\n\tconsole.log(value);\n}); // logs '0'\n\ncount.set(1); // logs '1'\n\ncount.update((n) => n + 1); // logs '2'\n```\n\nIf a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store, and an `update` function which works like the `update` method on the store, taking a callback to calculate the store's new value from its old value. It must return a `stop` function that is called when the subscriber count goes from one to zero.\n\n```js\n/// file: store.js\nimport { writable } from 'svelte/store';\n\nconst count = writable(0, () => {\n\tconsole.log('got a subscriber');\n\treturn () => console.log('no more subscribers');\n});\n\ncount.set(1); // does nothing\n\nconst unsubscribe = count.subscribe((value) => {\n\tconsole.log(value);\n}); // logs 'got a subscriber', then '1'\n\nunsubscribe(); // logs 'no more subscribers'\n```\n\nNote that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.\n\n### `readable`\n\nCreates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.\n\n```ts\nimport { readable } from 'svelte/store';\n\nconst time = readable(new Date(), (set) => {\n\tset(new Date());\n\n\tconst interval = setInterval(() => {\n\t\tset(new Date());\n\t}, 1000);\n\n\treturn () => clearInterval(interval);\n});\n\nconst ticktock = readable('tick', (set, update) => {\n\tconst interval = setInterval(() => {\n\t\tupdate((sound) => (sound === 'tick' ? 'tock' : 'tick'));\n\t}, 1000);\n\n\treturn () => clearInterval(interval);\n});\n```\n\n### `derived`\n\nDerives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.\n\nIn the simplest version, `derived` takes a single store, and the callback returns a derived value.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst a: Writable<number>;\n}\n\nexport {};\n\n// @filename: index.ts\n// ---cut---\nimport { derived } from 'svelte/store';\n\nconst doubled = derived(a, ($a) => $a * 2);\n```\n\nThe callback can set a value asynchronously by accepting a second argument, `set`, and an optional third argument, `update`, calling either or both of them when appropriate.\n\nIn this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` or `update` is first called. If no initial value is specified, the store's initial value will be `undefined`.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst a: Writable<number>;\n}\n\nexport {};\n\n// @filename: index.ts\n// @errors: 18046 2769 7006\n// ---cut---\nimport { derived } from 'svelte/store';\n\nconst delayed = derived(\n\ta,\n\t($a, set) => {\n\t\tsetTimeout(() => set($a), 1000);\n\t},\n\t2000\n);\n\nconst delayedIncrement = derived(a, ($a, set, update) => {\n\tset($a);\n\tsetTimeout(() => update((x) => x + 1), 1000);\n\t// every time $a produces a value, this produces two\n\t// values, $a immediately and then $a + 1 a second later\n});\n```\n\nIf you return a function from the callback, it will be called when a) the callback runs again, or b) the last subscriber unsubscribes.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst frequency: Writable<number>;\n}\n\nexport {};\n\n// @filename: index.ts\n// ---cut---\nimport { derived } from 'svelte/store';\n\nconst tick = derived(\n\tfrequency,\n\t($frequency, set) => {\n\t\tconst interval = setInterval(() => {\n\t\t\tset(Date.now());\n\t\t}, 1000 / $frequency);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t},\n\t2000\n);\n```\n\nIn both cases, an array of arguments can be passed as the first argument instead of a single store.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst a: Writable<number>;\n\tconst b: Writable<number>;\n}\n\nexport {};\n\n// @filename: index.ts\n\n// ---cut---\nimport { derived } from 'svelte/store';\n\nconst summed = derived([a, b], ([$a, $b]) => $a + $b);\n\nconst delayed = derived([a, b], ([$a, $b], set) => {\n\tsetTimeout(() => set($a + $b), 1000);\n});\n```\n\n### `readonly`\n\nThis simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.\n\n```js\nimport { readonly, writable } from 'svelte/store';\n\nconst writableStore = writable(1);\nconst readableStore = readonly(writableStore);\n\nreadableStore.subscribe(console.log);\n\nwritableStore.set(2); // console: 2\n// @errors: 2339\nreadableStore.set(2); // ERROR\n```\n\n### `get`\n\nGenerally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.\n\n> [!NOTE] This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst store: Writable<string>;\n}\n\nexport {};\n\n// @filename: index.ts\n// ---cut---\nimport { get } from 'svelte/store';\n\nconst value = get(store);\n```\n\n## Store contract\n\n```ts\n// @noErrors\nstore = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }\n```\n\nYou can create your own stores without relying on [`svelte/store`](../svelte-store), by implementing the _store contract_:\n\n1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.\n2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.\n3. A store may _optionally_ contain a `.set` method, which must accept as its argument a new value for the store, and which synchronously calls all of the store's active subscription functions. Such a store is called a _writable store_.\n\nFor interoperability with RxJS Observables, the `.subscribe` method is also allowed to return an object with an `.unsubscribe` method, rather than return the unsubscription function directly. Note however that unless `.subscribe` synchronously calls the subscription (which is not required by the Observable spec), Svelte will see the value of the store as `undefined` until it does.",
+		"svelte/context": "Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling'). The parent component sets context with `setContext(key, value)`...\n\n```svelte\n<!--- file: Parent.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\tsetContext('my-context', 'hello from Parent.svelte');\n</script>\n```\n\n...and the child retrieves it with `getContext`:\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst message = getContext('my-context');\n</script>\n\n<h1>{message}, inside Child.svelte</h1>\n```\n\nThis is particularly useful when `Parent.svelte` is not directly aware of `Child.svelte`, but instead renders it as part of a `children` [snippet](snippet) ([demo](/playground/untitled#H4sIAAAAAAAAE42Q3W6DMAyFX8WyJgESK-oto6hTX2D3YxcM3IIUQpR40yqUd58CrCXsp7tL7HNsf2dAWXaEKR56yfTBGOOxFWQwfR6Qz8q1XAHjL-GjUhvzToJd7bU09FO9ctMkG0wxM5VuFeeFLLjtVK8ZnkpNkuGo-w6CTTJ9Z3PwsBAemlbUF934W8iy5DpaZtOUcU02-ZLcaS51jHEkTFm_kY1_wfOO8QnXrb8hBzDEc6pgZ4gFoyz4KgiD7nxfTe8ghqAhIfrJ46cTzVZBbkPlODVJsLCDO6V7ZcJoncyw1yRr0hd1GNn_ZbEM3I9i1bmVxOlWElUvDUNHxpQngt3C4CXzjS1rtvkw22wMrTRtTbC8Lkuabe7jvthPPe3DofYCAAA=)):\n\n```svelte\n<Parent>\n\t<Child />\n</Parent>\n```\n\nThe key (`'my-context'`, in the example above) and the context itself can be any JavaScript value.\n\nIn addition to [`setContext`](svelte#setContext) and [`getContext`](svelte#getContext), Svelte exposes [`hasContext`](svelte#hasContext) and [`getAllContexts`](svelte#getAllContexts) functions.\n\n## Using context with state\n\nYou can store reactive state in context ([demo](/playground/untitled#H4sIAAAAAAAAE41R0W6DMAz8FSuaBNUQdK8MkKZ-wh7HHihzu6hgosRMm1D-fUpSVNq12x4iEvvOx_kmQU2PIhfP3DCCJGgHYvxkkYid7NCI_GUS_KUcxhVEMjOelErNB3bsatvG4LW6n0ZsRC4K02qpuKqpZtmrQTNMYJA3QRAs7PTQQxS40eMCt3mX3duxnWb-lS5h7nTI0A4jMWoo4c44P_Hku-zrOazdy64chWo-ScfRkRgl8wgHKrLTH1OxHZkHgoHaTraHcopXUFYzPPVfuC_hwQaD1GrskdiNCdQwJljJqlvXfyqVsA5CGg0uRUQifHw56xFtciO75QrP07vo_JXf_tf8yK2ezDKY_ZWt_1y2qqYzv7bI1IW1V_sN19m-07wCAAA=))...\n\n```svelte\n<script>\n\timport { setContext } from 'svelte';\n\timport Child from './Child.svelte';\n\n\tlet counter = $state({\n\t\tcount: 0\n\t});\n\n\tsetContext('counter', counter);\n</script>\n\n<button onclick={() => counter.count += 1}>\n\tincrement\n</button>\n\n<Child />\n<Child />\n<Child />\n```\n\n...though note that if you _reassign_ `counter` instead of updating it, you will 'break the link' — in other words instead of this...\n\n```svelte\n<button onclick={() => counter = { count: 0 }}>\n\treset\n</button>\n```\n\n...you must do this:\n\n```svelte\n<button onclick={() => +++counter.count = 0+++}>\n\treset\n</button>\n```\n\nSvelte will warn you if you get it wrong.\n\n## Type-safe context\n\nA useful pattern is to wrap the calls to `setContext` and `getContext` inside helper functions that let you preserve type safety:\n\n```js\n/// file: context.js\n// @filename: ambient.d.ts\ninterface User {}\n\n// @filename: index.js\n// ---cut---\nimport { getContext, setContext } from 'svelte';\n\nconst key = {};\n\n/** @param {User} user */\nexport function setUserContext(user) {\n\tsetContext(key, user);\n}\n\nexport function getUserContext() {\n\treturn /** @type {User} */ (getContext(key));\n}\n```\n\n## Replacing global state\n\nWhen you have state shared by many different components, you might be tempted to put it in its own module and just import it wherever it's needed:\n\n```js\n/// file: state.svelte.js\nexport const myGlobalState = $state({\n\tuser: {\n\t\t// ...\n\t}\n\t// ...\n});\n```\n\nIn many cases this is perfectly fine, but there is a risk: if you mutate the state during server-side rendering (which is discouraged, but entirely possible!)...\n\n```svelte\n<!--- file: App.svelte ---->\n<script>\n\timport { myGlobalState } from './state.svelte.js';\n\n\tlet { data } = $props();\n\n\tif (data.user) {\n\t\tmyGlobalState.user = data.user;\n\t}\n</script>\n```\n\n...then the data may be accessible by the _next_ user. Context solves this problem because it is not shared between requests.",
+		"svelte/lifecycle-hooks": "<!-- - onMount/onDestroy\n- mention that `$effect` might be better for your use case\n- beforeUpdate/afterUpdate with deprecation notice?\n- or skip this entirely and only have it in the reference docs? -->\n\nIn Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between — when certain state is updated — is not related to the component as a whole; only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a \"before update\"/\"after update\" hook.\n\n## `onMount`\n\nThe `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).\n\n`onMount` does not run inside a component that is rendered on the server.\n\n```svelte\n<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(() => {\n\t\tconsole.log('the component has mounted');\n\t});\n</script>\n```\n\nIf a function is returned from `onMount`, it will be called when the component is unmounted.\n\n```svelte\n<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tconsole.log('beep');\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t});\n</script>\n```\n\n> [!NOTE] This behaviour will only work when the function passed to `onMount` is _synchronous_. `async` functions always return a `Promise`.\n\n## `onDestroy`\n\nSchedules a callback to run immediately before the component is unmounted.\n\nOut of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.\n\n```svelte\n<script>\n\timport { onDestroy } from 'svelte';\n\n\tonDestroy(() => {\n\t\tconsole.log('the component is being destroyed');\n\t});\n</script>\n```\n\n## `tick`\n\nWhile there's no \"after update\" hook, you can use `tick` to ensure that the UI is updated before continuing. `tick` returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.\n\n```svelte\n<script>\n\timport { tick } from 'svelte';\n\n\t$effect.pre(() => {\n\t\tconsole.log('the component is about to update');\n\t\ttick().then(() => {\n\t\t\t\tconsole.log('the component just updated');\n\t\t});\n\t});\n</script>\n```\n\n## Deprecated: `beforeUpdate` / `afterUpdate`\n\nSvelte 4 contained hooks that ran before and after the component as a whole was updated. For backwards compatibility, these hooks were shimmed in Svelte 5 but not available inside components that use runes.\n\n```svelte\n<script>\n\timport { beforeUpdate, afterUpdate } from 'svelte';\n\n\tbeforeUpdate(() => {\n\t\tconsole.log('the component is about to update');\n\t});\n\n\tafterUpdate(() => {\n\t\tconsole.log('the component just updated');\n\t});\n</script>\n```\n\nInstead of `beforeUpdate` use `$effect.pre` and instead of `afterUpdate` use `$effect` instead - these runes offer more granular control and only react to the changes you're actually interested in.\n\n### Chat window example\n\nTo implement a chat window that autoscrolls to the bottom when new messages appear (but only if you were _already_ scrolled to the bottom), we need to measure the DOM before we update it.\n\nIn Svelte 4, we do this with `beforeUpdate`, but this is a flawed approach — it fires before _every_ update, whether it's relevant or not. In the example below, we need to introduce checks like `updatingMessages` to make sure we don't mess with the scroll position when someone toggles dark mode.\n\nWith runes, we can use `$effect.pre`, which behaves the same as `$effect` but runs before the DOM is updated. As long as we explicitly reference `messages` inside the effect body, it will run whenever `messages` changes, but _not_ when `theme` changes.\n\n`beforeUpdate`, and its equally troublesome counterpart `afterUpdate`, are therefore deprecated in Svelte 5.\n\n- [Before](/playground/untitled#H4sIAAAAAAAAE31WXa_bNgz9K6yL1QmWOLlrC-w6H8MeBgwY9tY9NfdBtmlbiywZkpyPBfnvo2zLcZK28AWuRPGI5OGhkEuQc4EmiL9eAskqDOLg97oOZoE9125jDigs0t6oRqfOsjap5rXd7uTO8qpW2sIFEsyVxn_qjFmcAcstar-xPN3DFXKtKgi768IVgQku0ELj3Lgs_kZjWIEGNpAzYXDlHWyJFZI1zJjeh4O5uvl_DY8oUkVeVoFuJKYls-_CGYS25Aboj0EtWNqel0wWoBoLTGZgmdgDS9zW4Uz4NsrswPHoyutN4xInkylstnBxdmIhh8m7xzqmoNE2Wq46n1RJQzEbq4g-JQSl7e-HDx-GdaTy3KD9E3lRWvj5Zu9QX1QN20dj7zyHz8s-1S6lW7Cpz3RnXTcm04hIlfdFuO8p2mQ5-3a06cqjrn559bF_2NHOnRZ5I1PLlXQNyQT-hedMHeUEDyjtdMxsa4n2eIbNhlTwhyRthaOKOmYtniwF6pwt0wXa6MBEg0OibZec27gz_dk3UrZ6hB2LLYoiv521Yd8Gt-foTrfhiCDP0lC9VUUhcDLU49Xe_9943cNvEArHfAjxeBTovvXiNpFynfEDpIIZs9kFbg52QbeNHWZzebz32s7xHco3nJAJl1nshmhz8dYOQJDyZetnbb2gTWe-vEeWlrfpZMavr56ldb29eNt6UXvgwgFbp_WC0tl2RK25rGk6lYz3nUI2lzvBXGHhPZPGWmKUXFNBKqdaW259wl_aHbiqoVIZdpE60Nax6IOujT0LbFFxIVTCxCRR2XloUcYNvSbnGHKBp763jHoj59xiZWJI0Wm0P_m3MSS985xkasn-cFq20xTDy3J5KFcjgUTD69BHdcHIjz431z28IqlxGcPSfdFnrGDZn6gD6lyo45zyHAD-btczf-98nhQxHEvKfeUtOVkSejD3q-9X7JbzjGtsdUxlKdFU8qGsT78uaw848syWMXz85Waq2Gnem4mAn3prweq4q6Y3JEpnqMmnPoFRgmd3ySW0LLRqSKlwYHriCvJvUs2yjMaaoA-XzTXLeGMe45zmhv_XAno3Mj0xF7USuqNvnE9H343QHlq-eAgxpbTPNR9yzUkgLjwSR0NK4wKoxy-jDg-9vy8sUSToakzW-9fX13Em9Q8T6Z26uZhBN36XUYo5q7ggLXBZoub2Ofv7g6GCZfTxe034NCjiudXj7Omla0eTfo7QBPOcYxbE7qG-vl3_B1G-_i_JCAAA)\n- [After](/playground/untitled#H4sIAAAAAAAAE31WXa-jNhD9K7PsdknUQJLurtRLPqo-VKrU1327uQ8GBnBjbGSb5KZR_nvHgMlXtyIS9njO-MyZGZRzUHCBJkhez4FkNQZJ8HvTBLPAnhq3MQcUFmlvVKszZ1mbTPPGbndyZ3ndKG3hDJZne7hAoVUNYY8JV-RBPgIt2AprhA18MpZZnIQ50_twuvLHNRrDSjRXj9fwiCJTBLIKdCsxq5j9EM4gtBU3QD8GjWBZd14xWYJqLTCZg2ViDyx1W4cz4dv0hsiB49FRHkyfsCgws3GjcTKZwmYLZ2feWc9o1W8zJQ2Fb62i5JUQRNRHgs-fx3WsisKg_RN5WVn4-WrvUd9VA9tH4-AcwbfFQIpkLWByvWzqSe2sk3kyjUlOec_XPU-3TRaz_75tuvKoi19e3OvipSpamVmupJM2F_gXnnJ1lBM8oLQjHceys8R7PMFms4HwD2lRhzeEe-EsvluSrHe2TJdo4wMTLY48XKwPzm0KGm2r5ajFtRYU4TWOY7-ddWHfxhDP0QkQhnf5PWRnVVkKnIx8fZsOb5dR16nwG4TCCRdCMphWQ7z1_DoOcp3zA2SCGbPZBa5jd0G_TRxmc36Me-mG6A7l60XIlMs8ce2-OXtrDyBItdz6qVjPadObzx-RZdV1nJjx64tXad1sz962njceOHfAzmk9JzrbXqg1lw3NkZL7vgE257t-uMDcO6attSSokpmgFqVMO2U93e_dDlzOUKsc-3t6zNZp6K9cG3sS2KGSUqiUiUmq8tNYoJwbmvpTAoXA96GyjCojI26xNglk6DpwOPm7NdRYp4ia0JL94bTqRiGB5WJxqFY37RGPoz3c6i4jP3rcUA7wmhqNywQW7om_YQ2L4UQdUBdCHSPiOQJ8bFcxHzeK0jKBY0XcV95SkCWlD9t-9eOM3TLKucauiyktJdpaPqT19ddF4wFHntsqgS-_XE01e48GMwnw02AtWZP02QyGVOkcNfk072CU4PkduZSWpVYt9SkcmJ64hPwHpWF5ziVls3wIFmmW89Y83vMeGf5PBxjcyPSkXNy10J18t3x6-a6CDtBq6SGklNKeazFyLahB3PVIGo2UbhOgGi9vKjzW_j6xVFFD17difXx5ebll0vwvkcGpn4sZ9MN3vqFYsJoL6gUuK9TcPrO_PxgzWMRfflSEr2NHPJf6lj1957rRpH8CNMG84JgHidUtXt4u_wK21LXERAgAAA==)\n\n<!-- prettier-ignore -->\n```svelte\n<script>\n\timport { ---beforeUpdate, afterUpdate,--- tick } from 'svelte';\n\n\t---let updatingMessages = false;---\n\tlet theme = +++$state('dark')+++;\n\tlet messages = +++$state([])+++;\n\n\tlet viewport;\n\n\t---beforeUpdate(() => {---\n\t+++$effect.pre(() => {+++\n\t\t---if (!updatingMessages) return;---\n\t\t+++messages;+++\n\t\tconst autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;\n\n\t\tif (autoscroll) {\n\t\t\ttick().then(() => {\n\t\t\t\tviewport.scrollTo(0, viewport.scrollHeight);\n\t\t\t});\n\t\t}\n\n\t\t---updatingMessages = false;---\n\t});\n\n\tfunction handleKeydown(event) {\n\t\tif (event.key === 'Enter') {\n\t\t\tconst text = event.target.value;\n\t\t\tif (!text) return;\n\n\t\t\t---updatingMessages = true;---\n\t\t\tmessages = [...messages, text];\n\t\t\tevent.target.value = '';\n\t\t}\n\t}\n\n\tfunction toggle() {\n\t\ttheme = theme === 'dark' ? 'light' : 'dark';\n\t}\n</script>\n\n<div class:dark={theme === 'dark'}>\n\t<div bind:this={viewport}>\n\t\t{#each messages as message}\n\t\t\t<p>{message}</p>\n\t\t{/each}\n\t</div>\n\n\t<input +++onkeydown+++={handleKeydown} />\n\n\t<button +++onclick+++={toggle}> Toggle dark mode </button>\n</div>\n```",
+		"svelte/imperative-component-api": "<!-- better title needed?\n\n- mount\n- unmount\n- render\n- hydrate\n- how they interact with each other -->\n\nEvery Svelte application starts by imperatively creating a root component. On the client this component is mounted to a specific element. On the server, you want to get back a string of HTML instead which you can render. The following functions help you achieve those tasks.\n\n## `mount`\n\nInstantiates a component and mounts it to the given target:\n\n```js\n// @errors: 2322\nimport { mount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, {\n\ttarget: document.querySelector('#app'),\n\tprops: { some: 'property' }\n});\n```\n\nYou can mount multiple components per page, and you can also mount from within your application, for example when creating a tooltip component and attaching it to the hovered element.\n\nNote that unlike calling `new App(...)` in Svelte 4, things like effects (including `onMount` callbacks, and action functions) will not run during `mount`. If you need to force pending effects to run (in the context of a test, for example) you can do so with `flushSync()`.\n\n## `unmount`\n\nUnmounts a component that was previously created with [`mount`](#mount) or [`hydrate`](#hydrate).\n\nIf `options.outro` is `true`, [transitions](transition) will play before the component is removed from the DOM:\n\n```js\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later\nunmount(app, { outro: true });\n```\n\nReturns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise.\n\n## `render`\n\nOnly available on the server and when compiling with the `server` option. Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:\n\n```js\n// @errors: 2724 2305 2307\nimport { render } from 'svelte/server';\nimport App from './App.svelte';\n\nconst result = render(App, {\n\tprops: { some: 'property' }\n});\nresult.body; // HTML for somewhere in this <body> tag\nresult.head; // HTML for somewhere in this <head> tag\n```\n\n## `hydrate`\n\nLike `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#render) function) inside the target and make it interactive:\n\n```js\n// @errors: 2322\nimport { hydrate } from 'svelte';\nimport App from './App.svelte';\n\nconst app = hydrate(App, {\n\ttarget: document.querySelector('#app'),\n\tprops: { some: 'property' }\n});\n```\n\nAs with `mount`, effects will not run during `hydrate` — use `flushSync()` immediately afterwards if you need them to.",
+		"svelte/testing": "Testing helps you write and maintain your code and guard against regressions. Testing frameworks help you with that, allowing you to describe assertions or expectations about how your code should behave. Svelte is unopinionated about which testing framework you use — you can write unit tests, integration tests, and end-to-end tests using solutions like [Vitest](https://vitest.dev/), [Jasmine](https://jasmine.github.io/), [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/).\n\n## Unit and component tests with Vitest\n\nUnit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/). You can use the Svelte CLI to [setup Vitest](/docs/cli/vitest) either during project creation or later on.\n\nTo setup Vitest manually, first install it:\n\n```sh\nnpm install -D vitest\n```\n\nThen adjust your `vite.config.js`:\n\n<!-- prettier-ignore -->\n```js\n/// file: vite.config.js\nimport { defineConfig } from +++'vitest/config'+++;\n\nexport default defineConfig({\n\t// ...\n\t// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node\n\tresolve: process.env.VITEST\n\t\t? {\n\t\t\t\tconditions: ['browser']\n\t\t\t}\n\t\t: undefined\n});\n```\n\n> [!NOTE] If loading the browser version of all your packages is undesirable, because (for example) you also test backend libraries, [you may need to resort to an alias configuration](https://github.com/testing-library/svelte-testing-library/issues/222#issuecomment-1909993331)\n\nYou can now write unit tests for code inside your `.js/.ts` files:\n\n```js\n/// file: multiplier.svelte.test.js\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { multiplier } from './multiplier.svelte.js';\n\ntest('Multiplier', () => {\n\tlet double = multiplier(0, 2);\n\n\texpect(double.value).toEqual(0);\n\n\tdouble.set(5);\n\n\texpect(double.value).toEqual(10);\n});\n```\n\n```js\n/// file: multiplier.svelte.js\n/**\n * @param {number} initial\n * @param {number} k\n */\nexport function multiplier(initial, k) {\n\tlet count = $state(initial);\n\n\treturn {\n\t\tget value() {\n\t\t\treturn count * k;\n\t\t},\n\t\t/** @param {number} c */\n\t\tset: (c) => {\n\t\t\tcount = c;\n\t\t}\n\t};\n}\n```\n\n### Using runes inside your test files\n\nSince Vitest processes your test files the same way as your source files, you can use runes inside your tests as long as the filename includes `.svelte`:\n\n```js\n/// file: multiplier.svelte.test.js\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { multiplier } from './multiplier.svelte.js';\n\ntest('Multiplier', () => {\n\tlet count = $state(0);\n\tlet double = multiplier(() => count, 2);\n\n\texpect(double.value).toEqual(0);\n\n\tcount = 5;\n\n\texpect(double.value).toEqual(10);\n});\n```\n\n```js\n/// file: multiplier.svelte.js\n/**\n * @param {() => number} getCount\n * @param {number} k\n */\nexport function multiplier(getCount, k) {\n\treturn {\n\t\tget value() {\n\t\t\treturn getCount() * k;\n\t\t}\n\t};\n}\n```\n\nIf the code being tested uses effects, you need to wrap the test inside `$effect.root`:\n\n```js\n/// file: logger.svelte.test.js\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { logger } from './logger.svelte.js';\n\ntest('Effect', () => {\n\tconst cleanup = $effect.root(() => {\n\t\tlet count = $state(0);\n\n\t\t// logger uses an $effect to log updates of its input\n\t\tlet log = logger(() => count);\n\n\t\t// effects normally run after a microtask,\n\t\t// use flushSync to execute all pending effects synchronously\n\t\tflushSync();\n\t\texpect(log).toEqual([0]);\n\n\t\tcount = 1;\n\t\tflushSync();\n\n\t\texpect(log).toEqual([0, 1]);\n\t});\n\n\tcleanup();\n});\n```\n\n```js\n/// file: logger.svelte.js\n/**\n * @param {() => any} getValue\n */\nexport function logger(getValue) {\n\t/** @type {any[]} */\n\tlet log = [];\n\n\t$effect(() => {\n\t\tlog.push(getValue());\n\t});\n\n\treturn log;\n}\n```\n\n### Component testing\n\nIt is possible to test your components in isolation, which allows you to render them in a browser (real or simulated), simulate behavior, and make assertions, without spinning up your whole app.\n\n> [!NOTE] Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component.\n\nTo get started, install jsdom (a library that shims DOM APIs):\n\n```sh\nnpm install -D jsdom\n```\n\nThen adjust your `vite.config.js`:\n\n```js\n/// file: vite.config.js\nimport { defineConfig } from 'vitest/config';\n\nexport default defineConfig({\n\tplugins: [\n\t\t/* ... */\n\t],\n\ttest: {\n\t\t// If you are testing components client-side, you need to setup a DOM environment.\n\t\t// If not all your files should have this environment, you can use a\n\t\t// `// @vitest-environment jsdom` comment at the top of the test files instead.\n\t\tenvironment: 'jsdom'\n\t},\n\t// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node\n\tresolve: process.env.VITEST\n\t\t? {\n\t\t\t\tconditions: ['browser']\n\t\t\t}\n\t\t: undefined\n});\n```\n\nAfter that, you can create a test file in which you import the component to test, interact with it programmatically and write expectations about the results:\n\n```js\n/// file: component.test.js\nimport { flushSync, mount, unmount } from 'svelte';\nimport { expect, test } from 'vitest';\nimport Component from './Component.svelte';\n\ntest('Component', () => {\n\t// Instantiate the component using Svelte's `mount` API\n\tconst component = mount(Component, {\n\t\ttarget: document.body, // `document` exists because of jsdom\n\t\tprops: { initial: 0 }\n\t});\n\n\texpect(document.body.innerHTML).toBe('<button>0</button>');\n\n\t// Click the button, then flush the changes so you can synchronously write expectations\n\tdocument.body.querySelector('button').click();\n\tflushSync();\n\n\texpect(document.body.innerHTML).toBe('<button>1</button>');\n\n\t// Remove the component from the DOM\n\tunmount(component);\n});\n```\n\nWhile the process is very straightforward, it is also low level and somewhat brittle, as the precise structure of your component may change frequently. Tools like [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/) can help streamline your tests. The above test could be rewritten like this:\n\n```js\n/// file: component.test.js\nimport { render, screen } from '@testing-library/svelte';\nimport userEvent from '@testing-library/user-event';\nimport { expect, test } from 'vitest';\nimport Component from './Component.svelte';\n\ntest('Component', async () => {\n\tconst user = userEvent.setup();\n\trender(Component);\n\n\tconst button = screen.getByRole('button');\n\texpect(button).toHaveTextContent(0);\n\n\tawait user.click(button);\n\texpect(button).toHaveTextContent(1);\n});\n```\n\nWhen writing component tests that involve two-way bindings, context or snippet props, it's best to create a wrapper component for your specific test and interact with that. `@testing-library/svelte` contains some [examples](https://testing-library.com/docs/svelte-testing-library/example).\n\n## Component tests with Storybook\n\n[Storybook](https://storybook.js.org) is a tool for developing and documenting UI components, and it can also be used to test your components. They're run with Vitest's browser mode, which renders your components in a real browser for the most realistic testing environment.\n\nTo get started, first install Storybook ([using Svelte's CLI](/docs/cli/storybook)) in your project via `npx sv add storybook` and choose the recommended configuration that includes testing features. If you're already using Storybook, and for more information on Storybook's testing capabilities, follow the [Storybook testing docs](https://storybook.js.org/docs/writing-tests?renderer=svelte) to get started.\n\nYou can create stories for component variations and test interactions with the [play function](https://storybook.js.org/docs/writing-tests/interaction-testing?renderer=svelte#writing-interaction-tests), which allows you to simulate behavior and make assertions using the Testing Library and Vitest APIs. Here's an example of two stories that can be tested, one that renders an empty LoginForm component and one that simulates a user filling out the form:\n\n```svelte\n/// file: LoginForm.stories.svelte\n<script module>\n\timport { defineMeta } from '@storybook/addon-svelte-csf';\n\timport { expect, fn } from 'storybook/test';\n\n\timport LoginForm from './LoginForm.svelte';\n\n\tconst { Story } = defineMeta({\n\t\tcomponent: LoginForm,\n\t\targs: {\n\t\t\t// Pass a mock function to the `onSubmit` prop\n\t\t\tonSubmit: fn(),\n\t\t}\n\t});\n</script>\n \n<Story name=\"Empty Form\" />\n \n<Story\n\tname=\"Filled Form\"\n\tplay={async ({ args, canvas, userEvent }) => {\n\t\t// Simulate a user filling out the form\n\t\tawait userEvent.type(canvas.getByTestId('email'), 'email@provider.com');\n\t\tawait userEvent.type(canvas.getByTestId('password'), 'a-random-password');\n\t\tawait userEvent.click(canvas.getByRole('button'));\n\n\t\t// Run assertions\n\t\tawait expect(args.onSubmit).toHaveBeenCalledTimes(1);\n\t\tawait expect(canvas.getByText('You’re in!')).toBeInTheDocument();\n\t}}\n/>\n```\n\n## End-to-end tests with Playwright\n\nE2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).\n\nYou can use the Svelte CLI to [setup Playwright](/docs/cli/playwright) either during project creation or later on. You can also [set it up with `npm init playwright`](https://playwright.dev/docs/intro). Additionally, you may also want to install an IDE plugin such as [the VS Code extension](https://playwright.dev/docs/getting-started-vscode) to be able to execute tests from inside your IDE.\n\nIf you've run `npm init playwright` or are not using Vite, you may need to adjust the Playwright config to tell Playwright what to do before running the tests - mainly starting your application at a certain port. For example:\n\n```js\n/// file: playwright.config.js\nconst config = {\n\twebServer: {\n\t\tcommand: 'npm run build && npm run preview',\n\t\tport: 4173\n\t},\n\ttestDir: 'tests',\n\ttestMatch: /(.+\\.)?(test|spec)\\.[jt]s/\n};\n\nexport default config;\n```\n\nYou can now start writing tests. These are totally unaware of Svelte as a framework, so you mainly interact with the DOM and write assertions.\n\n```js\n// @errors: 2307 7031\n/// file: tests/hello-world.spec.js\nimport { expect, test } from '@playwright/test';\n\ntest('home page has expected h1', async ({ page }) => {\n\tawait page.goto('/');\n\tawait expect(page.locator('h1')).toBeVisible();\n});\n```",
+		"svelte/typescript": "<!-- - [basically what we have today](https://svelte.dev/docs/typescript)\n- built-in support, but only for type-only features\n- generics\n- using `Component` and the other helper types\n- using `svelte-check` -->\n\nYou can use TypeScript within Svelte components. IDE extensions like the [Svelte VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.\n\n## `<script lang=\"ts\">`\n\nTo use TypeScript inside your Svelte components, add `lang=\"ts\"` to your `script` tags:\n\n```svelte\n<script lang=\"ts\">\n\tlet name: string = 'world';\n\n\tfunction greet(name: string) {\n\t\talert(`Hello, ${name}!`);\n\t}\n</script>\n\n<button onclick={(e: Event) => greet(e.target.innerText)}>\n\t{name as string}\n</button>\n```\n\nDoing so allows you to use TypeScript's _type-only_ features. That is, all features that just disappear when transpiling to JavaScript, such as type annotations or interface declarations. Features that require the TypeScript compiler to output actual code are not supported. This includes:\n\n- using enums\n- using `private`, `protected` or `public` modifiers in constructor functions together with initializers\n- using features that are not yet part of the ECMAScript standard (i.e. not level 4 in the TC39 process) and therefore not implemented yet within Acorn, the parser we use for parsing JavaScript\n\nIf you want to use one of these features, you need to setup up a `script` preprocessor.\n\n## Preprocessor setup\n\nTo use non-type-only TypeScript features within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.\n\n```ts\n/// file: svelte.config.js\n// @noErrors\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nconst config = {\n\t// Note the additional `{ script: true }`\n\tpreprocess: vitePreprocess({ script: true })\n};\n\nexport default config;\n```\n\n### Using SvelteKit or Vite\n\nThe easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option.\n\n```ts\n/// file: svelte.config.js\n// @noErrors\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nconst config = {\n\tpreprocess: vitePreprocess()\n};\n\nexport default config;\n```\n\nIf you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.\n\nIn both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.\n\n### Other build tools\n\nIf you're using tools like Rollup or Webpack instead, install their respective Svelte plugins. For Rollup that's [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) and for Webpack that's [svelte-loader](https://github.com/sveltejs/svelte-loader). For both, you need to install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config (see the respective READMEs for more info). If you're starting a new project, you can also use the [rollup](https://github.com/sveltejs/template) or [webpack](https://github.com/sveltejs/template-webpack) template to scaffold the setup from a script.\n\n> [!NOTE] If you're starting a new project, we recommend using SvelteKit or Vite instead\n\n## tsconfig.json settings\n\nWhen using TypeScript, make sure your `tsconfig.json` is setup correctly.\n\n- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2015` so classes are not compiled to functions\n- Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is\n- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do. \n\n## Typing `$props`\n\nType `$props` just like a regular object with certain properties.\n\n```svelte\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\n\tinterface Props {\n\t\trequiredProperty: number;\n\t\toptionalProperty?: boolean;\n\t\tsnippetWithStringArgument: Snippet<[string]>;\n\t\teventHandler: (arg: string) => void;\n\t\t[key: string]: unknown;\n\t}\n\n\tlet {\n\t\trequiredProperty,\n\t\toptionalProperty,\n\t\tsnippetWithStringArgument,\n\t\teventHandler,\n\t\t...everythingElse\n\t}: Props = $props();\n</script>\n\n<button onclick={() => eventHandler('clicked button')}>\n\t{@render snippetWithStringArgument('hello')}\n</button>\n```\n\n## Generic `$props`\n\nComponents can declare a generic relationship between their properties. One example is a generic list component that receives a list of items and a callback property that receives an item from the list. To declare that the `items` property and the `select` callback operate on the same types, add the `generics` attribute to the `script` tag:\n\n```svelte\n<script lang=\"ts\" generics=\"Item extends { text: string }\">\n\tinterface Props {\n\t\titems: Item[];\n\t\tselect(item: Item): void;\n\t}\n\n\tlet { items, select }: Props = $props();\n</script>\n\n{#each items as item}\n\t<button onclick={() => select(item)}>\n\t\t{item.text}\n\t</button>\n{/each}\n```\n\nThe content of `generics` is what you would put between the `<...>` tags of a generic function. In other words, you can use multiple generics, `extends` and fallback types.\n\n## Typing wrapper components\n\nIn case you're writing a component that wraps a native element, you may want to expose all the attributes of the underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:\n\n```svelte\n<script lang=\"ts\">\n\timport type { HTMLButtonAttributes } from 'svelte/elements';\n\n\tlet { children, ...rest }: HTMLButtonAttributes = $props();\n</script>\n\n<button {...rest}>\n\t{@render children?.()}\n</button>\n```\n\nNot all elements have a dedicated type definition. For those without one, use `SvelteHTMLElements`:\n\n```svelte\n<script lang=\"ts\">\n\timport type { SvelteHTMLElements } from 'svelte/elements';\n\n\tlet { children, ...rest }: SvelteHTMLElements['div'] = $props();\n</script>\n\n<div {...rest}>\n\t{@render children?.()}\n</div>\n```\n\n## Typing `$state`\n\nYou can type `$state` like any other variable.\n\n```ts\nlet count: number = $state(0);\n```\n\nIf you don't give `$state` an initial value, part of its types will be `undefined`.\n\n```ts\n// @noErrors\n// Error: Type 'number | undefined' is not assignable to type 'number'\nlet count: number = $state();\n```\n\nIf you know that the variable _will_ be defined before you first use it, use an `as` casting. This is especially useful in the context of classes:\n\n```ts\nclass Counter {\n\tcount = $state() as number;\n\tconstructor(initial: number) {\n\t\tthis.count = initial;\n\t}\n}\n```\n\n## The `Component` type\n\nSvelte components are of type `Component`. You can use it and its related types to express a variety of constraints.\n\nUsing it together with dynamic components to restrict what kinds of component can be passed to it:\n\n```svelte\n<script lang=\"ts\">\n\timport type { Component } from 'svelte';\n\n\tinterface Props {\n\t\t// only components that have at most the \"prop\"\n\t\t// property required can be passed\n\t\tDynamicComponent: Component<{ prop: string }>;\n\t}\n\n\tlet { DynamicComponent }: Props = $props();\n</script>\n\n<DynamicComponent prop=\"foo\" />\n```\n\n> [!LEGACY] In Svelte 4, components were of type `SvelteComponent`\n\nTo extract the properties from a component, use `ComponentProps`.\n\n```ts\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {}\n\n// Errors if the second argument is not the correct props expected\n// by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });\n```\n\nTo declare that a variable expects the constructor or instance type of a component:\n\n```svelte\n<script lang=\"ts\">\n\timport MyComponent from './MyComponent.svelte';\n\n\tlet componentConstructor: typeof MyComponent = MyComponent;\n\tlet componentInstance: MyComponent;\n</script>\n\n<MyComponent bind:this={componentInstance} />\n```\n\n## Enhancing built-in DOM types\n\nSvelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.\n\nIn case this is a custom or experimental attribute/event, you can enhance the typings by augmenting the `svelte/elements` module like this:\n\n```ts\n/// file: additional-svelte-typings.d.ts\nimport { HTMLButtonAttributes } from 'svelte/elements';\n\ndeclare module 'svelte/elements' {\n\t// add a new element\n\texport interface SvelteHTMLElements {\n\t\t'custom-button': HTMLButtonAttributes;\n\t}\n\n\t// add a new global attribute that is available on all html elements\n\texport interface HTMLAttributes<T> {\n\t\tglobalattribute?: string;\n\t}\n\n\t// add a new attribute for button elements\n\texport interface HTMLButtonAttributes {\n\t\tveryexperimentalattribute?: string;\n\t}\n}\n\nexport {}; // ensure this is not an ambient module, else types will be overridden instead of augmented\n```\n\nThen make sure that the `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `\"include\": [\"src/**/*\"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.",
+		"svelte/custom-elements": "<!-- - [basically what we have today](https://svelte.dev/docs/custom-elements-api) -->\n\nSvelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). Within the custom element you can access the host element via the [`$host`](https://svelte.dev/docs/svelte/$host) rune.\n\n```svelte\n<svelte:options customElement=\"my-element\" />\n\n<script>\n\tlet { name = 'world' } = $props();\n</script>\n\n<h1>Hello {name}!</h1>\n<slot />\n```\n\nYou can leave out the tag name for any of your inner components which you don't want to expose and use them like regular Svelte components. Consumers of the component can still name it afterwards if needed, using the static `element` property which contains the custom element constructor and which is available when the `customElement` compiler option is `true`.\n\n```js\n// @noErrors\nimport MyElement from './MyElement.svelte';\n\ncustomElements.define('my-element', MyElement.element);\n```\n\nOnce a custom element has been defined, it can be used as a regular DOM element:\n\n```js\ndocument.body.innerHTML = `\n\t<my-element>\n\t\t<p>This is some slotted content</p>\n\t</my-element>\n`;\n```\n\nAny [props](basic-markup#Component-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).\n\n```js\n// @noErrors\nconst el = document.querySelector('my-element');\n\n// get the current value of the 'name' prop\nconsole.log(el.name);\n\n// set a new value, updating the shadow DOM\nel.name = 'everybody';\n```\n\nNote that you need to list out all properties explicitly, i.e. doing `let props = $props()` without declaring `props` in the [component options](#Component-options) means that Svelte can't know which props to expose as properties on the DOM element.\n\n## Component lifecycle\n\nCustom elements are created from Svelte components using a wrapper approach. This means the inner Svelte component has no knowledge that it is a custom element. The custom element wrapper takes care of handling its lifecycle appropriately.\n\nWhen a custom element is created, the Svelte component it wraps is _not_ created right away. It is only created in the next tick after the `connectedCallback` is invoked. Properties assigned to the custom element before it is inserted into the DOM are temporarily saved and then set on component creation, so their values are not lost. The same does not work for invoking exported functions on the custom element though, they are only available after the element has mounted. If you need to invoke functions before component creation, you can work around it by using the [`extend` option](#Component-options).\n\nWhen a custom element written with Svelte is created or updated, the shadow DOM will reflect the value in the next tick, not immediately. This way updates can be batched, and DOM moves which temporarily (but synchronously) detach the element from the DOM don't lead to unmounting the inner component.\n\nThe inner Svelte component is destroyed in the next tick after the `disconnectedCallback` is invoked.\n\n## Component options\n\nWhen constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `<svelte:options>` since Svelte 4. This object may contain the following properties:\n\n- `tag: string`: an optional `tag` property for the custom element's name. If set, a custom element with this tag name will be defined with the document's `customElements` registry upon importing this component.\n- `shadow`: an optional property that can be set to `\"none\"` to forgo shadow root creation. Note that styles are then no longer encapsulated, and you can't use slots\n- `props`: an optional property to modify certain details and behaviors of your component's properties. It offers the following settings:\n  - `attribute: string`: To update a custom element's prop, you have two alternatives: either set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning `attribute: \"<desired name>\"`.\n  - `reflect: boolean`: By default, updated prop values do not reflect back to the DOM. To enable this behavior, set `reflect: true`.\n  - `type: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object'`: While converting an attribute value to a prop value and reflecting it back, the prop value is assumed to be a `String` by default. This may not always be accurate. For instance, for a number type, define it using `type: \"Number\"`\n    You don't need to list all properties, those not listed will use the default settings.\n- `extend`: an optional property which expects a function as its argument. It is passed the custom element class generated by Svelte and expects you to return a custom element class. This comes in handy if you have very specific requirements to the life cycle of the custom element or want to enhance the class to for example use [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples) for better HTML form integration.\n\n```svelte\n<svelte:options\n\tcustomElement={{\n\t\ttag: 'custom-element',\n\t\tshadow: 'none',\n\t\tprops: {\n\t\t\tname: { reflect: true, type: 'Number', attribute: 'element-index' }\n\t\t},\n\t\textend: (customElementConstructor) => {\n\t\t\t// Extend the class so we can let it participate in HTML forms\n\t\t\treturn class extends customElementConstructor {\n\t\t\t\tstatic formAssociated = true;\n\n\t\t\t\tconstructor() {\n\t\t\t\t\tsuper();\n\t\t\t\t\tthis.attachedInternals = this.attachInternals();\n\t\t\t\t}\n\n\t\t\t\t// Add the function here, not below in the component so that\n\t\t\t\t// it's always available, not just when the inner Svelte component\n\t\t\t\t// is mounted\n\t\t\t\trandomIndex() {\n\t\t\t\t\tthis.elementIndex = Math.random();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}}\n/>\n\n<script>\n\tlet { elementIndex, attachedInternals } = $props();\n\t// ...\n\tfunction check() {\n\t\tattachedInternals.checkValidity();\n\t}\n</script>\n\n...\n```\n\n> [!NOTE] While Typescript is supported in the `extend` function, it is subject to limitations: you need to set `lang=\"ts\"` on one of the scripts AND you can only use [erasable syntax](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) in it. They are not processed by script preprocessors.\n\n## Caveats and limitations\n\nCustom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:\n\n- Styles are _encapsulated_, rather than merely _scoped_ (unless you set `shadow: \"none\"`). This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier\n- Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string\n- Custom elements are not generally suitable for server-side rendering, as the shadow DOM is invisible until JavaScript loads\n- In Svelte, slotted content renders _lazily_. In the DOM, it renders _eagerly_. In other words, it will always be created even if the component's `<slot>` element is inside an `{#if ...}` block. Similarly, including a `<slot>` in an `{#each ...}` block will not cause the slotted content to be rendered multiple times\n- The deprecated `let:` directive has no effect, because custom elements do not have a way to pass data to the parent component that fills the slot\n- Polyfills are required to support older browsers\n- You can use Svelte's context feature between regular Svelte components within a custom element, but you can't use them across custom elements. In other words, you can't use `setContext` on a parent custom element and read that with `getContext` in a child custom element.\n- Don't declare properties or attributes starting with `on`, as their usage will be interpreted as an event listener. In other words, Svelte treats `<custom-element oneworld={true}></custom-element>` as `customElement.addEventListener('eworld', true)` (and not as `customElement.oneworld = true`)",
+		"svelte/v4-migration-guide": "This migration guide provides an overview of how to migrate from Svelte version 3 to 4. See the linked PRs for more details about each change. Use the migration script to migrate some of these automatically: `npx svelte-migrate@latest svelte-4`\n\nIf you're a library author, consider whether to only support Svelte 4 or if it's possible to support Svelte 3 too. Since most of the breaking changes don't affect many people, this may be easily possible. Also remember to update the version range in your `peerDependencies`.\n\n## Minimum version requirements\n\n- Upgrade to Node 16 or higher. Earlier versions are no longer supported. ([#8566](https://github.com/sveltejs/svelte/issues/8566))\n- If you are using SvelteKit, upgrade to 1.20.4 or newer ([sveltejs/kit#10172](https://github.com/sveltejs/kit/pull/10172))\n- If you are using Vite without SvelteKit, upgrade to `vite-plugin-svelte` 2.4.1 or newer ([#8516](https://github.com/sveltejs/svelte/issues/8516))\n- If you are using webpack, upgrade to webpack 5 or higher and `svelte-loader` 3.1.8 or higher. Earlier versions are no longer supported. ([#8515](https://github.com/sveltejs/svelte/issues/8515), [198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))\n- If you are using Rollup, upgrade to `rollup-plugin-svelte` 7.1.5 or higher ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))\n- If you are using TypeScript, upgrade to TypeScript 5 or higher. Lower versions might still work, but no guarantees are made about that. ([#8488](https://github.com/sveltejs/svelte/issues/8488))\n\n## Browser conditions for bundlers\n\nBundlers must now specify the `browser` condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. If you're using any others, you may observe lifecycle callbacks such as `onMount` not get called and you'll need to update the module resolution configuration.\n- For Rollup this is done within the `@rollup/plugin-node-resolve` plugin by setting `browser: true` in its options. See the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) documentation for more details\n- For webpack this is done by adding `\"browser\"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details\n\n([#8516](https://github.com/sveltejs/svelte/issues/8516))\n\n## Removal of CJS related output\n\nSvelte no longer supports the CommonJS (CJS) format for compiler output and has also removed the `svelte/register` hook and the CJS runtime version. If you need to stay on the CJS output format, consider using a bundler to convert Svelte's ESM output to CJS in a post-build step. ([#8613](https://github.com/sveltejs/svelte/issues/8613))\n\n## Stricter types for Svelte functions\n\nThere are now stricter types for `createEventDispatcher`, `Action`, `ActionReturn`, and `onMount`:\n\n- `createEventDispatcher` now supports specifying that a payload is optional, required, or non-existent, and the call sites are checked accordingly ([#7224](https://github.com/sveltejs/svelte/issues/7224))\n\n```ts\n// @errors: 2554 2345\nimport { createEventDispatcher } from 'svelte';\n\nconst dispatch = createEventDispatcher<{\n\toptional: number | null;\n\trequired: string;\n\tnoArgument: null;\n}>();\n\n// Svelte version 3:\ndispatch('optional');\ndispatch('required'); // I can still omit the detail argument\ndispatch('noArgument', 'surprise'); // I can still add a detail argument\n\n// Svelte version 4 using TypeScript strict mode:\ndispatch('optional');\ndispatch('required'); // error, missing argument\ndispatch('noArgument', 'surprise'); // error, cannot pass an argument\n```\n\n- `Action` and `ActionReturn` have a default parameter type of `undefined` now, which means you need to type the generic if you want to specify that this action receives a parameter. The migration script will migrate this automatically ([#7442](https://github.com/sveltejs/svelte/pull/7442))\n\n```ts\n// @noErrors\n---const action: Action = (node, params) => { ... } // this is now an error if you use params in any way---\n+++const action: Action<HTMLElement, string> = (node, params) => { ... } // params is of type string+++\n```\n\n- `onMount` now shows a type error if you return a function asynchronously from it, because this is likely a bug in your code where you expect the callback to be called on destroy, which it will only do for synchronously returned functions ([#8136](https://github.com/sveltejs/svelte/issues/8136))\n\n```js\n// @noErrors\n// Example where this change reveals an actual bug\nonMount(\n---\t// someCleanup() not called because function handed to onMount is async\n\tasync () => {\n\t\tconst something = await foo();---\n+++\t// someCleanup() is called because function handed to onMount is sync\n\t() => {\n\t\tfoo().then(something => {...});\n\t\t// ...\n\t\treturn () => someCleanup();\n\t}\n);\n```\n\n## Custom Elements with Svelte\n\nThe creation of custom elements with Svelte has been overhauled and significantly improved. The `tag` option is deprecated in favor of the new `customElement` option:\n\n```svelte\n---<svelte:options tag=\"my-component\" />---\n+++<svelte:options customElement=\"my-component\" />+++\n```\n\nThis change was made to allow [more configurability](custom-elements#Component-options) for advanced use cases. The migration script will adjust your code automatically. The update timing of properties has changed slightly as well. ([#8457](https://github.com/sveltejs/svelte/issues/8457))\n\n## SvelteComponentTyped is deprecated\n\n`SvelteComponentTyped` is deprecated, as `SvelteComponent` now has all its typing capabilities. Replace all instances of `SvelteComponentTyped` with `SvelteComponent`.\n\n```js\n---import { SvelteComponentTyped } from 'svelte';---\n+++import { SvelteComponent } from 'svelte';+++\n\n---export class Foo extends SvelteComponentTyped<{ aProp: string }> {}---\n+++export class Foo extends SvelteComponent<{ aProp: string }> {}+++\n```\n\nIf you have used `SvelteComponent` as the component instance type previously, you may see a somewhat opaque type error now, which is solved by changing `: typeof SvelteComponent` to `: typeof SvelteComponent<any>`.\n\n```svelte\n<script>\n\timport ComponentA from './ComponentA.svelte';\n\timport ComponentB from './ComponentB.svelte';\n\timport { SvelteComponent } from 'svelte';\n\n\tlet component: typeof SvelteComponent+++<any>+++;\n\n\tfunction choseRandomly() {\n\t\tcomponent = Math.random() > 0.5 ? ComponentA : ComponentB;\n\t}\n</script>\n\n<button on:click={choseRandomly}>random</button>\n<svelte:element this={component} />\n```\n\nThe migration script will do both automatically for you. ([#8512](https://github.com/sveltejs/svelte/issues/8512))\n\n## Transitions are local by default\n\nTransitions are now local by default to prevent confusion around page navigations. \"local\" means that a transition will not play if it's within a nested control flow block (`each/if/await/key`) and not the direct parent block but a block above it is created/destroyed. In the following example, the `slide` intro animation will only play when `success` goes from `false` to `true`, but it will _not_ play when `show` goes from `false` to `true`:\n\n```svelte\n{#if show}\n\t...\n\t{#if success}\n\t\t<p in:slide>Success</p>\n\t{/each}\n{/if}\n```\n\nTo make transitions global, add the `|global` modifier - then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))\n\n## Default slot bindings\n\nDefault slot bindings are no longer exposed to named slots and vice versa:\n\n```svelte\n<script>\n\timport Nested from './Nested.svelte';\n</script>\n\n<Nested let:count>\n\t<p>\n\t\tcount in default slot - is available: {count}\n\t</p>\n\t<p slot=\"bar\">\n\t\tcount in bar slot - is not available: {count}\n\t</p>\n</Nested>\n```\n\nThis makes slot bindings more consistent as the behavior is undefined when for example the default slot is from a list and the named slot is not. ([#6049](https://github.com/sveltejs/svelte/issues/6049))\n\n## Preprocessors\n\nThe order in which preprocessors are applied has changed. Now, preprocessors are executed in order, and within one group, the order is markup, script, style.\n\n```js\n// @errors: 2304\nimport { preprocess } from 'svelte/compiler';\n\nconst { code } = await preprocess(\n\tsource,\n\t[\n\t\t{\n\t\t\tmarkup: () => {\n\t\t\t\tconsole.log('markup-1');\n\t\t\t},\n\t\t\tscript: () => {\n\t\t\t\tconsole.log('script-1');\n\t\t\t},\n\t\t\tstyle: () => {\n\t\t\t\tconsole.log('style-1');\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tmarkup: () => {\n\t\t\t\tconsole.log('markup-2');\n\t\t\t},\n\t\t\tscript: () => {\n\t\t\t\tconsole.log('script-2');\n\t\t\t},\n\t\t\tstyle: () => {\n\t\t\t\tconsole.log('style-2');\n\t\t\t}\n\t\t}\n\t],\n\t{\n\t\tfilename: 'App.svelte'\n\t}\n);\n\n// Svelte 3 logs:\n// markup-1\n// markup-2\n// script-1\n// script-2\n// style-1\n// style-2\n\n// Svelte 4 logs:\n// markup-1\n// script-1\n// style-1\n// markup-2\n// script-2\n// style-2\n```\n\nThis could affect you for example if you are using `MDsveX` - in which case you should make sure it comes before any script or style preprocessor.\n\n```js\n// @noErrors\npreprocess: [\n---\tvitePreprocess(),\n\tmdsvex(mdsvexConfig)---\n+++\tmdsvex(mdsvexConfig),\n\tvitePreprocess()+++\n]\n```\n\nEach preprocessor must also have a name. ([#8618](https://github.com/sveltejs/svelte/issues/8618))\n\n## New eslint package\n\n`eslint-plugin-svelte3` is deprecated. It may still work with Svelte 4 but we make no guarantees about that. We recommend switching to our new package [eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte). See [this Github post](https://github.com/sveltejs/kit/issues/10242#issuecomment-1610798405) for an instruction how to migrate. Alternatively, you can create a new project using `npm create svelte@latest`, select the eslint (and possibly TypeScript) option and then copy over the related files into your existing project.\n\n## Other breaking changes\n\n- the `inert` attribute is now applied to outroing elements to make them invisible to assistive technology and prevent interaction. ([#8628](https://github.com/sveltejs/svelte/pull/8628))\n- the runtime now uses `classList.toggle(name, boolean)` which may not work in very old browsers. Consider using a [polyfill](https://github.com/eligrey/classList.js) if you need to support these browsers. ([#8629](https://github.com/sveltejs/svelte/issues/8629))\n- the runtime now uses the `CustomEvent` constructor which may not work in very old browsers. Consider using a [polyfill](https://github.com/theftprevention/event-constructor-polyfill/tree/master) if you need to support these browsers. ([#8775](https://github.com/sveltejs/svelte/pull/8775))\n- people implementing their own stores from scratch using the `StartStopNotifier` interface (which is passed to the create function of `writable` etc) from `svelte/store` now need to pass an update function in addition to the set function. This has no effect on people using stores or creating stores using the existing Svelte stores. ([#6750](https://github.com/sveltejs/svelte/issues/6750))\n- `derived` will now throw an error on falsy values instead of stores passed to it. ([#7947](https://github.com/sveltejs/svelte/issues/7947))\n- type definitions for `svelte/internal` were removed to further discourage usage of those internal methods which are not public API. Most of these will likely change for Svelte 5\n- Removal of DOM nodes is now batched which slightly changes its order, which might affect the order of events fired if you're using a `MutationObserver` on these elements ([#8763](https://github.com/sveltejs/svelte/pull/8763))\n- if you enhanced the global typings through the `svelte.JSX` namespace before, you need to migrate this to use the `svelteHTML` namespace. Similarly if you used the `svelte.JSX` namespace to use type definitions from it, you need to migrate those to use the types from `svelte/elements` instead. You can find more information about what to do [here](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings)",
+		"svelte/v5-migration-guide": "Version 5 comes with an overhauled syntax and reactivity system. While it may look different at first, you'll soon notice many similarities. This guide goes over the changes in detail and shows you how to upgrade. Along with it, we also provide information on _why_ we did these changes.\n\nYou don't have to migrate to the new syntax right away - Svelte 5 still supports the old Svelte 4 syntax, and you can mix and match components using the new syntax with components using the old and vice versa. We expect many people to be able to upgrade with only a few lines of code changed initially. There's also a [migration script](#Migration-script) that helps you with many of these steps automatically.\n\n## Reactivity syntax changes\n\nAt the heart of Svelte 5 is the new runes API. Runes are basically compiler instructions that inform Svelte about reactivity. Syntactically, runes are functions starting with a dollar-sign.\n\n### let → $state\n\nIn Svelte 4, a `let` declaration at the top level of a component was implicitly reactive. In Svelte 5, things are more explicit: a variable is reactive when created using the `$state` rune. Let's migrate the counter to runes mode by wrapping the counter in `$state`:\n\n```svelte\n<script>\n\tlet count = +++$state(0)+++;\n</script>\n```\n\nNothing else changes. `count` is still the number itself, and you read and write directly to it, without a wrapper like `.value` or `getCount()`.\n\n> [!DETAILS] Why we did this\n> `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained - a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API outside the top level of components. Head to [the tutorial](/tutorial) to learn more.\n\n### $: → $derived/$effect\n\nIn Svelte 4, a `$:` statement at the top level of a component could be used to declare a derivation, i.e. state that is entirely defined through a computation of other state. In Svelte 5, this is achieved using the `$derived` rune:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\t---$:--- +++const+++ double = +++$derived(count * 2)+++;\n</script>\n```\n\nAs with `$state`, nothing else changes. `double` is still the number itself, and you read it directly, without a wrapper like `.value` or `getDouble()`.\n\nA `$:` statement could also be used to create side effects. In Svelte 5, this is achieved using the `$effect` rune:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\n\t---$:---+++$effect(() =>+++ {\n\t\tif (count > 5) {\n\t\t\talert('Count is too high!');\n\t\t}\n\t}+++);+++\n</script>\n```\n\nNote that [when `$effect` runs is different]($effect#Understanding-dependencies) than when `$:` runs.\n\n> [!DETAILS] Why we did this\n> `$:` was a great shorthand and easy to get started with: you could slap a `$:` in front of most code and it would somehow work. This intuitiveness was also its drawback the more complicated your code became, because it wasn't as easy to reason about. Was the intent of the code to create a derivation, or a side effect? With `$derived` and `$effect`, you have a bit more up-front decision making to do (spoiler alert: 90% of the time you want `$derived`), but future-you and other developers on your team will have an easier time.\n>\n> There were also gotchas that were hard to spot:\n>\n> - `$:` only updated directly before rendering, which meant you could read stale values in-between rerenders\n> - `$:` only ran once per tick, which meant that statements may run less often than you think\n> - `$:` dependencies were determined through static analysis of the dependencies. This worked in most cases, but could break in subtle ways during a refactoring where dependencies would be for example moved into a function and no longer be visible as a result\n> - `$:` statements were also ordered by using static analysis of the dependencies. In some cases there could be ties and the ordering would be wrong as a result, needing manual interventions. Ordering could also break while refactoring code and some dependencies no longer being visible as a result.\n>\n> Lastly, it wasn't TypeScript-friendly (our editor tooling had to jump through some hoops to make it valid for TypeScript), which was a blocker for making Svelte's reactivity model truly universal.\n>\n> `$derived` and `$effect` fix all of these by\n>\n> - always returning the latest value\n> - running as often as needed to be stable\n> - determining the dependencies at runtime, and therefore being immune to refactorings\n> - executing dependencies as needed and therefore being immune to ordering problems\n> - being TypeScript-friendly\n\n### export let → $props\n\nIn Svelte 4, properties of a component were declared using `export let`. Each property was one declaration. In Svelte 5, all properties are declared through the `$props` rune, through destructuring:\n\n```svelte\n<script>\n\t---export let optional = 'unset';---\n\t---export let required;---\n\t+++let { optional = 'unset', required } = $props();+++\n</script>\n```\n\nThere are multiple cases where declaring properties becomes less straightforward than having a few `export let` declarations:\n\n- you want to rename the property, for example because the name is a reserved identifier (e.g. `class`)\n- you don't know which other properties to expect in advance\n- you want to forward every property to another component\n\nAll these cases need special syntax in Svelte 4:\n\n- renaming: `export { klass as class}`\n- other properties: `$$restProps`\n- all properties `$$props`\n\nIn Svelte 5, the `$props` rune makes this straightforward without any additional Svelte-specific syntax:\n\n- renaming: use property renaming `let { class: klass } = $props();`\n- other properties: use spreading `let { foo, bar, ...rest } = $props();`\n- all properties: don't destructure `let props = $props();`\n\n```svelte\n<script>\n\t---let klass = '';---\n\t---export { klass as class};---\n\t+++let { class: klass, ...rest } = $props();+++\n</script>\n<button class={klass} {...---$$restProps---+++rest+++}>click me</button>\n```\n\n> [!DETAILS] Why we did this\n> `export let` was one of the more controversial API decisions, and there was a lot of debate about whether you should think about a property being `export`ed or `import`ed. `$props` doesn't have this trait. It's also in line with the other runes, and the general thinking reduces to \"everything special to reactivity in Svelte is a rune\".\n>\n> There were also a lot of limitations around `export let`, which required additional API, as shown above. `$props` unite this in one syntactical concept that leans heavily on regular JavaScript destructuring syntax.\n\n## Event changes\n\nEvent handlers have been given a facelift in Svelte 5. Whereas in Svelte 4 we use the `on:` directive to attach an event listener to an element, in Svelte 5 they are properties like any other (in other words - remove the colon):\n\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n\n<button on---:---click={() => count++}>\n\tclicks: {count}\n</button>\n```\n\nSince they're just properties, you can use the normal shorthand syntax...\n\n```svelte\n<script>\n\tlet count = $state(0);\n\n\tfunction onclick() {\n\t\tcount++;\n\t}\n</script>\n\n<button {onclick}>\n\tclicks: {count}\n</button>\n```\n\n...though when using a named event handler function it's usually better to use a more descriptive name.\n\n### Component events\n\nIn Svelte 4, components could emit events by creating a dispatcher with `createEventDispatcher`.\n\nThis function is deprecated in Svelte 5. Instead, components should accept _callback props_ - which means you then pass functions as properties to these components:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Pump from './Pump.svelte';\n\n\tlet size = $state(15);\n\tlet burst = $state(false);\n\n\tfunction reset() {\n\t\tsize = 15;\n\t\tburst = false;\n\t}\n</script>\n\n<Pump\n\t---on:---inflate={(power) => {\n\t\tsize += power---.detail---;\n\t\tif (size > 75) burst = true;\n\t}}\n\t---on:---deflate={(power) => {\n\t\tif (size > 0) size -= power---.detail---;\n\t}}\n/>\n\n{#if burst}\n\t<button onclick={reset}>new balloon</button>\n\t<span class=\"boom\">💥</span>\n{:else}\n\t<span class=\"balloon\" style=\"scale: {0.01 * size}\">\n\t\t🎈\n\t</span>\n{/if}\n```\n\n```svelte\n<!--- file: Pump.svelte --->\n<script>\n\t---import { createEventDispatcher } from 'svelte';---\n\t---const dispatch = createEventDispatcher();---\n\n\t+++let { inflate, deflate } = $props();+++\n\tlet power = $state(5);\n</script>\n\n<button onclick={() => ---dispatch('inflate', power)---+++inflate(power)+++}>\n\tinflate\n</button>\n<button onclick={() => ---dispatch('deflate', power)---+++deflate(power)+++}>\n\tdeflate\n</button>\n<button onclick={() => power--}>-</button>\nPump power: {power}\n<button onclick={() => power++}>+</button>\n```\n\n### Bubbling events\n\nInstead of doing `<button on:click>` to 'forward' the event from the element to the component, the component should accept an `onclick` callback prop:\n\n```svelte\n<script>\n\t+++let { onclick } = $props();+++\n</script>\n\n<button ---on:click--- +++{onclick}+++>\n\tclick me\n</button>\n```\n\nNote that this also means you can 'spread' event handlers onto the element along with other props instead of tediously forwarding each event separately:\n\n```svelte\n<script>\n\tlet props = $props();\n</script>\n\n<button ---{...$$props} on:click on:keydown on:all_the_other_stuff--- +++{...props}+++>\n\tclick me\n</button>\n```\n\n### Event modifiers\n\nIn Svelte 4, you can add event modifiers to handlers:\n\n```svelte\n<button on:click|once|preventDefault={handler}>...</button>\n```\n\nModifiers are specific to `on:` and so do not work with modern event handlers. Adding things like `event.preventDefault()` inside the handler itself is preferable, since all the logic lives in one place rather than being split between handler and modifiers.\n\nSince event handlers are just functions, you can create your own wrappers as necessary:\n\n```svelte\n<script>\n\tfunction once(fn) {\n\t\treturn function (event) {\n\t\t\tif (fn) fn.call(this, event);\n\t\t\tfn = null;\n\t\t};\n\t}\n\n\tfunction preventDefault(fn) {\n\t\treturn function (event) {\n\t\t\tevent.preventDefault();\n\t\t\tfn.call(this, event);\n\t\t};\n\t}\n</script>\n\n<button onclick={once(preventDefault(handler))}>...</button>\n```\n\nThere are three modifiers — `capture`, `passive` and `nonpassive` — that can't be expressed as wrapper functions, since they need to be applied when the event handler is bound rather than when it runs.\n\nFor `capture`, we add the modifier to the event name:\n\n```svelte\n<button onclickcapture={...}>...</button>\n```\n\nChanging the [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) option of an event handler, meanwhile, is not something to be done lightly. If you have a use case for it — and you probably don't! — then you will need to use an action to apply the event handler yourself.\n\n### Multiple event handlers\n\nIn Svelte 4, this is possible:\n\n```svelte\n<button on:click={one} on:click={two}>...</button>\n```\n\nDuplicate attributes/properties on elements — which now includes event handlers — are not allowed. Instead, do this:\n\n```svelte\n<button\n\tonclick={(e) => {\n\t\tone(e);\n\t\ttwo(e);\n\t}}\n>\n\t...\n</button>\n```\n\nWhen spreading props, local event handlers must go _after_ the spread, or they risk being overwritten:\n\n```svelte\n<button\n\t{...props}\n\tonclick={(e) => {\n\t\tdoStuff(e);\n\t\tprops.onclick?.(e);\n\t}}\n>\n\t...\n</button>\n```\n\n> [!DETAILS] Why we did this\n> `createEventDispatcher` was always a bit boilerplate-y:\n>\n> - import the function\n> - call the function to get a dispatch function\n> - call said dispatch function with a string and possibly a payload\n> - retrieve said payload on the other end through a `.detail` property, because the event itself was always a `CustomEvent`\n>\n> It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do.\n>\n> The removal of event modifiers is arguably one of the changes that seems like a step back for those who've liked the shorthand syntax of event modifiers. Given that they are not used that frequently, we traded a smaller surface area for more explicitness. Modifiers also were inconsistent, because most of them were only useable on DOM elements.\n>\n> Multiple listeners for the same event are also no longer possible, but it was something of an anti-pattern anyway, since it impedes readability: if there are many attributes, it becomes harder to spot that there are two handlers unless they are right next to each other. It also implies that the two handlers are independent, when in fact something like `event.stopImmediatePropagation()` inside `one` would prevent `two` from being called.\n>\n> By deprecating `createEventDispatcher` and the `on:` directive in favour of callback props and normal element properties, we:\n>\n> - reduce Svelte's learning curve\n> - remove boilerplate, particularly around `createEventDispatcher`\n> - remove the overhead of creating `CustomEvent` objects for events that may not even have listeners\n> - add the ability to spread event handlers\n> - add the ability to know which event handlers were provided to a component\n> - add the ability to express whether a given event handler is required or optional\n> - increase type safety (previously, it was effectively impossible for Svelte to guarantee that a component didn't emit a particular event)\n\n## Snippets instead of slots\n\nIn Svelte 4, content can be passed to components using slots. Svelte 5 replaces them with snippets, which are more powerful and flexible, and so slots are deprecated in Svelte 5.\n\nThey continue to work, however, and you can pass snippets to a component that uses slots:\n\n```svelte\n<!--- file: Child.svelte --->\n<slot />\n<hr />\n<slot name=\"foo\" message=\"hello\" />\n```\n\n```svelte\n<!--- file: Parent.svelte --->\n<script>\n\timport Child from './Child.svelte';\n</script>\n\n<Child>\n\tdefault child content\n\n\t{#snippet foo({ message })}\n\t\tmessage from child: {message}\n\t{/snippet}\n</Child>\n```\n\n(The reverse is not true — you cannot pass slotted content to a component that uses [`{@render ...}`](/docs/svelte/@render) tags.)\n\nWhen using custom elements, you should still use `<slot />` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it.\n\n### Default content\n\nIn Svelte 4, the easiest way to pass a piece of UI to the child was using a `<slot />`. In Svelte 5, this is done using the `children` prop instead, which is then shown with `{@render children()}`:\n\n```svelte\n<script>\n\t+++let { children } = $props();+++\n</script>\n\n---<slot />---\n+++{@render children?.()}+++\n```\n\n### Multiple content placeholders\n\nIf you wanted multiple UI placeholders, you had to use named slots. In Svelte 5, use props instead, name them however you like and `{@render ...}` them:\n\n```svelte\n<script>\n\t+++let { header, main, footer } = $props();+++\n</script>\n\n<header>\n\t---<slot name=\"header\" />---\n\t+++{@render header()}+++\n</header>\n\n<main>\n\t---<slot name=\"main\" />---\n\t+++{@render main()}+++\n</main>\n\n<footer>\n\t---<slot name=\"footer\" />---\n\t+++{@render footer()}+++\n</footer>\n```\n\n### Passing data back up\n\nIn Svelte 4, you would pass data to a `<slot />` and then retrieve it with `let:` in the parent component. In Svelte 5, snippets take on that responsibility:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport List from './List.svelte';\n</script>\n\n<List items={['one', 'two', 'three']} ---let:item--->\n\t+++{#snippet item(text)}+++\n\t\t<span>{text}</span>\n\t+++{/snippet}+++\n\t---<span slot=\"empty\">No items yet</span>---\n\t+++{#snippet empty()}\n\t\t<span>No items yet</span>\n\t{/snippet}+++\n</List>\n```\n\n```svelte\n<!--- file: List.svelte --->\n<script>\n\tlet { items, +++item, empty+++ } = $props();\n</script>\n\n{#if items.length}\n\t<ul>\n\t\t{#each items as entry}\n\t\t\t<li>\n\t\t\t\t---<slot item={entry} />---\n\t\t\t\t+++{@render item(entry)}+++\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n{:else}\n\t---<slot name=\"empty\" />---\n\t+++{@render empty?.()}+++\n{/if}\n```\n\n> [!DETAILS] Why we did this\n> Slots were easy to get started with, but the more advanced the use case became, the more involved and confusing the syntax became:\n>\n> - the `let:` syntax was confusing to many people as it _creates_ a variable whereas all other `:` directives _receive_ a variable\n> - the scope of a variable declared with `let:` wasn't clear. In the example above, it may look like you can use the `item` slot prop in the `empty` slot, but that's not true\n> - named slots had to be applied to an element using the `slot` attribute. Sometimes you didn't want to create an element, so we had to add the `<svelte:fragment>` API\n> - named slots could also be applied to a component, which changed the semantics of where `let:` directives are available (even today us maintainers often don't know which way around it works)\n>\n> Snippets solve all of these problems by being much more readable and clear. At the same time they're more powerful as they allow you to define sections of UI that you can render _anywhere_, not just passing them as props to a component.\n\n## Migration script\n\nBy now you should have a pretty good understanding of the before/after and how the old syntax relates to the new syntax. It probably also became clear that a lot of these migrations are rather technical and repetitive - something you don't want to do by hand.\n\nWe thought the same, which is why we provide a migration script to do most of the migration automatically. You can upgrade your project by using `npx sv migrate svelte-5`. This will do the following things:\n\n- bump core dependencies in your `package.json`\n- migrate to runes (`let` → `$state` etc)\n- migrate to event attributes for DOM elements (`on:click` → `onclick`)\n- migrate slot creations to render tags (`<slot />` → `{@render children()}`)\n- migrate slot usages to snippets (`<div slot=\"x\">...</div>` → `{#snippet x()}<div>...</div>{/snippet}`)\n- migrate obvious component creations (`new Component(...)` → `mount(Component, ...)`)\n\nYou can also migrate a single component in VS Code through the `Migrate Component to Svelte 5 Syntax` command, or in our Playground through the `Migrate` button.\n\nNot everything can be migrated automatically, and some migrations need manual cleanup afterwards. The following sections describe these in more detail.\n\n### run\n\nYou may see that the migration script converts some of your `$:` statements to a `run` function which is imported from `svelte/legacy`. This happens if the migration script couldn't reliably migrate the statement to a `$derived` and concluded this is a side effect instead. In some cases this may be wrong and it's best to change this to use a `$derived` instead. In other cases it may be right, but since `$:` statements also ran on the server but `$effect` does not, it isn't safe to transform it as such. Instead, `run` is used as a stopgap solution. `run` mimics most of the characteristics of `$:`, in that it runs on the server once, and runs as `$effect.pre` on the client (`$effect.pre` runs _before_ changes are applied to the DOM; most likely you want to use `$effect` instead).\n\n```svelte\n<script>\n\t---import { run } from 'svelte/legacy';---\n\t---run(() => {---\n\t+++$effect(() => {+++\n\t\t// some side effect code\n\t})\n</script>\n```\n\n### Event modifiers\n\nEvent modifiers are not applicable to event attributes (e.g. you can't do `onclick|preventDefault={...}`). Therefore, when migrating event directives to event attributes, we need a function-replacement for these modifiers. These are imported from `svelte/legacy`, and should be migrated away from in favor of e.g. just using `event.preventDefault()`.\n\n```svelte\n<script>\n\t---import { preventDefault } from 'svelte/legacy';---\n</script>\n\n<button\n\tonclick={---preventDefault---((event) => {\n\t\t+++event.preventDefault();+++\n\t\t// ...\n\t})}\n>\n\tclick me\n</button>\n```\n\n### Things that are not automigrated\n\nThe migration script does not convert `createEventDispatcher`. You need to adjust those parts manually. It doesn't do it because it's too risky because it could result in breakage for users of the component, which the migration script cannot find out.\n\nThe migration script does not convert `beforeUpdate/afterUpdate`. It doesn't do it because it's impossible to determine the actual intent of the code. As a rule of thumb you can often go with a combination of `$effect.pre` (runs at the same time as `beforeUpdate` did) and `tick` (imported from `svelte`, allows you to wait until changes are applied to the DOM and then do some work).\n\n## Components are no longer classes\n\nIn Svelte 3 and 4, components are classes. In Svelte 5 they are functions and should be instantiated differently. If you need to manually instantiate components, you should use `mount` or `hydrate` (imported from `svelte`) instead. If you see this error using SvelteKit, try updating to the latest version of SvelteKit first, which adds support for Svelte 5. If you're using Svelte without SvelteKit, you'll likely have a `main.js` file (or similar) which you need to adjust:\n\n```js\n+++import { mount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\") });---\n+++const app = mount(App, { target: document.getElementById(\"app\") });+++\n\nexport default app;\n```\n\n`mount` and `hydrate` have the exact same API. The difference is that `hydrate` will pick up the Svelte's server-rendered HTML inside its target and hydrate it. Both return an object with the exports of the component and potentially property accessors (if compiled with `accessors: true`). They do not come with the `$on`, `$set` and `$destroy` methods you may know from the class component API. These are its replacements:\n\nFor `$on`, instead of listening to events, pass them via the `events` property on the options argument.\n\n```js\n+++import { mount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\") });\napp.$on('event', callback);---\n+++const app = mount(App, { target: document.getElementById(\"app\"), events: { event: callback } });+++\n```\n\n> [!NOTE] Note that using `events` is discouraged — instead, [use callbacks](#Event-changes)\n\nFor `$set`, use `$state` instead to create a reactive property object and manipulate it. If you're doing this inside a `.js` or `.ts` file, adjust the ending to include `.svelte`, i.e. `.svelte.js` or `.svelte.ts`.\n\n```js\n+++import { mount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\"), props: { foo: 'bar' } });\napp.$set({ foo: 'baz' });---\n+++const props = $state({ foo: 'bar' });\nconst app = mount(App, { target: document.getElementById(\"app\"), props });\nprops.foo = 'baz';+++\n```\n\nFor `$destroy`, use `unmount` instead.\n\n```js\n+++import { mount, unmount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\"), props: { foo: 'bar' } });\napp.$destroy();---\n+++const app = mount(App, { target: document.getElementById(\"app\") });\nunmount(app);+++\n```\n\nAs a stop-gap-solution, you can also use `createClassComponent` or `asClassComponent` (imported from `svelte/legacy`) instead to keep the same API known from Svelte 4 after instantiating.\n\n```js\n+++import { createClassComponent } from 'svelte/legacy';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\") });---\n+++const app = createClassComponent({ component: App, target: document.getElementById(\"app\") });+++\n\nexport default app;\n```\n\nIf this component is not under your control, you can use the `compatibility.componentApi` compiler option for auto-applied backwards compatibility, which means code using `new Component(...)` keeps working without adjustments (note that this adds a bit of overhead to each component). This will also add `$set` and `$on` methods for all component instances you get through `bind:this`.\n\n```js\n/// svelte.config.js\nexport default {\n\tcompilerOptions: {\n\t\tcompatibility: {\n\t\t\tcomponentApi: 4\n\t\t}\n\t}\n};\n```\n\nNote that `mount` and `hydrate` are _not_ synchronous, so things like `onMount` won't have been called by the time the function returns and the pending block of promises will not have been rendered yet (because `#await` waits a microtask to wait for a potentially immediately-resolved promise). If you need that guarantee, call `flushSync` (import from `'svelte'`) after calling `mount/hydrate`.\n\n### Server API changes\n\nSimilarly, components no longer have a `render` method when compiled for server-side rendering. Instead, pass the function to `render` from `svelte/server`:\n\n```js\n+++import { render } from 'svelte/server';+++\nimport App from './App.svelte';\n\n---const { html, head } = App.render({ props: { message: 'hello' }});---\n+++const { html, head } = render(App, { props: { message: 'hello' }});+++\n```\n\nIn Svelte 4, rendering a component to a string also returned the CSS of all components. In Svelte 5, this is no longer the case by default because most of the time you're using a tooling chain that takes care of it in other ways (like SvelteKit). If you need CSS to be returned from `render`, you can set the `css` compiler option to `'injected'` and it will add `<style>` elements to the `head`.\n\n### Component typing changes\n\nThe change from classes towards functions is also reflected in the typings: `SvelteComponent`, the base class from Svelte 4, is deprecated in favour of the new `Component` type which defines the function shape of a Svelte component. To manually define a component shape in a `d.ts` file:\n\n```ts\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{\n\tfoo: string;\n}>;\n```\n\nTo declare that a component of a certain type is required:\n\n```js\nimport { ComponentA, ComponentB } from 'component-library';\n---import type { SvelteComponent } from 'svelte';---\n+++import type { Component } from 'svelte';+++\n\n---let C: typeof SvelteComponent<{ foo: string }> = $state(---\n+++let C: Component<{ foo: string }> = $state(+++\n\tMath.random() ? ComponentA : ComponentB\n);\n```\n\nThe two utility types `ComponentEvents` and `ComponentType` are also deprecated. `ComponentEvents` is obsolete because events are defined as callback props now, and `ComponentType` is obsolete because the new `Component` type is the component type already (i.e. `ComponentType<SvelteComponent<{ prop: string }>>` is equivalent to `Component<{ prop: string }>`).\n\n### bind:this changes\n\nBecause components are no longer classes, using `bind:this` no longer returns a class instance with `$set`, `$on` and `$destroy` methods on it. It only returns the instance exports (`export function/const`) and, if you're using the `accessors` option, a getter/setter-pair for each property.\n\n## `<svelte:component>` is no longer necessary\n\nIn Svelte 4, components are _static_ — if you render `<Thing>`, and the value of `Thing` changes, [nothing happens](/playground/7f1fa24f0ab44c1089dcbb03568f8dfa?version=4.2.18). To make it dynamic you had to use `<svelte:component>`.\n\nThis is no longer true in Svelte 5:\n\n```svelte\n<script>\n\timport A from './A.svelte';\n\timport B from './B.svelte';\n\n\tlet Thing = $state();\n</script>\n\n<select bind:value={Thing}>\n\t<option value={A}>A</option>\n\t<option value={B}>B</option>\n</select>\n\n<!-- these are equivalent -->\n<Thing />\n<svelte:component this={Thing} />\n```\nWhile migrating, keep in mind that your component's name should be capitalized (`Thing`) to distinguish it from elements, unless using dot notation.\n\n### Dot notation indicates a component\n\nIn Svelte 4, `<foo.bar>` would create an element with a tag name of `\"foo.bar\"`. In Svelte 5, `foo.bar` is treated as a component instead. This is particularly useful inside `each` blocks:\n\n```svelte\n{#each items as item}\n\t<item.component {...item.props} />\n{/each}\n```\n\n## Whitespace handling changed\n\nPreviously, Svelte employed a very complicated algorithm to determine if whitespace should be kept or not. Svelte 5 simplifies this which makes it easier to reason about as a developer. The rules are:\n\n- Whitespace between nodes is collapsed to one whitespace\n- Whitespace at the start and end of a tag is removed completely\n- Certain exceptions apply such as keeping whitespace inside `pre` tags\n\nAs before, you can disable whitespace trimming by setting the `preserveWhitespace` option in your compiler settings or on a per-component basis in `<svelte:options>`.\n\n## Modern browser required\n\nSvelte 5 requires a modern browser (in other words, not Internet Explorer) for various reasons:\n\n- it uses [`Proxies`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\n- elements with `clientWidth`/`clientHeight`/`offsetWidth`/`offsetHeight` bindings use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) rather than a convoluted `<iframe>` hack\n- `<input type=\"range\" bind:value={...} />` only uses an `input` event listener, rather than also listening for `change` events as a fallback\n\nThe `legacy` compiler option, which generated bulkier but IE-friendly code, no longer exists.\n\n## Changes to compiler options\n\n- The `false`/`true` (already deprecated previously) and the `\"none\"` values were removed as valid values from the `css` option\n- The `legacy` option was repurposed\n- The `hydratable` option has been removed. Svelte components are always hydratable now\n- The `enableSourcemap` option has been removed. Source maps are always generated now, tooling can choose to ignore it\n- The `tag` option was removed. Use `<svelte:options customElement=\"tag-name\" />` inside the component instead\n- The `loopGuardTimeout`, `format`, `sveltePath`, `errorMode` and `varsReport` options were removed\n\n## The `children` prop is reserved\n\nContent inside component tags becomes a snippet prop called `children`. You cannot have a separate prop by that name.\n\n## Breaking changes in runes mode\n\nSome breaking changes only apply once your component is in runes mode.\n\n### Bindings to component exports are not allowed\n\nExports from runes mode components cannot be bound to directly. For example, having `export const foo = ...` in component `A` and then doing `<A bind:foo />` causes an error. Use `bind:this` instead — `<A bind:this={a} />` — and access the export as `a.foo`. This change makes things easier to reason about, as it enforces a clear separation between props and exports.\n\n### Bindings need to be explicitly defined using `$bindable()`\n\nIn Svelte 4 syntax, every property (declared via `export let`) is bindable, meaning you can `bind:` to it. In runes mode, properties are not bindable by default: you need to denote bindable props with the `$bindable` rune.\n\nIf a bindable property has a default value (e.g. `let { foo = $bindable('bar') } = $props();`), you need to pass a non-`undefined` value to that property if you're binding to it. This prevents ambiguous behavior — the parent and child must have the same value — and results in better performance (in Svelte 4, the default value was reflected back to the parent, resulting in wasteful additional render cycles).\n\n### `accessors` option is ignored\n\nSetting the `accessors` option to `true` makes properties of a component directly accessible on the component instance.\n\n```svelte\n<svelte:options accessors={true} />\n\n<script>\n\t// available via componentInstance.name\n\texport let name;\n</script>\n```\n\nIn runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.\n\n```svelte\n<script>\n\tlet { name } = $props();\n\t// available via componentInstance.getName()\n\texport const getName = () => name;\n</script>\n```\n\nAlternatively, if the place where they are instantiated is under your control, you can also make use of runes inside `.js/.ts` files by adjusting their ending to include `.svelte`, i.e. `.svelte.js` or `.svelte.ts`, and then use `$state`:\n\n```js\n+++import { mount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\"), props: { foo: 'bar' } });\napp.foo = 'baz'---\n+++const props = $state({ foo: 'bar' });\nconst app = mount(App, { target: document.getElementById(\"app\"), props });\nprops.foo = 'baz';+++\n```\n\n### `immutable` option is ignored\n\nSetting the `immutable` option has no effect in runes mode. This concept is replaced by how `$state` and its variations work.\n\n### Classes are no longer \"auto-reactive\"\n\nIn Svelte 4, doing the following triggered reactivity:\n\n```svelte\n<script>\n\tlet foo = new Foo();\n</script>\n\n<button on:click={() => (foo.value = 1)}>{foo.value}</button\n>\n```\n\nThis is because the Svelte compiler treated the assignment to `foo.value` as an instruction to update anything that referenced `foo`. In Svelte 5, reactivity is determined at runtime rather than compile time, so you should define `value` as a reactive `$state` field on the `Foo` class. Wrapping `new Foo()` with `$state(...)` will have no effect — only vanilla objects and arrays are made deeply reactive.\n\n### Touch and wheel events are passive\n\nWhen using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.\n\nIn the very rare cases that you need to prevent these event defaults, you should use [`on`](/docs/svelte/svelte-events#on) instead (for example inside an action).\n\n### Attribute/prop syntax is stricter\n\nIn Svelte 4, complex attribute values needn't be quoted:\n\n<!-- prettier-ignore -->\n```svelte\n<Component prop=this{is}valid />\n```\n\nThis is a footgun. In runes mode, if you want to concatenate stuff you must wrap the value in quotes:\n\n```svelte\n<Component prop=\"this{is}valid\" />\n```\n\nNote that Svelte 5 will also warn if you have a single expression wrapped in quotes, like `answer=\"{42}\"` — in Svelte 6, that will cause the value to be converted to a string, rather than passed as a number.\n\n### HTML structure is stricter\n\nIn Svelte 4, you were allowed to write HTML code that would be repaired by the browser when server-side rendering it. For example you could write this...\n\n```svelte\n<table>\n\t<tr>\n\t\t<td>hi</td>\n\t</tr>\n</table>\n```\n\n... and the browser would auto-insert a `<tbody>` element:\n\n```svelte\n<table>\n\t<tbody>\n\t\t<tr>\n\t\t\t<td>hi</td>\n\t\t</tr>\n\t</tbody>\n</table>\n```\n\nSvelte 5 is more strict about the HTML structure and will throw a compiler error in cases where the browser would repair the DOM.\n\n## Other breaking changes\n\n### Stricter `@const` assignment validation\n\nAssignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.\n\n### :is(...), :has(...), and :where(...) are scoped\n\nPreviously, Svelte did not analyse selectors inside `:is(...)`, `:has(...)`, and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. Some selectors may now therefore be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:has(...)/:where(...)` selectors.\n\nWhen using Tailwind's `@apply` directive, add a `:global` selector to preserve rules that use Tailwind-generated `:is(...)` selectors:\n\n<!-- prettier-ignore -->\n```css\nmain +++:global+++ {\n\t@apply bg-blue-100 dark:bg-blue-900;\n}\n```\n\n### CSS hash position no longer deterministic\n\nPreviously Svelte would always insert the CSS hash last. This is no longer guaranteed in Svelte 5. This is only breaking if you [have very weird css selectors](https://stackoverflow.com/questions/15670631/does-the-order-of-classes-listed-on-an-item-affect-the-css).\n\n### Scoped CSS uses :where(...)\n\nTo avoid issues caused by unpredictable specificity changes, scoped CSS selectors now use `:where(.svelte-xyz123)` selector modifiers alongside `.svelte-xyz123` (where `xyz123` is, as previously, a hash of the `<style>` contents). You can read more detail [here](https://github.com/sveltejs/svelte/pull/10443).\n\nIn the event that you need to support ancient browsers that don't implement `:where`, you can manually alter the emitted CSS, at the cost of unpredictable specificity changes:\n\n```js\n// @errors: 2552\ncss = css.replace(/:where\\((.+?)\\)/, '$1');\n```\n\n### Error/warning codes have been renamed\n\nError and warning codes have been renamed. Previously they used dashes to separate the words, they now use underscores (e.g. foo-bar becomes foo_bar). Additionally, a handful of codes have been reworded slightly.\n\n### Reduced number of namespaces\n\nThe number of valid namespaces you can pass to the compiler option `namespace` has been reduced to `html` (the default), `mathml` and `svg`.\n\nThe `foreign` namespace was only useful for Svelte Native, which we're planning to support differently in a 5.x minor.\n\n### beforeUpdate/afterUpdate changes\n\n`beforeUpdate` no longer runs twice on initial render if it modifies a variable referenced in the template.\n\n`afterUpdate` callbacks in a parent component will now run after `afterUpdate` callbacks in any child components.\n\n`beforeUpdate/afterUpdate` no longer run when the component contains a `<slot>` and its content is updated.\n\nBoth functions are disallowed in runes mode — use `$effect.pre(...)` and `$effect(...)` instead.\n\n### `contenteditable` behavior change\n\nIf you have a `contenteditable` node with a corresponding binding _and_ a reactive value inside it (example: `<div contenteditable=true bind:textContent>count is {count}</div>`), then the value inside the contenteditable will not be updated by updates to `count` because the binding takes full control over the content immediately and it should only be updated through it.\n\n### `oneventname` attributes no longer accept string values\n\nIn Svelte 4, it was possible to specify event attributes on HTML elements as a string:\n\n```svelte\n<button onclick=\"alert('hello')\">...</button>\n```\n\nThis is not recommended, and is no longer possible in Svelte 5, where properties like `onclick` replace `on:click` as the mechanism for adding event handlers.\n\n### `null` and `undefined` become the empty string\n\nIn Svelte 4, `null` and `undefined` were printed as the corresponding string. In 99 out of 100 cases you want this to become the empty string instead, which is also what most other frameworks out there do. Therefore, in Svelte 5, `null` and `undefined` become the empty string.\n\n### `bind:files` values can only be `null`, `undefined` or `FileList`\n\n`bind:files` is now a two-way binding. As such, when setting a value, it needs to be either falsy (`null` or `undefined`) or of type `FileList`.\n\n### Bindings now react to form resets\n\nPreviously, bindings did not take into account `reset` event of forms, and therefore values could get out of sync with the DOM. Svelte 5 fixes this by placing a `reset` listener on the document and invoking bindings where necessary.\n\n### `walk` no longer exported\n\n`svelte/compiler` reexported `walk` from `estree-walker` for convenience. This is no longer true in Svelte 5, import it directly from that package instead in case you need it.\n\n### Content inside `svelte:options` is forbidden\n\nIn Svelte 4 you could have content inside a `<svelte:options />` tag. It was ignored, but you could write something in there. In Svelte 5, content inside that tag is a compiler error.\n\n### `<slot>` elements in declarative shadow roots are preserved\n\nSvelte 4 replaced the `<slot />` tag in all places with its own version of slots. Svelte 5 preserves them in the case they are a child of a `<template shadowrootmode=\"...\">` element.\n\n### `<svelte:element>` tag must be an expression\n\nIn Svelte 4, `<svelte:element this=\"div\">` is valid code. This makes little sense — you should just do `<div>`. In the vanishingly rare case that you _do_ need to use a literal value for some reason, you can do this:\n\n```svelte\n<svelte:element this=+++{+++\"div\"+++}+++>\n```\n\nNote that whereas Svelte 4 would treat `<svelte:element this=\"input\">` (for example) identically to `<input>` for the purposes of determining which `bind:` directives could be applied, Svelte 5 does not.\n\n### `mount` plays transitions by default\n\nThe `mount` function used to render a component tree plays transitions by default unless the `intro` option is set to `false`. This is different from legacy class components which, when manually instantiated, didn't play transitions by default.\n\n### `<img src={...}>` and `{@html ...}` hydration mismatches are not repaired\n\nIn Svelte 4, if the value of a `src` attribute or `{@html ...}` tag differ between server and client (a.k.a. a hydration mismatch), the mismatch is repaired. This is very costly: setting a `src` attribute (even if it evaluates to the same thing) causes images and iframes to be reloaded, and reinserting a large blob of HTML is slow.\n\nSince these mismatches are extremely rare, Svelte 5 assumes that the values are unchanged, but in development will warn you if they are not. To force an update you can do something like this:\n\n```svelte\n<script>\n\tlet { markup, src } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\t// stash the values...\n\t\tconst initial = { markup, src };\n\n\t\t// unset them...\n\t\tmarkup = src = undefined;\n\n\t\t$effect(() => {\n\t\t\t// ...and reset after we've mounted\n\t\t\tmarkup = initial.markup;\n\t\t\tsrc = initial.src;\n\t\t});\n\t}\n</script>\n\n{@html markup}\n<img {src} />\n```\n\n### Hydration works differently\n\nSvelte 5 makes use of comments during server-side rendering which are used for more robust and efficient hydration on the client. You therefore should not remove comments from your HTML output if you intend to hydrate it, and if you manually authored HTML to be hydrated by a Svelte component, you need to adjust that HTML to include said comments at the correct positions.\n\n### `onevent` attributes are delegated\n\nEvent attributes replace event directives: Instead of `on:click={handler}` you write `onclick={handler}`. For backwards compatibility the `on:event` syntax is still supported and behaves the same as in Svelte 4. Some of the `onevent` attributes however are delegated, which means you need to take care to not stop event propagation on those manually, as they then might never reach the listener for this event type at the root.\n\n### `--style-props` uses a different element\n\nSvelte 5 uses an extra `<svelte-css-wrapper>` element instead of a `<div>` to wrap the component when using CSS custom properties.\n\n<!-- TODO in final docs, add link to corresponding section for more details -->",
+		"svelte/faq": "## I'm new to Svelte. Where should I start?\n\nWe think the best way to get started is playing through the interactive [tutorial](/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.\n\nFive to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.\n\n## Where can I get support?\n\nIf your question is about certain syntax, the [reference docs](/docs/svelte) are a good place to start.\n\nStack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) or [ask your own](https://stackoverflow.com/questions/ask?tags=svelte)!\n\nThere are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. [Our Discord](/chat) or [the Reddit channel](https://www.reddit.com/r/sveltejs/) are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit.\n\n## Are there any third-party resources?\n\nSvelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).\n\n## How can I get VS Code to syntax-highlight my .svelte files?\n\nThere is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).\n\n## Is there a tool to automatically format my .svelte files?\n\nYou can use prettier with the [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte) plugin.\n\n## How do I document my components?\n\nIn editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.\n\n````svelte\n<script>\n\t/** What should we call the user? */\n\texport let name = 'world';\n</script>\n\n<!--\n@component\nHere's some documentation for this component.\nIt will show up on hover.\n\n- You can use markdown here.\n- You can also use code blocks here.\n- Usage:\n  ```svelte\n  <main name=\"Arethra\">\n  ```\n-->\n<main>\n\t<h1>\n\t\tHello, {name}\n\t</h1>\n</main>\n````\n\nNote: The `@component` is necessary in the HTML comment which describes your component.\n\n## Does Svelte scale?\n\nThere will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546).\n\n## Is there a UI component library?\n\nThere are several [UI component libraries](/packages#component-libraries) as well as standalone components listed on [the packages page](/packages).\n\n## How do I test Svelte apps?\n\nHow your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.\n\nA Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).\n\n_Unit Tests_: Focus on testing business logic in isolation. Often this is validating individual functions and edge cases. By minimizing the surface area of these tests they can be kept lean and fast, and by extracting as much logic as possible from your Svelte components more of your application can be covered using them. When creating a new SvelteKit project, you will be asked whether you would like to setup [Vitest](https://vitest.dev/) for unit testing. There are a number of other test runners that could be used as well.\n\n_Component Tests_: Validating that a Svelte component mounts and interacts as expected throughout its lifecycle requires a tool that provides a Document Object Model (DOM). Components can be compiled (since Svelte is a compiler and not a normal library) and mounted to allow asserting against element structure, listeners, state, and all the other capabilities provided by a Svelte component. Tools for component testing range from an in-memory implementation like jsdom paired with a test runner like [Vitest](https://vitest.dev/) to solutions that leverage an actual browser to provide a visual testing capability such as [Playwright](https://playwright.dev/docs/test-components) or [Cypress](https://www.cypress.io/).\n\n_End-to-End Tests_: To ensure your users are able to interact with your application it is necessary to test it as a whole in a manner as close to production as possible. This is done by writing end-to-end (E2E) tests which load and interact with a deployed version of your application in order to simulate how the user will interact with your application. When creating a new SvelteKit project, you will be asked whether you would like to setup [Playwright](https://playwright.dev/) for end-to-end testing. There are many other E2E test libraries available for use as well.\n\nSome resources for getting started with testing:\n\n- [Svelte docs on testing](/docs/svelte/testing)\n- [Setup Vitest using the Svelte CLI](/docs/cli/vitest)\n- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)\n- [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)\n- [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)\n- [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)\n- [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)\n\n## Is there a router?\n\nThe official routing library is [SvelteKit](/docs/kit). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React and Nuxt.js for Vue.\n\nHowever, you can use any router library. A sampling of available routers are highlighted [on the packages page](/packages#routing).\n\n## How do I write a mobile app with Svelte?\n\nWhile most mobile apps are written without using JavaScript, if you'd like to leverage your existing Svelte components and knowledge of Svelte when building mobile apps, you can turn a [SvelteKit SPA](https://kit.svelte.dev/docs/single-page-apps) into a mobile app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte). Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms.\n\nSome work has been completed towards [custom renderer support in Svelte 5](https://github.com/sveltejs/svelte/issues/15470), but this feature is not yet available. The custom rendering API would support additional mobile frameworks like Lynx JS and Svelte Native. Svelte Native was an option available for Svelte 4, but Svelte 5 does not currently support it. Svelte Native lets you write NativeScript apps using Svelte components that contain [NativeScript UI components](https://docs.nativescript.org/ui/) rather than DOM elements, which may be familiar for users coming from React Native.\n\n## Can I tell Svelte not to remove my unused styles?\n\nNo. Svelte removes the styles from the component and warns you about them in order to prevent issues that would otherwise arise.\n\nSvelte's component style scoping works by generating a class unique to the given component, adding it to the relevant elements in the component that are under Svelte's control, and then adding it to each of the selectors in that component's styles. When the compiler can't see what elements a style selector applies to, there would be two bad options for keeping it:\n\n- If it keeps the selector and adds the scoping class to it, the selector will likely not match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`.\n- If it keeps the selector without adding the scoping class to it, the given style will become a global style, affecting your entire page.\n\nIf you need to style something that Svelte can't identify at compile time, you will need to explicitly opt into global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want.\n\n## Is Svelte v2 still available?\n\nNew features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.\n\nThe documentation is still available [here](https://v2.svelte.dev/guide).\n\n## How do I do hot module reloading?\n\nWe recommend using [SvelteKit](/docs/kit), which supports HMR out of the box and is built on top of [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr). There are also community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/sveltejs/svelte-loader).",
+		"svelte/svelte": "```js\n// @noErrors\nimport {\n\tSvelteComponent,\n\tSvelteComponentTyped,\n\tafterUpdate,\n\tbeforeUpdate,\n\tcreateEventDispatcher,\n\tcreateRawSnippet,\n\tflushSync,\n\tgetAbortSignal,\n\tgetAllContexts,\n\tgetContext,\n\thasContext,\n\thydrate,\n\tmount,\n\tonDestroy,\n\tonMount,\n\tsetContext,\n\tsettled,\n\ttick,\n\tunmount,\n\tuntrack\n} from 'svelte';\n```\n\n## SvelteComponent\n\nThis was the base class for Svelte components in Svelte 4. Svelte 5+ components\nare completely different under the hood. For typing, use `Component` instead.\nTo instantiate components, use `mount` instead.\nSee [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteComponent<\n\tProps extends Record<string, any> = Record<string, any>,\n\tEvents extends Record<string, any> = any,\n\tSlots extends Record<string, any> = any\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatic element?: typeof HTMLElement;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe custom element version of the component. Only present if compiled with the `customElement` compiler option\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n[prop: string]: any;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> This constructor only exists when using the `asClassComponent` compatibility helper, which\nis a stop-gap solution. Migrate towards using `mount` instead. See\n[migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n$destroy(): void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which\nis a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\nfor more info.\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n$on<K extends Extract<keyof Events, string>>(\n\ttype: K,\n\tcallback: (e: Events[K]) => void\n): () => void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which\nis a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\nfor more info.\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n$set(props: Partial<Props>): void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which\nis a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\nfor more info.\n\n</div>\n\n</div>\n</div></div>\n\n\n\n## SvelteComponentTyped\n\n<blockquote class=\"tag deprecated note\">\n\nUse `Component` instead. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteComponentTyped<\n\tProps extends Record<string, any> = Record<string, any>,\n\tEvents extends Record<string, any> = any,\n\tSlots extends Record<string, any> = any\n> extends SvelteComponent<Props, Events, Slots> {}\n```\n\n</div>\n\n\n\n## afterUpdate\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`$effect`](/docs/svelte/$effect) instead\n\n</blockquote>\n\nSchedules a callback to run immediately after the component has been updated.\n\nThe first time the callback runs will be after the initial `onMount`.\n\nIn runes mode use `$effect` instead.\n\n<div class=\"ts-block\">\n\n```dts\nfunction afterUpdate(fn: () => void): void;\n```\n\n</div>\n\n\n\n## beforeUpdate\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`$effect.pre`](/docs/svelte/$effect#$effect.pre) instead\n\n</blockquote>\n\nSchedules a callback to run immediately before the component is updated after any state change.\n\nThe first time the callback runs will be before the initial `onMount`.\n\nIn runes mode use `$effect.pre` instead.\n\n<div class=\"ts-block\">\n\n```dts\nfunction beforeUpdate(fn: () => void): void;\n```\n\n</div>\n\n\n\n## createEventDispatcher\n\n<blockquote class=\"tag deprecated note\">\n\nUse callback props and/or the `$host()` rune instead — see [migration guide](/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n\n</blockquote>\n\nCreates an event dispatcher that can be used to dispatch [component events](/docs/svelte/legacy-on#Component-events).\nEvent dispatchers are functions that can take two arguments: `name` and `detail`.\n\nComponent events created with `createEventDispatcher` create a\n[CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\nThese events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\nThe `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\nproperty and can contain any type of data.\n\nThe event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n```ts\nconst dispatch = createEventDispatcher<{\n loaded: null; // does not take a detail argument\n change: string; // takes a detail argument of type string, which is required\n optional: number | null; // takes an optional detail argument of type number\n}>();\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction createEventDispatcher<\n\tEventMap extends Record<string, any> = any\n>(): EventDispatcher<EventMap>;\n```\n\n</div>\n\n\n\n## createRawSnippet\n\nCreate a snippet programmatically\n\n<div class=\"ts-block\">\n\n```dts\nfunction createRawSnippet<Params extends unknown[]>(\n\tfn: (...params: Getters<Params>) => {\n\t\trender: () => string;\n\t\tsetup?: (element: Element) => void | (() => void);\n\t}\n): Snippet<Params>;\n```\n\n</div>\n\n\n\n## flushSync\n\nSynchronously flush any pending updates.\nReturns void if no callback is provided, otherwise returns the result of calling the callback.\n\n<div class=\"ts-block\">\n\n```dts\nfunction flushSync<T = void>(fn?: (() => T) | undefined): T;\n```\n\n</div>\n\n\n\n## getAbortSignal\n\nReturns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](/docs/svelte/$derived) or [effect](/docs/svelte/$effect) re-runs or is destroyed.\n\nMust be called while a derived or effect is running.\n\n```svelte\n<script>\n\timport { getAbortSignal } from 'svelte';\n\n\tlet { id } = $props();\n\n\tasync function getData(id) {\n\t\tconst response = await fetch(`/items/${id}`, {\n\t\t\tsignal: getAbortSignal()\n\t\t});\n\n\t\treturn await response.json();\n\t}\n\n\tconst data = $derived(await getData(id));\n</script>\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction getAbortSignal(): AbortSignal;\n```\n\n</div>\n\n\n\n## getAllContexts\n\nRetrieves the whole context map that belongs to the closest parent component.\nMust be called during component initialisation. Useful, for example, if you\nprogrammatically create a component and want to pass the existing context to it.\n\n<div class=\"ts-block\">\n\n```dts\nfunction getAllContexts<\n\tT extends Map<any, any> = Map<any, any>\n>(): T;\n```\n\n</div>\n\n\n\n## getContext\n\nRetrieves the context that belongs to the closest parent component with the specified `key`.\nMust be called during component initialisation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction getContext<T>(key: any): T;\n```\n\n</div>\n\n\n\n## hasContext\n\nChecks whether a given `key` has been set in the context of a parent component.\nMust be called during component initialisation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction hasContext(key: any): boolean;\n```\n\n</div>\n\n\n\n## hydrate\n\nHydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component\n\n<div class=\"ts-block\">\n\n```dts\nfunction hydrate<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>\n>(\n\tcomponent:\n\t\t| ComponentType<SvelteComponent<Props>>\n\t\t| Component<Props, Exports, any>,\n\toptions: {} extends Props\n\t\t? {\n\t\t\t\ttarget: Document | Element | ShadowRoot;\n\t\t\t\tprops?: Props;\n\t\t\t\tevents?: Record<string, (e: any) => any>;\n\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\tintro?: boolean;\n\t\t\t\trecover?: boolean;\n\t\t\t}\n\t\t: {\n\t\t\t\ttarget: Document | Element | ShadowRoot;\n\t\t\t\tprops: Props;\n\t\t\t\tevents?: Record<string, (e: any) => any>;\n\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\tintro?: boolean;\n\t\t\t\trecover?: boolean;\n\t\t\t}\n): Exports;\n```\n\n</div>\n\n\n\n## mount\n\nMounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.\nTransitions will play during the initial render unless the `intro` option is set to `false`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction mount<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>\n>(\n\tcomponent:\n\t\t| ComponentType<SvelteComponent<Props>>\n\t\t| Component<Props, Exports, any>,\n\toptions: MountOptions<Props>\n): Exports;\n```\n\n</div>\n\n\n\n## onDestroy\n\nSchedules a callback to run immediately before the component is unmounted.\n\nOut of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\nonly one that runs inside a server-side component.\n\n<div class=\"ts-block\">\n\n```dts\nfunction onDestroy(fn: () => any): void;\n```\n\n</div>\n\n\n\n## onMount\n\n`onMount`, like [`$effect`](/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\nUnlike `$effect`, the provided function only runs once.\n\nIt must be called during the component's initialisation (but doesn't need to live _inside_ the component;\nit can be called from an external module). If a function is returned _synchronously_ from `onMount`,\nit will be called when the component is unmounted.\n\n`onMount` functions do not run during [server-side rendering](/docs/svelte/svelte-server#render).\n\n<div class=\"ts-block\">\n\n```dts\nfunction onMount<T>(\n\tfn: () =>\n\t\t| NotFunction<T>\n\t\t| Promise<NotFunction<T>>\n\t\t| (() => any)\n): void;\n```\n\n</div>\n\n\n\n## setContext\n\nAssociates an arbitrary `context` object with the current component and the specified `key`\nand returns that object. The context is then available to children of the component\n(including slotted content) with `getContext`.\n\nLike lifecycle functions, this must be called during component initialisation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction setContext<T>(key: any, context: T): T;\n```\n\n</div>\n\n\n\n## settled\n\n<blockquote class=\"since note\">\n\nAvailable since 5.36\n\n</blockquote>\n\nReturns a promise that resolves once any state changes, and asynchronous work resulting from them,\nhave resolved and the DOM has been updated\n\n<div class=\"ts-block\">\n\n```dts\nfunction settled(): Promise<void>;\n```\n\n</div>\n\n\n\n## tick\n\nReturns a promise that resolves once any pending state changes have been applied.\n\n<div class=\"ts-block\">\n\n```dts\nfunction tick(): Promise<void>;\n```\n\n</div>\n\n\n\n## unmount\n\nUnmounts a component that was previously mounted using `mount` or `hydrate`.\n\nSince 5.13.0, if `options.outro` is `true`, [transitions](/docs/svelte/transition) will play before the component is removed from the DOM.\n\nReturns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise (prior to 5.13.0, returns `void`).\n\n```js\n// @errors: 7031\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction unmount(\n\tcomponent: Record<string, any>,\n\toptions?:\n\t\t| {\n\t\t\t\toutro?: boolean;\n\t\t  }\n\t\t| undefined\n): Promise<void>;\n```\n\n</div>\n\n\n\n## untrack\n\nWhen used inside a [`$derived`](/docs/svelte/$derived) or [`$effect`](/docs/svelte/$effect),\nany state read inside `fn` will not be treated as a dependency.\n\n```ts\n$effect(() => {\n\t// this will run when `data` changes, but not when `time` changes\n\tsave(data, {\n\t\ttimestamp: untrack(() => time)\n\t});\n});\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction untrack<T>(fn: () => T): T;\n```\n\n</div>\n\n\n\n## Component\n\nCan be used to create strongly typed Svelte components.\n\n#### Example:\n\nYou have component library on npm called `component-library`, from which\nyou export a component called `MyComponent`. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a `index.d.ts`:\n```ts\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}\n```\nTyping this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n```svelte\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />\n```\n\n<div class=\"ts-block\">\n\n```dts\ninterface Component<\n\tProps extends Record<string, any> = {},\n\tExports extends Record<string, any> = {},\n\tBindings extends keyof Props | '' = string\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(\n\tthis: void,\n\tinternals: ComponentInternals,\n\tprops: Props\n): {\n\t/**\n\t * @deprecated This method only exists when using one of the legacy compatibility helpers, which\n\t * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\n\t * for more info.\n\t */\n\t$on?(type: string, callback: (e: any) => void): () => void;\n\t/**\n\t * @deprecated This method only exists when using one of the legacy compatibility helpers, which\n\t * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\n\t * for more info.\n\t */\n\t$set?(props: Partial<Props>): void;\n} & Exports;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `internal` An internal object used by Svelte. Do not use or modify.\n- `props` The props passed to the component.\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nelement?: typeof HTMLElement;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe custom element version of the component. Only present if compiled with the `customElement` compiler option\n\n</div>\n</div></div>\n\n## ComponentConstructorOptions\n\n<blockquote class=\"tag deprecated note\">\n\nIn Svelte 4, components are classes. In Svelte 5, they are functions.\nUse `mount` instead to instantiate components.\nSee [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\nfor more info.\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\ninterface ComponentConstructorOptions<\n\tProps extends Record<string, any> = Record<string, any>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntarget: Element | Document | ShadowRoot;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nanchor?: Element;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprops?: Props;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncontext?: Map<any, any>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nhydrate?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nintro?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrecover?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsync?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nidPrefix?: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n$$inline?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## ComponentEvents\n\n<blockquote class=\"tag deprecated note\">\n\nThe new `Component` type does not have a dedicated Events type. Use `ComponentProps` instead.\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\ntype ComponentEvents<Comp extends SvelteComponent> =\n\tComp extends SvelteComponent<any, infer Events>\n\t\t? Events\n\t\t: never;\n```\n\n</div>\n\n## ComponentInternals\n\nInternal implementation details that vary between environments\n\n<div class=\"ts-block\">\n\n```dts\ntype ComponentInternals = Branded<{}, 'ComponentInternals'>;\n```\n\n</div>\n\n## ComponentProps\n\nConvenience type to get the props the given component expects.\n\nExample: Ensure a variable contains the props expected by `MyComponent`:\n\n```ts\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };\n```\n\n> [!NOTE] In Svelte 4, you would do `ComponentProps<MyComponent>` because `MyComponent` was a class.\n\nExample: A generic function that accepts some component and infers the type of its props:\n\n```ts\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });\n```\n\n<div class=\"ts-block\">\n\n```dts\ntype ComponentProps<\n\tComp extends SvelteComponent | Component<any, any>\n> =\n\tComp extends SvelteComponent<infer Props>\n\t\t? Props\n\t\t: Comp extends Component<infer Props, any>\n\t\t\t? Props\n\t\t\t: never;\n```\n\n</div>\n\n## ComponentType\n\n<blockquote class=\"tag deprecated note\">\n\nThis type is obsolete when working with the new `Component` type.\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\ntype ComponentType<\n\tComp extends SvelteComponent = SvelteComponent\n> = (new (\n\toptions: ComponentConstructorOptions<\n\t\tComp extends SvelteComponent<infer Props>\n\t\t\t? Props\n\t\t\t: Record<string, any>\n\t>\n) => Comp) & {\n\t/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */\n\telement?: typeof HTMLElement;\n};\n```\n\n</div>\n\n## EventDispatcher\n\n<div class=\"ts-block\">\n\n```dts\ninterface EventDispatcher<\n\tEventMap extends Record<string, any>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n<Type extends keyof EventMap>(\n\t...args: null extends EventMap[Type]\n\t\t? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]\n\t\t: undefined extends EventMap[Type]\n\t\t\t? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]\n\t\t\t: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]\n): boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## MountOptions\n\nDefines the options accepted by the `mount()` function.\n\n<div class=\"ts-block\">\n\n```dts\ntype MountOptions<\n\tProps extends Record<string, any> = Record<string, any>\n> = {\n\t/**\n\t * Target element where the component will be mounted.\n\t */\n\ttarget: Document | Element | ShadowRoot;\n\t/**\n\t * Optional node inside `target`. When specified, it is used to render the component immediately before it.\n\t */\n\tanchor?: Node;\n\t/**\n\t * Allows the specification of events.\n\t * @deprecated Use callback props instead.\n\t */\n\tevents?: Record<string, (e: any) => any>;\n\t/**\n\t * Can be accessed via `getContext()` at the component level.\n\t */\n\tcontext?: Map<any, any>;\n\t/**\n\t * Whether or not to play transitions on initial render.\n\t * @default true\n\t */\n\tintro?: boolean;\n} & ({} extends Props\n\t? {\n\t\t\t/**\n\t\t\t * Component properties.\n\t\t\t */\n\t\t\tprops?: Props;\n\t\t}\n\t: {\n\t\t\t/**\n\t\t\t * Component properties.\n\t\t\t */\n\t\t\tprops: Props;\n\t\t});\n```\n\n</div>\n\n## Snippet\n\nThe type of a `#snippet` block. You can use it to (for example) express that your component expects a snippet of a certain type:\n```ts\nlet { banner }: { banner: Snippet<[{ text: string }]> } = $props();\n```\nYou can only call a snippet through the `{@render ...}` tag.\n\nSee the [snippet documentation](/docs/svelte/snippet) for more info.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Snippet<Parameters extends unknown[] = []> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(\n\tthis: void,\n\t// this conditional allows tuples but not arrays. Arrays would indicate a\n\t// rest parameter type, which is not supported. If rest parameters are added\n\t// in the future, the condition can be removed.\n\t...args: number extends Parameters['length'] ? never : Parameters\n): {\n\t'{@render ...} must be called with a Snippet': \"import type { Snippet } from 'svelte'\";\n} & typeof SnippetReturn;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-action": "This module provides types for [actions](use), which have been superseded by [attachments](@attach).\n\n## Action\n\nActions are functions that are called when an element is created.\nYou can use this interface to type such actions.\nThe following example defines an action that only works on `<div>` elements\nand optionally accepts a parameter which it has a default value for:\n```ts\nexport const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {\n\t// ...\n}\n```\n`Action<HTMLDivElement>` and `Action<HTMLDivElement, undefined>` both signal that the action accepts no parameters.\n\nYou can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.\nSee interface `ActionReturn` for more details.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Action<\n\tElement = HTMLElement,\n\tParameter = undefined,\n\tAttributes extends Record<string, any> = Record<\n\t\tnever,\n\t\tany\n\t>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n<Node extends Element>(\n\t...args: undefined extends Parameter\n\t\t? [node: Node, parameter?: Parameter]\n\t\t: [node: Node, parameter: Parameter]\n): void | ActionReturn<Parameter, Attributes>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## ActionReturn\n\nActions can return an object containing the two properties defined in this interface. Both are optional.\n- update: An action can have a parameter. This method will be called whenever that parameter changes,\n\timmediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<undefined>` both\n\tmean that the action accepts no parameters.\n- destroy: Method that is called after the element is unmounted\n\nAdditionally, you can specify which additional attributes and events the action enables on the applied element.\nThis applies to TypeScript typings only and has no effect at runtime.\n\nExample usage:\n```ts\ninterface Attributes {\n\tnewprop?: string;\n\t'on:event': (e: CustomEvent<boolean>) => void;\n}\n\nexport function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {\n\t// ...\n\treturn {\n\t\tupdate: (updatedParameter) => {...},\n\t\tdestroy: () => {...}\n\t};\n}\n```\n\n<div class=\"ts-block\">\n\n```dts\ninterface ActionReturn<\n\tParameter = undefined,\n\tAttributes extends Record<string, any> = Record<\n\t\tnever,\n\t\tany\n\t>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nupdate?: (parameter: Parameter) => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndestroy?: () => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-animate": "```js\n// @noErrors\nimport { flip } from 'svelte/animate';\n```\n\n## flip\n\nThe flip function calculates the start and end position of an element and animates between them, translating the x and y values.\n`flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/).\n\n<div class=\"ts-block\">\n\n```dts\nfunction flip(\n\tnode: Element,\n\t{\n\t\tfrom,\n\t\tto\n\t}: {\n\t\tfrom: DOMRect;\n\t\tto: DOMRect;\n\t},\n\tparams?: FlipParams\n): AnimationConfig;\n```\n\n</div>\n\n\n\n## AnimationConfig\n\n<div class=\"ts-block\">\n\n```dts\ninterface AnimationConfig {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: (t: number) => number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncss?: (t: number, u: number) => string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntick?: (t: number, u: number) => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## FlipParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface FlipParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number | ((len: number) => number);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: (t: number) => number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-attachments": "```js\n// @noErrors\nimport { createAttachmentKey, fromAction } from 'svelte/attachments';\n```\n\n## createAttachmentKey\n\n<blockquote class=\"since note\">\n\nAvailable since 5.29\n\n</blockquote>\n\nCreates an object key that will be recognised as an attachment when the object is spread onto an element,\nas a programmatic alternative to using `{@attach ...}`. This can be useful for library authors, though\nis generally not needed when building an app.\n\n```svelte\n<script>\n\timport { createAttachmentKey } from 'svelte/attachments';\n\n\tconst props = {\n\t\tclass: 'cool',\n\t\tonclick: () => alert('clicked'),\n\t\t[createAttachmentKey()]: (node) => {\n\t\t\tnode.textContent = 'attached!';\n\t\t}\n\t};\n</script>\n\n<button {...props}>click me</button>\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction createAttachmentKey(): symbol;\n```\n\n</div>\n\n\n\n## fromAction\n\nConverts an [action](/docs/svelte/use) into an [attachment](/docs/svelte/@attach) keeping the same behavior.\nIt's useful if you want to start using attachments on components but you have actions provided by a library.\n\nNote that the second argument, if provided, must be a function that _returns_ the argument to the\naction function, not the argument itself.\n\n```svelte\n<!-- with an action -->\n<div use:foo={bar}>...</div>\n\n<!-- with an attachment -->\n<div {@attach fromAction(foo, () => bar)}>...</div>\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction fromAction<\n\tE extends EventTarget,\n\tT extends unknown\n>(\n\taction:\n\t\t| Action<E, T>\n\t\t| ((element: E, arg: T) => void | ActionReturn<T>),\n\tfn: () => T\n): Attachment<E>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction fromAction<E extends EventTarget>(\n\taction:\n\t\t| Action<E, void>\n\t\t| ((element: E) => void | ActionReturn<void>)\n): Attachment<E>;\n```\n\n</div>\n\n\n\n## Attachment\n\nAn [attachment](/docs/svelte/@attach) is a function that runs when an element is mounted\nto the DOM, and optionally returns a function that is called when the element is later removed.\n\nIt can be attached to an element with an `{@attach ...}` tag, or by spreading an object containing\na property created with [`createAttachmentKey`](/docs/svelte/svelte-attachments#createAttachmentKey).\n\n<div class=\"ts-block\">\n\n```dts\ninterface Attachment<T extends EventTarget = Element> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(element: T): void | (() => void);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-compiler": "```js\n// @noErrors\nimport {\n\tVERSION,\n\tcompile,\n\tcompileModule,\n\tmigrate,\n\tparse,\n\tpreprocess,\n\twalk\n} from 'svelte/compiler';\n```\n\n## VERSION\n\nThe current version, as set in package.json.\n\n<div class=\"ts-block\">\n\n```dts\nconst VERSION: string;\n```\n\n</div>\n\n\n\n## compile\n\n`compile` converts your `.svelte` source code into a JavaScript module that exports a component\n\n<div class=\"ts-block\">\n\n```dts\nfunction compile(\n\tsource: string,\n\toptions: CompileOptions\n): CompileResult;\n```\n\n</div>\n\n\n\n## compileModule\n\n`compileModule` takes your JavaScript source code containing runes, and turns it into a JavaScript module.\n\n<div class=\"ts-block\">\n\n```dts\nfunction compileModule(\n\tsource: string,\n\toptions: ModuleCompileOptions\n): CompileResult;\n```\n\n</div>\n\n\n\n## migrate\n\nDoes a best-effort migration of Svelte code towards using runes, event attributes and render tags.\nMay throw an error if the code is too complex to migrate automatically.\n\n<div class=\"ts-block\">\n\n```dts\nfunction migrate(\n\tsource: string,\n\t{\n\t\tfilename,\n\t\tuse_ts\n\t}?:\n\t\t| {\n\t\t\t\tfilename?: string;\n\t\t\t\tuse_ts?: boolean;\n\t\t  }\n\t\t| undefined\n): {\n\tcode: string;\n};\n```\n\n</div>\n\n\n\n## parse\n\nThe parse function parses a component, returning only its abstract syntax tree.\n\nThe `modern` option (`false` by default in Svelte 5) makes the parser return a modern AST instead of the legacy AST.\n`modern` will become `true` by default in Svelte 6, and the option will be removed in Svelte 7.\n\n<div class=\"ts-block\">\n\n```dts\nfunction parse(\n\tsource: string,\n\toptions: {\n\t\tfilename?: string;\n\t\tmodern: true;\n\t\tloose?: boolean;\n\t}\n): AST.Root;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction parse(\n\tsource: string,\n\toptions?:\n\t\t| {\n\t\t\t\tfilename?: string;\n\t\t\t\tmodern?: false;\n\t\t\t\tloose?: boolean;\n\t\t  }\n\t\t| undefined\n): Record<string, any>;\n```\n\n</div>\n\n\n\n## preprocess\n\nThe preprocess function provides convenient hooks for arbitrarily transforming component source code.\nFor example, it can be used to convert a `<style lang=\"sass\">` block into vanilla CSS.\n\n<div class=\"ts-block\">\n\n```dts\nfunction preprocess(\n\tsource: string,\n\tpreprocessor: PreprocessorGroup | PreprocessorGroup[],\n\toptions?:\n\t\t| {\n\t\t\t\tfilename?: string;\n\t\t  }\n\t\t| undefined\n): Promise<Processed>;\n```\n\n</div>\n\n\n\n## walk\n\n<blockquote class=\"tag deprecated note\">\n\nReplace this with `import { walk } from 'estree-walker'`\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\nfunction walk(): never;\n```\n\n</div>\n\n\n\n## AST\n\n<div class=\"ts-block\">\n\n```dts\nnamespace AST {\n\texport interface BaseNode {\n\t\ttype: string;\n\t\tstart: number;\n\t\tend: number;\n\t}\n\n\texport interface Fragment {\n\t\ttype: 'Fragment';\n\t\tnodes: Array<\n\t\t\tText | Tag | ElementLike | Block | Comment\n\t\t>;\n\t}\n\n\texport interface Root extends BaseNode {\n\t\ttype: 'Root';\n\t\t/**\n\t\t * Inline options provided by `<svelte:options>` — these override options passed to `compile(...)`\n\t\t */\n\t\toptions: SvelteOptions | null;\n\t\tfragment: Fragment;\n\t\t/** The parsed `<style>` element, if exists */\n\t\tcss: AST.CSS.StyleSheet | null;\n\t\t/** The parsed `<script>` element, if exists */\n\t\tinstance: Script | null;\n\t\t/** The parsed `<script module>` element, if exists */\n\t\tmodule: Script | null;\n\t\t/** Comments found in <script> and {expressions} */\n\t\tcomments: JSComment[];\n\t}\n\n\texport interface SvelteOptions {\n\t\t// start/end info (needed for warnings and for our Prettier plugin)\n\t\tstart: number;\n\t\tend: number;\n\t\t// options\n\t\trunes?: boolean;\n\t\timmutable?: boolean;\n\t\taccessors?: boolean;\n\t\tpreserveWhitespace?: boolean;\n\t\tnamespace?: Namespace;\n\t\tcss?: 'injected';\n\t\tcustomElement?: {\n\t\t\ttag?: string;\n\t\t\tshadow?: 'open' | 'none';\n\t\t\tprops?: Record<\n\t\t\t\tstring,\n\t\t\t\t{\n\t\t\t\t\tattribute?: string;\n\t\t\t\t\treflect?: boolean;\n\t\t\t\t\ttype?:\n\t\t\t\t\t\t| 'Array'\n\t\t\t\t\t\t| 'Boolean'\n\t\t\t\t\t\t| 'Number'\n\t\t\t\t\t\t| 'Object'\n\t\t\t\t\t\t| 'String';\n\t\t\t\t}\n\t\t\t>;\n\t\t\t/**\n\t\t\t * Is of type\n\t\t\t * ```ts\n\t\t\t * (ceClass: new () => HTMLElement) => new () => HTMLElement\n\t\t\t * ```\n\t\t\t */\n\t\t\textend?: ArrowFunctionExpression | Identifier;\n\t\t};\n\t\tattributes: Attribute[];\n\t}\n\n\t/** Static text */\n\texport interface Text extends BaseNode {\n\t\ttype: 'Text';\n\t\t/** Text with decoded HTML entities */\n\t\tdata: string;\n\t\t/** The original text, with undecoded HTML entities */\n\t\traw: string;\n\t}\n\n\t/** A (possibly reactive) template expression — `{...}` */\n\texport interface ExpressionTag extends BaseNode {\n\t\ttype: 'ExpressionTag';\n\t\texpression: Expression;\n\t}\n\n\t/** A (possibly reactive) HTML template expression — `{@html ...}` */\n\texport interface HtmlTag extends BaseNode {\n\t\ttype: 'HtmlTag';\n\t\texpression: Expression;\n\t}\n\n\t/** An HTML comment */\n\t// TODO rename to disambiguate\n\texport interface Comment extends BaseNode {\n\t\ttype: 'Comment';\n\t\t/** the contents of the comment */\n\t\tdata: string;\n\t}\n\n\t/** A `{@const ...}` tag */\n\texport interface ConstTag extends BaseNode {\n\t\ttype: 'ConstTag';\n\t\tdeclaration: VariableDeclaration & {\n\t\t\tdeclarations: [\n\t\t\t\tVariableDeclarator & {\n\t\t\t\t\tid: Pattern;\n\t\t\t\t\tinit: Expression;\n\t\t\t\t}\n\t\t\t];\n\t\t};\n\t}\n\n\t/** A `{@debug ...}` tag */\n\texport interface DebugTag extends BaseNode {\n\t\ttype: 'DebugTag';\n\t\tidentifiers: Identifier[];\n\t}\n\n\t/** A `{@render foo(...)} tag */\n\texport interface RenderTag extends BaseNode {\n\t\ttype: 'RenderTag';\n\t\texpression:\n\t\t\t| SimpleCallExpression\n\t\t\t| (ChainExpression & {\n\t\t\t\t\texpression: SimpleCallExpression;\n\t\t\t  });\n\t}\n\n\t/** A `{@attach foo(...)} tag */\n\texport interface AttachTag extends BaseNode {\n\t\ttype: 'AttachTag';\n\t\texpression: Expression;\n\t}\n\n\t/** An `animate:` directive */\n\texport interface AnimateDirective extends BaseNode {\n\t\ttype: 'AnimateDirective';\n\t\t/** The 'x' in `animate:x` */\n\t\tname: string;\n\t\t/** The y in `animate:x={y}` */\n\t\texpression: null | Expression;\n\t}\n\n\t/** A `bind:` directive */\n\texport interface BindDirective extends BaseNode {\n\t\ttype: 'BindDirective';\n\t\t/** The 'x' in `bind:x` */\n\t\tname: string;\n\t\t/** The y in `bind:x={y}` */\n\t\texpression:\n\t\t\t| Identifier\n\t\t\t| MemberExpression\n\t\t\t| SequenceExpression;\n\t}\n\n\t/** A `class:` directive */\n\texport interface ClassDirective extends BaseNode {\n\t\ttype: 'ClassDirective';\n\t\t/** The 'x' in `class:x` */\n\t\tname: 'class';\n\t\t/** The 'y' in `class:x={y}`, or the `x` in `class:x` */\n\t\texpression: Expression;\n\t}\n\n\t/** A `let:` directive */\n\texport interface LetDirective extends BaseNode {\n\t\ttype: 'LetDirective';\n\t\t/** The 'x' in `let:x` */\n\t\tname: string;\n\t\t/** The 'y' in `let:x={y}` */\n\t\texpression:\n\t\t\t| null\n\t\t\t| Identifier\n\t\t\t| ArrayExpression\n\t\t\t| ObjectExpression;\n\t}\n\n\t/** An `on:` directive */\n\texport interface OnDirective extends BaseNode {\n\t\ttype: 'OnDirective';\n\t\t/** The 'x' in `on:x` */\n\t\tname: string;\n\t\t/** The 'y' in `on:x={y}` */\n\t\texpression: null | Expression;\n\t\tmodifiers: Array<\n\t\t\t| 'capture'\n\t\t\t| 'nonpassive'\n\t\t\t| 'once'\n\t\t\t| 'passive'\n\t\t\t| 'preventDefault'\n\t\t\t| 'self'\n\t\t\t| 'stopImmediatePropagation'\n\t\t\t| 'stopPropagation'\n\t\t\t| 'trusted'\n\t\t>;\n\t}\n\n\t/** A `style:` directive */\n\texport interface StyleDirective extends BaseNode {\n\t\ttype: 'StyleDirective';\n\t\t/** The 'x' in `style:x` */\n\t\tname: string;\n\t\t/** The 'y' in `style:x={y}` */\n\t\tvalue:\n\t\t\t| true\n\t\t\t| ExpressionTag\n\t\t\t| Array<ExpressionTag | Text>;\n\t\tmodifiers: Array<'important'>;\n\t}\n\n\t// TODO have separate in/out/transition directives\n\t/** A `transition:`, `in:` or `out:` directive */\n\texport interface TransitionDirective extends BaseNode {\n\t\ttype: 'TransitionDirective';\n\t\t/** The 'x' in `transition:x` */\n\t\tname: string;\n\t\t/** The 'y' in `transition:x={y}` */\n\t\texpression: null | Expression;\n\t\tmodifiers: Array<'local' | 'global'>;\n\t\t/** True if this is a `transition:` or `in:` directive */\n\t\tintro: boolean;\n\t\t/** True if this is a `transition:` or `out:` directive */\n\t\toutro: boolean;\n\t}\n\n\t/** A `use:` directive */\n\texport interface UseDirective extends BaseNode {\n\t\ttype: 'UseDirective';\n\t\t/** The 'x' in `use:x` */\n\t\tname: string;\n\t\t/** The 'y' in `use:x={y}` */\n\t\texpression: null | Expression;\n\t}\n\n\tinterface BaseElement extends BaseNode {\n\t\tname: string;\n\t\tattributes: Array<\n\t\t\tAttribute | SpreadAttribute | Directive | AttachTag\n\t\t>;\n\t\tfragment: Fragment;\n\t}\n\n\texport interface Component extends BaseElement {\n\t\ttype: 'Component';\n\t}\n\n\texport interface TitleElement extends BaseElement {\n\t\ttype: 'TitleElement';\n\t\tname: 'title';\n\t}\n\n\texport interface SlotElement extends BaseElement {\n\t\ttype: 'SlotElement';\n\t\tname: 'slot';\n\t}\n\n\texport interface RegularElement extends BaseElement {\n\t\ttype: 'RegularElement';\n\t}\n\n\texport interface SvelteBody extends BaseElement {\n\t\ttype: 'SvelteBody';\n\t\tname: 'svelte:body';\n\t}\n\n\texport interface SvelteComponent extends BaseElement {\n\t\ttype: 'SvelteComponent';\n\t\tname: 'svelte:component';\n\t\texpression: Expression;\n\t}\n\n\texport interface SvelteDocument extends BaseElement {\n\t\ttype: 'SvelteDocument';\n\t\tname: 'svelte:document';\n\t}\n\n\texport interface SvelteElement extends BaseElement {\n\t\ttype: 'SvelteElement';\n\t\tname: 'svelte:element';\n\t\ttag: Expression;\n\t}\n\n\texport interface SvelteFragment extends BaseElement {\n\t\ttype: 'SvelteFragment';\n\t\tname: 'svelte:fragment';\n\t}\n\n\texport interface SvelteBoundary extends BaseElement {\n\t\ttype: 'SvelteBoundary';\n\t\tname: 'svelte:boundary';\n\t}\n\n\texport interface SvelteHead extends BaseElement {\n\t\ttype: 'SvelteHead';\n\t\tname: 'svelte:head';\n\t}\n\n\t/** This is only an intermediate representation while parsing, it doesn't exist in the final AST */\n\texport interface SvelteOptionsRaw extends BaseElement {\n\t\ttype: 'SvelteOptions';\n\t\tname: 'svelte:options';\n\t}\n\n\texport interface SvelteSelf extends BaseElement {\n\t\ttype: 'SvelteSelf';\n\t\tname: 'svelte:self';\n\t}\n\n\texport interface SvelteWindow extends BaseElement {\n\t\ttype: 'SvelteWindow';\n\t\tname: 'svelte:window';\n\t}\n\n\t/** An `{#each ...}` block */\n\texport interface EachBlock extends BaseNode {\n\t\ttype: 'EachBlock';\n\t\texpression: Expression;\n\t\t/** The `entry` in `{#each item as entry}`. `null` if `as` part is omitted */\n\t\tcontext: Pattern | null;\n\t\tbody: Fragment;\n\t\tfallback?: Fragment;\n\t\tindex?: string;\n\t\tkey?: Expression;\n\t}\n\n\t/** An `{#if ...}` block */\n\texport interface IfBlock extends BaseNode {\n\t\ttype: 'IfBlock';\n\t\telseif: boolean;\n\t\ttest: Expression;\n\t\tconsequent: Fragment;\n\t\talternate: Fragment | null;\n\t}\n\n\t/** An `{#await ...}` block */\n\texport interface AwaitBlock extends BaseNode {\n\t\ttype: 'AwaitBlock';\n\t\texpression: Expression;\n\t\t// TODO can/should we move these inside the ThenBlock and CatchBlock?\n\t\t/** The resolved value inside the `then` block */\n\t\tvalue: Pattern | null;\n\t\t/** The rejection reason inside the `catch` block */\n\t\terror: Pattern | null;\n\t\tpending: Fragment | null;\n\t\tthen: Fragment | null;\n\t\tcatch: Fragment | null;\n\t}\n\n\texport interface KeyBlock extends BaseNode {\n\t\ttype: 'KeyBlock';\n\t\texpression: Expression;\n\t\tfragment: Fragment;\n\t}\n\n\texport interface SnippetBlock extends BaseNode {\n\t\ttype: 'SnippetBlock';\n\t\texpression: Identifier;\n\t\tparameters: Pattern[];\n\t\ttypeParams?: string;\n\t\tbody: Fragment;\n\t}\n\n\texport interface Attribute extends BaseNode {\n\t\ttype: 'Attribute';\n\t\tname: string;\n\t\t/**\n\t\t * Quoted/string values are represented by an array, even if they contain a single expression like `\"{x}\"`\n\t\t */\n\t\tvalue:\n\t\t\t| true\n\t\t\t| ExpressionTag\n\t\t\t| Array<Text | ExpressionTag>;\n\t}\n\n\texport interface SpreadAttribute extends BaseNode {\n\t\ttype: 'SpreadAttribute';\n\t\texpression: Expression;\n\t}\n\n\texport interface Script extends BaseNode {\n\t\ttype: 'Script';\n\t\tcontext: 'default' | 'module';\n\t\tcontent: Program;\n\t\tattributes: Attribute[];\n\t}\n\n\texport interface JSComment {\n\t\ttype: 'Line' | 'Block';\n\t\tvalue: string;\n\t\tstart: number;\n\t\tend: number;\n\t\tloc: {\n\t\t\tstart: { line: number; column: number };\n\t\t\tend: { line: number; column: number };\n\t\t};\n\t}\n\n\texport type AttributeLike =\n\t\t| Attribute\n\t\t| SpreadAttribute\n\t\t| Directive;\n\n\texport type Directive =\n\t\t| AST.AnimateDirective\n\t\t| AST.BindDirective\n\t\t| AST.ClassDirective\n\t\t| AST.LetDirective\n\t\t| AST.OnDirective\n\t\t| AST.StyleDirective\n\t\t| AST.TransitionDirective\n\t\t| AST.UseDirective;\n\n\texport type Block =\n\t\t| AST.EachBlock\n\t\t| AST.IfBlock\n\t\t| AST.AwaitBlock\n\t\t| AST.KeyBlock\n\t\t| AST.SnippetBlock;\n\n\texport type ElementLike =\n\t\t| AST.Component\n\t\t| AST.TitleElement\n\t\t| AST.SlotElement\n\t\t| AST.RegularElement\n\t\t| AST.SvelteBody\n\t\t| AST.SvelteBoundary\n\t\t| AST.SvelteComponent\n\t\t| AST.SvelteDocument\n\t\t| AST.SvelteElement\n\t\t| AST.SvelteFragment\n\t\t| AST.SvelteHead\n\t\t| AST.SvelteOptionsRaw\n\t\t| AST.SvelteSelf\n\t\t| AST.SvelteWindow\n\t\t| AST.SvelteBoundary;\n\n\texport type Tag =\n\t\t| AST.AttachTag\n\t\t| AST.ConstTag\n\t\t| AST.DebugTag\n\t\t| AST.ExpressionTag\n\t\t| AST.HtmlTag\n\t\t| AST.RenderTag;\n\n\texport type TemplateNode =\n\t\t| AST.Root\n\t\t| AST.Text\n\t\t| Tag\n\t\t| ElementLike\n\t\t| AST.Attribute\n\t\t| AST.SpreadAttribute\n\t\t| Directive\n\t\t| AST.AttachTag\n\t\t| AST.Comment\n\t\t| Block;\n\n\texport type SvelteNode =\n\t\t| Node\n\t\t| TemplateNode\n\t\t| AST.Fragment\n\t\t| _CSS.Node\n\t\t| Script;\n\n\texport type { _CSS as CSS };\n}\n```\n\n</div>\n\n## CompileError\n\n<div class=\"ts-block\">\n\n```dts\ninterface CompileError extends ICompileDiagnostic {}\n```\n\n</div>\n\n## CompileOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface CompileOptions extends ModuleCompileOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nname?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nSets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope).\nIf unspecified, will be inferred from `filename`\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncustomElement?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\naccessors?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n- <span class=\"tag deprecated\">deprecated</span> This will have no effect in runes mode\n\n</div>\n\nIf `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nnamespace?: Namespace;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `'html'`\n\n</div>\n\nThe namespace of the element; e.g., `\"html\"`, `\"svg\"`, `\"mathml\"`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nimmutable?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n- <span class=\"tag deprecated\">deprecated</span> This will have no effect in runes mode\n\n</div>\n\nIf `true`, tells the compiler that you promise not to mutate any objects.\nThis allows it to be less conservative about checking whether values have changed.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncss?: 'injected' | 'external';\n```\n\n<div class=\"ts-block-property-details\">\n\n- `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root.\n- `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.\nThis is always `'injected'` when compiling with `customElement` mode.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncssHash?: CssHashGetter;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `undefined`\n\n</div>\n\nA function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.\nIt defaults to returning `svelte-${hash(filename ?? css)}`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npreserveComments?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, your HTML comments will be preserved in the output. By default, they are stripped out.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npreserveWhitespace?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, whitespace inside and between elements is kept as you typed it, rather than removed or collapsed to a single space where possible.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfragments?: 'html' | 'tree';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `'html'`\n- <span class=\"tag since\">available since</span> v5.33\n\n</div>\n\nWhich strategy to use when cloning DOM fragments:\n\n- `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)\n- `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrunes?: boolean | undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `undefined`\n\n</div>\n\nSet to `true` to force the compiler into runes mode, even if there are no indications of runes usage.\nSet to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.\nSet to `undefined` (the default) to infer runes mode from the component code.\nIs always `true` for JS/TS modules compiled with Svelte.\nWill be `true` by default in Svelte 6.\nNote that setting this to `true` in your `svelte.config.js` will force runes mode for your entire project, including components in `node_modules`,\nwhich is likely not what you want. If you're using Vite, consider using [dynamicCompileOptions](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) instead.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndiscloseVersion?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `true`\n\n</div>\n\nIf `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncompatibility?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> Use these only as a temporary solution before migrating your code\n\n</div>\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\ncomponentApi?: 4 | 5;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `5`\n\n</div>\n\nApplies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 —\nas a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`)\nor as an object with a `.render(...)` method when compiling for the server\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsourcemap?: object | string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `null`\n\n</div>\n\nAn initial sourcemap that will be merged into the final output sourcemap.\nThis is usually the preprocessor sourcemap.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\noutputFilename?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `null`\n\n</div>\n\nUsed for your JavaScript sourcemap.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncssOutputFilename?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `null`\n\n</div>\n\nUsed for your CSS sourcemap.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nhmr?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, compiles components with hot reloading support.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmodernAst?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, returns the modern version of the AST.\nWill become `true` by default in Svelte 6, and the option will be removed in Svelte 7.\n\n</div>\n</div></div>\n\n## CompileResult\n\nThe return value of `compile` from `svelte/compiler`\n\n<div class=\"ts-block\">\n\n```dts\ninterface CompileResult {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\njs: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nThe compiled JavaScript\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\ncode: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe generated code\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nmap: SourceMap;\n```\n\n<div class=\"ts-block-property-details\">\n\nA source map\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncss: null | {\n\t/** The generated code */\n\tcode: string;\n\t/** A source map */\n\tmap: SourceMap;\n\t/** Whether or not the CSS includes global rules */\n\thasGlobal: boolean;\n};\n```\n\n<div class=\"ts-block-property-details\">\n\nThe compiled CSS\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwarnings: Warning[];\n```\n\n<div class=\"ts-block-property-details\">\n\nAn array of warning objects that were generated during compilation. Each warning has several properties:\n- `code` is a string identifying the category of warning\n- `message` describes the issue in human-readable terms\n- `start` and `end`, if the warning relates to a specific location, are objects with `line`, `column` and `character` properties\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmetadata: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nMetadata about the compiled component\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nrunes: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether the file was compiled in runes mode, either because of an explicit option or inferred from usage.\nFor `compileModule`, this is always `true`\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nast: any;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe AST\n\n</div>\n</div></div>\n\n## MarkupPreprocessor\n\nA markup preprocessor that takes a string of code and returns a processed version.\n\n<div class=\"ts-block\">\n\n```dts\ntype MarkupPreprocessor = (options: {\n\t/**\n\t * The whole Svelte file content\n\t */\n\tcontent: string;\n\t/**\n\t * The filename of the Svelte file\n\t */\n\tfilename?: string;\n}) => Processed | void | Promise<Processed | void>;\n```\n\n</div>\n\n## ModuleCompileOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface ModuleCompileOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndev?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, causes extra code to be added that will perform runtime checks and provide debugging information during development.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngenerate?: 'client' | 'server' | false;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `'client'`\n\n</div>\n\nIf `\"client\"`, Svelte emits code designed to run in the browser.\nIf `\"server\"`, Svelte emits code suitable for server-side rendering.\nIf `false`, nothing is generated. Useful for tooling that is only interested in warnings.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfilename?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nUsed for debugging hints and sourcemaps. Your bundler plugin will set it automatically.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrootDir?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `process.cwd() on node-like environments, undefined elsewhere`\n\n</div>\n\nUsed for ensuring filenames don't leak filesystem information. Your bundler plugin will set it automatically.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwarningFilter?: (warning: Warning) => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that gets a `Warning` as an argument and returns a boolean.\nUse this to filter out warnings. Return `true` to keep the warning, `false` to discard it.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nexperimental?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v5.36\n\n</div>\n\nExperimental options\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nasync?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v5.36\n\n</div>\n\nAllow `await` keyword in deriveds, template expressions, and the top level of components\n\n</div>\n</div></div>\n\n</div>\n</div></div>\n\n## Preprocessor\n\nA script/style preprocessor that takes a string of code and returns a processed version.\n\n<div class=\"ts-block\">\n\n```dts\ntype Preprocessor = (options: {\n\t/**\n\t * The script/style tag content\n\t */\n\tcontent: string;\n\t/**\n\t * The attributes on the script/style tag\n\t */\n\tattributes: Record<string, string | boolean>;\n\t/**\n\t * The whole Svelte file content\n\t */\n\tmarkup: string;\n\t/**\n\t * The filename of the Svelte file\n\t */\n\tfilename?: string;\n}) => Processed | void | Promise<Processed | void>;\n```\n\n</div>\n\n## PreprocessorGroup\n\nA preprocessor group is a set of preprocessors that are applied to a Svelte file.\n\n<div class=\"ts-block\">\n\n```dts\ninterface PreprocessorGroup {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nname?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nName of the preprocessor. Will be a required option in the next major version\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmarkup?: MarkupPreprocessor;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstyle?: Preprocessor;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nscript?: Preprocessor;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## Processed\n\nThe result of a preprocessor run. If the preprocessor does not return a result, it is assumed that the code is unchanged.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Processed {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ncode: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe new code\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmap?: string | object;\n```\n\n<div class=\"ts-block-property-details\">\n\nA source map mapping back to the original code\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndependencies?: string[];\n```\n\n<div class=\"ts-block-property-details\">\n\nA list of additional files to watch for changes\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nattributes?: Record<string, string | boolean>;\n```\n\n<div class=\"ts-block-property-details\">\n\nOnly for script/style preprocessors: The updated attributes to set on the tag. If undefined, attributes stay unchanged.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntoString?: () => string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## Warning\n\n<div class=\"ts-block\">\n\n```dts\ninterface Warning extends ICompileDiagnostic {}\n```\n\n</div>",
+		"svelte/svelte-easing": "```js\n// @noErrors\nimport {\n\tbackIn,\n\tbackInOut,\n\tbackOut,\n\tbounceIn,\n\tbounceInOut,\n\tbounceOut,\n\tcircIn,\n\tcircInOut,\n\tcircOut,\n\tcubicIn,\n\tcubicInOut,\n\tcubicOut,\n\telasticIn,\n\telasticInOut,\n\telasticOut,\n\texpoIn,\n\texpoInOut,\n\texpoOut,\n\tlinear,\n\tquadIn,\n\tquadInOut,\n\tquadOut,\n\tquartIn,\n\tquartInOut,\n\tquartOut,\n\tquintIn,\n\tquintInOut,\n\tquintOut,\n\tsineIn,\n\tsineInOut,\n\tsineOut\n} from 'svelte/easing';\n```\n\n## backIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction backIn(t: number): number;\n```\n\n</div>\n\n\n\n## backInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction backInOut(t: number): number;\n```\n\n</div>\n\n\n\n## backOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction backOut(t: number): number;\n```\n\n</div>\n\n\n\n## bounceIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction bounceIn(t: number): number;\n```\n\n</div>\n\n\n\n## bounceInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction bounceInOut(t: number): number;\n```\n\n</div>\n\n\n\n## bounceOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction bounceOut(t: number): number;\n```\n\n</div>\n\n\n\n## circIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction circIn(t: number): number;\n```\n\n</div>\n\n\n\n## circInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction circInOut(t: number): number;\n```\n\n</div>\n\n\n\n## circOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction circOut(t: number): number;\n```\n\n</div>\n\n\n\n## cubicIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction cubicIn(t: number): number;\n```\n\n</div>\n\n\n\n## cubicInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction cubicInOut(t: number): number;\n```\n\n</div>\n\n\n\n## cubicOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction cubicOut(t: number): number;\n```\n\n</div>\n\n\n\n## elasticIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction elasticIn(t: number): number;\n```\n\n</div>\n\n\n\n## elasticInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction elasticInOut(t: number): number;\n```\n\n</div>\n\n\n\n## elasticOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction elasticOut(t: number): number;\n```\n\n</div>\n\n\n\n## expoIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction expoIn(t: number): number;\n```\n\n</div>\n\n\n\n## expoInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction expoInOut(t: number): number;\n```\n\n</div>\n\n\n\n## expoOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction expoOut(t: number): number;\n```\n\n</div>\n\n\n\n## linear\n\n<div class=\"ts-block\">\n\n```dts\nfunction linear(t: number): number;\n```\n\n</div>\n\n\n\n## quadIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction quadIn(t: number): number;\n```\n\n</div>\n\n\n\n## quadInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quadInOut(t: number): number;\n```\n\n</div>\n\n\n\n## quadOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quadOut(t: number): number;\n```\n\n</div>\n\n\n\n## quartIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction quartIn(t: number): number;\n```\n\n</div>\n\n\n\n## quartInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quartInOut(t: number): number;\n```\n\n</div>\n\n\n\n## quartOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quartOut(t: number): number;\n```\n\n</div>\n\n\n\n## quintIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction quintIn(t: number): number;\n```\n\n</div>\n\n\n\n## quintInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quintInOut(t: number): number;\n```\n\n</div>\n\n\n\n## quintOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quintOut(t: number): number;\n```\n\n</div>\n\n\n\n## sineIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction sineIn(t: number): number;\n```\n\n</div>\n\n\n\n## sineInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction sineInOut(t: number): number;\n```\n\n</div>\n\n\n\n## sineOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction sineOut(t: number): number;\n```\n\n</div>",
+		"svelte/svelte-events": "```js\n// @noErrors\nimport { on } from 'svelte/events';\n```\n\n## on\n\nAttaches an event handler to the window and returns a function that removes the handler. Using this\nrather than `addEventListener` will preserve the correct order relative to handlers added declaratively\n(with attributes like `onclick`), which use event delegation for performance reasons\n\n<div class=\"ts-block\">\n\n```dts\nfunction on<Type extends keyof WindowEventMap>(\n\twindow: Window,\n\ttype: Type,\n\thandler: (\n\t\tthis: Window,\n\t\tevent: WindowEventMap[Type]\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction on<Type extends keyof DocumentEventMap>(\n\tdocument: Document,\n\ttype: Type,\n\thandler: (\n\t\tthis: Document,\n\t\tevent: DocumentEventMap[Type]\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction on<\n\tElement extends HTMLElement,\n\tType extends keyof HTMLElementEventMap\n>(\n\telement: Element,\n\ttype: Type,\n\thandler: (\n\t\tthis: Element,\n\t\tevent: HTMLElementEventMap[Type]\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction on<\n\tElement extends MediaQueryList,\n\tType extends keyof MediaQueryListEventMap\n>(\n\telement: Element,\n\ttype: Type,\n\thandler: (\n\t\tthis: Element,\n\t\tevent: MediaQueryListEventMap[Type]\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction on(\n\telement: EventTarget,\n\ttype: string,\n\thandler: EventListener,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>",
+		"svelte/svelte-legacy": "This module provides various functions for use during the migration, since some features can't be replaced one to one with new features. All imports are marked as deprecated and should be migrated away from over time.\n\n\n\n```js\n// @noErrors\nimport {\n\tasClassComponent,\n\tcreateBubbler,\n\tcreateClassComponent,\n\thandlers,\n\tnonpassive,\n\tonce,\n\tpassive,\n\tpreventDefault,\n\trun,\n\tself,\n\tstopImmediatePropagation,\n\tstopPropagation,\n\ttrusted\n} from 'svelte/legacy';\n```\n\n## asClassComponent\n\n<blockquote class=\"tag deprecated note\">\n\nUse this only as a temporary solution to migrate your imperative component code to Svelte 5.\n\n</blockquote>\n\nTakes the component function and returns a Svelte 4 compatible component constructor.\n\n<div class=\"ts-block\">\n\n```dts\nfunction asClassComponent<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>,\n\tEvents extends Record<string, any>,\n\tSlots extends Record<string, any>\n>(\n\tcomponent:\n\t\t| SvelteComponent<Props, Events, Slots>\n\t\t| Component<Props>\n): ComponentType<\n\tSvelteComponent<Props, Events, Slots> & Exports\n>;\n```\n\n</div>\n\n\n\n## createBubbler\n\n<blockquote class=\"tag deprecated note\">\n\nUse this only as a temporary solution to migrate your automatically delegated events in Svelte 5.\n\n</blockquote>\n\nFunction to create a `bubble` function that mimic the behavior of `on:click` without handler available in svelte 4.\n\n<div class=\"ts-block\">\n\n```dts\nfunction createBubbler(): (\n\ttype: string\n) => (event: Event) => boolean;\n```\n\n</div>\n\n\n\n## createClassComponent\n\n<blockquote class=\"tag deprecated note\">\n\nUse this only as a temporary solution to migrate your imperative component code to Svelte 5.\n\n</blockquote>\n\nTakes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.\n\n<div class=\"ts-block\">\n\n```dts\nfunction createClassComponent<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>,\n\tEvents extends Record<string, any>,\n\tSlots extends Record<string, any>\n>(\n\toptions: ComponentConstructorOptions<Props> & {\n\t\tcomponent:\n\t\t\t| ComponentType<SvelteComponent<Props, Events, Slots>>\n\t\t\t| Component<Props>;\n\t}\n): SvelteComponent<Props, Events, Slots> & Exports;\n```\n\n</div>\n\n\n\n## handlers\n\nFunction to mimic the multiple listeners available in svelte 4\n\n<div class=\"ts-block\">\n\n```dts\nfunction handlers(\n\t...handlers: EventListener[]\n): EventListener;\n```\n\n</div>\n\n\n\n## nonpassive\n\nSubstitute for the `nonpassive` event modifier, implemented as an action\n\n<div class=\"ts-block\">\n\n```dts\nfunction nonpassive(\n\tnode: HTMLElement,\n\t[event, handler]: [\n\t\tevent: string,\n\t\thandler: () => EventListener\n\t]\n): void;\n```\n\n</div>\n\n\n\n## once\n\nSubstitute for the `once` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction once(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## passive\n\nSubstitute for the `passive` event modifier, implemented as an action\n\n<div class=\"ts-block\">\n\n```dts\nfunction passive(\n\tnode: HTMLElement,\n\t[event, handler]: [\n\t\tevent: string,\n\t\thandler: () => EventListener\n\t]\n): void;\n```\n\n</div>\n\n\n\n## preventDefault\n\nSubstitute for the `preventDefault` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction preventDefault(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## run\n\n<blockquote class=\"tag deprecated note\">\n\nUse this only as a temporary solution to migrate your component code to Svelte 5.\n\n</blockquote>\n\nRuns the given function once immediately on the server, and works like `$effect.pre` on the client.\n\n<div class=\"ts-block\">\n\n```dts\nfunction run(fn: () => void | (() => void)): void;\n```\n\n</div>\n\n\n\n## self\n\nSubstitute for the `self` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction self(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## stopImmediatePropagation\n\nSubstitute for the `stopImmediatePropagation` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction stopImmediatePropagation(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## stopPropagation\n\nSubstitute for the `stopPropagation` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction stopPropagation(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## trusted\n\nSubstitute for the `trusted` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction trusted(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## LegacyComponentType\n\nSupport using the component as both a class and function during the transition period\n\n<div class=\"ts-block\">\n\n```dts\ntype LegacyComponentType = {\n\tnew (o: ComponentConstructorOptions): SvelteComponent;\n\t(\n\t\t...args: Parameters<Component<Record<string, any>>>\n\t): ReturnType<\n\t\tComponent<Record<string, any>, Record<string, any>>\n\t>;\n};\n```\n\n</div>",
+		"svelte/svelte-motion": "```js\n// @noErrors\nimport {\n\tSpring,\n\tTween,\n\tprefersReducedMotion,\n\tspring,\n\ttweened\n} from 'svelte/motion';\n```\n\n## Spring\n\n<blockquote class=\"since note\">\n\nAvailable since 5.8.0\n\n</blockquote>\n\nA wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to\nmove towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters.\n\n```svelte\n<script>\n\timport { Spring } from 'svelte/motion';\n\n\tconst spring = new Spring(0);\n</script>\n\n<input type=\"range\" bind:value={spring.target} />\n<input type=\"range\" bind:value={spring.current} disabled />\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass Spring<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(value: T, options?: SpringOpts);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstatic of<U>(fn: () => U, options?: SpringOpts): Spring<U>;\n```\n\n<div class=\"ts-block-property-details\">\n\nCreate a spring whose value is bound to the return value of `fn`. This must be called\ninside an effect root (for example, during component initialisation).\n\n```svelte\n<script>\n\timport { Spring } from 'svelte/motion';\n\n\tlet { number } = $props();\n\n\tconst spring = Spring.of(() => number);\n</script>\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset(value: T, options?: SpringUpdateOpts): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nSets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.\n\nIf `options.instant` is `true`, `spring.current` immediately matches `spring.target`.\n\nIf `options.preserveMomentum` is provided, the spring will continue on its current trajectory for\nthe specified number of milliseconds. This is useful for things like 'fling' gestures.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndamping: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprecision: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstiffness: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntarget: T;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe end value of the spring.\nThis property only exists on the `Spring` class, not the legacy `spring` store.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nget current(): T;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe current value of the spring.\nThis property only exists on the `Spring` class, not the legacy `spring` store.\n\n</div>\n</div></div>\n\n\n\n## Tween\n\n<blockquote class=\"since note\">\n\nAvailable since 5.8.0\n\n</blockquote>\n\nA wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to\nmove towards it over time, taking account of the `delay`, `duration` and `easing` options.\n\n```svelte\n<script>\n\timport { Tween } from 'svelte/motion';\n\n\tconst tween = new Tween(0);\n</script>\n\n<input type=\"range\" bind:value={tween.target} />\n<input type=\"range\" bind:value={tween.current} disabled />\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass Tween<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatic of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;\n```\n\n<div class=\"ts-block-property-details\">\n\nCreate a tween whose value is bound to the return value of `fn`. This must be called\ninside an effect root (for example, during component initialisation).\n\n```svelte\n<script>\n\timport { Tween } from 'svelte/motion';\n\n\tlet { number } = $props();\n\n\tconst tween = Tween.of(() => number);\n</script>\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(value: T, options?: TweenedOptions<T>);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset(value: T, options?: TweenedOptions<T> | undefined): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nSets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.\n\nIf `options` are provided, they will override the tween's defaults.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nget current(): T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset target(v: T);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nget target(): T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## prefersReducedMotion\n\n<blockquote class=\"since note\">\n\nAvailable since 5.7.0\n\n</blockquote>\n\nA [media query](/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).\n\n```svelte\n<script>\n\timport { prefersReducedMotion } from 'svelte/motion';\n\timport { fly } from 'svelte/transition';\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>\n\ttoggle\n</button>\n\n{#if visible}\n\t<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>\n\t\tflies in, unless the user prefers reduced motion\n\t</p>\n{/if}\n```\n\n<div class=\"ts-block\">\n\n```dts\nconst prefersReducedMotion: MediaQuery;\n```\n\n</div>\n\n\n\n## spring\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`Spring`](/docs/svelte/svelte-motion#Spring) instead\n\n</blockquote>\n\nThe spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it \"bounces\" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.\n\n<div class=\"ts-block\">\n\n```dts\nfunction spring<T = any>(\n\tvalue?: T | undefined,\n\topts?: SpringOpts | undefined\n): Spring<T>;\n```\n\n</div>\n\n\n\n## tweened\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`Tween`](/docs/svelte/svelte-motion#Tween) instead\n\n</blockquote>\n\nA tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.\n\n<div class=\"ts-block\">\n\n```dts\nfunction tweened<T>(\n\tvalue?: T | undefined,\n\tdefaults?: TweenedOptions<T> | undefined\n): Tweened<T>;\n```\n\n</div>\n\n\n\n## Spring\n\n<div class=\"ts-block\">\n\n```dts\ninterface Spring<T> extends Readable<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nset(new_value: T, opts?: SpringUpdateOpts): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nupdate: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsubscribe(fn: (value: T) => void): Unsubscriber;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprecision: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndamping: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstiffness: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## Tweened\n\n<div class=\"ts-block\">\n\n```dts\ninterface Tweened<T> extends Readable<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nset(value: T, opts?: TweenedOptions<T>): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nupdate(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-reactivity-window": "This module exports reactive versions of various `window` values, each of which has a reactive `current` property that you can reference in reactive contexts (templates, [deriveds]($derived) and [effects]($effect)) without using [`<svelte:window>`](svelte-window) bindings or manually creating your own event listeners.\n\n```svelte\n<script>\n\timport { innerWidth, innerHeight } from 'svelte/reactivity/window';\n</script>\n\n<p>{innerWidth.current}x{innerHeight.current}</p>\n```\n\n\n\n```js\n// @noErrors\nimport {\n\tdevicePixelRatio,\n\tinnerHeight,\n\tinnerWidth,\n\tonline,\n\touterHeight,\n\touterWidth,\n\tscreenLeft,\n\tscreenTop,\n\tscrollX,\n\tscrollY\n} from 'svelte/reactivity/window';\n```\n\n## devicePixelRatio\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`.\nNote that behaviour differs between browsers — on Chrome it will respond to the current zoom level,\non Firefox and Safari it won't.\n\n<div class=\"ts-block\">\n\n```dts\nconst devicePixelRatio: {\n\tget current(): number | undefined;\n};\n```\n\n</div>\n\n\n\n## innerHeight\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst innerHeight: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## innerWidth\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst innerWidth: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## online\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst online: ReactiveValue<boolean | undefined>;\n```\n\n</div>\n\n\n\n## outerHeight\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst outerHeight: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## outerWidth\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst outerWidth: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## screenLeft\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`screenLeft.current` is a reactive view of `window.screenLeft`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst screenLeft: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## screenTop\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`screenTop.current` is a reactive view of `window.screenTop`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst screenTop: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## scrollX\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst scrollX: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## scrollY\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst scrollY: ReactiveValue<number | undefined>;\n```\n\n</div>",
+		"svelte/svelte-reactivity": "Svelte provides reactive versions of various built-ins like [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) that can be used just like their native counterparts, as well as a handful of additional utilities for handling reactivity.\n\n\n\n```js\n// @noErrors\nimport {\n\tMediaQuery,\n\tSvelteDate,\n\tSvelteMap,\n\tSvelteSet,\n\tSvelteURL,\n\tSvelteURLSearchParams,\n\tcreateSubscriber\n} from 'svelte/reactivity';\n```\n\n## MediaQuery\n\n<blockquote class=\"since note\">\n\nAvailable since 5.7.0\n\n</blockquote>\n\nCreates a media query and provides a `current` property that reflects whether or not it matches.\n\nUse it carefully — during server-side rendering, there is no way to know what the correct value should be, potentially causing content to change upon hydration.\nIf you can use the media query in CSS to achieve the same effect, do that.\n\n```svelte\n<script>\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tconst large = new MediaQuery('min-width: 800px');\n</script>\n\n<h1>{large.current ? 'large screen' : 'small screen'}</h1>\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass MediaQuery extends ReactiveValue<boolean> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(query: string, fallback?: boolean | undefined);\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `query` A media query string\n- `fallback` Fallback value for the server\n\n</div>\n\n</div>\n</div></div>\n\n\n\n## SvelteDate\n\nA reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.\nReading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat))\nin an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated when the value of the date changes.\n\n```svelte\n<script>\n\timport { SvelteDate } from 'svelte/reactivity';\n\n\tconst date = new SvelteDate();\n\n\tconst formatter = new Intl.DateTimeFormat(undefined, {\n\t  hour: 'numeric',\n\t  minute: 'numeric',\n\t  second: 'numeric'\n\t});\n\n\t$effect(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tdate.setTime(Date.now());\n\t\t}, 1000);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<p>The time is {formatter.format(date)}</p>\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteDate extends Date {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(...params: any[]);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## SvelteMap\n\nA reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.\nReading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated as necessary when the map is updated.\n\nNote that values in a reactive map are _not_ made [deeply reactive](/docs/svelte/$state#Deep-state).\n\n```svelte\n<script>\n\timport { SvelteMap } from 'svelte/reactivity';\n\timport { result } from './game.js';\n\n\tlet board = new SvelteMap();\n\tlet player = $state('x');\n\tlet winner = $derived(result(board));\n\n\tfunction reset() {\n\t\tplayer = 'x';\n\t\tboard.clear();\n\t}\n</script>\n\n<div class=\"board\">\n\t{#each Array(9), i}\n\t\t<button\n\t\t\tdisabled={board.has(i) || winner}\n\t\t\tonclick={() => {\n\t\t\t\tboard.set(i, player);\n\t\t\t\tplayer = player === 'x' ? 'o' : 'x';\n\t\t\t}}\n\t\t>{board.get(i)}</button>\n\t{/each}\n</div>\n\n{#if winner}\n\t<p>{winner} wins!</p>\n\t<button onclick={reset}>reset</button>\n{:else}\n\t<p>{player} is next</p>\n{/if}\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteMap<K, V> extends Map<K, V> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(value?: Iterable<readonly [K, V]> | null | undefined);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset(key: K, value: V): this;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## SvelteSet\n\nA reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.\nReading contents of the set (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated as necessary when the set is updated.\n\nNote that values in a reactive set are _not_ made [deeply reactive](/docs/svelte/$state#Deep-state).\n\n```svelte\n<script>\n\timport { SvelteSet } from 'svelte/reactivity';\n\tlet monkeys = new SvelteSet();\n\n\tfunction toggle(monkey) {\n\t\tif (monkeys.has(monkey)) {\n\t\t\tmonkeys.delete(monkey);\n\t\t} else {\n\t\t\tmonkeys.add(monkey);\n\t\t}\n\t}\n</script>\n\n{#each ['🙈', '🙉', '🙊'] as monkey}\n\t<button onclick={() => toggle(monkey)}>{monkey}</button>\n{/each}\n\n<button onclick={() => monkeys.clear()}>clear</button>\n\n{#if monkeys.has('🙈')}<p>see no evil</p>{/if}\n{#if monkeys.has('🙉')}<p>hear no evil</p>{/if}\n{#if monkeys.has('🙊')}<p>speak no evil</p>{/if}\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteSet<T> extends Set<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(value?: Iterable<T> | null | undefined);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nadd(value: T): this;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## SvelteURL\n\nA reactive version of the built-in [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.\nReading properties of the URL (such as `url.href` or `url.pathname`) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated as necessary when the URL changes.\n\nThe `searchParams` property is an instance of [SvelteURLSearchParams](/docs/svelte/svelte-reactivity#SvelteURLSearchParams).\n\n[Example](/playground/5a694758901b448c83dc40dc31c71f2a):\n\n```svelte\n<script>\n\timport { SvelteURL } from 'svelte/reactivity';\n\n\tconst url = new SvelteURL('https://example.com/path');\n</script>\n\n<!-- changes to these... -->\n<input bind:value={url.protocol} />\n<input bind:value={url.hostname} />\n<input bind:value={url.pathname} />\n\n<hr />\n\n<!-- will update `href` and vice versa -->\n<input bind:value={url.href} size=\"65\" />\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteURL extends URL {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nget searchParams(): SvelteURLSearchParams;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## SvelteURLSearchParams\n\nA reactive version of the built-in [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object.\nReading its contents (by iterating, or by calling `params.get(...)` or `params.getAll(...)` as in the [example](/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated as necessary when the params are updated.\n\n```svelte\n<script>\n\timport { SvelteURLSearchParams } from 'svelte/reactivity';\n\n\tconst params = new SvelteURLSearchParams('message=hello');\n\n\tlet key = $state('key');\n\tlet value = $state('value');\n</script>\n\n<input bind:value={key} />\n<input bind:value={value} />\n<button onclick={() => params.append(key, value)}>append</button>\n\n<p>?{params.toString()}</p>\n\n{#each params as [key, value]}\n\t<p>{key}: {value}</p>\n{/each}\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteURLSearchParams extends URLSearchParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n[REPLACE](params: URLSearchParams): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## createSubscriber\n\n<blockquote class=\"since note\">\n\nAvailable since 5.7.0\n\n</blockquote>\n\nReturns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.\nIt's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.\n\nIf `subscribe` is called inside an effect (including indirectly, for example inside a getter),\nthe `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.\n\nIf `start` returns a cleanup function, it will be called when the effect is destroyed.\n\nIf `subscribe` is called in multiple effects, `start` will only be called once as long as the effects\nare active, and the returned teardown function will only be called when all effects are destroyed.\n\nIt's best understood with an example. Here's an implementation of [`MediaQuery`](/docs/svelte/svelte-reactivity#MediaQuery):\n\n```js\n// @errors: 7031\nimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction createSubscriber(\n\tstart: (update: () => void) => (() => void) | void\n): () => void;\n```\n\n</div>",
+		"svelte/svelte-server": "```js\n// @noErrors\nimport { render } from 'svelte/server';\n```\n\n## render\n\nOnly available on the server and when compiling with the `server` option.\nTakes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.\n\n<div class=\"ts-block\">\n\n```dts\nfunction render<\n\tComp extends SvelteComponent<any> | Component<any>,\n\tProps extends ComponentProps<Comp> = ComponentProps<Comp>\n>(\n\t...args: {} extends Props\n\t\t? [\n\t\t\t\tcomponent: Comp extends SvelteComponent<any>\n\t\t\t\t\t? ComponentType<Comp>\n\t\t\t\t\t: Comp,\n\t\t\t\toptions?: {\n\t\t\t\t\tprops?: Omit<Props, '$$slots' | '$$events'>;\n\t\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\t\tidPrefix?: string;\n\t\t\t\t}\n\t\t\t]\n\t\t: [\n\t\t\t\tcomponent: Comp extends SvelteComponent<any>\n\t\t\t\t\t? ComponentType<Comp>\n\t\t\t\t\t: Comp,\n\t\t\t\toptions: {\n\t\t\t\t\tprops: Omit<Props, '$$slots' | '$$events'>;\n\t\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\t\tidPrefix?: string;\n\t\t\t\t}\n\t\t\t]\n): RenderOutput;\n```\n\n</div>",
+		"svelte/svelte-store": "```js\n// @noErrors\nimport {\n\tderived,\n\tfromStore,\n\tget,\n\treadable,\n\treadonly,\n\ttoStore,\n\twritable\n} from 'svelte/store';\n```\n\n## derived\n\nDerived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\n\n<div class=\"ts-block\">\n\n```dts\nfunction derived<S extends Stores, T>(\n\tstores: S,\n\tfn: (\n\t\tvalues: StoresValues<S>,\n\t\tset: (value: T) => void,\n\t\tupdate: (fn: Updater<T>) => void\n\t) => Unsubscriber | void,\n\tinitial_value?: T | undefined\n): Readable<T>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction derived<S extends Stores, T>(\n\tstores: S,\n\tfn: (values: StoresValues<S>) => T,\n\tinitial_value?: T | undefined\n): Readable<T>;\n```\n\n</div>\n\n\n\n## fromStore\n\n<div class=\"ts-block\">\n\n```dts\nfunction fromStore<V>(store: Writable<V>): {\n\tcurrent: V;\n};\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction fromStore<V>(store: Readable<V>): {\n\treadonly current: V;\n};\n```\n\n</div>\n\n\n\n## get\n\nGet the current value from a store by subscribing and immediately unsubscribing.\n\n<div class=\"ts-block\">\n\n```dts\nfunction get<T>(store: Readable<T>): T;\n```\n\n</div>\n\n\n\n## readable\n\nCreates a `Readable` store that allows reading by subscription.\n\n<div class=\"ts-block\">\n\n```dts\nfunction readable<T>(\n\tvalue?: T | undefined,\n\tstart?: StartStopNotifier<T> | undefined\n): Readable<T>;\n```\n\n</div>\n\n\n\n## readonly\n\nTakes a store and returns a new one derived from the old one that is readable.\n\n<div class=\"ts-block\">\n\n```dts\nfunction readonly<T>(store: Readable<T>): Readable<T>;\n```\n\n</div>\n\n\n\n## toStore\n\n<div class=\"ts-block\">\n\n```dts\nfunction toStore<V>(\n\tget: () => V,\n\tset: (v: V) => void\n): Writable<V>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction toStore<V>(get: () => V): Readable<V>;\n```\n\n</div>\n\n\n\n## writable\n\nCreate a `Writable` store that allows both updating and reading by subscription.\n\n<div class=\"ts-block\">\n\n```dts\nfunction writable<T>(\n\tvalue?: T | undefined,\n\tstart?: StartStopNotifier<T> | undefined\n): Writable<T>;\n```\n\n</div>\n\n\n\n## Readable\n\nReadable interface for subscribing.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Readable<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nsubscribe(this: void, run: Subscriber<T>, invalidate?: () => void): Unsubscriber;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `run` subscription callback\n- `invalidate` cleanup callback\n\n</div>\n\nSubscribe on value changes.\n\n</div>\n</div></div>\n\n## StartStopNotifier\n\nStart and stop notification callbacks.\nThis function is called when the first subscriber subscribes.\n\n<div class=\"ts-block\">\n\n```dts\ntype StartStopNotifier<T> = (\n\tset: (value: T) => void,\n\tupdate: (fn: Updater<T>) => void\n) => void | (() => void);\n```\n\n</div>\n\n## Subscriber\n\nCallback to inform of a value updates.\n\n<div class=\"ts-block\">\n\n```dts\ntype Subscriber<T> = (value: T) => void;\n```\n\n</div>\n\n## Unsubscriber\n\nUnsubscribes from value updates.\n\n<div class=\"ts-block\">\n\n```dts\ntype Unsubscriber = () => void;\n```\n\n</div>\n\n## Updater\n\nCallback to update a value.\n\n<div class=\"ts-block\">\n\n```dts\ntype Updater<T> = (value: T) => T;\n```\n\n</div>\n\n## Writable\n\nWritable interface for both updating and subscribing.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Writable<T> extends Readable<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nset(this: void, value: T): void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `value` to set\n\n</div>\n\nSet value and inform subscribers.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nupdate(this: void, updater: Updater<T>): void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `updater` callback\n\n</div>\n\nUpdate value using callback and inform subscribers.\n\n</div>\n</div></div>",
+		"svelte/svelte-transition": "```js\n// @noErrors\nimport {\n\tblur,\n\tcrossfade,\n\tdraw,\n\tfade,\n\tfly,\n\tscale,\n\tslide\n} from 'svelte/transition';\n```\n\n## blur\n\nAnimates a `blur` filter alongside an element's opacity.\n\n<div class=\"ts-block\">\n\n```dts\nfunction blur(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tamount,\n\t\topacity\n\t}?: BlurParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## crossfade\n\nThe `crossfade` function creates a pair of [transitions](/docs/svelte/transition) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.\n\n<div class=\"ts-block\">\n\n```dts\nfunction crossfade({\n\tfallback,\n\t...defaults\n}: CrossfadeParams & {\n\tfallback?: (\n\t\tnode: Element,\n\t\tparams: CrossfadeParams,\n\t\tintro: boolean\n\t) => TransitionConfig;\n}): [\n\t(\n\t\tnode: any,\n\t\tparams: CrossfadeParams & {\n\t\t\tkey: any;\n\t\t}\n\t) => () => TransitionConfig,\n\t(\n\t\tnode: any,\n\t\tparams: CrossfadeParams & {\n\t\t\tkey: any;\n\t\t}\n\t) => () => TransitionConfig\n];\n```\n\n</div>\n\n\n\n## draw\n\nAnimates the stroke of an SVG element, like a snake in a tube. `in` transitions begin with the path invisible and draw the path to the screen over time. `out` transitions start in a visible state and gradually erase the path. `draw` only works with elements that have a `getTotalLength` method, like `<path>` and `<polyline>`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction draw(\n\tnode: SVGElement & {\n\t\tgetTotalLength(): number;\n\t},\n\t{\n\t\tdelay,\n\t\tspeed,\n\t\tduration,\n\t\teasing\n\t}?: DrawParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## fade\n\nAnimates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions.\n\n<div class=\"ts-block\">\n\n```dts\nfunction fade(\n\tnode: Element,\n\t{ delay, duration, easing }?: FadeParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## fly\n\nAnimates the x and y positions and the opacity of an element. `in` transitions animate from the provided values, passed as parameters to the element's default values. `out` transitions animate from the element's default values to the provided values.\n\n<div class=\"ts-block\">\n\n```dts\nfunction fly(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tx,\n\t\ty,\n\t\topacity\n\t}?: FlyParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## scale\n\nAnimates the opacity and scale of an element. `in` transitions animate from the provided values, passed as parameters, to an element's current (default) values. `out` transitions animate from an element's default values to the provided values.\n\n<div class=\"ts-block\">\n\n```dts\nfunction scale(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tstart,\n\t\topacity\n\t}?: ScaleParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## slide\n\nSlides an element in and out.\n\n<div class=\"ts-block\">\n\n```dts\nfunction slide(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\taxis\n\t}?: SlideParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## BlurParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface BlurParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\namount?: number | string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nopacity?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## CrossfadeParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface CrossfadeParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number | ((len: number) => number);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## DrawParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface DrawParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nspeed?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number | ((len: number) => number);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## EasingFunction\n\n<div class=\"ts-block\">\n\n```dts\ntype EasingFunction = (t: number) => number;\n```\n\n</div>\n\n## FadeParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface FadeParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## FlyParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface FlyParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nx?: number | string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ny?: number | string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nopacity?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## ScaleParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface ScaleParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstart?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nopacity?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## SlideParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface SlideParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\naxis?: 'x' | 'y';\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## TransitionConfig\n\n<div class=\"ts-block\">\n\n```dts\ninterface TransitionConfig {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncss?: (t: number, u: number) => string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntick?: (t: number, u: number) => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/compiler-errors": "<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### animation_duplicate\n\n```\nAn element can only have one 'animate' directive\n```\n\n### animation_invalid_placement\n\n```\nAn element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block\n```\n\n### animation_missing_key\n\n```\nAn element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block?\n```\n\n### attribute_contenteditable_dynamic\n\n```\n'contenteditable' attribute cannot be dynamic if element uses two-way binding\n```\n\n### attribute_contenteditable_missing\n\n```\n'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings\n```\n\n### attribute_duplicate\n\n```\nAttributes need to be unique\n```\n\n### attribute_empty_shorthand\n\n```\nAttribute shorthand cannot be empty\n```\n\n### attribute_invalid_event_handler\n\n```\nEvent attribute must be a JavaScript expression, not a string\n```\n\n### attribute_invalid_multiple\n\n```\n'multiple' attribute must be static if select uses two-way binding\n```\n\n### attribute_invalid_name\n\n```\n'%name%' is not a valid attribute name\n```\n\n### attribute_invalid_sequence_expression\n\n```\nSequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses\n```\n\n### attribute_invalid_type\n\n```\n'type' attribute must be a static text value if input uses two-way binding\n```\n\n### attribute_unquoted_sequence\n\n```\nAttribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression\n```\n\n### bind_group_invalid_expression\n\n```\n`bind:group` can only bind to an Identifier or MemberExpression\n```\n\n### bind_group_invalid_snippet_parameter\n\n```\nCannot `bind:group` to a snippet parameter\n```\n\n### bind_invalid_expression\n\n```\nCan only bind to an Identifier or MemberExpression or a `{get, set}` pair\n```\n\n### bind_invalid_name\n\n```\n`bind:%name%` is not a valid binding\n```\n\n```\n`bind:%name%` is not a valid binding. %explanation%\n```\n\n### bind_invalid_parens\n\n```\n`bind:%name%={get, set}` must not have surrounding parentheses\n```\n\n### bind_invalid_target\n\n```\n`bind:%name%` can only be used with %elements%\n```\n\n### bind_invalid_value\n\n```\nCan only bind to state or props\n```\n\n### bindable_invalid_location\n\n```\n`$bindable()` can only be used inside a `$props()` declaration\n```\n\n### block_duplicate_clause\n\n```\n%name% cannot appear more than once within a block\n```\n\n### block_invalid_continuation_placement\n\n```\n{:...} block is invalid at this position (did you forget to close the preceding element or block?)\n```\n\n### block_invalid_elseif\n\n```\n'elseif' should be 'else if'\n```\n\n### block_invalid_placement\n\n```\n{#%name% ...} block cannot be %location%\n```\n\n### block_unclosed\n\n```\nBlock was left open\n```\n\n### block_unexpected_character\n\n```\nExpected a `%character%` character immediately following the opening bracket\n```\n\n### block_unexpected_close\n\n```\nUnexpected block closing tag\n```\n\n### component_invalid_directive\n\n```\nThis type of directive is not valid on components\n```\n\n### const_tag_cycle\n\n```\nCyclical dependency detected: %cycle%\n```\n\n### const_tag_invalid_expression\n\n```\n{@const ...} must consist of a single variable declaration\n```\n\n### const_tag_invalid_placement\n\n```\n`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`\n```\n\n### const_tag_invalid_reference\n\n```\nThe `{@const %name% = ...}` declaration is not available in this snippet \n```\n\nThe following is an error:\n\n```svelte\n<svelte:boundary>\n    {@const foo = 'bar'}\n\n    {#snippet failed()}\n        {foo}\n    {/snippet}\n</svelte:boundary>\n```\n\nHere, `foo` is not available inside `failed`. The top level code inside `<svelte:boundary>` becomes part of the implicit `children` snippet, in other words the above code is equivalent to this:\n\n```svelte\n<svelte:boundary>\n    {#snippet children()}\n        {@const foo = 'bar'}\n    {/snippet}\n\n    {#snippet failed()}\n        {foo}\n    {/snippet}\n</svelte:boundary>\n```\n\nThe same applies to components:\n\n```svelte\n<Component>\n    {@const foo = 'bar'}\n\n    {#snippet someProp()}\n        <!-- error -->\n        {foo}\n    {/snippet}\n</Component>\n```\n\n### constant_assignment\n\n```\nCannot assign to %thing%\n```\n\n### constant_binding\n\n```\nCannot bind to %thing%\n```\n\n### css_empty_declaration\n\n```\nDeclaration cannot be empty\n```\n\n### css_expected_identifier\n\n```\nExpected a valid CSS identifier\n```\n\n### css_global_block_invalid_combinator\n\n```\nA `:global` selector cannot follow a `%name%` combinator\n```\n\n### css_global_block_invalid_declaration\n\n```\nA top-level `:global {...}` block can only contain rules, not declarations\n```\n\n### css_global_block_invalid_list\n\n```\nA `:global` selector cannot be part of a selector list with entries that don't contain `:global`\n```\n\nThe following CSS is invalid:\n\n```css\n:global, x {\n    y {\n        color: red;\n    }\n}\n```\n\nThis is mixing a `:global` block, which means \"everything in here is unscoped\", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors:\n\n```css\n:global {\n    y {\n        color: red;\n    }\n}\n\nx y {\n    color: red;\n}\n```\n\n### css_global_block_invalid_modifier\n\n```\nA `:global` selector cannot modify an existing selector\n```\n\n### css_global_block_invalid_modifier_start\n\n```\nA `:global` selector can only be modified if it is a descendant of other selectors\n```\n\n### css_global_block_invalid_placement\n\n```\nA `:global` selector cannot be inside a pseudoclass\n```\n\n### css_global_invalid_placement\n\n```\n`:global(...)` can be at the start or end of a selector sequence, but not in the middle\n```\n\n### css_global_invalid_selector\n\n```\n`:global(...)` must contain exactly one selector\n```\n\n### css_global_invalid_selector_list\n\n```\n`:global(...)` must not contain type or universal selectors when used in a compound selector\n```\n\n### css_nesting_selector_invalid_placement\n\n```\nNesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`\n```\n\n### css_selector_invalid\n\n```\nInvalid selector\n```\n\n### css_type_selector_invalid_placement\n\n```\n`:global(...)` must not be followed by a type selector\n```\n\n### debug_tag_invalid_arguments\n\n```\n{@debug ...} arguments must be identifiers, not arbitrary expressions\n```\n\n### declaration_duplicate\n\n```\n`%name%` has already been declared\n```\n\n### declaration_duplicate_module_import\n\n```\nCannot declare a variable with the same name as an import inside `<script module>`\n```\n\n### derived_invalid_export\n\n```\nCannot export derived state from a module. To expose the current derived value, export a function returning its value\n```\n\n### directive_invalid_value\n\n```\nDirective value must be a JavaScript expression enclosed in curly braces\n```\n\n### directive_missing_name\n\n```\n`%type%` name cannot be empty\n```\n\n### dollar_binding_invalid\n\n```\nThe $ name is reserved, and cannot be used for variables and imports\n```\n\n### dollar_prefix_invalid\n\n```\nThe $ prefix is reserved, and cannot be used for variables and imports\n```\n\n### duplicate_class_field\n\n```\n`%name%` has already been declared\n```\n\n### each_item_invalid_assignment\n\n```\nCannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)\n```\n\nIn legacy mode, it was possible to reassign or bind to the each block argument itself:\n\n```svelte\n<script>\n\tlet array = [1, 2, 3];\n</script>\n\n{#each array as entry}\n\t<!-- reassignment -->\n\t<button on:click={() => entry = 4}>change</button>\n\n\t<!-- binding -->\n\t<input bind:value={entry}>\n{/each}\n```\n\nThis turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead:\n\n```svelte\n<script>\n\tlet array = $state([1, 2, 3]);\n</script>\n\n{#each array as entry, i}\n\t<!-- reassignment -->\n\t<button onclick={() => array[i] = 4}>change</button>\n\n\t<!-- binding -->\n\t<input bind:value={array[i]}>\n{/each}\n```\n\n### effect_invalid_placement\n\n```\n`$effect()` can only be used as an expression statement\n```\n\n### element_invalid_closing_tag\n\n```\n`</%name%>` attempted to close an element that was not open\n```\n\n### element_invalid_closing_tag_autoclosed\n\n```\n`</%name%>` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`)\n```\n\n### element_unclosed\n\n```\n`<%name%>` was left open\n```\n\n### event_handler_invalid_component_modifier\n\n```\nEvent modifiers other than 'once' can only be used on DOM elements\n```\n\n### event_handler_invalid_modifier\n\n```\nValid event modifiers are %list%\n```\n\n### event_handler_invalid_modifier_combination\n\n```\nThe '%modifier1%' and '%modifier2%' modifiers cannot be used together\n```\n\n### expected_attribute_value\n\n```\nExpected attribute value\n```\n\n### expected_block_type\n\n```\nExpected 'if', 'each', 'await', 'key' or 'snippet'\n```\n\n### expected_identifier\n\n```\nExpected an identifier\n```\n\n### expected_pattern\n\n```\nExpected identifier or destructure pattern\n```\n\n### expected_token\n\n```\nExpected token %token%\n```\n\n### expected_whitespace\n\n```\nExpected whitespace\n```\n\n### experimental_async\n\n```\nCannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`\n```\n\n### export_undefined\n\n```\n`%name%` is not defined\n```\n\n### global_reference_invalid\n\n```\n`%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`\n```\n\n### host_invalid_placement\n\n```\n`$host()` can only be used inside custom element component instances\n```\n\n### illegal_element_attribute\n\n```\n`<%name%>` does not support non-event attributes or spread attributes\n```\n\n### import_svelte_internal_forbidden\n\n```\nImports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case\n```\n\n### inspect_trace_generator\n\n```\n`$inspect.trace(...)` cannot be used inside a generator function\n```\n\n### inspect_trace_invalid_placement\n\n```\n`$inspect.trace(...)` must be the first statement of a function body\n```\n\n### invalid_arguments_usage\n\n```\nThe arguments keyword cannot be used within the template or at the top level of a component\n```\n\n### js_parse_error\n\n```\n%message%\n```\n\n### legacy_await_invalid\n\n```\nCannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode\n```\n\n### legacy_export_invalid\n\n```\nCannot use `export let` in runes mode — use `$props()` instead\n```\n\n### legacy_props_invalid\n\n```\nCannot use `$$props` in runes mode\n```\n\n### legacy_reactive_statement_invalid\n\n```\n`$:` is not allowed in runes mode, use `$derived` or `$effect` instead\n```\n\n### legacy_rest_props_invalid\n\n```\nCannot use `$$restProps` in runes mode\n```\n\n### let_directive_invalid_placement\n\n```\n`let:` directive at invalid position\n```\n\n### mixed_event_handler_syntaxes\n\n```\nMixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax\n```\n\n### module_illegal_default_export\n\n```\nA component cannot have a default export\n```\n\n### node_invalid_placement\n\n```\n%message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.\n```\n\nHTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:\n\n- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)\n- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)\n- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)\n\n### options_invalid_value\n\n```\nInvalid compiler option: %details%\n```\n\n### options_removed\n\n```\nInvalid compiler option: %details%\n```\n\n### options_unrecognised\n\n```\nUnrecognised compiler option %keypath%\n```\n\n### props_duplicate\n\n```\nCannot use `%rune%()` more than once\n```\n\n### props_id_invalid_placement\n\n```\n`$props.id()` can only be used at the top level of components as a variable declaration initializer\n```\n\n### props_illegal_name\n\n```\nDeclaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals)\n```\n\n### props_invalid_identifier\n\n```\n`$props()` can only be used with an object destructuring pattern\n```\n\n### props_invalid_pattern\n\n```\n`$props()` assignment must not contain nested properties or computed keys\n```\n\n### props_invalid_placement\n\n```\n`$props()` can only be used at the top level of components as a variable declaration initializer\n```\n\n### reactive_declaration_cycle\n\n```\nCyclical dependency detected: %cycle%\n```\n\n### render_tag_invalid_call_expression\n\n```\nCalling a snippet function using apply, bind or call is not allowed\n```\n\n### render_tag_invalid_expression\n\n```\n`{@render ...}` tags can only contain call expressions\n```\n\n### render_tag_invalid_spread_argument\n\n```\ncannot use spread arguments in `{@render ...}` tags\n```\n\n### rune_invalid_arguments\n\n```\n`%rune%` cannot be called with arguments\n```\n\n### rune_invalid_arguments_length\n\n```\n`%rune%` must be called with %args%\n```\n\n### rune_invalid_computed_property\n\n```\nCannot access a computed property of a rune\n```\n\n### rune_invalid_name\n\n```\n`%name%` is not a valid rune\n```\n\n### rune_invalid_spread\n\n```\n`%rune%` cannot be called with a spread argument\n```\n\n### rune_invalid_usage\n\n```\nCannot use `%rune%` rune in non-runes mode\n```\n\n### rune_missing_parentheses\n\n```\nCannot use rune without parentheses\n```\n\n### rune_removed\n\n```\nThe `%name%` rune has been removed\n```\n\n### rune_renamed\n\n```\n`%name%` is now `%replacement%`\n```\n\n### runes_mode_invalid_import\n\n```\n%name% cannot be used in runes mode\n```\n\n### script_duplicate\n\n```\nA component can have a single top-level `<script>` element and/or a single top-level `<script module>` element\n```\n\n### script_invalid_attribute_value\n\n```\nIf the `%name%` attribute is supplied, it must be a boolean attribute\n```\n\n### script_invalid_context\n\n```\nIf the context attribute is supplied, its value must be \"module\"\n```\n\n### script_reserved_attribute\n\n```\nThe `%name%` attribute is reserved and cannot be used\n```\n\n### slot_attribute_duplicate\n\n```\nDuplicate slot name '%name%' in <%component%>\n```\n\n### slot_attribute_invalid\n\n```\nslot attribute must be a static value\n```\n\n### slot_attribute_invalid_placement\n\n```\nElement with a slot='...' attribute must be a child of a component or a descendant of a custom element\n```\n\n### slot_default_duplicate\n\n```\nFound default slot content alongside an explicit slot=\"default\"\n```\n\n### slot_element_invalid_attribute\n\n```\n`<slot>` can only receive attributes and (optionally) let directives\n```\n\n### slot_element_invalid_name\n\n```\nslot attribute must be a static value\n```\n\n### slot_element_invalid_name_default\n\n```\n`default` is a reserved word — it cannot be used as a slot name\n```\n\n### slot_snippet_conflict\n\n```\nCannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migrate towards `{@render ...}` tags completely\n```\n\n### snippet_conflict\n\n```\nCannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block\n```\n\n### snippet_invalid_export\n\n```\nAn exported snippet can only reference things declared in a `<script module>`, or other exportable snippets\n```\n\nIt's possible to export a snippet from a `<script module>` block, but only if it doesn't reference anything defined inside a non-module-level `<script>`. For example you can't do this...\n\n```svelte\n<script module>\n\texport { greeting };\n</script>\n\n<script>\n\tlet message = 'hello';\n</script>\n\n{#snippet greeting(name)}\n\t<p>{message} {name}!</p>\n{/snippet}\n```\n\n...because `greeting` references `message`, which is defined in the second `<script>`.\n\n### snippet_invalid_rest_parameter\n\n```\nSnippets do not support rest parameters; use an array instead\n```\n\n### snippet_parameter_assignment\n\n```\nCannot reassign or bind to snippet parameter\n```\n\n### snippet_shadowing_prop\n\n```\nThis snippet is shadowing the prop `%prop%` with the same name\n```\n\n### state_field_duplicate\n\n```\n`%name%` has already been declared on this class\n```\n\nAn assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...\n\n```js\nclass Counter {\n\tcount = $state(0);\n}\n```\n\n...or inside the constructor...\n\n```js\nclass Counter {\n\tconstructor() {\n\t\tthis.count = $state(0);\n\t}\n}\n```\n\n...but it can only happen once.\n\n### state_field_invalid_assignment\n\n```\nCannot assign to a state field before its declaration\n```\n\n### state_invalid_export\n\n```\nCannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties\n```\n\n### state_invalid_placement\n\n```\n`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.\n```\n\n### store_invalid_scoped_subscription\n\n```\nCannot subscribe to stores that are not declared at the top level of the component\n```\n\n### store_invalid_subscription\n\n```\nCannot reference store value inside `<script module>`\n```\n\n### store_invalid_subscription_module\n\n```\nCannot reference store value outside a `.svelte` file\n```\n\nUsing a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.\n\n### style_directive_invalid_modifier\n\n```\n`style:` directive can only use the `important` modifier\n```\n\n### style_duplicate\n\n```\nA component can have a single top-level `<style>` element\n```\n\n### svelte_body_illegal_attribute\n\n```\n`<svelte:body>` does not support non-event attributes or spread attributes\n```\n\n### svelte_boundary_invalid_attribute\n\n```\nValid attributes on `<svelte:boundary>` are `onerror` and `failed`\n```\n\n### svelte_boundary_invalid_attribute_value\n\n```\nAttribute value must be a non-string expression\n```\n\n### svelte_component_invalid_this\n\n```\nInvalid component definition — must be an `{expression}`\n```\n\n### svelte_component_missing_this\n\n```\n`<svelte:component>` must have a 'this' attribute\n```\n\n### svelte_element_missing_this\n\n```\n`<svelte:element>` must have a 'this' attribute with a value\n```\n\n### svelte_fragment_invalid_attribute\n\n```\n`<svelte:fragment>` can only have a slot attribute and (optionally) a let: directive\n```\n\n### svelte_fragment_invalid_placement\n\n```\n`<svelte:fragment>` must be the direct child of a component\n```\n\n### svelte_head_illegal_attribute\n\n```\n`<svelte:head>` cannot have attributes nor directives\n```\n\n### svelte_meta_duplicate\n\n```\nA component can only have one `<%name%>` element\n```\n\n### svelte_meta_invalid_content\n\n```\n<%name%> cannot have children\n```\n\n### svelte_meta_invalid_placement\n\n```\n`<%name%>` tags cannot be inside elements or blocks\n```\n\n### svelte_meta_invalid_tag\n\n```\nValid `<svelte:...>` tag names are %list%\n```\n\n### svelte_options_deprecated_tag\n\n```\n\"tag\" option is deprecated — use \"customElement\" instead\n```\n\n### svelte_options_invalid_attribute\n\n```\n`<svelte:options>` can only receive static attributes\n```\n\n### svelte_options_invalid_attribute_value\n\n```\nValue must be %list%, if specified\n```\n\n### svelte_options_invalid_customelement\n\n```\n\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: \"open\" | \"none\"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }\n```\n\n### svelte_options_invalid_customelement_props\n\n```\n\"props\" must be a statically analyzable object literal of the form \"{ [key: string]: { attribute?: string; reflect?: boolean; type?: \"String\" | \"Boolean\" | \"Number\" | \"Array\" | \"Object\" }\"\n```\n\n### svelte_options_invalid_customelement_shadow\n\n```\n\"shadow\" must be either \"open\" or \"none\"\n```\n\n### svelte_options_invalid_tagname\n\n```\nTag name must be lowercase and hyphenated\n```\n\nSee https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names\n\n### svelte_options_reserved_tagname\n\n```\nTag name is reserved\n```\n\nSee https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names\n\n### svelte_options_unknown_attribute\n\n```\n`<svelte:options>` unknown attribute '%name%'\n```\n\n### svelte_self_invalid_placement\n\n```\n`<svelte:self>` components can only exist inside `{#if}` blocks, `{#each}` blocks, `{#snippet}` blocks or slots passed to components\n```\n\n### tag_invalid_name\n\n```\nExpected a valid element or component name. Components must have a valid variable name or dot notation expression\n```\n\n### tag_invalid_placement\n\n```\n{@%name% ...} tag cannot be %location%\n```\n\n### textarea_invalid_content\n\n```\nA `<textarea>` can have either a value attribute or (equivalently) child content, but not both\n```\n\n### title_illegal_attribute\n\n```\n`<title>` cannot have attributes nor directives\n```\n\n### title_invalid_content\n\n```\n`<title>` can only contain text and {tags}\n```\n\n### transition_conflict\n\n```\nCannot use `%type%:` alongside existing `%existing%:` directive\n```\n\n### transition_duplicate\n\n```\nCannot use multiple `%type%:` directives on a single element\n```\n\n### typescript_invalid_feature\n\n```\nTypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)\n```\n\n### unexpected_eof\n\n```\nUnexpected end of input\n```\n\n### unexpected_reserved_word\n\n```\n'%word%' is a reserved word in JavaScript and cannot be used here\n```\n\n### unterminated_string_constant\n\n```\nUnterminated string constant\n```\n\n### void_element_invalid_content\n\n```\nVoid elements cannot have children or closing tags\n```",
+		"svelte/compiler-warnings": "Svelte warns you at compile time if it catches potential mistakes, such as writing inaccessible markup.\n\nSome warnings may be incorrect in your concrete use case. You can disable such false positives by placing a `<!-- svelte-ignore <code> -->` comment above the line that causes the warning. Example:\n\n```svelte\n<!-- svelte-ignore a11y_autofocus -->\n<input autofocus />\n```\n\nYou can list multiple rules in a single comment (separated by commas), and add an explanatory note (in parentheses) alongside them:\n\n```svelte\n<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->\n<div onclick>...</div>\n```\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### a11y_accesskey\n\n```\nAvoid using accesskey\n```\n\nEnforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: Avoid using accesskey -->\n<div accesskey=\"z\"></div>\n```\n\n### a11y_aria_activedescendant_has_tabindex\n\n```\nAn element with an aria-activedescendant attribute should have a tabindex value\n```\n\nAn element with `aria-activedescendant` must be tabbable, so it must either have an inherent `tabindex` or declare `tabindex` as an attribute.\n\n```svelte\n<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->\n<div aria-activedescendant=\"some-id\"></div>\n```\n\n### a11y_aria_attributes\n\n```\n`<%name%>` should not have aria-* attributes\n```\n\nCertain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.\n\n```svelte\n<!-- A11y: <meta> should not have aria-* attributes -->\n<meta aria-hidden=\"false\" />\n```\n\n### a11y_autocomplete_valid\n\n```\n'%value%' is an invalid value for 'autocomplete' on `<input type=\"%type%\">`\n```\n\n### a11y_autofocus\n\n```\nAvoid using autofocus\n```\n\nEnforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.\n\n```svelte\n<!-- A11y: Avoid using autofocus -->\n<input autofocus />\n```\n\n### a11y_click_events_have_key_events\n\n```\nVisible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate\n```\n\nEnforce that visible, non-interactive elements with an `onclick` event are accompanied by a keyboard event handler.\n\nUsers should first consider whether an interactive element might be more appropriate such as a `<button type=\"button\">` element for actions or `<a>` element for navigations. These elements are more semantically meaningful and will have built-in key handling. E.g. `Space` and `Enter` will trigger a `<button>` and `Enter` will trigger an `<a>` element.\n\nIf a non-interactive element is required then `onclick` should be accompanied by an `onkeyup` or `onkeydown` handler that enables the user to perform equivalent actions via the keyboard. In order for the user to be able to trigger a key press, the element will also need to be focusable by adding a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). While an `onkeypress` handler will also silence this warning, it should be noted that the `keypress` event is deprecated.\n\n```svelte\n<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. -->\n<div onclick={() => {}}></div>\n```\n\nCoding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.\n\n### a11y_consider_explicit_label\n\n```\nButtons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute\n```\n\n### a11y_distracting_elements\n\n```\nAvoid `<%name%>` elements\n```\n\nEnforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.\n\nThe following elements are visually distracting: `<marquee>` and `<blink>`.\n\n```svelte\n<!-- A11y: Avoid <marquee> elements -->\n<marquee></marquee>\n```\n\n### a11y_figcaption_index\n\n```\n`<figcaption>` must be first or last child of `<figure>`\n```\n\n### a11y_figcaption_parent\n\n```\n`<figcaption>` must be an immediate child of `<figure>`\n```\n\nEnforce that certain DOM elements have the correct structure.\n\n```svelte\n<!-- A11y: <figcaption> must be an immediate child of <figure> -->\n<div>\n\t<figcaption>Image caption</figcaption>\n</div>\n```\n\n### a11y_hidden\n\n```\n`<%name%>` element should not be hidden\n```\n\nCertain DOM elements are useful for screen reader navigation and should not be hidden.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: <h2> element should not be hidden -->\n<h2 aria-hidden=\"true\">invisible header</h2>\n```\n\n### a11y_img_redundant_alt\n\n```\nScreenreaders already announce `<img>` elements as an image\n```\n\nEnforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_.\n\n```svelte\n<img src=\"foo\" alt=\"Foo eating a sandwich.\" />\n\n<!-- aria-hidden, won't be announced by screen reader -->\n<img src=\"bar\" aria-hidden=\"true\" alt=\"Picture of me taking a photo of an image\" />\n\n<!-- A11y: Screen readers already announce <img> elements as an image. -->\n<img src=\"foo\" alt=\"Photo of foo being weird.\" />\n\n<!-- A11y: Screen readers already announce <img> elements as an image. -->\n<img src=\"bar\" alt=\"Image of me at a bar!\" />\n\n<!-- A11y: Screen readers already announce <img> elements as an image. -->\n<img src=\"foo\" alt=\"Picture of baz fixing a bug.\" />\n```\n\n### a11y_incorrect_aria_attribute_type\n\n```\nThe value of '%attribute%' must be a %type%\n```\n\nEnforce that only the correct type of value is used for aria attributes. For example, `aria-hidden`\nshould only receive a boolean.\n\n```svelte\n<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->\n<div aria-hidden=\"yes\"></div>\n```\n\n### a11y_incorrect_aria_attribute_type_boolean\n\n```\nThe value of '%attribute%' must be either 'true' or 'false'. It cannot be empty\n```\n\n### a11y_incorrect_aria_attribute_type_id\n\n```\nThe value of '%attribute%' must be a string that represents a DOM element ID\n```\n\n### a11y_incorrect_aria_attribute_type_idlist\n\n```\nThe value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs\n```\n\n### a11y_incorrect_aria_attribute_type_integer\n\n```\nThe value of '%attribute%' must be an integer\n```\n\n### a11y_incorrect_aria_attribute_type_token\n\n```\nThe value of '%attribute%' must be exactly one of %values%\n```\n\n### a11y_incorrect_aria_attribute_type_tokenlist\n\n```\nThe value of '%attribute%' must be a space-separated list of one or more of %values%\n```\n\n### a11y_incorrect_aria_attribute_type_tristate\n\n```\nThe value of '%attribute%' must be exactly one of true, false, or mixed\n```\n\n### a11y_interactive_supports_focus\n\n```\nElements with the '%role%' interactive role must have a tabindex value\n```\n\nEnforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.\n\n```svelte\n<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->\n<div role=\"button\" onkeypress={() => {}} />\n```\n\n### a11y_invalid_attribute\n\n```\n'%href_value%' is not a valid %href_attribute% attribute\n```\n\nEnforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.\n\n```svelte\n<!-- A11y: '' is not a valid href attribute -->\n<a href=\"\">invalid</a>\n```\n\n### a11y_label_has_associated_control\n\n```\nA form label must be associated with a control\n```\n\nEnforce that a label tag has a text label and an associated control.\n\nThere are two supported ways to associate a label with a control:\n\n- Wrapping a control in a label tag.\n- Adding `for` to a label and assigning it the ID of an input on the page.\n\n```svelte\n<label for=\"id\">B</label>\n\n<label>C <input type=\"text\" /></label>\n\n<!-- A11y: A form label must be associated with a control. -->\n<label>A</label>\n```\n\n### a11y_media_has_caption\n\n```\n`<video>` elements must have a `<track kind=\"captions\">`\n```\n\nProviding captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).\n\nThe captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute.\n\n```svelte\n<video><track kind=\"captions\" /></video>\n\n<audio muted></audio>\n\n<!-- A11y: Media elements must have a <track kind=\\\"captions\\\"> -->\n<video></video>\n\n<!-- A11y: Media elements must have a <track kind=\\\"captions\\\"> -->\n<video><track /></video>\n```\n\n### a11y_misplaced_role\n\n```\n`<%name%>` should not have role attribute\n```\n\nCertain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props.\n\n```svelte\n<!-- A11y: <meta> should not have role attribute -->\n<meta role=\"tooltip\" />\n```\n\n### a11y_misplaced_scope\n\n```\nThe scope attribute should only be used with `<th>` elements\n```\n\nThe scope attribute should only be used on `<th>` elements.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: The scope attribute should only be used with <th> elements -->\n<div scope=\"row\" />\n```\n\n### a11y_missing_attribute\n\n```\n`<%name%>` element should have %article% %sequence% attribute\n```\n\nEnforce that attributes required for accessibility are present on an element. This includes the following checks:\n\n- `<a>` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697))\n- `<area>` should have alt, aria-label, or aria-labelledby\n- `<html>` should have lang\n- `<iframe>` should have title\n- `<img>` should have alt\n- `<object>` should have title, aria-label, or aria-labelledby\n- `<input type=\"image\">` should have alt, aria-label, or aria-labelledby\n\n```svelte\n<!-- A11y: <input type=\\\"image\\\"> element should have an alt, aria-label or aria-labelledby attribute -->\n<input type=\"image\" />\n\n<!-- A11y: <html> element should have a lang attribute -->\n<html></html>\n\n<!-- A11y: <a> element should have an href attribute -->\n<a>text</a>\n```\n\n### a11y_missing_content\n\n```\n`<%name%>` element should contain text\n```\n\nEnforce that heading elements (`h1`, `h2`, etc.) and anchors have content and that the content is accessible to screen readers\n\n```svelte\n<!-- A11y: <a> element should have child content -->\n<a href=\"/foo\"></a>\n\n<!-- A11y: <h1> element should have child content -->\n<h1></h1>\n```\n\n### a11y_mouse_events_have_key_events\n\n```\n'%event%' event must be accompanied by '%accompanied_by%' event\n```\n\nEnforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` and `onblur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.\n\n```svelte\n<!-- A11y: onmouseover must be accompanied by onfocus -->\n<div onmouseover={handleMouseover} />\n\n<!-- A11y: onmouseout must be accompanied by onblur -->\n<div onmouseout={handleMouseout} />\n```\n\n### a11y_no_abstract_role\n\n```\nAbstract role '%role%' is forbidden\n```\n\n### a11y_no_interactive_element_to_noninteractive_role\n\n```\n`<%element%>` cannot have role '%role%'\n```\n\n[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.\n\n```svelte\n<!-- A11y: <textarea> cannot have role 'listitem' -->\n<textarea role=\"listitem\"></textarea>\n```\n\n### a11y_no_noninteractive_element_interactions\n\n```\nNon-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners\n```\n\nA non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<p>`, `<img>`, `<li>`, `<ul>` and `<ol>`. Non-interactive [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.\n\n```sv\n<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->\n<li onclick={() => {}}></li>\n\n<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->\n<div role=\"listitem\" onclick={() => {}}></div>\n```\n\n### a11y_no_noninteractive_element_to_interactive_role\n\n```\nNon-interactive element `<%element%>` cannot have interactive role '%role%'\n```\n\n[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` and `textbox`.\n\n```svelte\n<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->\n<h3 role=\"searchbox\">Button</h3>\n```\n\n### a11y_no_noninteractive_tabindex\n\n```\nnoninteractive element cannot have nonnegative tabIndex value\n```\n\nTab key navigation should be limited to elements on the page that can be interacted with.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->\n<div tabindex=\"0\"></div>\n```\n\n### a11y_no_redundant_roles\n\n```\nRedundant role '%role%'\n```\n\nSome HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser [has no effect](https://www.w3.org/TR/using-aria/#aria-does-nothing) and is redundant.\n\n```svelte\n<!-- A11y: Redundant role 'button' -->\n<button role=\"button\">...</button>\n\n<!-- A11y: Redundant role 'img' -->\n<img role=\"img\" src=\"foo.jpg\" />\n```\n\n### a11y_no_static_element_interactions\n\n```\n`<%element%>` with a %handler% handler must have an ARIA role\n```\n\nElements like `<div>` with interactive handlers like `click` must have an ARIA role.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: <div> with click handler must have an ARIA role -->\n<div onclick={() => ''}></div>\n```\n\n### a11y_positive_tabindex\n\n```\nAvoid tabindex values above zero\n```\n\nAvoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: avoid tabindex values above zero -->\n<div tabindex=\"1\"></div>\n```\n\n### a11y_role_has_required_aria_props\n\n```\nElements with the ARIA role \"%role%\" must have the following attributes defined: %props%\n```\n\nElements with ARIA roles must have all required attributes for that role.\n\n```svelte\n<!-- A11y: A11y: Elements with the ARIA role \"checkbox\" must have the following attributes defined: \"aria-checked\" -->\n<span role=\"checkbox\" aria-labelledby=\"foo\" tabindex=\"0\"></span>\n```\n\n### a11y_role_supports_aria_props\n\n```\nThe attribute '%attribute%' is not supported by the role '%role%'\n```\n\nElements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.\n\n```svelte\n<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->\n<div role=\"link\" aria-multiline></div>\n\n<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->\n<li aria-required></li>\n```\n\n### a11y_role_supports_aria_props_implicit\n\n```\nThe attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`\n```\n\nElements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.\n\n```svelte\n<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->\n<div role=\"link\" aria-multiline></div>\n\n<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->\n<li aria-required></li>\n```\n\n### a11y_unknown_aria_attribute\n\n```\nUnknown aria attribute 'aria-%attribute%'\n```\n\n```\nUnknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?\n```\n\nEnforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).\n\n```svelte\n<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->\n<input type=\"image\" aria-labeledby=\"foo\" />\n```\n\n### a11y_unknown_role\n\n```\nUnknown role '%role%'\n```\n\n```\nUnknown role '%role%'. Did you mean '%suggestion%'?\n```\n\nElements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->\n<div role=\"toooltip\"></div>\n```\n\n### attribute_avoid_is\n\n```\nThe \"is\" attribute is not supported cross-browser and should be avoided\n```\n\n### attribute_global_event_reference\n\n```\nYou are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?\n```\n\n### attribute_illegal_colon\n\n```\nAttributes should not contain ':' characters to prevent ambiguity with Svelte directives\n```\n\n### attribute_invalid_property_name\n\n```\n'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?\n```\n\n### attribute_quoted\n\n```\nQuoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes\n```\n\n### bidirectional_control_characters\n\n```\nA bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences\n```\n\nBidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. See [trojansource.codes](https://trojansource.codes/) for more information.\n\n### bind_invalid_each_rest\n\n```\nThe rest operator (...) will create a new object and binding '%name%' with the original object will not work\n```\n\n### block_empty\n\n```\nEmpty block\n```\n\n### component_name_lowercase\n\n```\n`<%name%>` will be treated as an HTML element unless it begins with a capital letter\n```\n\n### css_unused_selector\n\n```\nUnused CSS selector \"%name%\"\n```\n\nSvelte traverses both the template and the `<style>` tag to find out which of the CSS selectors are not used within the template, so it can remove them.\n\nIn some situations a selector may target an element that is not 'visible' to the compiler, for example because it is part of an `{@html ...}` tag or you're overriding styles in a child component. In these cases, use [`:global`](/docs/svelte/global-styles) to preserve the selector as-is:\n\n```svelte\n<div class=\"post\">{@html content}</div>\n\n<style>\n  .post :global {\n    p {...}\n  }\n</style>\n```\n\n### custom_element_props_identifier\n\n```\nUsing a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.\n```\n\n### element_implicitly_closed\n\n```\nThis element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.\n```\n\nIn HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:\n\n```html\n<!-- this HTML... -->\n<p><p>hello</p>\n\n<!-- results in this DOM structure -->\n<p></p>\n<p>hello</p>\n```\n\nSimilarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.\n\n### element_invalid_self_closing_tag\n\n```\nSelf-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`\n```\n\nIn HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...\n\n```html\n<div>\n\t<span class=\"icon\" /> some text!\n</div>\n```\n\n...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:\n\n```html\n<div>\n\t<span class=\"icon\"> some text! </span>\n</div>\n```\n\nSome templating languages (including Svelte) will 'fix' HTML by turning `<span />` into `<span></span>`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, so Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.\n\nTo automate this, run the dedicated migration:\n\n```sh\nnpx sv migrate self-closing-tags\n```\n\nIn a future version of Svelte, self-closing tags may be upgraded from a warning to an error.\n\n### event_directive_deprecated\n\n```\nUsing `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead\n```\n\nSee [the migration guide](v5-migration-guide#Event-changes) for more info.\n\n### export_let_unused\n\n```\nComponent has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`\n```\n\n### legacy_code\n\n```\n`%code%` is no longer valid — please use `%suggestion%` instead\n```\n\n### legacy_component_creation\n\n```\nSvelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.\n```\n\nSee the [migration guide](v5-migration-guide#Components-are-no-longer-classes) for more info.\n\n### node_invalid_placement_ssr\n\n```\n%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning\n```\n\nHTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:\n\n- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)\n- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)\n- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)\n\nThis code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.\n\n### non_reactive_update\n\n```\n`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates\n```\n\nThis warning is thrown when the compiler detects the following:\n- a variable was declared without `$state` or `$state.raw`\n- the variable is reassigned\n- the variable is read in a reactive context\n\nIn this case, changing the value will not correctly trigger updates. Example:\n\n```svelte\n<script>\n\tlet reactive = $state('reactive');\n\tlet stale = 'stale';\n</script>\n\n<p>This value updates: {reactive}</p>\n<p>This value does not update: {stale}</p>\n\n<button onclick={() => {\n\tstale = 'updated';\n\treactive = 'updated';\n}}>update</button>\n```\n\nTo fix this, wrap your variable declaration with `$state`.\n\n### options_deprecated_accessors\n\n```\nThe `accessors` option has been deprecated. It will have no effect in runes mode\n```\n\n### options_deprecated_immutable\n\n```\nThe `immutable` option has been deprecated. It will have no effect in runes mode\n```\n\n### options_missing_custom_element\n\n```\nThe `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?\n```\n\n### options_removed_enable_sourcemap\n\n```\nThe `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them\n```\n\n### options_removed_hydratable\n\n```\nThe `hydratable` option has been removed. Svelte components are always hydratable now\n```\n\n### options_removed_loop_guard_timeout\n\n```\nThe `loopGuardTimeout` option has been removed\n```\n\n### options_renamed_ssr_dom\n\n```\n`generate: \"dom\"` and `generate: \"ssr\"` options have been renamed to \"client\" and \"server\" respectively\n```\n\n### perf_avoid_inline_class\n\n```\nAvoid 'new class' — instead, declare the class at the top level scope\n```\n\n### perf_avoid_nested_class\n\n```\nAvoid declaring classes below the top level scope\n```\n\n### reactive_declaration_invalid_placement\n\n```\nReactive declarations only exist at the top level of the instance script\n```\n\n### reactive_declaration_module_script_dependency\n\n```\nReassignments of module-level declarations will not cause reactive statements to update\n```\n\n### script_context_deprecated\n\n```\n`context=\"module\"` is deprecated, use the `module` attribute instead\n```\n\n```svelte\n<script ---context=\"module\"--- +++module+++>\n\tlet foo = 'bar';\n</script>\n```\n\n### script_unknown_attribute\n\n```\nUnrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it\n```\n\n### slot_element_deprecated\n\n```\nUsing `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead\n```\n\nSee [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info.\n\n### state_referenced_locally\n\n```\nThis reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?\n```\n\nThis warning is thrown when the compiler detects the following:\n\n- A reactive variable is declared\n- ...and later reassigned...\n- ...and referenced in the same scope\n\nThis 'breaks the link' to the original state declaration. For example, if you pass the state to a function, the function loses access to the state once it is reassigned:\n\n```svelte\n<!--- file: Parent.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\tlet count = $state(0);\n\n\t// warning: state_referenced_locally\n\tsetContext('count', count);\n</script>\n\n<button onclick={() => count++}>\n\tincrement\n</button>\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst count = getContext('count');\n</script>\n\n<!-- This will never update -->\n<p>The count is {count}</p>\n```\n\nTo fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping `count` in a function:\n\n```svelte\n<!--- file: Parent.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\tlet count = $state(0);\n\tsetContext('count', +++() => count+++);\n</script>\n\n<button onclick={() => count++}>\n\tincrement\n</button>\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst count = getContext('count');\n</script>\n\n<!-- This will update -->\n<p>The count is {+++count()+++}</p>\n```\n\nFor more info, see [Passing state into functions]($state#Passing-state-into-functions).\n\n### store_rune_conflict\n\n```\nIt looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity\n```\n\n### svelte_component_deprecated\n\n```\n`<svelte:component>` is deprecated in runes mode — components are dynamic by default\n```\n\nIn previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.\n\nIn Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.\n\nIn some cases `<object.property>` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.\n\nFor complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:\n\n<!-- prettier-ignore -->\n```svelte\n{#each items as item}\n\t---<svelte:component this={item.condition ? Y : Z} />---\n\t+++{@const Component = item.condition ? Y : Z}+++\n\t+++<Component />+++\n{/each}\n```\n\nA derived value may be used in other contexts:\n\n<!-- prettier-ignore -->\n```svelte\n<script>\n\t// ...\n\tlet condition = $state(false);\n\t+++const Component = $derived(condition ? Y : Z);+++\n</script>\n\n---<svelte:component this={condition ? Y : Z} />---\n+++<Component />+++\n```\n\n### svelte_element_invalid_this\n\n```\n`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte\n```\n\n### svelte_self_deprecated\n\n```\n`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead\n```\n\nSee [the note in the docs](legacy-svelte-self) for more info.\n\n### unknown_code\n\n```\n`%code%` is not a recognised code\n```\n\n```\n`%code%` is not a recognised code (did you mean `%suggestion%`?)\n```",
+		"svelte/runtime-errors": "## Client errors\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### async_derived_orphan\n\n```\nCannot create a `$derived(...)` with an `await` expression outside of an effect tree\n```\n\nIn Svelte there are two types of reaction — [`$derived`](/docs/svelte/$derived) and [`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run _lazily_ and can be [garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed.\n\nBecause of this, effects can only be created inside other effects (or [effect roots](/docs/svelte/$effect#$effect.root), such as the one that is created when you first mount a component) so that Svelte knows when to destroy them.\n\nSome sleight of hand occurs when a derived contains an `await` expression: Since waiting until we read `{await getPromise()}` to call `getPromise` would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we're using an effect, we can only create asynchronous deriveds inside another effect.\n\n### bind_invalid_checkbox_value\n\n```\nUsing `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead\n```\n\n### bind_invalid_export\n\n```\nComponent %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)\n```\n\n### bind_not_bindable\n\n```\nA component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`\n```\n\n### component_api_changed\n\n```\nCalling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5\n```\n\nSee the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.\n\n### component_api_invalid_new\n\n```\nAttempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.\n```\n\nSee the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.\n\n### derived_references_self\n\n```\nA derived value cannot reference itself recursively\n```\n\n### each_key_duplicate\n\n```\nKeyed each block has duplicate key at indexes %a% and %b%\n```\n\n```\nKeyed each block has duplicate key `%value%` at indexes %a% and %b%\n```\n\n### effect_in_teardown\n\n```\n`%rune%` cannot be used inside an effect cleanup function\n```\n\n### effect_in_unowned_derived\n\n```\nEffect cannot be created inside a `$derived` value that was not itself created inside an effect\n```\n\n### effect_orphan\n\n```\n`%rune%` can only be used inside an effect (e.g. during component initialisation)\n```\n\n### effect_pending_outside_reaction\n\n```\n`$effect.pending()` can only be called inside an effect or derived\n```\n\n### effect_update_depth_exceeded\n\n```\nMaximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state\n```\n\nIf an effect updates some state that it also depends on, it will re-run, potentially in a loop:\n\n```js\nlet count = $state(0);\n\n$effect(() => {\n\t// this both reads and writes `count`,\n\t// so will run in an infinite loop\n\tcount += 1;\n});\n```\n\n(Svelte intervenes before this can crash your browser tab.)\n\nThe same applies to array mutations, since these both read and write to the array:\n\n```js\nlet array = $state(['hello']);\n\n$effect(() => {\n\tarray.push('goodbye');\n});\n```\n\nNote that it's fine for an effect to re-run itself as long as it 'settles':\n\n```js\nlet array = ['a', 'b', 'c'];\n// ---cut---\n$effect(() => {\n\t// this is okay, because sorting an already-sorted array\n\t// won't result in a mutation\n\tarray.sort();\n});\n```\n\nOften when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really _do_ need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency.\n\n### flush_sync_in_effect\n\n```\nCannot use `flushSync` inside an effect\n```\n\nThe `flushSync()` function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change but _not_ inside an effect.\n\nThis restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.\n\n### get_abort_signal_outside_reaction\n\n```\n`getAbortSignal()` can only be called inside an effect or derived\n```\n\n### hydration_failed\n\n```\nFailed to hydrate the application\n```\n\n### invalid_snippet\n\n```\nCould not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`\n```\n\n### lifecycle_legacy_only\n\n```\n`%name%(...)` cannot be used in runes mode\n```\n\n### props_invalid_value\n\n```\nCannot do `bind:%key%={undefined}` when `%key%` has a fallback value\n```\n\n### props_rest_readonly\n\n```\nRest element properties of `$props()` such as `%property%` are readonly\n```\n\n### rune_outside_svelte\n\n```\nThe `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files\n```\n\n### set_context_after_init\n\n```\n`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression\n```\n\nThis restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.\n\n### state_descriptors_fixed\n\n```\nProperty descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.\n```\n\n### state_prototype_fixed\n\n```\nCannot set prototype of `$state` object\n```\n\n### state_unsafe_mutation\n\n```\nUpdating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`\n```\n\nThis error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\n\tlet even = $state(true);\n\n\tlet odd = $derived.by(() => {\n\t\teven = count % 2 === 0;\n\t\treturn !even;\n\t});\n</script>\n\n<button onclick={() => count++}>{count}</button>\n\n<p>{count} is even: {even}</p>\n<p>{count} is odd: {odd}</p>\n```\n\nThis is forbidden because it introduces instability: if `<p>{count} is even: {even}</p>` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived:\n\n```js\nlet count = 0;\n// ---cut---\nlet even = $derived(count % 2 === 0);\nlet odd = $derived(!even);\n```\n\nIf side-effects are unavoidable, use [`$effect`]($effect) instead.\n\n### svelte_boundary_reset_onerror\n\n```\nA `<svelte:boundary>` `reset` function cannot be called while an error is still being handled\n```\n\nIf a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary) has an `onerror` function, it must not call the provided `reset` function synchronously since the boundary is still in a broken state. Typically, `reset()` is called later, once the error has been resolved.\n\nIf it's possible to resolve the error inside the `onerror` callback, you must at least wait for the boundary to settle before calling `reset()`, for example using [`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick):\n\n```svelte\n<svelte:boundary onerror={async (error, reset) => {\n\tfixTheError();\n\t+++await tick();+++\n\treset();\n}}>\n\n</svelte:boundary>\n```\n\n\n## Server errors\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### await_invalid\n\n```\nEncountered asynchronous work while rendering synchronously.\n```\n\nYou (or the framework you're using) called [`render(...)`](svelte-server#render) with a component containing an `await` expression. Either `await` the result of `render` or wrap the `await` (or the component containing it) in a [`<svelte:boundary>`](svelte-boundary) with a `pending` snippet.\n\n### html_deprecated\n\n```\nThe `html` property of server render results has been deprecated. Use `body` instead.\n```\n\n### lifecycle_function_unavailable\n\n```\n`%name%(...)` is not available on the server\n```\n\nCertain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.\n\n\n## Shared errors\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### invalid_default_snippet\n\n```\nCannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead\n```\n\nThis error would be thrown in a setup like this:\n\n```svelte\n<!--- file: Parent.svelte --->\n<List {items} let:entry>\n    <span>{entry}</span>\n</List>\n```\n\n```svelte\n<!--- file: List.svelte --->\n<script>\n    let { items, children } = $props();\n</script>\n\n<ul>\n    {#each items as item}\n        <li>{@render children(item)}</li>\n    {/each}\n</ul>\n```\n\nHere, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.\n\n### invalid_snippet_arguments\n\n```\nA snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`\n```\n\n### lifecycle_outside_component\n\n```\n`%name%(...)` can only be used during component initialisation\n```\n\nCertain lifecycle methods can only be used during component initialisation. To fix this, make sure you're invoking the method inside the _top level of the instance script_ of your component.\n\n```svelte\n<script>\n    import { onMount } from 'svelte';\n\n    function handleClick() {\n        // This is wrong\n        onMount(() => {})\n    }\n\n    // This is correct\n    onMount(() => {})\n</script>\n\n<button onclick={handleClick}>click me</button>\n```\n\n### snippet_without_render_tag\n\n```\nAttempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.\n```\n\nA component throwing this error will look something like this (`children` is not being rendered):\n\n```svelte\n<script>\n    let { children } = $props();\n</script>\n\n{children}\n```\n\n...or like this (a parent component is passing a snippet where a non-snippet value is expected):\n\n```svelte\n<!--- file: Parent.svelte --->\n<ChildComponent>\n  {#snippet label()}\n    <span>Hi!</span>\n  {/snippet}\n</ChildComponent>\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n  let { label } = $props();\n</script>\n\n<!-- This component doesn't expect a snippet, but the parent provided one -->\n<p>{label}</p>\n```\n\n### store_invalid_shape\n\n```\n`%name%` is not a store with a `subscribe` method\n```\n\n### svelte_element_invalid_this_value\n\n```\nThe `this` prop on `<svelte:element>` must be a string, if defined\n```",
+		"svelte/runtime-warnings": "## Client warnings\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### assignment_value_stale\n\n```\nAssignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.\n```\n\nGiven a case like this...\n\n```svelte\n<script>\n\tlet object = $state({ array: null });\n\n\tfunction add() {\n\t\t(object.array ??= []).push(object.array.length);\n\t}\n</script>\n\n<button onclick={add}>add</button>\n<p>items: {JSON.stringify(object.items)}</p>\n```\n\n...the array being pushed to when the button is first clicked is the `[]` on the right-hand side of the assignment, but the resulting value of `object.array` is an empty state proxy. As a result, the pushed value will be discarded.\n\nYou can fix this by separating it into two statements:\n\n```js\nlet object = { array: [0] };\n// ---cut---\nfunction add() {\n\tobject.array ??= [];\n\tobject.array.push(object.array.length);\n}\n```\n\n### await_reactivity_loss\n\n```\nDetected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`\n```\n\nSvelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...\n\n```js\nlet a = Promise.resolve(1);\nlet b = 2;\n// ---cut---\nlet total = $derived(await a + b);\n```\n\n...both `a` and `b` are tracked, even though `b` is only read once `a` has resolved, after the initial execution.\n\nThis does _not_ apply to an `await` that is not 'visible' inside the expression. In a case like this...\n\n```js\nlet a = Promise.resolve(1);\nlet b = 2;\n// ---cut---\nasync function sum() {\n\treturn await a + b;\n}\n\nlet total = $derived(await sum());\n```\n\n...`total` will depend on `a` (which is read immediately) but not `b` (which is not). The solution is to pass the values into the function:\n\n```js\nlet a = Promise.resolve(1);\nlet b = 2;\n// ---cut---\n/**\n * @param {Promise<number>} a\n * @param {number} b\n */\nasync function sum(a, b) {\n\treturn await a + b;\n}\n\nlet total = $derived(await sum(a, b));\n```\n\n### await_waterfall\n\n```\nAn async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app\n```\n\nIn a case like this...\n\n```js\nasync function one() { return 1 }\nasync function two() { return 2 }\n// ---cut---\nlet a = $derived(await one());\nlet b = $derived(await two());\n```\n\n...the second `$derived` will not be created until the first one has resolved. Since `await two()` does not depend on the value of `a`, this delay, often described as a 'waterfall', is unnecessary.\n\n(Note that if the values of `await one()` and `await two()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.)\n\nYou can solve this by creating the promises first and _then_ awaiting them:\n\n```js\nasync function one() { return 1 }\nasync function two() { return 2 }\n// ---cut---\nlet aPromise = $derived(one());\nlet bPromise = $derived(two());\n\nlet a = $derived(await aPromise);\nlet b = $derived(await bPromise);\n```\n\n### binding_property_non_reactive\n\n```\n`%binding%` is binding to a non-reactive property\n```\n\n```\n`%binding%` (%location%) is binding to a non-reactive property\n```\n\n### console_log_state\n\n```\nYour `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead\n```\n\nWhen logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.\n\nThe easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.\n\n### event_handler_invalid\n\n```\n%handler% should be a function. Did you mean to %suggestion%?\n```\n\n### hydration_attribute_changed\n\n```\nThe `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value\n```\n\nCertain attributes like `src` on an `<img>` element will not be repaired during hydration, i.e. the server value will be kept. That's because updating these attributes can cause the image to be refetched (or in the case of an `<iframe>`, for the frame to be reloaded), even if they resolve to the same resource.\n\nTo fix this, either silence the warning with a [`svelte-ignore`](basic-markup#Comments) comment, or ensure that the value stays the same between server and client. If you really need the value to change on hydration, you can force an update like this:\n\n```svelte\n<script>\n\tlet { src } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\t// stash the value...\n\t\tconst initial = src;\n\n\t\t// unset it...\n\t\tsrc = undefined;\n\n\t\t$effect(() => {\n\t\t\t// ...and reset after we've mounted\n\t\t\tsrc = initial;\n\t\t});\n\t}\n</script>\n\n<img {src} />\n```\n\n### hydration_html_changed\n\n```\nThe value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value\n```\n\n```\nThe value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value\n```\n\nIf the `{@html ...}` value changes between the server and the client, it will not be repaired during hydration, i.e. the server value will be kept. That's because change detection during hydration is expensive and usually unnecessary.\n\nTo fix this, either silence the warning with a [`svelte-ignore`](basic-markup#Comments) comment, or ensure that the value stays the same between server and client. If you really need the value to change on hydration, you can force an update like this:\n\n```svelte\n<script>\n\tlet { markup } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\t// stash the value...\n\t\tconst initial = markup;\n\n\t\t// unset it...\n\t\tmarkup = undefined;\n\n\t\t$effect(() => {\n\t\t\t// ...and reset after we've mounted\n\t\t\tmarkup = initial;\n\t\t});\n\t}\n</script>\n\n{@html markup}\n```\n\n### hydration_mismatch\n\n```\nHydration failed because the initial UI does not match what was rendered on the server\n```\n\n```\nHydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%\n```\n\nThis warning is thrown when Svelte encounters an error while hydrating the HTML from the server. During hydration, Svelte walks the DOM, expecting a certain structure. If that structure is different (for example because the HTML was repaired by the DOM because of invalid HTML), then Svelte will run into issues, resulting in this warning.\n\nDuring development, this error is often preceeded by a `console.error` detailing the offending HTML, which needs fixing.\n\n### invalid_raw_snippet_render\n\n```\nThe `render` function passed to `createRawSnippet` should return HTML for a single element\n```\n\n### legacy_recursive_reactive_block\n\n```\nDetected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.\n```\n\n### lifecycle_double_unmount\n\n```\nTried to unmount a component that was not mounted\n```\n\n### ownership_invalid_binding\n\n```\n%parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)\n```\n\nConsider three components `GrandParent`, `Parent` and `Child`. If you do `<GrandParent bind:value>`, inside `GrandParent` pass on the variable via `<Parent {value} />` (note the missing `bind:`) and then do `<Child bind:value>` inside `Parent`, this warning is thrown.\n\nTo fix it, `bind:` to the value instead of just passing a property (i.e. in this example do `<Parent bind:value />`).\n\n### ownership_invalid_mutation\n\n```\nMutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead\n```\n\nConsider the following code:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Child from './Child.svelte';\n\tlet person = $state({ name: 'Florida', surname: 'Man' });\n</script>\n\n<Child {person} />\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { person } = $props();\n</script>\n\n<input bind:value={person.name}>\n<input bind:value={person.surname}>\n```\n\n`Child` is mutating `person` which is owned by `App` without being explicitly \"allowed\" to do so. This is strongly discouraged since it can create code that is hard to reason about at scale (\"who mutated this value?\"), hence the warning.\n\nTo fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).\n\n### select_multiple_invalid_value\n\n```\nThe `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.\n```\n\nWhen using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.\n\nTo silence the warning, ensure that `value`:\n\n- is an array for an explicit selection\n- is `null` or `undefined` to keep the selection as is\n\n### state_proxy_equality_mismatch\n\n```\nReactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results\n```\n\n`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:\n\n```svelte\n<script>\n\tlet value = { foo: 'bar' };\n\tlet proxy = $state(value);\n\n\tvalue === proxy; // always false\n</script>\n```\n\nTo resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.\n\n### state_proxy_unmount\n\n```\nTried to unmount a state proxy, rather than a component\n```\n\n`unmount` was called with a state proxy:\n\n```js\nimport { mount, unmount } from 'svelte';\nimport Component from './Component.svelte';\nlet target = document.body;\n// ---cut---\nlet component = $state(mount(Component, { target }));\n\n// later...\nunmount(component);\n```\n\nAvoid using `$state` here. If `component` _does_ need to be reactive for some reason, use `$state.raw` instead.\n\n### svelte_boundary_reset_noop\n\n```\nA `<svelte:boundary>` `reset` function only resets the boundary the first time it is called\n```\n\nWhen an error occurs while rendering the contents of a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary), the `onerror` handler is called with the error plus a `reset` function that attempts to re-render the contents.\n\nThis `reset` function should only be called once. After that, it has no effect — in a case like this, where a reference to `reset` is stored outside the boundary, clicking the button while `<Contents />` is rendered will _not_ cause the contents to be rendered again.\n\n```svelte\n<script>\n\tlet reset;\n</script>\n\n<button onclick={reset}>reset</button>\n\n<svelte:boundary onerror={(e, r) => (reset = r)}>\n\t<!-- contents -->\n\n\t{#snippet failed(e)}\n\t\t<p>oops! {e.message}</p>\n\t{/snippet}\n</svelte:boundary>\n```\n\n### transition_slide_display\n\n```\nThe `slide` transition does not work correctly for elements with `display: %value%`\n```\n\nThe [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:\n\n- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`\n- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`\n- `display: contents`\n\n\n## Shared warnings\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### dynamic_void_element_content\n\n```\n`<svelte:element this=\"%tag%\">` is a void element — it cannot have content\n```\n\nElements such as `<input>` cannot have content, any children passed to these elements will be ignored.\n\n### state_snapshot_uncloneable\n\n```\nValue cannot be cloned with `$state.snapshot` — the original value was returned\n```\n\n```\nThe following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:\n\n%properties%\n```\n\n`$state.snapshot` tries to clone the given value in order to return a reference that no longer changes. Certain objects may not be cloneable, in which case the original value is returned. In the following example, `property` is cloned, but `window` is not, because DOM elements are uncloneable:\n\n```js\nconst object = $state({ property: 'this is cloneable', window })\nconst snapshot = $state.snapshot(object);\n```",
+		"svelte/legacy-overview": "Svelte 5 introduced some significant changes to Svelte's API, including [runes](what-are-runes), [snippets](snippet) and event attributes. As a result, some Svelte 3/4 features are deprecated (though supported for now, unless otherwise specified) and will eventually be removed. We recommend that you incrementally [migrate your existing code](v5-migration-guide).\n\nThe following pages document these features for\n\n- people still using Svelte 3/4\n- people using Svelte 5, but with components that haven't yet been migrated\n\nSince Svelte 3/4 syntax still works in Svelte 5, we will distinguish between _legacy mode_ and _runes mode_. Once a component is in runes mode (which you can opt into by using runes, or by explicitly setting the `runes: true` compiler option), legacy mode features are no longer available.\n\nIf you're exclusively interested in the Svelte 3/4 syntax, you can browse its documentation at [v4.svelte.dev](https://v4.svelte.dev).",
+		"svelte/legacy-let": "In runes mode, reactive state is explicitly declared with the [`$state` rune]($state).\n\nIn legacy mode, variables declared at the top level of a component are automatically considered _reactive_. Reassigning or mutating these variables (`count += 1` or `object.x = y`) will cause the UI to update.\n\n```svelte\n<script>\n\tlet count = 0;\n</script>\n\n<button on:click={() => count += 1}>\n\tclicks: {count}\n</button>\n```\n\nBecause Svelte's legacy mode reactivity is based on _assignments_, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to 'tell' the compiler to update the UI:\n\n```svelte\n<script>\n\tlet numbers = [1, 2, 3, 4];\n\n\tfunction addNumber() {\n\t\t// this method call does not trigger an update\n\t\tnumbers.push(numbers.length + 1);\n\n\t\t// this assignment will update anything\n\t\t// that depends on `numbers`\n\t\tnumbers = numbers;\n\t}\n</script>\n```",
+		"svelte/legacy-reactive-assignments": "In runes mode, reactions to state updates are handled with the [`$derived`]($derived) and [`$effect`]($effect) runes.\n\nIn legacy mode, any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with a `$:` [label](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). These statements run after other code in the `<script>` and before the component markup is rendered, then whenever the values that they depend on change.\n\n```svelte\n<script>\n\tlet a = 1;\n\tlet b = 2;\n\n\t// this is a 'reactive statement', and it will re-run\n\t// when `a`, `b` or `sum` change\n\t$: console.log(`${a} + ${b} = ${sum}`);\n\n\t// this is a 'reactive assignment' — `sum` will be\n\t// recalculated when `a` or `b` change. It is\n\t// not necessary to declare `sum` separately\n\t$: sum = a + b;\n</script>\n```\n\nStatements are ordered _topologically_ by their dependencies and their assignments: since the `console.log` statement depends on `sum`, `sum` is calculated first even though it appears later in the source.\n\nMultiple statements can be combined by putting them in a block:\n\n```js\n// @noErrors\n$: {\n\t// recalculate `total` when `items` changes\n\ttotal = 0;\n\n\tfor (const item of items) {\n\t\ttotal += item.value;\n\t}\n}\n```\n\nThe left-hand side of a reactive assignments can be an identifier, or it can be a destructuring assignment:\n\n```js\n// @noErrors\n$: ({ larry, moe, curly } = stooges);\n```\n\n## Understanding dependencies\n\nThe dependencies of a `$:` statement are determined at compile time — they are whichever variables are referenced (but not assigned to) inside the statement.\n\nIn other words, a statement like this will _not_ re-run when `count` changes, because the compiler cannot 'see' the dependency:\n\n```js\n// @noErrors\nlet count = 0;\nlet double = () => count * 2;\n\n$: doubled = double();\n```\n\nSimilarly, topological ordering will fail if dependencies are referenced indirectly: `z` will never update, because `y` is not considered 'dirty' when the update occurs. Moving `$: z = y` below `$: setY(x)` will fix it:\n\n```svelte\n<script>\n\tlet x = 0;\n\tlet y = 0;\n\n\t$: z = y;\n\t$: setY(x);\n\n\tfunction setY(value) {\n\t\ty = value;\n\t}\n</script>\n```\n\n## Browser-only code\n\nReactive statements run during server-side rendering as well as in the browser. This means that any code that should only run in the browser must be wrapped in an `if` block:\n\n```js\n// @noErrors\n$: if (browser) {\n\tdocument.title = title;\n}\n```",
+		"svelte/legacy-export-let": "In runes mode, [component props](basic-markup#Component-props) are declared with the [`$props`]($props) rune, allowing parent components to pass in data.\n\nIn legacy mode, props are marked with the `export` keyword, and can have a default value:\n\n```svelte\n<script>\n\texport let foo;\n\texport let bar = 'default value';\n\n\t// Values that are passed in as props\n\t// are immediately available\n\tconsole.log({ foo });\n</script>\n```\n\nThe default value is used if it would otherwise be `undefined` when the component is created.\n\n> [!NOTE] Unlike in runes mode, if the parent component changes a prop from a defined value to `undefined`, it does not revert to the initial value.\n\nProps without default values are considered _required_, and Svelte will print a warning during development if no value is provided, which you can squelch by specifying `undefined` as the default value:\n\n```js\nexport let foo +++= undefined;+++\n```\n\n## Component exports\n\nAn exported `const`, `class` or `function` declaration is _not_ considered a prop — instead, it becomes part of the component's API:\n\n```svelte\n<!--- file: Greeter.svelte--->\n<script>\n\texport function greet(name) {\n\t\talert(`hello ${name}!`);\n\t}\n</script>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Greeter from './Greeter.svelte';\n\n\tlet greeter;\n</script>\n\n<Greeter bind:this={greeter} />\n\n<button on:click={() => greeter.greet('world')}>\n\tgreet\n</button>\n```\n\n## Renaming props\n\nThe `export` keyword can appear separately from the declaration. This is useful for renaming props, for example in the case of a reserved word:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {string} */\n\tlet className;\n\n\t// creates a `class` property, even\n\t// though it is a reserved word\n\texport { className as class };\n</script>\n```",
+		"svelte/legacy-$$props-and-$$restProps": "In runes mode, getting an object containing all the props that were passed in is easy, using the [`$props`]($props) rune.\n\nIn legacy mode, we use `$$props` and `$$restProps`:\n\n- `$$props` contains all the props that were passed in, including ones that are not individually declared with the `export` keyword\n- `$$restProps` contains all the props that were passed in _except_ the ones that were individually declared\n\nFor example, a `<Button>` component might need to pass along all its props to its own `<button>` element, except the `variant` prop:\n\n```svelte\n<script>\n\texport let variant;\n</script>\n\n<button {...$$restProps} class=\"variant-{variant} {$$props.class ?? ''}\">\n\tclick me\n</button>\n\n<style>\n\t.variant-danger {\n\t\tbackground: red;\n\t}\n</style>\n```\n\nIn Svelte 3/4 using `$$props` and `$$restProps` creates a modest performance penalty, so they should only be used when needed.",
+		"svelte/legacy-on": "In runes mode, event handlers are just like any other attribute or prop.\n\nIn legacy mode, we use the `on:` directive:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\tlet count = 0;\n\n\t/** @param {MouseEvent} event */\n\tfunction handleClick(event) {\n\t\tcount += 1;\n\t}\n</script>\n\n<button on:click={handleClick}>\n\tcount: {count}\n</button>\n```\n\nHandlers can be declared inline with no performance penalty:\n\n```svelte\n<button on:click={() => (count += 1)}>\n\tcount: {count}\n</button>\n```\n\nAdd _modifiers_ to element event handlers with the `|` character.\n\n```svelte\n<form on:submit|preventDefault={handleSubmit}>\n\t<!-- the `submit` event's default is prevented,\n\t     so the page won't reload -->\n</form>\n```\n\nThe following modifiers are available:\n\n- `preventDefault` — calls `event.preventDefault()` before running the handler\n- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element\n- `stopImmediatePropagation` - calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired.\n- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)\n- `nonpassive` — explicitly set `passive: false`\n- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase\n- `once` — remove the handler after the first time it runs\n- `self` — only trigger handler if `event.target` is the element itself\n- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.\n\nModifiers can be chained together, e.g. `on:click|once|capture={...}`.\n\nIf the `on:` directive is used without a value, the component will _forward_ the event, meaning that a consumer of the component can listen for it.\n\n```svelte\n<button on:click>\n\tThe component itself will emit the click event\n</button>\n```\n\nIt's possible to have multiple event listeners for the same event:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\tlet count = 0;\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n\n\t/** @param {MouseEvent} event */\n\tfunction log(event) {\n\t\tconsole.log(event);\n\t}\n</script>\n\n<button on:click={increment} on:click={log}>\n\tclicks: {count}\n</button>\n```\n\n## Component events\n\nComponents can dispatch events by creating a _dispatcher_ when they are initialised:\n\n```svelte\n<!--- file: Stepper.svelte -->\n<script>\n\timport { createEventDispatcher } from 'svelte';\n\tconst dispatch = createEventDispatcher();\n</script>\n\n<button on:click={() => dispatch('decrement')}>decrement</button>\n<button on:click={() => dispatch('increment')}>increment</button>\n```\n\n`dispatch` creates a [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). If a second argument is provided, it becomes the `detail` property of the event object.\n\nA consumer of this component can listen for the dispatched events:\n\n```svelte\n<script>\n\timport Stepper from './Stepper.svelte';\n\n\tlet n = 0;\n</script>\n\n<Stepper\n\ton:decrement={() => n -= 1}\n\ton:increment={() => n += 1}\n/>\n\n<p>n: {n}</p>\n```\n\nComponent events do not bubble — a parent component can only listen for events on its immediate children.\n\nOther than `once`, modifiers are not valid on component event handlers.\n\n> [!NOTE]\n> If you're planning an eventual migration to Svelte 5, use callback props instead. This will make upgrading easier as `createEventDispatcher` is deprecated:\n>\n> ```svelte\n> <!--- file: Stepper.svelte --->\n> <script>\n> \texport let decrement;\n> \texport let increment;\n> </script>\n>\n> <button on:click={decrement}>decrement</button>\n> <button on:click={increment}>increment</button>\n> ```",
+		"svelte/legacy-slots": "In Svelte 5, content can be passed to components in the form of [snippets](snippet) and rendered using [render tags](@render).\n\nIn legacy mode, content inside component tags is considered _slotted content_, which can be rendered by the component using a `<slot>` element:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Modal from './Modal.svelte';\n</script>\n\n<Modal>This is some slotted content</Modal>\n```\n\n```svelte\n<!--- file: Modal.svelte --->\n<div class=\"modal\">\n\t<slot></slot>\n</div>\n```\n\n> [!NOTE] If you want to render a regular `<slot>` element, you can use `<svelte:element this={'slot'} />`.\n\n## Named slots\n\nA component can have _named_ slots in addition to the default slot. On the parent side, add a `slot=\"...\"` attribute to an element, component or [`<svelte:fragment>`](legacy-svelte-fragment) directly inside the component tags.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Modal from './Modal.svelte';\n\n\tlet open = true;\n</script>\n\n{#if open}\n\t<Modal>\n\t\tThis is some slotted content\n\n\t\t+++<div slot=\"buttons\">+++\n\t\t\t<button on:click={() => open = false}>\n\t\t\t\tclose\n\t\t\t</button>\n\t\t+++</div>+++\n\t</Modal>\n{/if}\n```\n\nOn the child side, add a corresponding `<slot name=\"...\">` element:\n\n```svelte\n<!--- file: Modal.svelte --->\n<div class=\"modal\">\n\t<slot></slot>\n\t<hr>\n\t+++<slot name=\"buttons\"></slot>+++\n</div>\n```\n\n## Fallback content\n\nIf no slotted content is provided, a component can define fallback content by putting it inside the `<slot>` element:\n\n```svelte\n<slot>\n\tThis will be rendered if no slotted content is provided\n</slot>\n```\n\n## Passing data to slotted content\n\nSlots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive.\n\n```svelte\n<!--- file: FancyList.svelte --->\n<ul>\n\t{#each items as data}\n\t\t<li class=\"fancy\">\n\t\t\t<!-- 'item' here... -->\n\t\t\t<slot item={process(data)} />\n\t\t</li>\n\t{/each}\n</ul>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<!-- ...corresponds to 'item' here: -->\n<FancyList {items} let:item={processed}>\n\t<div>{processed.text}</div>\n</FancyList>\n```\n\nThe usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.\n\nNamed slots can also expose values. The `let:` directive goes on the element with the `slot` attribute.\n\n```svelte\n<!--- file: FancyList.svelte --->\n<ul>\n\t{#each items as item}\n\t\t<li class=\"fancy\">\n\t\t\t<slot name=\"item\" item={process(data)} />\n\t\t</li>\n\t{/each}\n</ul>\n\n<slot name=\"footer\" />\n```\n\n```svelte\n<!--- file: App.svelte --->\n<FancyList {items}>\n\t<div slot=\"item\" let:item>{item.text}</div>\n\t<p slot=\"footer\">Copyright (c) 2019 Svelte Industries</p>\n</FancyList>\n```",
+		"svelte/legacy-$$slots": "In runes mode, we know which [snippets](snippet) were provided to a component, as they're just normal props.\n\nIn legacy mode, the way to know if content was provided for a given slot is with the `$$slots` object, whose keys are the names of the slots passed into the component by the parent.\n\n```svelte\n<!--- file: Card.svelte --->\n<div>\n\t<slot name=\"title\" />\n\t{#if $$slots.description}\n\t\t<!-- This <hr> and slot will render only if `slot=\"description\"` is provided. -->\n\t\t<hr />\n\t\t<slot name=\"description\" />\n\t{/if}\n</div>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<Card>\n\t<h1 slot=\"title\">Blog Post Title</h1>\n\t<!-- No slot named \"description\" was provided so the optional slot will not be rendered. -->\n</Card>\n```",
+		"svelte/legacy-svelte-fragment": "The `<svelte:fragment>` element allows you to place content in a [named slot](legacy-slots) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.\n\n```svelte\n<!--- file: Widget.svelte --->\n<div>\n\t<slot name=\"header\">No header was provided</slot>\n\t<p>Some content between header and footer</p>\n\t<slot name=\"footer\" />\n</div>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Widget from './Widget.svelte';\n</script>\n\n<Widget>\n\t<h1 slot=\"header\">Hello</h1>\n\t<svelte:fragment slot=\"footer\">\n\t\t<p>All rights reserved.</p>\n\t\t<p>Copyright (c) 2019 Svelte Industries</p>\n\t</svelte:fragment>\n</Widget>\n```\n\n> [!NOTE]\n> In Svelte 5+, this concept is obsolete, as snippets don't create a wrapping element",
+		"svelte/legacy-svelte-component": "In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#svelte:component-is-no-longer-necessary) for an example.\n\nIn legacy mode, it won't — we must use `<svelte:component>`, which destroys and recreates the component instance when the value of its `this` expression changes:\n\n```svelte\n<svelte:component this={MyComponent} />\n```\n\nIf `this` is falsy, no component is rendered.",
+		"svelte/legacy-svelte-self": "The `<svelte:self>` element allows a component to include itself, recursively.\n\nIt cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.\n\n```svelte\n<script>\n\texport let count;\n</script>\n\n{#if count > 0}\n\t<p>counting down... {count}</p>\n\t<svelte:self count={count - 1} />\n{:else}\n\t<p>lift-off!</p>\n{/if}\n```\n\n> [!NOTE]\n> This concept is obsolete, as components can import themselves:\n> ```svelte\n> <!--- file: App.svelte --->\n> <script>\n> \timport Self from './App.svelte'\n> \texport let count;\n> </script>\n>\n> {#if count > 0}\n> \t<p>counting down... {count}</p>\n> \t<Self count={count - 1} />\n> {:else}\n> \t<p>lift-off!</p>\n> {/if}\n> ```",
+		"svelte/legacy-component-api": "In Svelte 3 and 4, the API for interacting with a component is different than in Svelte 5. Note that this page does _not_ apply to legacy mode components in a Svelte 5 application.\n\n## Creating a component\n\n```ts\n// @noErrors\nconst component = new Component(options);\n```\n\nA client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class.\n\n```ts\n// @noErrors\nimport App from './App.svelte';\n\nconst app = new App({\n\ttarget: document.body,\n\tprops: {\n\t\t// assuming App.svelte contains something like\n\t\t// `export let answer`:\n\t\tanswer: 42\n\t}\n});\n```\n\nThe following initialisation options can be provided:\n\n| option    | default     | description                                                                                          |\n| --------- | ----------- | ---------------------------------------------------------------------------------------------------- |\n| `target`  | **none**    | An `HTMLElement` or `ShadowRoot` to render to. This option is required                               |\n| `anchor`  | `null`      | A child of `target` to render the component immediately before                                       |\n| `props`   | `{}`        | An object of properties to supply to the component                                                   |\n| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component                             |\n| `hydrate` | `false`     | See below                                                                                            |\n| `intro`   | `false`     | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes |\n\nExisting children of `target` are left where they are.\n\nThe `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/svelte-compiler#compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.\n\nWhereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.\n\nThe existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.\n\n```ts\n/// file: index.js\n// @noErrors\nimport App from './App.svelte';\n\nconst app = new App({\n\ttarget: document.querySelector('#server-rendered-html'),\n\thydrate: true\n});\n```\n\n> [!NOTE]\n> In Svelte 5+, use [`mount`](svelte#mount) instead\n\n## `$set`\n\n```ts\n// @noErrors\ncomponent.$set(props);\n```\n\nProgrammatically sets props on an instance. `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `<script>` block.\n\nCalling this method schedules an update for the next microtask — the DOM is _not_ updated synchronously.\n\n```ts\n// @noErrors\ncomponent.$set({ answer: 42 });\n```\n\n> [!NOTE]\n> In Svelte 5+, use `$state` instead to create a component props and update that\n>\n> ```js\n> // @noErrors\n> let props = $state({ answer: 42 });\n> const component = mount(Component, { props });\n> // ...\n> props.answer = 24;\n> ```\n\n## `$on`\n\n```ts\n// @noErrors\ncomponent.$on(ev, callback);\n```\n\nCauses the `callback` function to be called whenever the component dispatches an `event`.\n\nA function is returned that will remove the event listener when called.\n\n```ts\n// @noErrors\nconst off = component.$on('selected', (event) => {\n\tconsole.log(event.detail.selection);\n});\n\noff();\n```\n\n> [!NOTE]\n> In Svelte 5+, pass callback props instead\n\n## `$destroy`\n\n```js\n// @noErrors\ncomponent.$destroy();\n```\n\nRemoves a component from the DOM and triggers any `onDestroy` handlers.\n\n> [!NOTE]\n> In Svelte 5+, use [`unmount`](svelte#unmount) instead\n\n## Component props\n\n```js\n// @noErrors\ncomponent.prop;\n```\n\n```js\n// @noErrors\ncomponent.prop = value;\n```\n\nIf a component is compiled with `accessors: true`, each instance will have getters and setters corresponding to each of the component's props. Setting a value will cause a _synchronous_ update, rather than the default async update caused by `component.$set(...)`.\n\nBy default, `accessors` is `false`, unless you're compiling as a custom element.\n\n```js\n// @noErrors\nconsole.log(component.count);\ncomponent.count += 1;\n```\n\n> [!NOTE]\n> In Svelte 5+, this concept is obsolete. If you want to make properties accessible from the outside, `export` them\n\n## Server-side component API\n\n```js\n// @noErrors\nconst result = Component.render(...)\n```\n\nUnlike client-side components, server-side components don't have a lifespan after you render them — their whole job is to create some HTML and CSS. For that reason, the API is somewhat different.\n\nA server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.\n\nYou can import a Svelte component directly into Node using `svelte/register`.\n\n```js\n// @noErrors\nrequire('svelte/register');\n\nconst App = require('./App.svelte').default;\n\nconst { head, html, css } = App.render({\n\tanswer: 42\n});\n```\n\nThe `.render()` method accepts the following parameters:\n\n| parameter | default | description                                        |\n| --------- | ------- | -------------------------------------------------- |\n| `props`   | `{}`    | An object of properties to supply to the component |\n| `options` | `{}`    | An object of options                               |\n\nThe `options` object takes in the following options:\n\n| option    | default     | description                                                              |\n| --------- | ----------- | ------------------------------------------------------------------------ |\n| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component |\n\n```js\n// @noErrors\nconst { head, html, css } = App.render(\n\t// props\n\t{ answer: 42 },\n\t// options\n\t{\n\t\tcontext: new Map([['context-key', 'context-value']])\n\t}\n);\n```\n\n> [!NOTE]\n> In Svelte 5+, use [`render`](svelte-server#render) instead"
+	}
+}
diff --git a/packages/mcp-server/src/lib/schemas.ts b/packages/mcp-server/src/lib/schemas.ts
index ea951c45..0fefbb81 100644
--- a/packages/mcp-server/src/lib/schemas.ts
+++ b/packages/mcp-server/src/lib/schemas.ts
@@ -17,24 +17,8 @@ export const summary_data_schema = v.object({
 	model: v.string(),
 	total_sections: v.number(),
 	successful_summaries: v.number(),
-	failed_summaries: v.number(),
 	summaries: v.record(v.string(), v.string()),
-	errors: v.optional(
-		v.array(
-			v.object({
-				section: v.string(),
-				error: v.string(),
-			}),
-		),
-	),
-	download_errors: v.optional(
-		v.array(
-			v.object({
-				section: v.string(),
-				error: v.string(),
-			}),
-		),
-	),
+	content: v.record(v.string(), v.string()),
 });
 
 export const anthropic_batch_request_schema = v.object({
diff --git a/packages/mcp-server/src/mcp/handlers/tools/get-documentation.ts b/packages/mcp-server/src/mcp/handlers/tools/get-documentation.ts
index 7b7b365d..05b44a51 100644
--- a/packages/mcp-server/src/mcp/handlers/tools/get-documentation.ts
+++ b/packages/mcp-server/src/mcp/handlers/tools/get-documentation.ts
@@ -1,6 +1,11 @@
 import type { SvelteMcp } from '../../index.js';
 import * as v from 'valibot';
-import { get_sections, fetch_with_timeout, format_sections_list } from '../../utils.js';
+import {
+	get_sections,
+	fetch_with_timeout,
+	format_sections_list,
+	get_distilled_content,
+} from '../../utils.js';
 import { SECTIONS_LIST_INTRO, SECTIONS_LIST_OUTRO } from './prompts.js';
 
 export function get_documentation(server: SvelteMcp) {
@@ -8,7 +13,7 @@ export function get_documentation(server: SvelteMcp) {
 		{
 			name: 'get-documentation',
 			description:
-				'Retrieves full documentation content for Svelte 5 or SvelteKit sections. Supports flexible search by title (e.g., "$state", "routing") or file path (e.g., "cli/overview"). Can accept a single section name or an array of sections. Before running this, make sure to analyze the users query, as well as the output from list-sections (which should be called first). Then ask for ALL relevant sections the user might require. For example, if the user asks to build anything interactive, you will need to fetch all relevant runes, and so on.',
+				'Retrieves documentation content for Svelte 5 or SvelteKit sections. Supports flexible search by title (e.g., "$state", "routing") or file path (e.g., "cli/overview"). Can accept a single section name or an array of sections. Before running this, make sure to analyze the users query, as well as the output from list-sections (which should be called first). Then ask for ALL relevant sections the user might require. For example, if the user asks to build anything interactive, you will need to fetch all relevant runes, and so on.',
 			schema: v.object({
 				section: v.pipe(
 					v.union([v.string(), v.array(v.string())]),
@@ -16,9 +21,18 @@ export function get_documentation(server: SvelteMcp) {
 						'The section name(s) to retrieve. Can search by title (e.g., "$state", "load functions") or file path (e.g., "cli/overview"). Supports single string and array of strings',
 					),
 				),
+				use_distilled: v.optional(
+					v.pipe(
+						v.boolean(),
+						v.description(
+							'If true (default), returns condensed distilled versions of the documentation to optimize context size. Set to false ONLY if the user asks to fetch full documentation.',
+						),
+					),
+					true,
+				),
 			}),
 		},
-		async ({ section }) => {
+		async ({ section, use_distilled = true }) => {
 			let sections: string[];
 
 			if (Array.isArray(section)) {
@@ -46,6 +60,19 @@ export function get_documentation(server: SvelteMcp) {
 
 			const available_sections = await get_sections();
 
+			// Sections that are never distilled, since they contain reference information where things might go missing in distillation
+			const ALWAYS_FULL_SECTIONS = [
+				'kit/@sveltejs-kit',
+				'svelte/v5-migration-guide',
+				'kit/remote-functions',
+				'kit/configuration',
+				'mcp/prompts',
+				'svelte/compiler-warnings',
+				'svelte/svelte-compiler',
+				'svelte/compiler-errors',
+				'svelte/svelte',
+			];
+
 			const settled_results = await Promise.allSettled(
 				sections.map(async (requested_section) => {
 					const matched_section = available_sections.find(
@@ -56,6 +83,24 @@ export function get_documentation(server: SvelteMcp) {
 					);
 
 					if (matched_section) {
+						// Force full documentation for specific sections
+						const should_use_distilled =
+							use_distilled && !ALWAYS_FULL_SECTIONS.includes(matched_section.slug);
+
+						console.log(
+							`Fetching documentation for section "${matched_section.title}" (${should_use_distilled ? 'distilled' : 'full'})`,
+						);
+						if (should_use_distilled) {
+							const distilled = get_distilled_content(matched_section.slug);
+							if (distilled) {
+								return {
+									success: true,
+									content: `## ${matched_section.title}\n\n${distilled}`,
+								};
+							}
+							// If no distilled content, fall through to fetch full content
+						}
+
 						try {
 							const response = await fetch_with_timeout(matched_section.url);
 							if (response.ok) {
diff --git a/packages/mcp-server/src/mcp/handlers/tools/prompts.ts b/packages/mcp-server/src/mcp/handlers/tools/prompts.ts
index a6f9d419..f82dc386 100644
--- a/packages/mcp-server/src/mcp/handlers/tools/prompts.ts
+++ b/packages/mcp-server/src/mcp/handlers/tools/prompts.ts
@@ -3,3 +3,80 @@ export const SECTIONS_LIST_INTRO =
 
 export const SECTIONS_LIST_OUTRO =
 	"Carefully analyze the use_cases field for each section to identify which documentation is relevant for the user's specific query. The use_cases contain keywords for project types, features, components, and development stages. After identifying relevant sections, use the get-documentation tool with ALL relevant section titles or paths at once (can pass multiple sections as an array).";
+
+export const USE_CASES_PROMPT = `You are tasked with analyzing Svelte 5 and SvelteKit documentation pages to identify when they would be useful.
+
+Your task:
+1. Read the documentation page content provided
+2. Identify the main use cases, scenarios, or queries where this documentation would be relevant
+3. Create a VERY SHORT, comma-separated list of use cases (maximum 200 characters total)
+4. Think about what a developer might be trying to build or accomplish when they need this documentation
+
+Guidelines:
+- Focus on WHEN this documentation would be needed, not WHAT it contains
+- Consider specific project types (e.g., "e-commerce site", "blog", "dashboard", "social media app")
+- Consider specific features (e.g., "authentication", "forms", "data fetching", "animations")
+- Consider specific components (e.g., "slider", "modal", "dropdown", "card")
+- Consider development stages (e.g., "project setup", "deployment", "testing", "migration")
+- Use "always" for fundamental concepts that apply to virtually all Svelte projects
+- Be concise but specific
+- Use lowercase
+- Separate multiple use cases with commas
+
+Examples of good use_cases:
+- "always, any svelte project, core reactivity"
+- "authentication, login systems, user management"
+- "e-commerce, product listings, shopping carts"
+- "forms, user input, data submission"
+- "deployment, production builds, hosting setup"
+- "animation, transitions, interactive ui"
+- "routing, navigation, multi-page apps"
+- "blog, content sites, markdown rendering"
+
+Requirements:
+- Maximum 200 characters (including spaces and commas)
+- Lowercase only
+- Comma-separated list of use cases
+- Focus on WHEN/WHY someone would need this, not what it is
+- Be specific about project types, features, or components when applicable
+- Use "always" sparingly, only for truly universal concepts
+- Do not include quotes or special formatting in your response
+- Respond with ONLY the use cases text, no additional text
+
+Here is the documentation page content to analyze:
+`;
+
+export const DISTILLED_PROMPT = `You are an expert in web development, specifically Svelte 5 and SvelteKit. Your task is to condense and distill a section of the Svelte documentation that will be provided inside the "<documentation>" tag below, into a concise format while preserving the most important information.
+Shorten the text information AS MUCH AS POSSIBLE while covering key concepts.
+
+Focus on:
+1. Code examples with short explanations of how they work
+2. Key concepts and APIs with their usage patterns
+3. Important gotchas and best practices
+4. Patterns that developers commonly use
+
+Remove:
+1. Redundant explanations
+2. Verbose content that can be simplified
+3. Marketing language
+4. Legacy or deprecated content
+5. Anything else that is not strictly necessary
+
+Keep your output in markdown format. Preserve code blocks with their language annotations.
+Maintain headings but feel free to combine or restructure sections to improve clarity.
+
+Make sure all code examples use Svelte 5 runes syntax ($state, $derived, $effect, etc.)
+
+Keep the following Svelte 5 syntax rules in mind whend distilling the documentation:
+* There is no colon (:) in event modifiers. You MUST use "onclick" instead of "on:click".
+* Runes do not need to be imported, they are globals. 
+* $state() runes are always declared using let, never with const. 
+* When passing a function to $derived, you must always use $derived.by(() => ...). 
+* Error boundaries can only catch errors during component rendering and at the top level of an $effect inside the error boundary.
+* Error boundaries do not catch errors in onclick or other event handlers.
+
+IMPORTANT: All code examples MUST come from the documentation verbatim, do NOT create new code examples. Do NOT modify existing code examples.
+IMPORTANT: Because of changes in Svelte 5 syntax, do not include content from your existing knowledge, you may only use knowledge from the <documentation> tag below.
+
+Here is the documentation you must condense:
+`;
diff --git a/packages/mcp-server/src/mcp/utils.ts b/packages/mcp-server/src/mcp/utils.ts
index 5a50fca1..4620008f 100644
--- a/packages/mcp-server/src/mcp/utils.ts
+++ b/packages/mcp-server/src/mcp/utils.ts
@@ -1,6 +1,7 @@
 import * as v from 'valibot';
 import { documentation_sections_schema } from '../lib/schemas.js';
 import summary_data from '../use_cases.json' with { type: 'json' };
+import distilled_data from '../distilled.json' with { type: 'json' };
 
 export async function fetch_with_timeout(
 	url: string,
@@ -18,6 +19,16 @@ export async function fetch_with_timeout(
 }
 
 const summaries = (summary_data.summaries || {}) as Record<string, string>;
+const distilled_summaries = (distilled_data.summaries || {}) as Record<string, string>;
+const full_data = (distilled_data.content || {}) as Record<string, string>;
+
+export function get_distilled_content(slug: string): string | null {
+	return distilled_summaries[slug] ?? null;
+}
+
+export function get_cached_content(slug: string): string | null {
+	return full_data[slug] ?? null;
+}
 
 export async function get_sections() {
 	const sections = await fetch_with_timeout(
diff --git a/packages/mcp-server/src/use_cases.json b/packages/mcp-server/src/use_cases.json
index 6081a077..7e357528 100644
--- a/packages/mcp-server/src/use_cases.json
+++ b/packages/mcp-server/src/use_cases.json
@@ -1,176 +1,356 @@
 {
-	"generated_at": "2025-10-02T20:29:23.410Z",
+	"generated_at": "2025-10-14T19:08:03.430Z",
 	"model": "claude-sonnet-4-5-20250929",
-	"total_sections": 167,
-	"successful_summaries": 167,
-	"failed_summaries": 0,
+	"total_sections": 173,
+	"successful_summaries": 173,
 	"summaries": {
-		"docs/cli/overview": "project setup, creating new svelte apps, scaffolding, cli tools, initializing projects",
-		"docs/cli/faq": "project setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration",
-		"docs/cli/sv-create": "project setup, starting new sveltekit app, initializing project, creating from playground, choosing project template",
-		"docs/cli/sv-add": "project setup, adding features to existing projects, integrating tools, testing setup, styling setup, authentication, database setup, deployment adapters",
-		"docs/cli/sv-check": "code quality, ci/cd pipelines, error checking, typescript projects, pre-commit hooks, finding unused css, accessibility auditing, production builds",
-		"docs/cli/sv-migrate": "migration, upgrading svelte versions, upgrading sveltekit versions, modernizing codebase, svelte 3 to 4, svelte 4 to 5, sveltekit 1 to 2, adopting runes, refactoring deprecated apis",
-		"docs/cli/devtools-json": "development setup, chrome devtools integration, browser-based editing, local development workflow, debugging setup",
-		"docs/cli/drizzle": "database setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries",
-		"docs/cli/eslint": "code quality, linting, error detection, project setup, code standards, team collaboration, typescript projects",
-		"docs/cli/lucia": "authentication, login systems, user management, registration pages, session handling, auth setup",
-		"docs/cli/mdsvex": "blog, content sites, markdown rendering, documentation sites, technical writing, cms integration, article pages",
-		"docs/cli/paraglide": "internationalization, multi-language sites, i18n, translation, localization, language switching, global apps, multilingual content",
-		"docs/cli/playwright": "browser testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines, testing user flows",
-		"docs/cli/prettier": "code formatting, project setup, code style consistency, team collaboration, linting configuration",
-		"docs/cli/storybook": "component development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase",
-		"docs/cli/sveltekit-adapter": "deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify",
-		"docs/cli/tailwind": "project setup, styling, css framework, rapid prototyping, utility-first css, design systems, responsive design, adding tailwind to svelte",
-		"docs/cli/vitest": "testing, unit tests, component testing, test setup, quality assurance, ci/cd pipelines, test-driven development",
-		"docs/kit/introduction": "learning sveltekit, project setup, understanding framework basics, choosing between svelte and sveltekit, getting started with full-stack apps",
-		"docs/kit/creating-a-project": "project setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects",
-		"docs/kit/project-types": "deployment, project setup, choosing adapters, ssg, spa, ssr, serverless, mobile apps, desktop apps, pwa, offline apps, browser extensions, separate backend, docker containers",
-		"docs/kit/project-structure": "project setup, understanding file structure, organizing code, starting new project, learning sveltekit basics",
-		"docs/kit/web-standards": "always, any sveltekit project, data fetching, forms, api routes, server-side rendering, deployment to various platforms",
-		"docs/kit/routing": "routing, navigation, multi-page apps, project setup, file structure, api endpoints, data loading, layouts, error pages, always",
-		"docs/kit/load": "data fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data, form data, content rendering",
-		"docs/kit/form-actions": "forms, user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors",
-		"docs/kit/page-options": "prerendering static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization",
-		"docs/kit/state-management": "sveltekit, server-side rendering, ssr, state management, authentication, data persistence, load functions, context api, navigation, component lifecycle",
-		"docs/kit/remote-functions": "data fetching, server-side logic, database queries, type-safe client-server communication, forms, user input, mutations, authentication, crud operations, optimistic updates",
-		"docs/kit/building-your-app": "production builds, deployment preparation, build process optimization, adapter configuration, preview before deployment",
-		"docs/kit/adapters": "deployment, production builds, hosting setup, choosing deployment platform, configuring adapters",
-		"docs/kit/adapter-auto": "deployment, production builds, hosting setup, choosing deployment platform, ci/cd configuration",
-		"docs/kit/adapter-node": "deployment, production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services",
-		"docs/kit/adapter-static": "static site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites",
-		"docs/kit/single-page-apps": "spa mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup, fallback pages",
-		"docs/kit/adapter-cloudflare": "deployment, cloudflare workers, cloudflare pages, hosting setup, production builds, serverless deployment, edge computing",
-		"docs/kit/adapter-cloudflare-workers": "deploying to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, wrangler configuration, cloudflare platform bindings",
-		"docs/kit/adapter-netlify": "deployment, netlify hosting, production builds, serverless functions, edge functions, static site hosting",
-		"docs/kit/adapter-vercel": "deployment, vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables",
-		"docs/kit/writing-adapters": "custom deployment, building adapters, unsupported platforms, adapter development, custom hosting environments",
-		"docs/kit/advanced-routing": "advanced routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation",
-		"docs/kit/hooks": "authentication, logging, error tracking, request interception, api proxying, custom routing, internationalization, database initialization, middleware logic, session management",
-		"docs/kit/errors": "error handling, custom error pages, 404 pages, api error responses, production error logging, error tracking, type-safe errors",
-		"docs/kit/link-options": "routing, navigation, multi-page apps, performance optimization, link preloading, forms with get method, search functionality, focus management, scroll behavior",
-		"docs/kit/service-workers": "offline support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps",
-		"docs/kit/server-only-modules": "api keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation",
-		"docs/kit/snapshots": "forms, user input, preserving form data, multi-step forms, navigation state, preventing data loss, textarea content, input fields, comment systems, surveys",
-		"docs/kit/shallow-routing": "modals, dialogs, image galleries, overlays, history-driven ui, mobile-friendly navigation, photo viewers, lightboxes, drawer menus",
-		"docs/kit/observability": "performance monitoring, debugging, observability, tracing requests, production diagnostics, analyzing slow requests, finding bottlenecks, monitoring server-side operations",
-		"docs/kit/packaging": "building component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution",
-		"docs/kit/auth": "authentication, login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization checks",
-		"docs/kit/performance": "performance optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times",
-		"docs/kit/icons": "icons, ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management",
-		"docs/kit/images": "image optimization, responsive images, performance, hero images, product photos, galleries, cms integration, cdn setup, asset management",
-		"docs/kit/accessibility": "always, any sveltekit project, screen reader support, keyboard navigation, multi-page apps, client-side routing, internationalization, multilingual sites",
-		"docs/kit/seo": "seo optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization",
-		"docs/kit/faq": "troubleshooting package imports, library compatibility issues, client-side code execution, external api integration, middleware setup, database configuration, view transitions, yarn configuration",
-		"docs/kit/integrations": "project setup, css preprocessors, postcss, scss, sass, less, stylus, typescript setup, adding integrations, tailwind, testing, auth, linting, formatting",
-		"docs/kit/debugging": "debugging, breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution",
-		"docs/kit/migrating-to-sveltekit-2": "migration, upgrading from sveltekit 1 to 2, breaking changes, version updates",
-		"docs/kit/migrating": "migrating from sapper, upgrading legacy projects, sapper to sveltekit conversion, project modernization",
-		"docs/kit/additional-resources": "troubleshooting, getting help, finding examples, learning sveltekit, project templates, common issues, community support",
-		"docs/kit/glossary": "rendering strategies, performance optimization, deployment configuration, seo requirements, static sites, spas, server-side rendering, prerendering, edge deployment, pwa development",
-		"docs/kit/@sveltejs-kit": "forms, form actions, server-side validation, form submission, error handling, redirects, json responses, http errors, server utilities",
-		"docs/kit/@sveltejs-kit-hooks": "middleware, request processing, authentication chains, logging, multiple hooks, request/response transformation",
-		"docs/kit/@sveltejs-kit-node-polyfills": "node.js environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements",
-		"docs/kit/@sveltejs-kit-node": "node.js adapter, custom server setup, http integration, streaming files, node deployment, server-side rendering with node",
-		"docs/kit/@sveltejs-kit-vite": "project setup, vite configuration, initial sveltekit setup, build tooling",
-		"docs/kit/$app-environment": "always, conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection",
-		"docs/kit/$app-forms": "forms, user input, data submission, progressive enhancement, custom form handling, form validation",
-		"docs/kit/$app-navigation": "routing, navigation, multi-page apps, programmatic navigation, data reloading, preloading, shallow routing, navigation lifecycle, scroll handling, view transitions",
-		"docs/kit/$app-paths": "static assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation",
-		"docs/kit/$app-server": "remote functions, server-side logic, data fetching, form handling, api endpoints, client-server communication, prerendering, file reading, batch queries",
-		"docs/kit/$app-state": "routing, navigation, multi-page apps, loading states, url parameters, form handling, error states, version updates, page metadata, shallow routing",
-		"docs/kit/$app-stores": "legacy projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates",
-		"docs/kit/$app-types": "routing, navigation, type safety, route parameters, dynamic routes, link generation, pathname validation, multi-page apps",
-		"docs/kit/$env-dynamic-private": "api keys, secrets management, server-side config, environment variables, backend logic, deployment-specific settings, private data handling",
-		"docs/kit/$env-dynamic-public": "environment variables, client-side config, runtime configuration, public api keys, deployment-specific settings, multi-environment apps",
-		"docs/kit/$env-static-private": "server-side api keys, backend secrets, database credentials, private configuration, build-time optimization, server endpoints, authentication tokens",
-		"docs/kit/$env-static-public": "environment variables, public config, client-side data, api endpoints, build-time configuration, public constants",
-		"docs/kit/$lib": "project setup, component organization, importing shared components, reusable ui elements, code structure",
-		"docs/kit/$service-worker": "offline support, pwa, service workers, caching strategies, progressive web apps, offline-first apps",
-		"docs/kit/configuration": "project setup, configuration, adapters, deployment, build settings, environment variables, routing customization, prerendering, csp security, csrf protection, path configuration, typescript setup",
-		"docs/kit/cli": "project setup, typescript configuration, generated types, ./$types imports, initial project configuration",
-		"docs/kit/types": "typescript, type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup",
-		"docs/svelte/overview": "always, any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics",
-		"docs/svelte/getting-started": "project setup, starting new svelte project, initial installation, choosing between sveltekit and vite, editor configuration",
-		"docs/svelte/svelte-files": "always, any svelte project, component creation, project setup, learning svelte basics",
-		"docs/svelte/svelte-js-files": "shared reactive state, reusable reactive logic, state management across components, global stores, custom reactive utilities",
-		"docs/svelte/what-are-runes": "always, any svelte 5 project, understanding core syntax, learning svelte 5, migration from svelte 4",
-		"docs/svelte/$state": "always, any svelte project, core reactivity, state management, counters, forms, todo apps, interactive ui, data updates, class-based components",
-		"docs/svelte/$derived": "always, any svelte project, computed values, reactive calculations, derived data, transforming state, dependent values",
-		"docs/svelte/$effect": "canvas drawing, third-party library integration, dom manipulation, side effects, intervals, timers, network requests, analytics tracking",
-		"docs/svelte/$props": "always, any svelte project, passing data to components, component communication, reusable components, component props",
-		"docs/svelte/$bindable": "forms, user input, two-way data binding, custom input components, parent-child communication, reusable form fields",
-		"docs/svelte/$inspect": "debugging, development, tracking state changes, reactive state monitoring, troubleshooting reactivity issues",
-		"docs/svelte/$host": "custom elements, web components, dispatching custom events, component library, framework-agnostic components",
-		"docs/svelte/basic-markup": "always, any svelte project, basic markup, html templating, component structure, attributes, events, props, text rendering",
-		"docs/svelte/if": "always, conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation",
-		"docs/svelte/each": "always, lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds",
-		"docs/svelte/key": "animations, transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state",
-		"docs/svelte/await": "async data fetching, api calls, loading states, promises, error handling, lazy loading components, dynamic imports",
-		"docs/svelte/snippet": "reusable markup, component composition, passing content to components, table rows, list items, conditional rendering, reducing duplication",
-		"docs/svelte/@render": "reusable ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse",
-		"docs/svelte/@html": "rendering html strings, cms content, rich text editors, markdown to html, blog posts, wysiwyg output, sanitized html injection, dynamic html content",
-		"docs/svelte/@attach": "tooltips, popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components",
-		"docs/svelte/@const": "computed values in loops, derived calculations in blocks, local variables in each iterations, complex list rendering",
-		"docs/svelte/@debug": "debugging, development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection",
-		"docs/svelte/bind": "forms, user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, dimension tracking",
-		"docs/svelte/use": "custom directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks",
-		"docs/svelte/transition": "animations, interactive ui, modals, dropdowns, notifications, conditional content, show/hide elements, smooth state changes",
-		"docs/svelte/in-and-out": "animation, transitions, interactive ui, conditional rendering, independent enter/exit effects, modals, tooltips, notifications",
-		"docs/svelte/animate": "sortable lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering",
-		"docs/svelte/style": "dynamic styling, conditional styles, theming, dark mode, responsive design, interactive ui, component styling",
-		"docs/svelte/class": "always, conditional styling, dynamic classes, tailwind css, component styling, reusable components, responsive design",
-		"docs/svelte/await-expressions": "async data fetching, loading states, server-side rendering, awaiting promises in components, async validation, concurrent data loading",
-		"docs/svelte/scoped-styles": "always, styling components, scoped css, component-specific styles, preventing style conflicts, animations, keyframes",
-		"docs/svelte/global-styles": "global styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles",
-		"docs/svelte/custom-properties": "theming, custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization",
-		"docs/svelte/nested-style-elements": "component styling, scoped styles, dynamic styles, conditional styling, nested style tags, custom styling logic",
-		"docs/svelte/svelte-boundary": "error handling, async data loading, loading states, error recovery, flaky components, error reporting, resilient ui",
-		"docs/svelte/svelte-window": "keyboard shortcuts, scroll tracking, window resize handling, responsive layouts, online/offline detection, viewport dimensions, global event listeners",
-		"docs/svelte/svelte-document": "document events, visibility tracking, fullscreen detection, pointer lock, focus management, document-level interactions",
-		"docs/svelte/svelte-body": "mouse tracking, hover effects, cursor interactions, global body events, drag and drop, custom cursors, interactive backgrounds, body-level actions",
-		"docs/svelte/svelte-head": "seo optimization, page titles, meta tags, social media sharing, dynamic head content, multi-page apps, blog posts, product pages",
-		"docs/svelte/svelte-element": "dynamic content, cms integration, user-generated content, configurable ui, runtime element selection, flexible components",
-		"docs/svelte/svelte-options": "migration, custom elements, web components, legacy mode compatibility, runes mode setup, svg components, mathml components, css injection control",
-		"docs/svelte/stores": "shared state, cross-component data, reactive values, async data streams, manual control over updates, rxjs integration, extracting logic",
-		"docs/svelte/context": "shared state, avoiding prop drilling, component communication, theme providers, user context, authentication state, configuration sharing, deeply nested components",
-		"docs/svelte/lifecycle-hooks": "component initialization, cleanup tasks, timers, subscriptions, dom measurements, chat windows, autoscroll features, migration from svelte 4",
-		"docs/svelte/imperative-component-api": "project setup, client-side rendering, server-side rendering, ssr, hydration, testing, programmatic component creation, tooltips, dynamic mounting",
-		"docs/svelte/testing": "testing, quality assurance, unit tests, integration tests, component tests, e2e tests, vitest setup, playwright setup, test automation",
-		"docs/svelte/typescript": "typescript setup, type safety, component props typing, generic components, wrapper components, dom type augmentation, project configuration",
-		"docs/svelte/custom-elements": "web components, custom elements, component library, design system, framework-agnostic components, embedding svelte in non-svelte apps, shadow dom",
-		"docs/svelte/v4-migration-guide": "upgrading svelte 3 to 4, version migration, updating dependencies, breaking changes, legacy project maintenance",
-		"docs/svelte/v5-migration-guide": "migrating from svelte 4 to 5, upgrading projects, learning svelte 5 syntax changes, runes migration, event handler updates",
-		"docs/svelte/faq": "getting started, learning svelte, beginner setup, project initialization, vs code setup, formatting, testing, routing, mobile apps, troubleshooting, community support",
-		"docs/svelte/svelte": "migration from svelte 4 to 5, upgrading legacy code, component lifecycle hooks, context api, mounting components, event dispatchers, typescript component types",
-		"docs/svelte/svelte-action": "typescript types, actions, use directive, dom manipulation, element lifecycle, custom behaviors, third-party library integration",
-		"docs/svelte/svelte-animate": "animated lists, sortable items, drag and drop, reordering elements, todo lists, kanban boards, playlist management, smooth position transitions",
-		"docs/svelte/svelte-attachments": "library development, component libraries, programmatic element manipulation, migrating from actions to attachments, spreading props onto elements",
-		"docs/svelte/svelte-compiler": "build tools, custom compilers, ast manipulation, preprocessors, code transformation, migration scripts, syntax analysis, bundler plugins, dev tools",
-		"docs/svelte/svelte-easing": "animations, transitions, custom easing, smooth motion, interactive ui, modals, dropdowns, carousels, page transitions, scroll effects",
-		"docs/svelte/svelte-events": "window events, document events, global event listeners, event delegation, programmatic event handling, cleanup functions, media queries",
-		"docs/svelte/svelte-legacy": "migration from svelte 4 to svelte 5, upgrading legacy code, event modifiers, class components, imperative component instantiation",
-		"docs/svelte/svelte-motion": "animation, smooth transitions, interactive ui, sliders, counters, physics-based motion, drag gestures, accessibility, reduced motion",
-		"docs/svelte/svelte-reactivity-window": "responsive design, viewport tracking, scroll effects, window resize handling, online/offline detection, zoom level tracking",
-		"docs/svelte/svelte-reactivity": "reactive data structures, state management with maps/sets, game boards, selection tracking, url manipulation, query params, real-time clocks, media queries, responsive design",
-		"docs/svelte/svelte-server": "server-side rendering, ssr, static site generation, seo optimization, initial page load, pre-rendering, node.js server, custom server setup",
-		"docs/svelte/svelte-store": "state management, shared data, reactive stores, cross-component communication, global state, computed values, data synchronization, legacy svelte projects",
-		"docs/svelte/svelte-transition": "animations, transitions, interactive ui, modals, dropdowns, tooltips, notifications, svg animations, list animations, page transitions",
-		"docs/svelte/compiler-errors": "animation, transitions, keyed each blocks, list animations",
-		"docs/svelte/compiler-warnings": "accessibility, a11y compliance, wcag standards, screen readers, keyboard navigation, aria attributes, semantic html, interactive elements",
-		"docs/svelte/runtime-errors": "debugging errors, error handling, troubleshooting runtime issues, migration to svelte 5, component binding, effects and reactivity",
-		"docs/svelte/runtime-warnings": "debugging state proxies, console logging reactive values, inspecting state changes, development troubleshooting",
-		"docs/svelte/legacy-overview": "migrating from svelte 3/4 to svelte 5, maintaining legacy components, understanding deprecated features, gradual upgrade process",
-		"docs/svelte/legacy-let": "migration, legacy svelte projects, upgrading from svelte 4, understanding old reactivity, maintaining existing code, learning runes differences",
-		"docs/svelte/legacy-reactive-assignments": "legacy mode, migration from svelte 4, reactive statements, computed values, derived state, side effects",
-		"docs/svelte/legacy-export-let": "legacy mode, migration from svelte 4, maintaining older projects, component props without runes, exporting component methods, renaming reserved word props",
-		"docs/svelte/legacy-$$props-and-$$restProps": "legacy mode migration, component wrappers, prop forwarding, button components, reusable ui components, spreading props to child elements",
-		"docs/svelte/legacy-on": "legacy mode, event handling, button clicks, forms, user interactions, component communication, event forwarding, event modifiers",
-		"docs/svelte/legacy-slots": "legacy mode, migrating from svelte 4, component composition, reusable components, passing content to components, modals, layouts, wrappers",
-		"docs/svelte/legacy-$$slots": "legacy mode, conditional slot rendering, optional content sections, checking if slots provided, migrating from legacy to runes",
-		"docs/svelte/legacy-svelte-fragment": "named slots, component composition, layout systems, avoiding wrapper divs, legacy svelte projects, slot content organization",
-		"docs/svelte/legacy-svelte-component": "dynamic components, component switching, conditional rendering, legacy mode migration, tabbed interfaces, multi-step forms",
-		"docs/svelte/legacy-svelte-self": "recursive components, tree structures, nested menus, file explorers, comment threads, hierarchical data",
-		"docs/svelte/legacy-component-api": "migration from svelte 3/4 to 5, legacy component api, maintaining old projects, understanding deprecated patterns"
+		"cli/overview": "project setup, creating new svelte apps, cli tooling, scaffolding projects, maintaining svelte applications",
+		"cli/faq": "project setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration",
+		"cli/sv-create": "project setup, initializing new sveltekit app, starting fresh project, creating library package",
+		"cli/sv-add": "project setup, adding tools, integrating libraries, linting, testing, styling, authentication, database setup, i18n, deployment adapters",
+		"cli/sv-check": "code quality checks, ci/cd pipelines, error detection, typescript projects, accessibility auditing, unused css cleanup, pre-commit hooks, project validation",
+		"cli/sv-migrate": "upgrading svelte versions, migrating to svelte 5, sveltekit version upgrades, codebase modernization, runes migration, legacy project updates",
+		"cli/devtools-json": "development, debugging, chrome devtools, editing source files in browser, workspace setup, dev server configuration",
+		"cli/drizzle": "database setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries",
+		"cli/eslint": "code quality, linting, error detection, project setup, code standards, team collaboration, typescript projects",
+		"cli/lucia": "authentication, login systems, user management, registration pages, session handling, security setup",
+		"cli/mdsvex": "blog, content sites, markdown rendering, documentation sites, technical writing, cms integration",
+		"cli/paraglide": "internationalization, multi-language sites, i18n, translation, localization, language switching, global apps",
+		"cli/playwright": "browser testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines",
+		"cli/prettier": "code formatting, project setup, code style consistency, team collaboration, linting configuration",
+		"cli/storybook": "component development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase",
+		"cli/sveltekit-adapter": "deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify",
+		"cli/tailwind": "project setup, styling, utility-first css, rapid prototyping, responsive design, forms, typography, prettier integration",
+		"cli/vitest": "testing, unit tests, component testing, test setup, quality assurance, ci/cd pipelines",
+		"kit/introduction": "learning sveltekit, project setup, choosing framework, understanding sveltekit vs svelte, getting started, new projects, framework comparison",
+		"kit/creating-a-project": "project setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects",
+		"kit/project-types": "deployment, project setup, choosing adapters, ssr vs csr, static sites, spas, serverless, mobile apps, desktop apps, pwa, browser extensions",
+		"kit/project-structure": "project setup, understanding file structure, organizing code, starting new project, learning sveltekit basics",
+		"kit/web-standards": "always, any sveltekit project, data fetching, forms, api routes, server-side rendering, authentication, file uploads, streaming data, url handling, query parameters",
+		"kit/routing": "routing, navigation, multi-page apps, project setup, always, file structure, api endpoints, data loading, forms, error handling, layouts",
+		"kit/load": "data fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data",
+		"kit/form-actions": "forms, user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors",
+		"kit/page-options": "prerendering static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization",
+		"kit/state-management": "server-side rendering, ssr apps, multi-user applications, state management, authentication, data persistence, load functions, context api, navigation state, component lifecycle",
+		"kit/remote-functions": "data fetching, server-side logic, database queries, forms, user input, authentication, crud operations, api endpoints, type-safe client-server communication",
+		"kit/building-your-app": "deployment, production builds, build process, adapters, hosting setup, preview production app",
+		"kit/adapters": "deployment, production builds, hosting setup, choosing deployment platform, configuring adapters",
+		"kit/adapter-auto": "deployment, production builds, hosting setup, choosing deployment platform, ci/cd configuration",
+		"kit/adapter-node": "deployment, production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services",
+		"kit/adapter-static": "static site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites",
+		"kit/single-page-apps": "spa mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup",
+		"kit/adapter-cloudflare": "deployment, cloudflare workers, cloudflare pages, production hosting, serverless deployment, edge computing, static site hosting",
+		"kit/adapter-cloudflare-workers": "deploying to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, migrating from workers sites",
+		"kit/adapter-netlify": "deployment, netlify hosting, production builds, serverless functions, edge functions, static site hosting",
+		"kit/adapter-vercel": "deployment, vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables",
+		"kit/writing-adapters": "custom adapter development, building adapters, deploying to unsupported platforms, adapter creation, platform-specific deployment",
+		"kit/advanced-routing": "advanced routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation",
+		"kit/hooks": "authentication, middleware, request interception, error logging, custom headers, api proxying, database initialization, error tracking, url rewriting, internationalization",
+		"kit/errors": "error handling, custom error pages, 404 pages, api error responses, error tracking, production logging, type-safe errors, handleerror hook",
+		"kit/link-options": "navigation, multi-page apps, link optimization, performance tuning, preloading, search forms, external links, scroll behavior, focus management",
+		"kit/service-workers": "offline support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps",
+		"kit/server-only-modules": "api keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation",
+		"kit/snapshots": "forms, user input, preserving form data, multi-step forms, navigation state, preventing data loss, page refresh handling, browser back button",
+		"kit/shallow-routing": "modals, dialogs, image galleries, lightboxes, overlays, history-driven ui, mobile-friendly navigation, photo viewers, detail views",
+		"kit/observability": "performance monitoring, debugging, observability, production diagnostics, tracing requests, analyzing bottlenecks, server-side monitoring, opentelemetry integration",
+		"kit/packaging": "building component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution",
+		"kit/auth": "authentication, login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization",
+		"kit/performance": "performance optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times",
+		"kit/icons": "icons, ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management",
+		"kit/images": "image optimization, responsive images, hero images, product photos, galleries, performance tuning, asset management, cdn integration, cms content",
+		"kit/accessibility": "accessibility compliance, screen reader support, wcag standards, keyboard navigation, multilingual sites, client-side routing, focus management",
+		"kit/seo": "seo optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization",
+		"kit/faq": "troubleshooting package imports, library compatibility issues, client-side code execution, database setup, external api integration, middleware configuration, yarn package manager setup",
+		"kit/integrations": "project setup, css preprocessors, typescript configuration, adding integrations, tooling setup",
+		"kit/debugging": "debugging, breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution",
+		"kit/migrating-to-sveltekit-2": "migration, upgrading from sveltekit 1 to 2, breaking changes, version updates",
+		"kit/migrating": "migrating from sapper, upgrading legacy projects, sapper to sveltekit transition",
+		"kit/additional-resources": "troubleshooting, getting help, finding examples, learning from sample projects, common issues, community support",
+		"kit/glossary": "rendering configuration, performance optimization, deployment strategy, seo requirements, static sites, spa setup, ssr/csr decisions, edge deployment, pwa development, prerendering content",
+		"kit/@sveltejs-kit": "forms, form actions, form submission, form validation, error handling, redirects, api endpoints, server routes, deployment, adapter configuration, hooks, middleware, data loading, authentication, production setup",
+		"kit/@sveltejs-kit-hooks": "middleware, authentication, logging, request processing, multiple hooks, complex server logic",
+		"kit/@sveltejs-kit-node-polyfills": "node.js environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements",
+		"kit/@sveltejs-kit-node": "node.js adapters, custom servers, streaming files, http request/response handling, node deployment",
+		"kit/@sveltejs-kit-vite": "project setup, vite configuration, initial sveltekit setup, build tooling",
+		"kit/$app-environment": "always, conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection",
+		"kit/$app-forms": "forms, user input, data submission, progressive enhancement, custom form handling, form validation",
+		"kit/$app-navigation": "routing, navigation, multi-page apps, programmatic navigation, navigation lifecycle, data revalidation, preloading, shallow routing, navigation guards",
+		"kit/$app-paths": "static assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation",
+		"kit/$app-server": "remote functions, server-side logic, data fetching, form handling, mutations, prerendering, static site generation, reading assets, batch queries",
+		"kit/$app-state": "accessing current page data, navigation state, url params, form data, error handling, route info, detecting app updates, version polling, shallow routing",
+		"kit/$app-stores": "legacy projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates",
+		"kit/$app-types": "routing, navigation, type safety, route parameters, dynamic routes, link generation, pathname validation",
+		"kit/$env-dynamic-private": "environment variables, server-side config, api keys, secrets management, deployment configuration, adapter setup",
+		"kit/$env-dynamic-public": "environment variables, client-side config, runtime configuration, public env vars, deployment-specific settings, multi-environment apps",
+		"kit/$env-static-private": "server-side config, api keys, secrets management, environment-specific settings, build optimization, backend configuration",
+		"kit/$env-static-public": "environment variables, public config, client-side data, api endpoints, build-time configuration, public constants",
+		"kit/$lib": "project setup, component organization, importing shared components, reusable ui elements, code structure",
+		"kit/$service-worker": "service workers, offline support, pwa, caching strategies, progressive web apps, asset management, offline-first apps",
+		"kit/configuration": "project setup, configuration, adapters, deployment, build settings, environment variables, routing config, prerendering, csp security, csrf protection, path aliases, service workers",
+		"kit/cli": "project setup, typescript configuration, generated types, initial project creation, npm lifecycle scripts",
+		"kit/types": "typescript, type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup",
+		"svelte/overview": "always, any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics",
+		"svelte/getting-started": "project setup, starting new svelte project, initial installation, choosing framework, development environment, editor configuration",
+		"svelte/svelte-files": "always, any svelte project, component creation, project setup, learning svelte basics",
+		"svelte/svelte-js-files": "shared reactive state, reusable reactive logic, state management across components, global stores, custom reactive utilities",
+		"svelte/what-are-runes": "always, any svelte 5 project, understanding core syntax, learning svelte 5, migration from svelte 4",
+		"svelte/$state": "always, any svelte project, core reactivity, state management, counters, forms, todo apps, interactive ui, data updates, class-based components",
+		"svelte/$derived": "always, computed values, reactive calculations, dependent state, data transformations, filtering lists, totals, counters",
+		"svelte/$effect": "canvas drawing, third-party library integration, dom manipulation, network requests, side effects, intervals, timers, cleanup logic, analytics tracking",
+		"svelte/$props": "always, any svelte project, passing data to components, component communication, reusable components, forms, ui libraries",
+		"svelte/$bindable": "forms, user input, two-way data binding, custom input components, parent-child communication, reusable form fields",
+		"svelte/$inspect": "debugging, development, tracking state changes, reactive state monitoring, troubleshooting reactivity issues",
+		"svelte/$host": "custom elements, web components, dispatching events from custom elements, host element access",
+		"svelte/basic-markup": "always, any svelte project, basic markup, html templating, component syntax, attributes, props, events, text rendering",
+		"svelte/if": "always, conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation",
+		"svelte/each": "always, lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds",
+		"svelte/key": "animations, transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state",
+		"svelte/await": "async data fetching, api calls, loading states, promises, data loading, error handling, lazy loading components",
+		"svelte/snippet": "reusable markup, component composition, passing content to components, table rows, list items, conditional rendering, avoiding code duplication",
+		"svelte/@render": "reusable ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse",
+		"svelte/@html": "rendering html strings, cms content, rich text editors, markdown output, blog posts, wysiwyg content, sanitized html injection",
+		"svelte/@attach": "tooltips, popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components",
+		"svelte/@const": "loops with calculations, derived values in each blocks, complex list rendering, avoiding repeated expressions",
+		"svelte/@debug": "debugging, development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection",
+		"svelte/bind": "forms, user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, element dimensions, component refs",
+		"svelte/use": "custom directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks",
+		"svelte/transition": "animation, interactive ui, conditional rendering, modals, dropdowns, tooltips, notifications, toggles, accordions, tabs",
+		"svelte/in-and-out": "animation, transitions, interactive ui, conditional rendering, modals, tooltips, dropdowns, notifications, overlays",
+		"svelte/animate": "sortable lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering",
+		"svelte/style": "dynamic styling, conditional styles, theming, dark mode, interactive ui, component styling, css-in-js alternative",
+		"svelte/class": "always, conditional styling, dynamic classes, tailwind css, component styling, reusable components, props-based styling",
+		"svelte/await-expressions": "async data fetching, loading states, server-side rendering, awaiting promises in components, form validation, api calls, data-dependent ui",
+		"svelte/scoped-styles": "always, any svelte project, component styling, scoped css, animations, keyframes, styling isolation, component-specific styles",
+		"svelte/global-styles": "global styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles",
+		"svelte/custom-properties": "theming, custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization",
+		"svelte/nested-style-elements": "component styling, scoped styles, dynamic styles, conditional styling, nested style tags, global styles within components",
+		"svelte/svelte-boundary": "error handling, async data loading, loading states, error recovery, flaky components, error reporting, resilient ui",
+		"svelte/svelte-window": "keyboard shortcuts, scroll tracking, window resize handling, online/offline detection, viewport dimensions, global event listeners",
+		"svelte/svelte-document": "document events, visibility tracking, fullscreen detection, pointer lock, focus management, actions on document",
+		"svelte/svelte-body": "mouse tracking, cursor effects, global body events, drag and drop, actions on body element, document-level interactions",
+		"svelte/svelte-head": "seo optimization, dynamic page titles, meta tags, social media sharing, multi-page apps, blog posts, product pages, analytics setup",
+		"svelte/svelte-element": "dynamic content, cms integration, user-generated content, conditional element types, flexible components, runtime element selection",
+		"svelte/svelte-options": "component configuration, custom elements, web components, runes mode toggle, legacy mode, svg components, mathml components, css injection, compiler options",
+		"svelte/stores": "shared state, cross-component data, reactive values, async data streams, manual control over updates, rxjs integration, extracting logic",
+		"svelte/context": "avoiding prop drilling, shared state across components, theme providers, user authentication context, configuration sharing, deeply nested components",
+		"svelte/lifecycle-hooks": "component lifecycle, initialization, cleanup, dom manipulation, timers, intervals, subscriptions, chat apps, autoscroll, migration from svelte 4",
+		"svelte/imperative-component-api": "project setup, client-side rendering, server-side rendering, ssr, hydration, testing, component initialization, app entry point, always",
+		"svelte/testing": "testing, quality assurance, unit tests, integration tests, component tests, e2e tests, vitest setup, playwright setup, test automation",
+		"svelte/typescript": "typescript setup, type safety, component props typing, generic components, wrapper components, dom type augmentation, project configuration",
+		"svelte/custom-elements": "web components, custom elements, component library, design system, framework-agnostic components, embedding svelte in non-svelte apps, shadow dom",
+		"svelte/v4-migration-guide": "upgrading svelte 3 to 4, version migration, updating dependencies, breaking changes, legacy project maintenance",
+		"svelte/v5-migration-guide": "migration to svelte 5, upgrading from svelte 4, runes adoption, syntax modernization, breaking changes",
+		"svelte/faq": "getting started, learning svelte, beginner setup, project setup, tooling configuration, vs code setup, formatting, testing setup, routing decisions, mobile app development, troubleshooting",
+		"svelte/svelte": "migration from svelte 4 to 5, upgrading legacy code, component lifecycle hooks, context api, mounting components, event dispatchers, typescript component types",
+		"svelte/svelte-action": "typescript types, actions, use directive, dom manipulation, element lifecycle, custom behaviors, third-party library integration",
+		"svelte/svelte-animate": "animated lists, sortable items, drag and drop, reordering elements, todo lists, kanban boards, playlist management, smooth position transitions",
+		"svelte/svelte-attachments": "library development, component libraries, programmatic element manipulation, migrating from actions to attachments, spreading props onto elements",
+		"svelte/svelte-compiler": "build tools, custom compilers, ast manipulation, preprocessors, migration scripts, code generation, bundler plugins, syntax analysis",
+		"svelte/svelte-easing": "animations, transitions, interactive ui, smooth motion, custom easing curves, polished user experience",
+		"svelte/svelte-events": "window events, document events, global event listeners, event delegation, media queries, programmatic event handling, cleanup functions",
+		"svelte/svelte-legacy": "migration from svelte 4 to svelte 5, upgrading legacy code, event modifiers, class components, temporary compatibility",
+		"svelte/svelte-motion": "animation, smooth transitions, interactive ui, sliders, counters, physics-based motion, drag gestures, accessibility, number animations",
+		"svelte/svelte-reactivity-window": "responsive design, viewport tracking, scroll effects, window resize handling, online/offline detection, zoom level tracking",
+		"svelte/svelte-reactivity": "reactive data structures, state management with maps/sets, real-time clocks, url manipulation, media queries, game boards, collections tracking, reactive collections",
+		"svelte/svelte-server": "server-side rendering, ssr, static site generation, seo optimization, initial page load, prerendering",
+		"svelte/svelte-store": "state management, shared data, reactive stores, cross-component communication, global state, computed values, data synchronization, legacy svelte projects",
+		"svelte/svelte-transition": "animations, transitions, interactive ui, modals, dropdowns, tooltips, notifications, svg animations, list animations, page transitions",
+		"svelte/compiler-errors": "animation, transitions, keyed each blocks, list animations",
+		"svelte/compiler-warnings": "accessibility, a11y compliance, wcag standards, screen readers, keyboard navigation, aria attributes, semantic html, forms, interactive elements, media captions",
+		"svelte/runtime-errors": "debugging errors, error handling, troubleshooting runtime issues, migration to svelte 5, component binding, effects and reactivity",
+		"svelte/runtime-warnings": "debugging state proxies, console logging reactive values, inspecting state changes, development troubleshooting",
+		"svelte/legacy-overview": "migrating from svelte 3/4 to svelte 5, maintaining legacy components, understanding deprecated features, gradual upgrade process",
+		"svelte/legacy-let": "migration from legacy mode, understanding old svelte reactivity, maintaining legacy code, upgrading to runes, array reactivity issues",
+		"svelte/legacy-reactive-assignments": "legacy mode, migration from svelte 4, reactive statements, computed values, side effects, maintaining older svelte projects",
+		"svelte/legacy-export-let": "legacy mode, migration from svelte 4, maintaining older projects, component props without runes, exporting component methods, renaming reserved word props",
+		"svelte/legacy-$$props-and-$$restProps": "legacy mode migration, component wrappers, prop forwarding, reusable components, button components, design systems",
+		"svelte/legacy-on": "legacy mode, event handling, user interactions, buttons, forms, click handlers, component communication, event forwarding, event modifiers",
+		"svelte/legacy-slots": "legacy mode, migrating from svelte 4, component composition, reusable components, modals, layouts, passing content to components",
+		"svelte/legacy-$$slots": "legacy mode, conditional slot rendering, checking if slot content provided, component slot detection",
+		"svelte/legacy-svelte-fragment": "named slots, component composition, layout systems, avoiding wrapper divs, legacy svelte projects, slot content organization",
+		"svelte/legacy-svelte-component": "dynamic components, component switching, conditional rendering, legacy mode migration, runes mode upgrade",
+		"svelte/legacy-svelte-self": "recursive components, tree structures, nested menus, file explorers, comment threads, hierarchical data",
+		"svelte/legacy-component-api": "migration from svelte 3/4 to 5, legacy component api, maintaining old projects, understanding deprecated patterns",
+		"mcp/overview": "ai/llm integration, code generation with ai, claude/copilot setup, agent-assisted development, improving ai-generated svelte code",
+		"mcp/local-setup": "ai-assisted development, mcp integration, claude setup, cursor setup, vscode setup, ai coding tools, development environment configuration",
+		"mcp/remote-setup": "ai-assisted development, using claude/cursor/vscode with mcp, integrating svelte documentation into ide, ai coding tools setup",
+		"mcp/tools": "ai-assisted development, llm code generation, chatbot integration, ai tooling setup, automated code analysis, quick prototyping",
+		"mcp/resources": "mcp server setup, ai-assisted development, llm integration, documentation embedding, automated code generation",
+		"mcp/prompts": "mcp server integration, ai-assisted svelte development, llm tooling, automated code generation, svelte documentation access, code quality automation"
+	},
+	"content": {
+		"cli/overview": "The command line interface (CLI), `sv`, is a toolkit for creating and maintaining Svelte applications.\n\n## Usage\n\nThe easiest way to run `sv` is with [`npx`](https://docs.npmjs.com/cli/v8/commands/npx) (or the equivalent command if you're using a different package manager — for example, `pnpx` if you're using [pnpm](https://pnpm.io/)):\n\n```sh\nnpx sv <command> <args>\n```\n\nIf you're inside a project where `sv` is already installed, this will use the local installation, otherwise it will download the latest version and run it without installing it, which is particularly useful for [`sv create`](sv-create).\n\n## Acknowledgements\n\nThank you to [Christopher Brown](https://github.com/chbrown) who originally owned the `sv` name on npm for graciously allowing it to be used for the Svelte CLI. You can find the original `sv` package at [`@chbrown/sv`](https://www.npmjs.com/package/@chbrown/sv).",
+		"cli/faq": "## How do I run the `sv` CLI?\n\nRunning `sv` looks slightly different for each package manager. Here is a list of the most common commands:\n\n- **npm** : `npx sv create`\n- **pnpm** : `pnpx sv create` or `pnpm dlx sv create`\n- **Bun** : `bunx sv create`\n- **Deno** : `deno run npm:sv create`\n- **Yarn** : `yarn dlx sv create`\n\n## `npx sv` is not working\n\nSome package managers prefer to run locally installed tools instead of downloading and executing packages from the registry. This issue mostly occurs with `npm` and `yarn`. This usually results in an error message or looks like the command you were trying to execute did not do anything.\n\nHere is a list of issues with possible solutions that users have encountered in the past:\n\n- [`npx sv` create does nothing](https://github.com/sveltejs/cli/issues/472)\n- [`sv` command name collides with `runit`](https://github.com/sveltejs/cli/issues/259)\n- [`sv` in windows powershell conflicts with `Set-Variable`](https://github.com/sveltejs/cli/issues/317)",
+		"cli/sv-create": "`sv create` sets up a new SvelteKit project, with options to [setup additional functionality](sv-add#Official-add-ons).\n\n## Usage\n\n```sh\nnpx sv create [options] [path]\n```\n\n## Options\n\n### `--from-playground <url>`\n\nCreate a SvelteKit project from a [playground](/playground) URL. This downloads all playground files, detects external dependencies, and sets up a complete SvelteKit project structure with everything ready to go.\n\nExample:\n\n```sh\nnpx sv create --from-playground=\"https://svelte.dev/playground/hello-world\"\n```\n\n### `--template <name>`\n\nWhich project template to use:\n\n- `minimal` — barebones scaffolding for your new app\n- `demo` — showcase app with a word guessing game that works without JavaScript\n- `library` — template for a Svelte library, set up with `svelte-package`\n\n### `--types <option>`\n\nWhether and how to add typechecking to the project:\n\n- `ts` — default to `.ts` files and use `lang=\"ts\"` for `.svelte` components\n- `jsdoc` — use [JSDoc syntax](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) for types\n\n### `--no-types`\n\nPrevent typechecking from being added. Not recommended!\n\n### `--no-add-ons`\n\nRun the command without the interactive add-ons prompt\n\n### `--install <package-manager>`\n\nInstalls dependencies with a specified package manager:\n\n- `npm`\n- `pnpm`\n- `yarn`\n- `bun`\n- `deno`\n\n### `--no-install`\n\nPrevents installing dependencies.\n\n<!-- ## Programmatic interface\n\n```js\n// TODO: this gives type checking errors in the docs site when not commented out. Need to release sv, install it in the site, and uncomment this.\n// import { create } from 'sv';\n\n// // todo: check if this is right\n// create(cwd, {\n// \t// add your options here\n// \t// todo: list available option\n// });\n```\n-->",
+		"cli/sv-add": "`sv add` updates an existing project with new functionality.\n\n## Usage\n\n```sh\nnpx sv add\n```\n\n```sh\nnpx sv add [add-ons]\n```\n\nYou can select multiple space-separated add-ons from [the list below](#Official-add-ons), or you can use the interactive prompt.\n\n## Options\n\n- `-C`, `--cwd` — path to the root of your Svelte(Kit) project\n- `--no-git-check` — even if some files are dirty, no prompt will be shown\n- `--install` — installs dependencies with a specified package manager\n- `--no-install` — prevents installing dependencies\n\n## Official add-ons\n\n<!-- TODO: it'd be nice for this to live on the \"add-ons\" page, but we first need svelte.dev to support making pages from headings -->\n\n- [`devtools-json`](devtools-json)\n- [`drizzle`](drizzle)\n- [`eslint`](eslint)\n- [`lucia`](lucia)\n- [`mdsvex`](mdsvex)\n- [`paraglide`](paraglide)\n- [`playwright`](playwright)\n- [`prettier`](prettier)\n- [`storybook`](storybook)\n- [`sveltekit-adapter`](sveltekit-adapter)\n- [`tailwindcss`](tailwind)\n- [`vitest`](vitest)",
+		"cli/sv-check": "`sv check` finds errors and warnings in your project, such as:\n\n- unused CSS\n- accessibility hints\n- JavaScript/TypeScript compiler errors\n\nRequires Node 16 or later.\n\n## Installation\n\nYou will need to have the `svelte-check` package installed in your project:\n\n```sh\nnpm i -D svelte-check\n```\n\n## Usage\n\n```sh\nnpx sv check\n```\n\n## Options\n\n### `--workspace <path>`\n\nPath to your workspace. All subdirectories except `node_modules` and those listed in `--ignore` are checked.\n\n### `--output <format>`\n\nHow to display errors and warnings. See [machine-readable output](#Machine-readable-output).\n\n- `human`\n- `human-verbose`\n- `machine`\n- `machine-verbose`\n\n### `--watch`\n\nKeeps the process alive and watches for changes.\n\n### `--preserveWatchOutput`\n\nPrevents the screen from being cleared in watch mode.\n\n### `--tsconfig <path>`\n\nPass a path to a `tsconfig` or `jsconfig` file. The path can be relative to the workspace path or absolute. Doing this means that only files matched by the `files`/`include`/`exclude` pattern of the config file are diagnosed. It also means that errors from TypeScript and JavaScript files are reported. If not given, will traverse upwards from the project directory looking for the next `jsconfig`/`tsconfig.json` file.\n\n### `--no-tsconfig`\n\nUse this if you only want to check the Svelte files found in the current directory and below and ignore any `.js`/`.ts` files (they will not be type-checked)\n\n### `--ignore <paths>`\n\nFiles/folders to ignore, relative to workspace root. Paths should be comma-separated and quoted. Example:\n\n```sh\nnpx sv check --ignore \"dist,build\"\n```\n\n<!-- TODO what the hell does this mean? is it possible to use --tsconfig AND --no-tsconfig? if so what would THAT mean? -->\n\nOnly has an effect when used in conjunction with `--no-tsconfig`. When used in conjunction with `--tsconfig`, this will only have effect on the files watched, not on the files that are diagnosed, which is then determined by the `tsconfig.json`.\n\n### `--fail-on-warnings`\n\nIf provided, warnings will cause `sv check` to exit with an error code.\n\n### `--compiler-warnings <warnings>`\n\nA quoted, comma-separated list of `code:behaviour` pairs where `code` is a [compiler warning code](../svelte/compiler-warnings) and `behaviour` is either `ignore` or `error`:\n\n```sh\nnpx sv check --compiler-warnings \"css_unused_selector:ignore,a11y_missing_attribute:error\"\n```\n\n### `--diagnostic-sources <sources>`\n\nA quoted, comma-separated list of sources that should run diagnostics on your code. By default, all are active:\n\n<!-- TODO would be nice to have a clearer definition of what these are -->\n- `js` (includes TypeScript)\n- `svelte`\n- `css`\n\nExample:\n\n```sh\nnpx sv check --diagnostic-sources \"js,svelte\"\n```\n\n### `--threshold <level>`\n\nFilters the diagnostics:\n\n- `warning` (default) — both errors and warnings are shown\n- `error` — only errors are shown\n\n## Troubleshooting\n\n[See the language-tools documentation](https://github.com/sveltejs/language-tools/blob/master/docs/README.md) for more information on preprocessor setup and other troubleshooting.\n\n## Machine-readable output\n\nSetting the `--output` to `machine` or `machine-verbose` will format output in a way that is easier to read\nby machines, e.g. inside CI pipelines, for code quality checks, etc.\n\nEach row corresponds to a new record. Rows are made up of columns that are separated by a\nsingle space character. The first column of every row contains a timestamp in milliseconds\nwhich can be used for monitoring purposes. The second column gives us the \"row type\", based\non which the number and types of subsequent columns may differ.\n\nThe first row is of type `START` and contains the workspace folder (wrapped in quotes). Example:\n\n```\n1590680325583 START \"/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles\"\n```\n\nAny number of `ERROR` or `WARNING` records may follow. Their structure is identical and depends on the output argument.\n\nIf the argument is `machine` it will tell us the filename, the starting line and column numbers, and the error message. The filename is relative to the workspace directory. The filename and the message are both wrapped in quotes. Example:\n\n```\n1590680326283 ERROR \"codeactions.svelte\" 1:16 \"Cannot find module 'blubb' or its corresponding type declarations.\"\n1590680326778 WARNING \"imported-file.svelte\" 0:37 \"Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`\"\n```\n\nIf the argument is `machine-verbose` it will tell us the filename, the starting line and column numbers, the ending line and column numbers, the error message, the code of diagnostic, the human-friendly description of the code and the human-friendly source of the diagnostic (eg. svelte/typescript). The filename is relative to the workspace directory. Each diagnostic is represented as an [ndjson](https://en.wikipedia.org/wiki/JSON_streaming#Newline-Delimited_JSON) line prefixed by the timestamp of the log. Example:\n\n```\n1590680326283 {\"type\":\"ERROR\",\"fn\":\"codeaction.svelte\",\"start\":{\"line\":1,\"character\":16},\"end\":{\"line\":1,\"character\":23},\"message\":\"Cannot find module 'blubb' or its corresponding type declarations.\",\"code\":2307,\"source\":\"js\"}\n1590680326778 {\"type\":\"WARNING\",\"filename\":\"imported-file.svelte\",\"start\":{\"line\":0,\"character\":37},\"end\":{\"line\":0,\"character\":51},\"message\":\"Component has unused export property 'prop'. If it is for external reference only, please consider using `export\nconst prop`\",\"code\":\"unused-export-let\",\"source\":\"svelte\"}\n```\n\nThe output concludes with a `COMPLETED` message that summarizes total numbers of files, errors and warnings that were encountered during the check. Example:\n\n```\n1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS\n```\n\nIf the application experiences a runtime error, this error will appear as a `FAILURE` record. Example:\n\n```\n1590680328921 FAILURE \"Connection closed\"\n```\n\n## Credits\n\n- Vue's [VTI](https://github.com/vuejs/vetur/tree/master/vti) which laid the foundation for `svelte-check`\n\n## FAQ\n\n### Why is there no option to only check specific files (for example only staged files)?\n\n`svelte-check` needs to 'see' the whole project for checks to be valid. Suppose you renamed a component prop but didn't update any of the places where the prop is used — the usage sites are all errors now, but you would miss them if checks only ran on changed files.",
+		"cli/sv-migrate": "`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate) package.\n\nSome migrations may annotate your codebase with tasks for completion that you can find by searching for `@migration`.\n\n## Usage\n\n```sh\nnpx sv migrate\n```\n\nYou can also specify a migration directly via the CLI:\n```sh\nnpx sv migrate [migration]\n```\n\n## Migrations\n\n### `app-state`\n\nMigrates `$app/stores` usage to `$app/state` in `.svelte` files. See the [migration guide](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated) for more details.\n\n### `svelte-5`\n\nUpgrades a Svelte 4 app to use Svelte 5, and updates individual components to use [runes](../svelte/what-are-runes) and other Svelte 5 syntax ([see migration guide](../svelte/v5-migration-guide)).\n\n### `self-closing-tags`\n\nReplaces all the self-closing non-void elements in your `.svelte` files. See the [pull request](https://github.com/sveltejs/kit/pull/12128) for more details.\n\n### `svelte-4`\n\nUpgrades a Svelte 3 app to use Svelte 4 ([see migration guide](../svelte/v4-migration-guide)).\n\n### `sveltekit-2`\n\nUpgrades a SvelteKit 1 app to SvelteKit 2 ([see migration guide](../kit/migrating-to-sveltekit-2)).\n\n### `package`\n\nUpgrades a library using `@sveltejs/package` version 1 to version 2. See the [pull request](https://github.com/sveltejs/kit/pull/8922) for more details.\n\n### `routes`\n\nUpgrades a pre-release SvelteKit app to use the filesystem routing conventions in SvelteKit 1. See the [pull request](https://github.com/sveltejs/kit/discussions/5774) for more details.",
+		"cli/devtools-json": "The `devtools-json` add-on installs [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json/), which is a Vite plugin for generating a Chromium DevTools project settings file on-the-fly in the development server. This file is served from `/.well-known/appspecific/com.chrome.devtools.json` and tells Chromium browsers where your project's source code lives so that you can use [the workspaces feature](https://developer.chrome.com/docs/devtools/workspaces) to edit source files in the browser.\n\n> [!NOTE]\n> Installing the plugin enables the feature for all users connecting to the dev server with a Chromium browser, and allows the browser to read and write all files within the directory. If using Chrome's AI Assistance feature, this may also result in data being sent to Google.\n\n## Alternatives\n\nIf you'd prefer not to install the plugin, but still want to avoid seeing a message about the missing file, you have a couple of options.\n\nFirstly, you can prevent the request from being issued on your machine by disabling the feature in your browser. You can do this in Chrome by visiting `chrome://flags` and disabling the \"DevTools Project Settings\". You may also be interested in disabling \"DevTools Automatic Workspace Folders\" since it’s closely related.\n\nYou can also prevent the web server from issuing a notice regarding the incoming request for all developers of your application by handling the request yourself. For example, you can create a file named `.well-known/appspecific/com.chrome.devtools.json` with the contents `\"Go away, Chrome DevTools!\"` or you can add logic to respond to the request in your [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) hook:\n\n```js\n/// file: src/hooks.server.js\nimport { dev } from '$app/environment';\n\nexport function handle({ event, resolve }) {\n\tif (dev && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {\n\t\treturn new Response(undefined, { status: 404 });\n\t}\n\n\treturn resolve(event);\n}\n```\n\n## Usage\n\n```sh\nnpx sv add devtools-json\n```\n\n## What you get\n\n- `vite-plugin-devtools-json` added to your Vite plugin options",
+		"cli/drizzle": "[Drizzle ORM](https://orm.drizzle.team/) is a TypeScript ORM offering both relational and SQL-like query APIs, and which is serverless-ready by design.\n\n## Usage\n\n```sh\nnpx sv add drizzle\n```\n\n## What you get\n\n- a setup that keeps your database access in SvelteKit's server files\n- an `.env` file to store your credentials\n- compatibility with the Lucia auth add-on\n- an optional Docker configuration to help with running a local database\n\n## Options\n\n### database\n\nWhich database variant to use:\n\n- `postgresql` — the most popular open source database\n- `mysql` — another popular open source database\n- `sqlite` — file-based database not requiring a database server\n\n```sh\nnpx sv add drizzle=database:postgresql\n```\n\n### client\n\nThe SQL client to use, depends on `database`:\n\n- For `postgresql`: `postgres.js`, `neon`,\n- For `mysql`: `mysql2`, `planetscale`\n- For `sqlite`: `better-sqlite3`, `libsql`, `turso`\n\n```sh\nnpx sv add drizzle=database:postgresql+client:postgres.js\n```\n\nDrizzle is compatible with well over a dozen database drivers. We just offer a few of the most common ones here for simplicity, but if you'd like to use another one you can choose one as a placeholder and swap it out for another after setup by choosing from [Drizzle's full list of compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps).\n\n### docker\n\nWhether to add Docker Compose configuration. Only available for [`database`](#Options-database) `postgresql` or `mysql`\n\n```sh\nnpx sv add drizzle=database:postgresql+client:postgres.js+docker:yes\n```",
+		"cli/eslint": "[ESLint](https://eslint.org/) finds and fixes problems in your code.\n\n## Usage\n\n```sh\nnpx sv add eslint\n```\n\n## What you get\n\n- the relevant packages installed including `eslint-plugin-svelte`\n- an `eslint.config.js` file\n- updated `.vscode/settings.json`\n- configured to work with TypeScript and `prettier` if you're using those packages",
+		"cli/lucia": "An auth setup following [the Lucia auth guide](https://lucia-auth.com/).\n\n## Usage\n\n```sh\nnpx sv add lucia\n```\n\n## What you get\n\n- an auth setup for SvelteKit and Drizzle following the best practices from the Lucia auth guide\n- optional demo registration and login pages\n\n## Options\n\n### demo\n\nWhether to include demo registration and login pages.\n\n```sh\nnpx sv add lucia=demo:yes\n```",
+		"cli/mdsvex": "[mdsvex](https://mdsvex.pngwn.io) is a markdown preprocessor for Svelte components - basically MDX for Svelte. It allows you to use Svelte components in your markdown, or markdown in your Svelte components.\n\n## Usage\n\n```sh\nnpx sv add mdsvex\n```\n\n## What you get\n\n- mdsvex installed and configured in your `svelte.config.js`",
+		"cli/paraglide": "[Paraglide from Inlang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) is a compiler-based i18n library that emits tree-shakable message functions with small bundle sizes, no async waterfalls, full type-safety, and more.\n\n## Usage\n\n```sh\nnpx sv add paraglide\n```\n\n## What you get\n\n- Inlang project settings\n- paraglide Vite plugin\n- SvelteKit `reroute` and `handle` hooks\n- `text-direction` and `lang` attributes in `app.html`\n- updated `.gitignore`\n- an optional demo page showing how to use paraglide\n\n## Options\n\n### languageTags\n\nThe languages you'd like to support specified as IETF BCP 47 language tags.\n\n```sh\nnpx sv add paraglide=\"languageTags:en,es\"\n```\n\n### demo\n\nWhether to generate an optional demo page showing how to use paraglide.\n\n```sh\nnpx sv add paraglide=\"demo:yes\"\n```",
+		"cli/playwright": "[Playwright](https://playwright.dev) browser testing.\n\n## Usage\n\n```sh\nnpx sv add playwright\n```\n\n## What you get\n\n- scripts added in your `package.json`\n- a Playwright config file\n- an updated `.gitignore`\n- a demo test",
+		"cli/prettier": "[Prettier](https://prettier.io) is an opinionated code formatter.\n\n## Usage\n\n```sh\nnpx sv add prettier\n```\n\n## What you get\n\n- scripts in your `package.json`\n- `.prettierignore` and `.prettierrc` files\n- updates to your eslint config if you're using that package",
+		"cli/storybook": "[Storybook](https://storybook.js.org/) is a frontend component workshop.\n\n## Usage\n\n```sh\nnpx sv add storybook\n```\n\n## What you get\n\n- `npx storybook init` run for you from the same convenient `sv` CLI used for all other add-ons\n- [Storybook for SvelteKit](https://storybook.js.org/docs/get-started/frameworks/sveltekit) or [Storybook for Svelte & Vite](https://storybook.js.org/docs/get-started/frameworks/svelte-vite) with default config provided, easy mocking of many SvelteKit modules, automatic link handling, and more.",
+		"cli/sveltekit-adapter": "[SvelteKit adapters](/docs/kit/adapters) allow you to deploy your site to numerous platforms. This add-on allows you to configure officially provided SvelteKit adapters, but a number of [community-provided adapters](https://www.sveltesociety.dev/packages?category=sveltekit-adapters) are also available.\n\n## Usage\n\n```sh\nnpx sv add sveltekit-adapter\n```\n\n## What you get\n\n- the chosen SvelteKit adapter installed and configured in your `svelte.config.js`\n\n## Options\n\n### adapter\n\nWhich SvelteKit adapter to use:\n\n- `auto` — [`@sveltejs/adapter-auto`](/docs/kit/adapter-auto) automatically chooses the proper adapter to use, but is less configurable\n- `node` — [`@sveltejs/adapter-node`](/docs/kit/adapter-node) generates a standalone Node server\n- `static` — [`@sveltejs/adapter-static`](/docs/kit/adapter-static) allows you to use SvelteKit as a static site generator (SSG)\n- `vercel` — [`@sveltejs/adapter-vercel`](/docs/kit/adapter-vercel) allows you to deploy to Vercel\n- `cloudflare` — [`@sveltejs/adapter-cloudflare`](/docs/kit/adapter-cloudflare) allows you to deploy to Cloudflare\n- `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) allows you to deploy to Netlify\n\n```sh\nnpx sv add sveltekit-adapter=adapter:node\n```",
+		"cli/tailwind": "[Tailwind CSS](https://tailwindcss.com/) allows you to rapidly build modern websites without ever leaving your HTML.\n\n## Usage\n\n```sh\nnpx sv add tailwindcss\n```\n\n## What you get\n\n- Tailwind setup following the [Tailwind for SvelteKit guide](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)\n- Tailwind Vite plugin\n- updated `app.css` and `+layout.svelte` (for SvelteKit) or `App.svelte` (for non-SvelteKit Vite apps)\n- integration with `prettier` if using that package\n\n## Options\n\n### plugins\n\nWhich plugin to use:\n\n- `typography` — [`@tailwindcss/typography`](https://github.com/tailwindlabs/tailwindcss-typography)\n- `forms` — [`@tailwindcss/forms`](https://github.com/tailwindlabs/tailwindcss-forms)\n\n```sh\nnpx sv add tailwindcss=\"plugins:typography\"\n```",
+		"cli/vitest": "[Vitest](https://vitest.dev/) is a Vite-native testing framework.\n\n## Usage\n\n```sh\nnpx sv add vitest\n```\n\n## What you get\n\n- the relevant packages installed and scripts added to your `package.json`\n- client/server-aware testing setup for Svelte in your Vite config file\n- demo tests",
+		"kit/introduction": "## Before we begin\n\n> [!NOTE] If you're new to Svelte or SvelteKit we recommend checking out the [interactive tutorial](/tutorial/kit).\n>\n> If you get stuck, reach out for help in the [Discord chatroom](/chat).\n\n## What is SvelteKit?\n\nSvelteKit is a framework for rapidly developing robust, performant web applications using [Svelte](../svelte). If you're coming from React, SvelteKit is similar to Next. If you're coming from Vue, SvelteKit is similar to Nuxt.\n\nTo learn more about the kinds of applications you can build with SvelteKit, see the [documentation regarding project types](project-types).\n\n## What is Svelte?\n\nIn short, Svelte is a way of writing user interface components — like a navigation bar, comment section, or contact form — that users see and interact with in their browsers. The Svelte compiler converts your components to JavaScript that can be run to render the HTML for the page and to CSS that styles the page. You don't need to know Svelte to understand the rest of this guide, but it will help. If you'd like to learn more, check out [the Svelte tutorial](/tutorial).\n\n## SvelteKit vs Svelte\n\nSvelte renders UI components. You can compose these components and render an entire page with just Svelte, but you need more than just Svelte to write an entire app.\n\nSvelteKit helps you build web apps while following modern best practices and providing solutions to common development challenges. It offers everything from basic functionalities — like a [router](glossary#Routing) that updates your UI when a link is clicked — to more advanced capabilities. Its extensive list of features includes [build optimizations](https://vitejs.dev/guide/features.html#build-optimizations) to load only the minimal required code; [offline support](service-workers); [preloading](link-options#data-sveltekit-preload-data) pages before user navigation; [configurable rendering](page-options) to handle different parts of your app on the server via [SSR](glossary#SSR), in the browser through [client-side rendering](glossary#CSR), or at build-time with [prerendering](glossary#Prerendering); [image optimization](images); and much more. Building an app with all the modern best practices is fiendishly complicated, but SvelteKit does all the boring stuff for you so that you can get on with the creative part.\n\nIt reflects changes to your code in the browser instantly to provide a lightning-fast and feature-rich development experience by leveraging [Vite](https://vitejs.dev/) with a [Svelte plugin](https://github.com/sveltejs/vite-plugin-svelte) to do [Hot Module Replacement (HMR)](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#hot).",
+		"kit/creating-a-project": "The easiest way to start building a SvelteKit app is to run `npx sv create`:\n\n```sh\nnpx sv create my-app\ncd my-app\nnpm run dev\n```\n\nThe first command will scaffold a new project in the `my-app` directory asking if you'd like to set up some basic tooling such as TypeScript. See [the CLI docs](/docs/cli/overview) for information about these options and [the integrations page](./integrations) for pointers on setting up additional tooling. `npm run dev` will then start the development server on [localhost:5173](http://localhost:5173) - make sure you install dependencies before running this if you didn't do so during project creation.\n\nThere are two basic concepts:\n\n- Each page of your app is a [Svelte](../svelte) component\n- You create pages by adding files to the `src/routes` directory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over\n\nTry editing the files to get a feel for how everything works.\n\n## Editor setup\n\nWe recommend using [Visual Studio Code (aka VS Code)](https://code.visualstudio.com/download) with [the Svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), but [support also exists for numerous other editors](https://sveltesociety.dev/resources#editor-support).",
+		"kit/project-types": "SvelteKit offers configurable rendering, which allows you to build and deploy your project in several different ways. You can build all of the below types of applications and more with SvelteKit. Rendering settings are not mutually exclusive and you may choose the optimal manner with which to render different parts of your application.\n\nIf you don't have a particular way you'd like to build your application in mind, don't worry! The way your application is built, deployed, and rendered is controlled by which adapter you've chosen and a small amount of configuration and these can always be changed later. The [project structure](project-structure) and [routing](glossary#Routing) will be the same regardless of the project type that you choose.\n\n## Default rendering\n\nBy default, when a user visits a site, SvelteKit will render the first page with [server-side rendering (SSR)](glossary#SSR) and subsequent pages with [client-side rendering (CSR)](glossary#CSR). Using SSR for the initial render improves SEO and perceived performance of the initial page load. Client-side rendering then takes over and updates the page without having to rerender common components, which is typically faster and eliminates a flash when navigating between pages. Apps built with this hybrid rendering approach have also been called [transitional apps](https://www.youtube.com/watch?v=860d8usGC0o).\n\n## Static site generation\n\nYou can use SvelteKit as a [static site generator (SSG)](glossary#SSG) that fully [prerenders](glossary#Prerendering) your site with static rendering using [`adapter-static`](adapter-static). You may also use [the prerender option](page-options#prerender) to prerender only some pages and then choose a different adapter with which to dynamically server-render other pages.\n\nTools built solely to do static site generation may scale the prerendering process more efficiently during build when rendering a very large number of pages. When working with very large statically generated sites, you can avoid long build times with [Incremental Static Regeneration (ISR) if using `adapter-vercel`](adapter-vercel#Incremental-Static-Regeneration). And in contrast to purpose-built SSGs, SvelteKit allows for nicely mixing and matching different rendering types on different pages.\n\n## Single-page app\n\n[Single-page apps (SPAs)](glossary#SPA) exclusively use [client-side rendering (CSR)](glossary#CSR). You can [build single-page apps (SPAs)](single-page-apps) with SvelteKit. As with all types of SvelteKit applications, you can write your backend in SvelteKit or [another language or framework](#Separate-backend). If you are building an application with no backend or a [separate backend](#Separate-backend), you can simply skip over and ignore the parts of the docs talking about `server` files.\n\n## Multi-page app\n\nSvelteKit isn't typically used to build [traditional multi-page apps](glossary#MPA). However, in SvelteKit you can remove all JavaScript on a page with [`csr = false`](page-options#csr), which will render subsequent links on the server, or you can use [`data-sveltekit-reload`](link-options#data-sveltekit-reload) to render specific links on the server.\n\n## Separate backend\n\nIf your backend is written in another language such as Go, Java, PHP, Ruby, Rust, or C#, there are a couple of ways that you can deploy your application. The most recommended way would be to deploy your SvelteKit frontend separately from your backend utilizing `adapter-node` or a serverless adapter. Some users prefer not to have a separate process to manage and decide to deploy their application as a [single-page app (SPA)](single-page-apps) served by their backend server, but note that single-page apps have worse SEO and performance characteristics.\n\nIf you are using an external backend, you can simply skip over and ignore the parts of the docs talking about `server` files. You may also want to reference [the FAQ about how to make calls to a separate backend](faq#How-do-I-use-a-different-backend-API-server).\n\n## Serverless app\n\nSvelteKit apps are simple to run on serverless platforms. [The default zero config adapter](adapter-auto) will automatically run your app on a number of supported platforms or you can use [`adapter-vercel`](adapter-vercel), [`adapter-netlify`](adapter-netlify), or [`adapter-cloudflare`](adapter-cloudflare) to provide platform-specific configuration. And [community adapters](/packages#sveltekit-adapters) allow you to deploy your application to almost any serverless environment. Some of these adapters such as [`adapter-vercel`](adapter-vercel) and [`adapter-netlify`](adapter-netlify) offer an `edge` option, to support [edge rendering](glossary#Edge) for improved latency.\n\n## Your own server\n\nYou can deploy to your own server or VPS using [`adapter-node`](adapter-node).\n\n## Container\n\nYou can use [`adapter-node`](adapter-node) to run a SvelteKit app within a container such as Docker or LXC.\n\n## Library\n\nYou can create a library to be used by other Svelte apps with the [`@sveltejs/package`](packaging) add-on to SvelteKit by choosing the library option when running [`sv create`](/docs/cli/sv-create).\n\n## Offline app\n\nSvelteKit has full support for [service workers](service-workers) allowing you to build many types of applications such as offline apps and [progressive web apps](glossary#PWA).\n\n## Mobile app\n\nYou can turn a [SvelteKit SPA](single-page-apps) into a mobile app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte). Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms.\n\nThese mobile development platforms work by starting a local web server and then serving your application like a static host on your phone. You may find [`bundleStrategy: 'single'`](configuration#output) to be a helpful option to limit the number of requests made. E.g. at the time of writing, the Capacitor local server uses HTTP/1, which limits the number of concurrent connections.\n\n## Desktop app\n\nYou can turn a [SvelteKit SPA](single-page-apps) into a desktop app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/), [Wails](https://wails.io/docs/guides/sveltekit/), or [Electron](https://www.electronjs.org/).\n\n## Browser extension\n\nYou can build browser extensions using either [`adapter-static`](adapter-static) or [community adapters](/packages#sveltekit-adapters) specifically tailored towards browser extensions.\n\n## Embedded device\n\nBecause of its efficient rendering, Svelte can be run on low power devices. Embedded devices like microcontrollers and TVs may limit the number of concurrent connections. In order to reduce the number of concurrent requests, you may find [`bundleStrategy: 'single'`](configuration#output) to be a helpful option in this deployment configuration.",
+		"kit/project-structure": "A typical SvelteKit project looks like this:\n\n```tree\nmy-project/\n├ src/\n│ ├ lib/\n│ │ ├ server/\n│ │ │ └ [your server-only lib files]\n│ │ └ [your lib files]\n│ ├ params/\n│ │ └ [your param matchers]\n│ ├ routes/\n│ │ └ [your routes]\n│ ├ app.html\n│ ├ error.html\n│ ├ hooks.client.js\n│ ├ hooks.server.js\n| ├ service-worker.js\n│ └ tracing.server.js\n├ static/\n│ └ [your static assets]\n├ tests/\n│ └ [your tests]\n├ package.json\n├ svelte.config.js\n├ tsconfig.json\n└ vite.config.js\n```\n\nYou'll also find common files like `.gitignore` and `.npmrc` (and `.prettierrc` and `eslint.config.js` and so on, if you chose those options when running `npx sv create`).\n\n## Project files\n\n### src\n\nThe `src` directory contains the meat of your project. Everything except `src/routes` and `src/app.html` is optional.\n\n- `lib` contains your library code (utilities and components), which can be imported via the [`$lib`]($lib) alias, or packaged up for distribution using [`svelte-package`](packaging)\n  - `server` contains your server-only library code. It can be imported by using the [`$lib/server`](server-only-modules) alias. SvelteKit will prevent you from importing these in client code.\n- `params` contains any [param matchers](advanced-routing#Matching) your app needs\n- `routes` contains the [routes](routing) of your application. You can also colocate other components that are only used within a single route here\n- `app.html` is your page template — an HTML document containing the following placeholders:\n  - `%sveltekit.head%` — `<link>` and `<script>` elements needed by the app, plus any `<svelte:head>` content\n  - `%sveltekit.body%` — the markup for a rendered page. This should live inside a `<div>` or other element, rather than directly inside `<body>`, to prevent bugs caused by browser extensions injecting elements that are then destroyed by the hydration process. SvelteKit will warn you in development if this is not the case\n  - `%sveltekit.assets%` — either [`paths.assets`](configuration#paths), if specified, or a relative path to [`paths.base`](configuration#paths)\n  - `%sveltekit.nonce%` — a [CSP](configuration#csp) nonce for manually included links and scripts, if used\n  - `%sveltekit.env.[NAME]%` - this will be replaced at render time with the `[NAME]` environment variable, which must begin with the [`publicPrefix`](configuration#env) (usually `PUBLIC_`). It will fallback to `''` if not matched.\n  - `%sveltekit.version%` — the app version, which can be specified with the [`version`](configuration#version) configuration\n- `error.html` is the page that is rendered when everything else fails. It can contain the following placeholders:\n  - `%sveltekit.status%` — the HTTP status\n  - `%sveltekit.error.message%` — the error message\n- `hooks.client.js` contains your client [hooks](hooks)\n- `hooks.server.js` contains your server [hooks](hooks)\n- `service-worker.js` contains your [service worker](service-workers)\n- `instrumentation.server.js` contains your [observability](observability) setup and instrumentation code\n  - Requires adapter support. If your adapter supports it, it is guarnteed to run prior to loading and running your application code.\n\n(Whether the project contains `.js` or `.ts` files depends on whether you opt to use TypeScript when you create your project.)\n\nIf you added [Vitest](https://vitest.dev) when you set up your project, your unit tests will live in the `src` directory with a `.test.js` extension.\n\n### static\n\nAny static assets that should be served as-is, like `robots.txt` or `favicon.png`, go in here.\n\n### tests\n\nIf you added [Playwright](https://playwright.dev/) for browser testing when you set up your project, the tests will live in this directory.\n\n### package.json\n\nYour `package.json` file must include `@sveltejs/kit`, `svelte` and `vite` as `devDependencies`.\n\nWhen you create a project with `npx sv create`, you'll also notice that `package.json` includes `\"type\": \"module\"`. This means that `.js` files are interpreted as native JavaScript modules with `import` and `export` keywords. Legacy CommonJS files need a `.cjs` file extension.\n\n### svelte.config.js\n\nThis file contains your Svelte and SvelteKit [configuration](configuration).\n\n### tsconfig.json\n\nThis file (or `jsconfig.json`, if you prefer type-checked `.js` files over `.ts` files) configures TypeScript, if you added typechecking during `npx sv create`. Since SvelteKit relies on certain configuration being set a specific way, it generates its own `.svelte-kit/tsconfig.json` file which your own config `extends`. To make changes to top-level options such as `include` and `exclude`, we recommend extending the generated config; see the [`typescript.config` setting](configuration#typescript) for more details.\n\n### vite.config.js\n\nA SvelteKit project is really just a [Vite](https://vitejs.dev) project that uses the [`@sveltejs/kit/vite`](@sveltejs-kit-vite) plugin, along with any other [Vite configuration](https://vitejs.dev/config/).\n\n## Other files\n\n### .svelte-kit\n\nAs you develop and build your project, SvelteKit will generate files in a `.svelte-kit` directory (configurable as [`outDir`](configuration#outDir)). You can ignore its contents, and delete them at any time (they will be regenerated when you next `dev` or `build`).",
+		"kit/web-standards": "Throughout this documentation, you'll see references to the standard [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) that SvelteKit builds on top of. Rather than reinventing the wheel, we _use the platform_, which means your existing web development skills are applicable to SvelteKit. Conversely, time spent learning SvelteKit will help you be a better web developer elsewhere.\n\nThese APIs are available in all modern browsers and in many non-browser environments like Cloudflare Workers, Deno, and Vercel Functions. During development, and in [adapters](adapters) for Node-based environments (including AWS Lambda), they're made available via polyfills where necessary (for now, that is — Node is rapidly adding support for more web standards).\n\nIn particular, you'll get comfortable with the following:\n\n## Fetch APIs\n\nSvelteKit uses [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) for getting data from the network. It's available in [hooks](hooks) and [server routes](routing#server) as well as in the browser.\n\n> [!NOTE] A special version of `fetch` is available in [`load`](load) functions, [server hooks](hooks#Server-hooks) and [API routes](routing#server) for invoking endpoints directly during server-side rendering, without making an HTTP call, while preserving credentials. (To make credentialled fetches in server-side code outside `load`, you must explicitly pass `cookie` and/or `authorization` headers.) It also allows you to make relative requests, whereas server-side `fetch` normally requires a fully qualified URL.\n\nBesides `fetch` itself, the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) includes the following interfaces:\n\n### Request\n\nAn instance of [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) is accessible in [hooks](hooks) and [server routes](routing#server) as `event.request`. It contains useful methods like `request.json()` and `request.formData()` for getting data that was posted to an endpoint.\n\n### Response\n\nAn instance of [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) is returned from `await fetch(...)` and handlers in `+server.js` files. Fundamentally, a SvelteKit app is a machine for turning a `Request` into a `Response`.\n\n### Headers\n\nThe [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) interface allows you to read incoming `request.headers` and set outgoing `response.headers`. For example, you can get the `request.headers` as shown below, and use the [`json` convenience function](@sveltejs-kit#json) to send modified `response.headers`:\n\n```js\n// @errors: 2461\n/// file: src/routes/what-is-my-user-agent/+server.js\nimport { json } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport function GET({ request }) {\n\t// log all headers\n\tconsole.log(...request.headers);\n\n\t// create a JSON Response using a header we received\n\treturn json({\n\t\t// retrieve a specific header\n\t\tuserAgent: request.headers.get('user-agent')\n\t}, {\n\t\t// set a header on the response\n\t\theaders: { 'x-custom-header': 'potato' }\n\t});\n}\n```\n\n## FormData\n\nWhen dealing with HTML native form submissions you'll be working with [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) objects.\n\n```js\n// @errors: 2461\n/// file: src/routes/hello/+server.js\nimport { json } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function POST(event) {\n\tconst body = await event.request.formData();\n\n\t// log all fields\n\tconsole.log([...body]);\n\n\treturn json({\n\t\t// get a specific field's value\n\t\tname: body.get('name') ?? 'world'\n\t});\n}\n```\n\n## Stream APIs\n\nMost of the time, your endpoints will return complete data, as in the `userAgent` example above. Sometimes, you may need to return a response that's too large to fit in memory in one go, or is delivered in chunks, and for this the platform provides [streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) — [ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream), [WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) and [TransformStream](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream).\n\n## URL APIs\n\nURLs are represented by the [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) interface, which includes useful properties like `origin` and `pathname` (and, in the browser, `hash`). This interface shows up in various places — `event.url` in [hooks](hooks) and [server routes](routing#server), [`page.url`]($app-state) in [pages](routing#page), `from` and `to` in [`beforeNavigate` and `afterNavigate`]($app-navigation) and so on.\n\n### URLSearchParams\n\nWherever you encounter a URL, you can access query parameters via `url.searchParams`, which is an instance of [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams):\n\n```js\n// @filename: ambient.d.ts\ndeclare global {\n\tconst url: URL;\n}\n\nexport {};\n\n// @filename: index.js\n// ---cut---\nconst foo = url.searchParams.get('foo');\n```\n\n## Web Crypto\n\nThe [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is made available via the `crypto` global. It's used internally for [Content Security Policy](configuration#csp) headers, but you can also use it for things like generating UUIDs:\n\n```js\nconst uuid = crypto.randomUUID();\n```",
+		"kit/routing": "At the heart of SvelteKit is a _filesystem-based router_. The routes of your app — i.e. the URL paths that users can access — are defined by the directories in your codebase:\n\n- `src/routes` is the root route\n- `src/routes/about` creates an `/about` route\n- `src/routes/blog/[slug]` creates a route with a _parameter_, `slug`, that can be used to load data dynamically when a user requests a page like `/blog/hello-world`\n\n> [!NOTE] You can change `src/routes` to a different directory by editing the [project config](configuration).\n\nEach route directory contains one or more _route files_, which can be identified by their `+` prefix.\n\nWe'll introduce these files in a moment in more detail, but here are a few simple rules to help you remember how SvelteKit's routing works:\n\n* All files can run on the server\n* All files run on the client except `+server` files\n* `+layout` and `+error` files apply to subdirectories as well as the directory they live in\n\n## +page\n\n### +page.svelte\n\nA `+page.svelte` component defines a page of your app. By default, pages are rendered both on the server ([SSR](glossary#SSR)) for the initial request and in the browser ([CSR](glossary#CSR)) for subsequent navigation.\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<h1>Hello and welcome to my site!</h1>\n<a href=\"/about\">About my site</a>\n```\n\n```svelte\n<!--- file: src/routes/about/+page.svelte --->\n<h1>About this site</h1>\n<p>TODO...</p>\n<a href=\"/\">Home</a>\n```\n\n> [!NOTE] SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.\n\nPages can receive data from `load` functions via the `data` prop.\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.title}</h1>\n<div>{@html data.content}</div>\n```\n\n> [!LEGACY]\n> `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` property manually with `PageData` instead, see [$types](#\\$types).\n>\n> In Svelte 4, you'd use `export let data` instead.\n\n### +page.js\n\nOften, a page will need to load some data before it can be rendered. For this, we add a `+page.js` module that exports a `load` function:\n\n```js\n/// file: src/routes/blog/[slug]/+page.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageLoad} */\nexport function load({ params }) {\n\tif (params.slug === 'hello-world') {\n\t\treturn {\n\t\t\ttitle: 'Hello world!',\n\t\t\tcontent: 'Welcome to our blog. Lorem ipsum dolor sit amet...'\n\t\t};\n\t}\n\n\terror(404, 'Not found');\n}\n```\n\nThis function runs alongside `+page.svelte`, which means it runs on the server during server-side rendering and in the browser during client-side navigation. See [`load`](load) for full details of the API.\n\nAs well as `load`, `+page.js` can export values that configure the page's behaviour:\n\n- `export const prerender = true` or `false` or `'auto'`\n- `export const ssr = true` or `false`\n- `export const csr = true` or `false`\n\nYou can find more information about these in [page options](page-options).\n\n### +page.server.js\n\nIf your `load` function can only run on the server — for example, if it needs to fetch data from a database or you need to access private [environment variables]($env-static-private) like API keys — then you can rename `+page.js` to `+page.server.js` and change the `PageLoad` type to `PageServerLoad`.\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n\n// @filename: ambient.d.ts\ndeclare global {\n\tconst getPostFromDatabase: (slug: string) => {\n\t\ttitle: string;\n\t\tcontent: string;\n\t}\n}\n\nexport {};\n\n// @filename: index.js\n// ---cut---\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\tconst post = await getPostFromDatabase(params.slug);\n\n\tif (post) {\n\t\treturn post;\n\t}\n\n\terror(404, 'Not found');\n}\n```\n\nDuring client-side navigation, SvelteKit will load this data from the server, which means that the returned value must be serializable using [devalue](https://github.com/rich-harris/devalue). See [`load`](load) for full details of the API.\n\nLike `+page.js`, `+page.server.js` can export [page options](page-options) — `prerender`, `ssr` and `csr`.\n\nA `+page.server.js` file can also export _actions_. If `load` lets you read data from the server, `actions` let you write data _to_ the server using the `<form>` element. To learn how to use them, see the [form actions](form-actions) section.\n\n## +error\n\nIf an error occurs during `load`, SvelteKit will render a default error page. You can customise this error page on a per-route basis by adding an `+error.svelte` file:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+error.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.status}: {page.error.message}</h1>\n```\n\n> [!LEGACY]\n> `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead.\n\nSvelteKit will 'walk up the tree' looking for the closest error boundary — if the file above didn't exist it would try `src/routes/blog/+error.svelte` and then `src/routes/+error.svelte` before rendering the default error page. If _that_ fails (or if the error was thrown from the `load` function of the root `+layout`, which sits 'above' the root `+error`), SvelteKit will bail out and render a static fallback error page, which you can customise by creating a `src/error.html` file.\n\nIf the error occurs inside a `load` function in `+layout(.server).js`, the closest error boundary in the tree is an `+error.svelte` file _above_ that layout (not next to it).\n\nIf no route can be found (404), `src/routes/+error.svelte` (or the default error page, if that file does not exist) will be used.\n\n> [!NOTE] `+error.svelte` is _not_ used when an error occurs inside [`handle`](hooks#Server-hooks-handle) or a [+server.js](#server) request handler.\n\nYou can read more about error handling [here](errors).\n\n## +layout\n\nSo far, we've treated pages as entirely standalone components — upon navigation, the existing `+page.svelte` component will be destroyed, and a new one will take its place.\n\nBut in many apps, there are elements that should be visible on _every_ page, such as top-level navigation or a footer. Instead of repeating them in every `+page.svelte`, we can put them in _layouts_.\n\n### +layout.svelte\n\nTo create a layout that applies to every page, make a file called `src/routes/+layout.svelte`. The default layout (the one that SvelteKit uses if you don't bring your own) looks like this...\n\n```svelte\n<script>\n\tlet { children } = $props();\n</script>\n\n{@render children()}\n```\n\n...but we can add whatever markup, styles and behaviour we want. The only requirement is that the component includes a `@render` tag for the page content. For example, let's add a nav bar:\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<script>\n\tlet { children } = $props();\n</script>\n\n<nav>\n\t<a href=\"/\">Home</a>\n\t<a href=\"/about\">About</a>\n\t<a href=\"/settings\">Settings</a>\n</nav>\n\n{@render children()}\n```\n\nIf we create pages for `/`, `/about` and `/settings`...\n\n```html\n/// file: src/routes/+page.svelte\n<h1>Home</h1>\n```\n\n```html\n/// file: src/routes/about/+page.svelte\n<h1>About</h1>\n```\n\n```html\n/// file: src/routes/settings/+page.svelte\n<h1>Settings</h1>\n```\n\n...the nav will always be visible, and clicking between the three pages will only result in the `<h1>` being replaced.\n\nLayouts can be _nested_. Suppose we don't just have a single `/settings` page, but instead have nested pages like `/settings/profile` and `/settings/notifications` with a shared submenu (for a real-life example, see [github.com/settings](https://github.com/settings)).\n\nWe can create a layout that only applies to pages below `/settings` (while inheriting the root layout with the top-level nav):\n\n```svelte\n<!--- file: src/routes/settings/+layout.svelte --->\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data, children } = $props();\n</script>\n\n<h1>Settings</h1>\n\n<div class=\"submenu\">\n\t{#each data.sections as section}\n\t\t<a href=\"/settings/{section.slug}\">{section.title}</a>\n\t{/each}\n</div>\n\n{@render children()}\n```\n\n> [!LEGACY]\n> `LayoutProps` was added in 2.16.0. In earlier versions, you had to [type the properties manually instead](#\\$types).\n\nYou can see how `data` is populated by looking at the `+layout.js` example in the next section just below.\n\nBy default, each layout inherits the layout above it. Sometimes that isn't what you want - in this case, [advanced layouts](advanced-routing#Advanced-layouts) can help you.\n\n### +layout.js\n\nJust like `+page.svelte` loading data from `+page.js`, your `+layout.svelte` component can get data from a [`load`](load) function in `+layout.js`.\n\n```js\n/// file: src/routes/settings/+layout.js\n/** @type {import('./$types').LayoutLoad} */\nexport function load() {\n\treturn {\n\t\tsections: [\n\t\t\t{ slug: 'profile', title: 'Profile' },\n\t\t\t{ slug: 'notifications', title: 'Notifications' }\n\t\t]\n\t};\n}\n```\n\nIf a `+layout.js` exports [page options](page-options) — `prerender`, `ssr` and `csr` — they will be used as defaults for child pages.\n\nData returned from a layout's `load` function is also available to all its child pages:\n\n```svelte\n<!--- file: src/routes/settings/profile/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tconsole.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]\n</script>\n```\n\n> [!NOTE] Often, layout data is unchanged when navigating between pages. SvelteKit will intelligently rerun [`load`](load) functions when necessary.\n\n### +layout.server.js\n\nTo run your layout's `load` function on the server, move it to `+layout.server.js`, and change the `LayoutLoad` type to `LayoutServerLoad`.\n\nLike `+layout.js`, `+layout.server.js` can export [page options](page-options) — `prerender`, `ssr` and `csr`.\n\n## +server\n\nAs well as pages, you can define routes with a `+server.js` file (sometimes referred to as an 'API route' or an 'endpoint'), which gives you full control over the response. Your `+server.js` file exports functions corresponding to HTTP verbs like `GET`, `POST`, `PATCH`, `PUT`, `DELETE`, `OPTIONS`, and `HEAD` that take a [`RequestEvent`](@sveltejs-kit#RequestEvent) argument and return a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object.\n\nFor example we could create an `/api/random-number` route with a `GET` handler:\n\n```js\n/// file: src/routes/api/random-number/+server.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport function GET({ url }) {\n\tconst min = Number(url.searchParams.get('min') ?? '0');\n\tconst max = Number(url.searchParams.get('max') ?? '1');\n\n\tconst d = max - min;\n\n\tif (isNaN(d) || d < 0) {\n\t\terror(400, 'min and max must be numbers, and min must be less than max');\n\t}\n\n\tconst random = min + Math.random() * d;\n\n\treturn new Response(String(random));\n}\n```\n\nThe first argument to `Response` can be a [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream), making it possible to stream large amounts of data or create server-sent events (unless deploying to platforms that buffer responses, like AWS Lambda).\n\nYou can use the [`error`](@sveltejs-kit#error), [`redirect`](@sveltejs-kit#redirect) and [`json`](@sveltejs-kit#json) methods from `@sveltejs/kit` for convenience (but you don't have to).\n\nIf an error is thrown (either `error(...)` or an unexpected error), the response will be a JSON representation of the error or a fallback error page — which can be customised via `src/error.html` — depending on the `Accept` header. The [`+error.svelte`](#error) component will _not_ be rendered in this case. You can read more about error handling [here](errors).\n\n> [!NOTE] When creating an `OPTIONS` handler, note that Vite will inject `Access-Control-Allow-Origin` and `Access-Control-Allow-Methods` headers — these will not be present in production unless you add them.\n\n> [!NOTE] `+layout` files have no effect on `+server.js` files. If you want to run some logic before each request, add it to the server [`handle`](hooks#Server-hooks-handle) hook.\n\n### Receiving data\n\nBy exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.js` files can be used to create a complete API:\n\n```svelte\n<!--- file: src/routes/add/+page.svelte --->\n<script>\n\tlet a = 0;\n\tlet b = 0;\n\tlet total = 0;\n\n\tasync function add() {\n\t\tconst response = await fetch('/api/add', {\n\t\t\tmethod: 'POST',\n\t\t\tbody: JSON.stringify({ a, b }),\n\t\t\theaders: {\n\t\t\t\t'content-type': 'application/json'\n\t\t\t}\n\t\t});\n\n\t\ttotal = await response.json();\n\t}\n</script>\n\n<input type=\"number\" bind:value={a}> +\n<input type=\"number\" bind:value={b}> =\n{total}\n\n<button onclick={add}>Calculate</button>\n```\n\n```js\n/// file: src/routes/api/add/+server.js\nimport { json } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request }) {\n\tconst { a, b } = await request.json();\n\treturn json(a + b);\n}\n```\n\n> [!NOTE] In general, [form actions](form-actions) are a better way to submit data from the browser to the server.\n\n> [!NOTE] If a `GET` handler is exported, a `HEAD` request will return the `content-length` of the `GET` handler's response body.\n\n### Fallback method handler\n\nExporting the `fallback` handler will match any unhandled request methods, including methods like `MOVE` which have no dedicated export from `+server.js`.\n\n```js\n/// file: src/routes/api/add/+server.js\nimport { json, text } from '@sveltejs/kit';\n\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request }) {\n\tconst { a, b } = await request.json();\n\treturn json(a + b);\n}\n\n// This handler will respond to PUT, PATCH, DELETE, etc.\n/** @type {import('./$types').RequestHandler} */\nexport async function fallback({ request }) {\n\treturn text(`I caught your ${request.method} request!`);\n}\n```\n\n> [!NOTE] For `HEAD` requests, the `GET` handler takes precedence over the `fallback` handler.\n\n### Content negotiation\n\n`+server.js` files can be placed in the same directory as `+page` files, allowing the same route to be either a page or an API endpoint. To determine which, SvelteKit applies the following rules:\n\n- `PUT`/`PATCH`/`DELETE`/`OPTIONS` requests are always handled by `+server.js` since they do not apply to pages\n- `GET`/`POST`/`HEAD` requests are treated as page requests if the `accept` header prioritises `text/html` (in other words, it's a browser page request), else they are handled by `+server.js`.\n- Responses to `GET` requests will include a `Vary: Accept` header, so that proxies and browsers cache HTML and JSON responses separately.\n\n## $types\n\nThroughout the examples above, we've been importing types from a `$types.d.ts` file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files.\n\nFor example, annotating `let { data } = $props()` with `PageProps` (or `LayoutProps`, for a `+layout.svelte` file) tells TypeScript that the type of `data` is whatever was returned from `load`:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n```\n\n> [!NOTE]\n> The `PageProps` and `LayoutProps` types, added in 2.16.0, are a shortcut for typing the `data` prop as `PageData` or `LayoutData`, as well as other props, such as `form` for pages, or `children` for layouts. In earlier versions, you had to type these properties manually. For example, for a page:\n>\n> ```js\n> /// file: +page.svelte\n> /** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */\n> let { data, form } = $props();\n> ```\n>\n> Or, for a layout:\n>\n> ```js\n> /// file: +layout.svelte\n> /** @type {{ data: import('./$types').LayoutData, children: Snippet }} */\n> let { data, children } = $props();\n> ```\n\nIn turn, annotating the `load` function with `PageLoad`, `PageServerLoad`, `LayoutLoad` or `LayoutServerLoad` (for `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` respectively) ensures that `params` and the return value are correctly typed.\n\nIf you're using VS Code or any IDE that supports the language server protocol and TypeScript plugins then you can omit these types _entirely_! Svelte's IDE tooling will insert the correct types for you, so you'll get type checking without writing them yourself. It also works with our command line tool `svelte-check`.\n\nYou can read more about omitting `$types` in our [blog post](/blog/zero-config-type-safety) about it.\n\n## Other files\n\nAny other files inside a route directory are ignored by SvelteKit. This means you can colocate components and utility modules with the routes that need them.\n\nIf components and modules are needed by multiple routes, it's a good idea to put them in [`$lib`]($lib).\n\n## Further reading\n\n- [Tutorial: Routing](/tutorial/kit/pages)\n- [Tutorial: API routes](/tutorial/kit/get-handlers)\n- [Docs: Advanced routing](advanced-routing)",
+		"kit/load": "Before a [`+page.svelte`](routing#page-page.svelte) component (and its containing [`+layout.svelte`](routing#layout-layout.svelte) components) can be rendered, we often need to get some data. This is done by defining `load` functions.\n\n## Page data\n\nA `+page.svelte` file can have a sibling `+page.js` that exports a `load` function, the return value of which is available to the page via the `data` prop:\n\n```js\n/// file: src/routes/blog/[slug]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport function load({ params }) {\n\treturn {\n\t\tpost: {\n\t\t\ttitle: `Title for ${params.slug} goes here`,\n\t\t\tcontent: `Content for ${params.slug} goes here`\n\t\t}\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n```\n\n> [!LEGACY]\n> Before version 2.16.0, the props of a page and layout had to be typed individually:\n> ```js\n> /// file: +page.svelte\n> /** @type {{ data: import('./$types').PageData }} */\n> let { data } = $props();\n> ```\n>\n> In Svelte 4, you'd use `export let data` instead.\n\nThanks to the generated `$types` module, we get full type safety.\n\nA `load` function in a `+page.js` file runs both on the server and in the browser (unless combined with `export const ssr = false`, in which case it will [only run in the browser](page-options#ssr)). If your `load` function should _always_ run on the server (because it uses private environment variables, for example, or accesses a database) then it would go in a `+page.server.js` instead.\n\nA more realistic version of your blog post's `load` function, that only runs on the server and pulls data from a database, might look like this:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPost(slug: string): Promise<{ title: string, content: string }>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\treturn {\n\t\tpost: await db.getPost(params.slug)\n\t};\n}\n```\n\nNotice that the type changed from `PageLoad` to `PageServerLoad`, because server `load` functions can access additional arguments. To understand when to use `+page.js` and when to use `+page.server.js`, see [Universal vs server](load#Universal-vs-server).\n\n## Layout data\n\nYour `+layout.svelte` files can also load data, via `+layout.js` or `+layout.server.js`.\n\n```js\n/// file: src/routes/blog/[slug]/+layout.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPostSummaries(): Promise<Array<{ title: string, slug: string }>>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function load() {\n\treturn {\n\t\tposts: await db.getPostSummaries()\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+layout.svelte --->\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data, children } = $props();\n</script>\n\n<main>\n\t<!-- +page.svelte is `@render`ed here -->\n\t{@render children()}\n</main>\n\n<aside>\n\t<h2>More posts</h2>\n\t<ul>\n\t\t{#each data.posts as post}\n\t\t\t<li>\n\t\t\t\t<a href=\"/blog/{post.slug}\">\n\t\t\t\t\t{post.title}\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n</aside>\n```\n\n> [!LEGACY]\n> `LayoutProps` was added in 2.16.0. In earlier versions, properties had to be typed individually:\n> ```js\n> /// file: +layout.svelte\n> /** @type {{ data: import('./$types').LayoutData, children: Snippet }} */\n> let { data, children } = $props();\n> ```\n\nData returned from layout `load` functions is available to child `+layout.svelte` components and the `+page.svelte` component as well as the layout that it 'belongs' to.\n\n```svelte\n/// file: src/routes/blog/[slug]/+page.svelte\n<script>\n\t+++import { page } from '$app/state';+++\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n+++\t// we can access `data.posts` because it's returned from\n\t// the parent layout `load` function\n\tlet index = $derived(data.posts.findIndex(post => post.slug === page.params.slug));\n\tlet next = $derived(data.posts[index + 1]);+++\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n+++{#if next}\n\t<p>Next post: <a href=\"/blog/{next.slug}\">{next.title}</a></p>\n{/if}+++\n```\n\n> [!NOTE] If multiple `load` functions return data with the same key, the last one 'wins' — the result of a layout `load` returning `{ a: 1, b: 2 }` and a page `load` returning `{ b: 3, c: 4 }` would be `{ a: 1, b: 3, c: 4 }`.\n\n## page.data\n\nThe `+page.svelte` component, and each `+layout.svelte` component above it, has access to its own data plus all the data from its parents.\n\nIn some cases, we might need the opposite — a parent layout might need to access page data or data from a child layout. For example, the root layout might want to access a `title` property returned from a `load` function in `+page.js` or `+page.server.js`. This can be done with `page.data`:\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<svelte:head>\n\t<title>{page.data.title}</title>\n</svelte:head>\n```\n\nType information for `page.data` is provided by `App.PageData`.\n\n> [!LEGACY]\n> `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead.\n> It provides a `page` store with the same interface that you can subscribe to, e.g. `$page.data.title`.\n\n## Universal vs server\n\nAs we've seen, there are two types of `load` function:\n\n* `+page.js` and `+layout.js` files export _universal_ `load` functions that run both on the server and in the browser\n* `+page.server.js` and `+layout.server.js` files export _server_ `load` functions that only run server-side\n\nConceptually, they're the same thing, but there are some important differences to be aware of.\n\n### When does which load function run?\n\nServer `load` functions _always_ run on the server.\n\nBy default, universal `load` functions run on the server during SSR when the user first visits your page. They will then run again during hydration, reusing any responses from [fetch requests](#Making-fetch-requests). All subsequent invocations of universal `load` functions happen in the browser. You can customize the behavior through [page options](page-options). If you disable [server-side rendering](page-options#ssr), you'll get an SPA and universal `load` functions _always_ run on the client.\n\nIf a route contains both universal and server `load` functions, the server `load` runs first.\n\nA `load` function is invoked at runtime, unless you [prerender](page-options#prerender) the page — in that case, it's invoked at build time.\n\n### Input\n\nBoth universal and server `load` functions have access to properties describing the request (`params`, `route` and `url`) and various functions (`fetch`, `setHeaders`, `parent`, `depends` and `untrack`). These are described in the following sections.\n\nServer `load` functions are called with a `ServerLoadEvent`, which inherits `clientAddress`, `cookies`, `locals`, `platform` and `request` from `RequestEvent`.\n\nUniversal `load` functions are called with a `LoadEvent`, which has a `data` property. If you have `load` functions in both `+page.js` and `+page.server.js` (or `+layout.js` and `+layout.server.js`), the return value of the server `load` function is the `data` property of the universal `load` function's argument.\n\n### Output\n\nA universal `load` function can return an object containing any values, including things like custom classes and component constructors.\n\nA server `load` function must return data that can be serialized with [devalue](https://github.com/rich-harris/devalue) — anything that can be represented as JSON plus things like `BigInt`, `Date`, `Map`, `Set` and `RegExp`, or repeated/cyclical references — so that it can be transported over the network. Your data can include [promises](#Streaming-with-promises), in which case it will be streamed to browsers. If you need to serialize/deserialize custom types, use [transport hooks](hooks#Universal-hooks-transport).\n\n### When to use which\n\nServer `load` functions are convenient when you need to access data directly from a database or filesystem, or need to use private environment variables.\n\nUniversal `load` functions are useful when you need to `fetch` data from an external API and don't need private credentials, since SvelteKit can get the data directly from the API rather than going via your server. They are also useful when you need to return something that can't be serialized, such as a Svelte component constructor.\n\nIn rare cases, you might need to use both together — for example, you might need to return an instance of a custom class that was initialised with data from your server. When using both, the server `load` return value is _not_ passed directly to the page, but to the universal `load` function (as the `data` property):\n\n```js\n/// file: src/routes/+page.server.js\n/** @type {import('./$types').PageServerLoad} */\nexport async function load() {\n\treturn {\n\t\tserverMessage: 'hello from server load function'\n\t};\n}\n```\n\n```js\n/// file: src/routes/+page.js\n// @errors: 18047\n/** @type {import('./$types').PageLoad} */\nexport async function load({ data }) {\n\treturn {\n\t\tserverMessage: data.serverMessage,\n\t\tuniversalMessage: 'hello from universal load function'\n\t};\n}\n```\n\n## Using URL data\n\nOften the `load` function depends on the URL in one way or another. For this, the `load` function provides you with `url`, `route` and `params`.\n\n### url\n\nAn instance of [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL), containing properties like the `origin`, `hostname`, `pathname` and `searchParams` (which contains the parsed query string as a [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object). `url.hash` cannot be accessed during `load`, since it is unavailable on the server.\n\n> [!NOTE] In some environments this is derived from request headers during server-side rendering. If you're using [adapter-node](adapter-node), for example, you may need to configure the adapter in order for the URL to be correct.\n\n### route\n\nContains the name of the current route directory, relative to `src/routes`:\n\n```js\n/// file: src/routes/a/[b]/[...c]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport function load({ route }) {\n\tconsole.log(route.id); // '/a/[b]/[...c]'\n}\n```\n\n### params\n\n`params` is derived from `url.pathname` and `route.id`.\n\nGiven a `route.id` of `/a/[b]/[...c]` and a `url.pathname` of `/a/x/y/z`, the `params` object would look like this:\n\n```json\n{\n\t\"b\": \"x\",\n\t\"c\": \"y/z\"\n}\n```\n\n## Making fetch requests\n\nTo get data from an external API or a `+server.js` handler, you can use the provided `fetch` function, which behaves identically to the [native `fetch` web API](https://developer.mozilla.org/en-US/docs/Web/API/fetch) with a few additional features:\n\n- It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request.\n- It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context).\n- Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\n- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text`, `json` and `arrayBuffer` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](hooks#Server-hooks-handle).\n- During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request - if you received a warning in your browser console when using the browser `fetch` instead of the `load` `fetch`, this is why.\n\n```js\n/// file: src/routes/items/[id]/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch, params }) {\n\tconst res = await fetch(`/api/items/${params.id}`);\n\tconst item = await res.json();\n\n\treturn { item };\n}\n```\n\n## Cookies\n\nA server `load` function can get and set [`cookies`](@sveltejs-kit#Cookies).\n\n```js\n/// file: src/routes/+layout.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getUser(sessionid: string | undefined): Promise<{ name: string, avatar: string }>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function load({ cookies }) {\n\tconst sessionid = cookies.get('sessionid');\n\n\treturn {\n\t\tuser: await db.getUser(sessionid)\n\t};\n}\n```\n\nCookies will only be passed through the provided `fetch` function if the target host is the same as the SvelteKit application or a more specific subdomain of it.\n\nFor example, if SvelteKit is serving my.domain.com:\n- domain.com WILL NOT receive cookies\n- my.domain.com WILL receive cookies\n- api.domain.com WILL NOT receive cookies\n- sub.my.domain.com WILL receive cookies\n\nOther cookies will not be passed when `credentials: 'include'` is set, because SvelteKit does not know which domain which cookie belongs to (the browser does not pass this information along), so it's not safe to forward any of them. Use the [handleFetch hook](hooks#Server-hooks-handleFetch) to work around it.\n\n## Headers\n\nBoth server and universal `load` functions have access to a `setHeaders` function that, when running on the server, can set headers for the response. (When running in the browser, `setHeaders` has no effect.) This is useful if you want the page to be cached, for example:\n\n```js\n// @errors: 2322 1360\n/// file: src/routes/products/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/products.json`;\n\tconst response = await fetch(url);\n\n\t// Headers are only set during SSR, caching the page's HTML\n\t// for the same length of time as the underlying data.\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}\n```\n\nSetting the same header multiple times (even in separate `load` functions) is an error. You can only set a given header once using the `setHeaders` function. You cannot add a `set-cookie` header with `setHeaders` — use `cookies.set(name, value, options)` instead.\n\n## Using parent data\n\nOccasionally it's useful for a `load` function to access data from a parent `load` function, which can be done with `await parent()`:\n\n```js\n/// file: src/routes/+layout.js\n/** @type {import('./$types').LayoutLoad} */\nexport function load() {\n\treturn { a: 1 };\n}\n```\n\n```js\n/// file: src/routes/abc/+layout.js\n/** @type {import('./$types').LayoutLoad} */\nexport async function load({ parent }) {\n\tconst { a } = await parent();\n\treturn { b: a + 1 };\n}\n```\n\n```js\n/// file: src/routes/abc/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ parent }) {\n\tconst { a, b } = await parent();\n\treturn { c: a + b };\n}\n```\n\n```svelte\n<!--- file: src/routes/abc/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<!-- renders `1 + 2 = 3` -->\n<p>{data.a} + {data.b} = {data.c}</p>\n```\n\n> [!NOTE] Notice that the `load` function in `+page.js` receives the merged data from both layout `load` functions, not just the immediate parent.\n\nInside `+page.server.js` and `+layout.server.js`, `parent` returns data from parent `+layout.server.js` files.\n\nIn `+page.js` or `+layout.js` it will return data from parent `+layout.js` files. However, a missing `+layout.js` is treated as a `({ data }) => data` function, meaning that it will also return data from parent `+layout.server.js` files that are not 'shadowed' by a `+layout.js` file\n\nTake care not to introduce waterfalls when using `await parent()`. Here, for example, `getData(params)` does not depend on the result of calling `parent()`, so we should call it first to avoid a delayed render.\n\n```js\n/// file: +page.js\n// @filename: ambient.d.ts\ndeclare function getData(params: Record<string, string>): Promise<{ meta: any }>\n\n// @filename: index.js\n// ---cut---\n/** @type {import('./$types').PageLoad} */\nexport async function load({ params, parent }) {\n\t---const parentData = await parent();---\n\tconst data = await getData(params);\n\t+++const parentData = await parent();+++\n\n\treturn {\n\t\t...data,\n\t\tmeta: { ...parentData.meta, ...data.meta }\n\t};\n}\n```\n\n## Errors\n\nIf an error is thrown during `load`, the nearest [`+error.svelte`](routing#error) will be rendered. For [_expected_](errors#Expected-errors) errors, use the `error` helper from `@sveltejs/kit` to specify the HTTP status code and an optional message:\n\n```js\n/// file: src/routes/admin/+layout.server.js\n// @filename: ambient.d.ts\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser?: {\n\t\t\tname: string;\n\t\t\tisAdmin: boolean;\n\t\t}\n\t}\n}\n\n// @filename: index.js\n// ---cut---\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function load({ locals }) {\n\tif (!locals.user) {\n\t\terror(401, 'not logged in');\n\t}\n\n\tif (!locals.user.isAdmin) {\n\t\terror(403, 'not an admin');\n\t}\n}\n```\n\nCalling `error(...)` will throw an exception, making it easy to stop execution from inside helper functions.\n\nIf an [_unexpected_](errors#Unexpected-errors) error is thrown, SvelteKit will invoke [`handleError`](hooks#Shared-hooks-handleError) and treat it as a 500 Internal Error.\n\n> [!NOTE] [In SvelteKit 1.x](migrating-to-sveltekit-2#redirect-and-error-are-no-longer-thrown-by-you) you had to `throw` the error yourself\n\n## Redirects\n\nTo redirect users, use the `redirect` helper from `@sveltejs/kit` to specify the location to which they should be redirected alongside a `3xx` status code. Like `error(...)`, calling `redirect(...)` will throw an exception, making it easy to stop execution from inside helper functions.\n\n```js\n/// file: src/routes/user/+layout.server.js\n// @filename: ambient.d.ts\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser?: {\n\t\t\tname: string;\n\t\t}\n\t}\n}\n\n// @filename: index.js\n// ---cut---\nimport { redirect } from '@sveltejs/kit';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function load({ locals }) {\n\tif (!locals.user) {\n\t\tredirect(307, '/login');\n\t}\n}\n```\n\n> [!NOTE] Don't use `redirect()` inside a `try {...}` block, as the redirect will immediately trigger the catch statement.\n\nIn the browser, you can also navigate programmatically outside of a `load` function using [`goto`]($app-navigation#goto) from [`$app.navigation`]($app-navigation).\n\n> [!NOTE] [In SvelteKit 1.x](migrating-to-sveltekit-2#redirect-and-error-are-no-longer-thrown-by-you) you had to `throw` the `redirect` yourself\n\n## Streaming with promises\n\nWhen using a server `load`, promises will be streamed to the browser as they resolve. This is useful if you have slow, non-essential data, since you can start rendering the page before all the data is available:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n// @filename: ambient.d.ts\ndeclare global {\n\tconst loadPost: (slug: string) => Promise<{ title: string, content: string }>;\n\tconst loadComments: (slug: string) => Promise<{ content: string }>;\n}\n\nexport {};\n\n// @filename: index.js\n// ---cut---\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\treturn {\n\t\t// make sure the `await` happens at the end, otherwise we\n\t\t// can't start loading comments until we've loaded the post\n\t\tcomments: loadComments(params.slug),\n\t\tpost: await loadPost(params.slug)\n\t};\n}\n```\n\nThis is useful for creating skeleton loading states, for example:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n</script>\n\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n{#await data.comments}\n\tLoading comments...\n{:then comments}\n\t{#each comments as comment}\n\t\t<p>{comment.content}</p>\n\t{/each}\n{:catch error}\n\t<p>error loading comments: {error.message}</p>\n{/await}\n```\n\nWhen streaming data, be careful to handle promise rejections correctly. More specifically, the server could crash with an \"unhandled promise rejection\" error if a lazy-loaded promise fails before rendering starts (at which point it's caught) and isn't handling the error in some way. When using SvelteKit's `fetch` directly in the `load` function, SvelteKit will handle this case for you. For other promises, it is enough to attach a noop-`catch` to the promise to mark it as handled.\n\n```js\n/// file: src/routes/+page.server.js\n/** @type {import('./$types').PageServerLoad} */\nexport function load({ fetch }) {\n\tconst ok_manual = Promise.reject();\n\tok_manual.catch(() => {});\n\n\treturn {\n\t\tok_manual,\n\t\tok_fetch: fetch('/fetch/that/could/fail'),\n\t\tdangerous_unhandled: Promise.reject()\n\t};\n}\n```\n\n> [!NOTE] On platforms that do not support streaming, such as AWS Lambda or Firebase, responses will be buffered. This means the page will only render once all promises resolve. If you are using a proxy (e.g. NGINX), make sure it does not buffer responses from the proxied server.\n\n> [!NOTE] Streaming data will only work when JavaScript is enabled. You should avoid returning promises from a universal `load` function if the page is server rendered, as these are _not_ streamed — instead, the promise is recreated when the function reruns in the browser.\n\n> [!NOTE] The headers and status code of a response cannot be changed once the response has started streaming, therefore you cannot `setHeaders` or throw redirects inside a streamed promise.\n\n> [!NOTE] [In SvelteKit 1.x](migrating-to-sveltekit-2#Top-level-promises-are-no-longer-awaited) top-level promises were automatically awaited, only nested promises were streamed.\n\n## Parallel loading\n\nWhen rendering (or navigating to) a page, SvelteKit runs all `load` functions concurrently, avoiding a waterfall of requests. During client-side navigation, the result of calling multiple server `load` functions are grouped into a single response. Once all `load` functions have returned, the page is rendered.\n\n## Rerunning load functions\n\nSvelteKit tracks the dependencies of each `load` function to avoid rerunning it unnecessarily during navigation.\n\nFor example, given a pair of `load` functions like these...\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPost(slug: string): Promise<{ title: string, content: string }>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\treturn {\n\t\tpost: await db.getPost(params.slug)\n\t};\n}\n```\n\n```js\n/// file: src/routes/blog/[slug]/+layout.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPostSummaries(): Promise<Array<{ title: string, slug: string }>>\n}\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport async function load() {\n\treturn {\n\t\tposts: await db.getPostSummaries()\n\t};\n}\n```\n\n...the one in `+page.server.js` will rerun if we navigate from `/blog/trying-the-raw-meat-diet` to `/blog/i-regret-my-choices` because `params.slug` has changed. The one in `+layout.server.js` will not, because the data is still valid. In other words, we won't call `db.getPostSummaries()` a second time.\n\nA `load` function that calls `await parent()` will also rerun if a parent `load` function is rerun.\n\nDependency tracking does not apply _after_ the `load` function has returned — for example, accessing `params.x` inside a nested [promise](#Streaming-with-promises) will not cause the function to rerun when `params.x` changes. (Don't worry, you'll get a warning in development if you accidentally do this.) Instead, access the parameter in the main body of your `load` function.\n\nSearch parameters are tracked independently from the rest of the url. For example, accessing `event.url.searchParams.get(\"x\")` inside a `load` function will make that `load` function re-run when navigating from `?x=1` to `?x=2`, but not when navigating from `?x=1&y=1` to `?x=1&y=2`.\n\n### Untracking dependencies\n\nIn rare cases, you may wish to exclude something from the dependency tracking mechanism. You can do this with the provided `untrack` function:\n\n```js\n/// file: src/routes/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}\n```\n\n### Manual invalidation\n\nYou can also rerun `load` functions that apply to the current page using [`invalidate(url)`]($app-navigation#invalidate), which reruns all `load` functions that depend on `url`, and [`invalidateAll()`]($app-navigation#invalidateAll), which reruns every `load` function. Server load functions will never automatically depend on a fetched `url` to avoid leaking secrets to the client.\n\nA `load` function depends on `url` if it calls `fetch(url)` or `depends(url)`. Note that `url` can be a custom identifier that starts with `[a-z]:`:\n\n```js\n/// file: src/routes/random-number/+page.js\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch, depends }) {\n\t// load reruns when `invalidate('https://api.example.com/random-number')` is called...\n\tconst response = await fetch('https://api.example.com/random-number');\n\n\t// ...or when `invalidate('app:random')` is called\n\tdepends('app:random');\n\n\treturn {\n\t\tnumber: await response.json()\n\t};\n}\n```\n\n```svelte\n<!--- file: src/routes/random-number/+page.svelte --->\n<script>\n\timport { invalidate, invalidateAll } from '$app/navigation';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\tfunction rerunLoadFunction() {\n\t\t// any of these will cause the `load` function to rerun\n\t\tinvalidate('app:random');\n\t\tinvalidate('https://api.example.com/random-number');\n\t\tinvalidate(url => url.href.includes('random-number'));\n\t\tinvalidateAll();\n\t}\n</script>\n\n<p>random number: {data.number}</p>\n<button onclick={rerunLoadFunction}>Update random number</button>\n```\n\n### When do load functions rerun?\n\nTo summarize, a `load` function will rerun in the following situations:\n\n- It references a property of `params` whose value has changed\n- It references a property of `url` (such as `url.pathname` or `url.search`) whose value has changed. Properties in `request.url` are _not_ tracked\n- It calls `url.searchParams.get(...)`, `url.searchParams.getAll(...)` or `url.searchParams.has(...)` and the parameter in question changes. Accessing other properties of `url.searchParams` will have the same effect as accessing `url.search`.\n- It calls `await parent()` and a parent `load` function reran\n- A child `load` function calls `await parent()` and is rerunning, and the parent is a server load function\n- It declared a dependency on a specific URL via [`fetch`](#Making-fetch-requests) (universal load only) or [`depends`](@sveltejs-kit#LoadEvent), and that URL was marked invalid with [`invalidate(url)`]($app-navigation#invalidate)\n- All active `load` functions were forcibly rerun with [`invalidateAll()`]($app-navigation#invalidateAll)\n\n`params` and `url` can change in response to a `<a href=\"..\">` link click, a [`<form>` interaction](form-actions#GET-vs-POST), a [`goto`]($app-navigation#goto) invocation, or a [`redirect`](@sveltejs-kit#redirect).\n\nNote that rerunning a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`]($app-navigation#afterNavigate) callback, and/or wrap your component in a [`{#key ...}`](../svelte/key) block.\n\n## Implications for authentication\n\nA couple features of loading data have important implications for auth checks:\n- Layout `load` functions do not run on every request, such as during client side navigation between child routes. [(When do load functions rerun?)](load#Rerunning-load-functions-When-do-load-functions-rerun)\n- Layout and page `load` functions run concurrently unless `await parent()` is called. If a layout `load` throws, the page `load` function runs, but the client will not receive the returned data.\n\nThere are a few possible strategies to ensure an auth check occurs before protected code.\n\nTo prevent data waterfalls and preserve layout `load` caches:\n- Use [hooks](hooks) to protect multiple routes before any `load` functions run\n- Use auth guards directly in `+page.server.js` `load` functions for route specific protection\n\nPutting an auth guard in `+layout.server.js` requires all child pages to call `await parent()` before protected code. Unless every child page depends on returned data from `await parent()`, the other options will be more performant.\n\n## Using `getRequestEvent`\n\nWhen running server `load` functions, the `event` object passed to the function as an argument can also be retrieved with [`getRequestEvent`]($app-server#getRequestEvent). This allows shared logic (such as authentication guards) to access information about the current request without it needing to be passed around.\n\nFor example, you might have a function that requires users to be logged in, and redirects them to `/login` if not:\n\n```js\n/// file: src/lib/server/auth.js\n// @filename: ambient.d.ts\ninterface User {\n\tname: string;\n}\n\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser?: User;\n\t}\n}\n\n// @filename: index.ts\n// ---cut---\nimport { redirect } from '@sveltejs/kit';\nimport { getRequestEvent } from '$app/server';\n\nexport function requireLogin() {\n\tconst { locals, url } = getRequestEvent();\n\n\t// assume `locals.user` is populated in `handle`\n\tif (!locals.user) {\n\t\tconst redirectTo = url.pathname + url.search;\n\t\tconst params = new URLSearchParams({ redirectTo });\n\n\t\tredirect(307, `/login?${params}`);\n\t}\n\n\treturn locals.user;\n}\n```\n\nNow, you can call `requireLogin` in any `load` function (or [form action](form-actions), for example) to guarantee that the user is logged in:\n\n```js\n/// file: +page.server.js\n// @filename: ambient.d.ts\n\ndeclare module '$lib/server/auth' {\n\tinterface User {\n\t\tname: string;\n\t}\n\n\texport function requireLogin(): User;\n}\n\n// @filename: index.ts\n// ---cut---\nimport { requireLogin } from '$lib/server/auth';\n\nexport function load() {\n\tconst user = requireLogin();\n\n\t// `user` is guaranteed to be a user object here, because otherwise\n\t// `requireLogin` would throw a redirect and we wouldn't get here\n\treturn {\n\t\tmessage: `hello ${user.name}!`\n\t};\n}\n```\n\n## Further reading\n\n- [Tutorial: Loading data](/tutorial/kit/page-data)\n- [Tutorial: Errors and redirects](/tutorial/kit/error-basics)\n- [Tutorial: Advanced loading](/tutorial/kit/await-parent)",
+		"kit/form-actions": "A `+page.server.js` file can export _actions_, which allow you to `POST` data to the server using the `<form>` element.\n\nWhen using `<form>`, client-side JavaScript is optional, but you can easily _progressively enhance_ your form interactions with JavaScript to provide the best user experience.\n\n## Default actions\n\nIn the simplest case, a page declares a `default` action:\n\n```js\n/// file: src/routes/login/+page.server.js\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tdefault: async (event) => {\n\t\t// TODO log the user in\n\t}\n};\n```\n\nTo invoke this action from the `/login` page, just add a `<form>` — no JavaScript needed:\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<form method=\"POST\">\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\">\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n</form>\n```\n\nIf someone were to click the button, the browser would send the form data via `POST` request to the server, running the default action.\n\n> [!NOTE] Actions always use `POST` requests, since `GET` requests should never have side-effects.\n\nWe can also invoke the action from other pages (for example if there's a login widget in the nav in the root layout) by adding the `action` attribute, pointing to the page:\n\n```html\n/// file: src/routes/+layout.svelte\n<form method=\"POST\" action=\"/login\">\n\t<!-- content -->\n</form>\n```\n\n## Named actions\n\nInstead of one `default` action, a page can have as many named actions as it needs:\n\n```js\n/// file: src/routes/login/+page.server.js\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n---\tdefault: async (event) => {---\n+++\tlogin: async (event) => {+++\n\t\t// TODO log the user in\n\t},\n+++\tregister: async (event) => {\n\t\t// TODO register the user\n\t}+++\n};\n```\n\nTo invoke a named action, add a query parameter with the name prefixed by a `/` character:\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<form method=\"POST\" action=\"?/register\">\n```\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<form method=\"POST\" action=\"/login?/register\">\n```\n\nAs well as the `action` attribute, we can use the `formaction` attribute on a button to `POST` the same form data to a different action than the parent `<form>`:\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<form method=\"POST\" +++action=\"?/login\"+++>\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\">\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n\t+++<button formaction=\"?/register\">Register</button>+++\n</form>\n```\n\n> [!NOTE] We can't have default actions next to named actions, because if you POST to a named action without a redirect, the query parameter is persisted in the URL, which means the next default POST would go through the named action from before.\n\n## Anatomy of an action\n\nEach action receives a `RequestEvent` object, allowing you to read the data with `request.formData()`. After processing the request (for example, logging the user in by setting a cookie), the action can respond with data that will be available through the `form` property on the corresponding page and through `page.form` app-wide until the next update.\n\n```js\n/// file: src/routes/login/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/db';\n\n// @filename: index.js\n// ---cut---\nimport * as db from '$lib/server/db';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ cookies }) {\n\tconst user = await db.getUserFromSession(cookies.get('sessionid'));\n\treturn { user };\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async ({ cookies, request }) => {\n\t\tconst data = await request.formData();\n\t\tconst email = data.get('email');\n\t\tconst password = data.get('password');\n\n\t\tconst user = await db.getUser(email);\n\t\tcookies.set('sessionid', await db.createSession(user), { path: '/' });\n\n\t\treturn { success: true };\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data, form } = $props();\n</script>\n\n{#if form?.success}\n\t<!-- this message is ephemeral; it exists because the page was rendered in\n\t       response to a form submission. it will vanish if the user reloads -->\n\t<p>Successfully logged in! Welcome back, {data.user.name}</p>\n{/if}\n```\n\n> [!LEGACY]\n> `PageProps` was added in 2.16.0. In earlier versions, you had to type the `data` and `form` properties individually:\n> ```js\n> /// file: +page.svelte\n> /** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */\n> let { data, form } = $props();\n> ```\n>\n> In Svelte 4, you'd use `export let data` and `export let form` instead to declare properties.\n\n### Validation errors\n\nIf the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `page.status` and the data through `form`:\n\n```js\n/// file: src/routes/login/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/db';\n\n// @filename: index.js\n// ---cut---\n+++import { fail } from '@sveltejs/kit';+++\nimport * as db from '$lib/server/db';\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async ({ cookies, request }) => {\n\t\tconst data = await request.formData();\n\t\tconst email = data.get('email');\n\t\tconst password = data.get('password');\n\n+++\t\tif (!email) {\n\t\t\treturn fail(400, { email, missing: true });\n\t\t}+++\n\n\t\tconst user = await db.getUser(email);\n\n+++\t\tif (!user || user.password !== db.hash(password)) {\n\t\t\treturn fail(400, { email, incorrect: true });\n\t\t}+++\n\n\t\tcookies.set('sessionid', await db.createSession(user), { path: '/' });\n\n\t\treturn { success: true };\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\n> [!NOTE] Note that as a precaution, we only return the email back to the page — not the password.\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<form method=\"POST\" action=\"?/login\">\n+++\t{#if form?.missing}<p class=\"error\">The email field is required</p>{/if}\n\t{#if form?.incorrect}<p class=\"error\">Invalid credentials!</p>{/if}+++\n\t<label>\n\t\tEmail\n\t\t<input name=\"email\" type=\"email\" +++value={form?.email ?? ''}+++>\n\t</label>\n\t<label>\n\t\tPassword\n\t\t<input name=\"password\" type=\"password\">\n\t</label>\n\t<button>Log in</button>\n\t<button formaction=\"?/register\">Register</button>\n</form>\n```\n\nThe returned data must be serializable as JSON. Beyond that, the structure is entirely up to you. For example, if you had multiple forms on the page, you could distinguish which `<form>` the returned `form` data referred to with an `id` property or similar.\n\n### Redirects\n\nRedirects (and errors) work exactly the same as in [`load`](load#Redirects):\n\n```js\n// @errors: 2345\n/// file: src/routes/login/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/db';\n\n// @filename: index.js\n// ---cut---\nimport { fail, +++redirect+++ } from '@sveltejs/kit';\nimport * as db from '$lib/server/db';\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogin: async ({ cookies, request, +++url+++ }) => {\n\t\tconst data = await request.formData();\n\t\tconst email = data.get('email');\n\t\tconst password = data.get('password');\n\n\t\tconst user = await db.getUser(email);\n\t\tif (!user) {\n\t\t\treturn fail(400, { email, missing: true });\n\t\t}\n\n\t\tif (user.password !== db.hash(password)) {\n\t\t\treturn fail(400, { email, incorrect: true });\n\t\t}\n\n\t\tcookies.set('sessionid', await db.createSession(user), { path: '/' });\n\n+++\t\tif (url.searchParams.has('redirectTo')) {\n\t\t\tredirect(303, url.searchParams.get('redirectTo'));\n\t\t}+++\n\n\t\treturn { success: true };\n\t},\n\tregister: async (event) => {\n\t\t// TODO register the user\n\t}\n};\n```\n\n## Loading data\n\nAfter an action runs, the page will be re-rendered (unless a redirect or an unexpected error occurs), with the action's return value available to the page as the `form` prop. This means that your page's `load` functions will run after the action completes.\n\nNote that `handle` runs before the action is invoked, and does not rerun before the `load` functions. This means that if, for example, you use `handle` to populate `event.locals` based on a cookie, you must update `event.locals` when you set or delete the cookie in an action:\n\n```js\n/// file: src/hooks.server.js\n// @filename: ambient.d.ts\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser: {\n\t\t\tname: string;\n\t\t} | null\n\t}\n}\n\n// @filename: global.d.ts\ndeclare global {\n\tfunction getUser(sessionid: string | undefined): {\n\t\tname: string;\n\t};\n}\n\nexport {};\n\n// @filename: index.js\n// ---cut---\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tevent.locals.user = await getUser(event.cookies.get('sessionid'));\n\treturn resolve(event);\n}\n```\n\n```js\n/// file: src/routes/account/+page.server.js\n// @filename: ambient.d.ts\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser: {\n\t\t\tname: string;\n\t\t} | null\n\t}\n}\n\n// @filename: index.js\n// ---cut---\n/** @type {import('./$types').PageServerLoad} */\nexport function load(event) {\n\treturn {\n\t\tuser: event.locals.user\n\t};\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tlogout: async (event) => {\n\t\tevent.cookies.delete('sessionid', { path: '/' });\n\t\tevent.locals.user = null;\n\t}\n};\n```\n\n## Progressive enhancement\n\nIn the preceding sections we built a `/login` action that [works without client-side JavaScript](https://kryogenix.org/code/browser/everyonehasjs.html) — not a `fetch` in sight. That's great, but when JavaScript _is_ available we can progressively enhance our form interactions to provide a better user experience.\n\n### use:enhance\n\nThe easiest way to progressively enhance a form is to add the `use:enhance` action:\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<script>\n\t+++import { enhance } from '$app/forms';+++\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n</script>\n\n<form method=\"POST\" +++use:enhance+++>\n```\n\n> [!NOTE] `use:enhance` can only be used with forms that have `method=\"POST\"` and point to actions defined in a `+page.server.js` file. It will not work with `method=\"GET\"`, which is the default for forms without a specified method. Attempting to use `use:enhance` on forms without `method=\"POST\"` or posting to a `+server.js` endpoint will result in an error.\n\n> [!NOTE] Yes, it's a little confusing that the `enhance` action and `<form action>` are both called 'action'. These docs are action-packed. Sorry.\n\nWithout an argument, `use:enhance` will emulate the browser-native behaviour, just without the full-page reloads. It will:\n\n- update the `form` property, `page.form` and `page.status` on a successful or invalid response, but only if the action is on the same page you're submitting from. For example, if your form looks like `<form action=\"/somewhere/else\" ..>`, the `form` prop and the `page.form` state will _not_ be updated. This is because in the native form submission case you would be redirected to the page the action is on. If you want to have them updated either way, use [`applyAction`](#Progressive-enhancement-Customising-use:enhance)\n- reset the `<form>` element\n- invalidate all data using `invalidateAll` on a successful response\n- call `goto` on a redirect response\n- render the nearest `+error` boundary if an error occurs\n- [reset focus](accessibility#Focus-management) to the appropriate element\n\n### Customising use:enhance\n\nTo customise the behaviour, you can provide a `SubmitFunction` that runs immediately before the form is submitted, and (optionally) returns a callback that runs with the `ActionResult`.\n\n```svelte\n<form\n\tmethod=\"POST\"\n\tuse:enhance={({ formElement, formData, action, cancel, submitter }) => {\n\t\t// `formElement` is this `<form>` element\n\t\t// `formData` is its `FormData` object that's about to be submitted\n\t\t// `action` is the URL to which the form is posted\n\t\t// calling `cancel()` will prevent the submission\n\t\t// `submitter` is the `HTMLElement` that caused the form to be submitted\n\n\t\treturn async ({ result, update }) => {\n\t\t\t// `result` is an `ActionResult` object\n\t\t\t// `update` is a function which triggers the default logic that would be triggered if this callback wasn't set\n\t\t};\n\t}}\n>\n```\n\nYou can use these functions to show and hide loading UI, and so on.\n\nIf you return a callback, you override the default post-submission behavior. To get it back, call `update`, which accepts `invalidateAll` and `reset` parameters, or use `applyAction` on the result:\n\n```svelte\n/// file: src/routes/login/+page.svelte\n<script>\n\timport { enhance, +++applyAction+++ } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n</script>\n\n<form\n\tmethod=\"POST\"\n\tuse:enhance={({ formElement, formData, action, cancel }) => {\n\t\treturn async ({ result }) => {\n\t\t\t// `result` is an `ActionResult` object\n+++\t\t\tif (result.type === 'redirect') {\n\t\t\t\tgoto(result.location);\n\t\t\t} else {\n\t\t\t\tawait applyAction(result);\n\t\t\t}+++\n\t\t};\n\t}}\n>\n```\n\nThe behaviour of `applyAction(result)` depends on `result.type`:\n\n- `success`, `failure` — sets `page.status` to `result.status` and updates `form` and `page.form` to `result.data` (regardless of where you are submitting from, in contrast to `update` from `enhance`)\n- `redirect` — calls `goto(result.location, { invalidateAll: true })`\n- `error` — renders the nearest `+error` boundary with `result.error`\n\nIn all cases, [focus will be reset](accessibility#Focus-management).\n\n### Custom event listener\n\nWe can also implement progressive enhancement ourselves, without `use:enhance`, with a normal event listener on the `<form>`:\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<script>\n\timport { invalidateAll, goto } from '$app/navigation';\n\timport { applyAction, deserialize } from '$app/forms';\n\n\t/** @type {import('./$types').PageProps} */\n\tlet { form } = $props();\n\n\t/** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */\n\tasync function handleSubmit(event) {\n\t\tevent.preventDefault();\n\t\tconst data = new FormData(event.currentTarget, event.submitter);\n\n\t\tconst response = await fetch(event.currentTarget.action, {\n\t\t\tmethod: 'POST',\n\t\t\tbody: data\n\t\t});\n\n\t\t/** @type {import('@sveltejs/kit').ActionResult} */\n\t\tconst result = deserialize(await response.text());\n\n\t\tif (result.type === 'success') {\n\t\t\t// rerun all `load` functions, following the successful update\n\t\t\tawait invalidateAll();\n\t\t}\n\n\t\tapplyAction(result);\n\t}\n</script>\n\n<form method=\"POST\" onsubmit={handleSubmit}>\n\t<!-- content -->\n</form>\n```\n\nNote that you need to `deserialize` the response before processing it further using the corresponding method from `$app/forms`. `JSON.parse()` isn't enough because form actions - like `load` functions - also support returning `Date` or `BigInt` objects.\n\nIf you have a `+server.js` alongside your `+page.server.js`, `fetch` requests will be routed there by default. To `POST` to an action in `+page.server.js` instead, use the custom `x-sveltekit-action` header:\n\n```js\n// @errors: 2532 2304\nconst response = await fetch(this.action, {\n\tmethod: 'POST',\n\tbody: data,\n+++\theaders: {\n\t\t'x-sveltekit-action': 'true'\n\t}+++\n});\n```\n\n## Alternatives\n\nForm actions are the preferred way to send data to the server, since they can be progressively enhanced, but you can also use [`+server.js`](routing#server) files to expose (for example) a JSON API. Here's how such an interaction could look like:\n\n```svelte\n<!--- file: src/routes/send-message/+page.svelte --->\n<script>\n\tfunction rerun() {\n\t\tfetch('/api/ci', {\n\t\t\tmethod: 'POST'\n\t\t});\n\t}\n</script>\n\n<button onclick={rerun}>Rerun CI</button>\n```\n\n```js\n// @errors: 2355 1360 2322\n/// file: src/routes/api/ci/+server.js\n/** @type {import('./$types').RequestHandler} */\nexport function POST() {\n\t// do something\n}\n```\n\n## GET vs POST\n\nAs we've seen, to invoke a form action you must use `method=\"POST\"`.\n\nSome forms don't need to `POST` data to the server — search inputs, for example. For these you can use `method=\"GET\"` (or, equivalently, no `method` at all), and SvelteKit will treat them like `<a>` elements, using the client-side router instead of a full page navigation:\n\n```html\n<form action=\"/search\">\n\t<label>\n\t\tSearch\n\t\t<input name=\"q\">\n\t</label>\n</form>\n```\n\nSubmitting this form will navigate to `/search?q=...` and invoke your load function but will not invoke an action. As with `<a>` elements, you can set the [`data-sveltekit-reload`](link-options#data-sveltekit-reload), [`data-sveltekit-replacestate`](link-options#data-sveltekit-replacestate), [`data-sveltekit-keepfocus`](link-options#data-sveltekit-keepfocus) and [`data-sveltekit-noscroll`](link-options#data-sveltekit-noscroll) attributes on the `<form>` to control the router's behaviour.\n\n## Further reading\n\n- [Tutorial: Forms](/tutorial/kit/the-form-element)",
+		"kit/page-options": "By default, SvelteKit will render (or [prerender](glossary#Prerendering)) any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called [_hydration_](glossary#Hydration). For this reason, you need to ensure that components can run in both places. SvelteKit will then initialize a [_router_](routing) that takes over subsequent navigations.\n\nYou can control each of these on a page-by-page basis by exporting options from [`+page.js`](routing#page-page.js) or [`+page.server.js`](routing#page-page.server.js), or for groups of pages using a shared [`+layout.js`](routing#layout-layout.js) or [`+layout.server.js`](routing#layout-layout.server.js). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered.\n\nYou can mix and match these options in different areas of your app. For example, you could prerender your marketing page for maximum speed, server-render your dynamic pages for SEO and accessibility and turn your admin section into an SPA by rendering it on the client only. This makes SvelteKit very versatile.\n\n## prerender\n\nIt's likely that at least some routes of your app can be represented as a simple HTML file generated at build time. These routes can be [_prerendered_](glossary#Prerendering).\n\n```js\n/// file: +page.js/+page.server.js/+server.js\nexport const prerender = true;\n```\n\nAlternatively, you can set `export const prerender = true` in your root `+layout.js` or `+layout.server.js` and prerender everything except pages that are explicitly marked as _not_ prerenderable:\n\n```js\n/// file: +page.js/+page.server.js/+server.js\nexport const prerender = false;\n```\n\nRoutes with `prerender = true` will be excluded from manifests used for dynamic SSR, making your server (or serverless/edge functions) smaller. In some cases you might want to prerender a route but also include it in the manifest (for example, with a route like `/blog/[slug]` where you want to prerender your most recent/popular content but server-render the long tail) — for these cases, there's a third option, 'auto':\n\n```js\n/// file: +page.js/+page.server.js/+server.js\nexport const prerender = 'auto';\n```\n\n> [!NOTE] If your entire app is suitable for prerendering, you can use [`adapter-static`](adapter-static), which will output files suitable for use with any static webserver.\n\nThe prerenderer will start at the root of your app and generate files for any prerenderable pages or `+server.js` routes it finds. Each page is scanned for `<a>` elements that point to other pages that are candidates for prerendering — because of this, you generally don't need to specify which pages should be accessed. If you _do_ need to specify which pages should be accessed by the prerenderer, you can do so with [`config.kit.prerender.entries`](configuration#prerender), or by exporting an [`entries`](#entries) function from your dynamic route.\n\nWhile prerendering, the value of `building` imported from [`$app/environment`]($app-environment) will be `true`.\n\n### Prerendering server routes\n\nUnlike the other page options, `prerender` also applies to `+server.js` files. These files are _not_ affected by layouts, but will inherit default values from the pages that fetch data from them, if any. For example if a `+page.js` contains this `load` function...\n\n```js\n/// file: +page.js\nexport const prerender = true;\n\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch }) {\n\tconst res = await fetch('/my-server-route.json');\n\treturn await res.json();\n}\n```\n\n...then `src/routes/my-server-route.json/+server.js` will be treated as prerenderable if it doesn't contain its own `export const prerender = false`.\n\n### When not to prerender\n\nThe basic rule is this: for a page to be prerenderable, any two users hitting it directly must get the same content from the server.\n\n> [!NOTE] Not all pages are suitable for prerendering. Any content that is prerendered will be seen by all users. You can of course fetch personalized data in `onMount` in a prerendered page, but this may result in a poorer user experience since it will involve blank initial content or loading indicators.\n\nNote that you can still prerender pages that load data based on the page's parameters, such as a `src/routes/blog/[slug]/+page.svelte` route.\n\nAccessing [`url.searchParams`](load#Using-URL-data-url) during prerendering is forbidden. If you need to use it, ensure you are only doing so in the browser (for example in `onMount`).\n\nPages with [actions](form-actions) cannot be prerendered, because a server must be able to handle the action `POST` requests.\n\n### Route conflicts\n\nBecause prerendering writes to the filesystem, it isn't possible to have two endpoints that would cause a directory and a file to have the same name. For example, `src/routes/foo/+server.js` and `src/routes/foo/bar/+server.js` would try to create `foo` and `foo/bar`, which is impossible.\n\nFor that reason among others, it's recommended that you always include a file extension — `src/routes/foo.json/+server.js` and `src/routes/foo/bar.json/+server.js` would result in `foo.json` and `foo/bar.json` files living harmoniously side-by-side.\n\nFor _pages_, we skirt around this problem by writing `foo/index.html` instead of `foo`.\n\n### Troubleshooting\n\nIf you encounter an error like 'The following routes were marked as prerenderable, but were not prerendered' it's because the route in question (or a parent layout, if it's a page) has `export const prerender = true` but the page wasn't reached by the prerendering crawler and thus wasn't prerendered.\n\nSince these routes cannot be dynamically server-rendered, this will cause errors when people try to access the route in question. There are a few ways to fix it:\n\n* Ensure that SvelteKit can find the route by following links from [`config.kit.prerender.entries`](configuration#prerender) or the [`entries`](#entries) page option. Add links to dynamic routes (i.e. pages with `[parameters]` ) to this option if they are not found through crawling the other entry points, else they are not prerendered because SvelteKit doesn't know what value the parameters should have. Pages not marked as prerenderable will be ignored and their links to other pages will not be crawled, even if some of them would be prerenderable.\n* Ensure that SvelteKit can find the route by discovering a link to it from one of your other prerendered pages that have server-side rendering enabled.\n* Change `export const prerender = true` to `export const prerender = 'auto'`. Routes with `'auto'` can be dynamically server rendered\n\n## entries\n\nSvelteKit will discover pages to prerender automatically, by starting at _entry points_ and crawling them. By default, all your non-dynamic routes are considered entry points — for example, if you have these routes...\n\n```sh\n/             # non-dynamic\n/blog         # non-dynamic\n/blog/[slug]  # dynamic, because of `[slug]`\n```\n\n...SvelteKit will prerender `/` and `/blog`, and in the process discover links like `<a href=\"/blog/hello-world\">` which give it new pages to prerender.\n\nMost of the time, that's enough. In some situations, links to pages like `/blog/hello-world` might not exist (or might not exist on prerendered pages), in which case we need to tell SvelteKit about their existence.\n\nThis can be done with [`config.kit.prerender.entries`](configuration#prerender), or by exporting an `entries` function from a `+page.js`, a `+page.server.js` or a `+server.js` belonging to a dynamic route:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n/** @type {import('./$types').EntryGenerator} */\nexport function entries() {\n\treturn [\n\t\t{ slug: 'hello-world' },\n\t\t{ slug: 'another-blog-post' }\n\t];\n}\n\nexport const prerender = true;\n```\n\n`entries` can be an `async` function, allowing you to (for example) retrieve a list of posts from a CMS or database, in the example above.\n\n## ssr\n\nNormally, SvelteKit renders your page on the server first and sends that HTML to the client where it's [hydrated](glossary#Hydration). If you set `ssr` to `false`, it renders an empty 'shell' page instead. This is useful if your page is unable to be rendered on the server (because you use browser-only globals like `document` for example), but in most situations it's not recommended ([see appendix](glossary#SSR)).\n\n```js\n/// file: +page.js\nexport const ssr = false;\n// If both `ssr` and `csr` are `false`, nothing will be rendered!\n```\n\nIf you add `export const ssr = false` to your root `+layout.js`, your entire app will only be rendered on the client — which essentially means you turn your app into an SPA.\n\n> [!NOTE] If all your page options are boolean or string literal values, SvelteKit will evaluate them statically. If not, it will import your `+page.js` or `+layout.js` file on the server (both at build time, and at runtime if your app isn't fully static) so it can evaluate the options. In the second case, browser-only code must not run when the module is loaded. In practice, this means you should import browser-only code in your `+page.svelte` or `+layout.svelte` file instead.\n\n## csr\n\nOrdinarily, SvelteKit [hydrates](glossary#Hydration) your server-rendered HTML into an interactive client-side-rendered (CSR) page. Some pages don't require JavaScript at all — many blog posts and 'about' pages fall into this category. In these cases you can disable CSR:\n\n```js\n/// file: +page.js\nexport const csr = false;\n// If both `csr` and `ssr` are `false`, nothing will be rendered!\n```\n\nDisabling CSR does not ship any JavaScript to the client. This means:\n\n* The webpage should work with HTML and CSS only.\n* `<script>` tags inside all Svelte components are removed.\n* `<form>` elements cannot be [progressively enhanced](form-actions#Progressive-enhancement).\n* Links are handled by the browser with a full-page navigation.\n* Hot Module Replacement (HMR) will be disabled.\n\nYou can enable `csr` during development (for example to take advantage of HMR) like so:\n\n```js\n/// file: +page.js\nimport { dev } from '$app/environment';\n\nexport const csr = dev;\n```\n\n## trailingSlash\n\nBy default, SvelteKit will remove trailing slashes from URLs — if you visit `/about/`, it will respond with a redirect to `/about`. You can change this behaviour with the `trailingSlash` option, which can be one of `'never'` (the default), `'always'`, or `'ignore'`.\n\nAs with other page options, you can export this value from a `+layout.js` or a `+layout.server.js` and it will apply to all child pages. You can also export the configuration from `+server.js` files.\n\n```js\n/// file: src/routes/+layout.js\nexport const trailingSlash = 'always';\n```\n\nThis option also affects [prerendering](#prerender). If `trailingSlash` is `always`, a route like `/about` will result in an `about/index.html` file, otherwise it will create `about.html`, mirroring static webserver conventions.\n\n> [!NOTE] Ignoring trailing slashes is not recommended — the semantics of relative paths differ between the two cases (`./y` from `/x` is `/y`, but from `/x/` is `/x/y`), and `/x` and `/x/` are treated as separate URLs which is harmful to SEO.\n\n## config\n\nWith the concept of [adapters](adapters), SvelteKit is able to run on a variety of platforms. Each of these might have specific configuration to further tweak the deployment — for example on Vercel you could choose to deploy some parts of your app on the edge and others on serverless environments.\n\n`config` is an object with key-value pairs at the top level. Beyond that, the concrete shape is dependent on the adapter you're using. Every adapter should provide a `Config` interface to import for type safety. Consult the documentation of your adapter for more information.\n\n```js\n// @filename: ambient.d.ts\ndeclare module 'some-adapter' {\n\texport interface Config { runtime: string }\n}\n\n// @filename: index.js\n// ---cut---\n/// file: src/routes/+page.js\n/** @type {import('some-adapter').Config} */\nexport const config = {\n\truntime: 'edge'\n};\n```\n\n`config` objects are merged at the top level (but _not_ deeper levels). This means you don't need to repeat all the values in a `+page.js` if you want to only override some of the values in the upper `+layout.js`. For example this layout configuration...\n\n```js\n/// file: src/routes/+layout.js\nexport const config = {\n\truntime: 'edge',\n\tregions: 'all',\n\tfoo: {\n\t\tbar: true\n\t}\n}\n```\n\n...is overridden by this page configuration...\n\n```js\n/// file: src/routes/+page.js\nexport const config = {\n\tregions: ['us1', 'us2'],\n\tfoo: {\n\t\tbaz: true\n\t}\n}\n```\n\n...which results in the config value `{ runtime: 'edge', regions: ['us1', 'us2'], foo: { baz: true } }` for that page.\n\n## Further reading\n\n- [Tutorial: Page options](/tutorial/kit/page-options)",
+		"kit/state-management": "If you're used to building client-only apps, state management in an app that spans server and client might seem intimidating. This section provides tips for avoiding some common gotchas.\n\n## Avoid shared state on the server\n\nBrowsers are _stateful_ — state is stored in memory as the user interacts with the application. Servers, on the other hand, are _stateless_ — the content of the response is determined entirely by the content of the request.\n\nConceptually, that is. In reality, servers are often long-lived and shared by multiple users. For that reason it's important not to store data in shared variables. For example, consider this code:\n\n```js\n// @errors: 7034 7005\n/// file: +page.server.js\nlet user;\n\n/** @type {import('./$types').PageServerLoad} */\nexport function load() {\n\treturn { user };\n}\n\n/** @satisfies {import('./$types').Actions} */\nexport const actions = {\n\tdefault: async ({ request }) => {\n\t\tconst data = await request.formData();\n\n\t\t// NEVER DO THIS!\n\t\tuser = {\n\t\t\tname: data.get('name'),\n\t\t\tembarrassingSecret: data.get('secret')\n\t\t};\n\t}\n}\n```\n\nThe `user` variable is shared by everyone who connects to this server. If Alice submitted an embarrassing secret, and Bob visited the page after her, Bob would know Alice's secret. In addition, when Alice returns to the site later in the day, the server may have restarted, losing her data.\n\nInstead, you should _authenticate_ the user using [`cookies`](load#Cookies) and persist the data to a database.\n\n## No side-effects in load\n\nFor the same reason, your `load` functions should be _pure_ — no side-effects (except maybe the occasional `console.log(...)`). For example, you might be tempted to write to a store or global state inside a `load` function so that you can use the value in your components:\n\n```js\n/// file: +page.js\n// @filename: ambient.d.ts\ndeclare module '$lib/user' {\n\texport const user: { set: (value: any) => void };\n}\n\n// @filename: index.js\n// ---cut---\nimport { user } from '$lib/user';\n\n/** @type {import('./$types').PageLoad} */\nexport async function load({ fetch }) {\n\tconst response = await fetch('/api/user');\n\n\t// NEVER DO THIS!\n\tuser.set(await response.json());\n}\n```\n\nAs with the previous example, this puts one user's information in a place that is shared by _all_ users. Instead, just return the data...\n\n```js\n/// file: +page.js\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ fetch }) {\n\tconst response = await fetch('/api/user');\n\n+++\treturn {\n\t\tuser: await response.json()\n\t};+++\n}\n```\n\n...and pass it around to the components that need it, or use [`page.data`](load#page.data).\n\nIf you're not using SSR, then there's no risk of accidentally exposing one user's data to another. But you should still avoid side-effects in your `load` functions — your application will be much easier to reason about without them.\n\n## Using state and stores with context\n\nYou might wonder how we're able to use `page.data` and other [app state]($app-state) (or [app stores]($app-stores)) if we can't use global state. The answer is that app state and app stores on the server use Svelte's [context API](/tutorial/svelte/context-api) — the state (or store) is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own state:\n\n```svelte\n<!--- file: src/routes/+layout.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data } = $props();\n\n\t// Pass a function referencing our state\n\t// to the context for child components to access\n\tsetContext('user', () => data.user);\n</script>\n```\n\n```svelte\n<!--- file: src/routes/user/+page.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\t// Retrieve user store from context\n\tconst user = getContext('user');\n</script>\n\n<p>Welcome {user().name}</p>\n```\n\n> [!NOTE] We're passing a function into `setContext` to keep reactivity across boundaries. Read more about it [here](/docs/svelte/$state#Passing-state-into-functions)\n\n> [!LEGACY]\n> You also use stores from `svelte/store` for this, but when using Svelte 5 it is recommended to make use of universal reactivity instead.\n\nUpdating the value of context-based state in deeper-level pages or components while the page is being rendered via SSR will not affect the value in the parent component because it has already been rendered by the time the state value is updated. In contrast, on the client (when CSR is enabled, which is the default) the value will be propagated and components, pages, and layouts higher in the hierarchy will react to the new value. Therefore, to avoid values 'flashing' during state updates during hydration, it is generally recommended to pass state down into components rather than up.\n\nIf you're not using SSR (and can guarantee that you won't need to use SSR in future) then you can safely keep state in a shared module, without using the context API.\n\n## Component and page state is preserved\n\nWhen you navigate around your application, SvelteKit reuses existing layout and page components. For example, if you have a route like this...\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n\t// THIS CODE IS BUGGY!\n\tconst wordCount = data.content.split(' ').length;\n\tconst estimatedReadingTime = wordCount / 250;\n</script>\n\n<header>\n\t<h1>{data.title}</h1>\n\t<p>Reading time: {Math.round(estimatedReadingTime)} minutes</p>\n</header>\n\n<div>{@html data.content}</div>\n```\n\n...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the layout, page and any other components within to be destroyed and recreated. Instead the `data` prop (and by extension `data.title` and `data.content`) will update (as it would with any other Svelte component) and, because the code isn't rerunning, lifecycle methods like `onMount` and `onDestroy` won't rerun and `estimatedReadingTime` won't be recalculated.\n\nInstead, we need to make the value [_reactive_](/tutorial/svelte/state):\n\n```svelte\n/// file: src/routes/blog/[slug]/+page.svelte\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data } = $props();\n\n+++\tlet wordCount = $derived(data.content.split(' ').length);\n\tlet estimatedReadingTime = $derived(wordCount / 250);+++\n</script>\n```\n\n> [!NOTE] If your code in `onMount` and `onDestroy` has to run again after navigation you can use [afterNavigate]($app-navigation#afterNavigate) and [beforeNavigate]($app-navigation#beforeNavigate) respectively.\n\nReusing components like this means that things like sidebar scroll state are preserved, and you can easily animate between changing values. In the case that you do need to completely destroy and remount a component on navigation, you can use this pattern:\n\n```svelte\n<script>\n\timport { page } from '$app/state';\n</script>\n\n{#key page.url.pathname}\n\t<BlogPost title={data.title} content={data.title} />\n{/key}\n```\n\n## Storing state in the URL\n\nIf you have state that should survive a reload and/or affect SSR, such as filters or sorting rules on a table, URL search parameters (like `?sort=price&order=ascending`) are a good place to put them. You can put them in `<a href=\"...\">` or `<form action=\"...\">` attributes, or set them programmatically via `goto('?key=value')`. They can be accessed inside `load` functions via the `url` parameter, and inside components via `page.url.searchParams`.\n\n## Storing ephemeral state in snapshots\n\nSome UI state, such as 'is the accordion open?', is disposable — if the user navigates away or refreshes the page, it doesn't matter if the state is lost. In some cases, you _do_ want the data to persist if the user navigates to a different page and comes back, but storing the state in the URL or in a database would be overkill. For this, SvelteKit provides [snapshots](snapshots), which let you associate component state with a history entry.",
+		"kit/remote-functions": "<blockquote class=\"since note\">\n\t<p>Available since 2.27</p>\n</blockquote>\n\nRemote functions are a tool for type-safe communication between client and server. They can be _called_ anywhere in your app, but always _run_ on the server, meaning they can safely access [server-only modules](server-only-modules) containing things like environment variables and database clients.\n\nCombined with Svelte's experimental support for [`await`](/docs/svelte/await-expressions), it allows you to load and manipulate data directly inside your components.\n\nThis feature is currently experimental, meaning it is likely to contain bugs and is subject to change without notice. You must opt in by adding the `kit.experimental.remoteFunctions` option in your `svelte.config.js` and optionally, the `compilerOptions.experimental.async` option to use `await` in components:\n\n```js\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\texperimental: {\n\t\t\t+++remoteFunctions: true+++\n\t\t}\n\t},\n\tcompilerOptions: {\n\t\texperimental: {\n\t\t\t+++async: true+++\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\n## Overview\n\nRemote functions are exported from a `.remote.js` or `.remote.ts` file, and come in four flavours: `query`, `form`, `command` and `prerender`. On the client, the exported functions are transformed to `fetch` wrappers that invoke their counterparts on the server via a generated HTTP endpoint. Remote files must be placed in your `src` directory.\n\n## query\n\nThe `query` function allows you to read dynamic data from the server (for _static_ data, consider using [`prerender`](#prerender) instead):\n\n```js\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport { query } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = query(async () => {\n\tconst posts = await db.sql`\n\t\tSELECT title, slug\n\t\tFROM post\n\t\tORDER BY published_at\n\t\tDESC\n\t`;\n\n\treturn posts;\n});\n```\n\n> [!NOTE] Throughout this page, you'll see imports from fictional modules like `$lib/server/database` and `$lib/server/auth`. These are purely for illustrative purposes — you can use whatever database client and auth setup you like.\n>\n> The `db.sql` function above is a [tagged template function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) that escapes any interpolated values.\n\nThe query returned from `getPosts` works as a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves to `posts`:\n\n```svelte\n<!--- file: src/routes/blog/+page.svelte --->\n<script>\n\timport { getPosts } from './data.remote';\n</script>\n\n<h1>Recent posts</h1>\n\n<ul>\n\t{#each await getPosts() as { title, slug }}\n\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t{/each}\n</ul>\n```\n\nUntil the promise resolves — and if it errors — the nearest [`<svelte:boundary>`](../svelte/svelte-boundary) will be invoked.\n\nWhile using `await` is recommended, as an alternative the query also has `loading`, `error` and `current` properties:\n\n```svelte\n<!--- file: src/routes/blog/+page.svelte --->\n<script>\n\timport { getPosts } from './data.remote';\n\n\tconst query = getPosts();\n</script>\n\n<h1>Recent posts</h1>\n\n{#if query.error}\n\t<p>oops!</p>\n{:else if query.loading}\n\t<p>loading...</p>\n{:else}\n\t<ul>\n\t\t{#each query.current as { title, slug }}\n\t\t\t<li><a href=\"/blog/{slug}\">{title}</a></li>\n\t\t{/each}\n\t</ul>\n{/if}\n```\n\n> [!NOTE] For the rest of this document, we'll use the `await` form.\n\n### Query arguments\n\nQuery functions can accept an argument, such as the `slug` of an individual post:\n\n```svelte\n<!--- file: src/routes/blog/[slug]/+page.svelte --->\n<script>\n\timport { getPost } from '../data.remote';\n\n\tlet { params } = $props();\n\n\tconst post = $derived(await getPost(params.slug));\n</script>\n\n<h1>{post.title}</h1>\n<div>{@html post.content}</div>\n```\n\nSince `getPost` exposes an HTTP endpoint, it's important to validate this argument to be sure that it's the correct type. For this, we can use any [Standard Schema](https://standardschema.dev/) validation library such as [Zod](https://zod.dev/) or [Valibot](https://valibot.dev/):\n\n```js\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { error } from '@sveltejs/kit';\nimport { query } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = query(async () => { /* ... */ });\n\nexport const getPost = query(v.string(), async (slug) => {\n\tconst [post] = await db.sql`\n\t\tSELECT * FROM post\n\t\tWHERE slug = ${slug}\n\t`;\n\n\tif (!post) error(404, 'Not found');\n\treturn post;\n});\n```\n\nBoth the argument and the return value are serialized with [devalue](https://github.com/sveltejs/devalue), which handles types like `Date` and `Map` (and custom types defined in your [transport hook](hooks#Universal-hooks-transport)) in addition to JSON.\n\n### Refreshing queries\n\nAny query can be re-fetched via its `refresh` method, which retrieves the latest value from the server:\n\n```svelte\n<button onclick={() => getPosts().refresh()}>\n\tCheck for new posts\n</button>\n```\n\n> [!NOTE] Queries are cached while they're on the page, meaning `getPosts() === getPosts()`. This means you don't need a reference like `const posts = getPosts()` in order to update the query.\n\n## query.batch\n\n`query.batch` works like `query` except that it batches requests that happen within the same macrotask. This solves the so-called n+1 problem: rather than each query resulting in a separate database call (for example), simultaneous queries are grouped together.\n\nOn the server, the callback receives an array of the arguments the function was called with. It must return a function of the form `(input: Input, index: number) => Output`. SvelteKit will then call this with each of the input arguments to resolve the individual calls with their results.\n\n```js\n/// file: weather.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { query } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getWeather = query.batch(v.string(), async (cities) => {\n\tconst weather = await db.sql`\n\t\tSELECT * FROM weather\n\t\tWHERE city = ANY(${cities})\n\t`;\n\tconst lookup = new Map(weather.map(w => [w.city, w]));\n\n\treturn (city) => lookup.get(city);\n});\n```\n\n```svelte\n<!--- file: Weather.svelte --->\n<script>\n\timport CityWeather from './CityWeather.svelte';\n\timport { getWeather } from './weather.remote.js';\n\n\tlet { cities } = $props();\n\tlet limit = $state(5);\n</script>\n\n<h2>Weather</h2>\n\n{#each cities.slice(0, limit) as city}\n\t<h3>{city.name}</h3>\n\t<CityWeather weather={await getWeather(city.id)} />\n{/each}\n\n{#if cities.length > limit}\n\t<button onclick={() => limit += 5}>\n\t\tLoad more\n\t</button>\n{/if}\n```\n\n## form\n\nThe `form` function makes it easy to write data to the server. It takes a callback that receives `data` constructed from the submitted [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)...\n\n```ts\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n\ndeclare module '$lib/server/auth' {\n\tinterface User {\n\t\tname: string;\n\t}\n\n\t/**\n\t * Gets a user's info from their cookies, using `getRequestEvent`\n\t */\n\texport function getUser(): Promise<User | null>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { error, redirect } from '@sveltejs/kit';\nimport { query, form } from '$app/server';\nimport * as db from '$lib/server/database';\nimport * as auth from '$lib/server/auth';\n\nexport const getPosts = query(async () => { /* ... */ });\n\nexport const getPost = query(v.string(), async (slug) => { /* ... */ });\n\nexport const createPost = form(\n\tv.object({\n\t\ttitle: v.pipe(v.string(), v.nonEmpty()),\n\t\tcontent:v.pipe(v.string(), v.nonEmpty())\n\t}),\n\tasync ({ title, content }) => {\n\t\t// Check the user is logged in\n\t\tconst user = await auth.getUser();\n\t\tif (!user) error(401, 'Unauthorized');\n\n\t\tconst slug = title.toLowerCase().replace(/ /g, '-');\n\n\t\t// Insert into the database\n\t\tawait db.sql`\n\t\t\tINSERT INTO post (slug, title, content)\n\t\t\tVALUES (${slug}, ${title}, ${content})\n\t\t`;\n\n\t\t// Redirect to the newly created page\n\t\tredirect(303, `/blog/${slug}`);\n\t}\n);\n```\n\n...and returns an object that can be spread onto a `<form>` element. The callback is called whenever the form is submitted.\n\n```svelte\n<!--- file: src/routes/blog/new/+page.svelte --->\n<script>\n\timport { createPost } from '../data.remote';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost}>\n\t<!-- form content goes here -->\n\n\t<button>Publish!</button>\n</form>\n```\n\nThe form object contains `method` and `action` properties that allow it to work without JavaScript (i.e. it submits data and reloads the page). It also has an [attachment](/docs/svelte/@attach) that progressively enhances the form when JavaScript is available, submitting data *without* reloading the entire page.\n\nAs with `query`, if the callback uses the submitted `data`, it should be [validated](#query-Query-arguments) by passing a [Standard Schema](https://standardschema.dev) as the first argument to `form`.\n\n### Fields\n\nA form is composed of a set of _fields_, which are defined by the schema. In the case of `createPost`, we have two fields, `title` and `content`, which are both strings. To get the attributes for a field, call its `.as(...)` method, specifying which [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types) to use:\n\n```svelte\n<form {...createPost}>\n\t<label>\n\t\t<h2>Title</h2>\n\t\t+++<input {...createPost.fields.title.as('text')} />+++\n\t</label>\n\n\t<label>\n\t\t<h2>Write your post</h2>\n\t\t+++<textarea {...createPost.fields.content.as('text')}></textarea>+++\n\t</label>\n\n\t<button>Publish!</button>\n</form>\n```\n\nThese attributes allow SvelteKit to set the correct input type, set a `name` that is used to construct the `data` passed to the handler, populate the `value` of the form (for example following a failed submission, to save the user having to re-enter everything), and set the [`aria-invalid`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid) state.\n\nFields can be nested in objects and arrays, and their values can be strings, numbers, booleans or `File` objects. For example, if your schema looked like this...\n\n```js\n/// file: data.remote.js\nimport * as v from 'valibot';\nimport { form } from '$app/server';\n// ---cut---\nconst datingProfile = v.object({\n\tname: v.string(),\n\tphoto: v.file(),\n\tinfo: v.object({\n\t\theight: v.number(),\n\t\tlikesDogs: v.optional(v.boolean(), false)\n\t}),\n\tattributes: v.array(v.string())\n});\n\nexport const createProfile = form(datingProfile, (data) => { /* ... */ });\n```\n\n...your form could look like this:\n\n```svelte\n<script>\n\timport { createProfile } from './data.remote';\n\n\tconst { name, photo, info, attributes } = createProfile.fields;\n</script>\n\n<form {...createProfile} enctype=\"multipart/form-data\">\n\t<label>\n\t\t<input {...name.as('text')} /> Name\n\t</label>\n\n\t<label>\n\t\t<input {...photo.as('file')} /> Photo\n\t</label>\n\n\t<label>\n\t\t<input {...info.height.as('number')} /> Height (cm)\n\t</label>\n\n\t<label>\n\t\t<input {...info.likesDogs.as('checkbox')} /> I like dogs\n\t</label>\n\n\t<h2>My best attributes</h2>\n\t<input {...attributes[0].as('text')} />\n\t<input {...attributes[1].as('text')} />\n\t<input {...attributes[2].as('text')} />\n\n\t<button>submit</button>\n</form>\n```\n\nBecause our form contains a `file` input, we've added an `enctype=\"multipart/form-data\"` attribute. The values for `info.height` and `info.likesDogs` are coerced to a number and a boolean respectively.\n\n> [!NOTE] If a `checkbox` input is unchecked, the value is not included in the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object that SvelteKit constructs the data from. As such, we have to make the value optional in our schema. In Valibot that means using `v.optional(v.boolean(), false)` instead of just `v.boolean()`, whereas in Zod it would mean using `z.coerce.boolean<boolean>()`.\n\nIn the case of `radio` and `checkbox` inputs that all belong to the same field, the `value` must be specified as a second argument to `.as(...)`:\n\n```js\n/// file: data.remote.js\nimport * as v from 'valibot';\nimport { form } from '$app/server';\n// ---cut---\nexport const survey = form(\n\tv.object({\n\t\toperatingSystem: v.picklist(['windows', 'mac', 'linux']),\n\t\tlanguages: v.optional(v.array(v.picklist(['html', 'css', 'js'])), [])\n\t}),\n\t(data) => { /* ... */ }\n);\n```\n\n```svelte\n<form {...survey}>\n\t<h2>Which operating system do you use?</h2>\n\n\t{#each ['windows', 'mac', 'linux'] as os}\n\t\t<label>\n\t\t\t<input {...survey.fields.operatingSystem.as('radio', os)}>\n\t\t\t{os}\n\t\t</label>\n\t{/each}\n\n\t<h2>Which languages do you write code in?</h2>\n\n\t{#each ['html', 'css', 'js'] as language}\n\t\t<label>\n\t\t\t<input {...survey.fields.languages.as('checkbox', language)}>\n\t\t\t{language}\n\t\t</label>\n\t{/each}\n\n\t<button>submit</button>\n</form>\n```\n\nAlternatively, you could use `select` and `select multiple`:\n\n```svelte\n<form {...survey}>\n\t<h2>Which operating system do you use?</h2>\n\n\t<select {...survey.fields.operatingSystem.as('select')}>\n\t\t<option>windows</option>\n\t\t<option>mac</option>\n\t\t<option>linux</option>\n\t</select>\n\n\t<h2>Which languages do you write code in?</h2>\n\n\t<select {...survey.fields.languages.as('select multiple')}>\n\t\t<option>html</option>\n\t\t<option>css</option>\n\t\t<option>js</option>\n\t</select>\n\n\t<button>submit</button>\n</form>\n```\n\n> [!NOTE] As with unchecked `checkbox` inputs, if no selections are made then the data will be `undefined`. For this reason, the `languages` field uses `v.optional(v.array(...), [])` rather than just `v.array(...)`.\n\n### Programmatic validation\n\nIn addition to declarative schema validation, you can programmatically mark fields as invalid inside the form handler using the `invalid` function. This is useful for cases where you can't know if something is valid until you try to perform some action:\n\n```js\n/// file: src/routes/shop/data.remote.js\nimport * as v from 'valibot';\nimport { form } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const buyHotcakes = form(\n\tv.object({\n\t\tqty: v.pipe(\n\t\t\tv.number(),\n\t\t\tv.minValue(1, 'you must buy at least one hotcake')\n\t\t)\n\t}),\n\tasync (data, invalid) => {\n\t\ttry {\n\t\t\tawait db.buy(data.qty);\n\t\t} catch (e) {\n\t\t\tif (e.code === 'OUT_OF_STOCK') {\n\t\t\t\tinvalid(\n\t\t\t\t\tinvalid.qty(`we don't have enough hotcakes`)\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n);\n```\n\nThe `invalid` function works as both a function and a proxy:\n\n- Call `invalid(issue1, issue2, ...issueN)` to throw a validation error\n- If an issue is a `string`, it applies to the form as a whole (and will show up in `fields.allIssues()`)\n- Use `invalid.fieldName(message)` to create an issue for a specific field. Like `fields` this is type-safe and you can use regular property access syntax to create issues for deeply nested objects (e.g. `invalid.profile.email('Email already exists')` or `invalid.items[0].qty('Insufficient stock')`)\n\n### Validation\n\nIf the submitted data doesn't pass the schema, the callback will not run. Instead, each invalid field's `issues()` method will return an array of `{ message: string }` objects, and the `aria-invalid` attribute (returned from `as(...)`) will be set to `true`:\n\n```svelte\n<form {...createPost}>\n\t<label>\n\t\t<h2>Title</h2>\n\n+++\t\t{#each createPost.fields.title.issues() as issue}\n\t\t\t<p class=\"issue\">{issue.message}</p>\n\t\t{/each}+++\n\n\t\t<input {...createPost.fields.title.as('text')} />\n\t</label>\n\n\t<label>\n\t\t<h2>Write your post</h2>\n\n+++\t\t{#each createPost.fields.content.issues() as issue}\n\t\t\t<p class=\"issue\">{issue.message}</p>\n\t\t{/each}+++\n\n\t\t<textarea {...createPost.fields.content.as('text')}></textarea>\n\t</label>\n\n\t<button>Publish!</button>\n</form>\n```\n\nYou don't need to wait until the form is submitted to validate the data — you can call `validate()` programmatically, for example in an `oninput` callback (which will validate the data on every keystroke) or an `onchange` callback:\n\n```svelte\n<form {...createPost} oninput={() => createPost.validate()}>\n\t<!-- -->\n</form>\n```\n\nBy default, issues will be ignored if they belong to form controls that haven't yet been interacted with. To validate _all_ inputs, call `validate({ includeUntouched: true })`.\n\nFor client-side validation, you can specify a _preflight_ schema which will populate `issues()` and prevent data being sent to the server if the data doesn't validate:\n\n```svelte\n<script>\n\timport * as v from 'valibot';\n\timport { createPost } from '../data.remote';\n\n\tconst schema = v.object({\n\t\ttitle: v.pipe(v.string(), v.nonEmpty()),\n\t\tcontent: v.pipe(v.string(), v.nonEmpty())\n\t});\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...+++createPost.preflight(schema)+++}>\n\t<!-- -->\n</form>\n```\n\n> [!NOTE] The preflight schema can be the same object as your server-side schema, if appropriate, though it won't be able to do server-side checks like 'this value already exists in the database'. Note that you cannot export a schema from a `.remote.ts` or `.remote.js` file, so the schema must either be exported from a shared module, or from a `<script module>` block in the component containing the `<form>`.\n\nTo get a list of _all_ issues, rather than just those belonging to a single field, you can use the `fields.allIssues()` method:\n\n```svelte\n{#each createPost.fields.allIssues() as issue}\n\t<p>{issue.message}</p>\n{/each}\n```\n\n### Getting/setting inputs\n\nEach field has a `value()` method that reflects its current value. As the user interacts with the form, it is automatically updated:\n\n```svelte\n<form {...createPost}>\n\t<!-- -->\n</form>\n\n<div class=\"preview\">\n\t<h2>{createPost.fields.title.value()}</h2>\n\t<div>{@html render(createPost.fields.content.value())}</div>\n</div>\n```\n\nAlternatively, `createPost.fields.value()` would return a `{ title, content }` object.\n\nYou can update a field (or a collection of fields) via the `set(...)` method:\n\n```svelte\n<script>\n\timport { createPost } from '../data.remote';\n\n\t// this...\n\tcreatePost.fields.set({\n\t\ttitle: 'My new blog post',\n\t\tcontent: 'Lorem ipsum dolor sit amet...'\n\t});\n\n\t// ...is equivalent to this:\n\tcreatePost.fields.title.set('My new blog post');\n\tcreatePost.fields.content.set('Lorem ipsum dolor sit amet');\n</script>\n```\n\n### Handling sensitive data\n\nIn the case of a non-progressively-enhanced form submission (i.e. where JavaScript is unavailable, for whatever reason) `value()` is also populated if the submitted data is invalid, so that the user does not need to fill the entire form out from scratch.\n\nYou can prevent sensitive data (such as passwords and credit card numbers) from being sent back to the user by using a name with a leading underscore:\n\n```svelte\n<form {...register}>\n\t<label>\n\t\tUsername\n\t\t<input {...register.fields.username.as('text')} />\n\t</label>\n\n\t<label>\n\t\tPassword\n\t\t<input +++{...register.fields._password.as('password')}+++ />\n\t</label>\n\n\t<button>Sign up!</button>\n</form>\n```\n\nIn this example, if the data does not validate, only the first `<input>` will be populated when the page reloads.\n\n### Single-flight mutations\n\nBy default, all queries used on the page (along with any `load` functions) are automatically refreshed following a successful form submission. This ensures that everything is up-to-date, but it's also inefficient: many queries will be unchanged, and it requires a second trip to the server to get the updated data.\n\nInstead, we can specify which queries should be refreshed in response to a particular form submission. This is called a _single-flight mutation_, and there are two ways to achieve it. The first is to refresh the query on the server, inside the form handler:\n\n```js\nimport * as v from 'valibot';\nimport { error, redirect } from '@sveltejs/kit';\nimport { query, form } from '$app/server';\nconst slug = '';\nconst post = { id: '' };\n/** @type {any} */\nconst externalApi = '';\n// ---cut---\nexport const getPosts = query(async () => { /* ... */ });\n\nexport const getPost = query(v.string(), async (slug) => { /* ... */ });\n\nexport const createPost = form(\n\tv.object({/* ... */}),\n\tasync (data) => {\n\t\t// form logic goes here...\n\n\t\t// Refresh `getPosts()` on the server, and send\n\t\t// the data back with the result of `createPost`\n\t\t+++await getPosts().refresh();+++\n\n\t\t// Redirect to the newly created page\n\t\tredirect(303, `/blog/${slug}`);\n\t}\n);\n\nexport const updatePost = form(\n\tv.object({/* ... */}),\n\tasync (data) => {\n\t\t// form logic goes here...\n\t\tconst result = externalApi.update(post);\n\n\t\t// The API already gives us the updated post,\n\t\t// no need to refresh it, we can set it directly\n\t\t+++await getPost(post.id).set(result);+++\n\t}\n);\n```\n\nThe second is to drive the single-flight mutation from the client, which we'll see in the section on [`enhance`](#form-enhance).\n\n### Returns and redirects\n\nThe example above uses [`redirect(...)`](@sveltejs-kit#redirect), which sends the user to the newly created page. Alternatively, the callback could return data, in which case it would be available as `createPost.result`:\n\n```ts\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n\ndeclare module '$lib/server/auth' {\n\tinterface User {\n\t\tname: string;\n\t}\n\n\t/**\n\t * Gets a user's info from their cookies, using `getRequestEvent`\n\t */\n\texport function getUser(): Promise<User | null>;\n}\n// @filename: index.js\nimport * as v from 'valibot';\nimport { error, redirect } from '@sveltejs/kit';\nimport { query, form } from '$app/server';\nimport * as db from '$lib/server/database';\nimport * as auth from '$lib/server/auth';\n\nexport const getPosts = query(async () => { /* ... */ });\n\nexport const getPost = query(v.string(), async (slug) => { /* ... */ });\n\n// ---cut---\nexport const createPost = form(\n\tv.object({/* ... */}),\n\tasync (data) => {\n\t\t// ...\n\n\t\treturn { success: true };\n\t}\n);\n```\n\n```svelte\n<!--- file: src/routes/blog/new/+page.svelte --->\n<script>\n\timport { createPost } from '../data.remote';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost}>\n\t<!-- -->\n</form>\n\n{#if createPost.result?.success}\n\t<p>Successfully published!</p>\n{/if}\n```\n\nThis value is _ephemeral_ — it will vanish if you resubmit, navigate away, or reload the page.\n\n> [!NOTE] The `result` value need not indicate success — it can also contain validation errors, along with any data that should repopulate the form on page reload.\n\nIf an error occurs during submission, the nearest `+error.svelte` page will be rendered.\n\n### enhance\n\nWe can customize what happens when the form is submitted with the `enhance` method:\n\n```svelte\n<!--- file: src/routes/blog/new/+page.svelte --->\n<script>\n\timport { createPost } from '../data.remote';\n\timport { showToast } from '$lib/toast';\n</script>\n\n<h1>Create a new post</h1>\n\n<form {...createPost.enhance(async ({ form, data, submit }) => {\n\ttry {\n\t\tawait submit();\n\t\tform.reset();\n\n\t\tshowToast('Successfully published!');\n\t} catch (error) {\n\t\tshowToast('Oh no! Something went wrong');\n\t}\n})}>\n\t<!-- -->\n</form>\n```\n\n> When using `enhance`, the `<form>` is not automatically reset — you must call `form.reset()` if you want to clear the inputs.\n\nThe callback receives the `form` element, the `data` it contains, and a `submit` function.\n\nTo enable client-driven [single-flight mutations](#form-Single-flight-mutations), use `submit().updates(...)`. For example, if the `getPosts()` query was used on this page, we could refresh it like so:\n\n```ts\nimport type { RemoteQuery, RemoteQueryOverride } from '@sveltejs/kit';\ninterface Post {}\ndeclare function submit(): Promise<any> & {\n\tupdates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<any>;\n}\n\ndeclare function getPosts(): RemoteQuery<Post[]>;\n// ---cut---\nawait submit().updates(getPosts());\n```\n\nWe can also _override_ the current data while the submission is ongoing:\n\n```ts\nimport type { RemoteQuery, RemoteQueryOverride } from '@sveltejs/kit';\ninterface Post {}\ndeclare function submit(): Promise<any> & {\n\tupdates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<any>;\n}\n\ndeclare function getPosts(): RemoteQuery<Post[]>;\ndeclare const newPost: Post;\n// ---cut---\nawait submit().updates(\n\tgetPosts().withOverride((posts) => [newPost, ...posts])\n);\n```\n\nThe override will be applied immediately, and released when the submission completes (or fails).\n\n### Multiple instances of a form\n\nSome forms may be repeated as part of a list. In this case you can create separate instances of a form function via `for(id)` to achieve isolation.\n\n```svelte\n<!--- file: src/routes/todos/+page.svelte --->\n<script>\n\timport { getTodos, modifyTodo } from '../data.remote';\n</script>\n\n<h1>Todos</h1>\n\n{#each await getTodos() as todo}\n\t{@const modify = modifyTodo.for(todo.id)}\n\t<form {...modify}>\n\t\t<!-- -->\n\t\t<button disabled={!!modify.pending}>save changes</button>\n\t</form>\n{/each}\n```\n\n### buttonProps\n\nBy default, submitting a form will send a request to the URL indicated by the `<form>` element's [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form#attributes_for_form_submission) attribute, which in the case of a remote function is a property on the form object generated by SvelteKit.\n\nIt's possible for a `<button>` inside the `<form>` to send the request to a _different_ URL, using the [`formaction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#formaction) attribute. For example, you might have a single form that allows you to log in or register depending on which button was clicked.\n\nThis attribute exists on the `buttonProps` property of a form object:\n\n```svelte\n<!--- file: src/routes/login/+page.svelte --->\n<script>\n\timport { login, register } from '$lib/auth';\n</script>\n\n<form {...login}>\n\t<label>\n\t\tYour username\n\t\t<input {...login.fields.username.as('text')} />\n\t</label>\n\n\t<label>\n\t\tYour password\n\t\t<input {...login.fields._password.as('password')} />\n\t</label>\n\n\t<button>login</button>\n\t<button {...register.buttonProps}>register</button>\n</form>\n```\n\nLike the form object itself, `buttonProps` has an `enhance` method for customizing submission behaviour.\n\n## command\n\nThe `command` function, like `form`, allows you to write data to the server. Unlike `form`, it's not specific to an element and can be called from anywhere.\n\n> [!NOTE] Prefer `form` where possible, since it gracefully degrades if JavaScript is disabled or fails to load.\n\nAs with `query` and `form`, if the function accepts an argument, it should be [validated](#query-Query-arguments) by passing a [Standard Schema](https://standardschema.dev) as the first argument to `command`.\n\n```ts\n/// file: likes.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { query, command } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getLikes = query(v.string(), async (id) => {\n\tconst [row] = await db.sql`\n\t\tSELECT likes\n\t\tFROM item\n\t\tWHERE id = ${id}\n\t`;\n\n\treturn row.likes;\n});\n\nexport const addLike = command(v.string(), async (id) => {\n\tawait db.sql`\n\t\tUPDATE item\n\t\tSET likes = likes + 1\n\t\tWHERE id = ${id}\n\t`;\n});\n```\n\nNow simply call `addLike`, from (for example) an event handler:\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\timport { getLikes, addLike } from './likes.remote';\n\timport { showToast } from '$lib/toast';\n\n\tlet { item } = $props();\n</script>\n\n<button\n\tonclick={async () => {\n\t\ttry {\n\t\t\tawait addLike(item.id);\n\t\t} catch (error) {\n\t\t\tshowToast('Something went wrong!');\n\t\t}\n\t}}\n>\n\tadd like\n</button>\n\n<p>likes: {await getLikes(item.id)}</p>\n```\n\n> [!NOTE] Commands cannot be called during render.\n\n### Updating queries\n\nTo update `getLikes(item.id)`, or any other query, we need to tell SvelteKit _which_ queries need to be refreshed (unlike `form`, which by default invalidates everything, to approximate the behaviour of a native form submission).\n\nWe either do that inside the command itself...\n\n```js\n/// file: likes.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { query, command } from '$app/server';\nimport * as db from '$lib/server/database';\n// ---cut---\nexport const getLikes = query(v.string(), async (id) => { /* ... */ });\n\nexport const addLike = command(v.string(), async (id) => {\n\tawait db.sql`\n\t\tUPDATE item\n\t\tSET likes = likes + 1\n\t\tWHERE id = ${id}\n\t`;\n\n\t+++getLikes(id).refresh();+++\n\t// Just like within form functions you can also do\n\t// getLikes(id).set(...)\n\t// in case you have the result already\n});\n```\n\n...or when we call it:\n\n```ts\nimport { RemoteCommand, RemoteQueryFunction } from '@sveltejs/kit';\n\ninterface Item { id: string }\n\ndeclare const addLike: RemoteCommand<string, void>;\ndeclare const getLikes: RemoteQueryFunction<string, number>;\ndeclare function showToast(message: string): void;\ndeclare const item: Item;\n// ---cut---\ntry {\n\tawait addLike(item.id).+++updates(getLikes(item.id))+++;\n} catch (error) {\n\tshowToast('Something went wrong!');\n}\n```\n\nAs before, we can use `withOverride` for optimistic updates:\n\n```ts\nimport { RemoteCommand, RemoteQueryFunction } from '@sveltejs/kit';\n\ninterface Item { id: string }\n\ndeclare const addLike: RemoteCommand<string, void>;\ndeclare const getLikes: RemoteQueryFunction<string, number>;\ndeclare function showToast(message: string): void;\ndeclare const item: Item;\n// ---cut---\ntry {\n\tawait addLike(item.id).updates(\n\t\tgetLikes(item.id).+++withOverride((n) => n + 1)+++\n\t);\n} catch (error) {\n\tshowToast('Something went wrong!');\n}\n```\n\n## prerender\n\nThe `prerender` function is similar to `query`, except that it will be invoked at build time to prerender the result. Use this for data that changes at most once per redeployment.\n\n```js\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport { prerender } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = prerender(async () => {\n\tconst posts = await db.sql`\n\t\tSELECT title, slug\n\t\tFROM post\n\t\tORDER BY published_at\n\t\tDESC\n\t`;\n\n\treturn posts;\n});\n```\n\nYou can use `prerender` functions on pages that are otherwise dynamic, allowing for partial prerendering of your data. This results in very fast navigation, since prerendered data can live on a CDN along with your other static assets.\n\nIn the browser, prerendered data is saved using the [`Cache`](https://developer.mozilla.org/en-US/docs/Web/API/Cache) API. This cache survives page reloads, and will be cleared when the user first visits a new deployment of your app.\n\n> [!NOTE] When the entire page has `export const prerender = true`, you cannot use queries, as they are dynamic.\n\n### Prerender arguments\n\nAs with queries, prerender functions can accept an argument, which should be [validated](#query-Query-arguments) with a [Standard Schema](https://standardschema.dev/):\n\n```js\n/// file: src/routes/blog/data.remote.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;\n}\n// @filename: index.js\n// ---cut---\nimport * as v from 'valibot';\nimport { error } from '@sveltejs/kit';\nimport { prerender } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = prerender(async () => { /* ... */ });\n\nexport const getPost = prerender(v.string(), async (slug) => {\n\tconst [post] = await db.sql`\n\t\tSELECT * FROM post\n\t\tWHERE slug = ${slug}\n\t`;\n\n\tif (!post) error(404, 'Not found');\n\treturn post;\n});\n```\n\nAny calls to `getPost(...)` found by SvelteKit's crawler while [prerendering pages](page-options#prerender) will be saved automatically, but you can also specify which values it should be called with using the `inputs` option:\n\n```js\n/// file: src/routes/blog/data.remote.js\nimport * as v from 'valibot';\nimport { prerender } from '$app/server';\n// ---cut---\n\nexport const getPost = prerender(\n\tv.string(),\n\tasync (slug) => { /* ... */ },\n\t{\n\t\tinputs: () => [\n\t\t\t'first-post',\n\t\t\t'second-post',\n\t\t\t'third-post'\n\t\t]\n\t}\n);\n```\n\n> [!NOTE] Svelte does not yet support asynchronous server-side rendering, so it's likely that you're only calling remote functions from the browser, rather than during prerendering. Because of this, you will need to use `inputs`, for now. We're actively working on this roadblock.\n\nBy default, prerender functions are excluded from your server bundle, which means that you cannot call them with any arguments that were _not_ prerendered. You can set `dynamic: true` to change this behaviour:\n\n```js\n/// file: src/routes/blog/data.remote.js\nimport * as v from 'valibot';\nimport { prerender } from '$app/server';\n// ---cut---\n\nexport const getPost = prerender(\n\tv.string(),\n\tasync (slug) => { /* ... */ },\n\t{\n\t\t+++dynamic: true+++,\n\t\tinputs: () => [\n\t\t\t'first-post',\n\t\t\t'second-post',\n\t\t\t'third-post'\n\t\t]\n\t}\n);\n```\n\n## Handling validation errors\n\nAs long as _you're_ not passing invalid data to your remote functions, there are only two reasons why the argument passed to a `command`, `query` or `prerender` function would fail validation:\n\n- the function signature changed between deployments, and some users are currently on an older version of your app\n- someone is trying to attack your site by poking your exposed endpoints with bad data\n\nIn the second case, we don't want to give the attacker any help, so SvelteKit will generate a generic [400 Bad Request](https://http.dog/400) response. You can control the message by implementing the [`handleValidationError`](hooks#Server-hooks-handleValidationError) server hook, which, like [`handleError`](hooks#Shared-hooks-handleError), must return an [`App.Error`](errors#Type-safety) (which defaults to `{ message: string }`):\n\n```js\n/// file: src/hooks.server.ts\n/** @type {import('@sveltejs/kit').HandleValidationError} */\nexport function handleValidationError({ event, issues }) {\n\treturn {\n\t\tmessage: 'Nice try, hacker!'\n\t};\n}\n```\n\nIf you know what you're doing and want to opt out of validation, you can pass the string `'unchecked'` in place of a schema:\n\n```ts\n/// file: data.remote.ts\nimport { query } from '$app/server';\n\nexport const getStuff = query('unchecked', async ({ id }: { id: string }) => {\n\t// the shape might not actually be what TypeScript thinks\n\t// since bad actors might call this function with other arguments\n});\n```\n\n## Using `getRequestEvent`\n\nInside `query`, `form` and `command` you can use [`getRequestEvent`]($app-server#getRequestEvent) to get the current [`RequestEvent`](@sveltejs-kit#RequestEvent) object. This makes it easy to build abstractions for interacting with cookies, for example:\n\n```ts\n/// file: user.remote.ts\nimport { getRequestEvent, query } from '$app/server';\nimport { findUser } from '$lib/server/database';\n\nexport const getProfile = query(async () => {\n\tconst user = await getUser();\n\n\treturn {\n\t\tname: user.name,\n\t\tavatar: user.avatar\n\t};\n});\n\n// this query could be called from multiple places, but\n// the function will only run once per request\nconst getUser = query(() => {\n\tconst { cookies } = getRequestEvent();\n\n\treturn await findUser(cookies.get('session_id'));\n});\n```\n\nNote that some properties of `RequestEvent` are different inside remote functions:\n\n- you cannot set headers (other than writing cookies, and then only inside `form` and `command` functions)\n- `route`, `params` and `url` relate to the page the remote function was called from, _not_ the URL of the endpoint SvelteKit creates for the remote function. Queries are not re-run when the user navigates (unless the argument to the query changes as a result of navigation), and so you should be mindful of how you use these values. In particular, never use them to determine whether or not a user is authorized to access certain data.\n\n## Redirects\n\nInside `query`, `form` and `prerender` functions it is possible to use the [`redirect(...)`](@sveltejs-kit#redirect) function. It is *not* possible inside `command` functions, as you should avoid redirecting here. (If you absolutely have to, you can return a `{ redirect: location }` object and deal with it in the client.)",
+		"kit/building-your-app": "Building a SvelteKit app happens in two stages, which both happen when you run `vite build` (usually via `npm run build`).\n\nFirstly, Vite creates an optimized production build of your server code, your browser code, and your service worker (if you have one). [Prerendering](page-options#prerender) is executed at this stage, if appropriate.\n\nSecondly, an _adapter_ takes this production build and tunes it for your target environment — more on this on the following pages.\n\n## During the build\n\nSvelteKit will load your `+page/layout(.server).js` files (and all files they import) for analysis during the build. Any code that should _not_ be executed at this stage must check that `building` from [`$app/environment`]($app-environment) is `false`:\n\n```js\n+++import { building } from '$app/environment';+++\nimport { setupMyDatabase } from '$lib/server/database';\n\n+++if (!building) {+++\n\tsetupMyDatabase();\n+++}+++\n\nexport function load() {\n\t// ...\n}\n```\n\n## Preview your app\n\nAfter building, you can view your production build locally with `vite preview` (via `npm run preview`). Note that this will run the app in Node, and so is not a perfect reproduction of your deployed app — adapter-specific adjustments like the [`platform` object](adapters#Platform-specific-context) do not apply to previews.",
+		"kit/adapters": "Before you can deploy your SvelteKit app, you need to _adapt_ it for your deployment target. Adapters are small plugins that take the built app as input and generate output for deployment.\n\nOfficial adapters exist for a variety of platforms — these are documented on the following pages:\n\n- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for Cloudflare Workers and Cloudflare Pages\n- [`@sveltejs/adapter-netlify`](adapter-netlify) for Netlify\n- [`@sveltejs/adapter-node`](adapter-node) for Node servers\n- [`@sveltejs/adapter-static`](adapter-static) for static site generation (SSG)\n- [`@sveltejs/adapter-vercel`](adapter-vercel) for Vercel\n\nAdditional [community-provided adapters](/packages#sveltekit-adapters) exist for other platforms.\n\n## Using adapters\n\nYour adapter is specified in `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\n// @filename: ambient.d.ts\ndeclare module 'svelte-adapter-foo' {\n\tconst adapter: (opts: any) => import('@sveltejs/kit').Adapter;\n\texport default adapter;\n}\n\n// @filename: index.js\n// ---cut---\nimport adapter from 'svelte-adapter-foo';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// adapter options go here\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Platform-specific context\n\nSome adapters may have access to additional information about the request. For example, Cloudflare Workers can access an `env` object containing KV namespaces etc. This can be passed to the `RequestEvent` used in [hooks](hooks) and [server routes](routing#server) as the `platform` property — consult each adapter's documentation to learn more.",
+		"kit/adapter-auto": "When you create a new SvelteKit project with `npx sv create`, it installs [`adapter-auto`](https://github.com/sveltejs/kit/tree/main/packages/adapter-auto) by default. This adapter automatically installs and uses the correct adapter for supported environments when you deploy:\n\n- [`@sveltejs/adapter-cloudflare`](adapter-cloudflare) for [Cloudflare Pages](https://developers.cloudflare.com/pages/)\n- [`@sveltejs/adapter-netlify`](adapter-netlify) for [Netlify](https://netlify.com/)\n- [`@sveltejs/adapter-vercel`](adapter-vercel) for [Vercel](https://vercel.com/)\n- [`svelte-adapter-azure-swa`](https://github.com/geoffrich/svelte-adapter-azure-swa) for [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/)\n- [`svelte-kit-sst`](https://github.com/sst/v2/tree/master/packages/svelte-kit-sst) for [AWS via SST](https://sst.dev/docs/start/aws/svelte)\n- [`@sveltejs/adapter-node`](adapter-node) for [Google Cloud Run](https://cloud.google.com/run)\n\nIt's recommended to install the appropriate adapter to your `devDependencies` once you've settled on a target environment, since this will add the adapter to your lockfile and slightly improve install times on CI.\n\n## Environment-specific configuration\n\nTo add configuration options, such as `{ edge: true }` in [`adapter-vercel`](adapter-vercel) and [`adapter-netlify`](adapter-netlify), you must install the underlying adapter — `adapter-auto` does not take any options.\n\n## Adding community adapters\n\nYou can add zero-config support for additional adapters by editing [adapters.js](https://github.com/sveltejs/kit/blob/main/packages/adapter-auto/adapters.js) and opening a pull request.",
+		"kit/adapter-node": "To generate a standalone Node server, use [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node).\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-node`, then add the adapter to your `svelte.config.js`:\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-node';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n## Deploying\n\nFirst, build your app with `npm run build`. This will create the production server in the output directory specified in the adapter options, defaulting to `build`.\n\nYou will need the output directory, the project's `package.json`, and the production dependencies in `node_modules` to run the application. Production dependencies can be generated by copying the `package.json` and `package-lock.json` and then running `npm ci --omit dev` (you can skip this step if your app doesn't have any dependencies). You can then start your app with this command:\n\n```sh\nnode build\n```\n\nDevelopment dependencies will be bundled into your app using [Rollup](https://rollupjs.org). To control whether a given package is bundled or externalised, place it in `devDependencies` or `dependencies` respectively in your `package.json`.\n\n### Compressing responses\n\nYou will typically want to compress responses coming from the server. If you're already deploying your server behind a reverse proxy for SSL or load balancing, it typically results in better performance to also handle compression at that layer since Node.js is single-threaded.\n\nHowever, if you're building a [custom server](#Custom-server) and do want to add a compression middleware there, note that we would recommend using [`@polka/compression`](https://www.npmjs.com/package/@polka/compression) since SvelteKit streams responses and the more popular `compression` package does not support streaming and may cause errors when used.\n\n## Environment variables\n\nIn `dev` and `preview`, SvelteKit will read environment variables from your `.env` file (or `.env.local`, or `.env.[mode]`, [as determined by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files).)\n\nIn production, `.env` files are _not_ automatically loaded. To do so, install `dotenv` in your project...\n\n```sh\nnpm install dotenv\n```\n\n...and invoke it before running the built app:\n\n```sh\nnode +++-r dotenv/config+++ build\n```\n\nIf you use Node.js v20.6+, you can use the [`--env-file`](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs) flag instead:\n\n```sh\nnode +++--env-file=.env+++ build\n```\n\n### `PORT`, `HOST` and `SOCKET_PATH`\n\nBy default, the server will accept connections on `0.0.0.0` using port 3000. These can be customised with the `PORT` and `HOST` environment variables:\n\n```sh\nHOST=127.0.0.1 PORT=4000 node build\n```\n\nAlternatively, the server can be configured to accept connections on a specified socket path. When this is done using the `SOCKET_PATH` environment variable, the `HOST` and `PORT` environment variables will be disregarded.\n\n```sh\nSOCKET_PATH=/tmp/socket node build\n```\n\n### `ORIGIN`, `PROTOCOL_HEADER`, `HOST_HEADER`, and `PORT_HEADER`\n\nHTTP doesn't give SvelteKit a reliable way to know the URL that is currently being requested. The simplest way to tell SvelteKit where the app is being served is to set the `ORIGIN` environment variable:\n\n```sh\nORIGIN=https://my.site node build\n\n# or e.g. for local previewing and testing\nORIGIN=http://localhost:3000 node build\n```\n\nWith this, a request for the `/stuff` pathname will correctly resolve to `https://my.site/stuff`. Alternatively, you can specify headers that tell SvelteKit about the request protocol and host, from which it can construct the origin URL:\n\n```sh\nPROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build\n```\n\n> [!NOTE] [`x-forwarded-proto`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Proto) and [`x-forwarded-host`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Host) are de facto standard headers that forward the original protocol and host if you're using a reverse proxy (think load balancers and CDNs). You should only set these variables if your server is behind a trusted reverse proxy; otherwise, it'd be possible for clients to spoof these headers.\n>\n> If you're hosting your proxy on a non-standard port and your reverse proxy supports `x-forwarded-port`, you can also set `PORT_HEADER=x-forwarded-port`.\n\nIf `adapter-node` can't correctly determine the URL of your deployment, you may experience this error when using [form actions](form-actions):\n\n> [!NOTE] Cross-site POST form submissions are forbidden\n\n### `ADDRESS_HEADER` and `XFF_DEPTH`\n\nThe [`RequestEvent`](@sveltejs-kit#RequestEvent) object passed to hooks and endpoints includes an `event.getClientAddress()` function that returns the client's IP address. By default this is the connecting `remoteAddress`. If your server is behind one or more proxies (such as a load balancer), this value will contain the innermost proxy's IP address rather than the client's, so we need to specify an `ADDRESS_HEADER` to read the address from:\n\n```sh\nADDRESS_HEADER=True-Client-IP node build\n```\n\n> [!NOTE] Headers can easily be spoofed. As with `PROTOCOL_HEADER` and `HOST_HEADER`, you should [know what you're doing](https://adam-p.ca/blog/2022/03/x-forwarded-for/) before setting these.\n\nIf the `ADDRESS_HEADER` is `X-Forwarded-For`, the header value will contain a comma-separated list of IP addresses. The `XFF_DEPTH` environment variable should specify how many trusted proxies sit in front of your server. E.g. if there are three trusted proxies, proxy 3 will forward the addresses of the original connection and the first two proxies:\n\n```\n<client address>, <proxy 1 address>, <proxy 2 address>\n```\n\nSome guides will tell you to read the left-most address, but this leaves you [vulnerable to spoofing](https://adam-p.ca/blog/2022/03/x-forwarded-for/):\n\n```\n<spoofed address>, <client address>, <proxy 1 address>, <proxy 2 address>\n```\n\nWe instead read from the _right_, accounting for the number of trusted proxies. In this case, we would use `XFF_DEPTH=3`.\n\n> [!NOTE] If you need to read the left-most address instead (and don't care about spoofing) — for example, to offer a geolocation service, where it's more important for the IP address to be _real_ than _trusted_, you can do so by inspecting the `x-forwarded-for` header within your app.\n\n### `BODY_SIZE_LIMIT`\n\nThe maximum request body size to accept in bytes including while streaming. The body size can also be specified with a unit suffix for kilobytes (`K`), megabytes (`M`), or gigabytes (`G`). For example, `512K` or `1M`. Defaults to 512kb. You can disable this option with a value of `Infinity` (0 in older versions of the adapter) and implement a custom check in [`handle`](hooks#Server-hooks-handle) if you need something more advanced.\n\n### `SHUTDOWN_TIMEOUT`\n\nThe number of seconds to wait before forcefully closing any remaining connections after receiving a `SIGTERM` or `SIGINT` signal. Defaults to `30`. Internally the adapter calls [`closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections). See [Graceful shutdown](#Graceful-shutdown) for more details.\n\n### `IDLE_TIMEOUT`\n\nWhen using systemd socket activation, `IDLE_TIMEOUT` specifies the number of seconds after which the app is automatically put to sleep when receiving no requests. If not set, the app runs continuously. See [Socket activation](#Socket-activation) for more details.\n\n## Options\n\nThe adapter can be configured with various options:\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-node';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// default options are shown\n\t\t\tout: 'build',\n\t\t\tprecompress: true,\n\t\t\tenvPrefix: ''\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n### out\n\nThe directory to build the server to. It defaults to `build` — i.e. `node build` would start the server locally after it has been created.\n\n### precompress\n\nEnables precompressing using gzip and brotli for assets and prerendered pages. It defaults to `true`.\n\n### envPrefix\n\nIf you need to change the name of the environment variables used to configure the deployment (for example, to deconflict with environment variables you don't control), you can specify a prefix:\n\n```js\nenvPrefix: 'MY_CUSTOM_';\n```\n\n```sh\nMY_CUSTOM_HOST=127.0.0.1 \\\nMY_CUSTOM_PORT=4000 \\\nMY_CUSTOM_ORIGIN=https://my.site \\\nnode build\n```\n\n## Graceful shutdown\n\nBy default `adapter-node` gracefully shuts down the HTTP server when a `SIGTERM` or `SIGINT` signal is received. It will:\n\n1. reject new requests ([`server.close`](https://nodejs.org/api/http.html#serverclosecallback))\n2. wait for requests that have already been made but not received a response yet to finish and close connections once they become idle ([`server.closeIdleConnections`](https://nodejs.org/api/http.html#servercloseidleconnections))\n3. and finally, close any remaining connections that are still active after [`SHUTDOWN_TIMEOUT`](#Environment-variables-SHUTDOWN_TIMEOUT) seconds. ([`server.closeAllConnections`](https://nodejs.org/api/http.html#servercloseallconnections))\n\n> [!NOTE] If you want to customize this behaviour you can use a [custom server](#Custom-server).\n\nYou can listen to the `sveltekit:shutdown` event which is emitted after the HTTP server has closed all connections. Unlike Node's `exit` event, the `sveltekit:shutdown` event supports asynchronous operations and is always emitted when all connections are closed even if the server has dangling work such as open database connections.\n\n```js\n// @errors: 2304\nprocess.on('sveltekit:shutdown', async (reason) => {\n  await jobs.stop();\n  await db.close();\n});\n```\n\nThe parameter `reason` has one of the following values:\n\n- `SIGINT` - shutdown was triggered by a `SIGINT` signal\n- `SIGTERM` - shutdown was triggered by a `SIGTERM` signal\n- `IDLE` - shutdown was triggered by [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT)\n\n## Socket activation\n\nMost Linux operating systems today use a modern process manager called systemd to start the server and run and manage services. You can configure your server to allocate a socket and start and scale your app on demand. This is called [socket activation](https://0pointer.de/blog/projects/socket-activated-containers.html). In this case, the OS will pass two environment variables to your app — `LISTEN_PID` and `LISTEN_FDS`. The adapter will then listen on file descriptor 3 which refers to a systemd socket unit that you will have to create.\n\n> [!NOTE] You can still use [`envPrefix`](#Options-envPrefix) with systemd socket activation. `LISTEN_PID` and `LISTEN_FDS` are always read without a prefix.\n\nTo take advantage of socket activation follow these steps.\n\n1. Run your app as a [systemd service](https://www.freedesktop.org/software/systemd/man/latest/systemd.service.html). It can either run directly on the host system or inside a container (using Docker or a systemd portable service for example). If you additionally pass an [`IDLE_TIMEOUT`](#Environment-variables-IDLE_TIMEOUT) environment variable to your app it will gracefully shutdown if there are no requests for `IDLE_TIMEOUT` seconds. systemd will automatically start your app again when new requests are coming in.\n\n```ini\n/// file: /etc/systemd/system/myapp.service\n[Service]\nEnvironment=NODE_ENV=production IDLE_TIMEOUT=60\nExecStart=/usr/bin/node /usr/bin/myapp/build\n```\n\n2. Create an accompanying [socket unit](https://www.freedesktop.org/software/systemd/man/latest/systemd.socket.html). The adapter only accepts a single socket.\n\n```ini\n/// file: /etc/systemd/system/myapp.socket\n[Socket]\nListenStream=3000\n\n[Install]\nWantedBy=sockets.target\n```\n\n3. Make sure systemd has recognised both units by running `sudo systemctl daemon-reload`. Then enable the socket on boot and start it immediately using `sudo systemctl enable --now myapp.socket`. The app will then automatically start once the first request is made to `localhost:3000`.\n\n## Custom server\n\nThe adapter creates two files in your build directory — `index.js` and `handler.js`. Running `index.js` — e.g. `node build`, if you use the default build directory — will start a server on the configured port.\n\nAlternatively, you can import the `handler.js` file, which exports a handler suitable for use with [Express](https://github.com/expressjs/express), [Connect](https://github.com/senchalabs/connect) or [Polka](https://github.com/lukeed/polka) (or even just the built-in [`http.createServer`](https://nodejs.org/dist/latest/docs/api/http.html#httpcreateserveroptions-requestlistener)) and set up your own server:\n\n```js\n// @errors: 2307 7006\n/// file: my-server.js\nimport { handler } from './build/handler.js';\nimport express from 'express';\n\nconst app = express();\n\n// add a route that lives separately from the SvelteKit app\napp.get('/healthcheck', (req, res) => {\n\tres.end('ok');\n});\n\n// let SvelteKit handle everything else, including serving prerendered pages and static assets\napp.use(handler);\n\napp.listen(3000, () => {\n\tconsole.log('listening on port 3000');\n});\n```",
+		"kit/adapter-static": "To use SvelteKit as a static site generator (SSG), use [`adapter-static`](https://github.com/sveltejs/kit/tree/main/packages/adapter-static).\n\nThis will prerender your entire site as a collection of static files. If you'd like to prerender only some pages and dynamically server-render others, you will need to use a different adapter together with [the `prerender` option](page-options#prerender).\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-static`, then add the adapter to your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// default options are shown. On some platforms\n\t\t\t// these options are set automatically — see below\n\t\t\tpages: 'build',\n\t\t\tassets: 'build',\n\t\t\tfallback: undefined,\n\t\t\tprecompress: false,\n\t\t\tstrict: true\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n...and add the [`prerender`](page-options#prerender) option to your root layout:\n\n```js\n/// file: src/routes/+layout.js\n// If you're using a fallback (i.e. SPA mode) you don't need to prerender all\n// pages by setting this here, but should prerender as many as possible to\n// avoid large performance and SEO impacts\nexport const prerender = true;\n```\n\n> [!NOTE] You must ensure SvelteKit's [`trailingSlash`](page-options#trailingSlash) option is set appropriately for your environment. If your host does not render `/a.html` upon receiving a request for `/a` then you will need to set `trailingSlash: 'always'` in your root layout to create `/a/index.html` instead.\n\n## Zero-config support\n\nSome platforms have zero-config support (more to come in future):\n\n- [Vercel](https://vercel.com)\n\nOn these platforms, you should omit the adapter options so that `adapter-static` can provide the optimal configuration:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter(---{...}---)\n\t}\n};\n\nexport default config;\n```\n\n## Options\n\n### pages\n\nThe directory to write prerendered pages to. It defaults to `build`.\n\n### assets\n\nThe directory to write static assets (the contents of `static`, plus client-side JS and CSS generated by SvelteKit) to. Ordinarily this should be the same as `pages`, and it will default to whatever the value of `pages` is, but in rare circumstances you might need to output pages and assets to separate locations.\n\n### fallback\n\nTo create a [single page app (SPA)](single-page-apps) you must specify the name of the fallback page to be generated by SvelteKit, which is used as the entry point for URLs that have not been prerendered. This is commonly `200.html`, but can vary depending on your deployment platform. You should avoid `index.html` where possible to avoid conflicting with a prerendered homepage. \n\n> This option has large negative performance and SEO impacts. It is only recommended in certain circumstances such as wrapping the site in a mobile app. See the [single page apps](single-page-apps) documentation for more details and alternatives.\n\n### precompress\n\nIf `true`, precompresses files with brotli and gzip. This will generate `.br` and `.gz` files.\n\n### strict\n\nBy default, `adapter-static` checks that either all pages and endpoints (if any) of your app were prerendered, or you have the `fallback` option set. This check exists to prevent you from accidentally publishing an app where some parts of it are not accessible, because they are not contained in the final output. If you know this is ok (for example when a certain page only exists conditionally), you can set `strict` to `false` to turn off this check.\n\n## GitHub Pages\n\nWhen building for [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages), if your repo name is not equivalent to `your-username.github.io`, make sure to update [`config.kit.paths.base`](configuration#paths) to match your repo name. This is because the site will be served from `https://your-username.github.io/your-repo-name` rather than from the root.\n\nYou'll also want to generate a fallback `404.html` page to replace the default 404 page shown by GitHub Pages.\n\nA config for GitHub Pages might look like the following:\n\n```js\n// @errors: 2322\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\tfallback: '404.html'\n\t\t}),\n\t\tpaths: {\n\t\t\tbase: process.argv.includes('dev') ? '' : process.env.BASE_PATH\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\nYou can use GitHub actions to automatically deploy your site to GitHub Pages when you make a change. Here's an example workflow:\n\n```yaml\n### file: .github/workflows/deploy.yml\nname: Deploy to GitHub Pages\n\non:\n  push:\n    branches: 'main'\n\njobs:\n  build_site:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`\n      # - name: Install pnpm\n      #   uses: pnpm/action-setup@v3\n      #   with:\n      #     version: 8\n\n      - name: Install Node.js\n        uses: actions/setup-node@v4\n        with:\n          node-version: 20\n          cache: npm\n\n      - name: Install dependencies\n        run: npm i\n\n      - name: build\n        env:\n          BASE_PATH: '/${{ github.event.repository.name }}'\n        run: |\n          npm run build\n\n      - name: Upload Artifacts\n        uses: actions/upload-pages-artifact@v3\n        with:\n          # this should match the `pages` option in your adapter-static options\n          path: 'build/'\n\n  deploy:\n    needs: build_site\n    runs-on: ubuntu-latest\n\n    permissions:\n      pages: write\n      id-token: write\n\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n\n    steps:\n      - name: Deploy\n        id: deployment\n        uses: actions/deploy-pages@v4\n```\n\nIf you're not using GitHub actions to deploy your site (for example, you're pushing the built site to its own repo), add an empty `.nojekyll` file in your `static` directory to prevent Jekyll from interfering.",
+		"kit/single-page-apps": "You can turn a SvelteKit app into a fully client-rendered single-page app (SPA) by specifying a _fallback page_. This page will be served for any URLs that can't be served by other means such as returning a prerendered page.\n\n> [!NOTE] SPA mode has a large negative performance impact by forcing multiple network round trips (for the blank HTML document, then for the JavaScript, and then for any data needed for the page) before content can be shown. Unless you are serving the app from a local network (e.g.a mobile app that wraps a locally-served SPA) this will delay startup, especially when considering the latency of mobile devices. It also harms SEO by often causing sites to be downranked for performance (SPAs are much more likely to fail [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals)), excluding search engines that don't render JS, and causing your site to receive less frequent updates from those that do. And finally, it makes your app inaccessible to users if JavaScript fails or is disabled (which happens [more often than you probably think](https://kryogenix.org/code/browser/everyonehasjs.html)).\n>\n> You can avoid these drawbacks by [prerendering](#Prerendering-individual-pages) as many pages as possible when using SPA mode (especially your homepage). If you can prerender all pages, you can simply use [static site generation](adapter-static) rather than a SPA. Otherwise, you should strongly consider using an adapter which supports server side rendering. SvelteKit has officially supported adapters for various providers with generous free tiers.\n\n## Usage\n\nFirst, disable SSR for the pages you don't want to prerender. These pages will be served via the fallback page. E.g. to serve all pages via the fallback by default, you can update the root layout as shown below. You should [opt back into prerendering individual pages and directories](#Prerendering-individual-pages) where possible.\n```js\n/// file: src/routes/+layout.js\nexport const ssr = false;\n```\n\nIf you don't have any server-side logic (i.e. `+page.server.js`, `+layout.server.js` or `+server.js` files) you can use [`adapter-static`](adapter-static) to create your SPA. Install `adapter-static` with `npm i -D @sveltejs/adapter-static` and add it to your `svelte.config.js` with the `fallback` option:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-static';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\tfallback: '200.html' // may differ from host to host\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\nThe `fallback` page is an HTML page created by SvelteKit from your page template (e.g. `app.html`) that loads your app and navigates to the correct route. For example [Surge](https://surge.sh/help/adding-a-200-page-for-client-side-routing), a static web host, lets you add a `200.html` file that will handle any requests that don't correspond to static assets or prerendered pages.\n\nOn some hosts it may be something else entirely — consult your platform's documentation. We recommend avoiding `index.html` if possible as it may conflict with prerendering.\n\n> [!NOTE] Note that the fallback page will always contain absolute asset paths (i.e. beginning with `/` rather than `.`) regardless of the value of [`paths.relative`](configuration#paths), since it is used to respond to requests for arbitrary paths.\n\n## Prerendering individual pages\n\nIf you want certain pages to be prerendered, you can re-enable `ssr` alongside `prerender` for just those parts of your app:\n\n```js\n/// file: src/routes/my-prerendered-page/+page.js\nexport const prerender = true;\nexport const ssr = true;\n```\n\nYou won't need a Node server or server capable of running JavaScript to deploy this page. It will only server render your page while building your project for the purposes of outputting an `.html` page that can be served from any static web host.\n\n## Apache\n\nTo run an SPA on [Apache](https://httpd.apache.org/), you should add a `static/.htaccess` file to route requests to the fallback page:\n\n```\n<IfModule mod_rewrite.c>\n\tRewriteEngine On\n\tRewriteBase /\n\tRewriteRule ^200\\.html$ - [L]\n\tRewriteCond %{REQUEST_FILENAME} !-f\n\tRewriteCond %{REQUEST_FILENAME} !-d\n\tRewriteRule . /200.html [L]\n</IfModule>\n```",
+		"kit/adapter-cloudflare": "To deploy to [Cloudflare Workers](https://workers.cloudflare.com/) or [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).\n\nThis adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that `event.platform` is emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.\n\n## Comparisons\n\n- `adapter-cloudflare` – supports all SvelteKit features; builds for Cloudflare Workers Static Assets and Cloudflare Pages\n- `adapter-cloudflare-workers` – deprecated. Supports all SvelteKit features; builds for Cloudflare Workers Sites\n- `adapter-static` – only produces client-side static assets; compatible with Cloudflare Workers Static Assets and Cloudflare Pages\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-cloudflare`, then add the adapter to your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-cloudflare';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// See below for an explanation of these options\n\t\t\tconfig: undefined,\n\t\t\tplatformProxy: {\n\t\t\t\tconfigPath: undefined,\n\t\t\t\tenvironment: undefined,\n\t\t\t\tpersist: undefined\n\t\t\t},\n\t\t\tfallback: 'plaintext',\n\t\t\troutes: {\n\t\t\t\tinclude: ['/*'],\n\t\t\t\texclude: ['<all>']\n\t\t\t}\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Options\n\n### config\n\nPath to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml` you can specify it using this option.\n\n### platformProxy\n\nPreferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.\n\n### fallback\n\nWhether to render a plaintext 404.html page or a rendered SPA fallback page for non-matching asset requests.\n\nFor Cloudflare Workers, the default behaviour is to return a null-body 404-status response for non-matching assets requests. However, if the [`assets.not_found_handling`](https://developers.cloudflare.com/workers/static-assets/routing/#2-not_found_handling) Wrangler configuration setting is set to `\"404-page\"`, this page will be served if a request fails to match an asset. If `assets.not_found_handling` is set to `\"single-page-application\"`, the adapter will render a SPA fallback index.html page regardless of the `fallback` option specified.\n\nFor Cloudflare Pages, this page will only be served when a request that matches an entry in `routes.exclude` fails to match an asset.\n\nMost of the time `plaintext` is sufficient, but if you are using `routes.exclude` to manually\nexclude a set of prerendered pages without exceeding the 100 route limit, you may wish to\nuse `spa` instead to avoid showing an unstyled 404 page to users.\n\nSee Cloudflare Pages' [Not Found behaviour](https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior) for more info.\n\n### routes\n\nOnly for Cloudflare Pages. Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.\n\n- `include` defines routes that will invoke a function, and defaults to `['/*']`\n- `exclude` defines routes that will _not_ invoke a function — this is a faster and cheaper way to serve your app's static assets. This array can include the following special values:\n\t- `<build>` contains your app's build artifacts (the files generated by Vite)\n\t- `<files>` contains the contents of your `static` directory\n\t- `<prerendered>` contains a list of prerendered pages\n\t- `<all>` (the default) contains all of the above\n\nYou can have up to 100 `include` and `exclude` rules combined. Generally you can omit the `routes` options, but if (for example) your `<prerendered>` paths exceed that limit, you may find it helpful to manually create an `exclude` list that includes `'/articles/*'` instead of the auto-generated `['/articles/foo', '/articles/bar', '/articles/baz', ...]`.\n\n## Cloudflare Workers\n\n### Basic configuration\n\nWhen building for Cloudflare Workers, this adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/configuration/sites/configuration/) in the project root. It should look something like this:\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"name\": \"<any-name-you-want>\",\n\t\"main\": \".svelte-kit/cloudflare/_worker.js\",\n\t\"compatibility_date\": \"2025-01-01\",\n\t\"assets\": {\n\t\t\"binding\": \"ASSETS\",\n\t\t\"directory\": \".svelte-kit/cloudflare\",\n\t}\n}\n```\n\n### Deployment\n\nPlease follow the [framework guide](https://developers.cloudflare.com/workers/frameworks/framework-guides/svelte/) for Cloudflare Workers to begin.\n\n## Cloudflare Pages\n\n### Deployment\n\nPlease follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started/) for Cloudflare Pages to begin.\n\nIf you're using the [Git integration](https://developers.cloudflare.com/pages/get-started/git-integration/), your build settings should look like this:\n\n- Framework preset – SvelteKit\n- Build command – `npm run build` or `vite build`\n- Build output directory – `.svelte-kit/cloudflare`\n\n### Further reading\n\nYou may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site on Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site/).\n\n### Notes\n\nFunctions contained in the [`/functions` directory](https://developers.cloudflare.com/pages/functions/routing/) at the project's root will _not_ be included in the deployment. Instead, functions should be implemented as [server endpoints](routing#server) in your SvelteKit app, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/functions/advanced-mode/).\n\n## Runtime APIs\n\nThe [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`ctx`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:\n\n```js\n// @filename: ambient.d.ts\nimport { DurableObjectNamespace } from '@cloudflare/workers-types';\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n\t\t\tenv: {\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};\n\t\t}\n\t}\n}\n// @filename: +server.js\n// ---cut---\n// @errors: 2355 2322\n/// file: +server.js\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request, platform }) {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n}\n```\n\n> [!NOTE] SvelteKit's built-in [`$env` module]($env-static-private) should be preferred for environment variables.\n\nTo make these types available to your app, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and reference them in your `src/app.d.ts`:\n\n```ts\n/// file: src/app.d.ts\n+++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n+++\t\t\tenv: {\n\t\t\t\tYOUR_KV_NAMESPACE: KVNamespace;\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};+++\n\t\t}\n\t}\n}\n\nexport {};\n```\n\n### Testing locally\n\nCloudflare specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.\n\nFor testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev .svelte-kit/cloudflare` if you're testing for Cloudflare Workers or `wrangler pages dev .svelte-kit/cloudflare` for Cloudflare Pages.\n\n## Headers and redirects\n\nThe [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) and [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/) files, specific to Cloudflare, can be used for static asset responses (like images) by putting them into the project root folder.\n\nHowever, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](routing#server) or with the [`handle`](hooks#Server-hooks-handle) hook.\n\n## Troubleshooting\n\n### Node.js compatibility\n\nIf you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), you can add the `nodejs_compat` compatibility flag to your Wrangler configuration file:\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"compatibility_flags\": [\"nodejs_compat\"]\n}\n```\n\n### Worker size limits\n\nWhen deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.\n\n### Accessing the file system\n\nYou can't use `fs` in Cloudflare Workers.\n\nInstead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It works by fetching the file from the deployed public assets location.\n\nAlternatively, you can [prerender](page-options#prerender) the routes in question.\n\n## Migrating from Workers Sites\n\nCloudflare no longer recommends using [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/configuration/) and instead recommends using [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/). To migrate, replace `@sveltejs/adapter-cloudflare-workers` with `@sveltejs/adapter-cloudflare` and remove all `site` configuration settings from your Wrangler configuration file, then add the `assets.directory` and `assets.binding` configuration settings:\n\n### svelte.config.js\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\n---import adapter from '@sveltejs/adapter-cloudflare-workers';---\n+++import adapter from '@sveltejs/adapter-cloudflare';+++\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n### wrangler.toml\n\n```toml\n/// file: wrangler.toml\n---site.bucket = \".cloudflare/public\"---\n+++assets.directory = \".cloudflare/public\"\nassets.binding = \"ASSETS\" # Exclude this if you don't have a `main` key configured.+++\n```\n\n### wrangler.jsonc\n\n```jsonc\n/// file: wrangler.jsonc\n{\n---\t\"site\": {\n\t\t\"bucket\": \".cloudflare/public\"\n\t},---\n+++\t\"assets\": {\n\t\t\"directory\": \".cloudflare/public\",\n\t\t\"binding\": \"ASSETS\" // Exclude this if you don't have a `main` key configured.\n\t}+++\n}\n```",
+		"kit/adapter-cloudflare-workers": "> [!NOTE] `adapter-cloudflare-workers` has been deprecated in favour of [`adapter-cloudflare`](adapter-cloudflare). We recommend using `adapter-cloudflare` to deploy to Cloudflare Workers with [Static Assets](https://developers.cloudflare.com/workers/static-assets/) since Cloudflare Workers Sites will be deprecated in favour of it.\n\nTo deploy to [Cloudflare Workers](https://workers.cloudflare.com/) with [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/), use `adapter-cloudflare-workers`.\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-cloudflare-workers`, then add the adapter to your `svelte.config.js`:\n\n```js\n// @errors: 2307\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-cloudflare-workers';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// see below for options that can be set here\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Options\n\n### config\n\nPath to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml` you can specify it using this option.\n\n### platformProxy\n\nPreferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.\n\n## Basic Configuration\n\nThis adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/configuration/sites/configuration/) in the project root. It should look something like this:\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"name\": \"<your-service-name>\",\n\t\"account_id\": \"<your-account-id>\",\n\t\"main\": \"./.cloudflare/worker.js\",\n\t\"site\": {\n\t\t\"bucket\": \"./.cloudflare/public\"\n\t},\n\t\"build\": {\n\t\t\"command\": \"npm run build\"\n\t},\n\t\"compatibility_date\": \"2021-11-12\"\n}\n```\n\n`<your-service-name>` can be anything. `<your-account-id>` can be found by running `wrangler whoami` using the Wrangler CLI tool or by logging into your [Cloudflare dashboard](https://dash.cloudflare.com) and grabbing it from the end of the URL:\n\n```\nhttps://dash.cloudflare.com/<your-account-id>/home\n```\n\n> [!NOTE] You should add the `.cloudflare` directory (or whichever directories you specified for `main` and `site.bucket`) and the `.wrangler` directory to your `.gitignore`.\n\nYou will need to install [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/) and log in, if you haven't already:\n\n```sh\nnpm i -D wrangler\nwrangler login\n```\n\nThen, you can build your app and deploy it:\n\n```sh\nwrangler deploy\n```\n\n## Runtime APIs\n\nThe [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`ctx`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:\n\n```js\n// @filename: ambient.d.ts\nimport { DurableObjectNamespace } from '@cloudflare/workers-types';\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n\t\t\tenv: {\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};\n\t\t}\n\t}\n}\n// @filename: +server.js\n// ---cut---\n// @errors: 2355 2322\n/// file: +server.js\n/** @type {import('./$types').RequestHandler} */\nexport async function POST({ request, platform }) {\n\tconst x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');\n}\n```\n\n> [!NOTE] SvelteKit's built-in [`$env` module]($env-static-private) should be preferred for environment variables.\n\nTo make these types available to your app, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and reference them in your `src/app.d.ts`:\n\n```ts\n/// file: src/app.d.ts\n+++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Platform {\n+++\t\t\tenv?: {\n\t\t\t\tYOUR_KV_NAMESPACE: KVNamespace;\n\t\t\t\tYOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;\n\t\t\t};+++\n\t\t}\n\t}\n}\n\nexport {};\n```\n\n### Testing Locally\n\nCloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.\n\nFor testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) version 4. Once you have built your site, run `wrangler dev`.\n\n## Troubleshooting\n\n### Node.js compatibility\n\nIf you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), you can add the `nodejs_compat` compatibility flag to your Wrangler configuration file:\n\n```jsonc\n/// file: wrangler.jsonc\n{\n\t\"compatibility_flags\": [\"nodejs_compat\"]\n}\n```\n\n### Worker size limits\n\nWhen deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.\n\n### Accessing the file system\n\nYou can't use `fs` in Cloudflare Workers — you must [prerender](page-options#prerender) the routes in question.",
+		"kit/adapter-netlify": "To deploy to Netlify, use [`adapter-netlify`](https://github.com/sveltejs/kit/tree/main/packages/adapter-netlify).\n\nThis adapter will be installed by default when you use [`adapter-auto`](adapter-auto), but adding it to your project allows you to specify Netlify-specific options.\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-netlify`, then add the adapter to your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-netlify';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\t// default options are shown\n\t\tadapter: adapter({\n\t\t\t// if true, will create a Netlify Edge Function rather\n\t\t\t// than using standard Node-based functions\n\t\t\tedge: false,\n\n\t\t\t// if true, will split your app into multiple functions\n\t\t\t// instead of creating a single one for the entire app.\n\t\t\t// if `edge` is true, this option cannot be used\n\t\t\tsplit: false\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\nThen, make sure you have a [netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration) file in the project root. This will determine where to write static assets based on the `build.publish` settings, as per this sample configuration:\n\n```toml\n[build]\n\tcommand = \"npm run build\"\n\tpublish = \"build\"\n```\n\nIf the `netlify.toml` file or the `build.publish` value is missing, a default value of `\"build\"` will be used. Note that if you have set the publish directory in the Netlify UI to something else then you will need to set it in `netlify.toml` too, or use the default value of `\"build\"`.\n\n### Node version\n\nNew projects will use the current Node LTS version by default. However, if you're upgrading a project you created a while ago it may be stuck on an older version. See [the Netlify docs](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) for details on manually specifying a current Node version.\n\n## Netlify Edge Functions\n\nSvelteKit supports [Netlify Edge Functions](https://docs.netlify.com/build/edge-functions/overview/). If you pass the option `edge: true` to the `adapter` function, server-side rendering will happen in a Deno-based edge function that's deployed close to the site visitor. If set to `false` (the default), the site will deploy to Node-based Netlify Functions.\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-netlify';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// will create a Netlify Edge Function using Deno-based\n\t\t\t// rather than using standard Node-based functions\n\t\t\tedge: true\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Netlify alternatives to SvelteKit functionality\n\nYou may build your app using functionality provided directly by SvelteKit without relying on any Netlify functionality. Using the SvelteKit versions of these features will allow them to be used in dev mode, tested with integration tests, and to work with other adapters should you ever decide to switch away from Netlify. However, in some scenarios you may find it beneficial to use the Netlify versions of these features. One example would be if you're migrating an app that's already hosted on Netlify to SvelteKit.\n\n### `_headers` and `_redirects`\n\nThe [`_headers`](https://docs.netlify.com/routing/headers/#syntax-for-the-headers-file) and [`_redirects`](https://docs.netlify.com/routing/redirects/redirect-options/) files specific to Netlify can be used for static asset responses (like images) by putting them into the project root folder.\n\n### Redirect rules\n\nDuring compilation, redirect rules are automatically appended to your `_redirects` file. (If it doesn't exist yet, it will be created.) That means:\n\n- `[[redirects]]` in `netlify.toml` will never match as `_redirects` has a [higher priority](https://docs.netlify.com/routing/redirects/#rule-processing-order). So always put your rules in the [`_redirects` file](https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file).\n- `_redirects` shouldn't have any custom \"catch all\" rules such as `/* /foobar/:splat`. Otherwise the automatically appended rule will never be applied as Netlify is only processing [the first matching rule](https://docs.netlify.com/routing/redirects/#rule-processing-order).\n\n### Netlify Forms\n\n1. Create your Netlify HTML form as described [here](https://docs.netlify.com/forms/setup/#html-forms), e.g. as `/routes/contact/+page.svelte`. (Don't forget to add the hidden `form-name` input element!)\n2. Netlify's build bot parses your HTML files at deploy time, which means your form must be [prerendered](page-options#prerender) as HTML. You can either add `export const prerender = true` to your `contact.svelte` to prerender just that page or set the `kit.prerender.force: true` option to prerender all pages.\n3. If your Netlify form has a [custom success message](https://docs.netlify.com/forms/setup/#success-messages) like `<form netlify ... action=\"/success\">` then ensure the corresponding `/routes/success/+page.svelte` exists and is prerendered.\n\n### Netlify Functions\n\nWith this adapter, SvelteKit endpoints are hosted as [Netlify Functions](https://docs.netlify.com/functions/overview/). Netlify function handlers have additional context, including [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) information. You can access this context via the `event.platform.context` field inside your hooks and `+page.server` or `+layout.server` endpoints. These are [serverless functions](https://docs.netlify.com/functions/overview/) when the `edge` property is `false` in the adapter config or [edge functions](https://docs.netlify.com/edge-functions/overview/#app) when it is `true`.\n\n```js\n// @errors: 2339\n// @filename: ambient.d.ts\n/// <reference types=\"@sveltejs/adapter-netlify\" />\n// @filename: +page.server.js\n// ---cut---\n/// file: +page.server.js\n/** @type {import('./$types').PageServerLoad} */\nexport const load = async (event) => {\n\tconst context = event.platform?.context;\n\tconsole.log(context); // shows up in your functions log in the Netlify app\n};\n```\n\nAdditionally, you can add your own Netlify functions by creating a directory for them and adding the configuration to your `netlify.toml` file. For example:\n\n```toml\n[build]\n\tcommand = \"npm run build\"\n\tpublish = \"build\"\n\n[functions]\n\tdirectory = \"functions\"\n```\n\n## Troubleshooting\n\n### Accessing the file system\n\nYou can't use `fs` in edge deployments.\n\nYou _can_ use it in serverless deployments, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It also works inside edge deployments by fetching the file from the deployed public assets location.\n\nAlternatively, you can [prerender](page-options#prerender) the routes in question.",
+		"kit/adapter-vercel": "To deploy to Vercel, use [`adapter-vercel`](https://github.com/sveltejs/kit/tree/main/packages/adapter-vercel).\n\nThis adapter will be installed by default when you use [`adapter-auto`](adapter-auto), but adding it to your project allows you to specify Vercel-specific options.\n\n## Usage\n\nInstall with `npm i -D @sveltejs/adapter-vercel`, then add the adapter to your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-vercel';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\t// see below for options that can be set here\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Deployment configuration\n\nTo control how your routes are deployed to Vercel as functions, you can specify deployment configuration, either through the option shown above or with [`export const config`](page-options#config) inside `+server.js`, `+page(.server).js` and `+layout(.server).js` files.\n\nFor example you could deploy one specific route as an individual serverless function, separate from the rest of your app:\n\n```js\n/// file: about/+page.js\n/** @type {import('@sveltejs/adapter-vercel').Config} */\nexport const config = {\n\tsplit: true\n};\n```\n\nThe following options apply to all functions:\n\n- `runtime`: `'edge'`, `'nodejs18.x'`, `'nodejs20.x'` or `'nodejs22.x'`. By default, the adapter will select the `'nodejs<version>.x'` corresponding to the Node version your project is configured to use on the Vercel dashboard\n  > [!NOTE] This option is deprecated and will be removed in a future version, at which point all your functions will use whichever Node version is specified in the project configuration on Vercel\n- `regions`: an array of [edge network regions](https://vercel.com/docs/concepts/edge-network/regions) (defaulting to `[\"iad1\"]` for serverless functions) or `'all'` if `runtime` is `edge` (its default). Note that multiple regions for serverless functions are only supported on Enterprise plans\n- `split`: if `true`, causes a route to be deployed as an individual function. If `split` is set to `true` at the adapter level, all routes will be deployed as individual functions\n\nAdditionally, the following option applies to edge functions:\n- `external`: an array of dependencies that esbuild should treat as external when bundling functions. This should only be used to exclude optional dependencies that will not run outside Node\n\nAnd the following option apply to serverless functions:\n- `memory`: the amount of memory available to the function. Defaults to `1024` Mb, and can be decreased to `128` Mb or [increased](https://vercel.com/docs/concepts/limits/overview#serverless-function-memory) in 64Mb increments up to `3008` Mb on Pro or Enterprise accounts\n- `maxDuration`: [maximum execution duration](https://vercel.com/docs/functions/runtimes#max-duration) of the function. Defaults to `10` seconds for Hobby accounts, `15` for Pro and `900` for Enterprise\n- `isr`: configuration Incremental Static Regeneration, described below\n\nConfiguration set in a layout applies to all the routes beneath that layout, unless overridden at a more granular level.\n\nIf your functions need to access data in a specific region, it's recommended that they be deployed in the same region (or close to it) for optimal performance.\n\n## Image Optimization\n\nYou may set the `images` config to control how Vercel builds your images. See the [image configuration reference](https://vercel.com/docs/build-output-api/v3/configuration#images) for full details. As an example, you may set:\n\n```js\n/// file: svelte.config.js\nimport adapter from '@sveltejs/adapter-vercel';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter({\n\t\t\timages: {\n\t\t\t\tsizes: [640, 828, 1200, 1920, 3840],\n\t\t\t\tformats: ['image/avif', 'image/webp'],\n\t\t\t\tminimumCacheTTL: 300,\n\t\t\t\tdomains: ['example-app.vercel.app'],\n\t\t\t}\n\t\t})\n\t}\n};\n\nexport default config;\n```\n\n## Incremental Static Regeneration\n\nVercel supports [Incremental Static Regeneration](https://vercel.com/docs/incremental-static-regeneration) (ISR), which provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content.\n\n> [!NOTE] Use ISR only on routes where every visitor should see the same content (much like when you prerender). If there's anything user-specific happening (like session cookies), they should happen on the client via JavaScript only to not leak sensitive information across visits\n\nTo add ISR to a route, include the `isr` property in your `config` object:\n\n```js\nimport { BYPASS_TOKEN } from '$env/static/private';\n\n/** @type {import('@sveltejs/adapter-vercel').Config} */\nexport const config = {\n\tisr: {\n\t\texpiration: 60,\n\t\tbypassToken: BYPASS_TOKEN,\n\t\tallowQuery: ['search']\n\t}\n};\n```\n\n> [!NOTE] Using ISR on a route with `export const prerender = true` will have no effect, since the route is prerendered at build time\n\nThe `expiration` property is required; all others are optional. The properties are discussed in more detail below.\n\n### expiration\n\nThe expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function. Setting the value to `false` means it will never expire. In that case, you likely want to define a bypass token to re-generate on demand.\n\n### bypassToken\n\nA random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset with a `__prerender_bypass=<token>` cookie.\n\nMaking a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.\n\nNote that the `BYPASS_TOKEN` string must be at least 32 characters long. You could generate one using the JavaScript console like so:\n\n```js\ncrypto.randomUUID();\n```\n\nSet this string as an environment variable on Vercel by logging in and going to your project then Settings > Environment Variables. For \"Key\" put `BYPASS_TOKEN` and for \"value\" use the string generated above, then hit \"Save\".\n\nTo get this key known about for local development, you can use the [Vercel CLI](https://vercel.com/docs/cli/env) by running the `vercel env pull` command locally like so:\n\n```sh\nvercel env pull .env.development.local\n```\n\n### allowQuery\n\nA list of valid query parameters that contribute to the cache key. Other parameters (such as utm tracking codes) will be ignored, ensuring that they do not result in content being re-generated unnecessarily. By default, query parameters are ignored.\n\n> [!NOTE] Pages that are  [prerendered](page-options#prerender) will ignore ISR configuration.\n\n## Environment variables\n\nVercel makes a set of [deployment-specific environment variables](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) available. Like other environment variables, these are accessible from `$env/static/private` and `$env/dynamic/private` (sometimes — more on that later), and inaccessible from their public counterparts. To access one of these variables from the client:\n\n```js\n/// file: +layout.server.js\nimport { VERCEL_COMMIT_REF } from '$env/static/private';\n\n/** @type {import('./$types').LayoutServerLoad} */\nexport function load() {\n\treturn {\n\t\tdeploymentGitBranch: VERCEL_COMMIT_REF\n\t};\n}\n```\n\n```svelte\n<!--- file: +layout.svelte --->\n<script>\n\t/** @type {import('./$types').LayoutProps} */\n\tlet { data } = $props();\n</script>\n\n<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>\n```\n\nSince all of these variables are unchanged between build time and run time when building on Vercel, we recommend using `$env/static/private` — which will statically replace the variables, enabling optimisations like dead code elimination — rather than `$env/dynamic/private`.\n\n## Skew protection\n\nWhen a new version of your app is deployed, assets belonging to the previous version may no longer be accessible. If a user is actively using your app when this happens, it can cause errors when they navigate — this is known as _version skew_. SvelteKit mitigates this by detecting errors resulting from version skew and causing a hard reload to get the latest version of the app, but this will cause any client-side state to be lost. (You can also proactively mitigate it by observing [`updated.current`]($app-state#updated) from `$app/state`, which tells clients when a new version has been deployed.)\n\n[Skew protection](https://vercel.com/docs/deployments/skew-protection) is a Vercel feature that routes client requests to their original deployment. When a user visits your app, a cookie is set with the deployment ID, and any subsequent requests will be routed to that deployment for as long as skew protection is active. When they reload the page, they will get the newest deployment. (`updated.current` is exempted from this behaviour, and so will continue to report new deployments.) To enable it, visit the Advanced section of your project settings on Vercel.\n\nCookie-based skew protection comes with one caveat: if a user has multiple versions of your app open in multiple tabs, requests from older versions will be routed to the newer one, meaning they will fall back to SvelteKit's built-in skew protection.\n\n## Notes\n\n### Vercel functions\n\nIf you have Vercel functions contained in the `api` directory at the project's root, any requests for `/api/*` will _not_ be handled by SvelteKit. You should implement these as [API routes](routing#server) in your SvelteKit app instead, unless you need to use a non-JavaScript language in which case you will need to ensure that you don't have any `/api/*` routes in your SvelteKit app.\n\n### Node version\n\nProjects created before a certain date may default to using an older Node version than what SvelteKit currently requires. You can [change the Node version in your project settings](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/node-js#node.js-version).\n\n## Troubleshooting\n\n### Accessing the file system\n\nYou can't use `fs` in edge functions.\n\nYou _can_ use it in serverless functions, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It also works inside routes deployed as edge functions by fetching the file from the deployed public assets location.\n\nAlternatively, you can [prerender](page-options#prerender) the routes in question.\n\n### Deployment protection\n\nIf using [`read`]($app-server#read) in an edge function, SvelteKit will `fetch` the file in question from your deployment. If you are using [Deployment Protection](https://vercel.com/docs/deployment-protection), you must also enable [Protection Bypass for Automation](https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation) so that the request does not result in a [401 Unauthorized](https://http.dog/401) response.",
+		"kit/writing-adapters": "If an adapter for your preferred environment doesn't yet exist, you can build your own. We recommend [looking at the source for an adapter](https://github.com/sveltejs/kit/tree/main/packages) to a platform similar to yours and copying it as a starting point.\n\nAdapter packages implement the following API, which creates an `Adapter`:\n\n```js\n// @errors: 2322\n// @filename: ambient.d.ts\ntype AdapterSpecificOptions = any;\n\n// @filename: index.js\n// ---cut---\n/** @param {AdapterSpecificOptions} options */\nexport default function (options) {\n\t/** @type {import('@sveltejs/kit').Adapter} */\n\tconst adapter = {\n\t\tname: 'adapter-package-name',\n\t\tasync adapt(builder) {\n\t\t\t// adapter implementation\n\t\t},\n\t\tasync emulate() {\n\t\t\treturn {\n\t\t\t\tasync platform({ config, prerender }) {\n\t\t\t\t\t// the returned object becomes `event.platform` during dev, build and\n\t\t\t\t\t// preview. Its shape is that of `App.Platform`\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tsupports: {\n\t\t\tread: ({ config, route }) => {\n\t\t\t\t// Return `true` if the route with the given `config` can use `read`\n\t\t\t\t// from `$app/server` in production, return `false` if it can't.\n\t\t\t\t// Or throw a descriptive error describing how to configure the deployment\n\t\t\t},\n\t\t\ttracing: () => {\n\t\t\t\t// Return `true` if this adapter supports loading `tracing.server.js`.\n\t\t\t\t// Return `false if it can't, or throw a descriptive error.\n\t\t\t}\n\t\t}\n\t};\n\n\treturn adapter;\n}\n```\n\nOf these, `name` and `adapt` are required. `emulate` and `supports` are optional.\n\nWithin the `adapt` method, there are a number of things that an adapter should do:\n\n- Clear out the build directory\n- Write SvelteKit output with `builder.writeClient`, `builder.writeServer`, and `builder.writePrerendered`\n- Output code that:\n\t- Imports `Server` from `${builder.getServerDirectory()}/index.js`\n\t- Instantiates the app with a manifest generated with `builder.generateManifest({ relativePath })`\n\t- Listens for requests from the platform, converts them to a standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) if necessary, calls the `server.respond(request, { getClientAddress })` function to generate a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) and responds with it\n\t- expose any platform-specific information to SvelteKit via the `platform` option passed to `server.respond`\n\t- Globally shims `fetch` to work on the target platform, if necessary. SvelteKit provides a `@sveltejs/kit/node/polyfills` helper for platforms that can use `undici`\n- Bundle the output to avoid needing to install dependencies on the target platform, if necessary\n- Put the user's static files and the generated JS/CSS in the correct location for the target platform\n\nWhere possible, we recommend putting the adapter output under the `build/` directory with any intermediate output placed under `.svelte-kit/[adapter-name]`.",
+		"kit/advanced-routing": "## Rest parameters\n\nIf the number of route segments is unknown, you can use rest syntax — for example you might implement GitHub's file viewer like so...\n\n```sh\n/[org]/[repo]/tree/[branch]/[...file]\n```\n\n...in which case a request for `/sveltejs/kit/tree/main/documentation/docs/04-advanced-routing.md` would result in the following parameters being available to the page:\n\n```js\n// @noErrors\n{\n\torg: 'sveltejs',\n\trepo: 'kit',\n\tbranch: 'main',\n\tfile: 'documentation/docs/04-advanced-routing.md'\n}\n```\n\n> [!NOTE] `src/routes/a/[...rest]/z/+page.svelte` will match `/a/z` (i.e. there's no parameter at all) as well as `/a/b/z` and `/a/b/c/z` and so on. Make sure you check that the value of the rest parameter is valid, for example using a [matcher](#Matching).\n\n### 404 pages\n\nRest parameters also allow you to render custom 404s. Given these routes...\n\n```tree\nsrc/routes/\n├ marx-brothers/\n│ ├ chico/\n│ ├ harpo/\n│ ├ groucho/\n│ └ +error.svelte\n└ +error.svelte\n```\n\n...the `marx-brothers/+error.svelte` file will _not_ be rendered if you visit `/marx-brothers/karl`, because no route was matched. If you want to render the nested error page, you should create a route that matches any `/marx-brothers/*` request, and return a 404 from it:\n\n```tree\nsrc/routes/\n├ marx-brothers/\n+++| ├ [...path]/+++\n│ ├ chico/\n│ ├ harpo/\n│ ├ groucho/\n│ └ +error.svelte\n└ +error.svelte\n```\n\n```js\n/// file: src/routes/marx-brothers/[...path]/+page.js\nimport { error } from '@sveltejs/kit';\n\n/** @type {import('./$types').PageLoad} */\nexport function load(event) {\n\terror(404, 'Not Found');\n}\n```\n\n> [!NOTE] If you don't handle 404 cases, they will appear in [`handleError`](hooks#Shared-hooks-handleError)\n\n## Optional parameters\n\nA route like `[lang]/home` contains a parameter named `lang` which is required. Sometimes it's beneficial to make these parameters optional, so that in this example both `home` and `en/home` point to the same page. You can do that by wrapping the parameter in another bracket pair: `[[lang]]/home`\n\nNote that an optional route parameter cannot follow a rest parameter (`[...rest]/[[optional]]`), since parameters are matched 'greedily' and the optional parameter would always be unused.\n\n## Matching\n\nA route like `src/routes/fruits/[page]` would match `/fruits/apple`, but it would also match `/fruits/rocketship`. We don't want that. You can ensure that route parameters are well-formed by adding a _matcher_ — which takes the parameter string (`\"apple\"` or `\"rocketship\"`) and returns `true` if it is valid — to your [`params`](configuration#files) directory...\n\n```js\n/// file: src/params/fruit.js\n/**\n * @param {string} param\n * @return {param is ('apple' | 'orange')}\n * @satisfies {import('@sveltejs/kit').ParamMatcher}\n */\nexport function match(param) {\n\treturn param === 'apple' || param === 'orange';\n}\n```\n\n...and augmenting your routes:\n\n```\nsrc/routes/fruits/[page+++=fruit+++]\n```\n\nIf the pathname doesn't match, SvelteKit will try to match other routes (using the sort order specified below), before eventually returning a 404.\n\nEach module in the `params` directory corresponds to a matcher, with the exception of `*.test.js` and `*.spec.js` files which may be used to unit test your matchers.\n\n> [!NOTE] Matchers run both on the server and in the browser.\n\n## Sorting\n\nIt's possible for multiple routes to match a given path. For example each of these routes would match `/foo-abc`:\n\n```sh\nsrc/routes/[...catchall]/+page.svelte\nsrc/routes/[[a=x]]/+page.svelte\nsrc/routes/[b]/+page.svelte\nsrc/routes/foo-[c]/+page.svelte\nsrc/routes/foo-abc/+page.svelte\n```\n\nSvelteKit needs to know which route is being requested. To do so, it sorts them according to the following rules...\n\n- More specific routes are higher priority (e.g. a route with no parameters is more specific than a route with one dynamic parameter, and so on)\n- Parameters with [matchers](#Matching) (`[name=type]`) are higher priority than those without (`[name]`)\n- `[[optional]]` and `[...rest]` parameters are ignored unless they are the final part of the route, in which case they are treated with lowest priority. In other words `x/[[y]]/z` is treated equivalently to `x/z` for the purposes of sorting\n- Ties are resolved alphabetically\n\n...resulting in this ordering, meaning that `/foo-abc` will invoke `src/routes/foo-abc/+page.svelte`, and `/foo-def` will invoke `src/routes/foo-[c]/+page.svelte` rather than less specific routes:\n\n```sh\nsrc/routes/foo-abc/+page.svelte\nsrc/routes/foo-[c]/+page.svelte\nsrc/routes/[[a=x]]/+page.svelte\nsrc/routes/[b]/+page.svelte\nsrc/routes/[...catchall]/+page.svelte\n```\n\n## Encoding\n\nSome characters can't be used on the filesystem — `/` on Linux and Mac, `\\ / : * ? \" < > |` on Windows. The `#` and `%` characters have special meaning in URLs, and the `[ ] ( )` characters have special meaning to SvelteKit, so these also can't be used directly as part of your route.\n\nTo use these characters in your routes, you can use hexadecimal escape sequences, which have the format `[x+nn]` where `nn` is a hexadecimal character code:\n\n- `\\` — `[x+5c]`\n- `/` — `[x+2f]`\n- `:` — `[x+3a]`\n- `*` — `[x+2a]`\n- `?` — `[x+3f]`\n- `\"` — `[x+22]`\n- `<` — `[x+3c]`\n- `>` — `[x+3e]`\n- `|` — `[x+7c]`\n- `#` — `[x+23]`\n- `%` — `[x+25]`\n- `[` — `[x+5b]`\n- `]` — `[x+5d]`\n- `(` — `[x+28]`\n- `)` — `[x+29]`\n\nFor example, to create a `/smileys/:-)` route, you would create a `src/routes/smileys/[x+3a]-[x+29]/+page.svelte` file.\n\nYou can determine the hexadecimal code for a character with JavaScript:\n\n```js\n':'.charCodeAt(0).toString(16); // '3a', hence '[x+3a]'\n```\n\nYou can also use Unicode escape sequences. Generally you won't need to as you can use the unencoded character directly, but if — for some reason — you can't have a filename with an emoji in it, for example, then you can use the escaped characters. In other words, these are equivalent:\n\n```\nsrc/routes/[u+d83e][u+dd2a]/+page.svelte\nsrc/routes/🤪/+page.svelte\n```\n\nThe format for a Unicode escape sequence is `[u+nnnn]` where `nnnn` is a valid value between `0000` and `10ffff`. (Unlike JavaScript string escaping, there's no need to use surrogate pairs to represent code points above `ffff`.) To learn more about Unicode encodings, consult [Programming with Unicode](https://unicodebook.readthedocs.io/unicode_encodings.html).\n\n> [!NOTE] Since TypeScript [struggles](https://github.com/microsoft/TypeScript/issues/13399) with directories with a leading `.` character, you may find it useful to encode these characters when creating e.g. [`.well-known`](https://en.wikipedia.org/wiki/Well-known_URI) routes: `src/routes/[x+2e]well-known/...`\n\n## Advanced layouts\n\nBy default, the _layout hierarchy_ mirrors the _route hierarchy_. In some cases, that might not be what you want.\n\n### (group)\n\nPerhaps you have some routes that are 'app' routes that should have one layout (e.g. `/dashboard` or `/item`), and others that are 'marketing' routes that should have a different layout (`/about` or `/testimonials`). We can group these routes with a directory whose name is wrapped in parentheses — unlike normal directories, `(app)` and `(marketing)` do not affect the URL pathname of the routes inside them:\n\n```tree\nsrc/routes/\n+++│ (app)/+++\n│ ├ dashboard/\n│ ├ item/\n│ └ +layout.svelte\n+++│ (marketing)/+++\n│ ├ about/\n│ ├ testimonials/\n│ └ +layout.svelte\n├ admin/\n└ +layout.svelte\n```\n\nYou can also put a `+page` directly inside a `(group)`, for example if `/` should be an `(app)` or a `(marketing)` page.\n\n### Breaking out of layouts\n\nThe root layout applies to every page of your app — if omitted, it defaults to `{@render children()}`. If you want some pages to have a different layout hierarchy than the rest, then you can put your entire app inside one or more groups _except_ the routes that should not inherit the common layouts.\n\nIn the example above, the `/admin` route does not inherit either the `(app)` or `(marketing)` layouts.\n\n### +page@\n\nPages can break out of the current layout hierarchy on a route-by-route basis. Suppose we have an `/item/[id]/embed` route inside the `(app)` group from the previous example:\n\n```tree\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n+++│ │ │ │ └ +page.svelte+++\n│ │ │ └ +layout.svelte\n│ │ └ +layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\nOrdinarily, this would inherit the root layout, the `(app)` layout, the `item` layout and the `[id]` layout. We can reset to one of those layouts by appending `@` followed by the segment name — or, for the root layout, the empty string. In this example, we can choose from the following options:\n\n- `+page@[id].svelte` - inherits from `src/routes/(app)/item/[id]/+layout.svelte`\n- `+page@item.svelte` - inherits from `src/routes/(app)/item/+layout.svelte`\n- `+page@(app).svelte` - inherits from `src/routes/(app)/+layout.svelte`\n- `+page@.svelte` - inherits from `src/routes/+layout.svelte`\n\n```tree\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n+++│ │ │ │ └ +page@(app).svelte+++\n│ │ │ └ +layout.svelte\n│ │ └ +layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\n### +layout@\n\nLike pages, layouts can _themselves_ break out of their parent layout hierarchy, using the same technique. For example, a `+layout@.svelte` component would reset the hierarchy for all its child routes.\n\n```\nsrc/routes/\n├ (app)/\n│ ├ item/\n│ │ ├ [id]/\n│ │ │ ├ embed/\n│ │ │ │ └ +page.svelte  // uses (app)/item/[id]/+layout.svelte\n│ │ │ ├ +layout.svelte  // inherits from (app)/item/+layout@.svelte\n│ │ │ └ +page.svelte    // uses (app)/item/+layout@.svelte\n│ │ └ +layout@.svelte   // inherits from root layout, skipping (app)/+layout.svelte\n│ └ +layout.svelte\n└ +layout.svelte\n```\n\n### When to use layout groups\n\nNot all use cases are suited for layout grouping, nor should you feel compelled to use them. It might be that your use case would result in complex `(group)` nesting, or that you don't want to introduce a `(group)` for a single outlier. It's perfectly fine to use other means such as composition (reusable `load` functions or Svelte components) or if-statements to achieve what you want. The following example shows a layout that rewinds to the root layout and reuses components and functions that other layouts can also use:\n\n```svelte\n<!--- file: src/routes/nested/route/+layout@.svelte --->\n<script>\n\timport ReusableLayout from '$lib/ReusableLayout.svelte';\n\tlet { data, children } = $props();\n</script>\n\n<ReusableLayout {data}>\n\t{@render children()}\n</ReusableLayout>\n```\n\n```js\n/// file: src/routes/nested/route/+layout.js\n// @filename: ambient.d.ts\ndeclare module \"$lib/reusable-load-function\" {\n\texport function reusableLoad(event: import('@sveltejs/kit').LoadEvent): Promise<Record<string, any>>;\n}\n// @filename: index.js\n// ---cut---\nimport { reusableLoad } from '$lib/reusable-load-function';\n\n/** @type {import('./$types').PageLoad} */\nexport function load(event) {\n\t// Add additional logic here, if needed\n\treturn reusableLoad(event);\n}\n```\n\n## Further reading\n\n- [Tutorial: Advanced Routing](/tutorial/kit/optional-params)",
+		"kit/hooks": "'Hooks' are app-wide functions you declare that SvelteKit will call in response to specific events, giving you fine-grained control over the framework's behaviour.\n\nThere are three hooks files, all optional:\n\n- `src/hooks.server.js` — your app's server hooks\n- `src/hooks.client.js` — your app's client hooks\n- `src/hooks.js` — your app's hooks that run on both the client and server\n\nCode in these modules will run when the application starts up, making them useful for initializing database clients and so on.\n\n> [!NOTE] You can configure the location of these files with [`config.kit.files.hooks`](configuration#files).\n\n## Server hooks\n\nThe following hooks can be added to `src/hooks.server.js`:\n\n### handle\n\nThis function runs every time the SvelteKit server receives a [request](web-standards#Fetch-APIs-Request) — whether that happens while the app is running, or during [prerendering](page-options#prerender) — and determines the [response](web-standards#Fetch-APIs-Response). It receives an `event` object representing the request and a function called `resolve`, which renders the route and generates a `Response`. This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tif (event.url.pathname.startsWith('/custom')) {\n\t\treturn new Response('custom response');\n\t}\n\n\tconst response = await resolve(event);\n\treturn response;\n}\n```\n\n> [!NOTE] Requests for static assets — which includes pages that were already prerendered — are _not_ handled by SvelteKit.\n\nIf unimplemented, defaults to `({ event, resolve }) => resolve(event)`.\n\nDuring prerendering, SvelteKit crawls your pages for links and renders each route it finds. Rendering the route invokes the `handle` function (and all other route dependencies, like `load`). If you need to exclude some code from running during this phase, check that the app is not [`building`]($app-environment#building) beforehand.\n\n### locals\n\nTo add custom data to the request, which is passed to handlers in `+server.js` and server `load` functions, populate the `event.locals` object, as shown below.\n\n```js\n/// file: src/hooks.server.js\n// @filename: ambient.d.ts\ntype User = {\n\tname: string;\n}\n\ndeclare namespace App {\n\tinterface Locals {\n\t\tuser: User;\n\t}\n}\n\nconst getUserInformation: (cookie: string | void) => Promise<User>;\n\n// @filename: index.js\n// ---cut---\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tevent.locals.user = await getUserInformation(event.cookies.get('sessionid'));\n\n\tconst response = await resolve(event);\n\n\t// Note that modifying response headers isn't always safe.\n\t// Response objects can have immutable headers\n\t// (e.g. Response.redirect() returned from an endpoint).\n\t// Modifying immutable headers throws a TypeError.\n\t// In that case, clone the response or avoid creating a\n\t// response object with immutable headers.\n\tresponse.headers.set('x-custom-header', 'potato');\n\n\treturn response;\n}\n```\n\nYou can define multiple `handle` functions and execute them with [the `sequence` helper function](@sveltejs-kit-hooks).\n\n`resolve` also supports a second, optional parameter that gives you more control over how the response will be rendered. That parameter is an object that can have the following fields:\n\n- `transformPageChunk(opts: { html: string, done: boolean }): MaybePromise<string | undefined>` — applies custom transforms to HTML. If `done` is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML (they could include an element's opening tag but not its closing tag, for example) but they will always be split at sensible boundaries such as `%sveltekit.head%` or layout/page components.\n- `filterSerializedResponseHeaders(name: string, value: string): boolean` — determines which headers should be included in serialized responses when a `load` function loads a resource with `fetch`. By default, none will be included.\n- `preload(input: { type: 'js' | 'css' | 'font' | 'asset', path: string }): boolean` — determines what files should be added to the `<head>` tag to preload it. The method is called with each file that was found at build time while constructing the code chunks — so if you for example have `import './styles.css` in your `+page.svelte`, `preload` will be called with the resolved path to that CSS file when visiting that page. Note that in dev mode `preload` is _not_ called, since it depends on analysis that happens at build time. Preloading can improve performance by downloading assets sooner, but it can also hurt if too much is downloaded unnecessarily. By default, `js` and `css` files will be preloaded. `asset` files are not preloaded at all currently, but we may add this later after evaluating feedback.\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tconst response = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => html.replace('old', 'new'),\n\t\tfilterSerializedResponseHeaders: (name) => name.startsWith('x-'),\n\t\tpreload: ({ type, path }) => type === 'js' || path.includes('/important/')\n\t});\n\n\treturn response;\n}\n```\n\nNote that `resolve(...)` will never throw an error, it will always return a `Promise<Response>` with the appropriate status code. If an error is thrown elsewhere during `handle`, it is treated as fatal, and SvelteKit will respond with a JSON representation of the error or a fallback error page — which can be customised via `src/error.html` — depending on the `Accept` header. You can read more about error handling [here](errors).\n\n### handleFetch\n\nThis function allows you to modify (or replace) the result of an [`event.fetch`](load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`.\n\nFor example, your `load` function might make a request to a public URL like `https://api.yourapp.com` when the user performs a client-side navigation to the respective page, but during SSR it might make sense to hit the API directly (bypassing whatever proxies and load balancers sit between it and the public internet).\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').HandleFetch} */\nexport async function handleFetch({ request, fetch }) {\n\tif (request.url.startsWith('https://api.yourapp.com/')) {\n\t\t// clone the original request, but change the URL\n\t\trequest = new Request(\n\t\t\trequest.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),\n\t\t\trequest\n\t\t);\n\t}\n\n\treturn fetch(request);\n}\n```\n\nRequests made with `event.fetch` follow the browser's credentials model — for same-origin requests, `cookie` and `authorization` headers are forwarded unless the `credentials` option is set to `\"omit\"`. For cross-origin requests, `cookie` will be included if the request URL belongs to a subdomain of the app — for example if your app is on `my-domain.com`, and your API is on `api.my-domain.com`, cookies will be included in the request.\n\nThere is one caveat: if your app and your API are on sibling subdomains — `www.my-domain.com` and `api.my-domain.com` for example — then a cookie belonging to a common parent domain like `my-domain.com` will _not_ be included, because SvelteKit has no way to know which domain the cookie belongs to. In these cases you will need to manually include the cookie using `handleFetch`:\n\n```js\n/// file: src/hooks.server.js\n// @errors: 2345\n/** @type {import('@sveltejs/kit').HandleFetch} */\nexport async function handleFetch({ event, request, fetch }) {\n\tif (request.url.startsWith('https://api.my-domain.com/')) {\n\t\trequest.headers.set('cookie', event.request.headers.get('cookie'));\n\t}\n\n\treturn fetch(request);\n}\n```\n\n### handleValidationError\n\nThis hook is called when a remote function is called with an argument that does not match the provided [Standard Schema](https://standardschema.dev/). It must return an object matching the shape of [`App.Error`](types#Error).\n\nSay you have a remote function that expects a string as its argument ...\n\n```js\n/// file: todos.remote.js\nimport * as v from 'valibot';\nimport { query } from '$app/server';\n\nexport const getTodo = query(v.string(), (id) => {\n\t// implementation...\n});\n```\n\n...but it is called with something that doesn't match the schema — such as a number (e.g `await getTodos(1)`) — then validation will fail, the server will respond with a [400 status code](https://http.dog/400), and the function will throw with the message 'Bad Request'.\n\nTo customise this message and add additional properties to the error object, implement `handleValidationError`:\n\n```js\n/// file: src/hooks.server.js\n/** @type {import('@sveltejs/kit').HandleValidationError} */\nexport function handleValidationError({ issues }) {\n\treturn {\n\t\tmessage: 'No thank you'\n\t};\n}\n```\n\nBe thoughtful about what information you expose here, as the most likely reason for validation to fail is that someone is sending malicious requests to your server.\n\n## Shared hooks\n\nThe following can be added to `src/hooks.server.js` _and_ `src/hooks.client.js`:\n\n### handleError\n\nIf an [unexpected error](errors#Unexpected-errors) is thrown during loading, rendering, or from an endpoint, this function will be called with the `error`, `event`, `status` code and `message`. This allows for two things:\n\n- you can log the error\n- you can generate a custom representation of the error that is safe to show to users, omitting sensitive details like messages and stack traces. The returned value, which defaults to `{ message }`, becomes the value of `$page.error`.\n\nFor errors thrown from your code (or library code called by your code) the status will be 500 and the message will be \"Internal Error\". While `error.message` may contain sensitive information that should not be exposed to users, `message` is safe (albeit meaningless to the average user).\n\nTo add more information to the `$page.error` object in a type-safe way, you can customize the expected shape by declaring an `App.Error` interface (which must include `message: string`, to guarantee sensible fallback behavior). This allows you to — for example — append a tracking ID for users to quote in correspondence with your technical support staff:\n\n```ts\n/// file: src/app.d.ts\ndeclare global {\n\tnamespace App {\n\t\tinterface Error {\n\t\t\tmessage: string;\n\t\t\terrorId: string;\n\t\t}\n\t}\n}\n\nexport {};\n```\n\n```js\n/// file: src/hooks.server.js\n// @errors: 2322 2353\n// @filename: ambient.d.ts\ndeclare module '@sentry/sveltekit' {\n\texport const init: (opts: any) => void;\n\texport const captureException: (error: any, opts: any) => void;\n}\n\n// @filename: index.js\n// ---cut---\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({/*...*/})\n\n/** @type {import('@sveltejs/kit').HandleServerError} */\nexport async function handleError({ error, event, status, message }) {\n\tconst errorId = crypto.randomUUID();\n\n\t// example integration with https://sentry.io/\n\tSentry.captureException(error, {\n\t\textra: { event, errorId, status }\n\t});\n\n\treturn {\n\t\tmessage: 'Whoops!',\n\t\terrorId\n\t};\n}\n```\n\n```js\n/// file: src/hooks.client.js\n// @errors: 2322 2353\n// @filename: ambient.d.ts\ndeclare module '@sentry/sveltekit' {\n\texport const init: (opts: any) => void;\n\texport const captureException: (error: any, opts: any) => void;\n}\n\n// @filename: index.js\n// ---cut---\nimport * as Sentry from '@sentry/sveltekit';\n\nSentry.init({/*...*/})\n\n/** @type {import('@sveltejs/kit').HandleClientError} */\nexport async function handleError({ error, event, status, message }) {\n\tconst errorId = crypto.randomUUID();\n\n\t// example integration with https://sentry.io/\n\tSentry.captureException(error, {\n\t\textra: { event, errorId, status }\n\t});\n\n\treturn {\n\t\tmessage: 'Whoops!',\n\t\terrorId\n\t};\n}\n```\n\n> [!NOTE] In `src/hooks.client.js`, the type of `handleError` is `HandleClientError` instead of `HandleServerError`, and `event` is a `NavigationEvent` rather than a `RequestEvent`.\n\nThis function is not called for _expected_ errors (those thrown with the [`error`](@sveltejs-kit#error) function imported from `@sveltejs/kit`).\n\nDuring development, if an error occurs because of a syntax error in your Svelte code, the passed in error has a `frame` property appended highlighting the location of the error.\n\n> [!NOTE] Make sure that `handleError` _never_ throws an error\n\n### init\n\nThis function runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection.\n\n> [!NOTE] If your environment supports top-level await, the `init` function is really no different from writing your initialisation logic at the top level of the module, but some environments — most notably, Safari — don't.\n\n```js\n// @errors: 2307\n/// file: src/hooks.server.js\nimport * as db from '$lib/server/database';\n\n/** @type {import('@sveltejs/kit').ServerInit} */\nexport async function init() {\n\tawait db.connect();\n}\n```\n\n> [!NOTE]\n> In the browser, asynchronous work in `init` will delay hydration, so be mindful of what you put in there.\n\n## Universal hooks\n\nThe following can be added to `src/hooks.js`. Universal hooks run on both server and client (not to be confused with shared hooks, which are environment-specific).\n\n### reroute\n\nThis function runs before `handle` and allows you to change how URLs are translated into routes. The returned pathname (which defaults to `url.pathname`) is used to select the route and its parameters.\n\nFor example, you might have a `src/routes/[[lang]]/about/+page.svelte` page, which should be accessible as `/en/about` or `/de/ueber-uns` or `/fr/a-propos`. You could implement this with `reroute`:\n\n```js\n// @errors: 2345 2304\n/// file: src/hooks.js\n\n/** @type {Record<string, string>} */\nconst translated = {\n\t'/en/about': '/en/about',\n\t'/de/ueber-uns': '/de/about',\n\t'/fr/a-propos': '/fr/about',\n};\n\n/** @type {import('@sveltejs/kit').Reroute} */\nexport function reroute({ url }) {\n\tif (url.pathname in translated) {\n\t\treturn translated[url.pathname];\n\t}\n}\n```\n\nThe `lang` parameter will be correctly derived from the returned pathname.\n\nUsing `reroute` will _not_ change the contents of the browser's address bar, or the value of `event.url`.\n\nSince version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise. If you need to fetch data, use the `fetch` provided as an argument. It has the [same benefits](load#Making-fetch-requests) as the `fetch` provided to `load` functions, with the caveat that `params` and `id` are unavailable to [`handleFetch`](#Server-hooks-handleFetch) because the route is not yet known.\n\n```js\n// @errors: 2345 2304\n/// file: src/hooks.js\n\n/** @type {import('@sveltejs/kit').Reroute} */\nexport async function reroute({ url, fetch }) {\n\t// Ask a special endpoint within your app about the destination\n\tif (url.pathname === '/api/reroute') return;\n\n\tconst api = new URL('/api/reroute', url);\n\tapi.searchParams.set('pathname', url.pathname);\n\n\tconst result = await fetch(api).then(r => r.json());\n\treturn result.pathname;\n}\n```\n\n\n> [!NOTE] `reroute` is considered a pure, idempotent function. As such, it must always return the same output for the same input and not have side effects. Under these assumptions, SvelteKit caches the result of `reroute` on the client so it is only called once per unique URL.\n\n### transport\n\nThis is a collection of _transporters_, which allow you to pass custom types — returned from `load` and form actions — across the server/client boundary. Each transporter contains an `encode` function, which encodes values on the server (or returns a falsy value for anything that isn't an instance of the type) and a corresponding `decode` function:\n\n```js\n// @errors: 2307\n/// file: src/hooks.js\nimport { Vector } from '$lib/math';\n\n/** @type {import('@sveltejs/kit').Transport} */\nexport const transport = {\n\tVector: {\n\t\tencode: (value) => value instanceof Vector && [value.x, value.y],\n\t\tdecode: ([x, y]) => new Vector(x, y)\n\t}\n};\n```\n\n\n## Further reading\n\n- [Tutorial: Hooks](/tutorial/kit/handle)",
+		"kit/errors": "Errors are an inevitable fact of software development. SvelteKit handles errors differently depending on where they occur, what kind of errors they are, and the nature of the incoming request.\n\n## Error objects\n\nSvelteKit distinguishes between expected and unexpected errors, both of which are represented as simple `{ message: string }` objects by default.\n\nYou can add additional properties, like a `code` or a tracking `id`, as shown in the examples below. (When using TypeScript this requires you to redefine the `Error` type as described in  [type safety](errors#Type-safety)).\n\n## Expected errors\n\nAn _expected_ error is one created with the [`error`](@sveltejs-kit#error) helper imported from `@sveltejs/kit`:\n\n```js\n/// file: src/routes/blog/[slug]/+page.server.js\n// @filename: ambient.d.ts\ndeclare module '$lib/server/database' {\n\texport function getPost(slug: string): Promise<{ title: string, content: string } | undefined>\n}\n\n// @filename: index.js\n// ---cut---\nimport { error } from '@sveltejs/kit';\nimport * as db from '$lib/server/database';\n\n/** @type {import('./$types').PageServerLoad} */\nexport async function load({ params }) {\n\tconst post = await db.getPost(params.slug);\n\n\tif (!post) {\n\t\terror(404, {\n\t\t\tmessage: 'Not found'\n\t\t});\n\t}\n\n\treturn { post };\n}\n```\n\nThis throws an exception that SvelteKit catches, causing it to set the response status code to 404 and render an [`+error.svelte`](routing#error) component, where `page.error` is the object provided as the second argument to `error(...)`.\n\n```svelte\n<!--- file: src/routes/+error.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<h1>{page.error.message}</h1>\n```\n\n> [!LEGACY]\n> `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$app/stores` instead.\n\nYou can add extra properties to the error object if needed...\n\n```js\n// @filename: ambient.d.ts\ndeclare global {\n\tnamespace App {\n\t\tinterface Error {\n\t\t\tmessage: string;\n\t\t\tcode: string;\n\t\t}\n\t}\n}\nexport {}\n\n// @filename: index.js\nimport { error } from '@sveltejs/kit';\n// ---cut---\nerror(404, {\n\tmessage: 'Not found',\n\t+++code: 'NOT_FOUND'+++\n});\n```\n\n...otherwise, for convenience, you can pass a string as the second argument:\n\n```js\nimport { error } from '@sveltejs/kit';\n// ---cut---\n---error(404, { message: 'Not found' });---\n+++error(404, 'Not found');+++\n```\n\n> [!NOTE] [In SvelteKit 1.x](migrating-to-sveltekit-2#redirect-and-error-are-no-longer-thrown-by-you) you had to `throw` the `error` yourself\n\n## Unexpected errors\n\nAn _unexpected_ error is any other exception that occurs while handling a request. Since these can contain sensitive information, unexpected error messages and stack traces are not exposed to users.\n\nBy default, unexpected errors are printed to the console (or, in production, your server logs), while the error that is exposed to the user has a generic shape:\n\n```json\n{ \"message\": \"Internal Error\" }\n```\n\nUnexpected errors will go through the [`handleError`](hooks#Shared-hooks-handleError) hook, where you can add your own error handling — for example, sending errors to a reporting service, or returning a custom error object which becomes `$page.error`.\n\n## Responses\n\nIf an error occurs inside `handle` or inside a [`+server.js`](routing#server) request handler, SvelteKit will respond with either a fallback error page or a JSON representation of the error object, depending on the request's `Accept` headers.\n\nYou can customise the fallback error page by adding a `src/error.html` file:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>%sveltekit.error.message%</title>\n\t</head>\n\t<body>\n\t\t<h1>My custom error page</h1>\n\t\t<p>Status: %sveltekit.status%</p>\n\t\t<p>Message: %sveltekit.error.message%</p>\n\t</body>\n</html>\n```\n\nSvelteKit will replace `%sveltekit.status%` and `%sveltekit.error.message%` with their corresponding values.\n\nIf the error instead occurs inside a `load` function while rendering a page, SvelteKit will render the [`+error.svelte`](routing#error) component nearest to where the error occurred. If the error occurs inside a `load` function in `+layout(.server).js`, the closest error boundary in the tree is an `+error.svelte` file _above_ that layout (not next to it).\n\nThe exception is when the error occurs inside the root `+layout.js` or `+layout.server.js`, since the root layout would ordinarily _contain_ the `+error.svelte` component. In this case, SvelteKit uses the fallback error page.\n\n## Type safety\n\nIf you're using TypeScript and need to customize the shape of errors, you can do so by declaring an `App.Error` interface in your app (by convention, in `src/app.d.ts`, though it can live anywhere that TypeScript can 'see'):\n\n```ts\n/// file: src/app.d.ts\ndeclare global {\n\tnamespace App {\n\t\tinterface Error {\n+++\t\t\tcode: string;\n\t\t\tid: string;+++\n\t\t}\n\t}\n}\n\nexport {};\n```\n\nThis interface always includes a `message: string` property.\n\n## Further reading\n\n- [Tutorial: Errors and redirects](/tutorial/kit/error-basics)\n- [Tutorial: Hooks](/tutorial/kit/handle)",
+		"kit/link-options": "In SvelteKit, `<a>` elements (rather than framework-specific `<Link>` components) are used to navigate between the routes of your app. If the user clicks on a link whose `href` is 'owned' by the app (as opposed to, say, a link to an external site) then SvelteKit will navigate to the new page by importing its code and then calling any `load` functions it needs to fetch data.\n\nYou can customise the behaviour of links with `data-sveltekit-*` attributes. These can be applied to the `<a>` itself, or to a parent element.\n\nThese options also apply to `<form>` elements with [`method=\"GET\"`](form-actions#GET-vs-POST).\n\n## data-sveltekit-preload-data\n\nBefore the browser registers that the user has clicked on a link, we can detect that they've hovered the mouse over it (on desktop) or that a `touchstart` or `mousedown` event was triggered. In both cases, we can make an educated guess that a `click` event is coming.\n\nSvelteKit can use this information to get a head start on importing the code and fetching the page's data, which can give us an extra couple of hundred milliseconds — the difference between a user interface that feels laggy and one that feels snappy.\n\nWe can control this behaviour with the `data-sveltekit-preload-data` attribute, which can have one of two values:\n\n- `\"hover\"` means that preloading will start if the mouse comes to a rest over a link. On mobile, preloading begins on `touchstart`\n- `\"tap\"` means that preloading will start as soon as a `touchstart` or `mousedown` event is registered\n\nThe default project template has a `data-sveltekit-preload-data=\"hover\"` attribute applied to the `<body>` element in `src/app.html`, meaning that every link is preloaded on hover by default:\n\n```html\n<body data-sveltekit-preload-data=\"hover\">\n\t<div style=\"display: contents\">%sveltekit.body%</div>\n</body>\n```\n\nSometimes, calling `load` when the user hovers over a link might be undesirable, either because it's likely to result in false positives (a click needn't follow a hover) or because data is updating very quickly and a delay could mean staleness.\n\nIn these cases, you can specify the `\"tap\"` value, which causes SvelteKit to call `load` only when the user taps or clicks on a link:\n\n```html\n<a data-sveltekit-preload-data=\"tap\" href=\"/stonks\">\n\tGet current stonk values\n</a>\n```\n\n> [!NOTE] You can also programmatically invoke `preloadData` from `$app/navigation`.\n\nData will never be preloaded if the user has chosen reduced data usage, meaning [`navigator.connection.saveData`](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData) is `true`.\n\n## data-sveltekit-preload-code\n\nEven in cases where you don't want to preload _data_ for a link, it can be beneficial to preload the _code_. The `data-sveltekit-preload-code` attribute works similarly to `data-sveltekit-preload-data`, except that it can take one of four values, in decreasing 'eagerness':\n\n- `\"eager\"` means that links will be preloaded straight away\n- `\"viewport\"` means that links will be preloaded once they enter the viewport\n- `\"hover\"` - as above, except that only code is preloaded\n- `\"tap\"` - as above, except that only code is preloaded\n\nNote that `viewport` and `eager` only apply to links that are present in the DOM immediately following navigation — if a link is added later (in an `{#if ...}` block, for example) it will not be preloaded until triggered by `hover` or `tap`. This is to avoid performance pitfalls resulting from aggressively observing the DOM for changes.\n\n> [!NOTE] Since preloading code is a prerequisite for preloading data, this attribute will only have an effect if it specifies a more eager value than any `data-sveltekit-preload-data` attribute that is present.\n\nAs with `data-sveltekit-preload-data`, this attribute will be ignored if the user has chosen reduced data usage.\n\n## data-sveltekit-reload\n\nOccasionally, we need to tell SvelteKit not to handle a link, but allow the browser to handle it. Adding a `data-sveltekit-reload` attribute to a link...\n\n```html\n<a data-sveltekit-reload href=\"/path\">Path</a>\n```\n\n...will cause a full-page navigation when the link is clicked.\n\nLinks with a `rel=\"external\"` attribute will receive the same treatment. In addition, they will be ignored during [prerendering](page-options#prerender).\n\n## data-sveltekit-replacestate\n\nSometimes you don't want navigation to create a new entry in the browser's session history. Adding a `data-sveltekit-replacestate` attribute to a link...\n\n```html\n<a data-sveltekit-replacestate href=\"/path\">Path</a>\n```\n\n...will replace the current `history` entry rather than creating a new one with `pushState` when the link is clicked.\n\n## data-sveltekit-keepfocus\n\nSometimes you don't want [focus to be reset](accessibility#Focus-management) after navigation. For example, maybe you have a search form that submits as the user is typing, and you want to keep focus on the text input.  Adding a `data-sveltekit-keepfocus` attribute to it...\n\n```html\n<form data-sveltekit-keepfocus>\n\t<input type=\"text\" name=\"query\">\n</form>\n```\n\n...will cause the currently focused element to retain focus after navigation. In general, avoid using this attribute on links, since the focused element would be the `<a>` tag (and not a previously focused element) and screen reader and other assistive technology users often expect focus to be moved after a navigation. You should also only use this attribute on elements that still exist after navigation. If the element no longer exists, the user's focus will be lost, making for a confusing experience for assistive technology users.\n\n## data-sveltekit-noscroll\n\nWhen navigating to internal links, SvelteKit mirrors the browser's default navigation behaviour: it will change the scroll position to 0,0 so that the user is at the very top left of the page (unless the link includes a `#hash`, in which case it will scroll to the element with a matching ID).\n\nIn certain cases, you may wish to disable this behaviour. Adding a `data-sveltekit-noscroll` attribute to a link...\n\n```html\n<a href=\"path\" data-sveltekit-noscroll>Path</a>\n```\n\n...will prevent scrolling after the link is clicked.\n\n## Disabling options\n\nTo disable any of these options inside an element where they have been enabled, use the `\"false\"` value:\n\n```html\n<div data-sveltekit-preload-data>\n\t<!-- these links will be preloaded -->\n\t<a href=\"/a\">a</a>\n\t<a href=\"/b\">b</a>\n\t<a href=\"/c\">c</a>\n\n\t<div data-sveltekit-preload-data=\"false\">\n\t\t<!-- these links will NOT be preloaded -->\n\t\t<a href=\"/d\">d</a>\n\t\t<a href=\"/e\">e</a>\n\t\t<a href=\"/f\">f</a>\n\t</div>\n</div>\n```\n\nTo apply an attribute to an element conditionally, do this:\n\n```svelte\n<div data-sveltekit-preload-data={condition ? 'hover' : false}>\n```",
+		"kit/service-workers": "Service workers act as proxy servers that handle network requests inside your app. This makes it possible to make your app work offline, but even if you don't need offline support (or can't realistically implement it because of the type of app you're building), it's often worth using service workers to speed up navigation by precaching your built JS and CSS.\n\nIn SvelteKit, if you have a `src/service-worker.js` file (or `src/service-worker/index.js`) it will be bundled and automatically registered. You can change the [location of your service worker](configuration#files) if you need to.\n\nYou can [disable automatic registration](configuration#serviceWorker) if you need to register the service worker with your own logic or use another solution. The default registration looks something like this:\n\n```js\nif ('serviceWorker' in navigator) {\n\taddEventListener('load', function () {\n\t\tnavigator.serviceWorker.register('./path/to/service-worker.js');\n\t});\n}\n```\n\n## Inside the service worker\n\nInside the service worker you have access to the [`$service-worker` module]($service-worker), which provides you with the paths to all static assets, build files and prerendered pages. You're also provided with an app version string, which you can use for creating a unique cache name, and the deployment's `base` path. If your Vite config specifies `define` (used for global variable replacements), this will be applied to service workers as well as your server/client builds.\n\nThe following example caches the built app and any files in `static` eagerly, and caches all other requests as they happen. This would make each page work offline once visited.\n\n```js\n/// file: src/service-worker.js\n// Disables access to DOM typings like `HTMLElement` which are not available\n// inside a service worker and instantiates the correct globals\n/// <reference no-default-lib=\"true\"/>\n/// <reference lib=\"esnext\" />\n/// <reference lib=\"webworker\" />\n\n// Ensures that the `$service-worker` import has proper type definitions\n/// <reference types=\"@sveltejs/kit\" />\n\n// Only necessary if you have an import from `$env/static/public`\n/// <reference types=\"../.svelte-kit/ambient.d.ts\" />\n\nimport { build, files, version } from '$service-worker';\n\n// This gives `self` the correct types\nconst self = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (globalThis.self));\n\n// Create a unique cache name for this deployment\nconst CACHE = `cache-${version}`;\n\nconst ASSETS = [\n\t...build, // the app itself\n\t...files  // everything in `static`\n];\n\nself.addEventListener('install', (event) => {\n\t// Create a new cache and add all files to it\n\tasync function addFilesToCache() {\n\t\tconst cache = await caches.open(CACHE);\n\t\tawait cache.addAll(ASSETS);\n\t}\n\n\tevent.waitUntil(addFilesToCache());\n});\n\nself.addEventListener('activate', (event) => {\n\t// Remove previous cached data from disk\n\tasync function deleteOldCaches() {\n\t\tfor (const key of await caches.keys()) {\n\t\t\tif (key !== CACHE) await caches.delete(key);\n\t\t}\n\t}\n\n\tevent.waitUntil(deleteOldCaches());\n});\n\nself.addEventListener('fetch', (event) => {\n\t// ignore POST requests etc\n\tif (event.request.method !== 'GET') return;\n\n\tasync function respond() {\n\t\tconst url = new URL(event.request.url);\n\t\tconst cache = await caches.open(CACHE);\n\n\t\t// `build`/`files` can always be served from the cache\n\t\tif (ASSETS.includes(url.pathname)) {\n\t\t\tconst response = await cache.match(url.pathname);\n\n\t\t\tif (response) {\n\t\t\t\treturn response;\n\t\t\t}\n\t\t}\n\n\t\t// for everything else, try the network first, but\n\t\t// fall back to the cache if we're offline\n\t\ttry {\n\t\t\tconst response = await fetch(event.request);\n\n\t\t\t// if we're offline, fetch can return a value that is not a Response\n\t\t\t// instead of throwing - and we can't pass this non-Response to respondWith\n\t\t\tif (!(response instanceof Response)) {\n\t\t\t\tthrow new Error('invalid response from fetch');\n\t\t\t}\n\n\t\t\tif (response.status === 200) {\n\t\t\t\tcache.put(event.request, response.clone());\n\t\t\t}\n\n\t\t\treturn response;\n\t\t} catch (err) {\n\t\t\tconst response = await cache.match(event.request);\n\n\t\t\tif (response) {\n\t\t\t\treturn response;\n\t\t\t}\n\n\t\t\t// if there's no cache, then just error out\n\t\t\t// as there is nothing we can do to respond to this request\n\t\t\tthrow err;\n\t\t}\n\t}\n\n\tevent.respondWith(respond());\n});\n```\n\n> [!NOTE] Be careful when caching! In some cases, stale data might be worse than data that's unavailable while offline. Since browsers will empty caches if they get too full, you should also be careful about caching large assets like video files.\n\n## During development\n\nThe service worker is bundled for production, but not during development. For that reason, only browsers that support [modules in service workers](https://web.dev/es-modules-in-sw) will be able to use them at dev time. If you are manually registering your service worker, you will need to pass the `{ type: 'module' }` option in development:\n\n```js\nimport { dev } from '$app/environment';\n\nnavigator.serviceWorker.register('/service-worker.js', {\n\ttype: dev ? 'module' : 'classic'\n});\n```\n\n> [!NOTE] `build` and `prerendered` are empty arrays during development\n\n## Other solutions\n\nSvelteKit's service worker implementation is designed to be easy to work with and is probably a good solution for most users. However, outside of SvelteKit, many PWA applications leverage the [Workbox](https://web.dev/learn/pwa/workbox) library. If you're used to using Workbox you may prefer [Vite PWA plugin](https://vite-pwa-org.netlify.app/frameworks/sveltekit.html).\n\n## References\n\nFor more general information on service workers, we recommend [the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers).",
+		"kit/server-only-modules": "Like a good friend, SvelteKit keeps your secrets. When writing your backend and frontend in the same repository, it can be easy to accidentally import sensitive data into your front-end code (environment variables containing API keys, for example). SvelteKit provides a way to prevent this entirely: server-only modules.\n\n## Private environment variables\n\nThe [`$env/static/private`]($env-static-private) and [`$env/dynamic/private`]($env-dynamic-private) modules can only be imported into modules that only run on the server, such as [`hooks.server.js`](hooks#Server-hooks) or [`+page.server.js`](routing#page-page.server.js).\n\n## Server-only utilities\n\nThe [`$app/server`]($app-server) module, which contains a [`read`]($app-server#read) function for reading assets from the filesystem, can likewise only be imported by code that runs on the server.\n\n## Your modules\n\nYou can make your own modules server-only in two ways:\n\n- adding `.server` to the filename, e.g. `secrets.server.js`\n- placing them in `$lib/server`, e.g. `$lib/server/secrets.js`\n\n## How it works\n\nAny time you have public-facing code that imports server-only code (whether directly or indirectly)...\n\n```js\n// @errors: 7005\n/// file: $lib/server/secrets.js\nexport const atlantisCoordinates = [/* redacted */];\n```\n\n```js\n// @errors: 2307 7006 7005\n/// file: src/routes/utils.js\nexport { atlantisCoordinates } from '$lib/server/secrets.js';\n\nexport const add = (a, b) => a + b;\n```\n\n```html\n/// file: src/routes/+page.svelte\n<script>\n\timport { add } from './utils.js';\n</script>\n```\n\n...SvelteKit will error:\n\n```\nCannot import $lib/server/secrets.ts into code that runs in the browser, as this could leak sensitive information.\n\n src/routes/+page.svelte imports\n  src/routes/utils.js imports\n   $lib/server/secrets.ts\n\nIf you're only using the import as a type, change it to `import type`.\n```\n\nEven though the public-facing code — `src/routes/+page.svelte` — only uses the `add` export and not the secret `atlantisCoordinates` export, the secret code could end up in JavaScript that the browser downloads, and so the import chain is considered unsafe.\n\nThis feature also works with dynamic imports, even interpolated ones like ``await import(`./${foo}.js`)``.\n\n> [!NOTE] Unit testing frameworks like Vitest do not distinguish between server-only and public-facing code. For this reason, illegal import detection is disabled when running tests, as determined by `process.env.TEST === 'true'`.\n\n## Further reading\n\n- [Tutorial: Environment variables](/tutorial/kit/env-static-private)",
+		"kit/snapshots": "Ephemeral DOM state — like scroll positions on sidebars, the content of `<input>` elements and so on — is discarded when you navigate from one page to another.\n\nFor example, if the user fills out a form but navigates away and then back before submitting, or if the user refreshes the page, the values they filled in will be lost. In cases where it's valuable to preserve that input, you can take a _snapshot_ of DOM state, which can then be restored if the user navigates back.\n\nTo do this, export a `snapshot` object with `capture` and `restore` methods from a `+page.svelte` or `+layout.svelte`:\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\tlet comment = $state('');\n\n\t/** @type {import('./$types').Snapshot<string>} */\n\texport const snapshot = {\n\t\tcapture: () => comment,\n\t\trestore: (value) => comment = value\n\t};\n</script>\n\n<form method=\"POST\">\n\t<label for=\"comment\">Comment</label>\n\t<textarea id=\"comment\" bind:value={comment} />\n\t<button>Post comment</button>\n</form>\n```\n\nWhen you navigate away from this page, the `capture` function is called immediately before the page updates, and the returned value is associated with the current entry in the browser's history stack. If you navigate back, the `restore` function is called with the stored value as soon as the page is updated.\n\nThe data must be serializable as JSON so that it can be persisted to `sessionStorage`. This allows the state to be restored when the page is reloaded, or when the user navigates back from a different site.\n\n> [!NOTE] Avoid returning very large objects from `capture` — once captured, objects will be retained in memory for the duration of the session, and in extreme cases may be too large to persist to `sessionStorage`.",
+		"kit/shallow-routing": "As you navigate around a SvelteKit app, you create _history entries_. Clicking the back and forward buttons traverses through this list of entries, re-running any `load` functions and replacing page components as necessary.\n\nSometimes, it's useful to create history entries _without_ navigating. For example, you might want to show a modal dialog that the user can dismiss by navigating back. This is particularly valuable on mobile devices, where swipe gestures are often more natural than interacting directly with the UI. In these cases, a modal that is _not_ associated with a history entry can be a source of frustration, as a user may swipe backwards in an attempt to dismiss it and find themselves on the wrong page.\n\nSvelteKit makes this possible with the [`pushState`]($app-navigation#pushState) and [`replaceState`]($app-navigation#replaceState) functions, which allow you to associate state with a history entry without navigating. For example, to implement a history-driven modal:\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\timport { pushState } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\n\tfunction showModal() {\n\t\tpushState('', {\n\t\t\tshowModal: true\n\t\t});\n\t}\n</script>\n\n{#if page.state.showModal}\n\t<Modal close={() => history.back()} />\n{/if}\n```\n\nThe modal can be dismissed by navigating back (unsetting `page.state.showModal`) or by interacting with it in a way that causes the `close` callback to run, which will navigate back programmatically.\n\n## API\n\nThe first argument to `pushState` is the URL, relative to the current URL. To stay on the current URL, use `''`.\n\nThe second argument is the new page state, which can be accessed via the [page object]($app-state#page) as `page.state`. You can make page state type-safe by declaring an [`App.PageState`](types#PageState) interface (usually in `src/app.d.ts`).\n\nTo set page state without creating a new history entry, use `replaceState` instead of `pushState`.\n\n> [!LEGACY]\n> `page.state` from `$app/state` was added in SvelteKit 2.12. If you're using an earlier version or are using Svelte 4, use `$page.state` from `$app/stores` instead.\n\n## Loading data for a route\n\nWhen shallow routing, you may want to render another `+page.svelte` inside the current page. For example, clicking on a photo thumbnail could pop up the detail view without navigating to the photo page.\n\nFor this to work, you need to load the data that the `+page.svelte` expects. A convenient way to do this is to use [`preloadData`]($app-navigation#preloadData) inside the `click` handler of an `<a>` element. If the element (or a parent) uses [`data-sveltekit-preload-data`](link-options#data-sveltekit-preload-data), the data will have already been requested, and `preloadData` will reuse that request.\n\n```svelte\n<!--- file: src/routes/photos/+page.svelte --->\n<script>\n\timport { preloadData, pushState, goto } from '$app/navigation';\n\timport { page } from '$app/state';\n\timport Modal from './Modal.svelte';\n\timport PhotoPage from './[id]/+page.svelte';\n\n\tlet { data } = $props();\n</script>\n\n{#each data.thumbnails as thumbnail}\n\t<a\n\t\thref=\"/photos/{thumbnail.id}\"\n\t\tonclick={async (e) => {\n\t\t\tif (innerWidth < 640        // bail if the screen is too small\n\t\t\t\t|| e.shiftKey             // or the link is opened in a new window\n\t\t\t\t|| e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey)\n\t\t\t\t// should also consider clicking with a mouse scroll wheel\n\t\t\t) return;\n\n\t\t\t// prevent navigation\n\t\t\te.preventDefault();\n\n\t\t\tconst { href } = e.currentTarget;\n\n\t\t\t// run `load` functions (or rather, get the result of the `load` functions\n\t\t\t// that are already running because of `data-sveltekit-preload-data`)\n\t\t\tconst result = await preloadData(href);\n\n\t\t\tif (result.type === 'loaded' && result.status === 200) {\n\t\t\t\tpushState(href, { selected: result.data });\n\t\t\t} else {\n\t\t\t\t// something bad happened! try navigating\n\t\t\t\tgoto(href);\n\t\t\t}\n\t\t}}\n\t>\n\t\t<img alt={thumbnail.alt} src={thumbnail.src} />\n\t</a>\n{/each}\n\n{#if page.state.selected}\n\t<Modal onclose={() => history.back()}>\n\t\t<!-- pass page data to the +page.svelte component,\n\t\t     just like SvelteKit would on navigation -->\n\t\t<PhotoPage data={page.state.selected} />\n\t</Modal>\n{/if}\n```\n\n## Caveats\n\nDuring server-side rendering, `page.state` is always an empty object. The same is true for the first page the user lands on — if the user reloads the page (or returns from another document), state will _not_ be applied until they navigate.\n\nShallow routing is a feature that requires JavaScript to work. Be mindful when using it and try to think of sensible fallback behavior in case JavaScript isn't available.",
+		"kit/observability": "<blockquote class=\"since note\">\n\t<p>Available since 2.31</p>\n</blockquote>\n\nSometimes, you may need to observe how your application is behaving in order to improve performance or find the root cause of a pesky bug. To help with this, SvelteKit can emit server-side [OpenTelemetry](https://opentelemetry.io) spans for the following:\n\n- The [`handle`](hooks#Server-hooks-handle) hook and `handle` functions running in a [`sequence`](@sveltejs-kit-hooks#sequence) (these will show up as children of each other and the root `handle` hook)\n- Server [`load`](load) functions and universal `load` functions when they're run on the server\n- [Form actions](form-actions)\n- [Remote functions](remote-functions)\n\nJust telling SvelteKit to emit spans won't get you far, though — you need to actually collect them somewhere to be able to view them. SvelteKit provides `src/instrumentation.server.ts` as a place to write your tracing setup and instrumentation code. It's guaranteed to be run prior to your application code being imported, providing your deployment platform supports it and your adapter is aware of it.\n\nBoth of these features are currently experimental, meaning they are likely to contain bugs and are subject to change without notice. You must opt in by adding the `kit.experimental.tracing.server` and `kit.experimental.instrumentation.server` option in your `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\texperimental: {\n\t\t\t+++tracing: {\n\t\t\t\tserver: true\n\t\t\t},\n\t\t\tinstrumentation: {\n\t\t\t\tserver: true\n\t\t\t}+++\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\n> [!NOTE] Tracing — and more significantly, observability instrumentation — can have a nontrivial overhead. Before you go all-in on tracing, consider whether or not you really need it, or if it might be more appropriate to turn it on in development and preview environments only.\n\n## Augmenting the built-in tracing\n\nSvelteKit provides access to the `root` span and the `current` span on the request event. The root span is the one associated with your root `handle` function, and the current span could be associated with `handle`, `load`, a form action, or a remote function, depending on the context. You can annotate these spans with any attributes you wish to record:\n\n```js\n/// file: $lib/authenticate.ts\n\n// @filename: ambient.d.ts\ndeclare module '$lib/auth-core' {\n\texport function getAuthenticatedUser(): Promise<{ id: string }>\n}\n\n// @filename: index.js\n// ---cut---\nimport { getRequestEvent } from '$app/server';\nimport { getAuthenticatedUser } from '$lib/auth-core';\n\nasync function authenticate() {\n\tconst user = await getAuthenticatedUser();\n\tconst event = getRequestEvent();\n\tevent.tracing.root.setAttribute('userId', user.id);\n}\n```\n\n## Development quickstart\n\nTo view your first trace, you'll need to set up a local collector. We'll use [Jaeger](https://www.jaegertracing.io/docs/getting-started/) in this example, as they provide an easy-to-use quickstart command. Once your collector is running locally:\n\n- Turn on the experimental flags mentioned earlier in your `svelte.config.js` file\n- Use your package manager to install the dependencies you'll need:\n  ```sh\n  npm i @opentelemetry/sdk-node @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-proto import-in-the-middle\n  ```\n- Create `src/instrumentation.server.js` with the following:\n\n```js\n/// file: src/instrumentation.server.js\nimport { NodeSDK } from '@opentelemetry/sdk-node';\nimport { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';\nimport { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';\nimport { createAddHookMessageChannel } from 'import-in-the-middle';\nimport { register } from 'node:module';\n\nconst { registerOptions } = createAddHookMessageChannel();\nregister('import-in-the-middle/hook.mjs', import.meta.url, registerOptions);\n\nconst sdk = new NodeSDK({\n\tserviceName: 'test-sveltekit-tracing',\n\ttraceExporter: new OTLPTraceExporter(),\n\tinstrumentations: [getNodeAutoInstrumentations()]\n});\n\nsdk.start();\n```\n\nNow, server-side requests will begin generating traces, which you can view in Jaeger's web console at [localhost:16686](http://localhost:16686).\n\n## `@opentelemetry/api`\n\nSvelteKit uses `@opentelemetry/api` to generate its spans. This is declared as an optional peer dependency so that users not needing traces see no impact on install size or runtime performance. In most cases, if you're configuring your application to collect SvelteKit's spans, you'll end up installing a library like `@opentelemetry/sdk-node` or `@vercel/otel`, which in turn depend on `@opentelemetry/api`, which will satisfy SvelteKit's dependency as well. If you see an error from SvelteKit telling you it can't find `@opentelemetry/api`, it may just be because you haven't set up your trace collection yet. If you _have_ done that and are still seeing the error, you can install `@opentelemetry/api` yourself.",
+		"kit/packaging": "You can use SvelteKit to build apps as well as component libraries, using the `@sveltejs/package` package (`npx sv create` has an option to set this up for you).\n\nWhen you're creating an app, the contents of `src/routes` is the public-facing stuff; [`src/lib`]($lib) contains your app's internal library.\n\nA component library has the exact same structure as a SvelteKit app, except that `src/lib` is the public-facing bit, and your root `package.json` is used to publish the package. `src/routes` might be a documentation or demo site that accompanies the library, or it might just be a sandbox you use during development.\n\nRunning the `svelte-package` command from `@sveltejs/package` will take the contents of `src/lib` and generate a `dist` directory (which can be [configured](#Options)) containing the following:\n\n- All the files in `src/lib`. Svelte components will be preprocessed, TypeScript files will be transpiled to JavaScript.\n- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](#Options), but we strongly recommend against it — people using your library might use TypeScript, for which they require these type definition files.\n\n> [!NOTE] `@sveltejs/package` version 1 generated a `package.json`. This is no longer the case and it will now use the `package.json` from your project and validate that it is correct instead. If you're still on version 1, see [this PR](https://github.com/sveltejs/kit/pull/8922) for migration instructions.\n\n## Anatomy of a package.json\n\nSince you're now building a library for public use, the contents of your `package.json` will become more important. Through it, you configure the entry points of your package, which files are published to npm, and which dependencies your library has. Let's go through the most important fields one by one.\n\n### name\n\nThis is the name of your package. It will be available for others to install using that name, and visible on `https://npmjs.com/package/<name>`.\n\n```json\n{\n\t\"name\": \"your-library\"\n}\n```\n\nRead more about it [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#name).\n\n### license\n\nEvery package should have a license field so people know how they are allowed to use it. A very popular license which is also very permissive in terms of distribution and reuse without warranty is `MIT`.\n\n```json\n{\n\t\"license\": \"MIT\"\n}\n```\n\nRead more about it [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#license). Note that you should also include a `LICENSE` file in your package.\n\n### files\n\nThis tells npm which files it will pack up and upload to npm. It should contain your output folder (`dist` by default). Your `package.json` and `README` and `LICENSE` will always be included, so you don't need to specify them.\n\n```json\n{\n\t\"files\": [\"dist\"]\n}\n```\n\nTo exclude unnecessary files (such as unit tests, or modules that are only imported from `src/routes` etc) you can add them to an `.npmignore` file. This will result in smaller packages that are faster to install.\n\nRead more about it [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#files).\n\n### exports\n\nThe `\"exports\"` field contains the package's entry points. If you set up a new library project through `npx sv create`, it's set to a single export, the package root:\n\n```json\n{\n\t\"exports\": {\n\t\t\".\": {\n\t\t\t\"types\": \"./dist/index.d.ts\",\n\t\t\t\"svelte\": \"./dist/index.js\"\n\t\t}\n\t}\n}\n```\n\nThis tells bundlers and tooling that your package only has one entry point, the root, and everything should be imported through that, like this:\n\n```js\n// @errors: 2307\nimport { Something } from 'your-library';\n```\n\nThe `types` and `svelte` keys are [export conditions](https://nodejs.org/api/packages.html#conditional-exports). They tell tooling what file to import when they look up the `your-library` import:\n\n- TypeScript sees the `types` condition and looks up the type definition file. If you don't publish type definitions, omit this condition.\n- Svelte-aware tooling sees the `svelte` condition and knows this is a Svelte component library. If you publish a library that does not export any Svelte components and that could also work in non-Svelte projects (for example a Svelte store library), you can replace this condition with `default`.\n\n> [!NOTE] Previous versions of `@sveltejs/package` also added a `package.json` export. This is no longer part of the template because all tooling can now deal with a `package.json` not being explicitly exported.\n\nYou can adjust `exports` to your liking and provide more entry points. For example, if instead of a `src/lib/index.js` file that re-exported components you wanted to expose a `src/lib/Foo.svelte` component directly, you could create the following export map...\n\n```json\n{\n\t\"exports\": {\n\t\t\"./Foo.svelte\": {\n\t\t\t\"types\": \"./dist/Foo.svelte.d.ts\",\n\t\t\t\"svelte\": \"./dist/Foo.svelte\"\n\t\t}\n\t}\n}\n```\n\n...and a consumer of your library could import the component like so:\n\n```js\n// @filename: ambient.d.ts\ndeclare module 'your-library/Foo.svelte';\n\n// @filename: index.js\n// ---cut---\nimport Foo from 'your-library/Foo.svelte';\n```\n\n> [!NOTE] Beware that doing this will need additional care if you provide type definitions. Read more about the caveat [here](#TypeScript)\n\nIn general, each key of the exports map is the path the user will have to use to import something from your package, and the value is the path to the file that will be imported or a map of export conditions which in turn contains these file paths.\n\nRead more about `exports` [here](https://nodejs.org/docs/latest-v18.x/api/packages.html#package-entry-points).\n\n### svelte\n\nThis is a legacy field that enabled tooling to recognise Svelte component libraries. It's no longer necessary when using the `svelte` [export condition](#Anatomy-of-a-package.json-exports), but for backwards compatibility with outdated tooling that doesn't yet know about export conditions it's good to keep it around. It should point towards your root entry point.\n\n```json\n{\n\t\"svelte\": \"./dist/index.js\"\n}\n```\n\n### sideEffects\n\nThe `sideEffects` field in `package.json` is used by bundlers to determine if a module may contain code that has side effects. A module is considered to have side effects if it makes changes that are observable from other scripts outside the module when it's imported. For example, side effects include modifying global variables or the prototype of built-in JavaScript objects. Because a side effect could potentially affect the behavior of other parts of the application, these files/modules will be included in the final bundle regardless of whether their exports are used in the application. It is a best practice to avoid side effects in your code.\n\nSetting the `sideEffects` field in `package.json` can help the bundler to be more aggressive in eliminating unused exports from the final bundle, a process known as tree-shaking. This results in smaller and more efficient bundles. Different bundlers handle `sideEffects` in various manners. While not necessary for Vite, we recommend that libraries state that all CSS files have side effects so that your library will be [compatible with webpack](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free). This is the configuration that comes with newly created projects:\n\n```json\n/// file: package.json\n{\n\t\"sideEffects\": [\"**/*.css\"]\n}\n```\n\n> [!NOTE] If the scripts in your library have side effects, ensure that you update the `sideEffects` field. All scripts are marked as side effect free by default in newly created projects. If a file with side effects is incorrectly marked as having no side effects, it can result in broken functionality.\n\nIf your package has files with side effects, you can specify them in an array:\n\n```json\n/// file: package.json\n{\n    \"sideEffects\": [\n    \t\"**/*.css\",\n    \t\"./dist/sideEffectfulFile.js\"\n    ]\n}\n```\n\nThis will treat only the specified files as having side effects.\n\n## TypeScript\n\nYou should ship type definitions for your library even if you don't use TypeScript yourself so that people who do get proper intellisense when using your library. `@sveltejs/package` makes the process of generating types mostly opaque to you. By default, when packaging your library, type definitions are auto-generated for JavaScript, TypeScript and Svelte files. All you need to ensure is that the `types` condition in the [exports](#Anatomy-of-a-package.json-exports) map points to the correct files. When initialising a library project through `npx sv create`, this is automatically setup for the root export.\n\nIf you have something else than a root export however — for example providing a `your-library/foo` import — you need to take additional care for providing type definitions. Unfortunately, TypeScript by default will _not_ resolve the `types` condition for an export like `{ \"./foo\": { \"types\": \"./dist/foo.d.ts\", ... }}`. Instead, it will search for a `foo.d.ts` relative to the root of your library (i.e. `your-library/foo.d.ts` instead of `your-library/dist/foo.d.ts`). To fix this, you have two options:\n\nThe first option is to require people using your library to set the `moduleResolution` option in their `tsconfig.json` (or `jsconfig.json`) to `bundler` (available since TypeScript 5, the best and recommended option in the future), `node16` or `nodenext`. This opts TypeScript into actually looking at the exports map and resolving the types correctly.\n\nThe second option is to (ab)use the `typesVersions` feature from TypeScript to wire up the types. This is a field inside `package.json` TypeScript uses to check for different type definitions depending on the TypeScript version, and also contains a path mapping feature for that. We leverage that path mapping feature to get what we want. For the mentioned `foo` export above, the corresponding `typesVersions` looks like this:\n\n```json\n{\n\t\"exports\": {\n\t\t\"./foo\": {\n\t\t\t\"types\": \"./dist/foo.d.ts\",\n\t\t\t\"svelte\": \"./dist/foo.js\"\n\t\t}\n\t},\n\t\"typesVersions\": {\n\t\t\">4.0\": {\n\t\t\t\"foo\": [\"./dist/foo.d.ts\"]\n\t\t}\n\t}\n}\n```\n\n`>4.0` tells TypeScript to check the inner map if the used TypeScript version is greater than 4 (which should in practice always be true). The inner map tells TypeScript that the typings for `your-library/foo` are found within `./dist/foo.d.ts`, which essentially replicates the `exports` condition. You also have `*` as a wildcard at your disposal to make many type definitions at once available without repeating yourself. Note that if you opt into `typesVersions` you have to declare all type imports through it, including the root import (which is defined as `\"index.d.ts\": [..]`).\n\nYou can read more about that feature [here](https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#version-selection-with-typesversions).\n\n## Best practices\n\nYou should avoid using SvelteKit-specific modules like `$app/environment` in your packages unless you intend for them to only be consumable by other SvelteKit projects. E.g. rather than using `import { browser } from '$app/environment'` you could use `import { BROWSER } from 'esm-env'` ([see esm-env docs](https://github.com/benmccann/esm-env)). You may also wish to pass in things like the current URL or a navigation action as a prop rather than relying directly on `$app/state`, `$app/navigation`, etc. Writing your app in this more generic fashion will also make it easier to setup tools for testing, UI demos and so on.\n\nEnsure that you add [aliases](configuration#alias) via `svelte.config.js` (not `vite.config.js` or `tsconfig.json`), so that they are processed by `svelte-package`.\n\nYou should think carefully about whether or not the changes you make to your package are a bug fix, a new feature, or a breaking change, and update the package version accordingly. Note that if you remove any paths from `exports` or any `export` conditions inside them from your existing library, that should be regarded as a breaking change.\n\n```json\n{\n\t\"exports\": {\n\t\t\".\": {\n\t\t\t\"types\": \"./dist/index.d.ts\",\n// changing `svelte` to `default` is a breaking change:\n---\t\t\t\"svelte\": \"./dist/index.js\"---\n+++\t\t\t\"default\": \"./dist/index.js\"+++\n\t\t},\n// removing this is a breaking change:\n---\t\t\"./foo\": {\n\t\t\t\"types\": \"./dist/foo.d.ts\",\n\t\t\t\"svelte\": \"./dist/foo.js\",\n\t\t\t\"default\": \"./dist/foo.js\"\n\t\t},---\n// adding this is ok:\n+++\t\t\"./bar\": {\n\t\t\t\"types\": \"./dist/bar.d.ts\",\n\t\t\t\"svelte\": \"./dist/bar.js\",\n\t\t\t\"default\": \"./dist/bar.js\"\n\t\t}+++\n\t}\n}\n```\n\n## Source maps\n\nYou can create so-called declaration maps (`d.ts.map` files) by setting `\"declarationMap\": true` in your `tsconfig.json`. This will allow editors such as VS Code to go to the original `.ts` or `.svelte` file when using features like _Go to Definition_. This means you also need to publish your source files alongside your dist folder in a way that the relative path inside the declaration files leads to a file on disk. Assuming that you have all your library code inside `src/lib` as suggested by Svelte's CLI, this is as simple as adding `src/lib` to `files` in your `package.json`:\n\n```json\n{\n\t\"files\": [\n\t\t\"dist\",\n\t\t\"!dist/**/*.test.*\",\n\t\t\"!dist/**/*.spec.*\",\n\t\t+++\"src/lib\",\n\t\t\"!src/lib/**/*.test.*\",\n\t\t\"!src/lib/**/*.spec.*\"+++\n\t]\n}\n```\n\n## Options\n\n`svelte-package` accepts the following options:\n\n- `-w`/`--watch` — watch files in `src/lib` for changes and rebuild the package\n- `-i`/`--input` — the input directory which contains all the files of the package. Defaults to `src/lib`\n- `-o`/`--output` — the output directory where the processed files are written to. Your `package.json`'s `exports` should point to files inside there, and the `files` array should include that folder. Defaults to `dist`\n- `-p`/`--preserve-output` — prevent deletion of the output directory before packaging. Defaults to `false`, which means that the output directory will be emptied first\n- `-t`/`--types` — whether or not to create type definitions (`d.ts` files). We strongly recommend doing this as it fosters ecosystem library quality. Defaults to `true`\n- `--tsconfig` - the path to a tsconfig or jsconfig. When not provided, searches for the next upper tsconfig/jsconfig in the workspace path.\n\n## Publishing\n\nTo publish the generated package:\n\n```sh\nnpm publish\n```\n\n## Caveats\n\nAll relative file imports need to be fully specified, adhering to Node's ESM algorithm. This means that for a file like `src/lib/something/index.js`, you must include the filename with the extension:\n\n```js\n// @errors: 2307\nimport { something } from './something+++/index.js+++';\n```\n\nIf you are using TypeScript, you need to import `.ts` files the same way, but using a `.js` file ending, _not_ a `.ts` file ending. (This is a TypeScript design decision outside our control.) Setting `\"moduleResolution\": \"NodeNext\"` in your `tsconfig.json` or `jsconfig.json` will help you with this.\n\nAll files except Svelte files (preprocessed) and TypeScript files (transpiled to JavaScript) are copied across as-is.",
+		"kit/auth": "Auth refers to authentication and authorization, which are common needs when building a web application. Authentication means verifying that the user is who they say they are based on their provided credentials. Authorization means determining which actions they are allowed to take.\n\n## Sessions vs tokens\n\nAfter the user has provided their credentials such as a username and password, we want to allow them to use the application without needing to provide their credentials again for future requests. Users are commonly authenticated on subsequent requests with either a session identifier or signed token such as a JSON Web Token (JWT).\n\nSession IDs are most commonly stored in a database. They can be immediately revoked, but require a database query to be made on each request.\n\nIn contrast, JWT generally are not checked against a datastore, which means they cannot be immediately revoked. The advantage of this method is improved latency and reduced load on your datastore.\n\n## Integration points\n\nAuth [cookies](@sveltejs-kit#Cookies) can be checked inside [server hooks](hooks#Server-hooks). If a user is found matching the provided credentials, the user information can be stored in [`locals`](hooks#Server-hooks-locals).\n\n## Guides\n\n[Lucia](https://lucia-auth.com/) is a good reference for session-based web app auth. It contains example code snippets and projects for implementing session-based auth within SvelteKit and other JS projects. You can add code which follows the Lucia guide to your project with `npx sv create` when creating a new project or `npx sv add lucia` for an existing project.\n\nAn auth system is tightly coupled to a web framework because most of the code lies in validating user input, handling errors, and directing users to the appropriate next page. As a result, many of the generic JS auth libraries include one or more web frameworks within them. For this reason, many users will find it preferrable to follow a SvelteKit-specific guide such as the examples found in [Lucia](https://lucia-auth.com/) rather than having multiple web frameworks inside their project.",
+		"kit/performance": "Out of the box, SvelteKit does a lot of work to make your applications as performant as possible:\n\n- Code-splitting, so that only the code you need for the current page is loaded\n- Asset preloading, so that 'waterfalls' (of files requesting other files) are prevented\n- File hashing, so that your assets can be cached forever\n- Request coalescing, so that data fetched from separate server `load` functions is grouped into a single HTTP request\n- Parallel loading, so that separate universal `load` functions fetch data simultaneously\n- Data inlining, so that requests made with `fetch` during server rendering can be replayed in the browser without issuing a new request\n- Conservative invalidation, so that `load` functions are only re-run when necessary\n- Prerendering (configurable on a per-route basis, if necessary) so that pages without dynamic data can be served instantaneously\n- Link preloading, so that data and code requirements for a client-side navigation are eagerly anticipated\n\nNevertheless, we can't (yet) eliminate all sources of slowness. To eke out maximum performance, you should be mindful of the following tips.\n\n## Diagnosing issues\n\nGoogle's [PageSpeed Insights](https://pagespeed.web.dev/) and (for more advanced analysis) [WebPageTest](https://www.webpagetest.org/) are excellent ways to understand the performance characteristics of a site that is already deployed to the internet.\n\nYour browser also includes useful developer tools for analysing your site, whether deployed or running locally:\n\n* Chrome - [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview#devtools), [Network](https://developer.chrome.com/docs/devtools/network), and [Performance](https://developer.chrome.com/docs/devtools/performance) devtools\n* Edge - [Lighthouse](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/lighthouse/lighthouse-tool), [Network](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/), and [Performance](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/evaluate-performance/) devtools\n* Firefox - [Network](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/) and [Performance](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/) devtools\n* Safari - [enhancing the performance of your webpage](https://developer.apple.com/library/archive/documentation/NetworkingInternetWeb/Conceptual/Web_Inspector_Tutorial/EnhancingyourWebpagesPerformance/EnhancingyourWebpagesPerformance.html)\n\nNote that your site running locally in `dev` mode will exhibit different behaviour than your production app, so you should do performance testing in [preview](building-your-app#Preview-your-app) mode after building.\n\n### Instrumenting\n\nIf you see in the network tab of your browser that an API call is taking a long time and you'd like to understand why, you may consider instrumenting your backend with a tool like [OpenTelemetry](https://opentelemetry.io/) or [Server-Timing headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing).\n\n## Optimizing assets\n\n### Images\n\nReducing the size of image files is often one of the most impactful changes you can make to a site's performance. Svelte provides the `@sveltejs/enhanced-img` package, detailed on the [images](images) page, for making this easier. Additionally, Lighthouse is useful for identifying the worst offenders.\n\n### Videos\n\nVideo files can be very large, so extra care should be taken to ensure that they're optimized:\n\n- Compress videos with tools such as [Handbrake](https://handbrake.fr/). Consider converting the videos to web-friendly formats such as `.webm` or `.mp4`.\n- You can [lazy-load videos](https://web.dev/articles/lazy-loading-video) located below the fold with `preload=\"none\"` (though note that this will slow down playback when the user _does_ initiate it).\n- Strip the audio track out of muted videos using a tool like [FFmpeg](https://ffmpeg.org/).\n\n### Fonts\n\nSvelteKit automatically preloads critical `.js` and `.css` files when the user visits a page, but it does _not_ preload fonts by default, since this may cause unnecessary files (such as font weights that are referenced by your CSS but not actually used on the current page) to be downloaded. Having said that, preloading fonts correctly can make a big difference to how fast your site feels. In your [`handle`](hooks#Server-hooks-handle) hook, you can call `resolve` with a `preload` filter that includes your fonts.\n\nYou can reduce the size of font files by [subsetting](https://web.dev/learn/performance/optimize-web-fonts#subset_your_web_fonts) your fonts.\n\n## Reducing code size\n\n### Svelte version\n\nWe recommend running the latest version of Svelte. Svelte 5 is smaller and faster than Svelte 4, which is smaller and faster than Svelte 3.\n\n### Packages\n\n[`rollup-plugin-visualizer`](https://www.npmjs.com/package/rollup-plugin-visualizer) can be helpful for identifying which packages are contributing the most to the size of your site. You may also find opportunities to remove code by manually inspecting the build output (use `build: { minify: false }` in your [Vite config](https://vitejs.dev/config/build-options.html#build-minify) to make the output readable, but remember to undo that before deploying your app), or via the network tab of your browser's devtools.\n\n### External scripts\n\nTry to minimize the number of third-party scripts running in the browser. For example, instead of using JavaScript-based analytics consider using server-side implementations, such as those offered by many platforms with SvelteKit adapters including [Cloudflare](https://www.cloudflare.com/web-analytics/), [Netlify](https://docs.netlify.com/monitor-sites/site-analytics/), and [Vercel](https://vercel.com/docs/analytics).\n\nTo run third party scripts in a web worker (which avoids blocking the main thread), use [Partytown's SvelteKit integration](https://partytown.builder.io/sveltekit).\n\n### Selective loading\n\nCode imported with static `import` declarations will be automatically bundled with the rest of your page. If there is a piece of code you need only when some condition is met, use the dynamic `import(...)` form to selectively lazy-load the component.\n\n## Navigation\n\n### Preloading\n\nYou can speed up client-side navigations by eagerly preloading the necessary code and data, using [link options](link-options). This is configured by default on the `<body>` element when you create a new SvelteKit app.\n\n### Non-essential data\n\nFor slow-loading data that isn't needed immediately, the object returned from your `load` function can contain promises rather than the data itself. For server `load` functions, this will cause the data to [stream](load#Streaming-with-promises) in after the navigation (or initial page load).\n\n### Preventing waterfalls\n\nOne of the biggest performance killers is what is referred to as a _waterfall_, which is a series of requests that is made sequentially. This can happen on the server or in the browser, but is especially costly when dealing with data that has to travel further or across slower networks, such as a mobile user making a call to a distant server.\n\nIn the browser, waterfalls can occur when your HTML kicks off request chains such as requesting JS which requests CSS which requests a background image and web font. SvelteKit will largely solve this class of problems for you by adding [`modulepreload`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload) tags or headers, but you should view [the network tab in your devtools](#Diagnosing-issues) to check whether additional resources need to be preloaded.\n- Pay special attention to this if you use [web fonts](#Optimizing-assets-Fonts) since they need to be handled manually.\n- Enabling [single page app (SPA) mode](single-page-apps) will cause such waterfalls. With SPA mode, an empty page is generated, which fetches JavaScript, which ultimately loads and renders the page. This results in extra network round trips before a single pixel can be displayed.\n\nWaterfalls can also occur on calls to the backend whether made from the browser or server. E.g. if a universal `load` function makes an API call to fetch the current user, then uses the details from that response to fetch a list of saved items, and then uses _that_ response to fetch the details for each item, the browser will end up making multiple sequential requests. This is deadly for performance, especially for users that are physically located far from your backend.\n- Avoid this issue by using [server `load` functions](load#Universal-vs-server) to make requests to backend services that are dependencies from the server rather than from the browser. Note, however, that server `load` functions are also not immune to waterfalls (though they are much less costly since they rarely involve round trips with high latency). For example, if you query a database to get the current user and then use that data to make a second query for a list of saved items, it will typically be more performant to issue a single query with a database join.\n\n## Hosting\n\nYour frontend should be located in the same data center as your backend to minimize latency. For sites with no central backend, many SvelteKit adapters support deploying to the _edge_, which means handling each user's requests from a nearby server. This can reduce load times significantly. Some adapters even support [configuring deployment on a per-route basis](page-options#config). You should also consider serving images from a CDN (which are typically edge networks) — the hosts for many SvelteKit adapters will do this automatically.\n\nEnsure your host uses HTTP/2 or newer. Vite's code splitting creates numerous small files for improved cacheability, which results in excellent performance, but this does assume that your files can be loaded in parallel with HTTP/2.\n\n## Further reading\n\nFor the most part, building a performant SvelteKit app is the same as building any performant web app. You should be able to apply information from general performance resources such as [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals) to any web experience you build.",
+		"kit/icons": "## CSS\n\nA great way to use icons is to define them purely via CSS. Iconify offers support for [many popular icon sets](https://icon-sets.iconify.design/) that [can be included via CSS](https://iconify.design/docs/usage/css/). This method can also be used with popular CSS frameworks by leveraging the Iconify [Tailwind CSS plugin](https://iconify.design/docs/usage/css/tailwind/) or [UnoCSS plugin](https://iconify.design/docs/usage/css/unocss/). As opposed to libraries based on Svelte components, it doesn't require each icon to be imported into your `.svelte` file.\n\n## Svelte\n\nThere are many [icon libraries for Svelte](/packages#icons). When choosing an icon library, it is recommended to avoid those that provide a `.svelte` file per icon as these libraries can have thousands of `.svelte` files which really slow down [Vite's dependency optimization](https://vite.dev/guide/dep-pre-bundling.html). This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).",
+		"kit/images": "Images can have a big impact on your app's performance. For best results, you should optimize them by doing the following:\n\n- generate optimal formats like `.avif` and `.webp`\n- create different sizes for different screens\n- ensure that assets can be cached effectively\n\nDoing this manually is tedious. There are a variety of techniques you can use, depending on your needs and preferences.\n\n## Vite's built-in handling\n\n[Vite will automatically process imported assets](https://vitejs.dev/guide/assets.html) for improved performance. This includes assets referenced via the CSS `url()` function. Hashes will be added to the filenames so that they can be cached, and assets smaller than `assetsInlineLimit` will be inlined. Vite's asset handling is most often used for images, but is also useful for video, audio, etc.\n\n```svelte\n<script>\n\timport logo from '$lib/assets/logo.png';\n</script>\n\n<img alt=\"The project logo\" src={logo} />\n```\n\n## @sveltejs/enhanced-img\n\n`@sveltejs/enhanced-img` is a plugin offered on top of Vite's built-in asset handling. It provides plug and play image processing that serves smaller file formats like `avif` or `webp`, automatically sets the intrinsic `width` and `height` of the image to avoid layout shift, creates images of multiple sizes for various devices, and strips EXIF data for privacy. It will work in any Vite-based project including, but not limited to, SvelteKit projects.\n\n> [!NOTE] As a build plugin, `@sveltejs/enhanced-img` can only optimize files located on your machine during the build process. If you have an image located elsewhere (such as a path served from your database, CMS, or backend), please read about [loading images dynamically from a CDN](#Loading-images-dynamically-from-a-CDN).\n\n### Setup\n\nInstall:\n\n```sh\nnpm i -D @sveltejs/enhanced-img\n```\n\nAdjust `vite.config.js`:\n\n```js\nimport { sveltekit } from '@sveltejs/kit/vite';\n+++import { enhancedImages } from '@sveltejs/enhanced-img';+++\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n\tplugins: [\n\t\t+++enhancedImages(), // must come before the SvelteKit plugin+++\n\t\tsveltekit()\n\t]\n});\n```\n\nBuilding will take longer on the first build due to the computational expense of transforming images. However, the build output will be cached in `./node_modules/.cache/imagetools` so that subsequent builds will be fast.\n\n### Basic usage\n\nUse in your `.svelte` components by using `<enhanced:img>` rather than `<img>` and referencing the image file with a [Vite asset import](https://vitejs.dev/guide/assets.html#static-asset-handling) path:\n\n```svelte\n<enhanced:img src=\"./path/to/your/image.jpg\" alt=\"An alt text\" />\n```\n\nAt build time, your `<enhanced:img>` tag will be replaced with an `<img>` wrapped by a `<picture>` providing multiple image types and sizes. It's only possible to downscale images without losing quality, which means that you should provide the highest resolution image that you need — smaller versions will be generated for the various device types that may request an image.\n\nYou should provide your image at 2x resolution for HiDPI displays (a.k.a. retina displays). `<enhanced:img>` will automatically take care of serving smaller versions to smaller devices.\n\n> [!NOTE] if you wish to use a [tag name CSS selector](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#type_selectors) in your `<style>` block you will need to write `enhanced\\:img` to escape the colon in the tag name.\n\n### Dynamically choosing an image\n\nYou can also manually import an image asset and pass it to an `<enhanced:img>`. This is useful when you have a collection of static images and would like to dynamically choose one or [iterate over them](https://github.com/sveltejs/kit/blob/0ab1733e394b6310895a1d3bf0f126ce34531170/sites/kit.svelte.dev/src/routes/home/Showcase.svelte). In this case you will need to update both the `import` statement and `<img>` element as shown below to indicate you'd like process them.\n\n```svelte\n<script>\n\timport MyImage from './path/to/your/image.jpg?enhanced';\n</script>\n\n<enhanced:img src={MyImage} alt=\"some alt text\" />\n```\n\nYou can also use [Vite's `import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import). Note that you will have to specify `enhanced` via a [custom query](https://vitejs.dev/guide/features.html#custom-queries):\n\n```svelte\n<script>\n\tconst imageModules = import.meta.glob(\n\t\t'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp,svg}',\n\t\t{\n\t\t\teager: true,\n\t\t\tquery: {\n\t\t\t\tenhanced: true\n\t\t\t}\n\t\t}\n\t)\n</script>\n\n{#each Object.entries(imageModules) as [_path, module]}\n\t<enhanced:img src={module.default} alt=\"some alt text\" />\n{/each}\n```\n\n### Intrinsic Dimensions\n\n`width` and `height` are optional as they can be inferred from the source image and will be automatically added when the `<enhanced:img>` tag is preprocessed. With these attributes, the browser can reserve the correct amount of space, preventing [layout shift](https://web.dev/articles/cls). If you'd like to use a different `width` and `height` you can style the image with CSS. Because the preprocessor adds a `width` and `height` for you, if you'd like one of the dimensions to be automatically calculated then you will need to specify that:\n\n```svelte\n<style>\n\t.hero-image img {\n\t\twidth: var(--size);\n\t\theight: auto;\n\t}\n</style>\n```\n\n### `srcset` and `sizes`\n\nIf you have a large image, such as a hero image taking the width of the design, you should specify `sizes` so that smaller versions are requested on smaller devices. E.g. if you have a 1280px image you may want to specify something like:\n\n```svelte\n<enhanced:img src=\"./image.png\" sizes=\"min(1280px, 100vw)\"/>\n```\n\nIf `sizes` is specified, `<enhanced:img>` will generate small images for smaller devices and populate the `srcset` attribute.\n\nThe smallest picture generated automatically will have a width of 540px. If you'd like smaller images or would otherwise like to specify custom widths, you can do that with the `w` query parameter:\n```svelte\n<enhanced:img\n  src=\"./image.png?w=1280;640;400\"\n  sizes=\"(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px\"\n/>\n```\n\nIf `sizes` is not provided, then a HiDPI/Retina image and a standard resolution image will be generated. The image you provide should be 2x the resolution you wish to display so that the browser can display that image on devices with a high [device pixel ratio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio).\n\n### Per-image transforms\n\nBy default, enhanced images will be transformed to more efficient formats. However, you may wish to apply other transforms such as a blur, quality, flatten, or rotate operation. You can run per-image transforms by appending a query string:\n\n```svelte\n<enhanced:img src=\"./path/to/your/image.jpg?blur=15\" alt=\"An alt text\" />\n```\n\n[See the imagetools repo for the full list of directives](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md).\n\n## Loading images dynamically from a CDN\n\nIn some cases, the images may not be accessible at build time — e.g. they may live inside a content management system or elsewhere.\n\nUsing a content delivery network (CDN) can allow you to optimize these images dynamically, and provides more flexibility with regards to sizes, but it may involve some setup overhead and usage costs. Depending on caching strategy, the browser may not be able to use a cached copy of the asset until a [304 response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304) is received from the CDN. Building HTML to target CDNs allows using an `<img>` tag since the CDN can serve the appropriate format based on the `User-Agent` header, whereas build-time optimizations must produce `<picture>` tags with multiple sources. Finally, some CDNs may generate images lazily, which could have a negative performance impact for sites with low traffic and frequently changing images.\n\nCDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.\n\n## Best practices\n\n- For each image type, use the appropriate solution from those discussed above. You can mix and match all three solutions in one project. For example, you may use Vite's built-in handling to provide images for `<meta>` tags, display images on your homepage with `@sveltejs/enhanced-img`, and display user-submitted content with a dynamic approach.\n- Consider serving all images via CDN regardless of the image optimization types you use. CDNs reduce latency by distributing copies of static assets globally.\n- Your original images should have a good quality/resolution and should have 2x the width it will be displayed at to serve HiDPI devices. Image processing can size images down to save bandwidth when serving smaller screens, but it would be a waste of bandwidth to invent pixels to size images up.\n- For images which are much larger than the width of a mobile device (roughly 400px), such as a hero image taking the width of the page design, specify `sizes` so that smaller images can be served on smaller devices.\n- For important images, such as the [largest contentful paint (LCP)](https://web.dev/articles/lcp) image, set `fetchpriority=\"high\"` and avoid `loading=\"lazy\"` to prioritize loading as early as possible.\n- Give the image a container or styling so that it is constrained and does not jump around while the page is loading affecting your [cumulative layout shift (CLS)](https://web.dev/articles/cls). `width` and `height` help the browser to reserve space while the image is still loading, so `@sveltejs/enhanced-img` will add a `width` and `height` for you.\n- Always provide a good `alt` text. The Svelte compiler will warn you if you don't do this.\n- Do not use `em` or `rem` in `sizes` and change the default size of these measures. When used in `sizes` or `@media` queries, `em` and `rem` are both defined to mean the user's default `font-size`. For a `sizes` declaration like `sizes=\"(min-width: 768px) min(100vw, 108rem), 64rem\"`, the actual `em` or `rem` that controls how the image is laid out on the page can be different if changed by CSS. For example, do not do something like `html { font-size: 62.5%; }` as the slot reserved by the browser preloader will now end up being larger than the actual slot of the CSS object model once it has been created.",
+		"kit/accessibility": "SvelteKit strives to provide an accessible platform for your app by default. Svelte's [compile-time accessibility checks](../svelte/compiler-warnings) will also apply to any SvelteKit application you build.\n\nHere's how SvelteKit's built-in accessibility features work and what you need to do to help these features to work as well as possible. Keep in mind that while SvelteKit provides an accessible foundation, you are still responsible for making sure your application code is accessible. If you're new to accessibility, see the [\"further reading\"](accessibility#Further-reading) section of this guide for additional resources.\n\nWe recognize that accessibility can be hard to get right. If you want to suggest improvements to how SvelteKit handles accessibility, please [open a GitHub issue](https://github.com/sveltejs/kit/issues).\n\n## Route announcements\n\nIn traditional server-rendered applications, every navigation (e.g. clicking on an `<a>` tag) triggers a full page reload. When this happens, screen readers and other assistive technology will read out the new page's title so that users understand that the page has changed.\n\nSince navigation between pages in SvelteKit happens without reloading the page (known as [client-side routing](glossary#Routing)), SvelteKit injects a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) onto the page that will read out the new page name after each navigation. This determines the page name to announce by inspecting the `<title>` element.\n\nBecause of this behavior, every page in your app should have a unique, descriptive title. In SvelteKit, you can do this by placing a `<svelte:head>` element on each page:\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<svelte:head>\n\t<title>Todo List</title>\n</svelte:head>\n```\n\nThis will allow screen readers and other assistive technology to identify the new page after a navigation occurs. Providing a descriptive title is also important for [SEO](seo#Manual-setup-title-and-meta).\n\n## Focus management\n\nIn traditional server-rendered applications, every navigation will reset focus to the top of the page. This ensures that people browsing the web with a keyboard or screen reader will start interacting with the page from the beginning.\n\nTo simulate this behavior during client-side routing, SvelteKit focuses the `<body>` element after each navigation and [enhanced form submission](form-actions#Progressive-enhancement). There is one exception - if an element with the [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) attribute is present, SvelteKit will focus that element instead. Make sure to [consider the implications for assistive technology](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations) when using that attribute.\n\nIf you want to customize SvelteKit's focus management, you can use the `afterNavigate` hook:\n\n```js\n/// <reference types=\"@sveltejs/kit\" />\n// ---cut---\nimport { afterNavigate } from '$app/navigation';\n\nafterNavigate(() => {\n\t/** @type {HTMLElement | null} */\n\tconst to_focus = document.querySelector('.focus-me');\n\tto_focus?.focus();\n});\n```\n\nYou can also programmatically navigate to a different page using the [`goto`]($app-navigation#goto) function. By default, this will have the same client-side routing behavior as clicking on a link. However, `goto` also accepts a `keepFocus` option that will preserve the currently-focused element instead of resetting focus. If you enable this option, make sure the currently-focused element still exists on the page after navigation. If the element no longer exists, the user's focus will be lost, making for a confusing experience for assistive technology users.\n\n## The \"lang\" attribute\n\nBy default, SvelteKit's page template sets the default language of the document to English. If your content is not in English, you should update the `<html>` element in `src/app.html` to have the correct [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#accessibility) attribute. This will ensure that any assistive technology reading the document uses the correct pronunciation. For example, if your content is in German, you should update `app.html` to the following:\n\n```html\n/// file: src/app.html\n<html lang=\"de\">\n```\n\nIf your content is available in multiple languages, you should set the `lang` attribute based on the language of the current page. You can do this with SvelteKit's [handle hook](hooks#Server-hooks-handle):\n\n```html\n/// file: src/app.html\n<html lang=\"%lang%\">\n```\n\n```js\n/// file: src/hooks.server.js\n/**\n * @param {import('@sveltejs/kit').RequestEvent} event\n */\nfunction get_lang(event) {\n\treturn 'en';\n}\n// ---cut---\n/** @type {import('@sveltejs/kit').Handle} */\nexport function handle({ event, resolve }) {\n\treturn resolve(event, {\n\t\ttransformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event))\n\t});\n}\n```\n\n## Further reading\n\nFor the most part, building an accessible SvelteKit app is the same as building an accessible web app. You should be able to apply information from the following general accessibility resources to any web experience you build:\n\n- [MDN Web Docs: Accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility)\n- [The A11y Project](https://www.a11yproject.com/)\n- [How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)",
+		"kit/seo": "The most important aspect of SEO is to create high-quality content that is widely linked to from around the web. However, there are a few technical considerations for building sites that rank well.\n\n## Out of the box\n\n### SSR\n\nWhile search engines have got better in recent years at indexing content that was rendered with client-side JavaScript, server-side rendered content is indexed more frequently and reliably. SvelteKit employs SSR by default, and while you can disable it in [`handle`](hooks#Server-hooks-handle), you should leave it on unless you have a good reason not to.\n\n> [!NOTE] SvelteKit's rendering is highly configurable and you can implement [dynamic rendering](https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering) if necessary. It's not generally recommended, since SSR has other benefits beyond SEO.\n\n### Performance\n\nSignals such as [Core Web Vitals](https://web.dev/vitals/#core-web-vitals) impact search engine ranking. Because Svelte and SvelteKit introduce minimal overhead, they make it easier to build high performance sites. You can test your site's performance using Google's [PageSpeed Insights](https://pagespeed.web.dev/) or [Lighthouse](https://developers.google.com/web/tools/lighthouse). With just a few key actions like using SvelteKit's default [hybrid rendering](glossary#Hybrid-app) mode and [optimizing your images](images), you can greatly improve your site's speed. Read [the performance page](performance) for more details.\n\n### Normalized URLs\n\nSvelteKit redirects pathnames with trailing slashes to ones without (or vice versa depending on your [configuration](page-options#trailingSlash)), as duplicate URLs are bad for SEO.\n\n## Manual setup\n\n### &lt;title&gt; and &lt;meta&gt;\n\nEvery page should have well-written and unique `<title>` and `<meta name=\"description\">` elements inside a [`<svelte:head>`](../svelte/svelte-head). Guidance on how to write descriptive titles and descriptions, along with other suggestions on making content understandable by search engines, can be found on Google's [Lighthouse SEO audits](https://web.dev/lighthouse-seo/) documentation.\n\n> [!NOTE] A common pattern is to return SEO-related `data` from page [`load`](load) functions, then use it (as [`page.data`]($app-state)) in a `<svelte:head>` in your root [layout](routing#layout).\n\n### Sitemaps\n\n[Sitemaps](https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap) help search engines prioritize pages within your site, particularly when you have a large amount of content. You can create a sitemap dynamically using an endpoint:\n\n```js\n/// file: src/routes/sitemap.xml/+server.js\nexport async function GET() {\n\treturn new Response(\n\t\t`\n\t\t<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n\t\t<urlset\n\t\t\txmlns=\"https://www.sitemaps.org/schemas/sitemap/0.9\"\n\t\t\txmlns:xhtml=\"https://www.w3.org/1999/xhtml\"\n\t\t\txmlns:mobile=\"https://www.google.com/schemas/sitemap-mobile/1.0\"\n\t\t\txmlns:news=\"https://www.google.com/schemas/sitemap-news/0.9\"\n\t\t\txmlns:image=\"https://www.google.com/schemas/sitemap-image/1.1\"\n\t\t\txmlns:video=\"https://www.google.com/schemas/sitemap-video/1.1\"\n\t\t>\n\t\t\t<!-- <url> elements go here -->\n\t\t</urlset>`.trim(),\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Content-Type': 'application/xml'\n\t\t\t}\n\t\t}\n\t);\n}\n```\n\n### AMP\n\nAn unfortunate reality of modern web development is that it is sometimes necessary to create an [Accelerated Mobile Pages (AMP)](https://amp.dev/) version of your site. In SvelteKit this can be done by setting the [`inlineStyleThreshold`](configuration#inlineStyleThreshold) option...\n\n```js\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\t// since <link rel=\"stylesheet\"> isn't\n\t\t// allowed, inline all styles\n\t\tinlineStyleThreshold: Infinity\n\t}\n};\n\nexport default config;\n```\n\n...disabling `csr` in your root `+layout.js`/`+layout.server.js`...\n\n```js\n/// file: src/routes/+layout.server.js\nexport const csr = false;\n```\n\n...adding `amp` to your `app.html`\n\n```html\n<html amp>\n...\n```\n\n...and transforming the HTML using `transformPageChunk` along with `transform` imported from `@sveltejs/amp`:\n\n```js\n/// file: src/hooks.server.js\nimport * as amp from '@sveltejs/amp';\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tlet buffer = '';\n\treturn await resolve(event, {\n\t\ttransformPageChunk: ({ html, done }) => {\n\t\t\tbuffer += html;\n\t\t\tif (done) return amp.transform(buffer);\n\t\t}\n\t});\n}\n```\n\nTo prevent shipping any unused CSS as a result of transforming the page to amp, we can use [`dropcss`](https://www.npmjs.com/package/dropcss):\n\n```js\n// @filename: ambient.d.ts\ndeclare module 'dropcss';\n\n// @filename: index.js\n// ---cut---\n/// file: src/hooks.server.js\n// @errors: 2307\nimport * as amp from '@sveltejs/amp';\nimport dropcss from 'dropcss';\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tlet buffer = '';\n\n\treturn await resolve(event, {\n\t\ttransformPageChunk: ({ html, done }) => {\n\t\t\tbuffer += html;\n\n\t\t\tif (done) {\n\t\t\t\tlet css = '';\n\t\t\t\tconst markup = amp\n\t\t\t\t\t.transform(buffer)\n\t\t\t\t\t.replace('⚡', 'amp') // dropcss can't handle this character\n\t\t\t\t\t.replace(/<style amp-custom([^>]*?)>([^]+?)<\\/style>/, (match, attributes, contents) => {\n\t\t\t\t\t\tcss = contents;\n\t\t\t\t\t\treturn `<style amp-custom${attributes}></style>`;\n\t\t\t\t\t});\n\n\t\t\t\tcss = dropcss({ css, html: markup }).css;\n\t\t\t\treturn markup.replace('</style>', `${css}</style>`);\n\t\t\t}\n\t\t}\n\t});\n}\n\n```\n\n> [!NOTE] It's a good idea to use the `handle` hook to validate the transformed HTML using `amphtml-validator`, but only if you're prerendering pages since it's very slow.",
+		"kit/faq": "## Other resources\n\nPlease see [the Svelte FAQ](../svelte/faq) and [`vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md) as well for the answers to questions deriving from those libraries.\n\n## What can I make with SvelteKit?\n\nSee [the documentation regarding project types](project-types) for more details.\n\n## How do I include details from package.json in my application?\n\nIf you'd like to include your application's version number or other information from `package.json` in your application, you can load JSON like so:\n\n```ts\n// @errors: 2732\n/// file: svelte.config.js\nimport pkg from './package.json' with { type: 'json' };\n```\n\n## How do I fix the error I'm getting trying to include a package?\n\nMost issues related to including a library are due to incorrect packaging. You can check if a library's packaging is compatible with Node.js by entering it into [the publint website](https://publint.dev/).\n\nHere are a few things to keep in mind when checking if a library is packaged correctly:\n\n- `exports` takes precedence over the other entry point fields such as `main` and `module`. Adding an `exports` field may not be backwards-compatible as it prevents deep imports.\n- ESM files should end with `.mjs` unless `\"type\": \"module\"` is set in which any case CommonJS files should end with `.cjs`.\n- `main` should be defined if `exports` is not. It should be either a CommonJS or ESM file and adhere to the previous bullet. If a `module` field is defined, it should refer to an ESM file.\n- Svelte components should be distributed as uncompiled `.svelte` files with any JS in the package written as ESM only. Custom script and style languages, like TypeScript and SCSS, should be preprocessed as vanilla JS and CSS respectively. We recommend using [`svelte-package`](./packaging) for packaging Svelte libraries, which will do this for you.\n\nLibraries work best in the browser with Vite when they distribute an ESM version, especially if they are dependencies of a Svelte component library. You may wish to suggest to library authors that they provide an ESM version. However, CommonJS (CJS) dependencies should work as well since, by default, [`vite-plugin-svelte` will ask Vite to pre-bundle them](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies) using `esbuild` to convert them to ESM.\n\nIf you are still encountering issues we recommend searching both [the Vite issue tracker](https://github.com/vitejs/vite/issues) and the issue tracker of the library in question. Sometimes issues can be worked around by fiddling with the [`optimizeDeps`](https://vitejs.dev/config/#dep-optimization-options) or [`ssr`](https://vitejs.dev/config/#ssr-options) config values though we recommend this as only a short-term workaround in favor of fixing the library in question.\n\n## How do I use the view transitions API?\n\nWhile SvelteKit does not have any specific integration with [view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/), you can call `document.startViewTransition` in [`onNavigate`]($app-navigation#onNavigate) to trigger a view transition on every client-side navigation.\n\n```js\n// @errors: 2339 2810\nimport { onNavigate } from '$app/navigation';\n\nonNavigate((navigation) => {\n\tif (!document.startViewTransition) return;\n\n\treturn new Promise((resolve) => {\n\t\tdocument.startViewTransition(async () => {\n\t\t\tresolve();\n\t\t\tawait navigation.complete;\n\t\t});\n\t});\n});\n```\n\nFor more, see [\"Unlocking view transitions\"](/blog/view-transitions) on the Svelte blog.\n\n## How do I set up a database?\n\nPut the code to query your database in a [server route](./routing#server) - don't query the database in .svelte files. You can create a `db.js` or similar that sets up a connection immediately and makes the client accessible throughout the app as a singleton. You can execute any one-time setup code in `hooks.server.js` and import your database helpers into any endpoint that needs them.\n\nYou can use [the Svelte CLI](/docs/cli/overview) to automatically set up database integrations.\n\n## How do I use a client-side library accessing `document` or `window`?\n\nIf you need access to the `document` or `window` variables or otherwise need code to run only on the client-side you can wrap it in a `browser` check:\n\n```js\n/// <reference types=\"@sveltejs/kit\" />\n// ---cut---\nimport { browser } from '$app/environment';\n\nif (browser) {\n\t// client-only code here\n}\n```\n\nYou can also run code in `onMount` if you'd like to run it after the component has been first rendered to the DOM:\n\n```js\n// @filename: ambient.d.ts\n// @lib: ES2015\ndeclare module 'some-browser-only-library';\n\n// @filename: index.js\n// ---cut---\nimport { onMount } from 'svelte';\n\nonMount(async () => {\n\tconst { method } = await import('some-browser-only-library');\n\tmethod('hello world');\n});\n```\n\nIf the library you'd like to use is side-effect free you can also statically import it and it will be tree-shaken out in the server-side build where `onMount` will be automatically replaced with a no-op:\n\n```js\n// @filename: ambient.d.ts\n// @lib: ES2015\ndeclare module 'some-browser-only-library';\n\n// @filename: index.js\n// ---cut---\nimport { onMount } from 'svelte';\nimport { method } from 'some-browser-only-library';\n\nonMount(() => {\n\tmethod('hello world');\n});\n```\n\nFinally, you may also consider using an `{#await}` block:\n```svelte\n<!--- file: index.svelte --->\n<script>\n\timport { browser } from '$app/environment';\n\n\tconst ComponentConstructor = browser ?\n\t\timport('some-browser-only-library').then((module) => module.Component) :\n\t\tnew Promise(() => {});\n</script>\n\n{#await ComponentConstructor}\n\t<p>Loading...</p>\n{:then component}\n\t<svelte:component this={component} />\n{:catch error}\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\n## How do I use a different backend API server?\n\nYou can use [`event.fetch`](./load#Making-fetch-requests) to request data from an external API server, but be aware that you would need to deal with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), which will result in complications such as generally requiring requests to be preflighted resulting in higher latency. Requests to a separate subdomain may also increase latency due to an additional DNS lookup, TLS setup, etc. If you wish to use this method, you may find [`handleFetch`](./hooks#Server-hooks-handleFetch) helpful.\n\nAnother approach is to set up a proxy to bypass CORS headaches. In production, you would rewrite a path like `/api` to the API server; for local development, use Vite's [`server.proxy`](https://vitejs.dev/config/server-options.html#server-proxy) option.\n\nHow to setup rewrites in production will depend on your deployment platform. If rewrites aren't an option, you could alternatively add an [API route](./routing#server):\n\n```js\n/// file: src/routes/api/[...path]/+server.js\n/** @type {import('./$types').RequestHandler} */\nexport function GET({ params, url }) {\n\treturn fetch(`https://example.com/${params.path + url.search}`);\n}\n```\n\n(Note that you may also need to proxy `POST`/`PATCH` etc requests, and forward `request.headers`, depending on your needs.)\n\n## How do I use middleware?\n\n`adapter-node` builds a middleware that you can use with your own server for production mode. In dev, you can add middleware to Vite by using a Vite plugin. For example:\n\n```js\n// @errors: 2322\n// @filename: ambient.d.ts\ndeclare module '@sveltejs/kit/vite'; // TODO this feels unnecessary, why can't it 'see' the declarations?\n\n// @filename: index.js\n// ---cut---\nimport { sveltekit } from '@sveltejs/kit/vite';\n\n/** @type {import('vite').Plugin} */\nconst myPlugin = {\n\tname: 'log-request-middleware',\n\tconfigureServer(server) {\n\t\tserver.middlewares.use((req, res, next) => {\n\t\t\tconsole.log(`Got request ${req.url}`);\n\t\t\tnext();\n\t\t});\n\t}\n};\n\n/** @type {import('vite').UserConfig} */\nconst config = {\n\tplugins: [myPlugin, sveltekit()]\n};\n\nexport default config;\n```\n\nSee [Vite's `configureServer` docs](https://vitejs.dev/guide/api-plugin.html#configureserver) for more details including how to control ordering.\n\n## How do I use Yarn?\n\n### Does it work with Yarn 2?\n\nSort of. The Plug'n'Play feature, aka 'pnp', is broken (it deviates from the Node module resolution algorithm, and [doesn't yet work with native JavaScript modules](https://github.com/yarnpkg/berry/issues/638) which SvelteKit — along with an [increasing number of packages](https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77) — uses). You can use `nodeLinker: 'node-modules'` in your [`.yarnrc.yml`](https://yarnpkg.com/configuration/yarnrc#nodeLinker) file to disable pnp, but it's probably easier to just use npm or [pnpm](https://pnpm.io/), which is similarly fast and efficient but without the compatibility headaches.\n\n### How do I use with Yarn 3?\n\nCurrently ESM Support within the latest Yarn (version 3) is considered [experimental](https://github.com/yarnpkg/berry/pull/2161).\n\nThe below seems to work although your results may vary. First create a new application:\n\n```sh\nyarn create svelte myapp\ncd myapp\n```\n\nAnd enable Yarn Berry:\n\n```sh\nyarn set version berry\nyarn install\n```\n\nOne of the more interesting features of Yarn Berry is the ability to have a single global cache for packages, instead of having multiple copies for each project on the disk. However, setting `enableGlobalCache` to true causes building to fail, so it is recommended to add the following to the `.yarnrc.yml` file:\n\n```yaml\nnodeLinker: node-modules\n```\n\nThis will cause packages to be downloaded into a local node_modules directory but avoids the above problem and is your best bet for using version 3 of Yarn at this point in time.",
+		"kit/integrations": "## `vitePreprocess`\n\nIncluding [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) in your project will allow you to use the various flavors of CSS that Vite supports: PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:\n\n```js\n// svelte.config.js\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n  preprocess: [vitePreprocess()]\n};\n\nexport default config;\n```\n\nYou will also need to use a preprocessor if you're using TypeScript with Svelte 4. TypeScript is supported natively in Svelte 5 if you're using only the type syntax. To use more complex TypeScript syntax in Svelte 5, you will need still need a preprocessor and can use `vitePreprocess({ script: true })`.\n\n## Add-ons\n\nRun [`npx sv add`](/docs/cli/sv-add) to setup many different complex integrations with a single command including:\n- prettier (formatting)\n- eslint (linting)\n- vitest (unit testing)\n- playwright (e2e testing)\n- lucia (auth)\n- tailwind (CSS)\n- drizzle (DB)\n- paraglide (i18n)\n- mdsvex (markdown)\n- storybook (frontend workshop)\n\n## Packages\n\nCheck out [the packages page](/packages) for a curated set of high quality Svelte packages. You can also see [sveltesociety.dev](https://sveltesociety.dev/) for additional libraries, templates, and resources.\n\n## Additional integrations\n\n### `svelte-preprocess`\n\n`svelte-preprocess` has some additional functionality not found in `vitePreprocess` such as support for Pug, Babel, and global styles. However, `vitePreprocess` may be faster and require less configuration, so it is used by default. Note that CoffeeScript is [not supported](https://github.com/sveltejs/kit/issues/2920#issuecomment-996469815) by SvelteKit.\n\nYou will need to install `svelte-preprocess` with `npm i -D svelte-preprocess` and [add it to your `svelte.config.js`](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md#with-svelte-config). After that, you will often need to [install the corresponding library](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md) such as `npm i -D sass` or `npm i -D less`.\n\n## Vite plugins\n\nSince SvelteKit projects are built with Vite, you can use Vite plugins to enhance your project. See a list of available plugins at [`vitejs/awesome-vite`](https://github.com/vitejs/awesome-vite?tab=readme-ov-file#plugins).\n\n## Integration FAQs\n\n[The SvelteKit FAQ](./faq) answers many questions about how to do X with SvelteKit, which may be helpful if you still have questions.",
+		"kit/debugging": "In addition to the [`@debug`](../svelte/@debug) tag, you can also debug Svelte and SvelteKit projects using breakpoints within various tools and development environments. This includes both frontend and backend code.\n\nThe following guides assume your JavaScript runtime environment is Node.js.\n\n## Visual Studio Code\n\nWith the built-in debug terminal, you can set up breakpoints in source files within VSCode.\n\n1. Open the command palette: `CMD/Ctrl` + `Shift` + `P`.\n2. Find and launch \"Debug: JavaScript Debug Terminal\".\n3. Start your project using the debug terminal. For example: `npm run dev`.\n4. Set some breakpoints in your client or server-side source code.\n5. Trigger the breakpoint.\n\n### Launch via debug pane\n\nYou may alternatively set up a `.vscode/launch.json` in your project. To set one up automatically:\n\n1. Go to the \"Run and Debug\" pane.\n2. In the \"Run\" select menu, choose \"Node.js...\".\n3. Select the \"run script\" that corresponds to your project, such as \"Run script: dev\".\n4. Press the \"Start debugging\" play button, or hit `F5` to begin breakpoint debugging.\n\nHere's an example `launch.json`:\n\n```json\n{\n\t\"version\": \"0.2.0\",\n\t\"configurations\": [\n\t\t{\n\t\t\t\"command\": \"npm run dev\",\n\t\t\t\"name\": \"Run development server\",\n\t\t\t\"request\": \"launch\",\n\t\t\t\"type\": \"node-terminal\"\n\t\t}\n\t]\n}\n```\n\nFurther reading: <https://code.visualstudio.com/docs/editor/debugging>.\n\n## Other Editors\n\nIf you use a different editor, these community guides might be useful for you:\n\n- [WebStorm Svelte: Debug Your Application](https://www.jetbrains.com/help/webstorm/svelte.html#ws_svelte_debug)\n- [Debugging JavaScript Frameworks in Neovim](https://theosteiner.de/debugging-javascript-frameworks-in-neovim)\n\n## Google Chrome and Microsoft Edge Developer Tools\n\nIt's possible to debug Node.js applications using a browser-based debugger.\n\n> [!NOTE] Note this only works with debugging client-side SvelteKit source maps.\n\n1. Run the `--inspect` flag when starting the Vite server with Node.js. For instance: `NODE_OPTIONS=\"--inspect\" npm run dev`\n2. Open your site in a new tab. Typically at `localhost:5173`.\n3. Open your browser's dev tools, and click on the \"Open dedicated DevTools for Node.js\" icon near the top-left. It should display the Node.js logo.\n4. Set up breakpoints and debug your application.\n\nYou may alternatively open the debugger devtools by navigating to `chrome://inspect` in Google Chrome, or `edge://inspect` in Microsoft Edge.\n\n## References\n\n- [Debugging Node.js](https://nodejs.org/en/learn/getting-started/debugging)",
+		"kit/migrating-to-sveltekit-2": "Upgrading from SvelteKit version 1 to version 2 should be mostly seamless. There are a few breaking changes to note, which are listed here. You can use `npx sv migrate sveltekit-2` to migrate some of these changes automatically.\n\nWe highly recommend upgrading to the most recent 1.x version before upgrading to 2.0, so that you can take advantage of targeted deprecation warnings. We also recommend [updating to Svelte 4](../svelte/v4-migration-guide) first: Later versions of SvelteKit 1.x support it, and SvelteKit 2.0 requires it.\n\n## `redirect` and `error` are no longer thrown by you\n\nPreviously, you had to `throw` the values returned from `error(...)` and `redirect(...)` yourself. In SvelteKit 2 this is no longer the case — calling the functions is sufficient.\n\n```js\nimport { error } from '@sveltejs/kit'\n\n// ...\n---throw error(500, 'something went wrong');---\n+++error(500, 'something went wrong');+++\n```\n\n`svelte-migrate` will do these changes automatically for you.\n\nIf the error or redirect is thrown inside a `try {...}` block (hint: don't do this!), you can distinguish them from unexpected errors using [`isHttpError`](@sveltejs-kit#isHttpError) and [`isRedirect`](@sveltejs-kit#isRedirect) imported from `@sveltejs/kit`.\n\n## path is required when setting cookies\n\nWhen receiving a `Set-Cookie` header that doesn't specify a `path`, browsers will [set the cookie path](https://www.rfc-editor.org/rfc/rfc6265#section-5.1.4) to the parent of the resource in question. This behaviour isn't particularly helpful or intuitive, and frequently results in bugs because the developer expected the cookie to apply to the domain as a whole.\n\nAs of SvelteKit 2.0, you need to set a `path` when calling `cookies.set(...)`, `cookies.delete(...)` or `cookies.serialize(...)` so that there's no ambiguity. Most of the time, you probably want to use `path: '/'`, but you can set it to whatever you like, including relative paths — `''` means 'the current path', `'.'` means 'the current directory'.\n\n```js\n/** @type {import('./$types').PageServerLoad} */\nexport function load({ cookies }) {\n\tcookies.set(name, value, +++{ path: '/' }+++);\n\treturn { response }\n}\n```\n\n`svelte-migrate` will add comments highlighting the locations that need to be adjusted.\n\n## Top-level promises are no longer awaited\n\nIn SvelteKit version 1, if the top-level properties of the object returned from a `load` function were promises, they were automatically awaited. With the introduction of [streaming](/blog/streaming-snapshots-sveltekit) this behavior became a bit awkward as it forces you to nest your streamed data one level deep.\n\nAs of version 2, SvelteKit no longer differentiates between top-level and non-top-level promises. To get back the blocking behavior, use `await` (with `Promise.all` to prevent waterfalls, where appropriate):\n\n```js\n// @filename: ambient.d.ts\ndeclare const url: string;\n\n// @filename: index.js\n// ---cut---\n// If you have a single promise\n/** @type {import('./$types').PageServerLoad} */\nexport +++async+++ function load({ fetch }) {\n\tconst response = +++await+++ fetch(url).then(r => r.json());\n\treturn { response }\n}\n```\n\n```js\n// @filename: ambient.d.ts\ndeclare const url1: string;\ndeclare const url2: string;\n\n// @filename: index.js\n// ---cut---\n// If you have multiple promises\n/** @type {import('./$types').PageServerLoad} */\nexport +++async+++ function load({ fetch }) {\n---\tconst a = fetch(url1).then(r => r.json());---\n---\tconst b = fetch(url2).then(r => r.json());---\n+++\tconst [a, b] = await Promise.all([\n\t  fetch(url1).then(r => r.json()),\n\t  fetch(url2).then(r => r.json()),\n\t]);+++\n\treturn { a, b };\n}\n```\n\n## goto(...) changes\n\n`goto(...)` no longer accepts external URLs. To navigate to an external URL, use `window.location.href = url`. The `state` object now determines `$page.state` and must adhere to the `App.PageState` interface, if declared. See [shallow routing](shallow-routing) for more details.\n\n## paths are now relative by default\n\nIn SvelteKit 1, `%sveltekit.assets%` in your `app.html` was replaced with a relative path by default (i.e. `.` or `..` or `../..` etc, depending on the path being rendered) during server-side rendering unless the [`paths.relative`](configuration#paths) config option was explicitly set to `false`. The same was true for `base` and `assets` imported from `$app/paths`, but only if the `paths.relative` option was explicitly set to `true`.\n\nThis inconsistency is fixed in version 2. Paths are either always relative or always absolute, depending on the value of [`paths.relative`](configuration#paths). It defaults to `true` as this results in more portable apps: if the `base` is something other than the app expected (as is the case when viewed on the [Internet Archive](https://archive.org/), for example) or unknown at build time (as is the case when deploying to [IPFS](https://ipfs.tech/) and so on), fewer things are likely to break.\n\n## Server fetches are not trackable anymore\n\nPreviously it was possible to track URLs from `fetch`es on the server in order to rerun load functions. This poses a possible security risk (private URLs leaking), and for this reason it was behind the `dangerZone.trackServerFetches` setting, which is now removed.\n\n## `preloadCode` arguments must be prefixed with `base`\n\nSvelteKit exposes two functions, [`preloadCode`]($app-navigation#preloadCode) and [`preloadData`]($app-navigation#preloadData), for programmatically loading the code and data associated with a particular path. In version 1, there was a subtle inconsistency — the path passed to `preloadCode` did not need to be prefixed with the `base` path (if set), while the path passed to `preloadData` did.\n\nThis is fixed in SvelteKit 2 — in both cases, the path should be prefixed with `base` if it is set.\n\nAdditionally, `preloadCode` now takes a single argument rather than _n_ arguments.\n\n## `resolvePath` has been removed\n\nSvelteKit 1 included a function called `resolvePath` which allows you to resolve a route ID (like `/blog/[slug]`) and a set of parameters (like `{ slug: 'hello' }`) to a pathname. Unfortunately the return value didn't include the `base` path, limiting its usefulness in cases where `base` was set.\n\nFor this reason, SvelteKit 2 replaces `resolvePath` with a (slightly better named) function called `resolveRoute`, which is imported from `$app/paths` and which takes `base` into account.\n\n```js\n---import { resolvePath } from '@sveltejs/kit';\nimport { base } from '$app/paths';---\n+++import { resolveRoute } from '$app/paths';+++\n\n---const path = base + resolvePath('/blog/[slug]', { slug });---\n+++const path = resolveRoute('/blog/[slug]', { slug });+++\n```\n\n`svelte-migrate` will do the method replacement for you, though if you later prepend the result with `base`, you need to remove that yourself.\n\n## Improved error handling\n\nErrors are handled inconsistently in SvelteKit 1. Some errors trigger the `handleError` hook but there is no good way to discern their status (for example, the only way to tell a 404 from a 500 is by seeing if `event.route.id` is `null`), while others (such as 405 errors for `POST` requests to pages without actions) don't trigger `handleError` at all, but should. In the latter case, the resulting `$page.error` will deviate from the [`App.Error`](types#Error) type, if it is specified.\n\nSvelteKit 2 cleans this up by calling `handleError` hooks with two new properties: `status` and `message`. For errors thrown from your code (or library code called by your code) the status will be `500` and the message will be `Internal Error`. While `error.message` may contain sensitive information that should not be exposed to users, `message` is safe.\n\n## Dynamic environment variables cannot be used during prerendering\n\nThe `$env/dynamic/public` and `$env/dynamic/private` modules provide access to _run time_ environment variables, as opposed to the _build time_ environment variables exposed by `$env/static/public` and `$env/static/private`.\n\nDuring prerendering in SvelteKit 1, they are one and the same. This means that prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.\n\nBecause of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `/_app/env.js`) instead of reading them from the server-rendered HTML.\n\n## `form` and `data` have been removed from `use:enhance` callbacks\n\nIf you provide a callback to [`use:enhance`](form-actions#Progressive-enhancement-use:enhance), it will be called with an object containing various useful properties.\n\nIn SvelteKit 1, those properties included `form` and `data`. These were deprecated some time ago in favour of `formElement` and `formData`, and have been removed altogether in SvelteKit 2.\n\n## Forms containing file inputs must use `multipart/form-data`\n\nIf a form contains an `<input type=\"file\">` but does not have an `enctype=\"multipart/form-data\"` attribute, non-JS submissions will omit the file. SvelteKit 2 will throw an error if it encounters a form like this during a `use:enhance` submission to ensure that your forms work correctly when JavaScript is not present.\n\n## Generated `tsconfig.json` is more strict\n\nPreviously, the generated `tsconfig.json` was trying its best to still produce a somewhat valid config when your `tsconfig.json` included `paths` or `baseUrl`. In SvelteKit 2, the validation is more strict and will warn when you use either `paths` or `baseUrl` in your `tsconfig.json`. These settings are used to generate path aliases and you should use [the `alias` config](configuration#alias) option in your `svelte.config.js` instead, to also create a corresponding alias for the bundler.\n\n## `getRequest` no longer throws errors\n\nThe `@sveltejs/kit/node` module exports helper functions for use in Node environments, including `getRequest` which turns a Node [`ClientRequest`](https://nodejs.org/api/http.html#class-httpclientrequest) into a standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) object.\n\nIn SvelteKit 1, `getRequest` could throw if the `Content-Length` header exceeded the specified size limit. In SvelteKit 2, the error will not be thrown until later, when the request body (if any) is being read. This enables better diagnostics and simpler code.\n\n## `vitePreprocess` is no longer exported from `@sveltejs/kit/vite`\n\nSince `@sveltejs/vite-plugin-svelte` is now a peer dependency, SvelteKit 2 no longer re-exports `vitePreprocess`. You should import it directly from `@sveltejs/vite-plugin-svelte`.\n\n## Updated dependency requirements\n\nSvelteKit 2 requires Node `18.13` or higher, and the following minimum dependency versions:\n\n- `svelte@4`\n- `vite@5`\n- `typescript@5`\n- `@sveltejs/vite-plugin-svelte@3` (this is now required as a `peerDependency` of SvelteKit — previously it was directly depended upon)\n- `@sveltejs/adapter-cloudflare@3` (if you're using these adapters)\n- `@sveltejs/adapter-cloudflare-workers@2`\n- `@sveltejs/adapter-netlify@3`\n- `@sveltejs/adapter-node@2`\n- `@sveltejs/adapter-static@3`\n- `@sveltejs/adapter-vercel@4`\n\n`svelte-migrate` will update your `package.json` for you.\n\nAs part of the TypeScript upgrade, the generated `tsconfig.json` (the one your `tsconfig.json` extends from) now uses `\"moduleResolution\": \"bundler\"` (which is recommended by the TypeScript team, as it properly resolves types from packages with an `exports` map in package.json) and `verbatimModuleSyntax` (which replaces the existing `importsNotUsedAsValues ` and `preserveValueImports` flags — if you have those in your `tsconfig.json`, remove them. `svelte-migrate` will do this for you).\n\n## SvelteKit 2.12: $app/stores deprecated\n\nSvelteKit 2.12 introduced `$app/state` based on the [Svelte 5 runes API](/docs/svelte/what-are-runes). `$app/state` provides everything that `$app/stores` provides but with more flexibility as to where and how you use it. Most importantly, the `page` object is now fine-grained, e.g. updates to `page.state` will not invalidate `page.data` and vice-versa.\n\nAs a consequence, `$app/stores` is deprecated and subject to be removed in SvelteKit 3. We recommend [upgrading to Svelte 5](/docs/svelte/v5-migration-guide), if you haven't already, and then migrate away from `$app/stores`. Most of the replacements should be pretty simple: Replace the `$app/stores` import with `$app/state` and remove the `$` prefixes from the usage sites.\n\n```svelte\n<script>\n\t---import { page } from '$app/stores';---\n\t+++import { page } from '$app/state';+++\n</script>\n\n---{$page.data}---\n+++{page.data}+++\n```\n\nUse `npx sv migrate app-state` to auto-migrate most of your `$app/stores` usages inside `.svelte` components.",
+		"kit/migrating": "SvelteKit is the successor to Sapper and shares many elements of its design.\n\nIf you have an existing Sapper app that you plan to migrate to SvelteKit, there are a number of changes you will need to make. You may find it helpful to view [some examples](additional-resources#Examples) while migrating.\n\n## package.json\n\n### type: \"module\"\n\nAdd `\"type\": \"module\"` to your `package.json`. You can do this step separately from the rest as part of an incremental migration if you are using Sapper 0.29.3\nor newer.\n\n### dependencies\n\nRemove `polka` or `express`, if you're using one of those, and any middleware such as `sirv` or `compression`.\n\n### devDependencies\n\nRemove `sapper` from your `devDependencies` and replace it with `@sveltejs/kit` and whichever [adapter](adapters) you plan to use (see [next section](migrating#Project-files-Configuration)).\n\n### scripts\n\nAny scripts that reference `sapper` should be updated:\n\n- `sapper build` should become `vite build` using the Node [adapter](adapters)\n- `sapper export` should become `vite build` using the static [adapter](adapters)\n- `sapper dev` should become `vite dev`\n- `node __sapper__/build` should become `node build`\n\n## Project files\n\nThe bulk of your app, in `src/routes`, can be left where it is, but several project files will need to be moved or updated.\n\n### Configuration\n\nYour `webpack.config.js` or `rollup.config.js` should be replaced with a `svelte.config.js`, as documented [here](configuration). Svelte preprocessor options should be moved to `config.preprocess`.\n\nYou will need to add an [adapter](adapters). `sapper build` is roughly equivalent to [adapter-node](adapter-node) while `sapper export` is roughly equivalent to [adapter-static](adapter-static), though you might prefer to use an adapter designed for the platform you're deploying to.\n\nIf you were using plugins for filetypes that are not automatically handled by [Vite](https://vitejs.dev), you will need to find Vite equivalents and add them to the [Vite config](project-structure#Project-files-vite.config.js).\n\n### src/client.js\n\nThis file has no equivalent in SvelteKit. Any custom logic (beyond `sapper.start(...)`) should be expressed in your `+layout.svelte` file, inside an `onMount` callback.\n\n### src/server.js\n\nWhen using `adapter-node` the equivalent is a [custom server](adapter-node#Custom-server). Otherwise, this file has no direct equivalent, since SvelteKit apps can run in serverless environments.\n\n### src/service-worker.js\n\nMost imports from `@sapper/service-worker` have equivalents in [`$service-worker`]($service-worker):\n\n- `files` is unchanged\n- `routes` has been removed\n- `shell` is now `build`\n- `timestamp` is now `version`\n\n### src/template.html\n\nThe `src/template.html` file should be renamed `src/app.html`.\n\nRemove `%sapper.base%`, `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%sveltekit.head%` and `%sapper.html%` with `%sveltekit.body%`. The `<div id=\"sapper\">` is no longer necessary.\n\n### src/node_modules\n\nA common pattern in Sapper apps is to put your internal library in a directory inside `src/node_modules`. This doesn't work with Vite, so we use [`src/lib`]($lib) instead.\n\n## Pages and layouts\n\n### Renamed files\n\nRoutes now are made up of the folder name exclusively to remove ambiguity, the folder names leading up to a `+page.svelte` correspond to the route. See [the routing docs](routing) for an overview. The following shows a old/new comparison:\n\n| Old                       | New                       |\n| ------------------------- | ------------------------- |\n| routes/about/index.svelte | routes/about/+page.svelte |\n| routes/about.svelte       | routes/about/+page.svelte |\n\nYour custom error page component should be renamed from `_error.svelte` to `+error.svelte`. Any `_layout.svelte` files should likewise be renamed `+layout.svelte`. [Any other files are ignored](routing#Other-files).\n\n### Imports\n\nThe `goto`, `prefetch` and `prefetchRoutes` imports from `@sapper/app` should be replaced with `goto`, `preloadData` and `preloadCode` imports respectively from [`$app/navigation`]($app-navigation).\n\nThe `stores` import from `@sapper/app` should be replaced — see the [Stores](migrating#Pages-and-layouts-Stores) section below.\n\nAny files you previously imported from directories in `src/node_modules` will need to be replaced with [`$lib`]($lib) imports.\n\n### Preload\n\nAs before, pages and layouts can export a function that allows data to be loaded before rendering takes place.\n\nThis function has been renamed from `preload` to [`load`](load), it now lives in a `+page.js` (or `+layout.js`) next to its `+page.svelte` (or `+layout.svelte`), and its API has changed. Instead of two arguments — `page` and `session` — there is a single `event` argument.\n\nThere is no more `this` object, and consequently no `this.fetch`, `this.error` or `this.redirect`. Instead, you can get [`fetch`](load#Making-fetch-requests) from the input methods, and both [`error`](load#Errors) and [`redirect`](load#Redirects) are now thrown.\n\n### Stores\n\nIn Sapper, you would get references to provided stores like so:\n\n```js\n// @filename: ambient.d.ts\ndeclare module '@sapper/app';\n\n// @filename: index.js\n// ---cut---\nimport { stores } from '@sapper/app';\nconst { preloading, page, session } = stores();\n```\n\nThe `page` store still exists; `preloading` has been replaced with a `navigating` store that contains `from` and `to` properties. `page` now has `url` and `params` properties, but no `path` or `query`.\n\nYou access them differently in SvelteKit. `stores` is now `getStores`, but in most cases it is unnecessary since you can import `navigating`, and `page` directly from [`$app/stores`]($app-stores). If you're on Svelte 5 and SvelteKit 2.12 or higher, consider using [`$app/state`]($app-state) instead.\n\n### Routing\n\nRegex routes are no longer supported. Instead, use [advanced route matching](advanced-routing#Matching).\n\n### Segments\n\nPreviously, layout components received a `segment` prop indicating the child segment. This has been removed; you should use the more flexible `$page.url.pathname` (or `page.url.pathname`) value to derive the segment you're interested in.\n\n### URLs\n\nIn Sapper, all relative URLs were resolved against the base URL — usually `/`, unless the `basepath` option was used — rather than against the current page.\n\nThis caused problems and is no longer the case in SvelteKit. Instead, relative URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. In most cases, it's easier to use root-relative (i.e. starts with `/`) URLs, since their meaning is not context-dependent.\n\n### &lt;a&gt; attributes\n\n- `sapper:prefetch` is now `data-sveltekit-preload-data`\n- `sapper:noscroll` is now `data-sveltekit-noscroll`\n\n## Endpoints\n\nIn Sapper, [server routes](routing#server) received the `req` and `res` objects exposed by Node's `http` module (or the augmented versions provided by frameworks like Polka and Express).\n\nSvelteKit is designed to be agnostic as to where the app is running — it could be running on a Node server, but could equally be running on a serverless platform or in a Cloudflare Worker. For that reason, you no longer interact directly with `req` and `res`. Your endpoints will need to be updated to match the new signature.\n\nTo support this environment-agnostic behavior, `fetch` is now available in the global context, so you don't need to import `node-fetch`, `cross-fetch`, or similar server-side fetch implementations in order to use it.\n\n## Integrations\n\nSee [integrations](./integrations) for detailed information about integrations.\n\n### HTML minifier\n\nSapper includes `html-minifier` by default. SvelteKit does not include this, but you can add it as a prod dependency and then use it through a [hook](hooks#Server-hooks-handle):\n\n```js\n// @filename: ambient.d.ts\n/// <reference types=\"@sveltejs/kit\" />\ndeclare module 'html-minifier';\n\n// @filename: index.js\n// ---cut---\nimport { minify } from 'html-minifier';\nimport { building } from '$app/environment';\n\nconst minification_options = {\n\tcollapseBooleanAttributes: true,\n\tcollapseWhitespace: true,\n\tconservativeCollapse: true,\n\tdecodeEntities: true,\n\thtml5: true,\n\tignoreCustomComments: [/^#/],\n\tminifyCSS: true,\n\tminifyJS: false,\n\tremoveAttributeQuotes: true,\n\tremoveComments: false, // some hydration code needs comments, so leave them in\n\tremoveOptionalTags: true,\n\tremoveRedundantAttributes: true,\n\tremoveScriptTypeAttributes: true,\n\tremoveStyleLinkTypeAttributes: true,\n\tsortAttributes: true,\n\tsortClassName: true\n};\n\n/** @type {import('@sveltejs/kit').Handle} */\nexport async function handle({ event, resolve }) {\n\tlet page = '';\n\n\treturn resolve(event, {\n\t\ttransformPageChunk: ({ html, done }) => {\n\t\t\tpage += html;\n\t\t\tif (done) {\n\t\t\t\treturn building ? minify(page, minification_options) : page;\n\t\t\t}\n\t\t}\n\t});\n}\n```\n\nNote that `prerendering` is `false` when using `vite preview` to test the production build of the site, so to verify the results of minifying, you'll need to inspect the built HTML files directly.",
+		"kit/additional-resources": "## FAQs\n\nPlease see the [SvelteKit FAQ](faq) for solutions to common issues and helpful tips and tricks.\n\nThe [Svelte FAQ](../svelte/faq) and [`vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md) may also be helpful for questions deriving from those libraries.\n\n## Examples\n\nWe've written and published a few different SvelteKit sites as examples:\n\n- [`sveltejs/realworld`](https://github.com/sveltejs/realworld) contains an example blog site\n- [A HackerNews clone](https://github.com/sveltejs/sites/tree/master/sites/hn.svelte.dev)\n- [`svelte.dev`](https://github.com/sveltejs/svelte.dev)\n\nSvelteKit users have also published plenty of examples on GitHub, under the [#sveltekit](https://github.com/topics/sveltekit) and [#sveltekit-template](https://github.com/topics/sveltekit-template) topics, as well as on [the Svelte Society site](https://sveltesociety.dev/templates?category=sveltekit). Note that these have not been vetted by the maintainers and may not be up to date.\n\n## Support\n\nYou can ask for help on [Discord](/chat) and [StackOverflow](https://stackoverflow.com/questions/tagged/sveltekit). Please first search for information related to your issue in the FAQ, Google or another search engine, issue tracker, and Discord chat history in order to be respectful of others' time. There are many more people asking questions than answering them, so this will help in allowing the community to grow in a scalable fashion.",
+		"kit/glossary": "The core of SvelteKit provides a highly configurable rendering engine. This section describes some of the terms used when discussing rendering. A reference for setting these options is provided in the documentation above.\n\n## CSR\n\nClient-side rendering (CSR) is the generation of the page contents in the web browser using JavaScript.\n\nIn SvelteKit, client-side rendering will be used by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).\n\n## Edge\n\nRendering on the edge refers to rendering an application in a content delivery network (CDN) near the user. Edge rendering allows the request and response for a page to travel a shorter distance thus improving latency.\n\n## Hybrid app\n\nSvelteKit uses a hybrid rendering mode by default where it loads the initial HTML from the server (SSR), and then updates the page contents on subsequent navigations via client-side rendering (CSR).\n\n## Hydration\n\nSvelte components store some state and update the DOM when the state is updated. When fetching data during SSR, by default SvelteKit will store this data and transmit it to the client along with the server-rendered HTML. The components can then be initialized on the client with that data without having to call the same API endpoints again. Svelte will then check that the DOM is in the expected state and attach event listeners in a process called hydration. Once the components are fully hydrated, they can react to changes to their properties just like any newly created Svelte component.\n\nIn SvelteKit, pages will be hydrated by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).\n\n## ISR\n\nIncremental static regeneration (ISR) allows you to generate static pages on your site as visitors request those pages without redeploying. This may reduces build times compared to [SSG](#SSG) sites with a large number of pages. You can do [ISR with `adapter-vercel`](adapter-vercel#Incremental-Static-Regeneration).\n\n## MPA\n\nTraditional applications that render each page view on the server — such as those written in languages other than JavaScript — are often referred to as multi-page apps (MPA).\n\n## Prerendering\n\nPrerendering means computing the contents of a page at build time and saving the HTML for display. This approach has the same benefits as traditional server-rendered pages, but avoids recomputing the page for each visitor and so scales nearly for free as the number of visitors increases. The tradeoff is that the build process is more expensive and prerendered content can only be updated by building and deploying a new version of the application.\n\nNot all pages can be prerendered. The basic rule is this: for content to be prerenderable, any two users hitting it directly must get the same content from the server, and the page must not contain [actions](form-actions). Note that you can still prerender content that is loaded based on the page's parameters as long as all users will be seeing the same prerendered content.\n\nPre-rendered pages are not limited to static content. You can build personalized pages if user-specific data is fetched and rendered client-side. This is subject to the caveat that you will experience the downsides of not doing SSR for that content as discussed above.\n\nIn SvelteKit, you can control prerendering with [the `prerender` page option](page-options#prerender) and [`prerender` config](configuration#prerender) in `svelte.config.js`.\n\n## PWA\n\nA progressive web app (PWA) is an app that's built using web APIs and technologies, but functions like a mobile or desktop app. Sites served as [PWAs can be installed](https://web.dev/learn/pwa/installation), allowing you to add a shortcut to the application on your launcher, home screen, or start menu. Many PWAs will utilize [service workers](service-workers) to build offline capabilities.\n\n## Routing\n\nBy default, when you navigate to a new page (by clicking on a link or using the browser's forward or back buttons), SvelteKit will intercept the attempted navigation and handle it instead of allowing the browser to send a request to the server for the destination page. SvelteKit will then update the displayed contents on the client by rendering the component for the new page, which in turn can make calls to the necessary API endpoints. This process of updating the page on the client in response to attempted navigation is called client-side routing.\n\nIn SvelteKit, client-side routing will be used by default, but you can skip it with [`data-sveltekit-reload`](link-options#data-sveltekit-reload).\n\n## SPA\n\nA single-page app (SPA) is an application in which all requests to the server load a single HTML file which then does client-side rendering based on the requested URL. All navigation is handled on the client-side in a process called client-side routing with per-page contents being updated and common layout elements remaining largely unchanged. Throughout this site, when we refer to a SPA, we use this definition where a SPA simply serves an empty shell on the initial request. It should not be confused with a [hybrid app](#Hybrid-app), which serves HTML on the initial request. It has a large performance impact by forcing two network round trips before rendering can begin. Because SPA mode has large negative performance and SEO impacts, it is recommended only in very limited circumstances such as when being wrapped in a mobile app.\n\nIn SvelteKit, you can [build SPAs with `adapter-static`](single-page-apps).\n\n## SSG\n\nStatic Site Generation (SSG) is a term that refers to a site where every page is prerendered. One benefit of fully prerendering a site is that you do not need to maintain or pay for servers to perform SSR. Once generated, the site can be served from CDNs, leading to great “time to first byte” performance. This delivery model is often referred to as JAMstack.\n\nIn SvelteKit, you can do static site generation by using [`adapter-static`](adapter-static) or by configuring every page to be prerendered using [the `prerender` page option](page-options#prerender) or [`prerender` config](configuration#prerender) in `svelte.config.js`.\n\n## SSR\n\nServer-side rendering (SSR) is the generation of the page contents on the server. Returning the page contents from the server via SSR or prerendering is highly preferred for performance and SEO. It significantly improves performance by avoiding the introduction of extra round trips necessary in a SPA, and makes your app accessible to users if JavaScript fails or is disabled (which happens [more often than you probably think](https://kryogenix.org/code/browser/everyonehasjs.html)). While some search engines can index content that is dynamically generated on the client-side, it is likely to take longer even in these cases.\n\nIn SvelteKit, pages are server-side rendered by default. You can disable SSR with [the `ssr` page option](page-options#ssr).",
+		"kit/@sveltejs-kit": "```js\n// @noErrors\nimport {\n\tServer,\n\tVERSION,\n\terror,\n\tfail,\n\tisActionFailure,\n\tisHttpError,\n\tisRedirect,\n\tjson,\n\tnormalizeUrl,\n\tredirect,\n\ttext\n} from '@sveltejs/kit';\n```\n\n## Server\n\n<div class=\"ts-block\">\n\n```dts\nclass Server {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(manifest: SSRManifest);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ninit(options: ServerInitOptions): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrespond(request: Request, options: RequestOptions): Promise<Response>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## VERSION\n\n<div class=\"ts-block\">\n\n```dts\nconst VERSION: string;\n```\n\n</div>\n\n\n\n## error\n\nThrows an error with a HTTP status code and an optional message.\nWhen called during request handling, this will cause SvelteKit to\nreturn an error response without invoking `handleError`.\nMake sure you're not catching the thrown error, which would prevent SvelteKit from handling it.\n\n<div class=\"ts-block\">\n\n```dts\nfunction error(status: number, body: App.Error): never;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction error(\n\tstatus: number,\n\tbody?: {\n\t\tmessage: string;\n\t} extends App.Error\n\t\t? App.Error | string | undefined\n\t\t: never\n): never;\n```\n\n</div>\n\n\n\n## fail\n\nCreate an `ActionFailure` object. Call when form submission fails.\n\n<div class=\"ts-block\">\n\n```dts\nfunction fail(status: number): ActionFailure<undefined>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction fail<T = undefined>(\n\tstatus: number,\n\tdata: T\n): ActionFailure<T>;\n```\n\n</div>\n\n\n\n## isActionFailure\n\nChecks whether this is an action failure thrown by `fail`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction isActionFailure(e: unknown): e is ActionFailure;\n```\n\n</div>\n\n\n\n## isHttpError\n\nChecks whether this is an error thrown by `error`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction isHttpError<T extends number>(\n\te: unknown,\n\tstatus?: T\n): e is HttpError_1 & {\n\tstatus: T extends undefined ? never : T;\n};\n```\n\n</div>\n\n\n\n## isRedirect\n\nChecks whether this is a redirect thrown by `redirect`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction isRedirect(e: unknown): e is Redirect_1;\n```\n\n</div>\n\n\n\n## json\n\nCreate a JSON `Response` object from the supplied data.\n\n<div class=\"ts-block\">\n\n```dts\nfunction json(data: any, init?: ResponseInit): Response;\n```\n\n</div>\n\n\n\n## normalizeUrl\n\n<blockquote class=\"since note\">\n\nAvailable since 2.18.0\n\n</blockquote>\n\nStrips possible SvelteKit-internal suffixes and trailing slashes from the URL pathname.\nReturns the normalized URL as well as a method for adding the potential suffix back\nbased on a new pathname (possibly including search) or URL.\n```js\n// @errors: 7031\nimport { normalizeUrl } from '@sveltejs/kit';\n\nconst { url, denormalize } = normalizeUrl('/blog/post/__data.json');\nconsole.log(url.pathname); // /blog/post\nconsole.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction normalizeUrl(url: URL | string): {\n\turl: URL;\n\twasNormalized: boolean;\n\tdenormalize: (url?: string | URL) => URL;\n};\n```\n\n</div>\n\n\n\n## redirect\n\nRedirect a request. When called during request handling, SvelteKit will return a redirect response.\nMake sure you're not catching the thrown redirect, which would prevent SvelteKit from handling it.\n\nMost common status codes:\n * `303 See Other`: redirect as a GET request (often used after a form POST request)\n * `307 Temporary Redirect`: redirect will keep the request method\n * `308 Permanent Redirect`: redirect will keep the request method, SEO will be transferred to the new page\n\n[See all redirect status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages)\n\n<div class=\"ts-block\">\n\n```dts\nfunction redirect(\n\tstatus:\n\t\t| 300\n\t\t| 301\n\t\t| 302\n\t\t| 303\n\t\t| 304\n\t\t| 305\n\t\t| 306\n\t\t| 307\n\t\t| 308\n\t\t| ({} & number),\n\tlocation: string | URL\n): never;\n```\n\n</div>\n\n\n\n## text\n\nCreate a `Response` object from the supplied body.\n\n<div class=\"ts-block\">\n\n```dts\nfunction text(body: string, init?: ResponseInit): Response;\n```\n\n</div>\n\n\n\n## Action\n\nShape of a form action method that is part of `export const actions = {...}` in `+page.server.js`.\nSee [form actions](/docs/kit/form-actions) for more information.\n\n<div class=\"ts-block\">\n\n```dts\ntype Action<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tOutputData extends Record<string, any> | void = Record<\n\t\tstring,\n\t\tany\n\t> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: RequestEvent<Params, RouteId>\n) => MaybePromise<OutputData>;\n```\n\n</div>\n\n## ActionFailure\n\n<div class=\"ts-block\">\n\n```dts\ninterface ActionFailure<T = undefined> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatus: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndata: T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n[uniqueSymbol]: true;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## ActionResult\n\nWhen calling a form action via fetch, the response will be one of these shapes.\n```svelte\n<form method=\"post\" use:enhance={() => {\n\treturn ({ result }) => {\n\t\t// result is of type ActionResult\n\t};\n}}\n```\n\n<div class=\"ts-block\">\n\n```dts\ntype ActionResult<\n\tSuccess extends\n\t\t| Record<string, unknown>\n\t\t| undefined = Record<string, any>,\n\tFailure extends\n\t\t| Record<string, unknown>\n\t\t| undefined = Record<string, any>\n> =\n\t| { type: 'success'; status: number; data?: Success }\n\t| { type: 'failure'; status: number; data?: Failure }\n\t| { type: 'redirect'; status: number; location: string }\n\t| { type: 'error'; status?: number; error: any };\n```\n\n</div>\n\n## Actions\n\nShape of the `export const actions = {...}` object in `+page.server.js`.\nSee [form actions](/docs/kit/form-actions) for more information.\n\n<div class=\"ts-block\">\n\n```dts\ntype Actions<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tOutputData extends Record<string, any> | void = Record<\n\t\tstring,\n\t\tany\n\t> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = Record<string, Action<Params, OutputData, RouteId>>;\n```\n\n</div>\n\n## Adapter\n\n[Adapters](/docs/kit/adapters) are responsible for taking the production build and turning it into something that can be deployed to a platform of your choosing.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Adapter {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nname: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe name of the adapter, using for logging. Will typically correspond to the package name.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nadapt: (builder: Builder) => MaybePromise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `builder` An object provided by SvelteKit that contains methods for adapting the app\n\n</div>\n\nThis function is called after SvelteKit has built your app.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsupports?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nChecks called during dev and build to determine whether specific features will work in production with this adapter.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nread?: (details: { config: any; route: { id: string } }) => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `details.config` The merged route config\n\n</div>\n\nTest support for `read` from `$app/server`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\ninstrumentation?: () => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nTest support for `instrumentation.server.js`. To pass, the adapter must support running `instrumentation.server.js` prior to the application code.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nemulate?: () => MaybePromise<Emulator>;\n```\n\n<div class=\"ts-block-property-details\">\n\nCreates an `Emulator`, which allows the adapter to influence the environment\nduring dev, build and prerendering.\n\n</div>\n</div></div>\n\n## AfterNavigate\n\nThe argument passed to [`afterNavigate`](/docs/kit/$app-navigation#afterNavigate) callbacks.\n\n<div class=\"ts-block\">\n\n```dts\ntype AfterNavigate = (Navigation | NavigationEnter) & {\n\t/**\n\t * The type of navigation:\n\t * - `enter`: The app has hydrated/started\n\t * - `form`: The user submitted a `<form method=\"GET\">`\n\t * - `link`: Navigation was triggered by a link click\n\t * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n\t * - `popstate`: Navigation was triggered by back/forward navigation\n\t */\n\ttype: Exclude<NavigationType, 'leave'>;\n\t/**\n\t * Since `afterNavigate` callbacks are called after a navigation completes, they will never be called with a navigation that unloads the page.\n\t */\n\twillUnload: false;\n};\n```\n\n</div>\n\n## AwaitedActions\n\n<div class=\"ts-block\">\n\n```dts\ntype AwaitedActions<\n\tT extends Record<string, (...args: any) => any>\n> = OptionalUnion<\n\t{\n\t\t[Key in keyof T]: UnpackValidationError<\n\t\t\tAwaited<ReturnType<T[Key]>>\n\t\t>;\n\t}[keyof T]\n>;\n```\n\n</div>\n\n## BeforeNavigate\n\nThe argument passed to [`beforeNavigate`](/docs/kit/$app-navigation#beforeNavigate) callbacks.\n\n<div class=\"ts-block\">\n\n```dts\ntype BeforeNavigate = Navigation & {\n\t/**\n\t * Call this to prevent the navigation from starting.\n\t */\n\tcancel: () => void;\n};\n```\n\n</div>\n\n## Builder\n\nThis object is passed to the `adapt` function of adapters.\nIt contains various methods and properties that are useful for adapting the app.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Builder {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nlog: Logger;\n```\n\n<div class=\"ts-block-property-details\">\n\nPrint messages to the console. `log.info` and `log.minor` are silent unless Vite's `logLevel` is `info`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrimraf: (dir: string) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nRemove `dir` and all its contents.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmkdirp: (dir: string) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nCreate `dir` and any required parent directories.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nconfig: ValidatedConfig;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe fully resolved Svelte config.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprerendered: Prerendered;\n```\n\n<div class=\"ts-block-property-details\">\n\nInformation about prerendered pages and assets, if any.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroutes: RouteDefinition[];\n```\n\n<div class=\"ts-block-property-details\">\n\nAn array of all routes (including prerendered)\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncreateEntries: (fn: (route: RouteDefinition) => AdapterEntry) => Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `fn` A function that groups a set of routes into an entry point\n- <span class=\"tag deprecated\">deprecated</span> Use `builder.routes` instead\n\n</div>\n\nCreate separate functions that map to one or more routes of your app.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfindServerAssets: (routes: RouteDefinition[]) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\nFind all the assets imported by server files belonging to `routes`\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngenerateFallback: (dest: string) => Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nGenerate a fallback page for a static webserver to use when no route is matched. Useful for single-page apps.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngenerateEnvModule: () => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nGenerate a module exposing build-time environment variables as `$env/dynamic/public`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngenerateManifest: (opts: { relativePath: string; routes?: RouteDefinition[] }) => string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `opts` a relative path to the base directory of the app and optionally in which format (esm or cjs) the manifest should be generated\n\n</div>\n\nGenerate a server-side manifest to initialise the SvelteKit [server](/docs/kit/@sveltejs-kit#Server) with.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetBuildDirectory: (name: string) => string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` path to the file, relative to the build directory\n\n</div>\n\nResolve a path to the `name` directory inside `outDir`, e.g. `/path/to/.svelte-kit/my-adapter`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetClientDirectory: () => string;\n```\n\n<div class=\"ts-block-property-details\">\n\nGet the fully resolved path to the directory containing client-side assets, including the contents of your `static` directory.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetServerDirectory: () => string;\n```\n\n<div class=\"ts-block-property-details\">\n\nGet the fully resolved path to the directory containing server-side code.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetAppPath: () => string;\n```\n\n<div class=\"ts-block-property-details\">\n\nGet the application path including any configured `base` path, e.g. `my-base-path/_app`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwriteClient: (dest: string) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `dest` the destination folder\n- <span class=\"tag\">returns</span> an array of files written to `dest`\n\n</div>\n\nWrite client assets to `dest`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwritePrerendered: (dest: string) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `dest` the destination folder\n- <span class=\"tag\">returns</span> an array of files written to `dest`\n\n</div>\n\nWrite prerendered files to `dest`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwriteServer: (dest: string) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `dest` the destination folder\n- <span class=\"tag\">returns</span> an array of files written to `dest`\n\n</div>\n\nWrite server-side code to `dest`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncopy: (\n\tfrom: string,\n\tto: string,\n\topts?: {\n\t\tfilter?(basename: string): boolean;\n\t\treplace?: Record<string, string>;\n\t}\n) => string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `from` the source file or directory\n- `to` the destination file or directory\n- `opts.filter` a function to determine whether a file or directory should be copied\n- `opts.replace` a map of strings to replace\n- <span class=\"tag\">returns</span> an array of files that were copied\n\n</div>\n\nCopy a file or directory.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nhasServerInstrumentationFile: () => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">returns</span> true if the server instrumentation file exists, false otherwise\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nCheck if the server instrumentation file exists.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ninstrument: (args: {\n\tentrypoint: string;\n\tinstrumentation: string;\n\tstart?: string;\n\tmodule?:\n\t\t| {\n\t\t\t\texports: string[];\n\t\t  }\n\t\t| {\n\t\t\t\tgenerateText: (args: { instrumentation: string; start: string }) => string;\n\t\t  };\n}) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `options` an object containing the following properties:\n- `options.entrypoint` the path to the entrypoint to trace.\n- `options.instrumentation` the path to the instrumentation file.\n- `options.start` the name of the start file. This is what `entrypoint` will be renamed to.\n- `options.module` configuration for the resulting entrypoint module.\n- `options.module.generateText` a function that receives the relative paths to the instrumentation and start files, and generates the text of the module to be traced. If not provided, the default implementation will be used, which uses top-level await.\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nInstrument `entrypoint` with `instrumentation`.\n\nRenames `entrypoint` to `start` and creates a new module at\n`entrypoint` which imports `instrumentation` and then dynamically imports `start`. This allows\nthe module hooks necessary for instrumentation libraries to be loaded prior to any application code.\n\nCaveats:\n- \"Live exports\" will not work. If your adapter uses live exports, your users will need to manually import the server instrumentation on startup.\n- If `tla` is `false`, OTEL auto-instrumentation may not work properly. Use it if your environment supports it.\n- Use `hasServerInstrumentationFile` to check if the user has a server instrumentation file; if they don't, you shouldn't do this.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncompress: (directory: string) => Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `directory` The directory containing the files to be compressed\n\n</div>\n\nCompress files in `directory` with gzip and brotli, where appropriate. Generates `.gz` and `.br` files alongside the originals.\n\n</div>\n</div></div>\n\n## ClientInit\n\n<blockquote class=\"since note\">\n\nAvailable since 2.10.0\n\n</blockquote>\n\nThe [`init`](/docs/kit/hooks#Shared-hooks-init) will be invoked once the app starts in the browser\n\n<div class=\"ts-block\">\n\n```dts\ntype ClientInit = () => MaybePromise<void>;\n```\n\n</div>\n\n## Config\n\nSee the [configuration reference](/docs/kit/configuration) for details.\n\n## Cookies\n\n<div class=\"ts-block\">\n\n```dts\ninterface Cookies {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nget: (name: string, opts?: import('cookie').CookieParseOptions) => string | undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` the name of the cookie\n- `opts` the options, passed directly to `cookie.parse`. See documentation [here](https://github.com/jshttp/cookie#cookieparsestr-options)\n\n</div>\n\nGets a cookie that was previously set with `cookies.set`, or from the request headers.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetAll: (opts?: import('cookie').CookieParseOptions) => Array<{ name: string; value: string }>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `opts` the options, passed directly to `cookie.parse`. See documentation [here](https://github.com/jshttp/cookie#cookieparsestr-options)\n\n</div>\n\nGets all cookies that were previously set with `cookies.set`, or from the request headers.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset: (\n\tname: string,\n\tvalue: string,\n\topts: import('cookie').CookieSerializeOptions & { path: string }\n) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` the name of the cookie\n- `value` the cookie value\n- `opts` the options, passed directly to `cookie.serialize`. See documentation [here](https://github.com/jshttp/cookie#cookieserializename-value-options)\n\n</div>\n\nSets a cookie. This will add a `set-cookie` header to the response, but also make the cookie available via `cookies.get` or `cookies.getAll` during the current request.\n\nThe `httpOnly` and `secure` options are `true` by default (except on http://localhost, where `secure` is `false`), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The `sameSite` option defaults to `lax`.\n\nYou must specify a `path` for the cookie. In most cases you should explicitly set `path: '/'` to make the cookie available throughout your app. You can use relative paths, or set `path: ''` to make the cookie only available on the current path and its children\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelete: (name: string, opts: import('cookie').CookieSerializeOptions & { path: string }) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` the name of the cookie\n- `opts` the options, passed directly to `cookie.serialize`. The `path` must match the path of the cookie you want to delete. See documentation [here](https://github.com/jshttp/cookie#cookieserializename-value-options)\n\n</div>\n\nDeletes a cookie by setting its value to an empty string and setting the expiry date in the past.\n\nYou must specify a `path` for the cookie. In most cases you should explicitly set `path: '/'` to make the cookie available throughout your app. You can use relative paths, or set `path: ''` to make the cookie only available on the current path and its children\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nserialize: (\n\tname: string,\n\tvalue: string,\n\topts: import('cookie').CookieSerializeOptions & { path: string }\n) => string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` the name of the cookie\n- `value` the cookie value\n- `opts` the options, passed directly to `cookie.serialize`. See documentation [here](https://github.com/jshttp/cookie#cookieserializename-value-options)\n\n</div>\n\nSerialize a cookie name-value pair into a `Set-Cookie` header string, but don't apply it to the response.\n\nThe `httpOnly` and `secure` options are `true` by default (except on http://localhost, where `secure` is `false`), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The `sameSite` option defaults to `lax`.\n\nYou must specify a `path` for the cookie. In most cases you should explicitly set `path: '/'` to make the cookie available throughout your app. You can use relative paths, or set `path: ''` to make the cookie only available on the current path and its children\n\n</div>\n</div></div>\n\n## Emulator\n\nA collection of functions that influence the environment during dev, build and prerendering\n\n<div class=\"ts-block\">\n\n```dts\ninterface Emulator {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nplatform?(details: { config: any; prerender: PrerenderOption }): MaybePromise<App.Platform>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that is called with the current route `config` and `prerender` option\nand returns an `App.Platform` object\n\n</div>\n</div></div>\n\n## Handle\n\nThe [`handle`](/docs/kit/hooks#Server-hooks-handle) hook runs every time the SvelteKit server receives a [request](/docs/kit/web-standards#Fetch-APIs-Request) and\ndetermines the [response](/docs/kit/web-standards#Fetch-APIs-Response).\nIt receives an `event` object representing the request and a function called `resolve`, which renders the route and generates a `Response`.\nThis allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).\n\n<div class=\"ts-block\">\n\n```dts\ntype Handle = (input: {\n\tevent: RequestEvent;\n\tresolve: (\n\t\tevent: RequestEvent,\n\t\topts?: ResolveOptions\n\t) => MaybePromise<Response>;\n}) => MaybePromise<Response>;\n```\n\n</div>\n\n## HandleClientError\n\nThe client-side [`handleError`](/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while navigating.\n\nIf an unexpected error is thrown during loading or the following render, this function will be called with the error and the event.\nMake sure that this function _never_ throws an error.\n\n<div class=\"ts-block\">\n\n```dts\ntype HandleClientError = (input: {\n\terror: unknown;\n\tevent: NavigationEvent;\n\tstatus: number;\n\tmessage: string;\n}) => MaybePromise<void | App.Error>;\n```\n\n</div>\n\n## HandleFetch\n\nThe [`handleFetch`](/docs/kit/hooks#Server-hooks-handleFetch) hook allows you to modify (or replace) the result of an [`event.fetch`](/docs/kit/load#Making-fetch-requests) call that runs on the server (or during prerendering) inside an endpoint, `load`, `action`, `handle`, `handleError` or `reroute`.\n\n<div class=\"ts-block\">\n\n```dts\ntype HandleFetch = (input: {\n\tevent: RequestEvent;\n\trequest: Request;\n\tfetch: typeof fetch;\n}) => MaybePromise<Response>;\n```\n\n</div>\n\n## HandleServerError\n\nThe server-side [`handleError`](/docs/kit/hooks#Shared-hooks-handleError) hook runs when an unexpected error is thrown while responding to a request.\n\nIf an unexpected error is thrown during loading or rendering, this function will be called with the error and the event.\nMake sure that this function _never_ throws an error.\n\n<div class=\"ts-block\">\n\n```dts\ntype HandleServerError = (input: {\n\terror: unknown;\n\tevent: RequestEvent;\n\tstatus: number;\n\tmessage: string;\n}) => MaybePromise<void | App.Error>;\n```\n\n</div>\n\n## HandleValidationError\n\nThe [`handleValidationError`](/docs/kit/hooks#Server-hooks-handleValidationError) hook runs when the argument to a remote function fails validation.\n\nIt will be called with the validation issues and the event, and must return an object shape that matches `App.Error`.\n\n<div class=\"ts-block\">\n\n```dts\ntype HandleValidationError<\n\tIssue extends\n\t\tStandardSchemaV1.Issue = StandardSchemaV1.Issue\n> = (input: {\n\tissues: Issue[];\n\tevent: RequestEvent;\n}) => MaybePromise<App.Error>;\n```\n\n</div>\n\n## HttpError\n\nThe object returned by the [`error`](/docs/kit/@sveltejs-kit#error) function.\n\n<div class=\"ts-block\">\n\n```dts\ninterface HttpError {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatus: number;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses), in the range 400-599.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nbody: App.Error;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe content of the error.\n\n</div>\n</div></div>\n\n## Invalid\n\nA function and proxy object used to imperatively create validation errors in form handlers.\n\nCall `invalid(issue1, issue2, ...issueN)` to throw a validation error.\nIf an issue is a `string`, it applies to the form as a whole (and will show up in `fields.allIssues()`)\nAccess properties to create field-specific issues: `invalid.fieldName('message')`.\nThe type structure mirrors the input data structure for type-safe field access.\n\n<div class=\"ts-block\">\n\n```dts\ntype Invalid<Input = any> = ((\n\t...issues: Array<string | StandardSchemaV1.Issue>\n) => never) &\n\tInvalidField<Input>;\n```\n\n</div>\n\n## KitConfig\n\nSee the [configuration reference](/docs/kit/configuration) for details.\n\n## LessThan\n\n<div class=\"ts-block\">\n\n```dts\ntype LessThan<\n\tTNumber extends number,\n\tTArray extends any[] = []\n> = TNumber extends TArray['length']\n\t? TArray[number]\n\t: LessThan<TNumber, [...TArray, TArray['length']]>;\n```\n\n</div>\n\n## Load\n\nThe generic form of `PageLoad` and `LayoutLoad`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types))\nrather than using `Load` directly.\n\n<div class=\"ts-block\">\n\n```dts\ntype Load<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tInputData extends Record<string, unknown> | null = Record<\n\t\tstring,\n\t\tany\n\t> | null,\n\tParentData extends Record<string, unknown> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tOutputData extends Record<\n\t\tstring,\n\t\tunknown\n\t> | void = Record<string, any> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: LoadEvent<Params, InputData, ParentData, RouteId>\n) => MaybePromise<OutputData>;\n```\n\n</div>\n\n## LoadEvent\n\nThe generic form of `PageLoadEvent` and `LayoutLoadEvent`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types))\nrather than using `LoadEvent` directly.\n\n<div class=\"ts-block\">\n\n```dts\ninterface LoadEvent<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tData extends Record<string, unknown> | null = Record<\n\t\tstring,\n\t\tany\n\t> | null,\n\tParentData extends Record<string, unknown> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> extends NavigationEvent<Params, RouteId> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nfetch: typeof fetch;\n```\n\n<div class=\"ts-block-property-details\">\n\n`fetch` is equivalent to the [native `fetch` web API](https://developer.mozilla.org/en-US/docs/Web/API/fetch), with a few additional features:\n\n- It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request.\n- It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context).\n- Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\n- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/kit/hooks#Server-hooks-handle)\n- During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies)\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndata: Data;\n```\n\n<div class=\"ts-block-property-details\">\n\nContains the data returned by the route's server `load` function (in `+layout.server.js` or `+page.server.js`), if any.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsetHeaders: (headers: Record<string, string>) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nIf you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:\n\n```js\n// @errors: 7031\n/// file: src/routes/blog/+page.js\nexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}\n```\n\nSetting the same header multiple times (even in separate `load` functions) is an error — you can only set a given header once.\n\nYou cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](/docs/kit/@sveltejs-kit#Cookies) API in a server-only `load` function instead.\n\n`setHeaders` has no effect when a `load` function runs in the browser.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nparent: () => Promise<ParentData>;\n```\n\n<div class=\"ts-block-property-details\">\n\n`await parent()` returns data from parent `+layout.js` `load` functions.\nImplicitly, a missing `+layout.js` is treated as a `({ data }) => data` function, meaning that it will return and forward data from parent `+layout.server.js` files.\n\nBe careful not to introduce accidental waterfalls when using `await parent()`. If for example you only want to merge parent data into the returned output, call it _after_ fetching your other data.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndepends: (...deps: Array<`${string}:${string}`>) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nThis function declares that the `load` function has a _dependency_ on one or more URLs or custom identifiers, which can subsequently be used with [`invalidate()`](/docs/kit/$app-navigation#invalidate) to cause `load` to rerun.\n\nMost of the time you won't need this, as `fetch` calls `depends` on your behalf — it's only necessary if you're using a custom API client that bypasses `fetch`.\n\nURLs can be absolute or relative to the page being loaded, and must be [encoded](https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding).\n\nCustom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the [URI specification](https://www.rfc-editor.org/rfc/rfc3986.html).\n\nThe following example shows how to use `depends` to register a dependency on a custom identifier, which is `invalidate`d after a button click, making the `load` function rerun.\n\n```js\n// @errors: 7031\n/// file: src/routes/+page.js\nlet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}\n```\n\n```html\n/// file: src/routes/+page.svelte\n<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nuntrack: <T>(fn: () => T) => T;\n```\n\n<div class=\"ts-block-property-details\">\n\nUse this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example:\n\n```js\n// @errors: 7031\n/// file: src/routes/+page.server.js\nexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntracing: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nAccess to spans for tracing. If tracing is not enabled or the function is being run in the browser, these spans will do nothing.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nenabled: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether tracing is enabled.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nroot: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe root span for the request. This span is named `sveltekit.handle.root`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\ncurrent: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe span associated with the current `load` function.\n\n</div>\n</div></div>\n\n</div>\n</div></div>\n\n## LoadProperties\n\n<div class=\"ts-block\">\n\n```dts\ntype LoadProperties<\n\tinput extends Record<string, any> | void\n> = input extends void\n\t? undefined // needs to be undefined, because void will break intellisense\n\t: input extends Record<string, any>\n\t\t? input\n\t\t: unknown;\n```\n\n</div>\n\n## Navigation\n\n<div class=\"ts-block\">\n\n```dts\ntype Navigation =\n\t| NavigationExternal\n\t| NavigationFormSubmit\n\t| NavigationPopState\n\t| NavigationLink;\n```\n\n</div>\n\n## NavigationBase\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nfrom: NavigationTarget | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhere navigation was triggered from\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nto: NavigationTarget | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhere navigation is going to/has gone to\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwillUnload: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether or not the navigation will result in the page being unloaded (i.e. not a client-side navigation)\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncomplete: Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA promise that resolves once the navigation is complete, and rejects if the navigation\nfails or is aborted. In the case of a `willUnload` navigation, the promise will never resolve\n\n</div>\n</div></div>\n\n## NavigationEnter\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationEnter extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: 'enter';\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nevent?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nDispatched `Event` object when navigation occured by `popstate` or `link`.\n\n</div>\n</div></div>\n\n## NavigationEvent\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationEvent<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nparams: Params;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroute: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nInfo about the current route\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nid: RouteId;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nurl: URL;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe URL of the current page\n\n</div>\n</div></div>\n\n## NavigationExternal\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationExternal extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: Exclude<NavigationType, 'enter' | 'popstate' | 'link' | 'form'>;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div></div>\n\n## NavigationFormSubmit\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationFormSubmit extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: 'form';\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nevent: SubmitEvent;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe `SubmitEvent` that caused the navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div></div>\n\n## NavigationLink\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationLink extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: 'link';\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nevent: PointerEvent;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe `PointerEvent` that caused the navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta?: undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div></div>\n\n## NavigationPopState\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationPopState extends NavigationBase {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntype: 'popstate';\n```\n\n<div class=\"ts-block-property-details\">\n\nThe type of navigation:\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndelta: number;\n```\n\n<div class=\"ts-block-property-details\">\n\nIn case of a history back/forward navigation, the number of steps to go back/forward\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nevent: PopStateEvent;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe `PopStateEvent` that caused the navigation\n\n</div>\n</div></div>\n\n## NavigationTarget\n\nInformation about the target of a specific navigation.\n\n<div class=\"ts-block\">\n\n```dts\ninterface NavigationTarget<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nparams: Params | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nParameters of the target page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.\nIs `null` if the target is not part of the SvelteKit app (could not be resolved to a route).\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroute: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nInfo about the target route\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nid: RouteId | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nurl: URL;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe URL that is navigated to\n\n</div>\n</div></div>\n\n## NavigationType\n\n- `enter`: The app has hydrated/started\n- `form`: The user submitted a `<form method=\"GET\">`\n- `leave`: The app is being left either because the tab is being closed or a navigation to a different document is occurring\n- `link`: Navigation was triggered by a link click\n- `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n- `popstate`: Navigation was triggered by back/forward navigation\n\n<div class=\"ts-block\">\n\n```dts\ntype NavigationType =\n\t| 'enter'\n\t| 'form'\n\t| 'leave'\n\t| 'link'\n\t| 'goto'\n\t| 'popstate';\n```\n\n</div>\n\n## NumericRange\n\n<div class=\"ts-block\">\n\n```dts\ntype NumericRange<\n\tTStart extends number,\n\tTEnd extends number\n> = Exclude<TEnd | LessThan<TEnd>, LessThan<TStart>>;\n```\n\n</div>\n\n## OnNavigate\n\nThe argument passed to [`onNavigate`](/docs/kit/$app-navigation#onNavigate) callbacks.\n\n<div class=\"ts-block\">\n\n```dts\ntype OnNavigate = Navigation & {\n\t/**\n\t * The type of navigation:\n\t * - `form`: The user submitted a `<form method=\"GET\">`\n\t * - `link`: Navigation was triggered by a link click\n\t * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect\n\t * - `popstate`: Navigation was triggered by back/forward navigation\n\t */\n\ttype: Exclude<NavigationType, 'enter' | 'leave'>;\n\t/**\n\t * Since `onNavigate` callbacks are called immediately before a client-side navigation, they will never be called with a navigation that unloads the page.\n\t */\n\twillUnload: false;\n};\n```\n\n</div>\n\n## Page\n\nThe shape of the [`page`](/docs/kit/$app-state#page) reactive object and the [`$page`](/docs/kit/$app-stores) store.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Page<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nurl: URL & { pathname: ResolvedPathname };\n```\n\n<div class=\"ts-block-property-details\">\n\nThe URL of the current page.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nparams: Params;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe parameters of the current page - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroute: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nInfo about the current route.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nid: RouteId;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstatus: number;\n```\n\n<div class=\"ts-block-property-details\">\n\nHTTP status code of the current page.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nerror: App.Error | null;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe error object of the current page, if any. Filled from the `handleError` hooks.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndata: App.PageData & Record<string, any>;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe merged result of all data from all `load` functions on the current page. You can type a common denominator through `App.PageData`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstate: App.PageState;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe page state, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nform: any;\n```\n\n<div class=\"ts-block-property-details\">\n\nFilled only after a form submission. See [form actions](/docs/kit/form-actions) for more info.\n\n</div>\n</div></div>\n\n## ParamMatcher\n\nThe shape of a param matcher. See [matching](/docs/kit/advanced-routing#Matching) for more info.\n\n<div class=\"ts-block\">\n\n```dts\ntype ParamMatcher = (param: string) => boolean;\n```\n\n</div>\n\n## PrerenderOption\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderOption = boolean | 'auto';\n```\n\n</div>\n\n## Redirect\n\nThe object returned by the [`redirect`](/docs/kit/@sveltejs-kit#redirect) function.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Redirect {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatus: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages), in the range 300-308.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nlocation: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe location to redirect to.\n\n</div>\n</div></div>\n\n## RemoteCommand\n\nThe return value of a remote `command` function. See [Remote functions](/docs/kit/remote-functions#command) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteCommand<Input, Output> = {\n\t(arg: Input): Promise<Awaited<Output>> & {\n\t\tupdates(\n\t\t\t...queries: Array<\n\t\t\t\tRemoteQuery<any> | RemoteQueryOverride\n\t\t\t>\n\t\t): Promise<Awaited<Output>>;\n\t};\n\t/** The number of pending command executions */\n\tget pending(): number;\n};\n```\n\n</div>\n\n## RemoteForm\n\nThe return value of a remote `form` function. See [Remote functions](/docs/kit/remote-functions#form) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteForm<\n\tInput extends RemoteFormInput | void,\n\tOutput\n> = {\n\t/** Attachment that sets up an event handler that intercepts the form submission on the client to prevent a full page reload */\n\t[attachment: symbol]: (node: HTMLFormElement) => void;\n\tmethod: 'POST';\n\t/** The URL to send the form to. */\n\taction: string;\n\t/** Use the `enhance` method to influence what happens when the form is submitted. */\n\tenhance(\n\t\tcallback: (opts: {\n\t\t\tform: HTMLFormElement;\n\t\t\tdata: Input;\n\t\t\tsubmit: () => Promise<void> & {\n\t\t\t\tupdates: (\n\t\t\t\t\t...queries: Array<\n\t\t\t\t\t\tRemoteQuery<any> | RemoteQueryOverride\n\t\t\t\t\t>\n\t\t\t\t) => Promise<void>;\n\t\t\t};\n\t\t}) => void | Promise<void>\n\t): {\n\t\tmethod: 'POST';\n\t\taction: string;\n\t\t[attachment: symbol]: (node: HTMLFormElement) => void;\n\t};\n\t/**\n\t * Create an instance of the form for the given `id`.\n\t * The `id` is stringified and used for deduplication to potentially reuse existing instances.\n\t * Useful when you have multiple forms that use the same remote form action, for example in a loop.\n\t * ```svelte\n\t * {#each todos as todo}\n\t *\t{@const todoForm = updateTodo.for(todo.id)}\n\t *\t<form {...todoForm}>\n\t *\t\t{#if todoForm.result?.invalid}<p>Invalid data</p>{/if}\n\t *\t\t...\n\t *\t</form>\n\t *\t{/each}\n\t * ```\n\t */\n\tfor(\n\t\tid: ExtractId<Input>\n\t): Omit<RemoteForm<Input, Output>, 'for'>;\n\t/** Preflight checks */\n\tpreflight(\n\t\tschema: StandardSchemaV1<Input, any>\n\t): RemoteForm<Input, Output>;\n\t/** Validate the form contents programmatically */\n\tvalidate(options?: {\n\t\tincludeUntouched?: boolean;\n\t\t/** Perform validation as if the form was submitted by the given button. */\n\t\tsubmitter?: HTMLButtonElement | HTMLInputElement;\n\t}): Promise<void>;\n\t/** The result of the form submission */\n\tget result(): Output | undefined;\n\t/** The number of pending submissions */\n\tget pending(): number;\n\t/** Access form fields using object notation */\n\tfields: Input extends void\n\t\t? never\n\t\t: RemoteFormFields<Input>;\n\t/** Spread this onto a `<button>` or `<input type=\"submit\">` */\n\tbuttonProps: {\n\t\ttype: 'submit';\n\t\tformmethod: 'POST';\n\t\tformaction: string;\n\t\tonclick: (event: Event) => void;\n\t\t/** Use the `enhance` method to influence what happens when the form is submitted. */\n\t\tenhance(\n\t\t\tcallback: (opts: {\n\t\t\t\tform: HTMLFormElement;\n\t\t\t\tdata: Input;\n\t\t\t\tsubmit: () => Promise<void> & {\n\t\t\t\t\tupdates: (\n\t\t\t\t\t\t...queries: Array<\n\t\t\t\t\t\t\tRemoteQuery<any> | RemoteQueryOverride\n\t\t\t\t\t\t>\n\t\t\t\t\t) => Promise<void>;\n\t\t\t\t};\n\t\t\t}) => void | Promise<void>\n\t\t): {\n\t\t\ttype: 'submit';\n\t\t\tformmethod: 'POST';\n\t\t\tformaction: string;\n\t\t\tonclick: (event: Event) => void;\n\t\t};\n\t\t/** The number of pending submissions */\n\t\tget pending(): number;\n\t};\n};\n```\n\n</div>\n\n## RemoteFormField\n\nForm field accessor type that provides name(), value(), and issues() methods\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteFormField<Value extends RemoteFormFieldValue> =\n\tRemoteFormFieldMethods<Value> & {\n\t\t/**\n\t\t * Returns an object that can be spread onto an input element with the correct type attribute,\n\t\t * aria-invalid attribute if the field is invalid, and appropriate value/checked property getters/setters.\n\t\t * @example\n\t\t * ```svelte\n\t\t * <input {...myForm.fields.myString.as('text')} />\n\t\t * <input {...myForm.fields.myNumber.as('number')} />\n\t\t * <input {...myForm.fields.myBoolean.as('checkbox')} />\n\t\t * ```\n\t\t */\n\t\tas<T extends RemoteFormFieldType<Value>>(\n\t\t\t...args: AsArgs<T, Value>\n\t\t): InputElementProps<T>;\n\t};\n```\n\n</div>\n\n## RemoteFormFieldType\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteFormFieldType<T> = {\n\t[K in keyof InputTypeMap]: T extends InputTypeMap[K]\n\t\t? K\n\t\t: never;\n}[keyof InputTypeMap];\n```\n\n</div>\n\n## RemoteFormFieldValue\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteFormFieldValue =\n\t| string\n\t| string[]\n\t| number\n\t| boolean\n\t| File\n\t| File[];\n```\n\n</div>\n\n## RemoteFormInput\n\n<div class=\"ts-block\">\n\n```dts\ninterface RemoteFormInput {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n[key: string]: MaybeArray<string | number | boolean | File | RemoteFormInput>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## RemoteFormIssue\n\n<div class=\"ts-block\">\n\n```dts\ninterface RemoteFormIssue {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nmessage: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## RemotePrerenderFunction\n\nThe return value of a remote `prerender` function. See [Remote functions](/docs/kit/remote-functions#prerender) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\ntype RemotePrerenderFunction<Input, Output> = (\n\targ: Input\n) => RemoteResource<Output>;\n```\n\n</div>\n\n## RemoteQuery\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteQuery<T> = RemoteResource<T> & {\n\t/**\n\t * On the client, this function will update the value of the query without re-fetching it.\n\t *\n\t * On the server, this can be called in the context of a `command` or `form` and the specified data will accompany the action response back to the client.\n\t * This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\n\t */\n\tset(value: T): void;\n\t/**\n\t * On the client, this function will re-fetch the query from the server.\n\t *\n\t * On the server, this can be called in the context of a `command` or `form` and the refreshed data will accompany the action response back to the client.\n\t * This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.\n\t */\n\trefresh(): Promise<void>;\n\t/**\n\t * Temporarily override the value of a query. This is used with the `updates` method of a [command](https://svelte.dev/docs/kit/remote-functions#command-Updating-queries) or [enhanced form submission](https://svelte.dev/docs/kit/remote-functions#form-enhance) to provide optimistic updates.\n\t *\n\t * ```svelte\n\t * <script>\n\t *   import { getTodos, addTodo } from './todos.remote.js';\n\t *   const todos = getTodos();\n\t * </script>\n\t *\n\t * <form {...addTodo.enhance(async ({ data, submit }) => {\n\t *   await submit().updates(\n\t *     todos.withOverride((todos) => [...todos, { text: data.get('text') }])\n\t *   );\n\t * })}>\n\t *   <input type=\"text\" name=\"text\" />\n\t *   <button type=\"submit\">Add Todo</button>\n\t * </form>\n\t * ```\n\t */\n\twithOverride(\n\t\tupdate: (current: Awaited<T>) => Awaited<T>\n\t): RemoteQueryOverride;\n};\n```\n\n</div>\n\n## RemoteQueryFunction\n\nThe return value of a remote `query` function. See [Remote functions](/docs/kit/remote-functions#query) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteQueryFunction<Input, Output> = (\n\targ: Input\n) => RemoteQuery<Output>;\n```\n\n</div>\n\n## RemoteQueryOverride\n\n<div class=\"ts-block\">\n\n```dts\ninterface RemoteQueryOverride {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n_key: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrelease(): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## RemoteResource\n\n<div class=\"ts-block\">\n\n```dts\ntype RemoteResource<T> = Promise<Awaited<T>> & {\n\t/** The error in case the query fails. Most often this is a [`HttpError`](https://svelte.dev/docs/kit/@sveltejs-kit#HttpError) but it isn't guaranteed to be. */\n\tget error(): any;\n\t/** `true` before the first result is available and during refreshes */\n\tget loading(): boolean;\n} & (\n\t\t| {\n\t\t\t\t/** The current value of the query. Undefined until `ready` is `true` */\n\t\t\t\tget current(): undefined;\n\t\t\t\tready: false;\n\t\t  }\n\t\t| {\n\t\t\t\t/** The current value of the query. Undefined until `ready` is `true` */\n\t\t\t\tget current(): Awaited<T>;\n\t\t\t\tready: true;\n\t\t  }\n\t);\n```\n\n</div>\n\n## RequestEvent\n\n<div class=\"ts-block\">\n\n```dts\ninterface RequestEvent<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ncookies: Cookies;\n```\n\n<div class=\"ts-block-property-details\">\n\nGet or set cookies related to the current request\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfetch: typeof fetch;\n```\n\n<div class=\"ts-block-property-details\">\n\n`fetch` is equivalent to the [native `fetch` web API](https://developer.mozilla.org/en-US/docs/Web/API/fetch), with a few additional features:\n\n- It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request.\n- It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context).\n- Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.\n- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/kit/hooks#Server-hooks-handle)\n- During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.\n\nYou can learn more about making credentialed requests with cookies [here](/docs/kit/load#Cookies).\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngetClientAddress: () => string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe client's IP address, set by the adapter.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nlocals: App.Locals;\n```\n\n<div class=\"ts-block-property-details\">\n\nContains custom data that was added to the request within the [`server handle hook`](/docs/kit/hooks#Server-hooks-handle).\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nparams: Params;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe parameters of the current route - e.g. for a route like `/blog/[slug]`, a `{ slug: string }` object.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nplatform: Readonly<App.Platform> | undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\nAdditional data made available through the adapter.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrequest: Request;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe original request object.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nroute: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nInfo about the current route.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nid: RouteId;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`. It is `null` when no route is matched.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsetHeaders: (headers: Record<string, string>) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nIf you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:\n\n```js\n// @errors: 7031\n/// file: src/routes/blog/+page.js\nexport async function load({ fetch, setHeaders }) {\n\tconst url = `https://cms.example.com/articles.json`;\n\tconst response = await fetch(url);\n\n\tsetHeaders({\n\t\tage: response.headers.get('age'),\n\t\t'cache-control': response.headers.get('cache-control')\n\t});\n\n\treturn response.json();\n}\n```\n\nSetting the same header multiple times (even in separate `load` functions) is an error — you can only set a given header once.\n\nYou cannot add a `set-cookie` header with `setHeaders` — use the [`cookies`](/docs/kit/@sveltejs-kit#Cookies) API instead.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nurl: URL;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe requested URL.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nisDataRequest: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n`true` if the request comes from the client asking for `+page/layout.server.js` data. The `url` property will be stripped of the internal information\nrelated to the data request in this case. Use this property instead if the distinction is important to you.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nisSubRequest: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n`true` for `+server.js` calls coming from SvelteKit without the overhead of actually making an HTTP request. This happens when you make same-origin `fetch` requests on the server.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntracing: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nAccess to spans for tracing. If tracing is not enabled, these spans will do nothing.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nenabled: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether tracing is enabled.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nroot: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe root span for the request. This span is named `sveltekit.handle.root`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\ncurrent: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe span associated with the current `handle` hook, `load` function, or form action.\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nisRemoteRequest: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n`true` if the request comes from the client via a remote function. The `url` property will be stripped of the internal information\nrelated to the data request in this case. Use this property instead if the distinction is important to you.\n\n</div>\n</div></div>\n\n## RequestHandler\n\nA `(event: RequestEvent) => Response` function exported from a `+server.js` file that corresponds to an HTTP verb (`GET`, `PUT`, `PATCH`, etc) and handles requests with that method.\n\nIt receives `Params` as the first generic argument, which you can skip by using [generated types](/docs/kit/types#Generated-types) instead.\n\n<div class=\"ts-block\">\n\n```dts\ntype RequestHandler<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: RequestEvent<Params, RouteId>\n) => MaybePromise<Response>;\n```\n\n</div>\n\n## Reroute\n\n<blockquote class=\"since note\">\n\nAvailable since 2.3.0\n\n</blockquote>\n\nThe [`reroute`](/docs/kit/hooks#Universal-hooks-reroute) hook allows you to modify the URL before it is used to determine which route to render.\n\n<div class=\"ts-block\">\n\n```dts\ntype Reroute = (event: {\n\turl: URL;\n\tfetch: typeof fetch;\n}) => MaybePromise<void | string>;\n```\n\n</div>\n\n## ResolveOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface ResolveOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntransformPageChunk?: (input: { html: string; done: boolean }) => MaybePromise<string | undefined>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `input` the html chunk and the info if this is the last chunk\n\n</div>\n\nApplies custom transforms to HTML. If `done` is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML\n(they could include an element's opening tag but not its closing tag, for example)\nbut they will always be split at sensible boundaries such as `%sveltekit.head%` or layout/page components.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfilterSerializedResponseHeaders?: (name: string, value: string) => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `name` header name\n- `value` header value\n\n</div>\n\nDetermines which headers should be included in serialized responses when a `load` function loads a resource with `fetch`.\nBy default, none will be included.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npreload?: (input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }) => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `input` the type of the file and its path\n\n</div>\n\nDetermines what should be added to the `<head>` tag to preload it.\nBy default, `js` and `css` files will be preloaded.\n\n</div>\n</div></div>\n\n## RouteDefinition\n\n<div class=\"ts-block\">\n\n```dts\ninterface RouteDefinition<Config = any> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nid: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\napi: {\n\tmethods: Array<HttpMethod | '*'>;\n};\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npage: {\n\tmethods: Array<Extract<HttpMethod, 'GET' | 'POST'>>;\n};\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npattern: RegExp;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprerender: PrerenderOption;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsegments: RouteSegment[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmethods: Array<HttpMethod | '*'>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nconfig: Config;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## SSRManifest\n\n<div class=\"ts-block\">\n\n```dts\ninterface SSRManifest {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nappDir: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nappPath: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nassets: Set<string>;\n```\n\n<div class=\"ts-block-property-details\">\n\nStatic files from `kit.config.files.assets` and the service worker (if any).\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmimeTypes: Record<string, string>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n_: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nprivate fields\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nclient: NonNullable<BuildData['client']>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nnodes: SSRNodeLoader[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nremotes: Record<string, () => Promise<any>>;\n```\n\n<div class=\"ts-block-property-details\">\n\nhashed filename -> import to that file\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nroutes: SSRRoute[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nprerendered_routes: Set<string>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nmatchers: () => Promise<Record<string, ParamMatcher>>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nserver_assets: Record<string, number>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA `[file]: size` map of all assets imported by server code.\n\n</div>\n</div></div>\n\n</div>\n</div></div>\n\n## ServerInit\n\n<blockquote class=\"since note\">\n\nAvailable since 2.10.0\n\n</blockquote>\n\nThe [`init`](/docs/kit/hooks#Shared-hooks-init) will be invoked before the server responds to its first request\n\n<div class=\"ts-block\">\n\n```dts\ntype ServerInit = () => MaybePromise<void>;\n```\n\n</div>\n\n## ServerInitOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface ServerInitOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nenv: Record<string, string>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA map of environment variables.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nread?: (file: string) => MaybePromise<ReadableStream | null>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that turns an asset filename into a `ReadableStream`. Required for the `read` export from `$app/server` to work.\n\n</div>\n</div></div>\n\n## ServerLoad\n\nThe generic form of `PageServerLoad` and `LayoutServerLoad`. You should import those from `./$types` (see [generated types](/docs/kit/types#Generated-types))\nrather than using `ServerLoad` directly.\n\n<div class=\"ts-block\">\n\n```dts\ntype ServerLoad<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tParentData extends Record<string, any> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tOutputData extends Record<string, any> | void = Record<\n\t\tstring,\n\t\tany\n\t> | void,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> = (\n\tevent: ServerLoadEvent<Params, ParentData, RouteId>\n) => MaybePromise<OutputData>;\n```\n\n</div>\n\n## ServerLoadEvent\n\n<div class=\"ts-block\">\n\n```dts\ninterface ServerLoadEvent<\n\tParams extends\n\t\tAppLayoutParams<'/'> = AppLayoutParams<'/'>,\n\tParentData extends Record<string, any> = Record<\n\t\tstring,\n\t\tany\n\t>,\n\tRouteId extends AppRouteId | null = AppRouteId | null\n> extends RequestEvent<Params, RouteId> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nparent: () => Promise<ParentData>;\n```\n\n<div class=\"ts-block-property-details\">\n\n`await parent()` returns data from parent `+layout.server.js` `load` functions.\n\nBe careful not to introduce accidental waterfalls when using `await parent()`. If for example you only want to merge parent data into the returned output, call it _after_ fetching your other data.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndepends: (...deps: string[]) => void;\n```\n\n<div class=\"ts-block-property-details\">\n\nThis function declares that the `load` function has a _dependency_ on one or more URLs or custom identifiers, which can subsequently be used with [`invalidate()`](/docs/kit/$app-navigation#invalidate) to cause `load` to rerun.\n\nMost of the time you won't need this, as `fetch` calls `depends` on your behalf — it's only necessary if you're using a custom API client that bypasses `fetch`.\n\nURLs can be absolute or relative to the page being loaded, and must be [encoded](https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding).\n\nCustom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the [URI specification](https://www.rfc-editor.org/rfc/rfc3986.html).\n\nThe following example shows how to use `depends` to register a dependency on a custom identifier, which is `invalidate`d after a button click, making the `load` function rerun.\n\n```js\n// @errors: 7031\n/// file: src/routes/+page.js\nlet count = 0;\nexport async function load({ depends }) {\n\tdepends('increase:count');\n\n\treturn { count: count++ };\n}\n```\n\n```html\n/// file: src/routes/+page.svelte\n<script>\n\timport { invalidate } from '$app/navigation';\n\n\tlet { data } = $props();\n\n\tconst increase = async () => {\n\t\tawait invalidate('increase:count');\n\t}\n</script>\n\n<p>{data.count}<p>\n<button on:click={increase}>Increase Count</button>\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nuntrack: <T>(fn: () => T) => T;\n```\n\n<div class=\"ts-block-property-details\">\n\nUse this function to opt out of dependency tracking for everything that is synchronously called within the callback. Example:\n\n```js\n// @errors: 7031\n/// file: src/routes/+page.js\nexport async function load({ untrack, url }) {\n\t// Untrack url.pathname so that path changes don't trigger a rerun\n\tif (untrack(() => url.pathname === '/')) {\n\t\treturn { message: 'Welcome!' };\n\t}\n}\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntracing: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nAccess to spans for tracing. If tracing is not enabled, these spans will do nothing.\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nenabled: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether tracing is enabled.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nroot: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe root span for the request. This span is named `sveltekit.handle.root`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\ncurrent: Span;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe span associated with the current server `load` function.\n\n</div>\n</div></div>\n\n</div>\n</div></div>\n\n## Snapshot\n\nThe type of `export const snapshot` exported from a page or layout component.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Snapshot<T = any> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ncapture: () => T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrestore: (snapshot: T) => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## SubmitFunction\n\n<div class=\"ts-block\">\n\n```dts\ntype SubmitFunction<\n\tSuccess extends\n\t\t| Record<string, unknown>\n\t\t| undefined = Record<string, any>,\n\tFailure extends\n\t\t| Record<string, unknown>\n\t\t| undefined = Record<string, any>\n> = (input: {\n\taction: URL;\n\tformData: FormData;\n\tformElement: HTMLFormElement;\n\tcontroller: AbortController;\n\tsubmitter: HTMLElement | null;\n\tcancel: () => void;\n}) => MaybePromise<\n\t| void\n\t| ((opts: {\n\t\t\tformData: FormData;\n\t\t\tformElement: HTMLFormElement;\n\t\t\taction: URL;\n\t\t\tresult: ActionResult<Success, Failure>;\n\t\t\t/**\n\t\t\t * Call this to get the default behavior of a form submission response.\n\t\t\t * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a successful submission.\n\t\t\t * @param invalidateAll Set `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission.\n\t\t\t */\n\t\t\tupdate: (options?: {\n\t\t\t\treset?: boolean;\n\t\t\t\tinvalidateAll?: boolean;\n\t\t\t}) => Promise<void>;\n\t  }) => MaybePromise<void>)\n>;\n```\n\n</div>\n\n## Transport\n\n<blockquote class=\"since note\">\n\nAvailable since 2.11.0\n\n</blockquote>\n\nThe [`transport`](/docs/kit/hooks#Universal-hooks-transport) hook allows you to transport custom types across the server/client boundary.\n\nEach transporter has a pair of `encode` and `decode` functions. On the server, `encode` determines whether a value is an instance of the custom type and, if so, returns a non-falsy encoding of the value which can be an object or an array (or `false` otherwise).\n\nIn the browser, `decode` turns the encoding back into an instance of the custom type.\n\n```ts\nimport type { Transport } from '@sveltejs/kit';\n\ndeclare class MyCustomType {\n\tdata: any\n}\n\n// hooks.js\nexport const transport: Transport = {\n\tMyCustomType: {\n\t\tencode: (value) => value instanceof MyCustomType && [value.data],\n\t\tdecode: ([data]) => new MyCustomType(data)\n\t}\n};\n```\n\n<div class=\"ts-block\">\n\n```dts\ntype Transport = Record<string, Transporter>;\n```\n\n</div>\n\n## Transporter\n\nA member of the [`transport`](/docs/kit/hooks#Universal-hooks-transport) hook.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Transporter<\n\tT = any,\n\tU = Exclude<\n\t\tany,\n\t\tfalse | 0 | '' | null | undefined | typeof NaN\n\t>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nencode: (value: T) => false | U;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndecode: (data: U) => T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## Private types\n\nThe following are referenced by the public types documented above, but cannot be imported directly:\n\n## AdapterEntry\n\n<div class=\"ts-block\">\n\n```dts\ninterface AdapterEntry {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nid: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nA string that uniquely identifies an HTTP service (e.g. serverless function) and is used for deduplication.\nFor example, `/foo/a-[b]` and `/foo/[c]` are different routes, but would both\nbe represented in a Netlify _redirects file as `/foo/:param`, so they share an ID\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfilter(route: RouteDefinition): boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that compares the candidate route with the current route to determine\nif it should be grouped with the current route.\n\nUse cases:\n- Fallback pages: `/foo/[c]` is a fallback for `/foo/a-[b]`, and `/[...catchall]` is a fallback for all routes\n- Grouping routes that share a common `config`: `/foo` should be deployed to the edge, `/bar` and `/baz` should be deployed to a serverless function\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncomplete(entry: { generateManifest(opts: { relativePath: string }): string }): MaybePromise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that is invoked once the entry has been created. This is where you\nshould write the function to the filesystem and generate redirect manifests.\n\n</div>\n</div></div>\n\n## Csp\n\n<div class=\"ts-block\">\n\n```dts\nnamespace Csp {\n\ttype ActionSource = 'strict-dynamic' | 'report-sample';\n\ttype BaseSource =\n\t\t| 'self'\n\t\t| 'unsafe-eval'\n\t\t| 'unsafe-hashes'\n\t\t| 'unsafe-inline'\n\t\t| 'wasm-unsafe-eval'\n\t\t| 'none';\n\ttype CryptoSource =\n\t\t`${'nonce' | 'sha256' | 'sha384' | 'sha512'}-${string}`;\n\ttype FrameSource =\n\t\t| HostSource\n\t\t| SchemeSource\n\t\t| 'self'\n\t\t| 'none';\n\ttype HostNameScheme = `${string}.${string}` | 'localhost';\n\ttype HostSource =\n\t\t`${HostProtocolSchemes}${HostNameScheme}${PortScheme}`;\n\ttype HostProtocolSchemes = `${string}://` | '';\n\ttype HttpDelineator = '/' | '?' | '#' | '\\\\';\n\ttype PortScheme = `:${number}` | '' | ':*';\n\ttype SchemeSource =\n\t\t| 'http:'\n\t\t| 'https:'\n\t\t| 'data:'\n\t\t| 'mediastream:'\n\t\t| 'blob:'\n\t\t| 'filesystem:';\n\ttype Source =\n\t\t| HostSource\n\t\t| SchemeSource\n\t\t| CryptoSource\n\t\t| BaseSource;\n\ttype Sources = Source[];\n}\n```\n\n</div>\n\n## CspDirectives\n\n<div class=\"ts-block\">\n\n```dts\ninterface CspDirectives {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n'child-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'default-src'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'frame-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'worker-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'connect-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'font-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'img-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'manifest-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'media-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'object-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'prefetch-src'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'script-src'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'script-src-elem'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'script-src-attr'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'style-src'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'style-src-elem'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'style-src-attr'?: Csp.Sources;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'base-uri'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsandbox?: Array<\n| 'allow-downloads-without-user-activation'\n| 'allow-forms'\n| 'allow-modals'\n| 'allow-orientation-lock'\n| 'allow-pointer-lock'\n| 'allow-popups'\n| 'allow-popups-to-escape-sandbox'\n| 'allow-presentation'\n| 'allow-same-origin'\n| 'allow-scripts'\n| 'allow-storage-access-by-user-activation'\n| 'allow-top-navigation'\n| 'allow-top-navigation-by-user-activation'\n>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'form-action'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'frame-ancestors'?: Array<Csp.HostSource | Csp.SchemeSource | Csp.FrameSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'navigate-to'?: Array<Csp.Source | Csp.ActionSource>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'report-uri'?: string[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'report-to'?: string[];\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'require-trusted-types-for'?: Array<'script'>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'upgrade-insecure-requests'?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'require-sri-for'?: Array<'script' | 'style' | 'script style'>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'block-all-mixed-content'?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n'plugin-types'?: Array<`${string}/${string}` | 'none'>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nreferrer?: Array<\n| 'no-referrer'\n| 'no-referrer-when-downgrade'\n| 'origin'\n| 'origin-when-cross-origin'\n| 'same-origin'\n| 'strict-origin'\n| 'strict-origin-when-cross-origin'\n| 'unsafe-url'\n| 'none'\n>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\n</div>\n</div></div>\n\n## HttpMethod\n\n<div class=\"ts-block\">\n\n```dts\ntype HttpMethod =\n\t| 'GET'\n\t| 'HEAD'\n\t| 'POST'\n\t| 'PUT'\n\t| 'DELETE'\n\t| 'PATCH'\n\t| 'OPTIONS';\n```\n\n</div>\n\n## Logger\n\n<div class=\"ts-block\">\n\n```dts\ninterface Logger {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsuccess(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nerror(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwarn(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nminor(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ninfo(msg: string): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## MaybePromise\n\n<div class=\"ts-block\">\n\n```dts\ntype MaybePromise<T> = T | Promise<T>;\n```\n\n</div>\n\n## PrerenderEntryGeneratorMismatchHandler\n\n<div class=\"ts-block\">\n\n```dts\ninterface PrerenderEntryGeneratorMismatchHandler {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(details: { generatedFromId: string; entry: string; matchedId: string; message: string }): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## PrerenderEntryGeneratorMismatchHandlerValue\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderEntryGeneratorMismatchHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderEntryGeneratorMismatchHandler;\n```\n\n</div>\n\n## PrerenderHttpErrorHandler\n\n<div class=\"ts-block\">\n\n```dts\ninterface PrerenderHttpErrorHandler {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(details: {\nstatus: number;\npath: string;\nreferrer: string | null;\nreferenceType: 'linked' | 'fetched';\nmessage: string;\n}): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## PrerenderHttpErrorHandlerValue\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderHttpErrorHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderHttpErrorHandler;\n```\n\n</div>\n\n## PrerenderMap\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderMap = Map<string, PrerenderOption>;\n```\n\n</div>\n\n## PrerenderMissingIdHandler\n\n<div class=\"ts-block\">\n\n```dts\ninterface PrerenderMissingIdHandler {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(details: { path: string; id: string; referrers: string[]; message: string }): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## PrerenderMissingIdHandlerValue\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderMissingIdHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderMissingIdHandler;\n```\n\n</div>\n\n## PrerenderOption\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderOption = boolean | 'auto';\n```\n\n</div>\n\n## PrerenderUnseenRoutesHandler\n\n<div class=\"ts-block\">\n\n```dts\ninterface PrerenderUnseenRoutesHandler {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(details: { routes: string[]; message: string }): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## PrerenderUnseenRoutesHandlerValue\n\n<div class=\"ts-block\">\n\n```dts\ntype PrerenderUnseenRoutesHandlerValue =\n\t| 'fail'\n\t| 'warn'\n\t| 'ignore'\n\t| PrerenderUnseenRoutesHandler;\n```\n\n</div>\n\n## Prerendered\n\n<div class=\"ts-block\">\n\n```dts\ninterface Prerendered {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\npages: Map<\nstring,\n{\n\t/** The location of the .html file relative to the output directory */\n\tfile: string;\n}\n>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA map of `path` to `{ file }` objects, where a path like `/foo` corresponds to `foo.html` and a path like `/bar/` corresponds to `bar/index.html`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nassets: Map<\nstring,\n{\n\t/** The MIME type of the asset */\n\ttype: string;\n}\n>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA map of `path` to `{ type }` objects.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nredirects: Map<\nstring,\n{\n\tstatus: number;\n\tlocation: string;\n}\n>;\n```\n\n<div class=\"ts-block-property-details\">\n\nA map of redirects encountered during prerendering.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npaths: string[];\n```\n\n<div class=\"ts-block-property-details\">\n\nAn array of prerendered paths (without trailing slashes, regardless of the trailingSlash config)\n\n</div>\n</div></div>\n\n## RequestOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface RequestOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ngetClientAddress(): string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nplatform?: App.Platform;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## RouteSegment\n\n<div class=\"ts-block\">\n\n```dts\ninterface RouteSegment {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ncontent: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndynamic: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrest: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## TrailingSlash\n\n<div class=\"ts-block\">\n\n```dts\ntype TrailingSlash = 'never' | 'always' | 'ignore';\n```\n\n</div>",
+		"kit/@sveltejs-kit-hooks": "```js\n// @noErrors\nimport { sequence } from '@sveltejs/kit/hooks';\n```\n\n## sequence\n\nA helper function for sequencing multiple `handle` calls in a middleware-like manner.\nThe behavior for the `handle` options is as follows:\n- `transformPageChunk` is applied in reverse order and merged\n- `preload` is applied in forward order, the first option \"wins\" and no `preload` options after it are called\n- `filterSerializedResponseHeaders` behaves the same as `preload`\n\n```js\n// @errors: 7031\n/// file: src/hooks.server.js\nimport { sequence } from '@sveltejs/kit/hooks';\n\n/** @type {import('@sveltejs/kit').Handle} */\nasync function first({ event, resolve }) {\n\tconsole.log('first pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\t// transforms are applied in reverse order\n\t\t\tconsole.log('first transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('first preload');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('first post-processing');\n\treturn result;\n}\n\n/** @type {import('@sveltejs/kit').Handle} */\nasync function second({ event, resolve }) {\n\tconsole.log('second pre-processing');\n\tconst result = await resolve(event, {\n\t\ttransformPageChunk: ({ html }) => {\n\t\t\tconsole.log('second transform');\n\t\t\treturn html;\n\t\t},\n\t\tpreload: () => {\n\t\t\tconsole.log('second preload');\n\t\t\treturn true;\n\t\t},\n\t\tfilterSerializedResponseHeaders: () => {\n\t\t\t// this one wins as it's the first defined in the chain\n\t\t\tconsole.log('second filterSerializedResponseHeaders');\n\t\t\treturn true;\n\t\t}\n\t});\n\tconsole.log('second post-processing');\n\treturn result;\n}\n\nexport const handle = sequence(first, second);\n```\n\nThe example above would print:\n\n```\nfirst pre-processing\nfirst preload\nsecond pre-processing\nsecond filterSerializedResponseHeaders\nsecond transform\nfirst transform\nsecond post-processing\nfirst post-processing\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction sequence(...handlers: Handle[]): Handle;\n```\n\n</div>",
+		"kit/@sveltejs-kit-node-polyfills": "```js\n// @noErrors\nimport { installPolyfills } from '@sveltejs/kit/node/polyfills';\n```\n\n## installPolyfills\n\nMake various web APIs available as globals:\n- `crypto`\n- `File`\n\n<div class=\"ts-block\">\n\n```dts\nfunction installPolyfills(): void;\n```\n\n</div>",
+		"kit/@sveltejs-kit-node": "```js\n// @noErrors\nimport {\n\tcreateReadableStream,\n\tgetRequest,\n\tsetResponse\n} from '@sveltejs/kit/node';\n```\n\n## createReadableStream\n\n<blockquote class=\"since note\">\n\nAvailable since 2.4.0\n\n</blockquote>\n\nConverts a file on disk to a readable stream\n\n<div class=\"ts-block\">\n\n```dts\nfunction createReadableStream(file: string): ReadableStream;\n```\n\n</div>\n\n\n\n## getRequest\n\n<div class=\"ts-block\">\n\n```dts\nfunction getRequest({\n\trequest,\n\tbase,\n\tbodySizeLimit\n}: {\n\trequest: import('http').IncomingMessage;\n\tbase: string;\n\tbodySizeLimit?: number;\n}): Promise<Request>;\n```\n\n</div>\n\n\n\n## setResponse\n\n<div class=\"ts-block\">\n\n```dts\nfunction setResponse(\n\tres: import('http').ServerResponse,\n\tresponse: Response\n): Promise<void>;\n```\n\n</div>",
+		"kit/@sveltejs-kit-vite": "```js\n// @noErrors\nimport { sveltekit } from '@sveltejs/kit/vite';\n```\n\n## sveltekit\n\nReturns the SvelteKit Vite plugins.\n\n<div class=\"ts-block\">\n\n```dts\nfunction sveltekit(): Promise<import('vite').Plugin[]>;\n```\n\n</div>",
+		"kit/$app-environment": "```js\n// @noErrors\nimport { browser, building, dev, version } from '$app/environment';\n```\n\n## browser\n\n`true` if the app is running in the browser.\n\n<div class=\"ts-block\">\n\n```dts\nconst browser: boolean;\n```\n\n</div>\n\n\n\n## building\n\nSvelteKit analyses your app during the `build` step by running it. During this process, `building` is `true`. This also applies during prerendering.\n\n<div class=\"ts-block\">\n\n```dts\nconst building: boolean;\n```\n\n</div>\n\n\n\n## dev\n\nWhether the dev server is running. This is not guaranteed to correspond to `NODE_ENV` or `MODE`.\n\n<div class=\"ts-block\">\n\n```dts\nconst dev: boolean;\n```\n\n</div>\n\n\n\n## version\n\nThe value of `config.kit.version.name`.\n\n<div class=\"ts-block\">\n\n```dts\nconst version: string;\n```\n\n</div>",
+		"kit/$app-forms": "```js\n// @noErrors\nimport { applyAction, deserialize, enhance } from '$app/forms';\n```\n\n## applyAction\n\nThis action updates the `form` property of the current page with the given data and updates `page.status`.\nIn case of an error, it redirects to the nearest error page.\n\n<div class=\"ts-block\">\n\n```dts\nfunction applyAction<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tresult: import('@sveltejs/kit').ActionResult<\n\t\tSuccess,\n\t\tFailure\n\t>\n): Promise<void>;\n```\n\n</div>\n\n\n\n## deserialize\n\nUse this function to deserialize the response from a form submission.\nUsage:\n\n```js\n// @errors: 7031\nimport { deserialize } from '$app/forms';\n\nasync function handleSubmit(event) {\n\tconst response = await fetch('/form?/action', {\n\t\tmethod: 'POST',\n\t\tbody: new FormData(event.target)\n\t});\n\n\tconst result = deserialize(await response.text());\n\t// ...\n}\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction deserialize<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tresult: string\n): import('@sveltejs/kit').ActionResult<Success, Failure>;\n```\n\n</div>\n\n\n\n## enhance\n\nThis action enhances a `<form>` element that otherwise would work without JavaScript.\n\nThe `submit` function is called upon submission with the given FormData and the `action` that should be triggered.\nIf `cancel` is called, the form will not be submitted.\nYou can use the abort `controller` to cancel the submission in case another one starts.\nIf a function is returned, that function is called with the response from the server.\nIf nothing is returned, the fallback will be used.\n\nIf this function or its return value isn't set, it\n- falls back to updating the `form` prop with the returned data if the action is on the same page as the form\n- updates `page.status`\n- resets the `<form>` element and invalidates all data in case of successful submission with no redirect response\n- redirects in case of a redirect response\n- redirects to the nearest error page in case of an unexpected error\n\nIf you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.\nIt accepts an options object\n- `reset: false` if you don't want the `<form>` values to be reset after a successful submission\n- `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission\n\n<div class=\"ts-block\">\n\n```dts\nfunction enhance<\n\tSuccess extends Record<string, unknown> | undefined,\n\tFailure extends Record<string, unknown> | undefined\n>(\n\tform_element: HTMLFormElement,\n\tsubmit?: import('@sveltejs/kit').SubmitFunction<\n\t\tSuccess,\n\t\tFailure\n\t>\n): {\n\tdestroy(): void;\n};\n```\n\n</div>",
+		"kit/$app-navigation": "```js\n// @noErrors\nimport {\n\tafterNavigate,\n\tbeforeNavigate,\n\tdisableScrollHandling,\n\tgoto,\n\tinvalidate,\n\tinvalidateAll,\n\tonNavigate,\n\tpreloadCode,\n\tpreloadData,\n\tpushState,\n\trefreshAll,\n\treplaceState\n} from '$app/navigation';\n```\n\n## afterNavigate\n\nA lifecycle function that runs the supplied `callback` when the current component mounts, and also whenever we navigate to a URL.\n\n`afterNavigate` must be called during a component initialization. It remains active as long as the component is mounted.\n\n<div class=\"ts-block\">\n\n```dts\nfunction afterNavigate(\n\tcallback: (\n\t\tnavigation: import('@sveltejs/kit').AfterNavigate\n\t) => void\n): void;\n```\n\n</div>\n\n\n\n## beforeNavigate\n\nA navigation interceptor that triggers before we navigate to a URL, whether by clicking a link, calling `goto(...)`, or using the browser back/forward controls.\n\nCalling `cancel()` will prevent the navigation from completing. If `navigation.type === 'leave'` — meaning the user is navigating away from the app (or closing the tab) — calling `cancel` will trigger the native browser unload confirmation dialog. In this case, the navigation may or may not be cancelled depending on the user's response.\n\nWhen a navigation isn't to a SvelteKit-owned route (and therefore controlled by SvelteKit's client-side router), `navigation.to.route.id` will be `null`.\n\nIf the navigation will (if not cancelled) cause the document to unload — in other words `'leave'` navigations and `'link'` navigations where `navigation.to.route === null` — `navigation.willUnload` is `true`.\n\n`beforeNavigate` must be called during a component initialization. It remains active as long as the component is mounted.\n\n<div class=\"ts-block\">\n\n```dts\nfunction beforeNavigate(\n\tcallback: (\n\t\tnavigation: import('@sveltejs/kit').BeforeNavigate\n\t) => void\n): void;\n```\n\n</div>\n\n\n\n## disableScrollHandling\n\nIf called when the page is being updated following a navigation (in `onMount` or `afterNavigate` or an action, for example), this disables SvelteKit's built-in scroll handling.\nThis is generally discouraged, since it breaks user expectations.\n\n<div class=\"ts-block\">\n\n```dts\nfunction disableScrollHandling(): void;\n```\n\n</div>\n\n\n\n## goto\n\nAllows you to navigate programmatically to a given route, with options such as keeping the current element focused.\nReturns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified `url`.\n\nFor external URLs, use `window.location = url` instead of calling `goto(url)`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction goto(\n\turl: string | URL,\n\topts?: {\n\t\treplaceState?: boolean | undefined;\n\t\tnoScroll?: boolean | undefined;\n\t\tkeepFocus?: boolean | undefined;\n\t\tinvalidateAll?: boolean | undefined;\n\t\tinvalidate?:\n\t\t\t| (string | URL | ((url: URL) => boolean))[]\n\t\t\t| undefined;\n\t\tstate?: App.PageState | undefined;\n\t}\n): Promise<void>;\n```\n\n</div>\n\n\n\n## invalidate\n\nCauses any `load` functions belonging to the currently active page to re-run if they depend on the `url` in question, via `fetch` or `depends`. Returns a `Promise` that resolves when the page is subsequently updated.\n\nIf the argument is given as a `string` or `URL`, it must resolve to the same URL that was passed to `fetch` or `depends` (including query parameters).\nTo create a custom identifier, use a string beginning with `[a-z]+:` (e.g. `custom:state`) — this is a valid URL.\n\nThe `function` argument can be used define a custom predicate. It receives the full `URL` and causes `load` to rerun if `true` is returned.\nThis can be useful if you want to invalidate based on a pattern instead of a exact match.\n\n```ts\n// Example: Match '/path' regardless of the query parameters\nimport { invalidate } from '$app/navigation';\n\ninvalidate((url) => url.pathname === '/path');\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction invalidate(\n\tresource: string | URL | ((url: URL) => boolean)\n): Promise<void>;\n```\n\n</div>\n\n\n\n## invalidateAll\n\nCauses all `load` functions belonging to the currently active page to re-run. Returns a `Promise` that resolves when the page is subsequently updated.\n\n<div class=\"ts-block\">\n\n```dts\nfunction invalidateAll(): Promise<void>;\n```\n\n</div>\n\n\n\n## onNavigate\n\nA lifecycle function that runs the supplied `callback` immediately before we navigate to a new URL except during full-page navigations.\n\nIf you return a `Promise`, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use `document.startViewTransition`. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.\n\nIf a function (or a `Promise` that resolves to a function) is returned from the callback, it will be called once the DOM has updated.\n\n`onNavigate` must be called during a component initialization. It remains active as long as the component is mounted.\n\n<div class=\"ts-block\">\n\n```dts\nfunction onNavigate(\n\tcallback: (\n\t\tnavigation: import('@sveltejs/kit').OnNavigate\n\t) => MaybePromise<(() => void) | void>\n): void;\n```\n\n</div>\n\n\n\n## preloadCode\n\nProgrammatically imports the code for routes that haven't yet been fetched.\nTypically, you might call this to speed up subsequent navigation.\n\nYou can specify routes by any matching pathname such as `/about` (to match `src/routes/about/+page.svelte`) or `/blog/*` (to match `src/routes/blog/[slug]/+page.svelte`).\n\nUnlike `preloadData`, this won't call `load` functions.\nReturns a Promise that resolves when the modules have been imported.\n\n<div class=\"ts-block\">\n\n```dts\nfunction preloadCode(pathname: string): Promise<void>;\n```\n\n</div>\n\n\n\n## preloadData\n\nProgrammatically preloads the given page, which means\n 1. ensuring that the code for the page is loaded, and\n 2. calling the page's load function with the appropriate options.\n\nThis is the same behaviour that SvelteKit triggers when the user taps or mouses over an `<a>` element with `data-sveltekit-preload-data`.\nIf the next navigation is to `href`, the values returned from load will be used, making navigation instantaneous.\nReturns a Promise that resolves with the result of running the new route's `load` functions once the preload is complete.\n\n<div class=\"ts-block\">\n\n```dts\nfunction preloadData(href: string): Promise<\n\t| {\n\t\t\ttype: 'loaded';\n\t\t\tstatus: number;\n\t\t\tdata: Record<string, any>;\n\t  }\n\t| {\n\t\t\ttype: 'redirect';\n\t\t\tlocation: string;\n\t  }\n>;\n```\n\n</div>\n\n\n\n## pushState\n\nProgrammatically create a new history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).\n\n<div class=\"ts-block\">\n\n```dts\nfunction pushState(\n\turl: string | URL,\n\tstate: App.PageState\n): void;\n```\n\n</div>\n\n\n\n## refreshAll\n\nCauses all currently active remote functions to refresh, and all `load` functions belonging to the currently active page to re-run (unless disabled via the option argument).\nReturns a `Promise` that resolves when the page is subsequently updated.\n\n<div class=\"ts-block\">\n\n```dts\nfunction refreshAll({\n\tincludeLoadFunctions\n}?: {\n\tincludeLoadFunctions?: boolean;\n}): Promise<void>;\n```\n\n</div>\n\n\n\n## replaceState\n\nProgrammatically replace the current history entry with the given `page.state`. To use the current URL, you can pass `''` as the first argument. Used for [shallow routing](/docs/kit/shallow-routing).\n\n<div class=\"ts-block\">\n\n```dts\nfunction replaceState(\n\turl: string | URL,\n\tstate: App.PageState\n): void;\n```\n\n</div>",
+		"kit/$app-paths": "```js\n// @noErrors\nimport { asset, assets, base, resolve, resolveRoute } from '$app/paths';\n```\n\n## asset\n\n<blockquote class=\"since note\">\n\nAvailable since 2.26\n\n</blockquote>\n\nResolve the URL of an asset in your `static` directory, by prefixing it with [`config.kit.paths.assets`](/docs/kit/configuration#paths) if configured, or otherwise by prefixing it with the base path.\n\nDuring server rendering, the base path is relative and depends on the page currently being rendered.\n\n```svelte\n<script>\n\timport { asset } from '$app/paths';\n</script>\n\n<img alt=\"a potato\" src={asset('/potato.jpg')} />\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction asset(file: Asset): string;\n```\n\n</div>\n\n\n\n## assets\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`asset(...)`](/docs/kit/$app-paths#asset) instead\n\n</blockquote>\n\nAn absolute path that matches [`config.kit.paths.assets`](/docs/kit/configuration#paths).\n\n> [!NOTE] If a value for `config.kit.paths.assets` is specified, it will be replaced with `'/_svelte_kit_assets'` during `vite dev` or `vite preview`, since the assets don't yet live at their eventual URL.\n\n<div class=\"ts-block\">\n\n```dts\nlet assets:\n\t| ''\n\t| `https://${string}`\n\t| `http://${string}`\n\t| '/_svelte_kit_assets';\n```\n\n</div>\n\n\n\n## base\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`resolve(...)`](/docs/kit/$app-paths#resolve) instead\n\n</blockquote>\n\nA string that matches [`config.kit.paths.base`](/docs/kit/configuration#paths).\n\nExample usage: `<a href=\"{base}/your-page\">Link</a>`\n\n<div class=\"ts-block\">\n\n```dts\nlet base: '' | `/${string}`;\n```\n\n</div>\n\n\n\n## resolve\n\n<blockquote class=\"since note\">\n\nAvailable since 2.26\n\n</blockquote>\n\nResolve a pathname by prefixing it with the base path, if any, or resolve a route ID by populating dynamic segments with parameters.\n\nDuring server rendering, the base path is relative and depends on the page currently being rendered.\n\n```js\n// @errors: 7031\nimport { resolve } from '$app/paths';\n\n// using a pathname\nconst resolved = resolve(`/blog/hello-world`);\n\n// using a route ID plus parameters\nconst resolved = resolve('/blog/[slug]', {\n\tslug: 'hello-world'\n});\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction resolve<T extends RouteId | Pathname>(\n\t...args: ResolveArgs<T>\n): ResolvedPathname;\n```\n\n</div>\n\n\n\n## resolveRoute\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`resolve(...)`](/docs/kit/$app-paths#resolve) instead\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\nfunction resolveRoute<T extends RouteId | Pathname>(\n\t...args: ResolveArgs<T>\n): ResolvedPathname;\n```\n\n</div>",
+		"kit/$app-server": "```js\n// @noErrors\nimport {\n\tcommand,\n\tform,\n\tgetRequestEvent,\n\tprerender,\n\tquery,\n\tread\n} from '$app/server';\n```\n\n## command\n\n<blockquote class=\"since note\">\n\nAvailable since 2.27\n\n</blockquote>\n\nCreates a remote command. When called from the browser, the function will be invoked on the server via a `fetch` call.\n\nSee [Remote functions](/docs/kit/remote-functions#command) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction command<Output>(\n\tfn: () => Output\n): RemoteCommand<void, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction command<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => Output\n): RemoteCommand<Input, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction command<Schema extends StandardSchemaV1, Output>(\n\tvalidate: Schema,\n\tfn: (arg: StandardSchemaV1.InferOutput<Schema>) => Output\n): RemoteCommand<\n\tStandardSchemaV1.InferInput<Schema>,\n\tOutput\n>;\n```\n\n</div>\n\n\n\n## form\n\n<blockquote class=\"since note\">\n\nAvailable since 2.27\n\n</blockquote>\n\nCreates a form object that can be spread onto a `<form>` element.\n\nSee [Remote functions](/docs/kit/remote-functions#form) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction form<Output>(\n\tfn: (\n\t\tinvalid: import('@sveltejs/kit').Invalid<void>\n\t) => MaybePromise<Output>\n): RemoteForm<void, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction form<Input extends RemoteFormInput, Output>(\n\tvalidate: 'unchecked',\n\tfn: (\n\t\tdata: Input,\n\t\tinvalid: import('@sveltejs/kit').Invalid<Input>\n\t) => MaybePromise<Output>\n): RemoteForm<Input, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction form<\n\tSchema extends StandardSchemaV1<\n\t\tRemoteFormInput,\n\t\tRecord<string, any>\n\t>,\n\tOutput\n>(\n\tvalidate: Schema,\n\tfn: (\n\t\tdata: StandardSchemaV1.InferOutput<Schema>,\n\t\tinvalid: import('@sveltejs/kit').Invalid<\n\t\t\tStandardSchemaV1.InferOutput<Schema>\n\t\t>\n\t) => MaybePromise<Output>\n): RemoteForm<StandardSchemaV1.InferInput<Schema>, Output>;\n```\n\n</div>\n\n\n\n## getRequestEvent\n\n<blockquote class=\"since note\">\n\nAvailable since 2.20.0\n\n</blockquote>\n\nReturns the current `RequestEvent`. Can be used inside server hooks, server `load` functions, actions, and endpoints (and functions called by them).\n\nIn environments without [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html#class-asynclocalstorage), this must be called synchronously (i.e. not after an `await`).\n\n<div class=\"ts-block\">\n\n```dts\nfunction getRequestEvent(): RequestEvent;\n```\n\n</div>\n\n\n\n## prerender\n\n<blockquote class=\"since note\">\n\nAvailable since 2.27\n\n</blockquote>\n\nCreates a remote prerender function. When called from the browser, the function will be invoked on the server via a `fetch` call.\n\nSee [Remote functions](/docs/kit/remote-functions#prerender) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction prerender<Output>(\n\tfn: () => MaybePromise<Output>,\n\toptions?:\n\t\t| {\n\t\t\t\tinputs?: RemotePrerenderInputsGenerator<void>;\n\t\t\t\tdynamic?: boolean;\n\t\t  }\n\t\t| undefined\n): RemotePrerenderFunction<void, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction prerender<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => MaybePromise<Output>,\n\toptions?:\n\t\t| {\n\t\t\t\tinputs?: RemotePrerenderInputsGenerator<Input>;\n\t\t\t\tdynamic?: boolean;\n\t\t  }\n\t\t| undefined\n): RemotePrerenderFunction<Input, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction prerender<Schema extends StandardSchemaV1, Output>(\n\tschema: Schema,\n\tfn: (\n\t\targ: StandardSchemaV1.InferOutput<Schema>\n\t) => MaybePromise<Output>,\n\toptions?:\n\t\t| {\n\t\t\t\tinputs?: RemotePrerenderInputsGenerator<\n\t\t\t\t\tStandardSchemaV1.InferInput<Schema>\n\t\t\t\t>;\n\t\t\t\tdynamic?: boolean;\n\t\t  }\n\t\t| undefined\n): RemotePrerenderFunction<\n\tStandardSchemaV1.InferInput<Schema>,\n\tOutput\n>;\n```\n\n</div>\n\n\n\n## query\n\n<blockquote class=\"since note\">\n\nAvailable since 2.27\n\n</blockquote>\n\nCreates a remote query. When called from the browser, the function will be invoked on the server via a `fetch` call.\n\nSee [Remote functions](/docs/kit/remote-functions#query) for full documentation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction query<Output>(\n\tfn: () => MaybePromise<Output>\n): RemoteQueryFunction<void, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction query<Input, Output>(\n\tvalidate: 'unchecked',\n\tfn: (arg: Input) => MaybePromise<Output>\n): RemoteQueryFunction<Input, Output>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction query<Schema extends StandardSchemaV1, Output>(\n\tschema: Schema,\n\tfn: (\n\t\targ: StandardSchemaV1.InferOutput<Schema>\n\t) => MaybePromise<Output>\n): RemoteQueryFunction<\n\tStandardSchemaV1.InferInput<Schema>,\n\tOutput\n>;\n```\n\n</div>\n\n\n\n## read\n\n<blockquote class=\"since note\">\n\nAvailable since 2.4.0\n\n</blockquote>\n\nRead the contents of an imported asset from the filesystem\n\n```js\n// @errors: 7031\nimport { read } from '$app/server';\nimport somefile from './somefile.txt';\n\nconst asset = read(somefile);\nconst text = await asset.text();\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction read(asset: string): Response;\n```\n\n</div>\n\n\n\n## query\n\n<div class=\"ts-block\">\n\n```dts\nnamespace query {\n\t/**\n\t * Creates a batch query function that collects multiple calls and executes them in a single request\n\t *\n\t * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.batch) for full documentation.\n\t *\n\t * @since 2.35\n\t */\n\tfunction batch<Input, Output>(\n\t\tvalidate: 'unchecked',\n\t\tfn: (\n\t\t\targs: Input[]\n\t\t) => MaybePromise<(arg: Input, idx: number) => Output>\n\t): RemoteQueryFunction<Input, Output>;\n\t/**\n\t * Creates a batch query function that collects multiple calls and executes them in a single request\n\t *\n\t * See [Remote functions](https://svelte.dev/docs/kit/remote-functions#query.batch) for full documentation.\n\t *\n\t * @since 2.35\n\t */\n\tfunction batch<Schema extends StandardSchemaV1, Output>(\n\t\tschema: Schema,\n\t\tfn: (\n\t\t\targs: StandardSchemaV1.InferOutput<Schema>[]\n\t\t) => MaybePromise<\n\t\t\t(\n\t\t\t\targ: StandardSchemaV1.InferOutput<Schema>,\n\t\t\t\tidx: number\n\t\t\t) => Output\n\t\t>\n\t): RemoteQueryFunction<\n\t\tStandardSchemaV1.InferInput<Schema>,\n\t\tOutput\n\t>;\n}\n```\n\n</div>",
+		"kit/$app-state": "SvelteKit makes three read-only state objects available via the `$app/state` module — `page`, `navigating` and `updated`.\n\n> [!NOTE]\n> This module was added in 2.12. If you're using an earlier version of SvelteKit, use [`$app/stores`]($app-stores) instead.\n\n\n\n```js\n// @noErrors\nimport { navigating, page, updated } from '$app/state';\n```\n\n## navigating\n\nA read-only object representing an in-progress navigation, with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.\nValues are `null` when no navigation is occurring, or during server rendering.\n\n<div class=\"ts-block\">\n\n```dts\nconst navigating:\n\t| import('@sveltejs/kit').Navigation\n\t| {\n\t\t\tfrom: null;\n\t\t\tto: null;\n\t\t\ttype: null;\n\t\t\twillUnload: null;\n\t\t\tdelta: null;\n\t\t\tcomplete: null;\n\t  };\n```\n\n</div>\n\n\n\n## page\n\nA read-only reactive object with information about the current page, serving several use cases:\n- retrieving the combined `data` of all pages/layouts anywhere in your component tree (also see [loading data](/docs/kit/load))\n- retrieving the current value of the `form` prop anywhere in your component tree (also see [form actions](/docs/kit/form-actions))\n- retrieving the page state that was set through `goto`, `pushState` or `replaceState` (also see [goto](/docs/kit/$app-navigation#goto) and [shallow routing](/docs/kit/shallow-routing))\n- retrieving metadata such as the URL you're on, the current route and its parameters, and whether or not there was an error\n\n```svelte\n<!--- file: +layout.svelte --->\n<script>\n\timport { page } from '$app/state';\n</script>\n\n<p>Currently at {page.url.pathname}</p>\n\n{#if page.error}\n\t<span class=\"red\">Problem detected</span>\n{:else}\n\t<span class=\"small\">All systems operational</span>\n{/if}\n```\n\nChanges to `page` are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)\n\n```svelte\n<!--- file: +page.svelte --->\n<script>\n\timport { page } from '$app/state';\n\tconst id = $derived(page.params.id); // This will correctly update id for usage on this page\n\t$: badId = page.params.id; // Do not use; will never update after initial load\n</script>\n```\n\nOn the server, values can only be read during rendering (in other words _not_ in e.g. `load` functions). In the browser, the values can be read at any time.\n\n<div class=\"ts-block\">\n\n```dts\nconst page: import('@sveltejs/kit').Page;\n```\n\n</div>\n\n\n\n## updated\n\nA read-only reactive value that's initially `false`. If [`version.pollInterval`](/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update `current` to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.\n\n<div class=\"ts-block\">\n\n```dts\nconst updated: {\n\tget current(): boolean;\n\tcheck(): Promise<boolean>;\n};\n```\n\n</div>",
+		"kit/$app-stores": "This module contains store-based equivalents of the exports from [`$app/state`]($app-state). If you're using SvelteKit 2.12 or later, use that module instead.\n\n\n\n```js\n// @noErrors\nimport { getStores, navigating, page, updated } from '$app/stores';\n```\n\n## getStores\n\n<div class=\"ts-block\">\n\n```dts\nfunction getStores(): {\n\tpage: typeof page;\n\n\tnavigating: typeof navigating;\n\n\tupdated: typeof updated;\n};\n```\n\n</div>\n\n\n\n## navigating\n\n<blockquote class=\"tag deprecated note\">\n\nUse `navigating` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))\n\n</blockquote>\n\nA readable store.\nWhen navigating starts, its value is a `Navigation` object with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.\nWhen navigating finishes, its value reverts to `null`.\n\nOn the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.\n\n<div class=\"ts-block\">\n\n```dts\nconst navigating: import('svelte/store').Readable<\n\timport('@sveltejs/kit').Navigation | null\n>;\n```\n\n</div>\n\n\n\n## page\n\n<blockquote class=\"tag deprecated note\">\n\nUse `page` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))\n\n</blockquote>\n\nA readable store whose value contains page data.\n\nOn the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.\n\n<div class=\"ts-block\">\n\n```dts\nconst page: import('svelte/store').Readable<\n\timport('@sveltejs/kit').Page\n>;\n```\n\n</div>\n\n\n\n## updated\n\n<blockquote class=\"tag deprecated note\">\n\nUse `updated` from `$app/state` instead (requires Svelte 5, [see docs for more info](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated))\n\n</blockquote>\n\nA readable store whose initial value is `false`. If [`version.pollInterval`](/docs/kit/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.\n\nOn the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.\n\n<div class=\"ts-block\">\n\n```dts\nconst updated: import('svelte/store').Readable<boolean> & {\n\tcheck(): Promise<boolean>;\n};\n```\n\n</div>",
+		"kit/$app-types": "This module contains generated types for the routes in your app.\n\n<blockquote class=\"since note\">\n\t<p>Available since 2.26</p>\n</blockquote>\n\n```js\n// @noErrors\nimport type { RouteId, RouteParams, LayoutParams } from '$app/types';\n```\n\n## Asset\n\nA union of all the filenames of assets contained in your `static` directory, plus a `string` wildcard for asset paths generated from `import` declarations.\n\n<div class=\"ts-block\">\n\n```dts\ntype Asset = '/favicon.png' | '/robots.txt' | (string & {});\n```\n\n</div>\n\n## RouteId\n\nA union of all the route IDs in your app. Used for `page.route.id` and `event.route.id`.\n\n<div class=\"ts-block\">\n\n```dts\ntype RouteId = '/' | '/my-route' | '/my-other-route/[param]';\n```\n\n</div>\n\n## Pathname\n\nA union of all valid pathnames in your app.\n\n<div class=\"ts-block\">\n\n```dts\ntype Pathname = '/' | '/my-route' | `/my-other-route/${string}` & {};\n```\n\n</div>\n\n## ResolvedPathname\n\nSimilar to `Pathname`, but possibly prefixed with a [base path](configuration#paths). Used for `page.url.pathname`.\n\n<div class=\"ts-block\">\n\n```dts\ntype ResolvedPathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {};\n```\n\n</div>\n\n## RouteParams\n\nA utility for getting the parameters associated with a given route.\n\n```ts\n// @errors: 2552\ntype BlogParams = RouteParams<'/blog/[slug]'>; // { slug: string }\n```\n\n<div class=\"ts-block\">\n\n```dts\ntype RouteParams<T extends RouteId> = { /* generated */ } | Record<string, never>;\n```\n\n</div>\n\n## LayoutParams\n\nA utility for getting the parameters associated with a given layout, which is similar to `RouteParams` but also includes optional parameters for any child route.\n\n<div class=\"ts-block\">\n\n```dts\ntype RouteParams<T extends RouteId> = { /* generated */ } | Record<string, never>;\n```\n\n</div>",
+		"kit/$env-dynamic-private": "This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) (or running [`vite preview`](/docs/kit/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](/docs/kit/configuration#env) (if configured).\n\nThis module cannot be imported into client-side code.\n\n```ts\nimport { env } from '$env/dynamic/private';\nconsole.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);\n```\n\n> [!NOTE] In `dev`, `$env/dynamic` always includes environment variables from `.env`. In `prod`, this behavior will depend on your adapter.",
+		"kit/$env-dynamic-public": "Similar to [`$env/dynamic/private`](/docs/kit/$env-dynamic-private), but only includes variables that begin with [`config.kit.env.publicPrefix`](/docs/kit/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.\n\nNote that public dynamic environment variables must all be sent from the server to the client, causing larger network requests — when possible, use `$env/static/public` instead.\n\n```ts\nimport { env } from '$env/dynamic/public';\nconsole.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);\n```",
+		"kit/$env-static-private": "Environment variables [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env`. Like [`$env/dynamic/private`](/docs/kit/$env-dynamic-private), this module cannot be imported into client-side code. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](/docs/kit/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](/docs/kit/configuration#env) (if configured).\n\n_Unlike_ [`$env/dynamic/private`](/docs/kit/$env-dynamic-private), the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination.\n\n```ts\nimport { API_KEY } from '$env/static/private';\n```\n\nNote that all environment variables referenced in your code should be declared (for example in an `.env` file), even if they don't have a value until the app is deployed:\n\n```\nMY_FEATURE_FLAG=\"\"\n```\n\nYou can override `.env` values from the command line like so:\n\n```sh\nMY_FEATURE_FLAG=\"enabled\" npm run dev\n```",
+		"kit/$env-static-public": "Similar to [`$env/static/private`](/docs/kit/$env-static-private), except that it only includes environment variables that begin with [`config.kit.env.publicPrefix`](/docs/kit/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.\n\nValues are replaced statically at build time.\n\n```ts\nimport { PUBLIC_BASE_URL } from '$env/static/public';\n```",
+		"kit/$lib": "SvelteKit automatically makes files under `src/lib` available using the `$lib` import alias. You can change which directory this alias points to in your [config file](configuration#files).\n\n```svelte\n<!--- file: src/lib/Component.svelte --->\nA reusable component\n```\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<script>\n    import Component from '$lib/Component.svelte';\n</script>\n\n<Component />\n```",
+		"kit/$service-worker": "```js\n// @noErrors\nimport { base, build, files, prerendered, version } from '$service-worker';\n```\n\nThis module is only available to [service workers](/docs/kit/service-workers).\n\n## base\n\nThe `base` path of the deployment. Typically this is equivalent to `config.kit.paths.base`, but it is calculated from `location.pathname` meaning that it will continue to work correctly if the site is deployed to a subdirectory.\nNote that there is a `base` but no `assets`, since service workers cannot be used if `config.kit.paths.assets` is specified.\n\n<div class=\"ts-block\">\n\n```dts\nconst base: string;\n```\n\n</div>\n\n\n\n## build\n\nAn array of URL strings representing the files generated by Vite, suitable for caching with `cache.addAll(build)`.\nDuring development, this is an empty array.\n\n<div class=\"ts-block\">\n\n```dts\nconst build: string[];\n```\n\n</div>\n\n\n\n## files\n\nAn array of URL strings representing the files in your static directory, or whatever directory is specified by `config.kit.files.assets`. You can customize which files are included from `static` directory using [`config.kit.serviceWorker.files`](/docs/kit/configuration#serviceWorker)\n\n<div class=\"ts-block\">\n\n```dts\nconst files: string[];\n```\n\n</div>\n\n\n\n## prerendered\n\nAn array of pathnames corresponding to prerendered pages and endpoints.\nDuring development, this is an empty array.\n\n<div class=\"ts-block\">\n\n```dts\nconst prerendered: string[];\n```\n\n</div>\n\n\n\n## version\n\nSee [`config.kit.version`](/docs/kit/configuration#version). It's useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.\n\n<div class=\"ts-block\">\n\n```dts\nconst version: string;\n```\n\n</div>",
+		"kit/configuration": "Your project's configuration lives in a `svelte.config.js` file at the root of your project. As well as SvelteKit, this config object is used by other tooling that integrates with Svelte such as editor extensions.\n\n```js\n/// file: svelte.config.js\n// @filename: ambient.d.ts\ndeclare module '@sveltejs/adapter-auto' {\n\tconst plugin: () => import('@sveltejs/kit').Adapter;\n\texport default plugin;\n}\n\n// @filename: index.js\n// ---cut---\nimport adapter from '@sveltejs/adapter-auto';\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n\nexport default config;\n```\n\n## Config\n\nAn extension of [`vite-plugin-svelte`'s options](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#svelte-options).\n\n<div class=\"ts-block\">\n\n```dts\ninterface Config extends SvelteConfig {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nkit?: KitConfig;\n```\n\n<div class=\"ts-block-property-details\">\n\nSvelteKit options.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n[key: string]: any;\n```\n\n<div class=\"ts-block-property-details\">\n\nAny additional options required by tooling that integrates with Svelte.\n\n</div>\n</div></div>\n\n\n\n## KitConfig\n\nThe `kit` property configures SvelteKit, and can have the following properties:\n\n## adapter\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `undefined`\n\n</div>\n\nYour [adapter](/docs/kit/adapters) is run when executing `vite build`. It determines how the output is converted for different platforms.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## alias\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `{}`\n\n</div>\n\nAn object containing zero or more aliases used to replace values in `import` statements. These aliases are automatically passed to Vite and TypeScript.\n\n```js\n// @errors: 7031\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\talias: {\n\t\t\t// this will match a file\n\t\t\t'my-file': 'path/to/my-file.js',\n\n\t\t\t// this will match a directory and its contents\n\t\t\t// (`my-directory/x` resolves to `path/to/my-directory/x`)\n\t\t\t'my-directory': 'path/to/my-directory',\n\n\t\t\t// an alias ending /* will only match\n\t\t\t// the contents of a directory, not the directory itself\n\t\t\t'my-directory/*': 'path/to/my-directory/*'\n\t\t}\n\t}\n};\n```\n\n> [!NOTE] The built-in `$lib` alias is controlled by `config.kit.files.lib` as it is used for packaging.\n\n> [!NOTE] You will need to run `npm run dev` to have SvelteKit automatically generate the required alias configuration in `jsconfig.json` or `tsconfig.json`.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## appDir\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"_app\"`\n\n</div>\n\nThe directory where SvelteKit keeps its stuff, including static assets (such as JS and CSS) and internally-used routes.\n\nIf `paths.assets` is specified, there will be two app directories — `${paths.assets}/${appDir}` and `${paths.base}/${appDir}`.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## csp\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n[Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) configuration. CSP helps to protect your users against cross-site scripting (XSS) attacks, by limiting the places resources can be loaded from. For example, a configuration like this...\n\n```js\n// @errors: 7031\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tcsp: {\n\t\t\tdirectives: {\n\t\t\t\t'script-src': ['self']\n\t\t\t},\n\t\t\t// must be specified with either the `report-uri` or `report-to` directives, or both\n\t\t\treportOnly: {\n\t\t\t\t'script-src': ['self'],\n\t\t\t\t'report-uri': ['/']\n\t\t\t}\n\t\t}\n\t}\n};\n\nexport default config;\n```\n\n...would prevent scripts loading from external sites. SvelteKit will augment the specified directives with nonces or hashes (depending on `mode`) for any inline styles and scripts it generates.\n\nTo add a nonce for scripts and links manually included in `src/app.html`, you may use the placeholder `%sveltekit.nonce%` (for example `<script nonce=\"%sveltekit.nonce%\">`).\n\nWhen pages are prerendered, the CSP header is added via a `<meta http-equiv>` tag (note that in this case, `frame-ancestors`, `report-uri` and `sandbox` directives will be ignored).\n\n> [!NOTE] When `mode` is `'auto'`, SvelteKit will use nonces for dynamically rendered pages and hashes for prerendered pages. Using nonces with prerendered pages is insecure and therefore forbidden.\n\n> [!NOTE] Note that most [Svelte transitions](/tutorial/svelte/transition) work by creating an inline `<style>` element. If you use these in your app, you must either leave the `style-src` directive unspecified or add `unsafe-inline`.\n\nIf this level of configuration is insufficient and you have more dynamic requirements, you can use the [`handle` hook](/docs/kit/hooks#Server-hooks-handle) to roll your own CSP.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nmode?: 'hash' | 'nonce' | 'auto';\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether to use hashes or nonces to restrict `<script>` and `<style>` elements. `'auto'` will use hashes for prerendered pages, and nonces for dynamically rendered pages.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ndirectives?: CspDirectives;\n```\n\n<div class=\"ts-block-property-details\">\n\nDirectives that will be added to `Content-Security-Policy` headers.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nreportOnly?: CspDirectives;\n```\n\n<div class=\"ts-block-property-details\">\n\nDirectives that will be added to `Content-Security-Policy-Report-Only` headers.\n\n</div>\n</div>\n\n</div>\n\n## csrf\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nProtection against [cross-site request forgery (CSRF)](https://owasp.org/www-community/attacks/csrf) attacks.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ncheckOrigin?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `true`\n- <span class=\"tag deprecated\">deprecated</span> Use `trustedOrigins: ['*']` instead\n\n</div>\n\nWhether to check the incoming `origin` header for `POST`, `PUT`, `PATCH`, or `DELETE` form submissions and verify that it matches the server's origin.\n\nTo allow people to make `POST`, `PUT`, `PATCH`, or `DELETE` requests with a `Content-Type` of `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain` to your app from other origins, you will need to disable this option. Be careful!\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ntrustedOrigins?: string[];\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `[]`\n\n</div>\n\nAn array of origins that are allowed to make cross-origin form submissions to your app.\n\nEach origin should be a complete origin including protocol (e.g., `https://payment-gateway.com`).\nThis is useful for allowing trusted third-party services like payment gateways or authentication providers to submit forms to your app.\n\nIf the array contains `'*'`, all origins will be trusted. This is generally not recommended!\n\n> [!NOTE] Only add origins you completely trust, as this bypasses CSRF protection for those origins.\n\nCSRF checks only apply in production, not in local development.\n\n</div>\n</div>\n\n</div>\n\n## embedded\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nWhether or not the app is embedded inside a larger app. If `true`, SvelteKit will add its event listeners related to navigation etc on the parent of `%sveltekit.body%` instead of `window`, and will pass `params` from the server rather than inferring them from `location.pathname`.\nNote that it is generally not supported to embed multiple SvelteKit apps on the same page and use client-side SvelteKit features within them (things such as pushing to the history state assume a single instance).\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## env\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nEnvironment variable configuration\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ndir?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\".\"`\n\n</div>\n\nThe directory to search for `.env` files.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\npublicPrefix?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"PUBLIC_\"`\n\n</div>\n\nA prefix that signals that an environment variable is safe to expose to client-side code. See [`$env/static/public`](/docs/kit/$env-static-public) and [`$env/dynamic/public`](/docs/kit/$env-dynamic-public). Note that Vite's [`envPrefix`](https://vitejs.dev/config/shared-options.html#envprefix) must be set separately if you are using Vite's environment variable handling - though use of that feature should generally be unnecessary.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nprivatePrefix?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"\"`\n- <span class=\"tag since\">available since</span> v1.21.0\n\n</div>\n\nA prefix that signals that an environment variable is unsafe to expose to client-side code. Environment variables matching neither the public nor the private prefix will be discarded completely. See [`$env/static/private`](/docs/kit/$env-static-private) and [`$env/dynamic/private`](/docs/kit/$env-dynamic-private).\n\n</div>\n</div>\n\n</div>\n\n## experimental\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nExperimental features. Here be dragons. These are not subject to semantic versioning, so breaking changes or removal can happen in any release.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ntracing?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `{ server: false, serverFile: false }`\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nOptions for enabling server-side [OpenTelemetry](https://opentelemetry.io/) tracing for SvelteKit operations including the [`handle` hook](/docs/kit/hooks#Server-hooks-handle), [`load` functions](/docs/kit/load), [form actions](/docs/kit/form-actions), and [remote functions](/docs/kit/remote-functions).\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nserver?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nEnables server-side [OpenTelemetry](https://opentelemetry.io/) span emission for SvelteKit operations including the [`handle` hook](/docs/kit/hooks#Server-hooks-handle), [`load` functions](/docs/kit/load), [form actions](/docs/kit/form-actions), and [remote functions](/docs/kit/remote-functions).\n\n</div>\n</div></div>\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ninstrumentation?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nserver?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n- <span class=\"tag since\">available since</span> v2.31.0\n\n</div>\n\nEnables `instrumentation.server.js` for tracing and observability instrumentation.\n\n</div>\n</div></div>\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nremoteFunctions?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nWhether to enable the experimental remote functions feature. This feature is not yet stable and may be changed or removed at any time.\n\n</div>\n</div>\n\n</div>\n\n## files\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n\n</div>\n\nWhere to find various files within your project.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nsrc?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src\"`\n- <span class=\"tag since\">available since</span> v2.28\n\n</div>\n\nthe location of your source code\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nassets?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"static\"`\n\n</div>\n\na place to put static files that should have stable URLs and undergo no processing, such as `favicon.ico` or `manifest.json`\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhooks?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nclient?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/hooks.client\"`\n\n</div>\n\nThe location of your client [hooks](/docs/kit/hooks).\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nserver?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/hooks.server\"`\n\n</div>\n\nThe location of your server [hooks](/docs/kit/hooks).\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nuniversal?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/hooks\"`\n- <span class=\"tag since\">available since</span> v2.3.0\n\n</div>\n\nThe location of your universal [hooks](/docs/kit/hooks).\n\n</div>\n</div></div>\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nlib?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/lib\"`\n\n</div>\n\nyour app's internal library, accessible throughout the codebase as `$lib`\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nparams?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/params\"`\n\n</div>\n\na directory containing [parameter matchers](/docs/kit/advanced-routing#Matching)\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nroutes?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/routes\"`\n\n</div>\n\nthe files that define the structure of your app (see [Routing](/docs/kit/routing))\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nserviceWorker?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/service-worker\"`\n\n</div>\n\nthe location of your service worker's entry point (see [Service workers](/docs/kit/service-workers))\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nappTemplate?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/app.html\"`\n\n</div>\n\nthe location of the template for HTML responses\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nerrorTemplate?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> \n- <span class=\"tag\">default</span> `\"src/error.html\"`\n\n</div>\n\nthe location of the template for fallback error responses\n\n</div>\n</div>\n\n</div>\n\n## inlineStyleThreshold\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `0`\n\n</div>\n\nInline CSS inside a `<style>` block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file in UTF-16 code units, as specified by the [String.length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) property, to be inlined. All CSS files needed for the page that are smaller than this value are merged and inlined in a `<style>` block.\n\n> [!NOTE] This results in fewer initial requests and can improve your [First Contentful Paint](https://web.dev/first-contentful-paint) score. However, it generates larger HTML output and reduces the effectiveness of browser caches. Use it advisedly.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## moduleExtensions\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `[\".js\", \".ts\"]`\n\n</div>\n\nAn array of file extensions that SvelteKit will treat as modules. Files with extensions that match neither `config.extensions` nor `config.kit.moduleExtensions` will be ignored by the router.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## outDir\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\".svelte-kit\"`\n\n</div>\n\nThe directory that SvelteKit writes files to during `dev` and `build`. You should exclude this directory from version control.\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## output\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nOptions related to the build output format\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\npreloadStrategy?: 'modulepreload' | 'preload-js' | 'preload-mjs';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"modulepreload\"`\n- <span class=\"tag since\">available since</span> v1.8.4\n\n</div>\n\nSvelteKit will preload the JavaScript modules needed for the initial page to avoid import 'waterfalls', resulting in faster application startup. There\nare three strategies with different trade-offs:\n- `modulepreload` - uses `<link rel=\"modulepreload\">`. This delivers the best results in Chromium-based browsers, in Firefox 115+, and Safari 17+. It is ignored in older browsers.\n- `preload-js` - uses `<link rel=\"preload\">`. Prevents waterfalls in Chromium and Safari, but Chromium will parse each module twice (once as a script, once as a module). Causes modules to be requested twice in Firefox. This is a good setting if you want to maximise performance for users on iOS devices at the cost of a very slight degradation for Chromium users.\n- `preload-mjs` - uses `<link rel=\"preload\">` but with the `.mjs` extension which prevents double-parsing in Chromium. Some static webservers will fail to serve .mjs files with a `Content-Type: application/javascript` header, which will cause your application to break. If that doesn't apply to you, this is the option that will deliver the best performance for the largest number of users, until `modulepreload` is more widely supported.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nbundleStrategy?: 'split' | 'single' | 'inline';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `'split'`\n- <span class=\"tag since\">available since</span> v2.13.0\n\n</div>\n\nThe bundle strategy option affects how your app's JavaScript and CSS files are loaded.\n- If `'split'`, splits the app up into multiple .js/.css files so that they are loaded lazily as the user navigates around the app. This is the default, and is recommended for most scenarios.\n- If `'single'`, creates just one .js bundle and one .css file containing code for the entire app.\n- If `'inline'`, inlines all JavaScript and CSS of the entire app into the HTML. The result is usable without a server (i.e. you can just open the file in your browser).\n\nWhen using `'split'`, you can also adjust the bundling behaviour by setting [`output.experimentalMinChunkSize`](https://rollupjs.org/configuration-options/#output-experimentalminchunksize) and [`output.manualChunks`](https://rollupjs.org/configuration-options/#output-manualchunks) inside your Vite config's [`build.rollupOptions`](https://vite.dev/config/build-options.html#build-rollupoptions).\n\nIf you want to inline your assets, you'll need to set Vite's [`build.assetsInlineLimit`](https://vite.dev/config/build-options.html#build-assetsinlinelimit) option to an appropriate size then import your assets through Vite.\n\n```js\n// @errors: 7031\n/// file: vite.config.js\nimport { sveltekit } from '@sveltejs/kit/vite';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n\tplugins: [sveltekit()],\n\tbuild: {\n\t\t// inline all imported assets\n\t\tassetsInlineLimit: Infinity\n\t}\n});\n```\n\n```svelte\n/// file: src/routes/+layout.svelte\n<script>\n\t// import the asset through Vite\n\timport favicon from './favicon.png';\n</script>\n\n<svelte:head>\n\t<!-- this asset will be inlined as a base64 URL -->\n\t<link rel=\"icon\" href={favicon} />\n</svelte:head>\n```\n\n</div>\n</div>\n\n</div>\n\n## paths\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nassets?: '' | `http://${string}` | `https://${string}`;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"\"`\n\n</div>\n\nAn absolute path that your app's files are served from. This is useful if your files are served from a storage bucket of some kind.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nbase?: '' | `/${string}`;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"\"`\n\n</div>\n\nA root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](/docs/kit/$app-paths#base) for that: `<a href=\"{base}/your-page\">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nrelative?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `true`\n- <span class=\"tag since\">available since</span> v1.9.0\n\n</div>\n\nWhether to use relative asset paths.\n\nIf `true`, `base` and `assets` imported from `$app/paths` will be replaced with relative asset paths during server-side rendering, resulting in more portable HTML.\nIf `false`, `%sveltekit.assets%` and references to build artifacts will always be root-relative paths, unless `paths.assets` is an external URL\n\n[Single-page app](/docs/kit/single-page-apps) fallback pages will always use absolute paths, regardless of this setting.\n\nIf your app uses a `<base>` element, you should set this to `false`, otherwise asset URLs will incorrectly be resolved against the `<base>` URL rather than the current page.\n\nIn 1.0, `undefined` was a valid value, which was set by default. In that case, if `paths.assets` was not external, SvelteKit would replace `%sveltekit.assets%` with a relative path and use relative paths to reference build artifacts, but `base` and `assets` imported from `$app/paths` would be as specified in your config.\n\n</div>\n</div>\n\n</div>\n\n## prerender\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nSee [Prerendering](/docs/kit/page-options#prerender).\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nconcurrency?: number;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `1`\n\n</div>\n\nHow many pages can be prerendered simultaneously. JS is single-threaded, but in cases where prerendering performance is network-bound (for example loading content from a remote CMS) this can speed things up by processing other tasks while waiting on the network response.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ncrawl?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `true`\n\n</div>\n\nWhether SvelteKit should find pages to prerender by following links from `entries`.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nentries?: Array<'*' | `/${string}`>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `[\"*\"]`\n\n</div>\n\nAn array of pages to prerender, or start crawling from (if `crawl: true`). The `*` string includes all routes containing no required `[parameters]`  with optional parameters included as being empty (since SvelteKit doesn't know what value any parameters should have).\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhandleHttpError?: PrerenderHttpErrorHandlerValue;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"fail\"`\n- <span class=\"tag since\">available since</span> v1.15.7\n\n</div>\n\nHow to respond to HTTP errors encountered while prerendering the app.\n\n- `'fail'` — fail the build\n- `'ignore'` - silently ignore the failure and continue\n- `'warn'` — continue, but print a warning\n- `(details) => void` — a custom error handler that takes a `details` object with `status`, `path`, `referrer`, `referenceType` and `message` properties. If you `throw` from this function, the build will fail\n\n```js\n// @errors: 7031\n/// file: svelte.config.js\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n\tkit: {\n\t\tprerender: {\n\t\t\thandleHttpError: ({ path, referrer, message }) => {\n\t\t\t\t// ignore deliberate link to shiny 404 page\n\t\t\t\tif (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// otherwise fail the build\n\t\t\t\tthrow new Error(message);\n\t\t\t}\n\t\t}\n\t}\n};\n```\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhandleMissingId?: PrerenderMissingIdHandlerValue;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"fail\"`\n- <span class=\"tag since\">available since</span> v1.15.7\n\n</div>\n\nHow to respond when hash links from one prerendered page to another don't correspond to an `id` on the destination page.\n\n- `'fail'` — fail the build\n- `'ignore'` - silently ignore the failure and continue\n- `'warn'` — continue, but print a warning\n- `(details) => void` — a custom error handler that takes a `details` object with `path`, `id`, `referrers` and `message` properties. If you `throw` from this function, the build will fail\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhandleEntryGeneratorMismatch?: PrerenderEntryGeneratorMismatchHandlerValue;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"fail\"`\n- <span class=\"tag since\">available since</span> v1.16.0\n\n</div>\n\nHow to respond when an entry generated by the `entries` export doesn't match the route it was generated from.\n\n- `'fail'` — fail the build\n- `'ignore'` - silently ignore the failure and continue\n- `'warn'` — continue, but print a warning\n- `(details) => void` — a custom error handler that takes a `details` object with `generatedFromId`, `entry`, `matchedId` and `message` properties. If you `throw` from this function, the build will fail\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nhandleUnseenRoutes?: PrerenderUnseenRoutesHandlerValue;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"fail\"`\n- <span class=\"tag since\">available since</span> v2.16.0\n\n</div>\n\nHow to respond when a route is marked as prerenderable but has not been prerendered.\n\n- `'fail'` — fail the build\n- `'ignore'` - silently ignore the failure and continue\n- `'warn'` — continue, but print a warning\n- `(details) => void` — a custom error handler that takes a `details` object with a `routes` property which contains all routes that haven't been prerendered. If you `throw` from this function, the build will fail\n\nThe default behavior is to fail the build. This may be undesirable when you know that some of your routes may never be reached under certain\ncircumstances such as a CMS not returning data for a specific area, resulting in certain routes never being reached.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\norigin?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"http://sveltekit-prerender\"`\n\n</div>\n\nThe value of `url.origin` during prerendering; useful if it is included in rendered content.\n\n</div>\n</div>\n\n</div>\n\n## router\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\ntype?: 'pathname' | 'hash';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"pathname\"`\n- <span class=\"tag since\">available since</span> v2.14.0\n\n</div>\n\nWhat type of client-side router to use.\n- `'pathname'` is the default and means the current URL pathname determines the route\n- `'hash'` means the route is determined by `location.hash`. In this case, SSR and prerendering are disabled. This is only recommended if `pathname` is not an option, for example because you don't control the webserver where your app is deployed.\n\tIt comes with some caveats: you can't use server-side rendering (or indeed any server logic), and you have to make sure that the links in your app all start with #/, or they won't work. Beyond that, everything works exactly like a normal SvelteKit app.\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nresolution?: 'client' | 'server';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `\"client\"`\n- <span class=\"tag since\">available since</span> v2.17.0\n\n</div>\n\nHow to determine which route to load when navigating to a new page.\n\nBy default, SvelteKit will serve a route manifest to the browser.\nWhen navigating, this manifest is used (along with the `reroute` hook, if it exists) to determine which components to load and which `load` functions to run.\nBecause everything happens on the client, this decision can be made immediately. The drawback is that the manifest needs to be\nloaded and parsed before the first navigation can happen, which may have an impact if your app contains many routes.\n\nAlternatively, SvelteKit can determine the route on the server. This means that for every navigation to a path that has not yet been visited, the server will be asked to determine the route.\nThis has several advantages:\n- The client does not need to load the routing manifest upfront, which can lead to faster initial page loads\n- The list of routes is hidden from public view\n- The server has an opportunity to intercept each navigation (for example through a middleware), enabling (for example) A/B testing opaque to SvelteKit\n\nThe drawback is that for unvisited paths, resolution will take slightly longer (though this is mitigated by [preloading](/docs/kit/link-options#data-sveltekit-preload-data)).\n\n> [!NOTE] When using server-side route resolution and prerendering, the resolution is prerendered along with the route itself.\n\n</div>\n</div>\n\n</div>\n\n## serviceWorker\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n\n\n<div class=\"ts-block-property-children\">\n\n\n\n</div>\n\n## typescript\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\n\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nconfig?: (config: Record<string, any>) => Record<string, any> | void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `(config) => config`\n- <span class=\"tag since\">available since</span> v1.3.0\n\n</div>\n\nA function that allows you to edit the generated `tsconfig.json`. You can mutate the config (recommended) or return a new one.\nThis is useful for extending a shared `tsconfig.json` in a monorepo root, for example.\n\nNote that any paths configured here should be relative to the generated config file, which is written to `.svelte-kit/tsconfig.json`.\n\n</div>\n</div>\n\n</div>\n\n## version\n\n<div class=\"ts-block-property-bullets\">\n\n\n\n</div>\n\nClient-side navigation can be buggy if you deploy a new version of your app while people are using it. If the code for the new page is already loaded, it may have stale content; if it isn't, the app's route manifest may point to a JavaScript file that no longer exists.\nSvelteKit helps you solve this problem through version management.\nIf SvelteKit encounters an error while loading the page and detects that a new version has been deployed (using the `name` specified here, which defaults to a timestamp of the build) it will fall back to traditional full-page navigation.\nNot all navigations will result in an error though, for example if the JavaScript for the next page is already loaded. If you still want to force a full-page navigation in these cases, use techniques such as setting the `pollInterval` and then using `beforeNavigate`:\n```html\n/// file: +layout.svelte\n<script>\n\timport { beforeNavigate } from '$app/navigation';\n\timport { updated } from '$app/state';\n\n\tbeforeNavigate(({ willUnload, to }) => {\n\t\tif (updated.current && !willUnload && to?.url) {\n\t\t\tlocation.href = to.url.href;\n\t\t}\n\t});\n</script>\n```\n\nIf you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of [`updated.current`](/docs/kit/$app-state#updated) `true` when it detects one.\n\n<div class=\"ts-block-property-children\">\n\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\nname?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe current app version string. If specified, this must be deterministic (e.g. a commit ref rather than `Math.random()` or `Date.now().toString()`), otherwise defaults to a timestamp of the build.\n\nFor example, to use the current commit hash, you could do use `git rev-parse HEAD`:\n\n```js\n// @errors: 7031\n/// file: svelte.config.js\nimport * as child_process from 'node:child_process';\n\nexport default {\n\tkit: {\n\t\tversion: {\n\t\t\tname: child_process.execSync('git rev-parse HEAD').toString().trim()\n\t\t}\n\t}\n};\n```\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```ts\n// @noErrors\npollInterval?: number;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `0`\n\n</div>\n\nThe interval in milliseconds to poll for version changes. If this is `0`, no polling occurs.\n\n</div>\n</div>\n\n</div>",
+		"kit/cli": "SvelteKit projects use [Vite](https://vitejs.dev), meaning you'll mostly use its CLI (albeit via `npm run dev/build/preview` scripts):\n\n- `vite dev` — start a development server\n- `vite build` — build a production version of your app\n- `vite preview` — run the production version locally\n\nHowever SvelteKit includes its own CLI for initialising your project:\n\n## svelte-kit sync\n\n`svelte-kit sync` creates the `tsconfig.json` and all generated types (which you can import as `./$types` inside routing files) for your project. When you create a new project, it is listed as the `prepare` script and will be run automatically as part of the npm lifecycle, so you should not ordinarily have to run this command.",
+		"kit/types": "## Generated types\n\nThe `RequestHandler` and `Load` types both accept a `Params` argument allowing you to type the `params` object. For example this endpoint expects `foo`, `bar` and `baz` params:\n\n```js\n/// file: src/routes/[foo]/[bar]/[baz]/+server.js\n// @errors: 2355 2322 1360\n/** @type {import('@sveltejs/kit').RequestHandler<{\n    foo: string;\n    bar: string;\n    baz: string\n  }>} */\nexport async function GET({ params }) {\n\t// ...\n}\n```\n\nNeedless to say, this is cumbersome to write out, and less portable (if you were to rename the `[foo]` directory to `[qux]`, the type would no longer reflect reality).\n\nTo solve this problem, SvelteKit generates `.d.ts` files for each of your endpoints and pages:\n\n```ts\n/// file: .svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d.ts\n/// link: true\nimport type * as Kit from '@sveltejs/kit';\n\ntype RouteParams = {\n\tfoo: string;\n\tbar: string;\n\tbaz: string;\n};\n\nexport type RequestHandler = Kit.RequestHandler<RouteParams>;\nexport type PageLoad = Kit.Load<RouteParams>;\n```\n\nThese files can be imported into your endpoints and pages as siblings, thanks to the [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs) option in your TypeScript configuration:\n\n```js\n/// file: src/routes/[foo]/[bar]/[baz]/+server.js\n// @filename: $types.d.ts\nimport type * as Kit from '@sveltejs/kit';\n\ntype RouteParams = {\n\tfoo: string;\n\tbar: string;\n\tbaz: string;\n}\n\nexport type RequestHandler = Kit.RequestHandler<RouteParams>;\n\n// @filename: index.js\n// @errors: 2355 2322\n// ---cut---\n/** @type {import('./$types').RequestHandler} */\nexport async function GET({ params }) {\n\t// ...\n}\n```\n\n```js\n/// file: src/routes/[foo]/[bar]/[baz]/+page.js\n// @filename: $types.d.ts\nimport type * as Kit from '@sveltejs/kit';\n\ntype RouteParams = {\n\tfoo: string;\n\tbar: string;\n\tbaz: string;\n}\n\nexport type PageLoad = Kit.Load<RouteParams>;\n\n// @filename: index.js\n// @errors: 2355\n// ---cut---\n/** @type {import('./$types').PageLoad} */\nexport async function load({ params, fetch }) {\n\t// ...\n}\n```\n\nThe return types of the load functions are then available through the `$types` module as `PageData` and `LayoutData` respectively, while the union of the return values of all `Actions` is available as `ActionData`.\n\nStarting with version 2.16.0, two additional helper types are provided: `PageProps` defines `data: PageData`, as well as `form: ActionData`, when there are actions defined, while `LayoutProps` defines `data: LayoutData`, as well as `children: Snippet`.\n\n```svelte\n<!--- file: src/routes/+page.svelte --->\n<script>\n\t/** @type {import('./$types').PageProps} */\n\tlet { data, form } = $props();\n</script>\n```\n\n> [!LEGACY]\n> Before 2.16.0:\n> ```svelte\n> <!--- file: src/routes/+page.svelte --->\n> <script>\n> \t/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */\n> \tlet { data, form } = $props();\n> </script>\n> ```\n>\n> Using Svelte 4:\n> ```svelte\n> <!--- file: src/routes/+page.svelte --->\n> <script>\n>   /** @type {import('./$types').PageData} */\n>   export let data;\n>   /** @type {import('./$types').ActionData} */\n>   export let form;\n> </script>\n> ```\n\n> [!NOTE] For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json` (where `.svelte-kit` is your [`outDir`](configuration#outDir)):\n>\n> `{ \"extends\": \"./.svelte-kit/tsconfig.json\" }`\n\n### Default tsconfig.json\n\nThe generated `.svelte-kit/tsconfig.json` file contains a mixture of options. Some are generated programmatically based on your project configuration, and should generally not be overridden without good reason:\n\n```json\n/// file: .svelte-kit/tsconfig.json\n{\n\t\"compilerOptions\": {\n\t\t\"paths\": {\n\t\t\t\"$lib\": [\"../src/lib\"],\n\t\t\t\"$lib/*\": [\"../src/lib/*\"]\n\t\t},\n\t\t\"rootDirs\": [\"..\", \"./types\"]\n\t},\n\t\"include\": [\n\t\t\"ambient.d.ts\",\n\t\t\"non-ambient.d.ts\",\n\t\t\"./types/**/$types.d.ts\",\n\t\t\"../vite.config.js\",\n\t\t\"../vite.config.ts\",\n\t\t\"../src/**/*.js\",\n\t\t\"../src/**/*.ts\",\n\t\t\"../src/**/*.svelte\",\n\t\t\"../tests/**/*.js\",\n\t\t\"../tests/**/*.ts\",\n\t\t\"../tests/**/*.svelte\"\n\t],\n\t\"exclude\": [\n\t\t\"../node_modules/**\",\n\t\t\"../src/service-worker.js\",\n\t\t\"../src/service-worker/**/*.js\",\n\t\t\"../src/service-worker.ts\",\n\t\t\"../src/service-worker/**/*.ts\",\n\t\t\"../src/service-worker.d.ts\",\n\t\t\"../src/service-worker/**/*.d.ts\"\n\t]\n}\n```\n\nOthers are required for SvelteKit to work properly, and should also be left untouched unless you know what you're doing:\n\n```json\n/// file: .svelte-kit/tsconfig.json\n{\n\t\"compilerOptions\": {\n\t\t// this ensures that types are explicitly\n\t\t// imported with `import type`, which is\n\t\t// necessary as Svelte/Vite cannot\n\t\t// otherwise compile components correctly\n\t\t\"verbatimModuleSyntax\": true,\n\n\t\t// Vite compiles one TypeScript module\n\t\t// at a time, rather than compiling\n\t\t// the entire module graph\n\t\t\"isolatedModules\": true,\n\n\t\t// Tell TS it's used only for type-checking\n\t\t\"noEmit\": true,\n\n\t\t// This ensures both `vite build`\n\t\t// and `svelte-package` work correctly\n\t\t\"lib\": [\"esnext\", \"DOM\", \"DOM.Iterable\"],\n\t\t\"moduleResolution\": \"bundler\",\n\t\t\"module\": \"esnext\",\n\t\t\"target\": \"esnext\"\n\t}\n}\n```\n\nUse the [`typescript.config` setting](configuration#typescript) in `svelte.config.js` to extend or modify the generated `tsconfig.json`.\n\n## $lib\n\nThis is a simple alias to `src/lib`, or whatever directory is specified as [`config.kit.files.lib`](configuration#files). It allows you to access common components and utility modules without `../../../../` nonsense.\n\n### $lib/server\n\nA subdirectory of `$lib`. SvelteKit will prevent you from importing any modules in `$lib/server` into client-side code. See [server-only modules](server-only-modules).\n\n## app.d.ts\n\nThe `app.d.ts` file is home to the ambient types of your apps, i.e. types that are available without explicitly importing them.\n\nAlways part of this file is the `App` namespace. This namespace contains several types that influence the shape of certain SvelteKit features you interact with.\n\n## Error\n\nDefines the common shape of expected and unexpected errors. Expected errors are thrown using the `error` function. Unexpected errors are handled by the `handleError` hooks which should return this shape.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Error {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nmessage: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## Locals\n\nThe interface that defines `event.locals`, which can be accessed in server [hooks](/docs/kit/hooks) (`handle`, and `handleError`), server-only `load` functions, and `+server.js` files.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Locals {}\n```\n\n</div>\n\n## PageData\n\nDefines the common shape of the [page.data state](/docs/kit/$app-state#page) and [$page.data store](/docs/kit/$app-stores#page) - that is, the data that is shared between all pages.\nThe `Load` and `ServerLoad` functions in `./$types` will be narrowed accordingly.\nUse optional properties for data that is only present on specific pages. Do not add an index signature (`[key: string]: any`).\n\n<div class=\"ts-block\">\n\n```dts\ninterface PageData {}\n```\n\n</div>\n\n## PageState\n\nThe shape of the `page.state` object, which can be manipulated using the [`pushState`](/docs/kit/$app-navigation#pushState) and [`replaceState`](/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.\n\n<div class=\"ts-block\">\n\n```dts\ninterface PageState {}\n```\n\n</div>\n\n## Platform\n\nIf your adapter provides [platform-specific context](/docs/kit/adapters#Platform-specific-context) via `event.platform`, you can specify it here.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Platform {}\n```\n\n</div>",
+		"mcp/overview": "The Svelte MCP ([Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro)) server can help your LLM or agent of choice write better Svelte code. It works by providing documentation relevant to the task at hand, and statically analysing generated code so that it can suggest fixes and best practices.\n\n## Setup\n\nThe setup varies based on the version of the MCP you prefer — remote or local — and your chosen MCP client (e.g. Claude Code, Codex CLI or GitHub Copilot):\n\n- [local setup](local-setup) using `@sveltejs/mcp`\n- [remote setup](remote-setup) using `https://mcp.svelte.dev/mcp`\n\n## Usage\n\nTo get the most out of the MCP server we recommend including the following prompt in your [`AGENTS.md`](https://agents.md) (or [`CLAUDE.md`](https://docs.claude.com/en/docs/claude-code/memory#claude-md-imports), if using Claude Code). This will tell the LLM which tools are available and when it's appropriate to use them.\n\n```md\nYou are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:\n\n## Available MCP Tools:\n\n### 1. list-sections\n\nUse this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.\nWhen asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.\n\n### 2. get-documentation\n\nRetrieves full documentation content for specific sections. Accepts single or multiple sections.\nAfter calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.\n\n### 3. svelte-autofixer\n\nAnalyzes Svelte code and returns issues and suggestions.\nYou MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.\n\n### 4. playground-link\n\nGenerates a Svelte Playground link with the provided code.\nAfter completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.\n```\n\nIf your MCP client supports it, we also recommend using the [svelte-task](prompts#svelte-task) prompt to instruct the LLM on the best way to use the MCP server.",
+		"mcp/local-setup": "The local (or stdio) version of the MCP server is available via the [`@sveltejs/mcp`](https://www.npmjs.com/package/@sveltejs/mcp) npm package. You can either install it globally and then reference it in your configuration or run it with `npx`:\n\n```bash\nnpx -y @sveltejs/mcp\n```\n\nHere's how to set it up in some common MCP clients:\n\n## Claude Code\n\nTo include the local MCP version in Claude Code, simply run the following command:\n\n```bash\nclaude mcp add -t stdio -s [scope] svelte -- npx -y @sveltejs/mcp\n```\n\nThe `[scope]` must be `user`, `project` or `local`.\n\n## Claude Desktop\n\nIn the Settings > Developer section, click on Edit Config. It will open the folder with a `claude_desktop_config.json` file in it. Edit the file to include the following configuration:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"command\": \"npx\",\n\t\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t\t}\n\t}\n}\n```\n\n## Codex CLI\n\nAdd the following to your `config.toml` (which defaults to `~/.codex/config.toml`, but refer to [the configuration documentation](https://github.com/openai/codex/blob/main/docs/config.md) for more advanced setups):\n\n```toml\n[mcp_servers.svelte]\ncommand = \"npx\"\nargs = [\"-y\", \"@sveltejs/mcp\"]\n```\n\n## Gemini CLI\n\nTo include the local MCP version in Gemini CLI, simply run the following command:\n\n```bash\ngemini mcp add -t stdio -s [scope] svelte npx -y @sveltejs/mcp\n```\n\nThe `[scope]` must be `user`, `project` or `local`.\n\n## OpenCode\n\nRun the command:\n\n```bash\nopencode mcp add\n```\n\nand follow the instructions, selecting 'Local' under the 'Select MCP server type' prompt:\n\n```bash\nopencode mcp add\n\n┌  Add MCP server\n│\n◇  Enter MCP server name\n│  svelte\n│\n◇  Select MCP server type\n│  Local\n│\n◆  Enter command to run\n│  npx -y @sveltejs/mcp\n```\n\n## VS Code\n\n- Open the command palette\n- Select \"MCP: Add Server...\"\n- Select \"Command (stdio)\"\n- Insert `npx -y @sveltejs/mcp` in the input and press `Enter`\n- When prompted for a name, insert `svelte`\n- Select if you want to add it as a `Global` or `Workspace` MCP server\n\n## Cursor\n\n- Open the command palette\n- Select \"View: Open MCP Settings\"\n- Click on \"Add custom MCP\"\n\nIt will open a file with your MCP servers where you can add the following configuration:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"command\": \"npx\",\n\t\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t\t}\n\t}\n}\n```\n\n## Zed\n\n- Open the command palette\n- Search and select \"agent:open settings\"\n- In settings panel look for `Model Context Protocol (MCP) Servers`\n- Click on \"Add Server\"\n- Select: \"Add Custom Server\"\n\nIt will open a popup with MCP server config where you can add the following configuration:\n\n```json\n{\n\t\"svelte\": {\n\t\t\"command\": \"npx\",\n\t\t\"args\": [\"-y\", \"@sveltejs/mcp\"]\n\t}\n}\n```\n\n## Other clients\n\nIf we didn't include the MCP client you are using, refer to their documentation for `stdio` servers and use `npx` as the command and `-y @sveltejs/mcp` as the arguments.",
+		"mcp/remote-setup": "The remote version of the MCP server is available at `https://mcp.svelte.dev/mcp`.\n\nHere's how to set it up in some common MCP clients:\n\n## Claude Code\n\nTo include the remote MCP version in Claude Code, simply run the following command:\n\n```bash\nclaude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp\n```\n\nYou can choose your preferred `scope` (it must be `user`, `project` or `local`) and `name`.\n\n## Claude Desktop\n\n- Open Settings > Connectors\n- Click on Add Custom Connector\n- When prompted for a name, enter `svelte`\n- Under the Remote MCP server URL input, use `https://mcp.svelte.dev/mcp`\n- Click Add\n\n## Codex CLI\n\nAdd the following to your `config.toml` (which defaults to `~/.codex/config.toml`, but refer to [the configuration documentation](https://github.com/openai/codex/blob/main/docs/config.md) for more advanced setups):\n\n```toml\nexperimental_use_rmcp_client = true\n[mcp_servers.svelte]\nurl = \"https://mcp.svelte.dev/mcp\"\n```\n\n## Gemini CLI\n\nTo use the remote MCP server with Gemini CLI, simply run the following command:\n\n```bash\ngemini mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp\n```\n\nThe `[scope]` must be `user`, `project` or `local`.\n\n## OpenCode\n\nRun the command:\n\n```bash\nopencode mcp add\n```\n\nand follow the instructions, selecting 'Remote' under the 'Select MCP server type' prompt:\n\n```bash\nopencode mcp add\n\n┌  Add MCP server\n│\n◇  Enter MCP server name\n│  svelte\n│\n◇  Select MCP server type\n│  Remote\n│\n◇  Enter MCP server URL\n│  https://mcp.svelte.dev/mcp\n```\n\n## VS Code\n\n- Open the command palette\n- Select \"MCP: Add Server...\"\n- Select \"HTTP (HTTP or Server-Sent-Events)\"\n- Insert `https://mcp.svelte.dev/mcp` in the input and press `Enter`\n- Insert your preferred name\n- Select if you want to add it as a `Global` or `Workspace` MCP server\n\n## Cursor\n\n- Open the command palette\n- Select \"View: Open MCP Settings\"\n- Click on \"Add custom MCP\"\n\nIt will open a file with your MCP servers where you can add the following configuration:\n\n```json\n{\n\t\"mcpServers\": {\n\t\t\"svelte\": {\n\t\t\t\"url\": \"https://mcp.svelte.dev/mcp\"\n\t\t}\n\t}\n}\n```\n\n## Other clients\n\nIf we didn't include the MCP client you are using, refer to their documentation for `remote` servers and use `https://mcp.svelte.dev/mcp` as the URL.",
+		"mcp/tools": "The following tools are provided by the MCP server to the model you are using, which can decide to call one or more of them during a session:\n\n## list-sections\n\nProvides a list of all the available documentation sections.\n\n## get-documentation\n\nAllows the model to get the full (and up-to-date) documentation for the requested sections directly from [svelte.dev/docs](/docs).\n\n## svelte-autofixer\n\nUses static analysis to provide suggestions for code that your LLM generates. It can be invoked in an agentic loop by your model until all issues and suggestions are resolved.\n\n## playground-link\n\nGenerates an ephemeral playground link with the generated code. It's useful when the generated code is not written to a file in your project and you want to quickly test the generated solution. The code is not stored anywhere except the URL itself (which will often, as a consequence, be quite large).",
+		"mcp/resources": "This is the list of available resources provided by the MCP server. Resources are included by the user (not by the LLM) and are useful if you want to include specific knowledge in your session. For example, if you know that the component will need to use transitions you can include the transition documentation directly without asking the LLM to do it for you.\n\n## doc-section\n\nThis dynamic resource allows you to add every section of the Svelte documentation as a resource. The URI looks like this `svelte://slug-of-the-docs.md` and the returned resource will contain the `llms.txt` version of the specific page you selected.",
+		"mcp/prompts": "This is the list of available prompts provided by the MCP server. Prompts are selected by the user and are sent as a user message. They can be useful to write repetitive instructions for the LLM on how to properly use the MCP server.\n\n## svelte-task\n\nThis prompt should be used whenever you are asking the model to work on a Svelte-related task. It will instruct the LLM which documentation sections are available, which tools to invoke, when to invoke them, and how to interpret the results.\n\n<details>\n\t<summary>Copy the prompt</summary>\n\n```md\nYou are a Svelte expert tasked to build components and utilities for Svelte developers. If you need documentation for anything related to Svelte you can invoke the tool `get_documentation` with one of the following paths:\n<available-docs>\n\n- title: Overview, use_cases: project setup, creating new svelte apps, scaffolding, cli tools, initializing projects, path: cli/overview\n- title: Frequently asked questions, use_cases: project setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration, path: cli/faq\n- title: sv create, use_cases: project setup, starting new sveltekit app, initializing project, creating from playground, choosing project template, path: cli/sv-create\n- title: sv add, use_cases: project setup, adding features to existing projects, integrating tools, testing setup, styling setup, authentication, database setup, deployment adapters, path: cli/sv-add\n- title: sv check, use_cases: code quality, ci/cd pipelines, error checking, typescript projects, pre-commit hooks, finding unused css, accessibility auditing, production builds, path: cli/sv-check\n- title: sv migrate, use_cases: migration, upgrading svelte versions, upgrading sveltekit versions, modernizing codebase, svelte 3 to 4, svelte 4 to 5, sveltekit 1 to 2, adopting runes, refactoring deprecated apis, path: cli/sv-migrate\n- title: devtools-json, use_cases: development setup, chrome devtools integration, browser-based editing, local development workflow, debugging setup, path: cli/devtools-json\n- title: drizzle, use_cases: database setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries, path: cli/drizzle\n- title: eslint, use_cases: code quality, linting, error detection, project setup, code standards, team collaboration, typescript projects, path: cli/eslint\n- title: lucia, use_cases: authentication, login systems, user management, registration pages, session handling, auth setup, path: cli/lucia\n- title: mdsvex, use_cases: blog, content sites, markdown rendering, documentation sites, technical writing, cms integration, article pages, path: cli/mdsvex\n- title: paraglide, use_cases: internationalization, multi-language sites, i18n, translation, localization, language switching, global apps, multilingual content, path: cli/paraglide\n- title: playwright, use_cases: browser testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines, testing user flows, path: cli/playwright\n- title: prettier, use_cases: code formatting, project setup, code style consistency, team collaboration, linting configuration, path: cli/prettier\n- title: storybook, use_cases: component development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase, path: cli/storybook\n- title: sveltekit-adapter, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify, path: cli/sveltekit-adapter\n- title: tailwindcss, use_cases: project setup, styling, css framework, rapid prototyping, utility-first css, design systems, responsive design, adding tailwind to svelte, path: cli/tailwind\n- title: vitest, use_cases: testing, unit tests, component testing, test setup, quality assurance, ci/cd pipelines, test-driven development, path: cli/vitest\n- title: Introduction, use_cases: learning sveltekit, project setup, understanding framework basics, choosing between svelte and sveltekit, getting started with full-stack apps, path: kit/introduction\n- title: Creating a project, use_cases: project setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects, path: kit/creating-a-project\n- title: Project types, use_cases: deployment, project setup, choosing adapters, ssg, spa, ssr, serverless, mobile apps, desktop apps, pwa, offline apps, browser extensions, separate backend, docker containers, path: kit/project-types\n- title: Project structure, use_cases: project setup, understanding file structure, organizing code, starting new project, learning sveltekit basics, path: kit/project-structure\n- title: Web standards, use_cases: always, any sveltekit project, data fetching, forms, api routes, server-side rendering, deployment to various platforms, path: kit/web-standards\n- title: Routing, use_cases: routing, navigation, multi-page apps, project setup, file structure, api endpoints, data loading, layouts, error pages, always, path: kit/routing\n- title: Loading data, use_cases: data fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data, form data, content rendering, path: kit/load\n- title: Form actions, use_cases: forms, user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors, path: kit/form-actions\n- title: Page options, use_cases: prerendering static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization, path: kit/page-options\n- title: State management, use_cases: sveltekit, server-side rendering, ssr, state management, authentication, data persistence, load functions, context api, navigation, component lifecycle, path: kit/state-management\n- title: Remote functions, use_cases: data fetching, server-side logic, database queries, type-safe client-server communication, forms, user input, mutations, authentication, crud operations, optimistic updates, path: kit/remote-functions\n- title: Building your app, use_cases: production builds, deployment preparation, build process optimization, adapter configuration, preview before deployment, path: kit/building-your-app\n- title: Adapters, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, path: kit/adapters\n- title: Zero-config deployments, use_cases: deployment, production builds, hosting setup, choosing deployment platform, ci/cd configuration, path: kit/adapter-auto\n- title: Node servers, use_cases: deployment, production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services, path: kit/adapter-node\n- title: Static site generation, use_cases: static site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites, path: kit/adapter-static\n- title: Single-page apps, use_cases: spa mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup, fallback pages, path: kit/single-page-apps\n- title: Cloudflare, use_cases: deployment, cloudflare workers, cloudflare pages, hosting setup, production builds, serverless deployment, edge computing, path: kit/adapter-cloudflare\n- title: Cloudflare Workers, use_cases: deploying to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, wrangler configuration, cloudflare platform bindings, path: kit/adapter-cloudflare-workers\n- title: Netlify, use_cases: deployment, netlify hosting, production builds, serverless functions, edge functions, static site hosting, path: kit/adapter-netlify\n- title: Vercel, use_cases: deployment, vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables, path: kit/adapter-vercel\n- title: Writing adapters, use_cases: custom deployment, building adapters, unsupported platforms, adapter development, custom hosting environments, path: kit/writing-adapters\n- title: Advanced routing, use_cases: advanced routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation, path: kit/advanced-routing\n- title: Hooks, use_cases: authentication, logging, error tracking, request interception, api proxying, custom routing, internationalization, database initialization, middleware logic, session management, path: kit/hooks\n- title: Errors, use_cases: error handling, custom error pages, 404 pages, api error responses, production error logging, error tracking, type-safe errors, path: kit/errors\n- title: Link options, use_cases: routing, navigation, multi-page apps, performance optimization, link preloading, forms with get method, search functionality, focus management, scroll behavior, path: kit/link-options\n- title: Service workers, use_cases: offline support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps, path: kit/service-workers\n- title: Server-only modules, use_cases: api keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation, path: kit/server-only-modules\n- title: Snapshots, use_cases: forms, user input, preserving form data, multi-step forms, navigation state, preventing data loss, textarea content, input fields, comment systems, surveys, path: kit/snapshots\n- title: Shallow routing, use_cases: modals, dialogs, image galleries, overlays, history-driven ui, mobile-friendly navigation, photo viewers, lightboxes, drawer menus, path: kit/shallow-routing\n- title: Observability, use_cases: performance monitoring, debugging, observability, tracing requests, production diagnostics, analyzing slow requests, finding bottlenecks, monitoring server-side operations, path: kit/observability\n- title: Packaging, use_cases: building component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution, path: kit/packaging\n- title: Auth, use_cases: authentication, login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization checks, path: kit/auth\n- title: Performance, use_cases: performance optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times, path: kit/performance\n- title: Icons, use_cases: icons, ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management, path: kit/icons\n- title: Images, use_cases: image optimization, responsive images, performance, hero images, product photos, galleries, cms integration, cdn setup, asset management, path: kit/images\n- title: Accessibility, use_cases: always, any sveltekit project, screen reader support, keyboard navigation, multi-page apps, client-side routing, internationalization, multilingual sites, path: kit/accessibility\n- title: SEO, use_cases: seo optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization, path: kit/seo\n- title: Frequently asked questions, use_cases: troubleshooting package imports, library compatibility issues, client-side code execution, external api integration, middleware setup, database configuration, view transitions, yarn configuration, path: kit/faq\n- title: Integrations, use_cases: project setup, css preprocessors, postcss, scss, sass, less, stylus, typescript setup, adding integrations, tailwind, testing, auth, linting, formatting, path: kit/integrations\n- title: Breakpoint Debugging, use_cases: debugging, breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution, path: kit/debugging\n- title: Migrating to SvelteKit v2, use_cases: migration, upgrading from sveltekit 1 to 2, breaking changes, version updates, path: kit/migrating-to-sveltekit-2\n- title: Migrating from Sapper, use_cases: migrating from sapper, upgrading legacy projects, sapper to sveltekit conversion, project modernization, path: kit/migrating\n- title: Additional resources, use_cases: troubleshooting, getting help, finding examples, learning sveltekit, project templates, common issues, community support, path: kit/additional-resources\n- title: Glossary, use_cases: rendering strategies, performance optimization, deployment configuration, seo requirements, static sites, spas, server-side rendering, prerendering, edge deployment, pwa development, path: kit/glossary\n- title: @sveltejs/kit, use_cases: forms, form actions, server-side validation, form submission, error handling, redirects, json responses, http errors, server utilities, path: kit/@sveltejs-kit\n- title: @sveltejs/kit/hooks, use_cases: middleware, request processing, authentication chains, logging, multiple hooks, request/response transformation, path: kit/@sveltejs-kit-hooks\n- title: @sveltejs/kit/node/polyfills, use_cases: node.js environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements, path: kit/@sveltejs-kit-node-polyfills\n- title: @sveltejs/kit/node, use_cases: node.js adapter, custom server setup, http integration, streaming files, node deployment, server-side rendering with node, path: kit/@sveltejs-kit-node\n- title: @sveltejs/kit/vite, use_cases: project setup, vite configuration, initial sveltekit setup, build tooling, path: kit/@sveltejs-kit-vite\n- title: $app/environment, use_cases: always, conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection, path: kit/$app-environment\n- title: $app/forms, use_cases: forms, user input, data submission, progressive enhancement, custom form handling, form validation, path: kit/$app-forms\n- title: $app/navigation, use_cases: routing, navigation, multi-page apps, programmatic navigation, data reloading, preloading, shallow routing, navigation lifecycle, scroll handling, view transitions, path: kit/$app-navigation\n- title: $app/paths, use_cases: static assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation, path: kit/$app-paths\n- title: $app/server, use_cases: remote functions, server-side logic, data fetching, form handling, api endpoints, client-server communication, prerendering, file reading, batch queries, path: kit/$app-server\n- title: $app/state, use_cases: routing, navigation, multi-page apps, loading states, url parameters, form handling, error states, version updates, page metadata, shallow routing, path: kit/$app-state\n- title: $app/stores, use_cases: legacy projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates, path: kit/$app-stores\n- title: $app/types, use_cases: routing, navigation, type safety, route parameters, dynamic routes, link generation, pathname validation, multi-page apps, path: kit/$app-types\n- title: $env/dynamic/private, use_cases: api keys, secrets management, server-side config, environment variables, backend logic, deployment-specific settings, private data handling, path: kit/$env-dynamic-private\n- title: $env/dynamic/public, use_cases: environment variables, client-side config, runtime configuration, public api keys, deployment-specific settings, multi-environment apps, path: kit/$env-dynamic-public\n- title: $env/static/private, use_cases: server-side api keys, backend secrets, database credentials, private configuration, build-time optimization, server endpoints, authentication tokens, path: kit/$env-static-private\n- title: $env/static/public, use_cases: environment variables, public config, client-side data, api endpoints, build-time configuration, public constants, path: kit/$env-static-public\n- title: $lib, use_cases: project setup, component organization, importing shared components, reusable ui elements, code structure, path: kit/$lib\n- title: $service-worker, use_cases: offline support, pwa, service workers, caching strategies, progressive web apps, offline-first apps, path: kit/$service-worker\n- title: Configuration, use_cases: project setup, configuration, adapters, deployment, build settings, environment variables, routing customization, prerendering, csp security, csrf protection, path configuration, typescript setup, path: kit/configuration\n- title: Command Line Interface, use_cases: project setup, typescript configuration, generated types, ./$types imports, initial project configuration, path: kit/cli\n- title: Types, use_cases: typescript, type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup, path: kit/types\n- title: Overview, use_cases: use title and path to estimate use case, path: mcp/overview\n- title: Local setup, use_cases: use title and path to estimate use case, path: mcp/local-setup\n- title: Remote setup, use_cases: use title and path to estimate use case, path: mcp/remote-setup\n- title: Tools, use_cases: use title and path to estimate use case, path: mcp/tools\n- title: Resources, use_cases: use title and path to estimate use case, path: mcp/resources\n- title: Prompts, use_cases: use title and path to estimate use case, path: mcp/prompts\n- title: Overview, use_cases: always, any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics, path: svelte/overview\n- title: Getting started, use_cases: project setup, starting new svelte project, initial installation, choosing between sveltekit and vite, editor configuration, path: svelte/getting-started\n- title: .svelte files, use_cases: always, any svelte project, component creation, project setup, learning svelte basics, path: svelte/svelte-files\n- title: .svelte.js and .svelte.ts files, use_cases: shared reactive state, reusable reactive logic, state management across components, global stores, custom reactive utilities, path: svelte/svelte-js-files\n- title: What are runes?, use_cases: always, any svelte 5 project, understanding core syntax, learning svelte 5, migration from svelte 4, path: svelte/what-are-runes\n- title: $state, use_cases: always, any svelte project, core reactivity, state management, counters, forms, todo apps, interactive ui, data updates, class-based components, path: svelte/$state\n- title: $derived, use_cases: always, any svelte project, computed values, reactive calculations, derived data, transforming state, dependent values, path: svelte/$derived\n- title: $effect, use_cases: canvas drawing, third-party library integration, dom manipulation, side effects, intervals, timers, network requests, analytics tracking, path: svelte/$effect\n- title: $props, use_cases: always, any svelte project, passing data to components, component communication, reusable components, component props, path: svelte/$props\n- title: $bindable, use_cases: forms, user input, two-way data binding, custom input components, parent-child communication, reusable form fields, path: svelte/$bindable\n- title: $inspect, use_cases: debugging, development, tracking state changes, reactive state monitoring, troubleshooting reactivity issues, path: svelte/$inspect\n- title: $host, use_cases: custom elements, web components, dispatching custom events, component library, framework-agnostic components, path: svelte/$host\n- title: Basic markup, use_cases: always, any svelte project, basic markup, html templating, component structure, attributes, events, props, text rendering, path: svelte/basic-markup\n- title: {#if ...}, use_cases: always, conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation, path: svelte/if\n- title: {#each ...}, use_cases: always, lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds, path: svelte/each\n- title: {#key ...}, use_cases: animations, transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state, path: svelte/key\n- title: {#await ...}, use_cases: async data fetching, api calls, loading states, promises, error handling, lazy loading components, dynamic imports, path: svelte/await\n- title: {#snippet ...}, use_cases: reusable markup, component composition, passing content to components, table rows, list items, conditional rendering, reducing duplication, path: svelte/snippet\n- title: {@render ...}, use_cases: reusable ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse, path: svelte/@render\n- title: {@html ...}, use_cases: rendering html strings, cms content, rich text editors, markdown to html, blog posts, wysiwyg output, sanitized html injection, dynamic html content, path: svelte/@html\n- title: {@attach ...}, use_cases: tooltips, popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components, path: svelte/@attach\n- title: {@const ...}, use_cases: computed values in loops, derived calculations in blocks, local variables in each iterations, complex list rendering, path: svelte/@const\n- title: {@debug ...}, use_cases: debugging, development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection, path: svelte/@debug\n- title: bind:, use_cases: forms, user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, dimension tracking, path: svelte/bind\n- title: use:, use_cases: custom directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks, path: svelte/use\n- title: transition:, use_cases: animations, interactive ui, modals, dropdowns, notifications, conditional content, show/hide elements, smooth state changes, path: svelte/transition\n- title: in: and out:, use_cases: animation, transitions, interactive ui, conditional rendering, independent enter/exit effects, modals, tooltips, notifications, path: svelte/in-and-out\n- title: animate:, use_cases: sortable lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering, path: svelte/animate\n- title: style:, use_cases: dynamic styling, conditional styles, theming, dark mode, responsive design, interactive ui, component styling, path: svelte/style\n- title: class, use_cases: always, conditional styling, dynamic classes, tailwind css, component styling, reusable components, responsive design, path: svelte/class\n- title: await, use_cases: async data fetching, loading states, server-side rendering, awaiting promises in components, async validation, concurrent data loading, path: svelte/await-expressions\n- title: Scoped styles, use_cases: always, styling components, scoped css, component-specific styles, preventing style conflicts, animations, keyframes, path: svelte/scoped-styles\n- title: Global styles, use_cases: global styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles, path: svelte/global-styles\n- title: Custom properties, use_cases: theming, custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization, path: svelte/custom-properties\n- title: Nested <style> elements, use_cases: component styling, scoped styles, dynamic styles, conditional styling, nested style tags, custom styling logic, path: svelte/nested-style-elements\n- title: <svelte:boundary>, use_cases: error handling, async data loading, loading states, error recovery, flaky components, error reporting, resilient ui, path: svelte/svelte-boundary\n- title: <svelte:window>, use_cases: keyboard shortcuts, scroll tracking, window resize handling, responsive layouts, online/offline detection, viewport dimensions, global event listeners, path: svelte/svelte-window\n- title: <svelte:document>, use_cases: document events, visibility tracking, fullscreen detection, pointer lock, focus management, document-level interactions, path: svelte/svelte-document\n- title: <svelte:body>, use_cases: mouse tracking, hover effects, cursor interactions, global body events, drag and drop, custom cursors, interactive backgrounds, body-level actions, path: svelte/svelte-body\n- title: <svelte:head>, use_cases: seo optimization, page titles, meta tags, social media sharing, dynamic head content, multi-page apps, blog posts, product pages, path: svelte/svelte-head\n- title: <svelte:element>, use_cases: dynamic content, cms integration, user-generated content, configurable ui, runtime element selection, flexible components, path: svelte/svelte-element\n- title: <svelte:options>, use_cases: migration, custom elements, web components, legacy mode compatibility, runes mode setup, svg components, mathml components, css injection control, path: svelte/svelte-options\n- title: Stores, use_cases: shared state, cross-component data, reactive values, async data streams, manual control over updates, rxjs integration, extracting logic, path: svelte/stores\n- title: Context, use_cases: shared state, avoiding prop drilling, component communication, theme providers, user context, authentication state, configuration sharing, deeply nested components, path: svelte/context\n- title: Lifecycle hooks, use_cases: component initialization, cleanup tasks, timers, subscriptions, dom measurements, chat windows, autoscroll features, migration from svelte 4, path: svelte/lifecycle-hooks\n- title: Imperative component API, use_cases: project setup, client-side rendering, server-side rendering, ssr, hydration, testing, programmatic component creation, tooltips, dynamic mounting, path: svelte/imperative-component-api\n- title: Testing, use_cases: testing, quality assurance, unit tests, integration tests, component tests, e2e tests, vitest setup, playwright setup, test automation, path: svelte/testing\n- title: TypeScript, use_cases: typescript setup, type safety, component props typing, generic components, wrapper components, dom type augmentation, project configuration, path: svelte/typescript\n- title: Custom elements, use_cases: web components, custom elements, component library, design system, framework-agnostic components, embedding svelte in non-svelte apps, shadow dom, path: svelte/custom-elements\n- title: Svelte 4 migration guide, use_cases: upgrading svelte 3 to 4, version migration, updating dependencies, breaking changes, legacy project maintenance, path: svelte/v4-migration-guide\n- title: Svelte 5 migration guide, use_cases: migrating from svelte 4 to 5, upgrading projects, learning svelte 5 syntax changes, runes migration, event handler updates, path: svelte/v5-migration-guide\n- title: Frequently asked questions, use_cases: getting started, learning svelte, beginner setup, project initialization, vs code setup, formatting, testing, routing, mobile apps, troubleshooting, community support, path: svelte/faq\n- title: svelte, use_cases: migration from svelte 4 to 5, upgrading legacy code, component lifecycle hooks, context api, mounting components, event dispatchers, typescript component types, path: svelte/svelte\n- title: svelte/action, use_cases: typescript types, actions, use directive, dom manipulation, element lifecycle, custom behaviors, third-party library integration, path: svelte/svelte-action\n- title: svelte/animate, use_cases: animated lists, sortable items, drag and drop, reordering elements, todo lists, kanban boards, playlist management, smooth position transitions, path: svelte/svelte-animate\n- title: svelte/attachments, use_cases: library development, component libraries, programmatic element manipulation, migrating from actions to attachments, spreading props onto elements, path: svelte/svelte-attachments\n- title: svelte/compiler, use_cases: build tools, custom compilers, ast manipulation, preprocessors, code transformation, migration scripts, syntax analysis, bundler plugins, dev tools, path: svelte/svelte-compiler\n- title: svelte/easing, use_cases: animations, transitions, custom easing, smooth motion, interactive ui, modals, dropdowns, carousels, page transitions, scroll effects, path: svelte/svelte-easing\n- title: svelte/events, use_cases: window events, document events, global event listeners, event delegation, programmatic event handling, cleanup functions, media queries, path: svelte/svelte-events\n- title: svelte/legacy, use_cases: migration from svelte 4 to svelte 5, upgrading legacy code, event modifiers, class components, imperative component instantiation, path: svelte/svelte-legacy\n- title: svelte/motion, use_cases: animation, smooth transitions, interactive ui, sliders, counters, physics-based motion, drag gestures, accessibility, reduced motion, path: svelte/svelte-motion\n- title: svelte/reactivity/window, use_cases: responsive design, viewport tracking, scroll effects, window resize handling, online/offline detection, zoom level tracking, path: svelte/svelte-reactivity-window\n- title: svelte/reactivity, use_cases: reactive data structures, state management with maps/sets, game boards, selection tracking, url manipulation, query params, real-time clocks, media queries, responsive design, path: svelte/svelte-reactivity\n- title: svelte/server, use_cases: server-side rendering, ssr, static site generation, seo optimization, initial page load, pre-rendering, node.js server, custom server setup, path: svelte/svelte-server\n- title: svelte/store, use_cases: state management, shared data, reactive stores, cross-component communication, global state, computed values, data synchronization, legacy svelte projects, path: svelte/svelte-store\n- title: svelte/transition, use_cases: animations, transitions, interactive ui, modals, dropdowns, tooltips, notifications, svg animations, list animations, page transitions, path: svelte/svelte-transition\n- title: Compiler errors, use_cases: animation, transitions, keyed each blocks, list animations, path: svelte/compiler-errors\n- title: Compiler warnings, use_cases: accessibility, a11y compliance, wcag standards, screen readers, keyboard navigation, aria attributes, semantic html, interactive elements, path: svelte/compiler-warnings\n- title: Runtime errors, use_cases: debugging errors, error handling, troubleshooting runtime issues, migration to svelte 5, component binding, effects and reactivity, path: svelte/runtime-errors\n- title: Runtime warnings, use_cases: debugging state proxies, console logging reactive values, inspecting state changes, development troubleshooting, path: svelte/runtime-warnings\n- title: Overview, use_cases: migrating from svelte 3/4 to svelte 5, maintaining legacy components, understanding deprecated features, gradual upgrade process, path: svelte/legacy-overview\n- title: Reactive let/var declarations, use_cases: migration, legacy svelte projects, upgrading from svelte 4, understanding old reactivity, maintaining existing code, learning runes differences, path: svelte/legacy-let\n- title: Reactive $: statements, use_cases: legacy mode, migration from svelte 4, reactive statements, computed values, derived state, side effects, path: svelte/legacy-reactive-assignments\n- title: export let, use_cases: legacy mode, migration from svelte 4, maintaining older projects, component props without runes, exporting component methods, renaming reserved word props, path: svelte/legacy-export-let\n- title: $$props and $$restProps, use_cases: legacy mode migration, component wrappers, prop forwarding, button components, reusable ui components, spreading props to child elements, path: svelte/legacy-$$props-and-$$restProps\n- title: on:, use_cases: legacy mode, event handling, button clicks, forms, user interactions, component communication, event forwarding, event modifiers, path: svelte/legacy-on\n- title: <slot>, use_cases: legacy mode, migrating from svelte 4, component composition, reusable components, passing content to components, modals, layouts, wrappers, path: svelte/legacy-slots\n- title: $$slots, use_cases: legacy mode, conditional slot rendering, optional content sections, checking if slots provided, migrating from legacy to runes, path: svelte/legacy-$$slots\n- title: <svelte:fragment>, use_cases: named slots, component composition, layout systems, avoiding wrapper divs, legacy svelte projects, slot content organization, path: svelte/legacy-svelte-fragment\n- title: <svelte:component>, use_cases: dynamic components, component switching, conditional rendering, legacy mode migration, tabbed interfaces, multi-step forms, path: svelte/legacy-svelte-component\n- title: <svelte:self>, use_cases: recursive components, tree structures, nested menus, file explorers, comment threads, hierarchical data, path: svelte/legacy-svelte-self\n- title: Imperative component API, use_cases: migration from svelte 3/4 to 5, legacy component api, maintaining old projects, understanding deprecated patterns, path: svelte/legacy-component-api\n\n</available-docs>\n\nEvery time you write a Svelte component or a Svelte module you MUST invoke the `svelte-autofixer` tool providing the code. The tool will return a list of issues or suggestions. If there are any issues or suggestions you MUST fix them and call the tool again with the updated code. You MUST keep doing this until the tool returns no issues or suggestions. Only then you can return the code to the user.\n\nThis is the task you will work on:\n\n<task>\n[YOUR TASK HERE]\n</task>\n\nIf you are not writing the code into a file, once you have the final version of the code ask the user if it wants to generate a playground link to quickly check the code in it and if it answer yes call the `playground-link` tool and return the url to the user nicely formatted. The playground link MUST be generated only once you have the final version of the code and you are ready to share it, it MUST include an entry point file called `App.svelte` where the main component should live. If you have multiple files to include in the playground link you can include them all at the root.\n```\n\n</details>",
+		"svelte/overview": "Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\tfunction greet() {\n\t\talert('Welcome to Svelte!');\n\t}\n</script>\n\n<button onclick={greet}>click me</button>\n\n<style>\n\tbutton {\n\t\tfont-size: 2em;\n\t}\n</style>\n```\n\n...into lean, tightly optimized JavaScript.\n\nYou can use it to build anything on the web, from standalone components to ambitious full stack apps (using Svelte's companion application framework, [SvelteKit](../kit)) and everything in between.\n\nThese pages serve as reference documentation. If you're new to Svelte, we recommend starting with the [interactive tutorial](/tutorial) and coming back here when you have questions.\n\nYou can also try Svelte online in the [playground](/playground) or, if you need a more fully-featured environment, on [StackBlitz](https://sveltekit.new).",
+		"svelte/getting-started": "We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:\n\n```sh\nnpx sv create myapp\ncd myapp\nnpm install\nnpm run dev\n```\n\nDon't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.\n\n## Alternatives to SvelteKit\n\nYou can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](/packages#routing) as well.\n\n>[!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).\n\nThere are also [plugins for other bundlers](/packages#bundler-plugins), but we recommend Vite.\n\n## Editor tooling\n\nThe Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.\n\nYou can also check your code from the command line using [sv check](https://github.com/sveltejs/cli).\n\n## Getting help\n\nDon't be shy about asking for help in the [Discord chatroom](/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).",
+		"svelte/svelte-files": "Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.\n\nAll three sections — script, styles and markup — are optional.\n\n<!-- prettier-ignore -->\n```svelte\n/// file: MyComponent.svelte\n<script module>\n\t// module-level logic goes here\n\t// (you will rarely use this)\n</script>\n\n<script>\n\t// instance-level logic goes here\n</script>\n\n<!-- markup (zero or more items) goes here -->\n\n<style>\n\t/* styles go here */\n</style>\n```\n\n## `<script>`\n\nA `<script>` block contains JavaScript (or TypeScript, when adding the `lang=\"ts\"` attribute) that runs when a component instance is created. Variables declared (or imported) at the top level can be referenced in the component's markup.\n\nIn addition to normal JavaScript, you can use _runes_ to declare [component props]($props) and add reactivity to your component. Runes are covered in the next section.\n\n<!-- TODO describe behaviour of `export` -->\n\n## `<script module>`\n\nA `<script>` tag with a `module` attribute runs once when the module first evaluates, rather than for each component instance. Variables declared in this block can be referenced elsewhere in the component, but not vice versa.\n\n```svelte\n<script module>\n\tlet total = 0;\n</script>\n\n<script>\n\ttotal += 1;\n\tconsole.log(`instantiated ${total} times`);\n</script>\n```\n\nYou can `export` bindings from this block, and they will become exports of the compiled module. You cannot `export default`, since the default export is the component itself.\n\n> [!NOTE] If you are using TypeScript and import such exports from a `module` block into a `.ts` file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, but in other cases you might need to setup our [TypeScript editor plugin](https://www.npmjs.com/package/typescript-svelte-plugin).\n\n> [!LEGACY]\n> In Svelte 4, this script tag was created using `<script context=\"module\">`\n\n## `<style>`\n\nCSS inside a `<style>` block will be scoped to that component.\n\n```svelte\n<style>\n\tp {\n\t\t/* this will only affect <p> elements in this component */\n\t\tcolor: burlywood;\n\t}\n</style>\n```\n\nFor more information, head to the section on [styling](scoped-styles).",
+		"svelte/svelte-js-files": "Besides `.svelte` files, Svelte also operates on `.svelte.js` and `.svelte.ts` files.\n\nThese behave like any other `.js` or `.ts` module, except that you can use runes. This is useful for creating reusable reactive logic, or sharing reactive state across your app (though note that you [cannot export reassigned state]($state#Passing-state-across-modules)).\n\n> [!LEGACY]\n> This is a concept that didn't exist prior to Svelte 5",
+		"svelte/what-are-runes": "> [!NOTE] **rune** /ruːn/ _noun_\n>\n> A letter or mark used as a mystical or magic symbol.\n\nRunes are symbols that you use in `.svelte` and `.svelte.js`/`.svelte.ts` files to control the Svelte compiler. If you think of Svelte as a language, runes are part of the syntax — they are _keywords_.\n\nRunes have a `$` prefix and look like functions:\n\n```js\nlet message = $state('hello');\n```\n\nThey differ from normal JavaScript functions in important ways, however:\n\n- You don't need to import them — they are part of the language\n- They're not values — you can't assign them to a variable or pass them as arguments to a function\n- Just like JavaScript keywords, they are only valid in certain positions (the compiler will help you if you put them in the wrong place)\n\n> [!LEGACY]\n> Runes didn't exist prior to Svelte 5.",
+		"svelte/$state": "The `$state` rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes.\n\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n\n<button onclick={() => count++}>\n\tclicks: {count}\n</button>\n```\n\nUnlike other frameworks you may have encountered, there is no API for interacting with state — `count` is just a number, rather than an object or a function, and you can update it like you would update any other variable.\n\n### Deep state\n\nIf `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.\n\nState is proxified recursively until Svelte finds something other than an array or simple object (like a class or an object created with `Object.create`). In a case like this...\n\n```js\nlet todos = $state([\n\t{\n\t\tdone: false,\n\t\ttext: 'add more todos'\n\t}\n]);\n```\n\n...modifying an individual todo's property will trigger updates to anything in your UI that depends on that specific property:\n\n```js\nlet todos = [{ done: false, text: 'add more todos' }];\n// ---cut---\ntodos[0].done = !todos[0].done;\n```\n\nIf you push a new object to the array, it will also be proxified:\n\n```js\nlet todos = [{ done: false, text: 'add more todos' }];\n// ---cut---\ntodos.push({\n\tdone: false,\n\ttext: 'eat lunch'\n});\n```\n\n> [!NOTE] When you update properties of proxies, the original object is _not_ mutated. If you need to use your own proxy handlers in a state proxy, [you should wrap the object _after_ wrapping it in `$state`](https://svelte.dev/playground/hello-world?version=latest#H4sIAAAAAAAACpWR3WoDIRCFX2UqhWyIJL3erAulL9C7XnQLMe5ksbUqOpsfln33YuyGFNJC8UKdc2bOhw7Myk9kJXsJ0nttO9jcR5KEG9AWJDwHdzwxznbaYGTl68Do5JM_FRifuh-9X8Y9Gkq1rYx4q66cJbQUWcmqqIL2VDe2IYMEbvuOikBADi-GJDSkXG-phId0G-frye2DO2psQYDFQ0Ys8gQO350dUkEydEg82T0GOs0nsSG9g2IqgxACZueo2ZUlpdvoDC6N64qsg1QKY8T2bpZp8gpIfbCQ85Zn50Ud82HkeY83uDjspenxv3jXcSDyjPWf9L1vJf0GH666J-jLu1ery4dV257IWXBWGa0-xFDMQdTTn2ScxWKsn86ROsLwQxqrVR5QM84Ij8TKFD2-cUZSm4O2LSt30kQcvwCgCmfZnAIAAA==).\n\nNote that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:\n\n```js\nlet todos = [{ done: false, text: 'add more todos' }];\n// ---cut---\nlet { done, text } = todos[0];\n\n// this will not affect the value of `done`\ntodos[0].done = !todos[0].done;\n```\n\n### Classes\n\nClass instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:\n\n```js\n// @errors: 7006 2554\nclass Todo {\n\tdone = $state(false);\n\n\tconstructor(text) {\n\t\tthis.text = $state(text);\n\t}\n\n\treset() {\n\t\tthis.text = '';\n\t\tthis.done = false;\n\t}\n}\n```\n\n> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. This means the properties are not enumerable.\n\nWhen calling methods in JavaScript, the value of [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) matters. This won't work, because `this` inside the `reset` method will be the `<button>` rather than the `Todo`:\n\n```svelte\n<button onclick={todo.reset}>\n\treset\n</button>\n```\n\nYou can either use an inline function...\n\n```svelte\n<button onclick=+++{() => todo.reset()}>+++\n\treset\n</button>\n```\n\n...or use an arrow function in the class definition:\n\n```js\n// @errors: 7006 2554\nclass Todo {\n\tdone = $state(false);\n\n\tconstructor(text) {\n\t\tthis.text = $state(text);\n\t}\n\n\t+++reset = () => {+++\n\t\tthis.text = '';\n\t\tthis.done = false;\n\t}\n}\n```\n\n### Built-in classes\n\nSvelte provides reactive implementations of built-in classes like `Set`, `Map`, `Date` and `URL` that can be imported from [`svelte/reactivity`](svelte-reactivity).\n\n## `$state.raw`\n\nIn cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.\n\nState declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:\n\n```js\nlet person = $state.raw({\n\tname: 'Heraclitus',\n\tage: 49\n});\n\n// this will have no effect\nperson.age += 1;\n\n// this will work, because we're creating a new person\nperson = {\n\tname: 'Heraclitus',\n\tage: 50\n};\n```\n\nThis can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).\n\nAs with `$state`, you can declare class fields using `$state.raw`.\n\n## `$state.snapshot`\n\nTo take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:\n\n```svelte\n<script>\n\tlet counter = $state({ count: 0 });\n\n\tfunction onclick() {\n\t\t// Will log `{ count: ... }` rather than `Proxy { ... }`\n\t\tconsole.log($state.snapshot(counter));\n\t}\n</script>\n```\n\nThis is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.\n\n## Passing state into functions\n\nJavaScript is a _pass-by-value_ language — when you call a function, the arguments are the _values_ rather than the _variables_. In other words:\n\n```js\n/// file: index.js\n// @filename: index.js\n// ---cut---\n/**\n * @param {number} a\n * @param {number} b\n */\nfunction add(a, b) {\n\treturn a + b;\n}\n\nlet a = 1;\nlet b = 2;\nlet total = add(a, b);\nconsole.log(total); // 3\n\na = 3;\nb = 4;\nconsole.log(total); // still 3!\n```\n\nIf `add` wanted to have access to the _current_ values of `a` and `b`, and to return the current `total` value, you would need to use functions instead:\n\n```js\n/// file: index.js\n// @filename: index.js\n// ---cut---\n/**\n * @param {() => number} getA\n * @param {() => number} getB\n */\nfunction add(+++getA, getB+++) {\n\treturn +++() => getA() + getB()+++;\n}\n\nlet a = 1;\nlet b = 2;\nlet total = add+++(() => a, () => b)+++;\nconsole.log(+++total()+++); // 3\n\na = 3;\nb = 4;\nconsole.log(+++total()+++); // 7\n```\n\nState in Svelte is no different — when you reference something declared with the `$state` rune...\n\n```js\nlet a = +++$state(1)+++;\nlet b = +++$state(2)+++;\n```\n\n...you're accessing its _current value_.\n\nNote that 'functions' is broad — it encompasses properties of proxies and [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)/[`set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) properties...\n\n```js\n/// file: index.js\n// @filename: index.js\n// ---cut---\n/**\n * @param {{ a: number, b: number }} input\n */\nfunction add(input) {\n\treturn {\n\t\tget value() {\n\t\t\treturn input.a + input.b;\n\t\t}\n\t};\n}\n\nlet input = $state({ a: 1, b: 2 });\nlet total = add(input);\nconsole.log(total.value); // 3\n\ninput.a = 3;\ninput.b = 4;\nconsole.log(total.value); // 7\n```\n\n...though if you find yourself writing code like that, consider using [classes](#Classes) instead.\n\n## Passing state across modules\n\nYou can declare state in `.svelte.js` and `.svelte.ts` files, but you can only _export_ that state if it's not directly reassigned. In other words you can't do this:\n\n```js\n/// file: state.svelte.js\nexport let count = $state(0);\n\nexport function increment() {\n\tcount += 1;\n}\n```\n\nThat's because every reference to `count` is transformed by the Svelte compiler — the code above is roughly equivalent to this:\n\n```js\n/// file: state.svelte.js (compiler output)\n// @filename: index.ts\ninterface Signal<T> {\n\tvalue: T;\n}\n\ninterface Svelte {\n\tstate<T>(value?: T): Signal<T>;\n\tget<T>(source: Signal<T>): T;\n\tset<T>(source: Signal<T>, value: T): void;\n}\ndeclare const $: Svelte;\n// ---cut---\nexport let count = $.state(0);\n\nexport function increment() {\n\t$.set(count, $.get(count) + 1);\n}\n```\n\n> [!NOTE] You can see the code Svelte generates by clicking the 'JS Output' tab in the [playground](/playground).\n\nSince the compiler only operates on one file at a time, if another file imports `count` Svelte doesn't know that it needs to wrap each reference in `$.get` and `$.set`:\n\n```js\n// @filename: state.svelte.js\nexport let count = 0;\n\n// @filename: index.js\n// ---cut---\nimport { count } from './state.svelte.js';\n\nconsole.log(typeof count); // 'object', not 'number'\n```\n\nThis leaves you with two options for sharing state between modules — either don't reassign it...\n\n```js\n// This is allowed — since we're updating\n// `counter.count` rather than `counter`,\n// Svelte doesn't wrap it in `$.state`\nexport const counter = $state({\n\tcount: 0\n});\n\nexport function increment() {\n\tcounter.count += 1;\n}\n```\n\n...or don't directly export it:\n\n```js\nlet count = $state(0);\n\nexport function getCount() {\n\treturn count;\n}\n\nexport function increment() {\n\tcount += 1;\n}\n```",
+		"svelte/$derived": "Derived state is declared with the `$derived` rune:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $derived(count * 2);\n</script>\n\n<button onclick={() => count++}>\n\t{doubled}\n</button>\n\n<p>{count} doubled is {doubled}</p>\n```\n\nThe expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.\n\nAs with `$state`, you can mark class fields as `$derived`.\n\n> [!NOTE] Code in Svelte components is only executed once at creation. Without the `$derived` rune, `doubled` would maintain its original value even when `count` changes.\n\n## `$derived.by`\n\nSometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.\n\n```svelte\n<script>\n\tlet numbers = $state([1, 2, 3]);\n\tlet total = $derived.by(() => {\n\t\tlet total = 0;\n\t\tfor (const n of numbers) {\n\t\t\ttotal += n;\n\t\t}\n\t\treturn total;\n\t});\n</script>\n\n<button onclick={() => numbers.push(numbers.length + 1)}>\n\t{numbers.join(' + ')} = {total}\n</button>\n```\n\nIn essence, `$derived(expression)` is equivalent to `$derived.by(() => expression)`.\n\n## Understanding dependencies\n\nAnything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.\n\nTo exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).\n\n## Overriding derived values\n\nDerived expressions are recalculated when their dependencies change, but you can temporarily override their values by reassigning them (unless they are declared with `const`). This can be useful for things like _optimistic UI_, where a value is derived from the 'source of truth' (such as data from your server) but you'd like to show immediate feedback to the user:\n\n```svelte\n<script>\n\tlet { post, like } = $props();\n\n\tlet likes = $derived(post.likes);\n\n\tasync function onclick() {\n\t\t// increment the `likes` count immediately...\n\t\tlikes += 1;\n\n\t\t// and tell the server, which will eventually update `post`\n\t\ttry {\n\t\t\tawait like();\n\t\t} catch {\n\t\t\t// failed! roll back the change\n\t\t\tlikes -= 1;\n\t\t}\n\t}\n</script>\n\n<button {onclick}>🧡 {likes}</button>\n```\n\n> [!NOTE] Prior to Svelte 5.25, deriveds were read-only.\n\n## Deriveds and reactivity\n\nUnlike `$state`, which converts objects and arrays to [deeply reactive proxies]($state#Deep-state), `$derived` values are left as-is. For example, [in a case like this](/playground/untitled#H4sIAAAAAAAAE4VU22rjMBD9lUHd3aaQi9PdstS1A3t5XvpQ2Ic4D7I1iUUV2UjjNMX431eS7TRdSosxgjMzZ45mjt0yzffIYibvy0ojFJWqDKCQVBk2ZVup0LJ43TJ6rn2aBxw-FP2o67k9oCKP5dziW3hRaUJNjoYltjCyplWmM1JIIAn3FlL4ZIkTTtYez6jtj4w8WwyXv9GiIXiQxLVs9pfTMR7EuoSLIuLFbX7Z4930bZo_nBrD1bs834tlfvsBz9_SyX6PZXu9XaL4gOWn4sXjeyzftv4ZWfyxubpzxzg6LfD4MrooxELEosKCUPigQCMPKCZh0OtQE1iSxcsmdHuBvCiHZXALLXiN08EL3RRkaJ_kDVGle0HcSD5TPEeVtj67O4Nrg9aiSNtBY5oODJkrL5QsHtN2cgXp6nSJMWzpWWGasdlsGEMbzi5jPr5KFr0Ep7pdeM2-TCelCddIhDxAobi1jqF3cMaC1RKp64bAW9iFAmXGIHfd4wNXDabtOLN53w8W53VvJoZLh7xk4Rr3CoL-UNoLhWHrT1JQGcM17u96oES5K-kc2XOzkzqGCKL5De79OUTyyrg1zgwXsrEx3ESfx4Bz0M5UjVMHB24mw9SuXtXFoN13fYKOM1tyUT3FbvbWmSWCZX2Er-41u5xPoml45svRahl9Wb9aasbINJixDZwcPTbyTLZSUsAvrg_cPuCR7s782_WU8343Y72Qtlb8OYatwuOQvuN13M_hJKNfxann1v1U_B1KZ_D_mzhzhz24fw85CSz2irtN9w9HshBK7AQAAA==)...\n\n```js\nlet items = $state([...]);\n\nlet index = $state(0);\nlet selected = $derived(items[index]);\n```\n\n...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.\n\n## Destructuring\n\nIf you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...\n\n```js\nfunction stuff() { return { a: 1, b: 2, c: 3 } }\n// ---cut---\nlet { a, b, c } = $derived(stuff());\n```\n\n...is roughly equivalent to this:\n\n```js\nfunction stuff() { return { a: 1, b: 2, c: 3 } }\n// ---cut---\nlet _stuff = $derived(stuff());\nlet a = $derived(_stuff.a);\nlet b = $derived(_stuff.b);\nlet c = $derived(_stuff.c);\n```\n\n## Update propagation\n\nSvelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').\n\nIf the new value of a derived is referentially identical to its previous value, downstream updates will be skipped. In other words, Svelte will only update the text inside the button when `large` changes, not when `count` changes, even though `large` depends on `count`:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet large = $derived(count > 10);\n</script>\n\n<button onclick={() => count++}>\n\t{large}\n</button>\n```",
+		"svelte/$effect": "Effects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `<canvas>` elements, or making network requests. They only run in the browser, not during server-side rendering.\n\nGenerally speaking, you should _not_ update state inside effects, as it will make code more convoluted and will often lead to never-ending update cycles. If you find yourself doing so, see [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.\n\nYou can create an effect with the `$effect` rune ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):\n\n```svelte\n<script>\n\tlet size = $state(50);\n\tlet color = $state('#ff3e00');\n\n\tlet canvas;\n\n\t$effect(() => {\n\t\tconst context = canvas.getContext('2d');\n\t\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\n\t\t// this will re-run whenever `color` or `size` change\n\t\tcontext.fillStyle = color;\n\t\tcontext.fillRect(0, 0, size, size);\n\t});\n</script>\n\n<canvas bind:this={canvas} width=\"100\" height=\"100\"></canvas>\n```\n\nWhen Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.\n\n> [!NOTE] If you're having difficulty understanding why your `$effect` is rerunning or is not running see [understanding dependencies](#Understanding-dependencies). Effects are triggered differently than the `$:` blocks you may be used to if coming from Svelte 4.\n\n### Understanding lifecycle\n\nYour effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes. Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.\n\nYou can use `$effect` anywhere, not just at the top level of a component, as long as it is called while a parent effect is running.\n\n> [!NOTE] Svelte uses effects internally to represent logic and expressions in your template — this is how `<h1>hello {name}!</h1>` updates when `name` changes.\n\nAn effect can return a _teardown function_ which will run immediately before the effect re-runs ([demo](/playground/untitled#H4sIAAAAAAAAE42SQVODMBCF_8pOxkPRKq3HCsx49K4n64xpskjGkDDJ0tph-O8uINo6HjxB3u7HvrehE07WKDbiyZEhi1osRWksRrF57gQdm6E2CKx_dd43zU3co6VB28mIf-nKO0JH_BmRRRVMQ8XWbXkAgfKtI8jhIpIkXKySu7lSG2tNRGZ1_GlYr1ZTD3ddYFmiosUigbyAbpC2lKbwWJkIB8ZhhxBQBWRSw6FCh3sM8GrYTthL-wqqku4N44TyqEgwF3lmRHr4Op0PGXoH31c5rO8mqV-eOZ49bikgtcHBL55tmhIkEMqg_cFB2TpFxjtg703we6NRL8HQFCS07oSUCZi6Rm04lz1yytIHBKoQpo1w6Gsm4gmyS8b8Y5PydeMdX8gwS2Ok4I-ov5NZtvQde95GMsccn_1wzNKfu3RZtS66cSl9lvL7qO1aIk7knbJGvefdtIOzi73M4bYvovUHDFk6AcX_0HRESxnpBOW_jfCDxIZCi_1L_wm4xGQ60wIAAA==)).\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet milliseconds = $state(1000);\n\n\t$effect(() => {\n\t\t// This will be recreated whenever `milliseconds` changes\n\t\tconst interval = setInterval(() => {\n\t\t\tcount += 1;\n\t\t}, milliseconds);\n\n\t\treturn () => {\n\t\t\t// if a teardown function is provided, it will run\n\t\t\t// a) immediately before the effect re-runs\n\t\t\t// b) when the component is destroyed\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<h1>{count}</h1>\n\n<button onclick={() => (milliseconds *= 2)}>slower</button>\n<button onclick={() => (milliseconds /= 2)}>faster</button>\n```\n\nTeardown functions also run when the effect is destroyed, which happens when its parent is destroyed (for example, a component is unmounted) or the parent effect re-runs.\n\n### Understanding dependencies\n\n`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body (including indirectly, via function calls) and registers them as dependencies. When those dependencies change, the `$effect` schedules a re-run.\n\nIf `$state` and `$derived` are used directly inside the `$effect` (for example, during creation of a [reactive class](https://svelte.dev/docs/svelte/$state#Classes)), those values will _not_ be treated as dependencies.\n\nValues that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):\n\n```ts\n// @filename: index.ts\ndeclare let canvas: {\n\twidth: number;\n\theight: number;\n\tgetContext(type: '2d', options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n};\ndeclare let color: string;\ndeclare let size: number;\n\n// ---cut---\n$effect(() => {\n\tconst context = canvas.getContext('2d');\n\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\n\t// this will re-run whenever `color` changes...\n\tcontext.fillStyle = color;\n\n\tsetTimeout(() => {\n\t\t// ...but not when `size` changes\n\t\tcontext.fillRect(0, 0, size, size);\n\t}, 0);\n});\n```\n\nAn effect only reruns when the object it reads changes, not when a property inside it changes. (If you want to observe changes _inside_ an object at dev time, you can use [`$inspect`]($inspect).)\n\n```svelte\n<script>\n\tlet state = $state({ value: 0 });\n\tlet derived = $derived({ value: state.value * 2 });\n\n\t// this will run once, because `state` is never reassigned (only mutated)\n\t$effect(() => {\n\t\tstate;\n\t});\n\n\t// this will run whenever `state.value` changes...\n\t$effect(() => {\n\t\tstate.value;\n\t});\n\n\t// ...and so will this, because `derived` is a new object each time\n\t$effect(() => {\n\t\tderived;\n\t});\n</script>\n\n<button onclick={() => (state.value += 1)}>\n\t{state.value}\n</button>\n\n<p>{state.value} doubled is {derived.value}</p>\n```\n\nAn effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code.\n\nFor instance, if `condition` is `true` in the code snippet below, the code inside the `if` block will run and `color` will be evaluated. This means that changes to either `condition` or `color` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE21RQW6DMBD8ytaNBJHaJFLViwNIVZ8RcnBgXVk1xsILTYT4e20TQg89IOPZ2fHM7siMaJBx9tmaWpFqjQNlAKXEihx7YVJpdIyfRkY3G4gB8Pi97cPanRtQU8AuwuF_eNUaQuPlOMtc1SlLRWlKUo1tOwJflUikQHZtA0klzCDc64Imx0ANn8bInV1CDhtHgjClrsftcSXotluLybOUb3g4JJHhOZs5WZpuIS9gjNqkJKQP5e2ClrR4SMdZ13E4xZ8zTPOTJU2A2uE_PQ9COCI926_hTVarIU4hu_REPlBrKq2q73ycrf1N-vS4TMUsulaVg3EtR8H9rFgsg8uUsT1B2F9eshigZHBRpuaD0D3mY8Qm2BfB5N2YyRzdNEYVDy0Ja-WsFjcOUuP1HvFLWA6H3XuHTUSmmDV2--0TXonxsKbp7G9C6R__NONS-MFNvxj_d6mBAgAA).\n\nConversely, if `condition` is `false`, `color` will not be evaluated, and the effect will _only_ re-run again when `condition` changes.\n\n```ts\n// @filename: ambient.d.ts\ndeclare module 'canvas-confetti' {\n\tinterface ConfettiOptions {\n\t\tcolors: string[];\n\t}\n\n\tfunction confetti(opts?: ConfettiOptions): void;\n\texport default confetti;\n}\n\n// @filename: index.js\n// ---cut---\nimport confetti from 'canvas-confetti';\n\nlet condition = $state(true);\nlet color = $state('#ff3e00');\n\n$effect(() => {\n\tif (condition) {\n\t\tconfetti({ colors: [color] });\n\t} else {\n\t\tconfetti();\n\t}\n});\n```\n\n## `$effect.pre`\n\nIn rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:\n\n```svelte\n<script>\n\timport { tick } from 'svelte';\n\n\tlet div = $state();\n\tlet messages = $state([]);\n\n\t// ...\n\n\t$effect.pre(() => {\n\t\tif (!div) return; // not yet mounted\n\n\t\t// reference `messages` array length so that this code re-runs whenever it changes\n\t\tmessages.length;\n\n\t\t// autoscroll when new messages are added\n\t\tif (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {\n\t\t\ttick().then(() => {\n\t\t\t\tdiv.scrollTo(0, div.scrollHeight);\n\t\t\t});\n\t\t}\n\t});\n</script>\n\n<div bind:this={div}>\n\t{#each messages as message}\n\t\t<p>{message}</p>\n\t{/each}\n</div>\n```\n\nApart from the timing, `$effect.pre` works exactly like `$effect`.\n\n## `$effect.tracking`\n\nThe `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)):\n\n```svelte\n<script>\n\tconsole.log('in component setup:', $effect.tracking()); // false\n\n\t$effect(() => {\n\t\tconsole.log('in effect:', $effect.tracking()); // true\n\t});\n</script>\n\n<p>in template: {$effect.tracking()}</p> <!-- true -->\n```\n\nIt is used to implement abstractions like [`createSubscriber`](/docs/svelte/svelte-reactivity#createSubscriber), which will create listeners to update reactive values but _only_ if those values are being tracked (rather than, for example, read inside an event handler).\n\n## `$effect.pending`\n\nWhen using [`await`](await-expressions) in components, the `$effect.pending()` rune tells you how many promises are pending in the current [boundary](svelte-boundary), not including child boundaries ([demo](/playground/untitled#H4sIAAAAAAAAE3WRMU_DMBCF_8rJdHDUqilILGkaiY2RgY0yOPYZWbiOFV8IleX_jpMUEAIWS_7u-d27c2ROnJBV7B6t7WDsequAozKEqmAbpo3FwKqnyOjsJ90EMr-8uvN-G97Q0sRaEfAvLjtH6CjbsDrI3nhqju5IFgkEHGAVSBDy62L_SdtvejPTzEU4Owl6cJJM50AoxcUG2gLiVM31URgChyM89N3JBORcF3BoICA9mhN2A3G9gdvdrij2UJYgejLaSCMsKLTivNj0SEOf7WEN7ZwnHV1dfqd2dTsQ5QCdk9bI10PkcxexXqcmH3W51Jt_le2kbH8os9Y3UaTcNLYpDx-Xab6GTHXpZ128MhpWqDVK2np0yrgXXqQpaLa4APDLBkIF8bd2sYql0Sn_DeE7sYr6AdNzvgljR-MUq7SwAdMHeUtgHR4CAAA=)):\n\n```svelte\n<button onclick={() => a++}>a++</button>\n<button onclick={() => b++}>b++</button>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n\n{#if $effect.pending()}\n\t<p>pending promises: {$effect.pending()}</p>\n{/if}\n```\n\n## `$effect.root`\n\nThe `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.\n\n```js\nconst destroy = $effect.root(() => {\n\t$effect(() => {\n\t\t// setup\n\t});\n\n\treturn () => {\n\t\t// cleanup\n\t};\n});\n\n// later...\ndestroy();\n```\n\n## When not to use `$effect`\n\nIn general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $state();\n\n\t// don't do this!\n\t$effect(() => {\n\t\tdoubled = count * 2;\n\t});\n</script>\n```\n\n...do this:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $derived(count * 2);\n</script>\n```\n\n> [!NOTE] For things that are more complicated than a simple expression like `count * 2`, you can also use `$derived.by`.\n\nIf you're using an effect because you want to be able to reassign the derived value (to build an optimistic UI, for example) note that [deriveds can be directly overridden]($derived#Overriding-derived-values) as of Svelte 5.25.\n\nYou might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for \"money spent\" and \"money left\" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAAE5WRTWrDMBCFryKGLBJoY3fRjWIHeoiu6i6UZBwEY0VE49TB-O6VxrFTSih0qe_Ne_OjHpxpEDS8O7ZMeIAnqC1hAP3RA1990hKI_Fb55v06XJA4sZ0J-IjvT47RcYyBIuzP1vO2chVHHFjxiQ2pUr3k-SZRQlbBx_LIFoEN4zJfzQph_UMQr4hRXmBd456Xy5Uqt6pPKHmkfmzyPAZL2PCnbRpg8qWYu63I7lu4gswOSRYqrPNt3CgeqqzgbNwRK1A76w76YqjFspfcQTWmK3vJHlQm1puSTVSeqdOc_r9GaeCHfUSY26TXry6Br4RSK3C6yMEGT-aqVU3YbUZ2NF6rfP2KzXgbuYzY46czdgyazy0On_FlLH3F-UDXhgIO35UGlA1rAgAA)):\n\n```svelte\n<script>\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $state(total);\n\n\t$effect(() => {\n\t\tleft = total - spent;\n\t});\n\n\t$effect(() => {\n\t\tspent = total - left;\n\t});\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" bind:value={left} max={total} />\n\t{left}/{total} left\n</label>\n```\n\nInstead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE5VRvW7CMBB-FcvqECQK6dDFJEgsnfoGTQdDLsjSxVjxhYKivHvPBwFUsXS8774_nwftbQva6I_e78gdvNo6Xzu_j3quG4cQtfkaNJ1DIiWA8atkE8IiHgEpYVsb4Rm-O3gCT2yji7jrXKB15StiOJKiA1lUpXrL81VCEUjFwHTGXiJZgiyf3TYIjSxq6NwR6uyifr0ohMbEZnpHH2rWf7ImS8KZGtK6osl_UqelRIyVL5b3ir5AuwWUtoXzoee6fIWy0p31e6i0XMocLfZQDuI6qtaeykGcR7UU6XWznFAZU9LN_X9B2UyVayk9f3ji0-REugen6U9upDOCcAWcLlS7GNCejWoQTqsLtrfBqHzxDu3DrUTOf0xwIm2o62H85sk6_OHG2jQWI4y_3byXXGMCAAA=)):\n\n```svelte\n<script>\n\tconst total = 100;\n\tlet spent = $state(0);\n\tlet left = $derived(total - spent);\n\n+++\tfunction updateLeft(left) {\n\t\tspent = total - left;\n\t}+++\n</script>\n\n<label>\n\t<input type=\"range\" bind:value={spent} max={total} />\n\t{spent}/{total} spent\n</label>\n\n<label>\n\t<input type=\"range\" +++bind:value={() => left, updateLeft}+++ max={total} />\n\t{left}/{total} left\n</label>\n```\n\nIf you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).",
+		"svelte/$props": "The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport MyComponent from './MyComponent.svelte';\n</script>\n\n<MyComponent adjective=\"cool\" />\n```\n\nOn the other side, inside `MyComponent.svelte`, we can receive props with the `$props` rune...\n\n```svelte\n<!--- file: MyComponent.svelte --->\n<script>\n\tlet props = $props();\n</script>\n\n<p>this component is {props.adjective}</p>\n```\n\n...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:\n\n```svelte\n<!--- file: MyComponent.svelte --->\n<script>\n\tlet +++{ adjective }+++ = $props();\n</script>\n\n<p>this component is {+++adjective+++}</p>\n```\n\n## Fallback values\n\nDestructuring allows us to declare fallback values, which are used if the parent component does not set a given prop (or the value is `undefined`):\n\n```js\nlet { adjective = 'happy' } = $props();\n```\n\n> [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info)\n\n## Renaming props\n\nWe can also use the destructuring assignment to rename props, which is necessary if they're invalid identifiers, or a JavaScript keyword like `super`:\n\n```js\nlet { super: trouper = 'lights are gonna find me' } = $props();\n```\n\n## Rest props\n\nFinally, we can use a _rest property_ to get, well, the rest of the props:\n\n```js\nlet { a, b, c, ...others } = $props();\n```\n\n## Updating props\n\nReferences to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Child from './Child.svelte';\n\n\tlet count = $state(0);\n</script>\n\n<button onclick={() => (count += 1)}>\n\tclicks (parent): {count}\n</button>\n\n<Child {count} />\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { count } = $props();\n</script>\n\n<button onclick={() => (count += 1)}>\n\tclicks (child): {count}\n</button>\n```\n\nWhile you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable).\n\nIf the prop is a regular object, the mutation will have no effect ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2W1QmorQgJXk0RC3PkBwiExG9WQrC17U4Es_ztKUkQp9OjxzM7bjcjtSKjwyfKNp1aLORA4b13ADHszUED1HFE-3eyaBcy-Mw_O5eFAg8xa1wb6T9eWhVgCKiyD9sZJ3XAjZnTWCzzuzfAKvbcjbPJieR2jm_uGy-InweXqtd0baaliBG0nFgW3kBIUNWYo9CGoxE-UsgvIpw2_oc9-LmAPJBCPDJCggqvlVtvdH9puErEMlvVg9HsVtzuoaojzkKKAfRuALVDfk5ZZW0fmy05wXcFdwyktlUs-KIinljTXrRVnm7-kL9dYLVbUAQAA)):\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Child from './Child.svelte';\n</script>\n\n<Child object={{ count: 0 }} />\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { object } = $props();\n</script>\n\n<button onclick={() => {\n\t// has no effect\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nIf the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0U7DMAxFf8VESBuiauG1WycheOEbKA9p67FA6kSNszJV-XeUZhMw2GN8r-1znUmQ7FGU4pn2UqsOes-SlSGRia3S6ET5Mgk-2OiJBZGdOh6szd0eNcdaIx3-V28NMRI7UYq1awdleVNTzaq3ZmB43CndwXYwPSzyYn4dWxermqJRI4Np3rFlqODasWRcTtAaT1zCHYSbVU3r4nsyrdPMKTUFKDYiE4yfLEoePIbsQpqfy3_nOVMuJIqg0wk1RFg7GOuWfwEbz2wIDLVatR_VtLyBagNTHFIUMCqtoZXeIfAOU1JoUJsR2IC3nWTMjt7GM4yKdyBhlAMpesvhydCC0y_i0ZagHByMh26WzUhXUUxKnpbcVnBfUwhznJnNlac7JkuIURL-2VVfwxflyrWcSQIAAA==)):\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Child from './Child.svelte';\n\n\tlet object = $state({count: 0});\n</script>\n\n<Child {object} />\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { object } = $props();\n</script>\n\n<button onclick={() => {\n\t// will cause the count below to update,\n\t// but with a warning. Don't mutate\n\t// objects you don't own!\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nThe fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VkIbUVoYFraCIh7vwA4eC4G9Wta1vxpgJZ_nfkBEQp9OjxzOzTRGHlkUQlXpy9G0gq1idCL43ppDrAD84HUYheGwqieo2CP3y2Z0EU3-En79fhRIaz1slA_-nKWSbLQVRiE9SgPTetbVkfvRsYzztttugHd8RiXU6vr-jisbWb8idhN7O3bEQhmN5ZVDyMlIorcOddv_Eufq4AGmJEuG5PilEjQrnRcoV7JCTUuJlGWq7-YHYjs7NwVhmtDnVcrlA3iLmzLLGTAdaB-j736h68Oxv-JM1I0AFjoG1OzPfX023c1nhobUoT39QeKsRzS8owM8DFTG_pE6dcVl70AQAA))\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { object = { count: 0 } } = $props();\n</script>\n\n<button onclick={() => {\n\t// has no effect if the fallback value is used\n\tobject.count += 1\n}}>\n\tclicks: {object.count}\n</button>\n```\n\nIn summary: don't mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the [`$bindable`]($bindable) rune.\n\n## Type safety\n\nYou can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this...\n\n```svelte\n<script lang=\"ts\">\n\tlet { adjective }: { adjective: string } = $props();\n</script>\n```\n\n...while in JSDoc you can do this:\n\n```svelte\n<script>\n\t/** @type {{ adjective: string }} */\n\tlet { adjective } = $props();\n</script>\n```\n\nYou can, of course, separate the type declaration from the annotation:\n\n```svelte\n<script lang=\"ts\">\n\tinterface Props {\n\t\tadjective: string;\n\t}\n\n\tlet { adjective }: Props = $props();\n</script>\n```\n\n> [!NOTE] Interfaces for native DOM elements are provided in the `svelte/elements` module (see [Typing wrapper components](typescript#Typing-wrapper-components))\n\nAdding types is recommended, as it ensures that people using your component can easily discover which props they should provide.\n\n\n## `$props.id()`\n\nThis rune, added in version 5.20.0, generates an ID that is unique to the current component instance. When hydrating a server-rendered component, the value will be consistent between server and client.\n\nThis is useful for linking elements via attributes like `for` and `aria-labelledby`.\n\n```svelte\n<script>\n\tconst uid = $props.id();\n</script>\n\n<form>\n\t<label for=\"{uid}-firstname\">First Name: </label>\n\t<input id=\"{uid}-firstname\" type=\"text\" />\n\n\t<label for=\"{uid}-lastname\">Last Name: </label>\n\t<input id=\"{uid}-lastname\" type=\"text\" />\n</form>\n```",
+		"svelte/$bindable": "Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.\n\nIn Svelte, component props can be _bound_, which means that data can also flow _up_ from child to parent. This isn't something you should do often, but it can simplify your code if used sparingly and carefully.\n\nIt also means that a state proxy can be _mutated_ in the child.\n\n> [!NOTE] Mutation is also possible with normal props, but is strongly discouraged — Svelte will warn you if it detects that a component is mutating state it does not 'own'.\n\nTo mark a prop as bindable, we use the `$bindable` rune:\n\n<!-- prettier-ignore -->\n```svelte\n/// file: FancyInput.svelte\n<script>\n\tlet { value = $bindable(), ...props } = $props();\n</script>\n\n<input bind:value={value} {...props} />\n\n<style>\n\tinput {\n\t\tfont-family: 'Comic Sans MS';\n\t\tcolor: deeppink;\n\t}\n</style>\n```\n\nNow, a component that uses `<FancyInput>` can add the [`bind:`](bind) directive ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwWrDMBBEf2URBSfg2nfFMZRCoYeecqx6UJx1IyqvhLUONcb_XqSkTUOSk1az7DBvJtEai0HI90nw6FHIJIhckO7i78n7IhzQctS2OuAtvXHESByEFFVoeuO5VqTYdN71DC-amvGV_MDQ9q6DrCjP0skkWymKJxYZOgxBfyKs4SGwZlxke7TWZcuVoqo8-1P1z3lraCcP2g64nk4GM5S1osrXf0JV-lrkgvGbheR-wDm_g30V8JL-1vpOCZFogpQsEsWcemtxscyhKArfOx9gjps0Lq4hzRVfemaYfu-PoIqqwKPFY_XpaIqj4tYRP7a6M3aUkD27zjSw0RTgbZN6Z8WNs66XsEP03tBXUueUJFlelvYx_wCuI3leNwIAAA==)):\n\n<!-- prettier-ignore -->\n```svelte\n/// file: App.svelte\n<script>\n\timport FancyInput from './FancyInput.svelte';\n\n\tlet message = $state('hello');\n</script>\n\n<FancyInput bind:value={message} />\n<p>{message}</p>\n```\n\nThe parent component doesn't _have_ to use `bind:` — it can just pass a normal prop. Some parents don't want to listen to what their children have to say.\n\nIn this case, you can specify a fallback value for when no prop is passed at all:\n\n```js\n/// file: FancyInput.svelte\nlet { value = $bindable('fallback'), ...props } = $props();\n```",
+		"svelte/$inspect": "> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.\n\nThe `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire ([demo](/playground/untitled#H4sIAAAAAAAACkWQ0YqDQAxFfyUMhSotdZ-tCvu431AXtGOqQ2NmmMm0LOK_r7Utfby5JzeXTOpiCIPKT5PidkSVq2_n1F7Jn3uIcEMSXHSw0evHpAjaGydVzbUQCmgbWaCETZBWMPlKj29nxBDaHj_edkAiu12JhdkYDg61JGvE_s2nR8gyuBuiJZuDJTyQ7eE-IEOzog1YD80Lb0APLfdYc5F9qnFxjiKWwbImo6_llKRQVs-2u91c_bD2OCJLkT3JZasw7KLA2XCX31qKWE6vIzNk1fKE0XbmYrBTufiI8-_8D2cUWBA_AQAA)):\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet message = $state('hello');\n\n\t$inspect(count, message); // will console.log when `count` or `message` change\n</script>\n\n<button onclick={() => count++}>Increment</button>\n<input bind:value={message} />\n```\n\n## $inspect(...).with\n\n`$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `\"init\"` or `\"update\"`; subsequent arguments are the values passed to `$inspect` ([demo](/playground/untitled#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)):\n\n```svelte\n<script>\n\tlet count = $state(0);\n\n\t$inspect(count).with((type, count) => {\n\t\tif (type === 'update') {\n\t\t\tdebugger; // or `console.trace`, or whatever you want\n\t\t}\n\t});\n</script>\n\n<button onclick={() => count++}>Increment</button>\n```\n\nA convenient way to find the origin of some change is to pass `console.trace` to `with`:\n\n```js\n// @errors: 2304\n$inspect(stuff).with(console.trace);\n```\n\n## $inspect.trace(...)\n\nThis rune, added in 5.14, causes the surrounding function to be _traced_ in development. Any time the function re-runs as part of an [effect]($effect) or a [derived]($derived), information will be printed to the console about which pieces of reactive state caused the effect to fire.\n\n```svelte\n<script>\n\timport { doSomeWork } from './elsewhere';\n\n\t$effect(() => {\n\t\t+++// $inspect.trace must be the first statement of a function body+++\n\t\t+++$inspect.trace();+++\n\t\tdoSomeWork();\n\t});\n</script>\n```\n\n`$inspect.trace` takes an optional first argument which will be used as the label.",
+		"svelte/$host": "When compiling a component as a [custom element](custom-elements), the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):\n\n<!-- prettier-ignore -->\n```svelte\n/// file: Stepper.svelte\n<svelte:options customElement=\"my-stepper\" />\n\n<script>\n\tfunction dispatch(type) {\n\t\t+++$host()+++.dispatchEvent(new CustomEvent(type));\n\t}\n</script>\n\n<button onclick={() => dispatch('decrement')}>decrement</button>\n<button onclick={() => dispatch('increment')}>increment</button>\n```\n\n<!-- prettier-ignore -->\n```svelte\n/// file: App.svelte\n<script>\n\timport './Stepper.svelte';\n\n\tlet count = $state(0);\n</script>\n\n<my-stepper\n\tondecrement={() => count -= 1}\n\tonincrement={() => count += 1}\n></my-stepper>\n\n<p>count: {count}</p>\n```",
+		"svelte/basic-markup": "Markup inside a Svelte component can be thought of as HTML++.\n\n## Tags\n\nA lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag or a tag that uses dot notation, such as `<Widget>` or `<my.stuff>`, indicates a _component_.\n\n```svelte\n<script>\n\timport Widget from './Widget.svelte';\n</script>\n\n<div>\n\t<Widget />\n</div>\n```\n\n## Element attributes\n\nBy default, attributes work exactly like their HTML counterparts.\n\n```svelte\n<div class=\"foo\">\n\t<button disabled>can't touch this</button>\n</div>\n```\n\nAs in HTML, values may be unquoted.\n\n<!-- prettier-ignore -->\n```svelte\n<input type=checkbox />\n```\n\nAttribute values can contain JavaScript expressions.\n\n```svelte\n<a href=\"page/{p}\">page {p}</a>\n```\n\nOr they can _be_ JavaScript expressions.\n\n```svelte\n<button disabled={!clickable}>...</button>\n```\n\nBoolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).\n\nAll other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).\n\n```svelte\n<input required={false} placeholder=\"This input field is not required\" />\n<div title={null}>This div has no title attribute</div>\n```\n\n> [!NOTE] Quoting a singular expression does not affect how the value is parsed, but in Svelte 6 it will cause the value to be coerced to a string:\n>\n> <!-- prettier-ignore -->\n> ```svelte\n> <button disabled=\"{number !== 42}\">...</button>\n> ```\n\nWhen the attribute name and value match (`name={name}`), they can be replaced with `{name}`.\n\n```svelte\n<button {disabled}>...</button>\n<!-- equivalent to\n<button disabled={disabled}>...</button>\n-->\n```\n\n## Component props\n\nBy convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.\n\nAs with elements, `name={name}` can be replaced with the `{name}` shorthand.\n\n```svelte\n<Widget foo={bar} answer={42} text=\"hello\" />\n```\n\n## Spread attributes\n\n_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.\n\nAn element or component can have multiple spread attributes, interspersed with regular ones. Order matters — if `things.a` exists it will take precedence over `a=\"b\"`, while `c=\"d\"` would take precedence over `things.c`:\n\n```svelte\n<Widget a=\"b\" {...things} c=\"d\" />\n```\n\n## Events\n\nListening to DOM events is possible by adding attributes to the element that start with `on`. For example, to listen to the `click` event, add the `onclick` attribute to a button:\n\n```svelte\n<button onclick={() => console.log('clicked')}>click me</button>\n```\n\nEvent attributes are case sensitive. `onclick` listens to the `click` event, `onClick` listens to the `Click` event, which is different. This ensures you can listen to custom events that have uppercase characters in them.\n\nBecause events are just attributes, the same rules as for attributes apply:\n\n- you can use the shorthand form: `<button {onclick}>click me</button>`\n- you can spread them: `<button {...thisSpreadContainsEventAttributes}>click me</button>`\n\nTiming-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, some event handlers are attached directly with `addEventListener`, while others are _delegated_.\n\nWhen using `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) for better performance. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.\n\nIn the very rare cases that you need to prevent these event defaults, you should use [`on`](svelte-events#on) instead (for example inside an action).\n\n### Event delegation\n\nTo reduce memory footprint and increase performance, Svelte uses a technique called event delegation. This means that for certain events — see the list below — a single event listener at the application root takes responsibility for running any handlers on the event's path.\n\nThere are a few gotchas to be aware of:\n\n- when you manually dispatch an event with a delegated listener, make sure to set the `{ bubbles: true }` option or it won't reach the application root\n- when using `addEventListener` directly, avoid calling `stopPropagation` or the event won't reach the application root and handlers won't be invoked. Similarly, handlers added manually inside the application root will run _before_ handlers added declaratively deeper in the DOM (with e.g. `onclick={...}`), in both capturing and bubbling phases. For these reasons it's better to use the `on` function imported from `svelte/events` rather than `addEventListener`, as it will ensure that order is preserved and `stopPropagation` is handled correctly.\n\nThe following event handlers are delegated:\n\n- `beforeinput`\n- `click`\n- `change`\n- `dblclick`\n- `contextmenu`\n- `focusin`\n- `focusout`\n- `input`\n- `keydown`\n- `keyup`\n- `mousedown`\n- `mousemove`\n- `mouseout`\n- `mouseover`\n- `mouseup`\n- `pointerdown`\n- `pointermove`\n- `pointerout`\n- `pointerover`\n- `pointerup`\n- `touchend`\n- `touchmove`\n- `touchstart`\n\n## Text expressions\n\nA JavaScript expression can be included as text by surrounding it with curly braces.\n\n```svelte\n{expression}\n```\n\nExpressions that are `null` or `undefined` will be omitted; all others are [coerced to strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion).\n\nCurly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `&lbrace;`, `&lcub;`, or `&#123;` for `{` and `&rbrace;`, `&rcub;`, or `&#125;` for `}`.\n\nIf you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.\n\n<!-- prettier-ignore -->\n```svelte\n<h1>Hello {name}!</h1>\n<p>{a} + {b} = {a + b}.</p>\n\n<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>\n```\n\nThe expression will be stringified and escaped to prevent code injections. If you want to render HTML, use the `{@html}` tag instead.\n\n```svelte\n{@html potentiallyUnsafeHtmlString}\n```\n\n> [!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/)\n\n## Comments\n\nYou can use HTML comments inside components.\n\n```svelte\n<!-- this is a comment! --><h1>Hello world</h1>\n```\n\nComments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.\n\n```svelte\n<!-- svelte-ignore a11y_autofocus -->\n<input bind:value={name} autofocus />\n```\n\nYou can add a special comment starting with `@component` that will show up when hovering over the component name in other files.\n\n````svelte\n<!--\n@component\n- You can use markdown here.\n- You can also use code blocks here.\n- Usage:\n  ```html\n  <Main name=\"Arethra\">\n  ```\n-->\n<script>\n\tlet { name } = $props();\n</script>\n\n<main>\n\t<h1>\n\t\tHello, {name}\n\t</h1>\n</main>\n````",
+		"svelte/if": "```svelte\n<!--- copy: false  --->\n{#if expression}...{/if}\n```\n\n```svelte\n<!--- copy: false  --->\n{#if expression}...{:else if expression}...{/if}\n```\n\n```svelte\n<!--- copy: false  --->\n{#if expression}...{:else}...{/if}\n```\n\nContent that is conditionally rendered can be wrapped in an if block.\n\n```svelte\n{#if answer === 42}\n\t<p>what was the question?</p>\n{/if}\n```\n\nAdditional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.\n\n```svelte\n{#if porridge.temperature > 100}\n\t<p>too hot!</p>\n{:else if 80 > porridge.temperature}\n\t<p>too cold!</p>\n{:else}\n\t<p>just right!</p>\n{/if}\n```\n\n(Blocks don't have to wrap elements, they can also wrap text within elements.)",
+		"svelte/each": "```svelte\n<!--- copy: false  --->\n{#each expression as name}...{/each}\n```\n\n```svelte\n<!--- copy: false  --->\n{#each expression as name, index}...{/each}\n```\n\nIterating over values can be done with an each block. The values in question can be arrays, array-like objects (i.e. anything with a `length` property), or iterables like `Map` and `Set` — in other words, anything that can be used with `Array.from`.\n\n```svelte\n<h1>Shopping list</h1>\n<ul>\n\t{#each items as item}\n\t\t<li>{item.name} x {item.qty}</li>\n\t{/each}\n</ul>\n```\n\nAn each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:\n\n```svelte\n{#each items as item, i}\n\t<li>{i + 1}: {item.name} x {item.qty}</li>\n{/each}\n```\n\n## Keyed each blocks\n\n```svelte\n<!--- copy: false  --->\n{#each expression as name (key)}...{/each}\n```\n\n```svelte\n<!--- copy: false  --->\n{#each expression as name, index (key)}...{/each}\n```\n\nIf a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to intelligently update the list when data changes by inserting, moving and deleting items, rather than adding or removing items at the end and updating the state in the middle.\n\nThe key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.\n\n```svelte\n{#each items as item (item.id)}\n\t<li>{item.name} x {item.qty}</li>\n{/each}\n\n<!-- or with additional index value -->\n{#each items as item, i (item.id)}\n\t<li>{i + 1}: {item.name} x {item.qty}</li>\n{/each}\n```\n\nYou can freely use destructuring and rest patterns in each blocks.\n\n```svelte\n{#each items as { id, name, qty }, i (id)}\n\t<li>{i + 1}: {name} x {qty}</li>\n{/each}\n\n{#each objects as { id, ...rest }}\n\t<li><span>{id}</span><MyComponent {...rest} /></li>\n{/each}\n\n{#each items as [id, ...rest]}\n\t<li><span>{id}</span><MyComponent values={rest} /></li>\n{/each}\n```\n\n## Each blocks without an item\n\n```svelte\n<!--- copy: false  --->\n{#each expression}...{/each}\n```\n\n```svelte\n<!--- copy: false  --->\n{#each expression, index}...{/each}\n```\n\nIn case you just want to render something `n` times, you can omit the `as` part ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0W7CMAxFf8XKNAk0WsSeUEaRpn3Guoc0MbQiJFHiMlDVf18SOrZJ48259_jaVgZmxBEZZ28thgCNFV6xBdt1GgPj7wOji0t2EqI-wa_OleGEmpLWiID_6dIaQkMxhm1UdwKpRQhVzWSaVORJNdvWpqbhAYVsYQCNZk8thzWMC_DCHMZk3wPSThNQ088I3mghD9UwSwHwlLE5PMIzVFUFq3G7WUZ2OyUvU3JOuZU332wCXTRmtPy1NgzXZtUFp8WFw9536uWqpbIgPEaDsJBW90cTOHh0KGi2XsBq5-cT6-3nPauxXqHnsHJnCFZ3CvJVkyuCQ0mFF9TZyCQ162WGvteLKfG197Y3iv_pz_fmS68Hxt8iPBPj5HscP8YvCNX7uhYCAAA=)):\n\n```svelte\n<div class=\"chess-board\">\n\t{#each { length: 8 }, rank}\n\t\t{#each { length: 8 }, file}\n\t\t\t<div class:black={(rank + file) % 2 === 1}></div>\n\t\t{/each}\n\t{/each}\n</div>\n```\n\n## Else blocks\n\n```svelte\n<!--- copy: false  --->\n{#each expression as name}...{:else}...{/each}\n```\n\nAn each block can also have an `{:else}` clause, which is rendered if the list is empty.\n\n```svelte\n{#each todos as todo}\n\t<p>{todo.text}</p>\n{:else}\n\t<p>No tasks today!</p>\n{/each}\n```",
+		"svelte/key": "```svelte\n<!--- copy: false  --->\n{#key expression}...{/key}\n```\n\nKey blocks destroy and recreate their contents when the value of an expression changes. When used around components, this will cause them to be reinstantiated and reinitialised:\n\n```svelte\n{#key value}\n\t<Component />\n{/key}\n```\n\nIt's also useful if you want a transition to play whenever a value changes:\n\n```svelte\n{#key value}\n\t<div transition:fade>{value}</div>\n{/key}\n```",
+		"svelte/await": "```svelte\n<!--- copy: false  --->\n{#await expression}...{:then name}...{:catch name}...{/await}\n```\n\n```svelte\n<!--- copy: false  --->\n{#await expression}...{:then name}...{/await}\n```\n\n```svelte\n<!--- copy: false  --->\n{#await expression then name}...{/await}\n```\n\n```svelte\n<!--- copy: false  --->\n{#await expression catch name}...{/await}\n```\n\nAwait blocks allow you to branch on the three possible states of a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) — pending, fulfilled or rejected.\n\n```svelte\n{#await promise}\n\t<!-- promise is pending -->\n\t<p>waiting for the promise to resolve...</p>\n{:then value}\n\t<!-- promise was fulfilled or not a Promise -->\n\t<p>The value is {value}</p>\n{:catch error}\n\t<!-- promise was rejected -->\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\n> [!NOTE] During server-side rendering, only the pending branch will be rendered.\n>\n> If the provided expression is not a `Promise`, only the `:then` branch will be rendered, including during server-side rendering.\n\nThe `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).\n\n```svelte\n{#await promise}\n\t<!-- promise is pending -->\n\t<p>waiting for the promise to resolve...</p>\n{:then value}\n\t<!-- promise was fulfilled -->\n\t<p>The value is {value}</p>\n{/await}\n```\n\nIf you don't care about the pending state, you can also omit the initial block.\n\n```svelte\n{#await promise then value}\n\t<p>The value is {value}</p>\n{/await}\n```\n\nSimilarly, if you only want to show the error state, you can omit the `then` block.\n\n```svelte\n{#await promise catch error}\n\t<p>The error is {error}</p>\n{/await}\n```\n\n> [!NOTE] You can use `#await` with [`import(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) to render components lazily:\n>\n> ```svelte\n> {#await import('./Component.svelte') then { default: Component }}\n> \t<Component />\n> {/await}\n> ```",
+		"svelte/snippet": "```svelte\n<!--- copy: false  --->\n{#snippet name()}...{/snippet}\n```\n\n```svelte\n<!--- copy: false  --->\n{#snippet name(param1, param2, paramN)}...{/snippet}\n```\n\nSnippets, and [render tags](@render), are a way to create reusable chunks of markup inside your components. Instead of writing duplicative code like [this](/playground/untitled#H4sIAAAAAAAAE5VUYW-kIBD9K8Tmsm2yXXRzvQ-s3eR-R-0HqqOQKhAZb9sz_vdDkV1t000vRmHewMx7w2AflbIGG7GnPlK8gYhFv42JthG-m9Gwf6BGcLbVXZuPSGrzVho8ZirDGpDIhldgySN5GpEMez9kaNuckY1ANJZRamRuu2ZnhEZt6a84pvs43mzD4pMsUDDi8DMkQFYCGdkvsJwblFq5uCik9bmJ4JZwUkv1eoknWigX2eGNN6aGXa6bjV8ybP-X7sM36T58SVcrIIV2xVIaA41xeD5kKqWXuqpUJEefOqVuOkL9DfBchGrzWfu0vb-RpTd3o-zBR045Ga3HfuE5BmJpKauuhbPtENlUF2sqR9jqpsPSxWsMrlngyj3VJiyYjJXb1-lMa7IWC-iSk2M5Zzh-SJjShe-siq5kpZRPs55BbSGU5YPyte4vVV_VfFXxVb10dSLf17pS2lM5HnpPxw4Zpv6x-F57p0jI3OKlVnhv5V9wPQrNYQQ9D_f6aGHlC89fq1Z3qmDkJCTCweOGF4VUFSPJvD_DhreVdA0eu8ehJJ5x91dBaBkpWm3ureCFPt3uzRv56d4kdp-2euG38XZ6dsnd3ZmPG9yRBCrzRUvi-MccOdwz3qE-fOZ7AwAhlrtTUx3c76vRhSwlFBHDtoPhefgHX3dM0PkEAAA=)...\n\n```svelte\n{#each images as image}\n\t{#if image.href}\n\t\t<a href={image.href}>\n\t\t\t<figure>\n\t\t\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t\t\t<figcaption>{image.caption}</figcaption>\n\t\t\t</figure>\n\t\t</a>\n\t{:else}\n\t\t<figure>\n\t\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t\t<figcaption>{image.caption}</figcaption>\n\t\t</figure>\n\t{/if}\n{/each}\n```\n\n...you can write [this](/playground/untitled#H4sIAAAAAAAAE5VUYW-bMBD9KxbRlERKY4jWfSA02n5H6QcXDmwVbMs-lnaI_z6D7TTt1moTAnPvzvfenQ_GpBEd2CS_HxPJekjy5IfWyS7BFz0b9id0CM62ajDVjBS2MkLjqZQldoBE9KwFS-7I_YyUOPqlRGuqnKw5orY5pVpUduj3mitUln5LU3pI0_UuBp9FjTwnDr9AHETLMSeHK6xiGoWSLi9yYT034cwSRjohn17zcQPNFTs8s153sK9Uv_Yh0-5_5d7-o9zbD-UqCaRWrllSYZQxLw_HUhb0ta-y4NnJUxfUvc7QuLJSaO0a3oh2MLBZat8u-wsPnXzKQvTtVVF34xK5d69ThFmHEQ4SpzeVRediTG8rjD5vBSeN3E5JyHh6R1DQK9-iml5kjzQUN_lSgVU8DhYLx7wwjSvRkMDvTjiwF4zM1kXZ7DlF1eN3A7IG85e-zRrYEjjm0FkI4Cc7Ripm0pHOChexhcWXzreeZyRMU6Mk3ljxC9w4QH-cQZ_b3T5pjHxk1VNr1CDrnJy5QDh6XLO6FrLNSRb2l9gz0wo3S6m7HErSgLsPGMHkpDZK31jOanXeHPQz-eruLHUP0z6yTbpbrn223V70uMXNSpQSZjpL0y8hcxxpNqA6_ql3BQAxlxvfpQ_uT9GrWjQC6iRHM8D0MP0GQsIi92QEAAA=):\n\n```svelte\n{#snippet figure(image)}\n\t<figure>\n\t\t<img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n\t\t<figcaption>{image.caption}</figcaption>\n\t</figure>\n{/snippet}\n\n{#each images as image}\n\t{#if image.href}\n\t\t<a href={image.href}>\n\t\t\t{@render figure(image)}\n\t\t</a>\n\t{:else}\n\t\t{@render figure(image)}\n\t{/if}\n{/each}\n```\n\nLike function declarations, snippets can have an arbitrary number of parameters, which can have default values, and you can destructure each parameter. You cannot use rest parameters, however.\n\n## Snippet scope\n\nSnippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `<script>` tag or in `{#each ...}` blocks ([demo](/playground/untitled#H4sIAAAAAAAAE12P0QrCMAxFfyWrwhSEvc8p-h1OcG5RC10bmkyQ0n-3HQPBx3vCPUmCemiDrOpLULYbUdXqTKR2Sj6UA7_RCKbMbvJ9Jg33XpMcW9uKQYEAIzJ3T4QD3LSUDE-PnYA4YET4uOkGMc3W5B3xZrtvbVP9HDas2GqiZHqhMW6Tr9jGbG_oOCMImcUCwrIpFk1FqRyqpRpn0cmjHdAvnrIzuscyq_4nd3dPPD01ukE_NA6qFj9hvMYvGjJADw8BAAA=))...\n\n```svelte\n<script>\n\tlet { message = `it's great to see you!` } = $props();\n</script>\n\n{#snippet hello(name)}\n\t<p>hello {name}! {message}!</p>\n{/snippet}\n\n{@render hello('alice')}\n{@render hello('bob')}\n```\n\n...and they are 'visible' to everything in the same lexical scope (i.e. siblings, and children of those siblings):\n\n```svelte\n<div>\n\t{#snippet x()}\n\t\t{#snippet y()}...{/snippet}\n\n\t\t<!-- this is fine -->\n\t\t{@render y()}\n\t{/snippet}\n\n\t<!-- this will error, as `y` is not in scope -->\n\t{@render y()}\n</div>\n\n<!-- this will also error, as `x` is not in scope -->\n{@render x()}\n```\n\nSnippets can reference themselves and each other ([demo](/playground/untitled#H4sIAAAAAAAAE2WPTQqDMBCFrxLiRqH1Zysi7TlqF1YnENBJSGJLCYGeo5tesUeosfYH3c2bee_jjaWMd6BpfrAU6x5oTvdS0g01V-mFPkNnYNRaDKrxGxto5FKCIaeu1kYwFkauwsoUWtZYPh_3W5FMY4U2mb3egL9kIwY0rbhgiO-sDTgjSEqSTvIDs-jiOP7i_MHuFGAL6p9BtiSbOTl0GtzCuihqE87cqtyam6WRGz_vRcsZh5bmRg3gju4Fptq_kzQBAAA=)):\n\n```svelte\n{#snippet blastoff()}\n\t<span>🚀</span>\n{/snippet}\n\n{#snippet countdown(n)}\n\t{#if n > 0}\n\t\t<span>{n}...</span>\n\t\t{@render countdown(n - 1)}\n\t{:else}\n\t\t{@render blastoff()}\n\t{/if}\n{/snippet}\n\n{@render countdown(10)}\n```\n\n## Passing snippets to components\n\n### Explicit props\n\nWithin the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):\n\n```svelte\n<script>\n\timport Table from './Table.svelte';\n\n\tconst fruits = [\n\t\t{ name: 'apples', qty: 5, price: 2 },\n\t\t{ name: 'bananas', qty: 10, price: 1 },\n\t\t{ name: 'cherries', qty: 20, price: 0.5 }\n\t];\n</script>\n\n{#snippet header()}\n\t<th>fruit</th>\n\t<th>qty</th>\n\t<th>price</th>\n\t<th>total</th>\n{/snippet}\n\n{#snippet row(d)}\n\t<td>{d.name}</td>\n\t<td>{d.qty}</td>\n\t<td>{d.price}</td>\n\t<td>{d.qty * d.price}</td>\n{/snippet}\n\n<Table data={fruits} {header} {row} />\n```\n\nThink about it like passing content instead of data to a component. The concept is similar to slots in web components.\n\n### Implicit props\n\nAs an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE3VSTa_aMBD8Kyu_SkAbCA-JSzBR20N_QXt6vIMTO8SqsY29tI2s_PcqTiB8vaPHs7MzuxuIZgdBMvJLo0QlOElIJZXwJHsLBBvb_XUASc7Mb9Yu_B-hsMMK5sUzvDQahUZPMkJ96aTFfKd3KA_WOISfrFACKmcOMFmk8TWUTjY73RFLoz1C5U4SPWzhrcN2GKDrlcGEWauEnyRwxCaDdQLWyVJksII2uaMWTDPNLtzX5YX8-kgua-GcHJVXI3u5WEPb0d83O03TMZSmfRzOkG1Db7mNacOL19JagVALxoWbztq-H8U6j0SaYp2P2BGbOyQ2v8PQIFMXLKRDk177pq0zf6d8bMrzwBdd0pamyPMb-IjNEzS2f86Gz_Dwf-2F9nvNSUJQ_EOSoTuJNvngqK5v4Pas7n4-OCwlEEJcQTIMO-nSQwtb-GSdsX46e9gbRoP9yGQ11I0rEuycunu6PHx1QnPhxm3SFN15MOlYEFJZtf0dUywMbwZOeBGsrKNLYB54-1R9WNqVdki7usim6VmQphf7mnpshiQRhNAXdoOfMyX3OgMlKtz0cGEcF27uLSul3mewjPjgOOoDukxjPS9rqfh0pb-8zs6aBSt_7505aZ7B9xOi0T9YKW4UooVsr0zB1BTrWQJ3EL-oWcZ572GxFoezCk37QLe3897-B2i2U62uBAAA)):\n\n```svelte\n<!-- this is semantically the same as the above -->\n<Table data={fruits}>\n\t{#snippet header()}\n\t\t<th>fruit</th>\n\t\t<th>qty</th>\n\t\t<th>price</th>\n\t\t<th>total</th>\n\t{/snippet}\n\n\t{#snippet row(d)}\n\t\t<td>{d.name}</td>\n\t\t<td>{d.qty}</td>\n\t\t<td>{d.price}</td>\n\t\t<td>{d.qty * d.price}</td>\n\t{/snippet}\n</Table>\n```\n\n### Implicit `children` snippet\n\nAny content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE3WOQQrCMBBFrzIMggql3ddY1Du4si5sOmIwnYRkFKX07lKqglqX8_7_w2uRDw1hjlsWI5ZqTPBoLEXMdy3K3fdZDzB5Ndfep_FKVnpWHSKNce1YiCVijirqYLwUJQOYxrsgsLmIOIZjcA1M02w4n-PpomSVvTclqyEutDX6DA2pZ7_ABIVugrmEC3XJH92P55_G39GodCmWBFrQJ2PrQAwdLGHig_NxNv9xrQa1dhWIawrv1Wzeqawa8953D-8QOmaEAQAA)):\n\n```svelte\n<!--- file: App.svelte --->\n<Button>click me</Button>\n```\n\n```svelte\n<!--- file: Button.svelte --->\n<script>\n\tlet { children } = $props();\n</script>\n\n<!-- result will be <button>click me</button> -->\n<button>{@render children()}</button>\n```\n\n> [!NOTE] Note that you cannot have a prop called `children` if you also have content inside the component — for this reason, you should avoid having props with that name\n\n### Optional snippet props\n\nYou can declare snippet props as being optional. You can either use optional chaining to not render anything if the snippet isn't set...\n\n```svelte\n<script>\n    let { children } = $props();\n</script>\n\n{@render children?.()}\n```\n\n...or use an `#if` block to render fallback content:\n\n```svelte\n<script>\n    let { children } = $props();\n</script>\n\n{#if children}\n    {@render children()}\n{:else}\n    fallback content\n{/if}\n```\n\n## Typing snippets\n\nSnippets implement the `Snippet` interface imported from `'svelte'`:\n\n```svelte\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\n\tinterface Props {\n\t\tdata: any[];\n\t\tchildren: Snippet;\n\t\trow: Snippet<[any]>;\n\t}\n\n\tlet { data, children, row }: Props = $props();\n</script>\n```\n\nWith this change, red squigglies will appear if you try and use the component without providing a `data` prop and a `row` snippet. Notice that the type argument provided to `Snippet` is a tuple, since snippets can have multiple parameters.\n\nWe can tighten things up further by declaring a generic, so that `data` and `row` refer to the same type:\n\n```svelte\n<script lang=\"ts\" generics=\"T\">\n\timport type { Snippet } from 'svelte';\n\n\tlet {\n\t\tdata,\n\t\tchildren,\n\t\trow\n\t}: {\n\t\tdata: T[];\n\t\tchildren: Snippet;\n\t\trow: Snippet<[T]>;\n\t} = $props();\n</script>\n```\n\n## Exporting snippets\n\nSnippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets) ([demo](/playground/untitled#H4sIAAAAAAAAE3WPwY7CMAxEf8UyB1hRgdhjl13Bga8gHFJipEqtGyUGFUX5dxJUtEB3b9bYM_MckHVLWOKut50TMuC5tpbEY4GnuiGP5T6gXG0-ykLSB8vW2oW_UCNZq7Snv_Rjx0Kc4kpc-6OrrfwoVlK3uQ4CaGMgwsl1LUwXy0f54J9-KV4vf20cNo7YkMu22aqAz4-oOLUI9YKluDPF4h_at-hX5PFyzA1tZ84N3fGpf8YfUU6GvDumLqDKmEqCjjCHUEX4hqDTWCU5PJ6Or38c4g1cPu9tnAEAAA==)):\n\n```svelte\n<script module>\n\texport { add };\n</script>\n\n{#snippet add(a, b)}\n\t{a} + {b} = {a + b}\n{/snippet}\n```\n\n> [!NOTE]\n> This requires Svelte 5.5.0 or newer\n\n## Programmatic snippets\n\nSnippets can be created programmatically with the [`createRawSnippet`](svelte#createRawSnippet) API. This is intended for advanced use cases.\n\n## Snippets and slots\n\nIn Svelte 4, content can be passed to components using [slots](legacy-slots). Snippets are more powerful and flexible, and so slots have been deprecated in Svelte 5.",
+		"svelte/@render": "To render a [snippet](snippet), use a `{@render ...}` tag.\n\n```svelte\n{#snippet sum(a, b)}\n\t<p>{a} + {b} = {a + b}</p>\n{/snippet}\n\n{@render sum(1, 2)}\n{@render sum(3, 4)}\n{@render sum(5, 6)}\n```\n\nThe expression can be an identifier like `sum`, or an arbitrary JavaScript expression:\n\n```svelte\n{@render (cool ? coolSnippet : lameSnippet)()}\n```\n\n## Optional snippets\n\nIf the snippet is potentially undefined — for example, because it's an incoming prop — then you can use optional chaining to only render it when it _is_ defined:\n\n```svelte\n{@render children?.()}\n```\n\nAlternatively, use an [`{#if ...}`](if) block with an `:else` clause to render fallback content:\n\n```svelte\n{#if children}\n\t{@render children()}\n{:else}\n\t<p>fallback content</p>\n{/if}\n```",
+		"svelte/@html": "To inject raw HTML into your component, use the `{@html ...}` tag:\n\n```svelte\n<article>\n\t{@html content}\n</article>\n```\n\n> [!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/). Never render unsanitized content.\n\nThe expression should be valid standalone HTML — this will not work, because `</div>` is not valid HTML:\n\n```svelte\n{@html '<div>'}content{@html '</div>'}\n```\n\nIt also will not compile Svelte code.\n\n## Styling\n\nContent rendered this way is 'invisible' to Svelte and as such will not receive [scoped styles](scoped-styles). In other words, this will not work, and the `a` and `img` styles will be regarded as unused:\n\n<!-- prettier-ignore -->\n```svelte\n<article>\n\t{@html content}\n</article>\n\n<style>\n\tarticle {\n\t\ta { color: hotpink }\n\t\timg { width: 100% }\n\t}\n</style>\n```\n\nInstead, use the `:global` modifier to target everything inside the `<article>`:\n\n<!-- prettier-ignore -->\n```svelte\n<style>\n\tarticle +++:global+++ {\n\t\ta { color: hotpink }\n\t\timg { width: 100% }\n\t}\n</style>\n```",
+		"svelte/@attach": "Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.\n\nOptionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.\n\n> [!NOTE]\n> Attachments are available in Svelte 5.29 and newer.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {import('svelte/attachments').Attachment} */\n\tfunction myAttachment(element) {\n\t\tconsole.log(element.nodeName); // 'DIV'\n\n\t\treturn () => {\n\t\t\tconsole.log('cleaning up');\n\t\t};\n\t}\n</script>\n\n<div {@attach myAttachment}>...</div>\n```\n\nAn element can have any number of attachments.\n\n## Attachment factories\n\nA useful pattern is for a function, such as `tooltip` in this example, to _return_ an attachment ([demo](/playground/untitled#H4sIAAAAAAAAE3VT0XLaMBD8lavbDiaNCUlbHhTItG_5h5AH2T5ArdBppDOEMv73SkbGJGnH47F9t3un3TsfMyO3mInsh2SW1Sa7zlZKo8_E0zHjg42pGAjxBPxp7cTvUHOMldLjv-IVGUbDoUw295VTlh-WZslqa8kxsLL2ACtHWxh175NffnQfAAGikSGxYQGfPEvGfPSIWtOH0TiBVo2pWJEBJtKhQp4YYzjG9JIdcuMM5IZqHMPioY8vOSA997zQoevf4a7heO7cdp34olRiTGr07OhwH1IdoO2A7dLMbwahZq6MbRhKZWqxk7rBxTGVbuHmhCgb5qDgmIx_J6XtHHukHTrYYqx_YpzYng8aO4RYayql7hU-1ZJl0akqHBE_D9KLolwL-Dibzc7iSln9XjtqTF1UpMkJ2EmXR-BgQErsN4pxIJKr0RVO1qrxAqaTO4fbc9bKulZm3cfDY3aZDgvFGErWjmzhN7KmfX5rXyDeX8Pt1mU-hXjdBOrtuB97vK4GPUtmJ41XcRMEGDLD8do0nJ73zhUhSlyRw0t3vPqD8cjfLs-axiFgNBrkUd9Ulp50c-GLxlXAVlJX-ffpZyiSn7H0eLCUySZQcQdXlxj4El0Yv_FZvIKElqqGTruVLhzu7VRKCh22_5toOyxsWqLwwzK-cCbYNdg-hy-p9D7sbiZWUnts_wLUOF3CJgQAAA==)):\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport tippy from 'tippy.js';\n\n\tlet content = $state('Hello!');\n\n\t/**\n\t * @param {string} content\n\t * @returns {import('svelte/attachments').Attachment}\n\t */\n\tfunction tooltip(content) {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<button {@attach tooltip(content)}>\n\tHover me\n</button>\n```\n\nSince the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. The same thing would happen for any state read _inside_ the attachment function when it first runs. (If this isn't what you want, see [Controlling when attachments re-run](#Controlling-when-attachments-re-run).)\n\n## Inline attachments\n\nAttachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71Wf3OaWBT9KoyTTnW3MS-I3dYmnWXVtnRAazRJzbozRSQEApiRhwKO333vuY8m225m_9yZGOT9OPfcc84D943UTfxGr_G7K6Xr3TVeNW7D2M8avT_3DVk-YAoDNF4vNB8e2tnWjyXGlm7mPzfurVPpp5JgGmeZtwkf5PtFupCxLzVvHa832rl2lElX-s2Xm2DZFNqp_hs-rZetd4v07ORpT3qmQHu7MF2td0BZp8k6z_xkvfXP902_pZ2_1_aYWEiqm0kN8I4r79qbdZ6umnq3q_2iNf22F4dE6qt2oimwdpim_uY6XMm7Fuo-IQT_iTD_CeGTHwZ38ieIJUFQRxirR1Xf39Dw0X5z0I72Af4tD61vvPNwWKQnqmfPTbduhsEd2J3vO_oBd3dc6fF2X7umNdWGf0vBRhSS6qoV7cCXfTXWfKmvWG61_si_vfU92Wz-E4RhsLhNIYinsox9QKGVd8-tuACCeKXRX12P-T_eKf7fhTq0Hvt-f3ailtSeoxJHRo1-58NoPe1UiBc1hkL8Yeh45y_vQ3mcuNl9T8s3cXPRWLnS7YWJG_gn2Tb4tUjid8jua-PVl08j_ab8I14mH8Llx0s5Tz5Err4ql52r_GYg0mVy1bEGZuD0ze64b5TWYFiM-16wSuJ4JT5vfVpDcztrcG_YkRU4s6HxufzDWF4XuVeJ1P10IbzBemt3Vp1V2e04ZXfrJd7Wicyd039brRIv_RIVu_nXi7X1cfL2sy66ztToUp1TO7qJ7NlwZ0f30pld5qNSVE5o6PbMojFHjgZB7oSicPpGteyLclQap7SvY0dXtM_LR1NT2JFHey3aaxa0VxCeYJ7RMHemoiCcgPZV9pR7o7kgcOjeGliYk9hjDZx8FAq6enwlTPSZj_vYPw9Il64dXdIY8ZmapzwfEd8-1ZyaxWhqkIZOibXUd-6Upqi1pD4uMicCV1GA_7zi73UN8BaF4sC8peJtMjfmjbHZBFwq5ov50qRaE0l96NZggnW4KqypYRAW-uhSz9ADvklwJF2J-5W0Z5fQPBhDX92R6I_0IFxRgDftge4l4dP-gH1hjD7uqU6fsOEZ9UNrCdPB-nys6uXgY6O3ZMd9sy5T9PghqrWHdjo4jB51CgLiKJaDYYA-7WgYONf1FbjkI-mE3EAfUY_rijfuJ_CVPaR50oe9JF7Q0pI8Dw3osxxYHdYPGbp2CnwHF8KvwJv2wEv0Z3ilQI6U9uwbZxbYJXvEmjjQjjCHkvNLvNg3yhzXQd1olamsT4IRrZmX0MUDpwL7R8zzHj7pSh9hPHFSHjLezKqAST51uC5zmtQ87skDUaneLokT5RbXkPWSYz53Abgjc8_o4KFGUZ-Hgv2Z1l5OTYM9D-HfUD0L-EwxH5wRnIG61gS-khfgY1bq7IAP_DA4l5xRuh9xlm8yGjutc8t-wHtkhWv3hc7aqGwiK5KzgvM5xRkZYn193uEln-su55j1GaIv7oM4iPrsVHiG0Dx7TR9-1lBfqFdwfvSd5LNL5xyZVp5NoHFZ57FkfiF6vKs4k5zvIfrX5xX6MXmt0gM5MTu8DjnhukrHHzTRd3jm0dma0_f_x5cxP9f4jBdqHvmbq2fUjzqcKh2Cp-yWj9ntcHanXmBXxhu7Q--eyjhfNFpaV7zgz4nWEUb7zUOhpevjjf_gu_KZ99pxFlZ-T3sttkmYqrco_26q35v0Ewzv5EZPbnL_8BfduWGMnyyN3q0bZ_7hb_7KG_L4CQAA)):\n\n```svelte\n<!--- file: App.svelte --->\n<canvas\n\twidth={32}\n\theight={32}\n\t{@attach (canvas) => {\n\t\tconst context = canvas.getContext('2d');\n\n\t\t$effect(() => {\n\t\t\tcontext.fillStyle = color;\n\t\t\tcontext.fillRect(0, 0, canvas.width, canvas.height);\n\t\t});\n\t}}\n></canvas>\n```\n\n> [!NOTE]\n> The nested effect runs whenever `color` changes, while the outer effect (where `canvas.getContext(...)` is called) only runs once, since it doesn't read any reactive state.\n\n## Passing attachments to components\n\nWhen used on a component, `{@attach ...}` will create a prop whose key is a [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol). If the component then [spreads](/tutorial/svelte/spread-props) props onto an element, the element will receive those attachments.\n\nThis allows you to create _wrapper components_ that augment elements ([demo](/playground/untitled#H4sIAAAAAAAAE3VUS3ObMBD-KxvajnFqsJM2PhA7TXrKob31FjITAbKtRkiMtDhJPfz3LiAMdpxhGJvdb1_fPnaeYjn3Iu-WIbJ04028lZDcetHDzsO3olbVApI74F1RhHbLJdayhFl-Sp5qhVwhufEWNjWiwJtYxSjyQhsEFEXxBiujcxg1_8O_dnQ9APwsEbVyiHDafjrvDZCgkiO4MLCEzxYZcn90z6XUZ6OxA61KlaIgV6i1pFC-sxjDrlbHaDiWRoGvdMbHsLzp5DES0mJnRxGaRBvcBHb7yFUTCQeunEWYcYtGv12TqgFUDbCK1WLaM6IWQhUlQiJUFm2ZLPly51xXMG0Rjoyd69C7UqqG2nu95QZyXvtvLVpri2-SN4hoLXXCZFfhQ8aQBU1VgdEaH_vSgyBZR_BpPp_vi0tY-rw2ulRZkGqpTQRbZvwa2BPgFC8bgbw31CbjJjAsE6WNYBZeGp7vtQXLMqHWnZx-5kM1TR5ycpkZXQR2wzL94l8Ur1C_3-g168SfQf1MyfRi3LW9fs77emJEw5QV9SREoLTq06tcczq7d6xEUcJX2vAhO1b843XK34e5unZEMBr15ekuKEusluWAF8lXhE2ZTP2r2RcIHJ-163FPKerCgYJLOB9i4GvNwviI5-gAQiFFBk3tBTOU3HFXEk0R8o86WvUD64aINhv5K3oRmpJXkw8uxMG6Hh6JY9X7OwGSqfUy9tDG3sHNoEi0d_d_fv9qndxRU0VClFqo3KVo3U655Hnt1PXB3Qra2Y2QGdEwgTAMCxopsoxOe6SD0gD8movDhT0LAnhqlE8gVCpLWnRoV7OJCkFAwEXitrYL1W7p7pbiE_P7XH6E_rihODm5s52XtiH9Ekaw0VgI9exadWL1uoEYjPtg2672k5szsxbKyWB2fdT0w5Y_0hcT8oXOlRetmLS8-g-6TLXXQgYAAA==)):\n\n```svelte\n<!--- file: Button.svelte --->\n<script>\n\t/** @type {import('svelte/elements').HTMLButtonAttributes} */\n\tlet { children, ...props } = $props();\n</script>\n\n<!-- `props` includes attachments -->\n<button {...props}>\n\t{@render children?.()}\n</button>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport tippy from 'tippy.js';\n\timport Button from './Button.svelte';\n\n\tlet content = $state('Hello!');\n\n\t/**\n\t * @param {string} content\n\t * @returns {import('svelte/attachments').Attachment}\n\t */\n\tfunction tooltip(content) {\n\t\treturn (element) => {\n\t\t\tconst tooltip = tippy(element, { content });\n\t\t\treturn tooltip.destroy;\n\t\t};\n\t}\n</script>\n\n<input bind:value={content} />\n\n<Button {@attach tooltip(content)}>\n\tHover me\n</Button>\n```\n\n## Controlling when attachments re-run\n\nAttachments, unlike [actions](use), are fully reactive: `{@attach foo(bar)}` will re-run on changes to `foo` _or_ `bar` (or any state read inside `foo`):\n\n```js\n// @errors: 7006 2304 2552\nfunction foo(bar) {\n\treturn (node) => {\n\t\tveryExpensiveSetupWork(node);\n\t\tupdate(node, bar);\n\t};\n}\n```\n\nIn the rare case that this is a problem (for example, if `foo` does expensive and unavoidable setup work) consider passing the data inside a function and reading it in a child effect:\n\n```js\n// @errors: 7006 2304 2552\nfunction foo(+++getBar+++) {\n\treturn (node) => {\n\t\tveryExpensiveSetupWork(node);\n\n+++\t\t$effect(() => {\n\t\t\tupdate(node, getBar());\n\t\t});+++\n\t}\n}\n```\n\n## Creating attachments programmatically\n\nTo add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).\n\n## Converting actions to attachments\n\nIf you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](svelte-attachments#fromAction), allowing you to (for example) use them with components.",
+		"svelte/@const": "The `{@const ...}` tag defines a local constant.\n\n```svelte\n{#each boxes as box}\n\t{@const area = box.width * box.height}\n\t{box.width} * {box.height} = {area}\n{/each}\n```\n\n`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — a `<Component />` or a `<svelte:boundary>`.",
+		"svelte/@debug": "The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.\n\n```svelte\n<script>\n\tlet user = {\n\t\tfirstname: 'Ada',\n\t\tlastname: 'Lovelace'\n\t};\n</script>\n\n{@debug user}\n\n<h1>Hello {user.firstname}!</h1>\n```\n\n`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).\n\n```svelte\n<!-- Compiles -->\n{@debug user}\n{@debug user1, user2, user3}\n\n<!-- WON'T compile -->\n{@debug user.firstname}\n{@debug myArray[0]}\n{@debug !isReady}\n{@debug typeof user === 'object'}\n```\n\nThe `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.",
+		"svelte/bind": "Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.\n\nThe general syntax is `bind:property={expression}`, where `expression` is an [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:\n\n<!-- prettier-ignore -->\n```svelte\n<input bind:value={value} />\n<input bind:value />\n```\n\n\nSvelte creates an event listener that updates the bound value. If an element already has a listener for the same event, that listener will be fired before the bound value is updated.\n\nMost bindings are _two-way_, meaning that changes to the value will affect the element and vice versa. A few bindings are _readonly_, meaning that changing their value will have no effect on the element.\n\n## Function bindings\n\nYou can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation:\n\n```svelte\n<input bind:value={\n\t() => value,\n\t(v) => value = v.toLowerCase()}\n/>\n```\n\nIn the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`:\n\n```svelte\n<div\n\tbind:clientWidth={null, redraw}\n\tbind:clientHeight={null, redraw}\n>...</div>\n```\n\n> [!NOTE]\n> Function bindings are available in Svelte 5.9.0 and newer.\n\n## `<input bind:value>`\n\nA `bind:value` directive on an `<input>` element binds the input's `value` property:\n\n<!-- prettier-ignore -->\n```svelte\n<script>\n\tlet message = $state('hello');\n</script>\n\n<input bind:value={message} />\n<p>{message}</p>\n```\n\nIn the case of a numeric input (`type=\"number\"` or `type=\"range\"`), the value will be coerced to a number ([demo](/playground/untitled#H4sIAAAAAAAAE6WPwYoCMQxAfyWEPeyiOOqx2w74Hds9pBql0IllmhGXYf5dKqwiyILsLXnwwsuI-5i4oPkaUX8yo7kCnKNQV7dNzoty4qSVBSr8jG-Poixa0KAt2z5mbb14TaxA4OCtKCm_rz4-f2m403WltrlrYhMFTtcLNkoeFGqZ8yhDF7j3CCHKzpwoDexGmqCL4jwuPUJHZ-dxVcfmyYGe5MAv-La5pbxYFf5Z9Zf_UJXb-sEMquFgJJhBmGyTW5yj8lnRaD_w9D1dAKSSj7zqAQAA)):\n\n```svelte\n<script>\n\tlet a = $state(1);\n\tlet b = $state(2);\n</script>\n\n<label>\n\t<input type=\"number\" bind:value={a} min=\"0\" max=\"10\" />\n\t<input type=\"range\" bind:value={a} min=\"0\" max=\"10\" />\n</label>\n\n<label>\n\t<input type=\"number\" bind:value={b} min=\"0\" max=\"10\" />\n\t<input type=\"range\" bind:value={b} min=\"0\" max=\"10\" />\n</label>\n\n<p>{a} + {b} = {a + b}</p>\n```\n\nIf the input is empty or invalid (in the case of `type=\"number\"`), the value is `undefined`.\n\nSince 5.6.0, if an `<input>` has a `defaultValue` and is part of a form, it will revert to that value instead of the empty string when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.\n\n```svelte\n<script>\n\tlet value = $state('');\n</script>\n\n<form>\n\t<input bind:value defaultValue=\"not the empty string\">\n\t<input type=\"reset\" value=\"Reset\">\n</form>\n```\n\n> [!NOTE]\n> Use reset buttons sparingly, and ensure that users won't accidentally click them while trying to submit the form.\n\n## `<input bind:checked>`\n\nCheckbox inputs can be bound with `bind:checked`:\n\n```svelte\n<label>\n\t<input type=\"checkbox\" bind:checked={accepted} />\n\tAccept terms and conditions\n</label>\n```\n\nSince 5.6.0, if an `<input>` has a `defaultChecked` attribute and is part of a form, it will revert to that value instead of `false` when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.\n\n```svelte\n<script>\n\tlet checked = $state(true);\n</script>\n\n<form>\n\t<input type=\"checkbox\" bind:checked defaultChecked={true}>\n\t<input type=\"reset\" value=\"Reset\">\n</form>\n```\n\n> [!NOTE] Use `bind:group` for radio inputs instead of `bind:checked`.\n\n## `<input bind:indeterminate>`\n\nCheckboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate) state, independently of whether they are checked or unchecked:\n\n```svelte\n<script>\n\tlet checked = $state(false);\n\tlet indeterminate = $state(true);\n</script>\n\n<form>\n\t<input type=\"checkbox\" bind:checked bind:indeterminate>\n\n\t{#if indeterminate}\n\t\twaiting...\n\t{:else if checked}\n\t\tchecked\n\t{:else}\n\t\tunchecked\n\t{/if}\n</form>\n```\n\n## `<input bind:group>`\n\nInputs that work together can use `bind:group` ([demo](/playground/untitled#H4sIAAAAAAAAE62T32_TMBDH_5XDQkpbrct7SCMGEvCEECDxsO7BSW6L2c227EvbKOv_jp0f6jYhQKJv5_P3PvdL1wstH1Bk4hMSGdgbRzUssFaM9VJciFtF6EV23QvubNRFR_BPUVfWXvodEkdfKT3-zl8Zzag5YETuK6csF1u9ZUIGNo4VkYQNvPYsGRfJF5JKJ8s3QRJE6WoFb2Nq6K-ck13u2Sl9Vxxhlc6QUBIFnz9Brm9ifJ6esun81XoNd860FmtwslYGlLYte5AO4aHlVhJ1gIeKWq92COt1iMtJlkhFPkgh1rHZiiF6K6BUus4G5KafGznCTlIbVUMfQZUWMJh5OrL-C_qjMYSwb1DyiH7iOEuCb1ZpWTUjfHqcwC_GWDVY3ZfmME_SGttSmD9IHaYatvWHIc6xLyqad3mq6KuqcCwnWn9p8p-p71BqP2IH81zc9w2in-od7XORP7ayCpd5YCeXI_-p59mObPF9WmwGpx3nqS2Gzw8TO3zOaS5_GqUXyQUkS3h8hOSz0ZhMESHGc0c4Hm3MAn00t1wrb0l2GZRkqvt4sXwczm6Qh8vnUJzI2LV4vAkvqWgfehTZrSSPx19WiVfFfAQAAA==)):\n\n```svelte\n<!--- file: BurritoChooser.svelte --->\n<script>\n\tlet tortilla = $state('Plain');\n\n\t/** @type {string[]} */\n\tlet fillings = $state([]);\n</script>\n\n<!-- grouped radio inputs are mutually exclusive -->\n<label><input type=\"radio\" bind:group={tortilla} value=\"Plain\" /> Plain</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Whole wheat\" /> Whole wheat</label>\n<label><input type=\"radio\" bind:group={tortilla} value=\"Spinach\" /> Spinach</label>\n\n<!-- grouped checkbox inputs populate an array -->\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Rice\" /> Rice</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Beans\" /> Beans</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Cheese\" /> Cheese</label>\n<label><input type=\"checkbox\" bind:group={fillings} value=\"Guac (extra)\" /> Guac (extra)</label>\n```\n\n> [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.\n\n## `<input bind:files>`\n\nOn `<input>` elements with `type=\"file\"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). When you want to update the files programmatically, you always need to use a `FileList` object. Currently `FileList` objects cannot be constructed directly, so you need to create a new [`DataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object and get `files` from there.\n\n```svelte\n<script>\n\tlet files = $state();\n\n\tfunction clear() {\n\t\tfiles = new DataTransfer().files; // null or undefined does not work\n\t}\n</script>\n\n<label for=\"avatar\">Upload a picture:</label>\n<input accept=\"image/png, image/jpeg\" bind:files id=\"avatar\" name=\"avatar\" type=\"file\" />\n<button onclick={clear}>clear</button>\n```\n\n`FileList` objects also cannot be modified, so if you want to e.g. delete a single file from the list, you need to create a new `DataTransfer` object and add the files you want to keep.\n\n> [!NOTE] `DataTransfer` may not be available in server-side JS runtimes. Leaving the state that is bound to `files` uninitialized prevents potential errors if components are server-side rendered.\n\n## `<select bind:value>`\n\nA `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).\n\n```svelte\n<select bind:value={selected}>\n\t<option value={a}>a</option>\n\t<option value={b}>b</option>\n\t<option value={c}>c</option>\n</select>\n```\n\nA `<select multiple>` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected `<option>`.\n\n```svelte\n<select multiple bind:value={fillings}>\n\t<option value=\"Rice\">Rice</option>\n\t<option value=\"Beans\">Beans</option>\n\t<option value=\"Cheese\">Cheese</option>\n\t<option value=\"Guac (extra)\">Guac (extra)</option>\n</select>\n```\n\nWhen the value of an `<option>` matches its text content, the attribute can be omitted.\n\n```svelte\n<select multiple bind:value={fillings}>\n\t<option>Rice</option>\n\t<option>Beans</option>\n\t<option>Cheese</option>\n\t<option>Guac (extra)</option>\n</select>\n```\n\nYou can give the `<select>` a default value by adding a `selected` attribute to the`<option>` (or options, in the case of `<select multiple>`) that should be initially selected. If the `<select>` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`.\n\n```svelte\n<select bind:value={selected}>\n\t<option value={a}>a</option>\n\t<option value={b} selected>b</option>\n\t<option value={c}>c</option>\n</select>\n```\n\n## `<audio>`\n\n`<audio>` elements have their own set of bindings — five two-way ones...\n\n- [`currentTime`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime)\n- [`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate)\n- [`paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused)\n- [`volume`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume)\n- [`muted`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted)\n\n...and six readonly ones:\n\n- [`duration`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration)\n- [`buffered`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered)\n- [`seekable`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable)\n- [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event)\n- [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended)\n- [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState)\n- [`played`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played)\n\n```svelte\n<audio src={clip} bind:duration bind:currentTime bind:paused></audio>\n```\n\n## `<video>`\n\n`<video>` elements have all the same bindings as [`<audio>`](#audio) elements, plus readonly [`videoWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) and [`videoHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) bindings.\n\n## `<img>`\n\n`<img>` elements have two readonly bindings:\n\n- [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth)\n- [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight)\n\n## `<details bind:open>`\n\n`<details>` elements support binding to the `open` property.\n\n```svelte\n<details bind:open={isOpen}>\n\t<summary>How do you comfort a JavaScript bug?</summary>\n\t<p>You console it.</p>\n</details>\n```\n\n## `window` and `document`\n\nTo bind to properties of `window` and `document`, see [`<svelte:window>`](svelte-window) and [`<svelte:document>`](svelte-document).\n\n## Contenteditable bindings\n\nElements with the `contenteditable` attribute support the following bindings:\n\n- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)\n- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)\n- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)\n\n> [!NOTE] There are [subtle differences between `innerText` and `textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext).\n\n<!-- for some reason puts the comment and html on same line -->\n<!-- prettier-ignore -->\n```svelte\n<div contenteditable=\"true\" bind:innerHTML={html}></div>\n```\n\n## Dimensions\n\nAll visible elements have the following readonly bindings, measured with a `ResizeObserver`:\n\n- [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)\n- [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)\n- [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)\n- [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)\n- [`contentRect`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\n- [`contentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize)\n- [`borderBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize)\n- [`devicePixelContentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize)\n\n```svelte\n<div bind:offsetWidth={width} bind:offsetHeight={height}>\n\t<Chart {width} {height} />\n</div>\n```\n\n> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`. Note that CSS transformations do not trigger `ResizeObserver` callbacks.\n\n## bind:this\n\n```svelte\n<!--- copy: false --->\nbind:this={dom_node}\n```\n\nTo get a reference to a DOM node, use `bind:this`. The value will be `undefined` until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation:\n\n```svelte\n<script>\n\t/** @type {HTMLCanvasElement} */\n\tlet canvas;\n\n\t$effect(() => {\n\t\tconst ctx = canvas.getContext('2d');\n\t\tdrawStuff(ctx);\n\t});\n</script>\n\n<canvas bind:this={canvas}></canvas>\n```\n\nComponents also support `bind:this`, allowing you to interact with component instances programmatically.\n\n```svelte\n<!--- file: App.svelte --->\n<ShoppingCart bind:this={cart} />\n\n<button onclick={() => cart.empty()}> Empty shopping cart </button>\n```\n\n```svelte\n<!--- file: ShoppingCart.svelte --->\n<script>\n\t// All instance exports are available on the instance object\n\texport function empty() {\n\t\t// ...\n\t}\n</script>\n```\n\n> [!NOTE] In case of using [the function bindings](#Function-bindings), the getter is required to ensure that the correct value is nullified on component or element destruction.\n\n## bind:_property_ for components\n\n```svelte\nbind:property={variable}\n```\n\nYou can bind to component props using the same syntax as for elements.\n\n```svelte\n<Keypad bind:value={pin} />\n```\n\nWhile Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using `bind:property` allows changes to the property from within the component to flow back up out of the component.\n\nTo mark a property as bindable, use the [`$bindable`]($bindable) rune:\n\n```svelte\n<script>\n\tlet { readonlyProperty, bindableProperty = $bindable() } = $props();\n</script>\n```\n\nDeclaring a property as bindable means it _can_ be used using `bind:`, not that it _must_ be used using `bind:`.\n\nBindable properties can have a fallback value:\n\n```svelte\n<script>\n\tlet { bindableProperty = $bindable('fallback value') } = $props();\n</script>\n```\n\nThis fallback value _only_ applies when the property is _not_ bound. When the property is bound and a fallback value is present, the parent is expected to provide a value other than `undefined`, else a runtime error is thrown. This prevents hard-to-reason-about situations where it's unclear which value should apply.",
+		"svelte/use": "> [!NOTE]\n> In Svelte 5.29 and newer, consider using [attachments](@attach) instead, as they are more flexible and composable.\n\nActions are functions that are called when an element is mounted. They are added with the `use:` directive, and will typically use an `$effect` so that they can reset any state when the element is unmounted:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {import('svelte/action').Action} */\n\tfunction myaction(node) {\n\t\t// the node has been mounted in the DOM\n\n\t\t$effect(() => {\n\t\t\t// setup goes here\n\n\t\t\treturn () => {\n\t\t\t\t// teardown goes here\n\t\t\t};\n\t\t});\n\t}\n</script>\n\n<div use:myaction>...</div>\n```\n\nAn action can be called with an argument:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {import('svelte/action').Action} */\n\tfunction myaction(node, +++data+++) {\n\t\t// ...\n\t}\n</script>\n\n<div use:myaction={+++data+++}>...</div>\n```\n\nThe action is only called once (but not during server-side rendering) — it will _not_ run again if the argument changes.\n\n> [!LEGACY]\n> Prior to the `$effect` rune, actions could return an object with `update` and `destroy` methods, where `update` would be called with the latest value of the argument if it changed. Using effects is preferred.\n\n## Typing\n\nThe `Action` interface receives three optional type arguments — a node type (which can be `Element`, if the action applies to everything), a parameter, and any custom event handlers created by the action:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/**\n\t * @type {import('svelte/action').Action<\n\t * \tHTMLDivElement,\n\t * \tundefined,\n\t * \t{\n\t * \t\tonswiperight: (e: CustomEvent) => void;\n\t * \t\tonswipeleft: (e: CustomEvent) => void;\n\t * \t\t// ...\n\t * \t}\n\t * >}\n\t */\n\tfunction gestures(node) {\n\t\t$effect(() => {\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swipeleft'));\n\n\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swiperight'));\n\t\t});\n\t}\n</script>\n\n<div\n\tuse:gestures\n\tonswipeleft={next}\n\tonswiperight={prev}\n>...</div>\n```",
+		"svelte/transition": "A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change.\n\nWhen a block (such as an `{#if ...}` block) is transitioning out, all elements inside it, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed.\n\nThe `transition:` directive indicates a _bidirectional_ transition, which means it can be smoothly reversed while the transition is in progress.\n\n```svelte\n<script>\n\t+++import { fade } from 'svelte/transition';+++\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>toggle</button>\n\n{#if visible}\n\t<div +++transition:fade+++>fades in and out</div>\n{/if}\n```\n\n## Local vs global\n\nTransitions are local by default. Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed.\n\n```svelte\n{#if x}\n\t{#if y}\n\t\t<p transition:fade>fades in and out only when y changes</p>\n\n\t\t<p transition:fade|global>fades in and out when x or y change</p>\n\t{/if}\n{/if}\n```\n\n## Built-in transitions\n\nA selection of built-in transitions can be imported from the [`svelte/transition`](svelte-transition) module.\n\n## Transition parameters\n\nTransitions can have parameters.\n\n(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)\n\n```svelte\n{#if visible}\n\t<div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div>\n{/if}\n```\n\n## Custom transition functions\n\n```js\n/// copy: false\n// @noErrors\ntransition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {\n\tdelay?: number,\n\tduration?: number,\n\teasing?: (t: number) => number,\n\tcss?: (t: number, u: number) => string,\n\ttick?: (t: number, u: number) => void\n}\n```\n\nTransitions can use custom functions. If the returned object has a `css` function, Svelte will generate keyframes for a [web animation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\nThe `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.\n\nThe function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { elasticOut } from 'svelte/easing';\n\n\t/** @type {boolean} */\n\texport let visible;\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ delay?: number, duration?: number, easing?: (t: number) => number }} params\n\t */\n\tfunction whoosh(node, params) {\n\t\tconst existingTransform = getComputedStyle(node).transform.replace('none', '');\n\n\t\treturn {\n\t\t\tdelay: params.delay || 0,\n\t\t\tduration: params.duration || 400,\n\t\t\teasing: params.easing || elasticOut,\n\t\t\tcss: (t, u) => `transform: ${existingTransform} scale(${t})`\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<div in:whoosh>whooshes in</div>\n{/if}\n```\n\nA custom transition function can also return a `tick` function, which is called _during_ the transition with the same `t` and `u` arguments.\n\n> [!NOTE] If it's possible to use `css` instead of `tick`, do so — web animations can run off the main thread, preventing jank on slower devices.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\texport let visible = false;\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ speed?: number }} params\n\t */\n\tfunction typewriter(node, { speed = 1 }) {\n\t\tconst valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;\n\n\t\tif (!valid) {\n\t\t\tthrow new Error(`This transition only works on elements with a single text node child`);\n\t\t}\n\n\t\tconst text = node.textContent;\n\t\tconst duration = text.length / (speed * 0.01);\n\n\t\treturn {\n\t\t\tduration,\n\t\t\ttick: (t) => {\n\t\t\t\tconst i = ~~(text.length * t);\n\t\t\t\tnode.textContent = text.slice(0, i);\n\t\t\t}\n\t\t};\n\t}\n</script>\n\n{#if visible}\n\t<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>\n{/if}\n```\n\nIf a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible.\n\nTransition functions also receive a third argument, `options`, which contains information about the transition.\n\nAvailable values in the `options` object are:\n\n- `direction` - one of `in`, `out`, or `both` depending on the type of transition\n\n## Transition events\n\nAn element with transitions will dispatch the following events in addition to any standard DOM events:\n\n- `introstart`\n- `introend`\n- `outrostart`\n- `outroend`\n\n```svelte\n{#if visible}\n\t<p\n\t\ttransition:fly={{ y: 200, duration: 2000 }}\n\t\tonintrostart={() => (status = 'intro started')}\n\t\tonoutrostart={() => (status = 'outro started')}\n\t\tonintroend={() => (status = 'intro ended')}\n\t\tonoutroend={() => (status = 'outro ended')}\n\t>\n\t\tFlies in and out\n\t</p>\n{/if}\n```",
+		"svelte/in-and-out": "The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.\n\n```svelte\n<script>\n  import { fade, fly } from 'svelte/transition';\n  \n  let visible = $state(false);\n</script>\n\n<label>\n  <input type=\"checkbox\" bind:checked={visible}>\n  visible\n</label>\n\n{#if visible}\n\t<div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>\n{/if}\n```",
+		"svelte/animate": "An animation is triggered when the contents of a [keyed each block](each#Keyed-each-blocks) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.\n\nAnimations can be used with Svelte's [built-in animation functions](svelte-animate) or [custom animation functions](#Custom-animation-functions).\n\n```svelte\n<!-- When `list` is reordered the animation will run -->\n{#each list as item, index (item)}\n\t<li animate:flip>{item}</li>\n{/each}\n```\n\n## Animation Parameters\n\nAs with actions and transitions, animations can have parameters.\n\n(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)\n\n```svelte\n{#each list as item, index (item)}\n\t<li animate:flip={{ delay: 500 }}>{item}</li>\n{/each}\n```\n\n## Custom animation functions\n\n```js\n/// copy: false\n// @noErrors\nanimation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {\n\tdelay?: number,\n\tduration?: number,\n\teasing?: (t: number) => number,\n\tcss?: (t: number, u: number) => string,\n\ttick?: (t: number, u: number) => void\n}\n```\n\nAnimations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, and the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.\n\nIf the returned object has a `css` method, Svelte will create a [web animation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) that plays on the element.\n\nThe `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to `1 - t`.\n\nThe function is called repeatedly _before_ the animation begins, with different `t` and `u` arguments.\n\n<!-- TODO: Types -->\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { cubicOut } from 'svelte/easing';\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ from: DOMRect; to: DOMRect }} states\n\t * @param {any} params\n\t */\n\tfunction whizz(node, { from, to }, params) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\tcss: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```\n\nA custom animation function can also return a `tick` function, which is called _during_ the animation with the same `t` and `u` arguments.\n\n> [!NOTE] If it's possible to use `css` instead of `tick`, do so — web animations can run off the main thread, preventing jank on slower devices.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { cubicOut } from 'svelte/easing';\n\n\t/**\n\t * @param {HTMLElement} node\n\t * @param {{ from: DOMRect; to: DOMRect }} states\n\t * @param {any} params\n\t */\n\tfunction whizz(node, { from, to }, params) {\n\t\tconst dx = from.left - to.left;\n\t\tconst dy = from.top - to.top;\n\n\t\tconst d = Math.sqrt(dx * dx + dy * dy);\n\n\t\treturn {\n\t\t\tdelay: 0,\n\t\t\tduration: Math.sqrt(d) * 120,\n\t\t\teasing: cubicOut,\n\t\t\ttick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })\n\t\t};\n\t}\n</script>\n\n{#each list as item, index (item)}\n\t<div animate:whizz>{item}</div>\n{/each}\n```",
+		"svelte/style": "The `style:` directive provides a shorthand for setting multiple styles on an element.\n\n```svelte\n<!-- These are equivalent -->\n<div style:color=\"red\">...</div>\n<div style=\"color: red;\">...</div>\n```\n\nThe value can contain arbitrary expressions:\n\n```svelte\n<div style:color={myColor}>...</div>\n```\n\nThe shorthand form is allowed:\n\n```svelte\n<div style:color>...</div>\n```\n\nMultiple styles can be set on a single element:\n\n```svelte\n<div style:color style:width=\"12rem\" style:background-color={darkMode ? 'black' : 'white'}>...</div>\n```\n\nTo mark a style as important, use the `|important` modifier:\n\n```svelte\n<div style:color|important=\"red\">...</div>\n```\n\nWhen `style:` directives are combined with `style` attributes, the directives will take precedence,\neven over `!important` properties:\n\n```svelte\n<div style:color=\"red\" style=\"color: blue\">This will be red</div>\n<div style:color=\"red\" style=\"color: blue !important\">This will still be red</div>\n```",
+		"svelte/class": "There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.\n\n## Attributes\n\nPrimitive values are treated like any other attribute:\n\n```svelte\n<div class={large ? 'large' : 'small'}>...</div>\n```\n\n> [!NOTE]\n> For historical reasons, falsy values (like `false` and `NaN`) are stringified (`class=\"false\"`), though `class={undefined}` (or `null`) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause `class` to be omitted.\n\n### Objects and arrays\n\nSince Svelte 5.16, `class` can be an object or array, and is converted to a string using [clsx](https://github.com/lukeed/clsx).\n\nIf the value is an object, the truthy keys are added:\n\n```svelte\n<script>\n\tlet { cool } = $props();\n</script>\n\n<!-- results in `class=\"cool\"` if `cool` is truthy,\n     `class=\"lame\"` otherwise -->\n<div class={{ cool, lame: !cool }}>...</div>\n```\n\nIf the value is an array, the truthy values are combined:\n\n```svelte\n<!-- if `faded` and `large` are both truthy, results in\n     `class=\"saturate-0 opacity-50 scale-200\"` -->\n<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>\n```\n\nNote that whether we're using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you're using things like Tailwind.\n\nArrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example:\n\n```svelte\n<!--- file: Button.svelte --->\n<script>\n\tlet props = $props();\n</script>\n\n<button {...props} class={['cool-button', props.class]}>\n\t{@render props.children?.()}\n</button>\n```\n\nThe user of this component has the same flexibility to use a mixture of objects, arrays and strings:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Button from './Button.svelte';\n\tlet useTailwind = $state(false);\n</script>\n\n<Button\n\tonclick={() => useTailwind = true}\n\tclass={{ 'bg-blue-700 sm:w-1/2': useTailwind }}\n>\n\tAccept the inevitability of Tailwind\n</Button>\n```\n\nSince Svelte 5.19, Svelte also exposes the `ClassValue` type, which is the type of value that the `class` attribute on elements accept. This is useful if you want to use a type-safe class name in component props:\n\n```svelte\n<script lang=\"ts\">\n\timport type { ClassValue } from 'svelte/elements';\n\n\tconst props: { class: ClassValue } = $props();\n</script>\n\n<div class={['original', props.class]}>...</div>\n```\n\n## The `class:` directive\n\nPrior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally.\n\n```svelte\n<!-- These are equivalent -->\n<div class={{ cool, lame: !cool }}>...</div>\n<div class:cool={cool} class:lame={!cool}>...</div>\n```\n\nAs with other directives, we can use a shorthand when the name of the class coincides with the value:\n\n```svelte\n<div class:cool class:lame={!cool}>...</div>\n```\n\n> [!NOTE] Unless you're using an older version of Svelte, consider avoiding `class:`, since the attribute is more powerful and composable.",
+		"svelte/await-expressions": "As of Svelte 5.36, you can use the `await` keyword inside your components in three places where it was previously unavailable:\n\n- at the top level of your component's `<script>`\n- inside `$derived(...)` declarations\n- inside your markup\n\nThis feature is currently experimental, and you must opt in by adding the `experimental.async` option wherever you [configure](/docs/kit/configuration) Svelte, usually `svelte.config.js`:\n\n```js\n/// file: svelte.config.js\nexport default {\n\tcompilerOptions: {\n\t\texperimental: {\n\t\t\tasync: true\n\t\t}\n\t}\n};\n```\n\nThe experimental flag will be removed in Svelte 6.\n\n## Synchronized updates\n\nWhen an `await` expression depends on a particular piece of state, changes to that state will not be reflected in the UI until the asynchronous work has completed, so that the UI is not left in an inconsistent state. In other words, in an example like [this](/playground/untitled#H4sIAAAAAAAAE42QsWrDQBBEf2VZUkhYRE4gjSwJ0qVMkS6XYk9awcFpJe5Wdoy4fw-ycdykSPt2dpiZFYVGxgrf2PsJTlPwPWTcO-U-xwIH5zli9bminudNtwEsbl-v8_wYj-x1Y5Yi_8W7SZRFI1ZYxy64WVsjRj0rEDTwEJWUs6f8cKP2Tp8vVIxSPEsHwyKdukmA-j6jAmwO63Y1SidyCsIneA_T6CJn2ZBD00Jk_XAjT4tmQwEv-32eH6AsgYK6wXWOPPTs6Xy1CaxLECDYgb3kSUbq8p5aaifzorCt0RiUZbQcDIJ10ldH8gs3K6X2Xzqbro5zu1KCHaw2QQPrtclvwVSXc2sEC1T-Vqw0LJy-ClRy_uSkx2ogHzn9ADZ1CubKAQAA)...\n\n```svelte\n<script>\n\tlet a = $state(1);\n\tlet b = $state(2);\n\n\tasync function add(a, b) {\n\t\tawait new Promise((f) => setTimeout(f, 500)); // artificial delay\n\t\treturn a + b;\n\t}\n</script>\n\n<input type=\"number\" bind:value={a}>\n<input type=\"number\" bind:value={b}>\n\n<p>{a} + {b} = {await add(a, b)}</p>\n```\n\n...if you increment `a`, the contents of the `<p>` will _not_ immediately update to read this —\n\n```html\n<p>2 + 2 = 3</p>\n```\n\n— instead, the text will update to `2 + 2 = 4` when `add(a, b)` resolves.\n\nUpdates can overlap — a fast update will be reflected in the UI while an earlier slow update is still ongoing.\n\n## Concurrency\n\nSvelte will do as much asynchronous work as it can in parallel. For example if you have two `await` expressions in your markup...\n\n```svelte\n<p>{await one()}</p>\n<p>{await two()}</p>\n```\n\n...both functions will run at the same time, as they are independent expressions, even though they are _visually_ sequential.\n\nThis does not apply to sequential `await` expressions inside your `<script>` or inside async functions — these run like any other asynchronous JavaScript. An exception is that independent `$derived` expressions will update independently, even though they will run sequentially when they are first created:\n\n```js\nasync function one() { return 1; }\nasync function two() { return 2; }\n// ---cut---\n// these will run sequentially the first time,\n// but will update independently\nlet a = $derived(await one());\nlet b = $derived(await two());\n```\n\n> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning\n\n## Indicating loading states\n\nTo render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](svelte-boundary#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.\n\nAfter the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`]($effect#$effect.pending). This is what you would use to display a \"we're asynchronously validating your input\" spinner next to a form field, for example.\n\nYou can also use [`settled()`](svelte#settled) to get a promise that resolves when the current update is complete:\n\n```js\nlet color = 'red';\nlet answer = -1;\nlet updating = false;\n// ---cut---\nimport { tick, settled } from 'svelte';\n\nasync function onclick() {\n\tupdating = true;\n\n\t// without this, the change to `updating` will be\n\t// grouped with the other changes, meaning it\n\t// won't be reflected in the UI\n\tawait tick();\n\n\tcolor = 'octarine';\n\tanswer = 42;\n\n\tawait settled();\n\n\t// any updates affected by `color` or `answer`\n\t// have now been applied\n\tupdating = false;\n}\n```\n\n## Error handling\n\nErrors in `await` expressions will bubble to the nearest [error boundary](svelte-boundary).\n\n## Server-side rendering\n\nSvelte supports asynchronous server-side rendering (SSR) with the `render(...)` API. To use it, simply await the return value:\n\n```js\n/// file: server.js\nimport { render } from 'svelte/server';\nimport App from './App.svelte';\n\nconst { head, body } = +++await+++ render(App);\n```\n\n> [!NOTE] If you're using a framework like SvelteKit, this is done on your behalf.\n\nIf a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, that snippet will be rendered while the rest of the content is ignored. All `await` expressions encountered outside boundaries with `pending` snippets will resolve and render their contents prior to `await render(...)` returning.\n\n> [!NOTE] In the future, we plan to add a streaming implementation that renders the content in the background.\n\n## Caveats\n\nAs an experimental feature, the details of how `await` is handled (and related APIs like `$effect.pending()`) are subject to breaking changes outside of a semver major release, though we intend to keep such changes to a bare minimum.\n\n## Breaking changes\n\nEffects run in a slightly different order when the `experimental.async` option is `true`. Specifically, _block_ effects like `{#if ...}` and `{#each ...}` now run before an `$effect.pre` or `beforeUpdate` in the same component, which means that in [very rare situations](/playground/untitled?#H4sIAAAAAAAAE22R3VLDIBCFX2WLvUhnTHsf0zre-Q7WmfwtFV2BgU1rJ5N3F0jaOuoVcPbw7VkYhK4_URTiGYkMnIyjDjLsFGO3EvdCKkIvipdB8NlGXxSCPt96snbtj0gctab2-J_eGs2oOWBE6VunLO_2es-EDKZ5x5ZhC0vPNWM2gHXGouNzAex6hHH1cPHil_Lsb95YT9VQX6KUAbS2DrNsBdsdDFHe8_XSYjH1SrhELTe3MLpsemajweiWVPuxHSbKNd-8eQTdE0EBf4OOaSg2hwNhhE_ABB_ulJzjj9FULvIcqgm5vnAqUB7wWFMfhuugQWkcAr8hVD-mq8D12kOep24J_IszToOXdveGDsuNnZwbJUNlXsKnhJdhUcTo42s41YpOSneikDV5HL8BktM6yRcCAAA=) it is possible to update a block that should no longer exist, but only if you update state inside an effect, [which you should avoid]($effect#When-not-to-use-$effect).",
+		"svelte/scoped-styles": "Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question.\n\nThis works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz`).\n\n```svelte\n<style>\n\tp {\n\t\t/* this will only affect <p> elements in this component */\n\t\tcolor: burlywood;\n\t}\n</style>\n```\n\n## Specificity\n\nEach scoped selector receives a [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) increase of 0-1-0, as a result of the scoping class (e.g. `.svelte-123xyz`) being added to the selector. This means that (for example) a `p` selector defined in a component will take precedence over a `p` selector defined in a global stylesheet, even if the global stylesheet is loaded later.\n\nIn some cases, the scoping class must be added to a selector multiple times, but after the first occurrence it is added with `:where(.svelte-xyz123)` in order to not increase specificity further.\n\n## Scoped keyframes\n\nIf a component defines `@keyframes`, the name is scoped to the component using the same hashing approach. Any `animation` rules in the component will be similarly adjusted:\n\n```svelte\n<style>\n\t.bouncy {\n\t\tanimation: bounce 10s;\n\t}\n\n\t/* these keyframes are only accessible inside this component */\n\t@keyframes bounce {\n\t\t/* ... */\n\t}\n</style>\n```",
+		"svelte/global-styles": "## :global(...)\n\nTo apply styles to a single selector globally, use the `:global(...)` modifier:\n\n```svelte\n<style>\n\t:global(body) {\n\t\t/* applies to <body> */\n\t\tmargin: 0;\n\t}\n\n\tdiv :global(strong) {\n\t\t/* applies to all <strong> elements, in any component,\n\t\t   that are inside <div> elements belonging\n\t\t   to this component */\n\t\tcolor: goldenrod;\n\t}\n\n\tp:global(.big.red) {\n\t\t/* applies to all <p> elements belonging to this component\n\t\t   with `class=\"big red\"`, even if it is applied\n\t\t   programmatically (for example by a library) */\n\t}\n</style>\n```\n\nIf you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.\n\nThe `-global-` part will be removed when compiled, and the keyframe will then be referenced using just `my-animation-name` elsewhere in your code.\n\n```svelte\n<style>\n\t@keyframes -global-my-animation-name {\n\t\t/* code goes here */\n\t}\n</style>\n```\n\n## :global\n\nTo apply styles to a group of selectors globally, create a `:global {...}` block:\n\n```svelte\n<style>\n\t:global {\n\t\t/* applies to every <div> in your application */\n\t\tdiv { ... }\n\n\t\t/* applies to every <p> in your application */\n\t\tp { ... }\n\t}\n\n\t.a :global {\n\t\t/* applies to every `.b .c .d` element, in any component,\n\t\t   that is inside an `.a` element in this component */\n\t\t.b .c .d {...}\n\t}\n</style>\n```\n\n> [!NOTE] The second example above could also be written as an equivalent `.a :global .b .c .d` selector, where everything after the `:global` is unscoped, though the nested form is preferred.",
+		"svelte/custom-properties": "You can pass CSS custom properties — both static and dynamic — to components:\n\n```svelte\n<Slider\n\tbind:value\n\tmin={0}\n\tmax={100}\n\t--track-color=\"black\"\n\t--thumb-color=\"rgb({r} {g} {b})\"\n/>\n```\n\nThe above code essentially desugars to this:\n\n```svelte\n<svelte-css-wrapper style=\"display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})\">\n\t<Slider\n\t\tbind:value\n\t\tmin={0}\n\t\tmax={100}\n\t/>\n</svelte-css-wrapper>\n```\n\nFor an SVG element, it would use `<g>` instead:\n\n```svelte\n<g style=\"--track-color: black; --thumb-color: rgb({r} {g} {b})\">\n\t<Slider\n\t\tbind:value\n\t\tmin={0}\n\t\tmax={100}\n\t/>\n</g>\n```\n\nInside the component, we can read these custom properties (and provide fallback values) using [`var(...)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):\n\n```svelte\n<style>\n\t.track {\n\t\tbackground: var(--track-color, #aaa);\n\t}\n\n\t.thumb {\n\t\tbackground: var(--thumb-color, blue);\n\t}\n</style>\n```\n\nYou don't _have_ to specify the values directly on the component; as long as the custom properties are defined on a parent element, the component can use them. It's common to define custom properties on the `:root` element in a global stylesheet so that they apply to your entire application.\n\n> [!NOTE] While the extra element will not affect layout, it _will_ affect any CSS selectors that (for example) use the `>` combinator to target an element directly inside the component's container.",
+		"svelte/nested-style-elements": "There can only be one top-level `<style>` tag per component.\n\nHowever, it is possible to have a `<style>` tag nested inside other elements or logic blocks.\n\nIn that case, the `<style>` tag will be inserted as-is into the DOM; no scoping or processing will be done on the `<style>` tag.\n\n```svelte\n<div>\n\t<style>\n\t\t/* this style tag will be inserted as-is */\n\t\tdiv {\n\t\t\t/* this will apply to all `<div>` elements in the DOM */\n\t\t\tcolor: red;\n\t\t}\n\t</style>\n</div>\n```",
+		"svelte/svelte-boundary": "```svelte\n<svelte:boundary onerror={handler}>...</svelte:boundary>\n```\n\n> [!NOTE]\n> This feature was added in 5.3.0\n\nBoundaries allow you to 'wall off' parts of your app, so that you can:\n\n- provide UI that should be shown when [`await`](await-expressions) expressions are first resolving\n- handle errors that occur during rendering or while running effects, and provide UI that should be rendered when an error happens\n\nIf a boundary handles an error (with a `failed` snippet or `onerror` handler, or both) its existing content will be removed.\n\n> [!NOTE] Errors occurring outside the rendering process (for example, in event handlers or after a `setTimeout` or async work) are _not_ caught by error boundaries.\n\n## Properties\n\nFor the boundary to do anything, one or more of the following must be provided.\n\n### `pending`\n\nThis snippet will be shown when the boundary is first created, and will remain visible until all the [`await`](await-expressions) expressions inside the boundary have resolved ([demo](/playground/untitled#H4sIAAAAAAAAE21QQW6DQAz8ytY9BKQVpFdKkPqDHnorPWzAaSwt3tWugUaIv1eE0KpKD5as8YxnNBOw6RAKKOOAVrA4up5bEy6VGknOyiO3xJ8qMnmPAhpOZDFC8T6BXPyiXADQ258X77P1FWg4moj_4Y1jQZZ49W0CealqruXUcyPkWLVozQXbZDC2R606spYiNo7bqA7qab_fp2paFLUElD6wYhzVa3AdRUySgNHZAVN1qDZaLRHljTp0vSTJ9XJjrSbpX5f0eZXN6zLXXOa_QfmurIVU-moyoyH5ib87o7XuYZfOZe6vnGWmx1uZW7lJOq9upa-sMwuUZdkmmfIbfQ1xZwwaBL8ECgk9zh8axJAdiVsoTsZGnL8Bg4tX_OMBAAA=)):\n\n```svelte\n<svelte:boundary>\n\t<p>{await delayed('hello!')}</p>\n\n\t{#snippet pending()}\n\t\t<p>loading...</p>\n\t{/snippet}\n</svelte:boundary>\n```\n\nThe `pending` snippet will _not_ be shown for subsequent async updates — for these, you can use [`$effect.pending()`]($effect#$effect.pending).\n\n> [!NOTE] In the [playground](/playground), your app is rendered inside a boundary with an empty pending snippet, so that you can use `await` without having to create one.\n\n\n### `failed`\n\nIf a `failed` snippet is provided, it will be rendered when an error is thrown inside the boundary, with the `error` and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):\n\n```svelte\n<svelte:boundary>\n\t<FlakyComponent />\n\n\t{#snippet failed(error, reset)}\n\t\t<button onclick={reset}>oops! try again</button>\n\t{/snippet}\n</svelte:boundary>\n```\n\n> [!NOTE]\n> As with [snippets passed to components](snippet#Passing-snippets-to-components), the `failed` snippet can be passed explicitly as a property...\n>\n> ```svelte\n> <svelte:boundary {failed}>...</svelte:boundary>\n> ```\n>\n> ...or implicitly by declaring it directly inside the boundary, as in the example above.\n\n### `onerror`\n\nIf an `onerror` function is provided, it will be called with the same two `error` and `reset` arguments. This is useful for tracking the error with an error reporting service...\n\n```svelte\n<svelte:boundary onerror={(e) => report(e)}>\n\t...\n</svelte:boundary>\n```\n\n...or using `error` and `reset` outside the boundary itself:\n\n```svelte\n<script>\n\tlet error = $state(null);\n\tlet reset = $state(() => {});\n\n\tfunction onerror(e, r) {\n\t\terror = e;\n\t\treset = r;\n\t}\n</script>\n\n<svelte:boundary {onerror}>\n\t<FlakyComponent />\n</svelte:boundary>\n\n{#if error}\n\t<button onclick={() => {\n\t\terror = null;\n\t\treset();\n\t}}>\n\t\toops! try again\n\t</button>\n{/if}\n```\n\nIf an error occurs inside the `onerror` function (or if you rethrow the error), it will be handled by a parent boundary if such exists.",
+		"svelte/svelte-window": "```svelte\n<svelte:window onevent={handler} />\n```\n\n```svelte\n<svelte:window bind:prop={value} />\n```\n\nThe `<svelte:window>` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering.\n\nThis element may only appear at the top level of your component — it cannot be inside a block or element.\n\n```svelte\n<script>\n\tfunction handleKeydown(event) {\n\t\talert(`pressed the ${event.key} key`);\n\t}\n</script>\n\n<svelte:window onkeydown={handleKeydown} />\n```\n\nYou can also bind to the following properties:\n\n- `innerWidth`\n- `innerHeight`\n- `outerWidth`\n- `outerHeight`\n- `scrollX`\n- `scrollY`\n- `online` — an alias for `window.navigator.onLine`\n- `devicePixelRatio`\n\nAll except `scrollX` and `scrollY` are readonly.\n\n```svelte\n<svelte:window bind:scrollY={y} />\n```\n\n> [!NOTE] Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. If you have a legitimate reason to scroll when the component is rendered, call `scrollTo()` in an `$effect`.",
+		"svelte/svelte-document": "```svelte\n<svelte:document onevent={handler} />\n```\n\n```svelte\n<svelte:document bind:prop={value} />\n```\n\nSimilarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](use) on `document`.\n\nAs with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.\n\n```svelte\n<svelte:document onvisibilitychange={handleVisibilityChange} use:someAction />\n```\n\nYou can also bind to the following properties:\n\n- `activeElement`\n- `fullscreenElement`\n- `pointerLockElement`\n- `visibilityState`\n\nAll are readonly.",
+		"svelte/svelte-body": "```svelte\n<svelte:body onevent={handler} />\n```\n\nSimilarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](use) on the `<body>` element.\n\nAs with `<svelte:window>` and `<svelte:document>`, this element may only appear at the top level of your component and must never be inside a block or element.\n\n```svelte\n<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />\n```",
+		"svelte/svelte-head": "```svelte\n<svelte:head>...</svelte:head>\n```\n\nThis element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `body` content.\n\nAs with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.\n\n```svelte\n<svelte:head>\n\t<title>Hello world!</title>\n\t<meta name=\"description\" content=\"This is where the description goes for SEO\" />\n</svelte:head>\n```",
+		"svelte/svelte-element": "```svelte\n<svelte:element this={expression} />\n```\n\nThe `<svelte:element>` element lets you render an element that is unknown at author time, for example because it comes from a CMS. Any properties and event listeners present will be applied to the element.\n\nThe only supported binding is `bind:this`, since Svelte's built-in bindings do not work with generic elements.\n\nIf `this` has a nullish value, the element and its children will not be rendered.\n\nIf `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode:\n\n```svelte\n<script>\n\tlet tag = $state('hr');\n</script>\n\n<svelte:element this={tag}>\n\tThis text cannot appear inside an hr element\n</svelte:element>\n```\n\nSvelte tries its best to infer the correct namespace from the element's surroundings, but it's not always possible. You can make it explicit with an `xmlns` attribute:\n\n```svelte\n<svelte:element this={tag} xmlns=\"http://www.w3.org/2000/svg\" />\n```\n\n`this` needs to be a valid DOM element tag, things like `#text` or `svelte:head` will not work.",
+		"svelte/svelte-options": "```svelte\n<svelte:options option={value} />\n```\n\nThe `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](svelte-compiler#compile). The possible options are:\n\n- `runes={true}` — forces a component into _runes mode_ (see the [Legacy APIs](legacy-overview) section)\n- `runes={false}` — forces a component into _legacy mode_\n- `namespace=\"...\"` — the namespace where this component will be used, can be \"html\" (the default), \"svg\" or \"mathml\"\n- `customElement={...}` — the [options](custom-elements#Component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option\n- `css=\"injected\"` — the component will inject its styles inline: During server-side rendering, it's injected as a `<style>` tag in the `head`, during client side rendering, it's loaded via JavaScript\n\n> [!LEGACY] Deprecated options\n> Svelte 4 also included the following options. They are deprecated in Svelte 5 and non-functional in runes mode.\n>\n> - `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed\n> - `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed\n> - `accessors={true}` — adds getters and setters for the component's props\n> - `accessors={false}` — the default\n\n```svelte\n<svelte:options customElement=\"my-custom-element\" />\n```",
+		"svelte/stores": "<!-- - how to use\n- how to write\n- TODO should the details for the store methods belong to the reference section? -->\n\nA _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](../svelte-store) contains minimal store implementations which fulfil this contract.\n\nAny time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialisation and unsubscribe when appropriate.\n\nAssignments to `$`-prefixed variables require that the variable be a writable store, and will result in a call to the store's `.set` method.\n\nNote that the store must be declared at the top level of the component — not inside an `if` block or a function, for example.\n\nLocal variables (that do not represent store values) must _not_ have a `$` prefix.\n\n```svelte\n<script>\n\timport { writable } from 'svelte/store';\n\n\tconst count = writable(0);\n\tconsole.log($count); // logs 0\n\n\tcount.set(1);\n\tconsole.log($count); // logs 1\n\n\t$count = 2;\n\tconsole.log($count); // logs 2\n</script>\n```\n\n## When to use stores\n\nPrior to Svelte 5, stores were the go-to solution for creating cross-component reactive states or extracting logic. With runes, these use cases have greatly diminished.\n\n- when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending)\n- when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state\n\n```ts\n/// file: state.svelte.js\nexport const userState = $state({\n\tname: 'name',\n\t/* ... */\n});\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport { userState } from './state.svelte.js';\n</script>\n\n<p>User name: {userState.name}</p>\n<button onclick={() => {\n\tuserState.name = 'new name';\n}}>\n\tchange name\n</button>\n```\n\nStores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you.\n\n## svelte/store\n\nThe `svelte/store` module contains a minimal store implementation which fulfil the store contract. It provides methods for creating stores that you can update from the outside, stores you can only update from the inside, and for combining and deriving stores.\n\n### `writable`\n\nFunction that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.\n\n`set` is a method that takes one argument which is the value to be set. The store value gets set to the value of the argument if the store value is not already equal to it.\n\n`update` is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.\n\n```js\n/// file: store.js\nimport { writable } from 'svelte/store';\n\nconst count = writable(0);\n\ncount.subscribe((value) => {\n\tconsole.log(value);\n}); // logs '0'\n\ncount.set(1); // logs '1'\n\ncount.update((n) => n + 1); // logs '2'\n```\n\nIf a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store, and an `update` function which works like the `update` method on the store, taking a callback to calculate the store's new value from its old value. It must return a `stop` function that is called when the subscriber count goes from one to zero.\n\n```js\n/// file: store.js\nimport { writable } from 'svelte/store';\n\nconst count = writable(0, () => {\n\tconsole.log('got a subscriber');\n\treturn () => console.log('no more subscribers');\n});\n\ncount.set(1); // does nothing\n\nconst unsubscribe = count.subscribe((value) => {\n\tconsole.log(value);\n}); // logs 'got a subscriber', then '1'\n\nunsubscribe(); // logs 'no more subscribers'\n```\n\nNote that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.\n\n### `readable`\n\nCreates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.\n\n```ts\nimport { readable } from 'svelte/store';\n\nconst time = readable(new Date(), (set) => {\n\tset(new Date());\n\n\tconst interval = setInterval(() => {\n\t\tset(new Date());\n\t}, 1000);\n\n\treturn () => clearInterval(interval);\n});\n\nconst ticktock = readable('tick', (set, update) => {\n\tconst interval = setInterval(() => {\n\t\tupdate((sound) => (sound === 'tick' ? 'tock' : 'tick'));\n\t}, 1000);\n\n\treturn () => clearInterval(interval);\n});\n```\n\n### `derived`\n\nDerives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.\n\nIn the simplest version, `derived` takes a single store, and the callback returns a derived value.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst a: Writable<number>;\n}\n\nexport {};\n\n// @filename: index.ts\n// ---cut---\nimport { derived } from 'svelte/store';\n\nconst doubled = derived(a, ($a) => $a * 2);\n```\n\nThe callback can set a value asynchronously by accepting a second argument, `set`, and an optional third argument, `update`, calling either or both of them when appropriate.\n\nIn this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` or `update` is first called. If no initial value is specified, the store's initial value will be `undefined`.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst a: Writable<number>;\n}\n\nexport {};\n\n// @filename: index.ts\n// @errors: 18046 2769 7006\n// ---cut---\nimport { derived } from 'svelte/store';\n\nconst delayed = derived(\n\ta,\n\t($a, set) => {\n\t\tsetTimeout(() => set($a), 1000);\n\t},\n\t2000\n);\n\nconst delayedIncrement = derived(a, ($a, set, update) => {\n\tset($a);\n\tsetTimeout(() => update((x) => x + 1), 1000);\n\t// every time $a produces a value, this produces two\n\t// values, $a immediately and then $a + 1 a second later\n});\n```\n\nIf you return a function from the callback, it will be called when a) the callback runs again, or b) the last subscriber unsubscribes.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst frequency: Writable<number>;\n}\n\nexport {};\n\n// @filename: index.ts\n// ---cut---\nimport { derived } from 'svelte/store';\n\nconst tick = derived(\n\tfrequency,\n\t($frequency, set) => {\n\t\tconst interval = setInterval(() => {\n\t\t\tset(Date.now());\n\t\t}, 1000 / $frequency);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t},\n\t2000\n);\n```\n\nIn both cases, an array of arguments can be passed as the first argument instead of a single store.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst a: Writable<number>;\n\tconst b: Writable<number>;\n}\n\nexport {};\n\n// @filename: index.ts\n\n// ---cut---\nimport { derived } from 'svelte/store';\n\nconst summed = derived([a, b], ([$a, $b]) => $a + $b);\n\nconst delayed = derived([a, b], ([$a, $b], set) => {\n\tsetTimeout(() => set($a + $b), 1000);\n});\n```\n\n### `readonly`\n\nThis simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.\n\n```js\nimport { readonly, writable } from 'svelte/store';\n\nconst writableStore = writable(1);\nconst readableStore = readonly(writableStore);\n\nreadableStore.subscribe(console.log);\n\nwritableStore.set(2); // console: 2\n// @errors: 2339\nreadableStore.set(2); // ERROR\n```\n\n### `get`\n\nGenerally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.\n\n> [!NOTE] This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.\n\n```ts\n// @filename: ambient.d.ts\nimport { type Writable } from 'svelte/store';\n\ndeclare global {\n\tconst store: Writable<string>;\n}\n\nexport {};\n\n// @filename: index.ts\n// ---cut---\nimport { get } from 'svelte/store';\n\nconst value = get(store);\n```\n\n## Store contract\n\n```ts\n// @noErrors\nstore = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }\n```\n\nYou can create your own stores without relying on [`svelte/store`](../svelte-store), by implementing the _store contract_:\n\n1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.\n2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.\n3. A store may _optionally_ contain a `.set` method, which must accept as its argument a new value for the store, and which synchronously calls all of the store's active subscription functions. Such a store is called a _writable store_.\n\nFor interoperability with RxJS Observables, the `.subscribe` method is also allowed to return an object with an `.unsubscribe` method, rather than return the unsubscription function directly. Note however that unless `.subscribe` synchronously calls the subscription (which is not required by the Observable spec), Svelte will see the value of the store as `undefined` until it does.",
+		"svelte/context": "Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling'). The parent component sets context with `setContext(key, value)`...\n\n```svelte\n<!--- file: Parent.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\tsetContext('my-context', 'hello from Parent.svelte');\n</script>\n```\n\n...and the child retrieves it with `getContext`:\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst message = getContext('my-context');\n</script>\n\n<h1>{message}, inside Child.svelte</h1>\n```\n\nThis is particularly useful when `Parent.svelte` is not directly aware of `Child.svelte`, but instead renders it as part of a `children` [snippet](snippet) ([demo](/playground/untitled#H4sIAAAAAAAAE42Q3W6DMAyFX8WyJgESK-oto6hTX2D3YxcM3IIUQpR40yqUd58CrCXsp7tL7HNsf2dAWXaEKR56yfTBGOOxFWQwfR6Qz8q1XAHjL-GjUhvzToJd7bU09FO9ctMkG0wxM5VuFeeFLLjtVK8ZnkpNkuGo-w6CTTJ9Z3PwsBAemlbUF934W8iy5DpaZtOUcU02-ZLcaS51jHEkTFm_kY1_wfOO8QnXrb8hBzDEc6pgZ4gFoyz4KgiD7nxfTe8ghqAhIfrJ46cTzVZBbkPlODVJsLCDO6V7ZcJoncyw1yRr0hd1GNn_ZbEM3I9i1bmVxOlWElUvDUNHxpQngt3C4CXzjS1rtvkw22wMrTRtTbC8Lkuabe7jvthPPe3DofYCAAA=)):\n\n```svelte\n<Parent>\n\t<Child />\n</Parent>\n```\n\nThe key (`'my-context'`, in the example above) and the context itself can be any JavaScript value.\n\nIn addition to [`setContext`](svelte#setContext) and [`getContext`](svelte#getContext), Svelte exposes [`hasContext`](svelte#hasContext) and [`getAllContexts`](svelte#getAllContexts) functions.\n\n## Using context with state\n\nYou can store reactive state in context ([demo](/playground/untitled#H4sIAAAAAAAAE41R0W6DMAz8FSuaBNUQdK8MkKZ-wh7HHihzu6hgosRMm1D-fUpSVNq12x4iEvvOx_kmQU2PIhfP3DCCJGgHYvxkkYid7NCI_GUS_KUcxhVEMjOelErNB3bsatvG4LW6n0ZsRC4K02qpuKqpZtmrQTNMYJA3QRAs7PTQQxS40eMCt3mX3duxnWb-lS5h7nTI0A4jMWoo4c44P_Hku-zrOazdy64chWo-ScfRkRgl8wgHKrLTH1OxHZkHgoHaTraHcopXUFYzPPVfuC_hwQaD1GrskdiNCdQwJljJqlvXfyqVsA5CGg0uRUQifHw56xFtciO75QrP07vo_JXf_tf8yK2ezDKY_ZWt_1y2qqYzv7bI1IW1V_sN19m-07wCAAA=))...\n\n```svelte\n<script>\n\timport { setContext } from 'svelte';\n\timport Child from './Child.svelte';\n\n\tlet counter = $state({\n\t\tcount: 0\n\t});\n\n\tsetContext('counter', counter);\n</script>\n\n<button onclick={() => counter.count += 1}>\n\tincrement\n</button>\n\n<Child />\n<Child />\n<Child />\n```\n\n...though note that if you _reassign_ `counter` instead of updating it, you will 'break the link' — in other words instead of this...\n\n```svelte\n<button onclick={() => counter = { count: 0 }}>\n\treset\n</button>\n```\n\n...you must do this:\n\n```svelte\n<button onclick={() => +++counter.count = 0+++}>\n\treset\n</button>\n```\n\nSvelte will warn you if you get it wrong.\n\n## Type-safe context\n\nA useful pattern is to wrap the calls to `setContext` and `getContext` inside helper functions that let you preserve type safety:\n\n```js\n/// file: context.js\n// @filename: ambient.d.ts\ninterface User {}\n\n// @filename: index.js\n// ---cut---\nimport { getContext, setContext } from 'svelte';\n\nconst key = {};\n\n/** @param {User} user */\nexport function setUserContext(user) {\n\tsetContext(key, user);\n}\n\nexport function getUserContext() {\n\treturn /** @type {User} */ (getContext(key));\n}\n```\n\n## Replacing global state\n\nWhen you have state shared by many different components, you might be tempted to put it in its own module and just import it wherever it's needed:\n\n```js\n/// file: state.svelte.js\nexport const myGlobalState = $state({\n\tuser: {\n\t\t// ...\n\t}\n\t// ...\n});\n```\n\nIn many cases this is perfectly fine, but there is a risk: if you mutate the state during server-side rendering (which is discouraged, but entirely possible!)...\n\n```svelte\n<!--- file: App.svelte ---->\n<script>\n\timport { myGlobalState } from './state.svelte.js';\n\n\tlet { data } = $props();\n\n\tif (data.user) {\n\t\tmyGlobalState.user = data.user;\n\t}\n</script>\n```\n\n...then the data may be accessible by the _next_ user. Context solves this problem because it is not shared between requests.",
+		"svelte/lifecycle-hooks": "<!-- - onMount/onDestroy\n- mention that `$effect` might be better for your use case\n- beforeUpdate/afterUpdate with deprecation notice?\n- or skip this entirely and only have it in the reference docs? -->\n\nIn Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between — when certain state is updated — is not related to the component as a whole; only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a \"before update\"/\"after update\" hook.\n\n## `onMount`\n\nThe `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).\n\n`onMount` does not run inside a component that is rendered on the server.\n\n```svelte\n<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(() => {\n\t\tconsole.log('the component has mounted');\n\t});\n</script>\n```\n\nIf a function is returned from `onMount`, it will be called when the component is unmounted.\n\n```svelte\n<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tconsole.log('beep');\n\t\t}, 1000);\n\n\t\treturn () => clearInterval(interval);\n\t});\n</script>\n```\n\n> [!NOTE] This behaviour will only work when the function passed to `onMount` is _synchronous_. `async` functions always return a `Promise`.\n\n## `onDestroy`\n\nSchedules a callback to run immediately before the component is unmounted.\n\nOut of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.\n\n```svelte\n<script>\n\timport { onDestroy } from 'svelte';\n\n\tonDestroy(() => {\n\t\tconsole.log('the component is being destroyed');\n\t});\n</script>\n```\n\n## `tick`\n\nWhile there's no \"after update\" hook, you can use `tick` to ensure that the UI is updated before continuing. `tick` returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.\n\n```svelte\n<script>\n\timport { tick } from 'svelte';\n\n\t$effect.pre(() => {\n\t\tconsole.log('the component is about to update');\n\t\ttick().then(() => {\n\t\t\t\tconsole.log('the component just updated');\n\t\t});\n\t});\n</script>\n```\n\n## Deprecated: `beforeUpdate` / `afterUpdate`\n\nSvelte 4 contained hooks that ran before and after the component as a whole was updated. For backwards compatibility, these hooks were shimmed in Svelte 5 but not available inside components that use runes.\n\n```svelte\n<script>\n\timport { beforeUpdate, afterUpdate } from 'svelte';\n\n\tbeforeUpdate(() => {\n\t\tconsole.log('the component is about to update');\n\t});\n\n\tafterUpdate(() => {\n\t\tconsole.log('the component just updated');\n\t});\n</script>\n```\n\nInstead of `beforeUpdate` use `$effect.pre` and instead of `afterUpdate` use `$effect` instead - these runes offer more granular control and only react to the changes you're actually interested in.\n\n### Chat window example\n\nTo implement a chat window that autoscrolls to the bottom when new messages appear (but only if you were _already_ scrolled to the bottom), we need to measure the DOM before we update it.\n\nIn Svelte 4, we do this with `beforeUpdate`, but this is a flawed approach — it fires before _every_ update, whether it's relevant or not. In the example below, we need to introduce checks like `updatingMessages` to make sure we don't mess with the scroll position when someone toggles dark mode.\n\nWith runes, we can use `$effect.pre`, which behaves the same as `$effect` but runs before the DOM is updated. As long as we explicitly reference `messages` inside the effect body, it will run whenever `messages` changes, but _not_ when `theme` changes.\n\n`beforeUpdate`, and its equally troublesome counterpart `afterUpdate`, are therefore deprecated in Svelte 5.\n\n- [Before](/playground/untitled#H4sIAAAAAAAAE31WXa_bNgz9K6yL1QmWOLlrC-w6H8MeBgwY9tY9NfdBtmlbiywZkpyPBfnvo2zLcZK28AWuRPGI5OGhkEuQc4EmiL9eAskqDOLg97oOZoE9125jDigs0t6oRqfOsjap5rXd7uTO8qpW2sIFEsyVxn_qjFmcAcstar-xPN3DFXKtKgi768IVgQku0ELj3Lgs_kZjWIEGNpAzYXDlHWyJFZI1zJjeh4O5uvl_DY8oUkVeVoFuJKYls-_CGYS25Aboj0EtWNqel0wWoBoLTGZgmdgDS9zW4Uz4NsrswPHoyutN4xInkylstnBxdmIhh8m7xzqmoNE2Wq46n1RJQzEbq4g-JQSl7e-HDx-GdaTy3KD9E3lRWvj5Zu9QX1QN20dj7zyHz8s-1S6lW7Cpz3RnXTcm04hIlfdFuO8p2mQ5-3a06cqjrn559bF_2NHOnRZ5I1PLlXQNyQT-hedMHeUEDyjtdMxsa4n2eIbNhlTwhyRthaOKOmYtniwF6pwt0wXa6MBEg0OibZec27gz_dk3UrZ6hB2LLYoiv521Yd8Gt-foTrfhiCDP0lC9VUUhcDLU49Xe_9943cNvEArHfAjxeBTovvXiNpFynfEDpIIZs9kFbg52QbeNHWZzebz32s7xHco3nJAJl1nshmhz8dYOQJDyZetnbb2gTWe-vEeWlrfpZMavr56ldb29eNt6UXvgwgFbp_WC0tl2RK25rGk6lYz3nUI2lzvBXGHhPZPGWmKUXFNBKqdaW259wl_aHbiqoVIZdpE60Nax6IOujT0LbFFxIVTCxCRR2XloUcYNvSbnGHKBp763jHoj59xiZWJI0Wm0P_m3MSS985xkasn-cFq20xTDy3J5KFcjgUTD69BHdcHIjz431z28IqlxGcPSfdFnrGDZn6gD6lyo45zyHAD-btczf-98nhQxHEvKfeUtOVkSejD3q-9X7JbzjGtsdUxlKdFU8qGsT78uaw848syWMXz85Waq2Gnem4mAn3prweq4q6Y3JEpnqMmnPoFRgmd3ySW0LLRqSKlwYHriCvJvUs2yjMaaoA-XzTXLeGMe45zmhv_XAno3Mj0xF7USuqNvnE9H343QHlq-eAgxpbTPNR9yzUkgLjwSR0NK4wKoxy-jDg-9vy8sUSToakzW-9fX13Em9Q8T6Z26uZhBN36XUYo5q7ggLXBZoub2Ofv7g6GCZfTxe034NCjiudXj7Omla0eTfo7QBPOcYxbE7qG-vl3_B1G-_i_JCAAA)\n- [After](/playground/untitled#H4sIAAAAAAAAE31WXa-jNhD9K7PsdknUQJLurtRLPqo-VKrU1327uQ8GBnBjbGSb5KZR_nvHgMlXtyIS9njO-MyZGZRzUHCBJkhez4FkNQZJ8HvTBLPAnhq3MQcUFmlvVKszZ1mbTPPGbndyZ3ndKG3hDJZne7hAoVUNYY8JV-RBPgIt2AprhA18MpZZnIQ50_twuvLHNRrDSjRXj9fwiCJTBLIKdCsxq5j9EM4gtBU3QD8GjWBZd14xWYJqLTCZg2ViDyx1W4cz4dv0hsiB49FRHkyfsCgws3GjcTKZwmYLZ2feWc9o1W8zJQ2Fb62i5JUQRNRHgs-fx3WsisKg_RN5WVn4-WrvUd9VA9tH4-AcwbfFQIpkLWByvWzqSe2sk3kyjUlOec_XPU-3TRaz_75tuvKoi19e3OvipSpamVmupJM2F_gXnnJ1lBM8oLQjHceys8R7PMFms4HwD2lRhzeEe-EsvluSrHe2TJdo4wMTLY48XKwPzm0KGm2r5ajFtRYU4TWOY7-ddWHfxhDP0QkQhnf5PWRnVVkKnIx8fZsOb5dR16nwG4TCCRdCMphWQ7z1_DoOcp3zA2SCGbPZBa5jd0G_TRxmc36Me-mG6A7l60XIlMs8ce2-OXtrDyBItdz6qVjPadObzx-RZdV1nJjx64tXad1sz962njceOHfAzmk9JzrbXqg1lw3NkZL7vgE257t-uMDcO6attSSokpmgFqVMO2U93e_dDlzOUKsc-3t6zNZp6K9cG3sS2KGSUqiUiUmq8tNYoJwbmvpTAoXA96GyjCojI26xNglk6DpwOPm7NdRYp4ia0JL94bTqRiGB5WJxqFY37RGPoz3c6i4jP3rcUA7wmhqNywQW7om_YQ2L4UQdUBdCHSPiOQJ8bFcxHzeK0jKBY0XcV95SkCWlD9t-9eOM3TLKucauiyktJdpaPqT19ddF4wFHntsqgS-_XE01e48GMwnw02AtWZP02QyGVOkcNfk072CU4PkduZSWpVYt9SkcmJ64hPwHpWF5ziVls3wIFmmW89Y83vMeGf5PBxjcyPSkXNy10J18t3x6-a6CDtBq6SGklNKeazFyLahB3PVIGo2UbhOgGi9vKjzW_j6xVFFD17difXx5ebll0vwvkcGpn4sZ9MN3vqFYsJoL6gUuK9TcPrO_PxgzWMRfflSEr2NHPJf6lj1957rRpH8CNMG84JgHidUtXt4u_wK21LXERAgAAA==)\n\n<!-- prettier-ignore -->\n```svelte\n<script>\n\timport { ---beforeUpdate, afterUpdate,--- tick } from 'svelte';\n\n\t---let updatingMessages = false;---\n\tlet theme = +++$state('dark')+++;\n\tlet messages = +++$state([])+++;\n\n\tlet viewport;\n\n\t---beforeUpdate(() => {---\n\t+++$effect.pre(() => {+++\n\t\t---if (!updatingMessages) return;---\n\t\t+++messages;+++\n\t\tconst autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;\n\n\t\tif (autoscroll) {\n\t\t\ttick().then(() => {\n\t\t\t\tviewport.scrollTo(0, viewport.scrollHeight);\n\t\t\t});\n\t\t}\n\n\t\t---updatingMessages = false;---\n\t});\n\n\tfunction handleKeydown(event) {\n\t\tif (event.key === 'Enter') {\n\t\t\tconst text = event.target.value;\n\t\t\tif (!text) return;\n\n\t\t\t---updatingMessages = true;---\n\t\t\tmessages = [...messages, text];\n\t\t\tevent.target.value = '';\n\t\t}\n\t}\n\n\tfunction toggle() {\n\t\ttheme = theme === 'dark' ? 'light' : 'dark';\n\t}\n</script>\n\n<div class:dark={theme === 'dark'}>\n\t<div bind:this={viewport}>\n\t\t{#each messages as message}\n\t\t\t<p>{message}</p>\n\t\t{/each}\n\t</div>\n\n\t<input +++onkeydown+++={handleKeydown} />\n\n\t<button +++onclick+++={toggle}> Toggle dark mode </button>\n</div>\n```",
+		"svelte/imperative-component-api": "<!-- better title needed?\n\n- mount\n- unmount\n- render\n- hydrate\n- how they interact with each other -->\n\nEvery Svelte application starts by imperatively creating a root component. On the client this component is mounted to a specific element. On the server, you want to get back a string of HTML instead which you can render. The following functions help you achieve those tasks.\n\n## `mount`\n\nInstantiates a component and mounts it to the given target:\n\n```js\n// @errors: 2322\nimport { mount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, {\n\ttarget: document.querySelector('#app'),\n\tprops: { some: 'property' }\n});\n```\n\nYou can mount multiple components per page, and you can also mount from within your application, for example when creating a tooltip component and attaching it to the hovered element.\n\nNote that unlike calling `new App(...)` in Svelte 4, things like effects (including `onMount` callbacks, and action functions) will not run during `mount`. If you need to force pending effects to run (in the context of a test, for example) you can do so with `flushSync()`.\n\n## `unmount`\n\nUnmounts a component that was previously created with [`mount`](#mount) or [`hydrate`](#hydrate).\n\nIf `options.outro` is `true`, [transitions](transition) will play before the component is removed from the DOM:\n\n```js\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later\nunmount(app, { outro: true });\n```\n\nReturns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise.\n\n## `render`\n\nOnly available on the server and when compiling with the `server` option. Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:\n\n```js\n// @errors: 2724 2305 2307\nimport { render } from 'svelte/server';\nimport App from './App.svelte';\n\nconst result = render(App, {\n\tprops: { some: 'property' }\n});\nresult.body; // HTML for somewhere in this <body> tag\nresult.head; // HTML for somewhere in this <head> tag\n```\n\n## `hydrate`\n\nLike `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#render) function) inside the target and make it interactive:\n\n```js\n// @errors: 2322\nimport { hydrate } from 'svelte';\nimport App from './App.svelte';\n\nconst app = hydrate(App, {\n\ttarget: document.querySelector('#app'),\n\tprops: { some: 'property' }\n});\n```\n\nAs with `mount`, effects will not run during `hydrate` — use `flushSync()` immediately afterwards if you need them to.",
+		"svelte/testing": "Testing helps you write and maintain your code and guard against regressions. Testing frameworks help you with that, allowing you to describe assertions or expectations about how your code should behave. Svelte is unopinionated about which testing framework you use — you can write unit tests, integration tests, and end-to-end tests using solutions like [Vitest](https://vitest.dev/), [Jasmine](https://jasmine.github.io/), [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/).\n\n## Unit and component tests with Vitest\n\nUnit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/). You can use the Svelte CLI to [setup Vitest](/docs/cli/vitest) either during project creation or later on.\n\nTo setup Vitest manually, first install it:\n\n```sh\nnpm install -D vitest\n```\n\nThen adjust your `vite.config.js`:\n\n<!-- prettier-ignore -->\n```js\n/// file: vite.config.js\nimport { defineConfig } from +++'vitest/config'+++;\n\nexport default defineConfig({\n\t// ...\n\t// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node\n\tresolve: process.env.VITEST\n\t\t? {\n\t\t\t\tconditions: ['browser']\n\t\t\t}\n\t\t: undefined\n});\n```\n\n> [!NOTE] If loading the browser version of all your packages is undesirable, because (for example) you also test backend libraries, [you may need to resort to an alias configuration](https://github.com/testing-library/svelte-testing-library/issues/222#issuecomment-1909993331)\n\nYou can now write unit tests for code inside your `.js/.ts` files:\n\n```js\n/// file: multiplier.svelte.test.js\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { multiplier } from './multiplier.svelte.js';\n\ntest('Multiplier', () => {\n\tlet double = multiplier(0, 2);\n\n\texpect(double.value).toEqual(0);\n\n\tdouble.set(5);\n\n\texpect(double.value).toEqual(10);\n});\n```\n\n```js\n/// file: multiplier.svelte.js\n/**\n * @param {number} initial\n * @param {number} k\n */\nexport function multiplier(initial, k) {\n\tlet count = $state(initial);\n\n\treturn {\n\t\tget value() {\n\t\t\treturn count * k;\n\t\t},\n\t\t/** @param {number} c */\n\t\tset: (c) => {\n\t\t\tcount = c;\n\t\t}\n\t};\n}\n```\n\n### Using runes inside your test files\n\nSince Vitest processes your test files the same way as your source files, you can use runes inside your tests as long as the filename includes `.svelte`:\n\n```js\n/// file: multiplier.svelte.test.js\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { multiplier } from './multiplier.svelte.js';\n\ntest('Multiplier', () => {\n\tlet count = $state(0);\n\tlet double = multiplier(() => count, 2);\n\n\texpect(double.value).toEqual(0);\n\n\tcount = 5;\n\n\texpect(double.value).toEqual(10);\n});\n```\n\n```js\n/// file: multiplier.svelte.js\n/**\n * @param {() => number} getCount\n * @param {number} k\n */\nexport function multiplier(getCount, k) {\n\treturn {\n\t\tget value() {\n\t\t\treturn getCount() * k;\n\t\t}\n\t};\n}\n```\n\nIf the code being tested uses effects, you need to wrap the test inside `$effect.root`:\n\n```js\n/// file: logger.svelte.test.js\nimport { flushSync } from 'svelte';\nimport { expect, test } from 'vitest';\nimport { logger } from './logger.svelte.js';\n\ntest('Effect', () => {\n\tconst cleanup = $effect.root(() => {\n\t\tlet count = $state(0);\n\n\t\t// logger uses an $effect to log updates of its input\n\t\tlet log = logger(() => count);\n\n\t\t// effects normally run after a microtask,\n\t\t// use flushSync to execute all pending effects synchronously\n\t\tflushSync();\n\t\texpect(log).toEqual([0]);\n\n\t\tcount = 1;\n\t\tflushSync();\n\n\t\texpect(log).toEqual([0, 1]);\n\t});\n\n\tcleanup();\n});\n```\n\n```js\n/// file: logger.svelte.js\n/**\n * @param {() => any} getValue\n */\nexport function logger(getValue) {\n\t/** @type {any[]} */\n\tlet log = [];\n\n\t$effect(() => {\n\t\tlog.push(getValue());\n\t});\n\n\treturn log;\n}\n```\n\n### Component testing\n\nIt is possible to test your components in isolation, which allows you to render them in a browser (real or simulated), simulate behavior, and make assertions, without spinning up your whole app.\n\n> [!NOTE] Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component.\n\nTo get started, install jsdom (a library that shims DOM APIs):\n\n```sh\nnpm install -D jsdom\n```\n\nThen adjust your `vite.config.js`:\n\n```js\n/// file: vite.config.js\nimport { defineConfig } from 'vitest/config';\n\nexport default defineConfig({\n\tplugins: [\n\t\t/* ... */\n\t],\n\ttest: {\n\t\t// If you are testing components client-side, you need to setup a DOM environment.\n\t\t// If not all your files should have this environment, you can use a\n\t\t// `// @vitest-environment jsdom` comment at the top of the test files instead.\n\t\tenvironment: 'jsdom'\n\t},\n\t// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node\n\tresolve: process.env.VITEST\n\t\t? {\n\t\t\t\tconditions: ['browser']\n\t\t\t}\n\t\t: undefined\n});\n```\n\nAfter that, you can create a test file in which you import the component to test, interact with it programmatically and write expectations about the results:\n\n```js\n/// file: component.test.js\nimport { flushSync, mount, unmount } from 'svelte';\nimport { expect, test } from 'vitest';\nimport Component from './Component.svelte';\n\ntest('Component', () => {\n\t// Instantiate the component using Svelte's `mount` API\n\tconst component = mount(Component, {\n\t\ttarget: document.body, // `document` exists because of jsdom\n\t\tprops: { initial: 0 }\n\t});\n\n\texpect(document.body.innerHTML).toBe('<button>0</button>');\n\n\t// Click the button, then flush the changes so you can synchronously write expectations\n\tdocument.body.querySelector('button').click();\n\tflushSync();\n\n\texpect(document.body.innerHTML).toBe('<button>1</button>');\n\n\t// Remove the component from the DOM\n\tunmount(component);\n});\n```\n\nWhile the process is very straightforward, it is also low level and somewhat brittle, as the precise structure of your component may change frequently. Tools like [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/) can help streamline your tests. The above test could be rewritten like this:\n\n```js\n/// file: component.test.js\nimport { render, screen } from '@testing-library/svelte';\nimport userEvent from '@testing-library/user-event';\nimport { expect, test } from 'vitest';\nimport Component from './Component.svelte';\n\ntest('Component', async () => {\n\tconst user = userEvent.setup();\n\trender(Component);\n\n\tconst button = screen.getByRole('button');\n\texpect(button).toHaveTextContent(0);\n\n\tawait user.click(button);\n\texpect(button).toHaveTextContent(1);\n});\n```\n\nWhen writing component tests that involve two-way bindings, context or snippet props, it's best to create a wrapper component for your specific test and interact with that. `@testing-library/svelte` contains some [examples](https://testing-library.com/docs/svelte-testing-library/example).\n\n## Component tests with Storybook\n\n[Storybook](https://storybook.js.org) is a tool for developing and documenting UI components, and it can also be used to test your components. They're run with Vitest's browser mode, which renders your components in a real browser for the most realistic testing environment.\n\nTo get started, first install Storybook ([using Svelte's CLI](/docs/cli/storybook)) in your project via `npx sv add storybook` and choose the recommended configuration that includes testing features. If you're already using Storybook, and for more information on Storybook's testing capabilities, follow the [Storybook testing docs](https://storybook.js.org/docs/writing-tests?renderer=svelte) to get started.\n\nYou can create stories for component variations and test interactions with the [play function](https://storybook.js.org/docs/writing-tests/interaction-testing?renderer=svelte#writing-interaction-tests), which allows you to simulate behavior and make assertions using the Testing Library and Vitest APIs. Here's an example of two stories that can be tested, one that renders an empty LoginForm component and one that simulates a user filling out the form:\n\n```svelte\n/// file: LoginForm.stories.svelte\n<script module>\n\timport { defineMeta } from '@storybook/addon-svelte-csf';\n\timport { expect, fn } from 'storybook/test';\n\n\timport LoginForm from './LoginForm.svelte';\n\n\tconst { Story } = defineMeta({\n\t\tcomponent: LoginForm,\n\t\targs: {\n\t\t\t// Pass a mock function to the `onSubmit` prop\n\t\t\tonSubmit: fn(),\n\t\t}\n\t});\n</script>\n \n<Story name=\"Empty Form\" />\n \n<Story\n\tname=\"Filled Form\"\n\tplay={async ({ args, canvas, userEvent }) => {\n\t\t// Simulate a user filling out the form\n\t\tawait userEvent.type(canvas.getByTestId('email'), 'email@provider.com');\n\t\tawait userEvent.type(canvas.getByTestId('password'), 'a-random-password');\n\t\tawait userEvent.click(canvas.getByRole('button'));\n\n\t\t// Run assertions\n\t\tawait expect(args.onSubmit).toHaveBeenCalledTimes(1);\n\t\tawait expect(canvas.getByText('You’re in!')).toBeInTheDocument();\n\t}}\n/>\n```\n\n## End-to-end tests with Playwright\n\nE2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).\n\nYou can use the Svelte CLI to [setup Playwright](/docs/cli/playwright) either during project creation or later on. You can also [set it up with `npm init playwright`](https://playwright.dev/docs/intro). Additionally, you may also want to install an IDE plugin such as [the VS Code extension](https://playwright.dev/docs/getting-started-vscode) to be able to execute tests from inside your IDE.\n\nIf you've run `npm init playwright` or are not using Vite, you may need to adjust the Playwright config to tell Playwright what to do before running the tests - mainly starting your application at a certain port. For example:\n\n```js\n/// file: playwright.config.js\nconst config = {\n\twebServer: {\n\t\tcommand: 'npm run build && npm run preview',\n\t\tport: 4173\n\t},\n\ttestDir: 'tests',\n\ttestMatch: /(.+\\.)?(test|spec)\\.[jt]s/\n};\n\nexport default config;\n```\n\nYou can now start writing tests. These are totally unaware of Svelte as a framework, so you mainly interact with the DOM and write assertions.\n\n```js\n// @errors: 2307 7031\n/// file: tests/hello-world.spec.js\nimport { expect, test } from '@playwright/test';\n\ntest('home page has expected h1', async ({ page }) => {\n\tawait page.goto('/');\n\tawait expect(page.locator('h1')).toBeVisible();\n});\n```",
+		"svelte/typescript": "<!-- - [basically what we have today](https://svelte.dev/docs/typescript)\n- built-in support, but only for type-only features\n- generics\n- using `Component` and the other helper types\n- using `svelte-check` -->\n\nYou can use TypeScript within Svelte components. IDE extensions like the [Svelte VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.\n\n## `<script lang=\"ts\">`\n\nTo use TypeScript inside your Svelte components, add `lang=\"ts\"` to your `script` tags:\n\n```svelte\n<script lang=\"ts\">\n\tlet name: string = 'world';\n\n\tfunction greet(name: string) {\n\t\talert(`Hello, ${name}!`);\n\t}\n</script>\n\n<button onclick={(e: Event) => greet(e.target.innerText)}>\n\t{name as string}\n</button>\n```\n\nDoing so allows you to use TypeScript's _type-only_ features. That is, all features that just disappear when transpiling to JavaScript, such as type annotations or interface declarations. Features that require the TypeScript compiler to output actual code are not supported. This includes:\n\n- using enums\n- using `private`, `protected` or `public` modifiers in constructor functions together with initializers\n- using features that are not yet part of the ECMAScript standard (i.e. not level 4 in the TC39 process) and therefore not implemented yet within Acorn, the parser we use for parsing JavaScript\n\nIf you want to use one of these features, you need to setup up a `script` preprocessor.\n\n## Preprocessor setup\n\nTo use non-type-only TypeScript features within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.\n\n```ts\n/// file: svelte.config.js\n// @noErrors\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nconst config = {\n\t// Note the additional `{ script: true }`\n\tpreprocess: vitePreprocess({ script: true })\n};\n\nexport default config;\n```\n\n### Using SvelteKit or Vite\n\nThe easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option.\n\n```ts\n/// file: svelte.config.js\n// @noErrors\nimport { vitePreprocess } from '@sveltejs/vite-plugin-svelte';\n\nconst config = {\n\tpreprocess: vitePreprocess()\n};\n\nexport default config;\n```\n\nIf you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.\n\nIn both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.\n\n### Other build tools\n\nIf you're using tools like Rollup or Webpack instead, install their respective Svelte plugins. For Rollup that's [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) and for Webpack that's [svelte-loader](https://github.com/sveltejs/svelte-loader). For both, you need to install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config (see the respective READMEs for more info). If you're starting a new project, you can also use the [rollup](https://github.com/sveltejs/template) or [webpack](https://github.com/sveltejs/template-webpack) template to scaffold the setup from a script.\n\n> [!NOTE] If you're starting a new project, we recommend using SvelteKit or Vite instead\n\n## tsconfig.json settings\n\nWhen using TypeScript, make sure your `tsconfig.json` is setup correctly.\n\n- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2015` so classes are not compiled to functions\n- Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is\n- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do. \n\n## Typing `$props`\n\nType `$props` just like a regular object with certain properties.\n\n```svelte\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\n\tinterface Props {\n\t\trequiredProperty: number;\n\t\toptionalProperty?: boolean;\n\t\tsnippetWithStringArgument: Snippet<[string]>;\n\t\teventHandler: (arg: string) => void;\n\t\t[key: string]: unknown;\n\t}\n\n\tlet {\n\t\trequiredProperty,\n\t\toptionalProperty,\n\t\tsnippetWithStringArgument,\n\t\teventHandler,\n\t\t...everythingElse\n\t}: Props = $props();\n</script>\n\n<button onclick={() => eventHandler('clicked button')}>\n\t{@render snippetWithStringArgument('hello')}\n</button>\n```\n\n## Generic `$props`\n\nComponents can declare a generic relationship between their properties. One example is a generic list component that receives a list of items and a callback property that receives an item from the list. To declare that the `items` property and the `select` callback operate on the same types, add the `generics` attribute to the `script` tag:\n\n```svelte\n<script lang=\"ts\" generics=\"Item extends { text: string }\">\n\tinterface Props {\n\t\titems: Item[];\n\t\tselect(item: Item): void;\n\t}\n\n\tlet { items, select }: Props = $props();\n</script>\n\n{#each items as item}\n\t<button onclick={() => select(item)}>\n\t\t{item.text}\n\t</button>\n{/each}\n```\n\nThe content of `generics` is what you would put between the `<...>` tags of a generic function. In other words, you can use multiple generics, `extends` and fallback types.\n\n## Typing wrapper components\n\nIn case you're writing a component that wraps a native element, you may want to expose all the attributes of the underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:\n\n```svelte\n<script lang=\"ts\">\n\timport type { HTMLButtonAttributes } from 'svelte/elements';\n\n\tlet { children, ...rest }: HTMLButtonAttributes = $props();\n</script>\n\n<button {...rest}>\n\t{@render children?.()}\n</button>\n```\n\nNot all elements have a dedicated type definition. For those without one, use `SvelteHTMLElements`:\n\n```svelte\n<script lang=\"ts\">\n\timport type { SvelteHTMLElements } from 'svelte/elements';\n\n\tlet { children, ...rest }: SvelteHTMLElements['div'] = $props();\n</script>\n\n<div {...rest}>\n\t{@render children?.()}\n</div>\n```\n\n## Typing `$state`\n\nYou can type `$state` like any other variable.\n\n```ts\nlet count: number = $state(0);\n```\n\nIf you don't give `$state` an initial value, part of its types will be `undefined`.\n\n```ts\n// @noErrors\n// Error: Type 'number | undefined' is not assignable to type 'number'\nlet count: number = $state();\n```\n\nIf you know that the variable _will_ be defined before you first use it, use an `as` casting. This is especially useful in the context of classes:\n\n```ts\nclass Counter {\n\tcount = $state() as number;\n\tconstructor(initial: number) {\n\t\tthis.count = initial;\n\t}\n}\n```\n\n## The `Component` type\n\nSvelte components are of type `Component`. You can use it and its related types to express a variety of constraints.\n\nUsing it together with dynamic components to restrict what kinds of component can be passed to it:\n\n```svelte\n<script lang=\"ts\">\n\timport type { Component } from 'svelte';\n\n\tinterface Props {\n\t\t// only components that have at most the \"prop\"\n\t\t// property required can be passed\n\t\tDynamicComponent: Component<{ prop: string }>;\n\t}\n\n\tlet { DynamicComponent }: Props = $props();\n</script>\n\n<DynamicComponent prop=\"foo\" />\n```\n\n> [!LEGACY] In Svelte 4, components were of type `SvelteComponent`\n\nTo extract the properties from a component, use `ComponentProps`.\n\n```ts\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {}\n\n// Errors if the second argument is not the correct props expected\n// by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });\n```\n\nTo declare that a variable expects the constructor or instance type of a component:\n\n```svelte\n<script lang=\"ts\">\n\timport MyComponent from './MyComponent.svelte';\n\n\tlet componentConstructor: typeof MyComponent = MyComponent;\n\tlet componentInstance: MyComponent;\n</script>\n\n<MyComponent bind:this={componentInstance} />\n```\n\n## Enhancing built-in DOM types\n\nSvelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.\n\nIn case this is a custom or experimental attribute/event, you can enhance the typings by augmenting the `svelte/elements` module like this:\n\n```ts\n/// file: additional-svelte-typings.d.ts\nimport { HTMLButtonAttributes } from 'svelte/elements';\n\ndeclare module 'svelte/elements' {\n\t// add a new element\n\texport interface SvelteHTMLElements {\n\t\t'custom-button': HTMLButtonAttributes;\n\t}\n\n\t// add a new global attribute that is available on all html elements\n\texport interface HTMLAttributes<T> {\n\t\tglobalattribute?: string;\n\t}\n\n\t// add a new attribute for button elements\n\texport interface HTMLButtonAttributes {\n\t\tveryexperimentalattribute?: string;\n\t}\n}\n\nexport {}; // ensure this is not an ambient module, else types will be overridden instead of augmented\n```\n\nThen make sure that the `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `\"include\": [\"src/**/*\"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.",
+		"svelte/custom-elements": "<!-- - [basically what we have today](https://svelte.dev/docs/custom-elements-api) -->\n\nSvelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). Within the custom element you can access the host element via the [`$host`](https://svelte.dev/docs/svelte/$host) rune.\n\n```svelte\n<svelte:options customElement=\"my-element\" />\n\n<script>\n\tlet { name = 'world' } = $props();\n</script>\n\n<h1>Hello {name}!</h1>\n<slot />\n```\n\nYou can leave out the tag name for any of your inner components which you don't want to expose and use them like regular Svelte components. Consumers of the component can still name it afterwards if needed, using the static `element` property which contains the custom element constructor and which is available when the `customElement` compiler option is `true`.\n\n```js\n// @noErrors\nimport MyElement from './MyElement.svelte';\n\ncustomElements.define('my-element', MyElement.element);\n```\n\nOnce a custom element has been defined, it can be used as a regular DOM element:\n\n```js\ndocument.body.innerHTML = `\n\t<my-element>\n\t\t<p>This is some slotted content</p>\n\t</my-element>\n`;\n```\n\nAny [props](basic-markup#Component-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).\n\n```js\n// @noErrors\nconst el = document.querySelector('my-element');\n\n// get the current value of the 'name' prop\nconsole.log(el.name);\n\n// set a new value, updating the shadow DOM\nel.name = 'everybody';\n```\n\nNote that you need to list out all properties explicitly, i.e. doing `let props = $props()` without declaring `props` in the [component options](#Component-options) means that Svelte can't know which props to expose as properties on the DOM element.\n\n## Component lifecycle\n\nCustom elements are created from Svelte components using a wrapper approach. This means the inner Svelte component has no knowledge that it is a custom element. The custom element wrapper takes care of handling its lifecycle appropriately.\n\nWhen a custom element is created, the Svelte component it wraps is _not_ created right away. It is only created in the next tick after the `connectedCallback` is invoked. Properties assigned to the custom element before it is inserted into the DOM are temporarily saved and then set on component creation, so their values are not lost. The same does not work for invoking exported functions on the custom element though, they are only available after the element has mounted. If you need to invoke functions before component creation, you can work around it by using the [`extend` option](#Component-options).\n\nWhen a custom element written with Svelte is created or updated, the shadow DOM will reflect the value in the next tick, not immediately. This way updates can be batched, and DOM moves which temporarily (but synchronously) detach the element from the DOM don't lead to unmounting the inner component.\n\nThe inner Svelte component is destroyed in the next tick after the `disconnectedCallback` is invoked.\n\n## Component options\n\nWhen constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `<svelte:options>` since Svelte 4. This object may contain the following properties:\n\n- `tag: string`: an optional `tag` property for the custom element's name. If set, a custom element with this tag name will be defined with the document's `customElements` registry upon importing this component.\n- `shadow`: an optional property that can be set to `\"none\"` to forgo shadow root creation. Note that styles are then no longer encapsulated, and you can't use slots\n- `props`: an optional property to modify certain details and behaviors of your component's properties. It offers the following settings:\n  - `attribute: string`: To update a custom element's prop, you have two alternatives: either set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning `attribute: \"<desired name>\"`.\n  - `reflect: boolean`: By default, updated prop values do not reflect back to the DOM. To enable this behavior, set `reflect: true`.\n  - `type: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object'`: While converting an attribute value to a prop value and reflecting it back, the prop value is assumed to be a `String` by default. This may not always be accurate. For instance, for a number type, define it using `type: \"Number\"`\n    You don't need to list all properties, those not listed will use the default settings.\n- `extend`: an optional property which expects a function as its argument. It is passed the custom element class generated by Svelte and expects you to return a custom element class. This comes in handy if you have very specific requirements to the life cycle of the custom element or want to enhance the class to for example use [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples) for better HTML form integration.\n\n```svelte\n<svelte:options\n\tcustomElement={{\n\t\ttag: 'custom-element',\n\t\tshadow: 'none',\n\t\tprops: {\n\t\t\tname: { reflect: true, type: 'Number', attribute: 'element-index' }\n\t\t},\n\t\textend: (customElementConstructor) => {\n\t\t\t// Extend the class so we can let it participate in HTML forms\n\t\t\treturn class extends customElementConstructor {\n\t\t\t\tstatic formAssociated = true;\n\n\t\t\t\tconstructor() {\n\t\t\t\t\tsuper();\n\t\t\t\t\tthis.attachedInternals = this.attachInternals();\n\t\t\t\t}\n\n\t\t\t\t// Add the function here, not below in the component so that\n\t\t\t\t// it's always available, not just when the inner Svelte component\n\t\t\t\t// is mounted\n\t\t\t\trandomIndex() {\n\t\t\t\t\tthis.elementIndex = Math.random();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}}\n/>\n\n<script>\n\tlet { elementIndex, attachedInternals } = $props();\n\t// ...\n\tfunction check() {\n\t\tattachedInternals.checkValidity();\n\t}\n</script>\n\n...\n```\n\n> [!NOTE] While Typescript is supported in the `extend` function, it is subject to limitations: you need to set `lang=\"ts\"` on one of the scripts AND you can only use [erasable syntax](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) in it. They are not processed by script preprocessors.\n\n## Caveats and limitations\n\nCustom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:\n\n- Styles are _encapsulated_, rather than merely _scoped_ (unless you set `shadow: \"none\"`). This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier\n- Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string\n- Custom elements are not generally suitable for server-side rendering, as the shadow DOM is invisible until JavaScript loads\n- In Svelte, slotted content renders _lazily_. In the DOM, it renders _eagerly_. In other words, it will always be created even if the component's `<slot>` element is inside an `{#if ...}` block. Similarly, including a `<slot>` in an `{#each ...}` block will not cause the slotted content to be rendered multiple times\n- The deprecated `let:` directive has no effect, because custom elements do not have a way to pass data to the parent component that fills the slot\n- Polyfills are required to support older browsers\n- You can use Svelte's context feature between regular Svelte components within a custom element, but you can't use them across custom elements. In other words, you can't use `setContext` on a parent custom element and read that with `getContext` in a child custom element.\n- Don't declare properties or attributes starting with `on`, as their usage will be interpreted as an event listener. In other words, Svelte treats `<custom-element oneworld={true}></custom-element>` as `customElement.addEventListener('eworld', true)` (and not as `customElement.oneworld = true`)",
+		"svelte/v4-migration-guide": "This migration guide provides an overview of how to migrate from Svelte version 3 to 4. See the linked PRs for more details about each change. Use the migration script to migrate some of these automatically: `npx svelte-migrate@latest svelte-4`\n\nIf you're a library author, consider whether to only support Svelte 4 or if it's possible to support Svelte 3 too. Since most of the breaking changes don't affect many people, this may be easily possible. Also remember to update the version range in your `peerDependencies`.\n\n## Minimum version requirements\n\n- Upgrade to Node 16 or higher. Earlier versions are no longer supported. ([#8566](https://github.com/sveltejs/svelte/issues/8566))\n- If you are using SvelteKit, upgrade to 1.20.4 or newer ([sveltejs/kit#10172](https://github.com/sveltejs/kit/pull/10172))\n- If you are using Vite without SvelteKit, upgrade to `vite-plugin-svelte` 2.4.1 or newer ([#8516](https://github.com/sveltejs/svelte/issues/8516))\n- If you are using webpack, upgrade to webpack 5 or higher and `svelte-loader` 3.1.8 or higher. Earlier versions are no longer supported. ([#8515](https://github.com/sveltejs/svelte/issues/8515), [198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))\n- If you are using Rollup, upgrade to `rollup-plugin-svelte` 7.1.5 or higher ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf))\n- If you are using TypeScript, upgrade to TypeScript 5 or higher. Lower versions might still work, but no guarantees are made about that. ([#8488](https://github.com/sveltejs/svelte/issues/8488))\n\n## Browser conditions for bundlers\n\nBundlers must now specify the `browser` condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. If you're using any others, you may observe lifecycle callbacks such as `onMount` not get called and you'll need to update the module resolution configuration.\n- For Rollup this is done within the `@rollup/plugin-node-resolve` plugin by setting `browser: true` in its options. See the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) documentation for more details\n- For webpack this is done by adding `\"browser\"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details\n\n([#8516](https://github.com/sveltejs/svelte/issues/8516))\n\n## Removal of CJS related output\n\nSvelte no longer supports the CommonJS (CJS) format for compiler output and has also removed the `svelte/register` hook and the CJS runtime version. If you need to stay on the CJS output format, consider using a bundler to convert Svelte's ESM output to CJS in a post-build step. ([#8613](https://github.com/sveltejs/svelte/issues/8613))\n\n## Stricter types for Svelte functions\n\nThere are now stricter types for `createEventDispatcher`, `Action`, `ActionReturn`, and `onMount`:\n\n- `createEventDispatcher` now supports specifying that a payload is optional, required, or non-existent, and the call sites are checked accordingly ([#7224](https://github.com/sveltejs/svelte/issues/7224))\n\n```ts\n// @errors: 2554 2345\nimport { createEventDispatcher } from 'svelte';\n\nconst dispatch = createEventDispatcher<{\n\toptional: number | null;\n\trequired: string;\n\tnoArgument: null;\n}>();\n\n// Svelte version 3:\ndispatch('optional');\ndispatch('required'); // I can still omit the detail argument\ndispatch('noArgument', 'surprise'); // I can still add a detail argument\n\n// Svelte version 4 using TypeScript strict mode:\ndispatch('optional');\ndispatch('required'); // error, missing argument\ndispatch('noArgument', 'surprise'); // error, cannot pass an argument\n```\n\n- `Action` and `ActionReturn` have a default parameter type of `undefined` now, which means you need to type the generic if you want to specify that this action receives a parameter. The migration script will migrate this automatically ([#7442](https://github.com/sveltejs/svelte/pull/7442))\n\n```ts\n// @noErrors\n---const action: Action = (node, params) => { ... } // this is now an error if you use params in any way---\n+++const action: Action<HTMLElement, string> = (node, params) => { ... } // params is of type string+++\n```\n\n- `onMount` now shows a type error if you return a function asynchronously from it, because this is likely a bug in your code where you expect the callback to be called on destroy, which it will only do for synchronously returned functions ([#8136](https://github.com/sveltejs/svelte/issues/8136))\n\n```js\n// @noErrors\n// Example where this change reveals an actual bug\nonMount(\n---\t// someCleanup() not called because function handed to onMount is async\n\tasync () => {\n\t\tconst something = await foo();---\n+++\t// someCleanup() is called because function handed to onMount is sync\n\t() => {\n\t\tfoo().then(something => {...});\n\t\t// ...\n\t\treturn () => someCleanup();\n\t}\n);\n```\n\n## Custom Elements with Svelte\n\nThe creation of custom elements with Svelte has been overhauled and significantly improved. The `tag` option is deprecated in favor of the new `customElement` option:\n\n```svelte\n---<svelte:options tag=\"my-component\" />---\n+++<svelte:options customElement=\"my-component\" />+++\n```\n\nThis change was made to allow [more configurability](custom-elements#Component-options) for advanced use cases. The migration script will adjust your code automatically. The update timing of properties has changed slightly as well. ([#8457](https://github.com/sveltejs/svelte/issues/8457))\n\n## SvelteComponentTyped is deprecated\n\n`SvelteComponentTyped` is deprecated, as `SvelteComponent` now has all its typing capabilities. Replace all instances of `SvelteComponentTyped` with `SvelteComponent`.\n\n```js\n---import { SvelteComponentTyped } from 'svelte';---\n+++import { SvelteComponent } from 'svelte';+++\n\n---export class Foo extends SvelteComponentTyped<{ aProp: string }> {}---\n+++export class Foo extends SvelteComponent<{ aProp: string }> {}+++\n```\n\nIf you have used `SvelteComponent` as the component instance type previously, you may see a somewhat opaque type error now, which is solved by changing `: typeof SvelteComponent` to `: typeof SvelteComponent<any>`.\n\n```svelte\n<script>\n\timport ComponentA from './ComponentA.svelte';\n\timport ComponentB from './ComponentB.svelte';\n\timport { SvelteComponent } from 'svelte';\n\n\tlet component: typeof SvelteComponent+++<any>+++;\n\n\tfunction choseRandomly() {\n\t\tcomponent = Math.random() > 0.5 ? ComponentA : ComponentB;\n\t}\n</script>\n\n<button on:click={choseRandomly}>random</button>\n<svelte:element this={component} />\n```\n\nThe migration script will do both automatically for you. ([#8512](https://github.com/sveltejs/svelte/issues/8512))\n\n## Transitions are local by default\n\nTransitions are now local by default to prevent confusion around page navigations. \"local\" means that a transition will not play if it's within a nested control flow block (`each/if/await/key`) and not the direct parent block but a block above it is created/destroyed. In the following example, the `slide` intro animation will only play when `success` goes from `false` to `true`, but it will _not_ play when `show` goes from `false` to `true`:\n\n```svelte\n{#if show}\n\t...\n\t{#if success}\n\t\t<p in:slide>Success</p>\n\t{/each}\n{/if}\n```\n\nTo make transitions global, add the `|global` modifier - then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))\n\n## Default slot bindings\n\nDefault slot bindings are no longer exposed to named slots and vice versa:\n\n```svelte\n<script>\n\timport Nested from './Nested.svelte';\n</script>\n\n<Nested let:count>\n\t<p>\n\t\tcount in default slot - is available: {count}\n\t</p>\n\t<p slot=\"bar\">\n\t\tcount in bar slot - is not available: {count}\n\t</p>\n</Nested>\n```\n\nThis makes slot bindings more consistent as the behavior is undefined when for example the default slot is from a list and the named slot is not. ([#6049](https://github.com/sveltejs/svelte/issues/6049))\n\n## Preprocessors\n\nThe order in which preprocessors are applied has changed. Now, preprocessors are executed in order, and within one group, the order is markup, script, style.\n\n```js\n// @errors: 2304\nimport { preprocess } from 'svelte/compiler';\n\nconst { code } = await preprocess(\n\tsource,\n\t[\n\t\t{\n\t\t\tmarkup: () => {\n\t\t\t\tconsole.log('markup-1');\n\t\t\t},\n\t\t\tscript: () => {\n\t\t\t\tconsole.log('script-1');\n\t\t\t},\n\t\t\tstyle: () => {\n\t\t\t\tconsole.log('style-1');\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tmarkup: () => {\n\t\t\t\tconsole.log('markup-2');\n\t\t\t},\n\t\t\tscript: () => {\n\t\t\t\tconsole.log('script-2');\n\t\t\t},\n\t\t\tstyle: () => {\n\t\t\t\tconsole.log('style-2');\n\t\t\t}\n\t\t}\n\t],\n\t{\n\t\tfilename: 'App.svelte'\n\t}\n);\n\n// Svelte 3 logs:\n// markup-1\n// markup-2\n// script-1\n// script-2\n// style-1\n// style-2\n\n// Svelte 4 logs:\n// markup-1\n// script-1\n// style-1\n// markup-2\n// script-2\n// style-2\n```\n\nThis could affect you for example if you are using `MDsveX` - in which case you should make sure it comes before any script or style preprocessor.\n\n```js\n// @noErrors\npreprocess: [\n---\tvitePreprocess(),\n\tmdsvex(mdsvexConfig)---\n+++\tmdsvex(mdsvexConfig),\n\tvitePreprocess()+++\n]\n```\n\nEach preprocessor must also have a name. ([#8618](https://github.com/sveltejs/svelte/issues/8618))\n\n## New eslint package\n\n`eslint-plugin-svelte3` is deprecated. It may still work with Svelte 4 but we make no guarantees about that. We recommend switching to our new package [eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte). See [this Github post](https://github.com/sveltejs/kit/issues/10242#issuecomment-1610798405) for an instruction how to migrate. Alternatively, you can create a new project using `npm create svelte@latest`, select the eslint (and possibly TypeScript) option and then copy over the related files into your existing project.\n\n## Other breaking changes\n\n- the `inert` attribute is now applied to outroing elements to make them invisible to assistive technology and prevent interaction. ([#8628](https://github.com/sveltejs/svelte/pull/8628))\n- the runtime now uses `classList.toggle(name, boolean)` which may not work in very old browsers. Consider using a [polyfill](https://github.com/eligrey/classList.js) if you need to support these browsers. ([#8629](https://github.com/sveltejs/svelte/issues/8629))\n- the runtime now uses the `CustomEvent` constructor which may not work in very old browsers. Consider using a [polyfill](https://github.com/theftprevention/event-constructor-polyfill/tree/master) if you need to support these browsers. ([#8775](https://github.com/sveltejs/svelte/pull/8775))\n- people implementing their own stores from scratch using the `StartStopNotifier` interface (which is passed to the create function of `writable` etc) from `svelte/store` now need to pass an update function in addition to the set function. This has no effect on people using stores or creating stores using the existing Svelte stores. ([#6750](https://github.com/sveltejs/svelte/issues/6750))\n- `derived` will now throw an error on falsy values instead of stores passed to it. ([#7947](https://github.com/sveltejs/svelte/issues/7947))\n- type definitions for `svelte/internal` were removed to further discourage usage of those internal methods which are not public API. Most of these will likely change for Svelte 5\n- Removal of DOM nodes is now batched which slightly changes its order, which might affect the order of events fired if you're using a `MutationObserver` on these elements ([#8763](https://github.com/sveltejs/svelte/pull/8763))\n- if you enhanced the global typings through the `svelte.JSX` namespace before, you need to migrate this to use the `svelteHTML` namespace. Similarly if you used the `svelte.JSX` namespace to use type definitions from it, you need to migrate those to use the types from `svelte/elements` instead. You can find more information about what to do [here](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings)",
+		"svelte/v5-migration-guide": "Version 5 comes with an overhauled syntax and reactivity system. While it may look different at first, you'll soon notice many similarities. This guide goes over the changes in detail and shows you how to upgrade. Along with it, we also provide information on _why_ we did these changes.\n\nYou don't have to migrate to the new syntax right away - Svelte 5 still supports the old Svelte 4 syntax, and you can mix and match components using the new syntax with components using the old and vice versa. We expect many people to be able to upgrade with only a few lines of code changed initially. There's also a [migration script](#Migration-script) that helps you with many of these steps automatically.\n\n## Reactivity syntax changes\n\nAt the heart of Svelte 5 is the new runes API. Runes are basically compiler instructions that inform Svelte about reactivity. Syntactically, runes are functions starting with a dollar-sign.\n\n### let → $state\n\nIn Svelte 4, a `let` declaration at the top level of a component was implicitly reactive. In Svelte 5, things are more explicit: a variable is reactive when created using the `$state` rune. Let's migrate the counter to runes mode by wrapping the counter in `$state`:\n\n```svelte\n<script>\n\tlet count = +++$state(0)+++;\n</script>\n```\n\nNothing else changes. `count` is still the number itself, and you read and write directly to it, without a wrapper like `.value` or `getCount()`.\n\n> [!DETAILS] Why we did this\n> `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained - a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API outside the top level of components. Head to [the tutorial](/tutorial) to learn more.\n\n### $: → $derived/$effect\n\nIn Svelte 4, a `$:` statement at the top level of a component could be used to declare a derivation, i.e. state that is entirely defined through a computation of other state. In Svelte 5, this is achieved using the `$derived` rune:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\t---$:--- +++const+++ double = +++$derived(count * 2)+++;\n</script>\n```\n\nAs with `$state`, nothing else changes. `double` is still the number itself, and you read it directly, without a wrapper like `.value` or `getDouble()`.\n\nA `$:` statement could also be used to create side effects. In Svelte 5, this is achieved using the `$effect` rune:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\n\t---$:---+++$effect(() =>+++ {\n\t\tif (count > 5) {\n\t\t\talert('Count is too high!');\n\t\t}\n\t}+++);+++\n</script>\n```\n\nNote that [when `$effect` runs is different]($effect#Understanding-dependencies) than when `$:` runs.\n\n> [!DETAILS] Why we did this\n> `$:` was a great shorthand and easy to get started with: you could slap a `$:` in front of most code and it would somehow work. This intuitiveness was also its drawback the more complicated your code became, because it wasn't as easy to reason about. Was the intent of the code to create a derivation, or a side effect? With `$derived` and `$effect`, you have a bit more up-front decision making to do (spoiler alert: 90% of the time you want `$derived`), but future-you and other developers on your team will have an easier time.\n>\n> There were also gotchas that were hard to spot:\n>\n> - `$:` only updated directly before rendering, which meant you could read stale values in-between rerenders\n> - `$:` only ran once per tick, which meant that statements may run less often than you think\n> - `$:` dependencies were determined through static analysis of the dependencies. This worked in most cases, but could break in subtle ways during a refactoring where dependencies would be for example moved into a function and no longer be visible as a result\n> - `$:` statements were also ordered by using static analysis of the dependencies. In some cases there could be ties and the ordering would be wrong as a result, needing manual interventions. Ordering could also break while refactoring code and some dependencies no longer being visible as a result.\n>\n> Lastly, it wasn't TypeScript-friendly (our editor tooling had to jump through some hoops to make it valid for TypeScript), which was a blocker for making Svelte's reactivity model truly universal.\n>\n> `$derived` and `$effect` fix all of these by\n>\n> - always returning the latest value\n> - running as often as needed to be stable\n> - determining the dependencies at runtime, and therefore being immune to refactorings\n> - executing dependencies as needed and therefore being immune to ordering problems\n> - being TypeScript-friendly\n\n### export let → $props\n\nIn Svelte 4, properties of a component were declared using `export let`. Each property was one declaration. In Svelte 5, all properties are declared through the `$props` rune, through destructuring:\n\n```svelte\n<script>\n\t---export let optional = 'unset';---\n\t---export let required;---\n\t+++let { optional = 'unset', required } = $props();+++\n</script>\n```\n\nThere are multiple cases where declaring properties becomes less straightforward than having a few `export let` declarations:\n\n- you want to rename the property, for example because the name is a reserved identifier (e.g. `class`)\n- you don't know which other properties to expect in advance\n- you want to forward every property to another component\n\nAll these cases need special syntax in Svelte 4:\n\n- renaming: `export { klass as class}`\n- other properties: `$$restProps`\n- all properties `$$props`\n\nIn Svelte 5, the `$props` rune makes this straightforward without any additional Svelte-specific syntax:\n\n- renaming: use property renaming `let { class: klass } = $props();`\n- other properties: use spreading `let { foo, bar, ...rest } = $props();`\n- all properties: don't destructure `let props = $props();`\n\n```svelte\n<script>\n\t---let klass = '';---\n\t---export { klass as class};---\n\t+++let { class: klass, ...rest } = $props();+++\n</script>\n<button class={klass} {...---$$restProps---+++rest+++}>click me</button>\n```\n\n> [!DETAILS] Why we did this\n> `export let` was one of the more controversial API decisions, and there was a lot of debate about whether you should think about a property being `export`ed or `import`ed. `$props` doesn't have this trait. It's also in line with the other runes, and the general thinking reduces to \"everything special to reactivity in Svelte is a rune\".\n>\n> There were also a lot of limitations around `export let`, which required additional API, as shown above. `$props` unite this in one syntactical concept that leans heavily on regular JavaScript destructuring syntax.\n\n## Event changes\n\nEvent handlers have been given a facelift in Svelte 5. Whereas in Svelte 4 we use the `on:` directive to attach an event listener to an element, in Svelte 5 they are properties like any other (in other words - remove the colon):\n\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n\n<button on---:---click={() => count++}>\n\tclicks: {count}\n</button>\n```\n\nSince they're just properties, you can use the normal shorthand syntax...\n\n```svelte\n<script>\n\tlet count = $state(0);\n\n\tfunction onclick() {\n\t\tcount++;\n\t}\n</script>\n\n<button {onclick}>\n\tclicks: {count}\n</button>\n```\n\n...though when using a named event handler function it's usually better to use a more descriptive name.\n\n### Component events\n\nIn Svelte 4, components could emit events by creating a dispatcher with `createEventDispatcher`.\n\nThis function is deprecated in Svelte 5. Instead, components should accept _callback props_ - which means you then pass functions as properties to these components:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Pump from './Pump.svelte';\n\n\tlet size = $state(15);\n\tlet burst = $state(false);\n\n\tfunction reset() {\n\t\tsize = 15;\n\t\tburst = false;\n\t}\n</script>\n\n<Pump\n\t---on:---inflate={(power) => {\n\t\tsize += power---.detail---;\n\t\tif (size > 75) burst = true;\n\t}}\n\t---on:---deflate={(power) => {\n\t\tif (size > 0) size -= power---.detail---;\n\t}}\n/>\n\n{#if burst}\n\t<button onclick={reset}>new balloon</button>\n\t<span class=\"boom\">💥</span>\n{:else}\n\t<span class=\"balloon\" style=\"scale: {0.01 * size}\">\n\t\t🎈\n\t</span>\n{/if}\n```\n\n```svelte\n<!--- file: Pump.svelte --->\n<script>\n\t---import { createEventDispatcher } from 'svelte';---\n\t---const dispatch = createEventDispatcher();---\n\n\t+++let { inflate, deflate } = $props();+++\n\tlet power = $state(5);\n</script>\n\n<button onclick={() => ---dispatch('inflate', power)---+++inflate(power)+++}>\n\tinflate\n</button>\n<button onclick={() => ---dispatch('deflate', power)---+++deflate(power)+++}>\n\tdeflate\n</button>\n<button onclick={() => power--}>-</button>\nPump power: {power}\n<button onclick={() => power++}>+</button>\n```\n\n### Bubbling events\n\nInstead of doing `<button on:click>` to 'forward' the event from the element to the component, the component should accept an `onclick` callback prop:\n\n```svelte\n<script>\n\t+++let { onclick } = $props();+++\n</script>\n\n<button ---on:click--- +++{onclick}+++>\n\tclick me\n</button>\n```\n\nNote that this also means you can 'spread' event handlers onto the element along with other props instead of tediously forwarding each event separately:\n\n```svelte\n<script>\n\tlet props = $props();\n</script>\n\n<button ---{...$$props} on:click on:keydown on:all_the_other_stuff--- +++{...props}+++>\n\tclick me\n</button>\n```\n\n### Event modifiers\n\nIn Svelte 4, you can add event modifiers to handlers:\n\n```svelte\n<button on:click|once|preventDefault={handler}>...</button>\n```\n\nModifiers are specific to `on:` and so do not work with modern event handlers. Adding things like `event.preventDefault()` inside the handler itself is preferable, since all the logic lives in one place rather than being split between handler and modifiers.\n\nSince event handlers are just functions, you can create your own wrappers as necessary:\n\n```svelte\n<script>\n\tfunction once(fn) {\n\t\treturn function (event) {\n\t\t\tif (fn) fn.call(this, event);\n\t\t\tfn = null;\n\t\t};\n\t}\n\n\tfunction preventDefault(fn) {\n\t\treturn function (event) {\n\t\t\tevent.preventDefault();\n\t\t\tfn.call(this, event);\n\t\t};\n\t}\n</script>\n\n<button onclick={once(preventDefault(handler))}>...</button>\n```\n\nThere are three modifiers — `capture`, `passive` and `nonpassive` — that can't be expressed as wrapper functions, since they need to be applied when the event handler is bound rather than when it runs.\n\nFor `capture`, we add the modifier to the event name:\n\n```svelte\n<button onclickcapture={...}>...</button>\n```\n\nChanging the [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) option of an event handler, meanwhile, is not something to be done lightly. If you have a use case for it — and you probably don't! — then you will need to use an action to apply the event handler yourself.\n\n### Multiple event handlers\n\nIn Svelte 4, this is possible:\n\n```svelte\n<button on:click={one} on:click={two}>...</button>\n```\n\nDuplicate attributes/properties on elements — which now includes event handlers — are not allowed. Instead, do this:\n\n```svelte\n<button\n\tonclick={(e) => {\n\t\tone(e);\n\t\ttwo(e);\n\t}}\n>\n\t...\n</button>\n```\n\nWhen spreading props, local event handlers must go _after_ the spread, or they risk being overwritten:\n\n```svelte\n<button\n\t{...props}\n\tonclick={(e) => {\n\t\tdoStuff(e);\n\t\tprops.onclick?.(e);\n\t}}\n>\n\t...\n</button>\n```\n\n> [!DETAILS] Why we did this\n> `createEventDispatcher` was always a bit boilerplate-y:\n>\n> - import the function\n> - call the function to get a dispatch function\n> - call said dispatch function with a string and possibly a payload\n> - retrieve said payload on the other end through a `.detail` property, because the event itself was always a `CustomEvent`\n>\n> It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do.\n>\n> The removal of event modifiers is arguably one of the changes that seems like a step back for those who've liked the shorthand syntax of event modifiers. Given that they are not used that frequently, we traded a smaller surface area for more explicitness. Modifiers also were inconsistent, because most of them were only useable on DOM elements.\n>\n> Multiple listeners for the same event are also no longer possible, but it was something of an anti-pattern anyway, since it impedes readability: if there are many attributes, it becomes harder to spot that there are two handlers unless they are right next to each other. It also implies that the two handlers are independent, when in fact something like `event.stopImmediatePropagation()` inside `one` would prevent `two` from being called.\n>\n> By deprecating `createEventDispatcher` and the `on:` directive in favour of callback props and normal element properties, we:\n>\n> - reduce Svelte's learning curve\n> - remove boilerplate, particularly around `createEventDispatcher`\n> - remove the overhead of creating `CustomEvent` objects for events that may not even have listeners\n> - add the ability to spread event handlers\n> - add the ability to know which event handlers were provided to a component\n> - add the ability to express whether a given event handler is required or optional\n> - increase type safety (previously, it was effectively impossible for Svelte to guarantee that a component didn't emit a particular event)\n\n## Snippets instead of slots\n\nIn Svelte 4, content can be passed to components using slots. Svelte 5 replaces them with snippets, which are more powerful and flexible, and so slots are deprecated in Svelte 5.\n\nThey continue to work, however, and you can pass snippets to a component that uses slots:\n\n```svelte\n<!--- file: Child.svelte --->\n<slot />\n<hr />\n<slot name=\"foo\" message=\"hello\" />\n```\n\n```svelte\n<!--- file: Parent.svelte --->\n<script>\n\timport Child from './Child.svelte';\n</script>\n\n<Child>\n\tdefault child content\n\n\t{#snippet foo({ message })}\n\t\tmessage from child: {message}\n\t{/snippet}\n</Child>\n```\n\n(The reverse is not true — you cannot pass slotted content to a component that uses [`{@render ...}`](/docs/svelte/@render) tags.)\n\nWhen using custom elements, you should still use `<slot />` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it.\n\n### Default content\n\nIn Svelte 4, the easiest way to pass a piece of UI to the child was using a `<slot />`. In Svelte 5, this is done using the `children` prop instead, which is then shown with `{@render children()}`:\n\n```svelte\n<script>\n\t+++let { children } = $props();+++\n</script>\n\n---<slot />---\n+++{@render children?.()}+++\n```\n\n### Multiple content placeholders\n\nIf you wanted multiple UI placeholders, you had to use named slots. In Svelte 5, use props instead, name them however you like and `{@render ...}` them:\n\n```svelte\n<script>\n\t+++let { header, main, footer } = $props();+++\n</script>\n\n<header>\n\t---<slot name=\"header\" />---\n\t+++{@render header()}+++\n</header>\n\n<main>\n\t---<slot name=\"main\" />---\n\t+++{@render main()}+++\n</main>\n\n<footer>\n\t---<slot name=\"footer\" />---\n\t+++{@render footer()}+++\n</footer>\n```\n\n### Passing data back up\n\nIn Svelte 4, you would pass data to a `<slot />` and then retrieve it with `let:` in the parent component. In Svelte 5, snippets take on that responsibility:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport List from './List.svelte';\n</script>\n\n<List items={['one', 'two', 'three']} ---let:item--->\n\t+++{#snippet item(text)}+++\n\t\t<span>{text}</span>\n\t+++{/snippet}+++\n\t---<span slot=\"empty\">No items yet</span>---\n\t+++{#snippet empty()}\n\t\t<span>No items yet</span>\n\t{/snippet}+++\n</List>\n```\n\n```svelte\n<!--- file: List.svelte --->\n<script>\n\tlet { items, +++item, empty+++ } = $props();\n</script>\n\n{#if items.length}\n\t<ul>\n\t\t{#each items as entry}\n\t\t\t<li>\n\t\t\t\t---<slot item={entry} />---\n\t\t\t\t+++{@render item(entry)}+++\n\t\t\t</li>\n\t\t{/each}\n\t</ul>\n{:else}\n\t---<slot name=\"empty\" />---\n\t+++{@render empty?.()}+++\n{/if}\n```\n\n> [!DETAILS] Why we did this\n> Slots were easy to get started with, but the more advanced the use case became, the more involved and confusing the syntax became:\n>\n> - the `let:` syntax was confusing to many people as it _creates_ a variable whereas all other `:` directives _receive_ a variable\n> - the scope of a variable declared with `let:` wasn't clear. In the example above, it may look like you can use the `item` slot prop in the `empty` slot, but that's not true\n> - named slots had to be applied to an element using the `slot` attribute. Sometimes you didn't want to create an element, so we had to add the `<svelte:fragment>` API\n> - named slots could also be applied to a component, which changed the semantics of where `let:` directives are available (even today us maintainers often don't know which way around it works)\n>\n> Snippets solve all of these problems by being much more readable and clear. At the same time they're more powerful as they allow you to define sections of UI that you can render _anywhere_, not just passing them as props to a component.\n\n## Migration script\n\nBy now you should have a pretty good understanding of the before/after and how the old syntax relates to the new syntax. It probably also became clear that a lot of these migrations are rather technical and repetitive - something you don't want to do by hand.\n\nWe thought the same, which is why we provide a migration script to do most of the migration automatically. You can upgrade your project by using `npx sv migrate svelte-5`. This will do the following things:\n\n- bump core dependencies in your `package.json`\n- migrate to runes (`let` → `$state` etc)\n- migrate to event attributes for DOM elements (`on:click` → `onclick`)\n- migrate slot creations to render tags (`<slot />` → `{@render children()}`)\n- migrate slot usages to snippets (`<div slot=\"x\">...</div>` → `{#snippet x()}<div>...</div>{/snippet}`)\n- migrate obvious component creations (`new Component(...)` → `mount(Component, ...)`)\n\nYou can also migrate a single component in VS Code through the `Migrate Component to Svelte 5 Syntax` command, or in our Playground through the `Migrate` button.\n\nNot everything can be migrated automatically, and some migrations need manual cleanup afterwards. The following sections describe these in more detail.\n\n### run\n\nYou may see that the migration script converts some of your `$:` statements to a `run` function which is imported from `svelte/legacy`. This happens if the migration script couldn't reliably migrate the statement to a `$derived` and concluded this is a side effect instead. In some cases this may be wrong and it's best to change this to use a `$derived` instead. In other cases it may be right, but since `$:` statements also ran on the server but `$effect` does not, it isn't safe to transform it as such. Instead, `run` is used as a stopgap solution. `run` mimics most of the characteristics of `$:`, in that it runs on the server once, and runs as `$effect.pre` on the client (`$effect.pre` runs _before_ changes are applied to the DOM; most likely you want to use `$effect` instead).\n\n```svelte\n<script>\n\t---import { run } from 'svelte/legacy';---\n\t---run(() => {---\n\t+++$effect(() => {+++\n\t\t// some side effect code\n\t})\n</script>\n```\n\n### Event modifiers\n\nEvent modifiers are not applicable to event attributes (e.g. you can't do `onclick|preventDefault={...}`). Therefore, when migrating event directives to event attributes, we need a function-replacement for these modifiers. These are imported from `svelte/legacy`, and should be migrated away from in favor of e.g. just using `event.preventDefault()`.\n\n```svelte\n<script>\n\t---import { preventDefault } from 'svelte/legacy';---\n</script>\n\n<button\n\tonclick={---preventDefault---((event) => {\n\t\t+++event.preventDefault();+++\n\t\t// ...\n\t})}\n>\n\tclick me\n</button>\n```\n\n### Things that are not automigrated\n\nThe migration script does not convert `createEventDispatcher`. You need to adjust those parts manually. It doesn't do it because it's too risky because it could result in breakage for users of the component, which the migration script cannot find out.\n\nThe migration script does not convert `beforeUpdate/afterUpdate`. It doesn't do it because it's impossible to determine the actual intent of the code. As a rule of thumb you can often go with a combination of `$effect.pre` (runs at the same time as `beforeUpdate` did) and `tick` (imported from `svelte`, allows you to wait until changes are applied to the DOM and then do some work).\n\n## Components are no longer classes\n\nIn Svelte 3 and 4, components are classes. In Svelte 5 they are functions and should be instantiated differently. If you need to manually instantiate components, you should use `mount` or `hydrate` (imported from `svelte`) instead. If you see this error using SvelteKit, try updating to the latest version of SvelteKit first, which adds support for Svelte 5. If you're using Svelte without SvelteKit, you'll likely have a `main.js` file (or similar) which you need to adjust:\n\n```js\n+++import { mount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\") });---\n+++const app = mount(App, { target: document.getElementById(\"app\") });+++\n\nexport default app;\n```\n\n`mount` and `hydrate` have the exact same API. The difference is that `hydrate` will pick up the Svelte's server-rendered HTML inside its target and hydrate it. Both return an object with the exports of the component and potentially property accessors (if compiled with `accessors: true`). They do not come with the `$on`, `$set` and `$destroy` methods you may know from the class component API. These are its replacements:\n\nFor `$on`, instead of listening to events, pass them via the `events` property on the options argument.\n\n```js\n+++import { mount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\") });\napp.$on('event', callback);---\n+++const app = mount(App, { target: document.getElementById(\"app\"), events: { event: callback } });+++\n```\n\n> [!NOTE] Note that using `events` is discouraged — instead, [use callbacks](#Event-changes)\n\nFor `$set`, use `$state` instead to create a reactive property object and manipulate it. If you're doing this inside a `.js` or `.ts` file, adjust the ending to include `.svelte`, i.e. `.svelte.js` or `.svelte.ts`.\n\n```js\n+++import { mount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\"), props: { foo: 'bar' } });\napp.$set({ foo: 'baz' });---\n+++const props = $state({ foo: 'bar' });\nconst app = mount(App, { target: document.getElementById(\"app\"), props });\nprops.foo = 'baz';+++\n```\n\nFor `$destroy`, use `unmount` instead.\n\n```js\n+++import { mount, unmount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\"), props: { foo: 'bar' } });\napp.$destroy();---\n+++const app = mount(App, { target: document.getElementById(\"app\") });\nunmount(app);+++\n```\n\nAs a stop-gap-solution, you can also use `createClassComponent` or `asClassComponent` (imported from `svelte/legacy`) instead to keep the same API known from Svelte 4 after instantiating.\n\n```js\n+++import { createClassComponent } from 'svelte/legacy';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\") });---\n+++const app = createClassComponent({ component: App, target: document.getElementById(\"app\") });+++\n\nexport default app;\n```\n\nIf this component is not under your control, you can use the `compatibility.componentApi` compiler option for auto-applied backwards compatibility, which means code using `new Component(...)` keeps working without adjustments (note that this adds a bit of overhead to each component). This will also add `$set` and `$on` methods for all component instances you get through `bind:this`.\n\n```js\n/// svelte.config.js\nexport default {\n\tcompilerOptions: {\n\t\tcompatibility: {\n\t\t\tcomponentApi: 4\n\t\t}\n\t}\n};\n```\n\nNote that `mount` and `hydrate` are _not_ synchronous, so things like `onMount` won't have been called by the time the function returns and the pending block of promises will not have been rendered yet (because `#await` waits a microtask to wait for a potentially immediately-resolved promise). If you need that guarantee, call `flushSync` (import from `'svelte'`) after calling `mount/hydrate`.\n\n### Server API changes\n\nSimilarly, components no longer have a `render` method when compiled for server-side rendering. Instead, pass the function to `render` from `svelte/server`:\n\n```js\n+++import { render } from 'svelte/server';+++\nimport App from './App.svelte';\n\n---const { html, head } = App.render({ props: { message: 'hello' }});---\n+++const { html, head } = render(App, { props: { message: 'hello' }});+++\n```\n\nIn Svelte 4, rendering a component to a string also returned the CSS of all components. In Svelte 5, this is no longer the case by default because most of the time you're using a tooling chain that takes care of it in other ways (like SvelteKit). If you need CSS to be returned from `render`, you can set the `css` compiler option to `'injected'` and it will add `<style>` elements to the `head`.\n\n### Component typing changes\n\nThe change from classes towards functions is also reflected in the typings: `SvelteComponent`, the base class from Svelte 4, is deprecated in favour of the new `Component` type which defines the function shape of a Svelte component. To manually define a component shape in a `d.ts` file:\n\n```ts\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{\n\tfoo: string;\n}>;\n```\n\nTo declare that a component of a certain type is required:\n\n```js\nimport { ComponentA, ComponentB } from 'component-library';\n---import type { SvelteComponent } from 'svelte';---\n+++import type { Component } from 'svelte';+++\n\n---let C: typeof SvelteComponent<{ foo: string }> = $state(---\n+++let C: Component<{ foo: string }> = $state(+++\n\tMath.random() ? ComponentA : ComponentB\n);\n```\n\nThe two utility types `ComponentEvents` and `ComponentType` are also deprecated. `ComponentEvents` is obsolete because events are defined as callback props now, and `ComponentType` is obsolete because the new `Component` type is the component type already (i.e. `ComponentType<SvelteComponent<{ prop: string }>>` is equivalent to `Component<{ prop: string }>`).\n\n### bind:this changes\n\nBecause components are no longer classes, using `bind:this` no longer returns a class instance with `$set`, `$on` and `$destroy` methods on it. It only returns the instance exports (`export function/const`) and, if you're using the `accessors` option, a getter/setter-pair for each property.\n\n## `<svelte:component>` is no longer necessary\n\nIn Svelte 4, components are _static_ — if you render `<Thing>`, and the value of `Thing` changes, [nothing happens](/playground/7f1fa24f0ab44c1089dcbb03568f8dfa?version=4.2.18). To make it dynamic you had to use `<svelte:component>`.\n\nThis is no longer true in Svelte 5:\n\n```svelte\n<script>\n\timport A from './A.svelte';\n\timport B from './B.svelte';\n\n\tlet Thing = $state();\n</script>\n\n<select bind:value={Thing}>\n\t<option value={A}>A</option>\n\t<option value={B}>B</option>\n</select>\n\n<!-- these are equivalent -->\n<Thing />\n<svelte:component this={Thing} />\n```\nWhile migrating, keep in mind that your component's name should be capitalized (`Thing`) to distinguish it from elements, unless using dot notation.\n\n### Dot notation indicates a component\n\nIn Svelte 4, `<foo.bar>` would create an element with a tag name of `\"foo.bar\"`. In Svelte 5, `foo.bar` is treated as a component instead. This is particularly useful inside `each` blocks:\n\n```svelte\n{#each items as item}\n\t<item.component {...item.props} />\n{/each}\n```\n\n## Whitespace handling changed\n\nPreviously, Svelte employed a very complicated algorithm to determine if whitespace should be kept or not. Svelte 5 simplifies this which makes it easier to reason about as a developer. The rules are:\n\n- Whitespace between nodes is collapsed to one whitespace\n- Whitespace at the start and end of a tag is removed completely\n- Certain exceptions apply such as keeping whitespace inside `pre` tags\n\nAs before, you can disable whitespace trimming by setting the `preserveWhitespace` option in your compiler settings or on a per-component basis in `<svelte:options>`.\n\n## Modern browser required\n\nSvelte 5 requires a modern browser (in other words, not Internet Explorer) for various reasons:\n\n- it uses [`Proxies`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\n- elements with `clientWidth`/`clientHeight`/`offsetWidth`/`offsetHeight` bindings use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) rather than a convoluted `<iframe>` hack\n- `<input type=\"range\" bind:value={...} />` only uses an `input` event listener, rather than also listening for `change` events as a fallback\n\nThe `legacy` compiler option, which generated bulkier but IE-friendly code, no longer exists.\n\n## Changes to compiler options\n\n- The `false`/`true` (already deprecated previously) and the `\"none\"` values were removed as valid values from the `css` option\n- The `legacy` option was repurposed\n- The `hydratable` option has been removed. Svelte components are always hydratable now\n- The `enableSourcemap` option has been removed. Source maps are always generated now, tooling can choose to ignore it\n- The `tag` option was removed. Use `<svelte:options customElement=\"tag-name\" />` inside the component instead\n- The `loopGuardTimeout`, `format`, `sveltePath`, `errorMode` and `varsReport` options were removed\n\n## The `children` prop is reserved\n\nContent inside component tags becomes a snippet prop called `children`. You cannot have a separate prop by that name.\n\n## Breaking changes in runes mode\n\nSome breaking changes only apply once your component is in runes mode.\n\n### Bindings to component exports are not allowed\n\nExports from runes mode components cannot be bound to directly. For example, having `export const foo = ...` in component `A` and then doing `<A bind:foo />` causes an error. Use `bind:this` instead — `<A bind:this={a} />` — and access the export as `a.foo`. This change makes things easier to reason about, as it enforces a clear separation between props and exports.\n\n### Bindings need to be explicitly defined using `$bindable()`\n\nIn Svelte 4 syntax, every property (declared via `export let`) is bindable, meaning you can `bind:` to it. In runes mode, properties are not bindable by default: you need to denote bindable props with the `$bindable` rune.\n\nIf a bindable property has a default value (e.g. `let { foo = $bindable('bar') } = $props();`), you need to pass a non-`undefined` value to that property if you're binding to it. This prevents ambiguous behavior — the parent and child must have the same value — and results in better performance (in Svelte 4, the default value was reflected back to the parent, resulting in wasteful additional render cycles).\n\n### `accessors` option is ignored\n\nSetting the `accessors` option to `true` makes properties of a component directly accessible on the component instance.\n\n```svelte\n<svelte:options accessors={true} />\n\n<script>\n\t// available via componentInstance.name\n\texport let name;\n</script>\n```\n\nIn runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.\n\n```svelte\n<script>\n\tlet { name } = $props();\n\t// available via componentInstance.getName()\n\texport const getName = () => name;\n</script>\n```\n\nAlternatively, if the place where they are instantiated is under your control, you can also make use of runes inside `.js/.ts` files by adjusting their ending to include `.svelte`, i.e. `.svelte.js` or `.svelte.ts`, and then use `$state`:\n\n```js\n+++import { mount } from 'svelte';+++\nimport App from './App.svelte'\n\n---const app = new App({ target: document.getElementById(\"app\"), props: { foo: 'bar' } });\napp.foo = 'baz'---\n+++const props = $state({ foo: 'bar' });\nconst app = mount(App, { target: document.getElementById(\"app\"), props });\nprops.foo = 'baz';+++\n```\n\n### `immutable` option is ignored\n\nSetting the `immutable` option has no effect in runes mode. This concept is replaced by how `$state` and its variations work.\n\n### Classes are no longer \"auto-reactive\"\n\nIn Svelte 4, doing the following triggered reactivity:\n\n```svelte\n<script>\n\tlet foo = new Foo();\n</script>\n\n<button on:click={() => (foo.value = 1)}>{foo.value}</button\n>\n```\n\nThis is because the Svelte compiler treated the assignment to `foo.value` as an instruction to update anything that referenced `foo`. In Svelte 5, reactivity is determined at runtime rather than compile time, so you should define `value` as a reactive `$state` field on the `Foo` class. Wrapping `new Foo()` with `$state(...)` will have no effect — only vanilla objects and arrays are made deeply reactive.\n\n### Touch and wheel events are passive\n\nWhen using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.\n\nIn the very rare cases that you need to prevent these event defaults, you should use [`on`](/docs/svelte/svelte-events#on) instead (for example inside an action).\n\n### Attribute/prop syntax is stricter\n\nIn Svelte 4, complex attribute values needn't be quoted:\n\n<!-- prettier-ignore -->\n```svelte\n<Component prop=this{is}valid />\n```\n\nThis is a footgun. In runes mode, if you want to concatenate stuff you must wrap the value in quotes:\n\n```svelte\n<Component prop=\"this{is}valid\" />\n```\n\nNote that Svelte 5 will also warn if you have a single expression wrapped in quotes, like `answer=\"{42}\"` — in Svelte 6, that will cause the value to be converted to a string, rather than passed as a number.\n\n### HTML structure is stricter\n\nIn Svelte 4, you were allowed to write HTML code that would be repaired by the browser when server-side rendering it. For example you could write this...\n\n```svelte\n<table>\n\t<tr>\n\t\t<td>hi</td>\n\t</tr>\n</table>\n```\n\n... and the browser would auto-insert a `<tbody>` element:\n\n```svelte\n<table>\n\t<tbody>\n\t\t<tr>\n\t\t\t<td>hi</td>\n\t\t</tr>\n\t</tbody>\n</table>\n```\n\nSvelte 5 is more strict about the HTML structure and will throw a compiler error in cases where the browser would repair the DOM.\n\n## Other breaking changes\n\n### Stricter `@const` assignment validation\n\nAssignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.\n\n### :is(...), :has(...), and :where(...) are scoped\n\nPreviously, Svelte did not analyse selectors inside `:is(...)`, `:has(...)`, and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. Some selectors may now therefore be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:has(...)/:where(...)` selectors.\n\nWhen using Tailwind's `@apply` directive, add a `:global` selector to preserve rules that use Tailwind-generated `:is(...)` selectors:\n\n<!-- prettier-ignore -->\n```css\nmain +++:global+++ {\n\t@apply bg-blue-100 dark:bg-blue-900;\n}\n```\n\n### CSS hash position no longer deterministic\n\nPreviously Svelte would always insert the CSS hash last. This is no longer guaranteed in Svelte 5. This is only breaking if you [have very weird css selectors](https://stackoverflow.com/questions/15670631/does-the-order-of-classes-listed-on-an-item-affect-the-css).\n\n### Scoped CSS uses :where(...)\n\nTo avoid issues caused by unpredictable specificity changes, scoped CSS selectors now use `:where(.svelte-xyz123)` selector modifiers alongside `.svelte-xyz123` (where `xyz123` is, as previously, a hash of the `<style>` contents). You can read more detail [here](https://github.com/sveltejs/svelte/pull/10443).\n\nIn the event that you need to support ancient browsers that don't implement `:where`, you can manually alter the emitted CSS, at the cost of unpredictable specificity changes:\n\n```js\n// @errors: 2552\ncss = css.replace(/:where\\((.+?)\\)/, '$1');\n```\n\n### Error/warning codes have been renamed\n\nError and warning codes have been renamed. Previously they used dashes to separate the words, they now use underscores (e.g. foo-bar becomes foo_bar). Additionally, a handful of codes have been reworded slightly.\n\n### Reduced number of namespaces\n\nThe number of valid namespaces you can pass to the compiler option `namespace` has been reduced to `html` (the default), `mathml` and `svg`.\n\nThe `foreign` namespace was only useful for Svelte Native, which we're planning to support differently in a 5.x minor.\n\n### beforeUpdate/afterUpdate changes\n\n`beforeUpdate` no longer runs twice on initial render if it modifies a variable referenced in the template.\n\n`afterUpdate` callbacks in a parent component will now run after `afterUpdate` callbacks in any child components.\n\n`beforeUpdate/afterUpdate` no longer run when the component contains a `<slot>` and its content is updated.\n\nBoth functions are disallowed in runes mode — use `$effect.pre(...)` and `$effect(...)` instead.\n\n### `contenteditable` behavior change\n\nIf you have a `contenteditable` node with a corresponding binding _and_ a reactive value inside it (example: `<div contenteditable=true bind:textContent>count is {count}</div>`), then the value inside the contenteditable will not be updated by updates to `count` because the binding takes full control over the content immediately and it should only be updated through it.\n\n### `oneventname` attributes no longer accept string values\n\nIn Svelte 4, it was possible to specify event attributes on HTML elements as a string:\n\n```svelte\n<button onclick=\"alert('hello')\">...</button>\n```\n\nThis is not recommended, and is no longer possible in Svelte 5, where properties like `onclick` replace `on:click` as the mechanism for adding event handlers.\n\n### `null` and `undefined` become the empty string\n\nIn Svelte 4, `null` and `undefined` were printed as the corresponding string. In 99 out of 100 cases you want this to become the empty string instead, which is also what most other frameworks out there do. Therefore, in Svelte 5, `null` and `undefined` become the empty string.\n\n### `bind:files` values can only be `null`, `undefined` or `FileList`\n\n`bind:files` is now a two-way binding. As such, when setting a value, it needs to be either falsy (`null` or `undefined`) or of type `FileList`.\n\n### Bindings now react to form resets\n\nPreviously, bindings did not take into account `reset` event of forms, and therefore values could get out of sync with the DOM. Svelte 5 fixes this by placing a `reset` listener on the document and invoking bindings where necessary.\n\n### `walk` no longer exported\n\n`svelte/compiler` reexported `walk` from `estree-walker` for convenience. This is no longer true in Svelte 5, import it directly from that package instead in case you need it.\n\n### Content inside `svelte:options` is forbidden\n\nIn Svelte 4 you could have content inside a `<svelte:options />` tag. It was ignored, but you could write something in there. In Svelte 5, content inside that tag is a compiler error.\n\n### `<slot>` elements in declarative shadow roots are preserved\n\nSvelte 4 replaced the `<slot />` tag in all places with its own version of slots. Svelte 5 preserves them in the case they are a child of a `<template shadowrootmode=\"...\">` element.\n\n### `<svelte:element>` tag must be an expression\n\nIn Svelte 4, `<svelte:element this=\"div\">` is valid code. This makes little sense — you should just do `<div>`. In the vanishingly rare case that you _do_ need to use a literal value for some reason, you can do this:\n\n```svelte\n<svelte:element this=+++{+++\"div\"+++}+++>\n```\n\nNote that whereas Svelte 4 would treat `<svelte:element this=\"input\">` (for example) identically to `<input>` for the purposes of determining which `bind:` directives could be applied, Svelte 5 does not.\n\n### `mount` plays transitions by default\n\nThe `mount` function used to render a component tree plays transitions by default unless the `intro` option is set to `false`. This is different from legacy class components which, when manually instantiated, didn't play transitions by default.\n\n### `<img src={...}>` and `{@html ...}` hydration mismatches are not repaired\n\nIn Svelte 4, if the value of a `src` attribute or `{@html ...}` tag differ between server and client (a.k.a. a hydration mismatch), the mismatch is repaired. This is very costly: setting a `src` attribute (even if it evaluates to the same thing) causes images and iframes to be reloaded, and reinserting a large blob of HTML is slow.\n\nSince these mismatches are extremely rare, Svelte 5 assumes that the values are unchanged, but in development will warn you if they are not. To force an update you can do something like this:\n\n```svelte\n<script>\n\tlet { markup, src } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\t// stash the values...\n\t\tconst initial = { markup, src };\n\n\t\t// unset them...\n\t\tmarkup = src = undefined;\n\n\t\t$effect(() => {\n\t\t\t// ...and reset after we've mounted\n\t\t\tmarkup = initial.markup;\n\t\t\tsrc = initial.src;\n\t\t});\n\t}\n</script>\n\n{@html markup}\n<img {src} />\n```\n\n### Hydration works differently\n\nSvelte 5 makes use of comments during server-side rendering which are used for more robust and efficient hydration on the client. You therefore should not remove comments from your HTML output if you intend to hydrate it, and if you manually authored HTML to be hydrated by a Svelte component, you need to adjust that HTML to include said comments at the correct positions.\n\n### `onevent` attributes are delegated\n\nEvent attributes replace event directives: Instead of `on:click={handler}` you write `onclick={handler}`. For backwards compatibility the `on:event` syntax is still supported and behaves the same as in Svelte 4. Some of the `onevent` attributes however are delegated, which means you need to take care to not stop event propagation on those manually, as they then might never reach the listener for this event type at the root.\n\n### `--style-props` uses a different element\n\nSvelte 5 uses an extra `<svelte-css-wrapper>` element instead of a `<div>` to wrap the component when using CSS custom properties.\n\n<!-- TODO in final docs, add link to corresponding section for more details -->",
+		"svelte/faq": "## I'm new to Svelte. Where should I start?\n\nWe think the best way to get started is playing through the interactive [tutorial](/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.\n\nFive to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.\n\n## Where can I get support?\n\nIf your question is about certain syntax, the [reference docs](/docs/svelte) are a good place to start.\n\nStack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) or [ask your own](https://stackoverflow.com/questions/ask?tags=svelte)!\n\nThere are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. [Our Discord](/chat) or [the Reddit channel](https://www.reddit.com/r/sveltejs/) are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit.\n\n## Are there any third-party resources?\n\nSvelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).\n\n## How can I get VS Code to syntax-highlight my .svelte files?\n\nThere is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).\n\n## Is there a tool to automatically format my .svelte files?\n\nYou can use prettier with the [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte) plugin.\n\n## How do I document my components?\n\nIn editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.\n\n````svelte\n<script>\n\t/** What should we call the user? */\n\texport let name = 'world';\n</script>\n\n<!--\n@component\nHere's some documentation for this component.\nIt will show up on hover.\n\n- You can use markdown here.\n- You can also use code blocks here.\n- Usage:\n  ```svelte\n  <main name=\"Arethra\">\n  ```\n-->\n<main>\n\t<h1>\n\t\tHello, {name}\n\t</h1>\n</main>\n````\n\nNote: The `@component` is necessary in the HTML comment which describes your component.\n\n## Does Svelte scale?\n\nThere will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546).\n\n## Is there a UI component library?\n\nThere are several [UI component libraries](/packages#component-libraries) as well as standalone components listed on [the packages page](/packages).\n\n## How do I test Svelte apps?\n\nHow your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.\n\nA Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).\n\n_Unit Tests_: Focus on testing business logic in isolation. Often this is validating individual functions and edge cases. By minimizing the surface area of these tests they can be kept lean and fast, and by extracting as much logic as possible from your Svelte components more of your application can be covered using them. When creating a new SvelteKit project, you will be asked whether you would like to setup [Vitest](https://vitest.dev/) for unit testing. There are a number of other test runners that could be used as well.\n\n_Component Tests_: Validating that a Svelte component mounts and interacts as expected throughout its lifecycle requires a tool that provides a Document Object Model (DOM). Components can be compiled (since Svelte is a compiler and not a normal library) and mounted to allow asserting against element structure, listeners, state, and all the other capabilities provided by a Svelte component. Tools for component testing range from an in-memory implementation like jsdom paired with a test runner like [Vitest](https://vitest.dev/) to solutions that leverage an actual browser to provide a visual testing capability such as [Playwright](https://playwright.dev/docs/test-components) or [Cypress](https://www.cypress.io/).\n\n_End-to-End Tests_: To ensure your users are able to interact with your application it is necessary to test it as a whole in a manner as close to production as possible. This is done by writing end-to-end (E2E) tests which load and interact with a deployed version of your application in order to simulate how the user will interact with your application. When creating a new SvelteKit project, you will be asked whether you would like to setup [Playwright](https://playwright.dev/) for end-to-end testing. There are many other E2E test libraries available for use as well.\n\nSome resources for getting started with testing:\n\n- [Svelte docs on testing](/docs/svelte/testing)\n- [Setup Vitest using the Svelte CLI](/docs/cli/vitest)\n- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)\n- [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)\n- [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)\n- [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)\n- [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)\n\n## Is there a router?\n\nThe official routing library is [SvelteKit](/docs/kit). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React and Nuxt.js for Vue.\n\nHowever, you can use any router library. A sampling of available routers are highlighted [on the packages page](/packages#routing).\n\n## How do I write a mobile app with Svelte?\n\nWhile most mobile apps are written without using JavaScript, if you'd like to leverage your existing Svelte components and knowledge of Svelte when building mobile apps, you can turn a [SvelteKit SPA](https://kit.svelte.dev/docs/single-page-apps) into a mobile app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte). Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms.\n\nSome work has been completed towards [custom renderer support in Svelte 5](https://github.com/sveltejs/svelte/issues/15470), but this feature is not yet available. The custom rendering API would support additional mobile frameworks like Lynx JS and Svelte Native. Svelte Native was an option available for Svelte 4, but Svelte 5 does not currently support it. Svelte Native lets you write NativeScript apps using Svelte components that contain [NativeScript UI components](https://docs.nativescript.org/ui/) rather than DOM elements, which may be familiar for users coming from React Native.\n\n## Can I tell Svelte not to remove my unused styles?\n\nNo. Svelte removes the styles from the component and warns you about them in order to prevent issues that would otherwise arise.\n\nSvelte's component style scoping works by generating a class unique to the given component, adding it to the relevant elements in the component that are under Svelte's control, and then adding it to each of the selectors in that component's styles. When the compiler can't see what elements a style selector applies to, there would be two bad options for keeping it:\n\n- If it keeps the selector and adds the scoping class to it, the selector will likely not match the expected elements in the component, and they definitely won't if they were created by a child component or `{@html ...}`.\n- If it keeps the selector without adding the scoping class to it, the given style will become a global style, affecting your entire page.\n\nIf you need to style something that Svelte can't identify at compile time, you will need to explicitly opt into global styles by using `:global(...)`. But also keep in mind that you can wrap `:global(...)` around only part of a selector. `.foo :global(.bar) { ... }` will style any `.bar` elements that appear within the component's `.foo` elements. As long as there's some parent element in the current component to start from, partially global selectors like this will almost always be able to get you what you want.\n\n## Is Svelte v2 still available?\n\nNew features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.\n\nThe documentation is still available [here](https://v2.svelte.dev/guide).\n\n## How do I do hot module reloading?\n\nWe recommend using [SvelteKit](/docs/kit), which supports HMR out of the box and is built on top of [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr). There are also community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/sveltejs/svelte-loader).",
+		"svelte/svelte": "```js\n// @noErrors\nimport {\n\tSvelteComponent,\n\tSvelteComponentTyped,\n\tafterUpdate,\n\tbeforeUpdate,\n\tcreateEventDispatcher,\n\tcreateRawSnippet,\n\tflushSync,\n\tgetAbortSignal,\n\tgetAllContexts,\n\tgetContext,\n\thasContext,\n\thydrate,\n\tmount,\n\tonDestroy,\n\tonMount,\n\tsetContext,\n\tsettled,\n\ttick,\n\tunmount,\n\tuntrack\n} from 'svelte';\n```\n\n## SvelteComponent\n\nThis was the base class for Svelte components in Svelte 4. Svelte 5+ components\nare completely different under the hood. For typing, use `Component` instead.\nTo instantiate components, use `mount` instead.\nSee [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteComponent<\n\tProps extends Record<string, any> = Record<string, any>,\n\tEvents extends Record<string, any> = any,\n\tSlots extends Record<string, any> = any\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatic element?: typeof HTMLElement;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe custom element version of the component. Only present if compiled with the `customElement` compiler option\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n[prop: string]: any;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> This constructor only exists when using the `asClassComponent` compatibility helper, which\nis a stop-gap solution. Migrate towards using `mount` instead. See\n[migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n$destroy(): void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which\nis a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\nfor more info.\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n$on<K extends Extract<keyof Events, string>>(\n\ttype: K,\n\tcallback: (e: Events[K]) => void\n): () => void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which\nis a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\nfor more info.\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n$set(props: Partial<Props>): void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> This method only exists when using one of the legacy compatibility helpers, which\nis a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\nfor more info.\n\n</div>\n\n</div>\n</div></div>\n\n\n\n## SvelteComponentTyped\n\n<blockquote class=\"tag deprecated note\">\n\nUse `Component` instead. See [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteComponentTyped<\n\tProps extends Record<string, any> = Record<string, any>,\n\tEvents extends Record<string, any> = any,\n\tSlots extends Record<string, any> = any\n> extends SvelteComponent<Props, Events, Slots> {}\n```\n\n</div>\n\n\n\n## afterUpdate\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`$effect`](/docs/svelte/$effect) instead\n\n</blockquote>\n\nSchedules a callback to run immediately after the component has been updated.\n\nThe first time the callback runs will be after the initial `onMount`.\n\nIn runes mode use `$effect` instead.\n\n<div class=\"ts-block\">\n\n```dts\nfunction afterUpdate(fn: () => void): void;\n```\n\n</div>\n\n\n\n## beforeUpdate\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`$effect.pre`](/docs/svelte/$effect#$effect.pre) instead\n\n</blockquote>\n\nSchedules a callback to run immediately before the component is updated after any state change.\n\nThe first time the callback runs will be before the initial `onMount`.\n\nIn runes mode use `$effect.pre` instead.\n\n<div class=\"ts-block\">\n\n```dts\nfunction beforeUpdate(fn: () => void): void;\n```\n\n</div>\n\n\n\n## createEventDispatcher\n\n<blockquote class=\"tag deprecated note\">\n\nUse callback props and/or the `$host()` rune instead — see [migration guide](/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n\n</blockquote>\n\nCreates an event dispatcher that can be used to dispatch [component events](/docs/svelte/legacy-on#Component-events).\nEvent dispatchers are functions that can take two arguments: `name` and `detail`.\n\nComponent events created with `createEventDispatcher` create a\n[CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\nThese events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\nThe `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\nproperty and can contain any type of data.\n\nThe event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n```ts\nconst dispatch = createEventDispatcher<{\n loaded: null; // does not take a detail argument\n change: string; // takes a detail argument of type string, which is required\n optional: number | null; // takes an optional detail argument of type number\n}>();\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction createEventDispatcher<\n\tEventMap extends Record<string, any> = any\n>(): EventDispatcher<EventMap>;\n```\n\n</div>\n\n\n\n## createRawSnippet\n\nCreate a snippet programmatically\n\n<div class=\"ts-block\">\n\n```dts\nfunction createRawSnippet<Params extends unknown[]>(\n\tfn: (...params: Getters<Params>) => {\n\t\trender: () => string;\n\t\tsetup?: (element: Element) => void | (() => void);\n\t}\n): Snippet<Params>;\n```\n\n</div>\n\n\n\n## flushSync\n\nSynchronously flush any pending updates.\nReturns void if no callback is provided, otherwise returns the result of calling the callback.\n\n<div class=\"ts-block\">\n\n```dts\nfunction flushSync<T = void>(fn?: (() => T) | undefined): T;\n```\n\n</div>\n\n\n\n## getAbortSignal\n\nReturns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](/docs/svelte/$derived) or [effect](/docs/svelte/$effect) re-runs or is destroyed.\n\nMust be called while a derived or effect is running.\n\n```svelte\n<script>\n\timport { getAbortSignal } from 'svelte';\n\n\tlet { id } = $props();\n\n\tasync function getData(id) {\n\t\tconst response = await fetch(`/items/${id}`, {\n\t\t\tsignal: getAbortSignal()\n\t\t});\n\n\t\treturn await response.json();\n\t}\n\n\tconst data = $derived(await getData(id));\n</script>\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction getAbortSignal(): AbortSignal;\n```\n\n</div>\n\n\n\n## getAllContexts\n\nRetrieves the whole context map that belongs to the closest parent component.\nMust be called during component initialisation. Useful, for example, if you\nprogrammatically create a component and want to pass the existing context to it.\n\n<div class=\"ts-block\">\n\n```dts\nfunction getAllContexts<\n\tT extends Map<any, any> = Map<any, any>\n>(): T;\n```\n\n</div>\n\n\n\n## getContext\n\nRetrieves the context that belongs to the closest parent component with the specified `key`.\nMust be called during component initialisation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction getContext<T>(key: any): T;\n```\n\n</div>\n\n\n\n## hasContext\n\nChecks whether a given `key` has been set in the context of a parent component.\nMust be called during component initialisation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction hasContext(key: any): boolean;\n```\n\n</div>\n\n\n\n## hydrate\n\nHydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component\n\n<div class=\"ts-block\">\n\n```dts\nfunction hydrate<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>\n>(\n\tcomponent:\n\t\t| ComponentType<SvelteComponent<Props>>\n\t\t| Component<Props, Exports, any>,\n\toptions: {} extends Props\n\t\t? {\n\t\t\t\ttarget: Document | Element | ShadowRoot;\n\t\t\t\tprops?: Props;\n\t\t\t\tevents?: Record<string, (e: any) => any>;\n\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\tintro?: boolean;\n\t\t\t\trecover?: boolean;\n\t\t\t}\n\t\t: {\n\t\t\t\ttarget: Document | Element | ShadowRoot;\n\t\t\t\tprops: Props;\n\t\t\t\tevents?: Record<string, (e: any) => any>;\n\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\tintro?: boolean;\n\t\t\t\trecover?: boolean;\n\t\t\t}\n): Exports;\n```\n\n</div>\n\n\n\n## mount\n\nMounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.\nTransitions will play during the initial render unless the `intro` option is set to `false`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction mount<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>\n>(\n\tcomponent:\n\t\t| ComponentType<SvelteComponent<Props>>\n\t\t| Component<Props, Exports, any>,\n\toptions: MountOptions<Props>\n): Exports;\n```\n\n</div>\n\n\n\n## onDestroy\n\nSchedules a callback to run immediately before the component is unmounted.\n\nOut of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\nonly one that runs inside a server-side component.\n\n<div class=\"ts-block\">\n\n```dts\nfunction onDestroy(fn: () => any): void;\n```\n\n</div>\n\n\n\n## onMount\n\n`onMount`, like [`$effect`](/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\nUnlike `$effect`, the provided function only runs once.\n\nIt must be called during the component's initialisation (but doesn't need to live _inside_ the component;\nit can be called from an external module). If a function is returned _synchronously_ from `onMount`,\nit will be called when the component is unmounted.\n\n`onMount` functions do not run during [server-side rendering](/docs/svelte/svelte-server#render).\n\n<div class=\"ts-block\">\n\n```dts\nfunction onMount<T>(\n\tfn: () =>\n\t\t| NotFunction<T>\n\t\t| Promise<NotFunction<T>>\n\t\t| (() => any)\n): void;\n```\n\n</div>\n\n\n\n## setContext\n\nAssociates an arbitrary `context` object with the current component and the specified `key`\nand returns that object. The context is then available to children of the component\n(including slotted content) with `getContext`.\n\nLike lifecycle functions, this must be called during component initialisation.\n\n<div class=\"ts-block\">\n\n```dts\nfunction setContext<T>(key: any, context: T): T;\n```\n\n</div>\n\n\n\n## settled\n\n<blockquote class=\"since note\">\n\nAvailable since 5.36\n\n</blockquote>\n\nReturns a promise that resolves once any state changes, and asynchronous work resulting from them,\nhave resolved and the DOM has been updated\n\n<div class=\"ts-block\">\n\n```dts\nfunction settled(): Promise<void>;\n```\n\n</div>\n\n\n\n## tick\n\nReturns a promise that resolves once any pending state changes have been applied.\n\n<div class=\"ts-block\">\n\n```dts\nfunction tick(): Promise<void>;\n```\n\n</div>\n\n\n\n## unmount\n\nUnmounts a component that was previously mounted using `mount` or `hydrate`.\n\nSince 5.13.0, if `options.outro` is `true`, [transitions](/docs/svelte/transition) will play before the component is removed from the DOM.\n\nReturns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise (prior to 5.13.0, returns `void`).\n\n```js\n// @errors: 7031\nimport { mount, unmount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, { target: document.body });\n\n// later...\nunmount(app, { outro: true });\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction unmount(\n\tcomponent: Record<string, any>,\n\toptions?:\n\t\t| {\n\t\t\t\toutro?: boolean;\n\t\t  }\n\t\t| undefined\n): Promise<void>;\n```\n\n</div>\n\n\n\n## untrack\n\nWhen used inside a [`$derived`](/docs/svelte/$derived) or [`$effect`](/docs/svelte/$effect),\nany state read inside `fn` will not be treated as a dependency.\n\n```ts\n$effect(() => {\n\t// this will run when `data` changes, but not when `time` changes\n\tsave(data, {\n\t\ttimestamp: untrack(() => time)\n\t});\n});\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction untrack<T>(fn: () => T): T;\n```\n\n</div>\n\n\n\n## Component\n\nCan be used to create strongly typed Svelte components.\n\n#### Example:\n\nYou have component library on npm called `component-library`, from which\nyou export a component called `MyComponent`. For Svelte+TypeScript users,\nyou want to provide typings. Therefore you create a `index.d.ts`:\n```ts\nimport type { Component } from 'svelte';\nexport declare const MyComponent: Component<{ foo: string }> {}\n```\nTyping this makes it possible for IDEs like VS Code with the Svelte extension\nto provide intellisense and to use the component like this in a Svelte file\nwith TypeScript:\n```svelte\n<script lang=\"ts\">\n\timport { MyComponent } from \"component-library\";\n</script>\n<MyComponent foo={'bar'} />\n```\n\n<div class=\"ts-block\">\n\n```dts\ninterface Component<\n\tProps extends Record<string, any> = {},\n\tExports extends Record<string, any> = {},\n\tBindings extends keyof Props | '' = string\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(\n\tthis: void,\n\tinternals: ComponentInternals,\n\tprops: Props\n): {\n\t/**\n\t * @deprecated This method only exists when using one of the legacy compatibility helpers, which\n\t * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\n\t * for more info.\n\t */\n\t$on?(type: string, callback: (e: any) => void): () => void;\n\t/**\n\t * @deprecated This method only exists when using one of the legacy compatibility helpers, which\n\t * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\n\t * for more info.\n\t */\n\t$set?(props: Partial<Props>): void;\n} & Exports;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `internal` An internal object used by Svelte. Do not use or modify.\n- `props` The props passed to the component.\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nelement?: typeof HTMLElement;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe custom element version of the component. Only present if compiled with the `customElement` compiler option\n\n</div>\n</div></div>\n\n## ComponentConstructorOptions\n\n<blockquote class=\"tag deprecated note\">\n\nIn Svelte 4, components are classes. In Svelte 5, they are functions.\nUse `mount` instead to instantiate components.\nSee [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)\nfor more info.\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\ninterface ComponentConstructorOptions<\n\tProps extends Record<string, any> = Record<string, any>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ntarget: Element | Document | ShadowRoot;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nanchor?: Element;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprops?: Props;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncontext?: Map<any, any>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nhydrate?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nintro?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrecover?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsync?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nidPrefix?: string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\n$$inline?: boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## ComponentEvents\n\n<blockquote class=\"tag deprecated note\">\n\nThe new `Component` type does not have a dedicated Events type. Use `ComponentProps` instead.\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\ntype ComponentEvents<Comp extends SvelteComponent> =\n\tComp extends SvelteComponent<any, infer Events>\n\t\t? Events\n\t\t: never;\n```\n\n</div>\n\n## ComponentInternals\n\nInternal implementation details that vary between environments\n\n<div class=\"ts-block\">\n\n```dts\ntype ComponentInternals = Branded<{}, 'ComponentInternals'>;\n```\n\n</div>\n\n## ComponentProps\n\nConvenience type to get the props the given component expects.\n\nExample: Ensure a variable contains the props expected by `MyComponent`:\n\n```ts\nimport type { ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\n// Errors if these aren't the correct props expected by MyComponent.\nconst props: ComponentProps<typeof MyComponent> = { foo: 'bar' };\n```\n\n> [!NOTE] In Svelte 4, you would do `ComponentProps<MyComponent>` because `MyComponent` was a class.\n\nExample: A generic function that accepts some component and infers the type of its props:\n\n```ts\nimport type { Component, ComponentProps } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\n\nfunction withProps<TComponent extends Component<any>>(\n\tcomponent: TComponent,\n\tprops: ComponentProps<TComponent>\n) {};\n\n// Errors if the second argument is not the correct props expected by the component in the first argument.\nwithProps(MyComponent, { foo: 'bar' });\n```\n\n<div class=\"ts-block\">\n\n```dts\ntype ComponentProps<\n\tComp extends SvelteComponent | Component<any, any>\n> =\n\tComp extends SvelteComponent<infer Props>\n\t\t? Props\n\t\t: Comp extends Component<infer Props, any>\n\t\t\t? Props\n\t\t\t: never;\n```\n\n</div>\n\n## ComponentType\n\n<blockquote class=\"tag deprecated note\">\n\nThis type is obsolete when working with the new `Component` type.\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\ntype ComponentType<\n\tComp extends SvelteComponent = SvelteComponent\n> = (new (\n\toptions: ComponentConstructorOptions<\n\t\tComp extends SvelteComponent<infer Props>\n\t\t\t? Props\n\t\t\t: Record<string, any>\n\t>\n) => Comp) & {\n\t/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */\n\telement?: typeof HTMLElement;\n};\n```\n\n</div>\n\n## EventDispatcher\n\n<div class=\"ts-block\">\n\n```dts\ninterface EventDispatcher<\n\tEventMap extends Record<string, any>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n<Type extends keyof EventMap>(\n\t...args: null extends EventMap[Type]\n\t\t? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]\n\t\t: undefined extends EventMap[Type]\n\t\t\t? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]\n\t\t\t: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]\n): boolean;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## MountOptions\n\nDefines the options accepted by the `mount()` function.\n\n<div class=\"ts-block\">\n\n```dts\ntype MountOptions<\n\tProps extends Record<string, any> = Record<string, any>\n> = {\n\t/**\n\t * Target element where the component will be mounted.\n\t */\n\ttarget: Document | Element | ShadowRoot;\n\t/**\n\t * Optional node inside `target`. When specified, it is used to render the component immediately before it.\n\t */\n\tanchor?: Node;\n\t/**\n\t * Allows the specification of events.\n\t * @deprecated Use callback props instead.\n\t */\n\tevents?: Record<string, (e: any) => any>;\n\t/**\n\t * Can be accessed via `getContext()` at the component level.\n\t */\n\tcontext?: Map<any, any>;\n\t/**\n\t * Whether or not to play transitions on initial render.\n\t * @default true\n\t */\n\tintro?: boolean;\n} & ({} extends Props\n\t? {\n\t\t\t/**\n\t\t\t * Component properties.\n\t\t\t */\n\t\t\tprops?: Props;\n\t\t}\n\t: {\n\t\t\t/**\n\t\t\t * Component properties.\n\t\t\t */\n\t\t\tprops: Props;\n\t\t});\n```\n\n</div>\n\n## Snippet\n\nThe type of a `#snippet` block. You can use it to (for example) express that your component expects a snippet of a certain type:\n```ts\nlet { banner }: { banner: Snippet<[{ text: string }]> } = $props();\n```\nYou can only call a snippet through the `{@render ...}` tag.\n\nSee the [snippet documentation](/docs/svelte/snippet) for more info.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Snippet<Parameters extends unknown[] = []> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(\n\tthis: void,\n\t// this conditional allows tuples but not arrays. Arrays would indicate a\n\t// rest parameter type, which is not supported. If rest parameters are added\n\t// in the future, the condition can be removed.\n\t...args: number extends Parameters['length'] ? never : Parameters\n): {\n\t'{@render ...} must be called with a Snippet': \"import type { Snippet } from 'svelte'\";\n} & typeof SnippetReturn;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-action": "This module provides types for [actions](use), which have been superseded by [attachments](@attach).\n\n## Action\n\nActions are functions that are called when an element is created.\nYou can use this interface to type such actions.\nThe following example defines an action that only works on `<div>` elements\nand optionally accepts a parameter which it has a default value for:\n```ts\nexport const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {\n\t// ...\n}\n```\n`Action<HTMLDivElement>` and `Action<HTMLDivElement, undefined>` both signal that the action accepts no parameters.\n\nYou can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.\nSee interface `ActionReturn` for more details.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Action<\n\tElement = HTMLElement,\n\tParameter = undefined,\n\tAttributes extends Record<string, any> = Record<\n\t\tnever,\n\t\tany\n\t>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n<Node extends Element>(\n\t...args: undefined extends Parameter\n\t\t? [node: Node, parameter?: Parameter]\n\t\t: [node: Node, parameter: Parameter]\n): void | ActionReturn<Parameter, Attributes>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## ActionReturn\n\nActions can return an object containing the two properties defined in this interface. Both are optional.\n- update: An action can have a parameter. This method will be called whenever that parameter changes,\n\timmediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<undefined>` both\n\tmean that the action accepts no parameters.\n- destroy: Method that is called after the element is unmounted\n\nAdditionally, you can specify which additional attributes and events the action enables on the applied element.\nThis applies to TypeScript typings only and has no effect at runtime.\n\nExample usage:\n```ts\ninterface Attributes {\n\tnewprop?: string;\n\t'on:event': (e: CustomEvent<boolean>) => void;\n}\n\nexport function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {\n\t// ...\n\treturn {\n\t\tupdate: (updatedParameter) => {...},\n\t\tdestroy: () => {...}\n\t};\n}\n```\n\n<div class=\"ts-block\">\n\n```dts\ninterface ActionReturn<\n\tParameter = undefined,\n\tAttributes extends Record<string, any> = Record<\n\t\tnever,\n\t\tany\n\t>\n> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nupdate?: (parameter: Parameter) => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndestroy?: () => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-animate": "```js\n// @noErrors\nimport { flip } from 'svelte/animate';\n```\n\n## flip\n\nThe flip function calculates the start and end position of an element and animates between them, translating the x and y values.\n`flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/).\n\n<div class=\"ts-block\">\n\n```dts\nfunction flip(\n\tnode: Element,\n\t{\n\t\tfrom,\n\t\tto\n\t}: {\n\t\tfrom: DOMRect;\n\t\tto: DOMRect;\n\t},\n\tparams?: FlipParams\n): AnimationConfig;\n```\n\n</div>\n\n\n\n## AnimationConfig\n\n<div class=\"ts-block\">\n\n```dts\ninterface AnimationConfig {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: (t: number) => number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncss?: (t: number, u: number) => string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntick?: (t: number, u: number) => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## FlipParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface FlipParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number | ((len: number) => number);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: (t: number) => number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-attachments": "```js\n// @noErrors\nimport { createAttachmentKey, fromAction } from 'svelte/attachments';\n```\n\n## createAttachmentKey\n\n<blockquote class=\"since note\">\n\nAvailable since 5.29\n\n</blockquote>\n\nCreates an object key that will be recognised as an attachment when the object is spread onto an element,\nas a programmatic alternative to using `{@attach ...}`. This can be useful for library authors, though\nis generally not needed when building an app.\n\n```svelte\n<script>\n\timport { createAttachmentKey } from 'svelte/attachments';\n\n\tconst props = {\n\t\tclass: 'cool',\n\t\tonclick: () => alert('clicked'),\n\t\t[createAttachmentKey()]: (node) => {\n\t\t\tnode.textContent = 'attached!';\n\t\t}\n\t};\n</script>\n\n<button {...props}>click me</button>\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction createAttachmentKey(): symbol;\n```\n\n</div>\n\n\n\n## fromAction\n\nConverts an [action](/docs/svelte/use) into an [attachment](/docs/svelte/@attach) keeping the same behavior.\nIt's useful if you want to start using attachments on components but you have actions provided by a library.\n\nNote that the second argument, if provided, must be a function that _returns_ the argument to the\naction function, not the argument itself.\n\n```svelte\n<!-- with an action -->\n<div use:foo={bar}>...</div>\n\n<!-- with an attachment -->\n<div {@attach fromAction(foo, () => bar)}>...</div>\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction fromAction<\n\tE extends EventTarget,\n\tT extends unknown\n>(\n\taction:\n\t\t| Action<E, T>\n\t\t| ((element: E, arg: T) => void | ActionReturn<T>),\n\tfn: () => T\n): Attachment<E>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction fromAction<E extends EventTarget>(\n\taction:\n\t\t| Action<E, void>\n\t\t| ((element: E) => void | ActionReturn<void>)\n): Attachment<E>;\n```\n\n</div>\n\n\n\n## Attachment\n\nAn [attachment](/docs/svelte/@attach) is a function that runs when an element is mounted\nto the DOM, and optionally returns a function that is called when the element is later removed.\n\nIt can be attached to an element with an `{@attach ...}` tag, or by spreading an object containing\na property created with [`createAttachmentKey`](/docs/svelte/svelte-attachments#createAttachmentKey).\n\n<div class=\"ts-block\">\n\n```dts\ninterface Attachment<T extends EventTarget = Element> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n(element: T): void | (() => void);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-compiler": "```js\n// @noErrors\nimport {\n\tVERSION,\n\tcompile,\n\tcompileModule,\n\tmigrate,\n\tparse,\n\tpreprocess,\n\twalk\n} from 'svelte/compiler';\n```\n\n## VERSION\n\nThe current version, as set in package.json.\n\n<div class=\"ts-block\">\n\n```dts\nconst VERSION: string;\n```\n\n</div>\n\n\n\n## compile\n\n`compile` converts your `.svelte` source code into a JavaScript module that exports a component\n\n<div class=\"ts-block\">\n\n```dts\nfunction compile(\n\tsource: string,\n\toptions: CompileOptions\n): CompileResult;\n```\n\n</div>\n\n\n\n## compileModule\n\n`compileModule` takes your JavaScript source code containing runes, and turns it into a JavaScript module.\n\n<div class=\"ts-block\">\n\n```dts\nfunction compileModule(\n\tsource: string,\n\toptions: ModuleCompileOptions\n): CompileResult;\n```\n\n</div>\n\n\n\n## migrate\n\nDoes a best-effort migration of Svelte code towards using runes, event attributes and render tags.\nMay throw an error if the code is too complex to migrate automatically.\n\n<div class=\"ts-block\">\n\n```dts\nfunction migrate(\n\tsource: string,\n\t{\n\t\tfilename,\n\t\tuse_ts\n\t}?:\n\t\t| {\n\t\t\t\tfilename?: string;\n\t\t\t\tuse_ts?: boolean;\n\t\t  }\n\t\t| undefined\n): {\n\tcode: string;\n};\n```\n\n</div>\n\n\n\n## parse\n\nThe parse function parses a component, returning only its abstract syntax tree.\n\nThe `modern` option (`false` by default in Svelte 5) makes the parser return a modern AST instead of the legacy AST.\n`modern` will become `true` by default in Svelte 6, and the option will be removed in Svelte 7.\n\n<div class=\"ts-block\">\n\n```dts\nfunction parse(\n\tsource: string,\n\toptions: {\n\t\tfilename?: string;\n\t\tmodern: true;\n\t\tloose?: boolean;\n\t}\n): AST.Root;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction parse(\n\tsource: string,\n\toptions?:\n\t\t| {\n\t\t\t\tfilename?: string;\n\t\t\t\tmodern?: false;\n\t\t\t\tloose?: boolean;\n\t\t  }\n\t\t| undefined\n): Record<string, any>;\n```\n\n</div>\n\n\n\n## preprocess\n\nThe preprocess function provides convenient hooks for arbitrarily transforming component source code.\nFor example, it can be used to convert a `<style lang=\"sass\">` block into vanilla CSS.\n\n<div class=\"ts-block\">\n\n```dts\nfunction preprocess(\n\tsource: string,\n\tpreprocessor: PreprocessorGroup | PreprocessorGroup[],\n\toptions?:\n\t\t| {\n\t\t\t\tfilename?: string;\n\t\t  }\n\t\t| undefined\n): Promise<Processed>;\n```\n\n</div>\n\n\n\n## walk\n\n<blockquote class=\"tag deprecated note\">\n\nReplace this with `import { walk } from 'estree-walker'`\n\n</blockquote>\n\n<div class=\"ts-block\">\n\n```dts\nfunction walk(): never;\n```\n\n</div>\n\n\n\n## AST\n\n<div class=\"ts-block\">\n\n```dts\nnamespace AST {\n\texport interface BaseNode {\n\t\ttype: string;\n\t\tstart: number;\n\t\tend: number;\n\t}\n\n\texport interface Fragment {\n\t\ttype: 'Fragment';\n\t\tnodes: Array<\n\t\t\tText | Tag | ElementLike | Block | Comment\n\t\t>;\n\t}\n\n\texport interface Root extends BaseNode {\n\t\ttype: 'Root';\n\t\t/**\n\t\t * Inline options provided by `<svelte:options>` — these override options passed to `compile(...)`\n\t\t */\n\t\toptions: SvelteOptions | null;\n\t\tfragment: Fragment;\n\t\t/** The parsed `<style>` element, if exists */\n\t\tcss: AST.CSS.StyleSheet | null;\n\t\t/** The parsed `<script>` element, if exists */\n\t\tinstance: Script | null;\n\t\t/** The parsed `<script module>` element, if exists */\n\t\tmodule: Script | null;\n\t\t/** Comments found in <script> and {expressions} */\n\t\tcomments: JSComment[];\n\t}\n\n\texport interface SvelteOptions {\n\t\t// start/end info (needed for warnings and for our Prettier plugin)\n\t\tstart: number;\n\t\tend: number;\n\t\t// options\n\t\trunes?: boolean;\n\t\timmutable?: boolean;\n\t\taccessors?: boolean;\n\t\tpreserveWhitespace?: boolean;\n\t\tnamespace?: Namespace;\n\t\tcss?: 'injected';\n\t\tcustomElement?: {\n\t\t\ttag?: string;\n\t\t\tshadow?: 'open' | 'none';\n\t\t\tprops?: Record<\n\t\t\t\tstring,\n\t\t\t\t{\n\t\t\t\t\tattribute?: string;\n\t\t\t\t\treflect?: boolean;\n\t\t\t\t\ttype?:\n\t\t\t\t\t\t| 'Array'\n\t\t\t\t\t\t| 'Boolean'\n\t\t\t\t\t\t| 'Number'\n\t\t\t\t\t\t| 'Object'\n\t\t\t\t\t\t| 'String';\n\t\t\t\t}\n\t\t\t>;\n\t\t\t/**\n\t\t\t * Is of type\n\t\t\t * ```ts\n\t\t\t * (ceClass: new () => HTMLElement) => new () => HTMLElement\n\t\t\t * ```\n\t\t\t */\n\t\t\textend?: ArrowFunctionExpression | Identifier;\n\t\t};\n\t\tattributes: Attribute[];\n\t}\n\n\t/** Static text */\n\texport interface Text extends BaseNode {\n\t\ttype: 'Text';\n\t\t/** Text with decoded HTML entities */\n\t\tdata: string;\n\t\t/** The original text, with undecoded HTML entities */\n\t\traw: string;\n\t}\n\n\t/** A (possibly reactive) template expression — `{...}` */\n\texport interface ExpressionTag extends BaseNode {\n\t\ttype: 'ExpressionTag';\n\t\texpression: Expression;\n\t}\n\n\t/** A (possibly reactive) HTML template expression — `{@html ...}` */\n\texport interface HtmlTag extends BaseNode {\n\t\ttype: 'HtmlTag';\n\t\texpression: Expression;\n\t}\n\n\t/** An HTML comment */\n\t// TODO rename to disambiguate\n\texport interface Comment extends BaseNode {\n\t\ttype: 'Comment';\n\t\t/** the contents of the comment */\n\t\tdata: string;\n\t}\n\n\t/** A `{@const ...}` tag */\n\texport interface ConstTag extends BaseNode {\n\t\ttype: 'ConstTag';\n\t\tdeclaration: VariableDeclaration & {\n\t\t\tdeclarations: [\n\t\t\t\tVariableDeclarator & {\n\t\t\t\t\tid: Pattern;\n\t\t\t\t\tinit: Expression;\n\t\t\t\t}\n\t\t\t];\n\t\t};\n\t}\n\n\t/** A `{@debug ...}` tag */\n\texport interface DebugTag extends BaseNode {\n\t\ttype: 'DebugTag';\n\t\tidentifiers: Identifier[];\n\t}\n\n\t/** A `{@render foo(...)} tag */\n\texport interface RenderTag extends BaseNode {\n\t\ttype: 'RenderTag';\n\t\texpression:\n\t\t\t| SimpleCallExpression\n\t\t\t| (ChainExpression & {\n\t\t\t\t\texpression: SimpleCallExpression;\n\t\t\t  });\n\t}\n\n\t/** A `{@attach foo(...)} tag */\n\texport interface AttachTag extends BaseNode {\n\t\ttype: 'AttachTag';\n\t\texpression: Expression;\n\t}\n\n\t/** An `animate:` directive */\n\texport interface AnimateDirective extends BaseNode {\n\t\ttype: 'AnimateDirective';\n\t\t/** The 'x' in `animate:x` */\n\t\tname: string;\n\t\t/** The y in `animate:x={y}` */\n\t\texpression: null | Expression;\n\t}\n\n\t/** A `bind:` directive */\n\texport interface BindDirective extends BaseNode {\n\t\ttype: 'BindDirective';\n\t\t/** The 'x' in `bind:x` */\n\t\tname: string;\n\t\t/** The y in `bind:x={y}` */\n\t\texpression:\n\t\t\t| Identifier\n\t\t\t| MemberExpression\n\t\t\t| SequenceExpression;\n\t}\n\n\t/** A `class:` directive */\n\texport interface ClassDirective extends BaseNode {\n\t\ttype: 'ClassDirective';\n\t\t/** The 'x' in `class:x` */\n\t\tname: 'class';\n\t\t/** The 'y' in `class:x={y}`, or the `x` in `class:x` */\n\t\texpression: Expression;\n\t}\n\n\t/** A `let:` directive */\n\texport interface LetDirective extends BaseNode {\n\t\ttype: 'LetDirective';\n\t\t/** The 'x' in `let:x` */\n\t\tname: string;\n\t\t/** The 'y' in `let:x={y}` */\n\t\texpression:\n\t\t\t| null\n\t\t\t| Identifier\n\t\t\t| ArrayExpression\n\t\t\t| ObjectExpression;\n\t}\n\n\t/** An `on:` directive */\n\texport interface OnDirective extends BaseNode {\n\t\ttype: 'OnDirective';\n\t\t/** The 'x' in `on:x` */\n\t\tname: string;\n\t\t/** The 'y' in `on:x={y}` */\n\t\texpression: null | Expression;\n\t\tmodifiers: Array<\n\t\t\t| 'capture'\n\t\t\t| 'nonpassive'\n\t\t\t| 'once'\n\t\t\t| 'passive'\n\t\t\t| 'preventDefault'\n\t\t\t| 'self'\n\t\t\t| 'stopImmediatePropagation'\n\t\t\t| 'stopPropagation'\n\t\t\t| 'trusted'\n\t\t>;\n\t}\n\n\t/** A `style:` directive */\n\texport interface StyleDirective extends BaseNode {\n\t\ttype: 'StyleDirective';\n\t\t/** The 'x' in `style:x` */\n\t\tname: string;\n\t\t/** The 'y' in `style:x={y}` */\n\t\tvalue:\n\t\t\t| true\n\t\t\t| ExpressionTag\n\t\t\t| Array<ExpressionTag | Text>;\n\t\tmodifiers: Array<'important'>;\n\t}\n\n\t// TODO have separate in/out/transition directives\n\t/** A `transition:`, `in:` or `out:` directive */\n\texport interface TransitionDirective extends BaseNode {\n\t\ttype: 'TransitionDirective';\n\t\t/** The 'x' in `transition:x` */\n\t\tname: string;\n\t\t/** The 'y' in `transition:x={y}` */\n\t\texpression: null | Expression;\n\t\tmodifiers: Array<'local' | 'global'>;\n\t\t/** True if this is a `transition:` or `in:` directive */\n\t\tintro: boolean;\n\t\t/** True if this is a `transition:` or `out:` directive */\n\t\toutro: boolean;\n\t}\n\n\t/** A `use:` directive */\n\texport interface UseDirective extends BaseNode {\n\t\ttype: 'UseDirective';\n\t\t/** The 'x' in `use:x` */\n\t\tname: string;\n\t\t/** The 'y' in `use:x={y}` */\n\t\texpression: null | Expression;\n\t}\n\n\tinterface BaseElement extends BaseNode {\n\t\tname: string;\n\t\tattributes: Array<\n\t\t\tAttribute | SpreadAttribute | Directive | AttachTag\n\t\t>;\n\t\tfragment: Fragment;\n\t}\n\n\texport interface Component extends BaseElement {\n\t\ttype: 'Component';\n\t}\n\n\texport interface TitleElement extends BaseElement {\n\t\ttype: 'TitleElement';\n\t\tname: 'title';\n\t}\n\n\texport interface SlotElement extends BaseElement {\n\t\ttype: 'SlotElement';\n\t\tname: 'slot';\n\t}\n\n\texport interface RegularElement extends BaseElement {\n\t\ttype: 'RegularElement';\n\t}\n\n\texport interface SvelteBody extends BaseElement {\n\t\ttype: 'SvelteBody';\n\t\tname: 'svelte:body';\n\t}\n\n\texport interface SvelteComponent extends BaseElement {\n\t\ttype: 'SvelteComponent';\n\t\tname: 'svelte:component';\n\t\texpression: Expression;\n\t}\n\n\texport interface SvelteDocument extends BaseElement {\n\t\ttype: 'SvelteDocument';\n\t\tname: 'svelte:document';\n\t}\n\n\texport interface SvelteElement extends BaseElement {\n\t\ttype: 'SvelteElement';\n\t\tname: 'svelte:element';\n\t\ttag: Expression;\n\t}\n\n\texport interface SvelteFragment extends BaseElement {\n\t\ttype: 'SvelteFragment';\n\t\tname: 'svelte:fragment';\n\t}\n\n\texport interface SvelteBoundary extends BaseElement {\n\t\ttype: 'SvelteBoundary';\n\t\tname: 'svelte:boundary';\n\t}\n\n\texport interface SvelteHead extends BaseElement {\n\t\ttype: 'SvelteHead';\n\t\tname: 'svelte:head';\n\t}\n\n\t/** This is only an intermediate representation while parsing, it doesn't exist in the final AST */\n\texport interface SvelteOptionsRaw extends BaseElement {\n\t\ttype: 'SvelteOptions';\n\t\tname: 'svelte:options';\n\t}\n\n\texport interface SvelteSelf extends BaseElement {\n\t\ttype: 'SvelteSelf';\n\t\tname: 'svelte:self';\n\t}\n\n\texport interface SvelteWindow extends BaseElement {\n\t\ttype: 'SvelteWindow';\n\t\tname: 'svelte:window';\n\t}\n\n\t/** An `{#each ...}` block */\n\texport interface EachBlock extends BaseNode {\n\t\ttype: 'EachBlock';\n\t\texpression: Expression;\n\t\t/** The `entry` in `{#each item as entry}`. `null` if `as` part is omitted */\n\t\tcontext: Pattern | null;\n\t\tbody: Fragment;\n\t\tfallback?: Fragment;\n\t\tindex?: string;\n\t\tkey?: Expression;\n\t}\n\n\t/** An `{#if ...}` block */\n\texport interface IfBlock extends BaseNode {\n\t\ttype: 'IfBlock';\n\t\telseif: boolean;\n\t\ttest: Expression;\n\t\tconsequent: Fragment;\n\t\talternate: Fragment | null;\n\t}\n\n\t/** An `{#await ...}` block */\n\texport interface AwaitBlock extends BaseNode {\n\t\ttype: 'AwaitBlock';\n\t\texpression: Expression;\n\t\t// TODO can/should we move these inside the ThenBlock and CatchBlock?\n\t\t/** The resolved value inside the `then` block */\n\t\tvalue: Pattern | null;\n\t\t/** The rejection reason inside the `catch` block */\n\t\terror: Pattern | null;\n\t\tpending: Fragment | null;\n\t\tthen: Fragment | null;\n\t\tcatch: Fragment | null;\n\t}\n\n\texport interface KeyBlock extends BaseNode {\n\t\ttype: 'KeyBlock';\n\t\texpression: Expression;\n\t\tfragment: Fragment;\n\t}\n\n\texport interface SnippetBlock extends BaseNode {\n\t\ttype: 'SnippetBlock';\n\t\texpression: Identifier;\n\t\tparameters: Pattern[];\n\t\ttypeParams?: string;\n\t\tbody: Fragment;\n\t}\n\n\texport interface Attribute extends BaseNode {\n\t\ttype: 'Attribute';\n\t\tname: string;\n\t\t/**\n\t\t * Quoted/string values are represented by an array, even if they contain a single expression like `\"{x}\"`\n\t\t */\n\t\tvalue:\n\t\t\t| true\n\t\t\t| ExpressionTag\n\t\t\t| Array<Text | ExpressionTag>;\n\t}\n\n\texport interface SpreadAttribute extends BaseNode {\n\t\ttype: 'SpreadAttribute';\n\t\texpression: Expression;\n\t}\n\n\texport interface Script extends BaseNode {\n\t\ttype: 'Script';\n\t\tcontext: 'default' | 'module';\n\t\tcontent: Program;\n\t\tattributes: Attribute[];\n\t}\n\n\texport interface JSComment {\n\t\ttype: 'Line' | 'Block';\n\t\tvalue: string;\n\t\tstart: number;\n\t\tend: number;\n\t\tloc: {\n\t\t\tstart: { line: number; column: number };\n\t\t\tend: { line: number; column: number };\n\t\t};\n\t}\n\n\texport type AttributeLike =\n\t\t| Attribute\n\t\t| SpreadAttribute\n\t\t| Directive;\n\n\texport type Directive =\n\t\t| AST.AnimateDirective\n\t\t| AST.BindDirective\n\t\t| AST.ClassDirective\n\t\t| AST.LetDirective\n\t\t| AST.OnDirective\n\t\t| AST.StyleDirective\n\t\t| AST.TransitionDirective\n\t\t| AST.UseDirective;\n\n\texport type Block =\n\t\t| AST.EachBlock\n\t\t| AST.IfBlock\n\t\t| AST.AwaitBlock\n\t\t| AST.KeyBlock\n\t\t| AST.SnippetBlock;\n\n\texport type ElementLike =\n\t\t| AST.Component\n\t\t| AST.TitleElement\n\t\t| AST.SlotElement\n\t\t| AST.RegularElement\n\t\t| AST.SvelteBody\n\t\t| AST.SvelteBoundary\n\t\t| AST.SvelteComponent\n\t\t| AST.SvelteDocument\n\t\t| AST.SvelteElement\n\t\t| AST.SvelteFragment\n\t\t| AST.SvelteHead\n\t\t| AST.SvelteOptionsRaw\n\t\t| AST.SvelteSelf\n\t\t| AST.SvelteWindow\n\t\t| AST.SvelteBoundary;\n\n\texport type Tag =\n\t\t| AST.AttachTag\n\t\t| AST.ConstTag\n\t\t| AST.DebugTag\n\t\t| AST.ExpressionTag\n\t\t| AST.HtmlTag\n\t\t| AST.RenderTag;\n\n\texport type TemplateNode =\n\t\t| AST.Root\n\t\t| AST.Text\n\t\t| Tag\n\t\t| ElementLike\n\t\t| AST.Attribute\n\t\t| AST.SpreadAttribute\n\t\t| Directive\n\t\t| AST.AttachTag\n\t\t| AST.Comment\n\t\t| Block;\n\n\texport type SvelteNode =\n\t\t| Node\n\t\t| TemplateNode\n\t\t| AST.Fragment\n\t\t| _CSS.Node\n\t\t| Script;\n\n\texport type { _CSS as CSS };\n}\n```\n\n</div>\n\n## CompileError\n\n<div class=\"ts-block\">\n\n```dts\ninterface CompileError extends ICompileDiagnostic {}\n```\n\n</div>\n\n## CompileOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface CompileOptions extends ModuleCompileOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nname?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nSets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope).\nIf unspecified, will be inferred from `filename`\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncustomElement?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\naccessors?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n- <span class=\"tag deprecated\">deprecated</span> This will have no effect in runes mode\n\n</div>\n\nIf `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nnamespace?: Namespace;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `'html'`\n\n</div>\n\nThe namespace of the element; e.g., `\"html\"`, `\"svg\"`, `\"mathml\"`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nimmutable?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n- <span class=\"tag deprecated\">deprecated</span> This will have no effect in runes mode\n\n</div>\n\nIf `true`, tells the compiler that you promise not to mutate any objects.\nThis allows it to be less conservative about checking whether values have changed.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncss?: 'injected' | 'external';\n```\n\n<div class=\"ts-block-property-details\">\n\n- `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root.\n- `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.\nThis is always `'injected'` when compiling with `customElement` mode.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncssHash?: CssHashGetter;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `undefined`\n\n</div>\n\nA function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.\nIt defaults to returning `svelte-${hash(filename ?? css)}`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npreserveComments?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, your HTML comments will be preserved in the output. By default, they are stripped out.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\npreserveWhitespace?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, whitespace inside and between elements is kept as you typed it, rather than removed or collapsed to a single space where possible.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfragments?: 'html' | 'tree';\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `'html'`\n- <span class=\"tag since\">available since</span> v5.33\n\n</div>\n\nWhich strategy to use when cloning DOM fragments:\n\n- `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)\n- `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrunes?: boolean | undefined;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `undefined`\n\n</div>\n\nSet to `true` to force the compiler into runes mode, even if there are no indications of runes usage.\nSet to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.\nSet to `undefined` (the default) to infer runes mode from the component code.\nIs always `true` for JS/TS modules compiled with Svelte.\nWill be `true` by default in Svelte 6.\nNote that setting this to `true` in your `svelte.config.js` will force runes mode for your entire project, including components in `node_modules`,\nwhich is likely not what you want. If you're using Vite, consider using [dynamicCompileOptions](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) instead.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndiscloseVersion?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `true`\n\n</div>\n\nIf `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncompatibility?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> Use these only as a temporary solution before migrating your code\n\n</div>\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\ncomponentApi?: 4 | 5;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `5`\n\n</div>\n\nApplies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 —\nas a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`)\nor as an object with a `.render(...)` method when compiling for the server\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsourcemap?: object | string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `null`\n\n</div>\n\nAn initial sourcemap that will be merged into the final output sourcemap.\nThis is usually the preprocessor sourcemap.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\noutputFilename?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `null`\n\n</div>\n\nUsed for your JavaScript sourcemap.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncssOutputFilename?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `null`\n\n</div>\n\nUsed for your CSS sourcemap.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nhmr?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, compiles components with hot reloading support.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmodernAst?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, returns the modern version of the AST.\nWill become `true` by default in Svelte 6, and the option will be removed in Svelte 7.\n\n</div>\n</div></div>\n\n## CompileResult\n\nThe return value of `compile` from `svelte/compiler`\n\n<div class=\"ts-block\">\n\n```dts\ninterface CompileResult {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\njs: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nThe compiled JavaScript\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\ncode: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe generated code\n\n</div>\n</div>\n<div class=\"ts-block-property\">\n\n```dts\nmap: SourceMap;\n```\n\n<div class=\"ts-block-property-details\">\n\nA source map\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncss: null | {\n\t/** The generated code */\n\tcode: string;\n\t/** A source map */\n\tmap: SourceMap;\n\t/** Whether or not the CSS includes global rules */\n\thasGlobal: boolean;\n};\n```\n\n<div class=\"ts-block-property-details\">\n\nThe compiled CSS\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwarnings: Warning[];\n```\n\n<div class=\"ts-block-property-details\">\n\nAn array of warning objects that were generated during compilation. Each warning has several properties:\n- `code` is a string identifying the category of warning\n- `message` describes the issue in human-readable terms\n- `start` and `end`, if the warning relates to a specific location, are objects with `line`, `column` and `character` properties\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmetadata: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\nMetadata about the compiled component\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nrunes: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nWhether the file was compiled in runes mode, either because of an explicit option or inferred from usage.\nFor `compileModule`, this is always `true`\n\n</div>\n</div></div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nast: any;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe AST\n\n</div>\n</div></div>\n\n## MarkupPreprocessor\n\nA markup preprocessor that takes a string of code and returns a processed version.\n\n<div class=\"ts-block\">\n\n```dts\ntype MarkupPreprocessor = (options: {\n\t/**\n\t * The whole Svelte file content\n\t */\n\tcontent: string;\n\t/**\n\t * The filename of the Svelte file\n\t */\n\tfilename?: string;\n}) => Processed | void | Promise<Processed | void>;\n```\n\n</div>\n\n## ModuleCompileOptions\n\n<div class=\"ts-block\">\n\n```dts\ninterface ModuleCompileOptions {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndev?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `false`\n\n</div>\n\nIf `true`, causes extra code to be added that will perform runtime checks and provide debugging information during development.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ngenerate?: 'client' | 'server' | false;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `'client'`\n\n</div>\n\nIf `\"client\"`, Svelte emits code designed to run in the browser.\nIf `\"server\"`, Svelte emits code suitable for server-side rendering.\nIf `false`, nothing is generated. Useful for tooling that is only interested in warnings.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nfilename?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nUsed for debugging hints and sourcemaps. Your bundler plugin will set it automatically.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nrootDir?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag\">default</span> `process.cwd() on node-like environments, undefined elsewhere`\n\n</div>\n\nUsed for ensuring filenames don't leak filesystem information. Your bundler plugin will set it automatically.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nwarningFilter?: (warning: Warning) => boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\nA function that gets a `Warning` as an argument and returns a boolean.\nUse this to filter out warnings. Return `true` to keep the warning, `false` to discard it.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nexperimental?: {/*…*/}\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v5.36\n\n</div>\n\nExperimental options\n\n<div class=\"ts-block-property-children\"><div class=\"ts-block-property\">\n\n```dts\nasync?: boolean;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag since\">available since</span> v5.36\n\n</div>\n\nAllow `await` keyword in deriveds, template expressions, and the top level of components\n\n</div>\n</div></div>\n\n</div>\n</div></div>\n\n## Preprocessor\n\nA script/style preprocessor that takes a string of code and returns a processed version.\n\n<div class=\"ts-block\">\n\n```dts\ntype Preprocessor = (options: {\n\t/**\n\t * The script/style tag content\n\t */\n\tcontent: string;\n\t/**\n\t * The attributes on the script/style tag\n\t */\n\tattributes: Record<string, string | boolean>;\n\t/**\n\t * The whole Svelte file content\n\t */\n\tmarkup: string;\n\t/**\n\t * The filename of the Svelte file\n\t */\n\tfilename?: string;\n}) => Processed | void | Promise<Processed | void>;\n```\n\n</div>\n\n## PreprocessorGroup\n\nA preprocessor group is a set of preprocessors that are applied to a Svelte file.\n\n<div class=\"ts-block\">\n\n```dts\ninterface PreprocessorGroup {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nname?: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nName of the preprocessor. Will be a required option in the next major version\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmarkup?: MarkupPreprocessor;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstyle?: Preprocessor;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nscript?: Preprocessor;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## Processed\n\nThe result of a preprocessor run. If the preprocessor does not return a result, it is assumed that the code is unchanged.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Processed {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ncode: string;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe new code\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nmap?: string | object;\n```\n\n<div class=\"ts-block-property-details\">\n\nA source map mapping back to the original code\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndependencies?: string[];\n```\n\n<div class=\"ts-block-property-details\">\n\nA list of additional files to watch for changes\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nattributes?: Record<string, string | boolean>;\n```\n\n<div class=\"ts-block-property-details\">\n\nOnly for script/style preprocessors: The updated attributes to set on the tag. If undefined, attributes stay unchanged.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntoString?: () => string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## Warning\n\n<div class=\"ts-block\">\n\n```dts\ninterface Warning extends ICompileDiagnostic {}\n```\n\n</div>",
+		"svelte/svelte-easing": "```js\n// @noErrors\nimport {\n\tbackIn,\n\tbackInOut,\n\tbackOut,\n\tbounceIn,\n\tbounceInOut,\n\tbounceOut,\n\tcircIn,\n\tcircInOut,\n\tcircOut,\n\tcubicIn,\n\tcubicInOut,\n\tcubicOut,\n\telasticIn,\n\telasticInOut,\n\telasticOut,\n\texpoIn,\n\texpoInOut,\n\texpoOut,\n\tlinear,\n\tquadIn,\n\tquadInOut,\n\tquadOut,\n\tquartIn,\n\tquartInOut,\n\tquartOut,\n\tquintIn,\n\tquintInOut,\n\tquintOut,\n\tsineIn,\n\tsineInOut,\n\tsineOut\n} from 'svelte/easing';\n```\n\n## backIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction backIn(t: number): number;\n```\n\n</div>\n\n\n\n## backInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction backInOut(t: number): number;\n```\n\n</div>\n\n\n\n## backOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction backOut(t: number): number;\n```\n\n</div>\n\n\n\n## bounceIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction bounceIn(t: number): number;\n```\n\n</div>\n\n\n\n## bounceInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction bounceInOut(t: number): number;\n```\n\n</div>\n\n\n\n## bounceOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction bounceOut(t: number): number;\n```\n\n</div>\n\n\n\n## circIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction circIn(t: number): number;\n```\n\n</div>\n\n\n\n## circInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction circInOut(t: number): number;\n```\n\n</div>\n\n\n\n## circOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction circOut(t: number): number;\n```\n\n</div>\n\n\n\n## cubicIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction cubicIn(t: number): number;\n```\n\n</div>\n\n\n\n## cubicInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction cubicInOut(t: number): number;\n```\n\n</div>\n\n\n\n## cubicOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction cubicOut(t: number): number;\n```\n\n</div>\n\n\n\n## elasticIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction elasticIn(t: number): number;\n```\n\n</div>\n\n\n\n## elasticInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction elasticInOut(t: number): number;\n```\n\n</div>\n\n\n\n## elasticOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction elasticOut(t: number): number;\n```\n\n</div>\n\n\n\n## expoIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction expoIn(t: number): number;\n```\n\n</div>\n\n\n\n## expoInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction expoInOut(t: number): number;\n```\n\n</div>\n\n\n\n## expoOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction expoOut(t: number): number;\n```\n\n</div>\n\n\n\n## linear\n\n<div class=\"ts-block\">\n\n```dts\nfunction linear(t: number): number;\n```\n\n</div>\n\n\n\n## quadIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction quadIn(t: number): number;\n```\n\n</div>\n\n\n\n## quadInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quadInOut(t: number): number;\n```\n\n</div>\n\n\n\n## quadOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quadOut(t: number): number;\n```\n\n</div>\n\n\n\n## quartIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction quartIn(t: number): number;\n```\n\n</div>\n\n\n\n## quartInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quartInOut(t: number): number;\n```\n\n</div>\n\n\n\n## quartOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quartOut(t: number): number;\n```\n\n</div>\n\n\n\n## quintIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction quintIn(t: number): number;\n```\n\n</div>\n\n\n\n## quintInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quintInOut(t: number): number;\n```\n\n</div>\n\n\n\n## quintOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction quintOut(t: number): number;\n```\n\n</div>\n\n\n\n## sineIn\n\n<div class=\"ts-block\">\n\n```dts\nfunction sineIn(t: number): number;\n```\n\n</div>\n\n\n\n## sineInOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction sineInOut(t: number): number;\n```\n\n</div>\n\n\n\n## sineOut\n\n<div class=\"ts-block\">\n\n```dts\nfunction sineOut(t: number): number;\n```\n\n</div>",
+		"svelte/svelte-events": "```js\n// @noErrors\nimport { on } from 'svelte/events';\n```\n\n## on\n\nAttaches an event handler to the window and returns a function that removes the handler. Using this\nrather than `addEventListener` will preserve the correct order relative to handlers added declaratively\n(with attributes like `onclick`), which use event delegation for performance reasons\n\n<div class=\"ts-block\">\n\n```dts\nfunction on<Type extends keyof WindowEventMap>(\n\twindow: Window,\n\ttype: Type,\n\thandler: (\n\t\tthis: Window,\n\t\tevent: WindowEventMap[Type]\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction on<Type extends keyof DocumentEventMap>(\n\tdocument: Document,\n\ttype: Type,\n\thandler: (\n\t\tthis: Document,\n\t\tevent: DocumentEventMap[Type]\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction on<\n\tElement extends HTMLElement,\n\tType extends keyof HTMLElementEventMap\n>(\n\telement: Element,\n\ttype: Type,\n\thandler: (\n\t\tthis: Element,\n\t\tevent: HTMLElementEventMap[Type]\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction on<\n\tElement extends MediaQueryList,\n\tType extends keyof MediaQueryListEventMap\n>(\n\telement: Element,\n\ttype: Type,\n\thandler: (\n\t\tthis: Element,\n\t\tevent: MediaQueryListEventMap[Type]\n\t) => any,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction on(\n\telement: EventTarget,\n\ttype: string,\n\thandler: EventListener,\n\toptions?: AddEventListenerOptions | undefined\n): () => void;\n```\n\n</div>",
+		"svelte/svelte-legacy": "This module provides various functions for use during the migration, since some features can't be replaced one to one with new features. All imports are marked as deprecated and should be migrated away from over time.\n\n\n\n```js\n// @noErrors\nimport {\n\tasClassComponent,\n\tcreateBubbler,\n\tcreateClassComponent,\n\thandlers,\n\tnonpassive,\n\tonce,\n\tpassive,\n\tpreventDefault,\n\trun,\n\tself,\n\tstopImmediatePropagation,\n\tstopPropagation,\n\ttrusted\n} from 'svelte/legacy';\n```\n\n## asClassComponent\n\n<blockquote class=\"tag deprecated note\">\n\nUse this only as a temporary solution to migrate your imperative component code to Svelte 5.\n\n</blockquote>\n\nTakes the component function and returns a Svelte 4 compatible component constructor.\n\n<div class=\"ts-block\">\n\n```dts\nfunction asClassComponent<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>,\n\tEvents extends Record<string, any>,\n\tSlots extends Record<string, any>\n>(\n\tcomponent:\n\t\t| SvelteComponent<Props, Events, Slots>\n\t\t| Component<Props>\n): ComponentType<\n\tSvelteComponent<Props, Events, Slots> & Exports\n>;\n```\n\n</div>\n\n\n\n## createBubbler\n\n<blockquote class=\"tag deprecated note\">\n\nUse this only as a temporary solution to migrate your automatically delegated events in Svelte 5.\n\n</blockquote>\n\nFunction to create a `bubble` function that mimic the behavior of `on:click` without handler available in svelte 4.\n\n<div class=\"ts-block\">\n\n```dts\nfunction createBubbler(): (\n\ttype: string\n) => (event: Event) => boolean;\n```\n\n</div>\n\n\n\n## createClassComponent\n\n<blockquote class=\"tag deprecated note\">\n\nUse this only as a temporary solution to migrate your imperative component code to Svelte 5.\n\n</blockquote>\n\nTakes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.\n\n<div class=\"ts-block\">\n\n```dts\nfunction createClassComponent<\n\tProps extends Record<string, any>,\n\tExports extends Record<string, any>,\n\tEvents extends Record<string, any>,\n\tSlots extends Record<string, any>\n>(\n\toptions: ComponentConstructorOptions<Props> & {\n\t\tcomponent:\n\t\t\t| ComponentType<SvelteComponent<Props, Events, Slots>>\n\t\t\t| Component<Props>;\n\t}\n): SvelteComponent<Props, Events, Slots> & Exports;\n```\n\n</div>\n\n\n\n## handlers\n\nFunction to mimic the multiple listeners available in svelte 4\n\n<div class=\"ts-block\">\n\n```dts\nfunction handlers(\n\t...handlers: EventListener[]\n): EventListener;\n```\n\n</div>\n\n\n\n## nonpassive\n\nSubstitute for the `nonpassive` event modifier, implemented as an action\n\n<div class=\"ts-block\">\n\n```dts\nfunction nonpassive(\n\tnode: HTMLElement,\n\t[event, handler]: [\n\t\tevent: string,\n\t\thandler: () => EventListener\n\t]\n): void;\n```\n\n</div>\n\n\n\n## once\n\nSubstitute for the `once` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction once(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## passive\n\nSubstitute for the `passive` event modifier, implemented as an action\n\n<div class=\"ts-block\">\n\n```dts\nfunction passive(\n\tnode: HTMLElement,\n\t[event, handler]: [\n\t\tevent: string,\n\t\thandler: () => EventListener\n\t]\n): void;\n```\n\n</div>\n\n\n\n## preventDefault\n\nSubstitute for the `preventDefault` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction preventDefault(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## run\n\n<blockquote class=\"tag deprecated note\">\n\nUse this only as a temporary solution to migrate your component code to Svelte 5.\n\n</blockquote>\n\nRuns the given function once immediately on the server, and works like `$effect.pre` on the client.\n\n<div class=\"ts-block\">\n\n```dts\nfunction run(fn: () => void | (() => void)): void;\n```\n\n</div>\n\n\n\n## self\n\nSubstitute for the `self` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction self(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## stopImmediatePropagation\n\nSubstitute for the `stopImmediatePropagation` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction stopImmediatePropagation(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## stopPropagation\n\nSubstitute for the `stopPropagation` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction stopPropagation(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## trusted\n\nSubstitute for the `trusted` event modifier\n\n<div class=\"ts-block\">\n\n```dts\nfunction trusted(\n\tfn: (event: Event, ...args: Array<unknown>) => void\n): (event: Event, ...args: unknown[]) => void;\n```\n\n</div>\n\n\n\n## LegacyComponentType\n\nSupport using the component as both a class and function during the transition period\n\n<div class=\"ts-block\">\n\n```dts\ntype LegacyComponentType = {\n\tnew (o: ComponentConstructorOptions): SvelteComponent;\n\t(\n\t\t...args: Parameters<Component<Record<string, any>>>\n\t): ReturnType<\n\t\tComponent<Record<string, any>, Record<string, any>>\n\t>;\n};\n```\n\n</div>",
+		"svelte/svelte-motion": "```js\n// @noErrors\nimport {\n\tSpring,\n\tTween,\n\tprefersReducedMotion,\n\tspring,\n\ttweened\n} from 'svelte/motion';\n```\n\n## Spring\n\n<blockquote class=\"since note\">\n\nAvailable since 5.8.0\n\n</blockquote>\n\nA wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to\nmove towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters.\n\n```svelte\n<script>\n\timport { Spring } from 'svelte/motion';\n\n\tconst spring = new Spring(0);\n</script>\n\n<input type=\"range\" bind:value={spring.target} />\n<input type=\"range\" bind:value={spring.current} disabled />\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass Spring<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(value: T, options?: SpringOpts);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstatic of<U>(fn: () => U, options?: SpringOpts): Spring<U>;\n```\n\n<div class=\"ts-block-property-details\">\n\nCreate a spring whose value is bound to the return value of `fn`. This must be called\ninside an effect root (for example, during component initialisation).\n\n```svelte\n<script>\n\timport { Spring } from 'svelte/motion';\n\n\tlet { number } = $props();\n\n\tconst spring = Spring.of(() => number);\n</script>\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset(value: T, options?: SpringUpdateOpts): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nSets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.\n\nIf `options.instant` is `true`, `spring.current` immediately matches `spring.target`.\n\nIf `options.preserveMomentum` is provided, the spring will continue on its current trajectory for\nthe specified number of milliseconds. This is useful for things like 'fling' gestures.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndamping: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprecision: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstiffness: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntarget: T;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe end value of the spring.\nThis property only exists on the `Spring` class, not the legacy `spring` store.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nget current(): T;\n```\n\n<div class=\"ts-block-property-details\">\n\nThe current value of the spring.\nThis property only exists on the `Spring` class, not the legacy `spring` store.\n\n</div>\n</div></div>\n\n\n\n## Tween\n\n<blockquote class=\"since note\">\n\nAvailable since 5.8.0\n\n</blockquote>\n\nA wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to\nmove towards it over time, taking account of the `delay`, `duration` and `easing` options.\n\n```svelte\n<script>\n\timport { Tween } from 'svelte/motion';\n\n\tconst tween = new Tween(0);\n</script>\n\n<input type=\"range\" bind:value={tween.target} />\n<input type=\"range\" bind:value={tween.current} disabled />\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass Tween<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nstatic of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;\n```\n\n<div class=\"ts-block-property-details\">\n\nCreate a tween whose value is bound to the return value of `fn`. This must be called\ninside an effect root (for example, during component initialisation).\n\n```svelte\n<script>\n\timport { Tween } from 'svelte/motion';\n\n\tlet { number } = $props();\n\n\tconst tween = Tween.of(() => number);\n</script>\n```\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(value: T, options?: TweenedOptions<T>);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset(value: T, options?: TweenedOptions<T> | undefined): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\nSets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.\n\nIf `options` are provided, they will override the tween's defaults.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nget current(): T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset target(v: T);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nget target(): T;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## prefersReducedMotion\n\n<blockquote class=\"since note\">\n\nAvailable since 5.7.0\n\n</blockquote>\n\nA [media query](/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).\n\n```svelte\n<script>\n\timport { prefersReducedMotion } from 'svelte/motion';\n\timport { fly } from 'svelte/transition';\n\n\tlet visible = $state(false);\n</script>\n\n<button onclick={() => visible = !visible}>\n\ttoggle\n</button>\n\n{#if visible}\n\t<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>\n\t\tflies in, unless the user prefers reduced motion\n\t</p>\n{/if}\n```\n\n<div class=\"ts-block\">\n\n```dts\nconst prefersReducedMotion: MediaQuery;\n```\n\n</div>\n\n\n\n## spring\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`Spring`](/docs/svelte/svelte-motion#Spring) instead\n\n</blockquote>\n\nThe spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it \"bounces\" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.\n\n<div class=\"ts-block\">\n\n```dts\nfunction spring<T = any>(\n\tvalue?: T | undefined,\n\topts?: SpringOpts | undefined\n): Spring<T>;\n```\n\n</div>\n\n\n\n## tweened\n\n<blockquote class=\"tag deprecated note\">\n\nUse [`Tween`](/docs/svelte/svelte-motion#Tween) instead\n\n</blockquote>\n\nA tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.\n\n<div class=\"ts-block\">\n\n```dts\nfunction tweened<T>(\n\tvalue?: T | undefined,\n\tdefaults?: TweenedOptions<T> | undefined\n): Tweened<T>;\n```\n\n</div>\n\n\n\n## Spring\n\n<div class=\"ts-block\">\n\n```dts\ninterface Spring<T> extends Readable<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nset(new_value: T, opts?: SpringUpdateOpts): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nupdate: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nsubscribe(fn: (value: T) => void): Unsubscriber;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- <span class=\"tag deprecated\">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class\n\n</div>\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nprecision: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ndamping: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstiffness: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## Tweened\n\n<div class=\"ts-block\">\n\n```dts\ninterface Tweened<T> extends Readable<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nset(value: T, opts?: TweenedOptions<T>): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nupdate(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/svelte-reactivity-window": "This module exports reactive versions of various `window` values, each of which has a reactive `current` property that you can reference in reactive contexts (templates, [deriveds]($derived) and [effects]($effect)) without using [`<svelte:window>`](svelte-window) bindings or manually creating your own event listeners.\n\n```svelte\n<script>\n\timport { innerWidth, innerHeight } from 'svelte/reactivity/window';\n</script>\n\n<p>{innerWidth.current}x{innerHeight.current}</p>\n```\n\n\n\n```js\n// @noErrors\nimport {\n\tdevicePixelRatio,\n\tinnerHeight,\n\tinnerWidth,\n\tonline,\n\touterHeight,\n\touterWidth,\n\tscreenLeft,\n\tscreenTop,\n\tscrollX,\n\tscrollY\n} from 'svelte/reactivity/window';\n```\n\n## devicePixelRatio\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`devicePixelRatio.current` is a reactive view of `window.devicePixelRatio`. On the server it is `undefined`.\nNote that behaviour differs between browsers — on Chrome it will respond to the current zoom level,\non Firefox and Safari it won't.\n\n<div class=\"ts-block\">\n\n```dts\nconst devicePixelRatio: {\n\tget current(): number | undefined;\n};\n```\n\n</div>\n\n\n\n## innerHeight\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`innerHeight.current` is a reactive view of `window.innerHeight`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst innerHeight: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## innerWidth\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`innerWidth.current` is a reactive view of `window.innerWidth`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst innerWidth: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## online\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`online.current` is a reactive view of `navigator.onLine`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst online: ReactiveValue<boolean | undefined>;\n```\n\n</div>\n\n\n\n## outerHeight\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`outerHeight.current` is a reactive view of `window.outerHeight`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst outerHeight: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## outerWidth\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`outerWidth.current` is a reactive view of `window.outerWidth`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst outerWidth: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## screenLeft\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`screenLeft.current` is a reactive view of `window.screenLeft`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst screenLeft: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## screenTop\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`screenTop.current` is a reactive view of `window.screenTop`. It is updated inside a `requestAnimationFrame` callback. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst screenTop: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## scrollX\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst scrollX: ReactiveValue<number | undefined>;\n```\n\n</div>\n\n\n\n## scrollY\n\n<blockquote class=\"since note\">\n\nAvailable since 5.11.0\n\n</blockquote>\n\n`scrollY.current` is a reactive view of `window.scrollY`. On the server it is `undefined`.\n\n<div class=\"ts-block\">\n\n```dts\nconst scrollY: ReactiveValue<number | undefined>;\n```\n\n</div>",
+		"svelte/svelte-reactivity": "Svelte provides reactive versions of various built-ins like [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) that can be used just like their native counterparts, as well as a handful of additional utilities for handling reactivity.\n\n\n\n```js\n// @noErrors\nimport {\n\tMediaQuery,\n\tSvelteDate,\n\tSvelteMap,\n\tSvelteSet,\n\tSvelteURL,\n\tSvelteURLSearchParams,\n\tcreateSubscriber\n} from 'svelte/reactivity';\n```\n\n## MediaQuery\n\n<blockquote class=\"since note\">\n\nAvailable since 5.7.0\n\n</blockquote>\n\nCreates a media query and provides a `current` property that reflects whether or not it matches.\n\nUse it carefully — during server-side rendering, there is no way to know what the correct value should be, potentially causing content to change upon hydration.\nIf you can use the media query in CSS to achieve the same effect, do that.\n\n```svelte\n<script>\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tconst large = new MediaQuery('min-width: 800px');\n</script>\n\n<h1>{large.current ? 'large screen' : 'small screen'}</h1>\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass MediaQuery extends ReactiveValue<boolean> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(query: string, fallback?: boolean | undefined);\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `query` A media query string\n- `fallback` Fallback value for the server\n\n</div>\n\n</div>\n</div></div>\n\n\n\n## SvelteDate\n\nA reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.\nReading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat))\nin an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated when the value of the date changes.\n\n```svelte\n<script>\n\timport { SvelteDate } from 'svelte/reactivity';\n\n\tconst date = new SvelteDate();\n\n\tconst formatter = new Intl.DateTimeFormat(undefined, {\n\t  hour: 'numeric',\n\t  minute: 'numeric',\n\t  second: 'numeric'\n\t});\n\n\t$effect(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tdate.setTime(Date.now());\n\t\t}, 1000);\n\n\t\treturn () => {\n\t\t\tclearInterval(interval);\n\t\t};\n\t});\n</script>\n\n<p>The time is {formatter.format(date)}</p>\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteDate extends Date {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(...params: any[]);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## SvelteMap\n\nA reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.\nReading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated as necessary when the map is updated.\n\nNote that values in a reactive map are _not_ made [deeply reactive](/docs/svelte/$state#Deep-state).\n\n```svelte\n<script>\n\timport { SvelteMap } from 'svelte/reactivity';\n\timport { result } from './game.js';\n\n\tlet board = new SvelteMap();\n\tlet player = $state('x');\n\tlet winner = $derived(result(board));\n\n\tfunction reset() {\n\t\tplayer = 'x';\n\t\tboard.clear();\n\t}\n</script>\n\n<div class=\"board\">\n\t{#each Array(9), i}\n\t\t<button\n\t\t\tdisabled={board.has(i) || winner}\n\t\t\tonclick={() => {\n\t\t\t\tboard.set(i, player);\n\t\t\t\tplayer = player === 'x' ? 'o' : 'x';\n\t\t\t}}\n\t\t>{board.get(i)}</button>\n\t{/each}\n</div>\n\n{#if winner}\n\t<p>{winner} wins!</p>\n\t<button onclick={reset}>reset</button>\n{:else}\n\t<p>{player} is next</p>\n{/if}\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteMap<K, V> extends Map<K, V> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(value?: Iterable<readonly [K, V]> | null | undefined);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nset(key: K, value: V): this;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## SvelteSet\n\nA reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.\nReading contents of the set (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated as necessary when the set is updated.\n\nNote that values in a reactive set are _not_ made [deeply reactive](/docs/svelte/$state#Deep-state).\n\n```svelte\n<script>\n\timport { SvelteSet } from 'svelte/reactivity';\n\tlet monkeys = new SvelteSet();\n\n\tfunction toggle(monkey) {\n\t\tif (monkeys.has(monkey)) {\n\t\t\tmonkeys.delete(monkey);\n\t\t} else {\n\t\t\tmonkeys.add(monkey);\n\t\t}\n\t}\n</script>\n\n{#each ['🙈', '🙉', '🙊'] as monkey}\n\t<button onclick={() => toggle(monkey)}>{monkey}</button>\n{/each}\n\n<button onclick={() => monkeys.clear()}>clear</button>\n\n{#if monkeys.has('🙈')}<p>see no evil</p>{/if}\n{#if monkeys.has('🙉')}<p>hear no evil</p>{/if}\n{#if monkeys.has('🙊')}<p>speak no evil</p>{/if}\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteSet<T> extends Set<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nconstructor(value?: Iterable<T> | null | undefined);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nadd(value: T): this;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## SvelteURL\n\nA reactive version of the built-in [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.\nReading properties of the URL (such as `url.href` or `url.pathname`) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated as necessary when the URL changes.\n\nThe `searchParams` property is an instance of [SvelteURLSearchParams](/docs/svelte/svelte-reactivity#SvelteURLSearchParams).\n\n[Example](/playground/5a694758901b448c83dc40dc31c71f2a):\n\n```svelte\n<script>\n\timport { SvelteURL } from 'svelte/reactivity';\n\n\tconst url = new SvelteURL('https://example.com/path');\n</script>\n\n<!-- changes to these... -->\n<input bind:value={url.protocol} />\n<input bind:value={url.hostname} />\n<input bind:value={url.pathname} />\n\n<hr />\n\n<!-- will update `href` and vice versa -->\n<input bind:value={url.href} size=\"65\" />\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteURL extends URL {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nget searchParams(): SvelteURLSearchParams;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## SvelteURLSearchParams\n\nA reactive version of the built-in [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object.\nReading its contents (by iterating, or by calling `params.get(...)` or `params.getAll(...)` as in the [example](/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](/docs/svelte/$effect) or [derived](/docs/svelte/$derived)\nwill cause it to be re-evaluated as necessary when the params are updated.\n\n```svelte\n<script>\n\timport { SvelteURLSearchParams } from 'svelte/reactivity';\n\n\tconst params = new SvelteURLSearchParams('message=hello');\n\n\tlet key = $state('key');\n\tlet value = $state('value');\n</script>\n\n<input bind:value={key} />\n<input bind:value={value} />\n<button onclick={() => params.append(key, value)}>append</button>\n\n<p>?{params.toString()}</p>\n\n{#each params as [key, value]}\n\t<p>{key}: {value}</p>\n{/each}\n```\n\n<div class=\"ts-block\">\n\n```dts\nclass SvelteURLSearchParams extends URLSearchParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\n[REPLACE](params: URLSearchParams): void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n\n\n## createSubscriber\n\n<blockquote class=\"since note\">\n\nAvailable since 5.7.0\n\n</blockquote>\n\nReturns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.\nIt's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.\n\nIf `subscribe` is called inside an effect (including indirectly, for example inside a getter),\nthe `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.\n\nIf `start` returns a cleanup function, it will be called when the effect is destroyed.\n\nIf `subscribe` is called in multiple effects, `start` will only be called once as long as the effects\nare active, and the returned teardown function will only be called when all effects are destroyed.\n\nIt's best understood with an example. Here's an implementation of [`MediaQuery`](/docs/svelte/svelte-reactivity#MediaQuery):\n\n```js\n// @errors: 7031\nimport { createSubscriber } from 'svelte/reactivity';\nimport { on } from 'svelte/events';\n\nexport class MediaQuery {\n\t#query;\n\t#subscribe;\n\n\tconstructor(query) {\n\t\tthis.#query = window.matchMedia(`(${query})`);\n\n\t\tthis.#subscribe = createSubscriber((update) => {\n\t\t\t// when the `change` event occurs, re-run any effects that read `this.current`\n\t\t\tconst off = on(this.#query, 'change', update);\n\n\t\t\t// stop listening when all the effects are destroyed\n\t\t\treturn () => off();\n\t\t});\n\t}\n\n\tget current() {\n\t\t// This makes the getter reactive, if read in an effect\n\t\tthis.#subscribe();\n\n\t\t// Return the current state of the query, whether or not we're in an effect\n\t\treturn this.#query.matches;\n\t}\n}\n```\n\n<div class=\"ts-block\">\n\n```dts\nfunction createSubscriber(\n\tstart: (update: () => void) => (() => void) | void\n): () => void;\n```\n\n</div>",
+		"svelte/svelte-server": "```js\n// @noErrors\nimport { render } from 'svelte/server';\n```\n\n## render\n\nOnly available on the server and when compiling with the `server` option.\nTakes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.\n\n<div class=\"ts-block\">\n\n```dts\nfunction render<\n\tComp extends SvelteComponent<any> | Component<any>,\n\tProps extends ComponentProps<Comp> = ComponentProps<Comp>\n>(\n\t...args: {} extends Props\n\t\t? [\n\t\t\t\tcomponent: Comp extends SvelteComponent<any>\n\t\t\t\t\t? ComponentType<Comp>\n\t\t\t\t\t: Comp,\n\t\t\t\toptions?: {\n\t\t\t\t\tprops?: Omit<Props, '$$slots' | '$$events'>;\n\t\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\t\tidPrefix?: string;\n\t\t\t\t}\n\t\t\t]\n\t\t: [\n\t\t\t\tcomponent: Comp extends SvelteComponent<any>\n\t\t\t\t\t? ComponentType<Comp>\n\t\t\t\t\t: Comp,\n\t\t\t\toptions: {\n\t\t\t\t\tprops: Omit<Props, '$$slots' | '$$events'>;\n\t\t\t\t\tcontext?: Map<any, any>;\n\t\t\t\t\tidPrefix?: string;\n\t\t\t\t}\n\t\t\t]\n): RenderOutput;\n```\n\n</div>",
+		"svelte/svelte-store": "```js\n// @noErrors\nimport {\n\tderived,\n\tfromStore,\n\tget,\n\treadable,\n\treadonly,\n\ttoStore,\n\twritable\n} from 'svelte/store';\n```\n\n## derived\n\nDerived value store by synchronizing one or more readable stores and\napplying an aggregation function over its input values.\n\n<div class=\"ts-block\">\n\n```dts\nfunction derived<S extends Stores, T>(\n\tstores: S,\n\tfn: (\n\t\tvalues: StoresValues<S>,\n\t\tset: (value: T) => void,\n\t\tupdate: (fn: Updater<T>) => void\n\t) => Unsubscriber | void,\n\tinitial_value?: T | undefined\n): Readable<T>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction derived<S extends Stores, T>(\n\tstores: S,\n\tfn: (values: StoresValues<S>) => T,\n\tinitial_value?: T | undefined\n): Readable<T>;\n```\n\n</div>\n\n\n\n## fromStore\n\n<div class=\"ts-block\">\n\n```dts\nfunction fromStore<V>(store: Writable<V>): {\n\tcurrent: V;\n};\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction fromStore<V>(store: Readable<V>): {\n\treadonly current: V;\n};\n```\n\n</div>\n\n\n\n## get\n\nGet the current value from a store by subscribing and immediately unsubscribing.\n\n<div class=\"ts-block\">\n\n```dts\nfunction get<T>(store: Readable<T>): T;\n```\n\n</div>\n\n\n\n## readable\n\nCreates a `Readable` store that allows reading by subscription.\n\n<div class=\"ts-block\">\n\n```dts\nfunction readable<T>(\n\tvalue?: T | undefined,\n\tstart?: StartStopNotifier<T> | undefined\n): Readable<T>;\n```\n\n</div>\n\n\n\n## readonly\n\nTakes a store and returns a new one derived from the old one that is readable.\n\n<div class=\"ts-block\">\n\n```dts\nfunction readonly<T>(store: Readable<T>): Readable<T>;\n```\n\n</div>\n\n\n\n## toStore\n\n<div class=\"ts-block\">\n\n```dts\nfunction toStore<V>(\n\tget: () => V,\n\tset: (v: V) => void\n): Writable<V>;\n```\n\n</div>\n\n<div class=\"ts-block\">\n\n```dts\nfunction toStore<V>(get: () => V): Readable<V>;\n```\n\n</div>\n\n\n\n## writable\n\nCreate a `Writable` store that allows both updating and reading by subscription.\n\n<div class=\"ts-block\">\n\n```dts\nfunction writable<T>(\n\tvalue?: T | undefined,\n\tstart?: StartStopNotifier<T> | undefined\n): Writable<T>;\n```\n\n</div>\n\n\n\n## Readable\n\nReadable interface for subscribing.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Readable<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nsubscribe(this: void, run: Subscriber<T>, invalidate?: () => void): Unsubscriber;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `run` subscription callback\n- `invalidate` cleanup callback\n\n</div>\n\nSubscribe on value changes.\n\n</div>\n</div></div>\n\n## StartStopNotifier\n\nStart and stop notification callbacks.\nThis function is called when the first subscriber subscribes.\n\n<div class=\"ts-block\">\n\n```dts\ntype StartStopNotifier<T> = (\n\tset: (value: T) => void,\n\tupdate: (fn: Updater<T>) => void\n) => void | (() => void);\n```\n\n</div>\n\n## Subscriber\n\nCallback to inform of a value updates.\n\n<div class=\"ts-block\">\n\n```dts\ntype Subscriber<T> = (value: T) => void;\n```\n\n</div>\n\n## Unsubscriber\n\nUnsubscribes from value updates.\n\n<div class=\"ts-block\">\n\n```dts\ntype Unsubscriber = () => void;\n```\n\n</div>\n\n## Updater\n\nCallback to update a value.\n\n<div class=\"ts-block\">\n\n```dts\ntype Updater<T> = (value: T) => T;\n```\n\n</div>\n\n## Writable\n\nWritable interface for both updating and subscribing.\n\n<div class=\"ts-block\">\n\n```dts\ninterface Writable<T> extends Readable<T> {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\nset(this: void, value: T): void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `value` to set\n\n</div>\n\nSet value and inform subscribers.\n\n</div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nupdate(this: void, updater: Updater<T>): void;\n```\n\n<div class=\"ts-block-property-details\">\n\n<div class=\"ts-block-property-bullets\">\n\n- `updater` callback\n\n</div>\n\nUpdate value using callback and inform subscribers.\n\n</div>\n</div></div>",
+		"svelte/svelte-transition": "```js\n// @noErrors\nimport {\n\tblur,\n\tcrossfade,\n\tdraw,\n\tfade,\n\tfly,\n\tscale,\n\tslide\n} from 'svelte/transition';\n```\n\n## blur\n\nAnimates a `blur` filter alongside an element's opacity.\n\n<div class=\"ts-block\">\n\n```dts\nfunction blur(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tamount,\n\t\topacity\n\t}?: BlurParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## crossfade\n\nThe `crossfade` function creates a pair of [transitions](/docs/svelte/transition) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.\n\n<div class=\"ts-block\">\n\n```dts\nfunction crossfade({\n\tfallback,\n\t...defaults\n}: CrossfadeParams & {\n\tfallback?: (\n\t\tnode: Element,\n\t\tparams: CrossfadeParams,\n\t\tintro: boolean\n\t) => TransitionConfig;\n}): [\n\t(\n\t\tnode: any,\n\t\tparams: CrossfadeParams & {\n\t\t\tkey: any;\n\t\t}\n\t) => () => TransitionConfig,\n\t(\n\t\tnode: any,\n\t\tparams: CrossfadeParams & {\n\t\t\tkey: any;\n\t\t}\n\t) => () => TransitionConfig\n];\n```\n\n</div>\n\n\n\n## draw\n\nAnimates the stroke of an SVG element, like a snake in a tube. `in` transitions begin with the path invisible and draw the path to the screen over time. `out` transitions start in a visible state and gradually erase the path. `draw` only works with elements that have a `getTotalLength` method, like `<path>` and `<polyline>`.\n\n<div class=\"ts-block\">\n\n```dts\nfunction draw(\n\tnode: SVGElement & {\n\t\tgetTotalLength(): number;\n\t},\n\t{\n\t\tdelay,\n\t\tspeed,\n\t\tduration,\n\t\teasing\n\t}?: DrawParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## fade\n\nAnimates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions.\n\n<div class=\"ts-block\">\n\n```dts\nfunction fade(\n\tnode: Element,\n\t{ delay, duration, easing }?: FadeParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## fly\n\nAnimates the x and y positions and the opacity of an element. `in` transitions animate from the provided values, passed as parameters to the element's default values. `out` transitions animate from the element's default values to the provided values.\n\n<div class=\"ts-block\">\n\n```dts\nfunction fly(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tx,\n\t\ty,\n\t\topacity\n\t}?: FlyParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## scale\n\nAnimates the opacity and scale of an element. `in` transitions animate from the provided values, passed as parameters, to an element's current (default) values. `out` transitions animate from an element's default values to the provided values.\n\n<div class=\"ts-block\">\n\n```dts\nfunction scale(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\tstart,\n\t\topacity\n\t}?: ScaleParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## slide\n\nSlides an element in and out.\n\n<div class=\"ts-block\">\n\n```dts\nfunction slide(\n\tnode: Element,\n\t{\n\t\tdelay,\n\t\tduration,\n\t\teasing,\n\t\taxis\n\t}?: SlideParams | undefined\n): TransitionConfig;\n```\n\n</div>\n\n\n\n## BlurParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface BlurParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\namount?: number | string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nopacity?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## CrossfadeParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface CrossfadeParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number | ((len: number) => number);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## DrawParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface DrawParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nspeed?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number | ((len: number) => number);\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## EasingFunction\n\n<div class=\"ts-block\">\n\n```dts\ntype EasingFunction = (t: number) => number;\n```\n\n</div>\n\n## FadeParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface FadeParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## FlyParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface FlyParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nx?: number | string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ny?: number | string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nopacity?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## ScaleParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface ScaleParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nstart?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nopacity?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## SlideParams\n\n<div class=\"ts-block\">\n\n```dts\ninterface SlideParams {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\naxis?: 'x' | 'y';\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>\n\n## TransitionConfig\n\n<div class=\"ts-block\">\n\n```dts\ninterface TransitionConfig {/*…*/}\n```\n\n<div class=\"ts-block-property\">\n\n```dts\ndelay?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\nduration?: number;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\neasing?: EasingFunction;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ncss?: (t: number, u: number) => string;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div>\n\n<div class=\"ts-block-property\">\n\n```dts\ntick?: (t: number, u: number) => void;\n```\n\n<div class=\"ts-block-property-details\"></div>\n</div></div>",
+		"svelte/compiler-errors": "<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### animation_duplicate\n\n```\nAn element can only have one 'animate' directive\n```\n\n### animation_invalid_placement\n\n```\nAn element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block\n```\n\n### animation_missing_key\n\n```\nAn element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block?\n```\n\n### attribute_contenteditable_dynamic\n\n```\n'contenteditable' attribute cannot be dynamic if element uses two-way binding\n```\n\n### attribute_contenteditable_missing\n\n```\n'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings\n```\n\n### attribute_duplicate\n\n```\nAttributes need to be unique\n```\n\n### attribute_empty_shorthand\n\n```\nAttribute shorthand cannot be empty\n```\n\n### attribute_invalid_event_handler\n\n```\nEvent attribute must be a JavaScript expression, not a string\n```\n\n### attribute_invalid_multiple\n\n```\n'multiple' attribute must be static if select uses two-way binding\n```\n\n### attribute_invalid_name\n\n```\n'%name%' is not a valid attribute name\n```\n\n### attribute_invalid_sequence_expression\n\n```\nSequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses\n```\n\n### attribute_invalid_type\n\n```\n'type' attribute must be a static text value if input uses two-way binding\n```\n\n### attribute_unquoted_sequence\n\n```\nAttribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression\n```\n\n### bind_group_invalid_expression\n\n```\n`bind:group` can only bind to an Identifier or MemberExpression\n```\n\n### bind_group_invalid_snippet_parameter\n\n```\nCannot `bind:group` to a snippet parameter\n```\n\n### bind_invalid_expression\n\n```\nCan only bind to an Identifier or MemberExpression or a `{get, set}` pair\n```\n\n### bind_invalid_name\n\n```\n`bind:%name%` is not a valid binding\n```\n\n```\n`bind:%name%` is not a valid binding. %explanation%\n```\n\n### bind_invalid_parens\n\n```\n`bind:%name%={get, set}` must not have surrounding parentheses\n```\n\n### bind_invalid_target\n\n```\n`bind:%name%` can only be used with %elements%\n```\n\n### bind_invalid_value\n\n```\nCan only bind to state or props\n```\n\n### bindable_invalid_location\n\n```\n`$bindable()` can only be used inside a `$props()` declaration\n```\n\n### block_duplicate_clause\n\n```\n%name% cannot appear more than once within a block\n```\n\n### block_invalid_continuation_placement\n\n```\n{:...} block is invalid at this position (did you forget to close the preceding element or block?)\n```\n\n### block_invalid_elseif\n\n```\n'elseif' should be 'else if'\n```\n\n### block_invalid_placement\n\n```\n{#%name% ...} block cannot be %location%\n```\n\n### block_unclosed\n\n```\nBlock was left open\n```\n\n### block_unexpected_character\n\n```\nExpected a `%character%` character immediately following the opening bracket\n```\n\n### block_unexpected_close\n\n```\nUnexpected block closing tag\n```\n\n### component_invalid_directive\n\n```\nThis type of directive is not valid on components\n```\n\n### const_tag_cycle\n\n```\nCyclical dependency detected: %cycle%\n```\n\n### const_tag_invalid_expression\n\n```\n{@const ...} must consist of a single variable declaration\n```\n\n### const_tag_invalid_placement\n\n```\n`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`\n```\n\n### const_tag_invalid_reference\n\n```\nThe `{@const %name% = ...}` declaration is not available in this snippet \n```\n\nThe following is an error:\n\n```svelte\n<svelte:boundary>\n    {@const foo = 'bar'}\n\n    {#snippet failed()}\n        {foo}\n    {/snippet}\n</svelte:boundary>\n```\n\nHere, `foo` is not available inside `failed`. The top level code inside `<svelte:boundary>` becomes part of the implicit `children` snippet, in other words the above code is equivalent to this:\n\n```svelte\n<svelte:boundary>\n    {#snippet children()}\n        {@const foo = 'bar'}\n    {/snippet}\n\n    {#snippet failed()}\n        {foo}\n    {/snippet}\n</svelte:boundary>\n```\n\nThe same applies to components:\n\n```svelte\n<Component>\n    {@const foo = 'bar'}\n\n    {#snippet someProp()}\n        <!-- error -->\n        {foo}\n    {/snippet}\n</Component>\n```\n\n### constant_assignment\n\n```\nCannot assign to %thing%\n```\n\n### constant_binding\n\n```\nCannot bind to %thing%\n```\n\n### css_empty_declaration\n\n```\nDeclaration cannot be empty\n```\n\n### css_expected_identifier\n\n```\nExpected a valid CSS identifier\n```\n\n### css_global_block_invalid_combinator\n\n```\nA `:global` selector cannot follow a `%name%` combinator\n```\n\n### css_global_block_invalid_declaration\n\n```\nA top-level `:global {...}` block can only contain rules, not declarations\n```\n\n### css_global_block_invalid_list\n\n```\nA `:global` selector cannot be part of a selector list with entries that don't contain `:global`\n```\n\nThe following CSS is invalid:\n\n```css\n:global, x {\n    y {\n        color: red;\n    }\n}\n```\n\nThis is mixing a `:global` block, which means \"everything in here is unscoped\", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors:\n\n```css\n:global {\n    y {\n        color: red;\n    }\n}\n\nx y {\n    color: red;\n}\n```\n\n### css_global_block_invalid_modifier\n\n```\nA `:global` selector cannot modify an existing selector\n```\n\n### css_global_block_invalid_modifier_start\n\n```\nA `:global` selector can only be modified if it is a descendant of other selectors\n```\n\n### css_global_block_invalid_placement\n\n```\nA `:global` selector cannot be inside a pseudoclass\n```\n\n### css_global_invalid_placement\n\n```\n`:global(...)` can be at the start or end of a selector sequence, but not in the middle\n```\n\n### css_global_invalid_selector\n\n```\n`:global(...)` must contain exactly one selector\n```\n\n### css_global_invalid_selector_list\n\n```\n`:global(...)` must not contain type or universal selectors when used in a compound selector\n```\n\n### css_nesting_selector_invalid_placement\n\n```\nNesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`\n```\n\n### css_selector_invalid\n\n```\nInvalid selector\n```\n\n### css_type_selector_invalid_placement\n\n```\n`:global(...)` must not be followed by a type selector\n```\n\n### debug_tag_invalid_arguments\n\n```\n{@debug ...} arguments must be identifiers, not arbitrary expressions\n```\n\n### declaration_duplicate\n\n```\n`%name%` has already been declared\n```\n\n### declaration_duplicate_module_import\n\n```\nCannot declare a variable with the same name as an import inside `<script module>`\n```\n\n### derived_invalid_export\n\n```\nCannot export derived state from a module. To expose the current derived value, export a function returning its value\n```\n\n### directive_invalid_value\n\n```\nDirective value must be a JavaScript expression enclosed in curly braces\n```\n\n### directive_missing_name\n\n```\n`%type%` name cannot be empty\n```\n\n### dollar_binding_invalid\n\n```\nThe $ name is reserved, and cannot be used for variables and imports\n```\n\n### dollar_prefix_invalid\n\n```\nThe $ prefix is reserved, and cannot be used for variables and imports\n```\n\n### duplicate_class_field\n\n```\n`%name%` has already been declared\n```\n\n### each_item_invalid_assignment\n\n```\nCannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)\n```\n\nIn legacy mode, it was possible to reassign or bind to the each block argument itself:\n\n```svelte\n<script>\n\tlet array = [1, 2, 3];\n</script>\n\n{#each array as entry}\n\t<!-- reassignment -->\n\t<button on:click={() => entry = 4}>change</button>\n\n\t<!-- binding -->\n\t<input bind:value={entry}>\n{/each}\n```\n\nThis turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead:\n\n```svelte\n<script>\n\tlet array = $state([1, 2, 3]);\n</script>\n\n{#each array as entry, i}\n\t<!-- reassignment -->\n\t<button onclick={() => array[i] = 4}>change</button>\n\n\t<!-- binding -->\n\t<input bind:value={array[i]}>\n{/each}\n```\n\n### effect_invalid_placement\n\n```\n`$effect()` can only be used as an expression statement\n```\n\n### element_invalid_closing_tag\n\n```\n`</%name%>` attempted to close an element that was not open\n```\n\n### element_invalid_closing_tag_autoclosed\n\n```\n`</%name%>` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`)\n```\n\n### element_unclosed\n\n```\n`<%name%>` was left open\n```\n\n### event_handler_invalid_component_modifier\n\n```\nEvent modifiers other than 'once' can only be used on DOM elements\n```\n\n### event_handler_invalid_modifier\n\n```\nValid event modifiers are %list%\n```\n\n### event_handler_invalid_modifier_combination\n\n```\nThe '%modifier1%' and '%modifier2%' modifiers cannot be used together\n```\n\n### expected_attribute_value\n\n```\nExpected attribute value\n```\n\n### expected_block_type\n\n```\nExpected 'if', 'each', 'await', 'key' or 'snippet'\n```\n\n### expected_identifier\n\n```\nExpected an identifier\n```\n\n### expected_pattern\n\n```\nExpected identifier or destructure pattern\n```\n\n### expected_token\n\n```\nExpected token %token%\n```\n\n### expected_whitespace\n\n```\nExpected whitespace\n```\n\n### experimental_async\n\n```\nCannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`\n```\n\n### export_undefined\n\n```\n`%name%` is not defined\n```\n\n### global_reference_invalid\n\n```\n`%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`\n```\n\n### host_invalid_placement\n\n```\n`$host()` can only be used inside custom element component instances\n```\n\n### illegal_element_attribute\n\n```\n`<%name%>` does not support non-event attributes or spread attributes\n```\n\n### import_svelte_internal_forbidden\n\n```\nImports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case\n```\n\n### inspect_trace_generator\n\n```\n`$inspect.trace(...)` cannot be used inside a generator function\n```\n\n### inspect_trace_invalid_placement\n\n```\n`$inspect.trace(...)` must be the first statement of a function body\n```\n\n### invalid_arguments_usage\n\n```\nThe arguments keyword cannot be used within the template or at the top level of a component\n```\n\n### js_parse_error\n\n```\n%message%\n```\n\n### legacy_await_invalid\n\n```\nCannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode\n```\n\n### legacy_export_invalid\n\n```\nCannot use `export let` in runes mode — use `$props()` instead\n```\n\n### legacy_props_invalid\n\n```\nCannot use `$$props` in runes mode\n```\n\n### legacy_reactive_statement_invalid\n\n```\n`$:` is not allowed in runes mode, use `$derived` or `$effect` instead\n```\n\n### legacy_rest_props_invalid\n\n```\nCannot use `$$restProps` in runes mode\n```\n\n### let_directive_invalid_placement\n\n```\n`let:` directive at invalid position\n```\n\n### mixed_event_handler_syntaxes\n\n```\nMixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax\n```\n\n### module_illegal_default_export\n\n```\nA component cannot have a default export\n```\n\n### node_invalid_placement\n\n```\n%message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.\n```\n\nHTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:\n\n- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)\n- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)\n- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)\n\n### options_invalid_value\n\n```\nInvalid compiler option: %details%\n```\n\n### options_removed\n\n```\nInvalid compiler option: %details%\n```\n\n### options_unrecognised\n\n```\nUnrecognised compiler option %keypath%\n```\n\n### props_duplicate\n\n```\nCannot use `%rune%()` more than once\n```\n\n### props_id_invalid_placement\n\n```\n`$props.id()` can only be used at the top level of components as a variable declaration initializer\n```\n\n### props_illegal_name\n\n```\nDeclaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals)\n```\n\n### props_invalid_identifier\n\n```\n`$props()` can only be used with an object destructuring pattern\n```\n\n### props_invalid_pattern\n\n```\n`$props()` assignment must not contain nested properties or computed keys\n```\n\n### props_invalid_placement\n\n```\n`$props()` can only be used at the top level of components as a variable declaration initializer\n```\n\n### reactive_declaration_cycle\n\n```\nCyclical dependency detected: %cycle%\n```\n\n### render_tag_invalid_call_expression\n\n```\nCalling a snippet function using apply, bind or call is not allowed\n```\n\n### render_tag_invalid_expression\n\n```\n`{@render ...}` tags can only contain call expressions\n```\n\n### render_tag_invalid_spread_argument\n\n```\ncannot use spread arguments in `{@render ...}` tags\n```\n\n### rune_invalid_arguments\n\n```\n`%rune%` cannot be called with arguments\n```\n\n### rune_invalid_arguments_length\n\n```\n`%rune%` must be called with %args%\n```\n\n### rune_invalid_computed_property\n\n```\nCannot access a computed property of a rune\n```\n\n### rune_invalid_name\n\n```\n`%name%` is not a valid rune\n```\n\n### rune_invalid_spread\n\n```\n`%rune%` cannot be called with a spread argument\n```\n\n### rune_invalid_usage\n\n```\nCannot use `%rune%` rune in non-runes mode\n```\n\n### rune_missing_parentheses\n\n```\nCannot use rune without parentheses\n```\n\n### rune_removed\n\n```\nThe `%name%` rune has been removed\n```\n\n### rune_renamed\n\n```\n`%name%` is now `%replacement%`\n```\n\n### runes_mode_invalid_import\n\n```\n%name% cannot be used in runes mode\n```\n\n### script_duplicate\n\n```\nA component can have a single top-level `<script>` element and/or a single top-level `<script module>` element\n```\n\n### script_invalid_attribute_value\n\n```\nIf the `%name%` attribute is supplied, it must be a boolean attribute\n```\n\n### script_invalid_context\n\n```\nIf the context attribute is supplied, its value must be \"module\"\n```\n\n### script_reserved_attribute\n\n```\nThe `%name%` attribute is reserved and cannot be used\n```\n\n### slot_attribute_duplicate\n\n```\nDuplicate slot name '%name%' in <%component%>\n```\n\n### slot_attribute_invalid\n\n```\nslot attribute must be a static value\n```\n\n### slot_attribute_invalid_placement\n\n```\nElement with a slot='...' attribute must be a child of a component or a descendant of a custom element\n```\n\n### slot_default_duplicate\n\n```\nFound default slot content alongside an explicit slot=\"default\"\n```\n\n### slot_element_invalid_attribute\n\n```\n`<slot>` can only receive attributes and (optionally) let directives\n```\n\n### slot_element_invalid_name\n\n```\nslot attribute must be a static value\n```\n\n### slot_element_invalid_name_default\n\n```\n`default` is a reserved word — it cannot be used as a slot name\n```\n\n### slot_snippet_conflict\n\n```\nCannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migrate towards `{@render ...}` tags completely\n```\n\n### snippet_conflict\n\n```\nCannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block\n```\n\n### snippet_invalid_export\n\n```\nAn exported snippet can only reference things declared in a `<script module>`, or other exportable snippets\n```\n\nIt's possible to export a snippet from a `<script module>` block, but only if it doesn't reference anything defined inside a non-module-level `<script>`. For example you can't do this...\n\n```svelte\n<script module>\n\texport { greeting };\n</script>\n\n<script>\n\tlet message = 'hello';\n</script>\n\n{#snippet greeting(name)}\n\t<p>{message} {name}!</p>\n{/snippet}\n```\n\n...because `greeting` references `message`, which is defined in the second `<script>`.\n\n### snippet_invalid_rest_parameter\n\n```\nSnippets do not support rest parameters; use an array instead\n```\n\n### snippet_parameter_assignment\n\n```\nCannot reassign or bind to snippet parameter\n```\n\n### snippet_shadowing_prop\n\n```\nThis snippet is shadowing the prop `%prop%` with the same name\n```\n\n### state_field_duplicate\n\n```\n`%name%` has already been declared on this class\n```\n\nAn assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...\n\n```js\nclass Counter {\n\tcount = $state(0);\n}\n```\n\n...or inside the constructor...\n\n```js\nclass Counter {\n\tconstructor() {\n\t\tthis.count = $state(0);\n\t}\n}\n```\n\n...but it can only happen once.\n\n### state_field_invalid_assignment\n\n```\nCannot assign to a state field before its declaration\n```\n\n### state_invalid_export\n\n```\nCannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties\n```\n\n### state_invalid_placement\n\n```\n`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.\n```\n\n### store_invalid_scoped_subscription\n\n```\nCannot subscribe to stores that are not declared at the top level of the component\n```\n\n### store_invalid_subscription\n\n```\nCannot reference store value inside `<script module>`\n```\n\n### store_invalid_subscription_module\n\n```\nCannot reference store value outside a `.svelte` file\n```\n\nUsing a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.\n\n### style_directive_invalid_modifier\n\n```\n`style:` directive can only use the `important` modifier\n```\n\n### style_duplicate\n\n```\nA component can have a single top-level `<style>` element\n```\n\n### svelte_body_illegal_attribute\n\n```\n`<svelte:body>` does not support non-event attributes or spread attributes\n```\n\n### svelte_boundary_invalid_attribute\n\n```\nValid attributes on `<svelte:boundary>` are `onerror` and `failed`\n```\n\n### svelte_boundary_invalid_attribute_value\n\n```\nAttribute value must be a non-string expression\n```\n\n### svelte_component_invalid_this\n\n```\nInvalid component definition — must be an `{expression}`\n```\n\n### svelte_component_missing_this\n\n```\n`<svelte:component>` must have a 'this' attribute\n```\n\n### svelte_element_missing_this\n\n```\n`<svelte:element>` must have a 'this' attribute with a value\n```\n\n### svelte_fragment_invalid_attribute\n\n```\n`<svelte:fragment>` can only have a slot attribute and (optionally) a let: directive\n```\n\n### svelte_fragment_invalid_placement\n\n```\n`<svelte:fragment>` must be the direct child of a component\n```\n\n### svelte_head_illegal_attribute\n\n```\n`<svelte:head>` cannot have attributes nor directives\n```\n\n### svelte_meta_duplicate\n\n```\nA component can only have one `<%name%>` element\n```\n\n### svelte_meta_invalid_content\n\n```\n<%name%> cannot have children\n```\n\n### svelte_meta_invalid_placement\n\n```\n`<%name%>` tags cannot be inside elements or blocks\n```\n\n### svelte_meta_invalid_tag\n\n```\nValid `<svelte:...>` tag names are %list%\n```\n\n### svelte_options_deprecated_tag\n\n```\n\"tag\" option is deprecated — use \"customElement\" instead\n```\n\n### svelte_options_invalid_attribute\n\n```\n`<svelte:options>` can only receive static attributes\n```\n\n### svelte_options_invalid_attribute_value\n\n```\nValue must be %list%, if specified\n```\n\n### svelte_options_invalid_customelement\n\n```\n\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: \"open\" | \"none\"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }\n```\n\n### svelte_options_invalid_customelement_props\n\n```\n\"props\" must be a statically analyzable object literal of the form \"{ [key: string]: { attribute?: string; reflect?: boolean; type?: \"String\" | \"Boolean\" | \"Number\" | \"Array\" | \"Object\" }\"\n```\n\n### svelte_options_invalid_customelement_shadow\n\n```\n\"shadow\" must be either \"open\" or \"none\"\n```\n\n### svelte_options_invalid_tagname\n\n```\nTag name must be lowercase and hyphenated\n```\n\nSee https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names\n\n### svelte_options_reserved_tagname\n\n```\nTag name is reserved\n```\n\nSee https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names\n\n### svelte_options_unknown_attribute\n\n```\n`<svelte:options>` unknown attribute '%name%'\n```\n\n### svelte_self_invalid_placement\n\n```\n`<svelte:self>` components can only exist inside `{#if}` blocks, `{#each}` blocks, `{#snippet}` blocks or slots passed to components\n```\n\n### tag_invalid_name\n\n```\nExpected a valid element or component name. Components must have a valid variable name or dot notation expression\n```\n\n### tag_invalid_placement\n\n```\n{@%name% ...} tag cannot be %location%\n```\n\n### textarea_invalid_content\n\n```\nA `<textarea>` can have either a value attribute or (equivalently) child content, but not both\n```\n\n### title_illegal_attribute\n\n```\n`<title>` cannot have attributes nor directives\n```\n\n### title_invalid_content\n\n```\n`<title>` can only contain text and {tags}\n```\n\n### transition_conflict\n\n```\nCannot use `%type%:` alongside existing `%existing%:` directive\n```\n\n### transition_duplicate\n\n```\nCannot use multiple `%type%:` directives on a single element\n```\n\n### typescript_invalid_feature\n\n```\nTypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)\n```\n\n### unexpected_eof\n\n```\nUnexpected end of input\n```\n\n### unexpected_reserved_word\n\n```\n'%word%' is a reserved word in JavaScript and cannot be used here\n```\n\n### unterminated_string_constant\n\n```\nUnterminated string constant\n```\n\n### void_element_invalid_content\n\n```\nVoid elements cannot have children or closing tags\n```",
+		"svelte/compiler-warnings": "Svelte warns you at compile time if it catches potential mistakes, such as writing inaccessible markup.\n\nSome warnings may be incorrect in your concrete use case. You can disable such false positives by placing a `<!-- svelte-ignore <code> -->` comment above the line that causes the warning. Example:\n\n```svelte\n<!-- svelte-ignore a11y_autofocus -->\n<input autofocus />\n```\n\nYou can list multiple rules in a single comment (separated by commas), and add an explanatory note (in parentheses) alongside them:\n\n```svelte\n<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->\n<div onclick>...</div>\n```\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### a11y_accesskey\n\n```\nAvoid using accesskey\n```\n\nEnforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: Avoid using accesskey -->\n<div accesskey=\"z\"></div>\n```\n\n### a11y_aria_activedescendant_has_tabindex\n\n```\nAn element with an aria-activedescendant attribute should have a tabindex value\n```\n\nAn element with `aria-activedescendant` must be tabbable, so it must either have an inherent `tabindex` or declare `tabindex` as an attribute.\n\n```svelte\n<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->\n<div aria-activedescendant=\"some-id\"></div>\n```\n\n### a11y_aria_attributes\n\n```\n`<%name%>` should not have aria-* attributes\n```\n\nCertain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.\n\n```svelte\n<!-- A11y: <meta> should not have aria-* attributes -->\n<meta aria-hidden=\"false\" />\n```\n\n### a11y_autocomplete_valid\n\n```\n'%value%' is an invalid value for 'autocomplete' on `<input type=\"%type%\">`\n```\n\n### a11y_autofocus\n\n```\nAvoid using autofocus\n```\n\nEnforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.\n\n```svelte\n<!-- A11y: Avoid using autofocus -->\n<input autofocus />\n```\n\n### a11y_click_events_have_key_events\n\n```\nVisible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate\n```\n\nEnforce that visible, non-interactive elements with an `onclick` event are accompanied by a keyboard event handler.\n\nUsers should first consider whether an interactive element might be more appropriate such as a `<button type=\"button\">` element for actions or `<a>` element for navigations. These elements are more semantically meaningful and will have built-in key handling. E.g. `Space` and `Enter` will trigger a `<button>` and `Enter` will trigger an `<a>` element.\n\nIf a non-interactive element is required then `onclick` should be accompanied by an `onkeyup` or `onkeydown` handler that enables the user to perform equivalent actions via the keyboard. In order for the user to be able to trigger a key press, the element will also need to be focusable by adding a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). While an `onkeypress` handler will also silence this warning, it should be noted that the `keypress` event is deprecated.\n\n```svelte\n<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. -->\n<div onclick={() => {}}></div>\n```\n\nCoding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.\n\n### a11y_consider_explicit_label\n\n```\nButtons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute\n```\n\n### a11y_distracting_elements\n\n```\nAvoid `<%name%>` elements\n```\n\nEnforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.\n\nThe following elements are visually distracting: `<marquee>` and `<blink>`.\n\n```svelte\n<!-- A11y: Avoid <marquee> elements -->\n<marquee></marquee>\n```\n\n### a11y_figcaption_index\n\n```\n`<figcaption>` must be first or last child of `<figure>`\n```\n\n### a11y_figcaption_parent\n\n```\n`<figcaption>` must be an immediate child of `<figure>`\n```\n\nEnforce that certain DOM elements have the correct structure.\n\n```svelte\n<!-- A11y: <figcaption> must be an immediate child of <figure> -->\n<div>\n\t<figcaption>Image caption</figcaption>\n</div>\n```\n\n### a11y_hidden\n\n```\n`<%name%>` element should not be hidden\n```\n\nCertain DOM elements are useful for screen reader navigation and should not be hidden.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: <h2> element should not be hidden -->\n<h2 aria-hidden=\"true\">invisible header</h2>\n```\n\n### a11y_img_redundant_alt\n\n```\nScreenreaders already announce `<img>` elements as an image\n```\n\nEnforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_.\n\n```svelte\n<img src=\"foo\" alt=\"Foo eating a sandwich.\" />\n\n<!-- aria-hidden, won't be announced by screen reader -->\n<img src=\"bar\" aria-hidden=\"true\" alt=\"Picture of me taking a photo of an image\" />\n\n<!-- A11y: Screen readers already announce <img> elements as an image. -->\n<img src=\"foo\" alt=\"Photo of foo being weird.\" />\n\n<!-- A11y: Screen readers already announce <img> elements as an image. -->\n<img src=\"bar\" alt=\"Image of me at a bar!\" />\n\n<!-- A11y: Screen readers already announce <img> elements as an image. -->\n<img src=\"foo\" alt=\"Picture of baz fixing a bug.\" />\n```\n\n### a11y_incorrect_aria_attribute_type\n\n```\nThe value of '%attribute%' must be a %type%\n```\n\nEnforce that only the correct type of value is used for aria attributes. For example, `aria-hidden`\nshould only receive a boolean.\n\n```svelte\n<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->\n<div aria-hidden=\"yes\"></div>\n```\n\n### a11y_incorrect_aria_attribute_type_boolean\n\n```\nThe value of '%attribute%' must be either 'true' or 'false'. It cannot be empty\n```\n\n### a11y_incorrect_aria_attribute_type_id\n\n```\nThe value of '%attribute%' must be a string that represents a DOM element ID\n```\n\n### a11y_incorrect_aria_attribute_type_idlist\n\n```\nThe value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs\n```\n\n### a11y_incorrect_aria_attribute_type_integer\n\n```\nThe value of '%attribute%' must be an integer\n```\n\n### a11y_incorrect_aria_attribute_type_token\n\n```\nThe value of '%attribute%' must be exactly one of %values%\n```\n\n### a11y_incorrect_aria_attribute_type_tokenlist\n\n```\nThe value of '%attribute%' must be a space-separated list of one or more of %values%\n```\n\n### a11y_incorrect_aria_attribute_type_tristate\n\n```\nThe value of '%attribute%' must be exactly one of true, false, or mixed\n```\n\n### a11y_interactive_supports_focus\n\n```\nElements with the '%role%' interactive role must have a tabindex value\n```\n\nEnforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.\n\n```svelte\n<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->\n<div role=\"button\" onkeypress={() => {}} />\n```\n\n### a11y_invalid_attribute\n\n```\n'%href_value%' is not a valid %href_attribute% attribute\n```\n\nEnforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.\n\n```svelte\n<!-- A11y: '' is not a valid href attribute -->\n<a href=\"\">invalid</a>\n```\n\n### a11y_label_has_associated_control\n\n```\nA form label must be associated with a control\n```\n\nEnforce that a label tag has a text label and an associated control.\n\nThere are two supported ways to associate a label with a control:\n\n- Wrapping a control in a label tag.\n- Adding `for` to a label and assigning it the ID of an input on the page.\n\n```svelte\n<label for=\"id\">B</label>\n\n<label>C <input type=\"text\" /></label>\n\n<!-- A11y: A form label must be associated with a control. -->\n<label>A</label>\n```\n\n### a11y_media_has_caption\n\n```\n`<video>` elements must have a `<track kind=\"captions\">`\n```\n\nProviding captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).\n\nThe captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute.\n\n```svelte\n<video><track kind=\"captions\" /></video>\n\n<audio muted></audio>\n\n<!-- A11y: Media elements must have a <track kind=\\\"captions\\\"> -->\n<video></video>\n\n<!-- A11y: Media elements must have a <track kind=\\\"captions\\\"> -->\n<video><track /></video>\n```\n\n### a11y_misplaced_role\n\n```\n`<%name%>` should not have role attribute\n```\n\nCertain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props.\n\n```svelte\n<!-- A11y: <meta> should not have role attribute -->\n<meta role=\"tooltip\" />\n```\n\n### a11y_misplaced_scope\n\n```\nThe scope attribute should only be used with `<th>` elements\n```\n\nThe scope attribute should only be used on `<th>` elements.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: The scope attribute should only be used with <th> elements -->\n<div scope=\"row\" />\n```\n\n### a11y_missing_attribute\n\n```\n`<%name%>` element should have %article% %sequence% attribute\n```\n\nEnforce that attributes required for accessibility are present on an element. This includes the following checks:\n\n- `<a>` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697))\n- `<area>` should have alt, aria-label, or aria-labelledby\n- `<html>` should have lang\n- `<iframe>` should have title\n- `<img>` should have alt\n- `<object>` should have title, aria-label, or aria-labelledby\n- `<input type=\"image\">` should have alt, aria-label, or aria-labelledby\n\n```svelte\n<!-- A11y: <input type=\\\"image\\\"> element should have an alt, aria-label or aria-labelledby attribute -->\n<input type=\"image\" />\n\n<!-- A11y: <html> element should have a lang attribute -->\n<html></html>\n\n<!-- A11y: <a> element should have an href attribute -->\n<a>text</a>\n```\n\n### a11y_missing_content\n\n```\n`<%name%>` element should contain text\n```\n\nEnforce that heading elements (`h1`, `h2`, etc.) and anchors have content and that the content is accessible to screen readers\n\n```svelte\n<!-- A11y: <a> element should have child content -->\n<a href=\"/foo\"></a>\n\n<!-- A11y: <h1> element should have child content -->\n<h1></h1>\n```\n\n### a11y_mouse_events_have_key_events\n\n```\n'%event%' event must be accompanied by '%accompanied_by%' event\n```\n\nEnforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` and `onblur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.\n\n```svelte\n<!-- A11y: onmouseover must be accompanied by onfocus -->\n<div onmouseover={handleMouseover} />\n\n<!-- A11y: onmouseout must be accompanied by onblur -->\n<div onmouseout={handleMouseout} />\n```\n\n### a11y_no_abstract_role\n\n```\nAbstract role '%role%' is forbidden\n```\n\n### a11y_no_interactive_element_to_noninteractive_role\n\n```\n`<%element%>` cannot have role '%role%'\n```\n\n[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.\n\n```svelte\n<!-- A11y: <textarea> cannot have role 'listitem' -->\n<textarea role=\"listitem\"></textarea>\n```\n\n### a11y_no_noninteractive_element_interactions\n\n```\nNon-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners\n```\n\nA non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<p>`, `<img>`, `<li>`, `<ul>` and `<ol>`. Non-interactive [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.\n\n```sv\n<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->\n<li onclick={() => {}}></li>\n\n<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->\n<div role=\"listitem\" onclick={() => {}}></div>\n```\n\n### a11y_no_noninteractive_element_to_interactive_role\n\n```\nNon-interactive element `<%element%>` cannot have interactive role '%role%'\n```\n\n[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` and `textbox`.\n\n```svelte\n<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->\n<h3 role=\"searchbox\">Button</h3>\n```\n\n### a11y_no_noninteractive_tabindex\n\n```\nnoninteractive element cannot have nonnegative tabIndex value\n```\n\nTab key navigation should be limited to elements on the page that can be interacted with.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->\n<div tabindex=\"0\"></div>\n```\n\n### a11y_no_redundant_roles\n\n```\nRedundant role '%role%'\n```\n\nSome HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser [has no effect](https://www.w3.org/TR/using-aria/#aria-does-nothing) and is redundant.\n\n```svelte\n<!-- A11y: Redundant role 'button' -->\n<button role=\"button\">...</button>\n\n<!-- A11y: Redundant role 'img' -->\n<img role=\"img\" src=\"foo.jpg\" />\n```\n\n### a11y_no_static_element_interactions\n\n```\n`<%element%>` with a %handler% handler must have an ARIA role\n```\n\nElements like `<div>` with interactive handlers like `click` must have an ARIA role.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: <div> with click handler must have an ARIA role -->\n<div onclick={() => ''}></div>\n```\n\n### a11y_positive_tabindex\n\n```\nAvoid tabindex values above zero\n```\n\nAvoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: avoid tabindex values above zero -->\n<div tabindex=\"1\"></div>\n```\n\n### a11y_role_has_required_aria_props\n\n```\nElements with the ARIA role \"%role%\" must have the following attributes defined: %props%\n```\n\nElements with ARIA roles must have all required attributes for that role.\n\n```svelte\n<!-- A11y: A11y: Elements with the ARIA role \"checkbox\" must have the following attributes defined: \"aria-checked\" -->\n<span role=\"checkbox\" aria-labelledby=\"foo\" tabindex=\"0\"></span>\n```\n\n### a11y_role_supports_aria_props\n\n```\nThe attribute '%attribute%' is not supported by the role '%role%'\n```\n\nElements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.\n\n```svelte\n<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->\n<div role=\"link\" aria-multiline></div>\n\n<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->\n<li aria-required></li>\n```\n\n### a11y_role_supports_aria_props_implicit\n\n```\nThe attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`\n```\n\nElements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.\n\n```svelte\n<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->\n<div role=\"link\" aria-multiline></div>\n\n<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->\n<li aria-required></li>\n```\n\n### a11y_unknown_aria_attribute\n\n```\nUnknown aria attribute 'aria-%attribute%'\n```\n\n```\nUnknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?\n```\n\nEnforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).\n\n```svelte\n<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->\n<input type=\"image\" aria-labeledby=\"foo\" />\n```\n\n### a11y_unknown_role\n\n```\nUnknown role '%role%'\n```\n\n```\nUnknown role '%role%'. Did you mean '%suggestion%'?\n```\n\nElements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.\n\n<!-- prettier-ignore -->\n```svelte\n<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->\n<div role=\"toooltip\"></div>\n```\n\n### attribute_avoid_is\n\n```\nThe \"is\" attribute is not supported cross-browser and should be avoided\n```\n\n### attribute_global_event_reference\n\n```\nYou are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?\n```\n\n### attribute_illegal_colon\n\n```\nAttributes should not contain ':' characters to prevent ambiguity with Svelte directives\n```\n\n### attribute_invalid_property_name\n\n```\n'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?\n```\n\n### attribute_quoted\n\n```\nQuoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes\n```\n\n### bidirectional_control_characters\n\n```\nA bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences\n```\n\nBidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. See [trojansource.codes](https://trojansource.codes/) for more information.\n\n### bind_invalid_each_rest\n\n```\nThe rest operator (...) will create a new object and binding '%name%' with the original object will not work\n```\n\n### block_empty\n\n```\nEmpty block\n```\n\n### component_name_lowercase\n\n```\n`<%name%>` will be treated as an HTML element unless it begins with a capital letter\n```\n\n### css_unused_selector\n\n```\nUnused CSS selector \"%name%\"\n```\n\nSvelte traverses both the template and the `<style>` tag to find out which of the CSS selectors are not used within the template, so it can remove them.\n\nIn some situations a selector may target an element that is not 'visible' to the compiler, for example because it is part of an `{@html ...}` tag or you're overriding styles in a child component. In these cases, use [`:global`](/docs/svelte/global-styles) to preserve the selector as-is:\n\n```svelte\n<div class=\"post\">{@html content}</div>\n\n<style>\n  .post :global {\n    p {...}\n  }\n</style>\n```\n\n### custom_element_props_identifier\n\n```\nUsing a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.\n```\n\n### element_implicitly_closed\n\n```\nThis element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.\n```\n\nIn HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:\n\n```html\n<!-- this HTML... -->\n<p><p>hello</p>\n\n<!-- results in this DOM structure -->\n<p></p>\n<p>hello</p>\n```\n\nSimilarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.\n\n### element_invalid_self_closing_tag\n\n```\nSelf-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`\n```\n\nIn HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...\n\n```html\n<div>\n\t<span class=\"icon\" /> some text!\n</div>\n```\n\n...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:\n\n```html\n<div>\n\t<span class=\"icon\"> some text! </span>\n</div>\n```\n\nSome templating languages (including Svelte) will 'fix' HTML by turning `<span />` into `<span></span>`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, so Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.\n\nTo automate this, run the dedicated migration:\n\n```sh\nnpx sv migrate self-closing-tags\n```\n\nIn a future version of Svelte, self-closing tags may be upgraded from a warning to an error.\n\n### event_directive_deprecated\n\n```\nUsing `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead\n```\n\nSee [the migration guide](v5-migration-guide#Event-changes) for more info.\n\n### export_let_unused\n\n```\nComponent has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`\n```\n\n### legacy_code\n\n```\n`%code%` is no longer valid — please use `%suggestion%` instead\n```\n\n### legacy_component_creation\n\n```\nSvelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.\n```\n\nSee the [migration guide](v5-migration-guide#Components-are-no-longer-classes) for more info.\n\n### node_invalid_placement_ssr\n\n```\n%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning\n```\n\nHTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:\n\n- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)\n- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)\n- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)\n\nThis code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.\n\n### non_reactive_update\n\n```\n`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates\n```\n\nThis warning is thrown when the compiler detects the following:\n- a variable was declared without `$state` or `$state.raw`\n- the variable is reassigned\n- the variable is read in a reactive context\n\nIn this case, changing the value will not correctly trigger updates. Example:\n\n```svelte\n<script>\n\tlet reactive = $state('reactive');\n\tlet stale = 'stale';\n</script>\n\n<p>This value updates: {reactive}</p>\n<p>This value does not update: {stale}</p>\n\n<button onclick={() => {\n\tstale = 'updated';\n\treactive = 'updated';\n}}>update</button>\n```\n\nTo fix this, wrap your variable declaration with `$state`.\n\n### options_deprecated_accessors\n\n```\nThe `accessors` option has been deprecated. It will have no effect in runes mode\n```\n\n### options_deprecated_immutable\n\n```\nThe `immutable` option has been deprecated. It will have no effect in runes mode\n```\n\n### options_missing_custom_element\n\n```\nThe `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?\n```\n\n### options_removed_enable_sourcemap\n\n```\nThe `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them\n```\n\n### options_removed_hydratable\n\n```\nThe `hydratable` option has been removed. Svelte components are always hydratable now\n```\n\n### options_removed_loop_guard_timeout\n\n```\nThe `loopGuardTimeout` option has been removed\n```\n\n### options_renamed_ssr_dom\n\n```\n`generate: \"dom\"` and `generate: \"ssr\"` options have been renamed to \"client\" and \"server\" respectively\n```\n\n### perf_avoid_inline_class\n\n```\nAvoid 'new class' — instead, declare the class at the top level scope\n```\n\n### perf_avoid_nested_class\n\n```\nAvoid declaring classes below the top level scope\n```\n\n### reactive_declaration_invalid_placement\n\n```\nReactive declarations only exist at the top level of the instance script\n```\n\n### reactive_declaration_module_script_dependency\n\n```\nReassignments of module-level declarations will not cause reactive statements to update\n```\n\n### script_context_deprecated\n\n```\n`context=\"module\"` is deprecated, use the `module` attribute instead\n```\n\n```svelte\n<script ---context=\"module\"--- +++module+++>\n\tlet foo = 'bar';\n</script>\n```\n\n### script_unknown_attribute\n\n```\nUnrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it\n```\n\n### slot_element_deprecated\n\n```\nUsing `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead\n```\n\nSee [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info.\n\n### state_referenced_locally\n\n```\nThis reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?\n```\n\nThis warning is thrown when the compiler detects the following:\n\n- A reactive variable is declared\n- ...and later reassigned...\n- ...and referenced in the same scope\n\nThis 'breaks the link' to the original state declaration. For example, if you pass the state to a function, the function loses access to the state once it is reassigned:\n\n```svelte\n<!--- file: Parent.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\tlet count = $state(0);\n\n\t// warning: state_referenced_locally\n\tsetContext('count', count);\n</script>\n\n<button onclick={() => count++}>\n\tincrement\n</button>\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst count = getContext('count');\n</script>\n\n<!-- This will never update -->\n<p>The count is {count}</p>\n```\n\nTo fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping `count` in a function:\n\n```svelte\n<!--- file: Parent.svelte --->\n<script>\n\timport { setContext } from 'svelte';\n\n\tlet count = $state(0);\n\tsetContext('count', +++() => count+++);\n</script>\n\n<button onclick={() => count++}>\n\tincrement\n</button>\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\timport { getContext } from 'svelte';\n\n\tconst count = getContext('count');\n</script>\n\n<!-- This will update -->\n<p>The count is {+++count()+++}</p>\n```\n\nFor more info, see [Passing state into functions]($state#Passing-state-into-functions).\n\n### store_rune_conflict\n\n```\nIt looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity\n```\n\n### svelte_component_deprecated\n\n```\n`<svelte:component>` is deprecated in runes mode — components are dynamic by default\n```\n\nIn previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.\n\nIn Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.\n\nIn some cases `<object.property>` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.\n\nFor complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:\n\n<!-- prettier-ignore -->\n```svelte\n{#each items as item}\n\t---<svelte:component this={item.condition ? Y : Z} />---\n\t+++{@const Component = item.condition ? Y : Z}+++\n\t+++<Component />+++\n{/each}\n```\n\nA derived value may be used in other contexts:\n\n<!-- prettier-ignore -->\n```svelte\n<script>\n\t// ...\n\tlet condition = $state(false);\n\t+++const Component = $derived(condition ? Y : Z);+++\n</script>\n\n---<svelte:component this={condition ? Y : Z} />---\n+++<Component />+++\n```\n\n### svelte_element_invalid_this\n\n```\n`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte\n```\n\n### svelte_self_deprecated\n\n```\n`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead\n```\n\nSee [the note in the docs](legacy-svelte-self) for more info.\n\n### unknown_code\n\n```\n`%code%` is not a recognised code\n```\n\n```\n`%code%` is not a recognised code (did you mean `%suggestion%`?)\n```",
+		"svelte/runtime-errors": "## Client errors\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### async_derived_orphan\n\n```\nCannot create a `$derived(...)` with an `await` expression outside of an effect tree\n```\n\nIn Svelte there are two types of reaction — [`$derived`](/docs/svelte/$derived) and [`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run _lazily_ and can be [garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed.\n\nBecause of this, effects can only be created inside other effects (or [effect roots](/docs/svelte/$effect#$effect.root), such as the one that is created when you first mount a component) so that Svelte knows when to destroy them.\n\nSome sleight of hand occurs when a derived contains an `await` expression: Since waiting until we read `{await getPromise()}` to call `getPromise` would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we're using an effect, we can only create asynchronous deriveds inside another effect.\n\n### bind_invalid_checkbox_value\n\n```\nUsing `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead\n```\n\n### bind_invalid_export\n\n```\nComponent %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)\n```\n\n### bind_not_bindable\n\n```\nA component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`\n```\n\n### component_api_changed\n\n```\nCalling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5\n```\n\nSee the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.\n\n### component_api_invalid_new\n\n```\nAttempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.\n```\n\nSee the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.\n\n### derived_references_self\n\n```\nA derived value cannot reference itself recursively\n```\n\n### each_key_duplicate\n\n```\nKeyed each block has duplicate key at indexes %a% and %b%\n```\n\n```\nKeyed each block has duplicate key `%value%` at indexes %a% and %b%\n```\n\n### effect_in_teardown\n\n```\n`%rune%` cannot be used inside an effect cleanup function\n```\n\n### effect_in_unowned_derived\n\n```\nEffect cannot be created inside a `$derived` value that was not itself created inside an effect\n```\n\n### effect_orphan\n\n```\n`%rune%` can only be used inside an effect (e.g. during component initialisation)\n```\n\n### effect_pending_outside_reaction\n\n```\n`$effect.pending()` can only be called inside an effect or derived\n```\n\n### effect_update_depth_exceeded\n\n```\nMaximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state\n```\n\nIf an effect updates some state that it also depends on, it will re-run, potentially in a loop:\n\n```js\nlet count = $state(0);\n\n$effect(() => {\n\t// this both reads and writes `count`,\n\t// so will run in an infinite loop\n\tcount += 1;\n});\n```\n\n(Svelte intervenes before this can crash your browser tab.)\n\nThe same applies to array mutations, since these both read and write to the array:\n\n```js\nlet array = $state(['hello']);\n\n$effect(() => {\n\tarray.push('goodbye');\n});\n```\n\nNote that it's fine for an effect to re-run itself as long as it 'settles':\n\n```js\nlet array = ['a', 'b', 'c'];\n// ---cut---\n$effect(() => {\n\t// this is okay, because sorting an already-sorted array\n\t// won't result in a mutation\n\tarray.sort();\n});\n```\n\nOften when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really _do_ need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency.\n\n### flush_sync_in_effect\n\n```\nCannot use `flushSync` inside an effect\n```\n\nThe `flushSync()` function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change but _not_ inside an effect.\n\nThis restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.\n\n### get_abort_signal_outside_reaction\n\n```\n`getAbortSignal()` can only be called inside an effect or derived\n```\n\n### hydration_failed\n\n```\nFailed to hydrate the application\n```\n\n### invalid_snippet\n\n```\nCould not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`\n```\n\n### lifecycle_legacy_only\n\n```\n`%name%(...)` cannot be used in runes mode\n```\n\n### props_invalid_value\n\n```\nCannot do `bind:%key%={undefined}` when `%key%` has a fallback value\n```\n\n### props_rest_readonly\n\n```\nRest element properties of `$props()` such as `%property%` are readonly\n```\n\n### rune_outside_svelte\n\n```\nThe `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files\n```\n\n### set_context_after_init\n\n```\n`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression\n```\n\nThis restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.\n\n### state_descriptors_fixed\n\n```\nProperty descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.\n```\n\n### state_prototype_fixed\n\n```\nCannot set prototype of `$state` object\n```\n\n### state_unsafe_mutation\n\n```\nUpdating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`\n```\n\nThis error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:\n\n```svelte\n<script>\n\tlet count = $state(0);\n\n\tlet even = $state(true);\n\n\tlet odd = $derived.by(() => {\n\t\teven = count % 2 === 0;\n\t\treturn !even;\n\t});\n</script>\n\n<button onclick={() => count++}>{count}</button>\n\n<p>{count} is even: {even}</p>\n<p>{count} is odd: {odd}</p>\n```\n\nThis is forbidden because it introduces instability: if `<p>{count} is even: {even}</p>` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived:\n\n```js\nlet count = 0;\n// ---cut---\nlet even = $derived(count % 2 === 0);\nlet odd = $derived(!even);\n```\n\nIf side-effects are unavoidable, use [`$effect`]($effect) instead.\n\n### svelte_boundary_reset_onerror\n\n```\nA `<svelte:boundary>` `reset` function cannot be called while an error is still being handled\n```\n\nIf a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary) has an `onerror` function, it must not call the provided `reset` function synchronously since the boundary is still in a broken state. Typically, `reset()` is called later, once the error has been resolved.\n\nIf it's possible to resolve the error inside the `onerror` callback, you must at least wait for the boundary to settle before calling `reset()`, for example using [`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick):\n\n```svelte\n<svelte:boundary onerror={async (error, reset) => {\n\tfixTheError();\n\t+++await tick();+++\n\treset();\n}}>\n\n</svelte:boundary>\n```\n\n\n## Server errors\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### await_invalid\n\n```\nEncountered asynchronous work while rendering synchronously.\n```\n\nYou (or the framework you're using) called [`render(...)`](svelte-server#render) with a component containing an `await` expression. Either `await` the result of `render` or wrap the `await` (or the component containing it) in a [`<svelte:boundary>`](svelte-boundary) with a `pending` snippet.\n\n### html_deprecated\n\n```\nThe `html` property of server render results has been deprecated. Use `body` instead.\n```\n\n### lifecycle_function_unavailable\n\n```\n`%name%(...)` is not available on the server\n```\n\nCertain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.\n\n\n## Shared errors\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### invalid_default_snippet\n\n```\nCannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead\n```\n\nThis error would be thrown in a setup like this:\n\n```svelte\n<!--- file: Parent.svelte --->\n<List {items} let:entry>\n    <span>{entry}</span>\n</List>\n```\n\n```svelte\n<!--- file: List.svelte --->\n<script>\n    let { items, children } = $props();\n</script>\n\n<ul>\n    {#each items as item}\n        <li>{@render children(item)}</li>\n    {/each}\n</ul>\n```\n\nHere, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.\n\n### invalid_snippet_arguments\n\n```\nA snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`\n```\n\n### lifecycle_outside_component\n\n```\n`%name%(...)` can only be used during component initialisation\n```\n\nCertain lifecycle methods can only be used during component initialisation. To fix this, make sure you're invoking the method inside the _top level of the instance script_ of your component.\n\n```svelte\n<script>\n    import { onMount } from 'svelte';\n\n    function handleClick() {\n        // This is wrong\n        onMount(() => {})\n    }\n\n    // This is correct\n    onMount(() => {})\n</script>\n\n<button onclick={handleClick}>click me</button>\n```\n\n### snippet_without_render_tag\n\n```\nAttempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.\n```\n\nA component throwing this error will look something like this (`children` is not being rendered):\n\n```svelte\n<script>\n    let { children } = $props();\n</script>\n\n{children}\n```\n\n...or like this (a parent component is passing a snippet where a non-snippet value is expected):\n\n```svelte\n<!--- file: Parent.svelte --->\n<ChildComponent>\n  {#snippet label()}\n    <span>Hi!</span>\n  {/snippet}\n</ChildComponent>\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n  let { label } = $props();\n</script>\n\n<!-- This component doesn't expect a snippet, but the parent provided one -->\n<p>{label}</p>\n```\n\n### store_invalid_shape\n\n```\n`%name%` is not a store with a `subscribe` method\n```\n\n### svelte_element_invalid_this_value\n\n```\nThe `this` prop on `<svelte:element>` must be a string, if defined\n```",
+		"svelte/runtime-warnings": "## Client warnings\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### assignment_value_stale\n\n```\nAssignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.\n```\n\nGiven a case like this...\n\n```svelte\n<script>\n\tlet object = $state({ array: null });\n\n\tfunction add() {\n\t\t(object.array ??= []).push(object.array.length);\n\t}\n</script>\n\n<button onclick={add}>add</button>\n<p>items: {JSON.stringify(object.items)}</p>\n```\n\n...the array being pushed to when the button is first clicked is the `[]` on the right-hand side of the assignment, but the resulting value of `object.array` is an empty state proxy. As a result, the pushed value will be discarded.\n\nYou can fix this by separating it into two statements:\n\n```js\nlet object = { array: [0] };\n// ---cut---\nfunction add() {\n\tobject.array ??= [];\n\tobject.array.push(object.array.length);\n}\n```\n\n### await_reactivity_loss\n\n```\nDetected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await`\n```\n\nSvelte's signal-based reactivity works by tracking which bits of state are read when a template or `$derived(...)` expression executes. If an expression contains an `await`, Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...\n\n```js\nlet a = Promise.resolve(1);\nlet b = 2;\n// ---cut---\nlet total = $derived(await a + b);\n```\n\n...both `a` and `b` are tracked, even though `b` is only read once `a` has resolved, after the initial execution.\n\nThis does _not_ apply to an `await` that is not 'visible' inside the expression. In a case like this...\n\n```js\nlet a = Promise.resolve(1);\nlet b = 2;\n// ---cut---\nasync function sum() {\n\treturn await a + b;\n}\n\nlet total = $derived(await sum());\n```\n\n...`total` will depend on `a` (which is read immediately) but not `b` (which is not). The solution is to pass the values into the function:\n\n```js\nlet a = Promise.resolve(1);\nlet b = 2;\n// ---cut---\n/**\n * @param {Promise<number>} a\n * @param {number} b\n */\nasync function sum(a, b) {\n\treturn await a + b;\n}\n\nlet total = $derived(await sum(a, b));\n```\n\n### await_waterfall\n\n```\nAn async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app\n```\n\nIn a case like this...\n\n```js\nasync function one() { return 1 }\nasync function two() { return 2 }\n// ---cut---\nlet a = $derived(await one());\nlet b = $derived(await two());\n```\n\n...the second `$derived` will not be created until the first one has resolved. Since `await two()` does not depend on the value of `a`, this delay, often described as a 'waterfall', is unnecessary.\n\n(Note that if the values of `await one()` and `await two()` subsequently change, they can do so concurrently — the waterfall only occurs when the deriveds are first created.)\n\nYou can solve this by creating the promises first and _then_ awaiting them:\n\n```js\nasync function one() { return 1 }\nasync function two() { return 2 }\n// ---cut---\nlet aPromise = $derived(one());\nlet bPromise = $derived(two());\n\nlet a = $derived(await aPromise);\nlet b = $derived(await bPromise);\n```\n\n### binding_property_non_reactive\n\n```\n`%binding%` is binding to a non-reactive property\n```\n\n```\n`%binding%` (%location%) is binding to a non-reactive property\n```\n\n### console_log_state\n\n```\nYour `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead\n```\n\nWhen logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.\n\nThe easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.\n\n### event_handler_invalid\n\n```\n%handler% should be a function. Did you mean to %suggestion%?\n```\n\n### hydration_attribute_changed\n\n```\nThe `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value\n```\n\nCertain attributes like `src` on an `<img>` element will not be repaired during hydration, i.e. the server value will be kept. That's because updating these attributes can cause the image to be refetched (or in the case of an `<iframe>`, for the frame to be reloaded), even if they resolve to the same resource.\n\nTo fix this, either silence the warning with a [`svelte-ignore`](basic-markup#Comments) comment, or ensure that the value stays the same between server and client. If you really need the value to change on hydration, you can force an update like this:\n\n```svelte\n<script>\n\tlet { src } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\t// stash the value...\n\t\tconst initial = src;\n\n\t\t// unset it...\n\t\tsrc = undefined;\n\n\t\t$effect(() => {\n\t\t\t// ...and reset after we've mounted\n\t\t\tsrc = initial;\n\t\t});\n\t}\n</script>\n\n<img {src} />\n```\n\n### hydration_html_changed\n\n```\nThe value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value\n```\n\n```\nThe value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value\n```\n\nIf the `{@html ...}` value changes between the server and the client, it will not be repaired during hydration, i.e. the server value will be kept. That's because change detection during hydration is expensive and usually unnecessary.\n\nTo fix this, either silence the warning with a [`svelte-ignore`](basic-markup#Comments) comment, or ensure that the value stays the same between server and client. If you really need the value to change on hydration, you can force an update like this:\n\n```svelte\n<script>\n\tlet { markup } = $props();\n\n\tif (typeof window !== 'undefined') {\n\t\t// stash the value...\n\t\tconst initial = markup;\n\n\t\t// unset it...\n\t\tmarkup = undefined;\n\n\t\t$effect(() => {\n\t\t\t// ...and reset after we've mounted\n\t\t\tmarkup = initial;\n\t\t});\n\t}\n</script>\n\n{@html markup}\n```\n\n### hydration_mismatch\n\n```\nHydration failed because the initial UI does not match what was rendered on the server\n```\n\n```\nHydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%\n```\n\nThis warning is thrown when Svelte encounters an error while hydrating the HTML from the server. During hydration, Svelte walks the DOM, expecting a certain structure. If that structure is different (for example because the HTML was repaired by the DOM because of invalid HTML), then Svelte will run into issues, resulting in this warning.\n\nDuring development, this error is often preceeded by a `console.error` detailing the offending HTML, which needs fixing.\n\n### invalid_raw_snippet_render\n\n```\nThe `render` function passed to `createRawSnippet` should return HTML for a single element\n```\n\n### legacy_recursive_reactive_block\n\n```\nDetected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.\n```\n\n### lifecycle_double_unmount\n\n```\nTried to unmount a component that was not mounted\n```\n\n### ownership_invalid_binding\n\n```\n%parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)\n```\n\nConsider three components `GrandParent`, `Parent` and `Child`. If you do `<GrandParent bind:value>`, inside `GrandParent` pass on the variable via `<Parent {value} />` (note the missing `bind:`) and then do `<Child bind:value>` inside `Parent`, this warning is thrown.\n\nTo fix it, `bind:` to the value instead of just passing a property (i.e. in this example do `<Parent bind:value />`).\n\n### ownership_invalid_mutation\n\n```\nMutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead\n```\n\nConsider the following code:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Child from './Child.svelte';\n\tlet person = $state({ name: 'Florida', surname: 'Man' });\n</script>\n\n<Child {person} />\n```\n\n```svelte\n<!--- file: Child.svelte --->\n<script>\n\tlet { person } = $props();\n</script>\n\n<input bind:value={person.name}>\n<input bind:value={person.surname}>\n```\n\n`Child` is mutating `person` which is owned by `App` without being explicitly \"allowed\" to do so. This is strongly discouraged since it can create code that is hard to reason about at scale (\"who mutated this value?\"), hence the warning.\n\nTo fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).\n\n### select_multiple_invalid_value\n\n```\nThe `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.\n```\n\nWhen using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.\n\nTo silence the warning, ensure that `value`:\n\n- is an array for an explicit selection\n- is `null` or `undefined` to keep the selection as is\n\n### state_proxy_equality_mismatch\n\n```\nReactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results\n```\n\n`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:\n\n```svelte\n<script>\n\tlet value = { foo: 'bar' };\n\tlet proxy = $state(value);\n\n\tvalue === proxy; // always false\n</script>\n```\n\nTo resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.\n\n### state_proxy_unmount\n\n```\nTried to unmount a state proxy, rather than a component\n```\n\n`unmount` was called with a state proxy:\n\n```js\nimport { mount, unmount } from 'svelte';\nimport Component from './Component.svelte';\nlet target = document.body;\n// ---cut---\nlet component = $state(mount(Component, { target }));\n\n// later...\nunmount(component);\n```\n\nAvoid using `$state` here. If `component` _does_ need to be reactive for some reason, use `$state.raw` instead.\n\n### svelte_boundary_reset_noop\n\n```\nA `<svelte:boundary>` `reset` function only resets the boundary the first time it is called\n```\n\nWhen an error occurs while rendering the contents of a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary), the `onerror` handler is called with the error plus a `reset` function that attempts to re-render the contents.\n\nThis `reset` function should only be called once. After that, it has no effect — in a case like this, where a reference to `reset` is stored outside the boundary, clicking the button while `<Contents />` is rendered will _not_ cause the contents to be rendered again.\n\n```svelte\n<script>\n\tlet reset;\n</script>\n\n<button onclick={reset}>reset</button>\n\n<svelte:boundary onerror={(e, r) => (reset = r)}>\n\t<!-- contents -->\n\n\t{#snippet failed(e)}\n\t\t<p>oops! {e.message}</p>\n\t{/snippet}\n</svelte:boundary>\n```\n\n### transition_slide_display\n\n```\nThe `slide` transition does not work correctly for elements with `display: %value%`\n```\n\nThe [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:\n\n- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`\n- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`\n- `display: contents`\n\n\n## Shared warnings\n\n<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n### dynamic_void_element_content\n\n```\n`<svelte:element this=\"%tag%\">` is a void element — it cannot have content\n```\n\nElements such as `<input>` cannot have content, any children passed to these elements will be ignored.\n\n### state_snapshot_uncloneable\n\n```\nValue cannot be cloned with `$state.snapshot` — the original value was returned\n```\n\n```\nThe following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:\n\n%properties%\n```\n\n`$state.snapshot` tries to clone the given value in order to return a reference that no longer changes. Certain objects may not be cloneable, in which case the original value is returned. In the following example, `property` is cloned, but `window` is not, because DOM elements are uncloneable:\n\n```js\nconst object = $state({ property: 'this is cloneable', window })\nconst snapshot = $state.snapshot(object);\n```",
+		"svelte/legacy-overview": "Svelte 5 introduced some significant changes to Svelte's API, including [runes](what-are-runes), [snippets](snippet) and event attributes. As a result, some Svelte 3/4 features are deprecated (though supported for now, unless otherwise specified) and will eventually be removed. We recommend that you incrementally [migrate your existing code](v5-migration-guide).\n\nThe following pages document these features for\n\n- people still using Svelte 3/4\n- people using Svelte 5, but with components that haven't yet been migrated\n\nSince Svelte 3/4 syntax still works in Svelte 5, we will distinguish between _legacy mode_ and _runes mode_. Once a component is in runes mode (which you can opt into by using runes, or by explicitly setting the `runes: true` compiler option), legacy mode features are no longer available.\n\nIf you're exclusively interested in the Svelte 3/4 syntax, you can browse its documentation at [v4.svelte.dev](https://v4.svelte.dev).",
+		"svelte/legacy-let": "In runes mode, reactive state is explicitly declared with the [`$state` rune]($state).\n\nIn legacy mode, variables declared at the top level of a component are automatically considered _reactive_. Reassigning or mutating these variables (`count += 1` or `object.x = y`) will cause the UI to update.\n\n```svelte\n<script>\n\tlet count = 0;\n</script>\n\n<button on:click={() => count += 1}>\n\tclicks: {count}\n</button>\n```\n\nBecause Svelte's legacy mode reactivity is based on _assignments_, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to 'tell' the compiler to update the UI:\n\n```svelte\n<script>\n\tlet numbers = [1, 2, 3, 4];\n\n\tfunction addNumber() {\n\t\t// this method call does not trigger an update\n\t\tnumbers.push(numbers.length + 1);\n\n\t\t// this assignment will update anything\n\t\t// that depends on `numbers`\n\t\tnumbers = numbers;\n\t}\n</script>\n```",
+		"svelte/legacy-reactive-assignments": "In runes mode, reactions to state updates are handled with the [`$derived`]($derived) and [`$effect`]($effect) runes.\n\nIn legacy mode, any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with a `$:` [label](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). These statements run after other code in the `<script>` and before the component markup is rendered, then whenever the values that they depend on change.\n\n```svelte\n<script>\n\tlet a = 1;\n\tlet b = 2;\n\n\t// this is a 'reactive statement', and it will re-run\n\t// when `a`, `b` or `sum` change\n\t$: console.log(`${a} + ${b} = ${sum}`);\n\n\t// this is a 'reactive assignment' — `sum` will be\n\t// recalculated when `a` or `b` change. It is\n\t// not necessary to declare `sum` separately\n\t$: sum = a + b;\n</script>\n```\n\nStatements are ordered _topologically_ by their dependencies and their assignments: since the `console.log` statement depends on `sum`, `sum` is calculated first even though it appears later in the source.\n\nMultiple statements can be combined by putting them in a block:\n\n```js\n// @noErrors\n$: {\n\t// recalculate `total` when `items` changes\n\ttotal = 0;\n\n\tfor (const item of items) {\n\t\ttotal += item.value;\n\t}\n}\n```\n\nThe left-hand side of a reactive assignments can be an identifier, or it can be a destructuring assignment:\n\n```js\n// @noErrors\n$: ({ larry, moe, curly } = stooges);\n```\n\n## Understanding dependencies\n\nThe dependencies of a `$:` statement are determined at compile time — they are whichever variables are referenced (but not assigned to) inside the statement.\n\nIn other words, a statement like this will _not_ re-run when `count` changes, because the compiler cannot 'see' the dependency:\n\n```js\n// @noErrors\nlet count = 0;\nlet double = () => count * 2;\n\n$: doubled = double();\n```\n\nSimilarly, topological ordering will fail if dependencies are referenced indirectly: `z` will never update, because `y` is not considered 'dirty' when the update occurs. Moving `$: z = y` below `$: setY(x)` will fix it:\n\n```svelte\n<script>\n\tlet x = 0;\n\tlet y = 0;\n\n\t$: z = y;\n\t$: setY(x);\n\n\tfunction setY(value) {\n\t\ty = value;\n\t}\n</script>\n```\n\n## Browser-only code\n\nReactive statements run during server-side rendering as well as in the browser. This means that any code that should only run in the browser must be wrapped in an `if` block:\n\n```js\n// @noErrors\n$: if (browser) {\n\tdocument.title = title;\n}\n```",
+		"svelte/legacy-export-let": "In runes mode, [component props](basic-markup#Component-props) are declared with the [`$props`]($props) rune, allowing parent components to pass in data.\n\nIn legacy mode, props are marked with the `export` keyword, and can have a default value:\n\n```svelte\n<script>\n\texport let foo;\n\texport let bar = 'default value';\n\n\t// Values that are passed in as props\n\t// are immediately available\n\tconsole.log({ foo });\n</script>\n```\n\nThe default value is used if it would otherwise be `undefined` when the component is created.\n\n> [!NOTE] Unlike in runes mode, if the parent component changes a prop from a defined value to `undefined`, it does not revert to the initial value.\n\nProps without default values are considered _required_, and Svelte will print a warning during development if no value is provided, which you can squelch by specifying `undefined` as the default value:\n\n```js\nexport let foo +++= undefined;+++\n```\n\n## Component exports\n\nAn exported `const`, `class` or `function` declaration is _not_ considered a prop — instead, it becomes part of the component's API:\n\n```svelte\n<!--- file: Greeter.svelte--->\n<script>\n\texport function greet(name) {\n\t\talert(`hello ${name}!`);\n\t}\n</script>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Greeter from './Greeter.svelte';\n\n\tlet greeter;\n</script>\n\n<Greeter bind:this={greeter} />\n\n<button on:click={() => greeter.greet('world')}>\n\tgreet\n</button>\n```\n\n## Renaming props\n\nThe `export` keyword can appear separately from the declaration. This is useful for renaming props, for example in the case of a reserved word:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\t/** @type {string} */\n\tlet className;\n\n\t// creates a `class` property, even\n\t// though it is a reserved word\n\texport { className as class };\n</script>\n```",
+		"svelte/legacy-$$props-and-$$restProps": "In runes mode, getting an object containing all the props that were passed in is easy, using the [`$props`]($props) rune.\n\nIn legacy mode, we use `$$props` and `$$restProps`:\n\n- `$$props` contains all the props that were passed in, including ones that are not individually declared with the `export` keyword\n- `$$restProps` contains all the props that were passed in _except_ the ones that were individually declared\n\nFor example, a `<Button>` component might need to pass along all its props to its own `<button>` element, except the `variant` prop:\n\n```svelte\n<script>\n\texport let variant;\n</script>\n\n<button {...$$restProps} class=\"variant-{variant} {$$props.class ?? ''}\">\n\tclick me\n</button>\n\n<style>\n\t.variant-danger {\n\t\tbackground: red;\n\t}\n</style>\n```\n\nIn Svelte 3/4 using `$$props` and `$$restProps` creates a modest performance penalty, so they should only be used when needed.",
+		"svelte/legacy-on": "In runes mode, event handlers are just like any other attribute or prop.\n\nIn legacy mode, we use the `on:` directive:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\tlet count = 0;\n\n\t/** @param {MouseEvent} event */\n\tfunction handleClick(event) {\n\t\tcount += 1;\n\t}\n</script>\n\n<button on:click={handleClick}>\n\tcount: {count}\n</button>\n```\n\nHandlers can be declared inline with no performance penalty:\n\n```svelte\n<button on:click={() => (count += 1)}>\n\tcount: {count}\n</button>\n```\n\nAdd _modifiers_ to element event handlers with the `|` character.\n\n```svelte\n<form on:submit|preventDefault={handleSubmit}>\n\t<!-- the `submit` event's default is prevented,\n\t     so the page won't reload -->\n</form>\n```\n\nThe following modifiers are available:\n\n- `preventDefault` — calls `event.preventDefault()` before running the handler\n- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element\n- `stopImmediatePropagation` - calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired.\n- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)\n- `nonpassive` — explicitly set `passive: false`\n- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase\n- `once` — remove the handler after the first time it runs\n- `self` — only trigger handler if `event.target` is the element itself\n- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.\n\nModifiers can be chained together, e.g. `on:click|once|capture={...}`.\n\nIf the `on:` directive is used without a value, the component will _forward_ the event, meaning that a consumer of the component can listen for it.\n\n```svelte\n<button on:click>\n\tThe component itself will emit the click event\n</button>\n```\n\nIt's possible to have multiple event listeners for the same event:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\tlet count = 0;\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n\n\t/** @param {MouseEvent} event */\n\tfunction log(event) {\n\t\tconsole.log(event);\n\t}\n</script>\n\n<button on:click={increment} on:click={log}>\n\tclicks: {count}\n</button>\n```\n\n## Component events\n\nComponents can dispatch events by creating a _dispatcher_ when they are initialised:\n\n```svelte\n<!--- file: Stepper.svelte -->\n<script>\n\timport { createEventDispatcher } from 'svelte';\n\tconst dispatch = createEventDispatcher();\n</script>\n\n<button on:click={() => dispatch('decrement')}>decrement</button>\n<button on:click={() => dispatch('increment')}>increment</button>\n```\n\n`dispatch` creates a [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). If a second argument is provided, it becomes the `detail` property of the event object.\n\nA consumer of this component can listen for the dispatched events:\n\n```svelte\n<script>\n\timport Stepper from './Stepper.svelte';\n\n\tlet n = 0;\n</script>\n\n<Stepper\n\ton:decrement={() => n -= 1}\n\ton:increment={() => n += 1}\n/>\n\n<p>n: {n}</p>\n```\n\nComponent events do not bubble — a parent component can only listen for events on its immediate children.\n\nOther than `once`, modifiers are not valid on component event handlers.\n\n> [!NOTE]\n> If you're planning an eventual migration to Svelte 5, use callback props instead. This will make upgrading easier as `createEventDispatcher` is deprecated:\n>\n> ```svelte\n> <!--- file: Stepper.svelte --->\n> <script>\n> \texport let decrement;\n> \texport let increment;\n> </script>\n>\n> <button on:click={decrement}>decrement</button>\n> <button on:click={increment}>increment</button>\n> ```",
+		"svelte/legacy-slots": "In Svelte 5, content can be passed to components in the form of [snippets](snippet) and rendered using [render tags](@render).\n\nIn legacy mode, content inside component tags is considered _slotted content_, which can be rendered by the component using a `<slot>` element:\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Modal from './Modal.svelte';\n</script>\n\n<Modal>This is some slotted content</Modal>\n```\n\n```svelte\n<!--- file: Modal.svelte --->\n<div class=\"modal\">\n\t<slot></slot>\n</div>\n```\n\n> [!NOTE] If you want to render a regular `<slot>` element, you can use `<svelte:element this={'slot'} />`.\n\n## Named slots\n\nA component can have _named_ slots in addition to the default slot. On the parent side, add a `slot=\"...\"` attribute to an element, component or [`<svelte:fragment>`](legacy-svelte-fragment) directly inside the component tags.\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Modal from './Modal.svelte';\n\n\tlet open = true;\n</script>\n\n{#if open}\n\t<Modal>\n\t\tThis is some slotted content\n\n\t\t+++<div slot=\"buttons\">+++\n\t\t\t<button on:click={() => open = false}>\n\t\t\t\tclose\n\t\t\t</button>\n\t\t+++</div>+++\n\t</Modal>\n{/if}\n```\n\nOn the child side, add a corresponding `<slot name=\"...\">` element:\n\n```svelte\n<!--- file: Modal.svelte --->\n<div class=\"modal\">\n\t<slot></slot>\n\t<hr>\n\t+++<slot name=\"buttons\"></slot>+++\n</div>\n```\n\n## Fallback content\n\nIf no slotted content is provided, a component can define fallback content by putting it inside the `<slot>` element:\n\n```svelte\n<slot>\n\tThis will be rendered if no slotted content is provided\n</slot>\n```\n\n## Passing data to slotted content\n\nSlots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive.\n\n```svelte\n<!--- file: FancyList.svelte --->\n<ul>\n\t{#each items as data}\n\t\t<li class=\"fancy\">\n\t\t\t<!-- 'item' here... -->\n\t\t\t<slot item={process(data)} />\n\t\t</li>\n\t{/each}\n</ul>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<!-- ...corresponds to 'item' here: -->\n<FancyList {items} let:item={processed}>\n\t<div>{processed.text}</div>\n</FancyList>\n```\n\nThe usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.\n\nNamed slots can also expose values. The `let:` directive goes on the element with the `slot` attribute.\n\n```svelte\n<!--- file: FancyList.svelte --->\n<ul>\n\t{#each items as item}\n\t\t<li class=\"fancy\">\n\t\t\t<slot name=\"item\" item={process(data)} />\n\t\t</li>\n\t{/each}\n</ul>\n\n<slot name=\"footer\" />\n```\n\n```svelte\n<!--- file: App.svelte --->\n<FancyList {items}>\n\t<div slot=\"item\" let:item>{item.text}</div>\n\t<p slot=\"footer\">Copyright (c) 2019 Svelte Industries</p>\n</FancyList>\n```",
+		"svelte/legacy-$$slots": "In runes mode, we know which [snippets](snippet) were provided to a component, as they're just normal props.\n\nIn legacy mode, the way to know if content was provided for a given slot is with the `$$slots` object, whose keys are the names of the slots passed into the component by the parent.\n\n```svelte\n<!--- file: Card.svelte --->\n<div>\n\t<slot name=\"title\" />\n\t{#if $$slots.description}\n\t\t<!-- This <hr> and slot will render only if `slot=\"description\"` is provided. -->\n\t\t<hr />\n\t\t<slot name=\"description\" />\n\t{/if}\n</div>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<Card>\n\t<h1 slot=\"title\">Blog Post Title</h1>\n\t<!-- No slot named \"description\" was provided so the optional slot will not be rendered. -->\n</Card>\n```",
+		"svelte/legacy-svelte-fragment": "The `<svelte:fragment>` element allows you to place content in a [named slot](legacy-slots) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.\n\n```svelte\n<!--- file: Widget.svelte --->\n<div>\n\t<slot name=\"header\">No header was provided</slot>\n\t<p>Some content between header and footer</p>\n\t<slot name=\"footer\" />\n</div>\n```\n\n```svelte\n<!--- file: App.svelte --->\n<script>\n\timport Widget from './Widget.svelte';\n</script>\n\n<Widget>\n\t<h1 slot=\"header\">Hello</h1>\n\t<svelte:fragment slot=\"footer\">\n\t\t<p>All rights reserved.</p>\n\t\t<p>Copyright (c) 2019 Svelte Industries</p>\n\t</svelte:fragment>\n</Widget>\n```\n\n> [!NOTE]\n> In Svelte 5+, this concept is obsolete, as snippets don't create a wrapping element",
+		"svelte/legacy-svelte-component": "In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#svelte:component-is-no-longer-necessary) for an example.\n\nIn legacy mode, it won't — we must use `<svelte:component>`, which destroys and recreates the component instance when the value of its `this` expression changes:\n\n```svelte\n<svelte:component this={MyComponent} />\n```\n\nIf `this` is falsy, no component is rendered.",
+		"svelte/legacy-svelte-self": "The `<svelte:self>` element allows a component to include itself, recursively.\n\nIt cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.\n\n```svelte\n<script>\n\texport let count;\n</script>\n\n{#if count > 0}\n\t<p>counting down... {count}</p>\n\t<svelte:self count={count - 1} />\n{:else}\n\t<p>lift-off!</p>\n{/if}\n```\n\n> [!NOTE]\n> This concept is obsolete, as components can import themselves:\n> ```svelte\n> <!--- file: App.svelte --->\n> <script>\n> \timport Self from './App.svelte'\n> \texport let count;\n> </script>\n>\n> {#if count > 0}\n> \t<p>counting down... {count}</p>\n> \t<Self count={count - 1} />\n> {:else}\n> \t<p>lift-off!</p>\n> {/if}\n> ```",
+		"svelte/legacy-component-api": "In Svelte 3 and 4, the API for interacting with a component is different than in Svelte 5. Note that this page does _not_ apply to legacy mode components in a Svelte 5 application.\n\n## Creating a component\n\n```ts\n// @noErrors\nconst component = new Component(options);\n```\n\nA client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class.\n\n```ts\n// @noErrors\nimport App from './App.svelte';\n\nconst app = new App({\n\ttarget: document.body,\n\tprops: {\n\t\t// assuming App.svelte contains something like\n\t\t// `export let answer`:\n\t\tanswer: 42\n\t}\n});\n```\n\nThe following initialisation options can be provided:\n\n| option    | default     | description                                                                                          |\n| --------- | ----------- | ---------------------------------------------------------------------------------------------------- |\n| `target`  | **none**    | An `HTMLElement` or `ShadowRoot` to render to. This option is required                               |\n| `anchor`  | `null`      | A child of `target` to render the component immediately before                                       |\n| `props`   | `{}`        | An object of properties to supply to the component                                                   |\n| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component                             |\n| `hydrate` | `false`     | See below                                                                                            |\n| `intro`   | `false`     | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes |\n\nExisting children of `target` are left where they are.\n\nThe `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/svelte-compiler#compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.\n\nWhereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.\n\nThe existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.\n\n```ts\n/// file: index.js\n// @noErrors\nimport App from './App.svelte';\n\nconst app = new App({\n\ttarget: document.querySelector('#server-rendered-html'),\n\thydrate: true\n});\n```\n\n> [!NOTE]\n> In Svelte 5+, use [`mount`](svelte#mount) instead\n\n## `$set`\n\n```ts\n// @noErrors\ncomponent.$set(props);\n```\n\nProgrammatically sets props on an instance. `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `<script>` block.\n\nCalling this method schedules an update for the next microtask — the DOM is _not_ updated synchronously.\n\n```ts\n// @noErrors\ncomponent.$set({ answer: 42 });\n```\n\n> [!NOTE]\n> In Svelte 5+, use `$state` instead to create a component props and update that\n>\n> ```js\n> // @noErrors\n> let props = $state({ answer: 42 });\n> const component = mount(Component, { props });\n> // ...\n> props.answer = 24;\n> ```\n\n## `$on`\n\n```ts\n// @noErrors\ncomponent.$on(ev, callback);\n```\n\nCauses the `callback` function to be called whenever the component dispatches an `event`.\n\nA function is returned that will remove the event listener when called.\n\n```ts\n// @noErrors\nconst off = component.$on('selected', (event) => {\n\tconsole.log(event.detail.selection);\n});\n\noff();\n```\n\n> [!NOTE]\n> In Svelte 5+, pass callback props instead\n\n## `$destroy`\n\n```js\n// @noErrors\ncomponent.$destroy();\n```\n\nRemoves a component from the DOM and triggers any `onDestroy` handlers.\n\n> [!NOTE]\n> In Svelte 5+, use [`unmount`](svelte#unmount) instead\n\n## Component props\n\n```js\n// @noErrors\ncomponent.prop;\n```\n\n```js\n// @noErrors\ncomponent.prop = value;\n```\n\nIf a component is compiled with `accessors: true`, each instance will have getters and setters corresponding to each of the component's props. Setting a value will cause a _synchronous_ update, rather than the default async update caused by `component.$set(...)`.\n\nBy default, `accessors` is `false`, unless you're compiling as a custom element.\n\n```js\n// @noErrors\nconsole.log(component.count);\ncomponent.count += 1;\n```\n\n> [!NOTE]\n> In Svelte 5+, this concept is obsolete. If you want to make properties accessible from the outside, `export` them\n\n## Server-side component API\n\n```js\n// @noErrors\nconst result = Component.render(...)\n```\n\nUnlike client-side components, server-side components don't have a lifespan after you render them — their whole job is to create some HTML and CSS. For that reason, the API is somewhat different.\n\nA server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.\n\nYou can import a Svelte component directly into Node using `svelte/register`.\n\n```js\n// @noErrors\nrequire('svelte/register');\n\nconst App = require('./App.svelte').default;\n\nconst { head, html, css } = App.render({\n\tanswer: 42\n});\n```\n\nThe `.render()` method accepts the following parameters:\n\n| parameter | default | description                                        |\n| --------- | ------- | -------------------------------------------------- |\n| `props`   | `{}`    | An object of properties to supply to the component |\n| `options` | `{}`    | An object of options                               |\n\nThe `options` object takes in the following options:\n\n| option    | default     | description                                                              |\n| --------- | ----------- | ------------------------------------------------------------------------ |\n| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component |\n\n```js\n// @noErrors\nconst { head, html, css } = App.render(\n\t// props\n\t{ answer: 42 },\n\t// options\n\t{\n\t\tcontext: new Map([['context-key', 'context-value']])\n\t}\n);\n```\n\n> [!NOTE]\n> In Svelte 5+, use [`render`](svelte-server#render) instead"
 	}
 }
diff --git a/packages/mcp-server/summaries/distilled/cli/devtools-json.md b/packages/mcp-server/summaries/distilled/cli/devtools-json.md
new file mode 100644
index 00000000..5877162d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/devtools-json.md
@@ -0,0 +1,33 @@
+# devtools-json Add-on
+
+Installs [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json/) - a Vite plugin that generates a Chromium DevTools settings file at `/.well-known/appspecific/com.chrome.devtools.json`. Enables [workspaces feature](https://developer.chrome.com/docs/devtools/workspaces) to edit source files directly in Chromium browsers.
+
+> [!NOTE]
+> Enables feature for all dev server users with Chromium browsers. Allows browser to read/write all files in directory. Chrome's AI Assistance may send data to Google.
+
+## Alternatives
+
+**Disable in browser:** Visit `chrome://flags` and disable "DevTools Project Settings" and "DevTools Automatic Workspace Folders".
+
+**Handle request manually:** Create `.well-known/appspecific/com.chrome.devtools.json` file or add to `handle` hook:
+
+```js
+/// file: src/hooks.server.js
+import { dev } from '$app/environment';
+
+export function handle({ event, resolve }) {
+	if (dev && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {
+		return new Response(undefined, { status: 404 });
+	}
+
+	return resolve(event);
+}
+```
+
+## Usage
+
+```sh
+npx sv add devtools-json
+```
+
+Adds `vite-plugin-devtools-json` to Vite config.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/drizzle.md b/packages/mcp-server/summaries/distilled/cli/drizzle.md
new file mode 100644
index 00000000..aae32a27
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/drizzle.md
@@ -0,0 +1,46 @@
+# Drizzle ORM
+
+TypeScript ORM with relational and SQL-like query APIs, serverless-ready.
+
+## Setup
+
+```sh
+npx sv add drizzle
+```
+
+**Includes:**
+- Database access in SvelteKit server files
+- `.env` for credentials
+- Lucia auth compatibility
+- Optional Docker config for local database
+
+## Options
+
+### database
+Choose database variant:
+- `postgresql` — popular open source
+- `mysql` — popular open source  
+- `sqlite` — file-based, no server needed
+
+```sh
+npx sv add drizzle=database:postgresql
+```
+
+### client
+SQL client (depends on database):
+- **postgresql**: `postgres.js`, `neon`
+- **mysql**: `mysql2`, `planetscale`
+- **sqlite**: `better-sqlite3`, `libsql`, `turso`
+
+```sh
+npx sv add drizzle=database:postgresql+client:postgres.js
+```
+
+*Note: Can swap for [other Drizzle-compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps) after setup*
+
+### docker
+Add Docker Compose config (postgresql/mysql only):
+
+```sh
+npx sv add drizzle=database:postgresql+client:postgres.js+docker:yes
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/eslint.md b/packages/mcp-server/summaries/distilled/cli/eslint.md
new file mode 100644
index 00000000..e96923be
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/eslint.md
@@ -0,0 +1,15 @@
+# ESLint
+
+Lints and fixes code problems.
+
+## Setup
+
+```sh
+npx sv add eslint
+```
+
+Installs:
+- `eslint-plugin-svelte`
+- `eslint.config.js`
+- Updated `.vscode/settings.json`
+- Auto-configured for TypeScript and Prettier if present
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/faq.md b/packages/mcp-server/summaries/distilled/cli/faq.md
new file mode 100644
index 00000000..cae9f5ca
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/faq.md
@@ -0,0 +1,20 @@
+# sv CLI
+
+## Running sv CLI
+
+```bash
+npm:  npx sv create
+pnpm: pnpx sv create / pnpm dlx sv create
+bun:  bunx sv create
+deno: deno run npm:sv create
+yarn: yarn dlx sv create
+```
+
+## Troubleshooting
+
+If `npx sv` doesn't work, package managers may prioritize local tools over registry packages. Common issues:
+- Command does nothing
+- Name collision with `runit` 
+- Windows PowerShell conflict with `Set-Variable`
+
+See: [GitHub issues #472](https://github.com/sveltejs/cli/issues/472), [#259](https://github.com/sveltejs/cli/issues/259), [#317](https://github.com/sveltejs/cli/issues/317)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/lucia.md b/packages/mcp-server/summaries/distilled/cli/lucia.md
new file mode 100644
index 00000000..0f7afc7d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/lucia.md
@@ -0,0 +1,18 @@
+# Lucia Auth
+
+Auth setup following [Lucia auth guide](https://lucia-auth.com/).
+
+## Usage
+
+```sh
+npx sv add lucia
+```
+
+Adds auth setup for SvelteKit + Drizzle following Lucia best practices.
+
+## Options
+
+**demo** - Include demo registration/login pages:
+```sh
+npx sv add lucia=demo:yes
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/mdsvex.md b/packages/mcp-server/summaries/distilled/cli/mdsvex.md
new file mode 100644
index 00000000..622a76aa
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/mdsvex.md
@@ -0,0 +1,11 @@
+# mdsvex
+
+[mdsvex](https://mdsvex.pngwn.io) is a markdown preprocessor for Svelte - allows using Svelte components in markdown and vice versa.
+
+## Installation
+
+```sh
+npx sv add mdsvex
+```
+
+Installs and configures mdsvex in `svelte.config.js`.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/overview.md b/packages/mcp-server/summaries/distilled/cli/overview.md
new file mode 100644
index 00000000..be1e6764
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/overview.md
@@ -0,0 +1,13 @@
+# CLI (`sv`)
+
+Toolkit for creating and maintaining Svelte applications.
+
+## Usage
+
+Run with `npx` (or `pnpx` for pnpm):
+
+```sh
+npx sv <command> <args>
+```
+
+Uses local installation if available, otherwise downloads latest version without installing.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/paraglide.md b/packages/mcp-server/summaries/distilled/cli/paraglide.md
new file mode 100644
index 00000000..8a5a7e63
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/paraglide.md
@@ -0,0 +1,30 @@
+# Paraglide i18n
+
+Compiler-based i18n library with tree-shakable messages, small bundles, type-safety.
+
+## Installation
+
+```sh
+npx sv add paraglide
+```
+
+## Includes
+
+- Inlang project settings
+- Paraglide Vite plugin
+- SvelteKit `reroute` and `handle` hooks
+- `text-direction` and `lang` attributes in `app.html`
+- Updated `.gitignore`
+- Optional demo page
+
+## Options
+
+**languageTags** - IETF BCP 47 language tags:
+```sh
+npx sv add paraglide="languageTags:en,es"
+```
+
+**demo** - Generate demo page:
+```sh
+npx sv add paraglide="demo:yes"
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/playwright.md b/packages/mcp-server/summaries/distilled/cli/playwright.md
new file mode 100644
index 00000000..634fa796
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/playwright.md
@@ -0,0 +1,15 @@
+# Playwright
+
+Browser testing with [Playwright](https://playwright.dev).
+
+## Usage
+
+```sh
+npx sv add playwright
+```
+
+Adds:
+- Test scripts to `package.json`
+- Playwright config file
+- Updated `.gitignore`
+- Demo test
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/prettier.md b/packages/mcp-server/summaries/distilled/cli/prettier.md
new file mode 100644
index 00000000..ea30454d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/prettier.md
@@ -0,0 +1,15 @@
+# Prettier
+
+Opinionated code formatter for Svelte projects.
+
+## Usage
+
+```sh
+npx sv add prettier
+```
+
+## Adds
+
+- `package.json` scripts
+- `.prettierignore` and `.prettierrc` config files
+- ESLint config updates (if ESLint installed)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/storybook.md b/packages/mcp-server/summaries/distilled/cli/storybook.md
new file mode 100644
index 00000000..b22206d8
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/storybook.md
@@ -0,0 +1,15 @@
+# Storybook
+
+Component workshop for Svelte/SvelteKit.
+
+## Installation
+
+```sh
+npx sv add storybook
+```
+
+## Features
+
+- Runs `npx storybook init` automatically
+- Configures either [Storybook for SvelteKit](https://storybook.js.org/docs/get-started/frameworks/sveltekit) or [Storybook for Svelte & Vite](https://storybook.js.org/docs/get-started/frameworks/svelte-vite)
+- Includes SvelteKit module mocking and automatic link handling
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/sv-add.md b/packages/mcp-server/summaries/distilled/cli/sv-add.md
new file mode 100644
index 00000000..689d1830
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/sv-add.md
@@ -0,0 +1,37 @@
+# sv add
+
+Adds functionality to existing Svelte projects.
+
+## Usage
+
+```sh
+npx sv add
+```
+
+```sh
+npx sv add [add-ons]
+```
+
+Select multiple space-separated add-ons or use interactive prompt.
+
+## Options
+
+- `-C`, `--cwd` — path to project root
+- `--no-git-check` — skip dirty files prompt
+- `--install` — install dependencies with specified package manager
+- `--no-install` — skip dependency installation
+
+## Official add-ons
+
+- `devtools-json`
+- `drizzle`
+- `eslint`
+- `lucia`
+- `mdsvex`
+- `paraglide`
+- `playwright`
+- `prettier`
+- `storybook`
+- `sveltekit-adapter`
+- `tailwindcss`
+- `vitest`
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/sv-check.md b/packages/mcp-server/summaries/distilled/cli/sv-check.md
new file mode 100644
index 00000000..ff321ced
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/sv-check.md
@@ -0,0 +1,109 @@
+# sv check
+
+Finds errors and warnings in your project: unused CSS, accessibility hints, JS/TS compiler errors.
+
+Requires Node 16+.
+
+## Installation
+
+```sh
+npm i -D svelte-check
+```
+
+## Usage
+
+```sh
+npx sv check
+```
+
+## Options
+
+### `--workspace <path>`
+Path to workspace. Checks all subdirectories except `node_modules` and ignored paths.
+
+### `--output <format>`
+Display format: `human`, `human-verbose`, `machine`, `machine-verbose`
+
+### `--watch`
+Watch mode for changes.
+
+### `--preserveWatchOutput`
+Don't clear screen in watch mode.
+
+### `--tsconfig <path>`
+Path to `tsconfig`/`jsconfig`. Only files matched by config's `files`/`include`/`exclude` are checked. Reports errors from TS/JS files. If not provided, searches upward from project directory.
+
+### `--no-tsconfig`
+Only check Svelte files, ignore `.js`/`.ts` files.
+
+### `--ignore <paths>`
+Comma-separated quoted paths relative to workspace root:
+
+```sh
+npx sv check --ignore "dist,build"
+```
+
+Only effective with `--no-tsconfig` for diagnostics. With `--tsconfig`, only affects watched files.
+
+### `--fail-on-warnings`
+Exit with error code on warnings.
+
+### `--compiler-warnings <warnings>`
+Comma-separated `code:behaviour` pairs (`ignore` or `error`):
+
+```sh
+npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_missing_attribute:error"
+```
+
+### `--diagnostic-sources <sources>`
+Comma-separated sources (default: all active):
+- `js` (includes TypeScript)
+- `svelte`
+- `css`
+
+```sh
+npx sv check --diagnostic-sources "js,svelte"
+```
+
+### `--threshold <level>`
+Filter diagnostics:
+- `warning` (default) — errors and warnings
+- `error` — only errors
+
+## Machine-readable output
+
+`--output machine` or `machine-verbose` formats output for CI/automation.
+
+Each row: columns separated by single space. First column: timestamp (ms). Second column: row type.
+
+**START row:** workspace folder (quoted)
+```
+1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
+```
+
+**machine format:** filename, line, column, message (quoted)
+```
+1590680326283 ERROR "codeactions.svelte" 1:16 "Cannot find module 'blubb' or its corresponding type declarations."
+1590680326778 WARNING "imported-file.svelte" 0:37 "Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`"
+```
+
+**machine-verbose format:** ndjson with timestamp prefix
+```
+1590680326283 {"type":"ERROR","fn":"codeaction.svelte","start":{"line":1,"character":16},"end":{"line":1,"character":23},"message":"Cannot find module 'blubb' or its corresponding type declarations.","code":2307,"source":"js"}
+1590680326778 {"type":"WARNING","filename":"imported-file.svelte","start":{"line":0,"character":37},"end":{"line":0,"character":51},"message":"Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`","code":"unused-export-let","source":"svelte"}
+```
+
+**COMPLETED row:** summary
+```
+1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS
+```
+
+**FAILURE row:** runtime errors
+```
+1590680328921 FAILURE "Connection closed"
+```
+
+## FAQ
+
+**Why no option to check only specific files?**
+`svelte-check` needs the whole project for valid checks. Partial checks miss errors in unchanged files (e.g., renamed prop not updated at usage sites).
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/sv-create.md b/packages/mcp-server/summaries/distilled/cli/sv-create.md
new file mode 100644
index 00000000..899c0152
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/sv-create.md
@@ -0,0 +1,39 @@
+# sv create
+
+Sets up a new SvelteKit project with optional additional functionality.
+
+## Usage
+
+```sh
+npx sv create [options] [path]
+```
+
+## Options
+
+### `--from-playground <url>`
+Create project from a [playground](/playground) URL. Downloads files, detects dependencies, and sets up complete project structure.
+
+```sh
+npx sv create --from-playground="https://svelte.dev/playground/hello-world"
+```
+
+### `--template <name>`
+- `minimal` — barebones scaffolding
+- `demo` — showcase app with word guessing game (works without JS)
+- `library` — Svelte library template with `svelte-package`
+
+### `--types <option>`
+- `ts` — `.ts` files and `lang="ts"` in `.svelte` components
+- `jsdoc` — [JSDoc syntax](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) for types
+
+### `--no-types`
+Disable typechecking (not recommended)
+
+### `--no-add-ons`
+Skip interactive add-ons prompt
+
+### `--install <package-manager>`
+Install dependencies with: `npm`, `pnpm`, `yarn`, `bun`, or `deno`
+
+### `--no-install`
+Skip dependency installation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/sv-migrate.md b/packages/mcp-server/summaries/distilled/cli/sv-migrate.md
new file mode 100644
index 00000000..5dcc1f66
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/sv-migrate.md
@@ -0,0 +1,39 @@
+# sv migrate
+
+CLI tool for migrating Svelte(Kit) codebases. Delegates to [`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate).
+
+May add `@migration` task annotations in code for manual completion.
+
+## Usage
+
+```sh
+npx sv migrate
+```
+
+Or specify migration:
+```sh
+npx sv migrate [migration]
+```
+
+## Migrations
+
+### `app-state`
+Migrates `$app/stores` → `$app/state` in `.svelte` files. [Details](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated)
+
+### `svelte-5`
+Upgrades Svelte 4 → 5, converts components to [runes](../svelte/what-are-runes) syntax. [Migration guide](../svelte/v5-migration-guide)
+
+### `self-closing-tags`
+Replaces self-closing non-void elements. [PR](https://github.com/sveltejs/kit/pull/12128)
+
+### `svelte-4`
+Upgrades Svelte 3 → 4. [Migration guide](../svelte/v4-migration-guide)
+
+### `sveltekit-2`
+Upgrades SvelteKit 1 → 2. [Migration guide](../kit/migrating-to-sveltekit-2)
+
+### `package`
+Upgrades `@sveltejs/package` v1 → v2. [PR](https://github.com/sveltejs/kit/pull/8922)
+
+### `routes`
+Upgrades pre-release SvelteKit to v1 filesystem routing. [Discussion](https://github.com/sveltejs/kit/discussions/5774)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/sveltekit-adapter.md b/packages/mcp-server/summaries/distilled/cli/sveltekit-adapter.md
new file mode 100644
index 00000000..af9a9305
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/sveltekit-adapter.md
@@ -0,0 +1,24 @@
+# SvelteKit Adapters
+
+Adapters enable deployment to various platforms.
+
+## Usage
+
+```sh
+npx sv add sveltekit-adapter
+```
+
+Installs and configures chosen adapter in `svelte.config.js`.
+
+## Adapter Options
+
+- `auto` — [`@sveltejs/adapter-auto`](/docs/kit/adapter-auto) - auto-selects adapter, less configurable
+- `node` — [`@sveltejs/adapter-node`](/docs/kit/adapter-node) - standalone Node server
+- `static` — [`@sveltejs/adapter-static`](/docs/kit/adapter-static) - static site generator (SSG)
+- `vercel` — [`@sveltejs/adapter-vercel`](/docs/kit/adapter-vercel) - Vercel deployment
+- `cloudflare` — [`@sveltejs/adapter-cloudflare`](/docs/kit/adapter-cloudflare) - Cloudflare deployment
+- `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) - Netlify deployment
+
+```sh
+npx sv add sveltekit-adapter=adapter:node
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/tailwind.md b/packages/mcp-server/summaries/distilled/cli/tailwind.md
new file mode 100644
index 00000000..5a547dc7
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/tailwind.md
@@ -0,0 +1,26 @@
+# Tailwind CSS
+
+## Setup
+
+```sh
+npx sv add tailwindcss
+```
+
+## What's Installed
+
+- Tailwind config following SvelteKit guide
+- Tailwind Vite plugin
+- Updated `app.css` and `+layout.svelte` (SvelteKit) or `App.svelte` (Vite)
+- Prettier integration (if installed)
+
+## Options
+
+Add plugins via CLI:
+
+```sh
+npx sv add tailwindcss="plugins:typography"
+```
+
+Available plugins:
+- `typography` — [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography)
+- `forms` — [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/cli/vitest.md b/packages/mcp-server/summaries/distilled/cli/vitest.md
new file mode 100644
index 00000000..51248ff3
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/cli/vitest.md
@@ -0,0 +1,11 @@
+# Vitest
+
+Vite-native testing framework for SvelteKit.
+
+## Setup
+
+```sh
+npx sv add vitest
+```
+
+Installs packages, adds scripts to `package.json`, configures client/server-aware Svelte testing in Vite config, and includes demo tests.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$app-environment.md b/packages/mcp-server/summaries/distilled/kit/$app-environment.md
new file mode 100644
index 00000000..31504680
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$app-environment.md
@@ -0,0 +1,33 @@
+# $app/environment
+
+```js
+import { browser, building, dev, version } from '$app/environment';
+```
+
+## browser
+`true` if app is running in the browser.
+
+```dts
+const browser: boolean;
+```
+
+## building
+`true` during the build step and prerendering.
+
+```dts
+const building: boolean;
+```
+
+## dev
+Whether dev server is running. Not guaranteed to match `NODE_ENV` or `MODE`.
+
+```dts
+const dev: boolean;
+```
+
+## version
+The value of `config.kit.version.name`.
+
+```dts
+const version: string;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$app-forms.md b/packages/mcp-server/summaries/distilled/kit/$app-forms.md
new file mode 100644
index 00000000..67b46a03
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$app-forms.md
@@ -0,0 +1,75 @@
+# $app/forms
+
+```js
+import { applyAction, deserialize, enhance } from '$app/forms';
+```
+
+## applyAction
+
+Updates `form` property and `page.status` of current page with given data. Redirects to nearest error page on error.
+
+```dts
+function applyAction<
+	Success extends Record<string, unknown> | undefined,
+	Failure extends Record<string, unknown> | undefined
+>(
+	result: import('@sveltejs/kit').ActionResult<Success, Failure>
+): Promise<void>;
+```
+
+## deserialize
+
+Deserializes form submission response.
+
+```js
+// @errors: 7031
+import { deserialize } from '$app/forms';
+
+async function handleSubmit(event) {
+	const response = await fetch('/form?/action', {
+		method: 'POST',
+		body: new FormData(event.target)
+	});
+
+	const result = deserialize(await response.text());
+	// ...
+}
+```
+
+```dts
+function deserialize<
+	Success extends Record<string, unknown> | undefined,
+	Failure extends Record<string, unknown> | undefined
+>(
+	result: string
+): import('@sveltejs/kit').ActionResult<Success, Failure>;
+```
+
+## enhance
+
+Progressive enhancement for `<form>` elements.
+
+**`submit` function**: Called on submission with FormData and `action`. Call `cancel` to prevent submission. Use abort `controller` to cancel if another submission starts. Return a function to handle server response, or return nothing for default behavior.
+
+**Default behavior**:
+- Updates `form` prop if action is on same page
+- Updates `page.status`
+- Resets form and invalidates all data on successful submission (no redirect)
+- Redirects on redirect response
+- Redirects to error page on unexpected error
+
+**Custom callback**: Call `update` for default behavior with options:
+- `reset: false` - don't reset form values after success
+- `invalidateAll: false` - don't call `invalidateAll` after submission
+
+```dts
+function enhance<
+	Success extends Record<string, unknown> | undefined,
+	Failure extends Record<string, unknown> | undefined
+>(
+	form_element: HTMLFormElement,
+	submit?: import('@sveltejs/kit').SubmitFunction<Success, Failure>
+): {
+	destroy(): void;
+};
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$app-navigation.md b/packages/mcp-server/summaries/distilled/kit/$app-navigation.md
new file mode 100644
index 00000000..fc940ee2
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$app-navigation.md
@@ -0,0 +1,160 @@
+# $app/navigation
+
+```js
+import {
+	afterNavigate,
+	beforeNavigate,
+	disableScrollHandling,
+	goto,
+	invalidate,
+	invalidateAll,
+	onNavigate,
+	preloadCode,
+	preloadData,
+	pushState,
+	refreshAll,
+	replaceState
+} from '$app/navigation';
+```
+
+## afterNavigate
+
+Runs callback when component mounts and on every navigation. Must be called during component initialization. Active while component is mounted.
+
+```dts
+function afterNavigate(
+	callback: (navigation: import('@sveltejs/kit').AfterNavigate) => void
+): void;
+```
+
+## beforeNavigate
+
+Intercepts navigation before it happens (links, `goto()`, browser back/forward). Call `cancel()` to prevent navigation. For `'leave'` navigations (closing tab/navigating away), `cancel()` triggers native browser confirmation dialog.
+
+- `navigation.to.route.id` is `null` for non-SvelteKit routes
+- `navigation.willUnload` is `true` for `'leave'` navigations and `'link'` navigations where `navigation.to.route === null`
+
+Must be called during component initialization. Active while component is mounted.
+
+```dts
+function beforeNavigate(
+	callback: (navigation: import('@sveltejs/kit').BeforeNavigate) => void
+): void;
+```
+
+## disableScrollHandling
+
+Disables SvelteKit's built-in scroll handling when called during page update (in `onMount`, `afterNavigate`, or actions). Discouraged as it breaks user expectations.
+
+```dts
+function disableScrollHandling(): void;
+```
+
+## goto
+
+Navigate programmatically. Returns Promise that resolves on navigation completion. For external URLs, use `window.location = url` instead.
+
+```dts
+function goto(
+	url: string | URL,
+	opts?: {
+		replaceState?: boolean | undefined;
+		noScroll?: boolean | undefined;
+		keepFocus?: boolean | undefined;
+		invalidateAll?: boolean | undefined;
+		invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
+		state?: App.PageState | undefined;
+	}
+): Promise<void>;
+```
+
+## invalidate
+
+Re-runs `load` functions that depend on the URL (via `fetch` or `depends`). Returns Promise that resolves when page updates.
+
+- String/URL must match exactly what was passed to `fetch`/`depends` (including query params)
+- Custom identifiers: use format `[a-z]+:` (e.g. `custom:state`)
+- Function predicate receives full URL, re-runs if returns `true`
+
+```ts
+// Match '/path' regardless of query parameters
+import { invalidate } from '$app/navigation';
+
+invalidate((url) => url.pathname === '/path');
+```
+
+```dts
+function invalidate(
+	resource: string | URL | ((url: URL) => boolean)
+): Promise<void>;
+```
+
+## invalidateAll
+
+Re-runs all `load` functions for current page. Returns Promise that resolves when page updates.
+
+```dts
+function invalidateAll(): Promise<void>;
+```
+
+## onNavigate
+
+Runs callback immediately before navigation (except full-page navigations). Return Promise to delay navigation completion (useful for `document.startViewTransition`). Avoid slow promises as navigation appears stalled.
+
+Returning a function (or Promise resolving to function) calls it after DOM updates.
+
+Must be called during component initialization. Active while component is mounted.
+
+```dts
+function onNavigate(
+	callback: (navigation: import('@sveltejs/kit').OnNavigate) => 
+		MaybePromise<(() => void) | void>
+): void;
+```
+
+## preloadCode
+
+Imports code for routes not yet fetched. Specify routes by pathname: `/about` or `/blog/*`. Doesn't call `load` functions. Returns Promise resolving when modules imported.
+
+```dts
+function preloadCode(pathname: string): Promise<void>;
+```
+
+## preloadData
+
+Preloads page: imports code and calls `load` functions. Same as hovering/tapping `<a>` with `data-sveltekit-preload-data`. Makes navigation instantaneous if next navigation is to `href`. Returns Promise with `load` results.
+
+```dts
+function preloadData(href: string): Promise<
+	| { type: 'loaded'; status: number; data: Record<string, any>; }
+	| { type: 'redirect'; location: string; }
+>;
+```
+
+## pushState
+
+Creates new history entry with given `page.state`. Pass `''` for current URL. Used for shallow routing.
+
+```dts
+function pushState(url: string | URL, state: App.PageState): void;
+```
+
+## refreshAll
+
+Refreshes all active remote functions and re-runs `load` functions (unless disabled). Returns Promise resolving when page updates.
+
+```dts
+function refreshAll({
+	includeLoadFunctions
+}?: {
+	includeLoadFunctions?: boolean;
+}): Promise<void>;
+```
+
+## replaceState
+
+Replaces current history entry with given `page.state`. Pass `''` for current URL. Used for shallow routing.
+
+```dts
+function replaceState(url: string | URL, state: App.PageState): void;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$app-paths.md b/packages/mcp-server/summaries/distilled/kit/$app-paths.md
new file mode 100644
index 00000000..87776457
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$app-paths.md
@@ -0,0 +1,54 @@
+# $app/paths
+
+```js
+import { asset, assets, base, resolve, resolveRoute } from '$app/paths';
+```
+
+## asset
+
+Resolve URL of an asset in `static` directory by prefixing with `config.kit.paths.assets` or base path.
+
+During SSR, base path is relative and depends on current page.
+
+```svelte
+<script>
+	import { asset } from '$app/paths';
+</script>
+
+<img alt="a potato" src={asset('/potato.jpg')} />
+```
+
+```dts
+function asset(file: Asset): string;
+```
+
+## resolve
+
+Resolve pathname by prefixing with base path, or resolve route ID by populating dynamic segments with parameters.
+
+During SSR, base path is relative and depends on current page.
+
+```js
+// @errors: 7031
+import { resolve } from '$app/paths';
+
+// using a pathname
+const resolved = resolve(`/blog/hello-world`);
+
+// using a route ID plus parameters
+const resolved = resolve('/blog/[slug]', {
+	slug: 'hello-world'
+});
+```
+
+```dts
+function resolve<T extends RouteId | Pathname>(
+	...args: ResolveArgs<T>
+): ResolvedPathname;
+```
+
+## Deprecated
+
+- **assets**: Use `asset(...)` instead. Absolute path matching `config.kit.paths.assets`.
+- **base**: Use `resolve(...)` instead. String matching `config.kit.paths.base`.
+- **resolveRoute**: Use `resolve(...)` instead.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$app-server.md b/packages/mcp-server/summaries/distilled/kit/$app-server.md
new file mode 100644
index 00000000..1da7607d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$app-server.md
@@ -0,0 +1,148 @@
+# $app/server
+
+```js
+import {
+	command,
+	form,
+	getRequestEvent,
+	prerender,
+	query,
+	read
+} from '$app/server';
+```
+
+## command
+*Available since 2.27*
+
+Creates a remote command. When called from browser, invokes function on server via `fetch`.
+
+```dts
+function command<Output>(fn: () => Output): RemoteCommand<void, Output>;
+
+function command<Input, Output>(
+	validate: 'unchecked',
+	fn: (arg: Input) => Output
+): RemoteCommand<Input, Output>;
+
+function command<Schema extends StandardSchemaV1, Output>(
+	validate: Schema,
+	fn: (arg: StandardSchemaV1.InferOutput<Schema>) => Output
+): RemoteCommand<StandardSchemaV1.InferInput<Schema>, Output>;
+```
+
+See [Remote functions](/docs/kit/remote-functions#command).
+
+## form
+*Available since 2.27*
+
+Creates a form object that can be spread onto a `<form>` element.
+
+```dts
+function form<Output>(
+	fn: (invalid: Invalid<void>) => MaybePromise<Output>
+): RemoteForm<void, Output>;
+
+function form<Input extends RemoteFormInput, Output>(
+	validate: 'unchecked',
+	fn: (data: Input, invalid: Invalid<Input>) => MaybePromise<Output>
+): RemoteForm<Input, Output>;
+
+function form<Schema extends StandardSchemaV1<RemoteFormInput, Record<string, any>>, Output>(
+	validate: Schema,
+	fn: (data: StandardSchemaV1.InferOutput<Schema>, invalid: Invalid<StandardSchemaV1.InferOutput<Schema>>) => MaybePromise<Output>
+): RemoteForm<StandardSchemaV1.InferInput<Schema>, Output>;
+```
+
+See [Remote functions](/docs/kit/remote-functions#form).
+
+## getRequestEvent
+*Available since 2.20.0*
+
+Returns current `RequestEvent`. Use in server hooks, server `load` functions, actions, and endpoints.
+
+**Important:** In environments without `AsyncLocalStorage`, must be called synchronously (not after `await`).
+
+```dts
+function getRequestEvent(): RequestEvent;
+```
+
+## prerender
+*Available since 2.27*
+
+Creates a remote prerender function. When called from browser, invokes function on server via `fetch`.
+
+```dts
+function prerender<Output>(
+	fn: () => MaybePromise<Output>,
+	options?: { inputs?: RemotePrerenderInputsGenerator<void>; dynamic?: boolean; }
+): RemotePrerenderFunction<void, Output>;
+
+function prerender<Input, Output>(
+	validate: 'unchecked',
+	fn: (arg: Input) => MaybePromise<Output>,
+	options?: { inputs?: RemotePrerenderInputsGenerator<Input>; dynamic?: boolean; }
+): RemotePrerenderFunction<Input, Output>;
+
+function prerender<Schema extends StandardSchemaV1, Output>(
+	schema: Schema,
+	fn: (arg: StandardSchemaV1.InferOutput<Schema>) => MaybePromise<Output>,
+	options?: { inputs?: RemotePrerenderInputsGenerator<StandardSchemaV1.InferInput<Schema>>; dynamic?: boolean; }
+): RemotePrerenderFunction<StandardSchemaV1.InferInput<Schema>, Output>;
+```
+
+See [Remote functions](/docs/kit/remote-functions#prerender).
+
+## query
+*Available since 2.27*
+
+Creates a remote query. When called from browser, invokes function on server via `fetch`.
+
+```dts
+function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output>;
+
+function query<Input, Output>(
+	validate: 'unchecked',
+	fn: (arg: Input) => MaybePromise<Output>
+): RemoteQueryFunction<Input, Output>;
+
+function query<Schema extends StandardSchemaV1, Output>(
+	schema: Schema,
+	fn: (arg: StandardSchemaV1.InferOutput<Schema>) => MaybePromise<Output>
+): RemoteQueryFunction<StandardSchemaV1.InferInput<Schema>, Output>;
+```
+
+### query.batch
+*Available since 2.35*
+
+Collects multiple calls and executes them in a single request.
+
+```dts
+function batch<Input, Output>(
+	validate: 'unchecked',
+	fn: (args: Input[]) => MaybePromise<(arg: Input, idx: number) => Output>
+): RemoteQueryFunction<Input, Output>;
+
+function batch<Schema extends StandardSchemaV1, Output>(
+	schema: Schema,
+	fn: (args: StandardSchemaV1.InferOutput<Schema>[]) => MaybePromise<(arg: StandardSchemaV1.InferOutput<Schema>, idx: number) => Output>
+): RemoteQueryFunction<StandardSchemaV1.InferInput<Schema>, Output>;
+```
+
+See [Remote functions](/docs/kit/remote-functions#query) and [query.batch](/docs/kit/remote-functions#query.batch).
+
+## read
+*Available since 2.4.0*
+
+Reads contents of an imported asset from filesystem.
+
+```js
+import { read } from '$app/server';
+import somefile from './somefile.txt';
+
+const asset = read(somefile);
+const text = await asset.text();
+```
+
+```dts
+function read(asset: string): Response;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$app-state.md b/packages/mcp-server/summaries/distilled/kit/$app-state.md
new file mode 100644
index 00000000..d27afa36
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$app-state.md
@@ -0,0 +1,78 @@
+# $app/state
+
+Three read-only state objects for SvelteKit apps. Added in 2.12 (use `$app/stores` for earlier versions).
+
+```js
+import { navigating, page, updated } from '$app/state';
+```
+
+## navigating
+
+Read-only object representing in-progress navigation. `null` when no navigation occurring or during SSR.
+
+```dts
+const navigating:
+	| import('@sveltejs/kit').Navigation
+	| {
+			from: null;
+			to: null;
+			type: null;
+			willUnload: null;
+			delta: null;
+			complete: null;
+	  };
+```
+
+Properties: `from`, `to`, `type`, and `delta` (if `type === 'popstate'`).
+
+## page
+
+Read-only reactive object with current page info:
+- Combined `data` from all pages/layouts
+- Current `form` prop value
+- Page state from `goto`, `pushState`, `replaceState`
+- Metadata: URL, route, params, error status
+
+```svelte
+<!--- file: +layout.svelte --->
+<script>
+	import { page } from '$app/state';
+</script>
+
+<p>Currently at {page.url.pathname}</p>
+
+{#if page.error}
+	<span class="red">Problem detected</span>
+{:else}
+	<span class="small">All systems operational</span>
+{/if}
+```
+
+**Important:** Changes only work with runes, not legacy reactivity:
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+	import { page } from '$app/state';
+	const id = $derived(page.params.id); // ✓ Updates correctly
+	$: badId = page.params.id; // ✗ Never updates after initial load
+</script>
+```
+
+Server: read only during rendering (not in `load` functions).  
+Browser: read anytime.
+
+```dts
+const page: import('@sveltejs/kit').Page;
+```
+
+## updated
+
+Read-only reactive value, initially `false`. Becomes `true` when new app version detected (if `version.pollInterval` configured). `updated.check()` forces immediate check.
+
+```dts
+const updated: {
+	get current(): boolean;
+	check(): Promise<boolean>;
+};
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$app-stores.md b/packages/mcp-server/summaries/distilled/kit/$app-stores.md
new file mode 100644
index 00000000..912bd242
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$app-stores.md
@@ -0,0 +1,63 @@
+# $app/stores
+
+**DEPRECATED**: Use `$app/state` instead (SvelteKit 2.12+). Store-based equivalents for legacy support.
+
+```js
+import { getStores, navigating, page, updated } from '$app/stores';
+```
+
+## getStores
+
+```dts
+function getStores(): {
+	page: typeof page;
+	navigating: typeof navigating;
+	updated: typeof updated;
+};
+```
+
+## navigating
+
+**Readable store** for navigation state.
+
+- **During navigation**: `Navigation` object with `from`, `to`, `type`, and `delta` (if `type === 'popstate'`)
+- **When idle**: `null`
+
+**Server**: Subscribe only during component initialization  
+**Browser**: Subscribe anytime
+
+```dts
+const navigating: import('svelte/store').Readable<
+	import('@sveltejs/kit').Navigation | null
+>;
+```
+
+## page
+
+**Readable store** containing page data.
+
+**Server**: Subscribe only during component initialization  
+**Browser**: Subscribe anytime
+
+```dts
+const page: import('svelte/store').Readable<
+	import('@sveltejs/kit').Page
+>;
+```
+
+## updated
+
+**Readable store** for app version updates.
+
+- Initial value: `false`
+- Becomes `true` when new version detected (if `version.pollInterval` configured)
+- `updated.check()`: Force immediate version check
+
+**Server**: Subscribe only during component initialization  
+**Browser**: Subscribe anytime
+
+```dts
+const updated: import('svelte/store').Readable<boolean> & {
+	check(): Promise<boolean>;
+};
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$app-types.md b/packages/mcp-server/summaries/distilled/kit/$app-types.md
new file mode 100644
index 00000000..20ac97b2
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$app-types.md
@@ -0,0 +1,59 @@
+# $app/types
+
+Generated types for routes in your app (available since SvelteKit 2.26).
+
+```js
+import type { RouteId, RouteParams, LayoutParams } from '$app/types';
+```
+
+## Asset
+
+Union of all filenames in `static` directory + wildcard for imported asset paths.
+
+```dts
+type Asset = '/favicon.png' | '/robots.txt' | (string & {});
+```
+
+## RouteId
+
+Union of all route IDs. Used for `page.route.id` and `event.route.id`.
+
+```dts
+type RouteId = '/' | '/my-route' | '/my-other-route/[param]';
+```
+
+## Pathname
+
+Union of all valid pathnames.
+
+```dts
+type Pathname = '/' | '/my-route' | `/my-other-route/${string}` & {};
+```
+
+## ResolvedPathname
+
+Like `Pathname` but possibly prefixed with base path. Used for `page.url.pathname`.
+
+```dts
+type ResolvedPathname = `${'' | `/${string}`}/` | `${'' | `/${string}`}/my-route` | `${'' | `/${string}`}/my-other-route/${string}` | {};
+```
+
+## RouteParams
+
+Get parameters for a route.
+
+```ts
+type BlogParams = RouteParams<'/blog/[slug]'>; // { slug: string }
+```
+
+```dts
+type RouteParams<T extends RouteId> = { /* generated */ } | Record<string, never>;
+```
+
+## LayoutParams
+
+Get parameters for a layout, including optional parameters from child routes.
+
+```dts
+type RouteParams<T extends RouteId> = { /* generated */ } | Record<string, never>;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$env-dynamic-private.md b/packages/mcp-server/summaries/distilled/kit/$env-dynamic-private.md
new file mode 100644
index 00000000..36f59912
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$env-dynamic-private.md
@@ -0,0 +1,15 @@
+# $env/dynamic/private
+
+Access to runtime environment variables from the platform (e.g., `process.env` in adapter-node).
+
+**Rules:**
+- Only includes variables that do NOT start with `config.kit.env.publicPrefix`
+- Only includes variables that DO start with `config.kit.env.privatePrefix` (if configured)
+- **Cannot be imported in client-side code**
+
+```ts
+import { env } from '$env/dynamic/private';
+console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);
+```
+
+**Note:** In dev, always includes `.env` variables. In prod, depends on adapter.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$env-dynamic-public.md b/packages/mcp-server/summaries/distilled/kit/$env-dynamic-public.md
new file mode 100644
index 00000000..24b0aeee
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$env-dynamic-public.md
@@ -0,0 +1,13 @@
+# $env/dynamic/public
+
+Runtime access to public environment variables (prefixed with `PUBLIC_` by default via `config.kit.env.publicPrefix`).
+
+**Key differences:**
+- Only includes variables with public prefix (safe for client-side)
+- All public dynamic env vars sent server→client (increases network payload)
+- **Prefer `$env/static/public`** when possible to avoid larger requests
+
+```ts
+import { env } from '$env/dynamic/public';
+console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$env-static-private.md b/packages/mcp-server/summaries/distilled/kit/$env-static-private.md
new file mode 100644
index 00000000..5f37c86b
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$env-static-private.md
@@ -0,0 +1,29 @@
+# $env/static/private
+
+Server-only module for private environment variables loaded from `.env` files and `process.env`.
+
+**Key characteristics:**
+- Cannot be imported in client-side code
+- Includes variables that do NOT begin with `config.kit.env.publicPrefix`
+- Optionally filtered by `config.kit.env.privatePrefix`
+- Values are **statically injected at build time** (enables dead code elimination)
+
+## Usage
+
+```ts
+import { API_KEY } from '$env/static/private';
+```
+
+## Best practices
+
+Declare all referenced env vars (even if empty) in `.env`:
+
+```
+MY_FEATURE_FLAG=""
+```
+
+Override from command line:
+
+```sh
+MY_FEATURE_FLAG="enabled" npm run dev
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$env-static-public.md b/packages/mcp-server/summaries/distilled/kit/$env-static-public.md
new file mode 100644
index 00000000..93c08686
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$env-static-public.md
@@ -0,0 +1,7 @@
+# $env/static/public
+
+Environment variables with `PUBLIC_` prefix (configurable via `config.kit.env.publicPrefix`). Safe for client-side code. Values replaced at build time.
+
+```ts
+import { PUBLIC_BASE_URL } from '$env/static/public';
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$lib.md b/packages/mcp-server/summaries/distilled/kit/$lib.md
new file mode 100644
index 00000000..d75143e6
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$lib.md
@@ -0,0 +1,17 @@
+# $lib Import Alias
+
+SvelteKit provides `$lib` alias for importing from `src/lib`. Configure via [config file](configuration#files).
+
+```svelte
+<!--- file: src/lib/Component.svelte --->
+A reusable component
+```
+
+```svelte
+<!--- file: src/routes/+page.svelte --->
+<script>
+    import Component from '$lib/Component.svelte';
+</script>
+
+<Component />
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/$service-worker.md b/packages/mcp-server/summaries/distilled/kit/$service-worker.md
new file mode 100644
index 00000000..a0afd7b1
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/$service-worker.md
@@ -0,0 +1,49 @@
+# $service-worker
+
+```js
+import { base, build, files, prerendered, version } from '$service-worker';
+```
+
+Only available to [service workers](/docs/kit/service-workers).
+
+## base
+
+```ts
+const base: string;
+```
+
+Base path of deployment. Equivalent to `config.kit.paths.base`, calculated from `location.pathname`. Works correctly in subdirectories.
+
+Note: No `assets` export since service workers can't be used if `config.kit.paths.assets` is specified.
+
+## build
+
+```ts
+const build: string[];
+```
+
+Array of URLs for Vite-generated files. Use with `cache.addAll(build)`. Empty during development.
+
+## files
+
+```ts
+const files: string[];
+```
+
+Array of URLs from static directory (`config.kit.files.assets`). Customize via [`config.kit.serviceWorker.files`](/docs/kit/configuration#serviceWorker).
+
+## prerendered
+
+```ts
+const prerendered: string[];
+```
+
+Array of prerendered page/endpoint pathnames. Empty during development.
+
+## version
+
+```ts
+const version: string;
+```
+
+From [`config.kit.version`](/docs/kit/configuration#version). Use for unique cache names to invalidate old caches on deployment.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-hooks.md b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-hooks.md
new file mode 100644
index 00000000..0429a1b4
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-hooks.md
@@ -0,0 +1,81 @@
+# sequence
+
+Helper for chaining multiple `handle` functions in middleware-like manner.
+
+```js
+import { sequence } from '@sveltejs/kit/hooks';
+```
+
+## Behavior
+
+- `transformPageChunk`: applied in **reverse order**, merged
+- `preload`: applied in **forward order**, first wins (subsequent calls skipped)
+- `filterSerializedResponseHeaders`: same as `preload` (first wins)
+
+## Example
+
+```js
+/// file: src/hooks.server.js
+import { sequence } from '@sveltejs/kit/hooks';
+
+/** @type {import('@sveltejs/kit').Handle} */
+async function first({ event, resolve }) {
+	console.log('first pre-processing');
+	const result = await resolve(event, {
+		transformPageChunk: ({ html }) => {
+			// transforms are applied in reverse order
+			console.log('first transform');
+			return html;
+		},
+		preload: () => {
+			// this one wins as it's the first defined in the chain
+			console.log('first preload');
+			return true;
+		}
+	});
+	console.log('first post-processing');
+	return result;
+}
+
+/** @type {import('@sveltejs/kit').Handle} */
+async function second({ event, resolve }) {
+	console.log('second pre-processing');
+	const result = await resolve(event, {
+		transformPageChunk: ({ html }) => {
+			console.log('second transform');
+			return html;
+		},
+		preload: () => {
+			console.log('second preload');
+			return true;
+		},
+		filterSerializedResponseHeaders: () => {
+			// this one wins as it's the first defined in the chain
+			console.log('second filterSerializedResponseHeaders');
+			return true;
+		}
+	});
+	console.log('second post-processing');
+	return result;
+}
+
+export const handle = sequence(first, second);
+```
+
+**Output:**
+```
+first pre-processing
+first preload
+second pre-processing
+second filterSerializedResponseHeaders
+second transform
+first transform
+second post-processing
+first post-processing
+```
+
+## Type
+
+```dts
+function sequence(...handlers: Handle[]): Handle;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-node-polyfills.md b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-node-polyfills.md
new file mode 100644
index 00000000..49a4dd71
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-node-polyfills.md
@@ -0,0 +1,11 @@
+# installPolyfills
+
+Makes web APIs available as globals: `crypto`, `File`
+
+```js
+import { installPolyfills } from '@sveltejs/kit/node/polyfills';
+```
+
+```dts
+function installPolyfills(): void;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-node.md b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-node.md
new file mode 100644
index 00000000..c36e653a
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-node.md
@@ -0,0 +1,40 @@
+# @sveltejs/kit/node
+
+Node.js adapter utilities for converting between Node.js and Web APIs.
+
+## createReadableStream
+
+Converts a file on disk to a readable stream.
+
+```ts
+function createReadableStream(file: string): ReadableStream;
+```
+
+*Available since 2.4.0*
+
+## getRequest
+
+Converts Node.js `IncomingMessage` to Web `Request`.
+
+```ts
+function getRequest({
+	request,
+	base,
+	bodySizeLimit
+}: {
+	request: import('http').IncomingMessage;
+	base: string;
+	bodySizeLimit?: number;
+}): Promise<Request>;
+```
+
+## setResponse
+
+Converts Web `Response` to Node.js `ServerResponse`.
+
+```ts
+function setResponse(
+	res: import('http').ServerResponse,
+	response: Response
+): Promise<void>;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-vite.md b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-vite.md
new file mode 100644
index 00000000..7bf47978
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit-vite.md
@@ -0,0 +1,11 @@
+# sveltekit
+
+Returns the SvelteKit Vite plugins.
+
+```js
+import { sveltekit } from '@sveltejs/kit/vite';
+```
+
+```ts
+function sveltekit(): Promise<import('vite').Plugin[]>;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit.md b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit.md
new file mode 100644
index 00000000..89c7608c
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/@sveltejs-kit.md
@@ -0,0 +1,418 @@
+# @sveltejs/kit Server APIs
+
+## Core Functions
+
+### error
+Throws HTTP error with status code and optional message. Stops request handling and returns error response.
+
+```ts
+function error(status: number, body: App.Error): never;
+function error(status: number, body?: { message: string }): never;
+```
+
+**Important**: Don't catch the thrown error - it prevents SvelteKit from handling it.
+
+### redirect
+Redirects a request. Common status codes:
+- `303`: GET redirect (often after form POST)
+- `307`: Temporary redirect (keeps method)
+- `308`: Permanent redirect (keeps method, SEO transfer)
+
+```ts
+function redirect(
+  status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308,
+  location: string | URL
+): never;
+```
+
+**Important**: Don't catch the thrown redirect.
+
+### fail
+Creates `ActionFailure` for failed form submissions.
+
+```ts
+function fail(status: number): ActionFailure<undefined>;
+function fail<T>(status: number, data: T): ActionFailure<T>;
+```
+
+### json / text
+Create Response objects:
+
+```ts
+function json(data: any, init?: ResponseInit): Response;
+function text(body: string, init?: ResponseInit): Response;
+```
+
+### normalizeUrl
+Strips SvelteKit-internal suffixes and trailing slashes. Available since 2.18.0.
+
+```ts
+const { url, denormalize } = normalizeUrl('/blog/post/__data.json');
+console.log(url.pathname); // /blog/post
+console.log(denormalize('/blog/post/a')); // /blog/post/a/__data.json
+```
+
+## Type Checkers
+
+```ts
+function isActionFailure(e: unknown): e is ActionFailure;
+function isHttpError(e: unknown, status?: number): e is HttpError;
+function isRedirect(e: unknown): e is Redirect;
+```
+
+## Server Class
+
+```ts
+class Server {
+  constructor(manifest: SSRManifest);
+  init(options: ServerInitOptions): Promise<void>;
+  respond(request: Request, options: RequestOptions): Promise<Response>;
+}
+```
+
+## Hooks
+
+### Handle
+Runs on every request. Receives `event` and `resolve` function.
+
+```ts
+type Handle = (input: {
+  event: RequestEvent;
+  resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
+}) => MaybePromise<Response>;
+```
+
+### HandleFetch
+Modifies `event.fetch()` calls on server/during prerendering.
+
+```ts
+type HandleFetch = (input: {
+  event: RequestEvent;
+  request: Request;
+  fetch: typeof fetch;
+}) => MaybePromise<Response>;
+```
+
+### HandleError
+
+**Client-side**: Runs on unexpected navigation errors. Must never throw.
+
+```ts
+type HandleClientError = (input: {
+  error: unknown;
+  event: NavigationEvent;
+  status: number;
+  message: string;
+}) => MaybePromise<void | App.Error>;
+```
+
+**Server-side**: Runs on unexpected request errors. Must never throw.
+
+```ts
+type HandleServerError = (input: {
+  error: unknown;
+  event: RequestEvent;
+  status: number;
+  message: string;
+}) => MaybePromise<void | App.Error>;
+```
+
+### HandleValidationError
+Runs when remote function argument validation fails.
+
+```ts
+type HandleValidationError = (input: {
+  issues: StandardSchemaV1.Issue[];
+  event: RequestEvent;
+}) => MaybePromise<App.Error>;
+```
+
+### Reroute
+Modifies URL before route determination. Available since 2.3.0.
+
+```ts
+type Reroute = (event: {
+  url: URL;
+  fetch: typeof fetch;
+}) => MaybePromise<void | string>;
+```
+
+### Init Hooks
+Available since 2.10.0.
+
+```ts
+type ClientInit = () => MaybePromise<void>; // Runs when app starts in browser
+type ServerInit = () => MaybePromise<void>; // Runs before first request
+```
+
+### Transport
+Custom type serialization across server/client. Available since 2.11.0.
+
+```ts
+type Transport = Record<string, Transporter>;
+
+interface Transporter<T, U> {
+  encode: (value: T) => false | U;
+  decode: (data: U) => T;
+}
+```
+
+## RequestEvent
+
+Core event object for server-side code:
+
+```ts
+interface RequestEvent<Params, RouteId> {
+  cookies: Cookies;
+  fetch: typeof fetch; // Enhanced with cookie/auth inheritance, relative URLs, direct internal calls
+  getClientAddress: () => string;
+  locals: App.Locals;
+  params: Params;
+  platform: App.Platform | undefined;
+  request: Request;
+  route: { id: RouteId };
+  setHeaders: (headers: Record<string, string>) => void;
+  url: URL;
+  isDataRequest: boolean; // True for +page/layout.server.js data requests
+  isSubRequest: boolean; // True for same-origin fetch without HTTP overhead
+  isRemoteRequest: boolean; // True for remote function calls
+  tracing: { enabled: boolean; root: Span; current: Span }; // Since 2.31.0
+}
+```
+
+## Cookies
+
+```ts
+interface Cookies {
+  get(name: string, opts?: CookieParseOptions): string | undefined;
+  getAll(opts?: CookieParseOptions): Array<{ name: string; value: string }>;
+  set(name: string, value: string, opts: CookieSerializeOptions & { path: string }): void;
+  delete(name: string, opts: CookieSerializeOptions & { path: string }): void;
+  serialize(name: string, value: string, opts: CookieSerializeOptions & { path: string }): string;
+}
+```
+
+**Defaults**: `httpOnly` and `secure` are `true` (except on http://localhost). `sameSite` defaults to `lax`.
+
+**Important**: Must specify `path` (usually `path: '/'`). Can't set `set-cookie` via `setHeaders` - use `cookies` API in server-only `load`.
+
+## Load Functions
+
+### LoadEvent (Client/Universal)
+
+```ts
+interface LoadEvent<Params, Data, ParentData, RouteId> {
+  fetch: typeof fetch; // Enhanced with cookie inheritance, relative URLs, inlining
+  data: Data; // From server load
+  params: Params;
+  route: { id: RouteId };
+  url: URL;
+  setHeaders: (headers: Record<string, string>) => void; // No effect in browser
+  parent: () => Promise<ParentData>;
+  depends: (...deps: Array<`${string}:${string}`>) => void;
+  untrack: <T>(fn: () => T) => T;
+  tracing: { enabled: boolean; root: Span; current: Span }; // Since 2.31.0
+}
+```
+
+### ServerLoadEvent
+
+Extends `RequestEvent` with:
+
+```ts
+interface ServerLoadEvent<Params, ParentData, RouteId> extends RequestEvent<Params, RouteId> {
+  parent: () => Promise<ParentData>;
+  depends: (...deps: string[]) => void;
+  untrack: <T>(fn: () => T) => T;
+  tracing: { enabled: boolean; root: Span; current: Span }; // Since 2.31.0
+}
+```
+
+**Gotcha**: Call `parent()` after fetching other data to avoid waterfalls.
+
+## Actions
+
+### Action Type
+
+```ts
+type Action<Params, OutputData, RouteId> = (
+  event: RequestEvent<Params, RouteId>
+) => MaybePromise<OutputData>;
+
+type Actions<Params, OutputData, RouteId> = Record<string, Action<Params, OutputData, RouteId>>;
+```
+
+### ActionResult
+
+```ts
+type ActionResult<Success, Failure> =
+  | { type: 'success'; status: number; data?: Success }
+  | { type: 'failure'; status: number; data?: Failure }
+  | { type: 'redirect'; status: number; location: string }
+  | { type: 'error'; status?: number; error: any };
+```
+
+### SubmitFunction
+
+```ts
+type SubmitFunction<Success, Failure> = (input: {
+  action: URL;
+  formData: FormData;
+  formElement: HTMLFormElement;
+  controller: AbortController;
+  submitter: HTMLElement | null;
+  cancel: () => void;
+}) => MaybePromise<void | ((opts: {
+  formData: FormData;
+  formElement: HTMLFormElement;
+  action: URL;
+  result: ActionResult<Success, Failure>;
+  update: (options?: { reset?: boolean; invalidateAll?: boolean }) => Promise<void>;
+}) => MaybePromise<void>)>;
+```
+
+## Remote Functions
+
+### RemoteQuery
+
+```ts
+type RemoteQuery<T> = RemoteResource<T> & {
+  set(value: T): void;
+  refresh(): Promise<void>;
+  withOverride(update: (current: Awaited<T>) => Awaited<T>): RemoteQueryOverride;
+};
+
+type RemoteQueryFunction<Input, Output> = (arg: Input) => RemoteQuery<Output>;
+```
+
+### RemoteCommand
+
+```ts
+type RemoteCommand<Input, Output> = {
+  (arg: Input): Promise<Awaited<Output>> & {
+    updates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<Awaited<Output>>;
+  };
+  get pending(): number;
+};
+```
+
+### RemoteForm
+
+```ts
+type RemoteForm<Input, Output> = {
+  [attachment: symbol]: (node: HTMLFormElement) => void;
+  method: 'POST';
+  action: string;
+  enhance(callback: (opts: { form: HTMLFormElement; data: Input; submit: () => Promise<void> }) => void): { ... };
+  for(id: ExtractId<Input>): Omit<RemoteForm<Input, Output>, 'for'>;
+  preflight(schema: StandardSchemaV1<Input, any>): RemoteForm<Input, Output>;
+  validate(options?: { includeUntouched?: boolean; submitter?: HTMLButtonElement }): Promise<void>;
+  get result(): Output | undefined;
+  get pending(): number;
+  fields: RemoteFormFields<Input>;
+  buttonProps: { ... };
+};
+```
+
+### RemotePrerenderFunction
+
+```ts
+type RemotePrerenderFunction<Input, Output> = (arg: Input) => RemoteResource<Output>;
+```
+
+### RemoteResource
+
+```ts
+type RemoteResource<T> = Promise<Awaited<T>> & {
+  get error(): any;
+  get loading(): boolean;
+} & ({ get current(): undefined; ready: false } | { get current(): Awaited<T>; ready: true });
+```
+
+## Navigation Types
+
+### NavigationType
+
+```ts
+type NavigationType = 'enter' | 'form' | 'leave' | 'link' | 'goto' | 'popstate';
+```
+
+### AfterNavigate
+
+```ts
+type AfterNavigate = (Navigation | NavigationEnter) & {
+  type: Exclude<NavigationType, 'leave'>;
+  willUnload: false;
+};
+```
+
+### BeforeNavigate
+
+```ts
+type BeforeNavigate = Navigation & {
+  cancel: () => void;
+};
+```
+
+### OnNavigate
+
+```ts
+type OnNavigate = Navigation & {
+  type: Exclude<NavigationType, 'enter' | 'leave'>;
+  willUnload: false;
+};
+```
+
+## Page
+
+```ts
+interface Page<Params, RouteId> {
+  url: URL & { pathname: ResolvedPathname };
+  params: Params;
+  route: { id: RouteId };
+  status: number;
+  error: App.Error | null;
+  data: App.PageData & Record<string, any>;
+  state: App.PageState;
+  form: any; // Filled after form submission
+}
+```
+
+## Adapter
+
+```ts
+interface Adapter {
+  name: string;
+  adapt: (builder: Builder) => MaybePromise<void>;
+  supports?: {
+    read?: (details: { config: any; route: { id: string } }) => boolean;
+    instrumentation?: () => boolean; // Since 2.31.0
+  };
+  emulate?: () => MaybePromise<Emulator>;
+}
+```
+
+### Builder
+
+Key methods:
+- `writeClient(dest: string): string[]`
+- `writeServer(dest: string): string[]`
+- `writePrerendered(dest: string): string[]`
+- `generateManifest(opts: { relativePath: string; routes?: RouteDefinition[] }): string`
+- `compress(directory: string): Promise<void>`
+- `instrument(args: { entrypoint: string; instrumentation: string; ... }): void` (Since 2.31.0)
+
+## Snapshot
+
+```ts
+interface Snapshot<T> {
+  capture: () => T;
+  restore: (snapshot: T) => void;
+}
+```
+
+## Constants
+
+```ts
+const VERSION: string; // SvelteKit version
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/accessibility.md b/packages/mcp-server/summaries/distilled/kit/accessibility.md
new file mode 100644
index 00000000..176b6f05
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/accessibility.md
@@ -0,0 +1,73 @@
+# Accessibility
+
+SvelteKit provides accessible defaults. You're responsible for ensuring your application code is accessible.
+
+## Route Announcements
+
+SvelteKit injects a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) that announces page changes during client-side navigation by reading the `<title>` element.
+
+**Every page needs a unique, descriptive title:**
+
+```svelte
+<!--- file: src/routes/+page.svelte --->
+<svelte:head>
+	<title>Todo List</title>
+</svelte:head>
+```
+
+## Focus Management
+
+After each navigation and enhanced form submission, SvelteKit focuses `<body>` (or an element with `autofocus` if present).
+
+**Customize focus with `afterNavigate`:**
+
+```js
+import { afterNavigate } from '$app/navigation';
+
+afterNavigate(() => {
+	/** @type {HTMLElement | null} */
+	const to_focus = document.querySelector('.focus-me');
+	to_focus?.focus();
+});
+```
+
+**`goto` with `keepFocus` option:** Preserves current focus instead of resetting. Ensure the focused element still exists after navigation.
+
+## Lang Attribute
+
+Default is English. Update `src/app.html` for other languages:
+
+```html
+/// file: src/app.html
+<html lang="de">
+```
+
+**For multiple languages, use a placeholder and `handle` hook:**
+
+```html
+/// file: src/app.html
+<html lang="%lang%">
+```
+
+```js
+/// file: src/hooks.server.js
+/**
+ * @param {import('@sveltejs/kit').RequestEvent} event
+ */
+function get_lang(event) {
+	return 'en';
+}
+// ---cut---
+/** @type {import('@sveltejs/kit').Handle} */
+export function handle({ event, resolve }) {
+	return resolve(event, {
+		transformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event))
+	});
+}
+```
+
+## Further Reading
+
+- [MDN Web Docs: Accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility)
+- [The A11y Project](https://www.a11yproject.com/)
+- [How to Meet WCAG](https://www.w3.org/WAI/WCAG21/quickref/)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/adapter-auto.md b/packages/mcp-server/summaries/distilled/kit/adapter-auto.md
new file mode 100644
index 00000000..d35aee7d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/adapter-auto.md
@@ -0,0 +1,20 @@
+# adapter-auto
+
+`adapter-auto` is installed by default with `npx sv create`. It automatically detects and uses the correct adapter for supported platforms at deploy time:
+
+- `@sveltejs/adapter-cloudflare` - Cloudflare Pages
+- `@sveltejs/adapter-netlify` - Netlify
+- `@sveltejs/adapter-vercel` - Vercel
+- `svelte-adapter-azure-swa` - Azure Static Web Apps
+- `svelte-kit-sst` - AWS via SST
+- `@sveltejs/adapter-node` - Google Cloud Run
+
+**Best practice:** Install the specific adapter to `devDependencies` once you've chosen a platform for better lockfile management and faster CI installs.
+
+## Configuration
+
+`adapter-auto` accepts no options. To configure adapter-specific options (e.g., `{ edge: true }` for Vercel/Netlify), install and use the underlying adapter directly.
+
+## Extending
+
+Add support for more adapters by editing [adapters.js](https://github.com/sveltejs/kit/blob/main/packages/adapter-auto/adapters.js) and submitting a PR.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/adapter-cloudflare-workers.md b/packages/mcp-server/summaries/distilled/kit/adapter-cloudflare-workers.md
new file mode 100644
index 00000000..9c81a4fc
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/adapter-cloudflare-workers.md
@@ -0,0 +1,114 @@
+# adapter-cloudflare-workers
+
+> **DEPRECATED**: Use [`adapter-cloudflare`](adapter-cloudflare) instead. Cloudflare Workers Sites is being deprecated in favor of Workers with Static Assets.
+
+Deploys to [Cloudflare Workers](https://workers.cloudflare.com/) with [Workers Sites](https://developers.cloudflare.com/workers/configuration/sites/).
+
+## Installation
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-cloudflare-workers';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			// see options below
+		})
+	}
+};
+
+export default config;
+```
+
+## Options
+
+- **`config`**: Path to Wrangler config file (if not using default `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml`)
+- **`platformProxy`**: Preferences for emulated `platform.env` local bindings. See [getPlatformProxy docs](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1)
+
+## Configuration
+
+Create Wrangler config in project root:
+
+```jsonc
+/// file: wrangler.jsonc
+{
+	"name": "<your-service-name>",
+	"account_id": "<your-account-id>",
+	"main": "./.cloudflare/worker.js",
+	"site": {
+		"bucket": "./.cloudflare/public"
+	},
+	"build": {
+		"command": "npm run build"
+	},
+	"compatibility_date": "2021-11-12"
+}
+```
+
+Get `<your-account-id>` from `wrangler whoami` or Cloudflare dashboard URL.
+
+Add `.cloudflare` and `.wrangler` to `.gitignore`.
+
+## Deploy
+
+```sh
+npm i -D wrangler
+wrangler login
+wrangler deploy
+```
+
+## Runtime APIs
+
+Access Cloudflare bindings (KV, DO, etc.) via `platform` in hooks and endpoints:
+
+```js
+/// file: +server.js
+/** @type {import('./$types').RequestHandler} */
+export async function POST({ request, platform }) {
+	const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
+}
+```
+
+**Type definitions:**
+
+```ts
+/// file: src/app.d.ts
+import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';
+
+declare global {
+	namespace App {
+		interface Platform {
+			env?: {
+				YOUR_KV_NAMESPACE: KVNamespace;
+				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
+			};
+		}
+	}
+}
+
+export {};
+```
+
+Use SvelteKit's `$env` module for environment variables.
+
+## Local Testing
+
+`platform` values are emulated in dev/preview using Wrangler config bindings. Configure via `platformProxy` option.
+
+For testing builds, use Wrangler v4: `wrangler dev`
+
+## Troubleshooting
+
+**Node.js compatibility**: Add to Wrangler config:
+```jsonc
+/// file: wrangler.jsonc
+{
+	"compatibility_flags": ["nodejs_compat"]
+}
+```
+
+**Worker size limits**: If bundle exceeds [size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size), import large libraries client-side only.
+
+**File system**: `fs` unavailable — [prerender](page-options#prerender) routes that need it.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/adapter-cloudflare.md b/packages/mcp-server/summaries/distilled/kit/adapter-cloudflare.md
new file mode 100644
index 00000000..9ab1d116
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/adapter-cloudflare.md
@@ -0,0 +1,209 @@
+# Cloudflare Adapter
+
+Deploy to Cloudflare Workers or Cloudflare Pages using `adapter-cloudflare`.
+
+## Comparisons
+
+- `adapter-cloudflare` – all SvelteKit features; builds for Workers Static Assets and Pages
+- `adapter-cloudflare-workers` – deprecated
+- `adapter-static` – client-side only; compatible with Workers Static Assets and Pages
+
+## Usage
+
+```bash
+npm i -D @sveltejs/adapter-cloudflare
+```
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-cloudflare';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			config: undefined,
+			platformProxy: {
+				configPath: undefined,
+				environment: undefined,
+				persist: undefined
+			},
+			fallback: 'plaintext',
+			routes: {
+				include: ['/*'],
+				exclude: ['<all>']
+			}
+		})
+	}
+};
+
+export default config;
+```
+
+## Options
+
+### config
+Path to Wrangler config file (if not using default `wrangler.jsonc`, `wrangler.json`, or `wrangler.toml`).
+
+### platformProxy
+Preferences for emulated `platform.env` local bindings. See [getPlatformProxy docs](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1).
+
+### fallback
+Render `plaintext` or `spa` 404 page for non-matching assets. Default `plaintext` is usually sufficient. Use `spa` if using `routes.exclude` to avoid unstyled 404s.
+
+### routes
+**Cloudflare Pages only.** Customizes `_routes.json`:
+- `include` – routes that invoke a function (default `['/*']`)
+- `exclude` – routes that don't invoke a function (faster/cheaper for static assets)
+  - `<build>` – Vite build artifacts
+  - `<files>` – `static` directory contents
+  - `<prerendered>` – prerendered pages
+  - `<all>` – all above (default)
+
+Max 100 combined rules. Useful if `<prerendered>` exceeds limit (e.g., use `'/articles/*'` instead of individual paths).
+
+## Cloudflare Workers
+
+### Basic Configuration
+
+```jsonc
+/// file: wrangler.jsonc
+{
+	"name": "<any-name-you-want>",
+	"main": ".svelte-kit/cloudflare/_worker.js",
+	"compatibility_date": "2025-01-01",
+	"assets": {
+		"binding": "ASSETS",
+		"directory": ".svelte-kit/cloudflare",
+	}
+}
+```
+
+### Deployment
+Follow [Cloudflare Workers framework guide](https://developers.cloudflare.com/workers/frameworks/framework-guides/svelte/).
+
+## Cloudflare Pages
+
+### Deployment
+Follow [Get Started Guide](https://developers.cloudflare.com/pages/get-started/).
+
+**Git integration build settings:**
+- Framework preset: SvelteKit
+- Build command: `npm run build` or `vite build`
+- Build output directory: `.svelte-kit/cloudflare`
+
+### Notes
+Functions in `/functions` directory are ignored. Use SvelteKit [server endpoints](routing#server) instead (compiled to single `_worker.js`).
+
+## Runtime APIs
+
+Access `env` (bindings), `ctx`, `caches`, and `cf` via `platform` in hooks and endpoints:
+
+```js
+// @filename: ambient.d.ts
+import { DurableObjectNamespace } from '@cloudflare/workers-types';
+
+declare global {
+	namespace App {
+		interface Platform {
+			env: {
+				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
+			};
+		}
+	}
+}
+// @filename: +server.js
+// ---cut---
+// @errors: 2355 2322
+/// file: +server.js
+/** @type {import('./$types').RequestHandler} */
+export async function POST({ request, platform }) {
+	const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
+}
+```
+
+> [!NOTE] Use SvelteKit's `$env` module for environment variables.
+
+**Type definitions:**
+
+```ts
+/// file: src/app.d.ts
++++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++
+
+declare global {
+	namespace App {
+		interface Platform {
++++			env: {
+				YOUR_KV_NAMESPACE: KVNamespace;
+				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
+			};+++
+		}
+	}
+}
+
+export {};
+```
+
+### Testing Locally
+
+`platform` values are emulated in dev/preview using Wrangler config bindings. Use `platformProxy` option to customize.
+
+For build testing, use Wrangler 4:
+- Workers: `wrangler dev .svelte-kit/cloudflare`
+- Pages: `wrangler pages dev .svelte-kit/cloudflare`
+
+## Headers and Redirects
+
+`_headers` and `_redirects` files (in project root) only affect static assets. For dynamic responses, use server endpoints or `handle` hook.
+
+## Troubleshooting
+
+### Node.js Compatibility
+
+```jsonc
+/// file: wrangler.jsonc
+{
+	"compatibility_flags": ["nodejs_compat"]
+}
+```
+
+### Worker Size Limits
+
+If exceeding [size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size), import large libraries client-side only. See [FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window).
+
+### Accessing File System
+
+Can't use `fs`. Use [`read`]($app-server#read) from `$app/server` (fetches from deployed assets) or [prerender](page-options#prerender) routes.
+
+## Migrating from Workers Sites
+
+Replace `adapter-cloudflare-workers` with `adapter-cloudflare`. Update config:
+
+```js
+// @errors: 2307
+/// file: svelte.config.js
+---import adapter from '@sveltejs/adapter-cloudflare-workers';---
++++import adapter from '@sveltejs/adapter-cloudflare';+++
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
+```
+
+```jsonc
+/// file: wrangler.jsonc
+{
+---	"site": {
+		"bucket": ".cloudflare/public"
+	},---
++++	"assets": {
+		"directory": ".cloudflare/public",
+		"binding": "ASSETS" // Exclude this if you don't have a `main` key configured.
+	}+++
+}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/adapter-netlify.md b/packages/mcp-server/summaries/distilled/kit/adapter-netlify.md
new file mode 100644
index 00000000..4a6c936a
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/adapter-netlify.md
@@ -0,0 +1,117 @@
+# Netlify Adapter
+
+Deploy to Netlify using [`adapter-netlify`](https://github.com/sveltejs/kit/tree/main/packages/adapter-netlify). Auto-installed with `adapter-auto`.
+
+## Usage
+
+Install: `npm i -D @sveltejs/adapter-netlify`
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-netlify';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		// default options are shown
+		adapter: adapter({
+			// if true, will create a Netlify Edge Function rather
+			// than using standard Node-based functions
+			edge: false,
+
+			// if true, will split your app into multiple functions
+			// instead of creating a single one for the entire app.
+			// if `edge` is true, this option cannot be used
+			split: false
+		})
+	}
+};
+
+export default config;
+```
+
+Requires `netlify.toml` in project root:
+
+```toml
+[build]
+	command = "npm run build"
+	publish = "build"
+```
+
+Default publish directory is `"build"` if not specified.
+
+## Edge Functions
+
+Set `edge: true` for Deno-based edge functions (deployed close to visitors). Default `false` uses Node-based functions.
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-netlify';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			// will create a Netlify Edge Function using Deno-based
+			// rather than using standard Node-based functions
+			edge: true
+		})
+	}
+};
+
+export default config;
+```
+
+## Netlify-Specific Features
+
+### Headers & Redirects
+
+Place `_headers` and `_redirects` files in project root for static assets.
+
+**Gotchas:**
+- `_redirects` has higher priority than `[[redirects]]` in `netlify.toml`
+- Don't add catch-all rules like `/* /foobar/:splat` - they'll prevent auto-appended rules from working
+- Only first matching rule is processed
+
+### Forms
+
+1. Create HTML form with hidden `form-name` input
+2. Prerender the page (`export const prerender = true`) - Netlify's bot parses HTML at deploy time
+3. Prerender custom success pages if specified
+
+### Functions
+
+Access Netlify context (including Identity info) via `event.platform.context`:
+
+```js
+// @errors: 2339
+// @filename: ambient.d.ts
+/// <reference types="@sveltejs/adapter-netlify" />
+// @filename: +page.server.js
+// ---cut---
+/// file: +page.server.js
+/** @type {import('./$types').PageServerLoad} */
+export const load = async (event) => {
+	const context = event.platform?.context;
+	console.log(context); // shows up in your functions log in the Netlify app
+};
+```
+
+Add custom functions via `netlify.toml`:
+
+```toml
+[build]
+	command = "npm run build"
+	publish = "build"
+
+[functions]
+	directory = "functions"
+```
+
+## Troubleshooting
+
+**File system access:**
+- `fs` doesn't work in edge deployments
+- In serverless, files aren't copied to deployment
+- Use `read()` from `$app/server` instead (works in both edge and serverless)
+- Or prerender the routes
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/adapter-node.md b/packages/mcp-server/summaries/distilled/kit/adapter-node.md
new file mode 100644
index 00000000..dd1dc103
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/adapter-node.md
@@ -0,0 +1,229 @@
+# adapter-node
+
+Generates a standalone Node server.
+
+## Usage
+
+Install and configure:
+
+```js
+// @errors: 2307
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
+```
+
+## Deploying
+
+Build with `npm run build`. Creates production server in output directory (default: `build`).
+
+Need: output directory, `package.json`, and production `node_modules`. Generate production deps:
+```sh
+npm ci --omit dev
+```
+
+Start server:
+```sh
+node build
+```
+
+**Dev dependencies** are bundled via Rollup. **Dependencies** are externalized. Control this via `package.json` placement.
+
+### Compressing responses
+
+Use reverse proxy compression for better performance (Node is single-threaded). If using custom server middleware, use [`@polka/compression`](https://www.npmjs.com/package/@polka/compression) (supports streaming, unlike `compression` package).
+
+## Environment variables
+
+- **Dev/preview**: Reads `.env` files automatically
+- **Production**: `.env` files NOT auto-loaded
+
+Load in production:
+```sh
+# Using dotenv
+node -r dotenv/config build
+
+# Node.js v20.6+
+node --env-file=.env build
+```
+
+### `PORT`, `HOST` and `SOCKET_PATH`
+
+Default: `0.0.0.0:3000`
+
+```sh
+HOST=127.0.0.1 PORT=4000 node build
+```
+
+Use socket path (ignores HOST/PORT):
+```sh
+SOCKET_PATH=/tmp/socket node build
+```
+
+### `ORIGIN`, `PROTOCOL_HEADER`, `HOST_HEADER`, and `PORT_HEADER`
+
+Set origin directly:
+```sh
+ORIGIN=https://my.site node build
+```
+
+Or use headers (only behind trusted reverse proxy):
+```sh
+PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build
+```
+
+Standard headers: `x-forwarded-proto`, `x-forwarded-host`, `x-forwarded-port` (set via `PORT_HEADER`).
+
+**Incorrect URL causes error**: "Cross-site POST form submissions are forbidden"
+
+### `ADDRESS_HEADER` and `XFF_DEPTH`
+
+`event.getClientAddress()` returns connecting IP by default. Behind proxies, set:
+
+```sh
+ADDRESS_HEADER=True-Client-IP node build
+```
+
+For `X-Forwarded-For`, set `XFF_DEPTH` to number of trusted proxies (reads from right to avoid spoofing):
+
+```sh
+XFF_DEPTH=3
+```
+
+### `BODY_SIZE_LIMIT`
+
+Max request body size. Default: `512kb`. Supports units: `K`, `M`, `G`. Disable with `Infinity`.
+
+### `SHUTDOWN_TIMEOUT`
+
+Seconds to wait before force-closing connections on `SIGTERM`/`SIGINT`. Default: `30`.
+
+### `IDLE_TIMEOUT`
+
+With systemd socket activation: seconds of inactivity before auto-sleep. Unset = runs continuously.
+
+## Options
+
+```js
+// @errors: 2307
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			// default options are shown
+			out: 'build',
+			precompress: true,
+			envPrefix: ''
+		})
+	}
+};
+
+export default config;
+```
+
+### out
+
+Build directory. Default: `build`.
+
+### precompress
+
+Gzip/brotli precompression for assets and prerendered pages. Default: `true`.
+
+### envPrefix
+
+Prefix for environment variables:
+
+```js
+envPrefix: 'MY_CUSTOM_';
+```
+
+```sh
+MY_CUSTOM_HOST=127.0.0.1 MY_CUSTOM_PORT=4000 node build
+```
+
+## Graceful shutdown
+
+On `SIGTERM`/`SIGINT`:
+1. Rejects new requests
+2. Waits for pending requests to finish
+3. Closes remaining connections after `SHUTDOWN_TIMEOUT`
+
+Listen to shutdown event:
+
+```js
+// @errors: 2304
+process.on('sveltekit:shutdown', async (reason) => {
+  await jobs.stop();
+  await db.close();
+});
+```
+
+`reason` values: `SIGINT`, `SIGTERM`, `IDLE`
+
+## Socket activation
+
+Use systemd for on-demand scaling. Adapter listens on file descriptor 3 when `LISTEN_PID` and `LISTEN_FDS` are set.
+
+1. Create service:
+
+```ini
+/// file: /etc/systemd/system/myapp.service
+[Service]
+Environment=NODE_ENV=production IDLE_TIMEOUT=60
+ExecStart=/usr/bin/node /usr/bin/myapp/build
+```
+
+2. Create socket:
+
+```ini
+/// file: /etc/systemd/system/myapp.socket
+[Socket]
+ListenStream=3000
+
+[Install]
+WantedBy=sockets.target
+```
+
+3. Enable:
+```sh
+sudo systemctl daemon-reload
+sudo systemctl enable --now myapp.socket
+```
+
+## Custom server
+
+Adapter creates `index.js` (standalone server) and `handler.js` (export for custom servers).
+
+```js
+// @errors: 2307 7006
+/// file: my-server.js
+import { handler } from './build/handler.js';
+import express from 'express';
+
+const app = express();
+
+// add a route that lives separately from the SvelteKit app
+app.get('/healthcheck', (req, res) => {
+	res.end('ok');
+});
+
+// let SvelteKit handle everything else, including serving prerendered pages and static assets
+app.use(handler);
+
+app.listen(3000, () => {
+	console.log('listening on port 3000');
+});
+```
+
+Works with Express, Connect, Polka, or `http.createServer`.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/adapter-static.md b/packages/mcp-server/summaries/distilled/kit/adapter-static.md
new file mode 100644
index 00000000..353b1431
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/adapter-static.md
@@ -0,0 +1,150 @@
+# adapter-static
+
+Use SvelteKit as a static site generator (SSG) with [`adapter-static`](https://github.com/sveltejs/kit/tree/main/packages/adapter-static). Prerender entire site as static files.
+
+## Usage
+
+Install: `npm i -D @sveltejs/adapter-static`
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: undefined,
+			precompress: false,
+			strict: true
+		})
+	}
+};
+
+export default config;
+```
+
+Enable prerendering in root layout:
+
+```js
+/// file: src/routes/+layout.js
+export const prerender = true;
+```
+
+**Important:** Set [`trailingSlash`](page-options#trailingSlash) correctly. If host doesn't render `/a.html` for `/a` requests, use `trailingSlash: 'always'` to create `/a/index.html`.
+
+## Zero-config support
+
+Platforms like Vercel auto-configure. Omit options:
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
+```
+
+## Options
+
+- **pages**: Output directory for prerendered pages (default: `build`)
+- **assets**: Output directory for static assets (default: same as `pages`)
+- **fallback**: Filename for SPA entry point (e.g., `200.html`). Avoid `index.html`. Has negative performance/SEO impact. See [single page apps](single-page-apps) docs.
+- **precompress**: If `true`, generates `.br` and `.gz` files
+- **strict**: If `true` (default), checks all pages prerendered or `fallback` set. Set `false` to skip check.
+
+## GitHub Pages
+
+For repos not named `your-username.github.io`, set [`config.kit.paths.base`](configuration#paths) to repo name (site served from `https://your-username.github.io/your-repo-name`).
+
+```js
+// @errors: 2322
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			fallback: '404.html'
+		}),
+		paths: {
+			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
+		}
+	}
+};
+
+export default config;
+```
+
+Example GitHub Actions workflow:
+
+```yaml
+### file: .github/workflows/deploy.yml
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: 'main'
+
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
+      # - name: Install pnpm
+      #   uses: pnpm/action-setup@v3
+      #   with:
+      #     version: 8
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: |
+          npm run build
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # this should match the `pages` option in your adapter-static options
+          path: 'build/'
+
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4
+```
+
+**Note:** If not using GitHub Actions, add empty `.nojekyll` file in `static` directory.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/adapter-vercel.md b/packages/mcp-server/summaries/distilled/kit/adapter-vercel.md
new file mode 100644
index 00000000..5a8e293b
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/adapter-vercel.md
@@ -0,0 +1,155 @@
+# Vercel Adapter
+
+Deploy to Vercel using [`adapter-vercel`](https://github.com/sveltejs/kit/tree/main/packages/adapter-vercel). Auto-installed with `adapter-auto`.
+
+## Setup
+
+```bash
+npm i -D @sveltejs/adapter-vercel
+```
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-vercel';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			// options here
+		})
+	}
+};
+
+export default config;
+```
+
+## Deployment Configuration
+
+Configure via adapter options or `export const config` in `+server.js`, `+page(.server).js`, `+layout(.server).js`.
+
+```js
+/// file: about/+page.js
+/** @type {import('@sveltejs/adapter-vercel').Config} */
+export const config = {
+	split: true
+};
+```
+
+### All Functions
+- `runtime`: `'edge'`, `'nodejs18.x'`, `'nodejs20.x'`, `'nodejs22.x'` (deprecated, use Vercel dashboard config)
+- `regions`: array of [edge regions](https://vercel.com/docs/concepts/edge-network/regions) or `'all'` for edge (default `["iad1"]` for serverless)
+- `split`: deploy route as individual function
+
+### Edge Functions Only
+- `external`: dependencies to exclude from esbuild bundling
+
+### Serverless Functions Only
+- `memory`: 128-3008 Mb (default 1024)
+- `maxDuration`: seconds (10 Hobby, 15 Pro, 900 Enterprise)
+- `isr`: Incremental Static Regeneration config
+
+Config in layouts applies to child routes unless overridden.
+
+## Image Optimization
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-vercel';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			images: {
+				sizes: [640, 828, 1200, 1920, 3840],
+				formats: ['image/avif', 'image/webp'],
+				minimumCacheTTL: 300,
+				domains: ['example-app.vercel.app'],
+			}
+		})
+	}
+};
+
+export default config;
+```
+
+## Incremental Static Regeneration (ISR)
+
+[ISR](https://vercel.com/docs/incremental-static-regeneration) provides prerendered performance with dynamic flexibility.
+
+**⚠️ Use only for content identical across all visitors. No user-specific data (sessions, cookies) or it will leak.**
+
+```js
+import { BYPASS_TOKEN } from '$env/static/private';
+
+/** @type {import('@sveltejs/adapter-vercel').Config} */
+export const config = {
+	isr: {
+		expiration: 60,
+		bypassToken: BYPASS_TOKEN,
+		allowQuery: ['search']
+	}
+};
+```
+
+**Note:** ISR ignored on routes with `export const prerender = true`.
+
+### Options
+- `expiration` (required): seconds before re-generation (`false` = never)
+- `bypassToken`: 32+ char token for cache bypass via `__prerender_bypass=<token>` cookie or `x-prerender-revalidate: <token>` header
+- `allowQuery`: query params contributing to cache key (others ignored)
+
+Generate token: `crypto.randomUUID()`. Set as `BYPASS_TOKEN` env var in Vercel. Pull locally: `vercel env pull .env.development.local`
+
+## Environment Variables
+
+Access [Vercel system env vars](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) from `$env/static/private` or `$env/dynamic/private`.
+
+```js
+/// file: +layout.server.js
+import { VERCEL_COMMIT_REF } from '$env/static/private';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export function load() {
+	return {
+		deploymentGitBranch: VERCEL_COMMIT_REF
+	};
+}
+```
+
+```svelte
+<!--- file: +layout.svelte --->
+<script>
+	/** @type {import('./$types').LayoutProps} */
+	let { data } = $props();
+</script>
+
+<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>
+```
+
+**Prefer `$env/static/private`** for static replacement and dead code elimination.
+
+## Skew Protection
+
+[Skew protection](https://vercel.com/docs/deployments/skew-protection) routes users to their original deployment via cookie. Enable in Vercel project settings > Advanced.
+
+**Caveat:** Multiple tabs with different versions will route to newest, falling back to SvelteKit's built-in protection.
+
+## Notes
+
+### Vercel Functions
+`/api/*` requests bypass SvelteKit if `api` directory exists at project root. Use [API routes](routing#server) instead.
+
+### Node Version
+Update in [project settings](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/node-js#node.js-version) if using old default.
+
+## Troubleshooting
+
+### File System Access
+- **Edge functions:** `fs` unavailable
+- **Serverless functions:** `fs` won't work as expected. Use [`read()`]($app-server#read) from `$app/server` instead
+- Alternative: [prerender](page-options#prerender) routes
+
+### Deployment Protection
+If using [`read()`]($app-server#read) in edge functions with [Deployment Protection](https://vercel.com/docs/deployment-protection), enable [Protection Bypass for Automation](https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation) to avoid 401 errors.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/adapters.md b/packages/mcp-server/summaries/distilled/kit/adapters.md
new file mode 100644
index 00000000..ab371144
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/adapters.md
@@ -0,0 +1,45 @@
+# Adapters
+
+Adapters are plugins that transform your built SvelteKit app for specific deployment targets.
+
+## Official Adapters
+
+- `@sveltejs/adapter-cloudflare` - Cloudflare Workers/Pages
+- `@sveltejs/adapter-netlify` - Netlify
+- `@sveltejs/adapter-node` - Node servers
+- `@sveltejs/adapter-static` - Static site generation (SSG)
+- `@sveltejs/adapter-vercel` - Vercel
+
+Community adapters available for other platforms.
+
+## Configuration
+
+Specify adapter in `svelte.config.js`:
+
+```js
+/// file: svelte.config.js
+// @filename: ambient.d.ts
+declare module 'svelte-adapter-foo' {
+	const adapter: (opts: any) => import('@sveltejs/kit').Adapter;
+	export default adapter;
+}
+
+// @filename: index.js
+// ---cut---
+import adapter from 'svelte-adapter-foo';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			// adapter options go here
+		})
+	}
+};
+
+export default config;
+```
+
+## Platform-Specific Context
+
+Some adapters provide additional request info via the `platform` property in `RequestEvent` (available in hooks and server routes). Example: Cloudflare Workers expose `env` object with KV namespaces. Check adapter docs for details.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/additional-resources.md b/packages/mcp-server/summaries/distilled/kit/additional-resources.md
new file mode 100644
index 00000000..c88e9344
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/additional-resources.md
@@ -0,0 +1,19 @@
+# Resources
+
+## FAQs
+- [SvelteKit FAQ](faq)
+- [Svelte FAQ](../svelte/faq)
+- [`vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md)
+
+## Examples
+Official:
+- [`sveltejs/realworld`](https://github.com/sveltejs/realworld) - blog site
+- [HackerNews clone](https://github.com/sveltejs/sites/tree/master/sites/hn.svelte.dev)
+- [`svelte.dev`](https://github.com/sveltejs/svelte.dev)
+
+Community: [#sveltekit](https://github.com/topics/sveltekit), [#sveltekit-template](https://github.com/topics/sveltekit-template), [Svelte Society](https://sveltesociety.dev/templates?category=sveltekit)
+
+## Support
+[Discord](/chat) | [StackOverflow](https://stackoverflow.com/questions/tagged/sveltekit)
+
+Search FAQ/docs/issues first before asking.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/advanced-routing.md b/packages/mcp-server/summaries/distilled/kit/advanced-routing.md
new file mode 100644
index 00000000..f2a922d5
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/advanced-routing.md
@@ -0,0 +1,206 @@
+# Advanced Routing
+
+## Rest Parameters
+
+Use `[...param]` for unknown number of segments:
+
+```sh
+/[org]/[repo]/tree/[branch]/[...file]
+```
+
+Request `/sveltejs/kit/tree/main/documentation/docs/04-advanced-routing.md` produces:
+
+```js
+// @noErrors
+{
+	org: 'sveltejs',
+	repo: 'kit',
+	branch: 'main',
+	file: 'documentation/docs/04-advanced-routing.md'
+}
+```
+
+**Note:** `src/routes/a/[...rest]/z/+page.svelte` matches `/a/z` (no parameter), `/a/b/z`, `/a/b/c/z`, etc. Validate rest parameters using matchers.
+
+### 404 Pages
+
+Create catch-all route for custom 404s:
+
+```tree
+src/routes/
+├ marx-brothers/
+│ ├ [...path]/
+│ ├ chico/
+│ ├ harpo/
+│ ├ groucho/
+│ └ +error.svelte
+└ +error.svelte
+```
+
+```js
+/// file: src/routes/marx-brothers/[...path]/+page.js
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export function load(event) {
+	error(404, 'Not Found');
+}
+```
+
+**Note:** Unhandled 404s appear in `handleError`.
+
+## Optional Parameters
+
+Wrap parameter in double brackets: `[[lang]]/home` matches both `/home` and `/en/home`.
+
+**Note:** Optional parameters cannot follow rest parameters (`[...rest]/[[optional]]`).
+
+## Matching
+
+Validate parameters with matchers in `src/params/`:
+
+```js
+/// file: src/params/fruit.js
+/**
+ * @param {string} param
+ * @return {param is ('apple' | 'orange')}
+ * @satisfies {import('@sveltejs/kit').ParamMatcher}
+ */
+export function match(param) {
+	return param === 'apple' || param === 'orange';
+}
+```
+
+Use in routes: `src/routes/fruits/[page=fruit]`
+
+**Note:** Matchers run on server and browser. `*.test.js` and `*.spec.js` files are ignored.
+
+## Sorting
+
+Multiple routes can match same path. Priority rules:
+
+1. More specific routes rank higher
+2. Parameters with matchers (`[name=type]`) beat those without (`[name]`)
+3. `[[optional]]` and `[...rest]` have lowest priority (ignored unless final segment)
+4. Ties resolved alphabetically
+
+Example ordering:
+
+```sh
+src/routes/foo-abc/+page.svelte
+src/routes/foo-[c]/+page.svelte
+src/routes/[[a=x]]/+page.svelte
+src/routes/[b]/+page.svelte
+src/routes/[...catchall]/+page.svelte
+```
+
+## Encoding
+
+Use hexadecimal escapes `[x+nn]` for special characters:
+
+- `\` — `[x+5c]`, `/` — `[x+2f]`, `:` — `[x+3a]`, `*` — `[x+2a]`
+- `?` — `[x+3f]`, `"` — `[x+22]`, `<` — `[x+3c]`, `>` — `[x+3e]`
+- `|` — `[x+7c]`, `#` — `[x+23]`, `%` — `[x+25]`
+- `[` — `[x+5b]`, `]` — `[x+5d]`, `(` — `[x+28]`, `)` — `[x+29]`
+
+Example: `/smileys/:-)` → `src/routes/smileys/[x+3a]-[x+29]/+page.svelte`
+
+Unicode escapes: `[u+nnnn]` (e.g., `[u+d83e][u+dd2a]` or `🤪`)
+
+**Tip:** Encode leading `.` for TypeScript compatibility: `[x+2e]well-known`
+
+## Advanced Layouts
+
+### (group)
+
+Parentheses create route groups without affecting URLs:
+
+```tree
+src/routes/
+│ (app)/
+│ ├ dashboard/
+│ ├ item/
+│ └ +layout.svelte
+│ (marketing)/
+│ ├ about/
+│ ├ testimonials/
+│ └ +layout.svelte
+├ admin/
+└ +layout.svelte
+```
+
+`/admin` doesn't inherit `(app)` or `(marketing)` layouts.
+
+### +page@
+
+Break out of layouts with `@segment`:
+
+```tree
+src/routes/
+├ (app)/
+│ ├ item/
+│ │ ├ [id]/
+│ │ │ ├ embed/
+│ │ │ │ └ +page@(app).svelte
+│ │ │ └ +layout.svelte
+│ │ └ +layout.svelte
+│ └ +layout.svelte
+└ +layout.svelte
+```
+
+Options:
+- `+page@[id].svelte` — inherits from `[id]/+layout.svelte`
+- `+page@item.svelte` — inherits from `item/+layout.svelte`
+- `+page@(app).svelte` — inherits from `(app)/+layout.svelte`
+- `+page@.svelte` — inherits from root layout
+
+### +layout@
+
+Layouts can also break out:
+
+```
+src/routes/
+├ (app)/
+│ ├ item/
+│ │ ├ [id]/
+│ │ │ ├ embed/
+│ │ │ │ └ +page.svelte  // uses (app)/item/[id]/+layout.svelte
+│ │ │ ├ +layout.svelte  // inherits from (app)/item/+layout@.svelte
+│ │ │ └ +page.svelte    // uses (app)/item/+layout@.svelte
+│ │ └ +layout@.svelte   // inherits from root layout, skipping (app)/+layout.svelte
+│ └ +layout.svelte
+└ +layout.svelte
+```
+
+### When to Use Groups
+
+Groups aren't always necessary. Alternative: reuse components/functions:
+
+```svelte
+<!--- file: src/routes/nested/route/+layout@.svelte --->
+<script>
+	import ReusableLayout from '$lib/ReusableLayout.svelte';
+	let { data, children } = $props();
+</script>
+
+<ReusableLayout {data}>
+	{@render children()}
+</ReusableLayout>
+```
+
+```js
+/// file: src/routes/nested/route/+layout.js
+// @filename: ambient.d.ts
+declare module "$lib/reusable-load-function" {
+	export function reusableLoad(event: import('@sveltejs/kit').LoadEvent): Promise<Record<string, any>>;
+}
+// @filename: index.js
+// ---cut---
+import { reusableLoad } from '$lib/reusable-load-function';
+
+/** @type {import('./$types').PageLoad} */
+export function load(event) {
+	// Add additional logic here, if needed
+	return reusableLoad(event);
+}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/auth.md b/packages/mcp-server/summaries/distilled/kit/auth.md
new file mode 100644
index 00000000..5e974a3e
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/auth.md
@@ -0,0 +1,30 @@
+# Auth
+
+Authentication verifies user identity via credentials. Authorization determines allowed actions.
+
+## Sessions vs Tokens
+
+**Sessions:**
+- Stored in database
+- Can be immediately revoked
+- Require DB query per request
+
+**JWT:**
+- Not checked against datastore
+- Cannot be immediately revoked
+- Better latency, reduced DB load
+
+## Integration
+
+- Check auth [cookies](@sveltejs-kit#Cookies) in [server hooks](hooks#Server-hooks)
+- Store user info in [`locals`](hooks#Server-hooks-locals)
+
+## Implementation
+
+[Lucia](https://lucia-auth.com/) provides session-based auth examples for SvelteKit.
+
+Add via:
+- `npx sv create` (new project)
+- `npx sv add lucia` (existing project)
+
+SvelteKit-specific guides preferred over generic JS auth libraries to avoid multiple framework dependencies.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/building-your-app.md b/packages/mcp-server/summaries/distilled/kit/building-your-app.md
new file mode 100644
index 00000000..2f2a372f
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/building-your-app.md
@@ -0,0 +1,26 @@
+# Building
+
+Build happens in two stages via `vite build`:
+1. Vite creates optimized production build (server, browser, service worker). Prerendering runs here.
+2. Adapter tunes build for target environment.
+
+## During build
+
+Code in `+page/layout(.server).js` files executes during build analysis. Prevent execution with `building` check:
+
+```js
+import { building } from '$app/environment';
+import { setupMyDatabase } from '$lib/server/database';
+
+if (!building) {
+	setupMyDatabase();
+}
+
+export function load() {
+	// ...
+}
+```
+
+## Preview
+
+`vite preview` runs production build locally in Node. Not perfect reproduction - adapter-specific features like `platform` object don't apply.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/cli.md b/packages/mcp-server/summaries/distilled/kit/cli.md
new file mode 100644
index 00000000..462fa269
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/cli.md
@@ -0,0 +1,11 @@
+# SvelteKit CLI
+
+SvelteKit uses [Vite](https://vitejs.dev) CLI via npm scripts:
+
+- `vite dev` — dev server
+- `vite build` — production build
+- `vite preview` — preview production build
+
+## svelte-kit sync
+
+Creates `tsconfig.json` and generated types (importable as `./$types` in routing files). Runs automatically as `prepare` script in npm lifecycle.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/configuration.md b/packages/mcp-server/summaries/distilled/kit/configuration.md
new file mode 100644
index 00000000..f4ab3ad0
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/configuration.md
@@ -0,0 +1,269 @@
+# svelte.config.js
+
+Configuration file at project root. Used by SvelteKit and other Svelte tooling.
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
+```
+
+## adapter
+
+**Default:** `undefined`
+
+Runs during `vite build`. Determines how output is converted for different platforms.
+
+## alias
+
+**Default:** `{}`
+
+Replace values in `import` statements. Automatically passed to Vite and TypeScript.
+
+```js
+/// file: svelte.config.js
+const config = {
+	kit: {
+		alias: {
+			'my-file': 'path/to/my-file.js',
+			'my-directory': 'path/to/my-directory',
+			'my-directory/*': 'path/to/my-directory/*'
+		}
+	}
+};
+```
+
+> Built-in `$lib` alias controlled by `config.kit.files.lib`. Run `npm run dev` to generate alias config in `jsconfig.json`/`tsconfig.json`.
+
+## appDir
+
+**Default:** `"_app"`
+
+Directory for SvelteKit assets (JS, CSS) and internal routes.
+
+## csp
+
+Content Security Policy configuration. Protects against XSS attacks.
+
+```js
+/// file: svelte.config.js
+const config = {
+	kit: {
+		csp: {
+			directives: {
+				'script-src': ['self']
+			},
+			reportOnly: {
+				'script-src': ['self'],
+				'report-uri': ['/']
+			}
+		}
+	}
+};
+```
+
+SvelteKit augments directives with nonces/hashes for inline styles/scripts. Use `%sveltekit.nonce%` placeholder in `src/app.html`.
+
+For prerendered pages, CSP added via `<meta http-equiv>` tag (`frame-ancestors`, `report-uri`, `sandbox` ignored).
+
+**mode:** `'hash' | 'nonce' | 'auto'` - `'auto'` uses hashes for prerendered, nonces for dynamic pages.
+
+> Most Svelte transitions create inline `<style>` elements. Leave `style-src` unspecified or add `unsafe-inline`.
+
+## csrf
+
+**Default:** `{ checkOrigin: true, trustedOrigins: [] }`
+
+Protection against cross-site request forgery.
+
+- **checkOrigin** (deprecated, use `trustedOrigins: ['*']`): Verifies `origin` header for POST/PUT/PATCH/DELETE form submissions matches server origin.
+- **trustedOrigins:** Array of origins allowed for cross-origin form submissions (e.g., `['https://payment-gateway.com']`). Use `['*']` to trust all (not recommended).
+
+> CSRF checks only apply in production.
+
+## embedded
+
+**Default:** `false`
+
+If `true`, SvelteKit adds event listeners on parent of `%sveltekit.body%` instead of `window`, and uses server `params` instead of inferring from `location.pathname`.
+
+## env
+
+Environment variable configuration.
+
+- **dir** (default: `"."`): Directory to search for `.env` files.
+- **publicPrefix** (default: `"PUBLIC_"`): Prefix for client-safe env vars. See `$env/static/public` and `$env/dynamic/public`.
+- **privatePrefix** (default: `""`, since v1.21.0): Prefix for server-only env vars. Vars matching neither prefix are discarded. See `$env/static/private` and `$env/dynamic/private`.
+
+## experimental
+
+Experimental features (not subject to semver).
+
+- **tracing.server** (default: `false`, since v2.31.0): Enable OpenTelemetry tracing for `handle` hook, `load` functions, form actions, remote functions.
+- **instrumentation.server** (default: `false`, since v2.31.0): Enable `instrumentation.server.js` for tracing/observability.
+- **remoteFunctions** (default: `false`): Enable experimental remote functions feature.
+
+## files (deprecated)
+
+- **src** (default: `"src"`, since v2.28): Source code location.
+- **assets** (default: `"static"`): Static files with stable URLs.
+- **hooks.client** (default: `"src/hooks.client"`): Client hooks location.
+- **hooks.server** (default: `"src/hooks.server"`): Server hooks location.
+- **hooks.universal** (default: `"src/hooks"`, since v2.3.0): Universal hooks location.
+- **lib** (default: `"src/lib"`): Internal library, accessible as `$lib`.
+- **params** (default: `"src/params"`): Parameter matchers directory.
+- **routes** (default: `"src/routes"`): App structure/routing files.
+- **serviceWorker** (default: `"src/service-worker"`): Service worker entry point.
+- **appTemplate** (default: `"src/app.html"`): HTML response template.
+- **errorTemplate** (default: `"src/error.html"`): Fallback error response template.
+
+## inlineStyleThreshold
+
+**Default:** `0`
+
+Inline CSS in `<style>` block if file length (UTF-16 code units) is below threshold. Reduces initial requests but increases HTML size and reduces browser cache effectiveness.
+
+## moduleExtensions
+
+**Default:** `[".js", ".ts"]`
+
+File extensions SvelteKit treats as modules. Files not matching `config.extensions` or `config.kit.moduleExtensions` are ignored by router.
+
+## outDir
+
+**Default:** `".svelte-kit"`
+
+Directory for SvelteKit build files. Exclude from version control.
+
+## output
+
+### preloadStrategy
+
+**Default:** `"modulepreload"` (since v1.8.4)
+
+Preload strategy for initial page JS modules:
+- `'modulepreload'`: Uses `<link rel="modulepreload">`. Best for Chromium, Firefox 115+, Safari 17+.
+- `'preload-js'`: Uses `<link rel="preload">`. Prevents waterfalls but Chromium parses modules twice. Modules requested twice in Firefox.
+- `'preload-mjs'`: Uses `<link rel="preload">` with `.mjs` extension. Prevents double-parsing in Chromium but some servers may not serve `.mjs` correctly.
+
+### bundleStrategy
+
+**Default:** `'split'` (since v2.13.0)
+
+- `'split'`: Multiple .js/.css files loaded lazily (recommended).
+- `'single'`: One .js bundle and one .css file for entire app.
+- `'inline'`: Inlines all JS/CSS into HTML (usable without server).
+
+For `'split'`, adjust bundling via Vite's `build.rollupOptions` (`output.experimentalMinChunkSize`, `output.manualChunks`).
+
+For inline assets, set Vite's `build.assetsInlineLimit`:
+
+```js
+/// file: vite.config.js
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	build: {
+		assetsInlineLimit: Infinity
+	}
+});
+```
+
+```svelte
+/// file: src/routes/+layout.svelte
+<script>
+	import favicon from './favicon.png';
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+</svelte:head>
+```
+
+## paths
+
+- **assets** (default: `""`): Absolute path for serving app files (e.g., storage bucket URL).
+- **base** (default: `""`): Root-relative path starting with `/` (e.g., `/base-path`). Prepend to links: `<a href="{base}/your-page">`. Import from `$app/paths`.
+- **relative** (default: `true`, since v1.9.0): Use relative asset paths. If `true`, `base` and `assets` from `$app/paths` replaced with relative paths during SSR. If `false`, always root-relative. Set to `false` if using `<base>` element. SPA fallback pages always use absolute paths.
+
+## prerender
+
+- **concurrency** (default: `1`): Max simultaneous prerendered pages.
+- **crawl** (default: `true`): Follow links from `entries` to find pages.
+- **entries** (default: `["*"]`): Pages to prerender or start crawling from. `*` includes all routes with no required `[parameters]`.
+- **handleHttpError** (default: `"fail"`, since v1.15.7): `'fail' | 'ignore' | 'warn' | (details) => void`. Custom handler receives `status`, `path`, `referrer`, `referenceType`, `message`.
+
+```js
+/// file: svelte.config.js
+const config = {
+	kit: {
+		prerender: {
+			handleHttpError: ({ path, referrer, message }) => {
+				if (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {
+					return;
+				}
+				throw new Error(message);
+			}
+		}
+	}
+};
+```
+
+- **handleMissingId** (default: `"fail"`, since v1.15.7): `'fail' | 'ignore' | 'warn' | (details) => void`. Handler for hash links without corresponding `id`. Receives `path`, `id`, `referrers`, `message`.
+- **handleEntryGeneratorMismatch** (default: `"fail"`, since v1.16.0): `'fail' | 'ignore' | 'warn' | (details) => void`. Handler for entry/route mismatch. Receives `generatedFromId`, `entry`, `matchedId`, `message`.
+- **handleUnseenRoutes** (default: `"fail"`, since v2.16.0): `'fail' | 'ignore' | 'warn' | (details) => void`. Handler for prerenderable routes not prerendered. Receives `routes`.
+- **origin** (default: `"http://sveltekit-prerender"`): Value of `url.origin` during prerendering.
+
+## router
+
+- **type** (default: `"pathname"`, since v2.14.0): `'pathname' | 'hash'`. `'pathname'` uses URL pathname. `'hash'` uses `location.hash` (disables SSR/prerendering, links must start with `#/`).
+- **resolution** (default: `"client"`, since v2.17.0): `'client' | 'server'`. `'client'` uses route manifest in browser. `'server'` determines route on server for each unvisited path (faster initial load, hidden routes, server interception, but slightly slower for unvisited paths).
+
+## version
+
+Client-side navigation version management. Detects new deployments and falls back to full-page navigation on errors.
+
+```html
+/// file: +layout.svelte
+<script>
+	import { beforeNavigate } from '$app/navigation';
+	import { updated } from '$app/state';
+
+	beforeNavigate(({ willUnload, to }) => {
+		if (updated.current && !willUnload && to?.url) {
+			location.href = to.url.href;
+		}
+	});
+</script>
+```
+
+- **name:** App version string (must be deterministic, e.g., commit hash). Defaults to build timestamp.
+
+```js
+/// file: svelte.config.js
+import * as child_process from 'node:child_process';
+
+export default {
+	kit: {
+		version: {
+			name: child_process.execSync('git rev-parse HEAD').toString().trim()
+		}
+	}
+};
+```
+
+- **pollInterval** (default: `0`): Milliseconds to poll for version changes. Sets `updated.current` to `true` when new version detected.
+
+## typescript
+
+- **config** (default: `(config) => config`, since v1.3.0): Function to edit generated `tsconfig.json`. Mutate or return new config. Paths relative to `.svelte-kit/tsconfig.json`.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/creating-a-project.md b/packages/mcp-server/summaries/distilled/kit/creating-a-project.md
new file mode 100644
index 00000000..5d3d43b0
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/creating-a-project.md
@@ -0,0 +1,22 @@
+# Getting Started
+
+## Quick Start
+
+```sh
+npx sv create my-app
+cd my-app
+npm run dev
+```
+
+- `npx sv create` scaffolds project with optional TypeScript setup
+- `npm run dev` starts dev server at [localhost:5173](http://localhost:5173)
+
+## Core Concepts
+
+- **Pages** = Svelte components
+- **Routing** = Files in `src/routes/` directory
+- **Rendering** = Server-rendered first visit, then client-side app
+
+## Editor Setup
+
+Recommended: [VS Code](https://code.visualstudio.com/download) + [Svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/debugging.md b/packages/mcp-server/summaries/distilled/kit/debugging.md
new file mode 100644
index 00000000..ef40bd9a
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/debugging.md
@@ -0,0 +1,56 @@
+# Debugging
+
+Debug Svelte/SvelteKit projects using breakpoints in frontend and backend code. Assumes Node.js runtime.
+
+## Visual Studio Code
+
+### Built-in Debug Terminal
+
+1. Open command palette: `CMD/Ctrl` + `Shift` + `P`
+2. Launch "Debug: JavaScript Debug Terminal"
+3. Start project: `npm run dev`
+4. Set breakpoints in source files
+5. Trigger breakpoint
+
+### Launch via Debug Pane
+
+Create `.vscode/launch.json`:
+
+```json
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"command": "npm run dev",
+			"name": "Run development server",
+			"request": "launch",
+			"type": "node-terminal"
+		}
+	]
+}
+
+```
+
+Or auto-generate: Go to "Run and Debug" pane → Select "Node.js..." → Choose run script → Press `F5`
+
+Docs: <https://code.visualstudio.com/docs/editor/debugging>
+
+## Other Editors
+
+- [WebStorm Svelte: Debug Your Application](https://www.jetbrains.com/help/webstorm/svelte.html#ws_svelte_debug)
+- [Debugging JavaScript Frameworks in Neovim](https://theosteiner.de/debugging-javascript-frameworks-in-neovim)
+
+## Chrome/Edge DevTools
+
+**Note:** Only works with client-side SvelteKit source maps.
+
+1. Start with `--inspect` flag: `NODE_OPTIONS="--inspect" npm run dev`
+2. Open site (typically `localhost:5173`)
+3. Open dev tools → Click "Open dedicated DevTools for Node.js" icon (Node.js logo)
+4. Set breakpoints
+
+Alternative: Navigate to `chrome://inspect` (Chrome) or `edge://inspect` (Edge)
+
+## References
+
+- [Debugging Node.js](https://nodejs.org/en/learn/getting-started/debugging)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/errors.md b/packages/mcp-server/summaries/distilled/kit/errors.md
new file mode 100644
index 00000000..06e4bd8f
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/errors.md
@@ -0,0 +1,105 @@
+# Errors
+
+## Error Objects
+
+SvelteKit distinguishes between **expected** and **unexpected** errors. Both are `{ message: string }` objects by default.
+
+## Expected Errors
+
+Created with `error()` helper from `@sveltejs/kit`:
+
+```js
+/// file: src/routes/blog/[slug]/+page.server.js
+import { error } from '@sveltejs/kit';
+import * as db from '$lib/server/database';
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+	const post = await db.getPost(params.slug);
+
+	if (!post) {
+		error(404, {
+			message: 'Not found'
+		});
+	}
+
+	return { post };
+}
+```
+
+Sets response status and renders nearest `+error.svelte` component where `page.error` is the error object.
+
+```svelte
+<!--- file: src/routes/+error.svelte --->
+<script>
+	import { page } from '$app/state';
+</script>
+
+<h1>{page.error.message}</h1>
+```
+
+Add extra properties:
+
+```js
+error(404, {
+	message: 'Not found',
+	code: 'NOT_FOUND'
+});
+```
+
+Or use string shorthand:
+
+```js
+error(404, 'Not found');
+```
+
+## Unexpected Errors
+
+Any other exception during request handling. Not exposed to users (default: `{ "message": "Internal Error" }`).
+
+Logged to console/server logs and passed through `handleError` hook for custom handling.
+
+## Responses
+
+**In `handle` or `+server.js`:** Returns fallback error page or JSON based on `Accept` headers.
+
+**In `load` functions:** Renders nearest `+error.svelte` component. If error occurs in `+layout(.server).js`, uses `+error.svelte` _above_ that layout.
+
+**Root layout errors:** Use fallback error page since root layout contains `+error.svelte`.
+
+### Custom Fallback Error Page
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>%sveltekit.error.message%</title>
+	</head>
+	<body>
+		<h1>My custom error page</h1>
+		<p>Status: %sveltekit.status%</p>
+		<p>Message: %sveltekit.error.message%</p>
+	</body>
+</html>
+```
+
+## Type Safety
+
+Customize error shape via `App.Error` interface:
+
+```ts
+/// file: src/app.d.ts
+declare global {
+	namespace App {
+		interface Error {
+			code: string;
+			id: string;
+		}
+	}
+}
+
+export {};
+```
+
+Always includes `message: string` property.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/faq.md b/packages/mcp-server/summaries/distilled/kit/faq.md
new file mode 100644
index 00000000..59d9f999
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/faq.md
@@ -0,0 +1,168 @@
+# SvelteKit FAQ
+
+## Including package.json data
+
+Load JSON with import attributes:
+
+```ts
+/// file: svelte.config.js
+import pkg from './package.json' with { type: 'json' };
+```
+
+## Package inclusion issues
+
+Check packaging compatibility at [publint.dev](https://publint.dev/).
+
+**Key packaging requirements:**
+- `exports` takes precedence over `main`/`module` (prevents deep imports)
+- ESM files: `.mjs` extension OR `"type": "module"` in package.json (then CJS uses `.cjs`)
+- `main` should be defined if no `exports`
+- Svelte components: distribute as uncompiled `.svelte` files with ESM JS only
+- Preprocess TypeScript/SCSS to vanilla JS/CSS (use [`svelte-package`](./packaging))
+
+ESM versions work best with Vite. CJS dependencies are auto-converted by `vite-plugin-svelte` using `esbuild`.
+
+If issues persist, check [Vite issues](https://github.com/vitejs/vite/issues) or try adjusting [`optimizeDeps`](https://vitejs.dev/config/#dep-optimization-options)/[`ssr`](https://vitejs.dev/config/#ssr-options) config (temporary workaround).
+
+## View transitions API
+
+Use `document.startViewTransition` in `onNavigate`:
+
+```js
+import { onNavigate } from '$app/navigation';
+
+onNavigate((navigation) => {
+	if (!document.startViewTransition) return;
+
+	return new Promise((resolve) => {
+		document.startViewTransition(async () => {
+			resolve();
+			await navigation.complete;
+		});
+	});
+});
+```
+
+## Database setup
+
+- Query databases in [server routes](./routing#server), not `.svelte` files
+- Create `db.js` singleton for connection
+- Run setup code in `hooks.server.js`
+- Use [Svelte CLI](/docs/cli/overview) for automatic setup
+
+## Client-side only code
+
+**Browser check:**
+```js
+import { browser } from '$app/environment';
+
+if (browser) {
+	// client-only code
+}
+```
+
+**onMount (runs after first render):**
+```js
+import { onMount } from 'svelte';
+
+onMount(async () => {
+	const { method } = await import('some-browser-only-library');
+	method('hello world');
+});
+```
+
+**Static import (tree-shaken on server):**
+```js
+import { onMount } from 'svelte';
+import { method } from 'some-browser-only-library';
+
+onMount(() => {
+	method('hello world');
+});
+```
+
+**Await block:**
+```svelte
+<script>
+	import { browser } from '$app/environment';
+
+	const ComponentConstructor = browser ?
+		import('some-browser-only-library').then((module) => module.Component) :
+		new Promise(() => {});
+</script>
+
+{#await ComponentConstructor}
+	<p>Loading...</p>
+{:then component}
+	<svelte:component this={component} />
+{:catch error}
+	<p>Something went wrong: {error.message}</p>
+{/await}
+```
+
+## External API server
+
+**Options:**
+1. Use [`event.fetch`](./load#Making-fetch-requests) (requires handling CORS)
+2. Set up proxy: production rewrites or Vite's [`server.proxy`](https://vitejs.dev/config/server-options.html#server-proxy)
+3. Create API route proxy:
+
+```js
+/// file: src/routes/api/[...path]/+server.js
+/** @type {import('./$types').RequestHandler} */
+export function GET({ params, url }) {
+	return fetch(`https://example.com/${params.path + url.search}`);
+}
+```
+
+See [`handleFetch`](./hooks#Server-hooks-handleFetch) for fetch customization.
+
+## Middleware
+
+**Production:** `adapter-node` builds middleware for custom servers
+
+**Dev:** Use Vite plugin:
+
+```js
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').Plugin} */
+const myPlugin = {
+	name: 'log-request-middleware',
+	configureServer(server) {
+		server.middlewares.use((req, res, next) => {
+			console.log(`Got request ${req.url}`);
+			next();
+		});
+	}
+};
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [myPlugin, sveltekit()]
+};
+
+export default config;
+```
+
+See [Vite's `configureServer` docs](https://vitejs.dev/guide/api-plugin.html#configureserver).
+
+## Yarn compatibility
+
+**Yarn 2:** PnP is broken with ESM. Use `nodeLinker: 'node-modules'` in `.yarnrc.yml` or switch to npm/pnpm.
+
+**Yarn 3:** ESM support is experimental. Setup:
+
+```sh
+yarn create svelte myapp
+cd myapp
+yarn set version berry
+yarn install
+```
+
+Add to `.yarnrc.yml`:
+```yaml
+nodeLinker: node-modules
+```
+
+(Avoids build failures with `enableGlobalCache`)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/form-actions.md b/packages/mcp-server/summaries/distilled/kit/form-actions.md
new file mode 100644
index 00000000..ed88076a
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/form-actions.md
@@ -0,0 +1,419 @@
+# Form Actions
+
+`+page.server.js` files export actions to `POST` data to the server using `<form>` elements. Works without JavaScript, but can be progressively enhanced.
+
+## Default Actions
+
+```js
+/// file: src/routes/login/+page.server.js
+/** @satisfies {import('./$types').Actions} */
+export const actions = {
+	default: async (event) => {
+		// TODO log the user in
+	}
+};
+```
+
+```svelte
+<!--- file: src/routes/login/+page.svelte --->
+<form method="POST">
+	<label>
+		Email
+		<input name="email" type="email">
+	</label>
+	<label>
+		Password
+		<input name="password" type="password">
+	</label>
+	<button>Log in</button>
+</form>
+```
+
+Invoke from other pages with `action` attribute:
+
+```html
+<form method="POST" action="/login">
+```
+
+> Actions always use `POST` requests.
+
+## Named Actions
+
+```js
+/// file: src/routes/login/+page.server.js
+/** @satisfies {import('./$types').Actions} */
+export const actions = {
+	login: async (event) => {
+		// TODO log the user in
+	},
+	register: async (event) => {
+		// TODO register the user
+	}
+};
+```
+
+Invoke with query parameter prefixed by `/`:
+
+```svelte
+<form method="POST" action="?/register">
+```
+
+```svelte
+<form method="POST" action="/login?/register">
+```
+
+Use `formaction` on buttons:
+
+```svelte
+<form method="POST" action="?/login">
+	<label>
+		Email
+		<input name="email" type="email">
+	</label>
+	<label>
+		Password
+		<input name="password" type="password">
+	</label>
+	<button>Log in</button>
+	<button formaction="?/register">Register</button>
+</form>
+```
+
+> Can't have default actions next to named actions - query parameter persists in URL.
+
+## Action Anatomy
+
+Actions receive `RequestEvent`, read data with `request.formData()`. Return data available via `form` prop and `page.form`.
+
+```js
+/// file: src/routes/login/+page.server.js
+import * as db from '$lib/server/db';
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ cookies }) {
+	const user = await db.getUserFromSession(cookies.get('sessionid'));
+	return { user };
+}
+
+/** @satisfies {import('./$types').Actions} */
+export const actions = {
+	login: async ({ cookies, request }) => {
+		const data = await request.formData();
+		const email = data.get('email');
+		const password = data.get('password');
+
+		const user = await db.getUser(email);
+		cookies.set('sessionid', await db.createSession(user), { path: '/' });
+
+		return { success: true };
+	},
+	register: async (event) => {
+		// TODO register the user
+	}
+};
+```
+
+```svelte
+<!--- file: src/routes/login/+page.svelte --->
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data, form } = $props();
+</script>
+
+{#if form?.success}
+	<p>Successfully logged in! Welcome back, {data.user.name}</p>
+{/if}
+```
+
+### Validation Errors
+
+Use `fail()` to return HTTP status code (400/422) with validation errors:
+
+```js
+/// file: src/routes/login/+page.server.js
+import { fail } from '@sveltejs/kit';
+import * as db from '$lib/server/db';
+
+/** @satisfies {import('./$types').Actions} */
+export const actions = {
+	login: async ({ cookies, request }) => {
+		const data = await request.formData();
+		const email = data.get('email');
+		const password = data.get('password');
+
+		if (!email) {
+			return fail(400, { email, missing: true });
+		}
+
+		const user = await db.getUser(email);
+
+		if (!user || user.password !== db.hash(password)) {
+			return fail(400, { email, incorrect: true });
+		}
+
+		cookies.set('sessionid', await db.createSession(user), { path: '/' });
+
+		return { success: true };
+	},
+	register: async (event) => {
+		// TODO register the user
+	}
+};
+```
+
+```svelte
+/// file: src/routes/login/+page.svelte
+<form method="POST" action="?/login">
+	{#if form?.missing}<p class="error">The email field is required</p>{/if}
+	{#if form?.incorrect}<p class="error">Invalid credentials!</p>{/if}
+	<label>
+		Email
+		<input name="email" type="email" value={form?.email ?? ''}>
+	</label>
+	<label>
+		Password
+		<input name="password" type="password">
+	</label>
+	<button>Log in</button>
+	<button formaction="?/register">Register</button>
+</form>
+```
+
+### Redirects
+
+```js
+/// file: src/routes/login/+page.server.js
+import { fail, redirect } from '@sveltejs/kit';
+import * as db from '$lib/server/db';
+
+/** @satisfies {import('./$types').Actions} */
+export const actions = {
+	login: async ({ cookies, request, url }) => {
+		const data = await request.formData();
+		const email = data.get('email');
+		const password = data.get('password');
+
+		const user = await db.getUser(email);
+		if (!user) {
+			return fail(400, { email, missing: true });
+		}
+
+		if (user.password !== db.hash(password)) {
+			return fail(400, { email, incorrect: true });
+		}
+
+		cookies.set('sessionid', await db.createSession(user), { path: '/' });
+
+		if (url.searchParams.has('redirectTo')) {
+			redirect(303, url.searchParams.get('redirectTo'));
+		}
+
+		return { success: true };
+	},
+	register: async (event) => {
+		// TODO register the user
+	}
+};
+```
+
+## Loading Data
+
+Page re-renders after action runs. `load` functions run after action completes.
+
+`handle` runs before action and doesn't rerun before `load`. Update `event.locals` in actions if needed:
+
+```js
+/// file: src/hooks.server.js
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	event.locals.user = await getUser(event.cookies.get('sessionid'));
+	return resolve(event);
+}
+```
+
+```js
+/// file: src/routes/account/+page.server.js
+/** @type {import('./$types').PageServerLoad} */
+export function load(event) {
+	return {
+		user: event.locals.user
+	};
+}
+
+/** @satisfies {import('./$types').Actions} */
+export const actions = {
+	logout: async (event) => {
+		event.cookies.delete('sessionid', { path: '/' });
+		event.locals.user = null;
+	}
+};
+```
+
+## Progressive Enhancement
+
+### use:enhance
+
+```svelte
+/// file: src/routes/login/+page.svelte
+<script>
+	import { enhance } from '$app/forms';
+
+	/** @type {import('./$types').PageProps} */
+	let { form } = $props();
+</script>
+
+<form method="POST" use:enhance>
+```
+
+> Only works with `method="POST"` pointing to `+page.server.js` actions.
+
+Without arguments, `use:enhance`:
+- Updates `form`, `page.form`, `page.status` on success/invalid response (only if action is on same page)
+- Resets `<form>` element
+- Invalidates all data with `invalidateAll` on success
+- Calls `goto` on redirect
+- Renders nearest `+error` boundary on error
+- Resets focus
+
+### Customising use:enhance
+
+```svelte
+<form
+	method="POST"
+	use:enhance={({ formElement, formData, action, cancel, submitter }) => {
+		// `formElement` is this `<form>` element
+		// `formData` is its `FormData` object that's about to be submitted
+		// `action` is the URL to which the form is posted
+		// calling `cancel()` will prevent the submission
+		// `submitter` is the `HTMLElement` that caused the form to be submitted
+
+		return async ({ result, update }) => {
+			// `result` is an `ActionResult` object
+			// `update` is a function which triggers the default logic that would be triggered if this callback wasn't set
+		};
+	}}
+>
+```
+
+Use `applyAction` to apply default behavior:
+
+```svelte
+/// file: src/routes/login/+page.svelte
+<script>
+	import { enhance, applyAction } from '$app/forms';
+
+	/** @type {import('./$types').PageProps} */
+	let { form } = $props();
+</script>
+
+<form
+	method="POST"
+	use:enhance={({ formElement, formData, action, cancel }) => {
+		return async ({ result }) => {
+			// `result` is an `ActionResult` object
+			if (result.type === 'redirect') {
+				goto(result.location);
+			} else {
+				await applyAction(result);
+			}
+		};
+	}}
+>
+```
+
+`applyAction(result)` behavior:
+- `success`, `failure` — sets `page.status`, updates `form` and `page.form` (regardless of submission location)
+- `redirect` — calls `goto(result.location, { invalidateAll: true })`
+- `error` — renders nearest `+error` boundary
+
+### Custom Event Listener
+
+```svelte
+<!--- file: src/routes/login/+page.svelte --->
+<script>
+	import { invalidateAll, goto } from '$app/navigation';
+	import { applyAction, deserialize } from '$app/forms';
+
+	/** @type {import('./$types').PageProps} */
+	let { form } = $props();
+
+	/** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */
+	async function handleSubmit(event) {
+		event.preventDefault();
+		const data = new FormData(event.currentTarget, event.submitter);
+
+		const response = await fetch(event.currentTarget.action, {
+			method: 'POST',
+			body: data
+		});
+
+		/** @type {import('@sveltejs/kit').ActionResult} */
+		const result = deserialize(await response.text());
+
+		if (result.type === 'success') {
+			// rerun all `load` functions, following the successful update
+			await invalidateAll();
+		}
+
+		applyAction(result);
+	}
+</script>
+
+<form method="POST" onsubmit={handleSubmit}>
+	<!-- content -->
+</form>
+```
+
+Use `deserialize()` not `JSON.parse()` - supports `Date` and `BigInt`.
+
+If `+server.js` exists alongside `+page.server.js`, add header to POST to action:
+
+```js
+const response = await fetch(this.action, {
+	method: 'POST',
+	body: data,
+	headers: {
+		'x-sveltekit-action': 'true'
+	}
+});
+```
+
+## Alternatives
+
+Use `+server.js` for JSON APIs:
+
+```svelte
+<!--- file: src/routes/send-message/+page.svelte --->
+<script>
+	function rerun() {
+		fetch('/api/ci', {
+			method: 'POST'
+		});
+	}
+</script>
+
+<button onclick={rerun}>Rerun CI</button>
+```
+
+```js
+/// file: src/routes/api/ci/+server.js
+/** @type {import('./$types').RequestHandler} */
+export function POST() {
+	// do something
+}
+```
+
+## GET vs POST
+
+Use `method="GET"` for forms that don't POST data (e.g., search). SvelteKit treats them like `<a>` elements:
+
+```html
+<form action="/search">
+	<label>
+		Search
+		<input name="q">
+	</label>
+</form>
+```
+
+Navigates to `/search?q=...`, invokes `load` but not actions. Supports `data-sveltekit-*` attributes like links.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/glossary.md b/packages/mcp-server/summaries/distilled/kit/glossary.md
new file mode 100644
index 00000000..2ee3a52a
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/glossary.md
@@ -0,0 +1,49 @@
+# SvelteKit Rendering
+
+## Key Terms
+
+### CSR (Client-Side Rendering)
+Page generation in the browser using JavaScript. Enabled by default.
+- Disable with `csr = false` page option
+
+### SSR (Server-Side Rendering)
+Page generation on the server. Enabled by default. Improves performance and SEO.
+- Disable with `ssr = false` page option
+
+### Hybrid App (Default)
+SvelteKit's default mode: initial HTML from server (SSR), then subsequent navigations via CSR.
+
+### Hydration
+Process where client-side components initialize with server-sent data, attach event listeners, and become interactive. Data fetched during SSR is transmitted to client to avoid duplicate API calls.
+- Disabled when `csr = false`
+
+### Prerendering
+Computing page contents at build time, saving HTML. Same content served to all users.
+- **Rule**: Any two users must get identical content; page cannot contain actions
+- Can include personalized content if fetched client-side
+- Control with `prerender` page option or config in `svelte.config.js`
+
+### SSG (Static Site Generation)
+Every page is prerendered. No SSR servers needed, served from CDNs.
+- Use `adapter-static` or set all pages to prerender
+
+### ISR (Incremental Static Regeneration)
+Generate static pages on-demand as visitors request them. Reduces build times vs full SSG.
+- Available with `adapter-vercel`
+
+### Routing (Client-Side)
+SvelteKit intercepts navigation and updates page on client instead of server requests. Enabled by default.
+- Skip with `data-sveltekit-reload` attribute
+
+### SPA (Single-Page App)
+Empty HTML shell on initial request, all rendering client-side. **Not recommended** due to performance/SEO impacts.
+- Build with `adapter-static`
+
+### Edge
+Rendering in CDN near user for lower latency.
+
+### MPA (Multi-Page App)
+Traditional server-rendered apps (non-JavaScript).
+
+### PWA (Progressive Web App)
+Web app functioning like native app. Can be installed, use service workers for offline capability.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/hooks.md b/packages/mcp-server/summaries/distilled/kit/hooks.md
new file mode 100644
index 00000000..5b7f2cf8
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/hooks.md
@@ -0,0 +1,255 @@
+# Hooks
+
+App-wide functions that SvelteKit calls in response to specific events.
+
+Three optional hook files:
+- `src/hooks.server.js` — server hooks
+- `src/hooks.client.js` — client hooks  
+- `src/hooks.js` — universal hooks (run on both)
+
+Code runs at app startup, useful for initializing database clients.
+
+## Server hooks
+
+### handle
+
+Runs on every server request (including prerendering). Receives `event` and `resolve` function.
+
+```js
+/// file: src/hooks.server.js
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	if (event.url.pathname.startsWith('/custom')) {
+		return new Response('custom response');
+	}
+
+	const response = await resolve(event);
+	return response;
+}
+```
+
+Default: `({ event, resolve }) => resolve(event)`
+
+**locals**: Add custom data to `event.locals` for use in handlers and `load` functions:
+
+```js
+/// file: src/hooks.server.js
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	event.locals.user = await getUserInformation(event.cookies.get('sessionid'));
+
+	const response = await resolve(event);
+
+	response.headers.set('x-custom-header', 'potato');
+
+	return response;
+}
+```
+
+**resolve options** (second parameter):
+- `transformPageChunk({ html, done })` — transform HTML chunks
+- `filterSerializedResponseHeaders(name, value)` — filter headers in serialized responses (default: none)
+- `preload({ type, path })` — determine which files to preload (default: `js` and `css`)
+
+```js
+/// file: src/hooks.server.js
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	const response = await resolve(event, {
+		transformPageChunk: ({ html }) => html.replace('old', 'new'),
+		filterSerializedResponseHeaders: (name) => name.startsWith('x-'),
+		preload: ({ type, path }) => type === 'js' || path.includes('/important/')
+	});
+
+	return response;
+}
+```
+
+### handleFetch
+
+Modify `event.fetch` calls on server/during prerendering:
+
+```js
+/// file: src/hooks.server.js
+/** @type {import('@sveltejs/kit').HandleFetch} */
+export async function handleFetch({ request, fetch }) {
+	if (request.url.startsWith('https://api.yourapp.com/')) {
+		request = new Request(
+			request.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),
+			request
+		);
+	}
+
+	return fetch(request);
+}
+```
+
+For sibling subdomains, manually include cookies:
+
+```js
+/// file: src/hooks.server.js
+/** @type {import('@sveltejs/kit').HandleFetch} */
+export async function handleFetch({ event, request, fetch }) {
+	if (request.url.startsWith('https://api.my-domain.com/')) {
+		request.headers.set('cookie', event.request.headers.get('cookie'));
+	}
+
+	return fetch(request);
+}
+```
+
+### handleValidationError
+
+Called when remote function argument doesn't match schema. Returns `App.Error` shape:
+
+```js
+/// file: src/hooks.server.js
+/** @type {import('@sveltejs/kit').HandleValidationError} */
+export function handleValidationError({ issues }) {
+	return {
+		message: 'No thank you'
+	};
+}
+```
+
+## Shared hooks
+
+Available in both `src/hooks.server.js` and `src/hooks.client.js`:
+
+### handleError
+
+Called for unexpected errors. Log errors and return safe error representation:
+
+```js
+/// file: src/hooks.server.js
+import * as Sentry from '@sentry/sveltekit';
+
+Sentry.init({/*...*/})
+
+/** @type {import('@sveltejs/kit').HandleServerError} */
+export async function handleError({ error, event, status, message }) {
+	const errorId = crypto.randomUUID();
+
+	Sentry.captureException(error, {
+		extra: { event, errorId, status }
+	});
+
+	return {
+		message: 'Whoops!',
+		errorId
+	};
+}
+```
+
+```js
+/// file: src/hooks.client.js
+import * as Sentry from '@sentry/sveltekit';
+
+Sentry.init({/*...*/})
+
+/** @type {import('@sveltejs/kit').HandleClientError} */
+export async function handleError({ error, event, status, message }) {
+	const errorId = crypto.randomUUID();
+
+	Sentry.captureException(error, {
+		extra: { event, errorId, status }
+	});
+
+	return {
+		message: 'Whoops!',
+		errorId
+	};
+}
+```
+
+Customize error shape via `App.Error` interface:
+
+```ts
+/// file: src/app.d.ts
+declare global {
+	namespace App {
+		interface Error {
+			message: string;
+			errorId: string;
+		}
+	}
+}
+
+export {};
+```
+
+> **Note**: `handleError` must never throw. Not called for expected errors (using `error()` from `@sveltejs/kit`).
+
+### init
+
+Runs once at server creation or app start. For async initialization:
+
+```js
+/// file: src/hooks.server.js
+import * as db from '$lib/server/database';
+
+/** @type {import('@sveltejs/kit').ServerInit} */
+export async function init() {
+	await db.connect();
+}
+```
+
+## Universal hooks
+
+In `src/hooks.js`, runs on both server and client:
+
+### reroute
+
+Changes URL-to-route translation. Runs before `handle`:
+
+```js
+/// file: src/hooks.js
+/** @type {Record<string, string>} */
+const translated = {
+	'/en/about': '/en/about',
+	'/de/ueber-uns': '/de/about',
+	'/fr/a-propos': '/fr/about',
+};
+
+/** @type {import('@sveltejs/kit').Reroute} */
+export function reroute({ url }) {
+	if (url.pathname in translated) {
+		return translated[url.pathname];
+	}
+}
+```
+
+Can be async (since v2.18):
+
+```js
+/// file: src/hooks.js
+/** @type {import('@sveltejs/kit').Reroute} */
+export async function reroute({ url, fetch }) {
+	if (url.pathname === '/api/reroute') return;
+
+	const api = new URL('/api/reroute', url);
+	api.searchParams.set('pathname', url.pathname);
+
+	const result = await fetch(api).then(r => r.json());
+	return result.pathname;
+}
+```
+
+> **Note**: `reroute` is pure/idempotent. Result is cached per unique URL on client.
+
+### transport
+
+Pass custom types across server/client boundary:
+
+```js
+/// file: src/hooks.js
+import { Vector } from '$lib/math';
+
+/** @type {import('@sveltejs/kit').Transport} */
+export const transport = {
+	Vector: {
+		encode: (value) => value instanceof Vector && [value.x, value.y],
+		decode: ([x, y]) => new Vector(x, y)
+	}
+};
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/icons.md b/packages/mcp-server/summaries/distilled/kit/icons.md
new file mode 100644
index 00000000..f1c418b0
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/icons.md
@@ -0,0 +1,9 @@
+# Icons
+
+## CSS Approach
+Use Iconify's CSS-based icons from [popular icon sets](https://icon-sets.iconify.design/). Supports [Tailwind CSS](https://iconify.design/docs/usage/css/tailwind/) and [UnoCSS](https://iconify.design/docs/usage/css/unocss/) plugins. No imports needed in `.svelte` files.
+
+## Svelte Libraries
+**Avoid** libraries with one `.svelte` file per icon - thousands of `.svelte` files severely slow Vite's dependency optimization, especially with mixed umbrella/subpath imports.
+
+See [icon libraries](/packages#icons) for options.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/images.md b/packages/mcp-server/summaries/distilled/kit/images.md
new file mode 100644
index 00000000..ae72dd8c
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/images.md
@@ -0,0 +1,138 @@
+# Images
+
+## Vite Built-in Handling
+
+Vite automatically processes imported assets, adding hashes for caching and inlining small assets.
+
+```svelte
+<script>
+	import logo from '$lib/assets/logo.png';
+</script>
+
+<img alt="The project logo" src={logo} />
+```
+
+## @sveltejs/enhanced-img
+
+Plugin that generates multiple formats (avif, webp), sizes, strips EXIF, and prevents layout shift. Only optimizes files available at build time.
+
+### Setup
+
+```sh
+npm i -D @sveltejs/enhanced-img
+```
+
+```js
+import { sveltekit } from '@sveltejs/kit/vite';
+import { enhancedImages } from '@sveltejs/enhanced-img';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		enhancedImages(), // must come before SvelteKit plugin
+		sveltekit()
+	]
+});
+```
+
+Build output cached in `./node_modules/.cache/imagetools`.
+
+### Basic Usage
+
+```svelte
+<enhanced:img src="./path/to/your/image.jpg" alt="An alt text" />
+```
+
+Generates `<picture>` with multiple formats/sizes. Provide images at 2x resolution for HiDPI displays.
+
+**Note:** Use `enhanced\:img` in CSS selectors to escape the colon.
+
+### Dynamic Images
+
+```svelte
+<script>
+	import MyImage from './path/to/your/image.jpg?enhanced';
+</script>
+
+<enhanced:img src={MyImage} alt="some alt text" />
+```
+
+With `import.meta.glob`:
+
+```svelte
+<script>
+	const imageModules = import.meta.glob(
+		'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp,svg}',
+		{
+			eager: true,
+			query: {
+				enhanced: true
+			}
+		}
+	)
+</script>
+
+{#each Object.entries(imageModules) as [_path, module]}
+	<enhanced:img src={module.default} alt="some alt text" />
+{/each}
+```
+
+### Dimensions
+
+`width` and `height` auto-inferred to prevent layout shift. Override with CSS:
+
+```svelte
+<style>
+	.hero-image img {
+		width: var(--size);
+		height: auto;
+	}
+</style>
+```
+
+### srcset and sizes
+
+For large images, specify `sizes` to serve smaller versions on smaller devices:
+
+```svelte
+<enhanced:img src="./image.png" sizes="min(1280px, 100vw)"/>
+```
+
+Custom widths with `w` parameter (smallest auto-generated is 540px):
+
+```svelte
+<enhanced:img
+  src="./image.png?w=1280;640;400"
+  sizes="(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px"
+/>
+```
+
+Without `sizes`, generates 2x and 1x resolution images.
+
+### Per-image Transforms
+
+Apply transforms via query string:
+
+```svelte
+<enhanced:img src="./path/to/your/image.jpg?blur=15" alt="An alt text" />
+```
+
+[Full directive list](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md).
+
+## Dynamic CDN Images
+
+For images not available at build time (CMS, backend), use CDNs. Libraries:
+- [`@unpic/svelte`](https://unpic.pics/img/svelte/) - CDN-agnostic
+- [Cloudinary](https://svelte.cloudinary.dev/)
+- CMS-specific: Contentful, Storyblok, Contentstack
+
+## Best Practices
+
+- Mix solutions as needed per use case
+- Serve via CDN to reduce latency
+- Provide 2x resolution source images for HiDPI
+- Use `sizes` for images larger than ~400px
+- For LCP images: set `fetchpriority="high"`, avoid `loading="lazy"`
+- `width`/`height` prevent layout shift (auto-added by enhanced-img)
+- Always provide `alt` text (compiler warns if missing)
+- Don't use `em`/`rem` in `sizes` or change their default size with CSS
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/integrations.md b/packages/mcp-server/summaries/distilled/kit/integrations.md
new file mode 100644
index 00000000..9e3a8e99
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/integrations.md
@@ -0,0 +1,42 @@
+# Integrations
+
+## `vitePreprocess`
+
+Enables Vite-supported CSS flavors: PostCSS, SCSS, Less, Stylus, SugarSS. Included by default in TypeScript projects.
+
+```js
+// svelte.config.js
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: [vitePreprocess()]
+};
+
+export default config;
+```
+
+**TypeScript notes:**
+- Svelte 4: Requires preprocessor
+- Svelte 5: Native support for type syntax only. For complex TS syntax, use `vitePreprocess({ script: true })`
+
+## Add-ons
+
+Run `npx sv add` to setup integrations:
+- prettier, eslint, vitest, playwright
+- lucia (auth), tailwind, drizzle (DB)
+- paraglide (i18n), mdsvex (markdown), storybook
+
+## Packages
+
+See [packages page](/packages) or [sveltesociety.dev](https://sveltesociety.dev/) for libraries and resources.
+
+## `svelte-preprocess`
+
+Alternative to `vitePreprocess` with additional features: Pug, Babel, global styles. May be slower and need more config. CoffeeScript not supported.
+
+Install: `npm i -D svelte-preprocess` + add to `svelte.config.js` + install language library (e.g., `npm i -D sass`)
+
+## Vite Plugins
+
+Use any Vite plugin. See [`vitejs/awesome-vite`](https://github.com/vitejs/awesome-vite?tab=readme-ov-file#plugins).
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/introduction.md b/packages/mcp-server/summaries/distilled/kit/introduction.md
new file mode 100644
index 00000000..d4ad6591
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/introduction.md
@@ -0,0 +1,27 @@
+# SvelteKit Introduction
+
+## What is SvelteKit?
+
+Framework for building robust, performant web apps using Svelte. Similar to Next (React) or Nuxt (Vue).
+
+## What is Svelte?
+
+UI component framework. Compiler converts components to JavaScript (renders HTML) and CSS. Components handle user interfaces like navigation bars, forms, etc.
+
+## SvelteKit vs Svelte
+
+**Svelte**: Renders UI components only.
+
+**SvelteKit**: Full-featured framework providing:
+- Router
+- [Build optimizations](https://vitejs.dev/guide/features.html#build-optimizations) - minimal code loading
+- [Offline support](service-workers)
+- [Preloading](link-options#data-sveltekit-preload-data) - fetch before navigation
+- [Configurable rendering](page-options):
+  - [SSR](glossary#SSR) - server-side rendering
+  - [CSR](glossary#CSR) - client-side rendering  
+  - [Prerendering](glossary#Prerendering) - build-time rendering
+- [Image optimization](images)
+- [Vite](https://vitejs.dev/) + [HMR](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#hot) for instant dev updates
+
+See [project types](project-types) for application examples.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/link-options.md b/packages/mcp-server/summaries/distilled/kit/link-options.md
new file mode 100644
index 00000000..484896a3
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/link-options.md
@@ -0,0 +1,104 @@
+# Link Options
+
+SvelteKit uses native `<a>` elements for navigation. Customize behavior with `data-sveltekit-*` attributes on links or parent elements. Also applies to `<form method="GET">`.
+
+## data-sveltekit-preload-data
+
+Preload page data on hover/touch before click happens.
+
+**Values:**
+- `"hover"` - preload on mouse rest over link (desktop) or `touchstart` (mobile)
+- `"tap"` - preload on `touchstart` or `mousedown` only
+
+**Default template:**
+```html
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+```
+
+**Override for specific links:**
+```html
+<a data-sveltekit-preload-data="tap" href="/stonks">
+	Get current stonk values
+</a>
+```
+
+> Ignored if user has `navigator.connection.saveData` enabled.
+
+## data-sveltekit-preload-code
+
+Preload route code without data.
+
+**Values (decreasing eagerness):**
+- `"eager"` - preload immediately
+- `"viewport"` - preload when link enters viewport
+- `"hover"` - preload on hover (code only)
+- `"tap"` - preload on tap (code only)
+
+> `viewport` and `eager` only work for links present immediately after navigation, not dynamically added links.
+> Only takes effect if more eager than `data-sveltekit-preload-data`.
+> Ignored if user has reduced data usage enabled.
+
+## data-sveltekit-reload
+
+Force full-page navigation instead of client-side routing.
+
+```html
+<a data-sveltekit-reload href="/path">Path</a>
+```
+
+> Links with `rel="external"` get same treatment and are ignored during prerendering.
+
+## data-sveltekit-replacestate
+
+Replace current history entry instead of creating new one.
+
+```html
+<a data-sveltekit-replacestate href="/path">Path</a>
+```
+
+## data-sveltekit-keepfocus
+
+Prevent focus reset after navigation.
+
+```html
+<form data-sveltekit-keepfocus>
+	<input type="text" name="query">
+</form>
+```
+
+> Avoid on links. Only use on elements that persist after navigation.
+
+## data-sveltekit-noscroll
+
+Prevent scroll to top (or `#hash`) after navigation.
+
+```html
+<a href="path" data-sveltekit-noscroll>Path</a>
+```
+
+## Disabling Options
+
+Use `"false"` value to disable inherited attributes:
+
+```html
+<div data-sveltekit-preload-data>
+	<!-- these links will be preloaded -->
+	<a href="/a">a</a>
+	<a href="/b">b</a>
+	<a href="/c">c</a>
+
+	<div data-sveltekit-preload-data="false">
+		<!-- these links will NOT be preloaded -->
+		<a href="/d">d</a>
+		<a href="/e">e</a>
+		<a href="/f">f</a>
+	</div>
+</div>
+```
+
+**Conditional attributes:**
+```svelte
+<div data-sveltekit-preload-data={condition ? 'hover' : false}>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/load.md b/packages/mcp-server/summaries/distilled/kit/load.md
new file mode 100644
index 00000000..772db606
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/load.md
@@ -0,0 +1,433 @@
+# Loading Data
+
+`load` functions fetch data before rendering `+page.svelte` and `+layout.svelte` components.
+
+## Page data
+
+`+page.js` exports a `load` function whose return value is available via the `data` prop:
+
+```js
+/// file: src/routes/blog/[slug]/+page.js
+/** @type {import('./$types').PageLoad} */
+export function load({ params }) {
+	return {
+		post: {
+			title: `Title for ${params.slug} goes here`,
+			content: `Content for ${params.slug} goes here`
+		}
+	};
+}
+```
+
+```svelte
+<!--- file: src/routes/blog/[slug]/+page.svelte --->
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data } = $props();
+</script>
+
+<h1>{data.post.title}</h1>
+<div>{@html data.post.content}</div>
+```
+
+`+page.js` runs on both server and browser (unless `export const ssr = false`). For server-only `load` (private env vars, database access), use `+page.server.js`:
+
+```js
+/// file: src/routes/blog/[slug]/+page.server.js
+import * as db from '$lib/server/database';
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+	return {
+		post: await db.getPost(params.slug)
+	};
+}
+```
+
+## Layout data
+
+`+layout.js` or `+layout.server.js` load data for layouts:
+
+```js
+/// file: src/routes/blog/[slug]/+layout.server.js
+import * as db from '$lib/server/database';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export async function load() {
+	return {
+		posts: await db.getPostSummaries()
+	};
+}
+```
+
+```svelte
+<!--- file: src/routes/blog/[slug]/+layout.svelte --->
+<script>
+	/** @type {import('./$types').LayoutProps} */
+	let { data, children } = $props();
+</script>
+
+<main>
+	{@render children()}
+</main>
+
+<aside>
+	<h2>More posts</h2>
+	<ul>
+		{#each data.posts as post}
+			<li>
+				<a href="/blog/{post.slug}">
+					{post.title}
+				</a>
+			</li>
+		{/each}
+	</ul>
+</aside>
+```
+
+Child components access parent layout data. If multiple `load` functions return the same key, the last one wins.
+
+## page.data
+
+Parent layouts can access page/child data via `page.data`:
+
+```svelte
+<!--- file: src/routes/+layout.svelte --->
+<script>
+	import { page } from '$app/state';
+</script>
+
+<svelte:head>
+	<title>{page.data.title}</title>
+</svelte:head>
+```
+
+## Universal vs server
+
+**Server `load`** (`+page.server.js`, `+layout.server.js`):
+- Always runs server-side
+- Access to `cookies`, `locals`, `platform`, `request`, `clientAddress`
+- Must return serializable data (devalue format)
+
+**Universal `load`** (`+page.js`, `+layout.js`):
+- Runs on server during SSR, then in browser during hydration
+- Subsequent runs happen in browser
+- Can return any values (custom classes, components)
+- Has `data` property containing server `load` return value
+
+**When to use:**
+- Server: database access, private env vars
+- Universal: external API calls without credentials, non-serializable returns
+- Both: pass server data to universal `load` via `data` property
+
+## Using URL data
+
+### url
+`URL` instance with `origin`, `hostname`, `pathname`, `searchParams`. `url.hash` unavailable during `load`.
+
+### route
+Current route directory relative to `src/routes`:
+
+```js
+/// file: src/routes/a/[b]/[...c]/+page.js
+/** @type {import('./$types').PageLoad} */
+export function load({ route }) {
+	console.log(route.id); // '/a/[b]/[...c]'
+}
+```
+
+### params
+Derived from `url.pathname` and `route.id`. For `/a/[b]/[...c]` and pathname `/a/x/y/z`:
+
+```json
+{
+	"b": "x",
+	"c": "y/z"
+}
+```
+
+## Making fetch requests
+
+Use provided `fetch` function with enhanced features:
+- Inherits `cookie` and `authorization` headers on server
+- Allows relative requests on server
+- Internal requests go directly to handler (no HTTP overhead)
+- Response captured and inlined during SSR
+- Response read from HTML during hydration (no extra network request)
+
+```js
+/// file: src/routes/items/[id]/+page.js
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch, params }) {
+	const res = await fetch(`/api/items/${params.id}`);
+	const item = await res.json();
+
+	return { item };
+}
+```
+
+Cookies passed through `fetch` only if target host is same as app or more specific subdomain.
+
+## Cookies
+
+Server `load` functions can get/set cookies:
+
+```js
+/// file: src/routes/+layout.server.js
+import * as db from '$lib/server/database';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export async function load({ cookies }) {
+	const sessionid = cookies.get('sessionid');
+
+	return {
+		user: await db.getUser(sessionid)
+	};
+}
+```
+
+## Headers
+
+`setHeaders` sets response headers (server-side only):
+
+```js
+/// file: src/routes/products/+page.js
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch, setHeaders }) {
+	const url = `https://cms.example.com/products.json`;
+	const response = await fetch(url);
+
+	setHeaders({
+		age: response.headers.get('age'),
+		'cache-control': response.headers.get('cache-control')
+	});
+
+	return response.json();
+}
+```
+
+Can only set each header once. Use `cookies.set()` for `set-cookie`.
+
+## Using parent data
+
+Access parent `load` data with `await parent()`:
+
+```js
+/// file: src/routes/+layout.js
+/** @type {import('./$types').LayoutLoad} */
+export function load() {
+	return { a: 1 };
+}
+```
+
+```js
+/// file: src/routes/abc/+layout.js
+/** @type {import('./$types').LayoutLoad} */
+export async function load({ parent }) {
+	const { a } = await parent();
+	return { b: a + 1 };
+}
+```
+
+```js
+/// file: src/routes/abc/+page.js
+/** @type {import('./$types').PageLoad} */
+export async function load({ parent }) {
+	const { a, b } = await parent();
+	return { c: a + b };
+}
+```
+
+**Avoid waterfalls:** Call independent operations before `await parent()`.
+
+## Errors
+
+Throw expected errors with `error` helper:
+
+```js
+/// file: src/routes/admin/+layout.server.js
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export function load({ locals }) {
+	if (!locals.user) {
+		error(401, 'not logged in');
+	}
+
+	if (!locals.user.isAdmin) {
+		error(403, 'not an admin');
+	}
+}
+```
+
+Unexpected errors treated as 500 and invoke `handleError`.
+
+## Redirects
+
+Use `redirect` helper with 3xx status code:
+
+```js
+/// file: src/routes/user/+layout.server.js
+import { redirect } from '@sveltejs/kit';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export function load({ locals }) {
+	if (!locals.user) {
+		redirect(307, '/login');
+	}
+}
+```
+
+Don't use inside `try {...}` blocks. For client-side navigation outside `load`, use `goto` from `$app/navigation`.
+
+## Streaming with promises
+
+Server `load` promises stream to browser as they resolve:
+
+```js
+/// file: src/routes/blog/[slug]/+page.server.js
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+	return {
+		comments: loadComments(params.slug), // streams
+		post: await loadPost(params.slug) // awaited
+	};
+}
+```
+
+```svelte
+<!--- file: src/routes/blog/[slug]/+page.svelte --->
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data } = $props();
+</script>
+
+<h1>{data.post.title}</h1>
+<div>{@html data.post.content}</div>
+
+{#await data.comments}
+	Loading comments...
+{:then comments}
+	{#each comments as comment}
+		<p>{comment.content}</p>
+	{/each}
+{:catch error}
+	<p>error loading comments: {error.message}</p>
+{/await}
+```
+
+Handle rejections to avoid unhandled promise errors. Attach noop-`catch` or use SvelteKit's `fetch`.
+
+**Limitations:**
+- Doesn't work without JavaScript
+- Can't `setHeaders` or redirect inside streamed promises
+- Not supported on some platforms (AWS Lambda, Firebase)
+
+## Parallel loading
+
+All `load` functions run concurrently. Server `load` results grouped into single response during client navigation.
+
+## Rerunning load functions
+
+SvelteKit tracks dependencies to avoid unnecessary reruns.
+
+**A `load` function reruns when:**
+- Referenced `params` property changes
+- Referenced `url` property changes (`pathname`, `search`, etc.)
+- Calls `url.searchParams.get/getAll/has` and parameter changes
+- Calls `await parent()` and parent reruns
+- Declared dependency via `fetch` or `depends` and URL invalidated with `invalidate(url)`
+- `invalidateAll()` called
+
+```js
+/// file: src/routes/random-number/+page.js
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch, depends }) {
+	const response = await fetch('https://api.example.com/random-number');
+	depends('app:random');
+
+	return {
+		number: await response.json()
+	};
+}
+```
+
+```svelte
+<!--- file: src/routes/random-number/+page.svelte --->
+<script>
+	import { invalidate, invalidateAll } from '$app/navigation';
+
+	/** @type {import('./$types').PageProps} */
+	let { data } = $props();
+
+	function rerunLoadFunction() {
+		invalidate('app:random');
+		invalidate('https://api.example.com/random-number');
+		invalidate(url => url.href.includes('random-number'));
+		invalidateAll();
+	}
+</script>
+
+<p>random number: {data.number}</p>
+<button onclick={rerunLoadFunction}>Update random number</button>
+```
+
+### Untracking dependencies
+
+Exclude from tracking with `untrack`:
+
+```js
+/// file: src/routes/+page.js
+/** @type {import('./$types').PageLoad} */
+export async function load({ untrack, url }) {
+	if (untrack(() => url.pathname === '/')) {
+		return { message: 'Welcome!' };
+	}
+}
+```
+
+## Implications for authentication
+
+- Layout `load` doesn't run on every request (e.g., client-side navigation)
+- Layout and page `load` run concurrently unless `await parent()` called
+
+**Auth strategies:**
+- Use hooks to protect routes before `load` runs
+- Put auth guards in `+page.server.js` for route-specific protection
+- Avoid auth in `+layout.server.js` unless all children call `await parent()`
+
+## Using `getRequestEvent`
+
+Access request event in shared logic:
+
+```js
+/// file: src/lib/server/auth.js
+import { redirect } from '@sveltejs/kit';
+import { getRequestEvent } from '$app/server';
+
+export function requireLogin() {
+	const { locals, url } = getRequestEvent();
+
+	if (!locals.user) {
+		const redirectTo = url.pathname + url.search;
+		const params = new URLSearchParams({ redirectTo });
+
+		redirect(307, `/login?${params}`);
+	}
+
+	return locals.user;
+}
+```
+
+```js
+/// file: +page.server.js
+import { requireLogin } from '$lib/server/auth';
+
+export function load() {
+	const user = requireLogin();
+
+	return {
+		message: `hello ${user.name}!`
+	};
+}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/migrating-to-sveltekit-2.md b/packages/mcp-server/summaries/distilled/kit/migrating-to-sveltekit-2.md
new file mode 100644
index 00000000..017c6eb1
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/migrating-to-sveltekit-2.md
@@ -0,0 +1,140 @@
+# SvelteKit v1 to v2 Migration Guide
+
+Use `npx sv migrate sveltekit-2` to auto-migrate many changes.
+
+## `redirect` and `error` no longer thrown
+
+Don't `throw` these anymore — just call them:
+
+```js
+import { error } from '@sveltejs/kit'
+
+// Before
+throw error(500, 'something went wrong');
+// After
+error(500, 'something went wrong');
+```
+
+Inside `try` blocks, use `isHttpError` and `isRedirect` from `@sveltejs/kit` to distinguish them.
+
+## `path` required for cookies
+
+Must specify `path` when setting/deleting cookies. Usually `path: '/'`:
+
+```js
+export function load({ cookies }) {
+	cookies.set(name, value, { path: '/' });
+	return { response }
+}
+```
+
+## Top-level promises not auto-awaited
+
+Promises in `load` return values are no longer automatically awaited. Use `await` explicitly:
+
+```js
+// Single promise
+export async function load({ fetch }) {
+	const response = await fetch(url).then(r => r.json());
+	return { response }
+}
+```
+
+```js
+// Multiple promises - use Promise.all to avoid waterfalls
+export async function load({ fetch }) {
+	const [a, b] = await Promise.all([
+	  fetch(url1).then(r => r.json()),
+	  fetch(url2).then(r => r.json()),
+	]);
+	return { a, b };
+}
+```
+
+## `goto()` changes
+
+- No longer accepts external URLs (use `window.location.href = url`)
+- `state` object now sets `$page.state` and must match `App.PageState` interface
+
+## Paths relative by default
+
+[`paths.relative`](configuration#paths) defaults to `true`. All paths (including `%sveltekit.assets%`, `base`, `assets`) are consistently relative or absolute based on this setting.
+
+## Server fetches not trackable
+
+`dangerZone.trackServerFetches` removed due to security concerns.
+
+## `preloadCode` requires `base` prefix
+
+Both [`preloadCode`]($app-navigation#preloadCode) and [`preloadData`]($app-navigation#preloadData) now require `base` prefix if set. `preloadCode` takes single argument instead of multiple.
+
+## `resolvePath` → `resolveRoute`
+
+```js
+// Before
+import { resolvePath } from '@sveltejs/kit';
+import { base } from '$app/paths';
+const path = base + resolvePath('/blog/[slug]', { slug });
+
+// After
+import { resolveRoute } from '$app/paths';
+const path = resolveRoute('/blog/[slug]', { slug });
+```
+
+## Improved error handling
+
+`handleError` hook now receives `status` and `message` properties. Errors from your code have `status: 500` and `message: "Internal Error"`.
+
+## Dynamic env vars unavailable during prerendering
+
+`$env/dynamic/public` and `$env/dynamic/private` cannot be read during prerendering — use `$env/static/*` instead. Browser gets fresh values from `/_app/env.js`.
+
+## `use:enhance` callback changes
+
+`form` and `data` removed — use `formElement` and `formData` instead.
+
+## File input forms require `multipart/form-data`
+
+Forms with `<input type="file">` must have `enctype="multipart/form-data"` or SvelteKit throws error.
+
+## Stricter `tsconfig.json`
+
+Don't use `paths` or `baseUrl` in `tsconfig.json` — use [`alias` config](configuration#alias) in `svelte.config.js` instead.
+
+## `getRequest` error handling
+
+Errors for oversized `Content-Length` thrown when reading body, not when calling `getRequest`.
+
+## `vitePreprocess` import change
+
+Import from `@sveltejs/vite-plugin-svelte` instead of `@sveltejs/kit/vite`.
+
+## Dependency requirements
+
+- Node `18.13+`
+- `svelte@4+`
+- `vite@5+`
+- `typescript@5+`
+- `@sveltejs/vite-plugin-svelte@3+` (now peer dependency)
+
+Generated `tsconfig.json` uses `"moduleResolution": "bundler"` and `verbatimModuleSyntax`.
+
+## SvelteKit 2.12: `$app/stores` deprecated
+
+Replace with `$app/state` (Svelte 5 runes-based). Provides fine-grained reactivity.
+
+```svelte
+<script>
+	// Before
+	import { page } from '$app/stores';
+	// After
+	import { page } from '$app/state';
+</script>
+
+<!-- Before -->
+{$page.data}
+<!-- After -->
+{page.data}
+```
+
+Use `npx sv migrate app-state` to auto-migrate.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/migrating.md b/packages/mcp-server/summaries/distilled/kit/migrating.md
new file mode 100644
index 00000000..cd404677
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/migrating.md
@@ -0,0 +1,153 @@
+# Migrating from Sapper to SvelteKit
+
+## package.json Changes
+
+### type: "module"
+Add `"type": "module"` to `package.json`.
+
+### dependencies
+Remove `polka`, `express`, and middleware like `sirv` or `compression`.
+
+### devDependencies
+Replace `sapper` with `@sveltejs/kit` and an [adapter](adapters).
+
+### scripts
+- `sapper build` → `vite build` (with Node adapter)
+- `sapper export` → `vite build` (with static adapter)
+- `sapper dev` → `vite dev`
+- `node __sapper__/build` → `node build`
+
+## Project Files
+
+### Configuration
+Replace `webpack.config.js`/`rollup.config.js` with `svelte.config.js`. Move preprocessor options to `config.preprocess`. Add an [adapter](adapters).
+
+For non-Vite filetypes, add Vite equivalents to [Vite config](project-structure#Project-files-vite.config.js).
+
+### src/client.js
+No equivalent. Move custom logic to `+layout.svelte` inside `onMount`.
+
+### src/server.js
+Use [custom server](adapter-node#Custom-server) with `adapter-node`, otherwise no equivalent (serverless environments).
+
+### src/service-worker.js
+`@sapper/service-worker` → [`$service-worker`]($service-worker):
+- `files` unchanged
+- `routes` removed
+- `shell` → `build`
+- `timestamp` → `version`
+
+### src/template.html
+Rename to `src/app.html`.
+
+Remove `%sapper.base%`, `%sapper.scripts%`, `%sapper.styles%`.
+- `%sapper.head%` → `%sveltekit.head%`
+- `%sapper.html%` → `%sveltekit.body%`
+- Remove `<div id="sapper">`
+
+### src/node_modules
+Use [`src/lib`]($lib) instead (Vite incompatible).
+
+## Pages and Layouts
+
+### Renamed Files
+| Old | New |
+|-----|-----|
+| routes/about/index.svelte | routes/about/+page.svelte |
+| routes/about.svelte | routes/about/+page.svelte |
+| _error.svelte | +error.svelte |
+| _layout.svelte | +layout.svelte |
+
+### Imports
+- `@sapper/app`: `goto`, `prefetch`, `prefetchRoutes` → [`$app/navigation`]($app-navigation): `goto`, `preloadData`, `preloadCode`
+- `src/node_modules/*` → [`$lib`]($lib)
+
+### Preload
+`preload` → [`load`](load) in `+page.js`/`+layout.js`.
+
+**API changes:**
+- Single `event` argument (not `page` and `session`)
+- No `this` object
+- `this.fetch` → `fetch` from input
+- `this.error`/`this.redirect` → throw [`error`](load#Errors)/[`redirect`](load#Redirects)
+
+### Stores
+```js
+// Old
+import { stores } from '@sapper/app';
+const { preloading, page, session } = stores();
+```
+
+**New:** Import directly from [`$app/stores`]($app-stores) (or [`$app/state`]($app-state) for Svelte 5 + SvelteKit 2.12+):
+- `preloading` → `navigating` (with `from`/`to` properties)
+- `page` now has `url` and `params` (no `path` or `query`)
+
+### Routing
+Regex routes removed. Use [advanced route matching](advanced-routing#Matching).
+
+### Segments
+`segment` prop removed. Use `$page.url.pathname` instead.
+
+### URLs
+Relative URLs now resolve against current page, not base URL. Use root-relative URLs (`/...`) for context-independence.
+
+### &lt;a&gt; Attributes
+- `sapper:prefetch` → `data-sveltekit-preload-data`
+- `sapper:noscroll` → `data-sveltekit-noscroll`
+
+## Endpoints
+
+No direct `req`/`res` access. Update to new signature for platform-agnostic behavior.
+
+`fetch` now globally available (no need for `node-fetch`).
+
+## Integrations
+
+### HTML Minifier
+Not included by default. Add as prod dependency and use via [hook](hooks#Server-hooks-handle):
+
+```js
+// @filename: ambient.d.ts
+/// <reference types="@sveltejs/kit" />
+declare module 'html-minifier';
+
+// @filename: index.js
+// ---cut---
+import { minify } from 'html-minifier';
+import { building } from '$app/environment';
+
+const minification_options = {
+	collapseBooleanAttributes: true,
+	collapseWhitespace: true,
+	conservativeCollapse: true,
+	decodeEntities: true,
+	html5: true,
+	ignoreCustomComments: [/^#/],
+	minifyCSS: true,
+	minifyJS: false,
+	removeAttributeQuotes: true,
+	removeComments: false, // some hydration code needs comments, so leave them in
+	removeOptionalTags: true,
+	removeRedundantAttributes: true,
+	removeScriptTypeAttributes: true,
+	removeStyleLinkTypeAttributes: true,
+	sortAttributes: true,
+	sortClassName: true
+};
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	let page = '';
+
+	return resolve(event, {
+		transformPageChunk: ({ html, done }) => {
+			page += html;
+			if (done) {
+				return building ? minify(page, minification_options) : page;
+			}
+		}
+	});
+}
+```
+
+**Note:** `prerendering` is `false` with `vite preview`, so inspect built HTML files directly to verify minification.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/observability.md b/packages/mcp-server/summaries/distilled/kit/observability.md
new file mode 100644
index 00000000..e308411f
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/observability.md
@@ -0,0 +1,86 @@
+# OpenTelemetry Tracing
+
+**Available since 2.31** - Experimental feature
+
+## Setup
+
+Enable in `svelte.config.js`:
+
+```js
+/// file: svelte.config.js
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		experimental: {
+			tracing: {
+				server: true
+			},
+			instrumentation: {
+				server: true
+			}
+		}
+	}
+};
+
+export default config;
+```
+
+## What Gets Traced
+
+- `handle` hook and `sequence` functions
+- Server `load` functions (including universal `load` on server)
+- Form actions
+- Remote functions
+
+## Augmenting Spans
+
+Access `root` and `current` spans via request event:
+
+```js
+/// file: $lib/authenticate.ts
+import { getRequestEvent } from '$app/server';
+import { getAuthenticatedUser } from '$lib/auth-core';
+
+async function authenticate() {
+	const user = await getAuthenticatedUser();
+	const event = getRequestEvent();
+	event.tracing.root.setAttribute('userId', user.id);
+}
+```
+
+## Local Development Setup
+
+Install dependencies:
+```sh
+npm i @opentelemetry/sdk-node @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-proto import-in-the-middle
+```
+
+Create `src/instrumentation.server.js`:
+
+```js
+/// file: src/instrumentation.server.js
+import { NodeSDK } from '@opentelemetry/sdk-node';
+import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
+import { createAddHookMessageChannel } from 'import-in-the-middle';
+import { register } from 'node:module';
+
+const { registerOptions } = createAddHookMessageChannel();
+register('import-in-the-middle/hook.mjs', import.meta.url, registerOptions);
+
+const sdk = new NodeSDK({
+	serviceName: 'test-sveltekit-tracing',
+	traceExporter: new OTLPTraceExporter(),
+	instrumentations: [getNodeAutoInstrumentations()]
+});
+
+sdk.start();
+```
+
+View traces at [localhost:16686](http://localhost:16686) with Jaeger.
+
+## Notes
+
+- `src/instrumentation.server.ts` runs before app code (if platform/adapter supports it)
+- Tracing has performance overhead - consider dev/preview only
+- `@opentelemetry/api` is optional peer dependency, usually satisfied by SDK packages
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/packaging.md b/packages/mcp-server/summaries/distilled/kit/packaging.md
new file mode 100644
index 00000000..b041e458
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/packaging.md
@@ -0,0 +1,138 @@
+# Packaging Svelte Libraries
+
+Use `@sveltejs/package` to build component libraries. Structure is same as SvelteKit apps, but `src/lib` is public-facing (not `src/routes`).
+
+## svelte-package Command
+
+Generates `dist` directory from `src/lib`:
+- Preprocesses Svelte components
+- Transpiles TypeScript to JavaScript  
+- Generates `.d.ts` type definitions (requires `typescript >= 4.0.0`)
+
+## package.json Configuration
+
+### Key Fields
+
+**name** - Package identifier for npm
+```json
+{ "name": "your-library" }
+```
+
+**license** - Usage terms (e.g., `"MIT"`)
+
+**files** - What gets published (README/LICENSE auto-included)
+```json
+{ "files": ["dist"] }
+```
+
+**exports** - Entry points with conditions
+```json
+{
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  }
+}
+```
+
+Export conditions:
+- `types` - TypeScript definitions
+- `svelte` - For Svelte-aware tooling (use `default` for non-Svelte libraries)
+
+Multiple entry points:
+```json
+{
+  "exports": {
+    "./Foo.svelte": {
+      "types": "./dist/Foo.svelte.d.ts",
+      "svelte": "./dist/Foo.svelte"
+    }
+  }
+}
+```
+
+**svelte** - Legacy field for backwards compatibility
+```json
+{ "svelte": "./dist/index.js" }
+```
+
+**sideEffects** - Enables tree-shaking. Mark CSS files as side effects for webpack compatibility:
+```json
+{ "sideEffects": ["**/*.css"] }
+```
+
+## TypeScript
+
+Type definitions auto-generated by default. For non-root exports (e.g., `your-library/foo`), TypeScript won't resolve `types` condition correctly. Two solutions:
+
+**Option 1:** Users set `"moduleResolution": "bundler"` (TS 5+), `"node16"`, or `"nodenext"` in tsconfig
+
+**Option 2:** Use `typesVersions` in package.json:
+```json
+{
+  "exports": {
+    "./foo": {
+      "types": "./dist/foo.d.ts",
+      "svelte": "./dist/foo.js"
+    }
+  },
+  "typesVersions": {
+    ">4.0": {
+      "foo": ["./dist/foo.d.ts"]
+    }
+  }
+}
+```
+
+## Best Practices
+
+- Avoid SvelteKit-specific modules (`$app/*`) unless targeting only SvelteKit projects. Use `esm-env` instead
+- Add aliases via `svelte.config.js` (not `vite.config.js`)
+- Removing exports or export conditions is a breaking change
+- Adding new exports is non-breaking
+
+## Source Maps
+
+Enable declaration maps for "Go to Definition" support:
+1. Set `"declarationMap": true` in tsconfig.json
+2. Publish source files alongside dist:
+```json
+{
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "src/lib",
+    "!src/lib/**/*.test.*"
+  ]
+}
+```
+
+## CLI Options
+
+```sh
+svelte-package [options]
+```
+
+- `-w`/`--watch` - Rebuild on changes
+- `-i`/`--input` - Input directory (default: `src/lib`)
+- `-o`/`--output` - Output directory (default: `dist`)
+- `-p`/`--preserve-output` - Don't empty output first (default: `false`)
+- `-t`/`--types` - Generate type definitions (default: `true`)
+- `--tsconfig` - Path to tsconfig/jsconfig
+
+## Publishing
+
+```sh
+npm publish
+```
+
+## Caveats
+
+**Relative imports must be fully specified** with extensions:
+```js
+import { something } from './something/index.js';
+```
+
+For TypeScript, import `.ts` files using `.js` extension. Set `"moduleResolution": "NodeNext"` in tsconfig for help.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/page-options.md b/packages/mcp-server/summaries/distilled/kit/page-options.md
new file mode 100644
index 00000000..d7b454fc
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/page-options.md
@@ -0,0 +1,170 @@
+# Page Options
+
+SvelteKit renders components on the server first, sends HTML to client, then hydrates for interactivity. Export options from `+page.js`, `+page.server.js`, `+layout.js`, or `+layout.server.js` to control behavior per page or page groups. Child layouts/pages override parent values.
+
+## prerender
+
+Generate static HTML at build time for routes that don't need dynamic rendering.
+
+```js
+/// file: +page.js/+page.server.js/+server.js
+export const prerender = true;
+```
+
+Or prerender everything except specific pages:
+
+```js
+/// file: +page.js/+page.server.js/+server.js
+export const prerender = false;
+```
+
+Use `'auto'` to prerender but keep in manifest for dynamic SSR:
+
+```js
+/// file: +page.js/+page.server.js/+server.js
+export const prerender = 'auto';
+```
+
+Prerenderer starts at root and follows `<a>` links. Configure entry points via `config.kit.prerender.entries` or [`entries`](#entries) function.
+
+During prerendering, `building` from `$app/environment` is `true`.
+
+### Prerendering server routes
+
+`+server.js` files inherit `prerender` from pages that fetch from them:
+
+```js
+/// file: +page.js
+export const prerender = true;
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch }) {
+	const res = await fetch('/my-server-route.json');
+	return await res.json();
+}
+```
+
+### When not to prerender
+
+**Rule:** Two users hitting a page directly must get identical server content.
+
+- Don't prerender personalized content
+- `url.searchParams` forbidden during prerender (use in browser only, e.g., `onMount`)
+- Pages with [actions](form-actions) can't be prerendered
+
+### Route conflicts
+
+Avoid directory/file name conflicts. Use file extensions: `foo.json/+server.js` and `foo/bar.json/+server.js` create `foo.json` and `foo/bar.json`. Pages write `foo/index.html`.
+
+### Troubleshooting
+
+Error "routes marked as prerenderable, but were not prerendered" means crawler didn't reach the route. Fix by:
+
+- Ensure links exist from `config.kit.prerender.entries` or [`entries`](#entries)
+- Add links from other prerendered pages with SSR enabled
+- Change to `export const prerender = 'auto'`
+
+## entries
+
+SvelteKit auto-discovers pages by crawling from entry points (non-dynamic routes). For dynamic routes without discoverable links, export `entries`:
+
+```js
+/// file: src/routes/blog/[slug]/+page.server.js
+/** @type {import('./$types').EntryGenerator} */
+export function entries() {
+	return [
+		{ slug: 'hello-world' },
+		{ slug: 'another-blog-post' }
+	];
+}
+
+export const prerender = true;
+```
+
+`entries` can be `async` for fetching from CMS/database.
+
+## ssr
+
+Disable server-side rendering to render empty shell (client-only):
+
+```js
+/// file: +page.js
+export const ssr = false;
+// If both `ssr` and `csr` are `false`, nothing will be rendered!
+```
+
+In root `+layout.js`, this turns app into SPA. Not recommended for most cases.
+
+> **Note:** If page options are static values, SvelteKit evaluates them statically. Otherwise, it imports files on server. Browser-only code must not run on module load—import in `+page.svelte` or `+layout.svelte` instead.
+
+## csr
+
+Disable client-side rendering for pages not requiring JavaScript:
+
+```js
+/// file: +page.js
+export const csr = false;
+// If both `csr` and `ssr` are `false`, nothing will be rendered!
+```
+
+**Effects:**
+- No JavaScript shipped
+- `<script>` tags removed from components
+- `<form>` can't be progressively enhanced
+- Full-page browser navigation
+- HMR disabled
+
+Enable in dev only:
+
+```js
+/// file: +page.js
+import { dev } from '$app/environment';
+
+export const csr = dev;
+```
+
+## trailingSlash
+
+Control URL trailing slash behavior: `'never'` (default), `'always'`, or `'ignore'`.
+
+```js
+/// file: src/routes/+layout.js
+export const trailingSlash = 'always';
+```
+
+Affects prerendering: `'always'` creates `about/index.html`, otherwise `about.html`.
+
+> **Note:** Don't use `'ignore'`—relative paths differ (`./y` from `/x` vs `/x/`), and `/x` vs `/x/` are separate URLs (bad for SEO).
+
+## config
+
+Adapter-specific deployment configuration. Shape depends on adapter. Top-level merge only.
+
+```js
+/// file: src/routes/+page.js
+/** @type {import('some-adapter').Config} */
+export const config = {
+	runtime: 'edge'
+};
+```
+
+**Merge example:**
+
+```js
+/// file: src/routes/+layout.js
+export const config = {
+	runtime: 'edge',
+	regions: 'all',
+	foo: { bar: true }
+}
+```
+
+```js
+/// file: src/routes/+page.js
+export const config = {
+	regions: ['us1', 'us2'],
+	foo: { baz: true }
+}
+```
+
+**Result:** `{ runtime: 'edge', regions: ['us1', 'us2'], foo: { baz: true } }`
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/performance.md b/packages/mcp-server/summaries/distilled/kit/performance.md
new file mode 100644
index 00000000..03b3d8d3
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/performance.md
@@ -0,0 +1,85 @@
+# Performance
+
+## Built-in Optimizations
+
+SvelteKit automatically provides:
+- Code-splitting
+- Asset preloading
+- File hashing for caching
+- Request coalescing (groups server `load` functions into single HTTP request)
+- Parallel loading for universal `load` functions
+- Data inlining (replays server `fetch` in browser without new request)
+- Conservative invalidation (only re-runs `load` when necessary)
+- Prerendering
+- Link preloading
+
+## Diagnosing Issues
+
+**Tools:**
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [WebPageTest](https://www.webpagetest.org/)
+- Browser devtools: Lighthouse, Network, Performance tabs
+
+**Important:** Test in preview mode after building, not dev mode.
+
+**Instrumenting:** Use [OpenTelemetry](https://opentelemetry.io/) or [Server-Timing headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing) to debug slow API calls.
+
+## Optimizing Assets
+
+### Images
+Use `@sveltejs/enhanced-img` package (see [images](images) page).
+
+### Videos
+- Compress with [Handbrake](https://handbrake.fr/), convert to `.webm` or `.mp4`
+- Lazy-load below-the-fold videos: `preload="none"`
+- Strip audio from muted videos with [FFmpeg](https://ffmpeg.org/)
+
+### Fonts
+SvelteKit doesn't preload fonts by default. Preload in `handle` hook with `resolve` and `preload` filter. [Subset fonts](https://web.dev/learn/performance/optimize-web-fonts#subset_your_web_fonts) to reduce size.
+
+## Reducing Code Size
+
+### Svelte Version
+Use latest version. Svelte 5 < Svelte 4 < Svelte 3 (size and speed).
+
+### Packages
+Use [`rollup-plugin-visualizer`](https://www.npmjs.com/package/rollup-plugin-visualizer) to identify large packages. Inspect build output with `build: { minify: false }` in Vite config.
+
+### External Scripts
+Minimize third-party scripts. Use server-side analytics (Cloudflare, Netlify, Vercel). Run scripts in web worker with [Partytown's SvelteKit integration](https://partytown.builder.io/sveltekit).
+
+### Selective Loading
+Use dynamic `import(...)` for conditional code instead of static `import`.
+
+## Navigation
+
+### Preloading
+Configure [link options](link-options) for eager preloading (default on `<body>`).
+
+### Non-essential Data
+Return promises in `load` functions for slow data. Server `load` functions will [stream](load#Streaming-with-promises) data after navigation.
+
+### Preventing Waterfalls
+
+**Waterfalls** = sequential requests that kill performance.
+
+**Browser waterfalls:**
+- SvelteKit adds `modulepreload` tags/headers automatically
+- Check network tab for additional preload needs
+- Manually handle web fonts
+- **Avoid SPA mode** — creates waterfalls (empty page → JS → render)
+
+**Backend waterfalls:**
+- Use [server `load` functions](load#Universal-vs-server) to make backend requests from server, not browser
+- Use database joins instead of sequential queries
+
+## Hosting
+
+- Locate frontend in same data center as backend
+- Use edge deployment (many adapters support this, some [per-route](page-options#config))
+- Use CDN for images (often automatic)
+- Ensure HTTP/2 or newer for parallel file loading
+
+## Further Reading
+
+[Core Web Vitals](https://web.dev/explore/learn-core-web-vitals)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/project-structure.md b/packages/mcp-server/summaries/distilled/kit/project-structure.md
new file mode 100644
index 00000000..423dd7c6
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/project-structure.md
@@ -0,0 +1,83 @@
+# SvelteKit Project Structure
+
+## Directory Structure
+
+```tree
+my-project/
+├ src/
+│ ├ lib/
+│ │ ├ server/          # Server-only code
+│ │ └ [lib files]      # Utilities/components
+│ ├ params/            # Param matchers
+│ ├ routes/            # App routes
+│ ├ app.html           # Page template
+│ ├ error.html         # Error page
+│ ├ hooks.client.js
+│ ├ hooks.server.js
+│ ├ service-worker.js
+│ └ instrumentation.server.js
+├ static/              # Static assets
+├ tests/
+├ package.json
+├ svelte.config.js
+├ tsconfig.json
+└ vite.config.js
+```
+
+## Key Directories
+
+### src/lib
+- Import via `$lib` alias
+- `lib/server`: Server-only code, import via `$lib/server`. Client imports are blocked.
+
+### src/routes
+Contains app routes and colocated components.
+
+### src/params
+Param matchers for advanced routing.
+
+## Key Files
+
+### app.html
+Page template with placeholders:
+- `%sveltekit.head%` - `<link>`, `<script>`, `<svelte:head>` content
+- `%sveltekit.body%` - Rendered markup (must be inside `<div>`, not directly in `<body>`)
+- `%sveltekit.assets%` - `paths.assets` or relative to `paths.base`
+- `%sveltekit.nonce%` - CSP nonce
+- `%sveltekit.env.[NAME]%` - Environment variables (must start with `publicPrefix`, usually `PUBLIC_`)
+- `%sveltekit.version%` - App version
+
+### error.html
+Fallback error page with placeholders:
+- `%sveltekit.status%` - HTTP status
+- `%sveltekit.error.message%` - Error message
+
+### hooks.client.js / hooks.server.js
+Client and server hooks.
+
+### service-worker.js
+Service worker code.
+
+### instrumentation.server.js
+Observability setup. Runs before app code (requires adapter support).
+
+### package.json
+Must include `@sveltejs/kit`, `svelte`, `vite` as `devDependencies`.
+Must have `"type": "module"` (`.cjs` for CommonJS).
+
+### svelte.config.js
+Svelte and SvelteKit configuration.
+
+### tsconfig.json
+TypeScript config. Extends generated `.svelte-kit/tsconfig.json`. Use `typescript.config` setting for top-level changes.
+
+### vite.config.js
+Vite config using `@sveltejs/kit/vite` plugin.
+
+## Other
+
+### static/
+Static assets served as-is (e.g., `robots.txt`, `favicon.png`).
+
+### .svelte-kit/
+Generated files (configurable via `outDir`). Can be deleted and regenerated.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/project-types.md b/packages/mcp-server/summaries/distilled/kit/project-types.md
new file mode 100644
index 00000000..65eaebf1
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/project-types.md
@@ -0,0 +1,61 @@
+# Rendering & Deployment
+
+SvelteKit supports multiple rendering modes and deployment targets. Rendering is controlled by your adapter choice and configuration. Project structure and routing remain the same across all types.
+
+## Default Rendering
+
+- First page: [SSR](glossary#SSR) (server-side rendering)
+- Subsequent pages: [CSR](glossary#CSR) (client-side rendering)
+- Benefits: Better SEO, faster navigation, no flash between pages
+- Also called "transitional apps"
+
+## Static Site Generation (SSG)
+
+- Use [`adapter-static`](adapter-static) to prerender entire site
+- Or use [prerender option](page-options#prerender) for specific pages only
+- For very large sites: Use [ISR with `adapter-vercel`](adapter-vercel#Incremental-Static-Regeneration)
+- Can mix rendering types across pages
+
+## Single-Page App (SPA)
+
+- CSR only
+- See [single-page apps guide](single-page-apps)
+- Skip `server` file documentation if no backend needed
+
+## Multi-Page App (MPA)
+
+- Not typical for SvelteKit
+- Use [`csr = false`](page-options#csr) to remove JS and force server rendering
+- Or use [`data-sveltekit-reload`](link-options#data-sveltekit-reload) for specific server-rendered links
+
+## Separate Backend
+
+If backend is in another language (Go, Java, PHP, Ruby, Rust, C#):
+- **Recommended**: Deploy frontend separately with `adapter-node` or serverless adapter
+- Alternative: Deploy as SPA served by backend (worse SEO/performance)
+- Skip `server` file docs
+- See [FAQ on external backends](faq#How-do-I-use-a-different-backend-API-server)
+
+## Deployment Targets
+
+**Serverless**: 
+- [adapter-auto](adapter-auto) (zero config)
+- [`adapter-vercel`](adapter-vercel), [`adapter-netlify`](adapter-netlify), [`adapter-cloudflare`](adapter-cloudflare)
+- Some support `edge` option for [edge rendering](glossary#Edge)
+
+**Your Server/VPS**: [`adapter-node`](adapter-node)
+
+**Container**: [`adapter-node`](adapter-node) for Docker/LXC
+
+**Library**: Use [`@sveltejs/package`](packaging) with [`sv create`](/docs/cli/sv-create)
+
+**Offline/PWA**: Full [service worker](service-workers) support
+
+**Mobile**: Convert SPA with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte)
+- Use [`bundleStrategy: 'single'`](configuration#output) to reduce requests (helpful for HTTP/1 servers)
+
+**Desktop**: Convert SPA with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/), [Wails](https://wails.io/docs/guides/sveltekit/), or [Electron](https://www.electronjs.org/)
+
+**Browser Extension**: Use [`adapter-static`](adapter-static) or [community adapters](/packages#sveltekit-adapters)
+
+**Embedded Devices**: Svelte runs on low-power devices. Use [`bundleStrategy: 'single'`](configuration#output) to limit concurrent connections
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/remote-functions.md b/packages/mcp-server/summaries/distilled/kit/remote-functions.md
new file mode 100644
index 00000000..3c7eaa44
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/remote-functions.md
@@ -0,0 +1,569 @@
+# Remote Functions
+
+**Available since 2.27** - Experimental feature for type-safe client-server communication.
+
+## Setup
+
+Enable in `svelte.config.js`:
+
+```js
+/// file: svelte.config.js
+const config = {
+	kit: {
+		experimental: {
+			remoteFunctions: true
+		}
+	},
+	compilerOptions: {
+		experimental: {
+			async: true // optional, for await in components
+		}
+	}
+};
+```
+
+## Overview
+
+Export from `.remote.js` or `.remote.ts` files in `src/`. Four types: `query`, `form`, `command`, `prerender`. Client calls become `fetch` wrappers to generated HTTP endpoints.
+
+---
+
+## query
+
+Read dynamic data from server:
+
+```js
+/// file: src/routes/blog/data.remote.js
+import { query } from '$app/server';
+import * as db from '$lib/server/database';
+
+export const getPosts = query(async () => {
+	const posts = await db.sql`
+		SELECT title, slug FROM post ORDER BY published_at DESC
+	`;
+	return posts;
+});
+```
+
+Use with `await`:
+
+```svelte
+<!--- file: src/routes/blog/+page.svelte --->
+<script>
+	import { getPosts } from './data.remote';
+</script>
+
+<ul>
+	{#each await getPosts() as { title, slug }}
+		<li><a href="/blog/{slug}">{title}</a></li>
+	{/each}
+</ul>
+```
+
+Or with properties:
+
+```svelte
+<script>
+	const query = getPosts();
+</script>
+
+{#if query.error}
+	<p>oops!</p>
+{:else if query.loading}
+	<p>loading...</p>
+{:else}
+	<ul>
+		{#each query.current as { title, slug }}
+			<li><a href="/blog/{slug}">{title}</a></li>
+		{/each}
+	</ul>
+{/if}
+```
+
+### Query arguments
+
+Validate with Standard Schema (Zod/Valibot):
+
+```js
+import * as v from 'valibot';
+import { error } from '@sveltejs/kit';
+import { query } from '$app/server';
+
+export const getPost = query(v.string(), async (slug) => {
+	const [post] = await db.sql`SELECT * FROM post WHERE slug = ${slug}`;
+	if (!post) error(404, 'Not found');
+	return post;
+});
+```
+
+```svelte
+<script>
+	let { params } = $props();
+	const post = $derived(await getPost(params.slug));
+</script>
+```
+
+Arguments and return values serialized with [devalue](https://github.com/sveltejs/devalue).
+
+### Refreshing
+
+```svelte
+<button onclick={() => getPosts().refresh()}>
+	Check for new posts
+</button>
+```
+
+Queries are cached: `getPosts() === getPosts()`.
+
+---
+
+## query.batch
+
+Batches requests in same macrotask (solves n+1 problem):
+
+```js
+import * as v from 'valibot';
+import { query } from '$app/server';
+
+export const getWeather = query.batch(v.string(), async (cities) => {
+	const weather = await db.sql`SELECT * FROM weather WHERE city = ANY(${cities})`;
+	const lookup = new Map(weather.map(w => [w.city, w]));
+	return (city) => lookup.get(city);
+});
+```
+
+---
+
+## form
+
+Write data to server:
+
+```js
+/// file: src/routes/blog/data.remote.js
+import * as v from 'valibot';
+import { error, redirect } from '@sveltejs/kit';
+import { form } from '$app/server';
+import * as auth from '$lib/server/auth';
+
+export const createPost = form(
+	v.object({
+		title: v.pipe(v.string(), v.nonEmpty()),
+		content: v.pipe(v.string(), v.nonEmpty())
+	}),
+	async ({ title, content }) => {
+		const user = await auth.getUser();
+		if (!user) error(401, 'Unauthorized');
+
+		const slug = title.toLowerCase().replace(/ /g, '-');
+		await db.sql`INSERT INTO post (slug, title, content) VALUES (${slug}, ${title}, ${content})`;
+		redirect(303, `/blog/${slug}`);
+	}
+);
+```
+
+```svelte
+<script>
+	import { createPost } from '../data.remote';
+</script>
+
+<form {...createPost}>
+	<button>Publish!</button>
+</form>
+```
+
+Works without JS (native form submission) and progressively enhances.
+
+### Fields
+
+Use `.as(type)` for field attributes:
+
+```svelte
+<form {...createPost}>
+	<label>
+		<h2>Title</h2>
+		<input {...createPost.fields.title.as('text')} />
+	</label>
+
+	<label>
+		<h2>Write your post</h2>
+		<textarea {...createPost.fields.content.as('text')}></textarea>
+	</label>
+
+	<button>Publish!</button>
+</form>
+```
+
+Supports nested objects, arrays, strings, numbers, booleans, `File`:
+
+```js
+const datingProfile = v.object({
+	name: v.string(),
+	photo: v.file(),
+	info: v.object({
+		height: v.number(),
+		likesDogs: v.optional(v.boolean(), false)
+	}),
+	attributes: v.array(v.string())
+});
+
+export const createProfile = form(datingProfile, (data) => { /* ... */ });
+```
+
+```svelte
+<form {...createProfile} enctype="multipart/form-data">
+	<input {...name.as('text')} />
+	<input {...photo.as('file')} />
+	<input {...info.height.as('number')} />
+	<input {...info.likesDogs.as('checkbox')} />
+	<input {...attributes[0].as('text')} />
+	<button>submit</button>
+</form>
+```
+
+For `radio`/`checkbox` groups, pass value as second arg:
+
+```svelte
+{#each ['windows', 'mac', 'linux'] as os}
+	<label>
+		<input {...survey.fields.operatingSystem.as('radio', os)}>
+		{os}
+	</label>
+{/each}
+```
+
+Or use `select`:
+
+```svelte
+<select {...survey.fields.operatingSystem.as('select')}>
+	<option>windows</option>
+	<option>mac</option>
+</select>
+```
+
+### Programmatic validation
+
+Use `invalid` function in handler:
+
+```js
+export const buyHotcakes = form(
+	v.object({ qty: v.pipe(v.number(), v.minValue(1)) }),
+	async (data, invalid) => {
+		try {
+			await db.buy(data.qty);
+		} catch (e) {
+			if (e.code === 'OUT_OF_STOCK') {
+				invalid(invalid.qty(`we don't have enough hotcakes`));
+			}
+		}
+	}
+);
+```
+
+### Validation
+
+Show issues per field:
+
+```svelte
+{#each createPost.fields.title.issues() as issue}
+	<p class="issue">{issue.message}</p>
+{/each}
+<input {...createPost.fields.title.as('text')} />
+```
+
+Validate programmatically:
+
+```svelte
+<form {...createPost} oninput={() => createPost.validate()}>
+```
+
+Client-side preflight validation:
+
+```svelte
+<script>
+	import * as v from 'valibot';
+	const schema = v.object({
+		title: v.pipe(v.string(), v.nonEmpty()),
+		content: v.pipe(v.string(), v.nonEmpty())
+	});
+</script>
+
+<form {...createPost.preflight(schema)}>
+```
+
+All issues: `createPost.fields.allIssues()`.
+
+### Getting/setting values
+
+```svelte
+<div class="preview">
+	<h2>{createPost.fields.title.value()}</h2>
+</div>
+```
+
+Set values:
+
+```svelte
+<script>
+	createPost.fields.set({
+		title: 'My new blog post',
+		content: 'Lorem ipsum...'
+	});
+</script>
+```
+
+### Sensitive data
+
+Prefix with `_` to prevent sending back to client:
+
+```svelte
+<input {...register.fields._password.as('password')} />
+```
+
+### Single-flight mutations
+
+Refresh specific queries instead of all:
+
+```js
+export const createPost = form(
+	v.object({/* ... */}),
+	async (data) => {
+		// ...
+		await getPosts().refresh();
+		// or: await getPost(post.id).set(result);
+		redirect(303, `/blog/${slug}`);
+	}
+);
+```
+
+### Returns
+
+Return data instead of redirecting:
+
+```js
+export const createPost = form(
+	v.object({/* ... */}),
+	async (data) => {
+		// ...
+		return { success: true };
+	}
+);
+```
+
+```svelte
+{#if createPost.result?.success}
+	<p>Successfully published!</p>
+{/if}
+```
+
+### enhance
+
+Customize submission:
+
+```svelte
+<form {...createPost.enhance(async ({ form, data, submit }) => {
+	try {
+		await submit();
+		form.reset();
+		showToast('Successfully published!');
+	} catch (error) {
+		showToast('Oh no! Something went wrong');
+	}
+})}>
+```
+
+Client-driven single-flight mutations:
+
+```ts
+await submit().updates(getPosts());
+```
+
+With optimistic updates:
+
+```ts
+await submit().updates(
+	getPosts().withOverride((posts) => [newPost, ...posts])
+);
+```
+
+### Multiple instances
+
+Isolate forms in lists:
+
+```svelte
+{#each await getTodos() as todo}
+	{@const modify = modifyTodo.for(todo.id)}
+	<form {...modify}>
+		<button disabled={!!modify.pending}>save changes</button>
+	</form>
+{/each}
+```
+
+### buttonProps
+
+Different action per button:
+
+```svelte
+<form {...login}>
+	<button>login</button>
+	<button {...register.buttonProps}>register</button>
+</form>
+```
+
+---
+
+## command
+
+Call from anywhere (not element-specific):
+
+```js
+import * as v from 'valibot';
+import { query, command } from '$app/server';
+
+export const getLikes = query(v.string(), async (id) => {
+	const [row] = await db.sql`SELECT likes FROM item WHERE id = ${id}`;
+	return row.likes;
+});
+
+export const addLike = command(v.string(), async (id) => {
+	await db.sql`UPDATE item SET likes = likes + 1 WHERE id = ${id}`;
+});
+```
+
+```svelte
+<button
+	onclick={async () => {
+		try {
+			await addLike(item.id);
+		} catch (error) {
+			showToast('Something went wrong!');
+		}
+	}}
+>
+	add like
+</button>
+```
+
+Cannot be called during render.
+
+### Updating queries
+
+In command:
+
+```js
+export const addLike = command(v.string(), async (id) => {
+	await db.sql`UPDATE item SET likes = likes + 1 WHERE id = ${id}`;
+	getLikes(id).refresh();
+});
+```
+
+Or when calling:
+
+```ts
+await addLike(item.id).updates(getLikes(item.id));
+```
+
+With optimistic update:
+
+```ts
+await addLike(item.id).updates(
+	getLikes(item.id).withOverride((n) => n + 1)
+);
+```
+
+---
+
+## prerender
+
+Invoked at build time for static data:
+
+```js
+import { prerender } from '$app/server';
+
+export const getPosts = prerender(async () => {
+	const posts = await db.sql`SELECT title, slug FROM post ORDER BY published_at DESC`;
+	return posts;
+});
+```
+
+Cached using Cache API, survives reloads, cleared on new deployment.
+
+### Prerender arguments
+
+```js
+export const getPost = prerender(v.string(), async (slug) => {
+	const [post] = await db.sql`SELECT * FROM post WHERE slug = ${slug}`;
+	if (!post) error(404, 'Not found');
+	return post;
+});
+```
+
+Specify inputs:
+
+```js
+export const getPost = prerender(
+	v.string(),
+	async (slug) => { /* ... */ },
+	{
+		inputs: () => ['first-post', 'second-post', 'third-post']
+	}
+);
+```
+
+Allow dynamic calls:
+
+```js
+export const getPost = prerender(
+	v.string(),
+	async (slug) => { /* ... */ },
+	{
+		dynamic: true,
+		inputs: () => [/* ... */]
+	}
+);
+```
+
+---
+
+## Validation errors
+
+Handle with `handleValidationError` hook:
+
+```js
+/// file: src/hooks.server.ts
+export function handleValidationError({ event, issues }) {
+	return {
+		message: 'Nice try, hacker!'
+	};
+}
+```
+
+Opt out with `'unchecked'`:
+
+```ts
+export const getStuff = query('unchecked', async ({ id }: { id: string }) => {
+	// no validation
+});
+```
+
+---
+
+## getRequestEvent
+
+Access `RequestEvent` inside remote functions:
+
+```ts
+import { getRequestEvent, query } from '$app/server';
+
+const getUser = query(() => {
+	const { cookies } = getRequestEvent();
+	return await findUser(cookies.get('session_id'));
+});
+```
+
+**Note:** `route`, `params`, `url` relate to calling page, not endpoint. Queries don't re-run on navigation unless argument changes.
+
+---
+
+## Redirects
+
+Use `redirect(...)` in `query`, `form`, `prerender`. **Not** in `command`.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/routing.md b/packages/mcp-server/summaries/distilled/kit/routing.md
new file mode 100644
index 00000000..ef7e67b5
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/routing.md
@@ -0,0 +1,237 @@
+# Routing
+
+SvelteKit uses **filesystem-based routing**. Routes are defined by directories in your codebase:
+
+- `src/routes` → root route
+- `src/routes/about` → `/about` route  
+- `src/routes/blog/[slug]` → route with parameter `slug`
+
+## Key Rules
+
+- All files run on server
+- All files run on client except `+server` files
+- `+layout` and `+error` files apply to subdirectories
+
+## +page
+
+### +page.svelte
+
+Defines a page. Rendered on server (SSR) initially, then client (CSR) for navigation.
+
+```svelte
+<!--- file: src/routes/+page.svelte --->
+<h1>Hello and welcome to my site!</h1>
+<a href="/about">About my site</a>
+```
+
+Use `<a>` elements for navigation, not framework-specific components.
+
+Receive data from `load` via `data` prop:
+
+```svelte
+<!--- file: src/routes/blog/[slug]/+page.svelte --->
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data } = $props();
+</script>
+
+<h1>{data.title}</h1>
+<div>{@html data.content}</div>
+```
+
+### +page.js
+
+Export `load` function to fetch data. Runs on server (SSR) and client (navigation).
+
+```js
+/// file: src/routes/blog/[slug]/+page.js
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export function load({ params }) {
+	if (params.slug === 'hello-world') {
+		return {
+			title: 'Hello world!',
+			content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
+		};
+	}
+
+	error(404, 'Not found');
+}
+```
+
+Can export page options: `prerender`, `ssr`, `csr`
+
+### +page.server.js
+
+Server-only `load` function. Use for database access or private env variables. Return value must be serializable.
+
+```js
+/// file: src/routes/blog/[slug]/+page.server.js
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+	const post = await getPostFromDatabase(params.slug);
+
+	if (post) {
+		return post;
+	}
+
+	error(404, 'Not found');
+}
+```
+
+Can also export **actions** for writing data via `<form>` elements.
+
+## +error
+
+Customize error pages per route:
+
+```svelte
+<!--- file: src/routes/blog/[slug]/+error.svelte --->
+<script>
+	import { page } from '$app/state';
+</script>
+
+<h1>{page.status}: {page.error.message}</h1>
+```
+
+SvelteKit walks up tree to find closest error boundary. If all fail, renders `src/error.html`.
+
+**Note:** `+error.svelte` not used for errors in `handle` hook or `+server.js` handlers.
+
+## +layout
+
+### +layout.svelte
+
+Shared UI across pages. Must include `{@render children()}` for page content.
+
+```svelte
+<!--- file: src/routes/+layout.svelte --->
+<script>
+	let { children } = $props();
+</script>
+
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+	<a href="/settings">Settings</a>
+</nav>
+
+{@render children()}
+```
+
+Layouts can be nested. Each inherits parent layout by default.
+
+### +layout.js
+
+Load data for layouts:
+
+```js
+/// file: src/routes/settings/+layout.js
+/** @type {import('./$types').LayoutLoad} */
+export function load() {
+	return {
+		sections: [
+			{ slug: 'profile', title: 'Profile' },
+			{ slug: 'notifications', title: 'Notifications' }
+		]
+	};
+}
+```
+
+Layout data available to all child pages:
+
+```svelte
+<!--- file: src/routes/settings/profile/+page.svelte --->
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data } = $props();
+
+	console.log(data.sections); // [{ slug: 'profile', title: 'Profile' }, ...]
+</script>
+```
+
+Can export page options as defaults for children.
+
+### +layout.server.js
+
+Server-only layout `load`. Change type to `LayoutServerLoad`.
+
+## +server
+
+API routes. Export HTTP verb functions (`GET`, `POST`, etc.) that return `Response` objects.
+
+```js
+/// file: src/routes/api/random-number/+server.js
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').RequestHandler} */
+export function GET({ url }) {
+	const min = Number(url.searchParams.get('min') ?? '0');
+	const max = Number(url.searchParams.get('max') ?? '1');
+
+	const d = max - min;
+
+	if (isNaN(d) || d < 0) {
+		error(400, 'min and max must be numbers, and min must be less than max');
+	}
+
+	const random = min + Math.random() * d;
+
+	return new Response(String(random));
+}
+```
+
+### Receiving data
+
+```js
+/// file: src/routes/api/add/+server.js
+import { json } from '@sveltejs/kit';
+
+/** @type {import('./$types').RequestHandler} */
+export async function POST({ request }) {
+	const { a, b } = await request.json();
+	return json(a + b);
+}
+```
+
+**Note:** Form actions are generally better for browser-to-server data submission.
+
+### Fallback handler
+
+Handles unhandled HTTP methods:
+
+```js
+/// file: src/routes/api/add/+server.js
+/** @type {import('./$types').RequestHandler} */
+export async function fallback({ request }) {
+	return text(`I caught your ${request.method} request!`);
+}
+```
+
+### Content negotiation
+
+`+server.js` can coexist with `+page` files:
+- `PUT`/`PATCH`/`DELETE`/`OPTIONS` → always `+server.js`
+- `GET`/`POST`/`HEAD` → page if `accept` header prioritizes `text/html`, else `+server.js`
+
+## $types
+
+SvelteKit generates `$types.d.ts` for type safety:
+
+```svelte
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data } = $props();
+</script>
+```
+
+Types: `PageProps`, `LayoutProps`, `PageLoad`, `PageServerLoad`, `LayoutLoad`, `LayoutServerLoad`, `RequestHandler`
+
+With proper IDE tooling, types can be omitted entirely—they're auto-inserted.
+
+## Other files
+
+Non-route files in route directories are ignored. Colocate components with routes or use `$lib` for shared modules.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/seo.md b/packages/mcp-server/summaries/distilled/kit/seo.md
new file mode 100644
index 00000000..3c69a1cd
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/seo.md
@@ -0,0 +1,107 @@
+# SEO
+
+## Out of the box
+
+### SSR
+Search engines index server-side rendered content more reliably. SvelteKit uses SSR by default—keep it enabled unless necessary to disable in [`handle`](hooks#Server-hooks-handle).
+
+### Performance
+[Core Web Vitals](https://web.dev/vitals/#core-web-vitals) impact search ranking. Use [hybrid rendering](glossary#Hybrid-app), [optimize images](images), and test with [PageSpeed Insights](https://pagespeed.web.dev/) or [Lighthouse](https://developers.google.com/web/tools/lighthouse). See [performance page](performance) for details.
+
+### Normalized URLs
+SvelteKit redirects trailing slashes based on [`trailingSlash`](page-options#trailingSlash) config to avoid duplicate URLs.
+
+## Manual setup
+
+### &lt;title&gt; and &lt;meta&gt;
+Every page needs unique `<title>` and `<meta name="description">` in [`<svelte:head>`](../svelte/svelte-head). See [Lighthouse SEO audits](https://web.dev/lighthouse-seo/).
+
+**Pattern:** Return SEO data from page [`load`](load) functions, use as [`page.data`]($app-state) in `<svelte:head>` in root [layout](routing#layout).
+
+### Sitemaps
+Create dynamic sitemaps with endpoints:
+
+```js
+/// file: src/routes/sitemap.xml/+server.js
+export async function GET() {
+	return new Response(
+		`
+		<?xml version="1.0" encoding="UTF-8" ?>
+		<urlset
+			xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
+			xmlns:xhtml="https://www.w3.org/1999/xhtml"
+			xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
+			xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
+			xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
+			xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
+		>
+			<!-- <url> elements go here -->
+		</urlset>`.trim(),
+		{
+			headers: {
+				'Content-Type': 'application/xml'
+			}
+		}
+	);
+}
+```
+
+### AMP
+For [AMP](https://amp.dev/) sites:
+
+1. Set [`inlineStyleThreshold`](configuration#inlineStyleThreshold) to `Infinity`
+2. Disable `csr` in root layout
+3. Add `amp` to `app.html`
+4. Transform HTML with `@sveltejs/amp` in `transformPageChunk`
+
+```js
+/// file: src/hooks.server.js
+import * as amp from '@sveltejs/amp';
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	let buffer = '';
+	return await resolve(event, {
+		transformPageChunk: ({ html, done }) => {
+			buffer += html;
+			if (done) return amp.transform(buffer);
+		}
+	});
+}
+```
+
+**Optional:** Remove unused CSS with [`dropcss`](https://www.npmjs.com/package/dropcss):
+
+```js
+/// file: src/hooks.server.js
+// @errors: 2307
+import * as amp from '@sveltejs/amp';
+import dropcss from 'dropcss';
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	let buffer = '';
+
+	return await resolve(event, {
+		transformPageChunk: ({ html, done }) => {
+			buffer += html;
+
+			if (done) {
+				let css = '';
+				const markup = amp
+					.transform(buffer)
+					.replace('⚡', 'amp') // dropcss can't handle this character
+					.replace(/<style amp-custom([^>]*?)>([^]+?)<\/style>/, (match, attributes, contents) => {
+						css = contents;
+						return `<style amp-custom${attributes}></style>`;
+					});
+
+				css = dropcss({ css, html: markup }).css;
+				return markup.replace('</style>', `${css}</style>`);
+			}
+		}
+	});
+}
+```
+
+> Validate transformed HTML with `amphtml-validator` in `handle` hook, but only when prerendering (it's slow).
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/server-only-modules.md b/packages/mcp-server/summaries/distilled/kit/server-only-modules.md
new file mode 100644
index 00000000..60671736
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/server-only-modules.md
@@ -0,0 +1,54 @@
+# Server-only modules
+
+SvelteKit prevents accidental import of sensitive server code into client-side bundles.
+
+## Private environment variables
+
+`$env/static/private` and `$env/dynamic/private` can only be imported in server modules like `hooks.server.js` or `+page.server.js`.
+
+## Server-only utilities
+
+`$app/server` module (contains `read()` for filesystem access) only works on server.
+
+## Making your modules server-only
+
+Two ways:
+1. Add `.server` to filename: `secrets.server.js`
+2. Place in `$lib/server`: `$lib/server/secrets.js`
+
+## How it works
+
+SvelteKit errors if client code imports server-only modules (directly or indirectly):
+
+```js
+/// file: $lib/server/secrets.js
+export const atlantisCoordinates = [/* redacted */];
+```
+
+```js
+/// file: src/routes/utils.js
+export { atlantisCoordinates } from '$lib/server/secrets.js';
+export const add = (a, b) => a + b;
+```
+
+```html
+/// file: src/routes/+page.svelte
+<script>
+	import { add } from './utils.js';
+</script>
+```
+
+**Error:**
+```
+Cannot import $lib/server/secrets.ts into code that runs in the browser
+
+ src/routes/+page.svelte imports
+  src/routes/utils.js imports
+   $lib/server/secrets.ts
+```
+
+Even though `+page.svelte` only uses `add`, the entire import chain is blocked to prevent leaking `atlantisCoordinates`.
+
+**Works with dynamic imports**, including interpolated ones like `` await import(`./${foo}.js`) ``.
+
+> **Note:** Detection disabled when `process.env.TEST === 'true'` (for Vitest, etc.)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/service-workers.md b/packages/mcp-server/summaries/distilled/kit/service-workers.md
new file mode 100644
index 00000000..e21b0361
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/service-workers.md
@@ -0,0 +1,150 @@
+# Service Workers
+
+Service workers act as proxy servers for network requests, enabling offline support and faster navigation by precaching assets.
+
+## Setup
+
+Create `src/service-worker.js` (or `src/service-worker/index.js`) - it will be bundled and auto-registered.
+
+Default registration (can be [disabled](configuration#serviceWorker)):
+```js
+if ('serviceWorker' in navigator) {
+	addEventListener('load', function () {
+		navigator.serviceWorker.register('./path/to/service-worker.js');
+	});
+}
+```
+
+## `$service-worker` Module
+
+Provides:
+- `build` - paths to built app files
+- `files` - paths to static assets
+- `version` - app version string for cache naming
+- `base` - deployment base path
+
+## Example: Offline-Capable Service Worker
+
+Caches built app and static files eagerly, caches other requests on-demand:
+
+```js
+/// file: src/service-worker.js
+// Disables access to DOM typings like `HTMLElement` which are not available
+// inside a service worker and instantiates the correct globals
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
+
+// Ensures that the `$service-worker` import has proper type definitions
+/// <reference types="@sveltejs/kit" />
+
+// Only necessary if you have an import from `$env/static/public`
+/// <reference types="../.svelte-kit/ambient.d.ts" />
+
+import { build, files, version } from '$service-worker';
+
+// This gives `self` the correct types
+const self = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (globalThis.self));
+
+// Create a unique cache name for this deployment
+const CACHE = `cache-${version}`;
+
+const ASSETS = [
+	...build, // the app itself
+	...files  // everything in `static`
+];
+
+self.addEventListener('install', (event) => {
+	// Create a new cache and add all files to it
+	async function addFilesToCache() {
+		const cache = await caches.open(CACHE);
+		await cache.addAll(ASSETS);
+	}
+
+	event.waitUntil(addFilesToCache());
+});
+
+self.addEventListener('activate', (event) => {
+	// Remove previous cached data from disk
+	async function deleteOldCaches() {
+		for (const key of await caches.keys()) {
+			if (key !== CACHE) await caches.delete(key);
+		}
+	}
+
+	event.waitUntil(deleteOldCaches());
+});
+
+self.addEventListener('fetch', (event) => {
+	// ignore POST requests etc
+	if (event.request.method !== 'GET') return;
+
+	async function respond() {
+		const url = new URL(event.request.url);
+		const cache = await caches.open(CACHE);
+
+		// `build`/`files` can always be served from the cache
+		if (ASSETS.includes(url.pathname)) {
+			const response = await cache.match(url.pathname);
+
+			if (response) {
+				return response;
+			}
+		}
+
+		// for everything else, try the network first, but
+		// fall back to the cache if we're offline
+		try {
+			const response = await fetch(event.request);
+
+			// if we're offline, fetch can return a value that is not a Response
+			// instead of throwing - and we can't pass this non-Response to respondWith
+			if (!(response instanceof Response)) {
+				throw new Error('invalid response from fetch');
+			}
+
+			if (response.status === 200) {
+				cache.put(event.request, response.clone());
+			}
+
+			return response;
+		} catch (err) {
+			const response = await cache.match(event.request);
+
+			if (response) {
+				return response;
+			}
+
+			// if there's no cache, then just error out
+			// as there is nothing we can do to respond to this request
+			throw err;
+		}
+	}
+
+	event.respondWith(respond());
+});
+```
+
+**Gotchas:**
+- Be careful caching - stale data may be worse than no data
+- Browsers empty caches when full - avoid caching large assets like videos
+
+## Development
+
+Service worker is bundled for production only. In dev, requires browsers supporting [modules in service workers](https://web.dev/es-modules-in-sw).
+
+Manual registration in dev needs module type:
+```js
+import { dev } from '$app/environment';
+
+navigator.serviceWorker.register('/service-worker.js', {
+	type: dev ? 'module' : 'classic'
+});
+```
+
+**Note:** `build` and `prerendered` are empty arrays during development.
+
+## Alternatives
+
+- [Workbox](https://web.dev/learn/pwa/workbox) - popular PWA library
+- [Vite PWA plugin](https://vite-pwa-org.netlify.app/frameworks/sveltekit.html) - Workbox integration for SvelteKit
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/shallow-routing.md b/packages/mcp-server/summaries/distilled/kit/shallow-routing.md
new file mode 100644
index 00000000..88f7d0ec
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/shallow-routing.md
@@ -0,0 +1,99 @@
+# Shallow Routing
+
+Navigate without triggering `load` functions or replacing page components. Useful for modals that users can dismiss by navigating back.
+
+## Basic Usage
+
+Use `pushState` and `replaceState` to associate state with history entries:
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+	import { pushState } from '$app/navigation';
+	import { page } from '$app/state';
+	import Modal from './Modal.svelte';
+
+	function showModal() {
+		pushState('', {
+			showModal: true
+		});
+	}
+</script>
+
+{#if page.state.showModal}
+	<Modal close={() => history.back()} />
+{/if}
+```
+
+Modal dismisses via back button or `history.back()` call.
+
+## API
+
+- **`pushState(url, state)`**: Creates new history entry
+  - First arg: URL relative to current (use `''` to stay on current URL)
+  - Second arg: page state accessible via `page.state`
+- **`replaceState(url, state)`**: Sets state without creating history entry
+- Type-safe state: declare `App.PageState` interface in `src/app.d.ts`
+
+## Loading Data for Routes
+
+Render another `+page.svelte` inside current page using `preloadData`:
+
+```svelte
+<!--- file: src/routes/photos/+page.svelte --->
+<script>
+	import { preloadData, pushState, goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import Modal from './Modal.svelte';
+	import PhotoPage from './[id]/+page.svelte';
+
+	let { data } = $props();
+</script>
+
+{#each data.thumbnails as thumbnail}
+	<a
+		href="/photos/{thumbnail.id}"
+		onclick={async (e) => {
+			if (innerWidth < 640        // bail if the screen is too small
+				|| e.shiftKey             // or the link is opened in a new window
+				|| e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey)
+				// should also consider clicking with a mouse scroll wheel
+			) return;
+
+			// prevent navigation
+			e.preventDefault();
+
+			const { href } = e.currentTarget;
+
+			// run `load` functions (or rather, get the result of the `load` functions
+			// that are already running because of `data-sveltekit-preload-data`)
+			const result = await preloadData(href);
+
+			if (result.type === 'loaded' && result.status === 200) {
+				pushState(href, { selected: result.data });
+			} else {
+				// something bad happened! try navigating
+				goto(href);
+			}
+		}}
+	>
+		<img alt={thumbnail.alt} src={thumbnail.src} />
+	</a>
+{/each}
+
+{#if page.state.selected}
+	<Modal onclose={() => history.back()}>
+		<!-- pass page data to the +page.svelte component,
+		     just like SvelteKit would on navigation -->
+		<PhotoPage data={page.state.selected} />
+	</Modal>
+{/if}
+```
+
+`preloadData` reuses requests from `data-sveltekit-preload-data`.
+
+## Caveats
+
+- `page.state` is empty object during SSR and on first page load
+- State not applied on page reload/return from another document
+- Requires JavaScript - provide fallback behavior
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/single-page-apps.md b/packages/mcp-server/summaries/distilled/kit/single-page-apps.md
new file mode 100644
index 00000000..858374f3
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/single-page-apps.md
@@ -0,0 +1,70 @@
+# SPA Mode
+
+Turn a SvelteKit app into a client-rendered SPA using a **fallback page** that serves URLs not handled by prerendered pages.
+
+> **Warning:** SPA mode has major performance drawbacks:
+> - Multiple network round trips before content shows
+> - Poor SEO and Core Web Vitals
+> - Inaccessible if JavaScript fails
+> 
+> Mitigate by prerendering as many pages as possible, especially your homepage.
+
+## Usage
+
+**1. Disable SSR:**
+
+```js
+/// file: src/routes/+layout.js
+export const ssr = false;
+```
+
+**2. Configure adapter-static:**
+
+Install: `npm i -D @sveltejs/adapter-static`
+
+```js
+/// file: svelte.config.js
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			fallback: '200.html' // may differ from host to host
+		})
+	}
+};
+
+export default config;
+```
+
+The `fallback` page is an HTML file that loads your app and navigates to the correct route. The filename depends on your host (e.g., `200.html` for Surge). Avoid `index.html` as it may conflict with prerendering.
+
+> **Note:** Fallback page always uses absolute asset paths (starting with `/`) regardless of `paths.relative` config.
+
+## Prerendering Individual Pages
+
+Re-enable SSR and prerendering for specific pages:
+
+```js
+/// file: src/routes/my-prerendered-page/+page.js
+export const prerender = true;
+export const ssr = true;
+```
+
+These pages render at build time as static `.html` files—no Node server needed.
+
+## Apache
+
+Add `static/.htaccess` to route requests to fallback:
+
+```
+<IfModule mod_rewrite.c>
+	RewriteEngine On
+	RewriteBase /
+	RewriteRule ^200\.html$ - [L]
+	RewriteCond %{REQUEST_FILENAME} !-f
+	RewriteCond %{REQUEST_FILENAME} !-d
+	RewriteRule . /200.html [L]
+</IfModule>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/snapshots.md b/packages/mcp-server/summaries/distilled/kit/snapshots.md
new file mode 100644
index 00000000..d758a52e
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/snapshots.md
@@ -0,0 +1,34 @@
+# Snapshots
+
+Preserve ephemeral DOM state (scroll positions, input values, etc.) across navigation.
+
+## Usage
+
+Export a `snapshot` object with `capture` and `restore` methods from `+page.svelte` or `+layout.svelte`:
+
+```svelte
+<!--- file: +page.svelte --->
+<script>
+	let comment = $state('');
+
+	/** @type {import('./$types').Snapshot<string>} */
+	export const snapshot = {
+		capture: () => comment,
+		restore: (value) => comment = value
+	};
+</script>
+
+<form method="POST">
+	<label for="comment">Comment</label>
+	<textarea id="comment" bind:value={comment} />
+	<button>Post comment</button>
+</form>
+```
+
+- `capture` - called before page updates, returns value stored in browser history
+- `restore` - called when navigating back, receives stored value
+
+## Constraints
+
+- Data must be JSON serializable (persisted to `sessionStorage`)
+- Avoid large objects - retained in memory for session duration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/state-management.md b/packages/mcp-server/summaries/distilled/kit/state-management.md
new file mode 100644
index 00000000..3272e0ea
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/state-management.md
@@ -0,0 +1,162 @@
+# State Management
+
+## Avoid shared state on the server
+
+Servers are shared by multiple users. **Never store data in shared variables** - it will leak between users.
+
+```js
+// @errors: 7034 7005
+/// file: +page.server.js
+let user;
+
+/** @type {import('./$types').PageServerLoad} */
+export function load() {
+	return { user };
+}
+
+/** @satisfies {import('./$types').Actions} */
+export const actions = {
+	default: async ({ request }) => {
+		const data = await request.formData();
+
+		// NEVER DO THIS!
+		user = {
+			name: data.get('name'),
+			embarrassingSecret: data.get('secret')
+		};
+	}
+}
+```
+
+**Solution:** Use [`cookies`](load#Cookies) for authentication and persist to a database.
+
+## No side-effects in load
+
+`load` functions must be **pure** - no side-effects. Don't write to stores or global state:
+
+```js
+/// file: +page.js
+// @filename: ambient.d.ts
+declare module '$lib/user' {
+	export const user: { set: (value: any) => void };
+}
+
+// @filename: index.js
+// ---cut---
+import { user } from '$lib/user';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch }) {
+	const response = await fetch('/api/user');
+
+	// NEVER DO THIS!
+	user.set(await response.json());
+}
+```
+
+**Solution:** Return data directly:
+
+```js
+/// file: +page.js
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ fetch }) {
+	const response = await fetch('/api/user');
+
+	return {
+		user: await response.json()
+	};
+}
+```
+
+Pass to components or use [`page.data`](load#page.data).
+
+## Using state with context
+
+Use Svelte's context API to share state safely:
+
+```svelte
+<!--- file: src/routes/+layout.svelte --->
+<script>
+	import { setContext } from 'svelte';
+
+	/** @type {import('./$types').LayoutProps} */
+	let { data } = $props();
+
+	// Pass a function referencing our state
+	// to the context for child components to access
+	setContext('user', () => data.user);
+</script>
+```
+
+```svelte
+<!--- file: src/routes/user/+page.svelte --->
+<script>
+	import { getContext } from 'svelte';
+
+	// Retrieve user store from context
+	const user = getContext('user');
+</script>
+
+<p>Welcome {user().name}</p>
+```
+
+> **Note:** Pass a function to `setContext` to maintain reactivity. See [$state docs](/docs/svelte/$state#Passing-state-into-functions).
+
+**Gotcha:** Updating context state in child components during SSR won't affect parent components (already rendered). Prefer passing state down.
+
+Without SSR, you can use shared modules safely.
+
+## Component state is preserved
+
+Components are **reused** during navigation. State doesn't reset automatically:
+
+```svelte
+<!--- file: src/routes/blog/[slug]/+page.svelte --->
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data } = $props();
+
+	// THIS CODE IS BUGGY!
+	const wordCount = data.content.split(' ').length;
+	const estimatedReadingTime = wordCount / 250;
+</script>
+
+<header>
+	<h1>{data.title}</h1>
+	<p>Reading time: {Math.round(estimatedReadingTime)} minutes</p>
+</header>
+
+<div>{@html data.content}</div>
+```
+
+**Solution:** Use `$derived`:
+
+```svelte
+/// file: src/routes/blog/[slug]/+page.svelte
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data } = $props();
+
+	let wordCount = $derived(data.content.split(' ').length);
+	let estimatedReadingTime = $derived(wordCount / 250);
+</script>
+```
+
+> **Note:** Use [afterNavigate]($app-navigation#afterNavigate) and [beforeNavigate]($app-navigation#beforeNavigate) if you need to re-run `onMount`/`onDestroy` logic.
+
+**Force remount** with `{#key}`:
+
+```svelte
+<script>
+	import { page } from '$app/state';
+</script>
+
+{#key page.url.pathname}
+	<BlogPost title={data.title} content={data.title} />
+{/key}
+```
+
+## State storage patterns
+
+- **URL search params** (`?sort=price`): For state that should survive reload/affect SSR. Access via `url` in `load` or `page.url.searchParams` in components.
+- **Snapshots**: For ephemeral UI state (e.g., "is accordion open?") that should persist across navigation but not reload. See [snapshots](snapshots).
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/types.md b/packages/mcp-server/summaries/distilled/kit/types.md
new file mode 100644
index 00000000..b058e645
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/types.md
@@ -0,0 +1,99 @@
+# Generated Types
+
+## Auto-generated `$types`
+
+SvelteKit generates `.d.ts` files for each endpoint/page to avoid manually typing `params`:
+
+**Before (manual typing):**
+```js
+/// file: src/routes/[foo]/[bar]/[baz]/+server.js
+/** @type {import('@sveltejs/kit').RequestHandler<{
+    foo: string;
+    bar: string;
+    baz: string
+  }>} */
+export async function GET({ params }) {
+	// ...
+}
+```
+
+**After (using generated types):**
+```js
+/// file: src/routes/[foo]/[bar]/[baz]/+server.js
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ params }) {
+	// ...
+}
+```
+
+```js
+/// file: src/routes/[foo]/[bar]/[baz]/+page.js
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, fetch }) {
+	// ...
+}
+```
+
+## Helper Types
+
+- `PageData` / `LayoutData`: Return types of load functions
+- `ActionData`: Union of all `Actions` return values
+- `PageProps`: Defines `data: PageData` and `form: ActionData` (v2.16.0+)
+- `LayoutProps`: Defines `data: LayoutData` and `children: Snippet` (v2.16.0+)
+
+```svelte
+<!--- file: src/routes/+page.svelte --->
+<script>
+	/** @type {import('./$types').PageProps} */
+	let { data, form } = $props();
+</script>
+```
+
+## Setup
+
+Your `tsconfig.json` must extend the generated config:
+
+```json
+{ "extends": "./.svelte-kit/tsconfig.json" }
+```
+
+## $lib Aliases
+
+- `$lib`: Alias to `src/lib` (or `config.kit.files.lib`)
+- `$lib/server`: Server-only modules, prevented from importing client-side
+
+## app.d.ts
+
+Define ambient types in the `App` namespace:
+
+### `App.Error`
+Shape of expected/unexpected errors:
+```ts
+interface Error {
+  message: string;
+}
+```
+
+### `App.Locals`
+Type for `event.locals` (available in hooks, server load functions, `+server.js`):
+```ts
+interface Locals {}
+```
+
+### `App.PageData`
+Common shape of `page.data` across all pages. Use optional properties for page-specific data:
+```ts
+interface PageData {}
+```
+
+### `App.PageState`
+Shape of `page.state` for `pushState`/`replaceState`:
+```ts
+interface PageState {}
+```
+
+### `App.Platform`
+Platform-specific context from adapters:
+```ts
+interface Platform {}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/web-standards.md b/packages/mcp-server/summaries/distilled/kit/web-standards.md
new file mode 100644
index 00000000..c0495a73
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/web-standards.md
@@ -0,0 +1,97 @@
+# Web APIs
+
+SvelteKit builds on standard Web APIs. These work in modern browsers and non-browser environments (Cloudflare Workers, Deno, Vercel Functions, Node via polyfills).
+
+## Fetch APIs
+
+[`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) is available in hooks, server routes, and browser.
+
+> [!NOTE] 
+> Special `fetch` in `load` functions, server hooks, and API routes:
+> - Invokes endpoints directly during SSR (no HTTP call)
+> - Preserves credentials automatically
+> - Allows relative requests (normally requires fully qualified URL)
+> - For credentialled fetches outside `load`, explicitly pass `cookie`/`authorization` headers
+
+### Request
+
+[`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) available as `event.request` in hooks and server routes. Use `request.json()` and `request.formData()` to get posted data.
+
+### Response
+
+[`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) returned from `await fetch(...)` and `+server.js` handlers. SvelteKit turns a `Request` into a `Response`.
+
+### Headers
+
+[`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) interface for reading `request.headers` and setting `response.headers`:
+
+```js
+// @errors: 2461
+/// file: src/routes/what-is-my-user-agent/+server.js
+import { json } from '@sveltejs/kit';
+
+/** @type {import('./$types').RequestHandler} */
+export function GET({ request }) {
+	// log all headers
+	console.log(...request.headers);
+
+	// create a JSON Response using a header we received
+	return json({
+		// retrieve a specific header
+		userAgent: request.headers.get('user-agent')
+	}, {
+		// set a header on the response
+		headers: { 'x-custom-header': 'potato' }
+	});
+}
+```
+
+## FormData
+
+[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) for HTML form submissions:
+
+```js
+// @errors: 2461
+/// file: src/routes/hello/+server.js
+import { json } from '@sveltejs/kit';
+
+/** @type {import('./$types').RequestHandler} */
+export async function POST(event) {
+	const body = await event.request.formData();
+
+	// log all fields
+	console.log([...body]);
+
+	return json({
+		// get a specific field's value
+		name: body.get('name') ?? 'world'
+	});
+}
+```
+
+## Stream APIs
+
+For large/chunked responses: [ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream), [WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream), [TransformStream](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream).
+
+## URL APIs
+
+[`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) interface with `origin`, `pathname`, `hash` properties. Available as:
+- `event.url` in hooks/server routes
+- `page.url` in pages
+- `from`/`to` in `beforeNavigate`/`afterNavigate`
+
+### URLSearchParams
+
+Access query parameters via `url.searchParams` ([`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)):
+
+```js
+const foo = url.searchParams.get('foo');
+```
+
+## Web Crypto
+
+[Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) via `crypto` global:
+
+```js
+const uuid = crypto.randomUUID();
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/kit/writing-adapters.md b/packages/mcp-server/summaries/distilled/kit/writing-adapters.md
new file mode 100644
index 00000000..5d758aac
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/kit/writing-adapters.md
@@ -0,0 +1,66 @@
+# Building Adapters
+
+## Adapter API
+
+Adapters implement this structure:
+
+```js
+// @errors: 2322
+// @filename: ambient.d.ts
+type AdapterSpecificOptions = any;
+
+// @filename: index.js
+// ---cut---
+/** @param {AdapterSpecificOptions} options */
+export default function (options) {
+	/** @type {import('@sveltejs/kit').Adapter} */
+	const adapter = {
+		name: 'adapter-package-name',
+		async adapt(builder) {
+			// adapter implementation
+		},
+		async emulate() {
+			return {
+				async platform({ config, prerender }) {
+					// the returned object becomes `event.platform` during dev, build and
+					// preview. Its shape is that of `App.Platform`
+				}
+			}
+		},
+		supports: {
+			read: ({ config, route }) => {
+				// Return `true` if the route with the given `config` can use `read`
+				// from `$app/server` in production, return `false` if it can't.
+				// Or throw a descriptive error describing how to configure the deployment
+			},
+			tracing: () => {
+				// Return `true` if this adapter supports loading `tracing.server.js`.
+				// Return `false if it can't, or throw a descriptive error.
+			}
+		}
+	};
+
+	return adapter;
+}
+```
+
+**Required:** `name`, `adapt`  
+**Optional:** `emulate`, `supports`
+
+## `adapt` Method Tasks
+
+1. Clear build directory
+2. Write output: `builder.writeClient`, `builder.writeServer`, `builder.writePrerendered`
+3. Output code that:
+   - Imports `Server` from `${builder.getServerDirectory()}/index.js`
+   - Instantiates app with `builder.generateManifest({ relativePath })`
+   - Converts platform requests to standard `Request`
+   - Calls `server.respond(request, { getClientAddress })` to generate `Response`
+   - Exposes platform info via `platform` option in `server.respond`
+   - Shims `fetch` if needed (use `@sveltejs/kit/node/polyfills` for undici-compatible platforms)
+4. Bundle output to avoid dependencies on target platform
+5. Place static files and JS/CSS in correct locations
+
+**Recommended structure:** Output under `build/`, intermediate files under `.svelte-kit/[adapter-name]`
+
+**Tip:** Copy an existing [adapter source](https://github.com/sveltejs/kit/tree/main/packages) as starting point.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/mcp/local-setup.md b/packages/mcp-server/summaries/distilled/mcp/local-setup.md
new file mode 100644
index 00000000..e0d4568e
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/mcp/local-setup.md
@@ -0,0 +1,82 @@
+# MCP Server Setup
+
+The Svelte MCP server is available via [`@sveltejs/mcp`](https://www.npmjs.com/package/@sveltejs/mcp). Run with:
+
+```bash
+npx -y @sveltejs/mcp
+```
+
+## Client Configuration
+
+### Claude Code
+```bash
+claude mcp add -t stdio -s [scope] svelte -- npx -y @sveltejs/mcp
+```
+`[scope]`: `user`, `project`, or `local`
+
+### Claude Desktop
+Settings > Developer > Edit Config, add to `claude_desktop_config.json`:
+
+```json
+{
+	"mcpServers": {
+		"svelte": {
+			"command": "npx",
+			"args": ["-y", "@sveltejs/mcp"]
+		}
+	}
+}
+```
+
+### Codex CLI
+Add to `config.toml` (default: `~/.codex/config.toml`):
+
+```toml
+[mcp_servers.svelte]
+command = "npx"
+args = ["-y", "@sveltejs/mcp"]
+```
+
+### Gemini CLI
+```bash
+gemini mcp add -t stdio -s [scope] svelte npx -y @sveltejs/mcp
+```
+`[scope]`: `user`, `project`, or `local`
+
+### OpenCode
+```bash
+opencode mcp add
+```
+Select 'Local' and enter `npx -y @sveltejs/mcp`
+
+### VS Code
+Command palette > "MCP: Add Server..." > "Command (stdio)" > `npx -y @sveltejs/mcp` > name: `svelte`
+
+### Cursor
+Command palette > "View: Open MCP Settings" > "Add custom MCP", add:
+
+```json
+{
+	"mcpServers": {
+		"svelte": {
+			"command": "npx",
+			"args": ["-y", "@sveltejs/mcp"]
+		}
+	}
+}
+```
+
+### Zed
+Command palette > "agent:open settings" > `Model Context Protocol (MCP) Servers` > "Add Server" > "Add Custom Server":
+
+```json
+{
+	"svelte": {
+		"command": "npx",
+		"args": ["-y", "@sveltejs/mcp"]
+	}
+}
+```
+
+### Other Clients
+Use `stdio` server with command `npx` and args `-y @sveltejs/mcp`
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/mcp/overview.md b/packages/mcp-server/summaries/distilled/mcp/overview.md
new file mode 100644
index 00000000..f56907d2
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/mcp/overview.md
@@ -0,0 +1,43 @@
+# Svelte MCP Server
+
+The Svelte MCP ([Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro)) server provides documentation and static analysis to help LLMs write better Svelte code.
+
+## Setup
+
+Choose setup based on your MCP client (Claude Code, Codex CLI, GitHub Copilot):
+- **Local**: `@sveltejs/mcp`
+- **Remote**: `https://mcp.svelte.dev/mcp`
+
+See [local setup](local-setup) or [remote setup](remote-setup) docs.
+
+## Usage
+
+Add to `AGENTS.md` (or `CLAUDE.md` for Claude Code):
+
+```md
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.
+```
+
+If supported, use the [svelte-task](prompts#svelte-task) prompt for optimal MCP usage.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/mcp/prompts.md b/packages/mcp-server/summaries/distilled/mcp/prompts.md
new file mode 100644
index 00000000..fe67c945
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/mcp/prompts.md
@@ -0,0 +1,39 @@
+# MCP Server Prompts
+
+## svelte-task
+
+Use this prompt for any Svelte-related task. It instructs the LLM on available documentation, tools, and workflows.
+
+### Key Instructions
+
+**Documentation Access:**
+- Use `get_documentation` tool with paths from the available docs list (CLI, Kit, Svelte core, etc.)
+- Paths cover: project setup, routing, data loading, forms, deployment, testing, styling, authentication, etc.
+
+**Code Validation Workflow:**
+1. Write Svelte component/module
+2. **MUST** invoke `svelte-autofixer` tool with the code
+3. Fix any issues/suggestions returned
+4. Repeat steps 2-3 until no issues remain
+5. Only then return code to user
+
+**Playground Links:**
+- After final code version, ask user if they want a playground link
+- If yes, call `playground-link` tool
+- Must include `App.svelte` as entry point
+- Can include multiple files at root
+
+### Available Documentation Categories
+
+- **CLI**: `sv create`, `sv add`, `sv check`, `sv migrate`, integrations (Drizzle, ESLint, Lucia, Playwright, Tailwind, Vitest, etc.)
+- **SvelteKit**: routing, loading data, form actions, adapters, hooks, errors, state management, remote functions, deployment
+- **Svelte**: runes (`$state`, `$derived`, `$effect`, `$props`, `$bindable`), markup, transitions, stores, context, TypeScript, custom elements
+- **Legacy**: migration guides, deprecated APIs, Svelte 3/4 patterns
+
+### Syntax Rules (Svelte 5)
+
+- No colon in event modifiers: `onclick` not `on:click`
+- Runes are globals (no import needed)
+- `$state()` uses `let`, never `const`
+- `$derived` with function: `$derived.by(() => ...)`
+- Error boundaries: catch render errors and top-level `$effect` errors only (not event handlers)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/mcp/remote-setup.md b/packages/mcp-server/summaries/distilled/mcp/remote-setup.md
new file mode 100644
index 00000000..50902f4e
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/mcp/remote-setup.md
@@ -0,0 +1,67 @@
+# MCP Server Setup
+
+Remote MCP server URL: `https://mcp.svelte.dev/mcp`
+
+## Claude Code
+
+```bash
+claude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp
+```
+
+`scope` must be `user`, `project`, or `local`
+
+## Claude Desktop
+
+Settings > Connectors > Add Custom Connector
+- Name: `svelte`
+- URL: `https://mcp.svelte.dev/mcp`
+
+## Codex CLI
+
+Add to `config.toml` (default: `~/.codex/config.toml`):
+
+```toml
+experimental_use_rmcp_client = true
+[mcp_servers.svelte]
+url = "https://mcp.svelte.dev/mcp"
+```
+
+## Gemini CLI
+
+```bash
+gemini mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp
+```
+
+`[scope]` must be `user`, `project`, or `local`
+
+## OpenCode
+
+```bash
+opencode mcp add
+```
+
+Select 'Remote' type, enter name `svelte` and URL `https://mcp.svelte.dev/mcp`
+
+## VS Code
+
+Command palette > "MCP: Add Server..." > "HTTP (HTTP or Server-Sent-Events)"
+- URL: `https://mcp.svelte.dev/mcp`
+- Choose Global or Workspace
+
+## Cursor
+
+Command palette > "View: Open MCP Settings" > "Add custom MCP"
+
+```json
+{
+	"mcpServers": {
+		"svelte": {
+			"url": "https://mcp.svelte.dev/mcp"
+		}
+	}
+}
+```
+
+## Other Clients
+
+Use `https://mcp.svelte.dev/mcp` as remote server URL per client documentation.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/mcp/resources.md b/packages/mcp-server/summaries/distilled/mcp/resources.md
new file mode 100644
index 00000000..63683c61
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/mcp/resources.md
@@ -0,0 +1,11 @@
+# MCP Server Resources
+
+## doc-section
+
+Dynamic resource for accessing Svelte documentation sections.
+
+**URI format:** `svelte://slug-of-the-docs.md`
+
+**Returns:** `llms.txt` version of the specified documentation page
+
+**Use case:** Include specific documentation (e.g., transitions) directly in your session without LLM retrieval.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/mcp/tools.md b/packages/mcp-server/summaries/distilled/mcp/tools.md
new file mode 100644
index 00000000..72d9d50e
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/mcp/tools.md
@@ -0,0 +1,13 @@
+# MCP Server Tools
+
+The MCP server provides these tools for LLM interaction with Svelte documentation:
+
+## Available Tools
+
+**`list-sections`** - Lists all available documentation sections
+
+**`get-documentation`** - Fetches current documentation from svelte.dev/docs for requested sections
+
+**`svelte-autofixer`** - Static analysis tool that suggests fixes for generated code. Can run iteratively until all issues resolved
+
+**`playground-link`** - Creates ephemeral playground URL with generated code (code stored in URL only, not on server)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/$bindable.md b/packages/mcp-server/summaries/distilled/svelte/$bindable.md
new file mode 100644
index 00000000..270f5583
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/$bindable.md
@@ -0,0 +1,50 @@
+# Component Bindings
+
+Props normally flow parent → child. With `$bindable`, data can also flow child → parent, allowing children to mutate parent state.
+
+> **Note:** Mutating normal props triggers a warning. Use `$bindable` to explicitly allow mutation.
+
+## Basic Usage
+
+Mark a prop as bindable with `$bindable()`:
+
+```svelte
+/// file: FancyInput.svelte
+<script>
+	let { value = $bindable(), ...props } = $props();
+</script>
+
+<input bind:value={value} {...props} />
+
+<style>
+	input {
+		font-family: 'Comic Sans MS';
+		color: deeppink;
+	}
+</style>
+```
+
+Parent uses `bind:` directive to create two-way binding:
+
+```svelte
+/// file: App.svelte
+<script>
+	import FancyInput from './FancyInput.svelte';
+
+	let message = $state('hello');
+</script>
+
+<FancyInput bind:value={message} />
+<p>{message}</p>
+```
+
+## Fallback Values
+
+Parents can pass normal props without `bind:`. Provide a fallback for when no prop is passed:
+
+```js
+/// file: FancyInput.svelte
+let { value = $bindable('fallback'), ...props } = $props();
+```
+
+**Best Practice:** Use sparingly — one-way data flow is easier to understand.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/$derived.md b/packages/mcp-server/summaries/distilled/svelte/$derived.md
new file mode 100644
index 00000000..6fcbd5c4
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/$derived.md
@@ -0,0 +1,117 @@
+# Derived State
+
+## `$derived`
+
+Creates reactive derived values that automatically update when dependencies change:
+
+```svelte
+<script>
+	let count = $state(0);
+	let doubled = $derived(count * 2);
+</script>
+
+<button onclick={() => count++}>
+	{doubled}
+</button>
+
+<p>{count} doubled is {doubled}</p>
+```
+
+**Key points:**
+- Expression must be side-effect free (no `count++`)
+- Can mark class fields as `$derived`
+- Without `$derived`, values don't update when dependencies change
+
+## `$derived.by`
+
+For complex derivations requiring multiple statements:
+
+```svelte
+<script>
+	let numbers = $state([1, 2, 3]);
+	let total = $derived.by(() => {
+		let total = 0;
+		for (const n of numbers) {
+			total += n;
+		}
+		return total;
+	});
+</script>
+
+<button onclick={() => numbers.push(numbers.length + 1)}>
+	{numbers.join(' + ')} = {total}
+</button>
+```
+
+`$derived(expression)` equals `$derived.by(() => expression)`
+
+## Dependencies
+
+Anything read synchronously inside `$derived` is a dependency. Use [`untrack`](svelte#untrack) to exempt state from being a dependency.
+
+## Overriding Derived Values
+
+Can temporarily reassign derived values (unless `const`) for optimistic UI:
+
+```svelte
+<script>
+	let { post, like } = $props();
+
+	let likes = $derived(post.likes);
+
+	async function onclick() {
+		// increment the `likes` count immediately...
+		likes += 1;
+
+		// and tell the server, which will eventually update `post`
+		try {
+			await like();
+		} catch {
+			// failed! roll back the change
+			likes -= 1;
+		}
+	}
+</script>
+
+<button {onclick}>🧡 {likes}</button>
+```
+
+## Deriveds and Reactivity
+
+Unlike `$state`, `$derived` values aren't converted to deeply reactive proxies. Mutating a derived object still affects the underlying reactive source.
+
+## Destructuring
+
+Destructured variables from `$derived` are all reactive:
+
+```js
+let { a, b, c } = $derived(stuff());
+```
+
+Equivalent to:
+
+```js
+let _stuff = $derived(stuff());
+let a = $derived(_stuff.a);
+let b = $derived(_stuff.b);
+let c = $derived(_stuff.c);
+```
+
+## Update Propagation
+
+**Push-pull reactivity:** Dependencies are notified immediately (push), but derived values only re-evaluate when read (pull).
+
+If a derived's new value is referentially identical to its previous value, downstream updates are skipped:
+
+```svelte
+<script>
+	let count = $state(0);
+	let large = $derived(count > 10);
+</script>
+
+<button onclick={() => count++}>
+	{large}
+</button>
+```
+
+Button text only updates when `large` changes, not `count`.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/$effect.md b/packages/mcp-server/summaries/distilled/svelte/$effect.md
new file mode 100644
index 00000000..248d7a6b
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/$effect.md
@@ -0,0 +1,269 @@
+# Effects
+
+Effects run when state updates. They only run in the browser, not during SSR.
+
+**Don't update state inside effects** — use alternatives like `$derived` instead.
+
+## `$effect`
+
+Creates an effect that tracks reactive dependencies and re-runs when they change.
+
+```svelte
+<script>
+	let size = $state(50);
+	let color = $state('#ff3e00');
+
+	let canvas;
+
+	$effect(() => {
+		const context = canvas.getContext('2d');
+		context.clearRect(0, 0, canvas.width, canvas.height);
+
+		// this will re-run whenever `color` or `size` change
+		context.fillStyle = color;
+		context.fillRect(0, 0, size, size);
+	});
+</script>
+
+<canvas bind:this={canvas} width="100" height="100"></canvas>
+```
+
+### Lifecycle
+
+- Runs after component mounts to DOM
+- Re-runs in a microtask after state changes
+- Re-runs are batched
+- Can be used anywhere, not just top level (must be called while parent effect is running)
+
+### Teardown
+
+Return a function to clean up before re-run or component destruction:
+
+```svelte
+<script>
+	let count = $state(0);
+	let milliseconds = $state(1000);
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			count += 1;
+		}, milliseconds);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<h1>{count}</h1>
+
+<button onclick={() => (milliseconds *= 2)}>slower</button>
+<button onclick={() => (milliseconds /= 2)}>faster</button>
+```
+
+### Dependencies
+
+- Auto-tracks `$state`, `$derived`, `$props` read **synchronously**
+- Values read after `await` or in `setTimeout` are **not tracked**
+- Reading object doesn't track properties inside it (only reassignment)
+- Conditional code affects dependencies — only tracks what was read in last run
+
+```ts
+$effect(() => {
+	const context = canvas.getContext('2d');
+	context.clearRect(0, 0, canvas.width, canvas.height);
+
+	// this will re-run whenever `color` changes...
+	context.fillStyle = color;
+
+	setTimeout(() => {
+		// ...but not when `size` changes
+		context.fillRect(0, 0, size, size);
+	}, 0);
+});
+```
+
+```svelte
+<script>
+	let state = $state({ value: 0 });
+	let derived = $derived({ value: state.value * 2 });
+
+	// this will run once, because `state` is never reassigned (only mutated)
+	$effect(() => {
+		state;
+	});
+
+	// this will run whenever `state.value` changes...
+	$effect(() => {
+		state.value;
+	});
+
+	// ...and so will this, because `derived` is a new object each time
+	$effect(() => {
+		derived;
+	});
+</script>
+```
+
+## `$effect.pre`
+
+Runs **before** DOM updates (vs `$effect` which runs after):
+
+```svelte
+<script>
+	import { tick } from 'svelte';
+
+	let div = $state();
+	let messages = $state([]);
+
+	$effect.pre(() => {
+		if (!div) return; // not yet mounted
+
+		messages.length;
+
+		// autoscroll when new messages are added
+		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
+			tick().then(() => {
+				div.scrollTo(0, div.scrollHeight);
+			});
+		}
+	});
+</script>
+
+<div bind:this={div}>
+	{#each messages as message}
+		<p>{message}</p>
+	{/each}
+</div>
+```
+
+## `$effect.tracking`
+
+Returns `true` if code is running inside a tracking context (effect or template):
+
+```svelte
+<script>
+	console.log('in component setup:', $effect.tracking()); // false
+
+	$effect(() => {
+		console.log('in effect:', $effect.tracking()); // true
+	});
+</script>
+
+<p>in template: {$effect.tracking()}</p> <!-- true -->
+```
+
+## `$effect.pending`
+
+Returns count of pending promises in current boundary (not including child boundaries):
+
+```svelte
+<button onclick={() => a++}>a++</button>
+<button onclick={() => b++}>b++</button>
+
+<p>{a} + {b} = {await add(a, b)}</p>
+
+{#if $effect.pending()}
+	<p>pending promises: {$effect.pending()}</p>
+{/if}
+```
+
+## `$effect.root`
+
+Creates non-tracked scope that doesn't auto-cleanup. For manual control of effects:
+
+```js
+const destroy = $effect.root(() => {
+	$effect(() => {
+		// setup
+	});
+
+	return () => {
+		// cleanup
+	};
+});
+
+// later...
+destroy();
+```
+
+## When NOT to use `$effect`
+
+### ❌ Don't synchronize state
+
+```svelte
+<script>
+	let count = $state(0);
+	let doubled = $state();
+
+	// don't do this!
+	$effect(() => {
+		doubled = count * 2;
+	});
+</script>
+```
+
+### ✅ Use `$derived` instead
+
+```svelte
+<script>
+	let count = $state(0);
+	let doubled = $derived(count * 2);
+</script>
+```
+
+### ❌ Don't link values with effects
+
+```svelte
+<script>
+	const total = 100;
+	let spent = $state(0);
+	let left = $state(total);
+
+	$effect(() => {
+		left = total - spent;
+	});
+
+	$effect(() => {
+		spent = total - left;
+	});
+</script>
+
+<label>
+	<input type="range" bind:value={spent} max={total} />
+	{spent}/{total} spent
+</label>
+
+<label>
+	<input type="range" bind:value={left} max={total} />
+	{left}/{total} left
+</label>
+```
+
+### ✅ Use function bindings
+
+```svelte
+<script>
+	const total = 100;
+	let spent = $state(0);
+	let left = $derived(total - spent);
+
+	function updateLeft(left) {
+		spent = total - left;
+	}
+</script>
+
+<label>
+	<input type="range" bind:value={spent} max={total} />
+	{spent}/{total} spent
+</label>
+
+<label>
+	<input type="range" bind:value={() => left, updateLeft} max={total} />
+	{left}/{total} left
+</label>
+```
+
+**Note:** As of Svelte 5.25, deriveds can be directly overridden for optimistic UI patterns.
+
+**Gotcha:** If you must update `$state` in an effect and hit infinite loops, use `untrack()`.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/$host.md b/packages/mcp-server/summaries/distilled/svelte/$host.md
new file mode 100644
index 00000000..df8973a9
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/$host.md
@@ -0,0 +1,40 @@
+# $host Rune
+
+The `$host` rune provides access to the host element when compiling a component as a custom element.
+
+## Usage
+
+```svelte
+/// file: Stepper.svelte
+<svelte:options customElement="my-stepper" />
+
+<script>
+	function dispatch(type) {
+		$host().dispatchEvent(new CustomEvent(type));
+	}
+</script>
+
+<button onclick={() => dispatch('decrement')}>decrement</button>
+<button onclick={() => dispatch('increment')}>increment</button>
+```
+
+```svelte
+/// file: App.svelte
+<script>
+	import './Stepper.svelte';
+
+	let count = $state(0);
+</script>
+
+<my-stepper
+	ondecrement={() => count -= 1}
+	onincrement={() => count += 1}
+></my-stepper>
+
+<p>count: {count}</p>
+```
+
+**Key points:**
+- Only available in custom element components (requires `<svelte:options customElement="..." />`)
+- Commonly used to dispatch custom events from the host element
+- `$host()` is a global rune, no import needed
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/$inspect.md b/packages/mcp-server/summaries/distilled/svelte/$inspect.md
new file mode 100644
index 00000000..24f34362
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/$inspect.md
@@ -0,0 +1,62 @@
+# $inspect
+
+**Development only** - becomes noop in production.
+
+Re-runs `console.log` whenever arguments change. Tracks reactive state deeply.
+
+```svelte
+<script>
+	let count = $state(0);
+	let message = $state('hello');
+
+	$inspect(count, message); // logs when count or message change
+</script>
+
+<button onclick={() => count++}>Increment</button>
+<input bind:value={message} />
+```
+
+## $inspect(...).with
+
+Custom callback instead of `console.log`. First arg is `"init"` or `"update"`, rest are inspected values.
+
+```svelte
+<script>
+	let count = $state(0);
+
+	$inspect(count).with((type, count) => {
+		if (type === 'update') {
+			debugger; // or console.trace, etc
+		}
+	});
+</script>
+
+<button onclick={() => count++}>Increment</button>
+```
+
+**Tip:** Pass `console.trace` to find change origin:
+
+```js
+// @errors: 2304
+$inspect(stuff).with(console.trace);
+```
+
+## $inspect.trace(...)
+
+Added in 5.14. Traces function re-runs in [$effect]($effect) or [$derived]($derived), logging which reactive state caused the update.
+
+**Must be first statement in function body.**
+
+```svelte
+<script>
+	import { doSomeWork } from './elsewhere';
+
+	$effect(() => {
+		// $inspect.trace must be the first statement of a function body
+		$inspect.trace();
+		doSomeWork();
+	});
+</script>
+```
+
+Takes optional label as first argument.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/$props.md b/packages/mcp-server/summaries/distilled/svelte/$props.md
new file mode 100644
index 00000000..af475ca5
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/$props.md
@@ -0,0 +1,134 @@
+# Props
+
+Pass props to components like attributes:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import MyComponent from './MyComponent.svelte';
+</script>
+
+<MyComponent adjective="cool" />
+```
+
+Receive props with `$props` rune (destructuring is common):
+
+```svelte
+<!--- file: MyComponent.svelte --->
+<script>
+	let { adjective } = $props();
+</script>
+
+<p>this component is {adjective}</p>
+```
+
+## Fallback values
+
+Use destructuring defaults for fallback values:
+
+```js
+let { adjective = 'happy' } = $props();
+```
+
+> **Note:** Fallback values are not turned into reactive state proxies.
+
+## Renaming props
+
+Rename props for invalid identifiers or keywords:
+
+```js
+let { super: trouper = 'lights are gonna find me' } = $props();
+```
+
+## Rest props
+
+Get remaining props with rest property:
+
+```js
+let { a, b, c, ...others } = $props();
+```
+
+## Updating props
+
+Props update when parent changes. Child can temporarily **reassign** props but should **not mutate** them unless they are `$bindable`.
+
+**Reassignment works** (temporary override):
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { count } = $props();
+</script>
+
+<button onclick={() => (count += 1)}>
+	clicks (child): {count}
+</button>
+```
+
+**Mutating regular objects has no effect:**
+
+```svelte
+<button onclick={() => {
+	// has no effect
+	object.count += 1
+}}>
+	clicks: {object.count}
+</button>
+```
+
+**Mutating reactive state proxies causes `ownership_invalid_mutation` warning** — don't mutate objects you don't own.
+
+**Mutating fallback values has no effect** (not reactive).
+
+**Solution:** Use callback props or `$bindable` to share state between parent and child.
+
+## Type safety
+
+TypeScript:
+
+```svelte
+<script lang="ts">
+	let { adjective }: { adjective: string } = $props();
+</script>
+```
+
+JSDoc:
+
+```svelte
+<script>
+	/** @type {{ adjective: string }} */
+	let { adjective } = $props();
+</script>
+```
+
+With interface:
+
+```svelte
+<script lang="ts">
+	interface Props {
+		adjective: string;
+	}
+
+	let { adjective }: Props = $props();
+</script>
+```
+
+> **Note:** Native DOM element interfaces available in `svelte/elements` module.
+
+## `$props.id()`
+
+Generates unique ID per component instance (consistent during SSR hydration). Useful for linking elements:
+
+```svelte
+<script>
+	const uid = $props.id();
+</script>
+
+<form>
+	<label for="{uid}-firstname">First Name: </label>
+	<input id="{uid}-firstname" type="text" />
+
+	<label for="{uid}-lastname">Last Name: </label>
+	<input id="{uid}-lastname" type="text" />
+</form>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/$state.md b/packages/mcp-server/summaries/distilled/svelte/$state.md
new file mode 100644
index 00000000..6dac7566
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/$state.md
@@ -0,0 +1,225 @@
+# $state
+
+Creates reactive state that updates the UI when changed.
+
+```svelte
+<script>
+	let count = $state(0);
+</script>
+
+<button onclick={() => count++}>
+	clicks: {count}
+</button>
+```
+
+`count` is just a number, not an object or function. Update it like any variable.
+
+## Deep state
+
+Arrays and simple objects become deeply reactive proxies. Svelte intercepts reads/writes to trigger granular updates.
+
+```js
+let todos = $state([
+	{
+		done: false,
+		text: 'add more todos'
+	}
+]);
+```
+
+Modifying nested properties triggers updates:
+
+```js
+todos[0].done = !todos[0].done;
+```
+
+Pushed objects are also proxified:
+
+```js
+todos.push({
+	done: false,
+	text: 'eat lunch'
+});
+```
+
+**Gotcha:** Destructuring breaks reactivity (evaluated at destructure time):
+
+```js
+let { done, text } = todos[0];
+
+// this will NOT affect the value of `done`
+todos[0].done = !todos[0].done;
+```
+
+## Classes
+
+Use `$state` in class fields or as first assignment in constructor:
+
+```js
+class Todo {
+	done = $state(false);
+
+	constructor(text) {
+		this.text = $state(text);
+	}
+
+	reset() {
+		this.text = '';
+		this.done = false;
+	}
+}
+```
+
+**Gotcha:** `this` binding in methods. This won't work:
+
+```svelte
+<button onclick={todo.reset}>
+	reset
+</button>
+```
+
+Fix with inline function:
+
+```svelte
+<button onclick={() => todo.reset()}>
+	reset
+</button>
+```
+
+Or arrow function in class:
+
+```js
+class Todo {
+	done = $state(false);
+
+	constructor(text) {
+		this.text = $state(text);
+	}
+
+	reset = () => {
+		this.text = '';
+		this.done = false;
+	}
+}
+```
+
+## Built-in classes
+
+Import reactive `Set`, `Map`, `Date`, `URL` from `svelte/reactivity`.
+
+## $state.raw
+
+Non-deeply reactive state. Cannot mutate, only reassign:
+
+```js
+let person = $state.raw({
+	name: 'Heraclitus',
+	age: 49
+});
+
+// no effect
+person.age += 1;
+
+// works - new object
+person = {
+	name: 'Heraclitus',
+	age: 50
+};
+```
+
+Improves performance for large arrays/objects you won't mutate. Raw state can contain reactive state.
+
+## $state.snapshot
+
+Takes static snapshot of reactive proxy:
+
+```svelte
+<script>
+	let counter = $state({ count: 0 });
+
+	function onclick() {
+		// Logs `{ count: ... }` not `Proxy { ... }`
+		console.log($state.snapshot(counter));
+	}
+</script>
+```
+
+Useful for external libraries/APIs that don't expect proxies (e.g., `structuredClone`).
+
+## Passing state into functions
+
+JavaScript is pass-by-value. To access current values, use functions:
+
+```js
+function add(getA, getB) {
+	return () => getA() + getB();
+}
+
+let a = $state(1);
+let b = $state(2);
+let total = add(() => a, () => b);
+console.log(total()); // 3
+
+a = 3;
+b = 4;
+console.log(total()); // 7
+```
+
+Or use getters:
+
+```js
+function add(input) {
+	return {
+		get value() {
+			return input.a + input.b;
+		}
+	};
+}
+
+let input = $state({ a: 1, b: 2 });
+let total = add(input);
+console.log(total.value); // 3
+
+input.a = 3;
+input.b = 4;
+console.log(total.value); // 7
+```
+
+## Passing state across modules
+
+**Cannot directly export reassignable state:**
+
+```js
+// ❌ Not allowed
+export let count = $state(0);
+
+export function increment() {
+	count += 1;
+}
+```
+
+**Option 1:** Export object, update properties:
+
+```js
+export const counter = $state({
+	count: 0
+});
+
+export function increment() {
+	counter.count += 1;
+}
+```
+
+**Option 2:** Export getter/setter functions:
+
+```js
+let count = $state(0);
+
+export function getCount() {
+	return count;
+}
+
+export function increment() {
+	count += 1;
+}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/@attach.md b/packages/mcp-server/summaries/distilled/svelte/@attach.md
new file mode 100644
index 00000000..dcdb073d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/@attach.md
@@ -0,0 +1,148 @@
+# Attachments
+
+Functions that run in an effect when an element mounts or when state updates. Can return a cleanup function.
+
+**Available in Svelte 5.29+**
+
+## Basic usage
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	/** @type {import('svelte/attachments').Attachment} */
+	function myAttachment(element) {
+		console.log(element.nodeName); // 'DIV'
+
+		return () => {
+			console.log('cleaning up');
+		};
+	}
+</script>
+
+<div {@attach myAttachment}>...</div>
+```
+
+Elements can have multiple attachments.
+
+## Attachment factories
+
+Functions that return attachments:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import tippy from 'tippy.js';
+
+	let content = $state('Hello!');
+
+	/**
+	 * @param {string} content
+	 * @returns {import('svelte/attachments').Attachment}
+	 */
+	function tooltip(content) {
+		return (element) => {
+			const tooltip = tippy(element, { content });
+			return tooltip.destroy;
+		};
+	}
+</script>
+
+<input bind:value={content} />
+
+<button {@attach tooltip(content)}>
+	Hover me
+</button>
+```
+
+Attachment recreates when `content` changes or any state read inside the attachment function changes.
+
+## Inline attachments
+
+```svelte
+<!--- file: App.svelte --->
+<canvas
+	width={32}
+	height={32}
+	{@attach (canvas) => {
+		const context = canvas.getContext('2d');
+
+		$effect(() => {
+			context.fillStyle = color;
+			context.fillRect(0, 0, canvas.width, canvas.height);
+		});
+	}}
+></canvas>
+```
+
+Nested effect runs when `color` changes; outer effect runs once.
+
+## Passing to components
+
+`{@attach ...}` creates a Symbol-keyed prop. Spreading props onto an element passes attachments through:
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+	/** @type {import('svelte/elements').HTMLButtonAttributes} */
+	let { children, ...props } = $props();
+</script>
+
+<!-- `props` includes attachments -->
+<button {...props}>
+	{@render children?.()}
+</button>
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import tippy from 'tippy.js';
+	import Button from './Button.svelte';
+
+	let content = $state('Hello!');
+
+	/**
+	 * @param {string} content
+	 * @returns {import('svelte/attachments').Attachment}
+	 */
+	function tooltip(content) {
+		return (element) => {
+			const tooltip = tippy(element, { content });
+			return tooltip.destroy;
+		};
+	}
+</script>
+
+<input bind:value={content} />
+
+<Button {@attach tooltip(content)}>
+	Hover me
+</Button>
+```
+
+## Controlling re-runs
+
+Attachments are fully reactive: `{@attach foo(bar)}` re-runs on changes to `foo`, `bar`, or any state read inside `foo`.
+
+To avoid expensive re-runs, pass data in a function and read it in a child effect:
+
+```js
+// @errors: 7006 2304 2552
+function foo(getBar) {
+	return (node) => {
+		veryExpensiveSetupWork(node);
+
+		$effect(() => {
+			update(node, getBar());
+		});
+	}
+}
+```
+
+## Programmatic creation
+
+Use [`createAttachmentKey`](svelte-attachments#createAttachmentKey) to add attachments to objects for spreading.
+
+## Converting actions
+
+Use [`fromAction`](svelte-attachments#fromAction) to convert actions to attachments.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/@const.md b/packages/mcp-server/summaries/distilled/svelte/@const.md
new file mode 100644
index 00000000..33f14823
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/@const.md
@@ -0,0 +1,12 @@
+# {@const}
+
+Defines a local constant within a block.
+
+```svelte
+{#each boxes as box}
+	{@const area = box.width * box.height}
+	{box.width} * {box.height} = {area}
+{/each}
+```
+
+**Restriction:** Only allowed as immediate child of `{#if}`, `{#each}`, `{#snippet}`, `<Component />`, or `<svelte:boundary>`.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/@debug.md b/packages/mcp-server/summaries/distilled/svelte/@debug.md
new file mode 100644
index 00000000..5dafd208
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/@debug.md
@@ -0,0 +1,37 @@
+# {@debug}
+
+Logs variable values when they change and pauses execution if devtools open.
+
+## Usage
+
+```svelte
+<script>
+	let user = {
+		firstname: 'Ada',
+		lastname: 'Lovelace'
+	};
+</script>
+
+{@debug user}
+
+<h1>Hello {user.firstname}!</h1>
+```
+
+## Syntax Rules
+
+**Accepts:** Comma-separated variable names only
+**Rejects:** Expressions, property access, array indices, operators
+
+```svelte
+<!-- ✓ Valid -->
+{@debug user}
+{@debug user1, user2, user3}
+
+<!-- ✗ Invalid -->
+{@debug user.firstname}
+{@debug myArray[0]}
+{@debug !isReady}
+{@debug typeof user === 'object'}
+```
+
+**No arguments:** `{@debug}` triggers on any state change
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/@html.md b/packages/mcp-server/summaries/distilled/svelte/@html.md
new file mode 100644
index 00000000..2008bd30
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/@html.md
@@ -0,0 +1,28 @@
+# {@html} Tag
+
+Inject raw HTML into components:
+
+```svelte
+<article>
+	{@html content}
+</article>
+```
+
+**Security:** Escape or control all values to prevent XSS attacks. Never render unsanitized content.
+
+**Limitations:**
+- Expression must be valid standalone HTML (can't split tags)
+- Does not compile Svelte code
+
+## Styling
+
+`{@html}` content is invisible to scoped styles. Use `:global` modifier:
+
+```svelte
+<style>
+	article :global {
+		a { color: hotpink }
+		img { width: 100% }
+	}
+</style>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/@render.md b/packages/mcp-server/summaries/distilled/svelte/@render.md
new file mode 100644
index 00000000..ce411d2b
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/@render.md
@@ -0,0 +1,39 @@
+# {@render}
+
+Renders a [snippet](snippet) using `{@render ...}` tag.
+
+## Basic usage
+
+```svelte
+{#snippet sum(a, b)}
+	<p>{a} + {b} = {a + b}</p>
+{/snippet}
+
+{@render sum(1, 2)}
+{@render sum(3, 4)}
+{@render sum(5, 6)}
+```
+
+Expression can be an identifier or any JavaScript expression:
+
+```svelte
+{@render (cool ? coolSnippet : lameSnippet)()}
+```
+
+## Optional snippets
+
+Use optional chaining for potentially undefined snippets (e.g., props):
+
+```svelte
+{@render children?.()}
+```
+
+Or use `{#if}` with `:else` for fallback content:
+
+```svelte
+{#if children}
+	{@render children()}
+{:else}
+	<p>fallback content</p>
+{/if}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/animate.md b/packages/mcp-server/summaries/distilled/svelte/animate.md
new file mode 100644
index 00000000..36d3d0e3
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/animate.md
@@ -0,0 +1,104 @@
+# Animations
+
+Animations trigger when contents of a **keyed each block** are re-ordered. They do NOT run on add/remove, only when existing item indices change. Must be on immediate child of keyed each block.
+
+## Basic Usage
+
+```svelte
+<!-- When `list` is reordered the animation will run -->
+{#each list as item, index (item)}
+	<li animate:flip>{item}</li>
+{/each}
+```
+
+## Animation Parameters
+
+```svelte
+{#each list as item, index (item)}
+	<li animate:flip={{ delay: 500 }}>{item}</li>
+{/each}
+```
+
+## Custom Animation Functions
+
+**Signature:**
+```js
+animation = (node: HTMLElement, { from: DOMRect, to: DOMRect }, params: any) => {
+	delay?: number,
+	duration?: number,
+	easing?: (t: number) => number,
+	css?: (t: number, u: number) => string,
+	tick?: (t: number, u: number) => void
+}
+```
+
+- `from`: DOMRect at start position
+- `to`: DOMRect at end position (after reorder)
+- `t`: eased value from 0→1
+- `u`: equals `1 - t`
+
+### Using `css` (preferred)
+
+Creates web animation that runs off main thread.
+
+```svelte
+<script>
+	import { cubicOut } from 'svelte/easing';
+
+	/**
+	 * @param {HTMLElement} node
+	 * @param {{ from: DOMRect; to: DOMRect }} states
+	 * @param {any} params
+	 */
+	function whizz(node, { from, to }, params) {
+		const dx = from.left - to.left;
+		const dy = from.top - to.top;
+
+		const d = Math.sqrt(dx * dx + dy * dy);
+
+		return {
+			delay: 0,
+			duration: Math.sqrt(d) * 120,
+			easing: cubicOut,
+			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
+		};
+	}
+</script>
+
+{#each list as item, index (item)}
+	<div animate:whizz>{item}</div>
+{/each}
+```
+
+### Using `tick`
+
+Runs during animation. Use `css` when possible to avoid jank.
+
+```svelte
+<script>
+	import { cubicOut } from 'svelte/easing';
+
+	/**
+	 * @param {HTMLElement} node
+	 * @param {{ from: DOMRect; to: DOMRect }} states
+	 * @param {any} params
+	 */
+	function whizz(node, { from, to }, params) {
+		const dx = from.left - to.left;
+		const dy = from.top - to.top;
+
+		const d = Math.sqrt(dx * dx + dy * dy);
+
+		return {
+			delay: 0,
+			duration: Math.sqrt(d) * 120,
+			easing: cubicOut,
+			tick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
+		};
+	}
+</script>
+
+{#each list as item, index (item)}
+	<div animate:whizz>{item}</div>
+{/each}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/await-expressions.md b/packages/mcp-server/summaries/distilled/svelte/await-expressions.md
new file mode 100644
index 00000000..3cd6bf67
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/await-expressions.md
@@ -0,0 +1,119 @@
+# Async `await` in Components
+
+**Experimental feature (Svelte 5.36+)** - opt in via config:
+
+```js
+/// file: svelte.config.js
+export default {
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
+	}
+};
+```
+
+Flag removed in Svelte 6.
+
+## Usage
+
+Use `await` in three places:
+- Top level of `<script>`
+- Inside `$derived(...)` declarations
+- Inside markup
+
+## Synchronized Updates
+
+State changes wait for async work to complete before UI updates, preventing inconsistent states:
+
+```svelte
+<script>
+	let a = $state(1);
+	let b = $state(2);
+
+	async function add(a, b) {
+		await new Promise((f) => setTimeout(f, 500)); // artificial delay
+		return a + b;
+	}
+</script>
+
+<input type="number" bind:value={a}>
+<input type="number" bind:value={b}>
+
+<p>{a} + {b} = {await add(a, b)}</p>
+```
+
+Incrementing `a` won't show `2 + 2 = 3`, waits to show `2 + 2 = 4`. Fast updates can overtake slow ones.
+
+## Concurrency
+
+Independent `await` expressions run in parallel:
+
+```svelte
+<p>{await one()}</p>
+<p>{await two()}</p>
+```
+
+Both functions run simultaneously. Sequential `await` in `<script>` runs normally. Independent `$derived` expressions update independently:
+
+```js
+// these will run sequentially the first time,
+// but will update independently
+let a = $derived(await one());
+let b = $derived(await two());
+```
+
+> **Note:** Expect [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning
+
+## Loading States
+
+**Initial loading:** Use `<svelte:boundary>` with `pending` snippet (shown only on first load, not updates).
+
+**Subsequent updates:** Use `$effect.pending()` for spinners/indicators.
+
+**Wait for completion:** Use `settled()`:
+
+```js
+import { tick, settled } from 'svelte';
+
+async function onclick() {
+	updating = true;
+
+	// without this, the change to `updating` will be
+	// grouped with the other changes, meaning it
+	// won't be reflected in the UI
+	await tick();
+
+	color = 'octarine';
+	answer = 42;
+
+	await settled();
+
+	// any updates affected by `color` or `answer`
+	// have now been applied
+	updating = false;
+}
+```
+
+## Error Handling
+
+Errors bubble to nearest [error boundary](svelte-boundary).
+
+## SSR
+
+Await `render()` for async SSR:
+
+```js
+/// file: server.js
+import { render } from 'svelte/server';
+import App from './App.svelte';
+
+const { head, body } = await render(App);
+```
+
+Boundaries with `pending` snippets render that snippet during SSR. Other `await` expressions resolve before `render()` returns.
+
+## Caveats
+
+- Experimental: breaking changes possible outside semver major
+- Effect order changes: block effects (`{#if}`, `{#each}`) now run before `$effect.pre`/`beforeUpdate` in same component
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/await.md b/packages/mcp-server/summaries/distilled/svelte/await.md
new file mode 100644
index 00000000..ef4976e1
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/await.md
@@ -0,0 +1,56 @@
+# {#await} Block
+
+Handles the three states of a Promise: pending, fulfilled, rejected.
+
+## Syntax Variants
+
+```svelte
+{#await expression}...{:then name}...{:catch name}...{/await}
+{#await expression}...{:then name}...{/await}
+{#await expression then name}...{/await}
+{#await expression catch name}...{/await}
+```
+
+## Full Example
+
+```svelte
+{#await promise}
+	<!-- promise is pending -->
+	<p>waiting for the promise to resolve...</p>
+{:then value}
+	<!-- promise was fulfilled or not a Promise -->
+	<p>The value is {value}</p>
+{:catch error}
+	<!-- promise was rejected -->
+	<p>Something went wrong: {error.message}</p>
+{/await}
+```
+
+## Gotchas
+
+- **SSR**: Only pending branch renders on server
+- **Non-Promise**: If expression isn't a Promise, only `:then` branch renders (including SSR)
+
+## Shorthand Patterns
+
+**Omit catch block:**
+```svelte
+{#await promise then value}
+	<p>The value is {value}</p>
+{/await}
+```
+
+**Omit then block (error only):**
+```svelte
+{#await promise catch error}
+	<p>The error is {error}</p>
+{/await}
+```
+
+## Lazy Component Loading
+
+```svelte
+{#await import('./Component.svelte') then { default: Component }}
+	<Component />
+{/await}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/basic-markup.md b/packages/mcp-server/summaries/distilled/svelte/basic-markup.md
new file mode 100644
index 00000000..c348e5ff
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/basic-markup.md
@@ -0,0 +1,134 @@
+# Svelte Markup
+
+## Tags
+
+- Lowercase tags (`<div>`) = HTML elements
+- Capitalized or dot notation (`<Widget>`, `<my.stuff>`) = components
+
+```svelte
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget />
+</div>
+```
+
+## Element Attributes
+
+Attributes work like HTML. Values can contain or be JavaScript expressions.
+
+```svelte
+<div class="foo">
+	<button disabled>can't touch this</button>
+</div>
+
+<input type=checkbox />
+
+<a href="page/{p}">page {p}</a>
+
+<button disabled={!clickable}>...</button>
+```
+
+**Inclusion rules:**
+- Boolean attributes: included if truthy, excluded if falsy
+- Other attributes: included unless nullish (`null`/`undefined`)
+
+```svelte
+<input required={false} placeholder="This input field is not required" />
+<div title={null}>This div has no title attribute</div>
+```
+
+**Shorthand:** `{name}` replaces `name={name}`
+
+```svelte
+<button {disabled}>...</button>
+```
+
+## Component Props
+
+Same rules as attributes. Use `{name}` shorthand.
+
+```svelte
+<Widget foo={bar} answer={42} text="hello" />
+```
+
+## Spread Attributes
+
+Spread multiple attributes/props at once. Order matters for precedence.
+
+```svelte
+<Widget a="b" {...things} c="d" />
+```
+
+## Events
+
+Use `on` prefix (case sensitive). `onclick` listens to `click`, `onClick` listens to `Click`.
+
+```svelte
+<button onclick={() => console.log('clicked')}>click me</button>
+```
+
+Event attributes support shorthand and spreading. Fire after bindings update.
+
+**Passive events:** `ontouchstart` and `ontouchmove` are passive for performance. Use `on` from `svelte/events` if you need `preventDefault()`.
+
+### Event Delegation
+
+Svelte delegates certain events to the application root for performance.
+
+**Gotchas:**
+- Manually dispatched events need `{ bubbles: true }`
+- Avoid `stopPropagation` with `addEventListener` directly
+- Use `on` from `svelte/events` instead of `addEventListener` for correct ordering
+
+**Delegated events:** `beforeinput`, `click`, `change`, `dblclick`, `contextmenu`, `focusin`, `focusout`, `input`, `keydown`, `keyup`, `mousedown`, `mousemove`, `mouseout`, `mouseover`, `mouseup`, `pointerdown`, `pointermove`, `pointerout`, `pointerover`, `pointerup`, `touchend`, `touchmove`, `touchstart`
+
+## Text Expressions
+
+JavaScript expressions in curly braces. `null`/`undefined` omitted, others coerced to strings.
+
+```svelte
+<h1>Hello {name}!</h1>
+<p>{a} + {b} = {a + b}.</p>
+
+<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>
+```
+
+**HTML rendering:** Use `{@html}` (escape to prevent XSS)
+
+```svelte
+{@html potentiallyUnsafeHtmlString}
+```
+
+## Comments
+
+HTML comments work. `svelte-ignore` disables warnings for next markup block.
+
+```svelte
+<!-- this is a comment! --><h1>Hello world</h1>
+
+<!-- svelte-ignore a11y_autofocus -->
+<input bind:value={name} autofocus />
+```
+
+**Component docs:** `@component` comments show on hover.
+
+````svelte
+<!--
+@component
+- You can use markdown here.
+- Usage:
+  ```html
+  <Main name="Arethra">
+  ```
+-->
+<script>
+	let { name } = $props();
+</script>
+
+<main>
+	<h1>Hello, {name}</h1>
+</main>
+````
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/bind.md b/packages/mcp-server/summaries/distilled/svelte/bind.md
new file mode 100644
index 00000000..e1adcd5a
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/bind.md
@@ -0,0 +1,279 @@
+# Bindings
+
+`bind:` directive allows data to flow from child to parent (reverse of normal flow).
+
+## Syntax
+
+```svelte
+<input bind:value={value} />
+<input bind:value /> <!-- shorthand when names match -->
+```
+
+Svelte creates event listeners to update bound values. Most bindings are two-way; some are readonly.
+
+## Function Bindings
+
+Use `bind:property={get, set}` for validation/transformation:
+
+```svelte
+<input bind:value={
+	() => value,
+	(v) => value = v.toLowerCase()}
+/>
+```
+
+For readonly bindings, set `get` to `null`:
+
+```svelte
+<div
+	bind:clientWidth={null, redraw}
+	bind:clientHeight={null, redraw}
+>...</div>
+```
+
+> Available in Svelte 5.9.0+
+
+## `<input bind:value>`
+
+```svelte
+<script>
+	let message = $state('hello');
+</script>
+
+<input bind:value={message} />
+<p>{message}</p>
+```
+
+Numeric inputs (`type="number"` or `type="range"`) coerce to numbers. Empty/invalid inputs are `undefined`.
+
+Since 5.6.0: `defaultValue` attribute sets reset value for forms (takes precedence over empty string). Binding value takes precedence on initial render unless `null`/`undefined`.
+
+```svelte
+<script>
+	let value = $state('');
+</script>
+
+<form>
+	<input bind:value defaultValue="not the empty string">
+	<input type="reset" value="Reset">
+</form>
+```
+
+## `<input bind:checked>`
+
+```svelte
+<label>
+	<input type="checkbox" bind:checked={accepted} />
+	Accept terms and conditions
+</label>
+```
+
+Since 5.6.0: `defaultChecked` sets reset value for forms.
+
+> Use `bind:group` for radio inputs, not `bind:checked`
+
+## `<input bind:indeterminate>`
+
+```svelte
+<script>
+	let checked = $state(false);
+	let indeterminate = $state(true);
+</script>
+
+<form>
+	<input type="checkbox" bind:checked bind:indeterminate>
+
+	{#if indeterminate}
+		waiting...
+	{:else if checked}
+		checked
+	{:else}
+		unchecked
+	{/if}
+</form>
+```
+
+## `<input bind:group>`
+
+```svelte
+<script>
+	let tortilla = $state('Plain');
+
+	/** @type {string[]} */
+	let fillings = $state([]);
+</script>
+
+<!-- grouped radio inputs are mutually exclusive -->
+<label><input type="radio" bind:group={tortilla} value="Plain" /> Plain</label>
+<label><input type="radio" bind:group={tortilla} value="Whole wheat" /> Whole wheat</label>
+<label><input type="radio" bind:group={tortilla} value="Spinach" /> Spinach</label>
+
+<!-- grouped checkbox inputs populate an array -->
+<label><input type="checkbox" bind:group={fillings} value="Rice" /> Rice</label>
+<label><input type="checkbox" bind:group={fillings} value="Beans" /> Beans</label>
+<label><input type="checkbox" bind:group={fillings} value="Cheese" /> Cheese</label>
+<label><input type="checkbox" bind:group={fillings} value="Guac (extra)" /> Guac (extra)</label>
+```
+
+> Only works if inputs are in same component
+
+## `<input bind:files>`
+
+```svelte
+<script>
+	let files = $state();
+
+	function clear() {
+		files = new DataTransfer().files; // null or undefined does not work
+	}
+</script>
+
+<label for="avatar">Upload a picture:</label>
+<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
+<button onclick={clear}>clear</button>
+```
+
+Must use `FileList` objects. Create via `DataTransfer` since `FileList` can't be constructed directly or modified.
+
+## `<select bind:value>`
+
+Binds to `value` property of selected `<option>` (any value type, not just strings):
+
+```svelte
+<select bind:value={selected}>
+	<option value={a}>a</option>
+	<option value={b}>b</option>
+	<option value={c}>c</option>
+</select>
+```
+
+`<select multiple>` binds to array:
+
+```svelte
+<select multiple bind:value={fillings}>
+	<option>Rice</option>
+	<option>Beans</option>
+	<option>Cheese</option>
+	<option>Guac (extra)</option>
+</select>
+```
+
+Use `selected` attribute for default values (used on form reset). Binding value takes precedence on initial render unless `undefined`.
+
+## `<audio>`
+
+**Two-way bindings:**
+- `currentTime`, `playbackRate`, `paused`, `volume`, `muted`
+
+**Readonly bindings:**
+- `duration`, `buffered`, `seekable`, `seeking`, `ended`, `readyState`, `played`
+
+```svelte
+<audio src={clip} bind:duration bind:currentTime bind:paused></audio>
+```
+
+## `<video>`
+
+Same as `<audio>` plus readonly `videoWidth` and `videoHeight`.
+
+## `<img>`
+
+Readonly: `naturalWidth`, `naturalHeight`
+
+## `<details bind:open>`
+
+```svelte
+<details bind:open={isOpen}>
+	<summary>How do you comfort a JavaScript bug?</summary>
+	<p>You console it.</p>
+</details>
+```
+
+## Contenteditable Bindings
+
+Elements with `contenteditable` support: `innerHTML`, `innerText`, `textContent`
+
+```svelte
+<div contenteditable="true" bind:innerHTML={html}></div>
+```
+
+## Dimensions
+
+All visible elements have readonly bindings (measured with `ResizeObserver`):
+- `clientWidth`, `clientHeight`, `offsetWidth`, `offsetHeight`
+- `contentRect`, `contentBoxSize`, `borderBoxSize`, `devicePixelContentBoxSize`
+
+```svelte
+<div bind:offsetWidth={width} bind:offsetHeight={height}>
+	<Chart {width} {height} />
+</div>
+```
+
+> `display: inline` elements (except intrinsic dimensions like `<img>`) need different display style. CSS transforms don't trigger callbacks.
+
+## bind:this
+
+Get DOM node reference (available after mount, read in effects/event handlers):
+
+```svelte
+<script>
+	/** @type {HTMLCanvasElement} */
+	let canvas;
+
+	$effect(() => {
+		const ctx = canvas.getContext('2d');
+		drawStuff(ctx);
+	});
+</script>
+
+<canvas bind:this={canvas}></canvas>
+```
+
+Works with components too:
+
+```svelte
+<!--- file: App.svelte --->
+<ShoppingCart bind:this={cart} />
+
+<button onclick={() => cart.empty()}> Empty shopping cart </button>
+```
+
+```svelte
+<!--- file: ShoppingCart.svelte --->
+<script>
+	// All instance exports are available on the instance object
+	export function empty() {
+		// ...
+	}
+</script>
+```
+
+> With function bindings, getter is required for proper nullification on destruction.
+
+## Component Property Bindings
+
+Bind to component props:
+
+```svelte
+<Keypad bind:value={pin} />
+```
+
+Mark properties as bindable with `$bindable()`:
+
+```svelte
+<script>
+	let { readonlyProperty, bindableProperty = $bindable() } = $props();
+</script>
+```
+
+Bindable properties _can_ use `bind:`, not _must_.
+
+Fallback values:
+
+```svelte
+<script>
+	let { bindableProperty = $bindable('fallback value') } = $props();
+</script>
+```
+
+Fallback only applies when not bound. When bound with fallback, parent must provide non-`undefined` value or runtime error occurs.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/class.md b/packages/mcp-server/summaries/distilled/svelte/class.md
new file mode 100644
index 00000000..6b5bc3e8
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/class.md
@@ -0,0 +1,91 @@
+# Classes
+
+## `class` Attribute
+
+### Primitive values
+```svelte
+<div class={large ? 'large' : 'small'}>...</div>
+```
+
+**Note:** Falsy values are stringified (`class="false"`), except `undefined`/`null` which omit the attribute.
+
+### Objects (Svelte 5.16+)
+Truthy keys are added as classes:
+
+```svelte
+<script>
+	let { cool } = $props();
+</script>
+
+<!-- results in `class="cool"` if `cool` is truthy,
+     `class="lame"` otherwise -->
+<div class={{ cool, lame: !cool }}>...</div>
+```
+
+### Arrays (Svelte 5.16+)
+Truthy values are combined:
+
+```svelte
+<!-- if `faded` and `large` are both truthy, results in
+     `class="saturate-0 opacity-50 scale-200"` -->
+<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>
+```
+
+Arrays can contain nested arrays/objects (flattened via [clsx](https://github.com/lukeed/clsx)). Useful for combining local classes with props:
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+	let props = $props();
+</script>
+
+<button {...props} class={['cool-button', props.class]}>
+	{@render props.children?.()}
+</button>
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Button from './Button.svelte';
+	let useTailwind = $state(false);
+</script>
+
+<Button
+	onclick={() => useTailwind = true}
+	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
+>
+	Accept the inevitability of Tailwind
+</Button>
+```
+
+### TypeScript (Svelte 5.19+)
+Use `ClassValue` type for component props:
+
+```svelte
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	const props: { class: ClassValue } = $props();
+</script>
+
+<div class={['original', props.class]}>...</div>
+```
+
+## `class:` Directive (Legacy)
+
+Conditional classes (pre-5.16 approach):
+
+```svelte
+<!-- These are equivalent -->
+<div class={{ cool, lame: !cool }}>...</div>
+<div class:cool={cool} class:lame={!cool}>...</div>
+```
+
+Shorthand when name matches value:
+
+```svelte
+<div class:cool class:lame={!cool}>...</div>
+```
+
+**Note:** Prefer `class` attribute over `class:` directive (more powerful and composable).
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/compiler-errors.md b/packages/mcp-server/summaries/distilled/svelte/compiler-errors.md
new file mode 100644
index 00000000..89c59c93
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/compiler-errors.md
@@ -0,0 +1,219 @@
+# Svelte 5 Error Messages Reference
+
+## Animation Directives
+
+- **animation_duplicate**: Only one `animate:` directive per element
+- **animation_invalid_placement**: `animate:` must be on the only child of a keyed `{#each}` block
+- **animation_missing_key**: Did you forget to add a key to your each block?
+
+## Attributes
+
+- **attribute_contenteditable_dynamic**: `contenteditable` must be static when using two-way binding
+- **attribute_contenteditable_missing**: `contenteditable` required for `textContent`, `innerHTML`, `innerText` bindings
+- **attribute_duplicate**: Attributes must be unique
+- **attribute_invalid_event_handler**: Event attributes must be JavaScript expressions, not strings
+- **attribute_invalid_multiple**: `multiple` must be static on `<select>` with two-way binding
+- **attribute_invalid_type**: `type` must be static on `<input>` with two-way binding
+- **attribute_unquoted_sequence**: Attribute values with `{...}` must be quoted unless only containing the expression
+
+## Bindings
+
+- **bind_group_invalid_expression**: `bind:group` only accepts Identifier or MemberExpression
+- **bind_invalid_expression**: Can only bind to Identifier, MemberExpression, or `{get, set}` pair
+- **bind_invalid_value**: Can only bind to state or props
+
+### Each Block Binding (Runes Mode)
+
+**each_item_invalid_assignment**: Cannot reassign/bind to each block argument in runes mode.
+
+```svelte
+<!-- ❌ Legacy (not allowed in runes) -->
+{#each array as entry}
+  <button onclick={() => entry = 4}>change</button>
+  <input bind:value={entry}>
+{/each}
+
+<!-- ✅ Runes mode -->
+<script>
+  let array = $state([1, 2, 3]);
+</script>
+
+{#each array as entry, i}
+  <button onclick={() => array[i] = 4}>change</button>
+  <input bind:value={array[i]}>
+{/each}
+```
+
+## Blocks
+
+- **block_invalid_elseif**: Use `else if`, not `elseif`
+- **block_unclosed**: Block was left open
+- **block_unexpected_close**: Unexpected block closing tag
+
+## {@const} Tag
+
+- **const_tag_invalid_placement**: `{@const}` must be immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`
+
+**const_tag_invalid_reference**: `{@const}` not available across snippet boundaries
+
+```svelte
+<!-- ❌ Error -->
+<svelte:boundary>
+  {@const foo = 'bar'}
+  {#snippet failed()}
+    {foo} <!-- Not available here -->
+  {/snippet}
+</svelte:boundary>
+
+<!-- Equivalent to: -->
+<svelte:boundary>
+  {#snippet children()}
+    {@const foo = 'bar'}
+  {/snippet}
+  {#snippet failed()}
+    {foo} <!-- foo is in different snippet -->
+  {/snippet}
+</svelte:boundary>
+```
+
+## CSS
+
+- **css_global_block_invalid_list**: Cannot mix `:global` with scoped selectors in same list
+
+```css
+/* ❌ Invalid */
+:global, x {
+  y { color: red; }
+}
+
+/* ✅ Split into two */
+:global {
+  y { color: red; }
+}
+x y {
+  color: red; }
+```
+
+- **css_global_invalid_placement**: `:global(...)` must be at start or end of selector, not middle
+- **css_type_selector_invalid_placement**: `:global(...)` cannot be followed by type selector
+
+## Runes
+
+### $state
+
+**state_invalid_placement**: `$state()` only valid as:
+- Variable declaration initializer
+- Class field declaration  
+- First assignment to class field in constructor
+
+**state_field_duplicate**: Cannot declare same state field twice
+
+```js
+class Counter {
+  count = $state(0); // Declaration in class body
+}
+
+// OR
+
+class Counter {
+  constructor() {
+    this.count = $state(0); // Declaration in constructor
+  }
+}
+```
+
+### $derived
+
+**derived_invalid_export**: Cannot export derived state. Export a function returning its value instead.
+
+### $effect
+
+**effect_invalid_placement**: `$effect()` can only be used as an expression statement
+
+### $props
+
+- **props_invalid_placement**: `$props()` only at top level as variable declaration initializer
+- **props_invalid_identifier**: `$props()` requires object destructuring pattern
+- **props_invalid_pattern**: No nested properties or computed keys in `$props()`
+- **props_duplicate**: Cannot use `$props()` more than once
+
+### $bindable
+
+**bindable_invalid_location**: `$bindable()` only inside `$props()` declaration
+
+### General Rune Errors
+
+- **rune_invalid_usage**: Cannot use runes in non-runes mode
+- **rune_missing_parentheses**: Runes require parentheses
+- **dollar_prefix_invalid**: `$` prefix reserved, cannot use for variables/imports
+
+## Legacy Mode Restrictions
+
+- **legacy_export_invalid**: Cannot use `export let` in runes mode — use `$props()`
+- **legacy_reactive_statement_invalid**: `$:` not allowed in runes mode — use `$derived` or `$effect`
+- **legacy_props_invalid**: Cannot use `$$props` in runes mode
+- **legacy_rest_props_invalid**: Cannot use `$$restProps` in runes mode
+
+## Event Handlers
+
+- **mixed_event_handler_syntaxes**: Don't mix `on:name` and `onname` syntaxes
+- **event_handler_invalid_component_modifier**: Only `once` modifier valid on components
+
+## Snippets
+
+**snippet_invalid_export**: Exported snippet can only reference `<script module>` declarations or other exportable snippets
+
+```svelte
+<!-- ❌ Error -->
+<script module>
+  export { greeting };
+</script>
+<script>
+  let message = 'hello';
+</script>
+{#snippet greeting(name)}
+  <p>{message} {name}!</p> <!-- references non-module script -->
+{/snippet}
+```
+
+- **snippet_conflict**: Cannot use explicit children snippet with implicit children content
+- **slot_snippet_conflict**: Cannot mix `<slot>` and `{@render ...}` in same component
+- **snippet_parameter_assignment**: Cannot reassign/bind to snippet parameter
+
+## Special Elements
+
+### `<svelte:component>`
+- **svelte_component_missing_this**: Requires `this` attribute
+
+### `<svelte:element>`
+- **svelte_element_missing_this**: Requires `this` attribute with value
+
+### `<svelte:boundary>`
+- **svelte_boundary_invalid_attribute**: Valid attributes: `onerror`, `failed`
+
+### `<svelte:options>`
+- **svelte_options_deprecated_tag**: Use `customElement` instead of `tag`
+- **svelte_options_invalid_customelement**: Must be string or object: `{ tag?: string; shadow?: "open" | "none"; props?: {...} }`
+
+### `<svelte:self>`
+- **svelte_self_invalid_placement**: Only inside `{#if}`, `{#each}`, `{#snippet}` blocks or slots
+
+## HTML Validation
+
+**node_invalid_placement**: Browser will repair invalid HTML, breaking Svelte assumptions
+
+Examples:
+- `<p><div>...</div></p>` → `<p></p><div>...</div><p></p>`
+- `<option><div>...</div></option>` → `<option>...</option>`
+- `<table><tr>...</tr></table>` → `<table><tbody><tr>...</tr></tbody></table>`
+
+## Stores
+
+- **store_invalid_subscription_module**: Cannot reference store value outside `.svelte` files
+- **store_invalid_scoped_subscription**: Cannot subscribe to stores not declared at component top level
+
+## Miscellaneous
+
+- **void_element_invalid_content**: Void elements cannot have children/closing tags
+- **textarea_invalid_content**: `<textarea>` can have value attribute OR child content, not both
+- **import_svelte_internal_forbidden**: `svelte/internal/*` imports forbidden
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/compiler-warnings.md b/packages/mcp-server/summaries/distilled/svelte/compiler-warnings.md
new file mode 100644
index 00000000..a220fb1d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/compiler-warnings.md
@@ -0,0 +1,252 @@
+# Svelte Warnings
+
+## Disabling Warnings
+
+Use `<!-- svelte-ignore <code> -->` above the line causing the warning:
+
+```svelte
+<!-- svelte-ignore a11y_autofocus -->
+<input autofocus />
+```
+
+Multiple rules (comma-separated) with optional note:
+
+```svelte
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->
+<div onclick>...</div>
+```
+
+## Accessibility (a11y)
+
+### a11y_accesskey
+Avoid `accesskey` - creates accessibility complications.
+
+### a11y_aria_activedescendant_has_tabindex
+Elements with `aria-activedescendant` must have `tabindex`.
+
+### a11y_aria_attributes
+Reserved elements (`meta`, `html`, `script`, `style`) cannot have `aria-*` attributes.
+
+### a11y_autofocus
+Avoid `autofocus` - causes usability issues.
+
+### a11y_click_events_have_key_events
+Visible, non-interactive elements with `onclick` need keyboard handler (`onkeyup`/`onkeydown`) and `tabindex`. Consider using `<button>` or `<a>` instead.
+
+```svelte
+<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. -->
+<div onclick={() => {}}></div>
+```
+
+### a11y_distracting_elements
+Avoid `<marquee>` and `<blink>`.
+
+### a11y_figcaption_index / a11y_figcaption_parent
+`<figcaption>` must be first/last child and immediate child of `<figure>`.
+
+### a11y_hidden
+Don't hide important elements (headings, etc.) with `aria-hidden`.
+
+### a11y_img_redundant_alt
+Don't use "image", "photo", "picture" in alt text - screen readers already announce images.
+
+### a11y_incorrect_aria_attribute_type
+Use correct value types for ARIA attributes (e.g., `aria-hidden` needs boolean).
+
+### a11y_interactive_supports_focus
+Interactive roles need `tabindex`.
+
+### a11y_invalid_attribute
+Attributes like `href` shouldn't be empty, `'#'`, or `javascript:`.
+
+### a11y_label_has_associated_control
+Labels need associated control (wrap input or use `for` attribute).
+
+### a11y_media_has_caption
+`<video>` needs `<track kind="captions">` (unless `muted`).
+
+### a11y_misplaced_role
+Reserved elements (`meta`, `html`, `script`, `style`) cannot have `role`.
+
+### a11y_misplaced_scope
+`scope` attribute only for `<th>` elements.
+
+### a11y_missing_attribute
+Required attributes:
+- `<a>`: `href`
+- `<area>`: `alt`, `aria-label`, or `aria-labelledby`
+- `<html>`: `lang`
+- `<iframe>`: `title`
+- `<img>`: `alt`
+- `<object>`: `title`, `aria-label`, or `aria-labelledby`
+- `<input type="image">`: `alt`, `aria-label`, or `aria-labelledby`
+
+### a11y_missing_content
+Headings and anchors need accessible content.
+
+### a11y_mouse_events_have_key_events
+`onmouseover` needs `onfocus`, `onmouseout` needs `onblur`.
+
+### a11y_no_abstract_role
+Don't use abstract ARIA roles.
+
+### a11y_no_interactive_element_to_noninteractive_role
+Don't convert interactive elements (e.g., `<textarea>`) to non-interactive roles.
+
+### a11y_no_noninteractive_element_interactions
+Non-interactive elements (`<main>`, `<p>`, `<img>`, `<li>`, etc.) shouldn't have mouse/keyboard handlers.
+
+### a11y_no_noninteractive_element_to_interactive_role
+Don't convert non-interactive elements to interactive roles.
+
+### a11y_no_noninteractive_tabindex
+Non-interactive elements can't have non-negative `tabindex`.
+
+### a11y_no_redundant_roles
+Don't specify roles already set by browser (e.g., `<button role="button">`).
+
+### a11y_no_static_element_interactions
+Elements like `<div>` with handlers need ARIA role.
+
+### a11y_positive_tabindex
+Avoid `tabindex` values above zero.
+
+### a11y_role_has_required_aria_props
+ARIA roles need all required attributes.
+
+### a11y_role_supports_aria_props
+Only use `aria-*` attributes supported by the role.
+
+### a11y_unknown_aria_attribute
+Use valid ARIA attributes from WAI-ARIA spec.
+
+### a11y_unknown_role
+Use valid, non-abstract ARIA roles.
+
+## HTML & Attributes
+
+### attribute_avoid_is
+Avoid `is` attribute - not cross-browser compatible.
+
+### attribute_illegal_colon
+Don't use `:` in attributes (conflicts with Svelte directives).
+
+### attribute_quoted
+Quoted attributes on components/custom elements will be stringified in future versions.
+
+### bidirectional_control_characters
+Bidirectional control characters detected - can alter code direction unexpectedly.
+
+### element_implicitly_closed
+Some elements implicitly close others (e.g., `<p>` inside `<p>`). Use explicit closing tags.
+
+### element_invalid_self_closing_tag
+Use `<span></span>` not `<span />` for non-void elements. Run `npx sv migrate self-closing-tags`.
+
+### node_invalid_placement_ssr
+HTML structure violations cause browser repairs, breaking hydration.
+
+## Component & Script
+
+### bind_invalid_each_rest
+Rest operator creates new object - binding won't work with original.
+
+### component_name_lowercase
+Components must start with capital letter.
+
+### export_let_unused
+Unused export property. Use `export const` for external reference.
+
+### legacy_component_creation
+Use `mount` or `hydrate` (from 'svelte') instead of class instantiation.
+
+### script_context_deprecated
+Use `<script module>` instead of `<script context="module">`.
+
+### script_unknown_attribute
+Valid attributes: `generics`, `lang`, `module`.
+
+## Svelte 5 Specific
+
+### event_directive_deprecated
+Use `on%name%` instead of `on:%name%`.
+
+### slot_element_deprecated
+Use `{@render ...}` instead of `<slot>`.
+
+### svelte_component_deprecated
+Components are dynamic by default - `<svelte:component>` unnecessary. Use `<Component />` or intermediary variable:
+
+```svelte
+{#each items as item}
+	{@const Component = item.condition ? Y : Z}
+	<Component />
+{/each}
+```
+
+### svelte_self_deprecated
+Use self-imports instead: `import %name% from './%basename%'`.
+
+### custom_element_props_identifier
+Destructure `$props()` or specify `customElement.props` for custom elements.
+
+## State & Reactivity
+
+### non_reactive_update
+Variable updated but not declared with `$state()`. Wrap with `$state`:
+
+```svelte
+<script>
+	let reactive = $state('reactive');
+	let stale = 'stale'; // Warning: won't trigger updates
+</script>
+```
+
+### state_referenced_locally
+Passing state directly breaks reactivity link. Wrap in function for lazy evaluation:
+
+```svelte
+<script>
+	let count = $state(0);
+	// Wrong: setContext('count', count);
+	setContext('count', () => count); // Correct
+</script>
+```
+
+### reactive_declaration_invalid_placement
+Reactive declarations only at top level of instance script.
+
+### store_rune_conflict
+Rename local binding to avoid conflict with `$` rune prefix.
+
+## Options & Config
+
+### options_deprecated_accessors / options_deprecated_immutable
+No effect in runes mode.
+
+### options_removed_enable_sourcemap
+Source maps always generated.
+
+### options_removed_hydratable
+Components always hydratable.
+
+### options_renamed_ssr_dom
+Use `"client"` and `"server"` instead of `"dom"` and `"ssr"`.
+
+## CSS
+
+### css_unused_selector
+Unused selector. Use `:global` for `{@html}` or child component styles:
+
+```svelte
+<style>
+  .post :global {
+    p {...}
+  }
+</style>
+```
+
+## Performance
+
+### perf_avoid_inline_class / perf_avoid_nested_class
+Declare classes at top level scope.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/context.md b/packages/mcp-server/summaries/distilled/svelte/context.md
new file mode 100644
index 00000000..dd5eaf18
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/context.md
@@ -0,0 +1,107 @@
+# Context
+
+Context allows components to access values from parent components without prop-drilling.
+
+## Basic Usage
+
+Parent sets context with `setContext(key, value)`:
+
+```svelte
+<!--- file: Parent.svelte --->
+<script>
+	import { setContext } from 'svelte';
+
+	setContext('my-context', 'hello from Parent.svelte');
+</script>
+```
+
+Child retrieves with `getContext`:
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	import { getContext } from 'svelte';
+
+	const message = getContext('my-context');
+</script>
+
+<h1>{message}, inside Child.svelte</h1>
+```
+
+Key and value can be any JavaScript value.
+
+**Available functions:** `setContext`, `getContext`, `hasContext`, `getAllContexts`
+
+## Context with Reactive State
+
+Store reactive state in context:
+
+```svelte
+<script>
+	import { setContext } from 'svelte';
+	import Child from './Child.svelte';
+
+	let counter = $state({
+		count: 0
+	});
+
+	setContext('counter', counter);
+</script>
+
+<button onclick={() => counter.count += 1}>
+	increment
+</button>
+
+<Child />
+<Child />
+<Child />
+```
+
+**Gotcha:** Mutate properties, don't reassign:
+
+```svelte
+<!-- ❌ Wrong - breaks the link -->
+<button onclick={() => counter = { count: 0 }}>
+	reset
+</button>
+
+<!-- ✅ Correct -->
+<button onclick={() => counter.count = 0}>
+	reset
+</button>
+```
+
+## Type-Safe Context Pattern
+
+Wrap context calls in helper functions:
+
+```js
+/// file: context.js
+import { getContext, setContext } from 'svelte';
+
+const key = {};
+
+/** @param {User} user */
+export function setUserContext(user) {
+	setContext(key, user);
+}
+
+export function getUserContext() {
+	return /** @type {User} */ (getContext(key));
+}
+```
+
+## Context vs Global State
+
+Global state modules work but have SSR risks:
+
+```js
+/// file: state.svelte.js
+export const myGlobalState = $state({
+	user: {
+		// ...
+	}
+});
+```
+
+**Problem:** Mutating during SSR can leak data between requests. Context is request-scoped and solves this.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/custom-elements.md b/packages/mcp-server/summaries/distilled/svelte/custom-elements.md
new file mode 100644
index 00000000..3c40bf60
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/custom-elements.md
@@ -0,0 +1,112 @@
+# Custom Elements (Web Components)
+
+Compile Svelte components to custom elements using `customElement: true` compiler option. Specify tag name with `<svelte:options>`. Access host element via `$host` rune.
+
+```svelte
+<svelte:options customElement="my-element" />
+
+<script>
+	let { name = 'world' } = $props();
+</script>
+
+<h1>Hello {name}!</h1>
+<slot />
+```
+
+## Defining Elements
+
+Omit tag name for inner components. Define later using static `element` property:
+
+```js
+// @noErrors
+import MyElement from './MyElement.svelte';
+
+customElements.define('my-element', MyElement.element);
+```
+
+## Usage
+
+Use as regular DOM elements. Props exposed as DOM properties and attributes:
+
+```js
+// @noErrors
+const el = document.querySelector('my-element');
+console.log(el.name);
+el.name = 'everybody';
+```
+
+**Important:** Must explicitly list all props. `let props = $props()` without declaring props in component options won't expose them on DOM element.
+
+## Lifecycle
+
+- Component created in next tick after `connectedCallback`
+- Properties assigned before insertion are saved and applied on creation
+- Exported functions only available after mount (workaround: use `extend` option)
+- Shadow DOM updates in next tick (batched)
+- Component destroyed in next tick after `disconnectedCallback`
+
+## Component Options
+
+Configure via object in `<svelte:options customElement={{...}}>`:
+
+- **`tag`**: Custom element name
+- **`shadow`**: Set to `"none"` to skip shadow root (no style encapsulation, no slots)
+- **`props`**: Configure prop behavior:
+  - `attribute`: Custom attribute name (default: lowercase prop name)
+  - `reflect`: Reflect prop changes to DOM (default: false)
+  - `type`: `'String' | 'Boolean' | 'Number' | 'Array' | 'Object'` (default: String)
+- **`extend`**: Function to extend custom element class
+
+```svelte
+<svelte:options
+	customElement={{
+		tag: 'custom-element',
+		shadow: 'none',
+		props: {
+			name: { reflect: true, type: 'Number', attribute: 'element-index' }
+		},
+		extend: (customElementConstructor) => {
+			// Extend the class so we can let it participate in HTML forms
+			return class extends customElementConstructor {
+				static formAssociated = true;
+
+				constructor() {
+					super();
+					this.attachedInternals = this.attachInternals();
+				}
+
+				// Add the function here, not below in the component so that
+				// it's always available, not just when the inner Svelte component
+				// is mounted
+				randomIndex() {
+					this.elementIndex = Math.random();
+				}
+			};
+		}
+	}}
+/>
+
+<script>
+	let { elementIndex, attachedInternals } = $props();
+	// ...
+	function check() {
+		attachedInternals.checkValidity();
+	}
+</script>
+
+...
+```
+
+> **Note:** TypeScript in `extend` requires `lang="ts"` and only [erasable syntax](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly).
+
+## Caveats
+
+- Styles are **encapsulated** (unless `shadow: "none"`). Global styles and `:global()` don't apply
+- Styles inlined as JavaScript, not separate CSS file
+- Not suitable for SSR (shadow DOM invisible until JS loads)
+- Slotted content renders eagerly (always created, even in `{#if}` blocks)
+- `<slot>` in `{#each}` doesn't render content multiple times
+- `let:` directive has no effect
+- Polyfills needed for older browsers
+- Context API doesn't work across custom elements (only within)
+- **Don't use props/attributes starting with `on`** - interpreted as event listeners
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/custom-properties.md b/packages/mcp-server/summaries/distilled/svelte/custom-properties.md
new file mode 100644
index 00000000..3d9a82d4
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/custom-properties.md
@@ -0,0 +1,55 @@
+# CSS Custom Properties
+
+Pass CSS custom properties (static or dynamic) to components:
+
+```svelte
+<Slider
+	bind:value
+	min={0}
+	max={100}
+	--track-color="black"
+	--thumb-color="rgb({r} {g} {b})"
+/>
+```
+
+**Desugars to:**
+
+```svelte
+<svelte-css-wrapper style="display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})">
+	<Slider
+		bind:value
+		min={0}
+		max={100}
+	/>
+</svelte-css-wrapper>
+```
+
+For SVG elements, uses `<g>` instead:
+
+```svelte
+<g style="--track-color: black; --thumb-color: rgb({r} {g} {b})">
+	<Slider
+		bind:value
+		min={0}
+		max={100}
+	/>
+</g>
+```
+
+**Inside component, use `var()` with fallbacks:**
+
+```svelte
+<style>
+	.track {
+		background: var(--track-color, #aaa);
+	}
+
+	.thumb {
+		background: var(--thumb-color, blue);
+	}
+</style>
+```
+
+Properties don't need to be on the component directly—they inherit from parent elements. Common pattern: define on `:root` in global stylesheet.
+
+**Gotcha:** Wrapper element affects CSS selectors using `>` combinator.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/each.md b/packages/mcp-server/summaries/distilled/svelte/each.md
new file mode 100644
index 00000000..3363b4d9
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/each.md
@@ -0,0 +1,96 @@
+# {#each} blocks
+
+## Basic syntax
+
+```svelte
+{#each expression as name}...{/each}
+{#each expression as name, index}...{/each}
+```
+
+Iterates over arrays, array-like objects (with `length`), or iterables (`Map`, `Set`, anything usable with `Array.from`).
+
+```svelte
+<ul>
+	{#each items as item}
+		<li>{item.name} x {item.qty}</li>
+	{/each}
+</ul>
+```
+
+With index:
+
+```svelte
+{#each items as item, i}
+	<li>{i + 1}: {item.name} x {item.qty}</li>
+{/each}
+```
+
+## Keyed each blocks
+
+```svelte
+{#each expression as name (key)}...{/each}
+{#each expression as name, index (key)}...{/each}
+```
+
+Keys uniquely identify items. Svelte uses them to intelligently insert/move/delete items instead of updating in place. Use strings or numbers for keys.
+
+```svelte
+{#each items as item (item.id)}
+	<li>{item.name} x {item.qty}</li>
+{/each}
+
+{#each items as item, i (item.id)}
+	<li>{i + 1}: {item.name} x {item.qty}</li>
+{/each}
+```
+
+Destructuring and rest patterns work:
+
+```svelte
+{#each items as { id, name, qty }, i (id)}
+	<li>{i + 1}: {name} x {qty}</li>
+{/each}
+
+{#each objects as { id, ...rest }}
+	<li><span>{id}</span><MyComponent {...rest} /></li>
+{/each}
+
+{#each items as [id, ...rest]}
+	<li><span>{id}</span><MyComponent values={rest} /></li>
+{/each}
+```
+
+## Without an item
+
+```svelte
+{#each expression}...{/each}
+{#each expression, index}...{/each}
+```
+
+Render something `n` times without binding items:
+
+```svelte
+<div class="chess-board">
+	{#each { length: 8 }, rank}
+		{#each { length: 8 }, file}
+			<div class:black={(rank + file) % 2 === 1}></div>
+		{/each}
+	{/each}
+</div>
+```
+
+## {:else} clause
+
+```svelte
+{#each expression as name}...{:else}...{/each}
+```
+
+Renders when list is empty:
+
+```svelte
+{#each todos as todo}
+	<p>{todo.text}</p>
+{:else}
+	<p>No tasks today!</p>
+{/each}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/faq.md b/packages/mcp-server/summaries/distilled/svelte/faq.md
new file mode 100644
index 00000000..ab13dabc
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/faq.md
@@ -0,0 +1,88 @@
+# Svelte FAQ
+
+## Getting Started
+- Start with the interactive [tutorial](/tutorial) - 5-10 minutes to get running, 1.5 hours for full tutorial
+- [Reference docs](/docs/svelte) for syntax questions
+
+## Support
+- **Stack Overflow**: Code-level questions, tagged [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3)
+- **Community**: [Discord](/chat), [Reddit](https://www.reddit.com/r/sveltejs/)
+- **Resources**: [Svelte Society books/videos](https://sveltesociety.dev/resources)
+
+## Tooling
+
+**VS Code**: [Official extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
+
+**Formatting**: [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte)
+
+**Documentation**: Use JSDoc comments for components:
+
+````svelte
+<script>
+	/** What should we call the user? */
+	export let name = 'world';
+</script>
+
+<!--
+@component
+Here's some documentation for this component.
+It will show up on hover.
+
+- You can use markdown here.
+- You can also use code blocks here.
+- Usage:
+  ```svelte
+  <main name="Arethra">
+  ```
+-->
+<main>
+	<h1>
+		Hello, {name}
+	</h1>
+</main>
+````
+
+Note: `@component` is required in HTML comments.
+
+## Testing
+
+Three test types:
+
+1. **Unit Tests**: Business logic in isolation. Use [Vitest](https://vitest.dev/) or other test runners.
+2. **Component Tests**: Mount/interact with components. Use Vitest + jsdom, [Playwright](https://playwright.dev/docs/test-components), or [Cypress](https://www.cypress.io/).
+3. **E2E Tests**: Full application testing. Use [Playwright](https://playwright.dev/) or alternatives.
+
+Resources:
+- [Svelte testing docs](/docs/svelte/testing)
+- [Vitest setup via CLI](/docs/cli/vitest)
+- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
+
+## Routing
+**Official**: [SvelteKit](/docs/kit) - filesystem router with SSR and HMR
+
+**Alternatives**: See [packages page](/packages#routing)
+
+## Mobile Apps
+- Use [SvelteKit SPA](https://kit.svelte.dev/docs/single-page-apps) with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte)
+- Custom renderer support for Svelte 5 [in progress](https://github.com/sveltejs/svelte/issues/15470)
+- Svelte Native not currently supported in Svelte 5
+
+## UI Components
+See [component libraries](/packages#component-libraries) and [packages page](/packages)
+
+## Styling Gotchas
+**Unused styles are removed by design.** Svelte scopes styles by adding unique classes. If the compiler can't identify elements at compile time:
+
+- Use `:global(...)` for global styles
+- Use partial global selectors: `.foo :global(.bar) { ... }` styles `.bar` elements within component's `.foo` elements
+
+## HMR
+Use [SvelteKit](/docs/kit) (built on [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr))
+
+Community plugins: [rollup](https://github.com/rixo/rollup-plugin-svelte-hot), [webpack](https://github.com/sveltejs/svelte-loader)
+
+## Scaling
+See [this issue](https://github.com/sveltejs/svelte/issues/2546)
+
+## Svelte v2
+[Documentation available](https://v2.svelte.dev/guide) but no new features
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/getting-started.md b/packages/mcp-server/summaries/distilled/svelte/getting-started.md
new file mode 100644
index 00000000..41d1aa2a
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/getting-started.md
@@ -0,0 +1,33 @@
+# Getting Started
+
+## SvelteKit (Recommended)
+
+Official framework powered by Vite. Create a project:
+
+```sh
+npx sv create myapp
+cd myapp
+npm install
+npm run dev
+```
+
+## Alternatives
+
+**Vite standalone:**
+```sh
+npm create vite@latest
+```
+Select `svelte` option. Generates HTML/JS/CSS in `dist`. You'll likely need a [routing library](/packages#routing).
+
+**Other bundlers:** [Plugins available](/packages#bundler-plugins), but Vite recommended.
+
+## Tooling
+
+- [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
+- [Other editor integrations](https://sveltesociety.dev/resources#editor-support)
+- CLI checking: `sv check`
+
+## Help
+
+- [Discord](/chat)
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/global-styles.md b/packages/mcp-server/summaries/distilled/svelte/global-styles.md
new file mode 100644
index 00000000..bf0b958c
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/global-styles.md
@@ -0,0 +1,59 @@
+# Global Styles
+
+## `:global(...)` modifier
+
+Apply styles to a single selector globally:
+
+```svelte
+<style>
+	:global(body) {
+		/* applies to <body> */
+		margin: 0;
+	}
+
+	div :global(strong) {
+		/* applies to all <strong> elements, in any component,
+		   that are inside <div> elements belonging
+		   to this component */
+		color: goldenrod;
+	}
+
+	p:global(.big.red) {
+		/* applies to all <p> elements belonging to this component
+		   with `class="big red"`, even if it is applied
+		   programmatically (for example by a library) */
+	}
+</style>
+```
+
+**Global keyframes:** Prepend with `-global-`, which gets removed at compile time:
+
+```svelte
+<style>
+	@keyframes -global-my-animation-name {
+		/* code goes here */
+	}
+</style>
+```
+
+## `:global {...}` block
+
+Apply styles to multiple selectors globally:
+
+```svelte
+<style>
+	:global {
+		/* applies to every <div> in your application */
+		div { ... }
+
+		/* applies to every <p> in your application */
+		p { ... }
+	}
+
+	.a :global {
+		/* applies to every `.b .c .d` element, in any component,
+		   that is inside an `.a` element in this component */
+		.b .c .d {...}
+	}
+</style>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/if.md b/packages/mcp-server/summaries/distilled/svelte/if.md
new file mode 100644
index 00000000..6e67652c
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/if.md
@@ -0,0 +1,33 @@
+# Conditional Rendering
+
+## Syntax
+
+```svelte
+{#if expression}...{/if}
+{#if expression}...{:else if expression}...{/if}
+{#if expression}...{:else}...{/if}
+```
+
+## Usage
+
+Basic conditional:
+
+```svelte
+{#if answer === 42}
+	<p>what was the question?</p>
+{/if}
+```
+
+Multiple conditions with `{:else if}` and optional `{:else}`:
+
+```svelte
+{#if porridge.temperature > 100}
+	<p>too hot!</p>
+{:else if 80 > porridge.temperature}
+	<p>too cold!</p>
+{:else}
+	<p>just right!</p>
+{/if}
+```
+
+**Note:** Blocks can wrap elements or text within elements.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/imperative-component-api.md b/packages/mcp-server/summaries/distilled/svelte/imperative-component-api.md
new file mode 100644
index 00000000..e972070d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/imperative-component-api.md
@@ -0,0 +1,74 @@
+# Imperative Component API
+
+Root components are created imperatively. Client components mount to elements; server components render to HTML strings.
+
+## `mount`
+
+Instantiates and mounts a component to a target element:
+
+```js
+// @errors: 2322
+import { mount } from 'svelte';
+import App from './App.svelte';
+
+const app = mount(App, {
+	target: document.querySelector('#app'),
+	props: { some: 'property' }
+});
+```
+
+**Key differences from Svelte 4:**
+- Effects (including `onMount` and actions) don't run during `mount`
+- Use `flushSync()` to force pending effects to run (e.g., in tests)
+
+Can mount multiple components per page or dynamically within your app.
+
+## `unmount`
+
+Unmounts a component created with `mount` or `hydrate`:
+
+```js
+import { mount, unmount } from 'svelte';
+import App from './App.svelte';
+
+const app = mount(App, { target: document.body });
+
+// later
+unmount(app, { outro: true });
+```
+
+- `options.outro: true` plays transitions before removal
+- Returns `Promise` that resolves after transitions (if `outro: true`) or immediately
+
+## `render`
+
+Server-only (requires `server` compile option). Returns `body` and `head` HTML strings:
+
+```js
+// @errors: 2724 2305 2307
+import { render } from 'svelte/server';
+import App from './App.svelte';
+
+const result = render(App, {
+	props: { some: 'property' }
+});
+result.body; // HTML for somewhere in this <body> tag
+result.head; // HTML for somewhere in this <head> tag
+```
+
+## `hydrate`
+
+Like `mount`, but reuses SSR-rendered HTML and makes it interactive:
+
+```js
+// @errors: 2322
+import { hydrate } from 'svelte';
+import App from './App.svelte';
+
+const app = hydrate(App, {
+	target: document.querySelector('#app'),
+	props: { some: 'property' }
+});
+```
+
+Effects don't run during `hydrate` — use `flushSync()` immediately after if needed.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/in-and-out.md b/packages/mcp-server/summaries/distilled/svelte/in-and-out.md
new file mode 100644
index 00000000..8035786f
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/in-and-out.md
@@ -0,0 +1,22 @@
+# `in:` and `out:` Directives
+
+Separate directives for enter/exit transitions. Unlike `transition:`, these are **not bidirectional** — `in` and `out` play simultaneously if block is toggled during transition.
+
+```svelte
+<script>
+  import { fade, fly } from 'svelte/transition';
+  
+  let visible = $state(false);
+</script>
+
+<label>
+  <input type="checkbox" bind:checked={visible}>
+  visible
+</label>
+
+{#if visible}
+	<div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>
+{/if}
+```
+
+**Key difference**: If `out` transition is aborted, transitions restart from scratch (no reversal).
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/key.md b/packages/mcp-server/summaries/distilled/svelte/key.md
new file mode 100644
index 00000000..f786c55c
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/key.md
@@ -0,0 +1,22 @@
+# {#key} Block
+
+**Syntax:**
+```svelte
+{#key expression}...{/key}
+```
+
+Destroys and recreates contents when expression changes.
+
+**Reinstantiate components:**
+```svelte
+{#key value}
+	<Component />
+{/key}
+```
+
+**Replay transitions on value change:**
+```svelte
+{#key value}
+	<div transition:fade>{value}</div>
+{/key}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-$$props-and-$$restProps.md b/packages/mcp-server/summaries/distilled/svelte/legacy-$$props-and-$$restProps.md
new file mode 100644
index 00000000..e80d49c9
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-$$props-and-$$restProps.md
@@ -0,0 +1,30 @@
+# Legacy Props Access
+
+## `$$props` and `$$restProps`
+
+In **legacy mode** (not runes mode), use these special variables to access props:
+
+- **`$$props`** - all props passed to component, including undeclared ones
+- **`$$restProps`** - all props except those declared with `export`
+
+### Example
+
+```svelte
+<script>
+	export let variant;
+</script>
+
+<button {...$$restProps} class="variant-{variant} {$$props.class ?? ''}">
+	click me
+</button>
+
+<style>
+	.variant-danger {
+		background: red;
+	}
+</style>
+```
+
+**Note:** In Svelte 3/4, `$$props` and `$$restProps` have performance cost. Use only when needed.
+
+**Runes mode:** Use [`$props`]($props) rune instead.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-$$slots.md b/packages/mcp-server/summaries/distilled/svelte/legacy-$$slots.md
new file mode 100644
index 00000000..39349320
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-$$slots.md
@@ -0,0 +1,25 @@
+# $$slots (Legacy Mode)
+
+In legacy mode, use `$$slots` object to check if slot content was provided. Keys are slot names.
+
+```svelte
+<!--- file: Card.svelte --->
+<div>
+	<slot name="title" />
+	{#if $$slots.description}
+		<!-- This <hr> and slot will render only if `slot="description"` is provided. -->
+		<hr />
+		<slot name="description" />
+	{/if}
+</div>
+```
+
+```svelte
+<!--- file: App.svelte --->
+<Card>
+	<h1 slot="title">Blog Post Title</h1>
+	<!-- No slot named "description" was provided so the optional slot will not be rendered. -->
+</Card>
+```
+
+**Note:** In runes mode, use snippets as props instead.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-component-api.md b/packages/mcp-server/summaries/distilled/svelte/legacy-component-api.md
new file mode 100644
index 00000000..d513a4f4
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-component-api.md
@@ -0,0 +1,108 @@
+# Legacy Component API (Svelte 3/4)
+
+> **Note:** This does NOT apply to Svelte 5 components or legacy mode in Svelte 5 apps.
+
+## Creating a Component
+
+```ts
+const component = new Component(options);
+```
+
+**Options:**
+
+| option    | default     | description                                                                                          |
+| --------- | ----------- | ---------------------------------------------------------------------------------------------------- |
+| `target`  | **required**| `HTMLElement` or `ShadowRoot` to render to                                                           |
+| `anchor`  | `null`      | Child of `target` to render before                                                                   |
+| `props`   | `{}`        | Properties to supply to component                                                                    |
+| `context` | `new Map()` | Root-level context key-value pairs                                                                   |
+| `hydrate` | `false`     | Upgrade existing DOM instead of creating new (requires `hydratable: true` compile option)            |
+| `intro`   | `false`     | Play transitions on initial render                                                                   |
+
+```ts
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: { answer: 42 }
+});
+```
+
+**Svelte 5:** Use [`mount`](svelte#mount) instead
+
+## `$set`
+
+```ts
+component.$set(props);
+```
+
+Programmatically set props. Schedules update for next microtask (async).
+
+```ts
+component.$set({ answer: 42 });
+```
+
+**Svelte 5:** Use `$state` for props:
+```js
+let props = $state({ answer: 42 });
+const component = mount(Component, { props });
+props.answer = 24;
+```
+
+## `$on`
+
+```ts
+component.$on(ev, callback);
+```
+
+Listen to component events. Returns function to remove listener.
+
+```ts
+const off = component.$on('selected', (event) => {
+	console.log(event.detail.selection);
+});
+off();
+```
+
+**Svelte 5:** Use callback props instead
+
+## `$destroy`
+
+```js
+component.$destroy();
+```
+
+Remove component from DOM and trigger `onDestroy` handlers.
+
+**Svelte 5:** Use [`unmount`](svelte#unmount) instead
+
+## Component Props (accessors)
+
+```js
+component.prop;
+component.prop = value;
+```
+
+With `accessors: true` compile option, get/set props directly. Setting causes **synchronous** update (unlike `$set`).
+
+**Svelte 5:** Export properties to make them accessible
+
+## Server-Side API
+
+```js
+const result = Component.render(...)
+```
+
+Returns object with `head`, `html`, `css` properties.
+
+```js
+require('svelte/register');
+const App = require('./App.svelte').default;
+
+const { head, html, css } = App.render(
+	{ answer: 42 },
+	{ context: new Map([['context-key', 'context-value']]) }
+);
+```
+
+**Svelte 5:** Use [`render`](svelte-server#render) instead
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-export-let.md b/packages/mcp-server/summaries/distilled/svelte/legacy-export-let.md
new file mode 100644
index 00000000..b24c4b86
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-export-let.md
@@ -0,0 +1,67 @@
+# Legacy Props
+
+## Declaring Props
+
+In legacy mode (non-runes), use `export` to declare props:
+
+```svelte
+<script>
+	export let foo;
+	export let bar = 'default value';
+
+	// Props are immediately available
+	console.log({ foo });
+</script>
+```
+
+**Key differences from runes mode:**
+- Default values apply only when prop is `undefined` at creation
+- If parent changes prop from defined → `undefined`, it does NOT revert to default
+
+**Required props:** Props without defaults are required. Svelte warns if missing. To silence warning:
+
+```js
+export let foo = undefined;
+```
+
+## Component Exports
+
+Exported `const`, `class`, or `function` become component API (not props):
+
+```svelte
+<!--- file: Greeter.svelte--->
+<script>
+	export function greet(name) {
+		alert(`hello ${name}!`);
+	}
+</script>
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Greeter from './Greeter.svelte';
+
+	let greeter;
+</script>
+
+<Greeter bind:this={greeter} />
+
+<button on:click={() => greeter.greet('world')}>
+	greet
+</button>
+```
+
+## Renaming Props
+
+Use separate `export` to rename props (useful for reserved words):
+
+```svelte
+<script>
+	/** @type {string} */
+	let className;
+
+	// Creates a `class` prop
+	export { className as class };
+</script>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-let.md b/packages/mcp-server/summaries/distilled/svelte/legacy-let.md
new file mode 100644
index 00000000..e7100a2b
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-let.md
@@ -0,0 +1,34 @@
+# Legacy Mode Reactivity
+
+## Auto-reactive Variables
+
+In legacy mode (non-runes), top-level component variables are automatically reactive. Reassignment/mutation triggers UI updates.
+
+```svelte
+<script>
+	let count = 0;
+</script>
+
+<button on:click={() => count += 1}>
+	clicks: {count}
+</button>
+```
+
+## Gotcha: Array Methods
+
+Array methods like `.push()` and `.splice()` don't trigger updates. Requires subsequent assignment:
+
+```svelte
+<script>
+	let numbers = [1, 2, 3, 4];
+
+	function addNumber() {
+		// this method call does not trigger an update
+		numbers.push(numbers.length + 1);
+
+		// this assignment will update anything
+		// that depends on `numbers`
+		numbers = numbers;
+	}
+</script>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-on.md b/packages/mcp-server/summaries/distilled/svelte/legacy-on.md
new file mode 100644
index 00000000..24100f2a
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-on.md
@@ -0,0 +1,110 @@
+# Event Handlers
+
+## Runes Mode vs Legacy Mode
+
+**Runes mode**: Event handlers are just attributes/props.
+
+**Legacy mode**: Use `on:` directive.
+
+## Basic Usage
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	let count = 0;
+
+	/** @param {MouseEvent} event */
+	function handleClick(event) {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	count: {count}
+</button>
+```
+
+Inline handlers (no performance penalty):
+
+```svelte
+<button on:click={() => (count += 1)}>
+	count: {count}
+</button>
+```
+
+## Event Modifiers
+
+Add modifiers with `|` character:
+
+```svelte
+<form on:submit|preventDefault={handleSubmit}>
+	<!-- the `submit` event's default is prevented,
+	     so the page won't reload -->
+</form>
+```
+
+**Available modifiers:**
+- `preventDefault` — calls `event.preventDefault()`
+- `stopPropagation` — prevents event reaching next element
+- `stopImmediatePropagation` — prevents other listeners of same event
+- `passive` — improves scrolling performance (auto-added when safe)
+- `nonpassive` — explicitly set `passive: false`
+- `capture` — fires during capture phase
+- `once` — remove handler after first run
+- `self` — only trigger if `event.target` is the element itself
+- `trusted` — only trigger if `event.isTrusted` is `true`
+
+Chain modifiers: `on:click|once|capture={...}`
+
+## Event Forwarding
+
+Empty `on:` directive forwards the event:
+
+```svelte
+<button on:click>
+	The component itself will emit the click event
+</button>
+```
+
+## Multiple Listeners
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	let count = 0;
+
+	function increment() {
+		count += 1;
+	}
+
+	/** @param {MouseEvent} event */
+	function log(event) {
+		console.log(event);
+	}
+</script>
+
+<button on:click={increment} on:click={log}>
+	clicks: {count}
+</button>
+```
+
+## Component Events (Legacy - Deprecated)
+
+**Note**: Use callback props instead for Svelte 5. `createEventDispatcher` is deprecated.
+
+**Callback props approach (recommended):**
+
+```svelte
+<!--- file: Stepper.svelte --->
+<script>
+	export let decrement;
+	export let increment;
+</script>
+
+<button on:click={decrement}>decrement</button>
+<button on:click={increment}>increment</button>
+```
+
+**Key points:**
+- Component events don't bubble (only immediate children)
+- Only `once` modifier valid on component events
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-overview.md b/packages/mcp-server/summaries/distilled/svelte/legacy-overview.md
new file mode 100644
index 00000000..cfa953cf
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-overview.md
@@ -0,0 +1,12 @@
+# Legacy Features
+
+Svelte 5 introduced **runes**, **snippets**, and **event attributes**. Svelte 3/4 features are deprecated but still supported.
+
+## Modes
+
+- **Legacy mode**: Svelte 3/4 syntax (default for components without runes)
+- **Runes mode**: Svelte 5 syntax (enabled by using runes or `runes: true` compiler option)
+
+Once in runes mode, legacy features are unavailable.
+
+For Svelte 3/4 docs: [v4.svelte.dev](https://v4.svelte.dev)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-reactive-assignments.md b/packages/mcp-server/summaries/distilled/svelte/legacy-reactive-assignments.md
new file mode 100644
index 00000000..8d7eca7d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-reactive-assignments.md
@@ -0,0 +1,90 @@
+# Reactive Statements (Legacy Mode)
+
+> **Note:** In runes mode, use [`$derived`]($derived) and [`$effect`]($effect) instead.
+
+## Basic Usage
+
+In legacy mode, prefix top-level statements with `$:` to make them reactive. They run after `<script>` code and before rendering, then re-run when dependencies change.
+
+```svelte
+<script>
+	let a = 1;
+	let b = 2;
+
+	// this is a 'reactive statement', and it will re-run
+	// when `a`, `b` or `sum` change
+	$: console.log(`${a} + ${b} = ${sum}`);
+
+	// this is a 'reactive assignment' — `sum` will be
+	// recalculated when `a` or `b` change. It is
+	// not necessary to declare `sum` separately
+	$: sum = a + b;
+</script>
+```
+
+Statements are ordered topologically by dependencies. `sum` calculates first despite appearing later.
+
+## Multiple Statements
+
+Use blocks for multiple statements:
+
+```js
+// @noErrors
+$: {
+	// recalculate `total` when `items` changes
+	total = 0;
+
+	for (const item of items) {
+		total += item.value;
+	}
+}
+```
+
+## Destructuring
+
+Left-hand side can be destructuring:
+
+```js
+// @noErrors
+$: ({ larry, moe, curly } = stooges);
+```
+
+## Dependencies Gotcha
+
+Dependencies are determined at **compile time** from variables referenced (not assigned) in the statement.
+
+**Won't work** - indirect reference:
+```js
+// @noErrors
+let count = 0;
+let double = () => count * 2;
+
+$: doubled = double();
+```
+
+**Won't work** - indirect dependency ordering:
+```svelte
+<script>
+	let x = 0;
+	let y = 0;
+
+	$: z = y;
+	$: setY(x);
+
+	function setY(value) {
+		y = value;
+	}
+</script>
+```
+Fix: Move `$: z = y` below `$: setY(x)`.
+
+## Browser-Only Code
+
+Reactive statements run during SSR. Wrap browser-only code:
+
+```js
+// @noErrors
+$: if (browser) {
+	document.title = title;
+}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-slots.md b/packages/mcp-server/summaries/distilled/svelte/legacy-slots.md
new file mode 100644
index 00000000..61b934e7
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-slots.md
@@ -0,0 +1,106 @@
+# Legacy Slots
+
+In Svelte 5, use [snippets](snippet) and [render tags](@render). In legacy mode, use `<slot>` elements.
+
+## Basic Usage
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Modal from './Modal.svelte';
+</script>
+
+<Modal>This is some slotted content</Modal>
+```
+
+```svelte
+<!--- file: Modal.svelte --->
+<div class="modal">
+	<slot></slot>
+</div>
+```
+
+> To render an actual `<slot>` element: `<svelte:element this={'slot'} />`
+
+## Named Slots
+
+Parent uses `slot="..."` attribute:
+
+```svelte
+<!--- file: App.svelte --->
+<Modal>
+	This is some slotted content
+
+	<div slot="buttons">
+		<button on:click={() => open = false}>
+			close
+		</button>
+	</div>
+</Modal>
+```
+
+Child uses `<slot name="...">`:
+
+```svelte
+<!--- file: Modal.svelte --->
+<div class="modal">
+	<slot></slot>
+	<hr>
+	<slot name="buttons"></slot>
+</div>
+```
+
+## Fallback Content
+
+```svelte
+<slot>
+	This will be rendered if no slotted content is provided
+</slot>
+```
+
+## Passing Data to Slots
+
+Slots pass values back to parent using props. Parent uses `let:` directive:
+
+```svelte
+<!--- file: FancyList.svelte --->
+<ul>
+	{#each items as data}
+		<li class="fancy">
+			<slot item={process(data)} />
+		</li>
+	{/each}
+</ul>
+```
+
+```svelte
+<!--- file: App.svelte --->
+<FancyList {items} let:item={processed}>
+	<div>{processed.text}</div>
+</FancyList>
+```
+
+Shorthand: `let:item` = `let:item={item}`, `<slot {item}>` = `<slot item={item}>`
+
+**Named slots with data:** `let:` goes on element with `slot` attribute:
+
+```svelte
+<!--- file: FancyList.svelte --->
+<ul>
+	{#each items as item}
+		<li class="fancy">
+			<slot name="item" item={process(data)} />
+		</li>
+	{/each}
+</ul>
+
+<slot name="footer" />
+```
+
+```svelte
+<!--- file: App.svelte --->
+<FancyList {items}>
+	<div slot="item" let:item>{item.text}</div>
+	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
+</FancyList>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-svelte-component.md b/packages/mcp-server/summaries/distilled/svelte/legacy-svelte-component.md
new file mode 100644
index 00000000..14d02315
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-svelte-component.md
@@ -0,0 +1,11 @@
+# `<svelte:component>`
+
+**Legacy mode only** - destroys and recreates component when `this` expression changes:
+
+```svelte
+<svelte:component this={MyComponent} />
+```
+
+If `this` is falsy, no component is rendered.
+
+**Svelte 5 runes mode**: Use `<MyComponent>` directly - it re-renders automatically when the component value changes. `<svelte:component>` is no longer necessary.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-svelte-fragment.md b/packages/mcp-server/summaries/distilled/svelte/legacy-svelte-fragment.md
new file mode 100644
index 00000000..a5bef08c
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-svelte-fragment.md
@@ -0,0 +1,29 @@
+# `<svelte:fragment>`
+
+Allows placing content in a named slot without a wrapper DOM element.
+
+```svelte
+<!--- file: Widget.svelte --->
+<div>
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer" />
+</div>
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget>
+	<h1 slot="header">Hello</h1>
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Widget>
+```
+
+**Note:** Obsolete in Svelte 5+ — use snippets instead (no wrapper element needed).
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/legacy-svelte-self.md b/packages/mcp-server/summaries/distilled/svelte/legacy-svelte-self.md
new file mode 100644
index 00000000..c9af81e3
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/legacy-svelte-self.md
@@ -0,0 +1,33 @@
+# `<svelte:self>`
+
+Allows a component to recursively include itself. Must be inside an `{#if}`, `{#each}` block, or slot to prevent infinite loops.
+
+```svelte
+<script>
+	export let count;
+</script>
+
+{#if count > 0}
+	<p>counting down... {count}</p>
+	<svelte:self count={count - 1} />
+{:else}
+	<p>lift-off!</p>
+{/if}
+```
+
+**Note:** Obsolete - components can now import themselves directly:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Self from './App.svelte'
+	export let count;
+</script>
+
+{#if count > 0}
+	<p>counting down... {count}</p>
+	<Self count={count - 1} />
+{:else}
+	<p>lift-off!</p>
+{/if}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/lifecycle-hooks.md b/packages/mcp-server/summaries/distilled/svelte/lifecycle-hooks.md
new file mode 100644
index 00000000..a70058b5
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/lifecycle-hooks.md
@@ -0,0 +1,128 @@
+# Component Lifecycle
+
+In Svelte 5, lifecycle = creation + destruction. Updates aren't component-level; only affected render effects react to state changes. No "before/after update" hooks exist.
+
+## `onMount`
+
+Runs callback when component mounts to DOM. Must be called during component initialization (can be in external module). **Does not run on server.**
+
+```svelte
+<script>
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		console.log('the component has mounted');
+	});
+</script>
+```
+
+**Cleanup:** Return a function to run on unmount.
+
+```svelte
+<script>
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			console.log('beep');
+		}, 1000);
+
+		return () => clearInterval(interval);
+	});
+</script>
+```
+
+> **Note:** Only works with synchronous functions. `async` functions return a `Promise`.
+
+## `onDestroy`
+
+Runs immediately before component unmounts. **Only lifecycle hook that runs server-side.**
+
+```svelte
+<script>
+	import { onDestroy } from 'svelte';
+
+	onDestroy(() => {
+		console.log('the component is being destroyed');
+	});
+</script>
+```
+
+## `tick`
+
+Returns promise that resolves after pending state changes apply (or next microtask if none).
+
+```svelte
+<script>
+	import { tick } from 'svelte';
+
+	$effect.pre(() => {
+		console.log('the component is about to update');
+		tick().then(() => {
+				console.log('the component just updated');
+		});
+	});
+</script>
+```
+
+## Deprecated: `beforeUpdate` / `afterUpdate`
+
+**Svelte 4 only** (shimmed in Svelte 5, unavailable with runes).
+
+**Use instead:**
+- `$effect.pre` instead of `beforeUpdate`
+- `$effect` instead of `afterUpdate`
+
+Runes offer granular control and only react to relevant changes.
+
+### Example: Chat autoscroll
+
+`$effect.pre` runs before DOM updates. Explicitly reference `messages` to run only when it changes (not when `theme` changes).
+
+```svelte
+<script>
+	import { tick } from 'svelte';
+
+	let theme = $state('dark');
+	let messages = $state([]);
+
+	let viewport;
+
+	$effect.pre(() => {
+		messages;
+		const autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;
+
+		if (autoscroll) {
+			tick().then(() => {
+				viewport.scrollTo(0, viewport.scrollHeight);
+			});
+		}
+	});
+
+	function handleKeydown(event) {
+		if (event.key === 'Enter') {
+			const text = event.target.value;
+			if (!text) return;
+
+			messages = [...messages, text];
+			event.target.value = '';
+		}
+	}
+
+	function toggle() {
+		theme = theme === 'dark' ? 'light' : 'dark';
+	}
+</script>
+
+<div class:dark={theme === 'dark'}>
+	<div bind:this={viewport}>
+		{#each messages as message}
+			<p>{message}</p>
+		{/each}
+	</div>
+
+	<input onkeydown={handleKeydown} />
+
+	<button onclick={toggle}> Toggle dark mode </button>
+</div>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/nested-style-elements.md b/packages/mcp-server/summaries/distilled/svelte/nested-style-elements.md
new file mode 100644
index 00000000..819d3f07
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/nested-style-elements.md
@@ -0,0 +1,24 @@
+# Component Styles
+
+## Top-level `<style>` tag
+
+- Only **one** top-level `<style>` tag allowed per component
+- Top-level styles are scoped and processed
+
+## Nested `<style>` tags
+
+- `<style>` tags can be nested inside elements or logic blocks
+- **No scoping or processing** - inserted as-is into DOM
+- Styles apply globally
+
+```svelte
+<div>
+	<style>
+		/* this style tag will be inserted as-is */
+		div {
+			/* this will apply to all `<div>` elements in the DOM */
+			color: red;
+		}
+	</style>
+</div>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/overview.md b/packages/mcp-server/summaries/distilled/svelte/overview.md
new file mode 100644
index 00000000..27a86665
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/overview.md
@@ -0,0 +1,27 @@
+# Svelte Overview
+
+Svelte is a compiler-based UI framework that transforms declarative components (HTML, CSS, JavaScript) into optimized JavaScript.
+
+## Basic Component Structure
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	function greet() {
+		alert('Welcome to Svelte!');
+	}
+</script>
+
+<button onclick={greet}>click me</button>
+
+<style>
+	button {
+		font-size: 2em;
+	}
+</style>
+```
+
+**Key Points:**
+- Components contain `<script>`, markup, and `<style>` blocks
+- Event handlers use `onclick` (no colon)
+- Use standalone or with SvelteKit for full-stack apps
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/runtime-errors.md b/packages/mcp-server/summaries/distilled/svelte/runtime-errors.md
new file mode 100644
index 00000000..72111dc3
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/runtime-errors.md
@@ -0,0 +1,179 @@
+# Client Errors
+
+## async_derived_orphan
+Cannot create `$derived(...)` with `await` outside an effect tree.
+
+`$derived` runs lazily and can be garbage collected. `$effect` runs eagerly until destroyed. Async deriveds use an effect internally, so they must be created inside another effect or effect root (like component initialization).
+
+## bind_invalid_checkbox_value
+Use `bind:checked` instead of `bind:value` with checkbox inputs.
+
+## bind_invalid_export
+Cannot use `bind:key` on component exports. Use `bind:this` instead:
+```svelte
+<Component bind:this={component} />
+<!-- then access: component.key -->
+```
+
+## bind_not_bindable
+To make a property bindable: `let { key = $bindable() } = $props()`
+
+## component_api_changed / component_api_invalid_new
+Components are no longer classes in Svelte 5. Cannot call methods or use `new` on component instances. See migration guide.
+
+## derived_references_self
+A derived value cannot reference itself recursively.
+
+## each_key_duplicate
+Keyed each block has duplicate keys.
+
+## effect_in_teardown
+`%rune%` cannot be used inside effect cleanup functions.
+
+## effect_in_unowned_derived
+Effect cannot be created inside a `$derived` that wasn't itself created inside an effect.
+
+## effect_orphan
+`%rune%` can only be used inside an effect (e.g. during component initialization).
+
+## effect_pending_outside_reaction
+`$effect.pending()` can only be called inside an effect or derived.
+
+## effect_update_depth_exceeded
+Effect reads and writes the same state, causing infinite loop:
+
+```js
+let count = $state(0);
+
+$effect(() => {
+	// reads and writes count - infinite loop
+	count += 1;
+});
+```
+
+```js
+let array = $state(['hello']);
+
+$effect(() => {
+	array.push('goodbye'); // mutates array it depends on
+});
+});
+```
+
+**Fix:** Use non-reactive values or `untrack()` to read without adding dependency. Effects that settle are fine:
+
+```js
+$effect(() => {
+	array.sort(); // OK if already sorted
+});
+```
+
+## flush_sync_in_effect
+Cannot use `flushSync()` inside an effect. Call it after state changes, not during effect execution. (Applies with `experimental.async` option)
+
+## get_abort_signal_outside_reaction
+`getAbortSignal()` can only be called inside an effect or derived.
+
+## hydration_failed
+Failed to hydrate the application.
+
+## invalid_snippet
+Use optional chaining for nullable snippets: `{@render snippet?.()}`
+
+## lifecycle_legacy_only
+`%name%(...)` cannot be used in runes mode.
+
+## props_invalid_value
+Cannot do `bind:key={undefined}` when `key` has a fallback value.
+
+## props_rest_readonly
+Rest element properties of `$props()` are readonly.
+
+## rune_outside_svelte
+Runes only available inside `.svelte` and `.svelte.js/ts` files.
+
+## set_context_after_init
+`setContext` must be called during component initialization, not in effects or after `await`. (Applies with `experimental.async` option)
+
+## state_descriptors_fixed
+Property descriptors on `$state` objects must contain `value` and be `enumerable`, `configurable`, and `writable`.
+
+## state_prototype_fixed
+Cannot set prototype of `$state` object.
+
+## state_unsafe_mutation
+Cannot update state inside `$derived(...)`, `$inspect(...)`, or template expressions.
+
+**Wrong:**
+```js
+let count = $state(0);
+let even = $state(true);
+
+let odd = $derived.by(() => {
+	even = count % 2 === 0; // mutation in derived
+	return !even;
+});
+```
+
+**Fix:** Make everything derived:
+```js
+let even = $derived(count % 2 === 0);
+let odd = $derived(!even);
+```
+
+Use `$effect` if side-effects are unavoidable.
+
+## svelte_boundary_reset_onerror
+Cannot call `reset()` synchronously in `<svelte:boundary>` `onerror`. Wait for boundary to settle:
+
+```svelte
+<svelte:boundary onerror={async (error, reset) => {
+	fixTheError();
+	await tick();
+	reset();
+}}>
+</svelte:boundary>
+```
+
+# Server Errors
+
+## await_invalid
+Encountered async work while rendering synchronously. Either `await` the result of `render()` or wrap `await` in `<svelte:boundary>` with `pending` snippet.
+
+## html_deprecated
+Use `body` instead of `html` property in server render results.
+
+## lifecycle_function_unavailable
+Methods like `mount()` unavailable on server. Don't call them during render.
+
+# Shared Errors
+
+## invalid_default_snippet
+Cannot use `{@render children(...)}` if parent uses `let:` directives. Use named snippets instead.
+
+## invalid_snippet_arguments
+Snippets should only be instantiated via `{@render ...}`.
+
+## lifecycle_outside_component
+Lifecycle methods only work during component initialization at top level:
+
+```svelte
+<script>
+    import { onMount } from 'svelte';
+
+    function handleClick() {
+        onMount(() => {}) // Wrong
+    }
+
+    onMount(() => {}) // Correct
+</script>
+```
+
+## snippet_without_render_tag
+Use `{@render snippet()}` instead of `{snippet}` to render snippet content.
+
+## store_invalid_shape
+`%name%` is not a store with a `subscribe` method.
+
+## svelte_element_invalid_this_value
+The `this` prop on `<svelte:element>` must be a string, if defined.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/runtime-warnings.md b/packages/mcp-server/summaries/distilled/svelte/runtime-warnings.md
new file mode 100644
index 00000000..c1e842b2
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/runtime-warnings.md
@@ -0,0 +1,183 @@
+# Client Warnings
+
+## assignment_value_stale
+
+Assignment to a property will evaluate to the right-hand side, not the resulting value after assignment.
+
+```svelte
+<script>
+	let object = $state({ array: null });
+
+	function add() {
+		(object.array ??= []).push(object.array.length);
+	}
+</script>
+
+<button onclick={add}>add</button>
+<p>items: {JSON.stringify(object.items)}</p>
+```
+
+The array being pushed to is `[]` on the right-hand side, but `object.array` becomes an empty state proxy. The pushed value is discarded.
+
+**Fix:** Separate into two statements:
+
+```js
+function add() {
+	object.array ??= [];
+	object.array.push(object.array.length);
+}
+```
+
+## await_reactivity_loss
+
+State read after `await` in async functions isn't tracked.
+
+```js
+async function sum() {
+	return await a + b;
+}
+
+let total = $derived(await sum());
+```
+
+`total` depends on `a` but not `b`. **Fix:** Pass values as arguments:
+
+```js
+async function sum(a, b) {
+	return await a + b;
+}
+
+let total = $derived(await sum(a, b));
+```
+
+## await_waterfall
+
+Async deriveds not read immediately after resolving create unnecessary waterfalls.
+
+```js
+let a = $derived(await one());
+let b = $derived(await two());
+```
+
+`b` waits for `a` unnecessarily. **Fix:** Create promises first:
+
+```js
+let aPromise = $derived(one());
+let bPromise = $derived(two());
+
+let a = $derived(await aPromise);
+let b = $derived(await bPromise);
+```
+
+## console_log_state
+
+Logging `$state` proxies shows the proxy, not the value.
+
+**Fix:** Use [`$inspect(...)`](/docs/svelte/$inspect) or [`$state.snapshot(...)`](/docs/svelte/$state#$state.snapshot).
+
+## hydration_attribute_changed
+
+Certain attributes (like `src` on `<img>`) keep server values during hydration to avoid refetching.
+
+**Fix:** Ensure values match between server/client, or force update:
+
+```svelte
+<script>
+	let { src } = $props();
+
+	if (typeof window !== 'undefined') {
+		const initial = src;
+		src = undefined;
+		$effect(() => {
+			src = initial;
+		});
+	}
+</script>
+
+<img {src} />
+```
+
+## hydration_html_changed
+
+`{@html ...}` values aren't repaired during hydration.
+
+**Fix:** Same pattern as `hydration_attribute_changed` above.
+
+## hydration_mismatch
+
+Initial UI doesn't match server-rendered HTML. Often caused by invalid HTML structure.
+
+## ownership_invalid_binding
+
+When passing bound props through components, all intermediate components must use `bind:`.
+
+```svelte
+<!-- GrandParent.svelte -->
+<Parent bind:value />  <!-- Not just {value} -->
+
+<!-- Parent.svelte -->
+<Child bind:value />
+```
+
+## ownership_invalid_mutation
+
+Mutating unbound props is discouraged.
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	let { person } = $props();
+</script>
+
+<input bind:value={person.name}>
+```
+
+**Fix:** Use callbacks or mark prop as [`$bindable`]($bindable).
+
+## select_multiple_invalid_value
+
+`<select multiple value={...}>` expects an array. Use `null`/`undefined` to keep selection as-is.
+
+## state_proxy_equality_mismatch
+
+`$state(...)` creates a proxy with different identity than the original value:
+
+```svelte
+<script>
+	let value = { foo: 'bar' };
+	let proxy = $state(value);
+
+	value === proxy; // always false
+</script>
+```
+
+**Fix:** Compare values that are both proxies or both non-proxies. Use `$state.raw(...)` to avoid proxies.
+
+## state_proxy_unmount
+
+Don't pass `$state` values to `unmount()`. Use `$state.raw()` if reactivity is needed.
+
+## svelte_boundary_reset_noop
+
+`<svelte:boundary>` `reset` function only works on first call.
+
+## transition_slide_display
+
+`slide` transition requires `display: block/flex/grid`. Doesn't work with `inline`, `table`, or `contents`.
+
+# Shared Warnings
+
+## dynamic_void_element_content
+
+Void elements like `<input>` cannot have content in `<svelte:element>`.
+
+## state_snapshot_uncloneable
+
+`$state.snapshot()` returns original value for uncloneable objects (like DOM elements):
+
+```js
+const object = $state({ property: 'this is cloneable', window })
+const snapshot = $state.snapshot(object);
+```
+
+`property` is cloned, `window` is not.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/scoped-styles.md b/packages/mcp-server/summaries/distilled/svelte/scoped-styles.md
new file mode 100644
index 00000000..a8fced61
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/scoped-styles.md
@@ -0,0 +1,35 @@
+# Styles
+
+Component `<style>` elements are **scoped by default** via a hash-based class (e.g. `svelte-123xyz`).
+
+```svelte
+<style>
+	p {
+		/* this will only affect <p> elements in this component */
+		color: burlywood;
+	}
+</style>
+```
+
+## Specificity
+
+Scoped selectors get **+0-1-0 specificity** from the scoping class. Component `p` selector beats global `p` selector, even if global loads later.
+
+Multiple scoping classes use `:where(.svelte-xyz123)` after the first to avoid further specificity increases.
+
+## Scoped keyframes
+
+`@keyframes` names are hashed per-component. `animation` rules automatically adjusted.
+
+```svelte
+<style>
+	.bouncy {
+		animation: bounce 10s;
+	}
+
+	/* these keyframes are only accessible inside this component */
+	@keyframes bounce {
+		/* ... */
+	}
+</style>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/snippet.md b/packages/mcp-server/summaries/distilled/svelte/snippet.md
new file mode 100644
index 00000000..7895e3ee
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/snippet.md
@@ -0,0 +1,226 @@
+# Snippets
+
+Reusable chunks of markup inside components. Alternative to duplicative code.
+
+## Syntax
+
+```svelte
+{#snippet name()}...{/snippet}
+```
+
+```svelte
+{#snippet name(param1, param2, paramN)}...{/snippet}
+```
+
+## Basic Usage
+
+```svelte
+{#snippet figure(image)}
+	<figure>
+		<img src={image.src} alt={image.caption} width={image.width} height={image.height} />
+		<figcaption>{image.caption}</figcaption>
+	</figure>
+{/snippet}
+
+{#each images as image}
+	{#if image.href}
+		<a href={image.href}>
+			{@render figure(image)}
+		</a>
+	{:else}
+		{@render figure(image)}
+	{/if}
+{/each}
+```
+
+- Arbitrary number of parameters with default values
+- Can destructure parameters
+- **Cannot** use rest parameters
+
+## Scope
+
+Snippets reference values from `<script>` or `{#each}` blocks:
+
+```svelte
+<script>
+	let { message = `it's great to see you!` } = $props();
+</script>
+
+{#snippet hello(name)}
+	<p>hello {name}! {message}!</p>
+{/snippet}
+
+{@render hello('alice')}
+{@render hello('bob')}
+```
+
+Visible to siblings and children of siblings only:
+
+```svelte
+<div>
+	{#snippet x()}
+		{#snippet y()}...{/snippet}
+		{@render y()} <!-- fine -->
+	{/snippet}
+	
+	{@render y()} <!-- error: not in scope -->
+</div>
+
+{@render x()} <!-- error: not in scope -->
+```
+
+Snippets can reference themselves (recursion):
+
+```svelte
+{#snippet countdown(n)}
+	{#if n > 0}
+		<span>{n}...</span>
+		{@render countdown(n - 1)}
+	{:else}
+		{@render blastoff()}
+	{/if}
+{/snippet}
+```
+
+## Passing to Components
+
+### Explicit props
+
+```svelte
+<script>
+	import Table from './Table.svelte';
+	const fruits = [
+		{ name: 'apples', qty: 5, price: 2 },
+		{ name: 'bananas', qty: 10, price: 1 }
+	];
+</script>
+
+{#snippet header()}
+	<th>fruit</th>
+	<th>qty</th>
+	<th>price</th>
+{/snippet}
+
+{#snippet row(d)}
+	<td>{d.name}</td>
+	<td>{d.qty}</td>
+	<td>{d.price}</td>
+{/snippet}
+
+<Table data={fruits} {header} {row} />
+```
+
+### Implicit props
+
+Snippets declared inside component tags become props:
+
+```svelte
+<Table data={fruits}>
+	{#snippet header()}
+		<th>fruit</th>
+		<th>qty</th>
+	{/snippet}
+
+	{#snippet row(d)}
+		<td>{d.name}</td>
+		<td>{d.qty}</td>
+	{/snippet}
+</Table>
+```
+
+### Implicit `children` snippet
+
+Content not in snippet declarations becomes `children`:
+
+```svelte
+<!--- file: App.svelte --->
+<Button>click me</Button>
+```
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+	let { children } = $props();
+</script>
+
+<button>{@render children()}</button>
+```
+
+> **Note:** Avoid props named `children` if you have content inside component tags
+
+## Optional Snippets
+
+Optional chaining:
+
+```svelte
+<script>
+    let { children } = $props();
+</script>
+
+{@render children?.()}
+```
+
+With fallback:
+
+```svelte
+{#if children}
+    {@render children()}
+{:else}
+    fallback content
+{/if}
+```
+
+## TypeScript
+
+```svelte
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		data: any[];
+		children: Snippet;
+		row: Snippet<[any]>;
+	}
+
+	let { data, children, row }: Props = $props();
+</script>
+```
+
+With generics:
+
+```svelte
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	let {
+		data,
+		children,
+		row
+	}: {
+		data: T[];
+		children: Snippet;
+		row: Snippet<[T]>;
+	} = $props();
+</script>
+```
+
+## Exporting Snippets
+
+Top-level snippets can be exported (Svelte 5.5+):
+
+```svelte
+<script module>
+	export { add };
+</script>
+
+{#snippet add(a, b)}
+	{a} + {b} = {a + b}
+{/snippet}
+```
+
+**Restriction:** Cannot reference non-module `<script>` declarations
+
+## Advanced
+
+- Programmatic creation: [`createRawSnippet`](svelte#createRawSnippet) API
+- Snippets replace deprecated Svelte 4 slots
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/stores.md b/packages/mcp-server/summaries/distilled/svelte/stores.md
new file mode 100644
index 00000000..8a7b005d
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/stores.md
@@ -0,0 +1,219 @@
+# Stores
+
+A store is an object that allows reactive access to a value via a store contract. The `svelte/store` module provides minimal store implementations.
+
+## `$` Prefix Syntax
+
+Access store values in components by prefixing with `$`. Svelte auto-subscribes/unsubscribes.
+
+- Store must be declared at top level (not inside `if` blocks or functions)
+- Assignments to `$`-prefixed variables call the store's `.set` method
+- Local variables must NOT have `$` prefix
+
+```svelte
+<script>
+	import { writable } from 'svelte/store';
+
+	const count = writable(0);
+	console.log($count); // logs 0
+
+	count.set(1);
+	console.log($count); // logs 1
+
+	$count = 2;
+	console.log($count); // logs 2
+</script>
+```
+
+## When to Use Stores
+
+In Svelte 5, runes replace most store use cases:
+
+**Use runes instead:**
+- Extract logic using runes in `.svelte.js`/`.svelte.ts` files
+- Create shared state with `$state` objects
+
+```ts
+/// file: state.svelte.js
+export const userState = $state({
+	name: 'name',
+	/* ... */
+});
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { userState } from './state.svelte.js';
+</script>
+
+<p>User name: {userState.name}</p>
+<button onclick={() => {
+	userState.name = 'new name';
+}}>
+	change name
+</button>
+```
+
+**Still use stores for:**
+- Complex asynchronous data streams
+- Manual control over updates/subscriptions
+- RxJS integration
+
+## svelte/store API
+
+### `writable`
+
+Store with `set` and `update` methods for external updates.
+
+```js
+import { writable } from 'svelte/store';
+
+const count = writable(0);
+
+count.subscribe((value) => {
+	console.log(value);
+}); // logs '0'
+
+count.set(1); // logs '1'
+count.update((n) => n + 1); // logs '2'
+```
+
+**Optional second argument:** Function called when subscribers go from 0→1. Must return cleanup function called when subscribers go 1→0.
+
+```js
+const count = writable(0, () => {
+	console.log('got a subscriber');
+	return () => console.log('no more subscribers');
+});
+
+count.set(1); // does nothing
+
+const unsubscribe = count.subscribe((value) => {
+	console.log(value);
+}); // logs 'got a subscriber', then '1'
+
+unsubscribe(); // logs 'no more subscribers'
+```
+
+### `readable`
+
+Store that cannot be set from outside. Takes initial value and setup function (same as `writable` second argument).
+
+```ts
+import { readable } from 'svelte/store';
+
+const time = readable(new Date(), (set) => {
+	set(new Date());
+
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return () => clearInterval(interval);
+});
+
+const ticktock = readable('tick', (set, update) => {
+	const interval = setInterval(() => {
+		update((sound) => (sound === 'tick' ? 'tock' : 'tick'));
+	}, 1000);
+
+	return () => clearInterval(interval);
+});
+```
+
+### `derived`
+
+Derives store from one or more stores. Runs on first subscription and when dependencies change.
+
+**Synchronous:**
+```ts
+import { derived } from 'svelte/store';
+
+const doubled = derived(a, ($a) => $a * 2);
+```
+
+**Asynchronous:** Use `set`/`update` arguments. Third argument is initial value (defaults to `undefined`).
+
+```ts
+const delayed = derived(
+	a,
+	($a, set) => {
+		setTimeout(() => set($a), 1000);
+	},
+	2000
+);
+
+const delayedIncrement = derived(a, ($a, set, update) => {
+	set($a);
+	setTimeout(() => update((x) => x + 1), 1000);
+});
+```
+
+**Cleanup:** Return function for cleanup on re-run or unsubscribe.
+
+```ts
+const tick = derived(
+	frequency,
+	($frequency, set) => {
+		const interval = setInterval(() => {
+			set(Date.now());
+		}, 1000 / $frequency);
+
+		return () => {
+			clearInterval(interval);
+		};
+	},
+	2000
+);
+```
+
+**Multiple stores:** Pass array as first argument.
+
+```ts
+const summed = derived([a, b], ([$a, $b]) => $a + $b);
+
+const delayed = derived([a, b], ([$a, $b], set) => {
+	setTimeout(() => set($a + $b), 1000);
+});
+```
+
+### `readonly`
+
+Makes a store readonly while allowing subscriptions.
+
+```js
+import { readonly, writable } from 'svelte/store';
+
+const writableStore = writable(1);
+const readableStore = readonly(writableStore);
+
+readableStore.subscribe(console.log);
+
+writableStore.set(2); // console: 2
+readableStore.set(2); // ERROR
+```
+
+### `get`
+
+Retrieves current value without subscribing. Not recommended in hot code paths.
+
+```ts
+import { get } from 'svelte/store';
+
+const value = get(store);
+```
+
+## Store Contract
+
+```ts
+store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
+```
+
+Custom stores must implement:
+
+1. `.subscribe(fn)` - Immediately calls `fn` with current value synchronously. Returns unsubscribe function.
+2. Unsubscribe function stops subscription and prevents future calls.
+3. Optional `.set(value)` - Synchronously calls all active subscriptions (makes it a writable store).
+
+**RxJS compatibility:** `.subscribe` can return object with `.unsubscribe` method.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/style.md b/packages/mcp-server/summaries/distilled/svelte/style.md
new file mode 100644
index 00000000..813139b7
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/style.md
@@ -0,0 +1,44 @@
+# style: directive
+
+Shorthand for setting styles on elements.
+
+## Basic Usage
+
+```svelte
+<!-- These are equivalent -->
+<div style:color="red">...</div>
+<div style="color: red;">...</div>
+```
+
+## With Expressions
+
+```svelte
+<div style:color={myColor}>...</div>
+```
+
+## Shorthand Form
+
+```svelte
+<div style:color>...</div>
+```
+
+## Multiple Styles
+
+```svelte
+<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>
+```
+
+## Important Modifier
+
+```svelte
+<div style:color|important="red">...</div>
+```
+
+## Precedence
+
+`style:` directives always take precedence over `style` attributes, even over `!important`:
+
+```svelte
+<div style:color="red" style="color: blue">This will be red</div>
+<div style:color="red" style="color: blue !important">This will still be red</div>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-action.md b/packages/mcp-server/summaries/distilled/svelte/svelte-action.md
new file mode 100644
index 00000000..06731af9
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-action.md
@@ -0,0 +1,70 @@
+# Actions (Legacy - superseded by attachments)
+
+Actions are functions called when an element is created. Use `use:` directive to apply them.
+
+## Action Type
+
+Type actions with `Action<Element, Parameter, Attributes>`:
+
+```ts
+export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
+	// ...
+}
+```
+
+- `Action<HTMLDivElement>` or `Action<HTMLDivElement, undefined>` = no parameters accepted
+- Can return object with `update` and `destroy` methods
+- Can specify additional attributes/events (TypeScript only)
+
+```dts
+interface Action<
+	Element = HTMLElement,
+	Parameter = undefined,
+	Attributes extends Record<string, any> = Record<
+		never,
+		any
+	>
+> {
+	<Node extends Element>(
+		...args: undefined extends Parameter
+			? [node: Node, parameter?: Parameter]
+			: [node: Node, parameter: Parameter]
+	): void | ActionReturn<Parameter, Attributes>;
+}
+```
+
+## ActionReturn Type
+
+Optional return object from actions:
+
+- `update`: Called when parameter changes after markup updates
+- `destroy`: Called after element unmounts
+- `Attributes`: Type additional attributes/events (TypeScript only)
+
+```ts
+interface Attributes {
+	newprop?: string;
+	'on:event': (e: CustomEvent<boolean>) => void;
+}
+
+export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
+	// ...
+	return {
+		update: (updatedParameter) => {...},
+		destroy: () => {...}
+	};
+}
+```
+
+```dts
+interface ActionReturn<
+	Parameter = undefined,
+	Attributes extends Record<string, any> = Record<
+		never,
+		any
+	>
+> {
+	update?: (parameter: Parameter) => void;
+	destroy?: () => void;
+}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-animate.md b/packages/mcp-server/summaries/distilled/svelte/svelte-animate.md
new file mode 100644
index 00000000..cbacd6a5
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-animate.md
@@ -0,0 +1,45 @@
+# svelte/animate
+
+## flip
+
+Animates an element between start and end positions by translating x and y values. FLIP = First, Last, Invert, Play.
+
+```js
+import { flip } from 'svelte/animate';
+```
+
+```dts
+function flip(
+	node: Element,
+	{
+		from,
+		to
+	}: {
+		from: DOMRect;
+		to: DOMRect;
+	},
+	params?: FlipParams
+): AnimationConfig;
+```
+
+## AnimationConfig
+
+```dts
+interface AnimationConfig {
+	delay?: number;
+	duration?: number;
+	easing?: (t: number) => number;
+	css?: (t: number, u: number) => string;
+	tick?: (t: number, u: number) => void;
+}
+```
+
+## FlipParams
+
+```dts
+interface FlipParams {
+	delay?: number;
+	duration?: number | ((len: number) => number);
+	easing?: (t: number) => number;
+}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-attachments.md b/packages/mcp-server/summaries/distilled/svelte/svelte-attachments.md
new file mode 100644
index 00000000..637987a4
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-attachments.md
@@ -0,0 +1,62 @@
+# svelte/attachments
+
+```js
+import { createAttachmentKey, fromAction } from 'svelte/attachments';
+```
+
+## createAttachmentKey
+
+Creates a symbol key for programmatic attachments (alternative to `{@attach ...}`). Useful for library authors.
+
+```svelte
+<script>
+	import { createAttachmentKey } from 'svelte/attachments';
+
+	const props = {
+		class: 'cool',
+		onclick: () => alert('clicked'),
+		[createAttachmentKey()]: (node) => {
+			node.textContent = 'attached!';
+		}
+	};
+</script>
+
+<button {...props}>click me</button>
+```
+
+```dts
+function createAttachmentKey(): symbol;
+```
+
+## fromAction
+
+Converts an action into an attachment with same behavior. Second argument must be a function that returns the action's argument.
+
+```svelte
+<!-- with an action -->
+<div use:foo={bar}>...</div>
+
+<!-- with an attachment -->
+<div {@attach fromAction(foo, () => bar)}>...</div>
+```
+
+```dts
+function fromAction<E extends EventTarget, T extends unknown>(
+	action: Action<E, T> | ((element: E, arg: T) => void | ActionReturn<T>),
+	fn: () => T
+): Attachment<E>;
+
+function fromAction<E extends EventTarget>(
+	action: Action<E, void> | ((element: E) => void | ActionReturn<void>)
+): Attachment<E>;
+```
+
+## Attachment
+
+Function that runs when element mounts, optionally returns cleanup function. Used with `{@attach ...}` or via `createAttachmentKey`.
+
+```dts
+interface Attachment<T extends EventTarget = Element> {
+	(element: T): void | (() => void);
+}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-body.md b/packages/mcp-server/summaries/distilled/svelte/svelte-body.md
new file mode 100644
index 00000000..d18716ba
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-body.md
@@ -0,0 +1,18 @@
+# `<svelte:body>`
+
+Adds event listeners and actions to `document.body`.
+
+**Syntax:**
+```svelte
+<svelte:body onevent={handler} />
+```
+
+**Usage:**
+```svelte
+<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
+```
+
+**Key points:**
+- Use for events that don't fire on `window` (e.g., `mouseenter`, `mouseleave`)
+- Supports [actions](use)
+- Must be at top level of component (not inside blocks or elements)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-boundary.md b/packages/mcp-server/summaries/distilled/svelte/svelte-boundary.md
new file mode 100644
index 00000000..e75fd6b5
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-boundary.md
@@ -0,0 +1,80 @@
+# `<svelte:boundary>`
+
+```svelte
+<svelte:boundary onerror={handler}>...</svelte:boundary>
+```
+
+**Added in 5.3.0**
+
+Boundaries isolate parts of your app to:
+- Show UI while `await` expressions resolve
+- Catch rendering/effect errors and show fallback UI
+
+**Key limitation:** Only catches errors during rendering and at top level of `$effect` inside the boundary. Does NOT catch errors in event handlers or async callbacks.
+
+When a boundary handles an error, existing content is removed.
+
+## Properties
+
+### `pending`
+
+Shows while `await` expressions first resolve:
+
+```svelte
+<svelte:boundary>
+	<p>{await delayed('hello!')}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+```
+
+Only shows on initial load. For subsequent updates, use `$effect.pending()`.
+
+### `failed`
+
+Renders when error occurs. Receives `error` and `reset` function:
+
+```svelte
+<svelte:boundary>
+	<FlakyComponent />
+
+	{#snippet failed(error, reset)}
+		<button onclick={reset}>oops! try again</button>
+	{/snippet}
+</svelte:boundary>
+```
+
+Can be passed explicitly as property or declared inline.
+
+### `onerror`
+
+Function called with `error` and `reset` arguments. Useful for error tracking or managing error state externally:
+
+```svelte
+<script>
+	let error = $state(null);
+	let reset = $state(() => {});
+
+	function onerror(e, r) {
+		error = e;
+		reset = r;
+	}
+</script>
+
+<svelte:boundary {onerror}>
+	<FlakyComponent />
+</svelte:boundary>
+
+{#if error}
+	<button onclick={() => {
+		error = null;
+		reset();
+	}}>
+		oops! try again
+	</button>
+{/if}
+```
+
+Errors in `onerror` bubble to parent boundary if it exists.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-compiler.md b/packages/mcp-server/summaries/distilled/svelte/svelte-compiler.md
new file mode 100644
index 00000000..3b6bf650
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-compiler.md
@@ -0,0 +1,208 @@
+# svelte/compiler
+
+## Imports
+
+```js
+import {
+	VERSION,
+	compile,
+	compileModule,
+	migrate,
+	parse,
+	preprocess,
+	walk
+} from 'svelte/compiler';
+```
+
+## VERSION
+
+Current version from package.json.
+
+```dts
+const VERSION: string;
+```
+
+## compile
+
+Converts `.svelte` source code into a JavaScript module that exports a component.
+
+```dts
+function compile(
+	source: string,
+	options: CompileOptions
+): CompileResult;
+```
+
+## compileModule
+
+Converts JavaScript source code containing runes into a JavaScript module.
+
+```dts
+function compileModule(
+	source: string,
+	options: ModuleCompileOptions
+): CompileResult;
+```
+
+## migrate
+
+Best-effort migration of Svelte code to runes, event attributes, and render tags. May throw if code is too complex.
+
+```dts
+function migrate(
+	source: string,
+	{ filename, use_ts }?: { filename?: string; use_ts?: boolean; }
+): { code: string; };
+```
+
+## parse
+
+Parses a component and returns its AST. Set `modern: true` for modern AST (default in Svelte 6).
+
+```dts
+function parse(
+	source: string,
+	options: { filename?: string; modern: true; loose?: boolean; }
+): AST.Root;
+```
+
+## preprocess
+
+Provides hooks for transforming component source code (e.g., converting `<style lang="sass">` to CSS).
+
+```dts
+function preprocess(
+	source: string,
+	preprocessor: PreprocessorGroup | PreprocessorGroup[],
+	options?: { filename?: string; }
+): Promise<Processed>;
+```
+
+## walk
+
+**Deprecated:** Use `import { walk } from 'estree-walker'` instead.
+
+## CompileOptions
+
+```dts
+interface CompileOptions extends ModuleCompileOptions {
+	name?: string; // Class name, inferred from filename if unspecified
+	customElement?: boolean; // Generate custom element constructor (default: false)
+	accessors?: boolean; // Create getters/setters for props (default: false, deprecated in runes mode)
+	namespace?: Namespace; // Element namespace: 'html', 'svg', 'mathml' (default: 'html')
+	immutable?: boolean; // Promise not to mutate objects (default: false, deprecated in runes mode)
+	css?: 'injected' | 'external'; // How to handle CSS
+	cssHash?: CssHashGetter; // Custom CSS class name generator
+	preserveComments?: boolean; // Keep HTML comments (default: false)
+	preserveWhitespace?: boolean; // Keep whitespace as typed (default: false)
+	fragments?: 'html' | 'tree'; // DOM fragment cloning strategy (default: 'html', since v5.33)
+	runes?: boolean | undefined; // Force runes mode on/off/infer (default: undefined, true by default in Svelte 6)
+	discloseVersion?: boolean; // Expose Svelte version in browser (default: true)
+	compatibility?: {
+		componentApi?: 4 | 5; // Svelte 4 instantiation compatibility (default: 5, deprecated)
+	};
+	sourcemap?: object | string; // Initial sourcemap to merge
+	outputFilename?: string; // For JS sourcemap
+	cssOutputFilename?: string; // For CSS sourcemap
+	hmr?: boolean; // Hot reloading support (default: false)
+	modernAst?: boolean; // Return modern AST (default: false, true in Svelte 6)
+}
+```
+
+**Key options:**
+- `css: 'injected'` - styles in `<head>` or shadow root
+- `css: 'external'` - CSS returned separately for static generation
+- `fragments: 'html'` - faster but requires CSP compatibility
+- `fragments: 'tree'` - slower but works with strict CSP
+
+## ModuleCompileOptions
+
+```dts
+interface ModuleCompileOptions {
+	dev?: boolean; // Runtime checks and debugging (default: false)
+	generate?: 'client' | 'server' | false; // Output target (default: 'client')
+	filename?: string; // For debugging and sourcemaps
+	rootDir?: string; // Prevent filesystem info leaks (default: process.cwd())
+	warningFilter?: (warning: Warning) => boolean; // Filter warnings
+	experimental?: {
+		async?: boolean; // Allow await in deriveds/templates (since v5.36)
+	};
+}
+```
+
+## CompileResult
+
+```dts
+interface CompileResult {
+	js: {
+		code: string;
+		map: SourceMap;
+	};
+	css: null | {
+		code: string;
+		map: SourceMap;
+		hasGlobal: boolean;
+	};
+	warnings: Warning[];
+	metadata: {
+		runes: boolean; // Whether compiled in runes mode
+	};
+	ast: any;
+}
+```
+
+## Preprocessor Types
+
+### MarkupPreprocessor
+
+```dts
+type MarkupPreprocessor = (options: {
+	content: string; // Whole Svelte file
+	filename?: string;
+}) => Processed | void | Promise<Processed | void>;
+```
+
+### Preprocessor
+
+```dts
+type Preprocessor = (options: {
+	content: string; // Script/style tag content
+	attributes: Record<string, string | boolean>;
+	markup: string; // Whole Svelte file
+	filename?: string;
+}) => Processed | void | Promise<Processed | void>;
+```
+
+### PreprocessorGroup
+
+```dts
+interface PreprocessorGroup {
+	name?: string; // Will be required in next major version
+	markup?: MarkupPreprocessor;
+	style?: Preprocessor;
+	script?: Preprocessor;
+}
+```
+
+### Processed
+
+```dts
+interface Processed {
+	code: string; // New code
+	map?: string | object; // Source map
+	dependencies?: string[]; // Files to watch
+	attributes?: Record<string, string | boolean>; // Updated tag attributes (script/style only)
+	toString?: () => string;
+}
+```
+
+## AST Types
+
+Key AST node types:
+
+- **Root**: `{ type: 'Root', options: SvelteOptions | null, fragment: Fragment, css, instance, module, comments }`
+- **Elements**: `Component`, `RegularElement`, `SvelteElement`, `SvelteComponent`, `SvelteSelf`, `SvelteBody`, `SvelteWindow`, `SvelteDocument`, `SvelteHead`, `SvelteBoundary`, `SvelteFragment`, `TitleElement`, `SlotElement`
+- **Tags**: `ExpressionTag`, `HtmlTag`, `RenderTag`, `AttachTag`, `ConstTag`, `DebugTag`
+- **Blocks**: `EachBlock`, `IfBlock`, `AwaitBlock`, `KeyBlock`, `SnippetBlock`
+- **Directives**: `AnimateDirective`, `BindDirective`, `ClassDirective`, `LetDirective`, `OnDirective`, `StyleDirective`, `TransitionDirective`, `UseDirective`
+- **Other**: `Text`, `Comment`, `Attribute`, `SpreadAttribute`, `Script`, `Fragment`
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-document.md b/packages/mcp-server/summaries/distilled/svelte/svelte-document.md
new file mode 100644
index 00000000..680a10f7
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-document.md
@@ -0,0 +1,30 @@
+# `<svelte:document>`
+
+Add event listeners and actions to `document`. Bind to document properties.
+
+## Syntax
+
+```svelte
+<svelte:document onevent={handler} />
+```
+
+```svelte
+<svelte:document bind:prop={value} />
+```
+
+## Usage
+
+- Handles events that fire on `document` but not `window` (e.g., `visibilitychange`)
+- Supports [actions](use)
+- **Must be at top level** (not inside blocks or elements)
+
+```svelte
+<svelte:document onvisibilitychange={handleVisibilityChange} use:someAction />
+```
+
+## Bindable Properties (readonly)
+
+- `activeElement`
+- `fullscreenElement`
+- `pointerLockElement`
+- `visibilityState`
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-easing.md b/packages/mcp-server/summaries/distilled/svelte/svelte-easing.md
new file mode 100644
index 00000000..787b3892
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-easing.md
@@ -0,0 +1,33 @@
+# svelte/easing
+
+Easing functions for animations. All functions take a number `t` (0-1) and return a number (0-1).
+
+```js
+import {
+	backIn, backInOut, backOut,
+	bounceIn, bounceInOut, bounceOut,
+	circIn, circInOut, circOut,
+	cubicIn, cubicInOut, cubicOut,
+	elasticIn, elasticInOut, elasticOut,
+	expoIn, expoInOut, expoOut,
+	linear,
+	quadIn, quadInOut, quadOut,
+	quartIn, quartInOut, quartOut,
+	quintIn, quintInOut, quintOut,
+	sineIn, sineInOut, sineOut
+} from 'svelte/easing';
+```
+
+**Signature:** `(t: number) => number`
+
+**Available functions:**
+- `linear` - No easing
+- `quad`, `cubic`, `quart`, `quint` - Polynomial easing (power of 2, 3, 4, 5)
+- `sine` - Sinusoidal easing
+- `expo` - Exponential easing
+- `circ` - Circular easing
+- `back` - Overshooting easing
+- `bounce` - Bouncing easing
+- `elastic` - Elastic easing
+
+Each (except `linear`) has `In`, `Out`, and `InOut` variants.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-element.md b/packages/mcp-server/summaries/distilled/svelte/svelte-element.md
new file mode 100644
index 00000000..a53e328b
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-element.md
@@ -0,0 +1,36 @@
+# `<svelte:element>`
+
+Renders a dynamic element determined at runtime.
+
+```svelte
+<svelte:element this={expression} />
+```
+
+## Usage
+
+Use when element type is unknown at author time (e.g., from CMS). Properties and event listeners apply to the rendered element.
+
+```svelte
+<script>
+	let tag = $state('hr');
+</script>
+
+<svelte:element this={tag}>
+	This text cannot appear inside an hr element
+</svelte:element>
+```
+
+## Key Points
+
+- **Only `bind:this` supported** - built-in bindings don't work with generic elements
+- **Nullish values** - if `this` is null/undefined, element and children won't render
+- **Void elements** - runtime error if void element (e.g., `br`, `hr`) has children
+- **Valid DOM tags only** - `#text` or `svelte:head` won't work
+
+## Namespace
+
+Explicitly set namespace when Svelte can't infer:
+
+```svelte
+<svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-events.md b/packages/mcp-server/summaries/distilled/svelte/svelte-events.md
new file mode 100644
index 00000000..eb7552f6
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-events.md
@@ -0,0 +1,22 @@
+# on
+
+Attaches event handlers and returns a cleanup function. Preserves correct order relative to declarative handlers (like `onclick`) which use event delegation.
+
+```js
+import { on } from 'svelte/events';
+```
+
+## API
+
+```dts
+function on(
+	element: EventTarget, // Window, Document, HTMLElement, MediaQueryList, etc.
+	type: string,
+	handler: EventListener,
+	options?: AddEventListenerOptions
+): () => void;
+```
+
+**Key benefit:** Maintains proper event ordering with Svelte's declarative event handlers.
+
+**Returns:** Cleanup function to remove the handler.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-files.md b/packages/mcp-server/summaries/distilled/svelte/svelte-files.md
new file mode 100644
index 00000000..df68d1bf
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-files.md
@@ -0,0 +1,59 @@
+# Components
+
+Components are written in `.svelte` files. All three sections (script, styles, markup) are optional.
+
+```svelte
+/// file: MyComponent.svelte
+<script module>
+	// module-level logic goes here
+	// (you will rarely use this)
+</script>
+
+<script>
+	// instance-level logic goes here
+</script>
+
+<!-- markup (zero or more items) goes here -->
+
+<style>
+	/* styles go here */
+</style>
+```
+
+## `<script>`
+
+Runs when component instance is created. Top-level variables can be referenced in markup.
+
+Use runes for props and reactivity.
+
+## `<script module>`
+
+Runs once when module first evaluates (not per instance). Variables declared here can be referenced in component, but not vice versa.
+
+```svelte
+<script module>
+	let total = 0;
+</script>
+
+<script>
+	total += 1;
+	console.log(`instantiated ${total} times`);
+</script>
+```
+
+Can `export` bindings (becomes module exports). Cannot `export default` (component is default export).
+
+> **Note:** In Svelte 4, this was `<script context="module">`
+
+## `<style>`
+
+CSS is scoped to the component.
+
+```svelte
+<style>
+	p {
+		/* this will only affect <p> elements in this component */
+		color: burlywood;
+	}
+</style>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-head.md b/packages/mcp-server/summaries/distilled/svelte/svelte-head.md
new file mode 100644
index 00000000..df7b8164
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-head.md
@@ -0,0 +1,14 @@
+# `<svelte:head>`
+
+Inserts elements into `document.head`. During SSR, head content is exposed separately from body content.
+
+**Restrictions:**
+- Must be at top level of component
+- Cannot be inside blocks or elements
+
+```svelte
+<svelte:head>
+	<title>Hello world!</title>
+	<meta name="description" content="This is where the description goes for SEO" />
+</svelte:head>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-js-files.md b/packages/mcp-server/summaries/distilled/svelte/svelte-js-files.md
new file mode 100644
index 00000000..50b8635b
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-js-files.md
@@ -0,0 +1,8 @@
+# `.svelte.js` and `.svelte.ts` files
+
+Svelte operates on `.svelte.js` and `.svelte.ts` files in addition to `.svelte` files.
+
+**Key points:**
+- Behave like regular `.js`/`.ts` modules but can use runes
+- Useful for reusable reactive logic or sharing reactive state
+- **Gotcha:** Cannot export reassigned state
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-legacy.md b/packages/mcp-server/summaries/distilled/svelte/svelte-legacy.md
new file mode 100644
index 00000000..5a2ff1de
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-legacy.md
@@ -0,0 +1,120 @@
+# svelte/legacy
+
+Migration utilities for Svelte 4 to 5 transition. All imports are deprecated - migrate away over time.
+
+```js
+import {
+	asClassComponent,
+	createBubbler,
+	createClassComponent,
+	handlers,
+	nonpassive,
+	once,
+	passive,
+	preventDefault,
+	run,
+	self,
+	stopImmediatePropagation,
+	stopPropagation,
+	trusted
+} from 'svelte/legacy';
+```
+
+## Component Class Compatibility
+
+### asClassComponent
+Converts component function to Svelte 4 compatible constructor.
+
+```dts
+function asClassComponent<Props, Exports, Events, Slots>(
+	component: SvelteComponent<Props, Events, Slots> | Component<Props>
+): ComponentType<SvelteComponent<Props, Events, Slots> & Exports>;
+```
+
+### createClassComponent
+Creates Svelte 4 compatible component from options + component function.
+
+```dts
+function createClassComponent<Props, Exports, Events, Slots>(
+	options: ComponentConstructorOptions<Props> & {
+		component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;
+	}
+): SvelteComponent<Props, Events, Slots> & Exports;
+```
+
+## Event Handling
+
+### createBubbler
+Mimics `on:click` (no handler) behavior from Svelte 4.
+
+```dts
+function createBubbler(): (type: string) => (event: Event) => boolean;
+```
+
+### handlers
+Allows multiple event listeners (Svelte 4 behavior).
+
+```dts
+function handlers(...handlers: EventListener[]): EventListener;
+```
+
+## Event Modifiers (as functions/actions)
+
+### once
+```dts
+function once(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
+```
+
+### preventDefault
+```dts
+function preventDefault(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
+```
+
+### stopPropagation
+```dts
+function stopPropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
+```
+
+### stopImmediatePropagation
+```dts
+function stopImmediatePropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
+```
+
+### self
+```dts
+function self(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
+```
+
+### trusted
+```dts
+function trusted(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
+```
+
+### passive (action)
+```dts
+function passive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;
+```
+
+### nonpassive (action)
+```dts
+function nonpassive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;
+```
+
+## Other
+
+### run
+Runs once immediately on server, like `$effect.pre` on client.
+
+```dts
+function run(fn: () => void | (() => void)): void;
+```
+
+### LegacyComponentType
+Type for components usable as both class and function during transition.
+
+```dts
+type LegacyComponentType = {
+	new (o: ComponentConstructorOptions): SvelteComponent;
+	(...args: Parameters<Component<Record<string, any>>>): ReturnType<Component<Record<string, any>, Record<string, any>>>;
+};
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-motion.md b/packages/mcp-server/summaries/distilled/svelte/svelte-motion.md
new file mode 100644
index 00000000..3e475a4e
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-motion.md
@@ -0,0 +1,147 @@
+# svelte/motion
+
+```js
+import { Spring, Tween, prefersReducedMotion, spring, tweened } from 'svelte/motion';
+```
+
+## Spring
+
+**Available since 5.8.0**
+
+Wrapper for spring-like animated values. Changes to `spring.target` cause `spring.current` to move towards it based on `stiffness` and `damping`.
+
+```svelte
+<script>
+	import { Spring } from 'svelte/motion';
+
+	const spring = new Spring(0);
+</script>
+
+<input type="range" bind:value={spring.target} />
+<input type="range" bind:value={spring.current} disabled />
+```
+
+### Constructor
+```dts
+constructor(value: T, options?: SpringOpts);
+```
+
+### Static Method
+```dts
+Spring.of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
+```
+Creates spring bound to `fn` return value. Must be called inside effect root (e.g., component initialization).
+
+```svelte
+<script>
+	import { Spring } from 'svelte/motion';
+
+	let { number } = $props();
+
+	const spring = Spring.of(() => number);
+</script>
+```
+
+### Methods
+```dts
+set(value: T, options?: SpringUpdateOpts): Promise<void>;
+```
+Sets `spring.target` to `value`, returns Promise resolving when `spring.current` catches up.
+- `options.instant`: immediately match target
+- `options.preserveMomentum`: continue trajectory for specified milliseconds (useful for fling gestures)
+
+### Properties
+- `target: T` - end value
+- `current: T` (getter) - current value
+- `stiffness: number`
+- `damping: number`
+- `precision: number`
+
+## Tween
+
+**Available since 5.8.0**
+
+Wrapper for smoothly tweened values. Changes to `tween.target` cause `tween.current` to move towards it based on `delay`, `duration`, and `easing`.
+
+```svelte
+<script>
+	import { Tween } from 'svelte/motion';
+
+	const tween = new Tween(0);
+</script>
+
+<input type="range" bind:value={tween.target} />
+<input type="range" bind:value={tween.current} disabled />
+```
+
+### Constructor
+```dts
+constructor(value: T, options?: TweenedOptions<T>);
+```
+
+### Static Method
+```dts
+Tween.of<U>(fn: () => U, options?: TweenedOptions<U>): Tween<U>;
+```
+Creates tween bound to `fn` return value. Must be called inside effect root.
+
+```svelte
+<script>
+	import { Tween } from 'svelte/motion';
+
+	let { number } = $props();
+
+	const tween = Tween.of(() => number);
+</script>
+```
+
+### Methods
+```dts
+set(value: T, options?: TweenedOptions<T>): Promise<void>;
+```
+Sets `tween.target`, returns Promise. Options override defaults.
+
+### Properties
+- `target: T` (getter/setter)
+- `current: T` (getter)
+
+## prefersReducedMotion
+
+**Available since 5.7.0**
+
+Media query matching user's [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) preference.
+
+```svelte
+<script>
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { fly } from 'svelte/transition';
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => visible = !visible}>
+	toggle
+</button>
+
+{#if visible}
+	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
+		flies in, unless the user prefers reduced motion
+	</p>
+{/if}
+```
+
+## spring (deprecated)
+
+**Use `Spring` instead**
+
+```dts
+function spring<T = any>(value?: T, opts?: SpringOpts): Spring<T>;
+```
+
+## tweened (deprecated)
+
+**Use `Tween` instead**
+
+```dts
+function tweened<T>(value?: T, defaults?: TweenedOptions<T>): Tweened<T>;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-options.md b/packages/mcp-server/summaries/distilled/svelte/svelte-options.md
new file mode 100644
index 00000000..c7544a53
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-options.md
@@ -0,0 +1,21 @@
+# `<svelte:options>`
+
+```svelte
+<svelte:options option={value} />
+```
+
+Specifies per-component compiler options.
+
+## Options
+
+- `runes={true}` — forces runes mode
+- `runes={false}` — forces legacy mode
+- `namespace="..."` — namespace for component: `"html"` (default), `"svg"`, or `"mathml"`
+- `customElement={...}` — options for compiling as custom element. String value sets `tag` option
+- `css="injected"` — injects styles inline: `<style>` tag in `head` during SSR, via JavaScript on client
+
+## Example
+
+```svelte
+<svelte:options customElement="my-custom-element" />
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-reactivity-window.md b/packages/mcp-server/summaries/distilled/svelte/svelte-reactivity-window.md
new file mode 100644
index 00000000..73b984d5
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-reactivity-window.md
@@ -0,0 +1,45 @@
+# svelte/reactivity/window
+
+Reactive versions of `window` values. Each has a `.current` property usable in templates, `$derived`, and `$effect` without manual event listeners.
+
+```svelte
+<script>
+	import { innerWidth, innerHeight } from 'svelte/reactivity/window';
+</script>
+
+<p>{innerWidth.current}x{innerHeight.current}</p>
+```
+
+## Available Exports
+
+```js
+import {
+	devicePixelRatio,
+	innerHeight,
+	innerWidth,
+	online,
+	outerHeight,
+	outerWidth,
+	screenLeft,
+	screenTop,
+	scrollX,
+	scrollY
+} from 'svelte/reactivity/window';
+```
+
+All values are `undefined` on the server.
+
+## API Reference
+
+| Export | Maps to | Notes |
+|--------|---------|-------|
+| `devicePixelRatio.current` | `window.devicePixelRatio` | Chrome: responds to zoom; Firefox/Safari: doesn't |
+| `innerHeight.current` | `window.innerHeight` | |
+| `innerWidth.current` | `window.innerWidth` | |
+| `online.current` | `navigator.onLine` | Returns `boolean \| undefined` |
+| `outerHeight.current` | `window.outerHeight` | |
+| `outerWidth.current` | `window.outerWidth` | |
+| `screenLeft.current` | `window.screenLeft` | Updated in `requestAnimationFrame` |
+| `screenTop.current` | `window.screenTop` | Updated in `requestAnimationFrame` |
+| `scrollX.current` | `window.scrollX` | |
+| `scrollY.current` | `window.scrollY` | |
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-reactivity.md b/packages/mcp-server/summaries/distilled/svelte/svelte-reactivity.md
new file mode 100644
index 00000000..1d95ab7f
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-reactivity.md
@@ -0,0 +1,233 @@
+# svelte/reactivity
+
+Reactive versions of built-ins (`Map`, `Set`, `URL`, etc.) and reactivity utilities.
+
+```js
+import {
+	MediaQuery,
+	SvelteDate,
+	SvelteMap,
+	SvelteSet,
+	SvelteURL,
+	SvelteURLSearchParams,
+	createSubscriber
+} from 'svelte/reactivity';
+```
+
+## MediaQuery
+
+Creates a reactive media query with a `current` property.
+
+**Warning:** No way to know correct value during SSR, may cause hydration mismatch. Use CSS media queries when possible.
+
+```svelte
+<script>
+	import { MediaQuery } from 'svelte/reactivity';
+
+	const large = new MediaQuery('min-width: 800px');
+</script>
+
+<h1>{large.current ? 'large screen' : 'small screen'}</h1>
+```
+
+```dts
+constructor(query: string, fallback?: boolean | undefined);
+```
+
+## SvelteDate
+
+Reactive `Date` object. Reading in `$effect` or `$derived` re-evaluates when date changes.
+
+```svelte
+<script>
+	import { SvelteDate } from 'svelte/reactivity';
+
+	const date = new SvelteDate();
+
+	const formatter = new Intl.DateTimeFormat(undefined, {
+	  hour: 'numeric',
+	  minute: 'numeric',
+	  second: 'numeric'
+	});
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			date.setTime(Date.now());
+		}, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<p>The time is {formatter.format(date)}</p>
+```
+
+## SvelteMap
+
+Reactive `Map`. Reading contents (iterating, `.size`, `.get()`, `.has()`) in `$effect` or `$derived` re-evaluates when updated.
+
+**Note:** Values are NOT deeply reactive.
+
+```svelte
+<script>
+	import { SvelteMap } from 'svelte/reactivity';
+	import { result } from './game.js';
+
+	let board = new SvelteMap();
+	let player = $state('x');
+	let winner = $derived(result(board));
+
+	function reset() {
+		player = 'x';
+		board.clear();
+	}
+</script>
+
+<div class="board">
+	{#each Array(9), i}
+		<button
+			disabled={board.has(i) || winner}
+			onclick={() => {
+				board.set(i, player);
+				player = player === 'x' ? 'o' : 'x';
+			}}
+		>{board.get(i)}</button>
+	{/each}
+</div>
+
+{#if winner}
+	<p>{winner} wins!</p>
+	<button onclick={reset}>reset</button>
+{:else}
+	<p>{player} is next</p>
+{/if}
+```
+
+## SvelteSet
+
+Reactive `Set`. Reading contents (iterating, `.size`, `.has()`) in `$effect` or `$derived` re-evaluates when updated.
+
+**Note:** Values are NOT deeply reactive.
+
+```svelte
+<script>
+	import { SvelteSet } from 'svelte/reactivity';
+	let monkeys = new SvelteSet();
+
+	function toggle(monkey) {
+		if (monkeys.has(monkey)) {
+			monkeys.delete(monkey);
+		} else {
+			monkeys.add(monkey);
+		}
+	}
+</script>
+
+{#each ['🙈', '🙉', '🙊'] as monkey}
+	<button onclick={() => toggle(monkey)}>{monkey}</button>
+{/each}
+
+<button onclick={() => monkeys.clear()}>clear</button>
+
+{#if monkeys.has('🙈')}<p>see no evil</p>{/if}
+{#if monkeys.has('🙉')}<p>hear no evil</p>{/if}
+{#if monkeys.has('🙊')}<p>speak no evil</p>{/if}
+```
+
+## SvelteURL
+
+Reactive `URL`. Reading properties (`.href`, `.pathname`, etc.) in `$effect` or `$derived` re-evaluates when changed.
+
+`.searchParams` is a `SvelteURLSearchParams` instance.
+
+```svelte
+<script>
+	import { SvelteURL } from 'svelte/reactivity';
+
+	const url = new SvelteURL('https://example.com/path');
+</script>
+
+<!-- changes to these... -->
+<input bind:value={url.protocol} />
+<input bind:value={url.hostname} />
+<input bind:value={url.pathname} />
+
+<hr />
+
+<!-- will update `href` and vice versa -->
+<input bind:value={url.href} size="65" />
+```
+
+## SvelteURLSearchParams
+
+Reactive `URLSearchParams`. Reading contents (iterating, `.get()`, `.getAll()`) in `$effect` or `$derived` re-evaluates when updated.
+
+```svelte
+<script>
+	import { SvelteURLSearchParams } from 'svelte/reactivity';
+
+	const params = new SvelteURLSearchParams('message=hello');
+
+	let key = $state('key');
+	let value = $state('value');
+</script>
+
+<input bind:value={key} />
+<input bind:value={value} />
+<button onclick={() => params.append(key, value)}>append</button>
+
+<p>?{params.toString()}</p>
+
+{#each params as [key, value]}
+	<p>{key}: {value}</p>
+{/each}
+```
+
+## createSubscriber
+
+Integrates external event-based systems with Svelte reactivity. Returns a `subscribe` function.
+
+When called inside `$effect`, the `start` callback receives an `update` function. Calling `update` re-runs the effect. `start` can return cleanup function.
+
+Multiple effects share one `start` call; cleanup runs when all effects destroyed.
+
+Example `MediaQuery` implementation:
+
+```js
+// @errors: 7031
+import { createSubscriber } from 'svelte/reactivity';
+import { on } from 'svelte/events';
+
+export class MediaQuery {
+	#query;
+	#subscribe;
+
+	constructor(query) {
+		this.#query = window.matchMedia(`(${query})`);
+
+		this.#subscribe = createSubscriber((update) => {
+			// when the `change` event occurs, re-run any effects that read `this.current`
+			const off = on(this.#query, 'change', update);
+
+			// stop listening when all the effects are destroyed
+			return () => off();
+		});
+	}
+
+	get current() {
+		// This makes the getter reactive, if read in an effect
+		this.#subscribe();
+
+		// Return the current state of the query, whether or not we're in an effect
+		return this.#query.matches;
+	}
+}
+```
+
+```dts
+function createSubscriber(
+	start: (update: () => void) => (() => void) | void
+): () => void;
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-server.md b/packages/mcp-server/summaries/distilled/svelte/svelte-server.md
new file mode 100644
index 00000000..88b8574b
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-server.md
@@ -0,0 +1,27 @@
+# svelte/server
+
+## render
+
+Server-only function (requires `server` compiler option). Renders a component and returns `body` and `head` properties for populating HTML during SSR.
+
+```js
+import { render } from 'svelte/server';
+```
+
+**Type signature:**
+
+```dts
+function render<
+	Comp extends SvelteComponent<any> | Component<any>,
+	Props extends ComponentProps<Comp> = ComponentProps<Comp>
+>(
+	component: Comp,
+	options?: {
+		props?: Omit<Props, '$$slots' | '$$events'>;
+		context?: Map<any, any>;
+		idPrefix?: string;
+	}
+): RenderOutput;
+```
+
+**Usage:** Pass component and optional `props`, `context`, or `idPrefix` to generate server-rendered output.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-store.md b/packages/mcp-server/summaries/distilled/svelte/svelte-store.md
new file mode 100644
index 00000000..91294821
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-store.md
@@ -0,0 +1,118 @@
+# svelte/store
+
+```js
+import {
+	derived,
+	fromStore,
+	get,
+	readable,
+	readonly,
+	toStore,
+	writable
+} from 'svelte/store';
+```
+
+## Core Store Types
+
+### writable
+Create a store with read/write access via subscription.
+
+```dts
+function writable<T>(
+	value?: T | undefined,
+	start?: StartStopNotifier<T> | undefined
+): Writable<T>;
+```
+
+### readable
+Create a read-only store.
+
+```dts
+function readable<T>(
+	value?: T | undefined,
+	start?: StartStopNotifier<T> | undefined
+): Readable<T>;
+```
+
+### derived
+Derive values from one or more stores with aggregation function.
+
+```dts
+function derived<S extends Stores, T>(
+	stores: S,
+	fn: (values: StoresValues<S>) => T,
+	initial_value?: T | undefined
+): Readable<T>;
+```
+
+```dts
+function derived<S extends Stores, T>(
+	stores: S,
+	fn: (
+		values: StoresValues<S>,
+		set: (value: T) => void,
+		update: (fn: Updater<T>) => void
+	) => Unsubscriber | void,
+	initial_value?: T | undefined
+): Readable<T>;
+```
+
+## Utilities
+
+### get
+Get current value by subscribing and immediately unsubscribing.
+
+```dts
+function get<T>(store: Readable<T>): T;
+```
+
+### readonly
+Convert any store to read-only.
+
+```dts
+function readonly<T>(store: Readable<T>): Readable<T>;
+```
+
+### toStore
+Convert getter/setter to store.
+
+```dts
+function toStore<V>(get: () => V, set: (v: V) => void): Writable<V>;
+function toStore<V>(get: () => V): Readable<V>;
+```
+
+### fromStore
+Convert store to reactive object.
+
+```dts
+function fromStore<V>(store: Writable<V>): { current: V };
+function fromStore<V>(store: Readable<V>): { readonly current: V };
+```
+
+## Interfaces & Types
+
+### Readable
+```dts
+interface Readable<T> {
+	subscribe(run: Subscriber<T>, invalidate?: () => void): Unsubscriber;
+}
+```
+
+### Writable
+```dts
+interface Writable<T> extends Readable<T> {
+	set(value: T): void;
+	update(updater: Updater<T>): void;
+}
+```
+
+### Types
+```dts
+type Subscriber<T> = (value: T) => void;
+type Unsubscriber = () => void;
+type Updater<T> = (value: T) => T;
+type StartStopNotifier<T> = (
+	set: (value: T) => void,
+	update: (fn: Updater<T>) => void
+) => void | (() => void);
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-transition.md b/packages/mcp-server/summaries/distilled/svelte/svelte-transition.md
new file mode 100644
index 00000000..27c285bb
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-transition.md
@@ -0,0 +1,146 @@
+# Svelte Transitions
+
+## Import
+
+```js
+import { blur, crossfade, draw, fade, fly, scale, slide } from 'svelte/transition';
+```
+
+## Built-in Transitions
+
+### blur
+Animates blur filter + opacity.
+
+```dts
+function blur(
+	node: Element,
+	{ delay, duration, easing, amount, opacity }?: BlurParams
+): TransitionConfig;
+```
+
+### fade
+Animates opacity from 0 to current (in) or current to 0 (out).
+
+```dts
+function fade(
+	node: Element,
+	{ delay, duration, easing }?: FadeParams
+): TransitionConfig;
+```
+
+### fly
+Animates x/y position + opacity. `in` animates from provided values to defaults, `out` animates from defaults to provided values.
+
+```dts
+function fly(
+	node: Element,
+	{ delay, duration, easing, x, y, opacity }?: FlyParams
+): TransitionConfig;
+```
+
+### scale
+Animates scale + opacity. `in` animates from provided values to defaults, `out` animates from defaults to provided values.
+
+```dts
+function scale(
+	node: Element,
+	{ delay, duration, easing, start, opacity }?: ScaleParams
+): TransitionConfig;
+```
+
+### slide
+Slides element in/out.
+
+```dts
+function slide(
+	node: Element,
+	{ delay, duration, easing, axis }?: SlideParams
+): TransitionConfig;
+```
+
+### draw
+Animates SVG stroke (snake-in-tube effect). Works with elements having `getTotalLength()` like `<path>` and `<polyline>`.
+
+```dts
+function draw(
+	node: SVGElement & { getTotalLength(): number },
+	{ delay, speed, duration, easing }?: DrawParams
+): TransitionConfig;
+```
+
+### crossfade
+Creates `send`/`receive` transition pair. Sent element transforms to received element's position and fades out. If no counterpart, uses `fallback` transition.
+
+```dts
+function crossfade({
+	fallback,
+	...defaults
+}: CrossfadeParams & {
+	fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
+}): [send, receive];
+```
+
+## Type Definitions
+
+```dts
+type EasingFunction = (t: number) => number;
+
+interface TransitionConfig {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	css?: (t: number, u: number) => string;
+	tick?: (t: number, u: number) => void;
+}
+
+interface BlurParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	amount?: number | string;
+	opacity?: number;
+}
+
+interface FadeParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+}
+
+interface FlyParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	x?: number | string;
+	y?: number | string;
+	opacity?: number;
+}
+
+interface ScaleParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	start?: number;
+	opacity?: number;
+}
+
+interface SlideParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	axis?: 'x' | 'y';
+}
+
+interface DrawParams {
+	delay?: number;
+	speed?: number;
+	duration?: number | ((len: number) => number);
+	easing?: EasingFunction;
+}
+
+interface CrossfadeParams {
+	delay?: number;
+	duration?: number | ((len: number) => number);
+	easing?: EasingFunction;
+}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte-window.md b/packages/mcp-server/summaries/distilled/svelte/svelte-window.md
new file mode 100644
index 00000000..45e38a65
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte-window.md
@@ -0,0 +1,41 @@
+# `<svelte:window>`
+
+Add event listeners to `window` without cleanup or SSR checks.
+
+**Syntax:**
+```svelte
+<svelte:window onevent={handler} />
+<svelte:window bind:prop={value} />
+```
+
+**Rules:**
+- Must be at top level (not inside blocks/elements)
+
+## Event Listeners
+
+```svelte
+<script>
+	function handleKeydown(event) {
+		alert(`pressed the ${event.key} key`);
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+```
+
+## Bindable Properties
+
+**Readonly:**
+- `innerWidth`, `innerHeight`
+- `outerWidth`, `outerHeight`
+- `online` (alias for `window.navigator.onLine`)
+- `devicePixelRatio`
+
+**Writable:**
+- `scrollX`, `scrollY`
+
+```svelte
+<svelte:window bind:scrollY={y} />
+```
+
+**Gotcha:** Initial binding values don't trigger scrolling (accessibility). Only subsequent changes scroll. To scroll on render, use `scrollTo()` in `$effect`.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/svelte.md b/packages/mcp-server/summaries/distilled/svelte/svelte.md
new file mode 100644
index 00000000..a7158746
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/svelte.md
@@ -0,0 +1,198 @@
+# Svelte 5 API Reference
+
+## Component Lifecycle
+
+### onMount
+Runs once after component mounts to DOM. Returns cleanup function if provided synchronously. Does not run during SSR.
+
+```ts
+function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;
+```
+
+### onDestroy
+Runs before component unmounts. Only lifecycle function that runs server-side.
+
+```ts
+function onDestroy(fn: () => any): void;
+```
+
+### ~~afterUpdate~~ → Use `$effect`
+### ~~beforeUpdate~~ → Use `$effect.pre`
+
+## Component Instantiation
+
+### mount
+Mounts component to target, returns exports. Transitions play by default unless `intro: false`.
+
+```ts
+function mount<Props, Exports>(
+  component: Component<Props, Exports, any>,
+  options: MountOptions<Props>
+): Exports;
+```
+
+**MountOptions:**
+- `target`: Document | Element | ShadowRoot (required)
+- `anchor?`: Node - renders before this node
+- `props?`: Props (required if Props not empty)
+- `events?`: Record<string, (e: any) => any> (deprecated)
+- `context?`: Map<any, any>
+- `intro?`: boolean (default: true)
+
+### hydrate
+Hydrates server-rendered component. Same signature as `mount`.
+
+### unmount
+Unmounts component. Returns Promise if `outro: true` (plays transitions).
+
+```js
+import { mount, unmount } from 'svelte';
+import App from './App.svelte';
+
+const app = mount(App, { target: document.body });
+unmount(app, { outro: true });
+```
+
+## Context API
+
+Must be called during component initialization.
+
+```ts
+function setContext<T>(key: any, context: T): T;
+function getContext<T>(key: any): T;
+function hasContext(key: any): boolean;
+function getAllContexts<T extends Map<any, any>>(): T;
+```
+
+## Timing & Updates
+
+### tick
+Returns promise that resolves after pending state changes applied.
+
+```ts
+function tick(): Promise<void>;
+```
+
+### settled
+Returns promise that resolves after state changes, async work, and DOM updates complete. (Since 5.36)
+
+```ts
+function settled(): Promise<void>;
+```
+
+### flushSync
+Synchronously flush pending updates. Returns callback result if provided.
+
+```ts
+function flushSync<T = void>(fn?: () => T): T;
+```
+
+## Utilities
+
+### untrack
+Reads state inside `$derived` or `$effect` without creating dependency.
+
+```ts
+$effect(() => {
+  // runs when `data` changes, not when `time` changes
+  save(data, {
+    timestamp: untrack(() => time)
+  });
+});
+```
+
+```ts
+function untrack<T>(fn: () => T): T;
+```
+
+### getAbortSignal
+Returns AbortSignal that aborts when current derived/effect re-runs or destroys. Must be called inside derived/effect.
+
+```svelte
+<script>
+import { getAbortSignal } from 'svelte';
+
+let { id } = $props();
+
+async function getData(id) {
+  const response = await fetch(`/items/${id}`, {
+    signal: getAbortSignal()
+  });
+  return await response.json();
+}
+
+const data = $derived(await getData(id));
+</script>
+```
+
+### createRawSnippet
+Create snippet programmatically.
+
+```ts
+function createRawSnippet<Params extends unknown[]>(
+  fn: (...params: Getters<Params>) => {
+    render: () => string;
+    setup?: (element: Element) => void | (() => void);
+  }
+): Snippet<Params>;
+```
+
+## TypeScript Types
+
+### Component
+Type for Svelte 5 components (functions, not classes).
+
+```ts
+interface Component<
+  Props extends Record<string, any> = {},
+  Exports extends Record<string, any> = {},
+  Bindings extends keyof Props | '' = string
+> {
+  (internals: ComponentInternals, props: Props): Exports;
+  element?: typeof HTMLElement; // if compiled with customElement
+}
+```
+
+**Example:**
+```ts
+import type { Component } from 'svelte';
+export declare const MyComponent: Component<{ foo: string }> {}
+```
+
+### ComponentProps
+Get props type from component.
+
+```ts
+import type { ComponentProps } from 'svelte';
+import MyComponent from './MyComponent.svelte';
+
+const props: ComponentProps<typeof MyComponent> = { foo: 'bar' };
+
+// Generic function
+function withProps<TComponent extends Component<any>>(
+  component: TComponent,
+  props: ComponentProps<TComponent>
+) {}
+```
+
+### Snippet
+Type for `#snippet` blocks.
+
+```ts
+interface Snippet<Parameters extends unknown[] = []> {
+  (...args: Parameters): typeof SnippetReturn;
+}
+
+// Usage
+let { banner }: { banner: Snippet<[{ text: string }]> } = $props();
+```
+
+Call snippets with `{@render ...}` tag only.
+
+## Deprecated (Svelte 4 Legacy)
+
+- ~~`SvelteComponent`~~ → Use `Component` type and `mount()` function
+- ~~`SvelteComponentTyped`~~ → Use `Component`
+- ~~`createEventDispatcher`~~ → Use callback props or `$host()` rune
+- ~~`ComponentConstructorOptions`~~ → Use `mount()`
+- ~~`ComponentType`~~ → Obsolete with new `Component` type
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/testing.md b/packages/mcp-server/summaries/distilled/svelte/testing.md
new file mode 100644
index 00000000..f631ea89
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/testing.md
@@ -0,0 +1,281 @@
+# Testing
+
+Svelte is unopinionated about testing frameworks. Use Vitest, Jasmine, Cypress, Playwright, etc. for unit, integration, and E2E tests.
+
+## Unit and Component Tests with Vitest
+
+### Setup
+
+Install Vitest:
+```sh
+npm install -D vitest
+```
+
+Configure `vite.config.js`:
+```js
+/// file: vite.config.js
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	// ...
+	// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node
+	resolve: process.env.VITEST
+		? {
+				conditions: ['browser']
+			}
+		: undefined
+});
+```
+
+### Unit Tests
+
+Test code in `.js/.ts` files:
+
+```js
+/// file: multiplier.svelte.test.js
+import { flushSync } from 'svelte';
+import { expect, test } from 'vitest';
+import { multiplier } from './multiplier.svelte.js';
+
+test('Multiplier', () => {
+	let double = multiplier(0, 2);
+
+	expect(double.value).toEqual(0);
+
+	double.set(5);
+
+	expect(double.value).toEqual(10);
+});
+```
+
+```js
+/// file: multiplier.svelte.js
+/**
+ * @param {number} initial
+ * @param {number} k
+ */
+export function multiplier(initial, k) {
+	let count = $state(initial);
+
+	return {
+		get value() {
+			return count * k;
+		},
+		/** @param {number} c */
+		set: (c) => {
+			count = c;
+		}
+	};
+}
+```
+
+### Using Runes in Tests
+
+Use runes in test files with `.svelte` extension:
+
+```js
+/// file: multiplier.svelte.test.js
+import { flushSync } from 'svelte';
+import { expect, test } from 'vitest';
+import { multiplier } from './multiplier.svelte.js';
+
+test('Multiplier', () => {
+	let count = $state(0);
+	let double = multiplier(() => count, 2);
+
+	expect(double.value).toEqual(0);
+
+	count = 5;
+
+	expect(double.value).toEqual(10);
+});
+```
+
+For code using effects, wrap tests in `$effect.root`:
+
+```js
+/// file: logger.svelte.test.js
+import { flushSync } from 'svelte';
+import { expect, test } from 'vitest';
+import { logger } from './logger.svelte.js';
+
+test('Effect', () => {
+	const cleanup = $effect.root(() => {
+		let count = $state(0);
+
+		// logger uses an $effect to log updates of its input
+		let log = logger(() => count);
+
+		// effects normally run after a microtask,
+		// use flushSync to execute all pending effects synchronously
+		flushSync();
+		expect(log).toEqual([0]);
+
+		count = 1;
+		flushSync();
+
+		expect(log).toEqual([0, 1]);
+	});
+
+	cleanup();
+});
+```
+
+### Component Testing
+
+**Note:** Consider testing logic separately from components when possible.
+
+Install jsdom:
+```sh
+npm install -D jsdom
+```
+
+Update `vite.config.js`:
+```js
+/// file: vite.config.js
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	plugins: [
+		/* ... */
+	],
+	test: {
+		// If you are testing components client-side, you need to setup a DOM environment.
+		// If not all your files should have this environment, you can use a
+		// `// @vitest-environment jsdom` comment at the top of the test files instead.
+		environment: 'jsdom'
+	},
+	// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node
+	resolve: process.env.VITEST
+		? {
+				conditions: ['browser']
+			}
+		: undefined
+});
+```
+
+Basic component test:
+
+```js
+/// file: component.test.js
+import { flushSync, mount, unmount } from 'svelte';
+import { expect, test } from 'vitest';
+import Component from './Component.svelte';
+
+test('Component', () => {
+	// Instantiate the component using Svelte's `mount` API
+	const component = mount(Component, {
+		target: document.body, // `document` exists because of jsdom
+		props: { initial: 0 }
+	});
+
+	expect(document.body.innerHTML).toBe('<button>0</button>');
+
+	// Click the button, then flush the changes so you can synchronously write expectations
+	document.body.querySelector('button').click();
+	flushSync();
+
+	expect(document.body.innerHTML).toBe('<button>1</button>');
+
+	// Remove the component from the DOM
+	unmount(component);
+});
+```
+
+Using [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/):
+
+```js
+/// file: component.test.js
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, test } from 'vitest';
+import Component from './Component.svelte';
+
+test('Component', async () => {
+	const user = userEvent.setup();
+	render(Component);
+
+	const button = screen.getByRole('button');
+	expect(button).toHaveTextContent(0);
+
+	await user.click(button);
+	expect(button).toHaveTextContent(1);
+});
+```
+
+For two-way bindings, context, or snippet props, create wrapper components for tests.
+
+## Component Tests with Storybook
+
+Storybook tests run with Vitest's browser mode in a real browser.
+
+Setup: `npx sv add storybook`
+
+Example with play function:
+
+```svelte
+/// file: LoginForm.stories.svelte
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect, fn } from 'storybook/test';
+
+	import LoginForm from './LoginForm.svelte';
+
+	const { Story } = defineMeta({
+		component: LoginForm,
+		args: {
+			// Pass a mock function to the `onSubmit` prop
+			onSubmit: fn(),
+		}
+	});
+</script>
+ 
+<Story name="Empty Form" />
+ 
+<Story
+	name="Filled Form"
+	play={async ({ args, canvas, userEvent }) => {
+		// Simulate a user filling out the form
+		await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+		await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+		await userEvent.click(canvas.getByRole('button'));
+
+		// Run assertions
+		await expect(args.onSubmit).toHaveBeenCalledTimes(1);
+		await expect(canvas.getByText('You're in!')).toBeInTheDocument();
+	}}
+/>
+```
+
+## E2E Tests with Playwright
+
+Setup via Svelte CLI or `npm init playwright`.
+
+Configure to start app before tests:
+
+```js
+/// file: playwright.config.js
+const config = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;
+```
+
+Write tests that interact with DOM:
+
+```js
+// @errors: 2307 7031
+/// file: tests/hello-world.spec.js
+import { expect, test } from '@playwright/test';
+
+test('home page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('h1')).toBeVisible();
+});
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/transition.md b/packages/mcp-server/summaries/distilled/svelte/transition.md
new file mode 100644
index 00000000..882551c3
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/transition.md
@@ -0,0 +1,154 @@
+# Transitions
+
+Transitions trigger when elements enter/leave the DOM due to state changes. Use `transition:` directive for bidirectional transitions.
+
+```svelte
+<script>
+	import { fade } from 'svelte/transition';
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => visible = !visible}>toggle</button>
+
+{#if visible}
+	<div transition:fade>fades in and out</div>
+{/if}
+```
+
+**Key behavior:** When a block transitions out, all elements inside remain in DOM until all transitions complete.
+
+## Local vs Global
+
+**Local (default):** Transitions play only when their own block is created/destroyed.
+
+**Global:** Transitions play when any parent block changes.
+
+```svelte
+{#if x}
+	{#if y}
+		<p transition:fade>fades in and out only when y changes</p>
+
+		<p transition:fade|global>fades in and out when x or y change</p>
+	{/if}
+{/if}
+```
+
+## Built-in Transitions
+
+Import from `svelte/transition` module.
+
+## Parameters
+
+Pass parameters using object literal:
+
+```svelte
+{#if visible}
+	<div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div>
+{/if}
+```
+
+## Custom Transition Functions
+
+```js
+transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
+	delay?: number,
+	duration?: number,
+	easing?: (t: number) => number,
+	css?: (t: number, u: number) => string,
+	tick?: (t: number, u: number) => void
+}
+```
+
+**`css` function:** Generates web animation keyframes. `t` = `0` to `1` (after easing), `u` = `1 - t`. For _in_ transitions: `0`→`1`. For _out_: `1`→`0`. Value `1` = element's natural state.
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { elasticOut } from 'svelte/easing';
+
+	/** @type {boolean} */
+	export let visible;
+
+	/**
+	 * @param {HTMLElement} node
+	 * @param {{ delay?: number, duration?: number, easing?: (t: number) => number }} params
+	 */
+	function whoosh(node, params) {
+		const existingTransform = getComputedStyle(node).transform.replace('none', '');
+
+		return {
+			delay: params.delay || 0,
+			duration: params.duration || 400,
+			easing: params.easing || elasticOut,
+			css: (t, u) => `transform: ${existingTransform} scale(${t})`
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:whoosh>whooshes in</div>
+{/if}
+```
+
+**`tick` function:** Called during transition with same `t`/`u` arguments. Prefer `css` over `tick` - web animations run off main thread.
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	export let visible = false;
+
+	/**
+	 * @param {HTMLElement} node
+	 * @param {{ speed?: number }} params
+	 */
+	function typewriter(node, { speed = 1 }) {
+		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
+
+		if (!valid) {
+			throw new Error(`This transition only works on elements with a single text node child`);
+		}
+
+		const text = node.textContent;
+		const duration = text.length / (speed * 0.01);
+
+		return {
+			duration,
+			tick: (t) => {
+				const i = ~~(text.length * t);
+				node.textContent = text.slice(0, i);
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>
+{/if}
+```
+
+**Returning a function:** Enables crossfade effects by coordinating multiple transitions (called in next microtask).
+
+**`options` parameter:** Contains `direction` (`'in'`, `'out'`, or `'both'`).
+
+## Transition Events
+
+Elements with transitions dispatch:
+- `introstart`
+- `introend`
+- `outrostart`
+- `outroend`
+
+```svelte
+{#if visible}
+	<p
+		transition:fly={{ y: 200, duration: 2000 }}
+		onintrostart={() => (status = 'intro started')}
+		onoutrostart={() => (status = 'outro started')}
+		onintroend={() => (status = 'intro ended')}
+		onoutroend={() => (status = 'outro ended')}
+	>
+		Flies in and out
+	</p>
+{/if}
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/typescript.md b/packages/mcp-server/summaries/distilled/svelte/typescript.md
new file mode 100644
index 00000000..266e3ff5
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/typescript.md
@@ -0,0 +1,216 @@
+# TypeScript in Svelte
+
+## `<script lang="ts">`
+
+Add `lang="ts"` to use TypeScript:
+
+```svelte
+<script lang="ts">
+	let name: string = 'world';
+
+	function greet(name: string) {
+		alert(`Hello, ${name}!`);
+	}
+</script>
+
+<button onclick={(e: Event) => greet(e.target.innerText)}>
+	{name as string}
+</button>
+```
+
+**Limitation**: Only _type-only_ features supported (types, interfaces). Not supported:
+- Enums
+- `private`/`protected`/`public` with initializers
+- Non-stage-4 ECMAScript features
+
+For these, use a preprocessor.
+
+## Preprocessor Setup
+
+```ts
+/// file: svelte.config.js
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+const config = {
+	preprocess: vitePreprocess({ script: true })
+};
+
+export default config;
+```
+
+**Recommended**: Use `npx sv create` (SvelteKit) or `npm create vite@latest` (Vite with `svelte-ts`).
+
+## tsconfig.json
+
+Required settings:
+- `target`: `ES2015` minimum
+- `verbatimModuleSyntax`: `true`
+- `isolatedModules`: `true`
+
+## Typing `$props`
+
+```svelte
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		requiredProperty: number;
+		optionalProperty?: boolean;
+		snippetWithStringArgument: Snippet<[string]>;
+		eventHandler: (arg: string) => void;
+		[key: string]: unknown;
+	}
+
+	let {
+		requiredProperty,
+		optionalProperty,
+		snippetWithStringArgument,
+		eventHandler,
+		...everythingElse
+	}: Props = $props();
+</script>
+
+<button onclick={() => eventHandler('clicked button')}>
+	{@render snippetWithStringArgument('hello')}
+</button>
+```
+
+## Generic `$props`
+
+Use `generics` attribute for type relationships:
+
+```svelte
+<script lang="ts" generics="Item extends { text: string }">
+	interface Props {
+		items: Item[];
+		select(item: Item): void;
+	}
+
+	let { items, select }: Props = $props();
+</script>
+
+{#each items as item}
+	<button onclick={() => select(item)}>
+		{item.text}
+	</button>
+{/each}
+```
+
+## Typing Wrapper Components
+
+Use `svelte/elements` types:
+
+```svelte
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	let { children, ...rest }: HTMLButtonAttributes = $props();
+</script>
+
+<button {...rest}>
+	{@render children?.()}
+</button>
+```
+
+For elements without dedicated types:
+
+```svelte
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	let { children, ...rest }: SvelteHTMLElements['div'] = $props();
+</script>
+
+<div {...rest}>
+	{@render children?.()}
+</div>
+```
+
+## Typing `$state`
+
+```ts
+let count: number = $state(0);
+```
+
+Without initial value, type includes `undefined`. Use `as` casting if you know it will be defined:
+
+```ts
+class Counter {
+	count = $state() as number;
+	constructor(initial: number) {
+		this.count = initial;
+	}
+}
+```
+
+## The `Component` Type
+
+Constrain dynamic components:
+
+```svelte
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	interface Props {
+		DynamicComponent: Component<{ prop: string }>;
+	}
+
+	let { DynamicComponent }: Props = $props();
+</script>
+
+<DynamicComponent prop="foo" />
+```
+
+Extract props with `ComponentProps`:
+
+```ts
+import type { Component, ComponentProps } from 'svelte';
+import MyComponent from './MyComponent.svelte';
+
+function withProps<TComponent extends Component<any>>(
+	component: TComponent,
+	props: ComponentProps<TComponent>
+) {}
+
+withProps(MyComponent, { foo: 'bar' });
+```
+
+Constructor/instance types:
+
+```svelte
+<script lang="ts">
+	import MyComponent from './MyComponent.svelte';
+
+	let componentConstructor: typeof MyComponent = MyComponent;
+	let componentInstance: MyComponent;
+</script>
+
+<MyComponent bind:this={componentInstance} />
+```
+
+## Enhancing DOM Types
+
+Augment `svelte/elements` for custom/experimental attributes:
+
+```ts
+/// file: additional-svelte-typings.d.ts
+import { HTMLButtonAttributes } from 'svelte/elements';
+
+declare module 'svelte/elements' {
+	export interface SvelteHTMLElements {
+		'custom-button': HTMLButtonAttributes;
+	}
+
+	export interface HTMLAttributes<T> {
+		globalattribute?: string;
+	}
+
+	export interface HTMLButtonAttributes {
+		veryexperimentalattribute?: string;
+	}
+}
+
+export {};
+```
+
+Ensure file is in `tsconfig.json` `include` path.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/use.md b/packages/mcp-server/summaries/distilled/svelte/use.md
new file mode 100644
index 00000000..c443a6b9
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/use.md
@@ -0,0 +1,77 @@
+# Actions
+
+> **Note:** Svelte 5.29+ recommends using [attachments](@attach) instead for better flexibility and composability.
+
+Actions are functions called when an element mounts. Added with `use:` directive. Typically use `$effect` for cleanup on unmount:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	/** @type {import('svelte/action').Action} */
+	function myaction(node) {
+		// node mounted in DOM
+
+		$effect(() => {
+			// setup goes here
+
+			return () => {
+				// teardown goes here
+			};
+		});
+	}
+</script>
+
+<div use:myaction>...</div>
+```
+
+## With Arguments
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	/** @type {import('svelte/action').Action} */
+	function myaction(node, data) {
+		// ...
+	}
+</script>
+
+<div use:myaction={data}>...</div>
+```
+
+**Key:** Action called once on mount (not SSR). Does NOT re-run if argument changes.
+
+## Typing
+
+`Action<NodeType, Parameter, CustomEvents>`:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	/**
+	 * @type {import('svelte/action').Action<
+	 * 	HTMLDivElement,
+	 * 	undefined,
+	 * 	{
+	 * 		onswiperight: (e: CustomEvent) => void;
+	 * 		onswipeleft: (e: CustomEvent) => void;
+	 * 		// ...
+	 * 	}
+	 * >}
+	 */
+	function gestures(node) {
+		$effect(() => {
+			// ...
+			node.dispatchEvent(new CustomEvent('swipeleft'));
+
+			// ...
+			node.dispatchEvent(new CustomEvent('swiperight'));
+		});
+	}
+</script>
+
+<div
+	use:gestures
+	onswipeleft={next}
+	onswiperight={prev}
+>...</div>
+```
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/v4-migration-guide.md b/packages/mcp-server/summaries/distilled/svelte/v4-migration-guide.md
new file mode 100644
index 00000000..69787670
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/v4-migration-guide.md
@@ -0,0 +1,236 @@
+# Svelte 3 to 4 Migration Guide
+
+Migration script: `npx svelte-migrate@latest svelte-4`
+
+## Minimum Requirements
+
+- Node 16+
+- SvelteKit 1.20.4+
+- `vite-plugin-svelte` 2.4.1+ (Vite without SvelteKit)
+- webpack 5+ and `svelte-loader` 3.1.8+
+- `rollup-plugin-svelte` 7.1.5+
+- TypeScript 5+
+
+## Browser Conditions for Bundlers
+
+Bundlers must specify `browser` condition for frontend bundles or lifecycle callbacks like `onMount` won't work.
+
+- **Rollup**: Set `browser: true` in `@rollup/plugin-node-resolve`
+- **webpack**: Add `"browser"` to `conditionNames` array
+
+## CJS Output Removed
+
+No more CommonJS format, `svelte/register` hook, or CJS runtime. Use a bundler to convert ESM to CJS if needed.
+
+## Stricter Types
+
+### `createEventDispatcher`
+
+Now enforces optional/required/non-existent payloads:
+
+```ts
+// @errors: 2554 2345
+import { createEventDispatcher } from 'svelte';
+
+const dispatch = createEventDispatcher<{
+	optional: number | null;
+	required: string;
+	noArgument: null;
+}>();
+
+// Svelte version 3:
+dispatch('optional');
+dispatch('required'); // I can still omit the detail argument
+dispatch('noArgument', 'surprise'); // I can still add a detail argument
+
+// Svelte version 4 using TypeScript strict mode:
+dispatch('optional');
+dispatch('required'); // error, missing argument
+dispatch('noArgument', 'surprise'); // error, cannot pass an argument
+```
+
+### `Action` and `ActionReturn`
+
+Default parameter type is now `undefined`. Must type generic if action receives parameters:
+
+```ts
+// @noErrors
+const action: Action = (node, params) => { ... } // this is now an error if you use params in any way
+const action: Action<HTMLElement, string> = (node, params) => { ... } // params is of type string
+```
+
+### `onMount`
+
+Type error if returning function asynchronously (reveals bugs where cleanup won't be called):
+
+```js
+// @noErrors
+// Example where this change reveals an actual bug
+onMount(
+	// someCleanup() not called because function handed to onMount is async
+	async () => {
+		const something = await foo();
+		// ...
+		return () => someCleanup();
+	}
+);
+```
+
+## Custom Elements
+
+`tag` option deprecated, use `customElement`:
+
+```svelte
+<svelte:options tag="my-component" />
+<svelte:options customElement="my-component" />
+```
+
+## `SvelteComponentTyped` Deprecated
+
+Replace with `SvelteComponent`:
+
+```js
+import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
+
+export class Foo extends SvelteComponentTyped<{ aProp: string }> {}
+export class Foo extends SvelteComponent<{ aProp: string }> {}
+```
+
+For component instance types, change `: typeof SvelteComponent` to `: typeof SvelteComponent<any>`:
+
+```svelte
+<script>
+	import ComponentA from './ComponentA.svelte';
+	import ComponentB from './ComponentB.svelte';
+	import { SvelteComponent } from 'svelte';
+
+	let component: typeof SvelteComponent<any>;
+
+	function choseRandomly() {
+		component = Math.random() > 0.5 ? ComponentA : ComponentB;
+	}
+</script>
+
+<button on:click={choseRandomly}>random</button>
+<svelte:element this={component} />
+```
+
+## Transitions Local by Default
+
+Transitions only play when direct parent block is created/destroyed, not ancestor blocks:
+
+```svelte
+{#if show}
+	...
+	{#if success}
+		<p in:slide>Success</p>
+	{/each}
+{/if}
+```
+
+Use `|global` modifier for old behavior. Migration script adds this automatically.
+
+## Default Slot Bindings
+
+Default slot bindings not exposed to named slots and vice versa:
+
+```svelte
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:count>
+	<p>
+		count in default slot - is available: {count}
+	</p>
+	<p slot="bar">
+		count in bar slot - is not available: {count}
+	</p>
+</Nested>
+```
+
+## Preprocessors
+
+Execute in order: markup → script → style within each preprocessor group:
+
+```js
+// @errors: 2304
+import { preprocess } from 'svelte/compiler';
+
+const { code } = await preprocess(
+	source,
+	[
+		{
+			markup: () => {
+				console.log('markup-1');
+			},
+			script: () => {
+				console.log('script-1');
+			},
+			style: () => {
+				console.log('style-1');
+			}
+		},
+		{
+			markup: () => {
+				console.log('markup-2');
+			},
+			script: () => {
+				console.log('script-2');
+			},
+			style: () => {
+				console.log('style-2');
+			}
+		}
+	],
+	{
+		filename: 'App.svelte'
+	}
+);
+
+// Svelte 3 logs:
+// markup-1
+// markup-2
+// script-1
+// script-2
+// style-1
+// style-2
+
+// Svelte 4 logs:
+// markup-1
+// script-1
+// style-1
+// markup-2
+// script-2
+// style-2
+```
+
+Put MDsveX before script/style preprocessors:
+
+```js
+// @noErrors
+preprocess: [
+	vitePreprocess(),
+	mdsvex(mdsvexConfig)
+	mdsvex(mdsvexConfig),
+	vitePreprocess()
+]
+```
+
+Each preprocessor must have a name.
+
+## ESLint
+
+`eslint-plugin-svelte3` deprecated. Use [eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte).
+
+## Other Breaking Changes
+
+- `inert` attribute applied to outroing elements
+- Runtime uses `classList.toggle(name, boolean)` (polyfill for old browsers)
+- Runtime uses `CustomEvent` constructor (polyfill for old browsers)
+- `StartStopNotifier` interface requires update function in addition to set function
+- `derived` throws error on falsy values instead of stores
+- `svelte/internal` type definitions removed
+- DOM node removal batched (affects `MutationObserver` event order)
+- `svelte.JSX` namespace → `svelteHTML` namespace; use types from `svelte/elements`
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/v5-migration-guide.md b/packages/mcp-server/summaries/distilled/svelte/v5-migration-guide.md
new file mode 100644
index 00000000..e931b5f5
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/v5-migration-guide.md
@@ -0,0 +1,653 @@
+# Svelte 5 Migration Guide
+
+Svelte 5 supports Svelte 4 syntax - you can mix old and new components. A migration script helps automate upgrades: `npx sv migrate svelte-5`.
+
+## Reactivity Syntax Changes
+
+### `let` → `$state`
+
+```svelte
+<script>
+	let count = $state(0);
+</script>
+```
+
+`$state` makes reactivity explicit. The variable is still the value itself, no wrapper needed.
+
+### `$:` → `$derived`/`$effect`
+
+**Derivations:**
+```svelte
+<script>
+	let count = $state(0);
+	const double = $derived(count * 2);
+</script>
+```
+
+**Side effects:**
+```svelte
+<script>
+	let count = $state(0);
+
+	$effect(() => {
+		if (count > 5) {
+			alert('Count is too high!');
+		}
+	});
+</script>
+```
+
+Note: `$effect` runs differently than `$:`.
+
+### `export let` → `$props`
+
+```svelte
+<script>
+	let { optional = 'unset', required } = $props();
+</script>
+```
+
+**Renaming, rest props, all props:**
+```svelte
+<script>
+	let { class: klass, ...rest } = $props();
+</script>
+<button class={klass} {...rest}>click me</button>
+```
+
+## Event Changes
+
+### Event handlers are properties
+
+```svelte
+<script>
+	let count = $state(0);
+</script>
+
+<button onclick={() => count++}>
+	clicks: {count}
+</button>
+```
+
+Shorthand works:
+```svelte
+<script>
+	let count = $state(0);
+
+	function onclick() {
+		count++;
+	}
+</script>
+
+<button {onclick}>
+	clicks: {count}
+</button>
+```
+
+### Component events
+
+Replace `createEventDispatcher` with callback props:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Pump from './Pump.svelte';
+
+	let size = $state(15);
+	let burst = $state(false);
+
+	function reset() {
+		size = 15;
+		burst = false;
+	}
+</script>
+
+<Pump
+	inflate={(power) => {
+		size += power;
+		if (size > 75) burst = true;
+	}}
+	deflate={(power) => {
+		if (size > 0) size -= power;
+	}}
+/>
+
+{#if burst}
+	<button onclick={reset}>new balloon</button>
+	<span class="boom">💥</span>
+{:else}
+	<span class="balloon" style="scale: {0.01 * size}">
+		🎈
+	</span>
+{/if}
+```
+
+```svelte
+<!--- file: Pump.svelte --->
+<script>
+	let { inflate, deflate } = $props();
+	let power = $state(5);
+</script>
+
+<button onclick={() => inflate(power)}>
+	inflate
+</button>
+<button onclick={() => deflate(power)}>
+	deflate
+</button>
+<button onclick={() => power--}>-</button>
+Pump power: {power}
+<button onclick={() => power++}>+</button>
+```
+
+### Bubbling events
+
+Accept callback prop instead of forwarding:
+
+```svelte
+<script>
+	let { onclick } = $props();
+</script>
+
+<button {onclick}>
+	click me
+</button>
+```
+
+Spread all props including handlers:
+```svelte
+<script>
+	let props = $props();
+</script>
+
+<button {...props}>
+	click me
+</button>
+```
+
+### Event modifiers
+
+No modifiers on event attributes. Add logic inside handler or create wrappers:
+
+```svelte
+<script>
+	function once(fn) {
+		return function (event) {
+			if (fn) fn.call(this, event);
+			fn = null;
+		};
+	}
+
+	function preventDefault(fn) {
+		return function (event) {
+			event.preventDefault();
+			fn.call(this, event);
+		};
+	}
+</script>
+
+<button onclick={once(preventDefault(handler))}>...</button>
+```
+
+For `capture`, add to event name:
+```svelte
+<button onclickcapture={...}>...</button>
+```
+
+### Multiple event handlers
+
+```svelte
+<button
+	onclick={(e) => {
+		one(e);
+		two(e);
+	}}
+>
+	...
+</button>
+```
+
+When spreading, local handlers go after:
+```svelte
+<button
+	{...props}
+	onclick={(e) => {
+		doStuff(e);
+		props.onclick?.(e);
+	}}
+>
+	...
+</button>
+```
+
+## Snippets Instead of Slots
+
+Slots are deprecated. Snippets work with components using slots, but not vice versa.
+
+### Default content
+
+```svelte
+<script>
+	let { children } = $props();
+</script>
+
+{@render children?.()}
+```
+
+### Multiple placeholders
+
+```svelte
+<script>
+	let { header, main, footer } = $props();
+</script>
+
+<header>
+	{@render header()}
+</header>
+
+<main>
+	{@render main()}
+</main>
+
+<footer>
+	{@render footer()}
+</footer>
+```
+
+### Passing data back
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import List from './List.svelte';
+</script>
+
+<List items={['one', 'two', 'three']}>
+	{#snippet item(text)}
+		<span>{text}</span>
+	{/snippet}
+	{#snippet empty()}
+		<span>No items yet</span>
+	{/snippet}
+</List>
+```
+
+```svelte
+<!--- file: List.svelte --->
+<script>
+	let { items, item, empty } = $props();
+</script>
+
+{#if items.length}
+	<ul>
+		{#each items as entry}
+			<li>
+				{@render item(entry)}
+			</li>
+		{/each}
+	</ul>
+{:else}
+	{@render empty?.()}
+{/if}
+```
+
+## Migration Script
+
+Run `npx sv migrate svelte-5` to automatically:
+- Bump dependencies
+- Migrate to runes
+- Migrate to event attributes
+- Migrate slots to render tags
+- Migrate slot usages to snippets
+- Migrate component instantiation
+
+### `run` function
+
+Migration script may convert `$:` to `run` (from `svelte/legacy`) when it can't determine if it's a derivation or side effect. Usually should be changed to `$derived` or `$effect`:
+
+```svelte
+<script>
+	$effect(() => {
+		// some side effect code
+	})
+</script>
+```
+
+### Event modifiers
+
+Imported from `svelte/legacy`, should be replaced with manual logic:
+
+```svelte
+<script>
+</script>
+
+<button
+	onclick={(event) => {
+		event.preventDefault();
+		// ...
+	}}
+>
+	click me
+</button>
+```
+
+### Not auto-migrated
+
+- `createEventDispatcher` - too risky, manual migration needed
+- `beforeUpdate/afterUpdate` - use `$effect.pre` and `tick` instead
+
+## Components Are No Longer Classes
+
+Use `mount` or `hydrate` instead of `new Component()`:
+
+```js
+import { mount } from 'svelte';
+import App from './App.svelte'
+
+const app = mount(App, { target: document.getElementById("app") });
+
+export default app;
+```
+
+### Replacements for class methods
+
+**`$on` → `events` option:**
+```js
+import { mount } from 'svelte';
+import App from './App.svelte'
+
+const app = mount(App, { target: document.getElementById("app"), events: { event: callback } });
+```
+
+**`$set` → `$state`:**
+```js
+import { mount } from 'svelte';
+import App from './App.svelte'
+
+const props = $state({ foo: 'bar' });
+const app = mount(App, { target: document.getElementById("app"), props });
+props.foo = 'baz';
+```
+
+**`$destroy` → `unmount`:**
+```js
+import { mount, unmount } from 'svelte';
+import App from './App.svelte'
+
+const app = mount(App, { target: document.getElementById("app") });
+unmount(app);
+```
+
+**Stop-gap:** Use `createClassComponent` or `asClassComponent` from `svelte/legacy`, or set `compatibility.componentApi: 4` compiler option.
+
+**Note:** `mount`/`hydrate` are not synchronous. Call `flushSync()` after if you need guarantees.
+
+### Server API
+
+```js
+import { render } from 'svelte/server';
+import App from './App.svelte';
+
+const { html, head } = render(App, { props: { message: 'hello' }});
+```
+
+CSS no longer returned by default. Set `css: 'injected'` compiler option if needed.
+
+### Component typing
+
+```ts
+import type { Component } from 'svelte';
+export declare const MyComponent: Component<{
+	foo: string;
+}>;
+```
+
+```js
+import { ComponentA, ComponentB } from 'component-library';
+import type { Component } from 'svelte';
+
+let C: Component<{ foo: string }> = $state(
+	Math.random() ? ComponentA : ComponentB
+);
+```
+
+`ComponentEvents` and `ComponentType` are deprecated.
+
+### `bind:this` changes
+
+No longer returns `$set`, `$on`, `$destroy`. Only returns instance exports and accessors (if `accessors: true`).
+
+## `<svelte:component>` No Longer Necessary
+
+Components are now dynamic by default:
+
+```svelte
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	let Thing = $state();
+</script>
+
+<select bind:value={Thing}>
+	<option value={A}>A</option>
+	<option value={B}>B</option>
+</select>
+
+<!-- these are equivalent -->
+<Thing />
+<svelte:component this={Thing} />
+```
+
+Component names should be capitalized or use dot notation.
+
+### Dot notation indicates component
+
+```svelte
+{#each items as item}
+	<item.component {...item.props} />
+{/each}
+```
+
+## Whitespace Handling Changed
+
+Rules:
+- Whitespace between nodes collapses to one
+- Whitespace at start/end of tags removed
+- Exceptions like `<pre>` tags apply
+
+Use `preserveWhitespace` option to disable trimming.
+
+## Modern Browser Required
+
+Svelte 5 requires:
+- `Proxy` support
+- `ResizeObserver` for dimension bindings
+- `input` event for range inputs
+
+No IE support. `legacy` compiler option repurposed.
+
+## Compiler Options Changes
+
+- `css` option: removed `false`/`true`/`"none"` values
+- `legacy` repurposed
+- `hydratable` removed (always hydratable)
+- `enableSourcemap` removed (always generated)
+- `tag` removed (use `<svelte:options customElement="tag-name" />`)
+- `loopGuardTimeout`, `format`, `sveltePath`, `errorMode`, `varsReport` removed
+
+## Reserved Props
+
+`children` prop is reserved for content snippets.
+
+## Breaking Changes in Runes Mode
+
+### No binding to component exports
+
+Can't do `<A bind:foo />` on exports. Use `bind:this` instead:
+
+```svelte
+<A bind:this={a} />
+<!-- access as a.foo -->
+```
+
+### Bindings need `$bindable()`
+
+Props not bindable by default. Use `$bindable` rune:
+
+```svelte
+<script>
+	let { foo = $bindable('bar') } = $props();
+</script>
+```
+
+Must pass non-`undefined` value when binding to props with defaults.
+
+### `accessors` option ignored
+
+Properties never accessible on instance. Use component exports:
+
+```svelte
+<script>
+	let { name } = $props();
+	export const getName = () => name;
+</script>
+```
+
+Or use `$state` in `.svelte.js`/`.svelte.ts` files:
+
+```js
+import { mount } from 'svelte';
+import App from './App.svelte'
+
+const props = $state({ foo: 'bar' });
+const app = mount(App, { target: document.getElementById("app"), props });
+props.foo = 'baz';
+```
+
+### `immutable` option ignored
+
+Replaced by `$state` behavior.
+
+### Classes not auto-reactive
+
+Define reactive fields with `$state` inside class. Wrapping `new Foo()` with `$state(...)` has no effect.
+
+### Touch/wheel events passive
+
+`onwheel`, `onmousewheel`, `ontouchstart`, `ontouchmove` are passive by default. Use `on` from `svelte/events` for non-passive.
+
+### Stricter attribute/prop syntax
+
+Must quote concatenated values:
+
+```svelte
+<Component prop="this{is}valid" />
+```
+
+### Stricter HTML structure
+
+Browser-repaired HTML now causes compiler errors. Write valid HTML.
+
+## Other Breaking Changes
+
+### Stricter `@const` validation
+
+Can't assign to destructured parts of `@const`.
+
+### `:is()`, `:has()`, `:where()` scoped
+
+Now analyzed in component context. Use `:global(...)` inside if needed:
+
+```css
+main :global {
+	@apply bg-blue-100 dark:bg-blue-900;
+}
+```
+
+### CSS hash position non-deterministic
+
+Hash no longer guaranteed to be last.
+
+### Scoped CSS uses `:where(...)`
+
+Selectors now use `:where(.svelte-xyz123)` alongside `.svelte-xyz123`.
+
+For ancient browsers:
+```js
+// @errors: 2552
+css = css.replace(/:where\((.+?)\)/, '$1');
+```
+
+### Error/warning codes renamed
+
+Dashes replaced with underscores (e.g., `foo-bar` → `foo_bar`).
+
+### Reduced namespaces
+
+Valid namespaces: `html` (default), `mathml`, `svg`. `foreign` removed.
+
+### `beforeUpdate`/`afterUpdate` changes
+
+- `beforeUpdate` no longer runs twice on initial render
+- `afterUpdate` in parent runs after child's
+- Don't run when `<slot>` content updates
+- Disallowed in runes mode (use `$effect.pre`/`$effect`)
+
+### `contenteditable` behavior
+
+Binding takes full control - reactive values inside won't update.
+
+### `oneventname` no string values
+
+Can't use `<button onclick="alert('hello')">` anymore.
+
+### `null`/`undefined` become empty string
+
+No longer printed as strings.
+
+### `bind:files` values restricted
+
+Must be `null`, `undefined`, or `FileList`.
+
+### Bindings react to form resets
+
+Now properly sync with DOM on form reset.
+
+### `walk` no longer exported
+
+Import from `estree-walker` directly.
+
+### Content inside `<svelte:options>` forbidden
+
+Compiler error if content present.
+
+### `<slot>` preserved in shadow roots
+
+Preserved when child of `<template shadowrootmode="...">`.
+
+### `<svelte:element>` needs expression
+
+```svelte
+<svelte:element this={"div"}>
+```
+
+### `mount` plays transitions by default
+
+Set `intro: false` to disable.
+
+### Hydration mismatches not repaired
+
+`<img src>` and `{@html}` mismatches warn in dev but don't auto-repair. Force update manually if needed.
+
+### Hydration uses comments
+
+Don't remove comments from SSR HTML. Manually authored HTML needs adjustment.
+
+### `onevent` attributes delegated
+
+Some events delegated - don't stop propagation manually.
+
+### `--style-props` uses different element
+
+Uses `<svelte-css-wrapper>` instead of `<div>`.
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/distilled/svelte/what-are-runes.md b/packages/mcp-server/summaries/distilled/svelte/what-are-runes.md
new file mode 100644
index 00000000..fd51f715
--- /dev/null
+++ b/packages/mcp-server/summaries/distilled/svelte/what-are-runes.md
@@ -0,0 +1,17 @@
+# Runes
+
+Runes are symbols that control the Svelte compiler in `.svelte` and `.svelte.js`/`.svelte.ts` files. They are keywords, not functions.
+
+## Syntax
+
+Runes have a `$` prefix and look like functions:
+
+```js
+let message = $state('hello');
+```
+
+## Key Characteristics
+
+- **No import needed** — they are globals
+- **Not values** — cannot be assigned to variables or passed as arguments
+- **Position-specific** — only valid in certain positions (compiler enforces this)
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/devtools-json.md b/packages/mcp-server/summaries/use_cases/cli/devtools-json.md
new file mode 100644
index 00000000..2c8ccfde
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/devtools-json.md
@@ -0,0 +1 @@
+development, debugging, chrome devtools, editing source files in browser, workspace setup, dev server configuration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/drizzle.md b/packages/mcp-server/summaries/use_cases/cli/drizzle.md
new file mode 100644
index 00000000..0c89a7f2
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/drizzle.md
@@ -0,0 +1 @@
+database setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/eslint.md b/packages/mcp-server/summaries/use_cases/cli/eslint.md
new file mode 100644
index 00000000..9e63f2b2
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/eslint.md
@@ -0,0 +1 @@
+code quality, linting, error detection, project setup, code standards, team collaboration, typescript projects
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/faq.md b/packages/mcp-server/summaries/use_cases/cli/faq.md
new file mode 100644
index 00000000..355de557
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/faq.md
@@ -0,0 +1 @@
+project setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/lucia.md b/packages/mcp-server/summaries/use_cases/cli/lucia.md
new file mode 100644
index 00000000..b3e79ead
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/lucia.md
@@ -0,0 +1 @@
+authentication, login systems, user management, registration pages, session handling, security setup
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/mdsvex.md b/packages/mcp-server/summaries/use_cases/cli/mdsvex.md
new file mode 100644
index 00000000..c2a4ba69
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/mdsvex.md
@@ -0,0 +1 @@
+blog, content sites, markdown rendering, documentation sites, technical writing, cms integration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/overview.md b/packages/mcp-server/summaries/use_cases/cli/overview.md
new file mode 100644
index 00000000..763f7905
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/overview.md
@@ -0,0 +1 @@
+project setup, creating new svelte apps, cli tooling, scaffolding projects, maintaining svelte applications
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/paraglide.md b/packages/mcp-server/summaries/use_cases/cli/paraglide.md
new file mode 100644
index 00000000..4c50c3ef
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/paraglide.md
@@ -0,0 +1 @@
+internationalization, multi-language sites, i18n, translation, localization, language switching, global apps
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/playwright.md b/packages/mcp-server/summaries/use_cases/cli/playwright.md
new file mode 100644
index 00000000..e3c51a70
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/playwright.md
@@ -0,0 +1 @@
+browser testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/prettier.md b/packages/mcp-server/summaries/use_cases/cli/prettier.md
new file mode 100644
index 00000000..d325effd
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/prettier.md
@@ -0,0 +1 @@
+code formatting, project setup, code style consistency, team collaboration, linting configuration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/storybook.md b/packages/mcp-server/summaries/use_cases/cli/storybook.md
new file mode 100644
index 00000000..ac888aa0
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/storybook.md
@@ -0,0 +1 @@
+component development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/sv-add.md b/packages/mcp-server/summaries/use_cases/cli/sv-add.md
new file mode 100644
index 00000000..136053f0
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/sv-add.md
@@ -0,0 +1 @@
+project setup, adding tools, integrating libraries, linting, testing, styling, authentication, database setup, i18n, deployment adapters
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/sv-check.md b/packages/mcp-server/summaries/use_cases/cli/sv-check.md
new file mode 100644
index 00000000..18c1868f
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/sv-check.md
@@ -0,0 +1 @@
+code quality checks, ci/cd pipelines, error detection, typescript projects, accessibility auditing, unused css cleanup, pre-commit hooks, project validation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/sv-create.md b/packages/mcp-server/summaries/use_cases/cli/sv-create.md
new file mode 100644
index 00000000..439d7278
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/sv-create.md
@@ -0,0 +1 @@
+project setup, initializing new sveltekit app, starting fresh project, creating library package
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/sv-migrate.md b/packages/mcp-server/summaries/use_cases/cli/sv-migrate.md
new file mode 100644
index 00000000..54308321
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/sv-migrate.md
@@ -0,0 +1 @@
+upgrading svelte versions, migrating to svelte 5, sveltekit version upgrades, codebase modernization, runes migration, legacy project updates
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/sveltekit-adapter.md b/packages/mcp-server/summaries/use_cases/cli/sveltekit-adapter.md
new file mode 100644
index 00000000..655d0da7
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/sveltekit-adapter.md
@@ -0,0 +1 @@
+deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/tailwind.md b/packages/mcp-server/summaries/use_cases/cli/tailwind.md
new file mode 100644
index 00000000..1eccd3c0
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/tailwind.md
@@ -0,0 +1 @@
+project setup, styling, utility-first css, rapid prototyping, responsive design, forms, typography, prettier integration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/cli/vitest.md b/packages/mcp-server/summaries/use_cases/cli/vitest.md
new file mode 100644
index 00000000..4846985b
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/cli/vitest.md
@@ -0,0 +1 @@
+testing, unit tests, component testing, test setup, quality assurance, ci/cd pipelines
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$app-environment.md b/packages/mcp-server/summaries/use_cases/kit/$app-environment.md
new file mode 100644
index 00000000..30ee2944
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$app-environment.md
@@ -0,0 +1 @@
+always, conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$app-forms.md b/packages/mcp-server/summaries/use_cases/kit/$app-forms.md
new file mode 100644
index 00000000..acc5acae
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$app-forms.md
@@ -0,0 +1 @@
+forms, user input, data submission, progressive enhancement, custom form handling, form validation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$app-navigation.md b/packages/mcp-server/summaries/use_cases/kit/$app-navigation.md
new file mode 100644
index 00000000..0543d696
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$app-navigation.md
@@ -0,0 +1 @@
+routing, navigation, multi-page apps, programmatic navigation, navigation lifecycle, data revalidation, preloading, shallow routing, navigation guards
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$app-paths.md b/packages/mcp-server/summaries/use_cases/kit/$app-paths.md
new file mode 100644
index 00000000..93c96ff8
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$app-paths.md
@@ -0,0 +1 @@
+static assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$app-server.md b/packages/mcp-server/summaries/use_cases/kit/$app-server.md
new file mode 100644
index 00000000..7a9bd44a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$app-server.md
@@ -0,0 +1 @@
+remote functions, server-side logic, data fetching, form handling, mutations, prerendering, static site generation, reading assets, batch queries
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$app-state.md b/packages/mcp-server/summaries/use_cases/kit/$app-state.md
new file mode 100644
index 00000000..317a270f
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$app-state.md
@@ -0,0 +1 @@
+accessing current page data, navigation state, url params, form data, error handling, route info, detecting app updates, version polling, shallow routing
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$app-stores.md b/packages/mcp-server/summaries/use_cases/kit/$app-stores.md
new file mode 100644
index 00000000..ec35f6ed
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$app-stores.md
@@ -0,0 +1 @@
+legacy projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$app-types.md b/packages/mcp-server/summaries/use_cases/kit/$app-types.md
new file mode 100644
index 00000000..a53569bc
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$app-types.md
@@ -0,0 +1 @@
+routing, navigation, type safety, route parameters, dynamic routes, link generation, pathname validation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$env-dynamic-private.md b/packages/mcp-server/summaries/use_cases/kit/$env-dynamic-private.md
new file mode 100644
index 00000000..89877ae6
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$env-dynamic-private.md
@@ -0,0 +1 @@
+environment variables, server-side config, api keys, secrets management, deployment configuration, adapter setup
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$env-dynamic-public.md b/packages/mcp-server/summaries/use_cases/kit/$env-dynamic-public.md
new file mode 100644
index 00000000..0088e34a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$env-dynamic-public.md
@@ -0,0 +1 @@
+environment variables, client-side config, runtime configuration, public env vars, deployment-specific settings, multi-environment apps
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$env-static-private.md b/packages/mcp-server/summaries/use_cases/kit/$env-static-private.md
new file mode 100644
index 00000000..6405356f
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$env-static-private.md
@@ -0,0 +1 @@
+server-side config, api keys, secrets management, environment-specific settings, build optimization, backend configuration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$env-static-public.md b/packages/mcp-server/summaries/use_cases/kit/$env-static-public.md
new file mode 100644
index 00000000..547d69ca
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$env-static-public.md
@@ -0,0 +1 @@
+environment variables, public config, client-side data, api endpoints, build-time configuration, public constants
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$lib.md b/packages/mcp-server/summaries/use_cases/kit/$lib.md
new file mode 100644
index 00000000..baf9f59a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$lib.md
@@ -0,0 +1 @@
+project setup, component organization, importing shared components, reusable ui elements, code structure
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/$service-worker.md b/packages/mcp-server/summaries/use_cases/kit/$service-worker.md
new file mode 100644
index 00000000..aac76086
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/$service-worker.md
@@ -0,0 +1 @@
+service workers, offline support, pwa, caching strategies, progressive web apps, asset management, offline-first apps
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-hooks.md b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-hooks.md
new file mode 100644
index 00000000..f1edf95b
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-hooks.md
@@ -0,0 +1 @@
+middleware, authentication, logging, request processing, multiple hooks, complex server logic
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-node-polyfills.md b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-node-polyfills.md
new file mode 100644
index 00000000..c0047064
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-node-polyfills.md
@@ -0,0 +1 @@
+node.js environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-node.md b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-node.md
new file mode 100644
index 00000000..deb8abd1
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-node.md
@@ -0,0 +1 @@
+node.js adapters, custom servers, streaming files, http request/response handling, node deployment
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-vite.md b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-vite.md
new file mode 100644
index 00000000..f6884782
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit-vite.md
@@ -0,0 +1 @@
+project setup, vite configuration, initial sveltekit setup, build tooling
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit.md b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit.md
new file mode 100644
index 00000000..cdaf15c8
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/@sveltejs-kit.md
@@ -0,0 +1 @@
+forms, form actions, form submission, form validation, error handling, redirects, api endpoints, server routes, deployment, adapter configuration, hooks, middleware, data loading, authentication, production setup
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/accessibility.md b/packages/mcp-server/summaries/use_cases/kit/accessibility.md
new file mode 100644
index 00000000..41f9fa79
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/accessibility.md
@@ -0,0 +1 @@
+accessibility compliance, screen reader support, wcag standards, keyboard navigation, multilingual sites, client-side routing, focus management
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/adapter-auto.md b/packages/mcp-server/summaries/use_cases/kit/adapter-auto.md
new file mode 100644
index 00000000..98bda903
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/adapter-auto.md
@@ -0,0 +1 @@
+deployment, production builds, hosting setup, choosing deployment platform, ci/cd configuration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/adapter-cloudflare-workers.md b/packages/mcp-server/summaries/use_cases/kit/adapter-cloudflare-workers.md
new file mode 100644
index 00000000..77edae73
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/adapter-cloudflare-workers.md
@@ -0,0 +1 @@
+deploying to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, migrating from workers sites
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/adapter-cloudflare.md b/packages/mcp-server/summaries/use_cases/kit/adapter-cloudflare.md
new file mode 100644
index 00000000..8670bfb5
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/adapter-cloudflare.md
@@ -0,0 +1 @@
+deployment, cloudflare workers, cloudflare pages, production hosting, serverless deployment, edge computing, static site hosting
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/adapter-netlify.md b/packages/mcp-server/summaries/use_cases/kit/adapter-netlify.md
new file mode 100644
index 00000000..bdbf63ce
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/adapter-netlify.md
@@ -0,0 +1 @@
+deployment, netlify hosting, production builds, serverless functions, edge functions, static site hosting
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/adapter-node.md b/packages/mcp-server/summaries/use_cases/kit/adapter-node.md
new file mode 100644
index 00000000..7ad47ddc
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/adapter-node.md
@@ -0,0 +1 @@
+deployment, production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/adapter-static.md b/packages/mcp-server/summaries/use_cases/kit/adapter-static.md
new file mode 100644
index 00000000..2fed7584
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/adapter-static.md
@@ -0,0 +1 @@
+static site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/adapter-vercel.md b/packages/mcp-server/summaries/use_cases/kit/adapter-vercel.md
new file mode 100644
index 00000000..c4f40797
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/adapter-vercel.md
@@ -0,0 +1 @@
+deployment, vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/adapters.md b/packages/mcp-server/summaries/use_cases/kit/adapters.md
new file mode 100644
index 00000000..2945511a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/adapters.md
@@ -0,0 +1 @@
+deployment, production builds, hosting setup, choosing deployment platform, configuring adapters
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/additional-resources.md b/packages/mcp-server/summaries/use_cases/kit/additional-resources.md
new file mode 100644
index 00000000..431343fb
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/additional-resources.md
@@ -0,0 +1 @@
+troubleshooting, getting help, finding examples, learning from sample projects, common issues, community support
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/advanced-routing.md b/packages/mcp-server/summaries/use_cases/kit/advanced-routing.md
new file mode 100644
index 00000000..f252bfc0
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/advanced-routing.md
@@ -0,0 +1 @@
+advanced routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/auth.md b/packages/mcp-server/summaries/use_cases/kit/auth.md
new file mode 100644
index 00000000..461fb827
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/auth.md
@@ -0,0 +1 @@
+authentication, login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/building-your-app.md b/packages/mcp-server/summaries/use_cases/kit/building-your-app.md
new file mode 100644
index 00000000..b8941efa
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/building-your-app.md
@@ -0,0 +1 @@
+deployment, production builds, build process, adapters, hosting setup, preview production app
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/cli.md b/packages/mcp-server/summaries/use_cases/kit/cli.md
new file mode 100644
index 00000000..553614c8
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/cli.md
@@ -0,0 +1 @@
+project setup, typescript configuration, generated types, initial project creation, npm lifecycle scripts
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/configuration.md b/packages/mcp-server/summaries/use_cases/kit/configuration.md
new file mode 100644
index 00000000..b3bb3034
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/configuration.md
@@ -0,0 +1 @@
+project setup, configuration, adapters, deployment, build settings, environment variables, routing config, prerendering, csp security, csrf protection, path aliases, service workers
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/creating-a-project.md b/packages/mcp-server/summaries/use_cases/kit/creating-a-project.md
new file mode 100644
index 00000000..1da0d5c4
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/creating-a-project.md
@@ -0,0 +1 @@
+project setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/debugging.md b/packages/mcp-server/summaries/use_cases/kit/debugging.md
new file mode 100644
index 00000000..8d9f4679
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/debugging.md
@@ -0,0 +1 @@
+debugging, breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/errors.md b/packages/mcp-server/summaries/use_cases/kit/errors.md
new file mode 100644
index 00000000..1077141c
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/errors.md
@@ -0,0 +1 @@
+error handling, custom error pages, 404 pages, api error responses, error tracking, production logging, type-safe errors, handleerror hook
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/faq.md b/packages/mcp-server/summaries/use_cases/kit/faq.md
new file mode 100644
index 00000000..48c7fee7
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/faq.md
@@ -0,0 +1 @@
+troubleshooting package imports, library compatibility issues, client-side code execution, database setup, external api integration, middleware configuration, yarn package manager setup
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/form-actions.md b/packages/mcp-server/summaries/use_cases/kit/form-actions.md
new file mode 100644
index 00000000..8ac47f2e
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/form-actions.md
@@ -0,0 +1 @@
+forms, user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/glossary.md b/packages/mcp-server/summaries/use_cases/kit/glossary.md
new file mode 100644
index 00000000..db275a77
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/glossary.md
@@ -0,0 +1 @@
+rendering configuration, performance optimization, deployment strategy, seo requirements, static sites, spa setup, ssr/csr decisions, edge deployment, pwa development, prerendering content
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/hooks.md b/packages/mcp-server/summaries/use_cases/kit/hooks.md
new file mode 100644
index 00000000..f3703c23
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/hooks.md
@@ -0,0 +1 @@
+authentication, middleware, request interception, error logging, custom headers, api proxying, database initialization, error tracking, url rewriting, internationalization
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/icons.md b/packages/mcp-server/summaries/use_cases/kit/icons.md
new file mode 100644
index 00000000..335918eb
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/icons.md
@@ -0,0 +1 @@
+icons, ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/images.md b/packages/mcp-server/summaries/use_cases/kit/images.md
new file mode 100644
index 00000000..a0cd5744
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/images.md
@@ -0,0 +1 @@
+image optimization, responsive images, hero images, product photos, galleries, performance tuning, asset management, cdn integration, cms content
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/integrations.md b/packages/mcp-server/summaries/use_cases/kit/integrations.md
new file mode 100644
index 00000000..10805d5f
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/integrations.md
@@ -0,0 +1 @@
+project setup, css preprocessors, typescript configuration, adding integrations, tooling setup
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/introduction.md b/packages/mcp-server/summaries/use_cases/kit/introduction.md
new file mode 100644
index 00000000..d3c729ed
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/introduction.md
@@ -0,0 +1 @@
+learning sveltekit, project setup, choosing framework, understanding sveltekit vs svelte, getting started, new projects, framework comparison
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/link-options.md b/packages/mcp-server/summaries/use_cases/kit/link-options.md
new file mode 100644
index 00000000..10764b55
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/link-options.md
@@ -0,0 +1 @@
+navigation, multi-page apps, link optimization, performance tuning, preloading, search forms, external links, scroll behavior, focus management
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/load.md b/packages/mcp-server/summaries/use_cases/kit/load.md
new file mode 100644
index 00000000..ce6e1411
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/load.md
@@ -0,0 +1 @@
+data fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/migrating-to-sveltekit-2.md b/packages/mcp-server/summaries/use_cases/kit/migrating-to-sveltekit-2.md
new file mode 100644
index 00000000..41d9a7a4
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/migrating-to-sveltekit-2.md
@@ -0,0 +1 @@
+migration, upgrading from sveltekit 1 to 2, breaking changes, version updates
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/migrating.md b/packages/mcp-server/summaries/use_cases/kit/migrating.md
new file mode 100644
index 00000000..ed5604c7
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/migrating.md
@@ -0,0 +1 @@
+migrating from sapper, upgrading legacy projects, sapper to sveltekit transition
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/observability.md b/packages/mcp-server/summaries/use_cases/kit/observability.md
new file mode 100644
index 00000000..a6192600
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/observability.md
@@ -0,0 +1 @@
+performance monitoring, debugging, observability, production diagnostics, tracing requests, analyzing bottlenecks, server-side monitoring, opentelemetry integration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/packaging.md b/packages/mcp-server/summaries/use_cases/kit/packaging.md
new file mode 100644
index 00000000..667b9cb7
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/packaging.md
@@ -0,0 +1 @@
+building component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/page-options.md b/packages/mcp-server/summaries/use_cases/kit/page-options.md
new file mode 100644
index 00000000..edfa58c2
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/page-options.md
@@ -0,0 +1 @@
+prerendering static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/performance.md b/packages/mcp-server/summaries/use_cases/kit/performance.md
new file mode 100644
index 00000000..f38d68c7
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/performance.md
@@ -0,0 +1 @@
+performance optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/project-structure.md b/packages/mcp-server/summaries/use_cases/kit/project-structure.md
new file mode 100644
index 00000000..7f9f8b88
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/project-structure.md
@@ -0,0 +1 @@
+project setup, understanding file structure, organizing code, starting new project, learning sveltekit basics
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/project-types.md b/packages/mcp-server/summaries/use_cases/kit/project-types.md
new file mode 100644
index 00000000..c1bdf2fd
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/project-types.md
@@ -0,0 +1 @@
+deployment, project setup, choosing adapters, ssr vs csr, static sites, spas, serverless, mobile apps, desktop apps, pwa, browser extensions
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/remote-functions.md b/packages/mcp-server/summaries/use_cases/kit/remote-functions.md
new file mode 100644
index 00000000..b86e2454
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/remote-functions.md
@@ -0,0 +1 @@
+data fetching, server-side logic, database queries, forms, user input, authentication, crud operations, api endpoints, type-safe client-server communication
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/routing.md b/packages/mcp-server/summaries/use_cases/kit/routing.md
new file mode 100644
index 00000000..8a86cd03
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/routing.md
@@ -0,0 +1 @@
+routing, navigation, multi-page apps, project setup, always, file structure, api endpoints, data loading, forms, error handling, layouts
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/seo.md b/packages/mcp-server/summaries/use_cases/kit/seo.md
new file mode 100644
index 00000000..d8ec8467
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/seo.md
@@ -0,0 +1 @@
+seo optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/server-only-modules.md b/packages/mcp-server/summaries/use_cases/kit/server-only-modules.md
new file mode 100644
index 00000000..d29642ee
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/server-only-modules.md
@@ -0,0 +1 @@
+api keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/service-workers.md b/packages/mcp-server/summaries/use_cases/kit/service-workers.md
new file mode 100644
index 00000000..7cd849d8
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/service-workers.md
@@ -0,0 +1 @@
+offline support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/shallow-routing.md b/packages/mcp-server/summaries/use_cases/kit/shallow-routing.md
new file mode 100644
index 00000000..0f81b601
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/shallow-routing.md
@@ -0,0 +1 @@
+modals, dialogs, image galleries, lightboxes, overlays, history-driven ui, mobile-friendly navigation, photo viewers, detail views
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/single-page-apps.md b/packages/mcp-server/summaries/use_cases/kit/single-page-apps.md
new file mode 100644
index 00000000..ab64cc27
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/single-page-apps.md
@@ -0,0 +1 @@
+spa mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/snapshots.md b/packages/mcp-server/summaries/use_cases/kit/snapshots.md
new file mode 100644
index 00000000..68dcccb8
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/snapshots.md
@@ -0,0 +1 @@
+forms, user input, preserving form data, multi-step forms, navigation state, preventing data loss, page refresh handling, browser back button
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/state-management.md b/packages/mcp-server/summaries/use_cases/kit/state-management.md
new file mode 100644
index 00000000..a77a5aac
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/state-management.md
@@ -0,0 +1 @@
+server-side rendering, ssr apps, multi-user applications, state management, authentication, data persistence, load functions, context api, navigation state, component lifecycle
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/types.md b/packages/mcp-server/summaries/use_cases/kit/types.md
new file mode 100644
index 00000000..1a75da44
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/types.md
@@ -0,0 +1 @@
+typescript, type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/web-standards.md b/packages/mcp-server/summaries/use_cases/kit/web-standards.md
new file mode 100644
index 00000000..b9ec1b5a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/web-standards.md
@@ -0,0 +1 @@
+always, any sveltekit project, data fetching, forms, api routes, server-side rendering, authentication, file uploads, streaming data, url handling, query parameters
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/kit/writing-adapters.md b/packages/mcp-server/summaries/use_cases/kit/writing-adapters.md
new file mode 100644
index 00000000..9994cff2
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/kit/writing-adapters.md
@@ -0,0 +1 @@
+custom adapter development, building adapters, deploying to unsupported platforms, adapter creation, platform-specific deployment
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/mcp/local-setup.md b/packages/mcp-server/summaries/use_cases/mcp/local-setup.md
new file mode 100644
index 00000000..a459dac7
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/mcp/local-setup.md
@@ -0,0 +1 @@
+ai-assisted development, mcp integration, claude setup, cursor setup, vscode setup, ai coding tools, development environment configuration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/mcp/overview.md b/packages/mcp-server/summaries/use_cases/mcp/overview.md
new file mode 100644
index 00000000..2a35bebc
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/mcp/overview.md
@@ -0,0 +1 @@
+ai/llm integration, code generation with ai, claude/copilot setup, agent-assisted development, improving ai-generated svelte code
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/mcp/prompts.md b/packages/mcp-server/summaries/use_cases/mcp/prompts.md
new file mode 100644
index 00000000..4733c7ee
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/mcp/prompts.md
@@ -0,0 +1 @@
+mcp server integration, ai-assisted svelte development, llm tooling, automated code generation, svelte documentation access, code quality automation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/mcp/remote-setup.md b/packages/mcp-server/summaries/use_cases/mcp/remote-setup.md
new file mode 100644
index 00000000..eba35dee
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/mcp/remote-setup.md
@@ -0,0 +1 @@
+ai-assisted development, using claude/cursor/vscode with mcp, integrating svelte documentation into ide, ai coding tools setup
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/mcp/resources.md b/packages/mcp-server/summaries/use_cases/mcp/resources.md
new file mode 100644
index 00000000..c6265fa4
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/mcp/resources.md
@@ -0,0 +1 @@
+mcp server setup, ai-assisted development, llm integration, documentation embedding, automated code generation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/mcp/tools.md b/packages/mcp-server/summaries/use_cases/mcp/tools.md
new file mode 100644
index 00000000..35962609
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/mcp/tools.md
@@ -0,0 +1 @@
+ai-assisted development, llm code generation, chatbot integration, ai tooling setup, automated code analysis, quick prototyping
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/$bindable.md b/packages/mcp-server/summaries/use_cases/svelte/$bindable.md
new file mode 100644
index 00000000..4fadc011
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/$bindable.md
@@ -0,0 +1 @@
+forms, user input, two-way data binding, custom input components, parent-child communication, reusable form fields
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/$derived.md b/packages/mcp-server/summaries/use_cases/svelte/$derived.md
new file mode 100644
index 00000000..c12e1c6f
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/$derived.md
@@ -0,0 +1 @@
+always, computed values, reactive calculations, dependent state, data transformations, filtering lists, totals, counters
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/$effect.md b/packages/mcp-server/summaries/use_cases/svelte/$effect.md
new file mode 100644
index 00000000..06c177b2
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/$effect.md
@@ -0,0 +1 @@
+canvas drawing, third-party library integration, dom manipulation, network requests, side effects, intervals, timers, cleanup logic, analytics tracking
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/$host.md b/packages/mcp-server/summaries/use_cases/svelte/$host.md
new file mode 100644
index 00000000..f6c57b15
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/$host.md
@@ -0,0 +1 @@
+custom elements, web components, dispatching events from custom elements, host element access
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/$inspect.md b/packages/mcp-server/summaries/use_cases/svelte/$inspect.md
new file mode 100644
index 00000000..3cec7fb3
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/$inspect.md
@@ -0,0 +1 @@
+debugging, development, tracking state changes, reactive state monitoring, troubleshooting reactivity issues
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/$props.md b/packages/mcp-server/summaries/use_cases/svelte/$props.md
new file mode 100644
index 00000000..ccdcd4b9
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/$props.md
@@ -0,0 +1 @@
+always, any svelte project, passing data to components, component communication, reusable components, forms, ui libraries
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/$state.md b/packages/mcp-server/summaries/use_cases/svelte/$state.md
new file mode 100644
index 00000000..f06d1c6e
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/$state.md
@@ -0,0 +1 @@
+always, any svelte project, core reactivity, state management, counters, forms, todo apps, interactive ui, data updates, class-based components
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/@attach.md b/packages/mcp-server/summaries/use_cases/svelte/@attach.md
new file mode 100644
index 00000000..2e0c7f41
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/@attach.md
@@ -0,0 +1 @@
+tooltips, popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/@const.md b/packages/mcp-server/summaries/use_cases/svelte/@const.md
new file mode 100644
index 00000000..63777da8
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/@const.md
@@ -0,0 +1 @@
+loops with calculations, derived values in each blocks, complex list rendering, avoiding repeated expressions
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/@debug.md b/packages/mcp-server/summaries/use_cases/svelte/@debug.md
new file mode 100644
index 00000000..dee8a456
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/@debug.md
@@ -0,0 +1 @@
+debugging, development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/@html.md b/packages/mcp-server/summaries/use_cases/svelte/@html.md
new file mode 100644
index 00000000..dc37cf4c
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/@html.md
@@ -0,0 +1 @@
+rendering html strings, cms content, rich text editors, markdown output, blog posts, wysiwyg content, sanitized html injection
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/@render.md b/packages/mcp-server/summaries/use_cases/svelte/@render.md
new file mode 100644
index 00000000..fd37ae6f
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/@render.md
@@ -0,0 +1 @@
+reusable ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/animate.md b/packages/mcp-server/summaries/use_cases/svelte/animate.md
new file mode 100644
index 00000000..0f6c59e8
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/animate.md
@@ -0,0 +1 @@
+sortable lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/await-expressions.md b/packages/mcp-server/summaries/use_cases/svelte/await-expressions.md
new file mode 100644
index 00000000..e4ce0a99
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/await-expressions.md
@@ -0,0 +1 @@
+async data fetching, loading states, server-side rendering, awaiting promises in components, form validation, api calls, data-dependent ui
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/await.md b/packages/mcp-server/summaries/use_cases/svelte/await.md
new file mode 100644
index 00000000..b77e723a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/await.md
@@ -0,0 +1 @@
+async data fetching, api calls, loading states, promises, data loading, error handling, lazy loading components
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/basic-markup.md b/packages/mcp-server/summaries/use_cases/svelte/basic-markup.md
new file mode 100644
index 00000000..e43316e7
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/basic-markup.md
@@ -0,0 +1 @@
+always, any svelte project, basic markup, html templating, component syntax, attributes, props, events, text rendering
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/bind.md b/packages/mcp-server/summaries/use_cases/svelte/bind.md
new file mode 100644
index 00000000..b87e879f
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/bind.md
@@ -0,0 +1 @@
+forms, user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, element dimensions, component refs
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/class.md b/packages/mcp-server/summaries/use_cases/svelte/class.md
new file mode 100644
index 00000000..cbbc2931
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/class.md
@@ -0,0 +1 @@
+always, conditional styling, dynamic classes, tailwind css, component styling, reusable components, props-based styling
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/compiler-errors.md b/packages/mcp-server/summaries/use_cases/svelte/compiler-errors.md
new file mode 100644
index 00000000..a921f8fc
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/compiler-errors.md
@@ -0,0 +1 @@
+animation, transitions, keyed each blocks, list animations
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/compiler-warnings.md b/packages/mcp-server/summaries/use_cases/svelte/compiler-warnings.md
new file mode 100644
index 00000000..dc03a0a9
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/compiler-warnings.md
@@ -0,0 +1 @@
+accessibility, a11y compliance, wcag standards, screen readers, keyboard navigation, aria attributes, semantic html, forms, interactive elements, media captions
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/context.md b/packages/mcp-server/summaries/use_cases/svelte/context.md
new file mode 100644
index 00000000..76a34643
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/context.md
@@ -0,0 +1 @@
+avoiding prop drilling, shared state across components, theme providers, user authentication context, configuration sharing, deeply nested components
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/custom-elements.md b/packages/mcp-server/summaries/use_cases/svelte/custom-elements.md
new file mode 100644
index 00000000..3096aa8c
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/custom-elements.md
@@ -0,0 +1 @@
+web components, custom elements, component library, design system, framework-agnostic components, embedding svelte in non-svelte apps, shadow dom
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/custom-properties.md b/packages/mcp-server/summaries/use_cases/svelte/custom-properties.md
new file mode 100644
index 00000000..e8ce5296
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/custom-properties.md
@@ -0,0 +1 @@
+theming, custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/each.md b/packages/mcp-server/summaries/use_cases/svelte/each.md
new file mode 100644
index 00000000..c5759d49
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/each.md
@@ -0,0 +1 @@
+always, lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/faq.md b/packages/mcp-server/summaries/use_cases/svelte/faq.md
new file mode 100644
index 00000000..6db355e3
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/faq.md
@@ -0,0 +1 @@
+getting started, learning svelte, beginner setup, project setup, tooling configuration, vs code setup, formatting, testing setup, routing decisions, mobile app development, troubleshooting
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/getting-started.md b/packages/mcp-server/summaries/use_cases/svelte/getting-started.md
new file mode 100644
index 00000000..e6fb31f5
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/getting-started.md
@@ -0,0 +1 @@
+project setup, starting new svelte project, initial installation, choosing framework, development environment, editor configuration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/global-styles.md b/packages/mcp-server/summaries/use_cases/svelte/global-styles.md
new file mode 100644
index 00000000..05c3a0e4
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/global-styles.md
@@ -0,0 +1 @@
+global styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/if.md b/packages/mcp-server/summaries/use_cases/svelte/if.md
new file mode 100644
index 00000000..6b378a64
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/if.md
@@ -0,0 +1 @@
+always, conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/imperative-component-api.md b/packages/mcp-server/summaries/use_cases/svelte/imperative-component-api.md
new file mode 100644
index 00000000..91093461
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/imperative-component-api.md
@@ -0,0 +1 @@
+project setup, client-side rendering, server-side rendering, ssr, hydration, testing, component initialization, app entry point, always
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/in-and-out.md b/packages/mcp-server/summaries/use_cases/svelte/in-and-out.md
new file mode 100644
index 00000000..247d1bff
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/in-and-out.md
@@ -0,0 +1 @@
+animation, transitions, interactive ui, conditional rendering, modals, tooltips, dropdowns, notifications, overlays
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/key.md b/packages/mcp-server/summaries/use_cases/svelte/key.md
new file mode 100644
index 00000000..f0c30aa5
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/key.md
@@ -0,0 +1 @@
+animations, transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-$$props-and-$$restProps.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-$$props-and-$$restProps.md
new file mode 100644
index 00000000..0e34ed19
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-$$props-and-$$restProps.md
@@ -0,0 +1 @@
+legacy mode migration, component wrappers, prop forwarding, reusable components, button components, design systems
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-$$slots.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-$$slots.md
new file mode 100644
index 00000000..2803b2fa
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-$$slots.md
@@ -0,0 +1 @@
+legacy mode, conditional slot rendering, checking if slot content provided, component slot detection
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-component-api.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-component-api.md
new file mode 100644
index 00000000..6f4d7316
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-component-api.md
@@ -0,0 +1 @@
+migration from svelte 3/4 to 5, legacy component api, maintaining old projects, understanding deprecated patterns
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-export-let.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-export-let.md
new file mode 100644
index 00000000..80c941de
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-export-let.md
@@ -0,0 +1 @@
+legacy mode, migration from svelte 4, maintaining older projects, component props without runes, exporting component methods, renaming reserved word props
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-let.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-let.md
new file mode 100644
index 00000000..f17736de
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-let.md
@@ -0,0 +1 @@
+migration from legacy mode, understanding old svelte reactivity, maintaining legacy code, upgrading to runes, array reactivity issues
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-on.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-on.md
new file mode 100644
index 00000000..5571e749
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-on.md
@@ -0,0 +1 @@
+legacy mode, event handling, user interactions, buttons, forms, click handlers, component communication, event forwarding, event modifiers
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-overview.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-overview.md
new file mode 100644
index 00000000..5726bb6d
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-overview.md
@@ -0,0 +1 @@
+migrating from svelte 3/4 to svelte 5, maintaining legacy components, understanding deprecated features, gradual upgrade process
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-reactive-assignments.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-reactive-assignments.md
new file mode 100644
index 00000000..d8943fca
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-reactive-assignments.md
@@ -0,0 +1 @@
+legacy mode, migration from svelte 4, reactive statements, computed values, side effects, maintaining older svelte projects
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-slots.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-slots.md
new file mode 100644
index 00000000..a415a0fa
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-slots.md
@@ -0,0 +1 @@
+legacy mode, migrating from svelte 4, component composition, reusable components, modals, layouts, passing content to components
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-svelte-component.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-svelte-component.md
new file mode 100644
index 00000000..c1f7bd08
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-svelte-component.md
@@ -0,0 +1 @@
+dynamic components, component switching, conditional rendering, legacy mode migration, runes mode upgrade
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-svelte-fragment.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-svelte-fragment.md
new file mode 100644
index 00000000..e93aa95b
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-svelte-fragment.md
@@ -0,0 +1 @@
+named slots, component composition, layout systems, avoiding wrapper divs, legacy svelte projects, slot content organization
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/legacy-svelte-self.md b/packages/mcp-server/summaries/use_cases/svelte/legacy-svelte-self.md
new file mode 100644
index 00000000..9316fa0a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/legacy-svelte-self.md
@@ -0,0 +1 @@
+recursive components, tree structures, nested menus, file explorers, comment threads, hierarchical data
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/lifecycle-hooks.md b/packages/mcp-server/summaries/use_cases/svelte/lifecycle-hooks.md
new file mode 100644
index 00000000..c59f506f
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/lifecycle-hooks.md
@@ -0,0 +1 @@
+component lifecycle, initialization, cleanup, dom manipulation, timers, intervals, subscriptions, chat apps, autoscroll, migration from svelte 4
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/nested-style-elements.md b/packages/mcp-server/summaries/use_cases/svelte/nested-style-elements.md
new file mode 100644
index 00000000..d4ff127a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/nested-style-elements.md
@@ -0,0 +1 @@
+component styling, scoped styles, dynamic styles, conditional styling, nested style tags, global styles within components
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/overview.md b/packages/mcp-server/summaries/use_cases/svelte/overview.md
new file mode 100644
index 00000000..9a734c3f
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/overview.md
@@ -0,0 +1 @@
+always, any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/runtime-errors.md b/packages/mcp-server/summaries/use_cases/svelte/runtime-errors.md
new file mode 100644
index 00000000..a174b39c
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/runtime-errors.md
@@ -0,0 +1 @@
+debugging errors, error handling, troubleshooting runtime issues, migration to svelte 5, component binding, effects and reactivity
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/runtime-warnings.md b/packages/mcp-server/summaries/use_cases/svelte/runtime-warnings.md
new file mode 100644
index 00000000..13ab9100
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/runtime-warnings.md
@@ -0,0 +1 @@
+debugging state proxies, console logging reactive values, inspecting state changes, development troubleshooting
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/scoped-styles.md b/packages/mcp-server/summaries/use_cases/svelte/scoped-styles.md
new file mode 100644
index 00000000..4f339788
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/scoped-styles.md
@@ -0,0 +1 @@
+always, any svelte project, component styling, scoped css, animations, keyframes, styling isolation, component-specific styles
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/snippet.md b/packages/mcp-server/summaries/use_cases/svelte/snippet.md
new file mode 100644
index 00000000..60f93e77
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/snippet.md
@@ -0,0 +1 @@
+reusable markup, component composition, passing content to components, table rows, list items, conditional rendering, avoiding code duplication
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/stores.md b/packages/mcp-server/summaries/use_cases/svelte/stores.md
new file mode 100644
index 00000000..1d08083a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/stores.md
@@ -0,0 +1 @@
+shared state, cross-component data, reactive values, async data streams, manual control over updates, rxjs integration, extracting logic
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/style.md b/packages/mcp-server/summaries/use_cases/svelte/style.md
new file mode 100644
index 00000000..749b74b6
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/style.md
@@ -0,0 +1 @@
+dynamic styling, conditional styles, theming, dark mode, interactive ui, component styling, css-in-js alternative
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-action.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-action.md
new file mode 100644
index 00000000..b23543fa
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-action.md
@@ -0,0 +1 @@
+typescript types, actions, use directive, dom manipulation, element lifecycle, custom behaviors, third-party library integration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-animate.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-animate.md
new file mode 100644
index 00000000..b65cef60
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-animate.md
@@ -0,0 +1 @@
+animated lists, sortable items, drag and drop, reordering elements, todo lists, kanban boards, playlist management, smooth position transitions
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-attachments.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-attachments.md
new file mode 100644
index 00000000..37e48324
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-attachments.md
@@ -0,0 +1 @@
+library development, component libraries, programmatic element manipulation, migrating from actions to attachments, spreading props onto elements
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-body.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-body.md
new file mode 100644
index 00000000..b8178331
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-body.md
@@ -0,0 +1 @@
+mouse tracking, cursor effects, global body events, drag and drop, actions on body element, document-level interactions
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-boundary.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-boundary.md
new file mode 100644
index 00000000..f2843c66
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-boundary.md
@@ -0,0 +1 @@
+error handling, async data loading, loading states, error recovery, flaky components, error reporting, resilient ui
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-compiler.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-compiler.md
new file mode 100644
index 00000000..2cc311e8
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-compiler.md
@@ -0,0 +1 @@
+build tools, custom compilers, ast manipulation, preprocessors, migration scripts, code generation, bundler plugins, syntax analysis
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-document.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-document.md
new file mode 100644
index 00000000..b0ca283e
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-document.md
@@ -0,0 +1 @@
+document events, visibility tracking, fullscreen detection, pointer lock, focus management, actions on document
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-easing.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-easing.md
new file mode 100644
index 00000000..c60ff78d
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-easing.md
@@ -0,0 +1 @@
+animations, transitions, interactive ui, smooth motion, custom easing curves, polished user experience
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-element.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-element.md
new file mode 100644
index 00000000..eed984af
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-element.md
@@ -0,0 +1 @@
+dynamic content, cms integration, user-generated content, conditional element types, flexible components, runtime element selection
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-events.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-events.md
new file mode 100644
index 00000000..d6c8870d
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-events.md
@@ -0,0 +1 @@
+window events, document events, global event listeners, event delegation, media queries, programmatic event handling, cleanup functions
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-files.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-files.md
new file mode 100644
index 00000000..a11a9214
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-files.md
@@ -0,0 +1 @@
+always, any svelte project, component creation, project setup, learning svelte basics
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-head.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-head.md
new file mode 100644
index 00000000..aeb0f151
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-head.md
@@ -0,0 +1 @@
+seo optimization, dynamic page titles, meta tags, social media sharing, multi-page apps, blog posts, product pages, analytics setup
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-js-files.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-js-files.md
new file mode 100644
index 00000000..23a471a4
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-js-files.md
@@ -0,0 +1 @@
+shared reactive state, reusable reactive logic, state management across components, global stores, custom reactive utilities
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-legacy.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-legacy.md
new file mode 100644
index 00000000..cb3aeb0c
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-legacy.md
@@ -0,0 +1 @@
+migration from svelte 4 to svelte 5, upgrading legacy code, event modifiers, class components, temporary compatibility
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-motion.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-motion.md
new file mode 100644
index 00000000..60d4b0fe
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-motion.md
@@ -0,0 +1 @@
+animation, smooth transitions, interactive ui, sliders, counters, physics-based motion, drag gestures, accessibility, number animations
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-options.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-options.md
new file mode 100644
index 00000000..c7814ab0
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-options.md
@@ -0,0 +1 @@
+component configuration, custom elements, web components, runes mode toggle, legacy mode, svg components, mathml components, css injection, compiler options
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-reactivity-window.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-reactivity-window.md
new file mode 100644
index 00000000..5cff36c7
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-reactivity-window.md
@@ -0,0 +1 @@
+responsive design, viewport tracking, scroll effects, window resize handling, online/offline detection, zoom level tracking
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-reactivity.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-reactivity.md
new file mode 100644
index 00000000..c3b93021
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-reactivity.md
@@ -0,0 +1 @@
+reactive data structures, state management with maps/sets, real-time clocks, url manipulation, media queries, game boards, collections tracking, reactive collections
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-server.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-server.md
new file mode 100644
index 00000000..66082c13
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-server.md
@@ -0,0 +1 @@
+server-side rendering, ssr, static site generation, seo optimization, initial page load, prerendering
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-store.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-store.md
new file mode 100644
index 00000000..485b5518
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-store.md
@@ -0,0 +1 @@
+state management, shared data, reactive stores, cross-component communication, global state, computed values, data synchronization, legacy svelte projects
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-transition.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-transition.md
new file mode 100644
index 00000000..3608a395
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-transition.md
@@ -0,0 +1 @@
+animations, transitions, interactive ui, modals, dropdowns, tooltips, notifications, svg animations, list animations, page transitions
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte-window.md b/packages/mcp-server/summaries/use_cases/svelte/svelte-window.md
new file mode 100644
index 00000000..58b40088
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte-window.md
@@ -0,0 +1 @@
+keyboard shortcuts, scroll tracking, window resize handling, online/offline detection, viewport dimensions, global event listeners
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/svelte.md b/packages/mcp-server/summaries/use_cases/svelte/svelte.md
new file mode 100644
index 00000000..b28ec6e3
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/svelte.md
@@ -0,0 +1 @@
+migration from svelte 4 to 5, upgrading legacy code, component lifecycle hooks, context api, mounting components, event dispatchers, typescript component types
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/testing.md b/packages/mcp-server/summaries/use_cases/svelte/testing.md
new file mode 100644
index 00000000..b6edfd95
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/testing.md
@@ -0,0 +1 @@
+testing, quality assurance, unit tests, integration tests, component tests, e2e tests, vitest setup, playwright setup, test automation
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/transition.md b/packages/mcp-server/summaries/use_cases/svelte/transition.md
new file mode 100644
index 00000000..36971417
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/transition.md
@@ -0,0 +1 @@
+animation, interactive ui, conditional rendering, modals, dropdowns, tooltips, notifications, toggles, accordions, tabs
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/typescript.md b/packages/mcp-server/summaries/use_cases/svelte/typescript.md
new file mode 100644
index 00000000..77917e6b
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/typescript.md
@@ -0,0 +1 @@
+typescript setup, type safety, component props typing, generic components, wrapper components, dom type augmentation, project configuration
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/use.md b/packages/mcp-server/summaries/use_cases/svelte/use.md
new file mode 100644
index 00000000..debecde2
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/use.md
@@ -0,0 +1 @@
+custom directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/v4-migration-guide.md b/packages/mcp-server/summaries/use_cases/svelte/v4-migration-guide.md
new file mode 100644
index 00000000..e6487b76
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/v4-migration-guide.md
@@ -0,0 +1 @@
+upgrading svelte 3 to 4, version migration, updating dependencies, breaking changes, legacy project maintenance
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/v5-migration-guide.md b/packages/mcp-server/summaries/use_cases/svelte/v5-migration-guide.md
new file mode 100644
index 00000000..f6a0f35b
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/v5-migration-guide.md
@@ -0,0 +1 @@
+migration to svelte 5, upgrading from svelte 4, runes adoption, syntax modernization, breaking changes
\ No newline at end of file
diff --git a/packages/mcp-server/summaries/use_cases/svelte/what-are-runes.md b/packages/mcp-server/summaries/use_cases/svelte/what-are-runes.md
new file mode 100644
index 00000000..8aece20a
--- /dev/null
+++ b/packages/mcp-server/summaries/use_cases/svelte/what-are-runes.md
@@ -0,0 +1 @@
+always, any svelte 5 project, understanding core syntax, learning svelte 5, migration from svelte 4
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95462bb8..9e79ec32 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,7 +31,7 @@ importers:
         version: 10.1.8(eslint@9.36.0(jiti@2.6.0))
       eslint-plugin-import:
         specifier: ^2.32.0
-        version: 2.32.0(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))
+        version: 2.32.0(eslint@9.36.0(jiti@2.6.0))
       eslint-plugin-svelte:
         specifier: ^3.12.3
         version: 3.12.4(eslint@9.36.0(jiti@2.6.0))(svelte@5.39.6)(ts-node@10.9.2(@types/node@24.5.2)(typescript@5.9.2))
@@ -56,6 +56,9 @@ importers:
       typescript-eslint:
         specifier: ^8.44.1
         version: 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
+      vite-node:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/node@24.5.2)(jiti@2.6.0)(tsx@4.20.6)
       vitest:
         specifier: ^3.2.3
         version: 3.2.4(@types/node@24.5.2)(jiti@2.6.0)(tsx@4.20.6)
@@ -211,6 +214,9 @@ importers:
       '@typescript-eslint/types':
         specifier: ^8.44.0
         version: 8.44.1
+      commander:
+        specifier: ^13.1.0
+        version: 13.1.0
       dotenv:
         specifier: ^17.2.3
         version: 17.2.3
@@ -5475,6 +5481,14 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
+  '@vitest/mocker@3.2.4(vite@7.1.7(@types/node@22.18.6)(jiti@2.6.0)(tsx@4.20.6))':
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.19
+    optionalDependencies:
+      vite: 7.1.7(@types/node@22.18.6)(jiti@2.6.0)(tsx@4.20.6)
+
   '@vitest/mocker@3.2.4(vite@7.1.7(@types/node@24.5.2)(jiti@2.6.0)(tsx@4.20.6))':
     dependencies:
       '@vitest/spy': 3.2.4
@@ -6099,17 +6113,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint@9.36.0(jiti@2.6.0)):
+  eslint-module-utils@2.12.1(eslint-import-resolver-node@0.3.9)(eslint@9.36.0(jiti@2.6.0)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
       eslint: 9.36.0(jiti@2.6.0)
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-import@2.32.0(eslint@9.36.0(jiti@2.6.0)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -6120,7 +6133,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.36.0(jiti@2.6.0)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint@9.36.0(jiti@2.6.0))
+      eslint-module-utils: 2.12.1(eslint-import-resolver-node@0.3.9)(eslint@9.36.0(jiti@2.6.0))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -6131,8 +6144,6 @@ snapshots:
       semver: 6.3.1
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -7851,7 +7862,7 @@ snapshots:
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.7(@types/node@24.5.2)(jiti@2.6.0)(tsx@4.20.6))
+      '@vitest/mocker': 3.2.4(vite@7.1.7(@types/node@22.18.6)(jiti@2.6.0)(tsx@4.20.6))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4