@spooky-sync/client-solid2 0.0.1-canary.200 → 0.0.1-canary.201

package/AGENTS.md

@@ -0,0 +1,77 @@
+# `@spooky-sync/client-solid2` — agent guide
+
+## What this package is
+
+The **Solid 2.0** binding for sp00ky. Counterpart of `@spooky-sync/client-solid` (Solid 1.x); the two coexist until Solid 2.0 is stable and an app uses exactly one. Peers: `solid-js@^2.0.0-rc.0` + `@solidjs/signals@^2.0.0-rc.0` (coordinated RC, pin matching versions); apps also need `@solidjs/web` and `jsxImportSource: "@solidjs/web"`.
+
+Solid-2 native internals: query results live in a `createProjection` fed by an async generator over the engine's live subscription (keyed reconcile by `id`, row identity preserved, `<For>` notified on add/remove/reorder — no version-signal hack). Status hooks are async-iterable-backed memos with a `loadingValue`. Teardown is `onCleanup`-driven, because Solid 2 abandons superseded async generators without terminating them.
+
+## Setup pattern
+
+```ts
+// db.ts
+import type { SyncedDbConfig } from '@spooky-sync/client-solid2';
+import { schema, SURQL_SCHEMA } from './schema.gen'; // generated by `spky generate`
+
+export const dbConfig: SyncedDbConfig<typeof schema> = {
+  schema,
+  schemaSurql: SURQL_SCHEMA,
+  database: {
+    namespace: 'main',
+    database: 'app',
+    endpoint: 'ws://localhost:8666/rpc',
+    store: 'indexeddb',
+  },
+};
+```
+
+```tsx
+// App.tsx
+<Sp00kyProvider config={dbConfig} fallback={<Splash />}>{/* app */}</Sp00kyProvider>
+```
+
+Provider props are identical to client-solid: `config`, `fallback`, `preload` (awaited gate before children render), `onReady`, `onError`. A mounted client is deliberately not closed on unmount.
+
+## Key API
+
+- **`useDb<typeof schema>()`** — the `SyncedDb<S>` instance. Same surface as client-solid: `create`, `update`, `delete`, `query`, `preload`, `run`, `bucket`, `useRemote`, `auth`/`signOut`, `pendingMutationCount`, `subscribeToPendingMutations`, `syncHealth`/`storageHealth` + their subscribe methods.
+- **`createQuery(query, options?)`** (or `createQuery(db, query, options?)`) — reactive query. `useQuery` is a deprecated alias. Pass a thunk when the query depends on signals; read the signals inside it.
+  - `data()` — non-suspending. `[]` / `null` before the first result, keyed-reconciled live rows after.
+  - `ready()` — suspending read for `<Loading fallback={...}>` (Solid 2's renamed `<Suspense>`).
+  - `error()` — registration/sync failure (e.g. SSP 503 NOT_READY). Never thrown into the render tree; the sync scheduler retries underneath.
+  - `isLoading()` / `isFetching()` / `isSettled()` — `isSettled()` means delivered AND idle; gate windowed-list end detection on it.
+  - Options: `enabled?: () => boolean`, `deregisterOnCleanup?: boolean`.
+- **`createSubmission(fn)`** — button pending/error state around a mutation: `submit()`, `pending()`, `error()`, `result()`, `clearError()`. There is deliberately no `action()` / `createOptimisticStore` layer (see `src/lib/create-submission.ts`).
+- **`createPreload`**, **`usePendingMutations`**, **`useSyncStatus`**, **`useStorageStatus`**, **`useFeatureFlag`**, **`useAppRelease`**, **`useCrdtField`**, **`useFileUpload`**, **`useDownloadFile`** — same shapes as client-solid.
+- **`conflate`**, **`fromSubscription`** — the async-iterable helpers the hooks are built on; useful for wrapping other engine subscriptions.
+
+## Mutations
+
+The engine is optimistic local-first end to end (local commit → live queries re-emit → outbox sync; `db.run()` writes an outbox job row with `status: 'pending'`). So mutations are plain awaited calls, no optimistic-update layer on top:
+
+```ts
+await db.create('post:' + crypto.randomUUID(), { title: 'Hi' });
+await db.update('post', 'post:xyz', { title: 'Edited' });
+await db.delete('post', row.id);
+await db.run('backend', 'sendMail', { to });
+```
+
+Track a backend job by querying its outbox row: `createQuery(() => db.query('job_outbox').where({ id: jobId() }).one().build())`.
+
+## Common gotchas
+
+- **Rows are store proxies.** Solid 2 stores wrap class instances too and serve their methods **bound**, so a `RecordId` read out of a row reports `constructor.name === 'bound RecordId'`. `db.delete('post', row.id)` handles that; for surrealdb APIs that check `instanceof`, unwrap first with `snapshot(row)` from `solid-js`.
+- **`<Loading>`, not `<Suspense>`.** Only `ready()` suspends; `data()` never does, which is what keeps local-first cache paints instant.
+- **`data()` is never `undefined`.** It is born `[]` / `null` (`seedLoadingValue`), unlike client-solid. Branch on `isLoading()`, not on nullish data.
+- **Coordinated RC.** `solid-js`, `@solidjs/web`, `@solidjs/signals` must be on matching `2.0.0-rc.x` versions. After any Solid bump, run `src/lib/__tests__/rc-semantics.test.ts` — it probes the RC contracts this package depends on.
+- **Vitest resolves the SSR build.** Under Node, `solid-js`'s `node` export condition gives you the SSR build where user effects never run. Set `resolve.conditions: ['browser', 'development']` (see this package's `vitest.config.ts`).
+- **`createQuery` factories must call `.build()`** (or `.all()`, `.one()`, …). A bare `db.query('post')` is a builder, not a query.
+- **Provider is mandatory.** Any hook outside `<Sp00kyProvider>` throws.
+
+## Pointers
+
+- Usage walkthrough + migration table: `QUICK_START.md` (same content as the docs' [Solid 2 guide](https://mono424.github.io/sp00ky/docs/guide/solid2))
+- Skill for coding agents: `skills/sp00ky-solid2/SKILL.md`
+- Solid 1.x binding: `node_modules/@spooky-sync/client-solid/AGENTS.md`
+- Sync engine: `node_modules/@spooky-sync/core/AGENTS.md`
+- Query builder DSL: `node_modules/@spooky-sync/query-builder/AGENTS.md`

package/README.md

@@ -6,8 +6,8 @@ Counterpart of `@spooky-sync/client-solid` (Solid 1.x); the two coexist until So
 
 What "native" means here:
 
-- Query results are a `createProjection` fed by an async generator over the engine's live subscription: keyed reconcile by `id`, row identity preserved, coarse `<For>` readers notified — no manual reconcile/version-signal plumbing.
-- `createQuery` exposes both worlds: non-suspending accessors (`data`, `isLoading`, `isFetching`, `isSettled`, `error`) and a suspending `ready()` for `<Loading>` boundaries. Born committed (`seedLoadingValue`), so local-first cache paints never suspend.
+- Query results are a plain store written from the engine's live subscription and merged keyed by `id`: row identity preserved, coarse `<For>` readers notified, only changed fields written. Not an async-generator projection - see `create-query.ts` for why a never-returning generator breaks navigation transitions.
+- `createQuery` exposes both worlds: non-suspending accessors (`data`, `isLoading`, `isFetching`, `isSettled`, `error`) and a suspending `ready()` for `<Loading>` boundaries. Born committed, so local-first cache paints never suspend.
 - Status hooks (`useSyncStatus`, `useStorageStatus`, `usePendingMutations`, feature flags, app release) are async-iterable-backed memos with `loadingValue`.
 - Mutations stay plain async calls — the engine is already optimistic local-first end to end (local commit → live re-emit → outbox sync). `createSubmission` adds button pending/error state.
 

package/dist/index.cjs

@@ -125,6 +125,42 @@ function usePendingMutations() {
 	return fromSubscription((cb) => db.subscribeToPendingMutations(cb), db.pendingMutationCount);
 }
 
+//#endregion
+//#region src/lib/merge-rows.ts
+/**
+* Keyed in-place merge of a fresh row list into a store draft array.
+*
+* Why not `reconcile(rows, 'id')`: in Solid 2 rc.1 a reconcile REPLACES the row
+* objects, so a component that captured `data()[0]` sees a different object
+* after the next emission, and anything keyed on row identity (`<For>` without
+* an explicit key, a memo comparing rows) re-creates its subtree on every live
+* update. Mutating the draft in place keeps the identity AND keeps updates
+* fine-grained: only the fields that actually changed are written, so a row
+* whose data is unchanged notifies nobody.
+*
+* Rows are matched by `key` (default `id`); unmatched incoming rows are
+* inserted as-is and trailing rows are dropped, so add / remove / reorder all
+* reach coarse readers.
+*/
+function mergeRows(draft, next, key = "id") {
+	const byKey = /* @__PURE__ */ new Map();
+	for (const row of draft) {
+		const k = row?.[key];
+		if (k !== void 0) byKey.set(String(k), row);
+	}
+	for (let i = 0; i < next.length; i++) {
+		const incoming = next[i];
+		const k = incoming?.[key];
+		const reuse = k !== void 0 ? byKey.get(String(k)) : void 0;
+		if (reuse) {
+			for (const field of Object.keys(incoming)) if (reuse[field] !== incoming[field]) reuse[field] = incoming[field];
+			for (const field of Object.keys((0, solid_js.snapshot)(reuse))) if (!(field in incoming)) delete reuse[field];
+			if (draft[i] !== reuse) draft[i] = reuse;
+		} else if (draft[i] !== incoming) draft[i] = incoming;
+	}
+	if (draft.length > next.length) draft.splice(next.length);
+}
+
 //#endregion
 //#region src/lib/create-query.ts
 function createQuery(dbOrQuery, queryOrOptions, maybeOptions) {
@@ -145,54 +181,76 @@ function createQuery(dbOrQuery, queryOrOptions, maybeOptions) {
 	const [isFetched, setIsFetched] = (0, solid_js.createSignal)(false, { ownedWrite: true });
 	const [isFetching, setIsFetching] = (0, solid_js.createSignal)(false, { ownedWrite: true });
 	let activeHash;
-	const store = (0, solid_js.createProjection)(async function* () {
-		const enabled = options?.enabled?.() ?? true;
-		const query = typeof finalQuery === "function" ? finalQuery() : finalQuery;
-		if (!enabled || !query) {
-			setIsFetched(false);
-			setError(void 0);
-			return;
-		}
+	const [store, setStore] = (0, solid_js.createStore)({ value: null });
+	let runId = 0;
+	let readyWaiters = [];
+	const wakeReady = () => {
+		const waiters = readyWaiters;
+		readyWaiters = [];
+		for (const w of waiters) w();
+	};
+	(0, solid_js.createEffect)(() => {
+		return {
+			enabled: options?.enabled?.() ?? true,
+			query: typeof finalQuery === "function" ? finalQuery() : finalQuery
+		};
+	}, ({ enabled, query }) => {
+		const myRun = ++runId;
 		setIsFetched(false);
 		setError(void 0);
-		const iterators = [];
+		if (!enabled || !query) return;
 		const cleanups = [];
-		(0, solid_js.onCleanup)(() => {
-			for (const it of iterators) it.return?.();
-			for (const c of cleanups) c();
-		});
-		try {
-			/**
-			* Registration can fail — the canonical case is the SSP answering 503
-			* NOT_READY while it bootstraps. Surface it as `error()` instead of
-			* throwing into the graph: the sync scheduler retries the
-			* registration underneath, so a transient failure still recovers, and
-			* a spinner driven by `isLoading()` resolves via `error()`.
-			*/
-			const { hash } = await query.run();
+		let disposed = false;
+		const addCleanup = (c) => {
+			if (!c) return;
+			if (typeof c === "function") {
+				if (disposed) c();
+				else cleanups.push(c);
+				return;
+			}
+			Promise.resolve(c).then((fn) => {
+				if (typeof fn !== "function") return;
+				if (disposed) fn();
+				else cleanups.push(fn);
+			});
+		};
+		/**
+		* Registration can fail — the canonical case is the SSP answering 503
+		* NOT_READY while it bootstraps. Surface it as `error()` instead of
+		* throwing into the graph: the sync scheduler retries the registration
+		* underneath, so a transient failure still recovers, and a spinner
+		* driven by `isLoading()` resolves via `error()`.
+		*/
+		query.run().then(({ hash }) => {
+			if (disposed || myRun !== runId) return;
 			activeHash = hash;
-			cleanups.push(sp00ky.subscribeQueryStatus(hash, (status) => setIsFetching(status === "fetching"), { immediate: true }));
-			const it = conflate((cb) => sp00ky.subscribe(hash, cb, { immediate: true }))[Symbol.asyncIterator]();
-			iterators.push(it);
+			addCleanup(sp00ky.subscribeQueryStatus(hash, (status) => setIsFetching(status === "fetching"), { immediate: true }));
 			let isFirstCall = true;
-			while (true) {
-				const r = await it.next();
-				if (r.done) break;
-				const e = r.value;
-				const queryData = query.isOne ? e[0] ?? null : e;
-				const hasData = query.isOne ? queryData !== null && queryData !== void 0 : e.length > 0;
-				if (!isFirstCall || hasData) setIsFetched(true);
+			addCleanup(sp00ky.subscribe(hash, (rows) => {
+				if (disposed || myRun !== runId) return;
+				const queryData = query.isOne ? rows[0] ?? null : rows;
+				const hasData = query.isOne ? queryData !== null && queryData !== void 0 : rows.length > 0;
+				if (!isFirstCall || hasData) {
+					setIsFetched(true);
+					wakeReady();
+				}
 				isFirstCall = false;
 				const t0 = performance.now();
-				yield { value: queryData };
+				setStore((s) => {
+					if (query.isOne || queryData === null || !Array.isArray(s.value)) s.value = queryData;
+					else mergeRows(s.value, queryData);
+				});
 				sp00ky.reportFrontendTiming(hash, performance.now() - t0);
-			}
-		} catch (err) {
+			}, { immediate: true }));
+		}).catch((err) => {
+			if (disposed || myRun !== runId) return;
 			setError(err instanceof Error ? err : new Error(String(err)));
-		}
-	}, { value: null }, {
-		key: "id",
-		seedLoadingValue: true
+			wakeReady();
+		});
+		return () => {
+			disposed = true;
+			for (const c of cleanups) c();
+		};
 	});
 	const emptyList = [];
 	const data = () => {
@@ -205,9 +263,9 @@ function createQuery(dbOrQuery, queryOrOptions, maybeOptions) {
 	};
 	const readyGate = (0, solid_js.createMemo)(async () => {
 		if (isFetched() || error()) return true;
-		await new Promise(() => {});
+		await new Promise((resolve) => readyWaiters.push(resolve));
 		return true;
-	});
+	}, { lazy: true });
 	const ready = () => {
 		readyGate();
 		return data();
@@ -619,6 +677,222 @@ function useDownloadFile(dbOrBucketName, bucketNameOrPath, pathOrOptions, maybeO
 	};
 }
 
+//#endregion
+//#region src/lib/use-blurhash.ts
+function useBlurhash(dbOrBucketName, bucketNameOrPath, maybePath) {
+	let db;
+	let bucketName;
+	let path;
+	if (typeof dbOrBucketName === "string") {
+		db = useDb();
+		bucketName = dbOrBucketName;
+		path = bucketNameOrPath;
+	} else {
+		db = dbOrBucketName;
+		bucketName = bucketNameOrPath;
+		path = maybePath;
+	}
+	const [hash, setHash] = (0, solid_js.createSignal)(null, { ownedWrite: true });
+	const [isLoading, setIsLoading] = (0, solid_js.createSignal)(false, { ownedWrite: true });
+	(0, solid_js.createEffect)(() => path(), (filePath) => {
+		if (!filePath) {
+			setHash(null);
+			setIsLoading(false);
+			return;
+		}
+		let cancelled = false;
+		setIsLoading(true);
+		db.bucket(bucketName).blurhash(filePath).then((result) => {
+			if (cancelled) return;
+			setHash(result);
+			setIsLoading(false);
+		}).catch(() => {
+			if (cancelled) return;
+			setHash(null);
+			setIsLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+	return {
+		hash,
+		isLoading
+	};
+}
+
+//#endregion
+//#region src/lib/use-bucket-image.ts
+function useBucketImage(dbOrBucketName, bucketNameOrPath, pathOrOptions, maybeOptions) {
+	let db;
+	let bucketName;
+	let path;
+	let options;
+	if (typeof dbOrBucketName === "string") {
+		db = useDb();
+		bucketName = dbOrBucketName;
+		path = bucketNameOrPath;
+		options = pathOrOptions ?? {};
+	} else {
+		db = dbOrBucketName;
+		bucketName = bucketNameOrPath;
+		path = pathOrOptions;
+		options = maybeOptions ?? {};
+	}
+	const wantHash = options.blurhash !== false;
+	const { hash } = useBlurhash(db, bucketName, () => wantHash ? path() : null);
+	const file = useDownloadFile(db, bucketName, path, options);
+	const [ready, setReady] = (0, solid_js.createSignal)(false, { ownedWrite: true });
+	(0, solid_js.createEffect)(file.url, () => {
+		setReady(false);
+	}, { defer: true });
+	const gate = (img) => {
+		const done = () => setReady(true);
+		if (typeof img.decode === "function") img.decode().then(done, done);
+		else if (img.complete) done();
+		else {
+			img.onload = done;
+			img.onerror = done;
+		}
+	};
+	return {
+		...file,
+		blurhash: hash,
+		ready,
+		gate
+	};
+}
+
+//#endregion
+//#region src/lib/Blurhash.ts
+/**
+* A blurhash painted onto a canvas, once per hash change. Size the canvas via
+* `class`/`style` (e.g. `absolute inset-0 w-full h-full`); the internal decode
+* resolution stays tiny regardless of the displayed size.
+*/
+function Blurhash(props) {
+	if (typeof document === "undefined") return null;
+	const canvas = document.createElement("canvas");
+	(0, solid_js.createEffect)(() => props.class ?? "", (className) => {
+		canvas.className = className;
+	});
+	(0, solid_js.createEffect)(() => props.style ?? "", (style) => {
+		canvas.style.cssText = style;
+	});
+	(0, solid_js.createEffect)(() => ({
+		width: props.width ?? 32,
+		height: props.height ?? 32,
+		hash: props.hash,
+		punch: props.punch ?? 1
+	}), ({ width, height, hash, punch }) => {
+		canvas.width = width;
+		canvas.height = height;
+		if (!hash) return;
+		try {
+			const pixels = (0, _spooky_sync_core.decodeBlurhash)(hash, width, height, punch);
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return;
+			const imageData = ctx.createImageData(width, height);
+			imageData.data.set(pixels);
+			ctx.putImageData(imageData, 0, 0);
+		} catch {}
+	});
+	return canvas;
+}
+
+//#endregion
+//#region src/lib/BucketImage.ts
+const LAYER_STYLE = "position:absolute;inset:0;width:100%;height:100%;";
+/**
+* A bucket image that never pops in: it layers (bottom to top) your `fallback`
+* plate, the automatically stored blurhash, and the real image, which stays
+* transparent until the bitmap is DECODED and then crossfades over the
+* placeholders. Placeholder layers unmount once the fade settles. Respects
+* prefers-reduced-motion (instant swap). The container is made
+* `position: relative` unless your `class` positions it already.
+*
+* ```tsx
+* <BucketImage bucket="covers" path={row.cover_key} class="absolute inset-0"
+*              fallback={<MyPlate />} alt="" />
+* ```
+*/
+function BucketImage(props) {
+	if (typeof document === "undefined") return null;
+	const image = useBucketImage(props.bucket, () => props.path, {
+		...props.options,
+		blurhash: props.blurhash !== false
+	});
+	const reducedMotion = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+	const root = document.createElement("div");
+	(0, solid_js.createEffect)(() => props.class ?? "", (className) => {
+		root.className = className;
+	});
+	(0, solid_js.onSettled)(() => {
+		if (getComputedStyle(root).position === "static") root.style.position = "relative";
+	});
+	const placeholder = document.createElement("div");
+	placeholder.style.cssText = LAYER_STYLE;
+	const fallbackHolder = document.createElement("div");
+	fallbackHolder.style.cssText = LAYER_STYLE;
+	placeholder.append(fallbackHolder);
+	const resolvedFallback = (0, solid_js.children)(() => props.fallback);
+	(0, solid_js.createEffect)(() => resolvedFallback.toArray().filter((node) => node instanceof Node), (nodes) => {
+		fallbackHolder.replaceChildren(...nodes);
+	});
+	const hashCanvas = Blurhash({
+		get hash() {
+			return image.blurhash();
+		},
+		style: LAYER_STYLE
+	});
+	if (hashCanvas instanceof Node) placeholder.append(hashCanvas);
+	const img = document.createElement("img");
+	img.decoding = "async";
+	img.style.cssText = `${LAYER_STYLE}opacity:0;`;
+	(0, solid_js.createEffect)(() => props.imgClass ?? "", (className) => {
+		img.className = className;
+	});
+	(0, solid_js.createEffect)(() => props.fit ?? "cover", (fit) => {
+		img.style.objectFit = fit;
+	});
+	(0, solid_js.createEffect)(() => props.alt ?? "", (alt) => {
+		img.alt = alt;
+	});
+	(0, solid_js.createEffect)(() => reducedMotion ? "none" : `opacity ${props.transition ?? 300}ms ${props.easing ?? "cubic-bezier(0.16, 1, 0.3, 1)"}`, (transition) => {
+		img.style.transition = transition;
+	});
+	(0, solid_js.createEffect)(() => image.url(), (url) => {
+		if (!url) {
+			img.removeAttribute("src");
+			return;
+		}
+		img.src = url;
+		image.gate(img);
+	});
+	(0, solid_js.createEffect)(() => image.ready(), (ready) => {
+		img.style.opacity = ready ? "1" : "0";
+	});
+	const [settled, setSettled] = (0, solid_js.createSignal)(false, { ownedWrite: true });
+	(0, solid_js.createEffect)(() => ({
+		ready: image.ready(),
+		transition: props.transition ?? 300
+	}), ({ ready, transition }) => {
+		if (!ready) {
+			setSettled(false);
+			return;
+		}
+		const wait = (reducedMotion ? 0 : transition) + 120;
+		const timer = setTimeout(() => setSettled(true), wait);
+		return () => clearTimeout(timer);
+	});
+	(0, solid_js.createEffect)(() => settled(), (isSettled) => {
+		if (isSettled) placeholder.remove();
+		else if (!placeholder.isConnected) root.insertBefore(placeholder, img);
+	});
+	root.append(placeholder, img);
+	return root;
+}
+
 //#endregion
 //#region src/lib/Sp00kyProvider.ts
 function Sp00kyProvider(props) {
@@ -713,7 +987,20 @@ function createSubmission(fn) {
 * NOTE: keep in sync with packages/client-solid/src/index.ts (SyncedDb).
 * Copied rather than shared so this package's dependency graph never pulls
 * in solid-js 1.x; fold the two together once client-solid moves to Solid 2.
+* Solid-2-only differences: `delete` accepts 'bound RecordId', and write
+* payloads go through `snapshot()` (see `unproxy` below).
 */
+/**
+* Solid 2 stores wrap every object read out of them (query rows, their nested
+* arrays, `createStore` docs) in a Proxy. Those proxies cannot cross
+* `postMessage` (the sqlite and shared-tabs workers): structuredClone throws
+* DataCloneError. `snapshot()` returns the underlying plain value for store
+* proxies and passes anything else through untouched.
+*/
+function unproxy(value) {
+	if (value === null || typeof value !== "object") return value;
+	return (0, solid_js.snapshot)(value);
+}
 var SyncedDb = class {
 	constructor(config) {
 		this.sp00ky = null;
@@ -750,25 +1037,26 @@ var SyncedDb = class {
 	*/
 	async create(id, payload) {
 		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
-		await this.sp00ky.create(id, payload);
+		await this.sp00ky.create(id, unproxy(payload));
 	}
 	/**
 	* Update an existing record in the database
 	*/
 	async update(tableName, recordId, payload, options) {
 		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
-		await this.sp00ky.update(tableName, recordId, payload, options);
+		await this.sp00ky.update(tableName, recordId, unproxy(payload), options);
 	}
 	/**
 	* Delete an existing record in the database
 	*/
 	async delete(tableName, selector) {
 		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
-		const ctorName = selector?.constructor?.name;
-		const isRecordId = selector instanceof surrealdb.RecordId || ctorName === "RecordId" || ctorName === "bound RecordId";
+		const raw = unproxy(selector);
+		const ctorName = raw?.constructor?.name;
+		const isRecordId = raw instanceof surrealdb.RecordId || ctorName === "RecordId" || ctorName === "bound RecordId";
 		let id;
-		if (typeof selector === "string") id = selector;
-		else if (isRecordId) id = `${tableName}:${selector.id}`;
+		if (typeof raw === "string") id = raw;
+		else if (isRecordId) id = `${tableName}:${raw.id}`;
 		else throw new Error("Only string ID or RecordId selectors are supported currently with core");
 		await this.sp00ky.delete(tableName, id);
 	}
@@ -793,7 +1081,7 @@ var SyncedDb = class {
 	*/
 	async run(backend, path, payload, options) {
 		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
-		await this.sp00ky.run(backend, path, payload, options);
+		await this.sp00ky.run(backend, path, unproxy(payload), options);
 	}
 	/**
 	* Sign out, clear session and local storage
@@ -881,6 +1169,8 @@ var SyncedDb = class {
 };
 
 //#endregion
+exports.Blurhash = Blurhash;
+exports.BucketImage = BucketImage;
 exports.RecordId = surrealdb.RecordId;
 exports.Sp00kyProvider = Sp00kyProvider;
 exports.SyncedDb = SyncedDb;
@@ -891,6 +1181,8 @@ exports.createQuery = createQuery;
 exports.createSubmission = createSubmission;
 exports.fromSubscription = fromSubscription;
 exports.useAppRelease = useAppRelease;
+exports.useBlurhash = useBlurhash;
+exports.useBucketImage = useBucketImage;
 exports.useCrdtField = useCrdtField;
 exports.useDb = useDb;
 exports.useDownloadFile = useDownloadFile;