---
description: SvelteKit + Svelte 5 (runes) conventions
globs: ["**/*.svelte", "**/*.ts"]
alwaysApply: true
---

- Use Svelte 5 runes; don't use `export let` or `$:` reactive statements.
- `$state(...)` for reactive state — arrays/objects are deep proxies you can mutate; `$state.raw(...)` to opt out.
- `$derived(expr)` / `$derived.by(fn)` for computed values; keep them side-effect-free.
- `$props()` for props (defaults/rename/rest via destructuring); props are read-only — don't mutate them, use `$bindable()` for two-way binding.
- `$effect(...)` only for side-effects (DOM, analytics, external sync), never to derive state — use `$derived`. Don't read+write the same state in one effect.
- Routes are filesystem-based under `src/routes`: `[slug]`, `[...rest]`, `[[opt]]`. `+layout.svelte` renders `{@render children()}`.
- `+page.svelte` gets data via the `data` prop; `+server.js` exports `GET`/`POST`/etc. returning a `Response`.
- Server load (`+page.server.js`/`+layout.server.js`) for DB, secrets, cookies, `locals`; return devalue-serializable data.
- Universal load (`+page.js`/`+layout.js`) for public fetches and non-serializable values; use the injected `fetch`.
- Never put per-user state in server module-level variables (leaks across requests); keep `load` pure; use `setContext`/`getContext`, URL params, or snapshots.
- Types come from `./$types`.