diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md
index 19d642c50..41b45e0f5 100644
--- a/browser/CHANGELOG.md
+++ b/browser/CHANGELOG.md
@@ -11,9 +11,31 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - [#992](https://github.com/atomicdata-dev/atomic-server/issues/992) Fix Searchbox overflowing when displaying long names.
 - [#999](https://github.com/atomicdata-dev/atomic-server/issues/999) Fix parseMetaTags character escape issue.
 
+### @tomic/lib
+
+- `resource.props` is now writable: `resource.props.name = 'New Name'`.
+- Added `store.preloadResourceTree()` method.
+- Fix generated ontologies not working in a Next.js server context.
+
 ### @tomic/cli
 
 - [#983](https://github.com/atomicdata-dev/atomic-server/issues/983) Give clear error when name collisions are found in an ontology.
+- Generates class definitions that enables doing: `resource.props.name = 'New Name'`;
+
+### @tomic/svelte
+
+- [#700](https://github.com/atomicdata-dev/atomic-server/issues/700) Update to Svelte 5. There are significant changes to the API.
+- BREAKING CHANGE: Dropped support for Svelte 4 and below.
+- BREAKING CHANGE: `getResource()` now returns a reactive proxy instead of a readable store.
+- BREAKING CHANGE: `getResource()` now takes a function returning a subject instead of the subject directly. e.g. `getResource(() => 'https://my-atomicserver.com/my-resource');`.
+- BREAKING CHANGE: Removed `getValue()`. It is no longer needed. Instead use `resource.props.name` directly or do `const name = $derived(resource.get(core.properties.name));`.
+- BREAKING CHANGE: Removed `initStore()`. You now need to set your store on a context using `createAtomicStoreContext()`.
+- BREAKING CHANGE: Removed `loadResourceTree()`. It is now a method on `store`: `store.preloadResourceTree()`.
+- Added `createAtomicStoreContext()` and `getStoreFromContext()`.
+
+### @tomic/create-template
+
+- [#700](https://github.com/atomicdata-dev/atomic-server/issues/700) Update SvelteKit-site template to Svelte 5.
 
 ## [v0.40.0] - 2024-10-07
 
diff --git a/browser/cli/src/generateBaseObject.ts b/browser/cli/src/generateBaseObject.ts
index 687c60c4d..54a7b473e 100644
--- a/browser/cli/src/generateBaseObject.ts
+++ b/browser/cli/src/generateBaseObject.ts
@@ -1,4 +1,4 @@
-import { Resource, type Core } from '@tomic/lib';
+import { Resource, type Core, core } from '@tomic/lib';
 import { store } from './store.js';
 import { camelCaseify, dedupe } from './utils.js';
 import chalk from 'chalk';
@@ -8,6 +8,7 @@ export type ReverseMapping = Record<string, string>;
 type BaseObject = {
   classes: Record<string, string>;
   properties: Record<string, string>;
+  __classDefs: Record<string, string[]>;
 };
 
 export const generateBaseObject = async (
@@ -24,12 +25,14 @@ export const generateBaseObject = async (
   const baseObj = {
     classes: await listToObj(classes, 'classes'),
     properties: await listToObj(properties, 'properties'),
+    __classDefs: await createClassDefs(classes),
   };
 
   const objStr = `export const ${name} = {
     classes: ${recordToString(baseObj.classes)},
     properties: ${recordToString(baseObj.properties)},
-  } as const`;
+    __classDefs: ${stringifyClassDefs(baseObj.__classDefs)}
+  } as const satisfies OntologyBaseObject`;
 
   return [objStr, createReverseMapping(name, baseObj)];
 };
@@ -71,6 +74,26 @@ const listToObj = async (
   return Object.fromEntries(entries);
 };
 
+const createClassDefs = async (
+  classes: string[],
+): Promise<Record<string, string[]>> => {
+  const classResources = await Promise.all(
+    classes.map(async c => await store.getResource(c)),
+  );
+
+  const entries = classResources.map(resource => {
+    return [
+      resource.subject,
+      [
+        ...resource.getArray(core.properties.requires),
+        ...resource.getArray(core.properties.recommends),
+      ],
+    ];
+  });
+
+  return Object.fromEntries(entries);
+};
+
 const recordToString = (obj: Record<string, string>): string => {
   const innerSting = Object.entries(obj).reduce(
     (acc, [key, value]) => `${acc}\n\t${key}: '${value}',`,
@@ -80,6 +103,15 @@ const recordToString = (obj: Record<string, string>): string => {
   return `{${innerSting}\n   }`;
 };
 
+const stringifyClassDefs = (obj: Record<string, string[]>) => {
+  const innerString = Object.entries(obj).reduce(
+    (acc, [key, value]) => `${acc}\n\t["${key}"]: ${JSON.stringify(value)},`,
+    '',
+  );
+
+  return `{${innerString}\n   }`;
+};
+
 const createReverseMapping = (
   ontologyTitle: string,
   obj: BaseObject,
diff --git a/browser/cli/src/generateOntology.ts b/browser/cli/src/generateOntology.ts
index 6fd6c65f2..7969640d0 100644
--- a/browser/cli/src/generateOntology.ts
+++ b/browser/cli/src/generateOntology.ts
@@ -25,7 +25,7 @@ const TEMPLATE = `
 * For more info on how to use ontologies: https://github.com/atomicdata-dev/atomic-server/blob/develop/browser/cli/readme.md
 * -------------------------------- */
 
-import type { BaseProps } from '${Inserts.MODULE_ALIAS}'
+import type { OntologyBaseObject, BaseProps } from '${Inserts.MODULE_ALIAS}'
 
 ${Inserts.BASE_OBJECT}
 
diff --git a/browser/create-template/.gitignore b/browser/create-template/.gitignore
index 5e56e040e..abf17f7f4 100644
--- a/browser/create-template/.gitignore
+++ b/browser/create-template/.gitignore
@@ -1 +1,3 @@
 /bin
+
+/templates/**/ontologies/**/*
diff --git a/browser/create-template/templates/sveltekit-site/package.json b/browser/create-template/templates/sveltekit-site/package.json
index 953faa11a..2fb32d0f2 100644
--- a/browser/create-template/templates/sveltekit-site/package.json
+++ b/browser/create-template/templates/sveltekit-site/package.json
@@ -14,10 +14,10 @@
 		"update-ontologies": "ad-generate ontologies"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.3.0",
-		"@sveltejs/adapter-node": "^5.2.8",
-		"@sveltejs/kit": "^2.7.2",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/adapter-node": "^5.2.9",
+		"@sveltejs/kit": "^2.7.3",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
 		"@tomic/cli": "^0.39.0",
 		"@types/eslint": "^9.6.1",
 		"eslint": "^9.13.0",
@@ -26,8 +26,8 @@
 		"globals": "^15.11.0",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.7",
-		"svelte": "^4.2.19",
-		"svelte-check": "^3.8.6",
+		"svelte": "^5.1.4",
+		"svelte-check": "^4.0.5",
 		"typescript": "^5.6.3",
 		"typescript-eslint": "^8.11.0",
 		"vite": "^5.4.10",
@@ -35,8 +35,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@tomic/lib": "^0.39.0",
-		"@tomic/svelte": "^0.39.0",
+		"@tomic/lib": "^0.40.0",
+		"@tomic/svelte": "^0.40.0",
 		"svelte-markdown": "^0.4.1"
 	}
 }
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/atomic/getAllBlogposts.ts b/browser/create-template/templates/sveltekit-site/src/lib/atomic/getAllBlogposts.ts
index 22397595b..3685d3c41 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/atomic/getAllBlogposts.ts
+++ b/browser/create-template/templates/sveltekit-site/src/lib/atomic/getAllBlogposts.ts
@@ -1,9 +1,8 @@
 import { website } from '$lib/ontologies/website';
 import { CollectionBuilder, core } from '@tomic/lib';
-import { store as storeStore } from '@tomic/svelte';
-import { get } from 'svelte/store';
+import { getStore } from './getStore';
 export async function getAllBlogposts(): Promise<string[]> {
-	const store = get(storeStore);
+	const store = getStore();
 
 	const collection = new CollectionBuilder(store)
 		.setProperty(core.properties.isA)
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/atomic/getCurrentResource.ts b/browser/create-template/templates/sveltekit-site/src/lib/atomic/getCurrentResource.ts
index 656dc5ffc..7ca9ba668 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/atomic/getCurrentResource.ts
+++ b/browser/create-template/templates/sveltekit-site/src/lib/atomic/getCurrentResource.ts
@@ -32,5 +32,9 @@ export async function getCurrentResource(
 
 	const currentResourceSubject = await collection.getMemberWithIndex(0);
 
+	if (currentResourceSubject === undefined) {
+		return undefined;
+	}
+
 	return await store.getResource(currentResourceSubject);
 }
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/atomic/getStore.ts b/browser/create-template/templates/sveltekit-site/src/lib/atomic/getStore.ts
index 4e305340b..5181afb44 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/atomic/getStore.ts
+++ b/browser/create-template/templates/sveltekit-site/src/lib/atomic/getStore.ts
@@ -1,24 +1,22 @@
-import { get } from 'svelte/store';
-import { initStore, store as atomicStore } from '@tomic/svelte';
 import { Store } from '@tomic/lib';
 import { PUBLIC_ATOMIC_SERVER_URL } from '$env/static/public';
 import { initOntologies } from '$lib/ontologies';
 
+// We use a global store. Keep in mind that this means the cache is shared between sessions. Don't do this if you have data that should only be available to certain agents.
+let store: Store | undefined;
+
 const init = () => {
-	const atomicStore = new Store({
+	store = new Store({
 		serverUrl: PUBLIC_ATOMIC_SERVER_URL
 	});
-	initStore(atomicStore);
+
 	initOntologies();
 };
 
-export const getStore = () => {
-	let store = get(atomicStore);
-
+export const getStore = (): Store => {
 	if (store === undefined) {
 		init();
-		store = get(atomicStore);
 	}
 
-	return store;
+	return store!;
 };
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/atomic/preloadResources.ts b/browser/create-template/templates/sveltekit-site/src/lib/atomic/preloadResources.ts
index 4d225d1b6..738307717 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/atomic/preloadResources.ts
+++ b/browser/create-template/templates/sveltekit-site/src/lib/atomic/preloadResources.ts
@@ -1,6 +1,6 @@
 import { website } from '$lib/ontologies/website';
 import type { Resource } from '@tomic/lib';
-import { loadResourceTree } from '@tomic/svelte';
+import { getStore } from './getStore';
 
 /**
  * Due to how sveltekit works we sometimes need to preload resources for them to show up in the serverside rendered html.
@@ -9,8 +9,18 @@ import { loadResourceTree } from '@tomic/svelte';
  * If you do not preload the referenced resources they will not show up when the page is hydrated client side. This should not be a big problem but could cause issues with SEO or users that have javascript disabled.
  */
 export async function preloadResources(resource: Resource): Promise<void> {
+	const store = getStore();
+
+	if (resource.hasClasses(website.classes.website)) {
+		await store.preloadResourceTree(resource.subject, {
+			[website.properties.menuItems]: {
+				[website.properties.subItems]: true
+			}
+		});
+	}
+
 	if (resource.hasClasses(website.classes.page)) {
-		await loadResourceTree(resource.subject, {
+		await store.preloadResourceTree(resource.subject, {
 			[website.properties.blocks]: {
 				[website.properties.images]: true
 			}
@@ -18,7 +28,7 @@ export async function preloadResources(resource: Resource): Promise<void> {
 	}
 
 	if (resource.hasClasses(website.classes.blogpost)) {
-		await loadResourceTree(resource.subject, {
+		await store.preloadResourceTree(resource.subject, {
 			[website.properties.coverImage]: true
 		});
 	}
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/components/Layout/HStack.svelte b/browser/create-template/templates/sveltekit-site/src/lib/components/Layout/HStack.svelte
index 68ce9a00d..81041d73e 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/components/Layout/HStack.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/components/Layout/HStack.svelte
@@ -23,12 +23,12 @@
 		align-items: var(--hstack-align);
 		justify-content: var(--hstack-justify);
 
-		& > h1,
-		& > h2,
-		& > h3,
-		& > h4,
-		& > h5,
-		& > h6 {
+		:global(& > h1),
+		:global(& > h2),
+		:global(& > h3),
+		:global(& > h4),
+		:global(& > h5),
+		:global(& > h6) {
 			margin: 0;
 		}
 	}
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/components/Layout/VStack.svelte b/browser/create-template/templates/sveltekit-site/src/lib/components/Layout/VStack.svelte
index 37558afc2..2e025dac8 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/components/Layout/VStack.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/components/Layout/VStack.svelte
@@ -25,12 +25,12 @@
 		justify-content: var(--vstack-justify);
 		height: var(--vstack-height);
 		min-height: var(--vstack-min-height);
-		& > h1,
-		& > h2,
-		& > h3,
-		& > h4,
-		& > h5,
-		& > h6 {
+		:global(& > h1),
+		:global(& > h2),
+		:global(& > h3),
+		:global(& > h4),
+		:global(& > h5),
+		:global(& > h6) {
 			margin: 0;
 		}
 	}
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/components/Loader.svelte b/browser/create-template/templates/sveltekit-site/src/lib/components/Loader.svelte
deleted file mode 100644
index 8445727d0..000000000
--- a/browser/create-template/templates/sveltekit-site/src/lib/components/Loader.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import type { Resource } from '@tomic/lib';
-	import { store } from '@tomic/svelte';
-	import { onMount } from 'svelte';
-
-	export let resource: Resource;
-	let loading = resource.loading;
-
-	onMount(() => {
-		return $store.subscribe(resource.subject, (r) => (loading = r.loading));
-	});
-</script>
-
-{#if loading}
-	<div class="loader">Loading...</div>
-{:else}
-	<slot />
-{/if}
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/components/Navbar.svelte b/browser/create-template/templates/sveltekit-site/src/lib/components/Navbar.svelte
index e0424841a..9da5175b5 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/components/Navbar.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/components/Navbar.svelte
@@ -1,30 +1,28 @@
 <script lang="ts">
 	import { PUBLIC_WEBSITE_RESOURCE } from '$env/static/public';
-	import { type Website } from '$lib/ontologies/website';
+	import { website, type Website } from '$lib/ontologies/website';
 	import { getResource } from '@tomic/svelte';
 	import MenuItem from '../views/MenuItem/MenuItem.svelte';
 	import Container from './Layout/Container.svelte';
 	import HStack from './Layout/HStack.svelte';
-	import Loader from './Loader.svelte';
 
-	$: site = getResource<Website>(PUBLIC_WEBSITE_RESOURCE);
+	let site = getResource<Website>(() => PUBLIC_WEBSITE_RESOURCE);
+	let menuItems = $derived(site.props.menuItems ?? []);
 </script>
 
 <Container>
 	<nav>
 		<HStack align="center" justify="space-between" wrap>
-			<Loader resource={$site}>
-				<a class="site-title" href="/">
-					{$site.title}
-				</a>
-				<ul>
-					{#each $site.props.menuItems ?? [] as menuItem}
-						<li>
-							<MenuItem subject={menuItem} />
-						</li>
-					{/each}
-				</ul>
-			</Loader>
+			<a class="site-title" href="/">
+				{site.title}
+			</a>
+			<ul>
+				{#each menuItems as menuItem (menuItem)}
+					<li>
+						<MenuItem subject={menuItem} />
+					</li>
+				{/each}
+			</ul>
 		</HStack>
 	</nav>
 </Container>
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/components/Searchbar.svelte b/browser/create-template/templates/sveltekit-site/src/lib/components/Searchbar.svelte
index 904b807a3..0cc2a7413 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/components/Searchbar.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/components/Searchbar.svelte
@@ -2,14 +2,24 @@
 	import FaMagnifyingGlass from './Icons/FaMagnifyingGlass.svelte';
 	import HStack from './Layout/HStack.svelte';
 
-	export let value: string;
-	export let placeholder: string = 'Search...';
+	interface Props {
+		value?: string;
+		placeholder: string;
+		oninput: (value: string) => void;
+	}
+
+	let { value = $bindable(''), placeholder, oninput }: Props = $props();
 </script>
 
 <div class="search-bar">
 	<HStack align="center" gap="1ch">
 		<FaMagnifyingGlass />
-		<input type="search" bind:value {placeholder} />
+		<input
+			type="search"
+			bind:value
+			{placeholder}
+			oninput={(e) => oninput(e.currentTarget.value ?? '')}
+		/>
 	</HStack>
 </div>
 
@@ -22,7 +32,7 @@
 		&:focus-within {
 			box-shadow: 0px 0px 0px 2px var(--theme-color-accent);
 		}
-		& svg {
+		:global(& svg) {
 			width: 1rem;
 			fill: var(--theme-color-text-light);
 		}
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/components/SiteWrapper.svelte b/browser/create-template/templates/sveltekit-site/src/lib/components/SiteWrapper.svelte
index f683f1f94..f61b0fdaa 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/components/SiteWrapper.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/components/SiteWrapper.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { core } from '@tomic/lib';
 	import { getResource } from '@tomic/svelte';
-	import { currentSubject } from '$lib/stores/currentSubject';
+	import { appState } from '$lib/stores/appstate.svelte';
 	import '../../styles/reset.css';
 
-	let page = getResource(currentSubject);
+	let page = getResource(() => appState.currentSubject);
 </script>
 
 <svelte:head>
-	<title>{$page.title}</title>
-	<meta content={$page.get(core.properties.description)} name="description" />
+	<title>{page.title}</title>
+	<meta content={page.get(core.properties.description)} name="description" />
 </svelte:head>
 <slot />
 
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/stores/appstate.svelte.ts b/browser/create-template/templates/sveltekit-site/src/lib/stores/appstate.svelte.ts
new file mode 100644
index 000000000..59af0dbf9
--- /dev/null
+++ b/browser/create-template/templates/sveltekit-site/src/lib/stores/appstate.svelte.ts
@@ -0,0 +1,9 @@
+import { PUBLIC_WEBSITE_RESOURCE } from '$env/static/public';
+
+export const appState = $state({
+	currentSubject: PUBLIC_WEBSITE_RESOURCE
+});
+
+export const setCurrentSubject = (value: string) => {
+	appState.currentSubject = value;
+};
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/stores/currentSubject.ts b/browser/create-template/templates/sveltekit-site/src/lib/stores/currentSubject.ts
deleted file mode 100644
index 87022c93d..000000000
--- a/browser/create-template/templates/sveltekit-site/src/lib/stores/currentSubject.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { PUBLIC_WEBSITE_RESOURCE } from '$env/static/public';
-import { writable } from 'svelte/store';
-
-export const currentSubject = writable(PUBLIC_WEBSITE_RESOURCE);
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/utils.ts b/browser/create-template/templates/sveltekit-site/src/lib/utils.ts
index 210c7b72e..489b4dc9f 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/utils.ts
+++ b/browser/create-template/templates/sveltekit-site/src/lib/utils.ts
@@ -1,23 +1,18 @@
-import { derived, type Writable } from 'svelte/store';
-
 export function generateId(): string {
 	return (Math.random().toString(36) + '00000000000000000').slice(2, 10);
 }
 
-export function debounced<T>(store: Writable<T>, delay = 100) {
-	let initialised = false;
-	return derived(store, ($value, set: (value: T) => void) => {
-		if (!initialised) {
-			set($value);
-			initialised = true;
-			return;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const throttle = <Func extends (...args: any[]) => void | Promise<void>>(
+	fn: Func,
+	wait: number
+) => {
+	let prevTime = 0;
+	return (...args: Parameters<Func>) => {
+		const currentTime = Date.now();
+		if (currentTime - prevTime > wait) {
+			prevTime = currentTime;
+			return fn.apply(this, args);
 		}
-		const timeout = setTimeout(() => {
-			set($value);
-		}, delay);
-
-		return () => {
-			clearTimeout(timeout);
-		};
-	});
-}
+	};
+};
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/Block/BlockView.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/Block/BlockView.svelte
index 5f98e1931..f32c9979e 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/Block/BlockView.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/Block/BlockView.svelte
@@ -5,16 +5,23 @@
 	import TextBlock from './TextBlock.svelte';
 	import ImageGalleryBlock from './ImageGalleryBlock.svelte';
 
-	export let subject: string;
-	let block = getResource(subject);
+	interface Props {
+		subject: string;
+	}
 
-	$: component = $block.matchClass(
-		{
-			[website.classes.textBlock]: TextBlock,
-			[website.classes.imageGalleryBlock]: ImageGalleryBlock
-		},
-		DefaultView
+	const { subject }: Props = $props();
+
+	let block = getResource(() => subject);
+
+	let View = $derived(
+		block.matchClass(
+			{
+				[website.classes.textBlock]: TextBlock,
+				[website.classes.imageGalleryBlock]: ImageGalleryBlock
+			},
+			DefaultView
+		)
 	);
 </script>
 
-<svelte:component this={component} resource={$block} />
+<View resource={block} />
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/Block/ImageGalleryBlock.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/Block/ImageGalleryBlock.svelte
index 8a6f119d2..4e7da2495 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/Block/ImageGalleryBlock.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/Block/ImageGalleryBlock.svelte
@@ -3,10 +3,14 @@
 	import { Image } from '@tomic/svelte';
 	import type { ImageGalleryBlock } from '$lib/ontologies/website';
 
-	export let resource: Resource<ImageGalleryBlock>;
+	interface Props {
+		resource: Resource<ImageGalleryBlock>;
+	}
+
+	const { resource }: Props = $props();
 </script>
 
-{#if resource.get(core.properties.name)}
+{#if resource.props.name}
 	<h2>{resource.title}</h2>
 {/if}
 <div class="wrapper">
@@ -24,7 +28,7 @@
 			minmax(calc(var(--theme-size-container-width) / 3 - 4rem), 1fr)
 		);
 		gap: 1rem;
-		& img {
+		:global(& img) {
 			aspect-ratio: 1 / 1;
 			object-fit: cover;
 		}
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/Block/TextBlock.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/Block/TextBlock.svelte
index 36fc7f988..73983ef01 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/Block/TextBlock.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/Block/TextBlock.svelte
@@ -3,7 +3,11 @@
 	import type { Resource } from '@tomic/lib';
 	import SvelteMarkdown from 'svelte-markdown';
 
-	export let resource: Resource<TextBlock>;
+	interface Props {
+		resource: Resource<TextBlock>;
+	}
+
+	const { resource }: Props = $props();
 </script>
 
 <div class="wrapper">
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/DefaultView.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/DefaultView.svelte
index 029afd9a2..2d95029d1 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/DefaultView.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/DefaultView.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { Resource } from '@tomic/lib';
 
-	export let resource: Resource;
+	interface Props {
+		resource: Resource;
+	}
+
+	let { resource }: Props = $props();
 </script>
 
 <p>No supported view for {resource.title}.</p>
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/BlogIndexPageFullPage.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/BlogIndexPageFullPage.svelte
index b8553daec..a7e2efb64 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/BlogIndexPageFullPage.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/BlogIndexPageFullPage.svelte
@@ -1,26 +1,25 @@
 <script lang="ts">
 	import Container from '$lib/components/Layout/Container.svelte';
-	import { website } from '$lib/ontologies/website';
-	import { CollectionBuilder, core, type Resource } from '@tomic/lib';
-	import { store } from '@tomic/svelte';
-	import { writable, type Readable } from 'svelte/store';
+	import { website, type BlogIndexPage } from '$lib/ontologies/website';
+	import { core, type Resource } from '@tomic/lib';
 	import ListItemView from '../ListItem/ListItemView.svelte';
 	import VStack from '$lib/components/Layout/VStack.svelte';
 	import HStack from '$lib/components/Layout/HStack.svelte';
 	import Searchbar from '$lib/components/Searchbar.svelte';
-	import { debounced } from '$lib/utils';
-	import Loader from '$lib/components/Loader.svelte';
+	import { throttle } from '$lib/utils';
 	import { getAllBlogposts } from '$lib/atomic/getAllBlogposts';
+	import { getStoreFromContext } from '@tomic/svelte';
 
-	export let resource: Readable<Resource>;
+	interface Props {
+		resource: Resource<BlogIndexPage>;
+	}
+
+	const { resource }: Props = $props();
 
-	let searchValue = writable('');
-	// debouncedSearchValue gets updated at most once every 100ms to prevent too many requests being sent when the user is typing.
-	// Low end devices can't handle that many requests at once so we should limit it.
-	let debouncedSearchValue = debounced(searchValue, 200);
+	const store = getStoreFromContext();
 
-	let allItems: string[] = [];
-	let results: string[] = [];
+	let allItems = $state<string[]>([]);
+	let results = $state<string[]>([]);
 
 	// We create a collection that collects all resources with the blogpost class. Sorted by publishedAt in descending order.
 	getAllBlogposts().then((members) => {
@@ -28,45 +27,40 @@
 		results = members;
 	});
 
-	// Everytime debouncedSearchValue changes we perform a search and filter the results to only include blogposts.
-	$: {
-		if ($debouncedSearchValue) {
-			$store
-				.search($debouncedSearchValue, {
-					filters: {
-						[core.properties.isA]: website.classes.blogpost
-					}
-				})
-				.then((r) => (results = r));
-		} else {
-			// If the query is empty we show all blogposts.
+	const search = throttle(async (searchValue: string) => {
+		if (searchValue === '') {
 			results = allItems;
+			return;
 		}
-	}
+
+		results = await store.search(searchValue, {
+			filters: {
+				[core.properties.isA]: website.classes.blogpost
+			}
+		});
+	}, 200);
 </script>
 
-<Loader resource={$resource}>
-	<Container>
-		<div class="wrapper">
-			<VStack>
-				<HStack wrap fullWidth align="center" justify="space-between">
-					<h1>{$resource.title}</h1>
-					<Searchbar bind:value={$searchValue} placeholder="Search blogposts..." />
-				</HStack>
-				{#if results.length === 0}
-					<p>No results found</p>
-				{/if}
-				<ul>
-					{#each results as item (item)}
-						<li>
-							<ListItemView subject={item} />
-						</li>
-					{/each}
-				</ul>
-			</VStack>
-		</div>
-	</Container>
-</Loader>
+<Container>
+	<div class="wrapper">
+		<VStack>
+			<HStack wrap fullWidth align="center" justify="space-between">
+				<h1>{resource.title}</h1>
+				<Searchbar placeholder="Search blogposts..." oninput={search} />
+			</HStack>
+			{#if results.length === 0}
+				<p>No results found</p>
+			{/if}
+			<ul>
+				{#each results as item (item)}
+					<li>
+						<ListItemView subject={item} />
+					</li>
+				{/each}
+			</ul>
+		</VStack>
+	</div>
+</Container>
 
 <style>
 	.wrapper {
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/BlogpostFullPage.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/BlogpostFullPage.svelte
index b771ecae2..58c9ea61b 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/BlogpostFullPage.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/BlogpostFullPage.svelte
@@ -4,9 +4,12 @@
 	import type { Resource } from '@tomic/lib';
 	import { Image } from '@tomic/svelte';
 	import SvelteMarkdown from 'svelte-markdown';
-	import type { Readable } from 'svelte/store';
 
-	export let resource: Readable<Resource<Blogpost>>;
+	interface Props {
+		resource: Resource<Blogpost>;
+	}
+
+	const { resource }: Props = $props();
 
 	const formatter = new Intl.DateTimeFormat('default', {
 		year: 'numeric',
@@ -14,18 +17,18 @@
 		day: 'numeric'
 	});
 
-	$: date = formatter.format(new Date($resource.props.publishedAt));
+	let date = $derived(formatter.format(new Date(resource.props.publishedAt)));
 </script>
 
 <Container>
 	<div class="blog-wrapper">
-		<Image subject={$resource.props.coverImage} alt="" />
+		<Image subject={resource.props.coverImage} alt="" />
 		<div class="content">
-			<h1>{$resource.title}</h1>
+			<h1>{resource.title}</h1>
 			<p class="publish-date">
 				{date}
 			</p>
-			<SvelteMarkdown source={$resource.props.description} />
+			<SvelteMarkdown source={resource.props.description} />
 		</div>
 	</div>
 </Container>
@@ -33,7 +36,7 @@
 <style>
 	.blog-wrapper {
 		padding: 1rem;
-		& > picture > img {
+		:global(& > picture > img) {
 			width: 100%;
 			height: 25rem;
 			object-fit: cover;
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/DefaultFullPage.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/DefaultFullPage.svelte
index 5e4a615ee..70ac372b1 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/DefaultFullPage.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/DefaultFullPage.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
 	import Container from '$lib/components/Layout/Container.svelte';
 	import type { Resource } from '@tomic/lib';
-	import type { Readable } from 'svelte/store';
 
-	export let resource: Readable<Resource>;
+	interface Props {
+		resource: Resource;
+	}
+
+	const { resource }: Props = $props();
 </script>
 
 <Container>
-	<h1>{$resource.title}</h1>
+	<h1>{resource.title}</h1>
 
 	<p>No valid page view for this resource.</p>
 </Container>
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/FullPageView.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/FullPageView.svelte
index 36efd4abd..b95b7dab3 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/FullPageView.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/FullPageView.svelte
@@ -10,18 +10,24 @@
 		Renders a full page view. The actual view component is determined by the resource's class.
 	*/
 
-	export let subject: string;
+	interface Props {
+		subject: string;
+	}
 
-	$: resource = getResource(subject);
+	const { subject }: Props = $props();
 
-	$: component = $resource.matchClass(
-		{
-			[website.classes.page]: PageFullPage,
-			[website.classes.blogIndexPage]: BlogIndexPageFullPage,
-			[website.classes.blogpost]: BlogpostFullPage
-		},
-		DefaultFullPage
+	let resource = getResource(() => subject);
+
+	let View = $derived(
+		resource.matchClass(
+			{
+				[website.classes.page]: PageFullPage,
+				[website.classes.blogIndexPage]: BlogIndexPageFullPage,
+				[website.classes.blogpost]: BlogpostFullPage
+			},
+			DefaultFullPage
+		)
 	);
 </script>
 
-<svelte:component this={component} {resource} />
+<View {resource} />
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/PageFullPage.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/PageFullPage.svelte
index 9efaaba36..de7dd70a0 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/PageFullPage.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/FullPage/PageFullPage.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
 	import Container from '$lib/components/Layout/Container.svelte';
 	import type { Page } from '$lib/ontologies/website';
-	import { core, type Resource } from '@tomic/lib';
+	import { type Resource } from '@tomic/lib';
 	import BlockView from '../Block/BlockView.svelte';
-	import type { Readable } from 'svelte/store';
-	import { getValue } from '@tomic/svelte';
 
-	export let resource: Readable<Resource<Page>>;
+	interface Props {
+		resource: Resource<Page>;
+	}
 
-	$: title = getValue(resource, core.properties.name);
+	const { resource }: Props = $props();
 </script>
 
 <Container>
 	<div class="wrapper">
-		<h1>{$title}</h1>
+		<h1>{resource.title}</h1>
 
-		{#each $resource.props.blocks ?? [] as block (block)}
+		{#each resource.props.blocks ?? [] as block (block)}
 			<BlockView subject={block} />
 		{/each}
 	</div>
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/ListItem/BlogListItem.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/ListItem/BlogListItem.svelte
index 986548478..d6c04580a 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/ListItem/BlogListItem.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/ListItem/BlogListItem.svelte
@@ -3,7 +3,11 @@
 	import type { Resource } from '@tomic/lib';
 	import { Image } from '@tomic/svelte';
 
-	export let resource: Resource<Blogpost>;
+	interface Props {
+		resource: Resource<Blogpost>;
+	}
+
+	const { resource }: Props = $props();
 
 	const formatter = new Intl.DateTimeFormat('default', {
 		year: 'numeric',
@@ -11,7 +15,7 @@
 		day: 'numeric'
 	});
 
-	$: date = formatter.format(new Date(resource.props.publishedAt));
+	let date = $derived(formatter.format(new Date(resource.props.publishedAt)));
 </script>
 
 <a class="card" href={resource.props.href}>
@@ -34,7 +38,7 @@
 		border: 1px solid var(--border-color);
 		border-radius: var(--theme-border-radius);
 		overflow: clip;
-		& img {
+		:global(& img) {
 			aspect-ratio: 21 / 9;
 			object-fit: cover;
 			transition: transform 300ms ease-in-out;
@@ -42,7 +46,7 @@
 
 		&:hover {
 			border-color: var(--theme-color-accent);
-			& img {
+			:global(& img) {
 				transform: scale(1.1);
 			}
 		}
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/ListItem/ListItemView.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/ListItem/ListItemView.svelte
index 08782060b..0308124b9 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/ListItem/ListItemView.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/ListItem/ListItemView.svelte
@@ -4,15 +4,22 @@
 	import DefaultView from '../DefaultView.svelte';
 	import BlogListItem from './BlogListItem.svelte';
 
-	export let subject: string;
-	let listItem = getResource(subject);
+	interface Props {
+		subject: string;
+	}
 
-	$: component = $listItem.matchClass(
-		{
-			[website.classes.blogpost]: BlogListItem
-		},
-		DefaultView
+	const { subject }: Props = $props();
+
+	let listItem = getResource(() => subject);
+
+	let View = $derived(
+		listItem.matchClass(
+			{
+				[website.classes.blogpost]: BlogListItem
+			},
+			DefaultView
+		)
 	);
 </script>
 
-<svelte:component this={component} resource={$listItem} />
+<View resource={listItem} />
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/MenuItem/MenuItem.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/MenuItem/MenuItem.svelte
index 307079c42..1158cb9e1 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/MenuItem/MenuItem.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/MenuItem/MenuItem.svelte
@@ -1,27 +1,37 @@
 <script lang="ts">
-	import { website, type MenuItem } from '$lib/ontologies/website';
+	import { type MenuItem } from '$lib/ontologies/website';
 	import { generateId } from '$lib/utils';
-	import { getResource, getValue } from '@tomic/svelte';
+	import { getResource } from '@tomic/svelte';
 	import MenuItemLink from './MenuItemLink.svelte';
-	import { unknownSubject } from '@tomic/lib';
 	import type { FocusEventHandler } from 'svelte/elements';
-	import { currentSubject } from '$lib/stores/currentSubject';
-
+	import { appState } from '$lib/stores/appstate.svelte';
+	import Self from './MenuItem.svelte';
 	/*
 		This view renders a menu-item resource. A menu-item can have a linked-to property but also a sub-items property.
 		If it has a links-to prop, we simply render a link that navigates to the href of the linked resource.
 		If it has a sub-items prop, we render a button that toggles a popover in which we render this same view for all sub items.
 	*/
 
-	export let subject: string;
+	interface Props {
+		subject: string;
+	}
+
+	const { subject }: Props = $props();
 
 	/* A random id used to link the button to the popover */
 	const id = generateId();
+	const anchorName = `--menuItem-${id}`;
+
+	let menuItem = getResource<MenuItem>(() => subject);
+	let subItems = $derived(menuItem.props.subItems);
 
-	let menuItem = getResource<MenuItem>(subject ?? unknownSubject);
+	let popover: HTMLDivElement | undefined = $state();
+	let button: HTMLButtonElement | undefined = $state();
 
-	let popover: HTMLDivElement;
-	let button: HTMLButtonElement;
+	let submenuPosition = $state({
+		top: '0px',
+		left: '0px'
+	});
 
 	const closePopover = () => {
 		popover?.hidePopover();
@@ -35,7 +45,19 @@
 		}
 	};
 
-	$: subItems = getValue(menuItem, website.properties.subItems);
+	let calcPopoverPosition = () => {
+		if (!button || !popover) return;
+
+		// Check if the anchor position api is supported. If so we don't need to calculate the position.
+		if (getComputedStyle(popover).getPropertyValue('--supports-position-anchor') !== 'false') {
+			return;
+		}
+
+		const rect = button.getBoundingClientRect();
+
+		submenuPosition.top = `calc(${rect.top}px + 2rem)`;
+		submenuPosition.left = `calc(${rect.left}px - (var(--menu-width) / 2 - ${rect.width / 2}px))`;
+	};
 </script>
 
 <svelte:document
@@ -45,24 +67,38 @@
 		}
 	}}
 />
-
-{#if $subItems && $subItems.length > 0}
-	<button bind:this={button} popovertarget={id} popovertargetaction="toggle">
-		{$menuItem.title}
+{#if subItems && subItems.length > 0}
+	<button
+		bind:this={button}
+		popovertarget={id}
+		popovertargetaction="toggle"
+		onclick={calcPopoverPosition}
+		style:--anchor-name={anchorName}
+	>
+		{menuItem.title}
 	</button>
 
-	<div class="submenu" popover="manual" {id} bind:this={popover} on:focusout={onFocusout}>
-		{#each $subItems as subItem}
+	<div
+		class="submenu"
+		popover="manual"
+		{id}
+		bind:this={popover}
+		onfocusout={onFocusout}
+		style:--top={submenuPosition.top}
+		style:--left={submenuPosition.left}
+		style:--anchor-name={anchorName}
+	>
+		{#each subItems as subItem}
 			<ul>
 				<li>
-					<svelte:self subject={subItem} />
+					<Self subject={subItem} />
 				</li>
 			</ul>
 		{/each}
 	</div>
 {:else}
 	<!-- The resource does not have subitems so we just render a link -->
-	<MenuItemLink resource={$menuItem} active={$currentSubject === $menuItem.props.linksTo} />
+	<MenuItemLink resource={menuItem} active={appState.currentSubject === menuItem.props.linksTo} />
 {/if}
 
 <style>
@@ -70,7 +106,9 @@
 		padding: 0.5rem;
 		list-style: none;
 	}
+
 	button {
+		anchor-name: var(--anchor-name);
 		padding: 0.4rem;
 		display: inline-flex;
 		align-items: center;
@@ -81,7 +119,6 @@
 		background: none;
 		cursor: pointer;
 		transition: background-color 100ms ease-in-out;
-		anchor-name: --menu-item-anchor;
 		&:hover,
 		&:focus-visible {
 			background-color: var(--theme-color-bg-2);
@@ -89,10 +126,8 @@
 	}
 
 	.submenu {
-		position-anchor: --menu-item-anchor;
-		inset-area: bottom center;
-		position-area: bottom center;
-		width: max(20ch, anchor-size(width));
+		--menu-width: 20ch;
+		width: var(--menu-width);
 		border: 1px solid var(--theme-color-bg-1);
 		border-radius: var(--theme-border-radius);
 		box-shadow:
@@ -102,5 +137,15 @@
 			0px 22.3px 17.9px rgba(0, 0, 0, 0.042),
 			0px 41.8px 33.4px rgba(0, 0, 0, 0.05),
 			0px 100px 80px rgba(0, 0, 0, 0.07);
+
+		position-anchor: var(--anchor-name);
+		position-area: bottom center;
+
+		@supports not (anchor-name: --something) {
+			--supports-position-anchor: false;
+			position: fixed;
+			top: var(--top);
+			left: var(--left);
+		}
 	}
 </style>
diff --git a/browser/create-template/templates/sveltekit-site/src/lib/views/MenuItem/MenuItemLink.svelte b/browser/create-template/templates/sveltekit-site/src/lib/views/MenuItem/MenuItemLink.svelte
index e57478e6b..197c918d3 100644
--- a/browser/create-template/templates/sveltekit-site/src/lib/views/MenuItem/MenuItemLink.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/lib/views/MenuItem/MenuItemLink.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
 	import { unknownSubject, type Resource } from '@tomic/lib';
-	import { website, type MenuItem } from '$lib/ontologies/website';
-	import { getResource, getValue } from '@tomic/svelte';
+	import { type Page, type MenuItem } from '$lib/ontologies/website';
+	import { getResource } from '@tomic/svelte';
 
-	export let resource: Resource<MenuItem>;
-	export let active = false;
+	interface Props {
+		resource: Resource<MenuItem>;
+		active: boolean;
+	}
 
-	let href = '';
+	const { resource, active }: Props = $props();
 
-	$: page = getResource(resource.props.linksTo ?? unknownSubject);
-	$: pageHrefValue = getValue(page, website.properties.href);
+	let page = getResource<Page>(() => resource.props.linksTo);
 
 	// If the menu item has a linksTo prop we want the href value of the page it links to. If that doesn't exist we check for an external link.
-	$: href = $pageHrefValue ?? resource.props.externalLink ?? '';
+	let href = $derived(page.props.href ?? resource.props.externalLink ?? '');
 </script>
 
 <a {href} aria-current={active ? 'page' : 'false'}>{resource.title}</a>
diff --git a/browser/create-template/templates/sveltekit-site/src/routes/+layout.svelte b/browser/create-template/templates/sveltekit-site/src/routes/+layout.svelte
index 4da891c65..b145a47b3 100644
--- a/browser/create-template/templates/sveltekit-site/src/routes/+layout.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/routes/+layout.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
+	import { createAtomicStoreContext } from '@tomic/svelte';
 	import Navbar from '$lib/components/Navbar.svelte';
 	import SiteWrapper from '$lib/components/SiteWrapper.svelte';
 	import Footer from '$lib/components/Footer.svelte';
 	import VStack from '$lib/components/Layout/VStack.svelte';
+	import { getStore } from '$lib/atomic/getStore';
+
+	const store = getStore();
+	createAtomicStoreContext(store);
 </script>
 
 <SiteWrapper>
diff --git a/browser/create-template/templates/sveltekit-site/src/routes/+layout.ts b/browser/create-template/templates/sveltekit-site/src/routes/+layout.ts
index 24ed0af67..e783c2124 100644
--- a/browser/create-template/templates/sveltekit-site/src/routes/+layout.ts
+++ b/browser/create-template/templates/sveltekit-site/src/routes/+layout.ts
@@ -1,2 +1,14 @@
+import { PUBLIC_WEBSITE_RESOURCE } from '$env/static/public';
+import { getStore } from '$lib/atomic/getStore';
+import { preloadResources } from '$lib/atomic/preloadResources';
+
 // This can be false if you're using a fallback (i.e. SPA mode)
 export const prerender = false;
+
+export const load = async ({ fetch }) => {
+	const store = getStore();
+	store.injectFetch(fetch);
+
+	const site = await store.getResource(PUBLIC_WEBSITE_RESOURCE);
+	await preloadResources(site);
+};
diff --git a/browser/create-template/templates/sveltekit-site/src/routes/+page.svelte b/browser/create-template/templates/sveltekit-site/src/routes/+page.svelte
index c35f21f2f..98accd80b 100644
--- a/browser/create-template/templates/sveltekit-site/src/routes/+page.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import FullPageView from '$lib/views/FullPage/FullPageView.svelte';
-	import { currentSubject } from '$lib/stores/currentSubject';
+	import { appState } from '$lib/stores/appstate.svelte';
 
 	/*
 		This website only has 2 routes that are basically the same, the main difference is that svelte needs one specifically for the root path and then another one for all other paths.
@@ -10,11 +10,15 @@
 		We pass this subject to the FullPageView View that then determines what kind of view to render.
 	*/
 
-	export let data: PageData;
+	interface Props {
+		data: PageData;
+	}
+
+	const { data }: Props = $props();
 
 	let { subject } = data;
 
-	$: $currentSubject = subject;
+	appState.currentSubject = subject;
 </script>
 
 <FullPageView {subject} />
diff --git a/browser/create-template/templates/sveltekit-site/src/routes/[...path]/+page.svelte b/browser/create-template/templates/sveltekit-site/src/routes/[...path]/+page.svelte
index 9a1141aa9..8a6ffceea 100644
--- a/browser/create-template/templates/sveltekit-site/src/routes/[...path]/+page.svelte
+++ b/browser/create-template/templates/sveltekit-site/src/routes/[...path]/+page.svelte
@@ -1,13 +1,19 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import FullPageView from '$lib/views/FullPage/FullPageView.svelte';
-	import { currentSubject } from '$lib/stores/currentSubject';
+	import { appState } from '$lib/stores/appstate.svelte';
 
-	export let data: PageData;
+	interface Props {
+		data: PageData;
+	}
 
-	$: subject = data.subject;
+	const { data }: Props = $props();
 
-	$: $currentSubject = subject;
+	appState.currentSubject = data.subject;
+
+	$effect(() => {
+		appState.currentSubject = data.subject;
+	});
 </script>
 
-<FullPageView {subject} />
+<FullPageView subject={data.subject} />
diff --git a/browser/create-template/templates/sveltekit-site/svelte.config.js b/browser/create-template/templates/sveltekit-site/svelte.config.js
index fffb8494e..f2a3dddde 100644
--- a/browser/create-template/templates/sveltekit-site/svelte.config.js
+++ b/browser/create-template/templates/sveltekit-site/svelte.config.js
@@ -5,6 +5,8 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
+
+	runes: true,
 	preprocess: vitePreprocess(),
 
 	kit: {
diff --git a/browser/lib/src/ontologies/collections.ts b/browser/lib/src/ontologies/collections.ts
index e8d1eb1cb..2a94554e4 100644
--- a/browser/lib/src/ontologies/collections.ts
+++ b/browser/lib/src/ontologies/collections.ts
@@ -3,7 +3,7 @@
  * For more info on how to use ontologies: https://github.com/atomicdata-dev/atomic-server/blob/develop/browser/cli/readme.md
  * -------------------------------- */
 
-import type { BaseProps } from '../index.js';
+import type { OntologyBaseObject, BaseProps } from '../index.js';
 
 export const collections = {
   classes: {
@@ -22,7 +22,24 @@ export const collections = {
     includeExternal:
       'https://atomicdata.dev/properties/collection/includeExternal',
   },
-} as const;
+  __classDefs: {
+    ['https://atomicdata.dev/classes/Collection']: [
+      'https://atomicdata.dev/properties/name',
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/collection/currentPage',
+      'https://atomicdata.dev/properties/collection/members',
+      'https://atomicdata.dev/properties/collection/pageSize',
+      'https://atomicdata.dev/properties/collection/property',
+      'https://atomicdata.dev/properties/collection/sortBy',
+      'https://atomicdata.dev/properties/collection/sortDesc',
+      'https://atomicdata.dev/properties/collection/totalMembers',
+      'https://atomicdata.dev/properties/collection/totalPages',
+      'https://atomicdata.dev/properties/collection/value',
+      'https://atomicdata.dev/properties/collection/includeExternal',
+      'https://atomicdata.dev/properties/incomplete',
+    ],
+  },
+} as const satisfies OntologyBaseObject;
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Collections {
diff --git a/browser/lib/src/ontologies/commits.ts b/browser/lib/src/ontologies/commits.ts
index a75e78cb5..0e9a3313d 100644
--- a/browser/lib/src/ontologies/commits.ts
+++ b/browser/lib/src/ontologies/commits.ts
@@ -3,7 +3,7 @@
  * For more info on how to use ontologies: https://github.com/atomicdata-dev/atomic-server/blob/develop/browser/cli/readme.md
  * -------------------------------- */
 
-import type { BaseProps } from '../index.js';
+import type { OntologyBaseObject, BaseProps } from '../index.js';
 
 export const commits = {
   classes: {
@@ -21,7 +21,18 @@ export const commits = {
     destroy: 'https://atomicdata.dev/properties/destroy',
     signature: 'https://atomicdata.dev/properties/signature',
   },
-} as const;
+  __classDefs: {
+    ['https://atomicdata.dev/classes/Commit']: [
+      'https://atomicdata.dev/properties/createdAt',
+      'https://atomicdata.dev/properties/signature',
+      'https://atomicdata.dev/properties/signer',
+      'https://atomicdata.dev/properties/subject',
+      'https://atomicdata.dev/properties/destroy',
+      'https://atomicdata.dev/properties/remove',
+      'https://atomicdata.dev/properties/set',
+    ],
+  },
+} as const satisfies OntologyBaseObject;
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Commits {
diff --git a/browser/lib/src/ontologies/core.ts b/browser/lib/src/ontologies/core.ts
index 7aef1a759..ef494f244 100644
--- a/browser/lib/src/ontologies/core.ts
+++ b/browser/lib/src/ontologies/core.ts
@@ -3,7 +3,7 @@
  * For more info on how to use ontologies: https://github.com/atomicdata-dev/atomic-server/blob/develop/browser/cli/readme.md
  * -------------------------------- */
 
-import type { BaseProps } from '../index.js';
+import type { OntologyBaseObject, BaseProps } from '../index.js';
 
 export const core = {
   classes: {
@@ -35,7 +35,41 @@ export const core = {
     isLocked: 'https://atomicdata.dev/properties/isLocked',
     localId: 'https://atomicdata.dev/properties/localId',
   },
-} as const;
+  __classDefs: {
+    ['https://atomicdata.dev/classes/Class']: [
+      'https://atomicdata.dev/properties/shortname',
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/recommends',
+      'https://atomicdata.dev/properties/requires',
+    ],
+    ['https://atomicdata.dev/classes/Property']: [
+      'https://atomicdata.dev/properties/shortname',
+      'https://atomicdata.dev/properties/datatype',
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/classtype',
+      'https://atomicdata.dev/properties/isDynamic',
+      'https://atomicdata.dev/properties/isLocked',
+      'https://atomicdata.dev/properties/allowsOnly',
+    ],
+    ['https://atomicdata.dev/classes/Agent']: [
+      'https://atomicdata.dev/properties/publicKey',
+      'https://atomicdata.dev/properties/name',
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/drives',
+    ],
+    ['https://atomicdata.dev/classes/Datatype']: [
+      'https://atomicdata.dev/properties/shortname',
+      'https://atomicdata.dev/properties/description',
+    ],
+    ['https://atomicdata.dev/class/ontology']: [
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/shortname',
+      'https://atomicdata.dev/properties/classes',
+      'https://atomicdata.dev/properties/properties',
+      'https://atomicdata.dev/properties/instances',
+    ],
+  },
+} as const satisfies OntologyBaseObject;
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Core {
@@ -112,7 +146,7 @@ declare module '../index.js' {
     [core.properties.write]: string[];
     [core.properties.publicKey]: string;
     [core.properties.instances]: string[];
-    [core.properties.properties]: string[];
+    [core.properties.properties]: undefined;
     [core.properties.classes]: string[];
     [core.properties.isLocked]: boolean;
     [core.properties.localId]: string;
diff --git a/browser/lib/src/ontologies/dataBrowser.ts b/browser/lib/src/ontologies/dataBrowser.ts
index d50bc0a13..e984c0222 100644
--- a/browser/lib/src/ontologies/dataBrowser.ts
+++ b/browser/lib/src/ontologies/dataBrowser.ts
@@ -3,7 +3,7 @@
  * For more info on how to use ontologies: https://github.com/atomicdata-dev/atomic-server/blob/develop/browser/cli/readme.md
  * -------------------------------- */
 
-import type { BaseProps } from '../index.js';
+import type { OntologyBaseObject, BaseProps } from '../index.js';
 
 export const dataBrowser = {
   classes: {
@@ -58,7 +58,90 @@ export const dataBrowser = {
     tags: 'https://atomicdata.dev/properties/tags',
     url: 'https://atomicdata.dev/property/url',
   },
-} as const;
+  __classDefs: {
+    ['https://atomicdata.dev/classes/Article']: [
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/name',
+      'https://atomicdata.dev/properties/tags',
+      'https://atomicdata.dev/properties/published-at',
+    ],
+    ['https://atomicdata.dev/class/Bookmark']: [
+      'https://atomicdata.dev/properties/name',
+      'https://atomicdata.dev/property/url',
+      'https://atomicdata.dev/property/preview',
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/imageUrl',
+    ],
+    ['https://atomicdata.dev/classes/ChatRoom']: [
+      'https://atomicdata.dev/properties/name',
+      'https://atomicdata.dev/properties/messages',
+    ],
+    ['https://atomicdata.dev/ontology/data-browser/class/currency-property']: [
+      'https://atomicdata.dev/ontology/data-browser/property/currency',
+    ],
+    ['https://atomicdata.dev/classes/DateFormat']: [
+      'https://atomicdata.dev/properties/shortname',
+    ],
+    ['https://atomicdata.dev/class/DisplayStyle']: [
+      'https://atomicdata.dev/properties/name',
+    ],
+    ['https://atomicdata.dev/classes/Document']: [
+      'https://atomicdata.dev/properties/documents/elements',
+      'https://atomicdata.dev/properties/name',
+    ],
+    ['https://atomicdata.dev/classes/FloatRangeProperty']: [
+      'https://atomicdata.dev/properties/minFloat',
+      'https://atomicdata.dev/properties/maxFloat',
+    ],
+    ['https://atomicdata.dev/classes/Folder']: [
+      'https://atomicdata.dev/properties/name',
+      'https://atomicdata.dev/property/display-style',
+      'https://atomicdata.dev/properties/subresources',
+    ],
+    ['https://atomicdata.dev/classes/FormattedDate']: [
+      'https://atomicdata.dev/properties/dateFormat',
+    ],
+    ['https://atomicdata.dev/classes/FormattedNumber']: [
+      'https://atomicdata.dev/properties/numberFormatting',
+      'https://atomicdata.dev/properties/decimalPlaces',
+    ],
+    ['https://atomicdata.dev/classes/Importer']: [],
+    ['https://atomicdata.dev/classes/Message']: [
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/parent',
+    ],
+    ['https://atomicdata.dev/classes/NumberFormat']: [
+      'https://atomicdata.dev/properties/shortname',
+    ],
+    ['https://atomicdata.dev/classes/elements/Paragraph']: [
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/parent',
+    ],
+    ['https://atomicdata.dev/classes/RangeProperty']: [
+      'https://atomicdata.dev/properties/min',
+      'https://atomicdata.dev/properties/max',
+    ],
+    ['https://atomicdata.dev/classes/SelectProperty']: [
+      'https://atomicdata.dev/properties/allowsOnly',
+      'https://atomicdata.dev/properties/max',
+    ],
+    ['https://atomicdata.dev/classes/Table']: [
+      'https://atomicdata.dev/properties/classtype',
+      'https://atomicdata.dev/properties/name',
+    ],
+    ['https://atomicdata.dev/classes/Tag']: [
+      'https://atomicdata.dev/properties/shortname',
+      'https://atomicdata.dev/properties/color',
+      'https://atomicdata.dev/properties/emoji',
+    ],
+    ['https://atomicdata.dev/ontology/data-browser/class/template']: [
+      'https://atomicdata.dev/properties/name',
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/ontology/data-browser/property/image',
+      'https://atomicdata.dev/ontology/data-browser/property/resources',
+    ],
+  },
+} as const satisfies OntologyBaseObject;
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace DataBrowser {
diff --git a/browser/lib/src/ontologies/server.ts b/browser/lib/src/ontologies/server.ts
index 8ebf253dd..7e9392cb9 100644
--- a/browser/lib/src/ontologies/server.ts
+++ b/browser/lib/src/ontologies/server.ts
@@ -3,7 +3,7 @@
  * For more info on how to use ontologies: https://github.com/atomicdata-dev/atomic-server/blob/develop/browser/cli/readme.md
  * -------------------------------- */
 
-import type { BaseProps } from '../index.js';
+import type { OntologyBaseObject, BaseProps } from '../index.js';
 
 export const server = {
   classes: {
@@ -46,7 +46,50 @@ export const server = {
     imageWidth: 'https://atomicdata.dev/properties/imageWidth',
     imageHeight: 'https://atomicdata.dev/properties/imageHeight',
   },
-} as const;
+  __classDefs: {
+    ['https://atomicdata.dev/classes/Error']: [
+      'https://atomicdata.dev/properties/description',
+    ],
+    ['https://atomicdata.dev/classes/Endpoint']: [
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/endpoint/parameters',
+    ],
+    ['https://atomicdata.dev/classes/Drive']: [
+      'https://atomicdata.dev/properties/read',
+      'https://atomicdata.dev/properties/children',
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/subresources',
+      'https://atomicdata.dev/properties/write',
+      'https://atomicdata.dev/ontology/server/property/default-ontology',
+    ],
+    ['https://atomicdata.dev/classes/Redirect']: [
+      'https://atomicdata.dev/properties/destination',
+      'https://atomicdata.dev/properties/invite/redirectAgent',
+    ],
+    ['https://atomicdata.dev/classes/File']: [
+      'https://atomicdata.dev/properties/downloadURL',
+      'https://atomicdata.dev/properties/description',
+      'https://atomicdata.dev/properties/filesize',
+      'https://atomicdata.dev/properties/filename',
+      'https://atomicdata.dev/properties/checksum',
+      'https://atomicdata.dev/properties/mimetype',
+      'https://atomicdata.dev/properties/internalId',
+      'https://atomicdata.dev/properties/imageWidth',
+      'https://atomicdata.dev/properties/imageHeight',
+    ],
+    ['https://atomicdata.dev/classes/Invite']: [
+      'https://atomicdata.dev/properties/invite/target',
+      'https://atomicdata.dev/properties/invite/write',
+      'https://atomicdata.dev/properties/createdBy',
+      'https://atomicdata.dev/properties/invite/users',
+      'https://atomicdata.dev/properties/invite/usagesLeft',
+    ],
+    ['https://atomicdata.dev/ontology/server/class/endpoint-response']: [
+      'https://atomicdata.dev/ontology/server/property/status',
+      'https://atomicdata.dev/ontology/server/property/response-message',
+    ],
+  },
+} as const satisfies OntologyBaseObject;
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Server {
diff --git a/browser/lib/src/ontology.ts b/browser/lib/src/ontology.ts
index 07a69ddee..416252b61 100644
--- a/browser/lib/src/ontology.ts
+++ b/browser/lib/src/ontology.ts
@@ -1,8 +1,9 @@
 import { JSONValue } from './value.js';
 
-export type BaseObject = {
-  classes: Record<string, string>;
-  properties: Record<string, string>;
+export type OntologyBaseObject = {
+  readonly classes: Record<string, string>;
+  readonly properties: Record<string, string>;
+  readonly __classDefs: Record<string, string[]>;
 };
 
 // Extended via module augmentation
@@ -52,7 +53,7 @@ export type InferTypeOfValueInTriple<
 > = Returns;
 
 type QuickAccesKnownPropType<Class extends OptionalClass> = {
-  readonly [Prop in keyof PropsOfClass<Class> as PropSubjectToNameMapping[Prop]]: InferTypeOfValueInTriple<
+  [Prop in keyof PropsOfClass<Class> as PropSubjectToNameMapping[Prop]]: InferTypeOfValueInTriple<
     Class,
     Prop
   >;
@@ -65,26 +66,48 @@ export type QuickAccesPropType<Class extends OptionalClass = UnknownClass> =
 
 export type OptionalClass = keyof Classes | UnknownClass;
 
-// A map of all known classes and properties to their camelcased shortname.
-const globalReverseNameMapping = new Map<string, string>();
-
 /** Let atomic lib know your custom ontologies exist */
-export function registerOntologies(...ontologies: BaseObject[]): void {
+export function registerOntologies(...ontologies: OntologyBaseObject[]): void {
+  if (!globalThis.ATOMIC_SUBJECT_TO_NAME_MAPPING) {
+    globalThis.ATOMIC_SUBJECT_TO_NAME_MAPPING = new Map<string, string>();
+  }
+
   for (const ontology of ontologies) {
-    for (const [key, value] of Object.entries(ontology.classes)) {
-      globalReverseNameMapping.set(value, key);
+    for (const [key, value] of Object.entries(ontology.properties)) {
+      globalThis.ATOMIC_SUBJECT_TO_NAME_MAPPING.set(value, key);
     }
+  }
 
-    for (const [key, value] of Object.entries(ontology.properties)) {
-      globalReverseNameMapping.set(value, key);
+  if (!globalThis.ATOMIC_CLASS_DEFS) {
+    globalThis.ATOMIC_CLASS_DEFS = new Map<string, Record<string, string>>();
+  }
+
+  for (const ontology of ontologies) {
+    if (!ontology.__classDefs) {
+      throw new Error(
+        'Outdated ontology format, update your ontologies using @tomic/cli',
+      );
+    }
+
+    for (const [key, value] of Object.entries(ontology.__classDefs)) {
+      const classDef = Object.fromEntries(
+        value.map(subject => [getKnownNameBySubject(subject), subject]),
+      );
+      globalThis.ATOMIC_CLASS_DEFS.set(key, classDef);
     }
   }
 }
 
 export function getKnownNameBySubject(subject: string): string | undefined {
-  return globalReverseNameMapping.get(subject);
+  return globalThis.ATOMIC_SUBJECT_TO_NAME_MAPPING.get(subject);
+}
+
+export function getKnownClassDefBySubject(
+  subject: string,
+): Map<string, Record<string, string>> {
+  return globalThis.ATOMIC_CLASS_DEFS.get(subject);
 }
 
 export function __INTERNAL_GET_KNOWN_SUBJECT_MAPPING(): Map<string, string> {
-  return globalReverseNameMapping;
+  return globalThis.ATOMIC_SUBJECT_TO_NAME_MAPPING;
 }
diff --git a/browser/lib/src/resource.ts b/browser/lib/src/resource.ts
index 4c8f1dd3e..1188d5f87 100644
--- a/browser/lib/src/resource.ts
+++ b/browser/lib/src/resource.ts
@@ -15,7 +15,7 @@ import { core } from './ontologies/core.js';
 import { server } from './ontologies/server.js';
 
 import {
-  getKnownNameBySubject,
+  getKnownClassDefBySubject,
   type InferTypeOfValueInTriple,
   type OptionalClass,
   type QuickAccesPropType,
@@ -113,17 +113,38 @@ export class Resource<C extends OptionalClass = any> {
    * @example const description = resource.props.description
    */
   public get props(): QuickAccesPropType<C> {
-    const props: QuickAccesPropType<C> = {} as QuickAccesPropType<C>;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const innerThis = this;
 
-    for (const prop of this.propvals.keys()) {
-      const name = getKnownNameBySubject(prop);
+    const defs = this.getClasses()
+      .map(c => getKnownClassDefBySubject(c))
+      .filter(def => def !== undefined);
+
+    const getPropSubject = (name: string) => {
+      for (const def of defs) {
+        const value = def[name];
 
-      if (name) {
-        props[name] = this.get(prop);
+        if (value !== undefined) {
+          return value;
+        }
       }
-    }
+    };
+
+    return new Proxy({} as QuickAccesPropType<C>, {
+      get(_target, propName) {
+        const propSubject = getPropSubject(propName as string);
 
-    return props;
+        return innerThis.get(propSubject);
+      },
+
+      set(_target, propName, value) {
+        const propSubject = getPropSubject(propName as string);
+
+        innerThis.set(propSubject, value, false);
+
+        return true;
+      },
+    });
   }
 
   private get store(): Store {
@@ -191,7 +212,7 @@ export class Resource<C extends OptionalClass = any> {
     agent?: string,
     child?: string,
   ): Promise<[boolean, string | undefined]> {
-    const writeArray = this.get(properties.write);
+    const writeArray = this.get(core.properties.write);
 
     if (!agent) {
       return [false, 'No agent given'];
diff --git a/browser/lib/src/store.ts b/browser/lib/src/store.ts
index 649e56430..1834ad79f 100644
--- a/browser/lib/src/store.ts
+++ b/browser/lib/src/store.ts
@@ -98,6 +98,10 @@ type StoreEventHandlers = {
   [StoreEvents.Error]: ErrorCallback;
 };
 
+export interface ResourceTreeTemplate {
+  [property: string]: true | ResourceTreeTemplate;
+}
+
 /** Returns True if the client has WebSocket support */
 const supportsWebSockets = () => typeof WebSocket !== 'undefined';
 
@@ -956,6 +960,57 @@ export class Store {
     }
   }
 
+  /**
+   * Make sure the given tree of resources are available in the store.
+   * This is useful in situations where you need certain resources to be available before rendering a page.
+   * For example when rendering on a server that does not wait for resources to be fully available.
+   *
+   * **Example**:
+   * ```ts
+   * await store.preloadResourceTree('https://my-website.com', {
+   *  [myWebsite.properties.projects]: {
+   *    [myWebsite.properties.collaborators]: {
+   *      [core.properties.image]: true,
+   *    },
+   *    [core.properties.image]: true,
+   *  },
+   * });
+   * ```
+   */
+  public async preloadResourceTree(
+    subject: string,
+    treeTemplate: ResourceTreeTemplate,
+  ): Promise<void> {
+    const loadResourceTreeInner = async (
+      resource: Resource,
+      tree: ResourceTreeTemplate,
+    ) => {
+      const promises: Promise<unknown>[] = [];
+
+      for (const [property, branch] of Object.entries(tree)) {
+        await this.getResource(property);
+        const values = normalizeToArray(resource.get(property));
+        const resources = await Promise.all(
+          values.map(value => this.getResource(value)),
+        );
+
+        if (typeof branch === 'boolean') {
+          continue;
+        }
+
+        for (const res of resources) {
+          promises.push(loadResourceTreeInner(res, branch));
+        }
+      }
+
+      return Promise.allSettled(promises.flat());
+    };
+
+    const resource = await this.getResource(subject);
+
+    await loadResourceTreeInner(resource, treeTemplate);
+  }
+
   private randomPart(): string {
     return ulid().toLowerCase();
   }
@@ -996,6 +1051,18 @@ export class Store {
   }
 }
 
+const normalizeToArray = (value: JSONValue): string[] => {
+  if (typeof value === 'string') {
+    return [value];
+  }
+
+  if (Array.isArray(value)) {
+    return value as string[];
+  }
+
+  return [];
+};
+
 /**
  * A Property represents a relationship between a Subject and its Value.
  * https://atomicdata.dev/classes/Property
diff --git a/browser/pnpm-lock.yaml b/browser/pnpm-lock.yaml
index 2862f00ce..476cb3c9e 100644
--- a/browser/pnpm-lock.yaml
+++ b/browser/pnpm-lock.yaml
@@ -61,10 +61,10 @@ importers:
         version: 5.6.3
       vite:
         specifier: ^5.4.10
-        version: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
+        version: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
       vitest:
         specifier: ^2.1.3
-        version: 2.1.3(@types/node@20.17.0)(terser@5.31.6)
+        version: 2.1.3(@types/node@20.17.0)(terser@5.36.0)
 
   cli:
     dependencies:
@@ -101,73 +101,6 @@ importers:
         specifier: ^5.6.3
         version: 5.6.3
 
-  create-template/templates/sveltekit-site:
-    dependencies:
-      '@tomic/lib':
-        specifier: ^0.39.0
-        version: 0.39.0
-      '@tomic/svelte':
-        specifier: ^0.39.0
-        version: 0.39.0(@tomic/lib@0.39.0)(svelte@4.2.19)
-      svelte-markdown:
-        specifier: ^0.4.1
-        version: 0.4.1(svelte@4.2.19)
-    devDependencies:
-      '@sveltejs/adapter-auto':
-        specifier: ^3.3.0
-        version: 3.3.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))
-      '@sveltejs/adapter-node':
-        specifier: ^5.2.8
-        version: 5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))
-      '@sveltejs/kit':
-        specifier: ^2.7.2
-        version: 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
-      '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.2
-        version: 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
-      '@tomic/cli':
-        specifier: ^0.39.0
-        version: 0.39.0(@tomic/lib@0.39.0)
-      '@types/eslint':
-        specifier: ^9.6.1
-        version: 9.6.1
-      eslint:
-        specifier: ^9.13.0
-        version: 9.13.0(jiti@2.3.3)
-      eslint-config-prettier:
-        specifier: ^9.1.0
-        version: 9.1.0(eslint@9.13.0(jiti@2.3.3))
-      eslint-plugin-svelte:
-        specifier: ^2.46.0
-        version: 2.46.0(eslint@9.13.0(jiti@2.3.3))(svelte@4.2.19)(ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3))
-      globals:
-        specifier: ^15.11.0
-        version: 15.11.0
-      prettier:
-        specifier: ^3.3.3
-        version: 3.3.3
-      prettier-plugin-svelte:
-        specifier: ^3.2.7
-        version: 3.2.7(prettier@3.3.3)(svelte@4.2.19)
-      svelte:
-        specifier: ^4.2.19
-        version: 4.2.19
-      svelte-check:
-        specifier: ^3.8.6
-        version: 3.8.6(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@4.2.19)
-      typescript:
-        specifier: ^5.6.3
-        version: 5.6.3
-      typescript-eslint:
-        specifier: ^8.11.0
-        version: 8.11.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      vite:
-        specifier: ^5.4.10
-        version: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
-      vitest:
-        specifier: ^2.1.3
-        version: 2.1.3(@types/node@20.17.0)(terser@5.36.0)
-
   data-browser:
     dependencies:
       '@bugsnag/core':
@@ -405,10 +338,10 @@ importers:
         version: 5.6.3
       vite:
         specifier: ^5.4.10
-        version: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
+        version: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
       vite-plugin-dts:
         specifier: ^3.9.1
-        version: 3.9.1(@types/node@20.17.0)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))
+        version: 3.9.1(@types/node@20.17.0)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
 
   react:
     dependencies:
@@ -440,16 +373,16 @@ importers:
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.3.0
-        version: 3.3.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)))
+        version: 3.3.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))
       '@sveltejs/kit':
         specifier: ^2.7.2
-        version: 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))
+        version: 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
       '@sveltejs/package':
         specifier: ^2.3.6
-        version: 2.3.6(svelte@4.2.19)(typescript@5.6.3)
+        version: 2.3.6(svelte@5.1.4)(typescript@5.6.3)
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.2
-        version: 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))
+        specifier: ^4.0.0
+        version: 4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
       '@types/eslint':
         specifier: ^9.6.1
         version: 9.6.1
@@ -461,7 +394,7 @@ importers:
         version: 9.1.0(eslint@9.13.0(jiti@2.3.3))
       eslint-plugin-svelte:
         specifier: ^2.46.0
-        version: 2.46.0(eslint@9.13.0(jiti@2.3.3))(svelte@4.2.19)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3))
+        version: 2.46.0(eslint@9.13.0(jiti@2.3.3))(svelte@5.1.4)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3))
       globals:
         specifier: ^15.11.0
         version: 15.11.0
@@ -470,16 +403,16 @@ importers:
         version: 3.3.3
       prettier-plugin-svelte:
         specifier: ^3.2.7
-        version: 3.2.7(prettier@3.3.3)(svelte@4.2.19)
+        version: 3.2.7(prettier@3.3.3)(svelte@5.1.4)
       publint:
         specifier: ^0.1.16
         version: 0.1.16
       svelte:
-        specifier: ^4.2.19
-        version: 4.2.19
+        specifier: ^5.1.4
+        version: 5.1.4
       svelte-check:
         specifier: ^3.8.6
-        version: 3.8.6(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@4.2.19)
+        version: 3.8.6(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@5.1.4)
       typescript:
         specifier: ^5.6.3
         version: 5.6.3
@@ -488,7 +421,10 @@ importers:
         version: 8.11.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
       vite:
         specifier: ^5.4.10
-        version: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
+        version: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
+      vitest:
+        specifier: ^2.1.3
+        version: 2.1.3(@types/node@20.17.0)(terser@5.36.0)
 
 packages:
 
@@ -2359,24 +2295,6 @@ packages:
       '@types/babel__core':
         optional: true
 
-  '@rollup/plugin-commonjs@28.0.1':
-    resolution: {integrity: sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==}
-    engines: {node: '>=16.0.0 || 14 >= 14.17'}
-    peerDependencies:
-      rollup: ^2.68.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/plugin-json@6.1.0':
-    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/plugin-node-resolve@15.3.0':
     resolution: {integrity: sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==}
     engines: {node: '>=14.0.0'}
@@ -2544,11 +2462,6 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
-  '@sveltejs/adapter-node@5.2.8':
-    resolution: {integrity: sha512-wll164mO8pX/0Ak6/64h0OzO4Id24PBmTla3zRlGEdbdQGkGb2WZPZOuvcWi6IEpwekA4RVFe58fjbkIV0Bslw==}
-    peerDependencies:
-      '@sveltejs/kit': ^2.4.0
-
   '@sveltejs/kit@2.7.2':
     resolution: {integrity: sha512-bFwrl+0bNr0/DHQZM0INwwSPNYqDjfsKRhUoa6rj9d8tDZzszBrJ3La6/HVFxWGONEigtG+SzHXa1BEa1BLdwA==}
     engines: {node: '>=18.13'}
@@ -2565,19 +2478,19 @@ packages:
     peerDependencies:
       svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
-    resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1':
+    resolution: {integrity: sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      '@sveltejs/vite-plugin-svelte': ^4.0.0-next.0||^4.0.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
-  '@sveltejs/vite-plugin-svelte@3.1.2':
-    resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte@4.0.0':
+    resolution: {integrity: sha512-kpVJwF+gNiMEsoHaw+FJL76IYiwBikkxYU83+BpqQLdVMff19KeRKLd2wisS8niNBMJ2omv5gG+iGDDwd8jzag==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
   '@swc/core-darwin-arm64@1.7.39':
@@ -2824,21 +2737,6 @@ packages:
   '@tokenizer/token@0.3.0':
     resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
 
-  '@tomic/cli@0.39.0':
-    resolution: {integrity: sha512-A0zH830nMywkBvGjVm6ZUuvTJLDtFR3MuZ9Sx//BNzM1bs3Ckn++Nt509ohUkRaFPem/XBwstC9p0Q1+SRaeIQ==}
-    hasBin: true
-    peerDependencies:
-      '@tomic/lib': 0.39.0
-
-  '@tomic/lib@0.39.0':
-    resolution: {integrity: sha512-LO+nmbZvF6NYWEWJB7PYd9aKkOQ5xcrYbFNN2/40tc29hKbKNkCKtQURg+LhW/jrQI9RKMPyXN/7Loa4oiZt4A==}
-
-  '@tomic/svelte@0.39.0':
-    resolution: {integrity: sha512-Dk1Q6hao28FK+tqX9jP2iLHgQZLEPKj3s2zGOC5S6ZEd+9+hYPZBID/+uZTWC7jLlZZqbVtoTWUKyNI2hgdWaA==}
-    peerDependencies:
-      '@tomic/lib': 0.39.0
-      svelte: ^4.0.0
-
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -3012,9 +2910,6 @@ packages:
   '@types/markdown-it@14.1.2':
     resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
 
-  '@types/marked@5.0.2':
-    resolution: {integrity: sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==}
-
   '@types/mdast@3.0.15':
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
 
@@ -3353,6 +3248,11 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-typescript@1.4.13:
+    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
+    peerDependencies:
+      acorn: '>=8.9.0'
+
   acorn-walk@8.3.4:
     resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
     engines: {node: '>=0.4.0'}
@@ -3944,9 +3844,6 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  code-red@1.0.4:
-    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
-
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -4775,6 +4672,9 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
+  esrap@1.2.2:
+    resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -5723,9 +5623,6 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
-  is-reference@1.2.1:
-    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
-
   is-reference@3.0.2:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
 
@@ -6201,11 +6098,6 @@ packages:
     engines: {node: '>= 12'}
     hasBin: true
 
-  marked@5.1.2:
-    resolution: {integrity: sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==}
-    engines: {node: '>= 16'}
-    hasBin: true
-
   maxstache-stream@1.0.4:
     resolution: {integrity: sha512-v8qlfPN0pSp7bdSoLo1NTjG43GXGqk5W2NWFnOCq2GlmFFqebGzPCjLKSbShuqIOVorOtZSAy7O/S1OCCRONUw==}
 
@@ -7062,9 +6954,6 @@ packages:
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -8198,17 +8087,6 @@ packages:
       svelte:
         optional: true
 
-  svelte-hmr@0.16.0:
-    resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
-    engines: {node: ^12.20 || ^14.13.1 || >= 16}
-    peerDependencies:
-      svelte: ^3.19.0 || ^4.0.0
-
-  svelte-markdown@0.4.1:
-    resolution: {integrity: sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==}
-    peerDependencies:
-      svelte: ^4.0.0
-
   svelte-preprocess@5.1.4:
     resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
     engines: {node: '>= 16.0.0'}
@@ -8252,9 +8130,9 @@ packages:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@4.2.19:
-    resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
-    engines: {node: '>=16'}
+  svelte@5.1.4:
+    resolution: {integrity: sha512-qgHDV7AyvBZa2pbf+V0tnvWrN1LKD8LdUsBkR/SSYVVN6zXexiXnOy5Pjcjft2y/2NJJVa8ORUHFVn3oiWCLVQ==}
+    engines: {node: '>=18'}
 
   svgo@3.3.2:
     resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
@@ -8309,11 +8187,6 @@ packages:
     resolution: {integrity: sha512-flFL3m4wuixmf6IfhFJd1YPiLiMuxEc8uHRM1buzIeZPm22Au2pDqBJQgdo7n1WfPU1ONFGv7YDwpFBmHGF6lg==}
     engines: {node: '>=12'}
 
-  terser@5.31.6:
-    resolution: {integrity: sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   terser@5.36.0:
     resolution: {integrity: sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==}
     engines: {node: '>=10'}
@@ -8898,10 +8771,10 @@ packages:
       terser:
         optional: true
 
-  vitefu@0.2.5:
-    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
+  vitefu@1.0.3:
+    resolution: {integrity: sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0
     peerDependenciesMeta:
       vite:
         optional: true
@@ -9183,6 +9056,9 @@ packages:
     engines: {node: '>=8.0.0'}
     hasBin: true
 
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
   zip-stream@6.0.1:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
@@ -9242,7 +9118,7 @@ snapshots:
       '@babel/traverse': 7.25.9
       '@babel/types': 7.25.9
       convert-source-map: 2.0.0
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -9868,7 +9744,7 @@ snapshots:
       '@babel/parser': 7.25.9
       '@babel/template': 7.25.9
       '@babel/types': 7.25.9
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -10207,7 +10083,7 @@ snapshots:
   '@eslint/config-array@0.18.0':
     dependencies:
       '@eslint/object-schema': 2.1.4
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -10231,7 +10107,7 @@ snapshots:
   '@eslint/eslintrc@3.1.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       espree: 10.2.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -11275,24 +11151,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/plugin-commonjs@28.0.1(rollup@4.24.0)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.3(rollup@4.24.0)
-      commondir: 1.0.1
-      estree-walker: 2.0.2
-      fdir: 6.4.2(picomatch@4.0.2)
-      is-reference: 1.2.1
-      magic-string: 0.30.12
-      picomatch: 4.0.2
-    optionalDependencies:
-      rollup: 4.24.0
-
-  '@rollup/plugin-json@6.1.0(rollup@4.24.0)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.3(rollup@4.24.0)
-    optionalDependencies:
-      rollup: 4.24.0
-
   '@rollup/plugin-node-resolve@15.3.0(rollup@2.79.2)':
     dependencies:
       '@rollup/pluginutils': 5.1.3(rollup@2.79.2)
@@ -11303,16 +11161,6 @@ snapshots:
     optionalDependencies:
       rollup: 2.79.2
 
-  '@rollup/plugin-node-resolve@15.3.0(rollup@4.24.0)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.3(rollup@4.24.0)
-      '@types/resolve': 1.20.2
-      deepmerge: 4.3.1
-      is-module: 1.0.0
-      resolve: 1.22.8
-    optionalDependencies:
-      rollup: 4.24.0
-
   '@rollup/plugin-replace@2.4.2(rollup@2.79.2)':
     dependencies:
       '@rollup/pluginutils': 3.1.0(rollup@2.79.2)
@@ -11455,45 +11303,14 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.11
 
-  '@sveltejs/adapter-auto@3.3.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)))':
-    dependencies:
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))
-      import-meta-resolve: 4.1.0
-
-  '@sveltejs/adapter-auto@3.3.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))':
-    dependencies:
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
-      import-meta-resolve: 4.1.0
-
-  '@sveltejs/adapter-node@5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))':
+  '@sveltejs/adapter-auto@3.3.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))':
     dependencies:
-      '@rollup/plugin-commonjs': 28.0.1(rollup@4.24.0)
-      '@rollup/plugin-json': 6.1.0(rollup@4.24.0)
-      '@rollup/plugin-node-resolve': 15.3.0(rollup@4.24.0)
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
-      rollup: 4.24.0
-
-  '@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))
-      '@types/cookie': 0.6.0
-      cookie: 0.6.0
-      devalue: 5.1.1
-      esm-env: 1.0.0
+      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
       import-meta-resolve: 4.1.0
-      kleur: 4.1.5
-      magic-string: 0.30.12
-      mrmime: 2.0.0
-      sade: 1.8.1
-      set-cookie-parser: 2.7.1
-      sirv: 3.0.0
-      svelte: 4.2.19
-      tiny-glob: 0.2.9
-      vite: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
 
-  '@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))':
+  '@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -11505,64 +11322,40 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 4.2.19
+      svelte: 5.1.4
       tiny-glob: 0.2.9
       vite: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
 
-  '@sveltejs/package@2.3.6(svelte@4.2.19)(typescript@5.6.3)':
+  '@sveltejs/package@2.3.6(svelte@5.1.4)(typescript@5.6.3)':
     dependencies:
       chokidar: 4.0.1
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.3
-      svelte: 4.2.19
-      svelte2tsx: 0.7.22(svelte@4.2.19)(typescript@5.6.3)
+      svelte: 5.1.4
+      svelte2tsx: 0.7.22(svelte@5.1.4)(typescript@5.6.3)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
       debug: 4.3.7(supports-color@9.4.0)
-      svelte: 4.2.19
-      vite: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
-      debug: 4.3.7
-      svelte: 4.2.19
+      svelte: 5.1.4
       vite: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@5.1.4)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
       debug: 4.3.7(supports-color@9.4.0)
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 4.2.19
-      svelte-hmr: 0.16.0(svelte@4.2.19)
-      vite: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
-      vitefu: 0.2.5(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
-      debug: 4.3.7
-      deepmerge: 4.3.1
-      kleur: 4.1.5
-      magic-string: 0.30.12
-      svelte: 4.2.19
-      svelte-hmr: 0.16.0(svelte@4.2.19)
+      svelte: 5.1.4
       vite: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
-      vitefu: 0.2.5(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
+      vitefu: 1.0.3(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -11806,25 +11599,6 @@ snapshots:
 
   '@tokenizer/token@0.3.0': {}
 
-  '@tomic/cli@0.39.0(@tomic/lib@0.39.0)':
-    dependencies:
-      '@tomic/lib': 0.39.0
-      chalk: 5.3.0
-      prettier: 3.0.3
-
-  '@tomic/lib@0.39.0':
-    dependencies:
-      '@noble/ed25519': 1.6.0
-      '@noble/hashes': 0.5.9
-      base64-arraybuffer: 1.0.2
-      fast-json-stable-stringify: 2.1.0
-      ulidx: 2.4.1
-
-  '@tomic/svelte@0.39.0(@tomic/lib@0.39.0)(svelte@4.2.19)':
-    dependencies:
-      '@tomic/lib': 0.39.0
-      svelte: 4.2.19
-
   '@trysound/sax@0.2.0': {}
 
   '@tsconfig/node10@1.0.11': {}
@@ -12015,8 +11789,6 @@ snapshots:
       '@types/linkify-it': 5.0.0
       '@types/mdurl': 2.0.0
 
-  '@types/marked@5.0.2': {}
-
   '@types/mdast@3.0.15':
     dependencies:
       '@types/unist': 2.0.11
@@ -12161,7 +11933,7 @@ snapshots:
       '@typescript-eslint/types': 8.11.0
       '@typescript-eslint/typescript-estree': 8.11.0(typescript@5.6.3)
       '@typescript-eslint/visitor-keys': 8.11.0
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       eslint: 9.13.0(jiti@2.3.3)
     optionalDependencies:
       typescript: 5.6.3
@@ -12194,7 +11966,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 8.11.0(typescript@5.6.3)
       '@typescript-eslint/utils': 8.11.0(eslint@9.13.0(jiti@2.3.3))(typescript@5.6.3)
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       ts-api-utils: 1.3.0(typescript@5.6.3)
     optionalDependencies:
       typescript: 5.6.3
@@ -12241,7 +12013,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.11.0
       '@typescript-eslint/visitor-keys': 8.11.0
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       fast-glob: 3.3.2
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -12323,14 +12095,6 @@ snapshots:
       chai: 5.1.2
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.3(@vitest/spy@2.1.3)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))':
-    dependencies:
-      '@vitest/spy': 2.1.3
-      estree-walker: 3.0.3
-      magic-string: 0.30.12
-    optionalDependencies:
-      vite: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
-
   '@vitest/mocker@2.1.3(@vitest/spy@2.1.3)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0))':
     dependencies:
       '@vitest/spy': 2.1.3
@@ -12480,6 +12244,10 @@ snapshots:
     dependencies:
       acorn: 8.13.0
 
+  acorn-typescript@1.4.13(acorn@8.13.0):
+    dependencies:
+      acorn: 8.13.0
+
   acorn-walk@8.3.4:
     dependencies:
       acorn: 8.13.0
@@ -13120,14 +12888,6 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  code-red@1.0.4:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-      acorn: 8.13.0
-      estree-walker: 3.0.3
-      periscopic: 3.1.0
-
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -13458,10 +13218,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  debug@4.3.7:
-    dependencies:
-      ms: 2.1.3
-
   debug@4.3.7(supports-color@9.4.0):
     dependencies:
       ms: 2.1.3
@@ -14007,7 +13763,7 @@ snapshots:
       string.prototype.matchall: 4.0.11
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-svelte@2.46.0(eslint@9.13.0(jiti@2.3.3))(svelte@4.2.19)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)):
+  eslint-plugin-svelte@2.46.0(eslint@9.13.0(jiti@2.3.3))(svelte@5.1.4)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -14020,28 +13776,9 @@ snapshots:
       postcss-safe-parser: 6.0.0(postcss@8.4.47)
       postcss-selector-parser: 6.1.2
       semver: 7.6.3
-      svelte-eslint-parser: 0.43.0(svelte@4.2.19)
+      svelte-eslint-parser: 0.43.0(svelte@5.1.4)
     optionalDependencies:
-      svelte: 4.2.19
-    transitivePeerDependencies:
-      - ts-node
-
-  eslint-plugin-svelte@2.46.0(eslint@9.13.0(jiti@2.3.3))(svelte@4.2.19)(ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.13.0(jiti@2.3.3))
-      '@jridgewell/sourcemap-codec': 1.5.0
-      eslint: 9.13.0(jiti@2.3.3)
-      eslint-compat-utils: 0.5.1(eslint@9.13.0(jiti@2.3.3))
-      esutils: 2.0.3
-      known-css-properties: 0.35.0
-      postcss: 8.4.47
-      postcss-load-config: 3.1.4(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3))
-      postcss-safe-parser: 6.0.0(postcss@8.4.47)
-      postcss-selector-parser: 6.1.2
-      semver: 7.6.3
-      svelte-eslint-parser: 0.43.0(svelte@4.2.19)
-    optionalDependencies:
-      svelte: 4.2.19
+      svelte: 5.1.4
     transitivePeerDependencies:
       - ts-node
 
@@ -14119,7 +13856,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       escape-string-regexp: 4.0.0
       eslint-scope: 8.1.0
       eslint-visitor-keys: 4.1.0
@@ -14164,6 +13901,11 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@1.2.2:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.6
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -15203,10 +14945,6 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
-  is-reference@1.2.1:
-    dependencies:
-      '@types/estree': 1.0.6
-
   is-reference@3.0.2:
     dependencies:
       '@types/estree': 1.0.6
@@ -15691,8 +15429,6 @@ snapshots:
 
   marked@4.3.0: {}
 
-  marked@5.1.2: {}
-
   maxstache-stream@1.0.4:
     dependencies:
       maxstache: 1.0.7
@@ -16884,12 +16620,6 @@ snapshots:
 
   pend@1.2.0: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.6
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -16964,14 +16694,6 @@ snapshots:
       postcss: 8.4.47
       ts-node: 10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)
 
-  postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3)):
-    dependencies:
-      lilconfig: 2.1.0
-      yaml: 1.10.2
-    optionalDependencies:
-      postcss: 8.4.47
-      ts-node: 10.9.2(@types/node@20.17.0)(typescript@5.6.3)
-
   postcss-safe-parser@6.0.0(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
@@ -17055,10 +16777,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@4.2.19):
+  prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.1.4):
     dependencies:
       prettier: 3.3.3
-      svelte: 4.2.19
+      svelte: 5.1.4
 
   prettier@3.0.3: {}
 
@@ -18185,34 +17907,14 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@3.8.6(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@4.2.19):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 3.6.0
-      picocolors: 1.1.1
-      sade: 1.8.1
-      svelte: 4.2.19
-      svelte-preprocess: 5.1.4(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@4.2.19)(typescript@5.6.3)
-      typescript: 5.6.3
-    transitivePeerDependencies:
-      - '@babel/core'
-      - coffeescript
-      - less
-      - postcss
-      - postcss-load-config
-      - pug
-      - sass
-      - stylus
-      - sugarss
-
-  svelte-check@3.8.6(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@4.2.19):
+  svelte-check@3.8.6(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@5.1.4):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 4.2.19
-      svelte-preprocess: 5.1.4(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@4.2.19)(typescript@5.6.3)
+      svelte: 5.1.4
+      svelte-preprocess: 5.1.4(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@5.1.4)(typescript@5.6.3)
       typescript: 5.6.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -18225,7 +17927,7 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-eslint-parser@0.43.0(svelte@4.2.19):
+  svelte-eslint-parser@0.43.0(svelte@5.1.4):
     dependencies:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -18233,69 +17935,44 @@ snapshots:
       postcss: 8.4.47
       postcss-scss: 4.0.9(postcss@8.4.47)
     optionalDependencies:
-      svelte: 4.2.19
-
-  svelte-hmr@0.16.0(svelte@4.2.19):
-    dependencies:
-      svelte: 4.2.19
-
-  svelte-markdown@0.4.1(svelte@4.2.19):
-    dependencies:
-      '@types/marked': 5.0.2
-      marked: 5.1.2
-      svelte: 4.2.19
+      svelte: 5.1.4
 
-  svelte-preprocess@5.1.4(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@4.2.19)(typescript@5.6.3):
+  svelte-preprocess@5.1.4(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@5.1.4)(typescript@5.6.3):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.12
       sorcery: 0.11.1
       strip-indent: 3.0.0
-      svelte: 4.2.19
+      svelte: 5.1.4
     optionalDependencies:
       '@babel/core': 7.25.9
       postcss: 8.4.47
       postcss-load-config: 3.1.4(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.17.0)(typescript@5.6.3))
       typescript: 5.6.3
 
-  svelte-preprocess@5.1.4(@babel/core@7.25.9)(postcss-load-config@3.1.4(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3)))(postcss@8.4.47)(svelte@4.2.19)(typescript@5.6.3):
-    dependencies:
-      '@types/pug': 2.0.10
-      detect-indent: 6.1.0
-      magic-string: 0.30.12
-      sorcery: 0.11.1
-      strip-indent: 3.0.0
-      svelte: 4.2.19
-    optionalDependencies:
-      '@babel/core': 7.25.9
-      postcss: 8.4.47
-      postcss-load-config: 3.1.4(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3))
-      typescript: 5.6.3
-
-  svelte2tsx@0.7.22(svelte@4.2.19)(typescript@5.6.3):
+  svelte2tsx@0.7.22(svelte@5.1.4)(typescript@5.6.3):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 4.2.19
+      svelte: 5.1.4
       typescript: 5.6.3
 
-  svelte@4.2.19:
+  svelte@5.1.4:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
       '@types/estree': 1.0.6
       acorn: 8.13.0
+      acorn-typescript: 1.4.13(acorn@8.13.0)
       aria-query: 5.3.2
       axobject-query: 4.1.0
-      code-red: 1.0.4
-      css-tree: 2.3.1
-      estree-walker: 3.0.3
+      esm-env: 1.0.0
+      esrap: 1.2.2
       is-reference: 3.0.2
       locate-character: 3.0.0
       magic-string: 0.30.12
-      periscopic: 3.1.0
+      zimmerframe: 1.1.2
 
   svgo@3.3.2:
     dependencies:
@@ -18386,14 +18063,6 @@ snapshots:
       ansi-escapes: 5.0.0
       supports-hyperlinks: 2.3.0
 
-  terser@5.31.6:
-    dependencies:
-      '@jridgewell/source-map': 0.3.6
-      acorn: 8.13.0
-      commander: 2.20.3
-      source-map-support: 0.5.21
-    optional: true
-
   terser@5.36.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
@@ -18541,25 +18210,6 @@ snapshots:
     optionalDependencies:
       '@swc/core': 1.7.39
 
-  ts-node@10.9.2(@types/node@20.17.0)(typescript@5.6.3):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.17.0
-      acorn: 8.13.0
-      acorn-walk: 8.3.4
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.6.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
-
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -18897,27 +18547,10 @@ snapshots:
       unist-util-stringify-position: 3.0.3
       vfile-message: 3.1.4
 
-  vite-node@2.1.3(@types/node@20.17.0)(terser@5.31.6):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.3.7(supports-color@9.4.0)
-      pathe: 1.1.2
-      vite: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-
   vite-node@2.1.3(@types/node@20.17.0)(terser@5.36.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       pathe: 1.1.2
       vite: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
     transitivePeerDependencies:
@@ -18931,7 +18564,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-dts@3.9.1(@types/node@20.17.0)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)):
+  vite-plugin-dts@3.9.1(@types/node@20.17.0)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)):
     dependencies:
       '@microsoft/api-extractor': 7.43.0(@types/node@20.17.0)
       '@rollup/pluginutils': 5.1.3(rollup@4.24.0)
@@ -18942,7 +18575,7 @@ snapshots:
       typescript: 5.6.3
       vue-tsc: 1.8.27(typescript@5.6.3)
     optionalDependencies:
-      vite: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
+      vite: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
@@ -18977,16 +18610,6 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  vite@5.4.10(@types/node@20.17.0)(terser@5.31.6):
-    dependencies:
-      esbuild: 0.21.5
-      postcss: 8.4.47
-      rollup: 4.24.0
-    optionalDependencies:
-      '@types/node': 20.17.0
-      fsevents: 2.3.3
-      terser: 5.31.6
-
   vite@5.4.10(@types/node@20.17.0)(terser@5.36.0):
     dependencies:
       esbuild: 0.21.5
@@ -18997,48 +18620,10 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.36.0
 
-  vitefu@0.2.5(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6)):
-    optionalDependencies:
-      vite: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
-
-  vitefu@0.2.5(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)):
+  vitefu@1.0.3(vite@5.4.10(@types/node@20.17.0)(terser@5.36.0)):
     optionalDependencies:
       vite: 5.4.10(@types/node@20.17.0)(terser@5.36.0)
 
-  vitest@2.1.3(@types/node@20.17.0)(terser@5.31.6):
-    dependencies:
-      '@vitest/expect': 2.1.3
-      '@vitest/mocker': 2.1.3(@vitest/spy@2.1.3)(vite@5.4.10(@types/node@20.17.0)(terser@5.31.6))
-      '@vitest/pretty-format': 2.1.3
-      '@vitest/runner': 2.1.3
-      '@vitest/snapshot': 2.1.3
-      '@vitest/spy': 2.1.3
-      '@vitest/utils': 2.1.3
-      chai: 5.1.2
-      debug: 4.3.7(supports-color@9.4.0)
-      magic-string: 0.30.12
-      pathe: 1.1.2
-      std-env: 3.7.0
-      tinybench: 2.9.0
-      tinyexec: 0.3.1
-      tinypool: 1.0.1
-      tinyrainbow: 1.2.0
-      vite: 5.4.10(@types/node@20.17.0)(terser@5.31.6)
-      vite-node: 2.1.3(@types/node@20.17.0)(terser@5.31.6)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 20.17.0
-    transitivePeerDependencies:
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-
   vitest@2.1.3(@types/node@20.17.0)(terser@5.36.0):
     dependencies:
       '@vitest/expect': 2.1.3
@@ -19049,7 +18634,7 @@ snapshots:
       '@vitest/spy': 2.1.3
       '@vitest/utils': 2.1.3
       chai: 5.1.2
-      debug: 4.3.7
+      debug: 4.3.7(supports-color@9.4.0)
       magic-string: 0.30.12
       pathe: 1.1.2
       std-env: 3.7.0
@@ -19417,6 +19002,8 @@ snapshots:
     optionalDependencies:
       commander: 9.5.0
 
+  zimmerframe@1.1.2: {}
+
   zip-stream@6.0.1:
     dependencies:
       archiver-utils: 5.0.2
diff --git a/browser/svelte/README.md b/browser/svelte/README.md
index eedd536af..6a8a61460 100644
--- a/browser/svelte/README.md
+++ b/browser/svelte/README.md
@@ -3,5 +3,11 @@
 An implementation of Atomic Data for [Svelte](https://svelte.dev/).
 This library is still at an early stage and the API is subject to change.
 
-- [See open source example project built with @tomic/svelte.](https://github.com/ontola/wonenatthepark)
-- [Docs](https://docs.atomicdata.dev/svelte)
+Read more about @tomic/svelte in the [Docs](https://docs.atomicdata.dev/svelte).
+
+[See open source example project built with @tomic/svelte. (outdated)](https://github.com/ontola/wonenatthepark)
+You can aslo generate a svelekit website by applying the 'website' template in your server and then running:
+
+```bash
+npm create @tomic/template <NAME> --template sveltekit-site --server-url=<SERVER_URL>
+```
diff --git a/browser/svelte/package.json b/browser/svelte/package.json
index 6ab668940..dc3d3f7bf 100644
--- a/browser/svelte/package.json
+++ b/browser/svelte/package.json
@@ -10,10 +10,11 @@
   "description": "Atomic Data Svelte library",
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build && npm run package",
+    "build": "vite build && pnpm run package",
+    "build:watch": "vite build --watch",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
+    "prepublishOnly": "pnpm run package",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "vitest run",
@@ -36,13 +37,13 @@
   },
   "peerDependencies": {
     "@tomic/lib": "workspace:*",
-    "svelte": "^4.2.19"
+    "svelte": "^5.1.4"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.3.0",
     "@sveltejs/kit": "^2.7.2",
     "@sveltejs/package": "^2.3.6",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
@@ -51,11 +52,12 @@
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "publint": "^0.1.16",
-    "svelte": "^4.2.19",
+    "svelte": "^5.1.4",
     "svelte-check": "^3.8.6",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vitest": "^2.1.3"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
diff --git a/browser/svelte/src/lib/components/Image/Image.svelte b/browser/svelte/src/lib/components/Image/Image.svelte
index 93afd2316..2cade7c61 100644
--- a/browser/svelte/src/lib/components/Image/Image.svelte
+++ b/browser/svelte/src/lib/components/Image/Image.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { getResource } from '$lib/stores/getResource.js';
-  import { getValue } from '$lib/stores/getValue.js';
-  import { server, type Server } from '@tomic/lib';
+  import { getResource } from '$lib/stores/getResource.svelte.js';
+  import { type Server } from '@tomic/lib';
   import type { HTMLImgAttributes } from 'svelte/elements';
   import {
     buildSrcSet,
@@ -17,7 +16,8 @@
     Basic,
     None,
   }
-  interface $$Props extends HTMLImgAttributes {
+
+  interface Props extends HTMLImgAttributes {
     subject: string;
     alt: string;
     noBaseStyles?: boolean;
@@ -25,69 +25,70 @@
     sizeIndication?: SizeIndication;
   }
 
-  export let subject: $$Props['subject'];
-  export let alt: $$Props['alt'];
-  export let noBaseStyles: $$Props['noBaseStyles'] = false;
-  export let quality: number = 60;
-  export let sizeIndication: $$Props['sizeIndication'] = undefined;
-
-  let supported = Support.Full;
+  const {
+    subject,
+    alt,
+    noBaseStyles,
+    quality = 60,
+    sizeIndication,
+    ...restProps
+  }: Props = $props();
 
-  let resource = getResource<Server.File>(subject);
-  let downloadUrl = getValue(resource, server.properties.downloadUrl);
-  let mimetype = getValue(resource, server.properties.mimetype);
+  let resource = getResource<Server.File>(() => subject);
 
-  $: {
-    if (imageFormatsWithFullSupport.has($mimetype!)) {
-      supported = Support.Full;
-    } else if (imageFormatsWithBasicSupport.has($mimetype!)) {
-      supported = Support.Basic;
+  let support = $derived.by(() => {
+    if (imageFormatsWithFullSupport.has(resource.props.mimetype ?? '')) {
+      return Support.Full;
+    } else if (
+      imageFormatsWithBasicSupport.has(resource.props.mimetype ?? '')
+    ) {
+      return Support.Basic;
     } else {
-      supported = Support.None;
+      return Support.None;
     }
-  }
+  });
 
-  $: toSrcSet = buildSrcSet($downloadUrl);
+  let toSrcSet = $derived(buildSrcSet(resource.props.downloadUrl));
 </script>
 
-{#if $resource.error}
-  <p>{$resource.error.message}</p>
-{:else if $resource.loading}
+{#if resource.error}
+  <p>{resource.error.message}</p>
+{:else if resource.loading}
   <p>Loading...</p>
-{:else if supported === Support.None}
+{:else if support === Support.None}
   <p>Image format not supported</p>
-{:else if supported === Support.Basic}
+{:else if support === Support.Basic}
   <img
-    src={$downloadUrl}
+    src={resource.props.downloadUrl}
     class:base-styles={!noBaseStyles}
     {alt}
-    height={$resource.props.imageHeight}
-    width={$resource.props.imageWidth}
-    {...$$restProps}
+    height={resource.props.imageHeight}
+    width={resource.props.imageWidth}
+    {...restProps}
   />
-{:else if supported === Support.Full}
+{:else if support === Support.Full}
   <picture>
     <source
       srcSet={toSrcSet('avif', quality, DEFAULT_SIZES)}
       type="image/avif"
       sizes={indicationToSizes(sizeIndication)}
-      height={$resource.props.imageHeight}
-      width={$resource.props.imageWidth}
+      height={resource.props.imageHeight}
+      width={resource.props.imageWidth}
     />
     <source
       srcSet={toSrcSet('webp', quality, DEFAULT_SIZES)}
       type="image/webp"
       sizes={indicationToSizes(sizeIndication)}
-      height={$resource.props.imageHeight}
-      width={$resource.props.imageWidth}
+      height={resource.props.imageHeight}
+      width={resource.props.imageWidth}
     />
     <img
-      src={$downloadUrl}
+      src={resource.props.downloadUrl}
       class:base-styles={!noBaseStyles}
       {alt}
-      height={$resource.props.imageHeight}
-      width={$resource.props.imageWidth}
-      {...$$restProps}
+      height={resource.props.imageHeight}
+      width={resource.props.imageWidth}
+      {...restProps}
     />
   </picture>
 {/if}
diff --git a/browser/svelte/src/lib/example-helpers/getStore.ts b/browser/svelte/src/lib/example-helpers/getStore.ts
deleted file mode 100644
index 70a4a9d53..000000000
--- a/browser/svelte/src/lib/example-helpers/getStore.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { initStore } from '$lib/index.js';
-import { store as atomicStore } from '$lib/stores/store.js';
-import { Store } from '@tomic/lib';
-import { get } from 'svelte/store';
-
-const init = () => {
-  const atomicStore = new Store({
-    // Drive with example data
-    serverUrl: 'https://atomicdata.dev/drive/WnY9YDmm',
-  });
-  initStore(atomicStore);
-};
-
-export const getStore = () => {
-  let store = get(atomicStore);
-
-  if (store === undefined) {
-    init();
-    store = get(atomicStore);
-  }
-
-  return store;
-};
diff --git a/browser/svelte/src/lib/index.ts b/browser/svelte/src/lib/index.ts
index 817633e0f..8be2d49d4 100644
--- a/browser/svelte/src/lib/index.ts
+++ b/browser/svelte/src/lib/index.ts
@@ -1,14 +1,5 @@
 // Reexport your entry components here
 
-import type { Store } from '@tomic/lib';
-import { __store_internal } from './stores/store.js';
-
-export const initStore = (store: Store) => {
-  __store_internal.set(store);
-};
-
 export * from './components/Image/index.js';
-export { store } from './stores/store.js';
-export { getResource } from './stores/getResource.js';
-export { getValue } from './stores/getValue.js';
-export * from './loadResourceTree.js';
+export * from './stores/store.js';
+export * from './stores/getResource.svelte.js';
diff --git a/browser/svelte/src/lib/loadResourceTree.ts b/browser/svelte/src/lib/loadResourceTree.ts
deleted file mode 100644
index d0bef327c..000000000
--- a/browser/svelte/src/lib/loadResourceTree.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { type JSONValue, Resource } from '@tomic/lib';
-import { get } from 'svelte/store';
-import { store as storeStore } from './stores/store.js';
-
-export interface ResourceTreeTemplate {
-  [property: string]: true | ResourceTreeTemplate;
-}
-
-const normalize = (value: JSONValue): string[] => {
-  if (typeof value === 'string') {
-    return [value];
-  }
-
-  if (Array.isArray(value)) {
-    return value as string[];
-  }
-
-  return [];
-};
-
-/**
- * Make sure the given tree of resources are available in the store.
- * This is only useful for SSR and SSG as the getResource functions does not wait for the resource to be fully available
- * causing SvelteKit to render incomplete pages.
- *
- * When using **SvelteKit**, make sure you inject the custom fetch function into the store before calling this function.
- *
- * **Example**:
- * ```ts
- * await loadResourceTree('https://myblog.com', {
- *  [myProperties.blogPostCollection]: {
- *   [urls.properties.collection.members]: {
- *    [myProperties.coverImage]: true,
- *    [myProperties.author]: true,
- *  }
- * });
- * ```
- */
-export const loadResourceTree = async (
-  subject: string,
-  treeTemplate: ResourceTreeTemplate,
-): Promise<void> => {
-  const store = get(storeStore);
-
-  const loadResourceTreeInner = async (
-    resource: Resource,
-    tree: ResourceTreeTemplate,
-  ) => {
-    const promises: Promise<unknown>[] = [];
-
-    for (const [property, branch] of Object.entries(tree)) {
-      await store.getResource(property);
-      const values = normalize(resource.get(property));
-      const resources = await Promise.all(
-        values.map(value => store.getResource(value)),
-      );
-
-      if (typeof branch === 'boolean') {
-        continue;
-      }
-
-      for (const res of resources) {
-        promises.push(loadResourceTreeInner(res, branch));
-      }
-    }
-
-    return Promise.allSettled(promises.flat());
-  };
-
-  const resource = await store.getResource(subject);
-
-  await loadResourceTreeInner(resource, treeTemplate);
-};
diff --git a/browser/svelte/src/lib/stores/getResource.svelte.test.ts b/browser/svelte/src/lib/stores/getResource.svelte.test.ts
new file mode 100644
index 000000000..46ba1b256
--- /dev/null
+++ b/browser/svelte/src/lib/stores/getResource.svelte.test.ts
@@ -0,0 +1,64 @@
+import { core, dataBrowser, Store, type DataBrowser } from '@tomic/lib';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { flushSync, getContext } from 'svelte';
+import { getResource } from '../index.js';
+import { ATOMIC_STORE_CONTEXT_KEY, getStoreFromContext } from './store.js';
+
+const resource1Subject = 'https://resource1';
+
+// We need to mock getContext because normally you can't use it outside of a Svelte component scope.
+vi.mock('svelte', () => ({
+  getContext: vi.fn(),
+}));
+
+describe('getResource', () => {
+  beforeEach(() => {
+    const store = new Store();
+    // @ts-expect-error getContext is mocked
+    getContext.mockReturnValue({ [ATOMIC_STORE_CONTEXT_KEY]: store });
+  });
+
+  it('should get a resource from the store', async () => {
+    const cleanup = $effect.root(() => {
+      const store = getStoreFromContext();
+      store.newResource({
+        subject: resource1Subject,
+        isA: dataBrowser.classes.folder,
+        propVals: {
+          [core.properties.name]: 'Resource 1',
+        },
+      });
+      const resource = getResource<DataBrowser.Folder>(resource1Subject);
+
+      expect(resource).not.toBe(undefined);
+      expect(resource.subject).toBe(resource1Subject);
+      expect(resource.props.name).toBe('Resource 1');
+    });
+
+    cleanup();
+  });
+
+  it('should update when the resource changes', async () => {
+    const cleanup = $effect.root(() => {
+      const store = getStoreFromContext();
+      console.log(store);
+      store.newResource({
+        subject: resource1Subject,
+        isA: dataBrowser.classes.folder,
+      });
+
+      const resource1 = getResource<DataBrowser.Folder>(resource1Subject);
+      const resource2 = getResource<DataBrowser.Folder>(resource1Subject);
+
+      expect(resource1.props.name).toBe(undefined);
+
+      resource1.props.name = 'Resource with a name';
+
+      flushSync();
+
+      expect(resource2.props.name).toBe('Resource with a name');
+    });
+
+    cleanup();
+  });
+});
diff --git a/browser/svelte/src/lib/stores/getResource.svelte.ts b/browser/svelte/src/lib/stores/getResource.svelte.ts
new file mode 100644
index 000000000..99af88391
--- /dev/null
+++ b/browser/svelte/src/lib/stores/getResource.svelte.ts
@@ -0,0 +1,84 @@
+import {
+  type FetchOpts,
+  type OptionalClass,
+  proxyResource,
+  Resource,
+  ResourceEvents,
+  unknownSubject,
+} from '@tomic/lib';
+
+import { hasContext } from 'svelte';
+import { getStoreFromContext } from './store.js';
+
+/**
+ * Starts fetching a resource and adds it to the store.
+ * An empty resource will be returned immediately that updates when the resource is fetched.
+ * This way you can start rendering UI that
+ * To check if the resource is ready, use `resource.loading`.
+ * Only works in components contexts. If you want to fetch a resource outside of a component, use `await store.getResource()`.
+ *
+ * You need to pass the subject as a function that returns a string to make it reactive.
+ *
+ * ## Example
+ * ```svelte
+ * <script lang="ts">
+ *   import { getResource } from '@atomic/svelte';
+ *   import { type Comment } from '$lib/ontologies/myApp.js';
+ *
+ *   const resource = getResource<Comment>(() => 'https://my-atomic-server.com/my-resource');
+ * </script>
+ *
+ * <p>{resource.props.description}</p>
+ * ```
+ *
+ * ## Example with editing
+ * ```svelte
+ * <script lang="ts">
+ *   import { getResource } from '@atomic/svelte';
+ *   import { type Comment } from '$lib/ontologies/myApp.js';
+ *
+ *   const resource = getResource<Comment>(() => 'https://my-atomic-server.com/my-resource');
+ * </script>
+ *
+ * <textarea bind:value={resource.props.description} />
+ * <button onclick={() => resource.save()}>Save</button>
+ * ```
+ */
+export function getResource<T extends OptionalClass = never>(
+  subjectGetter: () => string | undefined,
+  opts?: FetchOpts,
+): Resource<T> {
+  if (!hasContext('ATOMIC_STORE')) {
+    throw new Error('No Atomic Store found in context');
+  }
+
+  const subject = $derived(subjectGetter() ?? unknownSubject);
+
+  const store = getStoreFromContext();
+  let resource = $state(store.getResourceLoading(subject, opts));
+
+  $effect(() => {
+    resource = store.getResourceLoading(subject, opts);
+  });
+
+  $effect(() => {
+    const unsubLocal = resource.on(ResourceEvents.LocalChange, () => {
+      resource = proxyResource(resource.__internalObject);
+    });
+
+    const unsubRemote = store.subscribe(subject, r => {
+      resource = proxyResource(r);
+    });
+
+    return () => {
+      unsubLocal();
+      unsubRemote();
+    };
+  });
+
+  return new Proxy(resource, {
+    get(_, prop) {
+      return resource[prop as keyof Resource];
+    },
+  });
+}
diff --git a/browser/svelte/src/lib/stores/getResource.test.ts b/browser/svelte/src/lib/stores/getResource.test.ts
deleted file mode 100644
index 1761ff989..000000000
--- a/browser/svelte/src/lib/stores/getResource.test.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Store, urls } from '@tomic/lib';
-import { describe, it, expect, beforeEach } from 'vitest';
-import { getResource, initStore, store } from '../index.js';
-import { get, writable } from 'svelte/store';
-
-const resource1Subject = 'https://resource1';
-const resource2Subject = 'https://resource2';
-
-describe('getResource', () => {
-  beforeEach(() => {
-    const newStore = new Store();
-
-    initStore(newStore);
-  });
-
-  it('should get a resource from the store', () => {
-    const _store = get(store);
-
-    _store.getResourceLoading(resource1Subject, { newResource: true });
-
-    const resourceStore = getResource(resource1Subject);
-    const resource = get(resourceStore);
-
-    expect(resource).not.toBe(undefined);
-    expect(resource.subject).toBe(resource1Subject);
-  });
-
-  it('should update when the resource changes', async () => {
-    const _store = get(store);
-
-    const createdResource = _store.getResourceLoading(resource1Subject, {
-      newResource: true,
-    });
-
-    const resourceStore = getResource(resource1Subject);
-    const resourceStore2 = getResource(resource1Subject);
-
-    const resourceFirst = get(resourceStore);
-
-    expect(resourceFirst.get(urls.properties.name)).toBe(undefined);
-
-    createdResource.setUnsafe(urls.properties.name, 'Resource 1');
-
-    const resourceSecond = get(resourceStore2);
-
-    expect(resourceSecond.get(urls.properties.name)).toBe('Resource 1');
-  });
-
-  it('should update when subject is writable and changes', async () => {
-    const writableSubject = writable(resource1Subject);
-
-    const resource = getResource(writableSubject, { newResource: true });
-
-    expect(get(resource).subject).toBe(resource1Subject);
-
-    writableSubject.set(resource2Subject);
-
-    expect(get(resource).subject).toBe(resource2Subject);
-  });
-});
diff --git a/browser/svelte/src/lib/stores/getResource.ts b/browser/svelte/src/lib/stores/getResource.ts
deleted file mode 100644
index 6ccc76c3a..000000000
--- a/browser/svelte/src/lib/stores/getResource.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-  type FetchOpts,
-  type OptionalClass,
-  Resource,
-  Store,
-} from '@tomic/lib';
-
-import { type Readable, get, readable, type Subscriber } from 'svelte/store';
-import { store } from './store.js';
-
-const subscribeToADStore = (
-  adStore: Store,
-  subject: string,
-  set: Subscriber<Resource>,
-  opts?: FetchOpts,
-) => {
-  set(adStore.getResourceLoading(subject, opts));
-
-  const subscriber = (changedResource: Resource) => {
-    set(changedResource);
-  };
-
-  adStore.subscribe(subject, subscriber);
-
-  return () => {
-    adStore.unsubscribe(subject, subscriber);
-  };
-};
-
-/**
- * Gets a resource from the store. The resource might still be loading, use `resource.loading` to make sure it is ready.
- * If you've generated types using @tomic/cli, you can pass the class as a Generic to get type checking on the resource.
- */
-export const getResource = <C extends OptionalClass = never>(
-  subject: string | Readable<string>,
-  opts?: FetchOpts,
-): Readable<Resource<C>> => {
-  const adStore = get(store);
-
-  const subjectValue = typeof subject === 'string' ? subject : get(subject);
-
-  // eslint-disable-next-line prefer-const
-  let resource = readable<Resource<C>>(
-    adStore.getResourceLoading(subjectValue, opts),
-    set => {
-      if (typeof subject !== 'string') {
-        let atomicUnsubscriber: () => void;
-
-        const subjectUnsubscriber = subject.subscribe(value => {
-          atomicUnsubscriber?.();
-
-          set(adStore.getResourceLoading(value, opts));
-          atomicUnsubscriber = subscribeToADStore(adStore, value, set, opts);
-        });
-
-        return () => {
-          subjectUnsubscriber();
-          atomicUnsubscriber?.();
-        };
-      } else {
-        return subscribeToADStore(adStore, subject, set, opts);
-      }
-    },
-  );
-
-  return resource;
-};
diff --git a/browser/svelte/src/lib/stores/getValue.test.ts b/browser/svelte/src/lib/stores/getValue.test.ts
deleted file mode 100644
index 3d647d9a3..000000000
--- a/browser/svelte/src/lib/stores/getValue.test.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Store } from '@tomic/lib';
-import { get } from 'svelte/store';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-
-import { getResource, getValue, initStore, store } from '../index.js';
-
-const resourceSubject = 'https://resource1';
-const property = 'https://property';
-
-describe('getValue', () => {
-  beforeEach(() => {
-    const newStore = new Store();
-
-    initStore(newStore);
-  });
-
-  it('should return a value store with the correct value', () => {
-    const expectedValue = "Psyduck is the best pokemon don't @ me";
-
-    const _store = get(store);
-
-    const initialResource = _store.getResourceLoading(resourceSubject, {
-      newResource: true,
-    });
-
-    initialResource.setUnsafe(property, expectedValue);
-
-    const resourceStore = getResource(resourceSubject);
-    const valueStore = getValue(resourceStore, property);
-
-    const value = get(valueStore);
-    expect(value).toBe(expectedValue);
-  });
-
-  it('should notify the atomic store when updated', () => {
-    const fn = vi.fn();
-    const _store = get(store);
-
-    _store.getResourceLoading(resourceSubject, { newResource: true });
-    _store.subscribe(resourceSubject, fn);
-
-    const resourceStore = getResource(resourceSubject);
-    const valueStore = getValue(resourceStore, property);
-
-    expect(fn).toHaveBeenCalledTimes(0);
-
-    valueStore.set('Updated Value');
-
-    expect(fn).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/browser/svelte/src/lib/stores/getValue.ts b/browser/svelte/src/lib/stores/getValue.ts
deleted file mode 100644
index f7ab344f4..000000000
--- a/browser/svelte/src/lib/stores/getValue.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  Resource,
-  type InferTypeOfValueInTriple,
-  type OptionalClass,
-} from '@tomic/lib';
-import { type Readable, type Writable, get } from 'svelte/store';
-
-import { store } from './store.js';
-
-export type ValueSubscriber<
-  Prop extends string,
-  C extends OptionalClass = never,
-> = (value: InferTypeOfValueInTriple<C, Prop>) => void;
-export type ValueUpdater<
-  Prop extends string,
-  C extends OptionalClass = never,
-> = (
-  value: InferTypeOfValueInTriple<C, Prop>,
-) => InferTypeOfValueInTriple<C, Prop>;
-
-/**
- * Gets the value of a property on a resource.
- * Returns a writable store.
- * The type of the value is automatically inferred from the property when the resource is marked with a class (using a Generic) and the types were generated using @tomic/cli.
- */
-export const getValue = <Prop extends string, C extends OptionalClass = never>(
-  resourceStore: Readable<Resource<C>>,
-  property: Prop,
-  commit = false,
-): Writable<InferTypeOfValueInTriple<C, Prop>> => {
-  type Returns = InferTypeOfValueInTriple<C, Prop>;
-
-  const adStore = get(store);
-  let resource: Resource<C> = get(resourceStore);
-
-  let value = resource.get(property);
-  const subscriptions = new Set<ValueSubscriber<Prop, C>>();
-  let subscribedToStore = false;
-
-  const storeSubscriber = (newResource: Resource<C>) => {
-    value = newResource.get(property);
-    notifySvelteChange();
-  };
-
-  const notifySvelteChange = () => {
-    for (const subscriber of subscriptions) {
-      subscriber(value);
-    }
-  };
-
-  const setValue = async (val: Returns) => {
-    value = val;
-
-    if (val === undefined) {
-      resource.removePropVal(property);
-    } else {
-      resource.set(property, val, false);
-    }
-
-    if (commit) {
-      await resource.save();
-    }
-
-    adStore.addResources(resource);
-  };
-
-  const writable = {
-    set(val: Returns): void {
-      setValue(val);
-      notifySvelteChange();
-    },
-
-    subscribe(subscriber: ValueSubscriber<Prop, C>): () => void {
-      if (!subscribedToStore) {
-        adStore.subscribe(resource.subject, storeSubscriber);
-        subscribedToStore = true;
-      }
-
-      subscriptions.add(subscriber);
-
-      // Call the subscriber to get the value instantly.
-      subscriber(value);
-
-      return () => {
-        subscriptions.delete(subscriber);
-
-        if (subscriptions.size === 0) {
-          adStore.unsubscribe(resource.subject, storeSubscriber);
-          subscribedToStore = false;
-        }
-      };
-    },
-
-    update(updater: ValueUpdater<Prop, C>): void {
-      setValue(updater(value)).then(() => {
-        notifySvelteChange();
-      });
-    },
-  };
-
-  resourceStore.subscribe(r => {
-    value = r.get(property);
-    resource = r;
-    notifySvelteChange();
-  });
-
-  return writable;
-};
diff --git a/browser/svelte/src/lib/stores/store.ts b/browser/svelte/src/lib/stores/store.ts
index 36b0ef963..71f3cdb99 100644
--- a/browser/svelte/src/lib/stores/store.ts
+++ b/browser/svelte/src/lib/stores/store.ts
@@ -1,10 +1,12 @@
-import { writable, readable } from 'svelte/store';
+import { getContext, setContext } from 'svelte';
 import type { Store } from '@tomic/lib';
 
-export const __store_internal = writable<Store>(undefined);
+export const ATOMIC_STORE_CONTEXT_KEY = 'ATOMIC_STORE';
 
-export const store = readable<Store>(undefined, set => {
-  __store_internal.subscribe(value => {
-    set(value);
-  });
-});
+export function createAtomicStoreContext(store: Store): void {
+  setContext(ATOMIC_STORE_CONTEXT_KEY, store);
+}
+
+export function getStoreFromContext(): Store {
+  return getContext(ATOMIC_STORE_CONTEXT_KEY);
+}
diff --git a/browser/svelte/src/routes/+layout.svelte b/browser/svelte/src/routes/+layout.svelte
index 5de173cb6..3258f4402 100644
--- a/browser/svelte/src/routes/+layout.svelte
+++ b/browser/svelte/src/routes/+layout.svelte
@@ -1,12 +1,20 @@
 <script lang="ts">
-  import { getStore } from '$lib/example-helpers/getStore.js';
+  import { createAtomicStoreContext } from '$lib/stores/store.js';
+  import { Store } from '@tomic/lib';
 
-  // Initialize a store if it isn't already
-  getStore();
+  const { children } = $props();
+
+  // Initialize a store and set it on the context.
+  createAtomicStoreContext(
+    new Store({
+      // A demo drive with some example data.
+      serverUrl: 'https://atomicdata.dev/drive/WnY9YDmm',
+    }),
+  );
 </script>
 
 <main>
-  <slot />
+  {@render children()}
 </main>
 
 <style>
diff --git a/browser/svelte/src/routes/+page.svelte b/browser/svelte/src/routes/+page.svelte
index 0b2b7b69c..823664150 100644
--- a/browser/svelte/src/routes/+page.svelte
+++ b/browser/svelte/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 <h2>Components</h2>
 <ul>
   <li>
+    <a href="/examples/get-resource">getResource()</a>
     <a href="/examples/image">{'<'}Image /{'>'}</a>
   </li>
 </ul>
diff --git a/browser/svelte/src/routes/examples/get-resource/+page.svelte b/browser/svelte/src/routes/examples/get-resource/+page.svelte
new file mode 100644
index 000000000..b63c80116
--- /dev/null
+++ b/browser/svelte/src/routes/examples/get-resource/+page.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { getResource } from '$lib/stores/getResource.svelte.js';
+  import { type DataBrowser } from '@tomic/lib';
+
+  let resource = getResource<DataBrowser.Folder>(
+    () => 'https://atomicdata.dev/01jaz86dd6q7kp2qv7pr23n9cb',
+  );
+</script>
+
+<div>
+  <h1>{resource.title}</h1>
+</div>
diff --git a/browser/svelte/src/routes/examples/image/+page.svelte b/browser/svelte/src/routes/examples/image/+page.svelte
index cb058f347..53b7514ec 100644
--- a/browser/svelte/src/routes/examples/image/+page.svelte
+++ b/browser/svelte/src/routes/examples/image/+page.svelte
@@ -53,7 +53,7 @@
 <style>
   .image-styler {
     display: contents;
-    & img {
+    :global(& img) {
       border-radius: 15px;
     }
   }
diff --git a/browser/svelte/svelte.config.js b/browser/svelte/svelte.config.js
index 8a8cae634..ab82a5369 100644
--- a/browser/svelte/svelte.config.js
+++ b/browser/svelte/svelte.config.js
@@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
-  preprocess: vitePreprocess(),
+  preprocess: vitePreprocess({ script: true }),
 
   kit: {
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
@@ -13,6 +13,9 @@ const config = {
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter(),
   },
+  compilerOptions: {
+    runes: true,
+  },
 };
 
 export default config;
diff --git a/docs/src/js-lib/resource.md b/docs/src/js-lib/resource.md
index 10d3ad44b..fb524cf1e 100644
--- a/docs/src/js-lib/resource.md
+++ b/docs/src/js-lib/resource.md
@@ -70,11 +70,31 @@ const category = resource.get(
 
 ## Writing Data
 
-Writing data is done using the `.set` method.
+Writing data is done using the `.set` method (works on any resource) or by asigning to the props accessor (only works on annotated resources).
+
+### Using .props:
+
+```typescript
+import { type Article } from './ontologies/article';
+
+const resource = await store.getResource<Article>(
+  'https://my-atomicserver.com/my-resource',
+);
+
+resource.props.description = 'New description';
+
+await resource.save();
+```
+
+Setting values via `resource.props` does not validate the value against the properties datatype.
+Use the `resource.set()` method when you want to validate the value.
+
+### Using .set():
 
 ```typescript
 import { core } from '@tomic/lib';
 
+const resource = await store.getResource('https://my-atomicserver.com/my-resource');
 // With Validation
 await resource.set(core.properties.description, 'New description');
 
@@ -91,6 +111,7 @@ You should await the method when validation is enabled because the property's re
 > Setting validate to false only disables validation on the client. The server will always validate the data and respond with an error if the data is invalid.
 
 **Parameters**
+
 | Name     | Type        | Description                                                   |
 |----------|-------------|---------------------------------------------------------------|
 | property | string      | Subject of the property to set                                |
@@ -120,6 +141,10 @@ resource.push(
 await resource.save();
 ```
 
+> **Note**</br>
+> You **cannot** push values using `resource.props`.
+> For example: `resource.props.likedBy.push('https://my-atomicserver.com/users/1')` will not work.
+
 **Parameters**
 | Name     | Type      | Description                                                                                         |
 |----------|-----------|-----------------------------------------------------------------------------------------------------|
@@ -174,7 +199,7 @@ When a resource is deleted, all children of the resource are also deleted.
 
 Classes are an essential part of Atomic Data, therefore Resource has a few useful methods for reading and setting classes.
 
-### Reading classes
+### resource.getClasses()
 
 `Resource` provides a `.getClasses` method to get the classes of the resource.
 
@@ -185,6 +210,8 @@ const classes = resource.getClasses(); // string[]
 // const classes = resource.get(core.properties.isA);
 ```
 
+### resource.hasClasses()
+
 If you just want to know if a resource is of a certain class use: `.hasClasses()`
 
 ```typescript
@@ -198,6 +225,8 @@ if (resource.hasClasses(core.classes.agent, dataBrowser.classes.folder)) {
 }
 ```
 
+### resource.matchClass()
+
 There are often situations where you want the value of some variable to depend on the class of a resource.
 An example would be a React component that renders different subcomponents based on the resource it is given.
 The `.matchClass()` method makes this easy.
@@ -226,7 +255,7 @@ If the resource has a class that is a key in the object, the corresponding value
 An optional fallback value can be provided as the second argument.
 The order of the classes in the object is important, as the first match is returned.
 
-### Writing classes
+### resource.addClasses()
 
 To add classes to a resource, use the `.addClasses()` method.
 
diff --git a/docs/src/js-lib/store.md b/docs/src/js-lib/store.md
index 884455a98..f155d9cd6 100644
--- a/docs/src/js-lib/store.md
+++ b/docs/src/js-lib/store.md
@@ -172,6 +172,26 @@ const results = store.search('holiday-1995', {
 });
 ```
 
+## Preloading resources
+
+Sometimes you might want to prefetch a resource and all the resources it depends on ahead of time.
+For example when using @tomic/react or @tomic/svelte on the server.
+This can be done using the `store.preloadResourceTree()` method.
+The method takes a subject and an object representing a tree of referenced resources that need to be preloaded.
+
+```js
+
+// Preload a blog post, its header image, the author and the author's profile image
+await store.preloadResourceTree('https://myapp.com/my-blog-post', {
+  [myOntology.properties.headerImage]: true,
+  [myOntology.properties.author]: {
+    [myOntology.properties.profileImage]: true,
+  },
+});
+```
+
+The tree does not have to be complete and can contain any property, this way you can preload any resource even if you're not sure of what type it might be.
+
 ## (Advanced) Fetching resources in render code
 
 > **NOTE:** </br>
diff --git a/docs/src/svelte.md b/docs/src/svelte.md
index 04fac31f7..50720e876 100644
--- a/docs/src/svelte.md
+++ b/docs/src/svelte.md
@@ -2,10 +2,11 @@
 
 # @tomic/svelte
 
-An implementation of Atomic Data for [Svelte](https://svelte.dev/).
-This library is still at an early stage and the API is subject to change.
+An AtomicServer client for [Svelte](https://svelte.dev/).
+Makes fetching AtomicData easy.
+Fetched resources are chached and reactive, they will update when the data changes, even when the resource was changed by someone else.
 
-[See open source template: `atomic-sveltekit-demo`.](https://github.com/atomicdata-dev/atomic-sveltekit-demo)
+[See open source template: `atomic-sveltekit-demo` (outdated).](https://github.com/atomicdata-dev/atomic-sveltekit-demo)
 
 ## Quick Examples
 
@@ -13,126 +14,185 @@ This library is still at an early stage and the API is subject to change.
 
 ```html
 <script lang="ts">
-  import { getResource, getValue } from '@tomic/svelte';
-  import { Core } from '@tomic/lib';
+  import { getResource } from '@tomic/svelte';
+  import { type Core } from '@tomic/lib';
 
-  const resource = getResource<Core.Agent>('https://example.com/user1');
+  const resource = getResource<Core.Agent>(() => 'https://example.com/user1');
 </script>
 
-<h1>{$resource.props.name}</h1>
+<h1>{resource.props.name}</h1>
 ```
 
 ### Changing the value of a property with an input field
 
 ```html
 <script lang="ts">
-  import { getResource, getValue, setValue } from '@tomic/svelte';
-  import { core, Core } from '@tomic/lib';
+  import { getResource } from '@tomic/svelte';
+  import { type Core } from '@tomic/lib';
 
-  const resource = getResource<Core.Agent>('https://example.com/user1');
-  const name = getValue(resource, core.properties.name); // Writable<string>
+  const resource = getResource<Core.Agent>(() => 'https://example.com/user1');
 </script>
 
-<input bind:value={$name} />
+<input bind:value={resource.props.name} />
+<button onclick={() => resource.save()}>Save</button>
 ```
 
 ## Getting started
 
 Install the library with your preferred package manager:
 
-```sh
+```bash
 npm install -S @tomic/svelte @tomic/lib
 ```
 
-```sh
+```bash
 yarn add @tomic/svelte @tomic/lib
 ```
 
-```sh
+```bash
 pnpm add @tomic/svelte @tomic/lib
 ```
 
-Initialise the store
+### Creating a store
+
+@tomic/svelte uses svelte's context API to make the store available to any sub components.
+The store is what fetches and caches resources.
+It also handles authentication by setting an agent, therefore you should always create a separate store on authenticated routes.
+
+To initialise the store, create a new store and then call `createAtomicStoreContext` with the store as the argument:
 
 ```html
-// App.svelte
+// App.svelte or +page.svelte
 
 <script lang="ts">
-  import { initStore } from '@tomic/svelte';
+  import { createAtomicStoreContext } from '@tomic/svelte';
   import { Store } from '@tomic/lib';
 
-  onMount(() => {
-    // This is where you configure your atomic data store.
-    const store = new Store();
-    initStore(store);
-  });
+  const store = new Store();
+
+  createAtomicStoreContext(store);
 </script>
 
-// do sveltey things
+// do svelty things
 ```
 
-You can now access this store from any component in your app with the store store.
+You can now access this store from any sub component by using `getStoreFromContext()`.
 
 ```html
 // Some random component.svelte
 
 <script lang="ts">
-  import { store } from '@tomic/svelte';
+  import { getStoreFromContext } from '@tomic/svelte';
+  import { dataBrowser } from '@tomic/lib';
 
-  const resource = $store.getResourceLoading('https://atomicdata.dev/documents/tgzamh5hk2t');
+  const store = getStoreFromContext();
+  store.newResource({
+    isA: [dataBrowser.classes.Folder]
+    parant: 'some_other_subject',
+  });
 </script>
 ```
 
-However, this resource does not update when some of its data changes somewhere else in your app.
-That's where the `getResource` and `getValue` functions come in handy.
+If you've used @tomic/lib before you might know that fetching resources is done with `await store.getResource()`.
+However, this is not very practical in Svelte because it's async and not reactive, meaning it won't update when its data changes.
+That's where the `getResource` function comes in.
 
-To get a value and display it in your component we first retrieve (or create) a resource from the store with `getResource` and then get its value with `getValue`.
+`getResource` returns a reactive resource object.
+At first the resource will be empty and its loading property will be true (unless it was found in the cache).
+The store will start fetching and will update the resource instance when it's done.
 
 ```html
 // Some random component.svelte
 
 <script lang="ts">
   import { getResource, getValue } from '@tomic/svelte';
-  import { core } from '@tomic/lib';
+  import { type Page } from '$lib/ontologies/myApp.js';
 
-  const resource = getResource('https://example.com/');
-  const name = getValue(resource, core.properties.name);
+  const page = getResource<Page>(() => 'https://example.com/');
 </script>
 
 <main>
-  <h1>{$name}</h1>
-  ...
+  {#if page.loading}
+    <p>Loading...</p>
+  {:else}
+    <h1>{page.title}</h1>
+    <p>{page.props.description}</p>
+  {/if}
 </main>
 ```
 
-Updating the values of a resource is super simple, just do what you would normally do with a writable svelte store:
+To write data to a resource, just change the value of its properties and save it when you're done.
+*Note: you can only write to resources when you've set an agent on the store.*
 
-```ts
-const value = getValue(resource, core.properties.name);
-
-$value = 'New Value';
+```js
+page.props.name = 'New Title';
+page.save();
 ```
 
-The value now updates and changes will permeate through the store.
-
 ## Typescript
 
-This library is build using typescript and is fully typed. To full advantage of Atomic Data's strong type system use [@tomic/cli](https://www.npmjs.com/package/@tomic/cli) to generate types using Ontologies. These can then be used like this:
+This library is build using typescript and is fully typed. To take full advantage of Atomic Data's strong type system use [@tomic/cli](https://www.npmjs.com/package/@tomic/cli) to generate types using Ontologies. These can then be used like this:
 
 ```html
 <script lang="ts">
   import { getResource, getValue } from '@tomic/svelte';
   import { core } from '@tomic/lib';
   // User 'app' ontology generated using @tomic/cli
-  import { Person, app } from './ontologies';
+  import { type Person, app } from './ontologies';
 
-  const resource = getResource<Person>('https://myapp.com/users/me'); // Readable<Resource<Person>>
-  const name = getValue(resource, core.properties.name); // Writable<string>
-  const hobbies = getValue(resource, app.properties.hobbies); // Writable<string[]>
+  const resource = getResource<Person>(() =>'https://myapp.com/users/me'); // Readable<Resource<Person>>
+  const name = $derived(resource.props.name); // string
+  const hobbies = $derived(resource.props.hobbies); // string[] - a list of subjects of 'Hobby' resources.
 </script>
+```
 
-<main>
-  <h1>{$name}</h1>
-  ...
-</main>
+## Using with SvelteKit
+
+While this library is mostly focussed on client side rendering it can also be used on the server.
+There are a few important things to keep in mind to avoid problems with server side rendering.
+
+### The problem with fetching inside components
+
+When SvelteKit renders a page on the server it will only do so once and it won't wait for any pending requests.
+Because `getResource` is async only the empty resource it initially returns is sent to the client.
+It is still fetched and rendered after the page hydrates but the user might see a flicker of missing content.
+This essentially means you won't get much benefit out of rendering on the server.
+
+There are a few ways to mitigate this.
+
+#### Load Functions
+
+One option is to just not use `getResource`, or `@tomic/svelte` for that matter, and only use `@tomic/lib` to fetch resources in a load function with `await store.getResource()`.
+This isn't a big deal if you only need a single resource with a little bit of data but depending on how dynamic your site is this might become cumbersome.
+
+#### Preloading resources
+
+Another option is to preload the resources you need for a page.
+Inside the load function of your route you can call `await store.preloadResourceTree()` to fetch the resource and any referenced resources.
+When the resources have been preloaded they are available in the store's cache so you can use `getResource` in your components as usual.
+More info about the `preloadResourceTree` function can be found [here](./js-lib/store.md).
+
+```js
+export async function load({ params }) {
+  const store = getStoreFromSomewhere();
+
+  await store.preloadResourceTree('https://myapp.com/my-page', {
+   [website.properties.blocks]: {
+    [website.properties.images]: true
+   }
+  });
+}
+```
+
+### SvelteKits custom `fetch` function
+
+SvelteKit has a clever custom fetch function that caches a response and inlines it in the pages HTML so the client doesn't have to send the request again.
+You need to inject this fetch function into the store so it can be used for fetching resources.
+
+```js
+// some +page.js
+export async function load({ fetch }) {
+  const store = getStoreFromSomewhere();
+  store.injectFetch(fetch);
+}
 ```