From 5220bf1cc3d02e726652a01a62f988b4ad923a1e Mon Sep 17 00:00:00 2001
From: andylovescode <andytk2010@gmail.com>
Date: Sun, 24 Aug 2025 14:51:06 -0700
Subject: [PATCH 1/4] Core: Add first draft of Query API

---
 packages/vortex-common/src/index.ts           |   1 +
 packages/vortex-common/src/time.ts            |  42 +++
 packages/vortex-core/src/context.ts           | 262 +++++++++---------
 packages/vortex-core/src/index.ts             |   1 +
 packages/vortex-core/src/query/data-engine.ts | 115 ++++++++
 packages/vortex-core/src/query/hook.ts        |  22 ++
 packages/vortex-core/src/query/index.ts       |   2 +
 packages/vortex-core/src/query/schema.ts      |  16 ++
 packages/vortex-core/src/render/index.tsx     |   2 +-
 .../wormhole/src/build/adapters/vercel.ts     |   2 +-
 packages/wormhole/src/dev/dev-server.ts       |   3 +-
 11 files changed, 338 insertions(+), 130 deletions(-)
 create mode 100644 packages/vortex-common/src/time.ts
 create mode 100644 packages/vortex-core/src/query/data-engine.ts
 create mode 100644 packages/vortex-core/src/query/hook.ts
 create mode 100644 packages/vortex-core/src/query/index.ts
 create mode 100644 packages/vortex-core/src/query/schema.ts

diff --git a/packages/vortex-common/src/index.ts b/packages/vortex-common/src/index.ts
index b275b3f..f2c4f41 100644
--- a/packages/vortex-common/src/index.ts
+++ b/packages/vortex-common/src/index.ts
@@ -7,6 +7,7 @@ export * from "./hash";
 export * from "./npm";
 export * as SKL from "./skl";
 export * from "./smolify";
+export * from "./time";
 export * from "./ultraglobal";
 export * from "./unreachable";
 export * from "./unwrap";
diff --git a/packages/vortex-common/src/time.ts b/packages/vortex-common/src/time.ts
new file mode 100644
index 0000000..fdb0e37
--- /dev/null
+++ b/packages/vortex-common/src/time.ts
@@ -0,0 +1,42 @@
+const timeUnits = {
+    s: 1000,
+    ms: 1,
+    m: 60 * 1000,
+    h: 60 * 60 * 1000,
+    d: 24 * 60 * 60 * 1000,
+    w: 7 * 24 * 60 * 60 * 1000,
+    y: 365 * 24 * 60 * 60 * 1000,
+} as const;
+
+type TimeUnit = keyof typeof timeUnits;
+
+export type TimeSpec = `${number}${TimeUnit}`;
+
+export function time(time: TimeSpec): { ms: number } {
+    let numberPortion = "";
+    let unitPortion = "";
+
+    for (const char of time) {
+        if (char >= "0" && char <= "9") {
+            if (unitPortion.length > 0) {
+                throw new Error(`Invalid time spec: ${time}`);
+            }
+            numberPortion += char;
+        } else {
+            unitPortion += char;
+        }
+    }
+
+    if (numberPortion.length === 0 || unitPortion.length === 0) {
+        throw new Error(`Invalid time spec: ${time}`);
+    }
+
+    const numberValue = Number.parseInt(numberPortion, 10);
+    const unitValue = timeUnits[unitPortion as TimeUnit];
+
+    if (Number.isNaN(numberValue) || unitValue === undefined) {
+        throw new Error(`Invalid time spec: ${time}`);
+    }
+
+    return { ms: numberValue * unitValue };
+}
diff --git a/packages/vortex-core/src/context.ts b/packages/vortex-core/src/context.ts
index 233e9a9..609821f 100644
--- a/packages/vortex-core/src/context.ts
+++ b/packages/vortex-core/src/context.ts
@@ -1,154 +1,164 @@
 import { unwrap } from "@vortexjs/common";
 import type { JSXNode } from "./jsx/jsx-common";
+import type { Lifetime } from "./lifetime";
+import { QueryDataEngine } from "./query";
 import { clearImmediate, setImmediate } from "./setImmediate.polyfill";
 import { type Signal, type SignalOrValue, toSignal } from "./signal";
 
 export interface Context<T> {
-	(props: { value: SignalOrValue<T>; children: JSXNode }): JSXNode;
-	use(): Signal<T>;
-	useOptional(): Signal<T> | undefined;
+    (props: { value: SignalOrValue<T>; children: JSXNode }): JSXNode;
+    use(): Signal<T>;
+    useOptional(): Signal<T> | undefined;
 }
 
 export function createContext<T>(name = "Unnamed"): Context<T> {
-	const id = crypto.randomUUID();
-
-	const result = (props: {
-		value: SignalOrValue<T>;
-		children: JSXNode;
-	}): JSXNode => {
-		return {
-			type: "context",
-			id,
-			value: toSignal(props.value),
-			children: props.children,
-		};
-	};
-
-	result.use = () => {
-		return unwrap(
-			useContextScope().contexts[id],
-			`Context "${name}" not found, you may have forgotten to wrap your component in the context provider.`,
-		);
-	};
-
-	result.useOptional = () => {
-		return useContextScope().contexts[id];
-	};
-
-	return result;
+    const id = crypto.randomUUID();
+
+    const result = (props: {
+        value: SignalOrValue<T>;
+        children: JSXNode;
+    }): JSXNode => {
+        return {
+            type: "context",
+            id,
+            value: toSignal(props.value),
+            children: props.children,
+        };
+    };
+
+    result.use = () => {
+        return unwrap(
+            useContextScope().contexts[id],
+            `Context "${name}" not found, you may have forgotten to wrap your component in the context provider.`,
+        );
+    };
+
+    result.useOptional = () => {
+        return useContextScope().contexts[id];
+    };
+
+    return result;
 }
 
 export class StreamingContext {
-	private updateCallbackImmediate = 0;
-	private updateCallbacks = new Set<() => void>();
-	private loadingCounter = 0;
-	private onDoneLoadingCallback = () => {};
-	onDoneLoading: Promise<void>;
-
-	constructor() {
-		this.onDoneLoading = new Promise((resolve) => {
-			this.onDoneLoadingCallback = resolve;
-		});
-	}
-
-	onUpdate(callback: () => void): () => void {
-		this.updateCallbacks.add(callback);
-
-		return () => {
-			this.updateCallbacks.delete(callback);
-		};
-	}
-
-	markLoading() {
-		const self = this;
-
-		this.loadingCounter++;
-
-		return {
-			[Symbol.dispose]() {
-				self.loadingCounter--;
-				self.updated();
-			},
-		};
-	}
-
-	updated() {
-		if (this.updateCallbackImmediate) {
-			clearImmediate(this.updateCallbackImmediate);
-		}
-
-		// biome-ignore lint/complexity/noUselessThisAlias: without it, shit breaks
-		const self = this;
-
-		this.updateCallbackImmediate = setImmediate(() => {
-			self.updateCallbackImmediate = 0;
-
-			for (const callback of self.updateCallbacks) {
-				callback();
-			}
-
-			if (self.loadingCounter === 0) {
-				self.onDoneLoadingCallback();
-			}
-		}) as unknown as number;
-	}
+    private updateCallbackImmediate = 0;
+    private updateCallbacks = new Set<() => void>();
+    private loadingCounter = 0;
+    private onDoneLoadingCallback = () => { };
+    onDoneLoading: Promise<void>;
+
+    constructor() {
+        this.onDoneLoading = new Promise((resolve) => {
+            this.onDoneLoadingCallback = resolve;
+        });
+    }
+
+    onUpdate(callback: () => void): () => void {
+        this.updateCallbacks.add(callback);
+
+        return () => {
+            this.updateCallbacks.delete(callback);
+        };
+    }
+
+    markLoading() {
+        const self = this;
+
+        this.loadingCounter++;
+
+        return {
+            [Symbol.dispose]() {
+                self.loadingCounter--;
+                self.updated();
+            },
+        };
+    }
+
+    updated() {
+        if (this.updateCallbackImmediate) {
+            clearImmediate(this.updateCallbackImmediate);
+        }
+
+        // biome-ignore lint/complexity/noUselessThisAlias: without it, shit breaks
+        const self = this;
+
+        this.updateCallbackImmediate = setImmediate(() => {
+            self.updateCallbackImmediate = 0;
+
+            for (const callback of self.updateCallbacks) {
+                callback();
+            }
+
+            if (self.loadingCounter === 0) {
+                self.onDoneLoadingCallback();
+            }
+        }) as unknown as number;
+    }
 }
 
 export class ContextScope {
-	contexts: Record<string, Signal<any>> = {};
-	streaming: StreamingContext = new StreamingContext();
-
-	fork() {
-		const newScope = new ContextScope();
-		newScope.contexts = { ...this.contexts };
-		return newScope;
-	}
-
-	addContext<T>(id: string, value: Signal<T>): void {
-		this.contexts[id] = value;
-	}
-
-	static current: ContextScope | null = null;
-
-	static setCurrent(scope: ContextScope | null) {
-		const previous = ContextScope.current;
-
-		ContextScope.current = scope;
-
-		return {
-			[Symbol.dispose]() {
-				ContextScope.current = previous;
-			},
-		};
-	}
+    contexts: Record<string, Signal<any>> = {};
+    streaming: StreamingContext = new StreamingContext();
+    query: QueryDataEngine;
+    lt: Lifetime;
+
+    constructor(lt: Lifetime) {
+        this.query = new QueryDataEngine({ streaming: this.streaming, lt });
+        this.lt = lt;
+    }
+
+    fork() {
+        const newScope = new ContextScope(this.lt);
+        newScope.contexts = { ...this.contexts };
+        newScope.streaming = this.streaming;
+        return newScope;
+    }
+
+    addContext<T>(id: string, value: Signal<T>): void {
+        this.contexts[id] = value;
+    }
+
+    static current: ContextScope | null = null;
+
+    static setCurrent(scope: ContextScope | null) {
+        const previous = ContextScope.current;
+
+        ContextScope.current = scope;
+
+        return {
+            [Symbol.dispose]() {
+                ContextScope.current = previous;
+            },
+        };
+    }
 }
 
 export function useContextScope(): ContextScope {
-	const scope = ContextScope.current;
-	if (!scope) {
-		throw new Error(
-			"No context scope found, you should have one if you're rendering a component.",
-		);
-	}
-	return scope;
+    const scope = ContextScope.current;
+    if (!scope) {
+        throw new Error(
+            "No context scope found, you should have one if you're rendering a component.",
+        );
+    }
+    return scope;
 }
 
 export function useStreaming(): StreamingContext {
-	return useContextScope().streaming;
+    return useContextScope().streaming;
 }
 
 export function useOptionalContextScope(): ContextScope | null {
-	const scope = ContextScope.current;
-	if (!scope) {
-		return null;
-	}
-	return scope;
+    const scope = ContextScope.current;
+    if (!scope) {
+        return null;
+    }
+    return scope;
 }
 
 export function useOptionalStreaming(): StreamingContext | null {
-	const scope = useOptionalContextScope();
-	if (!scope) {
-		return null;
-	}
-	return scope.streaming;
+    const scope = useOptionalContextScope();
+    if (!scope) {
+        return null;
+    }
+    return scope.streaming;
 }
diff --git a/packages/vortex-core/src/index.ts b/packages/vortex-core/src/index.ts
index dbbcc98..848dc9a 100644
--- a/packages/vortex-core/src/index.ts
+++ b/packages/vortex-core/src/index.ts
@@ -2,6 +2,7 @@ export * from "./context";
 export * from "./intrinsic";
 export * from "./jsx/jsx-common";
 export * from "./lifetime";
+export * from "./query";
 export * from "./render";
 export * from "./setImmediate.polyfill";
 export * from "./signal";
diff --git a/packages/vortex-core/src/query/data-engine.ts b/packages/vortex-core/src/query/data-engine.ts
new file mode 100644
index 0000000..5cd8145
--- /dev/null
+++ b/packages/vortex-core/src/query/data-engine.ts
@@ -0,0 +1,115 @@
+import { useState, type Store } from "~/signal";
+import type { QuerySchema } from "./schema";
+import { time } from "@vortexjs/common";
+import type { StreamingContext } from "~/context";
+import type { Lifetime } from "~/lifetime";
+
+export class QueryObservation<Args, Result> {
+    maxAge: number;
+    query: Query<Args, Result>;
+
+    constructor(
+        props: {
+            query: Query<Args, Result>;
+            maxAge?: number;
+        }
+    ) {
+        this.query = props.query;
+        this.maxAge = props.maxAge ?? time("5m").ms;
+    }
+}
+
+export class Query<Args, Result> {
+    schema: QuerySchema<Args, Result>;
+    args: Args;
+    data: Store<Result | undefined> = useState(undefined);
+    isLoading: boolean;
+    updatedAt: number;
+    streaming: StreamingContext;
+
+    constructor(props: { schema: QuerySchema<Args, Result>; args: Args, streaming: StreamingContext }) {
+        this.schema = props.schema;
+        this.args = props.args;
+        this.isLoading = false;
+        this.updatedAt = 0;
+        this.streaming = props.streaming;
+    }
+
+    async update() {
+        if (this.isLoading) return;
+
+        using _data = this.streaming.markLoading();
+
+        this.isLoading = true;
+
+        try {
+            const result = await this.schema.impl(this.args);
+            this.data.set(result);
+            this.updatedAt = Date.now();
+        } catch (e) {
+            console.error("Error fetching query:", e);
+        } finally {
+            this.isLoading = false;
+        }
+    }
+}
+
+export class QueryDataEngine {
+    observations: QueryObservation<any, any>[] = [];
+    queries = new Map<string, Query<any, any>>();
+    streaming: StreamingContext;
+
+    constructor({ streaming, lt }: {
+        streaming: StreamingContext,
+        lt: Lifetime
+    }) {
+        this.streaming = streaming;
+        const int = setInterval(() => this.tick(), 1000);
+        lt.onClosed(() => clearInterval(int));
+    }
+
+    tick() {
+        const now = Date.now();
+
+        for (const obs of this.observations) {
+            if (now - obs.query.updatedAt > obs.maxAge) {
+                obs.query.update();
+            }
+        }
+    }
+
+    createObservation<Args, Result>(
+        props: {
+            maxAge?: number;
+            schema: QuerySchema<Args, Result>;
+            args: Args;
+            lt: Lifetime;
+        }
+    ): QueryObservation<Args, Result> {
+        const key = props.schema.getKey(props.args);
+
+        // Create query if it doesn't exist
+        let query = this.queries.get(key);
+
+        if (!query) {
+            query = new Query<Args, Result>({ schema: props.schema, args: props.args, streaming: this.streaming });
+            this.queries.set(key, query);
+            query.update();
+        }
+
+        const observation = new QueryObservation<Args, Result>({
+            query,
+            maxAge: props.maxAge
+        });
+        this.observations.push(observation);
+
+        props.lt.onClosed(() => {
+            const index = this.observations.indexOf(observation);
+            if (index !== -1) {
+                this.observations.splice(index, 1);
+            }
+        });
+
+        return observation;
+    }
+}
diff --git a/packages/vortex-core/src/query/hook.ts b/packages/vortex-core/src/query/hook.ts
new file mode 100644
index 0000000..003f34d
--- /dev/null
+++ b/packages/vortex-core/src/query/hook.ts
@@ -0,0 +1,22 @@
+import { useContextScope } from "~/context";
+import type { QuerySchema } from "./schema";
+import { useHookLifetime } from "~/lifetime";
+import type { Signal } from "~/signal";
+
+export function useQuery<Args, Result>(
+    schema: QuerySchema<Args, Result>,
+    args: Args,
+    props?: { maxAge?: number },
+): Signal<Result | undefined> {
+    const contextScope = useContextScope();
+    const lt = useHookLifetime();
+
+    const observation = contextScope.query.createObservation({
+        schema,
+        args,
+        lt,
+        maxAge: props?.maxAge,
+    });
+
+    return observation.query.data;
+}
diff --git a/packages/vortex-core/src/query/index.ts b/packages/vortex-core/src/query/index.ts
new file mode 100644
index 0000000..3aa3228
--- /dev/null
+++ b/packages/vortex-core/src/query/index.ts
@@ -0,0 +1,2 @@
+export * from "./data-engine";
+export * from "./hook";
diff --git a/packages/vortex-core/src/query/schema.ts b/packages/vortex-core/src/query/schema.ts
new file mode 100644
index 0000000..fe5dd2c
--- /dev/null
+++ b/packages/vortex-core/src/query/schema.ts
@@ -0,0 +1,16 @@
+export interface QuerySchema<Args, Result> {
+    id: string;
+    impl(args: Args): Promise<Result> | Result;
+    getKey(args: Args): string;
+}
+
+export function querySchema<Args, Result>({ id, impl }: {
+    id: string;
+    impl(args: Args): Promise<Result> | Result;
+}): QuerySchema<Args, Result> {
+    return {
+        id, impl, getKey(args) {
+            return `${id}::${JSON.stringify(args)}`
+        }
+    };
+}
diff --git a/packages/vortex-core/src/render/index.tsx b/packages/vortex-core/src/render/index.tsx
index 56e248f..eaede6a 100644
--- a/packages/vortex-core/src/render/index.tsx
+++ b/packages/vortex-core/src/render/index.tsx
@@ -50,7 +50,7 @@ function internalRender<RendererNode, HydrationContext>({ renderer, root, compon
         node: <ActionProvider>{component}</ActionProvider>,
         hydration: renderer.getHydrationContext(root),
         lt,
-        context: context ?? ContextScope.current ?? new ContextScope(),
+        context: context ?? ContextScope.current ?? new ContextScope(lt),
     });
 
     const portal = new FLPortal(root, renderer);
diff --git a/packages/wormhole/src/build/adapters/vercel.ts b/packages/wormhole/src/build/adapters/vercel.ts
index 1f7e635..520841c 100644
--- a/packages/wormhole/src/build/adapters/vercel.ts
+++ b/packages/wormhole/src/build/adapters/vercel.ts
@@ -233,7 +233,7 @@ export function VercelAdapter(): VercelAdapter {
                 codegenSource += `const renderer = ssr();`;
                 codegenSource += `const root = createHTMLRoot();`;
                 codegenSource += `const lifetime = new Lifetime();`;
-                codegenSource += `const context = new ContextScope();`;
+                codegenSource += `const context = new ContextScope(lifetime);`;
                 codegenSource += `await INTERNAL_entrypoint({
                     props: entrypointProps,
                     loaders,
diff --git a/packages/wormhole/src/dev/dev-server.ts b/packages/wormhole/src/dev/dev-server.ts
index 3e93367..8c79e9d 100644
--- a/packages/wormhole/src/dev/dev-server.ts
+++ b/packages/wormhole/src/dev/dev-server.ts
@@ -130,9 +130,8 @@ async function DevServer_processRequest(this: DevServer, request: Request, tags:
     const root = createHTMLRoot();
     const renderer = ssr();
 
-    const context = new ContextScope();
-
     const lifetime = new Lifetime();
+    const context = new ContextScope(lifetime);
 
     serverEntrypoint.main({
         root,

From 322a53e4e6cd1a7993be8608cbd83e27f7c6446e Mon Sep 17 00:00:00 2001
From: andylovescode <andytk2010@gmail.com>
Date: Sun, 24 Aug 2025 15:04:04 -0700
Subject: [PATCH 2/4] Wormhole: Initial support for Query API

---
 .../src/features/home/index.tsx               |  11 +-
 packages/vortex-core/src/query/hook.ts        |   4 +-
 packages/vortex-core/src/query/index.ts       |   1 +
 packages/wormhole/src/runtime/api.ts          | 233 ++++++++++--------
 packages/wormhole/src/virt/route.ts           |  29 ++-
 5 files changed, 167 insertions(+), 111 deletions(-)

diff --git a/packages/example-wormhole/src/features/home/index.tsx b/packages/example-wormhole/src/features/home/index.tsx
index 15f08e4..6b70d3b 100644
--- a/packages/example-wormhole/src/features/home/index.tsx
+++ b/packages/example-wormhole/src/features/home/index.tsx
@@ -14,6 +14,8 @@ route("/", {
             }
         })
 
+        const currentTime = time.use({}, { maxAge: 500 });
+
         return (
             <>
                 <DOMKeyboardActions />
@@ -22,7 +24,7 @@ route("/", {
                 </h1>
                 <p>
                     This is an example app, go to the{" "}
-                    <a href="/docs/tada">docs</a>
+                    <a href="/docs/tada">docs</a>, current time is {currentTime}
                 </p>
                 <button on:click={async () => {
                     console.log(await add({
@@ -73,3 +75,10 @@ export const add = query("/api/add", {
         return a + b;
     }
 })
+
+export const time = query("/api/time", {
+    impl() {
+        return new Date().toISOString();
+    },
+    schema: v.object({})
+});
diff --git a/packages/vortex-core/src/query/hook.ts b/packages/vortex-core/src/query/hook.ts
index 003f34d..b11172e 100644
--- a/packages/vortex-core/src/query/hook.ts
+++ b/packages/vortex-core/src/query/hook.ts
@@ -3,10 +3,12 @@ import type { QuerySchema } from "./schema";
 import { useHookLifetime } from "~/lifetime";
 import type { Signal } from "~/signal";
 
+export interface QueryProps { maxAge?: number }
+
 export function useQuery<Args, Result>(
     schema: QuerySchema<Args, Result>,
     args: Args,
-    props?: { maxAge?: number },
+    props?: QueryProps,
 ): Signal<Result | undefined> {
     const contextScope = useContextScope();
     const lt = useHookLifetime();
diff --git a/packages/vortex-core/src/query/index.ts b/packages/vortex-core/src/query/index.ts
index 3aa3228..6d67f88 100644
--- a/packages/vortex-core/src/query/index.ts
+++ b/packages/vortex-core/src/query/index.ts
@@ -1,2 +1,3 @@
 export * from "./data-engine";
 export * from "./hook";
+export * from "./schema";
diff --git a/packages/wormhole/src/runtime/api.ts b/packages/wormhole/src/runtime/api.ts
index d9b0d5e..104c860 100644
--- a/packages/wormhole/src/runtime/api.ts
+++ b/packages/wormhole/src/runtime/api.ts
@@ -1,122 +1,153 @@
 import { SKL, unwrap } from "@vortexjs/common";
+import { querySchema, useQuery, type QueryProps, type Signal } from "@vortexjs/core";
 import { matchPath, type InputRoute, type RoutePath } from "~/build/router";
 import type { HTTPMethod } from "~/shared/http-method";
 import type { StandardSchemaV1 } from "~/shared/standard";
 
 interface BaseAPIProps<Input, Output> {
-	schema: StandardSchemaV1<unknown, Input>;
-	endpoint: string;
-	isQuery: boolean;
-	method: HTTPMethod;
+    schema: StandardSchemaV1<unknown, Input>;
+    endpoint: string;
+    isQuery: boolean;
+    method: HTTPMethod;
 }
 
 interface ClientAPIProps<Input, Output> extends BaseAPIProps<Input, Output> {
 }
 
 interface ServerAPIProps<Input, Output> extends BaseAPIProps<Input, Output> {
-	impl(inp: Input): Promise<Output> | Output;
+    impl(inp: Input): Promise<Output> | Output;
 }
 
-export function INTERNAL_client_api<Input, Output>(props: ClientAPIProps<Input, Output>): (inp: Input) => Promise<Output> {
-	// TODO: Add proper query support once Core Query drops
-	return async (inp) => {
-		// Let's sanity check what we're giving the server for more rapid errors
-		const schema = props.schema["~standard"];
-		const result = await schema.validate(inp);
-
-		if (!("value" in result)) {
-			throw new Error([
-				`API Function call failed on client.`,
-				"",
-				"Why: The data provided didn't match the schema, and we know the server won't allow this anyways",
-				`When: When calling ${props.endpoint}`
-			].join("\n"))
-		}
-
-		const cleanInput = result.value;
-
-		const isGet = props.method === "GET";
-
-		const url = new URL(props.endpoint, window.location.href);
-
-		if (isGet) {
-			url.searchParams.set(
-				"props",
-				SKL.stringify(cleanInput, { minified: true })
-			);
-		}
-
-		const response = await fetch(url.toString(), {
-			method: props.method,
-			body: isGet ? null : SKL.stringify(cleanInput, { minified: true })
-		})
-
-		return SKL.parse(await response.text()) as Output;
-	}
+export function INTERNAL_client_api<Input, Output>(props: ClientAPIProps<Input, Output>): ((inp: Input) => Promise<Output>) & ({
+    use(args: Input, props: QueryProps): Signal<Output | undefined>;
+} | {}) {
+    // TODO: Add proper query support once Core Query drops
+    const result = async (inp: Input) => {
+        // Let's sanity check what we're giving the server for more rapid errors
+        const schema = props.schema["~standard"];
+        const result = await schema.validate(inp);
+
+        if (!("value" in result)) {
+            throw new Error([
+                `API Function call failed on client.`,
+                "",
+                "Why: The data provided didn't match the schema, and we know the server won't allow this anyways",
+                `When: When calling ${props.endpoint}`
+            ].join("\n"))
+        }
+
+        const cleanInput = result.value;
+
+        const isGet = props.method === "GET";
+
+        const url = new URL(props.endpoint, window.location.href);
+
+        if (isGet) {
+            url.searchParams.set(
+                "props",
+                SKL.stringify(cleanInput, { minified: true })
+            );
+        }
+
+        const response = await fetch(url.toString(), {
+            method: props.method,
+            body: isGet ? null : SKL.stringify(cleanInput, { minified: true })
+        })
+
+        return SKL.parse(await response.text()) as Output;
+    }
+
+    if (props.isQuery) {
+        const qschema = querySchema({
+            id: `wormhole/${props.endpoint}:${props.method}`,
+            impl: result,
+        });
+
+        (result as any).use = (args: Input, props: QueryProps) => {
+            return useQuery(qschema, args, props);
+        }
+    }
+
+    return result;
 }
 
-export function INTERNAL_server_api<Input, Output>(props: ServerAPIProps<Input, Output>): (inp: Input) => Promise<Output> {
-	return async function (inp) {
-		return await props.impl(inp);
-	}
+export function INTERNAL_server_api<Input, Output>(props: ServerAPIProps<Input, Output>): ((inp: Input) => Promise<Output>) & ({
+    use(args: Input, props: QueryProps): Signal<Output | undefined>;
+} | {}) {
+    const result = async function (inp: Input) {
+        return await props.impl(inp);
+    }
+
+    if (props.isQuery) {
+        const qschema = querySchema({
+            id: `wormhole/${props.endpoint}:${props.method}`,
+            impl: result,
+        });
+
+        (result as any).use = (args: Input, props: QueryProps) => {
+            return useQuery(qschema, args, props);
+        }
+    }
+
+    return result;
 }
 
 export async function INTERNAL_tryHandleAPI(
-	request: Request,
-	apis: {
-		matcher: RoutePath;
-		impl: number;
-		schema: number;
-		method: HTTPMethod;
-	}[],
-	reexporters: (() => Promise<any>)[]
+    request: Request,
+    apis: {
+        matcher: RoutePath;
+        impl: number;
+        schema: number;
+        method: HTTPMethod;
+    }[],
+    reexporters: (() => Promise<any>)[]
 ): Promise<Response | undefined> {
-	const pathname = new URL(request.url).pathname;
-	for (const api of apis) {
-		if (!matchPath(api.matcher, pathname).matched) continue;
-		if (api.method !== request.method) continue;
-
-		const schemaPromise = unwrap(reexporters[api.schema])();
-		const implPromise = unwrap(reexporters[api.impl])();
-
-		const input = request.method === "GET"
-			? new URL(request.url).searchParams.get("props") ?? ""
-			: await request.text();
-
-		let skl: unknown;
-
-		try {
-			skl = SKL.parse(input);
-		} catch {
-			return new Response([
-				"Your API request failed.",
-				"Why: The request body is not valid SKL"
-			].join("\n"), {
-				status: 400,
-				statusText: "Invalid SKL"
-			});
-		}
-
-		const schema = (await schemaPromise) as StandardSchemaV1<any, any>;
-
-		const validation = await schema["~standard"].validate(skl);
-
-		if ("issues" in validation) {
-			return new Response([
-				"Your API request failed.",
-				"Why: The request body did not match the expected schema"
-			].join("\n"), {
-				status: 400,
-				statusText: "Failed to match against schema"
-			})
-		}
-
-		const value = validation.value;
-
-		const impl = await implPromise;
-
-		const result = await impl(value);
-
-		return new Response(SKL.stringify(result));
-	}
+    const pathname = new URL(request.url).pathname;
+    for (const api of apis) {
+        if (!matchPath(api.matcher, pathname).matched) continue;
+        if (api.method !== request.method) continue;
+
+        const schemaPromise = unwrap(reexporters[api.schema])();
+        const implPromise = unwrap(reexporters[api.impl])();
+
+        const input = request.method === "GET"
+            ? new URL(request.url).searchParams.get("props") ?? ""
+            : await request.text();
+
+        let skl: unknown;
+
+        try {
+            skl = SKL.parse(input);
+        } catch {
+            return new Response([
+                "Your API request failed.",
+                "Why: The request body is not valid SKL"
+            ].join("\n"), {
+                status: 400,
+                statusText: "Invalid SKL"
+            });
+        }
+
+        const schema = (await schemaPromise) as StandardSchemaV1<any, any>;
+
+        const validation = await schema["~standard"].validate(skl);
+
+        if ("issues" in validation) {
+            return new Response([
+                "Your API request failed.",
+                "Why: The request body did not match the expected schema"
+            ].join("\n"), {
+                status: 400,
+                statusText: "Failed to match against schema"
+            })
+        }
+
+        const value = validation.value;
+
+        const impl = await implPromise;
+
+        const result = await impl(value);
+
+        return new Response(SKL.stringify(result));
+    }
 }
diff --git a/packages/wormhole/src/virt/route.ts b/packages/wormhole/src/virt/route.ts
index eb67910..4fb9990 100644
--- a/packages/wormhole/src/virt/route.ts
+++ b/packages/wormhole/src/virt/route.ts
@@ -1,4 +1,4 @@
-import type { JSXChildren } from "@vortexjs/core";
+import type { JSXChildren, QueryProps, Signal } from "@vortexjs/core";
 import type { StandardSchemaV1 } from "~/shared/standard";
 import type { HTTPMethod } from "~/shared/http-method";
 
@@ -13,7 +13,18 @@ export type RouteParams<Path extends string> = {
     notFound?: (props: LayoutProps<Path>) => void;
 };
 
-export type APIFunction = <Input, Output>(
+export type APIQueryFunction = <Input, Output>(
+    endpoint: string,
+    props: {
+        schema: StandardSchemaV1<unknown, Input>;
+        impl(props: Input): Promise<Output> | Output;
+        method?: HTTPMethod;
+    }
+) => ((inp: Input) => Promise<Output>) & {
+    use(args: Input, props: QueryProps): Signal<Output | undefined>;
+};
+
+export type APIMutationFunction = <Input, Output>(
     endpoint: string,
     props: {
         schema: StandardSchemaV1<unknown, Input>;
@@ -47,11 +58,13 @@ const routeFn = ((_path, _params) => {
 export default routeFn;
 export const route = routeFn;
 
-const apiFn = ((_props) => {
+export const query = ((_props) => {
     throw new Error(
-        "You somehow managed to call query/mutation without it being eliminated by the compiler. I don't know how you would fix this, the compiler is deeply ingrained in wormhole.",
+        "You somehow managed to call query without it being eliminated by the compiler. I don't know how you would fix this, the compiler is deeply ingrained in wormhole.",
     );
-}) as APIFunction;
-
-export const query = apiFn;
-export const mutation = apiFn;
+}) as APIQueryFunction;
+export const mutation = ((_props) => {
+    throw new Error(
+        "You somehow managed to call mutation without it being eliminated by the compiler. I don't know how you would fix this, the compiler is deeply ingrained in wormhole.",
+    );
+}) as APIMutationFunction;

From aff8a783d8f1d93e28825ebd949636a8c53dd914 Mon Sep 17 00:00:00 2001
From: andylovescode <andytk2010@gmail.com>
Date: Sun, 24 Aug 2025 16:53:34 -0700
Subject: [PATCH 3/4] Wormhole: Fix random SSR errors

---
 packages/discovery/src/builders.ts      | 263 +++++++++++++-----------
 packages/discovery/src/transpile/api.ts |   6 +-
 packages/wormhole/src/runtime/api.ts    |   4 +-
 3 files changed, 143 insertions(+), 130 deletions(-)

diff --git a/packages/discovery/src/builders.ts b/packages/discovery/src/builders.ts
index 3dfe182..664421c 100644
--- a/packages/discovery/src/builders.ts
+++ b/packages/discovery/src/builders.ts
@@ -1,165 +1,180 @@
 import type {
-	Argument,
-	CallExpression,
-	Expression,
-	LabelIdentifier,
-	ModuleDeclaration,
-	NullLiteral,
-	ParamPattern,
-	Span,
-	Statement,
-	StringLiteral,
-	ThrowStatement,
+    Argument,
+    CallExpression,
+    Expression,
+    LabelIdentifier,
+    ModuleDeclaration,
+    NullLiteral,
+    ParamPattern,
+    Span,
+    Statement,
+    StringLiteral,
+    ThrowStatement,
 } from "oxc-parser";
 import type { CompilerState } from "./compiler";
 
 export const defaultSpan: Span = {} as unknown as Span;
 
 export function literal<T>(value: T, span = defaultSpan): StringLiteral {
-	return {
-		type: "Literal",
-		value,
-		...span,
-	} as unknown as StringLiteral;
+    return {
+        type: "Literal",
+        value,
+        ...span,
+    } as unknown as StringLiteral;
 }
 
 export function exportNode(state: CompilerState, node: Expression): string {
-	const transformer = state.transformer;
-	const id = transformer.getExportId(node);
+    const transformer = state.transformer;
+    const id = transformer.getExportId(node);
 
-	const decl: ModuleDeclaration = {
-		type: "ExportNamedDeclaration",
-		declaration: {
-			type: "VariableDeclaration",
-			kind: "const",
-			declarations: [
-				{
-					type: "VariableDeclarator",
-					id: {
-						type: "Identifier",
-						name: id,
-						...defaultSpan,
-					},
-					init: node,
-					...defaultSpan,
-				},
-			],
-			...defaultSpan,
-		},
-		specifiers: [],
-		source: null,
-		attributes: [],
-		...defaultSpan,
-	};
+    const decl: ModuleDeclaration = {
+        type: "ExportNamedDeclaration",
+        declaration: {
+            type: "VariableDeclaration",
+            kind: "const",
+            declarations: [
+                {
+                    type: "VariableDeclarator",
+                    id: {
+                        type: "Identifier",
+                        name: id,
+                        ...defaultSpan,
+                    },
+                    init: node,
+                    ...defaultSpan,
+                },
+            ],
+            ...defaultSpan,
+        },
+        specifiers: [],
+        source: null,
+        attributes: [],
+        ...defaultSpan,
+    };
 
-	transformer.addDeclaration(decl);
+    transformer.addDeclaration(decl);
 
-	return id;
+    return id;
 }
 
 export function identifier(name: string): LabelIdentifier {
-	return {
-		type: "Identifier",
-		name,
-		...defaultSpan,
-	};
+    return {
+        type: "Identifier",
+        name,
+        ...defaultSpan,
+    };
 }
 
 export function importDeclaration(
-	module: string,
-	name: string,
-	local: string,
+    module: string,
+    name: string,
+    local: string,
 ): ModuleDeclaration {
-	return {
-		type: "ImportDeclaration",
-		specifiers: [
-			{
-				type: "ImportSpecifier",
-				imported: identifier(name),
-				local: identifier(local),
-				...defaultSpan,
-			},
-		],
-		source: literal(module),
-		phase: null,
-		importKind: "value",
-		attributes: [],
-		...defaultSpan,
-	};
+    return {
+        type: "ImportDeclaration",
+        specifiers: [
+            {
+                type: "ImportSpecifier",
+                imported: identifier(name),
+                local: identifier(local),
+                ...defaultSpan,
+            },
+        ],
+        source: literal(module),
+        phase: null,
+        importKind: "value",
+        attributes: [],
+        ...defaultSpan,
+    };
 }
 
 export function createObject(
-	properties: Record<string, Expression>,
-	span = defaultSpan,
+    properties: Record<string, Expression>,
+    span = defaultSpan,
 ): Expression & Span {
-	return {
-		type: "ObjectExpression",
-		properties: Object.entries(properties).map(([key, value]) => ({
-			type: "Property",
-			key: identifier(key),
-			value,
-			kind: "init",
-			computed: false,
-			method: false,
-			shorthand: false,
-			...defaultSpan,
-		})),
-		...span,
-	};
+    return {
+        type: "ObjectExpression",
+        properties: Object.entries(properties).map(([key, value]) => ({
+            type: "Property",
+            key: identifier(key),
+            value,
+            kind: "init",
+            computed: false,
+            method: false,
+            shorthand: false,
+            ...defaultSpan,
+        })),
+        ...span,
+    };
 }
 
 export function paren(expr: Expression): Expression {
-	return {
-		type: "ParenthesizedExpression",
-		expression: expr,
-		start: expr.start,
-		end: expr.end,
-	};
+    return {
+        type: "ParenthesizedExpression",
+        expression: expr,
+        start: expr.start,
+        end: expr.end,
+    };
 }
 
 export function anonFunct(props: {
-	arguments: ParamPattern[];
-	body: Statement[];
+    arguments: ParamPattern[];
+    body: Statement[];
 }) {
-	return paren({
-		type: "ArrowFunctionExpression",
-		params: props.arguments,
-		body: {
-			type: "BlockStatement",
-			body: props.body,
-			...defaultSpan,
-		},
-		expression: false,
-		async: false,
-		id: null,
-		generator: false,
-		...defaultSpan,
-	});
+    return paren({
+        type: "ArrowFunctionExpression",
+        params: props.arguments,
+        body: {
+            type: "BlockStatement",
+            body: props.body,
+            ...defaultSpan,
+        },
+        expression: false,
+        async: false,
+        id: null,
+        generator: false,
+        ...defaultSpan,
+    });
+}
+
+export function wrapExprInFunct(
+    expr: Expression,
+) {
+    return paren({
+        type: "ArrowFunctionExpression",
+        params: [],
+        body: expr,
+        expression: true,
+        async: false,
+        id: null,
+        generator: false,
+        ...defaultSpan,
+    });
 }
 
 export function throwStmt(toThrow: Expression): ThrowStatement {
-	return {
-		type: "ThrowStatement",
-		argument: toThrow,
-		...defaultSpan,
-	};
+    return {
+        type: "ThrowStatement",
+        argument: toThrow,
+        ...defaultSpan,
+    };
 }
 
 export function call(callee: Expression, args: Argument[]): CallExpression {
-	return {
-		type: "CallExpression",
-		callee,
-		arguments: args,
-		optional: false,
-		...defaultSpan,
-	};
+    return {
+        type: "CallExpression",
+        callee,
+        arguments: args,
+        optional: false,
+        ...defaultSpan,
+    };
 }
 
 export function nullLiteral(): NullLiteral {
-	return {
-		type: "Literal",
-		value: null,
-		raw: "null",
-		...defaultSpan,
-	};
+    return {
+        type: "Literal",
+        value: null,
+        raw: "null",
+        ...defaultSpan,
+    };
 }
diff --git a/packages/discovery/src/transpile/api.ts b/packages/discovery/src/transpile/api.ts
index 3f2ff69..56bcba4 100644
--- a/packages/discovery/src/transpile/api.ts
+++ b/packages/discovery/src/transpile/api.ts
@@ -1,6 +1,6 @@
 import { unwrap } from "@vortexjs/common";
 import type { CallExpression, Expression } from "oxc-parser";
-import { anonFunct, createObject, defaultSpan, exportNode, identifier, literal } from "../builders";
+import { anonFunct, createObject, defaultSpan, exportNode, identifier, literal, wrapExprInFunct } from "../builders";
 import {
     type CompilerState,
     getObjectKeys,
@@ -56,12 +56,10 @@ export function handleAPIFunction(
 
     if (state.target === "server") {
         const implExportId = exportNode(state, impl);
-        props.impl = identifier(implExportId);
+        props.impl = wrapExprInFunct(identifier(implExportId));
 
         const schemaExportId = exportNode(state, schema);
 
-        props.schema = identifier(schemaExportId);
-
         state.clientEligible = false;
         state.discoveries.push({
             type: "api",
diff --git a/packages/wormhole/src/runtime/api.ts b/packages/wormhole/src/runtime/api.ts
index 104c860..12c1f9b 100644
--- a/packages/wormhole/src/runtime/api.ts
+++ b/packages/wormhole/src/runtime/api.ts
@@ -15,7 +15,7 @@ interface ClientAPIProps<Input, Output> extends BaseAPIProps<Input, Output> {
 }
 
 interface ServerAPIProps<Input, Output> extends BaseAPIProps<Input, Output> {
-    impl(inp: Input): Promise<Output> | Output;
+    impl(): (inp: Input) => Promise<Output> | Output;
 }
 
 export function INTERNAL_client_api<Input, Output>(props: ClientAPIProps<Input, Output>): ((inp: Input) => Promise<Output>) & ({
@@ -75,7 +75,7 @@ export function INTERNAL_server_api<Input, Output>(props: ServerAPIProps<Input,
     use(args: Input, props: QueryProps): Signal<Output | undefined>;
 } | {}) {
     const result = async function (inp: Input) {
-        return await props.impl(inp);
+        return await props.impl()(inp);
     }
 
     if (props.isQuery) {

From 04c9a7e91d8ee50d5a192168b11c829db1feeeff Mon Sep 17 00:00:00 2001
From: andylovescode <andytk2010@gmail.com>
Date: Sun, 24 Aug 2025 19:28:50 -0700
Subject: [PATCH 4/4] Wormhole+Core: Improve query support

---
 packages/discovery/src/builders.ts            | 272 ++++----
 .../src/features/home/index.tsx               |   2 +-
 packages/vortex-common/src/time.ts            |  66 +-
 packages/vortex-core/src/context.ts           | 269 ++++----
 packages/vortex-core/src/query/data-engine.ts | 226 ++++---
 packages/vortex-core/src/query/schema.ts      |  26 +-
 packages/wormhole/src/build/adapters/dev.ts   |   9 +-
 .../wormhole/src/build/adapters/vercel.ts     | 589 +++++++++---------
 packages/wormhole/src/dev/dev-server.ts       | 288 +++++----
 packages/wormhole/src/runtime/api.ts          |   4 +-
 packages/wormhole/src/runtime/entrypoint.tsx  | 208 ++++---
 packages/wormhole/src/virt/route.ts           |   2 +-
 12 files changed, 1008 insertions(+), 953 deletions(-)

diff --git a/packages/discovery/src/builders.ts b/packages/discovery/src/builders.ts
index 664421c..95efc96 100644
--- a/packages/discovery/src/builders.ts
+++ b/packages/discovery/src/builders.ts
@@ -1,180 +1,178 @@
 import type {
-    Argument,
-    CallExpression,
-    Expression,
-    LabelIdentifier,
-    ModuleDeclaration,
-    NullLiteral,
-    ParamPattern,
-    Span,
-    Statement,
-    StringLiteral,
-    ThrowStatement,
+	Argument,
+	CallExpression,
+	Expression,
+	LabelIdentifier,
+	ModuleDeclaration,
+	NullLiteral,
+	ParamPattern,
+	Span,
+	Statement,
+	StringLiteral,
+	ThrowStatement,
 } from "oxc-parser";
 import type { CompilerState } from "./compiler";
 
 export const defaultSpan: Span = {} as unknown as Span;
 
 export function literal<T>(value: T, span = defaultSpan): StringLiteral {
-    return {
-        type: "Literal",
-        value,
-        ...span,
-    } as unknown as StringLiteral;
+	return {
+		type: "Literal",
+		value,
+		...span,
+	} as unknown as StringLiteral;
 }
 
 export function exportNode(state: CompilerState, node: Expression): string {
-    const transformer = state.transformer;
-    const id = transformer.getExportId(node);
+	const transformer = state.transformer;
+	const id = transformer.getExportId(node);
 
-    const decl: ModuleDeclaration = {
-        type: "ExportNamedDeclaration",
-        declaration: {
-            type: "VariableDeclaration",
-            kind: "const",
-            declarations: [
-                {
-                    type: "VariableDeclarator",
-                    id: {
-                        type: "Identifier",
-                        name: id,
-                        ...defaultSpan,
-                    },
-                    init: node,
-                    ...defaultSpan,
-                },
-            ],
-            ...defaultSpan,
-        },
-        specifiers: [],
-        source: null,
-        attributes: [],
-        ...defaultSpan,
-    };
+	const decl: ModuleDeclaration = {
+		type: "ExportNamedDeclaration",
+		declaration: {
+			type: "VariableDeclaration",
+			kind: "const",
+			declarations: [
+				{
+					type: "VariableDeclarator",
+					id: {
+						type: "Identifier",
+						name: id,
+						...defaultSpan,
+					},
+					init: node,
+					...defaultSpan,
+				},
+			],
+			...defaultSpan,
+		},
+		specifiers: [],
+		source: null,
+		attributes: [],
+		...defaultSpan,
+	};
 
-    transformer.addDeclaration(decl);
+	transformer.addDeclaration(decl);
 
-    return id;
+	return id;
 }
 
 export function identifier(name: string): LabelIdentifier {
-    return {
-        type: "Identifier",
-        name,
-        ...defaultSpan,
-    };
+	return {
+		type: "Identifier",
+		name,
+		...defaultSpan,
+	};
 }
 
 export function importDeclaration(
-    module: string,
-    name: string,
-    local: string,
+	module: string,
+	name: string,
+	local: string,
 ): ModuleDeclaration {
-    return {
-        type: "ImportDeclaration",
-        specifiers: [
-            {
-                type: "ImportSpecifier",
-                imported: identifier(name),
-                local: identifier(local),
-                ...defaultSpan,
-            },
-        ],
-        source: literal(module),
-        phase: null,
-        importKind: "value",
-        attributes: [],
-        ...defaultSpan,
-    };
+	return {
+		type: "ImportDeclaration",
+		specifiers: [
+			{
+				type: "ImportSpecifier",
+				imported: identifier(name),
+				local: identifier(local),
+				...defaultSpan,
+			},
+		],
+		source: literal(module),
+		phase: null,
+		importKind: "value",
+		attributes: [],
+		...defaultSpan,
+	};
 }
 
 export function createObject(
-    properties: Record<string, Expression>,
-    span = defaultSpan,
+	properties: Record<string, Expression>,
+	span = defaultSpan,
 ): Expression & Span {
-    return {
-        type: "ObjectExpression",
-        properties: Object.entries(properties).map(([key, value]) => ({
-            type: "Property",
-            key: identifier(key),
-            value,
-            kind: "init",
-            computed: false,
-            method: false,
-            shorthand: false,
-            ...defaultSpan,
-        })),
-        ...span,
-    };
+	return {
+		type: "ObjectExpression",
+		properties: Object.entries(properties).map(([key, value]) => ({
+			type: "Property",
+			key: identifier(key),
+			value,
+			kind: "init",
+			computed: false,
+			method: false,
+			shorthand: false,
+			...defaultSpan,
+		})),
+		...span,
+	};
 }
 
 export function paren(expr: Expression): Expression {
-    return {
-        type: "ParenthesizedExpression",
-        expression: expr,
-        start: expr.start,
-        end: expr.end,
-    };
+	return {
+		type: "ParenthesizedExpression",
+		expression: expr,
+		start: expr.start,
+		end: expr.end,
+	};
 }
 
 export function anonFunct(props: {
-    arguments: ParamPattern[];
-    body: Statement[];
+	arguments: ParamPattern[];
+	body: Statement[];
 }) {
-    return paren({
-        type: "ArrowFunctionExpression",
-        params: props.arguments,
-        body: {
-            type: "BlockStatement",
-            body: props.body,
-            ...defaultSpan,
-        },
-        expression: false,
-        async: false,
-        id: null,
-        generator: false,
-        ...defaultSpan,
-    });
+	return paren({
+		type: "ArrowFunctionExpression",
+		params: props.arguments,
+		body: {
+			type: "BlockStatement",
+			body: props.body,
+			...defaultSpan,
+		},
+		expression: false,
+		async: false,
+		id: null,
+		generator: false,
+		...defaultSpan,
+	});
 }
 
-export function wrapExprInFunct(
-    expr: Expression,
-) {
-    return paren({
-        type: "ArrowFunctionExpression",
-        params: [],
-        body: expr,
-        expression: true,
-        async: false,
-        id: null,
-        generator: false,
-        ...defaultSpan,
-    });
+export function wrapExprInFunct(expr: Expression) {
+	return paren({
+		type: "ArrowFunctionExpression",
+		params: [],
+		body: expr,
+		expression: true,
+		async: false,
+		id: null,
+		generator: false,
+		...defaultSpan,
+	});
 }
 
 export function throwStmt(toThrow: Expression): ThrowStatement {
-    return {
-        type: "ThrowStatement",
-        argument: toThrow,
-        ...defaultSpan,
-    };
+	return {
+		type: "ThrowStatement",
+		argument: toThrow,
+		...defaultSpan,
+	};
 }
 
 export function call(callee: Expression, args: Argument[]): CallExpression {
-    return {
-        type: "CallExpression",
-        callee,
-        arguments: args,
-        optional: false,
-        ...defaultSpan,
-    };
+	return {
+		type: "CallExpression",
+		callee,
+		arguments: args,
+		optional: false,
+		...defaultSpan,
+	};
 }
 
 export function nullLiteral(): NullLiteral {
-    return {
-        type: "Literal",
-        value: null,
-        raw: "null",
-        ...defaultSpan,
-    };
+	return {
+		type: "Literal",
+		value: null,
+		raw: "null",
+		...defaultSpan,
+	};
 }
diff --git a/packages/example-wormhole/src/features/home/index.tsx b/packages/example-wormhole/src/features/home/index.tsx
index 6b70d3b..d51da56 100644
--- a/packages/example-wormhole/src/features/home/index.tsx
+++ b/packages/example-wormhole/src/features/home/index.tsx
@@ -14,7 +14,7 @@ route("/", {
             }
         })
 
-        const currentTime = time.use({}, { maxAge: 500 });
+        const currentTime = time.use({});
 
         return (
             <>
diff --git a/packages/vortex-common/src/time.ts b/packages/vortex-common/src/time.ts
index fdb0e37..de27729 100644
--- a/packages/vortex-common/src/time.ts
+++ b/packages/vortex-common/src/time.ts
@@ -1,11 +1,11 @@
 const timeUnits = {
-    s: 1000,
-    ms: 1,
-    m: 60 * 1000,
-    h: 60 * 60 * 1000,
-    d: 24 * 60 * 60 * 1000,
-    w: 7 * 24 * 60 * 60 * 1000,
-    y: 365 * 24 * 60 * 60 * 1000,
+	s: 1000,
+	ms: 1,
+	m: 60 * 1000,
+	h: 60 * 60 * 1000,
+	d: 24 * 60 * 60 * 1000,
+	w: 7 * 24 * 60 * 60 * 1000,
+	y: 365 * 24 * 60 * 60 * 1000,
 } as const;
 
 type TimeUnit = keyof typeof timeUnits;
@@ -13,30 +13,30 @@ type TimeUnit = keyof typeof timeUnits;
 export type TimeSpec = `${number}${TimeUnit}`;
 
 export function time(time: TimeSpec): { ms: number } {
-    let numberPortion = "";
-    let unitPortion = "";
-
-    for (const char of time) {
-        if (char >= "0" && char <= "9") {
-            if (unitPortion.length > 0) {
-                throw new Error(`Invalid time spec: ${time}`);
-            }
-            numberPortion += char;
-        } else {
-            unitPortion += char;
-        }
-    }
-
-    if (numberPortion.length === 0 || unitPortion.length === 0) {
-        throw new Error(`Invalid time spec: ${time}`);
-    }
-
-    const numberValue = Number.parseInt(numberPortion, 10);
-    const unitValue = timeUnits[unitPortion as TimeUnit];
-
-    if (Number.isNaN(numberValue) || unitValue === undefined) {
-        throw new Error(`Invalid time spec: ${time}`);
-    }
-
-    return { ms: numberValue * unitValue };
+	let numberPortion = "";
+	let unitPortion = "";
+
+	for (const char of time) {
+		if (char >= "0" && char <= "9") {
+			if (unitPortion.length > 0) {
+				throw new Error(`Invalid time spec: ${time}`);
+			}
+			numberPortion += char;
+		} else {
+			unitPortion += char;
+		}
+	}
+
+	if (numberPortion.length === 0 || unitPortion.length === 0) {
+		throw new Error(`Invalid time spec: ${time}`);
+	}
+
+	const numberValue = Number.parseInt(numberPortion, 10);
+	const unitValue = timeUnits[unitPortion as TimeUnit];
+
+	if (Number.isNaN(numberValue) || unitValue === undefined) {
+		throw new Error(`Invalid time spec: ${time}`);
+	}
+
+	return { ms: numberValue * unitValue };
 }
diff --git a/packages/vortex-core/src/context.ts b/packages/vortex-core/src/context.ts
index 609821f..3dd2256 100644
--- a/packages/vortex-core/src/context.ts
+++ b/packages/vortex-core/src/context.ts
@@ -6,159 +6,160 @@ import { clearImmediate, setImmediate } from "./setImmediate.polyfill";
 import { type Signal, type SignalOrValue, toSignal } from "./signal";
 
 export interface Context<T> {
-    (props: { value: SignalOrValue<T>; children: JSXNode }): JSXNode;
-    use(): Signal<T>;
-    useOptional(): Signal<T> | undefined;
+	(props: { value: SignalOrValue<T>; children: JSXNode }): JSXNode;
+	use(): Signal<T>;
+	useOptional(): Signal<T> | undefined;
 }
 
 export function createContext<T>(name = "Unnamed"): Context<T> {
-    const id = crypto.randomUUID();
-
-    const result = (props: {
-        value: SignalOrValue<T>;
-        children: JSXNode;
-    }): JSXNode => {
-        return {
-            type: "context",
-            id,
-            value: toSignal(props.value),
-            children: props.children,
-        };
-    };
-
-    result.use = () => {
-        return unwrap(
-            useContextScope().contexts[id],
-            `Context "${name}" not found, you may have forgotten to wrap your component in the context provider.`,
-        );
-    };
-
-    result.useOptional = () => {
-        return useContextScope().contexts[id];
-    };
-
-    return result;
+	const id = crypto.randomUUID();
+
+	const result = (props: {
+		value: SignalOrValue<T>;
+		children: JSXNode;
+	}): JSXNode => {
+		return {
+			type: "context",
+			id,
+			value: toSignal(props.value),
+			children: props.children,
+		};
+	};
+
+	result.use = () => {
+		return unwrap(
+			useContextScope().contexts[id],
+			`Context "${name}" not found, you may have forgotten to wrap your component in the context provider.`,
+		);
+	};
+
+	result.useOptional = () => {
+		return useContextScope().contexts[id];
+	};
+
+	return result;
 }
 
 export class StreamingContext {
-    private updateCallbackImmediate = 0;
-    private updateCallbacks = new Set<() => void>();
-    private loadingCounter = 0;
-    private onDoneLoadingCallback = () => { };
-    onDoneLoading: Promise<void>;
-
-    constructor() {
-        this.onDoneLoading = new Promise((resolve) => {
-            this.onDoneLoadingCallback = resolve;
-        });
-    }
-
-    onUpdate(callback: () => void): () => void {
-        this.updateCallbacks.add(callback);
-
-        return () => {
-            this.updateCallbacks.delete(callback);
-        };
-    }
-
-    markLoading() {
-        const self = this;
-
-        this.loadingCounter++;
-
-        return {
-            [Symbol.dispose]() {
-                self.loadingCounter--;
-                self.updated();
-            },
-        };
-    }
-
-    updated() {
-        if (this.updateCallbackImmediate) {
-            clearImmediate(this.updateCallbackImmediate);
-        }
-
-        // biome-ignore lint/complexity/noUselessThisAlias: without it, shit breaks
-        const self = this;
-
-        this.updateCallbackImmediate = setImmediate(() => {
-            self.updateCallbackImmediate = 0;
-
-            for (const callback of self.updateCallbacks) {
-                callback();
-            }
-
-            if (self.loadingCounter === 0) {
-                self.onDoneLoadingCallback();
-            }
-        }) as unknown as number;
-    }
+	private updateCallbackImmediate = 0;
+	private updateCallbacks = new Set<() => void>();
+	private loadingCounter = 0;
+	private onDoneLoadingCallback = () => {};
+	onDoneLoading: Promise<void>;
+
+	constructor() {
+		this.onDoneLoading = new Promise((resolve) => {
+			this.onDoneLoadingCallback = resolve;
+		});
+	}
+
+	onUpdate(callback: () => void): () => void {
+		this.updateCallbacks.add(callback);
+
+		return () => {
+			this.updateCallbacks.delete(callback);
+		};
+	}
+
+	markLoading() {
+		const self = this;
+
+		this.loadingCounter++;
+
+		return {
+			[Symbol.dispose]() {
+				self.loadingCounter--;
+				self.updated();
+			},
+		};
+	}
+
+	updated() {
+		if (this.updateCallbackImmediate) {
+			clearImmediate(this.updateCallbackImmediate);
+		}
+
+		// biome-ignore lint/complexity/noUselessThisAlias: without it, shit breaks
+		const self = this;
+
+		this.updateCallbackImmediate = setImmediate(() => {
+			self.updateCallbackImmediate = 0;
+
+			for (const callback of self.updateCallbacks) {
+				callback();
+			}
+
+			if (self.loadingCounter === 0) {
+				self.onDoneLoadingCallback();
+			}
+		}) as unknown as number;
+	}
 }
 
 export class ContextScope {
-    contexts: Record<string, Signal<any>> = {};
-    streaming: StreamingContext = new StreamingContext();
-    query: QueryDataEngine;
-    lt: Lifetime;
-
-    constructor(lt: Lifetime) {
-        this.query = new QueryDataEngine({ streaming: this.streaming, lt });
-        this.lt = lt;
-    }
-
-    fork() {
-        const newScope = new ContextScope(this.lt);
-        newScope.contexts = { ...this.contexts };
-        newScope.streaming = this.streaming;
-        return newScope;
-    }
-
-    addContext<T>(id: string, value: Signal<T>): void {
-        this.contexts[id] = value;
-    }
-
-    static current: ContextScope | null = null;
-
-    static setCurrent(scope: ContextScope | null) {
-        const previous = ContextScope.current;
-
-        ContextScope.current = scope;
-
-        return {
-            [Symbol.dispose]() {
-                ContextScope.current = previous;
-            },
-        };
-    }
+	contexts: Record<string, Signal<any>> = {};
+	streaming: StreamingContext = new StreamingContext();
+	query: QueryDataEngine;
+	lt: Lifetime;
+
+	constructor(lt: Lifetime) {
+		this.query = new QueryDataEngine({ streaming: this.streaming, lt });
+		this.lt = lt;
+	}
+
+	fork() {
+		const newScope = new ContextScope(this.lt);
+		newScope.contexts = { ...this.contexts };
+		newScope.streaming = this.streaming;
+		newScope.query = this.query;
+		return newScope;
+	}
+
+	addContext<T>(id: string, value: Signal<T>): void {
+		this.contexts[id] = value;
+	}
+
+	static current: ContextScope | null = null;
+
+	static setCurrent(scope: ContextScope | null) {
+		const previous = ContextScope.current;
+
+		ContextScope.current = scope;
+
+		return {
+			[Symbol.dispose]() {
+				ContextScope.current = previous;
+			},
+		};
+	}
 }
 
 export function useContextScope(): ContextScope {
-    const scope = ContextScope.current;
-    if (!scope) {
-        throw new Error(
-            "No context scope found, you should have one if you're rendering a component.",
-        );
-    }
-    return scope;
+	const scope = ContextScope.current;
+	if (!scope) {
+		throw new Error(
+			"No context scope found, you should have one if you're rendering a component.",
+		);
+	}
+	return scope;
 }
 
 export function useStreaming(): StreamingContext {
-    return useContextScope().streaming;
+	return useContextScope().streaming;
 }
 
 export function useOptionalContextScope(): ContextScope | null {
-    const scope = ContextScope.current;
-    if (!scope) {
-        return null;
-    }
-    return scope;
+	const scope = ContextScope.current;
+	if (!scope) {
+		return null;
+	}
+	return scope;
 }
 
 export function useOptionalStreaming(): StreamingContext | null {
-    const scope = useOptionalContextScope();
-    if (!scope) {
-        return null;
-    }
-    return scope.streaming;
+	const scope = useOptionalContextScope();
+	if (!scope) {
+		return null;
+	}
+	return scope.streaming;
 }
diff --git a/packages/vortex-core/src/query/data-engine.ts b/packages/vortex-core/src/query/data-engine.ts
index 5cd8145..09baa78 100644
--- a/packages/vortex-core/src/query/data-engine.ts
+++ b/packages/vortex-core/src/query/data-engine.ts
@@ -1,115 +1,137 @@
-import { useState, type Store } from "~/signal";
+import { getImmediateValue, useState, type Store } from "~/signal";
 import type { QuerySchema } from "./schema";
 import { time } from "@vortexjs/common";
 import type { StreamingContext } from "~/context";
 import type { Lifetime } from "~/lifetime";
 
 export class QueryObservation<Args, Result> {
-    maxAge: number;
-    query: Query<Args, Result>;
-
-    constructor(
-        props: {
-            query: Query<Args, Result>;
-            maxAge?: number;
-        }
-    ) {
-        this.query = props.query;
-        this.maxAge = props.maxAge ?? time("5m").ms;
-    }
+	maxAge: number;
+	query: Query<Args, Result>;
+
+	constructor(
+		props: {
+			query: Query<Args, Result>;
+			maxAge?: number;
+		}
+	) {
+		this.query = props.query;
+		this.maxAge = props.maxAge ?? time("5m").ms;
+	}
 }
 
+export type QuerySupplement = Record<string, any>;
+
 export class Query<Args, Result> {
-    schema: QuerySchema<Args, Result>;
-    args: Args;
-    data: Store<Result | undefined> = useState(undefined);
-    isLoading: boolean;
-    updatedAt: number;
-    streaming: StreamingContext;
-
-    constructor(props: { schema: QuerySchema<Args, Result>; args: Args, streaming: StreamingContext }) {
-        this.schema = props.schema;
-        this.args = props.args;
-        this.isLoading = false;
-        this.updatedAt = 0;
-        this.streaming = props.streaming;
-    }
-
-    async update() {
-        if (this.isLoading) return;
-
-        using _data = this.streaming.markLoading();
-
-        this.isLoading = true;
-
-        try {
-            const result = await this.schema.impl(this.args);
-            this.data.set(result);
-            this.updatedAt = Date.now();
-        } catch (e) {
-            console.error("Error fetching query:", e);
-        } finally {
-            this.isLoading = false;
-        }
-    }
+	schema: QuerySchema<Args, Result>;
+	args: Args;
+	data: Store<Result | undefined> = useState(undefined);
+	isLoading: boolean;
+	updatedAt: number;
+	dataEngine: QueryDataEngine;
+
+	constructor(props: { schema: QuerySchema<Args, Result>; args: Args, dataEngine: QueryDataEngine }) {
+		this.schema = props.schema;
+		this.args = props.args;
+		this.isLoading = false;
+		this.updatedAt = 0;
+		this.dataEngine = props.dataEngine;
+	}
+
+	async update() {
+		if (this.isLoading) return;
+
+		using _data = this.dataEngine.streaming.markLoading();
+
+		this.isLoading = true;
+
+		try {
+			const result = await this.schema.impl(this.args);
+			this.data.set(result);
+			this.updatedAt = Date.now();
+			console.log(`[${this.dataEngine.id}]: Query updated:`, this.schema.getKey(this.args), result);
+		} catch (e) {
+			console.error("Error fetching query:", e);
+		} finally {
+			this.isLoading = false;
+		}
+	}
 }
 
 export class QueryDataEngine {
-    observations: QueryObservation<any, any>[] = [];
-    queries = new Map<string, Query<any, any>>();
-    streaming: StreamingContext;
-
-    constructor({ streaming, lt }: {
-        streaming: StreamingContext,
-        lt: Lifetime
-    }) {
-        this.streaming = streaming;
-        const int = setInterval(() => this.tick(), 1000);
-        lt.onClosed(() => clearInterval(int));
-    }
-
-    tick() {
-        const now = Date.now();
-
-        for (const obs of this.observations) {
-            if (now - obs.query.updatedAt > obs.maxAge) {
-                obs.query.update();
-            }
-        }
-    }
-
-    createObservation<Args, Result>(
-        props: {
-            maxAge?: number;
-            schema: QuerySchema<Args, Result>;
-            args: Args;
-            lt: Lifetime;
-        }
-    ): QueryObservation<Args, Result> {
-        const key = props.schema.getKey(props.args);
-
-        // Create query if it doesn't exist
-        let query = this.queries.get(key);
-
-        if (!query) {
-            query = new Query<Args, Result>({ schema: props.schema, args: props.args, streaming: this.streaming });
-            this.queries.set(key, query);
-            query.update();
-        }
-
-        const observation = new QueryObservation<Args, Result>({
-            query,
-            maxAge: props.maxAge
-        });
-        this.observations.push(observation);
-
-        props.lt.onClosed(() => {
-            const index = this.observations.indexOf(observation);
-            if (index !== -1) {
-                this.observations.splice(index, 1);
-            }
-        });
-
-        return observation;
-    }
+	observations: QueryObservation<any, any>[] = [];
+	queries = new Map<string, Query<any, any>>();
+	streaming: StreamingContext;
+	hydrationSupplement: QuerySupplement = {};
+	id = crypto.randomUUID();
+
+	constructor({ streaming, lt }: {
+		streaming: StreamingContext,
+		lt: Lifetime
+	}) {
+		this.streaming = streaming;
+		const int = setInterval(() => this.tick(), 1000);
+		lt.onClosed(() => clearInterval(int));
+	}
+
+	getSupplement(): QuerySupplement {
+		console.log(`[${this.id}]: I have ${this.queries.size} queries`);
+		const supplement: QuerySupplement = {};
+		for (const [key, query] of this.queries) {
+			const data = getImmediateValue(query.data);
+			console.log(`[${this.id}]: Gathering supplement data for ${key}`, data);
+			if (data === undefined) continue;
+			supplement[key] = data;
+		}
+		return supplement;
+	}
+
+	tick() {
+		const now = Date.now();
+
+		for (const obs of this.observations) {
+			if (now - obs.query.updatedAt > obs.maxAge) {
+				obs.query.update();
+			}
+		}
+	}
+
+	createObservation<Args, Result>(
+		props: {
+			maxAge?: number;
+			schema: QuerySchema<Args, Result>;
+			args: Args;
+			lt: Lifetime;
+		}
+	): QueryObservation<Args, Result> {
+		const key = props.schema.getKey(props.args);
+
+		// Create query if it doesn't exist
+		let query = this.queries.get(key);
+
+		if (!query) {
+			query = new Query<Args, Result>({ schema: props.schema, args: props.args, dataEngine: this });
+			this.queries.set(key, query);
+			if (key in this.hydrationSupplement) {
+				query.data.set(this.hydrationSupplement[key]);
+				query.updatedAt = Date.now();
+			} else {
+				query.update();
+			}
+		}
+
+		const observation = new QueryObservation<Args, Result>({
+			query,
+			maxAge: props.maxAge
+		});
+		this.observations.push(observation);
+
+		props.lt.onClosed(() => {
+			const index = this.observations.indexOf(observation);
+			if (index !== -1) {
+				this.observations.splice(index, 1);
+			}
+		});
+
+		return observation;
+	}
 }
diff --git a/packages/vortex-core/src/query/schema.ts b/packages/vortex-core/src/query/schema.ts
index fe5dd2c..dbaa7fb 100644
--- a/packages/vortex-core/src/query/schema.ts
+++ b/packages/vortex-core/src/query/schema.ts
@@ -1,16 +1,22 @@
+import { hash } from "@vortexjs/common";
+
 export interface QuerySchema<Args, Result> {
-    id: string;
-    impl(args: Args): Promise<Result> | Result;
-    getKey(args: Args): string;
+	id: string;
+	impl(args: Args): Promise<Result> | Result;
+	getKey(args: Args): string;
 }
 
 export function querySchema<Args, Result>({ id, impl }: {
-    id: string;
-    impl(args: Args): Promise<Result> | Result;
+	id: string;
+	impl(args: Args): Promise<Result> | Result;
 }): QuerySchema<Args, Result> {
-    return {
-        id, impl, getKey(args) {
-            return `${id}::${JSON.stringify(args)}`
-        }
-    };
+	return {
+		id,
+		impl,
+		getKey(args) {
+			const base = `${id}::${JSON.stringify(args)}`;
+			const short = hash(base).toString(36).slice(0, 5);
+			return short;
+		}
+	};
 }
diff --git a/packages/wormhole/src/build/adapters/dev.ts b/packages/wormhole/src/build/adapters/dev.ts
index 217df92..6e29ace 100644
--- a/packages/wormhole/src/build/adapters/dev.ts
+++ b/packages/wormhole/src/build/adapters/dev.ts
@@ -84,8 +84,13 @@ export function DevAdapter(): DevAdapter {
 				root,
 				pathname: props.pathname,
 				context: props.context,
-				lifetime: props.lifetime ?? new Lifetime(),
-			});`;
+				lifetime: props.lifetime ?? new Lifetime(),`;
+
+            if (location === "client") {
+                codegenSource += `supplement: props.supplement,`;
+            }
+
+            codegenSource += `});`;
 
             codegenSource += `}`;
 
diff --git a/packages/wormhole/src/build/adapters/vercel.ts b/packages/wormhole/src/build/adapters/vercel.ts
index 520841c..c344e3f 100644
--- a/packages/wormhole/src/build/adapters/vercel.ts
+++ b/packages/wormhole/src/build/adapters/vercel.ts
@@ -7,76 +7,76 @@ import { mkdir, rmdir } from "node:fs/promises";
 import { printRoutePath, type RoutePath } from "../router";
 
 export interface VercelAdapterResult {
-    outputDir: string;
-    staticDir: string;
-    functionsDir: string;
-    configFile: string;
+	outputDir: string;
+	staticDir: string;
+	functionsDir: string;
+	configFile: string;
 }
 
 export interface VercelAdapter extends BuildAdapter<VercelAdapterResult> {
-    buildClientBundle(build: Build): Promise<string>;
-    buildCSS(build: Build): Promise<string>;
-    buildRouteFunction(build: Build, route: BuildRoute): Promise<string>;
+	buildClientBundle(build: Build): Promise<string>;
+	buildCSS(build: Build): Promise<string>;
+	buildRouteFunction(build: Build, route: BuildRoute): Promise<string>;
 }
 
 export function getRouteId(matcher: RoutePath) {
-    return printRoutePath(matcher).replaceAll(/\\|\//gi, "-").replaceAll(" ", "-") || 'index';
+	return printRoutePath(matcher).replaceAll(/\\|\//gi, "-").replaceAll(" ", "-") || 'index';
 }
 
 export function VercelAdapter(): VercelAdapter {
-    return {
-        async buildClientBundle(build: Build) {
-            using _task = addTask({
-                name: "Building client bundle for Vercel"
-            });
+	return {
+		async buildClientBundle(build: Build) {
+			using _task = addTask({
+				name: "Building client bundle for Vercel"
+			});
 
-            let codegenSource = "";
+			let codegenSource = "";
 
-            codegenSource += `import { INTERNAL_entrypoint } from "@vortexjs/wormhole";`;
-            codegenSource += `import { Lifetime } from "@vortexjs/core";`;
-            codegenSource += `import { html } from "@vortexjs/dom";`;
+			codegenSource += `import { INTERNAL_entrypoint } from "@vortexjs/wormhole";`;
+			codegenSource += `import { Lifetime } from "@vortexjs/core";`;
+			codegenSource += `import { html } from "@vortexjs/dom";`;
 
-            const imports: Export[] = [];
+			const imports: Export[] = [];
 
-            function getExportIndex(exp: Export): number {
-                const index = imports.findIndex(x => x.file === exp.file && x.name === exp.name);
-                if (index === -1) {
-                    imports.push(exp);
-                    return imports.length - 1;
-                }
-                return index;
-            }
+			function getExportIndex(exp: Export): number {
+				const index = imports.findIndex(x => x.file === exp.file && x.name === exp.name);
+				if (index === -1) {
+					imports.push(exp);
+					return imports.length - 1;
+				}
+				return index;
+			}
 
-            const entrypointProps: EntrypointProps = {
-                routes: build.routes.filter(x => x.type === "route").map(x => ({
-                    matcher: x.matcher,
-                    frames: x.frames.map((frame) => ({
-                        index: getExportIndex(frame),
-                    })),
-                    is404: x.is404,
-                }))
-            };
+			const entrypointProps: EntrypointProps = {
+				routes: build.routes.filter(x => x.type === "route").map(x => ({
+					matcher: x.matcher,
+					frames: x.frames.map((frame) => ({
+						index: getExportIndex(frame),
+					})),
+					is404: x.is404,
+				}))
+			};
 
-            codegenSource += `const entrypointProps = JSON.parse(${JSON.stringify(JSON.stringify(entrypointProps))});`;
+			codegenSource += `const entrypointProps = JSON.parse(${JSON.stringify(JSON.stringify(entrypointProps))});`;
 
-            codegenSource += `function main(props) {`;
+			codegenSource += `function main(props) {`;
 
-            codegenSource += 'const loaders = [';
+			codegenSource += 'const loaders = [';
 
-            for (const exp of imports) {
-                const reexporterName = "proxy-" + Bun.hash(`${exp.file}-${exp.name}`).toString(36);
+			for (const exp of imports) {
+				const reexporterName = "proxy-" + Bun.hash(`${exp.file}-${exp.name}`).toString(36);
 
-                const path = await build.writeCodegenned(reexporterName, `export { ${JSON.stringify(exp.name)} } from ${JSON.stringify(exp.file)}`);
+				const path = await build.writeCodegenned(reexporterName, `export { ${JSON.stringify(exp.name)} } from ${JSON.stringify(exp.file)}`);
 
-                codegenSource += `(async () => (await import(${JSON.stringify(path)}))[${JSON.stringify(exp.name)}]),`;
-            }
+				codegenSource += `(async () => (await import(${JSON.stringify(path)}))[${JSON.stringify(exp.name)}]),`;
+			}
 
-            codegenSource += '];';
+			codegenSource += '];';
 
-            codegenSource += `const renderer = html();`;
-            codegenSource += `const root = document.documentElement;`;
+			codegenSource += `const renderer = html();`;
+			codegenSource += `const root = document.documentElement;`;
 
-            codegenSource += `return INTERNAL_entrypoint({
+			codegenSource += `return INTERNAL_entrypoint({
 				props: entrypointProps,
 				loaders,
 				renderer,
@@ -84,157 +84,158 @@ export function VercelAdapter(): VercelAdapter {
 				pathname: props.pathname,
 				context: props.context,
 				lifetime: props.lifetime ?? new Lifetime(),
+				supplement: props.supplement
 			});`;
 
-            codegenSource += `}`;
+			codegenSource += `}`;
 
-            codegenSource += `window.wormhole = {};`;
-            codegenSource += `window.wormhole.hydrate = main;`;
-
-            const path = await build.writeCodegenned("entrypoint-client", codegenSource);
-
-            const bundled = await build.bundle({
-                target: "client",
-                inputPaths: {
-                    app: path,
-                },
-                outdir: join(build.project.projectDir, ".vercel", "output", "static"),
-                dev: false
-            });
-
-            return bundled.outputs.app;
-        },
-
-        async buildCSS(build: Build) {
-            using _task = addTask({
-                name: "Building CSS for Vercel"
-            });
-
-            let codegenCSS = "";
-
-            const appCSSPath = join(build.project.projectDir, "src", "app.css");
-
-            if (await Bun.file(appCSSPath).exists()) {
-                codegenCSS += `@import "${appCSSPath}";`;
-            }
-
-            const cssPath = await build.writeCodegenned("styles", codegenCSS, "css");
-
-            const bundled = await build.bundle({
-                target: "client",
-                inputPaths: {
-                    app: cssPath,
-                },
-                outdir: join(build.project.projectDir, ".vercel", "output", "static"),
-                dev: false
-            });
-
-            return bundled.outputs.app;
-        },
-
-        async buildRouteFunction(build: Build, route: BuildRoute) {
-            using _task = addTask({
-                name: `Building function for route: ${printRoutePath(route.matcher)}`
-            });
-
-            let codegenSource = "";
-
-            if (route.type === "api") {
-                // API route function
-                codegenSource += `import {INTERNAL_tryHandleAPI} from "@vortexjs/wormhole";`;
-
-                codegenSource += `import { ${JSON.stringify(route.schema.name)} as schema } from ${JSON.stringify(route.schema.file)};`;
-                codegenSource += `import { ${JSON.stringify(route.impl.name)} as impl } from ${JSON.stringify(route.impl.file)};`;
-                codegenSource += `import { SKL } from "@vortexjs/common";`;
-
-                codegenSource += `export default async function handler(request) {`;
-                codegenSource += `const text = `;
-                if (route.method === "GET") {
-                    codegenSource += `new URL(request.url).searchParams.get("props")`;
-                } else {
-                    codegenSource += `await request.text()`;
-                }
-                codegenSource += `;`;
-
-                codegenSource += `if (!text) { return new Response("Missing body", { status: 400 }); }`;
-
-                codegenSource += `let body;`;
-                codegenSource += `try { body = SKL.parse(text); } catch (e) { return new Response("Invalid SKL", { status: 400 }); }`;
-
-                // check against standard schema
-                codegenSource += `const parsed = await schema["~standard"].validate(body);`;
-
-                codegenSource += `if ("issues" in parsed && parsed.issues != null && parsed.issues.length > 0) {`;
-                codegenSource += `return new Response("Request did not match schema", { status: 400 })`;
-                codegenSource += `}`;
-
-                codegenSource += `try {`;
-                codegenSource += `const result = await impl(parsed.value);`;
-                codegenSource += `return new Response(SKL.stringify(result), { status: 200, headers: { "Content-Type": "application/skl" } });`;
-                codegenSource += `} catch (e) {`;
-                codegenSource += `console.error(e);`;
-                codegenSource += `return new Response("Internal Server Error", { status: 500 });`;
-                codegenSource += `}`;
-
-                codegenSource += `}`;
-            } else {
-                // Page route function
-                codegenSource += `import { INTERNAL_entrypoint, INTERNAL_createStreamUtility } from "@vortexjs/wormhole";`;
-                codegenSource += `import { Lifetime, ContextScope } from "@vortexjs/core";`;
-                codegenSource += `import { createHTMLRoot, ssr, printHTML, diffInto } from "@vortexjs/ssr";`;
-
-                const imports: Export[] = [];
-
-                function getExportIndex(exp: Export): number {
-                    const index = imports.findIndex(x => x.file === exp.file && x.name === exp.name);
-                    if (index === -1) {
-                        imports.push(exp);
-                        return imports.length - 1;
-                    }
-                    return index;
-                }
-
-                const entrypointProps: EntrypointProps = {
-                    routes: [{
-                        matcher: route.matcher,
-                        frames: route.frames.map((frame) => ({
-                            index: getExportIndex(frame),
-                        })),
-                        is404: route.is404,
-                    }]
-                };
-
-                codegenSource += `const entrypointProps = JSON.parse(${JSON.stringify(JSON.stringify(entrypointProps))});`;
-
-                let idx = 0;
-                for (const exp of imports) {
-                    const reexporterName = "proxy-" + Bun.hash(`${exp.file}-${exp.name}`).toString(36);
-
-                    const path = await build.writeCodegenned(reexporterName, `export { ${JSON.stringify(exp.name)} } from ${JSON.stringify(exp.file)}`);
-
-                    codegenSource += `import {${JSON.stringify(exp.name)} as imp${idx}} from ${JSON.stringify(path)};`;
-                    idx++;
-                }
-
-                codegenSource += 'const loaders = [';
-
-                idx = 0;
-                for (const exp of imports) {
-                    codegenSource += `(()=>imp${idx}),`;
-                    idx++;
-                }
-
-                codegenSource += '];';
-
-                codegenSource += `export default async function handler(request) {`;
-                codegenSource += `const url = new URL(request.url);`;
-                codegenSource += `const pathname = url.pathname;`;
-
-                codegenSource += `const renderer = ssr();`;
-                codegenSource += `const root = createHTMLRoot();`;
-                codegenSource += `const lifetime = new Lifetime();`;
-                codegenSource += `const context = new ContextScope(lifetime);`;
-                codegenSource += `await INTERNAL_entrypoint({
+			codegenSource += `window.wormhole = {};`;
+			codegenSource += `window.wormhole.hydrate = main;`;
+
+			const path = await build.writeCodegenned("entrypoint-client", codegenSource);
+
+			const bundled = await build.bundle({
+				target: "client",
+				inputPaths: {
+					app: path,
+				},
+				outdir: join(build.project.projectDir, ".vercel", "output", "static"),
+				dev: false
+			});
+
+			return bundled.outputs.app;
+		},
+
+		async buildCSS(build: Build) {
+			using _task = addTask({
+				name: "Building CSS for Vercel"
+			});
+
+			let codegenCSS = "";
+
+			const appCSSPath = join(build.project.projectDir, "src", "app.css");
+
+			if (await Bun.file(appCSSPath).exists()) {
+				codegenCSS += `@import "${appCSSPath}";`;
+			}
+
+			const cssPath = await build.writeCodegenned("styles", codegenCSS, "css");
+
+			const bundled = await build.bundle({
+				target: "client",
+				inputPaths: {
+					app: cssPath,
+				},
+				outdir: join(build.project.projectDir, ".vercel", "output", "static"),
+				dev: false
+			});
+
+			return bundled.outputs.app;
+		},
+
+		async buildRouteFunction(build: Build, route: BuildRoute) {
+			using _task = addTask({
+				name: `Building function for route: ${printRoutePath(route.matcher)}`
+			});
+
+			let codegenSource = "";
+
+			if (route.type === "api") {
+				// API route function
+				codegenSource += `import {INTERNAL_tryHandleAPI} from "@vortexjs/wormhole";`;
+
+				codegenSource += `import { ${JSON.stringify(route.schema.name)} as schema } from ${JSON.stringify(route.schema.file)};`;
+				codegenSource += `import { ${JSON.stringify(route.impl.name)} as impl } from ${JSON.stringify(route.impl.file)};`;
+				codegenSource += `import { SKL } from "@vortexjs/common";`;
+
+				codegenSource += `export default async function handler(request) {`;
+				codegenSource += `const text = `;
+				if (route.method === "GET") {
+					codegenSource += `new URL(request.url).searchParams.get("props")`;
+				} else {
+					codegenSource += `await request.text()`;
+				}
+				codegenSource += `;`;
+
+				codegenSource += `if (!text) { return new Response("Missing body", { status: 400 }); }`;
+
+				codegenSource += `let body;`;
+				codegenSource += `try { body = SKL.parse(text); } catch (e) { return new Response("Invalid SKL", { status: 400 }); }`;
+
+				// check against standard schema
+				codegenSource += `const parsed = await schema["~standard"].validate(body);`;
+
+				codegenSource += `if ("issues" in parsed && parsed.issues != null && parsed.issues.length > 0) {`;
+				codegenSource += `return new Response("Request did not match schema", { status: 400 })`;
+				codegenSource += `}`;
+
+				codegenSource += `try {`;
+				codegenSource += `const result = await impl(parsed.value);`;
+				codegenSource += `return new Response(SKL.stringify(result), { status: 200, headers: { "Content-Type": "application/skl" } });`;
+				codegenSource += `} catch (e) {`;
+				codegenSource += `console.error(e);`;
+				codegenSource += `return new Response("Internal Server Error", { status: 500 });`;
+				codegenSource += `}`;
+
+				codegenSource += `}`;
+			} else {
+				// Page route function
+				codegenSource += `import { INTERNAL_entrypoint, INTERNAL_createStreamUtility } from "@vortexjs/wormhole";`;
+				codegenSource += `import { Lifetime, ContextScope } from "@vortexjs/core";`;
+				codegenSource += `import { createHTMLRoot, ssr, printHTML, diffInto } from "@vortexjs/ssr";`;
+
+				const imports: Export[] = [];
+
+				function getExportIndex(exp: Export): number {
+					const index = imports.findIndex(x => x.file === exp.file && x.name === exp.name);
+					if (index === -1) {
+						imports.push(exp);
+						return imports.length - 1;
+					}
+					return index;
+				}
+
+				const entrypointProps: EntrypointProps = {
+					routes: [{
+						matcher: route.matcher,
+						frames: route.frames.map((frame) => ({
+							index: getExportIndex(frame),
+						})),
+						is404: route.is404,
+					}]
+				};
+
+				codegenSource += `const entrypointProps = JSON.parse(${JSON.stringify(JSON.stringify(entrypointProps))});`;
+
+				let idx = 0;
+				for (const exp of imports) {
+					const reexporterName = "proxy-" + Bun.hash(`${exp.file}-${exp.name}`).toString(36);
+
+					const path = await build.writeCodegenned(reexporterName, `export { ${JSON.stringify(exp.name)} } from ${JSON.stringify(exp.file)}`);
+
+					codegenSource += `import {${JSON.stringify(exp.name)} as imp${idx}} from ${JSON.stringify(path)};`;
+					idx++;
+				}
+
+				codegenSource += 'const loaders = [';
+
+				idx = 0;
+				for (const exp of imports) {
+					codegenSource += `(()=>imp${idx}),`;
+					idx++;
+				}
+
+				codegenSource += '];';
+
+				codegenSource += `export default async function handler(request) {`;
+				codegenSource += `const url = new URL(request.url);`;
+				codegenSource += `const pathname = url.pathname;`;
+
+				codegenSource += `const renderer = ssr();`;
+				codegenSource += `const root = createHTMLRoot();`;
+				codegenSource += `const lifetime = new Lifetime();`;
+				codegenSource += `const context = new ContextScope(lifetime);`;
+				codegenSource += `await INTERNAL_entrypoint({
                     props: entrypointProps,
                     loaders,
                     renderer,
@@ -243,103 +244,103 @@ export function VercelAdapter(): VercelAdapter {
                     context,
                     lifetime,
                 });`;
-                codegenSource += `const streamutil = INTERNAL_createStreamUtility();`;
-                codegenSource += `const html = printHTML(root);`;
-                codegenSource += `async function load() {`;
-                codegenSource += `streamutil.write(html);`;
-                codegenSource += `let currentSnapshot = structuredClone(root);`;
-                codegenSource += `context.streaming.updated();`;
-                codegenSource += `context.streaming.onUpdate(() => {`;
-                codegenSource += `const codegen = diffInto(currentSnapshot, root);`;
-                codegenSource += `const code = codegen.getCode();`;
-                codegenSource += `currentSnapshot = structuredClone(root);`;
-                codegenSource += "streamutil.write(`<script>${code}</script>`);";
-                codegenSource += `});`;
-                codegenSource += `await context.streaming.onDoneLoading;`;
-                codegenSource += "streamutil.write(`<script>window.addEventListener('load', () => {wormhole.hydrate({})});</script>`);";
-                codegenSource += `streamutil.end();`;
-                codegenSource += `lifetime.close();`;
-                codegenSource += `}`;
-                codegenSource += `load();`;
-                codegenSource += `return new Response(streamutil.readable.pipeThrough(new TextEncoderStream()), {`;
-                codegenSource += `status: 200,`;
-                codegenSource += `headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Content-Type-Options': 'nosniff', 'Transfer-Encoding': 'chunked', Connection: 'keep-alive', }`;
-                codegenSource += `});`;
-                codegenSource += `}`;
-            }
-
-            const routeId = getRouteId(route.matcher);
-            const filename = `function-${route.type}-${routeId}`;
-            const path = await build.writeCodegenned(filename, codegenSource);
-
-            const bundled = await build.bundle({
-                target: "server",
-                inputPaths: {
-                    main: path,
-                },
-                dev: false,
-                noSplitting: true
-            });
-
-            return bundled.outputs.main;
-        },
-
-        async run(build) {
-            using _task = addTask({
-                name: "Building for Vercel Build Output API"
-            });
-
-            const outputDir = join(build.project.projectDir, ".vercel", "output");
-
-            await rmdir(outputDir, { recursive: true }).catch(() => { /* ignore */ });
-
-            const staticDir = join(outputDir, "static");
-            const functionsDir = join(outputDir, "functions");
-
-            // Ensure directories exist
-            await mkdir(outputDir, { recursive: true });
-            await mkdir(staticDir, { recursive: true });
-            await mkdir(functionsDir, { recursive: true });
-
-            // Build client bundle and CSS
-            await this.buildClientBundle(build);
-            await this.buildCSS(build);
-
-            // Build individual route functions
-            const routeFunctions: string[] = [];
-            for (const route of build.routes) {
-                const functionPath = await this.buildRouteFunction(build, route);
-                routeFunctions.push(functionPath);
-
-                // Create function directory in Vercel output
-                const functionDir = join(functionsDir, `${printRoutePath(route.matcher) || "index"}.func`);
-                await mkdir(functionDir, { recursive: true });
-
-                // Copy function file
-                const functionIndexPath = join(functionDir, "index.js");
-                await Bun.write(functionIndexPath, await Bun.file(functionPath).text());
-
-                // Create .vc-config.json for each function
-                const vcConfig = {
-                    runtime: "edge",
-                    entrypoint: "index.js"
-                };
-                await Bun.write(join(functionDir, ".vc-config.json"), JSON.stringify(vcConfig, null, 2));
-            }
-
-            const config = {
-                version: 3
-            };
-
-            const configPath = join(outputDir, "config.json");
-            await Bun.write(configPath, JSON.stringify(config, null, 2));
-
-            return {
-                outputDir,
-                staticDir,
-                functionsDir,
-                configFile: configPath
-            };
-        }
-    };
+				codegenSource += `const streamutil = INTERNAL_createStreamUtility();`;
+				codegenSource += `const html = printHTML(root);`;
+				codegenSource += `async function load() {`;
+				codegenSource += `streamutil.write(html);`;
+				codegenSource += `let currentSnapshot = structuredClone(root);`;
+				codegenSource += `context.streaming.updated();`;
+				codegenSource += `context.streaming.onUpdate(() => {`;
+				codegenSource += `const codegen = diffInto(currentSnapshot, root);`;
+				codegenSource += `const code = codegen.getCode();`;
+				codegenSource += `currentSnapshot = structuredClone(root);`;
+				codegenSource += "streamutil.write(`<script>${code}</script>`);";
+				codegenSource += `});`;
+				codegenSource += `await context.streaming.onDoneLoading;`;
+				codegenSource += "streamutil.write(`<script>window.addEventListener('load', () => {wormhole.hydrate({supplement:JSON.parse(${JSON.stringify(JSON.stringify(context.query.getSupplement()))})})});</script>`);";
+				codegenSource += `streamutil.end();`;
+				codegenSource += `lifetime.close();`;
+				codegenSource += `}`;
+				codegenSource += `load();`;
+				codegenSource += `return new Response(streamutil.readable.pipeThrough(new TextEncoderStream()), {`;
+				codegenSource += `status: 200,`;
+				codegenSource += `headers: { 'Content-Type': 'text/html; charset=utf-8', 'X-Content-Type-Options': 'nosniff', 'Transfer-Encoding': 'chunked', Connection: 'keep-alive', }`;
+				codegenSource += `});`;
+				codegenSource += `}`;
+			}
+
+			const routeId = getRouteId(route.matcher);
+			const filename = `function-${route.type}-${routeId}`;
+			const path = await build.writeCodegenned(filename, codegenSource);
+
+			const bundled = await build.bundle({
+				target: "server",
+				inputPaths: {
+					main: path,
+				},
+				dev: false,
+				noSplitting: true
+			});
+
+			return bundled.outputs.main;
+		},
+
+		async run(build) {
+			using _task = addTask({
+				name: "Building for Vercel Build Output API"
+			});
+
+			const outputDir = join(build.project.projectDir, ".vercel", "output");
+
+			await rmdir(outputDir, { recursive: true }).catch(() => { /* ignore */ });
+
+			const staticDir = join(outputDir, "static");
+			const functionsDir = join(outputDir, "functions");
+
+			// Ensure directories exist
+			await mkdir(outputDir, { recursive: true });
+			await mkdir(staticDir, { recursive: true });
+			await mkdir(functionsDir, { recursive: true });
+
+			// Build client bundle and CSS
+			await this.buildClientBundle(build);
+			await this.buildCSS(build);
+
+			// Build individual route functions
+			const routeFunctions: string[] = [];
+			for (const route of build.routes) {
+				const functionPath = await this.buildRouteFunction(build, route);
+				routeFunctions.push(functionPath);
+
+				// Create function directory in Vercel output
+				const functionDir = join(functionsDir, `${printRoutePath(route.matcher) || "index"}.func`);
+				await mkdir(functionDir, { recursive: true });
+
+				// Copy function file
+				const functionIndexPath = join(functionDir, "index.js");
+				await Bun.write(functionIndexPath, await Bun.file(functionPath).text());
+
+				// Create .vc-config.json for each function
+				const vcConfig = {
+					runtime: "edge",
+					entrypoint: "index.js"
+				};
+				await Bun.write(join(functionDir, ".vc-config.json"), JSON.stringify(vcConfig, null, 2));
+			}
+
+			const config = {
+				version: 3
+			};
+
+			const configPath = join(outputDir, "config.json");
+			await Bun.write(configPath, JSON.stringify(config, null, 2));
+
+			return {
+				outputDir,
+				staticDir,
+				functionsDir,
+				configFile: configPath
+			};
+		}
+	};
 }
diff --git a/packages/wormhole/src/dev/dev-server.ts b/packages/wormhole/src/dev/dev-server.ts
index 8c79e9d..c31d4fa 100644
--- a/packages/wormhole/src/dev/dev-server.ts
+++ b/packages/wormhole/src/dev/dev-server.ts
@@ -9,176 +9,190 @@ import { watch } from "node:fs";
 import type { HTTPMethod } from "~/shared/http-method";
 
 export interface DevServer {
-    lifetime: Lifetime;
-    server: Bun.Server;
-    processRequest(request: Request, tags: RequestTag[]): Promise<Response>;
-    rebuild(): Promise<void>;
-    buildResult: Promise<DevAdapterResult>;
-    project: Project;
+	lifetime: Lifetime;
+	server: Bun.Server;
+	processRequest(request: Request, tags: RequestTag[]): Promise<Response>;
+	rebuild(): Promise<void>;
+	buildResult: Promise<DevAdapterResult>;
+	project: Project;
 }
 
 export function DevServer(project: Project): DevServer {
-    const server = Bun.serve({
-        port: 3141,
-        routes: {
-            "/*": async (req) => {
-                return new Response();
-            }
-        },
-        development: true
-    });
-
-    project.lt.onClosed(server.stop);
-
-    const self: DevServer = {
-        lifetime: project.lt,
-        server,
-        processRequest: DevServer_processRequest,
-        rebuild: DevServer_rebuild,
-        buildResult: new Promise(() => { }),
-        project
-    }
-
-    server.reload({
-        routes: {
-            "/*": async (req) => {
-                const tags: RequestTag[] = [];
-                const response = await self.processRequest(req, tags);
-
-                addLog({
-                    type: "request",
-                    url: new URL(req.url).pathname,
-                    method: req.method as HTTPMethod,
-                    responseCode: response.status,
-                    tags
-                })
-
-                return response;
-            }
-        }
-    });
-
-    const devServerTask = addTask({
-        name: `Development server running @ ${server.url.toString()}`
-    });
-
-    project.lt.onClosed(devServerTask[Symbol.dispose]);
-
-    self.rebuild();
-
-    // Watch sourcedir
-    const watcher = watch(join(project.projectDir, "src"), { recursive: true });
-
-    let isWaitingForRebuild = false;
-
-    watcher.on("change", async (eventType, filename) => {
-        if (isWaitingForRebuild) return;
-        isWaitingForRebuild = true;
-        await self.buildResult;
-        isWaitingForRebuild = false;
-        self.rebuild();
-    });
-
-    project.lt.onClosed(() => {
-        watcher.close();
-    });
-
-    return self;
+	const server = Bun.serve({
+		port: 3141,
+		routes: {
+			"/*": async (req) => {
+				return new Response();
+			}
+		},
+		development: true
+	});
+
+	project.lt.onClosed(server.stop);
+
+	const self: DevServer = {
+		lifetime: project.lt,
+		server,
+		processRequest: DevServer_processRequest,
+		rebuild: DevServer_rebuild,
+		buildResult: new Promise(() => { }),
+		project
+	}
+
+	server.reload({
+		routes: {
+			"/*": async (req) => {
+				try {
+					const tags: RequestTag[] = [];
+					const response = await self.processRequest(req, tags);
+
+					addLog({
+						type: "request",
+						url: new URL(req.url).pathname,
+						method: req.method as HTTPMethod,
+						responseCode: response.status,
+						tags
+					})
+
+					return response;
+				} catch (e) {
+					console.error(e);
+
+					addLog({
+						type: "request",
+						url: new URL(req.url).pathname,
+						method: req.method as HTTPMethod,
+						responseCode: 500,
+						tags: []
+					})
+
+					return new Response("Internal Server Error", { status: 500 });
+				}
+			}
+		}
+	});
+
+	const devServerTask = addTask({
+		name: `Development server running @ ${server.url.toString()}`
+	});
+
+	project.lt.onClosed(devServerTask[Symbol.dispose]);
+
+	self.rebuild();
+
+	// Watch sourcedir
+	const watcher = watch(join(project.projectDir, "src"), { recursive: true });
+
+	let isWaitingForRebuild = false;
+
+	watcher.on("change", async (eventType, filename) => {
+		if (isWaitingForRebuild) return;
+		isWaitingForRebuild = true;
+		await self.buildResult;
+		isWaitingForRebuild = false;
+		self.rebuild();
+	});
+
+	project.lt.onClosed(() => {
+		watcher.close();
+	});
+
+	return self;
 }
 
 async function DevServer_rebuild(this: DevServer): Promise<void> {
-    const build = new Build(this.project, DevAdapter());
-    this.buildResult = build.run();
-    await this.buildResult;
+	const build = new Build(this.project, DevAdapter());
+	this.buildResult = build.run();
+	await this.buildResult;
 }
 
 interface ServerEntrypoint {
-    main<RendererNode, HydrationContext>(props: {
-        renderer: Renderer<RendererNode, HydrationContext>,
-        root: RendererNode,
-        pathname: string,
-        context: ContextScope,
-        lifetime: Lifetime
-    }): void;
-    tryHandleAPI(request: Request): Promise<Response | undefined>;
-    isRoute404(pathname: string): boolean;
+	main<RendererNode, HydrationContext>(props: {
+		renderer: Renderer<RendererNode, HydrationContext>,
+		root: RendererNode,
+		pathname: string,
+		context: ContextScope,
+		lifetime: Lifetime
+	}): void;
+	tryHandleAPI(request: Request): Promise<Response | undefined>;
+	isRoute404(pathname: string): boolean;
 }
 
 async function DevServer_processRequest(this: DevServer, request: Request, tags: RequestTag[]): Promise<Response> {
-    const built = await this.buildResult;
+	const built = await this.buildResult;
 
-    const serverPath = built.serverEntry;
-    const serverEntrypoint = (await import(serverPath + `?v=${Date.now()}`)) as ServerEntrypoint;
+	const serverPath = built.serverEntry;
+	const serverEntrypoint = (await import(serverPath + `?v=${Date.now()}`)) as ServerEntrypoint;
 
-    // Priority 1: API routes
-    const apiResponse = await serverEntrypoint.tryHandleAPI(request);
+	// Priority 1: API routes
+	const apiResponse = await serverEntrypoint.tryHandleAPI(request);
 
-    if (apiResponse !== undefined && apiResponse !== null) {
-        tags.push("api");
-        return apiResponse;
-    }
+	if (apiResponse !== undefined && apiResponse !== null) {
+		tags.push("api");
+		return apiResponse;
+	}
 
-    // Priority 2: Static files
-    const filePath = join(built.outdir, new URL(request.url).pathname);
+	// Priority 2: Static files
+	const filePath = join(built.outdir, new URL(request.url).pathname);
 
-    if (await Bun.file(filePath).exists()) {
-        tags.push("static");
-        return new Response(Bun.file(filePath));
-    }
+	if (await Bun.file(filePath).exists()) {
+		tags.push("static");
+		return new Response(Bun.file(filePath));
+	}
 
-    // Priority 3: SSR
-    const root = createHTMLRoot();
-    const renderer = ssr();
+	// Priority 3: SSR
+	const root = createHTMLRoot();
+	const renderer = ssr();
 
-    const lifetime = new Lifetime();
-    const context = new ContextScope(lifetime);
+	const lifetime = new Lifetime();
+	const context = new ContextScope(lifetime);
 
-    serverEntrypoint.main({
-        root,
-        renderer,
-        pathname: new URL(request.url).pathname,
-        context,
-        lifetime
-    });
+	serverEntrypoint.main({
+		root,
+		renderer,
+		pathname: new URL(request.url).pathname,
+		context,
+		lifetime
+	});
 
-    const html = printHTML(root);
+	const html = printHTML(root);
 
-    const { readable, writable } = new TransformStream();
+	const { readable, writable } = new TransformStream();
 
-    async function load() {
-        const writer = writable.getWriter();
+	async function load() {
+		const writer = writable.getWriter();
 
-        writer.write(html);
+		writer.write(html);
 
-        let currentSnapshot = structuredClone(root);
+		let currentSnapshot = structuredClone(root);
 
-        context.streaming.updated();
+		context.streaming.updated();
 
-        context.streaming.onUpdate(() => {
-            const codegen = diffInto(currentSnapshot, root);
+		context.streaming.onUpdate(() => {
+			const codegen = diffInto(currentSnapshot, root);
 
-            const code = codegen.getCode();
+			const code = codegen.getCode();
 
-            currentSnapshot = structuredClone(root);
+			currentSnapshot = structuredClone(root);
 
-            writer.write(`<script>${code}</script>`);
-        });
+			writer.write(`<script>${code}</script>`);
+		});
 
-        await context.streaming.onDoneLoading;
+		await context.streaming.onDoneLoading;
 
-        writer.write(`<script>window.addEventListener("load", () => {wormhole.hydrate({})});</script>`);
-        writer.close();
-        lifetime.close();
-    }
+		writer.write(`<script>window.addEventListener("load", () => {wormhole.hydrate({supplement:JSON.parse(${JSON.stringify(JSON.stringify(context.query.getSupplement()))})})});</script>`);
+		writer.close();
+		lifetime.close();
+	}
 
-    load();
+	load();
 
-    tags.push("ssr");
+	tags.push("ssr");
 
-    return new Response(readable, {
-        status: serverEntrypoint.isRoute404(new URL(request.url).pathname) ? 404 : 200,
-        headers: {
-            'Content-Type': "text/html"
-        }
-    })
+	return new Response(readable, {
+		status: serverEntrypoint.isRoute404(new URL(request.url).pathname) ? 404 : 200,
+		headers: {
+			'Content-Type': "text/html"
+		}
+	})
 }
diff --git a/packages/wormhole/src/runtime/api.ts b/packages/wormhole/src/runtime/api.ts
index 12c1f9b..ba5a0ac 100644
--- a/packages/wormhole/src/runtime/api.ts
+++ b/packages/wormhole/src/runtime/api.ts
@@ -19,7 +19,7 @@ interface ServerAPIProps<Input, Output> extends BaseAPIProps<Input, Output> {
 }
 
 export function INTERNAL_client_api<Input, Output>(props: ClientAPIProps<Input, Output>): ((inp: Input) => Promise<Output>) & ({
-    use(args: Input, props: QueryProps): Signal<Output | undefined>;
+    use(args: Input, props?: QueryProps): Signal<Output | undefined>;
 } | {}) {
     // TODO: Add proper query support once Core Query drops
     const result = async (inp: Input) => {
@@ -72,7 +72,7 @@ export function INTERNAL_client_api<Input, Output>(props: ClientAPIProps<Input,
 }
 
 export function INTERNAL_server_api<Input, Output>(props: ServerAPIProps<Input, Output>): ((inp: Input) => Promise<Output>) & ({
-    use(args: Input, props: QueryProps): Signal<Output | undefined>;
+    use(args: Input, props?: QueryProps): Signal<Output | undefined>;
 } | {}) {
     const result = async function (inp: Input) {
         return await props.impl()(inp);
diff --git a/packages/wormhole/src/runtime/entrypoint.tsx b/packages/wormhole/src/runtime/entrypoint.tsx
index eea8158..e53d786 100644
--- a/packages/wormhole/src/runtime/entrypoint.tsx
+++ b/packages/wormhole/src/runtime/entrypoint.tsx
@@ -1,124 +1,132 @@
 import { unwrap } from "@vortexjs/common";
 import {
-    useAwait,
-    ContextScope,
-    flatten,
-    type JSXNode,
-    Lifetime,
-    render,
-    type Renderer,
-    useDerived,
-    useState,
-    useStreaming,
-    when,
+	useAwait,
+	ContextScope,
+	flatten,
+	type JSXNode,
+	Lifetime,
+	render,
+	type Renderer,
+	useDerived,
+	useState,
+	useStreaming,
+	when,
+	type QuerySupplement
 } from "@vortexjs/core";
 import { matchPath, type RoutePath } from "~/build/router";
 import { initializeClientSideRouting, usePathname } from "~/runtime/csr";
 
 export interface EntrypointImport {
-    index: number;
+	index: number;
 }
 
 export interface EntrypointRoute {
-    matcher: RoutePath;
-    frames: EntrypointImport[];
-    is404: boolean;
+	matcher: RoutePath;
+	frames: EntrypointImport[];
+	is404: boolean;
 }
 
 export interface EntrypointProps {
-    routes: EntrypointRoute[];
+	routes: EntrypointRoute[];
 }
 
 function App({
-    pathname: pathnameToUse,
-    props,
-    loaders
+	pathname: pathnameToUse,
+	props,
+	loaders
 }: {
-    pathname?: string,
-    props: EntrypointProps
-    loaders: (() => Promise<any>)[],
+	pathname?: string,
+	props: EntrypointProps
+	loaders: (() => Promise<any>)[],
 }) {
-    if ("location" in globalThis) {
-        initializeClientSideRouting();
-    }
-
-    useStreaming();
-
-    const awaited = useAwait();
-    const pathname = (pathnameToUse && typeof window === "undefined") ? useState(pathnameToUse) : usePathname();
-    const route = useDerived((get) => {
-        const path = get(pathname);
-        return props.routes.find((r) => matchPath(r.matcher, path).matched);
-    });
-    const framesPromise = useDerived(async (get) => {
-        const rot = unwrap(get(route));
-        const frames = [];
-
-        for (const frame of rot.frames) {
-            frames.push(await unwrap(loaders[frame.index])());
-        }
-
-        return frames;
-    });
-    const frames = flatten(useDerived((get) => {
-        return awaited(get(framesPromise))
-    }));
-    const hierarchy = useDerived((get) => {
-        let node = <></>;
-
-        const framesResolved = get(frames);
-
-        if (!framesResolved) {
-            return <h1>loading</h1>
-        }
-
-        for (const Frame of framesResolved.toReversed()) {
-            node = <Frame>
-                {node}
-            </Frame>
-        }
-
-        return node;
-    });
-
-    return <html>
-        <head>
-            <link rel="stylesheet" href="/styles.css" />
-            <script src="/entrypoint-client.js" type="module"></script>
-        </head>
-        <body>
-            {hierarchy}
-        </body>
-    </html>;
+	if ("location" in globalThis) {
+		initializeClientSideRouting();
+	}
+
+	useStreaming();
+
+	const awaited = useAwait();
+	const pathname = (pathnameToUse && typeof window === "undefined") ? useState(pathnameToUse) : usePathname();
+	const route = useDerived((get) => {
+		const path = get(pathname);
+		return props.routes.find((r) => matchPath(r.matcher, path).matched);
+	});
+	const framesPromise = useDerived(async (get) => {
+		const rot = unwrap(get(route));
+		const frames = [];
+
+		for (const frame of rot.frames) {
+			frames.push(await unwrap(loaders[frame.index])());
+		}
+
+		return frames;
+	});
+	const frames = flatten(useDerived((get) => {
+		return awaited(get(framesPromise))
+	}));
+	const hierarchy = useDerived((get) => {
+		let node = <></>;
+
+		const framesResolved = get(frames);
+
+		if (!framesResolved) {
+			return <h1>loading</h1>
+		}
+
+		for (const Frame of framesResolved.toReversed()) {
+			node = <Frame>
+				{node}
+			</Frame>
+		}
+
+		return node;
+	});
+
+	return <html>
+		<head>
+			<link rel="stylesheet" href="/styles.css" />
+			<script src="/entrypoint-client.js" type="module"></script>
+		</head>
+		<body>
+			{hierarchy}
+		</body>
+	</html>;
 }
 
 export async function INTERNAL_entrypoint<Root>({
-    props,
-    loaders,
-    renderer,
-    root,
-    pathname,
-    lifetime = new Lifetime(),
-    context
+	props,
+	loaders,
+	renderer,
+	root,
+	pathname,
+	lifetime = new Lifetime(),
+	context: _context,
+	supplement
 }: {
-    props: EntrypointProps, loaders: (() => Promise<any>)[], renderer: Renderer<Root, any>, root: Root, pathname?: string,
-    lifetime?: Lifetime, context: ContextScope
+	props: EntrypointProps, loaders: (() => Promise<any>)[], renderer: Renderer<Root, any>, root: Root, pathname?: string,
+	lifetime?: Lifetime, context?: ContextScope, supplement?: QuerySupplement
 }) {
-    preload: if ("window" in globalThis) {
-        // We need to preload the routes so we don't flash the 'loading' state
-        const path = pathname ?? window.location.pathname;
-        const route = props.routes.find((r) => matchPath(r.matcher, path));
-        if (!route) break preload;
-
-        for (const frame of route.frames) {
-            await unwrap(loaders[frame.index])();
-        }
-    }
-
-    render({
-        context,
-        renderer,
-        root,
-        component: <App pathname={pathname} props={props} loaders={loaders} />
-    }).cascadesFrom(lifetime);
+	const context = _context ?? new ContextScope(lifetime);
+
+	preload: if ("window" in globalThis) {
+		// We need to preload the routes so we don't flash the 'loading' state
+		const path = pathname ?? window.location.pathname;
+		const route = props.routes.find((r) => matchPath(r.matcher, path));
+		if (!route) break preload;
+
+		for (const frame of route.frames) {
+			await unwrap(loaders[frame.index])();
+		}
+	}
+
+	if (supplement) {
+		context.query.hydrationSupplement = supplement;
+	}
+
+	render({
+		context,
+		renderer,
+		root,
+		component: <App pathname={pathname} props={props} loaders={loaders} />
+	}).cascadesFrom(lifetime);
 }
diff --git a/packages/wormhole/src/virt/route.ts b/packages/wormhole/src/virt/route.ts
index 4fb9990..988f143 100644
--- a/packages/wormhole/src/virt/route.ts
+++ b/packages/wormhole/src/virt/route.ts
@@ -21,7 +21,7 @@ export type APIQueryFunction = <Input, Output>(
         method?: HTTPMethod;
     }
 ) => ((inp: Input) => Promise<Output>) & {
-    use(args: Input, props: QueryProps): Signal<Output | undefined>;
+    use(args: Input, props?: QueryProps): Signal<Output | undefined>;
 };
 
 export type APIMutationFunction = <Input, Output>(