fixes async svelte issue

Author: stolinski

src/lib/zero.svelte.ts

@@ -37,16 +37,24 @@ async function get_z_options() {
 
 	return {
 		userID,
-		kvStore: 'mem',
+		kvStore: 'mem' as const,
 		server: PUBLIC_SERVER,
 		schema,
 		mutators,
 		context,
-		jwt: jwt || undefined
-	} as const;
+		auth: jwt || undefined
+	};
 }
 
+// Top-level await to initialize Z with proper auth context
+// This works correctly when experimental.async is DISABLED
 export const z = new Z(await get_z_options());
 
+// Function to reinitialize Z with fresh JWT (call after login)
+export async function reinitializeZ() {
+	const options = await get_z_options();
+	z.build(options);
+}
+
 // Re-export queries and mutators for convenient access
 export { queries, mutators };

src/routes/(style)/(admin)/+layout.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import Bread from '$lib/ui/Bread.svelte';
 	import { queries } from '$lib/queries';
 	import { z } from '$lib/zero.svelte';
-	import type { Snippet } from 'svelte';
 
-	const { children }: { children: Snippet } = $props();
+	const { children } = $props();
 
 	const user = z.createQuery(queries.user.current());
 
@@ -73,7 +72,7 @@
 				{#each links as link}
 					<a
 						href={link.href}
-						aria-current={$page.url.pathname === link.href ? 'page' : undefined}
+						aria-current={page.url.pathname === link.href ? 'page' : undefined}
 						>{link.label}</a
 					>
 				{/each}

src/routes/(style)/(admin)/admin/hax/+page.svelte

@@ -40,6 +40,5 @@
 
 <div class="stack" style:--gap="40px;">
 	<h1>Hax</h1>
-
 	<Table data={hax.data} {columns} />
 </div>

src/routes/(style)/(admin)/admin/targets/+page.svelte

@@ -49,6 +49,5 @@
 	<div class="actions">
 		<a href="/admin/targets/init" class="button go_button">Create Target</a>
 	</div>
-
 	<Table data={targets.data} {columns} />
 </div>

src/routes/(style)/(menu)/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { queries } from '$lib/queries';
 	import { z } from '$lib/zero.svelte';
 
@@ -62,24 +62,23 @@
 			<nav class="sidebar-nav">
 				<a
 					href="/dashboard"
-					aria-current={$page.url.pathname === '/dashboard'
-						? 'page'
-						: undefined}>Battles</a
+					aria-current={page.url.pathname === '/dashboard' ? 'page' : undefined}
+					>Battles</a
 				>
 				<a
 					href="/history"
-					aria-current={$page.url.pathname === '/history' ? 'page' : undefined}
+					aria-current={page.url.pathname === '/history' ? 'page' : undefined}
 					>History</a
 				>
 				<a
 					href="/settings"
-					aria-current={$page.url.pathname === '/settings' ? 'page' : undefined}
+					aria-current={page.url.pathname === '/settings' ? 'page' : undefined}
 					>Settings</a
 				>
 				{#if user.data?.role === 'syntax'}
 					<a
 						href="/admin/"
-						aria-current={$page.url.pathname.startsWith('/admin')
+						aria-current={page.url.pathname.startsWith('/admin')
 							? 'page'
 							: undefined}>Admin</a
 					>

svelte.config.js

@@ -6,11 +6,12 @@ const config = {
 	// Consult https://svelte.dev/docs/kit/integrations
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
-	compilerOptions: {
-		experimental: {
-			async: true
-		}
-	},
+	// Disabled: experimental.async breaks SvelteKit client-side navigation
+	// compilerOptions: {
+	// 	experimental: {
+	// 		async: true
+	// 	}
+	// },
 
 	kit: {
 		adapter: adapter(),