From b501472d79d492e76d8f7e5ee2097aca3cbd6866 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 6 Jan 2025 12:47:15 -0500
Subject: [PATCH 1/5] use Persisted for details blocks

---
 packages/site-kit/src/lib/actions/legacy-details.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/site-kit/src/lib/actions/legacy-details.ts b/packages/site-kit/src/lib/actions/legacy-details.ts
index c6c6270820..29ed5de516 100644
--- a/packages/site-kit/src/lib/actions/legacy-details.ts
+++ b/packages/site-kit/src/lib/actions/legacy-details.ts
@@ -1,9 +1,8 @@
 import { page } from '$app/stores';
-import { persisted } from 'svelte-persisted-store';
-import { get } from 'svelte/store';
 import { fix_position } from './utils';
+import { Persisted } from '../state';
 
-const show_legacy = persisted('svelte:show-legacy', true);
+const show_legacy = new Persisted<'open' | 'closed'>('sv:show-legacy', 'open');
 
 export function legacy_details(node: HTMLElement) {
 	function update() {
@@ -16,7 +15,7 @@ export function legacy_details(node: HTMLElement) {
 		}
 
 		const details = node.querySelectorAll('details.legacy') as NodeListOf<HTMLDetailsElement>;
-		const show = get(show_legacy);
+		const show = show_legacy.current === 'open';
 
 		/** Whether the toggle was initiated by user action or `element.open = !element.open` */
 		let secondary = false;
@@ -29,7 +28,7 @@ export function legacy_details(node: HTMLElement) {
 				if (secondary) return;
 				secondary = true;
 
-				show_legacy.set(detail.open);
+				show_legacy.current = detail.open ? 'open' : 'closed';
 
 				fix_position(detail, () => {
 					for (const other of details) {

From 7c03e75b4a4110e6b2c8cd929a626c12c5ec7e2b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 6 Jan 2025 12:57:52 -0500
Subject: [PATCH 2/5] another

---
 packages/site-kit/src/lib/components/Banner.svelte | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte
index 6e210b8761..d3b3f928b0 100644
--- a/packages/site-kit/src/lib/components/Banner.svelte
+++ b/packages/site-kit/src/lib/components/Banner.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
 	import { quintOut } from 'svelte/easing';
 	import { fade } from 'svelte/transition';
-	import { persisted } from 'svelte-persisted-store';
 	import Icon from './Icon.svelte';
 	import type { BannerData } from '../types';
 	import { browser } from '$app/environment';
+	import { Persisted } from '../state';
 
 	let { banner }: { banner: BannerData } = $props();
 
-	const hidden = persisted<Record<string, boolean>>('svelte:hidden-banners', {});
+	const persisted = new Persisted<string>('sv:hidden-banners', '{}');
+	const hidden = $derived(JSON.parse(persisted.current));
 	const time = +new Date();
 
 	let visible = $derived(
-		browser && !$hidden[banner.id] && time > +banner.start && time < +banner.end
+		browser && !hidden[banner.id] && time > +banner.start && time < +banner.end
 	);
 
 	$effect(() => {
@@ -40,7 +41,10 @@
 			aria-label="Dismiss"
 			class="raised primary"
 			onclick={() => {
-				$hidden[banner.id] = true;
+				persisted.current = JSON.stringify({
+					...hidden,
+					[banner.id]: true
+				});
 			}}
 		>
 			<Icon name="close" />

From 87b150b6efec06bc74e16c68c8b4216a9f7a9817 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 6 Jan 2025 13:01:25 -0500
Subject: [PATCH 3/5] another

---
 packages/site-kit/src/lib/components/Text.svelte   | 6 +++---
 packages/site-kit/src/lib/state/code_preference.ts | 6 ++++++
 packages/site-kit/src/lib/stores/prefers_ts.ts     | 3 ---
 3 files changed, 9 insertions(+), 6 deletions(-)
 create mode 100644 packages/site-kit/src/lib/state/code_preference.ts
 delete mode 100644 packages/site-kit/src/lib/stores/prefers_ts.ts

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 9e58b9dd62..0ada4e8bda 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import type { Snippet } from 'svelte';
-	import { prefers_ts } from '../stores/prefers_ts';
+	import { code_preference } from '../state/code_preference';
 	import { fix_position } from '../actions/utils';
 
 	let { children }: { children: Snippet } = $props();
@@ -14,14 +14,14 @@
 		const inputs = container.querySelectorAll('.ts-toggle') as NodeListOf<HTMLInputElement>;
 
 		for (const input of inputs) {
-			input.checked = $prefers_ts;
+			input.checked = code_preference.current === 'typescript';
 		}
 	}
 
 	function toggle(e: Event) {
 		if ((e.target as HTMLElement).classList.contains('ts-toggle')) {
 			const input = e.target as HTMLInputElement;
-			$prefers_ts = input.checked;
+			code_preference.current = input.checked ? 'typescript' : 'javascript';
 			fix_position(input, update);
 		}
 	}
diff --git a/packages/site-kit/src/lib/state/code_preference.ts b/packages/site-kit/src/lib/state/code_preference.ts
new file mode 100644
index 0000000000..25510cc15b
--- /dev/null
+++ b/packages/site-kit/src/lib/state/code_preference.ts
@@ -0,0 +1,6 @@
+import { Persisted } from './Persisted.svelte';
+
+export const code_preference = new Persisted<'typescript' | 'javascript'>(
+	'sv:code_preference',
+	'typescript'
+);
diff --git a/packages/site-kit/src/lib/stores/prefers_ts.ts b/packages/site-kit/src/lib/stores/prefers_ts.ts
deleted file mode 100644
index f7b70f5c7f..0000000000
--- a/packages/site-kit/src/lib/stores/prefers_ts.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { persisted } from 'svelte-persisted-store';
-
-export const prefers_ts = persisted('svelte:prefers-ts', true);

From 45fe3973d185654626666e5830a3dd2538d79d63 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 6 Jan 2025 13:21:35 -0500
Subject: [PATCH 4/5] another

---
 packages/site-kit/src/lib/nav/Nav.svelte      |  7 ++-
 .../site-kit/src/lib/search/Search.svelte     | 10 ++--
 .../site-kit/src/lib/search/SearchBox.svelte  | 55 ++++++++++---------
 .../site-kit/src/lib/state/search.svelte.ts   | 17 ++++++
 packages/site-kit/src/lib/stores/index.ts     |  1 -
 packages/site-kit/src/lib/stores/search.ts    |  6 --
 6 files changed, 54 insertions(+), 42 deletions(-)
 create mode 100644 packages/site-kit/src/lib/state/search.svelte.ts
 delete mode 100644 packages/site-kit/src/lib/stores/search.ts

diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 17485f1c29..c20e2d85d4 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -3,7 +3,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
 -->
 
 <script lang="ts">
-	import { overlay_open, searching, on_this_page_open } from '../stores';
+	import { overlay_open, on_this_page_open } from '../stores';
+	import { search } from '../state/search.svelte';
 	import Icon from '../components/Icon.svelte';
 	import { page } from '$app/stores';
 	import ThemeToggle from '../components/ThemeToggle.svelte';
@@ -67,7 +68,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 <nav
 	class:visible
-	style:z-index={$overlay_open && ($searching || $on_this_page_open) ? 80 : null}
+	style:z-index={$overlay_open && (search.active || $on_this_page_open) ? 80 : null}
 	aria-label="Primary"
 >
 	<a class="home-link" href="/" title={home_title} aria-label="Svelte"></a>
@@ -145,7 +146,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			aria-label="Search"
 			class="raised icon search"
 			onclick={() => {
-				$searching = true;
+				search.active = true;
 			}}
 		>
 			<Icon name="search" size={18} />
diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index c46056c652..df19cd6a44 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -3,7 +3,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 -->
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
-	import { search_query, searching } from '../stores/search';
+	import { search } from '../state/search.svelte';
 
 	let { q = '', label = 'Search' }: { q?: string; label?: string } = $props();
 </script>
@@ -12,20 +12,20 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 	<input
 		value={q}
 		oninput={(e) => {
-			$search_query = e.currentTarget.value;
-			$searching = true;
+			search.query = e.currentTarget.value;
+			search.active = true;
 			e.currentTarget.value = '';
 			e.currentTarget.blur();
 		}}
 		onmousedown={(event) => {
 			event.preventDefault();
 			event.currentTarget.blur();
-			$searching = true;
+			search.active = true;
 		}}
 		ontouchend={(event) => {
 			event.preventDefault();
 			event.currentTarget.blur();
-			$searching = true;
+			search.active = true;
 		}}
 		type="search"
 		name="q"
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index f56af88da6..1da198857b 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -4,7 +4,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 -->
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
-	import { overlay_open, search_query, search_recent, searching } from '../stores';
+	import { overlay_open } from '../stores';
+	import { search } from '../state/search.svelte';
 	import { onMount, type Snippet } from 'svelte';
 	import { focusable_children, forcefocus, trap } from '../actions/focus.js';
 	import Icon from '../components/Icon.svelte';
@@ -24,7 +25,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	let modal = $state() as HTMLElement;
 
 	// TODO proper types
-	let search: any = $state(null);
+	let searched: any = $state(null);
 	let recent_searches: any[] = $state([]);
 
 	let last_scroll_position: number | null = null;
@@ -46,7 +47,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			}
 
 			if (type === 'results') {
-				search = payload;
+				searched = payload;
 			}
 
 			if (type === 'recents') {
@@ -69,8 +70,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	});
 
 	async function close() {
-		if ($searching) {
-			$searching = false;
+		if (search.active) {
+			search.active = false;
 			const scroll = last_scroll_position || 0;
 			last_scroll_position = null;
 			document.body.style.position = '';
@@ -79,14 +80,14 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			document.body.removeAttribute('tabindex');
 			window.scrollTo(0, scroll);
 
-			$search_query = '';
+			search.query = '';
 		}
 
-		search = null;
+		searched = null;
 	}
 
 	function navigate(href: string) {
-		$search_recent = [href, ...$search_recent.filter((x) => x !== href)];
+		search.recent = [href, ...search.recent.filter((x) => x !== href)];
 		close();
 	}
 
@@ -99,7 +100,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 				type: 'query',
 				id,
 				payload: {
-					query: $search_query,
+					query: search.query,
 					path: $page.url.pathname
 				}
 			});
@@ -108,16 +109,16 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 	$effect(() => {
 		if (ready) {
-			worker.postMessage({ type: 'recents', payload: $state.snapshot($search_recent) });
+			worker.postMessage({ type: 'recents', payload: search.recent });
 		}
 	});
 
 	$effect(() => {
-		$overlay_open = $searching;
+		$overlay_open = search.active;
 	});
 
 	$effect(() => {
-		if ($searching) {
+		if (search.active) {
 			last_scroll_position = window.scrollY;
 		}
 	});
@@ -127,12 +128,12 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	onkeydown={(e) => {
 		if (e.key === 'k' && (navigator.platform === 'MacIntel' ? e.metaKey : e.ctrlKey)) {
 			e.preventDefault();
-			$search_query = '';
+			search.query = '';
 
-			if ($searching) {
+			if (search.active) {
 				close();
 			} else {
-				$searching = true;
+				search.active = true;
 			}
 		}
 
@@ -142,7 +143,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}}
 />
 
-{#if $searching && ready}
+{#if search.active && ready}
 	<div class="pseudo-overlay" aria-hidden="true" onclick={close}></div>
 
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -178,16 +179,16 @@ It appears when the user clicks on the `Search` component or presses the corresp
 							}
 						}}
 						oninput={(e) => {
-							$search_query = e.currentTarget.value;
+							search.query = e.currentTarget.value;
 						}}
-						value={$search_query}
+						value={search.query}
 						{placeholder}
 						aria-describedby="search-description"
 						aria-label={placeholder}
 						spellcheck="false"
 					/>
 
-					<button aria-label="Clear" onclick={() => ($search_query = '')}>
+					<button aria-label="Clear" onclick={() => (search.query = '')}>
 						<Icon name="close" />
 					</button>
 				</div>
@@ -207,11 +208,11 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			</span>
 
 			<div class="results">
-				{#if search?.query}
+				{#if searched?.query}
 					<div class="results-container">
 						<SearchResults
-							results={search.results}
-							query={search.query}
+							results={searched.results}
+							query={searched.query}
 							onselect={(href) => {
 								navigate(href);
 							}}
@@ -229,17 +230,17 @@ It appears when the user clicks on the `Search` component or presses the corresp
 					{#if recent_searches.length}
 						<div class="results-container">
 							<ul class="recent">
-								{#each recent_searches as search}
+								{#each recent_searches as result}
 									<li>
-										<a onclick={() => navigate(search.href)} href={search.href}>
-											{search.breadcrumbs.at(-1)}
+										<a onclick={() => navigate(result.href)} href={result.href}>
+											{result.breadcrumbs.at(-1)}
 										</a>
 
 										<button
 											class="raised icon"
 											aria-label="Delete"
 											onclick={(e) => {
-												$search_recent = $search_recent.filter((href) => href !== search.href);
+												search.recent = search.recent.filter((href) => href !== result.href);
 												e.stopPropagation();
 												e.preventDefault();
 											}}
@@ -258,7 +259,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 {/if}
 
 <div aria-live="assertive" class="visually-hidden">
-	{#if $searching && search?.results.length === 0}
+	{#if search.active && searched?.results.length === 0}
 		<p>
 			{#if no_results}
 				{@render no_results()}
diff --git a/packages/site-kit/src/lib/state/search.svelte.ts b/packages/site-kit/src/lib/state/search.svelte.ts
new file mode 100644
index 0000000000..c803ee3a7a
--- /dev/null
+++ b/packages/site-kit/src/lib/state/search.svelte.ts
@@ -0,0 +1,17 @@
+import { Persisted } from './Persisted.svelte';
+
+class SearchState {
+	#recent = new Persisted<string>('sv:recent-searches', '[]');
+	active = $state(false);
+	query = $state('');
+
+	get recent() {
+		return JSON.parse(this.#recent.current) as string[];
+	}
+
+	set recent(value) {
+		this.#recent.current = JSON.stringify(value);
+	}
+}
+
+export const search = new SearchState();
diff --git a/packages/site-kit/src/lib/stores/index.ts b/packages/site-kit/src/lib/stores/index.ts
index 39f05a77e0..000cd01565 100644
--- a/packages/site-kit/src/lib/stores/index.ts
+++ b/packages/site-kit/src/lib/stores/index.ts
@@ -1,4 +1,3 @@
 export { mql } from './mql';
 export { nav_open, on_this_page_open, overlay_open, should_nav_autohide } from './nav';
 export { reduced_motion } from './reduced-motion';
-export { search_query, search_recent, searching } from './search';
diff --git a/packages/site-kit/src/lib/stores/search.ts b/packages/site-kit/src/lib/stores/search.ts
deleted file mode 100644
index c3cca769ce..0000000000
--- a/packages/site-kit/src/lib/stores/search.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { persisted } from 'svelte-persisted-store';
-import { writable } from 'svelte/store';
-
-export const searching = writable(false);
-export const search_query = writable('');
-export const search_recent = persisted<any[]>('svelte:recent-searches', []);

From b0bd289d39dc8f8be3ba66fdabd8266c7d07957b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 6 Jan 2025 13:21:58 -0500
Subject: [PATCH 5/5] remove svelte-persisted-store

---
 packages/site-kit/package.json |  3 +--
 pnpm-lock.yaml                 | 13 -------------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index a57d77fd98..d944365e11 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -42,8 +42,7 @@
 		"@shikijs/twoslash": "^1.22.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
-		"shiki": "^1.22.0",
-		"svelte-persisted-store": "^0.9.2"
+		"shiki": "^1.22.0"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "^2.12.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c572cd679..b386f58ded 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -485,9 +485,6 @@ importers:
       shiki:
         specifier: ^1.22.0
         version: 1.22.0
-      svelte-persisted-store:
-        specifier: ^0.9.2
-        version: 0.9.4(svelte@5.14.0)
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.12.1
@@ -3020,12 +3017,6 @@ packages:
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
 
-  svelte-persisted-store@0.9.4:
-    resolution: {integrity: sha512-Em3cDSsd3fAkQhvNc4+V7ZT86GnIkFrlcKK/oNSHFhF5fbNoavdxvtTZ0pCF2ueG/Oqg5kSbAFxn0rkeICpHUA==}
-    engines: {node: '>=0.14'}
-    peerDependencies:
-      svelte: ^3.48.0 || ^4.0.0 || ^5.0.0-next.0
-
   svelte-preprocess@6.0.3:
     resolution: {integrity: sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==}
     engines: {node: '>= 18.0.0'}
@@ -5916,10 +5907,6 @@ snapshots:
     dependencies:
       svelte: 5.14.0
 
-  svelte-persisted-store@0.9.4(svelte@5.14.0):
-    dependencies:
-      svelte: 5.14.0
-
   svelte-preprocess@6.0.3(postcss@8.4.45)(svelte@5.14.0)(typescript@5.5.4):
     dependencies:
       svelte: 5.14.0