garden.stanislav.svelte-llm/svelte-llm-mcp

{
  "checks": {
    "action_safety_probe": {
      "details": {
        "auth_present": false,
        "confirmation_signals": [],
        "safeguard_count": 0,
        "summary": {
          "bulk_access_tools": 0,
          "capability_distribution": {
            "admin": 1,
            "exec": 2,
            "filesystem": 2,
            "read": 2,
            "write": 1
          },
          "destructive_tools": 0,
          "egress_tools": 0,
          "exec_tools": 2,
          "high_risk_tools": 1,
          "risk_distribution": {
            "critical": 0,
            "high": 1,
            "low": 0,
            "medium": 1
          },
          "secret_tools": 0,
          "tool_count": 2
        }
      },
      "latency_ms": null,
      "status": "error"
    },
    "advanced_capabilities_probe": {
      "details": {
        "capabilities": {
          "completions": true,
          "elicitation": false,
          "prompts": true,
          "resource_links": true,
          "resources": true,
          "roots": false,
          "sampling": false,
          "structured_outputs": false
        },
        "enabled": [
          "completions",
          "prompts",
          "resource_links",
          "resources"
        ],
        "enabled_count": 4,
        "initialize_capability_keys": [
          "completions",
          "prompts",
          "resources",
          "tools"
        ]
      },
      "latency_ms": null,
      "status": "ok"
    },
    "connector_publishability_probe": {
      "details": {
        "blockers": [
          "action_safety",
          "server_card"
        ],
        "criteria": {
          "action_safety": false,
          "auth_flow": true,
          "connector_replay": true,
          "initialize": true,
          "protocol_version": true,
          "remote_transport": true,
          "request_association": true,
          "server_card": false,
          "session_resume": true,
          "step_up_auth": true,
          "tool_surface": true,
          "tools_list": true,
          "transport_compliance": true
        },
        "high_risk_tools": 1,
        "tool_count": 2,
        "transport": "streamable-http"
      },
      "latency_ms": null,
      "status": "warning"
    },
    "connector_replay_probe": {
      "details": {
        "added_tools": [],
        "additive_output_changes": [],
        "backward_compatible": true,
        "output_breaks": [],
        "removed_tools": [],
        "required_arg_breaks": [],
        "would_break_after_refresh": false
      },
      "latency_ms": null,
      "status": "ok"
    },
    "determinism_probe": {
      "details": {
        "attempts": 2,
        "baseline_signature": "e5099779a8f1de7f448c26cb144ad9c4bbdc34d79e002fc14fd848d2329b5883",
        "errors": [],
        "matches": 2,
        "stable_ratio": 1.0,
        "successful": 2
      },
      "latency_ms": 183.86,
      "status": "ok"
    },
    "initialize": {
      "details": {
        "headers": {
          "content-type": "text/event-stream"
        },
        "http_status": 200,
        "payload": {
          "id": 1,
          "jsonrpc": "2.0",
          "result": {
            "capabilities": {
              "completions": {},
              "prompts": {
                "listChanged": true
              },
              "resources": {
                "listChanged": true
              },
              "tools": {
                "listChanged": true
              }
            },
            "protocolVersion": "2025-03-26",
            "serverInfo": {
              "name": "mcp-typescript server on vercel",
              "version": "0.1.0"
            }
          }
        },
        "url": "https://svelte-llm.stanislav.garden/mcp/mcp"
      },
      "latency_ms": 278.44,
      "status": "ok"
    },
    "interactive_flow_probe": {
      "details": {
        "oauth_supported": false,
        "prompt_available": true,
        "risk_hits": [],
        "safe_hits": []
      },
      "latency_ms": null,
      "status": "missing"
    },
    "oauth_authorization_server": {
      "details": {
        "reason": "no_authorization_server"
      },
      "latency_ms": null,
      "status": "missing"
    },
    "oauth_protected_resource": {
      "details": {
        "error": "Client error '404 Not Found' for url 'https://svelte-llm.stanislav.garden/.well-known/oauth-protected-resource'\nFor more information check: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404",
        "url": "https://svelte-llm.stanislav.garden/.well-known/oauth-protected-resource"
      },
      "latency_ms": 310.88,
      "status": "error"
    },
    "official_registry_probe": {
      "details": {
        "direct_match": true,
        "official_peer_count": 1,
        "registry_identifier": "garden.stanislav.svelte-llm/svelte-llm-mcp",
        "registry_source": "official_registry"
      },
      "latency_ms": null,
      "status": "ok"
    },
    "openid_configuration": {
      "details": {
        "reason": "no_authorization_server"
      },
      "latency_ms": null,
      "status": "missing"
    },
    "probe_noise_resilience": {
      "details": {
        "headers": {
          "content-type": "text/plain"
        },
        "http_status": 200,
        "url": "https://svelte-llm.stanislav.garden/robots.txt"
      },
      "latency_ms": 273.79,
      "status": "ok"
    },
    "prompt_get": {
      "details": {
        "headers": {
          "content-type": "text/event-stream"
        },
        "http_status": 200,
        "payload": {
          "id": 4,
          "jsonrpc": "2.0",
          "result": {
            "messages": [
              {
                "content": {
                  "text": "You are an expert in web development, specifically Svelte 5 and SvelteKit, with expert-level knowledge of Svelte 5, SvelteKit, and TypeScript.\n\n## Core Expertise:\n\n### Svelte 5 Runes & Reactivity\n- **$state**: Reactive state declaration (always use let, never const)\n- **$derived**: Computed values (always use $derived.by(() => ...) for functions)\n- **$effect**: Side effects and cleanup (runs after DOM updates)\n- **$props**: Component props with destructuring and defaults\n- **$bindable**: Two-way binding for props\n\n### Critical Syntax Rules:\nAlways use Svelte 5 runes and Svelte 5 syntax. 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.\n\n### Additional Rules:\n- Props: let { count = 0, name } = $props()\n- Bindable: let { value = $bindable() } = $props()\n- Children: let { children } = $props()\n- Cleanup: $effect(() => { return () => cleanup() })\n- Context: setContext/getContext work with runes\n- Snippets: {#snippet name(params)} for reusable templates\n\n### SvelteKit Essentials:\n- File-based routing with route groups and parameters\n- Load functions: +page.ts (universal) vs +page.server.ts (server-only)\n- Form actions in +page.server.ts with progressive enhancement\n- Layout nesting and data inheritance\n- Error and loading states with +error.svelte and loading UI\n\n### TypeScript Integration:\n- Always use TypeScript for type safety\n- Properly type PageData, PageLoad, Actions, RequestHandler\n- Generic components with proper type inference\n- .svelte.ts for shared reactive state\n\n## MCP Tool Usage Guide:\n\n### Template Prompts (Efficient Documentation Injection):\nUse these for instant access to curated documentation sets:\n- **svelte-core**: Core Svelte 5 (introduction, runes, template syntax, styling)\n- **svelte-advanced**: Advanced Svelte 5 (special elements, runtime, misc)\n- **svelte-complete**: Complete Svelte 5 documentation\n- **sveltekit-core**: Core SvelteKit (getting started, core concepts)\n- **sveltekit-production**: Production SvelteKit (build/deploy, advanced, best practices)\n- **sveltekit-complete**: Complete SvelteKit documentation\n\n### Resources Access:\n- **\ud83d\udce6 Preset Resources**: Use svelte-llm://svelte-core, svelte-llm://svelte-advanced, svelte-llm://svelte-complete, svelte-llm://sveltekit-core, svelte-llm://sveltekit-production, svelte-llm://sveltekit-complete for curated documentation sets\n- **\ud83d\udcc4 Individual Docs**: Use svelte-llm://doc/[path] for specific documentation files\n- Access via list_resources or direct URI for browsing and reference\n\n### When to use list_sections + get_documentation:\n- **Specific Topics**: When you need particular sections not covered by presets\n- **Custom Combinations**: When presets don't match the exact scope needed  \n- **Deep Dives**: When you need detailed information on specific APIs\n- **Troubleshooting**: When investigating specific issues or edge cases\n\n### Strategic Approach:\n1. **Start with Template Prompts**: Use template prompts (svelte-core, sveltekit-core, etc.) for immediate context injection\n2. **Browse via Resources**: Use preset resources for reading/reference during development\n3. **Supplement with Specific Docs**: Use list_sections + get_documentation only when presets don't cover your needs\n4. **Combine Efficiently**: Use multiple template prompts if you need both Svelte and SvelteKit context\n\n### Documentation Fetching Priority:\n1. **Template Prompts First**: Always try relevant template prompts before individual sections\n2. **Preset Resources**: Use for browsing and reference\n3. **Individual Sections**: Only when specific content not in presets is needed\n4. **Multiple Sources**: Combine template prompts with specific sections as needed\n\n## Best Practices:\n- Write production-ready TypeScript code\n- Include proper error handling and loading states\n- Consider accessibility (ARIA, keyboard navigation)\n- Optimize for performance (lazy loading, minimal reactivity)\n- Use semantic HTML and proper component composition\n- Implement proper cleanup in effects\n- Handle edge cases and provide fallbacks\n\n## Your Approach:\nWhen helping with Svelte/SvelteKit development:\n1. **Use Template Prompts**: Start with relevant template prompts (svelte-core, sveltekit-core, etc.) for immediate context\n2. **Supplement as Needed**: Use list_sections + get_documentation only for content not covered by templates\n3. **Provide Complete Solutions**: Include working TypeScript code with proper types\n4. **Explain Trade-offs**: Discuss architectural decisions and alternatives\n5. **Optimize**: Suggest performance improvements and best practices",
                  "type": "text"
                },
                "role": "user"
              }
            ]
          }
        },
        "prompt_arguments": [
          {
            "description": "Optional specific task or requirement to focus on",
            "name": "task",
            "required": false
          }
        ],
        "prompt_name": "svelte-developer",
        "url": "https://svelte-llm.stanislav.garden/mcp/mcp"
      },
      "latency_ms": 295.01,
      "status": "ok"
    },
    "prompts_list": {
      "details": {
        "headers": {
          "content-type": "text/event-stream"
        },
        "http_status": 200,
        "payload": {
          "id": 3,
          "jsonrpc": "2.0",
          "result": {
            "prompts": [
              {
                "arguments": [
                  {
                    "description": "Optional specific task or requirement to focus on",
                    "name": "task",
                    "required": false
                  }
                ],
                "description": "Expert-level guidance for Svelte 5 and SvelteKit development with optional task-specific focus",
                "name": "svelte-developer",
                "title": "Svelte 5 Developer Assistant"
              },
              {
                "arguments": [],
                "description": "Inject core svelte 5 documentation: introduction, runes, template syntax, and styling",
                "name": "svelte-core",
                "title": "Svelte Core Documentation"
              },
              {
                "arguments": [],
                "description": "Inject advanced svelte 5 documentation: special elements, runtime, and miscellaneous",
                "name": "svelte-advanced",
                "title": "Svelte Advanced Documentation"
              },
              {
                "arguments": [],
                "description": "Inject complete svelte 5 documentation covering all sections",
                "name": "svelte-complete",
                "title": "Complete Svelte Documentation"
              },
              {
                "arguments": [],
                "description": "Inject core sveltekit documentation: getting started and core concepts",
                "name": "sveltekit-core",
                "title": "SvelteKit Core Documentation"
              },
              {
                "arguments": [],
                "description": "Inject production sveltekit documentation: build & deploy, advanced features, best practices",
                "name": "sveltekit-production",
                "title": "SvelteKit Production Documentation"
              },
              {
                "arguments": [],
                "description": "Inject complete sveltekit documentation covering all sections",
                "name": "sveltekit-complete",
                "title": "Complete SvelteKit Documentation"
              }
            ]
          }
        },
        "url": "https://svelte-llm.stanislav.garden/mcp/mcp"
      },
      "latency_ms": 310.57,
      "status": "ok"
    },
    "protocol_version_probe": {
      "details": {
        "claimed_version": "2025-03-26",
        "lag_days": 244,
        "latest_known_version": "2025-11-25",
        "releases_behind": 2,
        "validator_protocol_version": "2025-03-26"
      },
      "latency_ms": null,
      "status": "warning"
    },
    "provenance_divergence_probe": {
      "details": {
        "direct_official_match": true,
        "drift_fields": [],
        "metadata_document_count": 1,
        "registry_homepage": null,
        "registry_repository": null,
        "registry_title": null,
        "registry_version": null,
        "server_card_homepage": null,
        "server_card_repository": null,
        "server_card_title": null,
        "server_card_version": null
      },
      "latency_ms": null,
      "status": "ok"
    },
    "request_association_probe": {
      "details": {
        "reason": "no_request_association_capabilities_advertised"
      },
      "latency_ms": null,
      "status": "missing"
    },
    "resource_read": {
      "details": {
        "headers": {
          "content-type": "text/event-stream"
        },
        "http_status": 200,
        "payload": {
          "id": 6,
          "jsonrpc": "2.0",
          "result": {
            "contents": [
              {
                "metadata": {
                  "description": "Core Svelte 5 documentation: introduction, runes, template syntax, and styling",
                  "id": "svelte-core",
                  "title": "Svelte Core Documentation",
                  "type": "preset"
                },
                "text": "## docs/svelte/01-introduction/01-overview.md\n\n# Overview\n\nSvelte compiles declarative components (HTML, CSS, JS) into optimized JavaScript.\n\n**Basic component:**\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\nUse for standalone components or full apps with SvelteKit.\n\n## docs/svelte/01-introduction/02-getting-started.md\n\n# Getting started\n\n## Create project\n\n```sh\nnpx sv create myapp\ncd myapp\nnpm install\nnpm run dev\n```\n\nUses [SvelteKit](../kit) (official framework) + [Vite](https://vite.dev/).\n\n## Alternatives\n\n**Vite standalone:** `npm create vite@latest` \u2192 select `svelte`. Generates HTML/JS/CSS in `dist`. Need to add [routing library](/packages#routing).\n\n**Other bundlers:** [Plugins available](/packages#bundler-plugins), but Vite recommended.\n\n## Editor tooling\n\n- [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)\n- [Other editors](https://sveltesociety.dev/collection/editor-support-c85c080efc292a34)\n- CLI check: `npx sv check`\n\n## Help\n\n- [Discord](/chat)\n- [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte)\n\n## docs/svelte/01-introduction/03-svelte-files.md\n\n# .svelte files\n\nComponents are written in `.svelte` files. All three sections are optional.\n\n```svelte\n/// file: MyComponent.svelte\n<script module>\n\t// module-level logic (rarely used)\n</script>\n\n<script>\n\t// instance-level logic\n</script>\n\n<!-- markup -->\n\n<style>\n\t/* styles */\n</style>\n```\n\n## `<script>`\n\nRuns when component instance is created. Top-level variables can be referenced in markup. Use runes for props and reactivity.\n\n## `<script module>`\n\nRuns once when module first evaluates (not per instance). Variables declared here accessible 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:** Svelte 4 used `<script context=\"module\">`\n\n## `<style>`\n\nCSS scoped to component only.\n\n```svelte\n<style>\n\tp {\n\t\t/* only affects <p> in this component */\n\t\tcolor: burlywood;\n\t}\n</style>\n```\n\n## docs/svelte/01-introduction/04-svelte-js-files.md\n\n# .svelte.js and .svelte.ts files\n\n`.svelte.js` and `.svelte.ts` files behave like regular `.js`/`.ts` modules but support runes.\n\n**Use cases:**\n- Reusable reactive logic\n- Sharing reactive state across app\n\n**Gotcha:** Cannot export reassigned state (see `$state` docs)\n\n## docs/svelte/02-runes/01-what-are-runes.md\n\n# Runes\n\nRunes are compiler keywords with `$` prefix that control Svelte behavior in `.svelte` and `.svelte.js`/`.svelte.ts` files.\n\n```js\nlet message = $state('hello');\n```\n\n**Key characteristics:**\n- No import needed (globals)\n- Not values (can't assign to variables or pass as arguments)\n- Position-specific like JS keywords\n- Svelte 5+ only\n\n## docs/svelte/02-runes/02-$state.md\n\n# $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, update it like any variable.\n\n## Deep state\n\nArrays and plain objects become deeply reactive proxies. Updates trigger granular UI changes.\n\n```js\nlet todos = $state([\n\t{\n\t\tdone: false,\n\t\ttext: 'add more todos'\n\t}\n]);\n\n// triggers updates for this specific property\ntodos[0].done = !todos[0].done;\n\n// new objects are also proxified\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// 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. Use inline function or arrow function:\n\n```svelte\n<!-- Won't work - wrong `this` -->\n<button onclick={todo.reset}>reset</button>\n\n<!-- Works -->\n<button onclick={() => todo.reset()}>reset</button>\n```\n\nOr use 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-deep 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 - reassignment\nperson = {\n\tname: 'Heraclitus',\n\tage: 50\n};\n```\n\nBetter performance for large arrays/objects you won't mutate. 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 expecting plain objects (e.g., `structuredClone`).\n\n## `$state.eager`\n\nUpdates UI immediately instead of waiting for `await` synchronization:\n\n```svelte\n<nav>\n\t<a href=\"/\" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>\n\t<a href=\"/about\" aria-current={$state.eager(pathname) === '/about' ? 'page' : null}>about</a>\n</nav>\n```\n\nUse sparingly, only for user feedback during actions.\n\n## Passing state into functions\n\nJavaScript is pass-by-value. To pass current values, use functions:\n\n```js\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\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\nCan't directly export reassignable state from `.svelte.js`/`.svelte.ts`:\n\n```js\n// \u274c Won't work\nexport let count = $state(0);\n```\n\n**Options:**\n\n1. Export object, update properties:\n\n```js\n// \u2705 Works\nexport const counter = $state({\n\tcount: 0\n});\n\nexport function increment() {\n\tcounter.count += 1;\n}\n```\n\n2. Don't directly export:\n\n```js\n// \u2705 Works\nlet count = $state(0);\n\nexport function getCount() {\n\treturn count;\n}\n\nexport function increment() {\n\tcount += 1;\n}\n```\n\n## docs/svelte/02-runes/03-$derived.md\n\n# $derived\n\nDerived state recomputes 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 rules:**\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, use `$derived.by` with a function:\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)` = `$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 Values\n\nCan temporarily reassign derived values (unless `const`). Useful 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}>\ud83e\udde1 {likes}</button>\n```\n\n## Reactivity\n\n`$derived` values are NOT deeply reactive (unlike `$state`):\n\n```js\n// @errors: 7005\nlet items = $state([ /*...*/ ]);\n\nlet index = $state(0);\nlet selected = $derived(items[index]);\n```\n\nMutating `selected` affects the underlying `items` array.\n\n## Destructuring\n\nDestructured variables are all reactive:\n\n```js\nfunction stuff() { return { a: 1, b: 2, c: 3 } }\n//cut\nlet { a, b, c } = $derived(stuff());\n```\n\nEquivalent to:\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\n**Push-pull reactivity:** Dependencies notified immediately (push), but derived values only re-evaluated when read (pull).\n\nIf new value is referentially identical to previous, downstream updates skip:\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 only updates when `large` changes, not `count`.\n\n## docs/svelte/02-runes/04-$effect.md\n\n# $effect\n\nEffects run when state updates. Run in browser only, not during SSR.\n\n**Don't update state inside effects** - leads to complexity and infinite loops. See alternatives below.\n\n## Basic Usage\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// re-runs 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\nTracks accessed state/derived and re-runs when they change.\n\n## Lifecycle\n\n- Runs after component mounts\n- Re-runs in microtask after state changes (batched)\n- Can be used anywhere while parent effect is running\n\n### Teardown Functions\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\t// runs before re-run and on destroy\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\nAuto-tracks **synchronously** read reactive values. Async reads (after `await`, inside `setTimeout`) not tracked:\n\n```ts\n$effect(() => {\n\tconst context = canvas.getContext('2d');\n\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\n\t// re-runs when `color` changes\n\tcontext.fillStyle = color;\n\n\tsetTimeout(() => {\n\t\t// does NOT track `size`\n\t\tcontext.fillRect(0, 0, size, size);\n\t}, 0);\n});\n```\n\n### Object vs Property Tracking\n\n```svelte\n<script>\n\tlet state = $state({ value: 0 });\n\tlet derived = $derived({ value: state.value * 2 });\n\n\t// runs once - `state` object never reassigned\n\t$effect(() => {\n\t\tstate;\n\t});\n\n\t// runs when `state.value` changes\n\t$effect(() => {\n\t\tstate.value;\n\t});\n\n\t// runs when `state.value` changes - `derived` is 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\n### Conditional Dependencies\n\nEffect only depends on values read in last run:\n\n```ts\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] }); // tracks `condition` and `color`\n\t} else {\n\t\tconfetti(); // only tracks `condition`\n\t}\n});\n```\n\n## `$effect.pre`\n\nRuns **before** DOM updates:\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;\n\n\t\tmessages.length; // track array length\n\n\t\t// autoscroll when new messages 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 runs inside 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>\n```\n\n## `$effect.pending`\n\nReturns count of pending promises in current boundary (excludes 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 with manual cleanup. Can create effects outside component init:\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\n\n### \u274c 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### \u2705 Use $derived instead\n\n```svelte\n<script>\n\tlet count = $state(0);\n\tlet doubled = $derived(count * 2);\n</script>\n```\n\n### \u274c 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### \u2705 Use callbacks or 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:** If you must update `$state` in effect and hit infinite loop, use `untrack()`.\n\n## docs/svelte/02-runes/05-$props.md\n\n# $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 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 undefined props:\n\n```js\nlet { adjective = 'happy' } = $props();\n```\n\n> **Note:** Fallback values are NOT reactive proxies\n\n## Renaming props\n\nFor invalid identifiers or keywords:\n\n```js\nlet { super: trouper = 'lights are gonna find me' } = $props();\n```\n\n## Rest props\n\n```js\nlet { a, b, c, ...others } = $props();\n```\n\n## Updating props\n\nProps update when parent changes. Child can temporarily **reassign** (not mutate):\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\n### Don't mutate props\n\n- Regular object mutation: no effect\n- Reactive proxy mutation: works but triggers `ownership_invalid_mutation` warning\n- Fallback value mutation: no effect\n\n**Solution:** Use callback props or `$bindable` for shared state.\n\n## Type safety\n\nTypeScript:\n```svelte\n<script lang=\"ts\">\n\tlet { adjective }: { adjective: string } = $props();\n</script>\n```\n\nJSDoc:\n```svelte\n<script>\n\t/** @type {{ adjective: string }} */\n\tlet { adjective } = $props();\n</script>\n```\n\nWith interface:\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:** Use `Snippet` interface from `'svelte'` for snippet props. Native DOM element interfaces in `svelte/elements`.\n\n## `$props.id()`\n\nGenerates unique ID per component instance (consistent during SSR hydration):\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```\n\n## docs/svelte/02-runes/06-$bindable.md\n\n# $bindable\n\nProps normally flow parent \u2192 child. `$bindable` allows two-way binding (child \u2194 parent).\n\n**Use sparingly** \u2014 overuse makes data flow unpredictable.\n\n## Basic Usage\n\nChild component marks prop as 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:\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 Value\n\nParent can pass normal prop without `bind:`. Provide fallback for when no prop passed:\n\n```js\n/// file: FancyInput.svelte\nlet { value = $bindable('fallback'), ...props } = $props();\n```\n\n## Key Points\n\n- Enables state proxy mutation in child\n- Mutating normal props triggers warning\n- Parent not required to use `bind:`\n\n## docs/svelte/02-runes/07-$inspect.md\n\n# $inspect\n\n> **Note:** Dev-only. Noop in production.\n\nRoughly equivalent to `console.log`, but re-runs when 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\nPrints stack trace on updates (except in playground).\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## $inspect.trace(...)\n\nAdded in 5.14. Traces function re-runs in effects/derived. Logs which reactive state caused re-run.\n\n```svelte\n<script>\n\timport { doSomeWork } from './elsewhere';\n\n\t$effect(() => {\n\t\t// Must be first statement in function body\n\t\t$inspect.trace();\n\t\tdoSomeWork();\n\t});\n</script>\n```\n\nTakes optional label as first argument.\n\n## docs/svelte/02-runes/08-$host.md\n\n# $host\n\nProvides 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 use case:** Dispatching custom events from custom elements.\n\n## docs/svelte/03-template-syntax/01-basic-markup.md\n\n# Basic markup\n\n## Tags\n\nLowercase = HTML element. Capitalized/dot notation = 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\nAttributes work like HTML. Values can contain or be JavaScript expressions.\n\n```svelte\n<input type=checkbox />\n<a href=\"page/{p}\">page {p}</a>\n<button disabled={!clickable}>...</button>\n```\n\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}` when name and value match.\n\n```svelte\n<button {disabled}>...</button>\n```\n\n## Component props\n\nSame rules as attributes. Use shorthand `{name}` when applicable.\n\n```svelte\n<Widget foo={bar} answer={42} text=\"hello\" />\n```\n\n## Spread attributes\n\nMultiple spreads allowed. Order matters for precedence.\n\n```svelte\n<Widget a=\"b\" {...things} c=\"d\" />\n```\n\n## Events\n\nUse `on` prefix (e.g., `onclick`). Case sensitive.\n\n```svelte\n<button onclick={() => console.log('clicked')}>click me</button>\n```\n\n- Shorthand/spread work: `<button {onclick}>` or `<button {...events}>`\n- Fire after bindings (e.g., `oninput` after `bind:value`)\n- `ontouchstart`/`ontouchmove` are passive for performance\n\n### Event delegation\n\nSvelte delegates certain events to app root for performance. \n\n**Gotchas**:\n- Manual dispatch needs `{ bubbles: true }`\n- Avoid `stopPropagation` with `addEventListener` directly\n- Use `on` from `svelte/events` instead of `addEventListener`\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\nUse `{expression}`. `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**Render HTML** (escaped by default):\n\n```svelte\n{@html potentiallyUnsafeHtmlString}\n```\n\n> **Warning**: Escape strings to prevent XSS attacks.\n\n## Comments\n\nHTML comments work. `svelte-ignore` disables warnings for next markup block.\n\n```svelte\n\n<input bind:value={name} autofocus />\n```\n\n`@component` JSDoc shows on hover:\n\n````svelte\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````\n\n## docs/svelte/03-template-syntax/02-if.md\n\n# {#if ...}\n\nConditionally render content.\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## Examples\n\n```svelte\n{#if answer === 42}\n\t<p>what was the question?</p>\n{/if}\n```\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.\n\n## docs/svelte/03-template-syntax/03-each.md\n\n# {#each ...}\n\nIterate over arrays, array-likes (with `length`), or iterables (`Map`, `Set`). Internally converted via `Array.from`. `null`/`undefined` treated as empty arrays.\n\n## Basic syntax\n\n```svelte\n{#each items as item}\n\t<li>{item.name} x {item.qty}</li>\n{/each}\n```\n\n## With 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\nUse `(key)` to intelligently update lists (insert/move/delete) instead of updating in place. Keys should be strings/numbers.\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\n## Destructuring\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 item (render n times)\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\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```\n\n## docs/svelte/03-template-syntax/04-key.md\n\n# {#key ...}\n\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```\n\n## docs/svelte/03-template-syntax/05-await.md\n\n# {#await ...}\n\nBranches on Promise states: pending, fulfilled, rejected.\n\n## Syntax\n\n```svelte\n<!copy: false>\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## Examples\n\n**Full syntax:**\n```svelte\n{#await promise}\n\t<p>waiting for the promise to resolve...</p>\n{:then value}\n\t<p>The value is {value}</p>\n{:catch error}\n\t<p>Something went wrong: {error.message}</p>\n{/await}\n```\n\n**Omit catch:**\n```svelte\n{#await promise}\n\t<p>waiting for the promise to resolve...</p>\n{:then value}\n\t<p>The value is {value}</p>\n{/await}\n```\n\n**Omit pending:**\n```svelte\n{#await promise then value}\n\t<p>The value is {value}</p>\n{/await}\n```\n\n**Only error state:**\n```svelte\n{#await promise catch error}\n\t<p>The error is {error}</p>\n{/await}\n```\n\n## Gotchas\n\n- SSR only renders pending branch\n- Non-Promise expressions only render `:then` branch (including SSR)\n\n## Pattern: Lazy component loading\n\n```svelte\n{#await import('./Component.svelte') then { default: Component }}\n\t<Component />\n{/await}\n```\n\n## docs/svelte/03-template-syntax/06-snippet.md\n\n# {#snippet ...}\n\n## Syntax\n\n```svelte\n{#snippet name()}...{/snippet}\n{#snippet name(param1, param2, paramN)}...{/snippet}\n```\n\nSnippets create reusable markup chunks. Use with `{@render}` tags.\n\n## Basic Example\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## Parameters\n\n- Arbitrary number of parameters with default values\n- Destructuring supported\n- No rest parameters\n\n## Scope\n\nSnippets reference values from outer scope:\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\nSnippets can reference themselves and each other:\n\n```svelte\n{#snippet blastoff()}\n\t<span>\ud83d\ude80</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 to Components\n\n### Explicit props\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\n### Implicit props\n\nSnippets declared inside component tags become props automatically:\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\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\nContent inside component tags (not snippet declarations) becomes `children` snippet:\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**Gotcha:** Cannot have a prop named `children` if component has content inside 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<script>\n    let { children } = $props();\n</script>\n\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**Note:** `Snippet` type argument is a tuple for multiple parameters.\n\n## Exporting Snippets\n\nTop-level snippets can be exported from `<script module>` if they don't reference non-module `<script>` declarations:\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**Requires:** Svelte 5.5.0+\n\n## Programmatic Snippets\n\nUse [`createRawSnippet`](svelte#createRawSnippet) API for advanced use cases.\n\n## Migration\n\nSnippets replace Svelte 4 slots (now deprecated).\n\n## docs/svelte/03-template-syntax/07-@render.md\n\n# {@render ...}\n\nRenders a [snippet](snippet).\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 any JavaScript:\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 `{#if}` with fallback:\n\n```svelte\n{#if children}\n\t{@render children()}\n{:else}\n\t<p>fallback content</p>\n{/if}\n```\n\n## docs/svelte/03-template-syntax/08-@html.md\n\n# {@html ...}\n\nInjects raw HTML into component:\n\n```svelte\n<article>\n\t{@html content}\n</article>\n```\n\n**Warning:** Escape strings or use trusted values only to prevent XSS attacks. Never render unsanitized content.\n\n## Limitations\n\n- Expression must be valid standalone HTML (can't split tags)\n- Won't compile Svelte code\n\n## Styling\n\n`{@html}` content is invisible to scoped styles. Use `:global` modifier:\n\n```svelte\n<article>\n\t{@html content}\n</article>\n\n<style>\n\tarticle :global {\n\t\ta { color: hotpink }\n\t\timg { width: 100% }\n\t}\n</style>\n```\n\n## docs/svelte/03-template-syntax/09-@attach.md\n\n# {@attach ...}\n\nAttachments are functions that run in an effect when an element mounts or when state updates. Can return cleanup function.\n\n```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\n## Attachment factories\n\nFunctions can return attachments. Re-runs when state changes:\n\n```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\n## Inline attachments\n\n```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## Conditional attachments\n\nFalsy values = no attachment:\n\n```svelte\n<div {@attach enabled && myAttachment}>...</div>\n```\n\n## Passing to components\n\n`{@attach ...}` on components creates a Symbol prop. Spread props to pass attachments to elements:\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<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.\n\nTo prevent expensive re-runs, pass data in a function and read in 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## Utilities\n\n- [`createAttachmentKey`](svelte-attachments#createAttachmentKey) - add attachments to objects for spreading\n- [`fromAction`](svelte-attachments#fromAction) - convert actions to attachments\n\n## docs/svelte/03-template-syntax/10-@const.md\n\n# {@const ...}\n\nDefines a local constant within blocks.\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:\n- `{#if ...}`, `{#each ...}`, `{#snippet ...}` blocks\n- `<Component />`\n- `<svelte:boundary>`\n\n## docs/svelte/03-template-syntax/11-@debug.md\n\n# {@debug ...}\n\nLogs variable values when they change and pauses execution in devtools.\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## Usage\n\n**Accepts:** Comma-separated variable names (not expressions)\n\n```svelte\n{@debug user}\n{@debug user1, user2, user3}\n\n<!-- \u274c Invalid -->\n{@debug user.firstname}\n{@debug myArray[0]}\n{@debug !isReady}\n{@debug typeof user === 'object'}\n```\n\n**No arguments:** Triggers on any state change\n\n```svelte\n{@debug}\n```\n\n## docs/svelte/03-template-syntax/12-bind.md\n\n# bind:\n\nData flows down (parent \u2192 child). `bind:` flows data up (child \u2192 parent).\n\nSyntax: `bind:property={expression}` or `bind:property` (shorthand when names match)\n\n```svelte\n<input bind:value={value} />\n<input bind:value />\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## `<input bind:value>`\n\nBinds input's `value` property:\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 number:\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\nEmpty/invalid value is `undefined`.\n\nSince 5.6.0: `defaultValue` reverts on form reset (unless binding is `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\nFor checkboxes:\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` reverts on form reset:\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> Use `bind:group` for radio inputs, not `bind:checked`.\n\n## `<input bind:indeterminate>`\n\nFor checkbox indeterminate state:\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\nFor radio/checkbox groups:\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\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\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\nFor `type=\"file\"`:\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` object. Create via `DataTransfer` to modify programmatically.\n\n> Leave uninitialized for SSR compatibility.\n\n## `<select bind:value>`\n\nBinds to selected `<option>` value (any 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 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\nOmit `value` if it matches text:\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/reset value:\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**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\nFor `contenteditable` elements: `innerHTML`, `innerText`, `textContent`\n\n```svelte\n<div contenteditable=\"true\" bind:innerHTML={html}></div>\n```\n\n## Dimensions\n\nReadonly bindings (via `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 `display: inline-block` or similar. CSS transforms don't trigger `ResizeObserver`.\n\n## bind:this\n\nGet DOM node reference (available after mount):\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:\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 cleanup.\n\n## bind:_property_ for components\n\nBind to component props:\n\n```svelte\n<Keypad bind:value={pin} />\n```\n\nMark props as bindable with `$bindable()`:\n\n```svelte\n<script>\n\tlet { readonlyProperty, bindableProperty = $bindable() } = $props();\n</script>\n```\n\nBindable means _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.\n\n## docs/svelte/03-template-syntax/13-use.md\n\n# use: (Actions)\n\n> [!NOTE]\n> Svelte 5.29+: Consider using [attachments](@attach) instead - more flexible and composable.\n\nActions are functions called when an element mounts. Use `use:` directive with `$effect` for cleanup:\n\n```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\n\n\t\t\treturn () => {\n\t\t\t\t// teardown\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<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<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}\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\t\t\t// ...\n\t\t\tnode.dispatchEvent(new CustomEvent('swiperight'));\n\t\t});\n\t}\n</script>\n\n<div use:gestures onswipeleft={next} onswiperight={prev}>...</div>\n```\n\n## docs/svelte/03-template-syntax/14-transition.md\n\n# transition:\n\nTransitions trigger when elements enter/leave DOM due to state changes.\n\n`transition:` = bidirectional (can reverse mid-transition)\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## Local vs Global\n\n**Local** (default): plays only when own block created/destroyed\n**Global**: plays 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\t\t<p transition:fade|global>fades in and out when x or y change</p>\n\t{/if}\n{/if}\n```\n\n## Parameters\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 Transitions\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- `t`: 0\u21921 after easing (in transitions), 1\u21920 (out transitions)\n- `u`: `1 - t`\n- `css`: generates web animation keyframes (preferred - runs off main thread)\n- `tick`: called during transition (use only if `css` not possible)\n\n```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**With `tick`:**\n\n```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 function**: Called in next microtask, enables crossfade effects\n\n## 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```\n\n## docs/svelte/03-template-syntax/15-in-and-out.md\n\n# in: and out:\n\n`in:` and `out:` directives work like [`transition:`](transition) but are **not bidirectional** \u2014 they don't reverse if interrupted. If an out transition is aborted, transitions 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```\n\n## docs/svelte/03-template-syntax/16-animate.md\n\n# animate:\n\nTriggers when contents of a keyed each block are re-ordered. Only runs on index changes, not add/remove. Must be on immediate child of keyed each block.\n\n## Basic Usage\n\n```svelte\n{#each list as item, index (item)}\n\t<li animate:flip>{item}</li>\n{/each}\n```\n\n## 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\n- `t`: easing-applied value from 0\u21921\n- `u`: equals `1 - t`\n\n**CSS method (preferred - 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**Tick method (runs during animation):**\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```\n\n> Prefer `css` over `tick` - web animations run off main thread, preventing jank.\n\n## docs/svelte/03-template-syntax/17-style.md\n\n# style:\n\nShorthand for setting styles on elements.\n\n## Basic Usage\n\n```svelte\n<div style:color=\"red\">...</div>\n<!-- equivalent to -->\n<div style=\"color: red;\">...</div>\n```\n\n## Dynamic Values\n\n```svelte\n<div style:color={myColor}>...</div>\n```\n\n## Shorthand\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```\n\n## docs/svelte/03-template-syntax/18-class.md\n\n# class\n\nTwo ways to set classes: `class` attribute and `class:` directive.\n\n## Attributes\n\nPrimitive values:\n\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. Future versions will omit all falsy values.\n\n### Objects and arrays (Svelte 5.16+)\n\nUses [clsx](https://github.com/lukeed/clsx) internally.\n\n**Object** - truthy keys are added:\n\n```svelte\n<script>\n\tlet { cool } = $props();\n</script>\n\n\n<div class={{ cool, lame: !cool }}>...</div>\n```\n\n**Array** - truthy values combined:\n\n```svelte\n\n<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>\n```\n\n**Nested arrays/objects** - automatically flattened. 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+):\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\n\nLegacy conditional class syntax (pre-5.16):\n\n```svelte\n\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:` - more powerful and composable.\n\n## docs/svelte/03-template-syntax/19-await-expressions.md\n\n# await\n\n**Experimental feature (Svelte 5.36+)** \u2014 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(...)`\n- Inside markup\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## Synchronized updates\n\nUI updates wait for async work to complete \u2014 prevents inconsistent states. If you increment `a`, the `<p>` won't show `2 + 2 = 3`, it waits to show `2 + 2 = 4`.\n\nUpdates can overlap \u2014 fast updates render while slow ones are ongoing.\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.\n\nSequential `await` in `<script>` or functions run sequentially (normal JS behavior).\n\nException: Independent `$derived` update independently after initial sequential run:\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**Placeholder UI**: Use `<svelte:boundary>` with `pending` snippet (shown on first load only).\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 } =awaitrender(App);\n```\n\n`<svelte:boundary>` with `pending` snippet renders that snippet during SSR. All other `await` expressions resolve before `render(...)` returns.\n\n## Forking\n\n`fork(...)` (5.42+) runs `await` expressions for expected future actions (e.g., preloading):\n\n```svelte\n<script>\n\timport { fork } from 'svelte';\n\timport Menu from './Menu.svelte';\n\n\tlet open = $state(false);\n\n\t/** @type {import('svelte').Fork | null} */\n\tlet pending = null;\n\n\tfunction preload() {\n\t\tpending ??= fork(() => {\n\t\t\topen = true;\n\t\t});\n\t}\n\n\tfunction discard() {\n\t\tpending?.discard();\n\t\tpending = null;\n\t}\n</script>\n\n<button\n\tonfocusin={preload}\n\tonfocusout={discard}\n\tonpointerenter={preload}\n\tonpointerleave={discard}\n\tonclick={() => {\n\t\tpending?.commit();\n\t\tpending = null;\n\n\t\t// in case `pending` didn't exist\n\t\t// (if it did, this is a no-op)\n\t\topen = true;\n\t}}\n>open menu</button>\n\n{#if open}\n\t\n\t<Menu onclose={() => open = false} />\n{/if}\n```\n\n## Caveats\n\n- Experimental: breaking changes possible outside semver major\n- Effects run differently: block effects (`{#if}`, `{#each}`) run before `$effect.pre`/`beforeUpdate` in same component\n\n## docs/svelte/04-styling/01-scoped-styles.md\n\n# Scoped Styles\n\n## Basics\n\nCSS in `<style>` is scoped by default via hash-based classes (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. `animation` rules auto-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```\n\n## docs/svelte/04-styling/02-global-styles.md\n\n# Global Styles\n\n## :global(...)\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 {...}\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```\n\n## docs/svelte/04-styling/03-custom-properties.md\n\n# Custom Properties\n\n## Passing CSS Custom Properties\n\nPass static and dynamic CSS custom properties 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## How It Works\n\nDesugars to a wrapper element with inline styles:\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## Using Custom Properties\n\nRead custom properties with `var()` and provide 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\nCustom properties inherit from parent elements. Define on `:root` in global stylesheet for app-wide availability.\n\n**Gotcha:** Wrapper element affects CSS selectors using `>` combinator targeting direct children.\n\n## docs/svelte/04-styling/04-nested-style-elements.md\n\n# Nested `<style>` elements\n\nOnly one top-level `<style>` per component. Nested `<style>` tags (inside elements/logic blocks) are inserted as-is into DOM with **no scoping or processing**.\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```",
                "type": "text",
                "uri": "svelte-llm://svelte-core"
              }
            ]
          }
        },
        "resource_uri": "svelte-llm://svelte-core",
        "url": "https://svelte-llm.stanislav.garden/mcp/mcp"
      },
      "latency_ms": 491.55,
      "status": "ok"
    },
    "resources_list": {
      "details": {
        "headers": {
          "content-type": "text/event-stream"
        },
        "http_status": 200,
        "payload": {
          "id": 5,
          "jsonrpc": "2.0",
          "result": {
            "resources": [
              {
                "description": "Core Svelte 5 documentation: introduction, runes, template syntax, and styling",
                "name": "\ud83d\udce6 Svelte Core Documentation",
                "uri": "svelte-llm://svelte-core"
              },
              {
                "description": "Advanced Svelte 5 documentation: special elements, runtime, and miscellaneous",
                "name": "\ud83d\udce6 Svelte Advanced Documentation",
                "uri": "svelte-llm://svelte-advanced"
              },
              {
                "description": "Complete Svelte 5 documentation covering all sections",
                "name": "\ud83d\udce6 Complete Svelte Documentation",
                "uri": "svelte-llm://svelte-complete"
              },
              {
                "description": "Core SvelteKit documentation: getting started and core concepts",
                "name": "\ud83d\udce6 SvelteKit Core Documentation",
                "uri": "svelte-llm://sveltekit-core"
              },
              {
                "description": "Production SvelteKit documentation: build & deploy, advanced features, best practices",
                "name": "\ud83d\udce6 SvelteKit Production Documentation",
                "uri": "svelte-llm://sveltekit-production"
              },
              {
                "description": "Complete SvelteKit documentation covering all sections",
                "name": "\ud83d\udce6 Complete SvelteKit Documentation",
                "uri": "svelte-llm://sveltekit-complete"
              },
              {
                "name": "\ud83d\udcc4 Overview (docs/ai/10-introduction/10-overview.md)",
                "uri": "svelte-llm://doc/docs/ai/10-introduction/10-overview.md"
              },
              {
                "name": "\ud83d\udcc4 Local setup (docs/ai/20-setup/20-local-setup.md)",
                "uri": "svelte-llm://doc/docs/ai/20-setup/20-local-setup.md"
              },
              {
                "name": "\ud83d\udcc4 Remote setup (docs/ai/20-setup/30-remote-setup.md)",
                "uri": "svelte-llm://doc/docs/ai/20-setup/30-remote-setup.md"
              },
              {
                "name": "\ud83d\udcc4 Tools (docs/ai/30-capabilities/10-tools.md)",
                "uri": "svelte-llm://doc/docs/ai/30-capabilities/10-tools.md"
              },
              {
                "name": "\ud83d\udcc4 Resources (docs/ai/30-capabilities/20-resources.md)",
                "uri": "svelte-llm://doc/docs/ai/30-capabilities/20-resources.md"
              },
              {
                "name": "\ud83d\udcc4 Prompts (docs/ai/30-capabilities/30-prompts.md)",
                "uri": "svelte-llm://doc/docs/ai/30-capabilities/30-prompts.md"
              },
              {
                "name": "\ud83d\udcc4 Overview (docs/ai/40-claude-plugin/plugin.md)",
                "uri": "svelte-llm://doc/docs/ai/40-claude-plugin/plugin.md"
              },
              {
                "name": "\ud83d\udcc4 Subagent (docs/ai/40-claude-plugin/subagent.md)",
                "uri": "svelte-llm://doc/docs/ai/40-claude-plugin/subagent.md"
              },
              {
                "name": "\ud83d\udcc4 Overview (docs/ai/50-opencode-plugin/opencode-plugin.md)",
                "uri": "svelte-llm://doc/docs/ai/50-opencode-plugin/opencode-plugin.md"
              },
              {
                "name": "\ud83d\udcc4 Subagent (docs/ai/50-opencode-plugin/opencode-subagent.md)",
                "uri": "svelte-llm://doc/docs/ai/50-opencode-plugin/opencode-subagent.md"
              },
              {
                "name": "\ud83d\udcc4 Overview (docs/ai/60-skills/10-skills.md)",
                "uri": "svelte-llm://doc/docs/ai/60-skills/10-skills.md"
              },
              {
                "name": "\ud83d\udcc4 Overview (docs/cli/10-introduction/10-overview.md)",
                "uri": "svelte-llm://doc/docs/cli/10-introduction/10-overview.md"
              },
              {
                "name": "\ud83d\udcc4 Frequently asked questions (docs/cli/10-introduction/20-faq.md)",
                "uri": "svelte-llm://doc/docs/cli/10-introduction/20-faq.md"
              },
              {
                "name": "\ud83d\udcc4 sv create (docs/cli/20-commands/10-sv-create.md)",
                "uri": "svelte-llm://doc/docs/cli/20-commands/10-sv-create.md"
              },
              {
                "name": "\ud83d\udcc4 sv add (docs/cli/20-commands/20-sv-add.md)",
                "uri": "svelte-llm://doc/docs/cli/20-commands/20-sv-add.md"
              },
              {
                "name": "\ud83d\udcc4 sv check (docs/cli/20-commands/30-sv-check.md)",
                "uri": "svelte-llm://doc/docs/cli/20-commands/30-sv-check.md"
              },
              {
                "name": "\ud83d\udcc4 sv migrate (docs/cli/20-commands/40-sv-migrate.md)",
                "uri": "svelte-llm://doc/docs/cli/20-commands/40-sv-migrate.md"
              },
              {
                "name": "\ud83d\udcc4 devtools-json (docs/cli/30-add-ons/03-devtools-json.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/03-devtools-json.md"
              },
              {
                "name": "\ud83d\udcc4 drizzle (docs/cli/30-add-ons/05-drizzle.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/05-drizzle.md"
              },
              {
                "name": "\ud83d\udcc4 eslint (docs/cli/30-add-ons/10-eslint.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/10-eslint.md"
              },
              {
                "name": "\ud83d\udcc4 better-auth (docs/cli/30-add-ons/16-better-auth.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/16-better-auth.md"
              },
              {
                "name": "\ud83d\udcc4 mcp (docs/cli/30-add-ons/17-mcp.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/17-mcp.md"
              },
              {
                "name": "\ud83d\udcc4 mdsvex (docs/cli/30-add-ons/20-mdsvex.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/20-mdsvex.md"
              },
              {
                "name": "\ud83d\udcc4 paraglide (docs/cli/30-add-ons/25-paraglide.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/25-paraglide.md"
              },
              {
                "name": "\ud83d\udcc4 playwright (docs/cli/30-add-ons/30-playwright.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/30-playwright.md"
              },
              {
                "name": "\ud83d\udcc4 prettier (docs/cli/30-add-ons/35-prettier.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/35-prettier.md"
              },
              {
                "name": "\ud83d\udcc4 storybook (docs/cli/30-add-ons/40-storybook.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/40-storybook.md"
              },
              {
                "name": "\ud83d\udcc4 sveltekit-adapter (docs/cli/30-add-ons/45-sveltekit-adapter.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/45-sveltekit-adapter.md"
              },
              {
                "name": "\ud83d\udcc4 tailwindcss (docs/cli/30-add-ons/50-tailwind.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/50-tailwind.md"
              },
              {
                "name": "\ud83d\udcc4 vitest (docs/cli/30-add-ons/55-vitest.md)",
                "uri": "svelte-llm://doc/docs/cli/30-add-ons/55-vitest.md"
              },
              {
                "name": "\ud83d\udcc4 add-on (docs/cli/40-api/10-add-on.md)",
                "uri": "svelte-llm://doc/docs/cli/40-api/10-add-on.md"
              },
              {
                "name": "\ud83d\udcc4 sv-utils (docs/cli/40-api/20-sv-utils.md)",
                "uri": "svelte-llm://doc/docs/cli/40-api/20-sv-utils.md"
              },
              {
                "name": "\ud83d\udcc4 Introduction (docs/kit/10-getting-started/10-introduction.md)",
                "uri": "svelte-llm://doc/docs/kit/10-getting-started/10-introduction.md"
              },
              {
                "name": "\ud83d\udcc4 Creating a project (docs/kit/10-getting-started/20-creating-a-project.md)",
                "uri": "svelte-llm://doc/docs/kit/10-getting-started/20-creating-a-project.md"
              },
              {
                "name": "\ud83d\udcc4 Project types (docs/kit/10-getting-started/25-project-types.md)",
                "uri": "svelte-llm://doc/docs/kit/10-getting-started/25-project-types.md"
              },
              {
                "name": "\ud83d\udcc4 Project structure (docs/kit/10-getting-started/30-project-structure.md)",
                "uri": "svelte-llm://doc/docs/kit/10-getting-started/30-project-structure.md"
              },
              {
                "name": "\ud83d\udcc4 Web standards (docs/kit/10-getting-started/40-web-standards.md)",
                "uri": "svelte-llm://doc/docs/kit/10-getting-started/40-web-standards.md"
              },
              {
                "name": "\ud83d\udcc4 Routing (docs/kit/20-core-concepts/10-routing.md)",
                "uri": "svelte-llm://doc/docs/kit/20-core-concepts/10-routing.md"
              },
              {
                "name": "\ud83d\udcc4 Loading data (docs/kit/20-core-concepts/20-load.md)",
                "uri": "svelte-llm://doc/docs/kit/20-core-concepts/20-load.md"
              },
              {
                "name": "\ud83d\udcc4 Form actions (docs/kit/20-core-concepts/30-form-actions.md)",
                "uri": "svelte-llm://doc/docs/kit/20-core-concepts/30-form-actions.md"
              },
              {
                "name": "\ud83d\udcc4 Page options (docs/kit/20-core-concepts/40-page-options.md)",
                "uri": "svelte-llm://doc/docs/kit/20-core-concepts/40-page-options.md"
              },
              {
                "name": "\ud83d\udcc4 State management (docs/kit/20-core-concepts/50-state-management.md)",
                "uri": "svelte-llm://doc/docs/kit/20-core-concepts/50-state-management.md"
              },
              {
                "name": "\ud83d\udcc4 Remote functions (docs/kit/20-core-concepts/60-remote-functions.md)",
                "uri": "svelte-llm://doc/docs/kit/20-core-concepts/60-remote-functions.md"
              },
              {
                "name": "\ud83d\udcc4 Building your app (docs/kit/25-build-and-deploy/10-building-your-app.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/10-building-your-app.md"
              },
              {
                "name": "\ud83d\udcc4 Adapters (docs/kit/25-build-and-deploy/20-adapters.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/20-adapters.md"
              },
              {
                "name": "\ud83d\udcc4 Zero-config deployments (docs/kit/25-build-and-deploy/30-adapter-auto.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/30-adapter-auto.md"
              },
              {
                "name": "\ud83d\udcc4 Node servers (docs/kit/25-build-and-deploy/40-adapter-node.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/40-adapter-node.md"
              },
              {
                "name": "\ud83d\udcc4 Static site generation (docs/kit/25-build-and-deploy/50-adapter-static.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/50-adapter-static.md"
              },
              {
                "name": "\ud83d\udcc4 Single-page apps (docs/kit/25-build-and-deploy/55-single-page-apps.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/55-single-page-apps.md"
              },
              {
                "name": "\ud83d\udcc4 Cloudflare (docs/kit/25-build-and-deploy/60-adapter-cloudflare.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md"
              },
              {
                "name": "\ud83d\udcc4 Cloudflare Workers (docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md"
              },
              {
                "name": "\ud83d\udcc4 Netlify (docs/kit/25-build-and-deploy/80-adapter-netlify.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/80-adapter-netlify.md"
              },
              {
                "name": "\ud83d\udcc4 Vercel (docs/kit/25-build-and-deploy/90-adapter-vercel.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/90-adapter-vercel.md"
              },
              {
                "name": "\ud83d\udcc4 Writing adapters (docs/kit/25-build-and-deploy/99-writing-adapters.md)",
                "uri": "svelte-llm://doc/docs/kit/25-build-and-deploy/99-writing-adapters.md"
              },
              {
                "name": "\ud83d\udcc4 Advanced routing (docs/kit/30-advanced/10-advanced-routing.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/10-advanced-routing.md"
              },
              {
                "name": "\ud83d\udcc4 Hooks (docs/kit/30-advanced/20-hooks.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/20-hooks.md"
              },
              {
                "name": "\ud83d\udcc4 Errors (docs/kit/30-advanced/25-errors.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/25-errors.md"
              },
              {
                "name": "\ud83d\udcc4 Link options (docs/kit/30-advanced/30-link-options.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/30-link-options.md"
              },
              {
                "name": "\ud83d\udcc4 Service workers (docs/kit/30-advanced/40-service-workers.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/40-service-workers.md"
              },
              {
                "name": "\ud83d\udcc4 Server-only modules (docs/kit/30-advanced/50-server-only-modules.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/50-server-only-modules.md"
              },
              {
                "name": "\ud83d\udcc4 Snapshots (docs/kit/30-advanced/65-snapshots.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/65-snapshots.md"
              },
              {
                "name": "\ud83d\udcc4 Shallow routing (docs/kit/30-advanced/67-shallow-routing.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/67-shallow-routing.md"
              },
              {
                "name": "\ud83d\udcc4 Observability (docs/kit/30-advanced/68-observability.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/68-observability.md"
              },
              {
                "name": "\ud83d\udcc4 Packaging (docs/kit/30-advanced/70-packaging.md)",
                "uri": "svelte-llm://doc/docs/kit/30-advanced/70-packaging.md"
              },
              {
                "name": "\ud83d\udcc4 Auth (docs/kit/40-best-practices/03-auth.md)",
                "uri": "svelte-llm://doc/docs/kit/40-best-practices/03-auth.md"
              },
              {
                "name": "\ud83d\udcc4 Performance (docs/kit/40-best-practices/05-performance.md)",
                "uri": "svelte-llm://doc/docs/kit/40-best-practices/05-performance.md"
              },
              {
                "name": "\ud83d\udcc4 Icons (docs/kit/40-best-practices/06-icons.md)",
                "uri": "svelte-llm://doc/docs/kit/40-best-practices/06-icons.md"
              },
              {
                "name": "\ud83d\udcc4 Images (docs/kit/40-best-practices/07-images.md)",
                "uri": "svelte-llm://doc/docs/kit/40-best-practices/07-images.md"
              },
              {
                "name": "\ud83d\udcc4 Accessibility (docs/kit/40-best-practices/10-accessibility.md)",
                "uri": "svelte-llm://doc/docs/kit/40-best-practices/10-accessibility.md"
              },
              {
                "name": "\ud83d\udcc4 SEO (docs/kit/40-best-practices/20-seo.md)",
                "uri": "svelte-llm://doc/docs/kit/40-best-practices/20-seo.md"
              },
              {
                "name": "\ud83d\udcc4 Frequently asked questions (docs/kit/60-appendix/10-faq.md)",
                "uri": "svelte-llm://doc/docs/kit/60-appendix/10-faq.md"
              },
              {
                "name": "\ud83d\udcc4 Integrations (docs/kit/60-appendix/20-integrations.md)",
                "uri": "svelte-llm://doc/docs/kit/60-appendix/20-integrations.md"
              },
              {
                "name": "\ud83d\udcc4 Breakpoint Debugging (docs/kit/60-appendix/25-debugging.md)",
                "uri": "svelte-llm://doc/docs/kit/60-appendix/25-debugging.md"
              },
              {
                "name": "\ud83d\udcc4 Migrating to SvelteKit v2 (docs/kit/60-appendix/30-migrating-to-sveltekit-2.md)",
                "uri": "svelte-llm://doc/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md"
              },
              {
                "name": "\ud83d\udcc4 Migrating from Sapper (docs/kit/60-appendix/40-migrating.md)",
                "uri": "svelte-llm://doc/docs/kit/60-appendix/40-migrating.md"
              },
              {
                "name": "\ud83d\udcc4 Additional resources (docs/kit/60-appendix/50-additional-resources.md)",
                "uri": "svelte-llm://doc/docs/kit/60-appendix/50-additional-resources.md"
              },
              {
                "name": "\ud83d\udcc4 Glossary (docs/kit/60-appendix/60-glossary.md)",
                "uri": "svelte-llm://doc/docs/kit/60-appendix/60-glossary.md"
              },
              {
                "name": "\ud83d\udcc4 @sveltejs/kit (docs/kit/98-reference/10-@sveltejs-kit.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/10-@sveltejs-kit.md"
              },
              {
                "name": "\ud83d\udcc4 @sveltejs/kit/hooks (docs/kit/98-reference/15-@sveltejs-kit-hooks.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/15-@sveltejs-kit-hooks.md"
              },
              {
                "name": "\ud83d\udcc4 @sveltejs/kit/node/polyfills (docs/kit/98-reference/15-@sveltejs-kit-node-polyfills.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/15-@sveltejs-kit-node-polyfills.md"
              },
              {
                "name": "\ud83d\udcc4 @sveltejs/kit/node (docs/kit/98-reference/15-@sveltejs-kit-node.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/15-@sveltejs-kit-node.md"
              },
              {
                "name": "\ud83d\udcc4 @sveltejs/kit/vite (docs/kit/98-reference/15-@sveltejs-kit-vite.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/15-@sveltejs-kit-vite.md"
              },
              {
                "name": "\ud83d\udcc4 $app/environment (docs/kit/98-reference/20-$app-environment.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/20-$app-environment.md"
              },
              {
                "name": "\ud83d\udcc4 $app/forms (docs/kit/98-reference/20-$app-forms.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/20-$app-forms.md"
              },
              {
                "name": "\ud83d\udcc4 $app/navigation (docs/kit/98-reference/20-$app-navigation.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/20-$app-navigation.md"
              },
              {
                "name": "\ud83d\udcc4 $app/paths (docs/kit/98-reference/20-$app-paths.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/20-$app-paths.md"
              },
              {
                "name": "\ud83d\udcc4 $app/server (docs/kit/98-reference/20-$app-server.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/20-$app-server.md"
              },
              {
                "name": "\ud83d\udcc4 $app/state (docs/kit/98-reference/20-$app-state.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/20-$app-state.md"
              },
              {
                "name": "\ud83d\udcc4 $app/stores (docs/kit/98-reference/20-$app-stores.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/20-$app-stores.md"
              },
              {
                "name": "\ud83d\udcc4 $app/types (docs/kit/98-reference/20-$app-types.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/20-$app-types.md"
              },
              {
                "name": "\ud83d\udcc4 $env/dynamic/private (docs/kit/98-reference/25-$env-dynamic-private.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/25-$env-dynamic-private.md"
              },
              {
                "name": "\ud83d\udcc4 $env/dynamic/public (docs/kit/98-reference/25-$env-dynamic-public.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/25-$env-dynamic-public.md"
              },
              {
                "name": "\ud83d\udcc4 $env/static/private (docs/kit/98-reference/25-$env-static-private.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/25-$env-static-private.md"
              },
              {
                "name": "\ud83d\udcc4 $env/static/public (docs/kit/98-reference/25-$env-static-public.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/25-$env-static-public.md"
              },
              {
                "name": "\ud83d\udcc4 $lib (docs/kit/98-reference/26-$lib.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/26-$lib.md"
              },
              {
                "name": "\ud83d\udcc4 $service-worker (docs/kit/98-reference/27-$service-worker.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/27-$service-worker.md"
              },
              {
                "name": "\ud83d\udcc4 Configuration (docs/kit/98-reference/50-configuration.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/50-configuration.md"
              },
              {
                "name": "\ud83d\udcc4 Command Line Interface (docs/kit/98-reference/52-cli.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/52-cli.md"
              },
              {
                "name": "\ud83d\udcc4 Types (docs/kit/98-reference/54-types.md)",
                "uri": "svelte-llm://doc/docs/kit/98-reference/54-types.md"
              },
              {
                "name": "\ud83d\udcc4 Overview (docs/svelte/01-introduction/01-overview.md)",
                "uri": "svelte-llm://doc/docs/svelte/01-introduction/01-overview.md"
              },
              {
                "name": "\ud83d\udcc4 Getting started (docs/svelte/01-introduction/02-getting-started.md)",
                "uri": "svelte-llm://doc/docs/svelte/01-introduction/02-getting-started.md"
              },
              {
                "name": "\ud83d\udcc4 .svelte files (docs/svelte/01-introduction/03-svelte-files.md)",
                "uri": "svelte-llm://doc/docs/svelte/01-introduction/03-svelte-files.md"
              },
              {
                "name": "\ud83d\udcc4 .svelte.js and .svelte.ts files (docs/svelte/01-introduction/04-svelte-js-files.md)",
                "uri": "svelte-llm://doc/docs/svelte/01-introduction/04-svelte-js-files.md"
              },
              {
                "name": "\ud83d\udcc4 What are runes? (docs/svelte/02-runes/01-what-are-runes.md)",
                "uri": "svelte-llm://doc/docs/svelte/02-runes/01-what-are-runes.md"
              },
              {
                "name": "\ud83d\udcc4 $state (docs/svelte/02-runes/02-$state.md)",
                "uri": "svelte-llm://doc/docs/svelte/02-runes/02-$state.md"
              },
              {
                "name": "\ud83d\udcc4 $derived (docs/svelte/02-runes/03-$derived.md)",
                "uri": "svelte-llm://doc/docs/svelte/02-runes/03-$derived.md"
              },
              {
                "name": "\ud83d\udcc4 $effect (docs/svelte/02-runes/04-$effect.md)",
                "uri": "svelte-llm://doc/docs/svelte/02-runes/04-$effect.md"
              },
              {
                "name": "\ud83d\udcc4 $props (docs/svelte/02-runes/05-$props.md)",
                "uri": "svelte-llm://doc/docs/svelte/02-runes/05-$props.md"
              },
              {
                "name": "\ud83d\udcc4 $bindable (docs/svelte/02-runes/06-$bindable.md)",
                "uri": "svelte-llm://doc/docs/svelte/02-runes/06-$bindable.md"
              },
              {
                "name": "\ud83d\udcc4 $inspect (docs/svelte/02-runes/07-$inspect.md)",
                "uri": "svelte-llm://doc/docs/svelte/02-runes/07-$inspect.md"
              },
              {
                "name": "\ud83d\udcc4 $host (docs/svelte/02-runes/08-$host.md)",
                "uri": "svelte-llm://doc/docs/svelte/02-runes/08-$host.md"
              },
              {
                "name": "\ud83d\udcc4 Basic markup (docs/svelte/03-template-syntax/01-basic-markup.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/01-basic-markup.md"
              },
              {
                "name": "\ud83d\udcc4 {#if ...} (docs/svelte/03-template-syntax/02-if.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/02-if.md"
              },
              {
                "name": "\ud83d\udcc4 {#each ...} (docs/svelte/03-template-syntax/03-each.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/03-each.md"
              },
              {
                "name": "\ud83d\udcc4 {#key ...} (docs/svelte/03-template-syntax/04-key.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/04-key.md"
              },
              {
                "name": "\ud83d\udcc4 {#await ...} (docs/svelte/03-template-syntax/05-await.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/05-await.md"
              },
              {
                "name": "\ud83d\udcc4 {#snippet ...} (docs/svelte/03-template-syntax/06-snippet.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/06-snippet.md"
              },
              {
                "name": "\ud83d\udcc4 {@render ...} (docs/svelte/03-template-syntax/07-@render.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/07-@render.md"
              },
              {
                "name": "\ud83d\udcc4 {@html ...} (docs/svelte/03-template-syntax/08-@html.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/08-@html.md"
              },
              {
                "name": "\ud83d\udcc4 {@attach ...} (docs/svelte/03-template-syntax/09-@attach.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/09-@attach.md"
              },
              {
                "name": "\ud83d\udcc4 {@const ...} (docs/svelte/03-template-syntax/10-@const.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/10-@const.md"
              },
              {
                "name": "\ud83d\udcc4 {@debug ...} (docs/svelte/03-template-syntax/11-@debug.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/11-@debug.md"
              },
              {
                "name": "\ud83d\udcc4 bind: (docs/svelte/03-template-syntax/12-bind.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/12-bind.md"
              },
              {
                "name": "\ud83d\udcc4 use: (docs/svelte/03-template-syntax/13-use.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/13-use.md"
              },
              {
                "name": "\ud83d\udcc4 transition: (docs/svelte/03-template-syntax/14-transition.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/14-transition.md"
              },
              {
                "name": "\ud83d\udcc4 in: and out: (docs/svelte/03-template-syntax/15-in-and-out.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/15-in-and-out.md"
              },
              {
                "name": "\ud83d\udcc4 animate: (docs/svelte/03-template-syntax/16-animate.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/16-animate.md"
              },
              {
                "name": "\ud83d\udcc4 style: (docs/svelte/03-template-syntax/17-style.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/17-style.md"
              },
              {
                "name": "\ud83d\udcc4 class (docs/svelte/03-template-syntax/18-class.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/18-class.md"
              },
              {
                "name": "\ud83d\udcc4 await (docs/svelte/03-template-syntax/19-await-expressions.md)",
                "uri": "svelte-llm://doc/docs/svelte/03-template-syntax/19-await-expressions.md"
              },
              {
                "name": "\ud83d\udcc4 Scoped styles (docs/svelte/04-styling/01-scoped-styles.md)",
                "uri": "svelte-llm://doc/docs/svelte/04-styling/01-scoped-styles.md"
              },
              {
                "name": "\ud83d\udcc4 Global styles (docs/svelte/04-styling/02-global-styles.md)",
                "uri": "svelte-llm://doc/docs/svelte/04-styling/02-global-styles.md"
              },
              {
                "name": "\ud83d\udcc4 Custom properties (docs/svelte/04-styling/03-custom-properties.md)",
                "uri": "svelte-llm://doc/docs/svelte/04-styling/03-custom-properties.md"
              },
              {
                "name": "\ud83d\udcc4 Nested <style> elements (docs/svelte/04-styling/04-nested-style-elements.md)",
                "uri": "svelte-llm://doc/docs/svelte/04-styling/04-nested-style-elements.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:boundary> (docs/svelte/05-special-elements/01-svelte-boundary.md)",
                "uri": "svelte-llm://doc/docs/svelte/05-special-elements/01-svelte-boundary.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:window> (docs/svelte/05-special-elements/02-svelte-window.md)",
                "uri": "svelte-llm://doc/docs/svelte/05-special-elements/02-svelte-window.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:document> (docs/svelte/05-special-elements/03-svelte-document.md)",
                "uri": "svelte-llm://doc/docs/svelte/05-special-elements/03-svelte-document.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:body> (docs/svelte/05-special-elements/04-svelte-body.md)",
                "uri": "svelte-llm://doc/docs/svelte/05-special-elements/04-svelte-body.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:head> (docs/svelte/05-special-elements/05-svelte-head.md)",
                "uri": "svelte-llm://doc/docs/svelte/05-special-elements/05-svelte-head.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:element> (docs/svelte/05-special-elements/06-svelte-element.md)",
                "uri": "svelte-llm://doc/docs/svelte/05-special-elements/06-svelte-element.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:options> (docs/svelte/05-special-elements/07-svelte-options.md)",
                "uri": "svelte-llm://doc/docs/svelte/05-special-elements/07-svelte-options.md"
              },
              {
                "name": "\ud83d\udcc4 Stores (docs/svelte/06-runtime/01-stores.md)",
                "uri": "svelte-llm://doc/docs/svelte/06-runtime/01-stores.md"
              },
              {
                "name": "\ud83d\udcc4 Context (docs/svelte/06-runtime/02-context.md)",
                "uri": "svelte-llm://doc/docs/svelte/06-runtime/02-context.md"
              },
              {
                "name": "\ud83d\udcc4 Lifecycle hooks (docs/svelte/06-runtime/03-lifecycle-hooks.md)",
                "uri": "svelte-llm://doc/docs/svelte/06-runtime/03-lifecycle-hooks.md"
              },
              {
                "name": "\ud83d\udcc4 Imperative component API (docs/svelte/06-runtime/04-imperative-component-api.md)",
                "uri": "svelte-llm://doc/docs/svelte/06-runtime/04-imperative-component-api.md"
              },
              {
                "name": "\ud83d\udcc4 Hydratable data (docs/svelte/06-runtime/05-hydratable.md)",
                "uri": "svelte-llm://doc/docs/svelte/06-runtime/05-hydratable.md"
              },
              {
                "description": "Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.",
                "name": "\ud83d\udcc4 Best practices (docs/svelte/07-misc/01-best-practices.md)",
                "uri": "svelte-llm://doc/docs/svelte/07-misc/01-best-practices.md"
              },
              {
                "name": "\ud83d\udcc4 Testing (docs/svelte/07-misc/02-testing.md)",
                "uri": "svelte-llm://doc/docs/svelte/07-misc/02-testing.md"
              },
              {
                "name": "\ud83d\udcc4 TypeScript (docs/svelte/07-misc/03-typescript.md)",
                "uri": "svelte-llm://doc/docs/svelte/07-misc/03-typescript.md"
              },
              {
                "name": "\ud83d\udcc4 Custom elements (docs/svelte/07-misc/04-custom-elements.md)",
                "uri": "svelte-llm://doc/docs/svelte/07-misc/04-custom-elements.md"
              },
              {
                "name": "\ud83d\udcc4 Svelte 4 migration guide (docs/svelte/07-misc/06-v4-migration-guide.md)",
                "uri": "svelte-llm://doc/docs/svelte/07-misc/06-v4-migration-guide.md"
              },
              {
                "name": "\ud83d\udcc4 Svelte 5 migration guide (docs/svelte/07-misc/07-v5-migration-guide.md)",
                "uri": "svelte-llm://doc/docs/svelte/07-misc/07-v5-migration-guide.md"
              },
              {
                "name": "\ud83d\udcc4 Frequently asked questions (docs/svelte/07-misc/99-faq.md)",
                "uri": "svelte-llm://doc/docs/svelte/07-misc/99-faq.md"
              },
              {
                "name": "\ud83d\udcc4 svelte (docs/svelte/98-reference/20-svelte.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/20-svelte.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/action (docs/svelte/98-reference/21-svelte-action.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-action.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/animate (docs/svelte/98-reference/21-svelte-animate.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-animate.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/attachments (docs/svelte/98-reference/21-svelte-attachments.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-attachments.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/compiler (docs/svelte/98-reference/21-svelte-compiler.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-compiler.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/easing (docs/svelte/98-reference/21-svelte-easing.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-easing.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/events (docs/svelte/98-reference/21-svelte-events.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-events.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/legacy (docs/svelte/98-reference/21-svelte-legacy.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-legacy.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/motion (docs/svelte/98-reference/21-svelte-motion.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-motion.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/reactivity/window (docs/svelte/98-reference/21-svelte-reactivity-window.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-reactivity-window.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/reactivity (docs/svelte/98-reference/21-svelte-reactivity.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-reactivity.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/server (docs/svelte/98-reference/21-svelte-server.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-server.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/store (docs/svelte/98-reference/21-svelte-store.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-store.md"
              },
              {
                "name": "\ud83d\udcc4 svelte/transition (docs/svelte/98-reference/21-svelte-transition.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/21-svelte-transition.md"
              },
              {
                "name": "\ud83d\udcc4 Compiler errors (docs/svelte/98-reference/30-compiler-errors.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/30-compiler-errors.md"
              },
              {
                "name": "\ud83d\udcc4 Compiler warnings (docs/svelte/98-reference/30-compiler-warnings.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/30-compiler-warnings.md"
              },
              {
                "name": "\ud83d\udcc4 Runtime errors (docs/svelte/98-reference/30-runtime-errors.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/30-runtime-errors.md"
              },
              {
                "name": "\ud83d\udcc4 Runtime warnings (docs/svelte/98-reference/30-runtime-warnings.md)",
                "uri": "svelte-llm://doc/docs/svelte/98-reference/30-runtime-warnings.md"
              },
              {
                "name": "\ud83d\udcc4 Overview (docs/svelte/99-legacy/00-legacy-overview.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/00-legacy-overview.md"
              },
              {
                "name": "\ud83d\udcc4 Reactive let/var declarations (docs/svelte/99-legacy/01-legacy-let.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/01-legacy-let.md"
              },
              {
                "name": "\ud83d\udcc4 Reactive $: statements (docs/svelte/99-legacy/02-legacy-reactive-assignments.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/02-legacy-reactive-assignments.md"
              },
              {
                "name": "\ud83d\udcc4 export let (docs/svelte/99-legacy/03-legacy-export-let.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/03-legacy-export-let.md"
              },
              {
                "name": "\ud83d\udcc4 $$props and $$restProps (docs/svelte/99-legacy/04-legacy-$$props-and-$$restProps.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/04-legacy-$$props-and-$$restProps.md"
              },
              {
                "name": "\ud83d\udcc4 on: (docs/svelte/99-legacy/10-legacy-on.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/10-legacy-on.md"
              },
              {
                "name": "\ud83d\udcc4 <slot> (docs/svelte/99-legacy/20-legacy-slots.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/20-legacy-slots.md"
              },
              {
                "name": "\ud83d\udcc4 $$slots (docs/svelte/99-legacy/21-legacy-$$slots.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/21-legacy-$$slots.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:fragment> (docs/svelte/99-legacy/22-legacy-svelte-fragment.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/22-legacy-svelte-fragment.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:component> (docs/svelte/99-legacy/30-legacy-svelte-component.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/30-legacy-svelte-component.md"
              },
              {
                "name": "\ud83d\udcc4 <svelte:self> (docs/svelte/99-legacy/31-legacy-svelte-self.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/31-legacy-svelte-self.md"
              },
              {
                "name": "\ud83d\udcc4 Imperative component API (docs/svelte/99-legacy/40-legacy-component-api.md)",
                "uri": "svelte-llm://doc/docs/svelte/99-legacy/40-legacy-component-api.md"
              }
            ]
          }
        },
        "url": "https://svelte-llm.stanislav.garden/mcp/mcp"
      },
      "latency_ms": 418.6,
      "status": "ok"
    },
    "server_card": {
      "details": {
        "error": "Client error '404 Not Found' for url 'https://svelte-llm.stanislav.garden/.well-known/mcp/server-card.json'\nFor more information check: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404",
        "url": "https://svelte-llm.stanislav.garden/.well-known/mcp/server-card.json"
      },
      "latency_ms": 360.22,
      "status": "error"
    },
    "session_resume_probe": {
      "details": {
        "protocol_version": "2025-03-26",
        "reason": "no_session_id",
        "resume_expected": true,
        "transport": "streamable-http"
      },
      "latency_ms": null,
      "status": "warning"
    },
    "step_up_auth_probe": {
      "details": {
        "auth_required_checks": [],
        "broad_scopes": [],
        "challenge_headers": [],
        "minimal_scope_documented": false,
        "oauth_present": false,
        "scope_specificity_ratio": 0.0,
        "step_up_signals": [],
        "supported_scopes": []
      },
      "latency_ms": null,
      "status": "missing"
    },
    "tool_snapshot_probe": {
      "details": {
        "added": [],
        "changed_outputs": [],
        "current_tool_count": 2,
        "previous_tool_count": 2,
        "removed": [],
        "similarity": 1.0
      },
      "latency_ms": null,
      "status": "ok"
    },
    "tools_list": {
      "details": {
        "headers": {
          "content-type": "text/event-stream"
        },
        "http_status": 200,
        "payload": {
          "id": 2,
          "jsonrpc": "2.0",
          "result": {
            "tools": [
              {
                "description": "Lists all available Svelte 5 and SvelteKit documentation sections in a structured format. Returns sections as a list of \"* title: [section_title], path: [file_path]\" - you can use either the title or path when querying a specific section via the get_documentation tool. Always run list_sections first for any query related to Svelte development to discover available content.",
                "execution": {
                  "taskSupport": "forbidden"
                },
                "inputSchema": {
                  "$schema": "http://json-schema.org/draft-07/schema#",
                  "properties": {},
                  "type": "object"
                },
                "name": "list_sections"
              },
              {
                "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., \"docs/svelte/state.md\"). 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.",
                "execution": {
                  "taskSupport": "forbidden"
                },
                "inputSchema": {
                  "$schema": "http://json-schema.org/draft-07/schema#",
                  "additionalProperties": false,
                  "properties": {
                    "section": {
                      "anyOf": [
                        {
                          "type": "string"
                        },
                        {
                          "items": {
                            "type": "string"
                          },
                          "type": "array"
                        }
                      ],
                      "description": "The section name(s) to retrieve. Can search by title (e.g., \"$state\", \"load functions\") or file path (e.g., \"docs/svelte/state.md\"). Supports single string and array of strings"
                    }
                  },
                  "required": [
                    "section"
                  ],
                  "type": "object"
                },
                "name": "get_documentation"
              }
            ]
          }
        },
        "url": "https://svelte-llm.stanislav.garden/mcp/mcp"
      },
      "latency_ms": 311.14,
      "status": "ok"
    },
    "transport_compliance_probe": {
      "details": {
        "bad_protocol_error": null,
        "bad_protocol_headers": {
          "content-type": "application/json"
        },
        "bad_protocol_payload": {
          "error": {
            "code": -32000,
            "message": "Bad Request: Unsupported protocol version: 1999-99-99 (supported versions: 2025-11-25, 2025-06-18, 2025-03-26, 2024-11-05, 2024-10-07)"
          },
          "id": null,
          "jsonrpc": "2.0"
        },
        "bad_protocol_status_code": 400,
        "delete_error": null,
        "delete_status_code": null,
        "expired_session_error": null,
        "expired_session_status_code": null,
        "issues": [
          "missing_session_id",
          "missing_protocol_header"
        ],
        "last_event_id_visible": false,
        "protocol_header_present": false,
        "requested_protocol_version": "2025-03-26",
        "session_id_present": false,
        "transport": "streamable-http"
      },
      "latency_ms": 311.27,
      "status": "warning"
    },
    "utility_coverage_probe": {
      "details": {
        "completions": {
          "advertised": true,
          "live_probe": "not_executed",
          "sample_target": {
            "argument_name": "task",
            "name": "svelte-developer",
            "type": "prompt"
          }
        },
        "initialize_capability_keys": [
          "completions",
          "prompts",
          "resources",
          "tools"
        ],
        "pagination": {
          "metadata_signal": false,
          "next_cursor_methods": [],
          "supported": false
        },
        "tasks": {
          "advertised": false,
          "http_status": 200,
          "probe_status": "missing"
        }
      },
      "latency_ms": 105.0,
      "status": "warning"
    }
  },
  "failures": {
    "oauth_authorization_server": {
      "reason": "no_authorization_server"
    },
    "oauth_protected_resource": {
      "error": "Client error '404 Not Found' for url 'https://svelte-llm.stanislav.garden/.well-known/oauth-protected-resource'\nFor more information check: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404",
      "url": "https://svelte-llm.stanislav.garden/.well-known/oauth-protected-resource"
    },
    "openid_configuration": {
      "reason": "no_authorization_server"
    },
    "server_card": {
      "error": "Client error '404 Not Found' for url 'https://svelte-llm.stanislav.garden/.well-known/mcp/server-card.json'\nFor more information check: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404",
      "url": "https://svelte-llm.stanislav.garden/.well-known/mcp/server-card.json"
    }
  },
  "remote_url": "https://svelte-llm.stanislav.garden/mcp/mcp",
  "server_card_payload": null,
  "server_identifier": "garden.stanislav.svelte-llm/svelte-llm-mcp"
}