[Feature Request] Option to choose small/medium/full docs in get-documentation and doc-section

[hjaber]

Describe the problem

# claude code
🟢 svelte - get-documentation (MCP)(section: ["kit/remote-functions", "kit/$app-server", "kit/errors"])
└─ ⚠️  A large MCP response (~11.6k tokens), this can fill up context quickly

Problem: get-documentation often returns very large payloads (e.g., ~11k tokens for a few sections), quickly exhausting context.

Request: Provide a way to select small / medium / full documentation when fetching sections via MCP tools/resources.

Rationale: Svelte already ships llms-small.txt, llms-medium.txt, and llms-full.txt; exposing this choice would let users match payload size to their model’s context window and problem scope.

Describe the proposed solution

Parameterize existing tool/resource

{
"variant": { "type": "string", "enum": ["small", "medium", "full"], "default": "full" }
}

Importance

nice to have

[paoloricciuti]

The only difference between llms-medium.txt and llms-full.txt is that the former has some sections with some sections manually removed. The info that you get back from the get-documentation tool is only the sections that LLM asks for, so it's already smaller than the whole file for sure.

llms-small.txt is "special content" that was highly summarized by an LLM; however, there's no "single section" for those documents.

We could try to split them up and join them when serving llms-small.txt, but then the point is: why would the LLM choose small instead of normal if the goal for it is to solve the issue? Maybe you could tell them to use the small version, but that feels very annoying very quickly.

Will think if there's a way we can solve this issue, but it feels difficult to solve.

EDIT: sorry tapped the wrong button while writing the comment 😄

[hjaber]

llms-small.txt is "special content" that was highly summarized by an LLM; however, there's no "single section" for those documents.

Thanks for the clarification, agree on all points .

I do think it’s still worth exploring ways to limit token output more predictably though, since context size translates directly to cost and efficiency for LLMs. Even a lightweight or “compressed” variant toggle could help manage that trade-off better.

Appreciate you considering it!

We can close this out for now if you agree until better ideas prevail.

[paoloricciuti]

Even a lightweight or “compressed” variant toggle could help manage that trade-off better.

The question of how to toggle that compressed variant still remains tho...maybe a query param in the remote version and an argument in the cli version? That would still be annoying to deal with if you want to change it for some tasks, tho 🤔

Let's keep this open so we don't forget to consider a way to limit token usage.

[paoloricciuti]

So, with a bit of string manipulation magic we could take the llms-small.txt file and split it into sections getting this "map" of documents out of it

{
  "Project types": {
    "title": "Project types",
    "content": "## Project types\n\nSvelteKit supports all rendering modes: SPA, SSR, SSG, and you can mix them within one project.",
    "slug": "project-types"
  },
  "Setup": {
    "title": "Setup",
    "content": "## Setup\n\nScaffold a new SvelteKit project using `npx sv create` then follow the instructions. Do NOT use `npm create svelte` anymore, this command is deprecated.\n\nA SvelteKit project needs a `package.json` with the following contents at minimum:\n\n```json\n{\n\t\"devDependencies\": {\n\t\t\"@sveltejs/adapter-auto\": \"^6.0.0\",\n\t\t\"@sveltejs/kit\": \"^2.0.0\",\n\t\t\"@sveltejs/vite-plugin-svelte\": \"^5.0.0\",\n\t\t\"svelte\": \"^5.0.0\",\n\t\t\"vite\": \"^6.0.0\"\n\t}\n}\n```\n\nDo NOT put any of the `devDependencies` listed above into `dependencies`, keep them all in `devDependencies`.\n\nIt also needs a `vite.config.js` with the following at minimum:\n\n```js\nimport { defineConfig } from 'vite';\nimport { sveltekit } from '@sveltejs/kit/vite';\n\nexport default defineConfig({\n\tplugins: [sveltekit()]\n});\n```\n\nIt also needs a `svelte.config.js` with the following at minimum:\n\n```js\nimport adapter from '@sveltejs/adapter-auto';\n\nexport default {\n\tkit: {\n\t\tadapter: adapter()\n\t}\n};\n```",
    "slug": "setup"
  },
  "Project structure": {
    "title": "Project structure",
    "content": "## Project structure\n\n- **`src/` directory:**\n  - `lib/` for shared code (`$lib`), `lib/server/` for server‑only modules (`$lib/server`), `params/` for matchers, `routes/` for your pages/components, plus `app.html`, `error.html`, `hooks.client.js`, `hooks.server.js`, and `service-worker.js`.\n  - Do **NOT** import server‑only code into client files\n- **Top‑level assets & configs:**\n  - `static/` for public assets; `tests/` (if using Playwright); config files: `package.json` (with `@sveltejs/kit`, `svelte`, `vite` as devDeps), `svelte.config.js`, `tsconfig.json` (or `jsconfig.json`, extending `.svelte-kit/tsconfig.json`), and `vite.config.js`.\n  - Do **NOT** forget `\"type\": \"module\"` in `package.json` if using ESM.\n- **Build artifacts:**\n  - `.svelte-kit/` is auto‑generated and safe to ignore or delete; it will be recreated on `dev`/`build`.\n  - Do **NOT** commit `.svelte-kit/` to version control.",
    "slug": "project-structure"
  },
  "Routing": {
    "title": "Routing",
    "content": "## Routing\n\n- **Filesystem router:** `src/routes` maps directories to URL paths: Everything with a `+page.svelte` file inside it becomes a visitable URL, e.g. `src/routes/hello/+page.svelte` becomes `/hello`. `[param]` folders define dynamic segments. Do NOT use other file system router conventions, e.g. `src/routes/hello.svelte` does NOT become available als URL `/hello`\n- **Route files:** Prefix with `+`: all run server‑side; only non‑`+server` run client‑side; `+layout`/`+error` apply recursively.\n- **Best practice:** Do **not** hard‑code routes in code; instead rely on the filesystem convention.\n\n### +page.svelte\n\n- Defines UI for a route, SSR on first load and CSR thereafter\n- Do **not** fetch data inside the component; instead use a `+page.js` or `+page.server.js` `load` function; access its return value through `data` prop via `let { data } = $props()` (typed with `PageProps`).\n\n```svelte\n<script lang=\"ts\">\n  import type { PageProps } from './$types';\n  let { data }: PageProps = $props();\n</script>\n<h1>{data.title}</h1>\n```\n\n### +page.js\n\n- Load data for pages via `export function load({ params })` (typed `PageLoad`), return value is put into `data` prop in component\n- Can export `prerender`, `ssr`, and `csr` consts here to influence how page is rendered.\n- Do **not** include private logic (DB or env vars), can **not** export `actions` from here; if needed, use `+page.server.js`.\n\n```js\nimport type { PageLoad } from './$types';\n\nexport const load: PageLoad = () => {\n  return {\n    title: 'Hello world!',\n  };\n}\n```\n\n### +page.server.js\n\n- `export async function load(...)` (typed `PageServerLoad`) to access databases or private env; return serializable data.\n- Can also export `actions` for `<form>` handling on the server.\n\n### +error.svelte\n\n- Add `+error.svelte` in a route folder to render an error page, can use `page.status` and `page.error.message` from `$app/state`.\n- SvelteKit walks up routes to find the closest boundary; falls back to `src/error.html` if none.\n\n### +layout.svelte\n\n- Place persistent elements (nav, footer) and include `{@render children()}` to render page content. Example:\n\n```svelte\n<script>\n    import { LayoutProps } from './$types';\n    let { children, data } = $props();\n</script>\n\n<p>Some Content that is shared for all pages below this layout</p>\n<!-- child layouts/page goes here -->\n{@render children()}\n```\n\n- Create subdirectory `+layout.svelte` to scope UI to nested routes, inheriting parent layouts.\n- Use layouts to avoid repeating common markup; do **not** duplicate UI in every `+page.svelte`.\n\n### +layout.js / +layout.server.js\n\n- In `+layout.js` or `+layout.server.js` export `load()` (typed `LayoutLoad`) to supply `data` to the layout and its children; set `prerender`, `ssr`, `csr`.\n- Use `+layout.server.js` (typed `LayoutServerLoad`) for server-only things like DB or env access.\n- Do **not** perform server‑only operations in `+layout.js`; use the server variant.\n\n```js\nimport type { LayoutLoad } from './$types';\n\nexport const load: LayoutLoad = () => {\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\n### +server.js (Endpoints)\n\n- Export HTTP handlers (`GET`, `POST`, etc.) in `+server.js` under `src/routes`; receive `RequestEvent`, return `Response` or use `json()`, `error()`, `redirect()` (exported from `@sveltejs/kit`).\n- export `fallback` to catch all other methods.\n\n```js\nimport type { RequestHandler } from './$types';\n\nexport const GET: RequestHandler = ({ url }) => {\n\treturn new Response('hello world');\n}\n```\n\n### $types\n\n- SvelteKit creates `$types.d.ts` with `PageProps`, `LayoutProps`, `RequestHandler`, `PageLoad`, etc., for type‑safe props and loaders.\n- Use them inside `+page.svelte`/`+page.server.js`/`+page.js`/`+layout.svelte`/`+layout.server.js`/`+layout.js` by importing from `./$types`\n\n### Other files\n\n- Any non‑`+` files in route folders are ignored by the router, use this to your advantage to colocate utilities or components.\n- For cross‑route imports, place modules under `src/lib` and import via `$lib`.",
    "slug": "routing"
  },
  "Loading data": {
    "title": "Loading data",
    "content": "## Loading data\n\n### Page data\n\n- `+page.js` exports a `load` (`PageLoad`) whose returned object is available in `+page.svelte` via `let { data } = $props()` (e.g. when you do `return { foo }` from `load` it is available within `let { data } = $props()` in `+page.svelte` as `data.foo`)\n- Universal loads run on SSR and CSR; private or DB‑backed loads belong in `+page.server.js` (`PageServerLoad`) and must return devalue‑serializable data.\n\nExample:\n\n```js\n// file: src/routes/foo/+page.js\nexport async function load({ fetch }) {\n\tconst result = await fetch('/data/from/somewhere').then((r) => r.json());\n\treturn { result }; // return property \"result\"\n}\n```\n\n```svelte\n<!-- file: src/routes/foo/+page.svelte -->\n<script>\n  // \"data\" prop contains property \"result\"\n  let { data } = $props();\n</script>\n{data.result}\n```\n\n### Layout data\n\n- `+layout.js` or `+layout.server.js` exports a `load` (`LayoutLoad`/`LayoutServerLoad`)\n- Layout data flows downward: child layouts and pages see parent data in their `data` prop.\n- Data loading flow (interaction of load function and props) works the same as for `+page(.server).js/svelte`\n\n### page.data\n\n- The `page` object from `$app/state` gives access to all data from `load` functions via `page.data`, usable in any layout or page.\n- Ideal for things like `<svelte:head><title>{page.data.title}</title></svelte:head>`.\n- Types come from `App.PageData`\n- earlier Svelte versions used `$app/stores` for the same concepts, do NOT use `$app/stores` anymore unless prompted to do so\n\n### Universal vs. server loads\n\n- Universal (`+*.js`) run on server first, then in browser; server (`+*.server.js`) always run server‑side and can use secrets, cookies, DB, etc.\n- Both receive `params`, `route`, `url`, `fetch`, `setHeaders`, `parent`, `depends`; server loads additionally get `cookies`, `locals`, `platform`, `request`.\n- Use server loads for private data or non‑serializable items; universal loads for public APIs or returning complex values (like constructors).\n\n### Load function arguments\n\n- `url` is a `URL` object (no `hash` server‑side); `route.id` shows the route pattern; `params` map path segments to values.\n- Query parameters via `url.searchParams` trigger reruns when they change.\n- Use these to branch logic and fetch appropriate data in `load`.",
    "slug": "loading-data"
  },
  "Making Fetch Requests": {
    "title": "Making Fetch Requests",
    "content": "## Making Fetch Requests\n\nUse the provided `fetch` function for enhanced features:\n\n```js\n// src/routes/items/[id]/+page.js\nexport async function load({ fetch, params }) {\n\tconst res = await fetch(`/api/items/${params.id}`);\n\tconst item = await res.json();\n\treturn { item };\n}\n```",
    "slug": "making-fetch-requests"
  },
  "Headers and Cookies": {
    "title": "Headers and Cookies",
    "content": "## Headers and Cookies\n\nSet response headers using `setHeaders`:\n\n```js\nexport async function load({ fetch, setHeaders }) {\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\nAccess cookies in server load functions using `cookies`:\n\n```js\nexport async function load({ cookies }) {\n\tconst sessionid = cookies.get('sessionid');\n\treturn {\n\t\tuser: await db.getUser(sessionid)\n\t};\n}\n```\n\nDo not set `set-cookie` via `setHeaders`; use `cookies.set()` instead.",
    "slug": "headers-and-cookies"
  },
  "Using Parent Data": {
    "title": "Using Parent Data",
    "content": "## Using Parent Data\n\nAccess data from parent load functions:\n\n```js\nexport async function load({ parent }) {\n\tconst { a } = await parent();\n\treturn { b: a + 1 };\n}\n```",
    "slug": "using-parent-data"
  },
  "Errors and Redirects": {
    "title": "Errors and Redirects",
    "content": "## Errors and Redirects\n\nRedirect users using `redirect`:\n\n```js\nimport { redirect } from '@sveltejs/kit';\n\nexport function load({ locals }) {\n\tif (!locals.user) {\n\t\tredirect(307, '/login');\n\t}\n}\n```\n\nThrow expected errors using `error`:\n\n```js\nimport { error } from '@sveltejs/kit';\n\nexport function load({ locals }) {\n\tif (!locals.user) {\n\t\terror(401, 'not logged in');\n\t}\n}\n```\n\nUnexpected exceptions trigger `handleError` hook and a 500 response.",
    "slug": "errors-and-redirects"
  },
  "Streaming with Promises": {
    "title": "Streaming with Promises",
    "content": "## Streaming with Promises\n\nServer load functions can stream promises as they resolve:\n\n```js\nexport async function load({ params }) {\n\treturn {\n\t\tcomments: loadComments(params.slug),\n\t\tpost: await loadPost(params.slug)\n\t};\n}\n```\n\n```svelte\n<h1>{data.post.title}</h1>\n<div>{@html data.post.content}</div>\n\n{#await data.comments}\n  Loading comments...\n{:then comments}\n  {#each comments as comment}\n    <p>{comment.content}</p>\n  {/each}\n{:catch error}\n  <p>error loading comments: {error.message}</p>\n{/await}\n```",
    "slug": "streaming-with-promises"
  },
  "Rerunning Load Functions": {
    "title": "Rerunning Load Functions",
    "content": "## Rerunning Load Functions\n\nLoad functions rerun when:\n\n- Referenced params or URL properties change\n- A parent load function reran and `await parent()` was called\n- A dependency was invalidated with `invalidate(url)` or `invalidateAll()`\n\nManually invalidate load functions:\n\n```js\n// In load function\nexport async function load({ fetch, depends }) {\n\tdepends('app:random');\n\t// ...\n}\n\n// In component\nimport { invalidate } from '$app/navigation';\nfunction rerunLoadFunction() {\n\tinvalidate('app:random');\n}\n```",
    "slug": "rerunning-load-functions"
  },
  "Dependency Tracking": {
    "title": "Dependency Tracking",
    "content": "## Dependency Tracking\n\nExclude from dependency tracking with `untrack`:\n\n```js\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 loads don’t automatically rerun on CSR; guards in `+layout.server.js` require child pages to await the parent.\n- To avoid missed auth checks and waterfalls, use hooks like `handle` for global protection or per‑page server loads.\n\n### Using getRequestEvent\n\n- `getRequestEvent()` retrieves the current server `RequestEvent`, letting shared functions (e.g. `requireLogin()`) access `locals`, `url`, etc., without parameter passing.",
    "slug": "dependency-tracking"
  },
  "Using forms": {
    "title": "Using forms",
    "content": "## Using forms\n\n### Form actions\n\n- A `+page.server.js` can export `export const actions: Actions = { default: async (event) => {…} }`; `<form method=\"POST\">` in `+page.svelte` posts to the default action without any JS. `+page.js` or `+layout.js` or `+layout.server.js` can NOT export `actions`\n- Name multiple actions (`login`, `register`) in `actions`, invoke with `action=\"?/register\"` or `button formaction=\"?/register\"`; do NOT use `default` name in this case.\n- Each action gets `{ request, cookies, params }`, uses `await request.formData()`, sets cookies or DB state, and returns an object that appears on the page as `form` (typed via `PageProps`).\n\nExample: Define a default action in `+page.server.js`:\n\n```js\n// file: src/routes/login/+page.server.js\nimport type { Actions } from './$types';\n\nexport const actions: Actions = {\n\tdefault: async (event) => {\n\t\t// TODO log the user in\n\t}\n};\n```\n\nUse it with a simple form:\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\n### Validation errors\n\n- Return `fail(400, { field, error: true })` from an action to send back status and data; display via `form?.field` and repopulate inputs with `value={form?.field ?? ''}`.\n- Use `fail` instead of throwing so the nearest `+error.svelte` isn’t invoked and the user can correct their input.\n- `fail` payload must be JSON‑serializable.\n\n### Redirects\n\n- In an action, call `redirect(status, location)` to send a 3xx redirect; this throws and bypasses form re-render.\n- Client-side, use `goto()` from `$app/navigation` for programmatic redirects.\n\n### Loading data after actions\n\n- After an action completes (unless redirected), SvelteKit reruns `load` functions and re‑renders the page, merging the action’s return value into `form`.\n- The `handle` hook runs once before the action; if you modify cookies in your action, you must also update `event.locals` there to keep `load` in sync.\n- Do NOT assume `locals` persists automatically; set `event.locals` inside your action when auth state changes.\n\n### Progressive enhancement\n\n- Apply `use:enhance` from `$app/forms` to `<form>` to intercept submissions, prevent full reloads, update `form`, `page.form`, `page.status`, reset the form, invalidate all data, handle redirects, render errors, and restore focus. Do NOT use onsubmit event for progressive enhancement\n- To customize, provide a callback that runs before submit and returns a handler; use `update()` for default logic or `applyAction(result)` to apply form data without full invalidation.\n- You can also write your own `onsubmit` listener using `fetch`, then `deserialize` the response and `applyAction`/`invalidateAll`; do NOT use `JSON.parse` for action responses.\n\n```svelte\n<script>\n  import type { PageProps } from './$types';\n\timport { enhance } from '$app/forms';\n\tlet { form } = $props();\n</script>\n\n<form method=\"POST\" use:enhance>\n\t<!-- form content -->\n</form>\n```",
    "slug": "using-forms"
  },
  "Remote functions (experimental)": {
    "title": "Remote functions (experimental)",
    "content": "## Remote functions (experimental)\n\n- **What they are**: Type-safe server-only functions you call from the client. They always execute on the server, so they can access server-only modules (env, DB).\n- If you choose to use them you can replace load functions and form actions with them.\n- Works best in combination with asynchronous Svelte, i.e. using `await` expressions in `$derived` and template\n- **Opt-in**: Enable in `svelte.config.js`:\n\n```js\nexport default {\n\tkit: {\n\t\texperimental: {\n\t\t\tremoteFunctions: true\n\t\t}\n\t}\n};\n```\n\n- **Where and how**:\n  - Place `.remote.js`/`.remote.ts` files in `src/lib` or `src/routes`.\n  - Export functions using one of: `query`, `form`, `command`, `prerender` from `$app/server`.\n  - Client imports become fetch-wrappers to generated HTTP endpoints.\n  - Arguments/returns are serialized with devalue (supports Date, Map, custom transport).\n\n### query: read dynamic data\n\nDefine:\n\n```js\n// 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\treturn db.posts();\n});\n```\n\nUse in component (recommended with await):\n\n```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\n- **Args + validation**: Pass a Standard Schema (e.g. Valibot/Zod) as first param.\n\n```js\nimport * as v from 'valibot';\nexport const getPost = query(v.string(), async (slug) => {\n\t/* ... */\n});\n```\n\n- **Refresh/caching**: Calls are cached on page (`getPosts() === getPosts()`). Refresh via:\n\n```svelte\n<button onclick={() => getPosts().refresh()}>Check for new posts</button>\n```\n\n- Alternative props exist (`loading`, `error`, `current`) if you don’t use `await`.\n\n### form: mutation via forms\n\nDefine:\n\n```js\nimport { form } from '$app/server';\nimport * as db from '$lib/server/database';\nimport * as auth from '$lib/server/auth';\nimport { error, redirect } from '@sveltejs/kit';\n\nexport const createPost = form(async (data) => {\n\tconst user = await auth.getUser();\n\tif (!user) error(401, 'Unauthorized');\n\n\tconst title = data.get('title');\n\tconst content = data.get('content');\n\tdb.insertPost(title, content);\n\n\tredirect(303, `/blog/${title}`);\n});\n```\n\nUse:\n\n```svelte\n<script>\n\timport { createPost } from '../data.remote';\n</script>\n\n<form {...createPost}>\n\t<input name=\"title\" />\n\t<textarea name=\"content\" />\n\t<button>Publish</button>\n</form>\n```\n\n- **Progressive enhancement**: Works without JS via `method`/`action`; with JS it submits without full reload.\n- **Single-flight mutations**:\n  - Server-driven: call refresh inside the handler:\n  ```js\n  await getPosts().refresh();\n  ```\n  - Client-driven: customize with `enhance` and `submit().updates(...)`:\n  ```svelte\n  <form {...createPost.enhance(async ({ submit }) => {\n  \tawait submit().updates(getPosts());\n  })}>\n  ```\n  - Optimistic UI: use `withOverride`:\n  ```js\n  await submit().updates(getPosts().withOverride((posts) => [newPost, ...posts]));\n  ```\n- **Returns**: Instead of redirect, return data; read at `createPost.result`.\n- **buttonProps**: For per-button `formaction`:\n\n```svelte\n<button>login</button>\n<button {...register.buttonProps}>register</button>\n```\n\n### command: programmatic writes\n\nDefine:\n\n```js\nimport { command, query } from '$app/server';\nimport * as v from 'valibot';\nimport * as db from '$lib/server/database';\n\nexport const getLikes = query(v.string(), async (id) => {\n\treturn db.likes.get(id);\n});\n\nexport const addLike = command(v.string(), async (id) => {\n\tawait db.likes.add(id);\n});\n```\n\nUse:\n\n```svelte\n<script>\n\timport { getLikes, addLike } from './likes.remote';\n\tlet { item } = $props();\n</script>\n\n<button onclick={() => addLike(item.id)}>add like</button>\n<p>likes: {await getLikes(item.id)}</p>\n```\n\n- **Update queries**:\n  - In the command: `getLikes(id).refresh()`\n  - From client: `await addLike(item.id).updates(getLikes(item.id))`\n  - Optimistic: `updates(getLikes(item.id).withOverride((n) => n + 1))`\n- **Note**: Cannot be called during render.\n\n### prerender: build-time reads for static-ish data\n\nDefine:\n\n```js\nimport { prerender } from '$app/server';\nimport * as db from '$lib/server/database';\n\nexport const getPosts = prerender(async () => {\n\treturn db.sql`SELECT title, slug FROM post ORDER BY published_at DESC`;\n});\n```\n\n- **Use anywhere** (including dynamic pages) to partially prerender data.\n- **Args + validation**: Same schema approach as `query`.\n- **Seed inputs**: Enumerate values for crawling during prerender:\n\n```js\nexport const getPost = prerender(\n\tv.string(),\n\tasync (slug) => {\n\t\t/* ... */\n\t},\n\t{\n\t\tinputs: () => ['first-post', 'second-post']\n\t}\n);\n```\n\n- **Dynamic**: By default excluded from server bundle; set `{ dynamic: true }` if you must call with non-prerendered args.\n- **Note**: If a page has `export const prerender = true` page option, you cannot use dynamic `query`s.\n\n### Validation and security\n\n- Use Standard Schema for `query`, `command`, `prerender` args to protect endpoints.\n- Failures return 400; customize with `handleValidationError`:\n\n```ts\n// src/hooks.server.ts\nexport function handleValidationError() {\n\treturn { message: 'Nice try, hacker!' };\n}\n```\n\n- `form` doesn’t take a schema (you validate `FormData` yourself).\n\n### getRequestEvent inside remote functions\n\n- Access the current `RequestEvent`:\n\n```ts\nimport { getRequestEvent, query } from '$app/server';\n\nexport const getProfile = query(async () => {\n\tconst { cookies, locals } = getRequestEvent();\n\t// read cookies, reuse per-request work via locals, etc.\n});\n```\n\n- Differences: no `params`/`route.id`, cannot set headers (except cookies, only in `form`/`command`), `url.pathname` is `/`.\n\n### Redirects\n\n- Allowed in `query`, `form`, `prerender` via `redirect(...)`.\n- Not allowed in `command` (return `{ redirect }` and handle on client if absolutely necessary).",
    "slug": "remote-functions-(experimental)"
  },
  "Page options": {
    "title": "Page options",
    "content": "## Page options\n\n#### prerender\n\n- Set `export const prerender = true|false|'auto'` in page or layout modules; `true` generates static HTML, `false` skips, `'auto'` includes in SSR manifest.\n- Applies to pages **and** `+server.js` routes (inherit parent flags); dynamic routes need `entries()` or `config.kit.prerender.entries` to tell the crawler which parameter values to use.\n- Do NOT prerender pages that use form actions or rely on `url.searchParams` server‑side.\n\n#### entries\n\n- In a dynamic route’s `+page(.server).js` or `+server.js`, export `export function entries(): Array<Record<string,string>>` (can be async) to list parameter sets for prerendering.\n- Overrides default crawling to ensure dynamic pages (e.g. `/blog/[slug]`) are generated.\n- Do NOT forget to pair `entries()` with `export const prerender = true`.\n\n### ssr\n\n- `export const ssr = false` disables server-side rendering, sending only an HTML shell and turning the page into a client-only SPA.\n- Use sparingly (e.g. when using browser‑only globals); do NOT set both `ssr` and `csr` to `false` or nothing will render.\n\n#### csr\n\n- `export const csr = false` prevents hydration, omits JS bundle, disables `<script>`s, form enhancements, client routing, and HMR.\n- Ideal for purely static pages (e.g. marketing or blog posts); do NOT disable CSR on pages requiring interactivity.",
    "slug": "page-options"
  },
  "State management": {
    "title": "State management",
    "content": "## State management\n\n- Avoid shared server variables—servers are stateless and shared across users. Authenticate via cookies and persist to a database instead of writing to in‑memory globals.\n- Keep `load` functions pure: no side‑effects or global store writes. Return data from `load` and pass it via `data` or `page.data`.\n- For shared client‑only state across components, use Svelte’s context API (`setContext`/`getContext`) or URL parameters for persistent filters; snapshots for ephemeral UI state tied to navigation history.",
    "slug": "state-management"
  },
  "Building your app": {
    "title": "Building your app",
    "content": "## Building your app\n\n- Build runs in two phases: Vite compiles and prerenders (if enabled), then an adapter tailors output for your deployment target.\n- Guard any code that should not execute at build time with `import { building } from '$app/environment'; if (!building) { … }`.\n- Preview your production build locally with `npm run preview` (Node‑only, no adapter hooks).",
    "slug": "building-your-app"
  },
  "Adapters": {
    "title": "Adapters",
    "content": "## Adapters\n\n- Adapters transform the built app into deployable assets for various platforms (Cloudflare, Netlify, Node, static, Vercel, plus community adapters).\n- Configure in `svelte.config.js` under `kit.adapter = adapter(opts)`, importing the adapter module and passing its options.\n- Some adapters expose a `platform` object (e.g. Cloudflare’s `env`); access it via `event.platform` in hooks and server routes.",
    "slug": "adapters"
  },
  "Single‑page apps": {
    "title": "Single‑page apps",
    "content": "## Single‑page apps\n\n- Turn your app into a fully CSR SPA by setting `export const ssr = false;` in the root `+layout.js`.\n- For static hosting, use `@sveltejs/adapter-static` with a `fallback` HTML (e.g. `200.html`) so client routing can handle unknown paths.\n- You can still prerender select pages by enabling `prerender = true` and `ssr = true` in their individual `+page.js` or `+layout.js` modules.",
    "slug": "single-page-apps"
  },
  "Advanced routing": {
    "title": "Advanced routing",
    "content": "## Advanced routing\n\n- Rest parameters (`[...file]`) capture an unknown number of segments (e.g. `src/routes/hello/[...path]` catches all routes under `/hello`) and expose them as a single string; use a catch‑all route `+error.svelte` to render nested custom 404 pages.\n- Optional parameters (`[[lang]]`) make a segment optional, e.g. for `[[lang]]/home` both `/home` and `/en/home` map to the same route; cannot follow a rest parameter.\n- Matchers in `src/params/type.js` let you constrain `[param=type]` (e.g. only “apple” or “orange”), falling back to other routes or a 404 if the test fails.\n\n### Advanced layouts\n\n- Group directories `(app)` or `(marketing)` apply a shared layout without affecting URLs.\n- Break out of the inherited layout chain per page with `+page@segment.svelte` (e.g. `+page@(app).svelte`) or per layout with `+layout@.svelte`.\n- Use grouping judiciously: overuse can complicate nesting; sometimes simple composition or wrapper components suffice.",
    "slug": "advanced-routing"
  },
  "Hooks": {
    "title": "Hooks",
    "content": "## Hooks\n\n### Server hooks\n\n- `handle({ event, resolve })`: runs on every request; mutate `event.locals`, bypass routing, or call `resolve(event, { transformPageChunk, filterSerializedResponseHeaders, preload })` to customize HTML, headers, and asset preloading.\n- `handleFetch({ event, request, fetch })`: intercepts server‑side `fetch` calls to rewrite URLs, forward cookies on cross‑origin, or route internal requests directly to handlers.\n- `init()`: runs once at server startup for async setup (e.g. database connections).\n\n### Shared hooks\n\n- `handleError({ error, event, status, message })`: catches unexpected runtime errors on server or client; log via Sentry or similar, return a safe object (e.g. `{ message: 'Oops', errorId }`) for `$page.error`.\n\n### Universal hooks\n\n- `reroute({ url, fetch? })`: map incoming `url.pathname` to a different route ID (without changing the address bar), optionally async and using `fetch`.\n- `transport`: define `encode`/`decode` for custom types (e.g. class instances) to serialize them across server/client boundaries in loads and actions.",
    "slug": "hooks"
  },
  "Errors": {
    "title": "Errors",
    "content": "## Errors\n\n- Expected errors thrown with `error(status, message|object)` set the response code, render the nearest `+error.svelte` with `page.error`, and let you pass extra props (e.g. `{ code: 'NOT_FOUND' }`).\n- Unexpected exceptions invoke the `handleError` hook, are logged internally, and expose a generic `{ message: 'Internal Error' }` to users; customize reporting or user‑safe messages in `handleError`.\n- Errors in server handlers or `handle` return JSON or your `src/error.html` fallback based on `Accept` headers; errors in `load` render component boundaries as usual. Type‑safe shapes via a global `App.Error` interface.",
    "slug": "errors"
  },
  "Link options": {
    "title": "Link options",
    "content": "## Link options\n\nThe following are HTML attributes you can put on any HTML element.\n\n- `data-sveltekit-preload-data=\"hover\"|\"tap\"` preloads `load` on link hover (`touchstart`) or immediate tap; use `\"tap\"` for fast‑changing data.\n- `data-sveltekit-preload-code=\"eager\"|\"viewport\"|\"hover\"|\"tap\"` preloads JS/CSS aggressively or on scroll/hover/tap to improve load times.\n- `data-sveltekit-reload` forces full-page reload; `data-sveltekit-replacestate` uses `replaceState`; `data-sveltekit-keepfocus` retains focus; `data-sveltekit-noscroll` preserves scroll position; disable any by setting the value to `\"false\"`.",
    "slug": "link-options"
  },
  "Server-only modules": {
    "title": "Server-only modules",
    "content": "## Server-only modules\n\n- `$env/static/private` and `$env/dynamic/private` can only be imported into server‑only files (`hooks.server.js`, `+page.server.js`); prevents leaking secrets to the client.\n- `$app/server` (e.g. the `read()` API) is likewise restricted to server‑side code.\n- Make your own modules server‑only by naming them `*.server.js` or placing them in `src/lib/server/`; any public‑facing import chain to these files triggers a build error.",
    "slug": "server-only-modules"
  },
  "Shallow routing": {
    "title": "Shallow routing",
    "content": "## Shallow routing\n\n- Use `pushState(path, state)` or `replaceState('', state)` from `$app/navigation` to create history entries without full navigation; read/write `page.state` from `$app/state`.\n- Ideal for UI like modals: `if (page.state.showModal) <Modal/>` and dismiss with `history.back()`.\n- To embed a route’s page component without navigation, preload data with `preloadData(href)` then `pushState`, falling back to `goto`; note SSR and initial load have empty `page.state`, and shallow routing requires JS.",
    "slug": "shallow-routing"
  },
  "Images": {
    "title": "Images",
    "content": "## Images\n\n- Vite’s asset handling inlines small files, adds hashes, and lets you `import logo from '...png'` for use in `<img src={logo}>`.\n- Install `@sveltejs/enhanced-img` and add `enhancedImages()` to your Vite config; use `<enhanced:img src=\"...jpg\" alt=\"…\"/>` to auto‑generate `<picture>` tags with AVIF/WebP, responsive `srcset`/`sizes`, and intrinsic dimensions.\n- For CMS or dynamic images, leverage a CDN with Svelte libraries like `@unpic/svelte`; always supply high‑resolution originals (2×), specify `sizes` for LCP images, set `fetchpriority=\"high\"`, constrain layout via CSS to avoid CLS, and include meaningful `alt` text.",
    "slug": "images"
  },
  "Reference docs": {
    "title": "Reference docs",
    "content": "## Reference docs\n\n### Imports from `@sveltejs/kit`\n\n- **error**: throw an HTTP error and halt request processing\n\n  ```js\n  import { error } from '@sveltejs/kit';\n  export function load() {\n  \terror(404, 'Not found');\n  }\n  ```\n\n- **fail**: return a form action failure without throwing\n\n  ```js\n  import { fail } from '@sveltejs/kit';\n  export const actions = {\n  \tdefault: async ({ request }) => {\n  \t\tconst data = await request.formData();\n  \t\tif (!data.get('name')) return fail(400, { missing: true });\n  \t}\n  };\n  ```\n\n- **isActionFailure**: type‑guard for failures from `fail`\n\n  ```js\n  import { isActionFailure } from '@sveltejs/kit';\n  if (isActionFailure(result)) {\n  \t/* handle invalid form */\n  }\n  ```\n\n- **isHttpError**: type‑guard for errors from `error`\n\n  ```js\n  import { isHttpError } from '@sveltejs/kit';\n  try {\n  \t/* … */\n  } catch (e) {\n  \tif (isHttpError(e, 404)) console.log('Not found');\n  }\n  ```\n\n- **isRedirect**: type‑guard for redirects from `redirect`\n\n  ```js\n  import { redirect, isRedirect } from '@sveltejs/kit';\n  try {\n  \tredirect(302, '/login');\n  } catch (e) {\n  \tif (isRedirect(e)) console.log('Redirecting');\n  }\n  ```\n\n- **json**: build a JSON `Response`\n\n  ```js\n  import { json } from '@sveltejs/kit';\n  export function GET() {\n  \treturn json({ hello: 'world' });\n  }\n  ```\n\n- **normalizeUrl** _(v2.18+)_: strip internal suffixes/trailing slashes\n\n  ```js\n  import { normalizeUrl } from '@sveltejs/kit';\n  const { url, denormalize } = normalizeUrl('/foo/__data.json');\n  url.pathname; // /foo\n  ```\n\n- **redirect**: throw a redirect response\n\n  ```js\n  import { redirect } from '@sveltejs/kit';\n  export function load() {\n  \tredirect(303, '/dashboard');\n  }\n  ```\n\n- **text**: build a plain‑text `Response`\n\n  ```js\n  import { text } from '@sveltejs/kit';\n  export function GET() {\n  \treturn text('Hello, text!');\n  }\n  ```\n\n### Imports from `@sveltejs/kit/hooks`\n\n- **sequence**: compose multiple `handle` hooks into one, merging their options\n\n  ```js\n  import { sequence } from '@sveltejs/kit/hooks';\n  export const handle = sequence(handleOne, handleTwo);\n  ```\n\n### Imports from `$app/forms`\n\n- **applyAction**: apply an `ActionResult` to update `page.form` and `page.status`\n\n  ```js\n  import { applyAction } from '$app/forms';\n  // inside enhance callback:\n  await applyAction(result);\n  ```\n\n- **deserialize**: parse a serialized form action response back into `ActionResult`\n\n  ```js\n  import { deserialize } from '$app/forms';\n  const result = deserialize(await response.text());\n  ```\n\n- **enhance**: progressively enhance a `<form>` for AJAX submissions\n\n  ```svelte\n  <script>\n    import { enhance } from '$app/forms';\n  </script>\n  <form use:enhance on:submit={handle}>\n  ```\n\n### Imports from `$app/navigation`\n\n- **afterNavigate**: run code after every client‑side navigation. Needs to be called at component initialization\n\n  ```js\n  import { afterNavigate } from '$app/navigation';\n  afterNavigate(({ type, to }) => console.log('navigated via', type));\n  ```\n\n- **beforeNavigate**: intercept and optionally cancel upcoming navigations. Needs to be called at component initialization\n\n  ```js\n  import { beforeNavigate } from '$app/navigation';\n  beforeNavigate(({ cancel }) => {\n  \tif (!confirm('Leave?')) cancel();\n  });\n  ```\n\n- **disableScrollHandling**: disable automatic scroll resetting after navigation\n\n  ```js\n  import { disableScrollHandling } from '$app/navigation';\n  disableScrollHandling();\n  ```\n\n- **goto**: programmatically navigate within the app\n\n  ```svelte\n  <script>\n    import { goto } from '$app/navigation';\n    function navigate() {\n      goto('/dashboard', { replaceState: true });\n    }\n  </script>\n    <button onclick={navigate}>navigate</button>\n  ```\n\n- **invalidate**: re‑run `load` functions that depend on a given URL or custom key\n\n  ```js\n  import { invalidate } from '$app/navigation';\n  await invalidate('/api/posts');\n  ```\n\n- **invalidateAll**: re‑run every `load` for the current page\n\n  ```js\n  import { invalidateAll } from '$app/navigation';\n  await invalidateAll();\n  ```\n\n- **onNavigate**: hook invoked immediately before client‑side navigations. Needs to be called at component initialization\n\n  ```js\n  import { onNavigate } from '$app/navigation';\n  onNavigate(({ to }) => console.log('about to go to', to.url));\n  ```\n\n- **preloadCode**: import route modules ahead of navigation (no data fetch)\n\n  ```js\n  import { preloadCode } from '$app/navigation';\n  await preloadCode('/about');\n  ```\n\n- **preloadData**: load both code and data for a route ahead of navigation\n\n  ```js\n  import { preloadData } from '$app/navigation';\n  const result = await preloadData('/posts/1');\n  ```\n\n- **pushState**: create a shallow‑routing history entry with custom state\n\n  ```js\n  import { pushState } from '$app/navigation';\n  pushState('', { modalOpen: true });\n  ```\n\n- **replaceState**: replace the current history entry with new custom state\n\n  ```js\n  import { replaceState } from '$app/navigation';\n  replaceState('', { modalOpen: false });\n  ```\n\n### Imports from `$app/paths`\n\n- **assets**: the absolute URL prefix for static assets (`config.kit.paths.assets`)\n\n  ```js\n  import { assets } from '$app/paths';\n  console.log(`<img src=\"${assets}/logo.png\">`);\n  ```\n\n- **base**: the base path for your app (`config.kit.paths.base`)\n\n  ```svelte\n  <a href=\"{base}/about\">About Us</a>\n  ```\n\n- **resolveRoute**: interpolate a route ID with parameters to form a pathname\n\n  ```js\n  import { resolveRoute } from '$app/paths';\n  resolveRoute('/blog/[slug]/[...rest]', {\n  \tslug: 'hello',\n  \trest: '2024/updates'\n  });\n  // → \"/blog/hello/2024/updates\"\n  ```\n\n### Imports from `$app/server`\n\n- **getRequestEvent** _(v2.20+)_: retrieve the current server `RequestEvent`\n\n  ```js\n  import { getRequestEvent } from '$app/server';\n  export function load() {\n  \tconst event = getRequestEvent();\n  \tconsole.log(event.url);\n  }\n  ```\n\n- **read** _(v2.4+)_: read a static asset imported by Vite as a `Response`\n\n  ```js\n  import { read } from '$app/server';\n  import fileUrl from './data.txt';\n  const res = read(fileUrl);\n  console.log(await res.text());\n  ```\n\n- **navigating**: a read‑only object describing any in‑flight navigation (or `null`)\n\n  ```svelte\n  <script>\n    import { navigating } from '$app/state';\n    console.log(navigating.from, navigating.to);\n  </script>\n  ```\n\n### Imports from `$app/state`\n\n- **page**: read‑only reactive info about the current page (`url`, `params`, `data`, etc.)\n\n  ```svelte\n  <script>\n    import { page } from '$app/state';\n    const path = $derived(page.url.pathname);\n  </script>\n  {path}\n  ```\n\n- **updated**: reactive flag for new app versions; call `updated.check()` to poll immediately\n\n  ```svelte\n  <script>\n    import { updated } from '$app/state';\n    $effect(() => {\n      if (updated.current) {\n        alert('A new version is available. Refresh?');\n      }\n    })\n  </script>\n  ```\n\n### Imports from `$env/dynamic/private`\n\n- **env (dynamic/private)**: runtime private env vars (`process.env…`), not exposed to client\n\n  ```js\n  import { env } from '$env/dynamic/private';\n  console.log(env.SECRET_API_KEY);\n  ```\n\n### Imports from `$env/dynamic/public`\n\n- **env (dynamic/public)**: runtime public env vars (`PUBLIC_…`), safe for client use\n\n  ```js\n  import { env } from '$env/dynamic/public';\n  console.log(env.PUBLIC_BASE_URL);\n  ```\n\n### Imports from `$env/static/private`\n\n- **$env/static/private**: compile‑time private env vars, dead‑code eliminated\n\n  ```js\n  import { DATABASE_URL } from '$env/static/private';\n  console.log(DATABASE_URL);\n  ```\n\n### Imports from `$env/static/public`\n\n- **$env/static/public**: compile‑time public env vars (`PUBLIC_…`), safe on client\n\n  ```js\n  import { PUBLIC_WS_ENDPOINT } from '$env/static/public';\n  console.log(PUBLIC_WS_ENDPOINT);\n  ```\n\n### `$lib` alias\n\nAlias for `src/lib` folder, e.g.\n\n```svelte\n<script>\n  import Button from '$lib/Button.svelte';\n</script>\n<Button>Click me</Button>\n```\n\nmeans that there's a component at `src/lib/Button.svelte`.",
    "slug": "reference-docs"
  },
  "What are runes?": {
    "title": "What are runes?",
    "content": "### What are runes?\n\n- Runes are built-in Svelte keywords (prefixed with `$`) that control the compiler. For example, you write `let message = $state('hello');` in a `.svelte` file.\n- Do **NOT** treat runes like regular functions or import them; instead, use them as language keywords.  \n  _In Svelte 4, this syntax did not exist—you relied on reactive declarations and stores; now runes are an integral part of the language._",
    "slug": "what-are-runes"
  },
  "$state": {
    "title": "$state",
    "content": "### $state\n\n- `$state` creates reactive variables that update the UI automatically. For example:\n  ```svelte\n  <script>\n    let count = $state(0);\n  </script>\n  <button onclick={() => count++}>Clicked: {count}</button>\n  ```\n- Do **NOT** complicate state management by wrapping it in custom objects; instead, update reactive variables directly.  \n  _In Svelte 4, you created state with let, e.g. `let count = 0;`, now use the $state rune, e.g. `let count = $state(0);`._\n- Arrays and objects become deeply reactive proxies. For example:\n  ```js\n  let todos = $state([{ done: false, text: 'add more todos' }]);\n  todos[0].done = !todos[0].done;\n  ```\n- Do **NOT** destructure reactive proxies (e.g., `let { done } = todos[0];`), as this breaks reactivity; instead, access properties directly.\n- Use `$state` in class fields for reactive properties. For example:\n  ```js\n  class Todo {\n  \tdone = $state(false);\n  \ttext = $state('');\n  \treset = () => {\n  \t\tthis.text = '';\n  \t\tthis.done = false;\n  \t};\n  }\n  ```",
    "slug": "$state"
  },
  "$state.raw": {
    "title": "$state.raw",
    "content": "### $state.raw\n\n- `$state.raw` creates shallow state where mutations are not tracked. For example:\n\n```js\nlet person = $state.raw({ name: 'Heraclitus', age: 49 });\n// Instead of mutating:\n// person.age += 1;  // NO effect\nperson = { name: 'Heraclitus', age: 50 }; // Correct way to update\n```\n\n- Do **NOT** attempt to mutate properties on raw state; instead, reassign the entire object to trigger updates.",
    "slug": "$state.raw"
  },
  "$state.snapshot": {
    "title": "$state.snapshot",
    "content": "### $state.snapshot\n\n- `$state.snapshot` produces a plain object copy of reactive state. For example:\n\n```svelte\n<script>\n  let counter = $state({ count: 0 });\n  function logSnapshot() {\n    console.log($state.snapshot(counter));\n  }\n</script>\n```\n\n- **ONLY** use this if you are told there's a problem with passing reactive proxies to external APIs.",
    "slug": "$state.snapshot"
  },
  "Passing state into functions": {
    "title": "Passing state into functions",
    "content": "### Passing state into functions\n\n- Pass-by-Value Semantics: Use getter functions to ensure functions access the current value of reactive state. For example:\n  ```js\n  function add(getA, getB) {\n  \treturn () => getA() + getB();\n  }\n  let a = 1,\n  \tb = 2;\n  let total = add(\n  \t() => a,\n  \t() => b\n  );\n  console.log(total());\n  ```\n- Do **NOT** assume that passing a reactive state variable directly maintains live updates; instead, pass getter functions.  \n  _In Svelte 4, you often used stores with subscribe methods; now prefer getter functions with `$state` / `$derived` instead._",
    "slug": "passing-state-into-functions"
  },
  "$derived": {
    "title": "$derived",
    "content": "### $derived\n\n- `$derived` computes reactive values based on dependencies. For example:\n\n```svelte\n<script>\n  let count = $state(0);\n  let doubled = $derived(count * 2);\n</script>\n<button onclick={() => count++}>{doubled}</button>\n```\n\n- Do **NOT** introduce side effects in derived expressions; instead, keep them pure.  \n  _In Svelte 4 you used `$:` for this, e.g. `$: doubled = count * 2;`, now use the $derived rune instead, e.g `let doubled = $derived(count * 2);`._\n\n#### $derived.by\n\n- Use `$derived.by` for multi-line or complex logic. For example:\n\n```svelte\n<script>\n  let numbers = $state([1, 2, 3]);\n  let total = $derived.by(() => {\n    let sum = 0;\n    for (const n of numbers) sum += n;\n    return sum;\n  });\n</script>\n```\n\n- Do **NOT** force complex logic into a single expression; instead, use `$derived.by` to keep code clear.\n\n#### Overriding derived values\n\n- You can reassign a derived value for features like optimistic UI. It will go back to the `$derived` value once an update in its dependencies happen. For example:\n\n```svelte\n<script>\n  let post = $props().post;\n  let likes = $derived(post.likes);\n  async function onclick() {\n    likes += 1;\n    try { await post.like(); } catch { likes -= 1; }\n  }\n</script>\n```\n\n- Do **NOT** try to override derived state via effects; instead, reassign directly when needed.  \n  _In Svelte 4 you could use `$:` for that, e.g. `$: likes = post.likes; likes = 1`, now use the `$derived` instead, e.g. `let likes = $derived(post.likes); likes = 1;`._",
    "slug": "$derived"
  },
  "$effect": {
    "title": "$effect",
    "content": "### $effect\n\n- `$effect` executes functions when reactive state changes. For example:\n\n```svelte\n<script>\n  let size = $state(50);\n  $effect(() => {\n    console.log('Size changed:', size);\n  });\n</script>\n```\n\n- Do **NOT** use `$effect` for state synchronization; instead, use it only for side effects like logging or DOM manipulation.  \n  _In Svelte 4, you used reactive statements (`$:`) for similar tasks, .e.g `$: console.log(size)`; now use the `$effect` rune instead, e.g. `$effect(() => console.log(size))` ._\n\n#### Understanding lifecycle (for $effect)\n\n- Effects run after the DOM updates and can return teardown functions. For example:\n\n```svelte\n<script>\n  let count = $state(0);\n  $effect(() => {\n    const interval = setInterval(() => { count += 1; }, 1000);\n    return () => clearInterval(interval);\n  });\n</script>\n```\n\n- **Directive:** Do **NOT** ignore cleanup; instead, always return a teardown function when needed.\n\n#### $effect.pre\n\n- `$effect.pre` works like `$effect` with the only difference that it runs before the DOM updates. For example:\n\n```svelte\n<script>\n  let div = $state();\n  $effect.pre(() => {\n    if (div) console.log('Running before DOM update');\n  });\n</script>\n```\n\n- Do **NOT** use `$effect.pre` for standard post-update tasks; instead, reserve it for pre-DOM manipulation like autoscrolling.\n\n#### $effect.tracking\n\n- `$effect.tracking` indicates if code is running inside a reactive context. For example:\n\n```svelte\n<script>\n  $effect(() => {\n    console.log('Inside effect, tracking:', $effect.tracking());\n  });\n</script>\n```\n\n- Do **NOT** misuse tracking information outside its intended debugging context; instead, use it to enhance reactive debugging.  \n  _In Svelte 4, no equivalent existed; now this feature offers greater insight into reactivity._\n\n#### $effect.root\n\n- `$effect.root` creates a non-tracked scope for nested effects with manual cleanup. For example:\n\n```svelte\n<script>\n  let count = $state(0);\n  const cleanup = $effect.root(() => {\n    $effect(() => {\n      console.log('Count is:', count);\n    });\n    return () => console.log('Root effect cleaned up');\n  });\n</script>\n```\n\n- Do **NOT** expect root effects to auto-cleanup; instead, manage their teardown manually.  \n  _In Svelte 4, manual cleanup required explicit lifecycle hooks; now `$effect.root` centralizes this control._",
    "slug": "$effect"
  },
  "$props": {
    "title": "$props",
    "content": "### $props\n\n- Use `$props` to access component inputs. For example:\n\n```svelte\n<script>\n  let { adjective } = $props();\n</script>\n<p>This component is {adjective}</p>\n```\n\n- Do **NOT** mutate props directly; instead, use callbacks or bindable props to communicate changes.  \n  _In Svelte 4, props were declared with `export let foo`; now you use `$props` rune, e.g. `let { foo } = $props()`._\n- Declare fallback values via destructuring. For example:\n\n```js\nlet { adjective = 'happy' } = $props();\n```\n\n- Rename props to avoid reserved keywords. For example:\n\n```js\nlet { super: trouper } = $props();\n```\n\n- Use rest syntax to collect all remaining props. For example:\n\n```js\nlet { a, b, ...others } = $props();\n```\n\n#### $props.id()\n\n- Generate a unique ID for the component instance. For example:\n\n```svelte\n<script>\n  const uid = $props.id();\n</script>\n<label for=\"{uid}-firstname\">First Name:</label>\n<input id=\"{uid}-firstname\" type=\"text\" />\n```\n\n- Do **NOT** manually generate or guess IDs; instead, rely on `$props.id()` for consistency.",
    "slug": "$props"
  },
  "$bindable": {
    "title": "$bindable",
    "content": "### $bindable\n\n- Mark props as bindable to allow two-way data flow. For example, in `FancyInput.svelte`:\n\n```svelte\n<script>\n  let { value = $bindable() } = $props();\n</script>\n<input bind:value={value} />\n```\n\n- Do **NOT** overuse bindable props; instead, default to one-way data flow unless bi-directionality is truly needed.  \n  _In Svelte 4, all props were implicitly bindable; in Svelte 5 `$bindable` makes this explicit._",
    "slug": "$bindable"
  },
  "$host": {
    "title": "$host",
    "content": "### $host\n\n- Only available inside custom elements. Access the host element for custom event dispatching. For example:\n\n```svelte\n<script>\n  function dispatch(type) {\n    $host().dispatchEvent(new CustomEvent(type));\n  }\n</script>\n<button onclick={() => dispatch('increment')}>Increment</button>\n```\n\n- Do **NOT** use this unless you are explicitly tasked to create a custom element using Svelte components",
    "slug": "$host"
  },
  "Using await in Svelte": {
    "title": "Using await in Svelte",
    "content": "### Using await in Svelte\n\n- **Where you can use await**\n\n  - **Top-level `<script>`**: `await` directly in component script.\n  - **Inside `$derived(...)`**.\n  - **Inside markup**: inline `await` expressions.\n\n```svelte\n<script>\n  import { getNumber, isEven, makeDouble } from './number';\n\n  let count = $state(0);\n  let double = $derived(await makeDouble(double));\n</script>\n\n<button onclick={() => count++}>increment<button>\n\n<p>{await getNumber(count)} * 2 = {double}</p>\n{#if await isEven(id)}\n  <p>even</p>\n{/if}\n```\n\n- **Enable the feature**\n  - Add `experimental.async: true` to `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\n- The flag is experimental in 5.36; it will be removed in Svelte 6.\n\n- **Boundary requirement**\n  - You can only use `await` inside a `<svelte:boundary>` that has a `pending` snippet:\n\n```svelte\n<svelte:boundary>\n\t<MyApp />\n\n\t{#snippet pending()}\n\t\t<p>loading...</p>\n\t{/snippet}\n</svelte:boundary>\n```\n\n- Restriction will lift when async SSR is supported.\n\n#### Behavior\n\n- If an `await` depends on state, Svelte defers UI updates that read that state until the async work finishes.\n- Fast updates can overtake slow ones; results reflect the latest completed work.\n- **Script awaits are normal JS**: sequential unless you parallelize them yourself.\n- **$derived awaits**: first run sequentially, then update independently.\n- Expect an `await_waterfall` warning if you accidentally serialize independent work.\n- Boundary's `pending` snippet shows a loading placeholder while boundary first loads.\n- Use `$effect.pending()` to detect ongoing async work.\n- Errors from `await` bubble to the nearest `<svelte:boundary>` (acts as an error boundary).",
    "slug": "using-await-in-svelte"
  },
  "{#snippet ...}": {
    "title": "{#snippet ...}",
    "content": "### {#snippet ...}\n\n- **Definition & Usage:**  \n  Snippets allow you to define reusable chunks of markup with parameters inside your component.  \n  _Example:_\n  ```svelte\n  {#snippet figure(image)}\n    <figure>\n      <img src={image.src} alt={image.caption} width={image.width} height={image.height} />\n      <figcaption>{image.caption}</figcaption>\n    </figure>\n  {/snippet}\n  ```\n- **Parameterization:**  \n  Snippets accept multiple parameters with optional defaults and destructuring, but rest parameters are not allowed.  \n  _Example with parameters:_\n  ```svelte\n  {#snippet name(param1, param2)}\n    <!-- snippet markup here -->\n  {/snippet}\n  ```",
    "slug": "snippet"
  },
  "Snippet scope": {
    "title": "Snippet scope",
    "content": "### Snippet scope\n\n- **Lexical Visibility:**  \n  Snippets can be declared anywhere and reference variables from their outer lexical scope, including script or block-level declarations.  \n  _Example:_\n  ```svelte\n  <script>\n    let { message = \"it's great to see you!\" } = $props();\n  </script>\n  {#snippet hello(name)}\n    <p>hello {name}! {message}!</p>\n  {/snippet}\n  {@render hello('alice')}\n  ```\n- **Scope Limitations:**  \n  Snippets are only accessible within their lexical scope; siblings and child blocks share scope, but nested snippets cannot be rendered outside.  \n  _Usage caution:_ Do **NOT** attempt to render a snippet outside its declared scope.",
    "slug": "snippet-scope"
  },
  "Passing snippets to components": {
    "title": "Passing snippets to components",
    "content": "### Passing snippets to components\n\n- **As Props:**  \n  Within a template, snippets are first-class values that can be passed to components as props.  \n  _Example:_\n  ```svelte\n  <script>\n    import Table from './Table.svelte';\n    const fruits = [\n      { name: 'apples', qty: 5, price: 2 },\n      { name: 'bananas', qty: 10, price: 1 }\n    ];\n  </script>\n  {#snippet header()}\n    <th>fruit</th>\n    <th>qty</th>\n    <th>price</th>\n    <th>total</th>\n  {/snippet}\n  {#snippet row(d)}\n    <td>{d.name}</td>\n    <td>{d.qty}</td>\n    <td>{d.price}</td>\n    <td>{d.qty * d.price}</td>\n  {/snippet}\n  <Table data={fruits} {header} {row} />\n  ```\n- **Slot-like Behavior:**  \n  Snippets declared inside component tags become implicit props (akin to slots) for the component.  \n  _Svelte 4 used slots for this, e.g. `<Component><p slot=\"x\" let:y>hi {y}</p></Component>`; now use snippets instead, e.g. `<Component>{#snippet x(y)}<p>hi {y}</p>{/snippet}</Component>`._\n- **Content Fallback:**  \n  Content not wrapped in a snippet declaration becomes the `children` snippet, rendering as fallback content.  \n  _Example:_\n  ```svelte\n  <!-- App.svelte -->\n  <Button>click me</Button>\n  <!-- Button.svelte -->\n  <script>\n    let { children } = $props();\n  </script>\n  <button>{@render children()}</button>\n  ```",
    "slug": "passing-snippets-to-components"
  },
  "Typing snippets": {
    "title": "Typing snippets",
    "content": "### Typing snippets\n\n- Snippets implement the `Snippet` interface, enabling strict type checking in TypeScript or JSDoc.  \n  _Example:_\n\n```svelte\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  interface Props {\n    data: any[];\n    children: Snippet;\n    row: Snippet<[any]>;\n  }\n  let { data, children, row }: Props = $props();\n</script>\n```",
    "slug": "typing-snippets"
  },
  "{@render ...}": {
    "title": "{@render ...}",
    "content": "### {@render ...}\n\n- Use the {@render ...} tag to invoke and render a snippet, passing parameters as needed.  \n  _Example:_\n  ```svelte\n  {#snippet sum(a, b)}\n    <p>{a} + {b} = {a + b}</p>\n  {/snippet}\n  {@render sum(1, 2)}\n  ```\n- Do **NOT** call snippets without parentheses when parameters are required; instead, always invoke the snippet correctly.  \n  _In Svelte 4, you used slots for this, e.g. `<slot name=\"sum\" {a} {b} />`; now use `{@render}` instead, e.g. `{@render sum(a,b)}`._",
    "slug": "render"
  },
  "<svelte:boundary>": {
    "title": "<svelte:boundary>",
    "content": "### <svelte:boundary>\n\n- Use error boundary tags to prevent rendering errors in a section from crashing the whole app.\n  _Example:_\n\n  ```svelte\n  <svelte:boundary onerror={(error, reset) => console.error(error)}>\n    <FlakyComponent />\n  </svelte:boundary>\n  ```\n\n- **Failed Snippet for Fallback UI:**  \n  Providing a `failed` snippet renders fallback content when an error occurs and supplies a `reset` function.  \n  _Example:_\n\n  ```svelte\n  <svelte:boundary>\n    <FlakyComponent />\n    {#snippet failed(error, reset)}\n      <button onclick={reset}>Oops! Try again</button>\n    {/snippet}\n  </svelte:boundary>\n  ```",
    "slug": ""
  },
  "class": {
    "title": "class",
    "content": "### class\n\n- Svelte 5 allows objects for conditional class assignment using truthy keys. It closely follows the `clsx` syntax  \n  _Example:_\n\n```svelte\n<script>\n  let { cool } = $props();\n</script>\n<div class={{ cool, lame: !cool }}>Content</div>\n```\n\n\n# SvelteKit documentation",
    "slug": "class"
  }
}

which could serve the purpose of having a very light token footprint. Now the question is, how do we decide which one to use? As there are way fewer sections, we can't really let the LLM decide on the fly...I'm thinking of using the query parameters/extra argument so that you basically decide at the configuration level what you want to do.

I don't super like this because it means if you find out you need more info in the docs, you will need to exit your session and change your configuration but honestly I can't figure out a better way.

[khromov]

This should be solved by #67