better-supabase 0.13.0 → 0.15.0

package/dist/react-BuDYI62C.js

@@ -0,0 +1,979 @@
+import { n as dbError } from "./errors-BVFgt8BZ.js";
+import { t as escapeLike } from "./escape-like-DHfx6jRr.js";
+import { a as ok, r as err, s as toDbError } from "./result-ntFBW2p2.js";
+import { c as useBroadcastAuth, f as ClientContext } from "./sign-in-BsIaNx2C.js";
+import "./react/session.js";
+import { a as blockArgsKey, c as listenToBlockEvents, d as fieldErrorsOf, i as dataTarget, l as blockEnv, n as createDataOne, o as createBlockMutation, r as dataArgsKey, s as createBlockQuery, t as createDataList } from "./data-hooks-tgF1Ct0F.js";
+import { H as rpcTransport } from "./block-helpers-CtBdjgO4.js";
+import { r as createBlocks } from "./create-blocks-Bu4H5TXw.js";
+import { a as recordCan, i as plainData, l as runBindingWrite, s as recordSubject } from "./record-type-DRbnlj5q.js";
+import { t as createRecordController } from "./controller-BNZKd6bJ.js";
+import { a as ttlSeconds, n as scaleTransform, r as transformFor } from "./variants-Cy--Ub-a.js";
+import { createContext, createElement, use, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
+//#region src/react/actions.ts
+const IDLE$1 = {
+	data: void 0,
+	error: void 0
+};
+/**
+* Calls a Server Action from an event handler: tracks pending inputs and the
+* last result, and calls `onSuccess` or `onError`.
+*
+* ```tsx
+* const remove = useAction(removeMember, {
+*   onError: (e) => toast.error(message(e)),
+* });
+* <Button
+*   disabled={remove.pendingInputs.some((p) => p.userId === id)}
+*   onClick={() => remove.run({ userId: id })}
+* />;
+* ```
+*/
+function useAction(action, options = {}) {
+	const [transitioning, startTransition] = useTransition();
+	const [inFlight, setInFlight] = useState([]);
+	const [settled, setSettled] = useState(IDLE$1);
+	const latest = useRef({
+		action,
+		options
+	});
+	latest.current = {
+		action,
+		options
+	};
+	const run = useCallback((input) => {
+		const entry = { input };
+		setInFlight((current) => [...current, entry]);
+		setSettled((current) => current.error === void 0 ? current : {
+			...current,
+			error: void 0
+		});
+		const settledRun = new Promise((resolve, reject) => {
+			const done = () => {
+				setInFlight((current) => current.filter((item) => item !== entry));
+			};
+			startTransition(async () => {
+				let result;
+				try {
+					result = await latest.current.action(input);
+				} catch (cause) {
+					done();
+					reject(cause instanceof Error ? cause : new Error(String(cause)));
+					throw cause;
+				}
+				done();
+				setSettled(result.ok ? {
+					data: result.data,
+					error: void 0
+				} : (current) => ({
+					data: current.data,
+					error: result.error
+				}));
+				const { onSuccess, onError } = latest.current.options;
+				if (result.ok) onSuccess?.(result.data, input);
+				else onError?.(result.error, input);
+				resolve(result);
+			});
+		});
+		settledRun.catch(() => void 0);
+		return settledRun;
+	}, []);
+	const reset = useCallback(() => {
+		setSettled(IDLE$1);
+	}, []);
+	const pendingInputs = inFlight.map((item) => item.input);
+	return {
+		run,
+		pending: transitioning || inFlight.length > 0,
+		pendingInputs,
+		pendingInput: pendingInputs.at(-1),
+		data: settled.data,
+		error: settled.error,
+		reset
+	};
+}
+/**
+* A `<form>` that submits `FormData` to a Server Action. Fields keep what the
+* user typed when the action fails (a `<form action>` resets them) and clear
+* only on success.
+*
+* ```tsx
+* const form = useActionForm(createCustomer, {
+*   onSuccess: () => toast.success("Saved"),
+* });
+* <form {...form.formProps}>
+*   <Input
+*     name="name"
+*     aria-invalid={form.fieldErrors.name !== undefined}
+*   />
+* </form>;
+* ```
+*/
+function useActionForm(action, options = {}) {
+	const handle = useAction(action);
+	return {
+		formProps: { onSubmit: (event) => {
+			event.preventDefault();
+			const form = event.currentTarget;
+			handle.run(new FormData(form)).then((result) => {
+				if (!result.ok) {
+					options.onError?.(result.error, form);
+					return;
+				}
+				if (options.resetOnSuccess ?? true) form.reset();
+				options.onSuccess?.(result.data, form);
+			}, () => void 0);
+		} },
+		pending: handle.pending,
+		data: handle.data,
+		error: handle.error,
+		fieldErrors: fieldErrorsOf(handle.error),
+		reset: () => {
+			handle.reset();
+		}
+	};
+}
+//#endregion
+//#region src/blocks/react-controller.ts
+/**
+* A controller's state and actions, rendered again when the state changes. The
+* controller is made again when `deps` change; its work starts with the first
+* subscription and stops with the last, so StrictMode's second mount and an
+* unmount need no cleanup here.
+*/
+function useController(create, deps) {
+	const [held, setHeld] = useState(() => ({
+		deps,
+		controller: create()
+	}));
+	let current = held;
+	if (changed(held.deps, deps)) {
+		current = {
+			deps,
+			controller: create()
+		};
+		setHeld(current);
+	}
+	const { controller } = current;
+	const snapshot = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+	return {
+		controller,
+		view: useMemo(() => ({
+			...snapshot,
+			...controller.actions
+		}), [snapshot, controller])
+	};
+}
+const changed = (before, after) => before.length !== after.length || before.some((value, index) => !Object.is(value, after[index]));
+/**
+* A ref that always holds the latest value, for callbacks a controller calls
+* later.
+*/
+function useLatest(value) {
+	const latest = useRef(value);
+	latest.current = value;
+	return latest;
+}
+//#endregion
+//#region src/blocks/react-env.ts
+/**
+* The provider's client, session and ports; the topic port defaults to its
+* supabase-js client.
+*/
+function useBlockEnv() {
+	const value = useContext(ClientContext);
+	if (!value) throw new Error("better-supabase: wrap your app in <BetterSupabaseProvider client={bsb}>");
+	const { client } = value;
+	return useMemo(() => blockEnv(client), [client]);
+}
+/** The env's tenant, rendered again when the session changes. */
+function useBlockTenant(env) {
+	return useSyncExternalStore(env.auth.subscribe, env.tenant, () => env.tenant());
+}
+//#endregion
+//#region src/react/record.ts
+function clientsOf(env, feature) {
+	const config = env.config ?? feature.config;
+	const files = { storage: env.supabase.storage };
+	return createBlocks({
+		transport: rpcTransport(env.supabase),
+		...files,
+		tenant: env.tenant,
+		...config === void 0 ? {} : { config }
+	}, feature.blocks);
+}
+/**
+* A provider and hook for one generated record type (ADR 0030): the provider
+* holds a record controller over the client's blocks and the hook reads `{
+* state, actions, meta }`, so the record page's cards compose without prop
+* drilling. Writes run through `writes` (Server Actions) when given, else on
+* the client.
+*
+* ```tsx
+* const { RecordProvider, useRecord } =
+*   createRecordProvider(customerRecord);
+*
+* <RecordProvider id={id} initial={view} writes={customerActions}>
+*   <CommentsCard />
+* </RecordProvider>;
+* ```
+*/
+function createRecordProvider(feature) {
+	const Context = createContext(null);
+	const names = feature.bindings;
+	function RecordProvider(props) {
+		const { id, initial, writes, topic = null, children } = props;
+		const env = useBlockEnv();
+		const clients = useMemo(() => clientsOf(env, feature), [env]);
+		const subject = useMemo(() => recordSubject(feature, id), [id]);
+		const { view } = useController(() => createRecordController({
+			source: {
+				blocks: feature.blocks,
+				clients
+			},
+			auth: env.auth,
+			ports: env.ports,
+			subject,
+			bindings: names,
+			topic
+		}), [
+			clients,
+			env,
+			subject,
+			topic
+		]);
+		const value = useMemo(() => {
+			const bindings = {
+				...initial?.bindings,
+				...plainData(view.bindings ?? {})
+			};
+			const write = async (binding, name, input) => {
+				const handler = writes?.[binding]?.[name];
+				const settled = handler === void 0 ? await runBindingWrite(feature, clients, binding, name, subject, input) : await handler({
+					id,
+					input
+				});
+				if (settled.ok) {
+					await view.refresh([binding]);
+					return {
+						...settled,
+						data: plainData(settled.data)
+					};
+				}
+				return settled;
+			};
+			return {
+				state: {
+					subject,
+					bindings,
+					can: initial?.can ?? recordCan(feature, void 0),
+					status: view.status
+				},
+				actions: {
+					refresh: view.refresh,
+					write
+				},
+				meta: { feature }
+			};
+		}, [
+			clients,
+			id,
+			initial,
+			subject,
+			view,
+			writes
+		]);
+		return createElement(Context, { value }, children);
+	}
+	function useRecord() {
+		const value = use(Context);
+		if (value === null) throw new Error(`better-supabase: wrap the ${feature.type} record in its <RecordProvider>`);
+		return value;
+	}
+	return {
+		RecordProvider,
+		useRecord
+	};
+}
+//#endregion
+//#region src/react/record-list.ts
+const present = (state) => Object.fromEntries(Object.entries(state).filter(([, value]) => value !== null && value !== void 0));
+/**
+* A record list's URL state from nuqs, with the query params the server parses.
+* Filter and sort changes reset the page. better-supabase doesn't import nuqs:
+* pass what `useQueryStates` returns.
+*
+* ```tsx
+* import { createParser, useQueryStates } from "nuqs";
+*
+* const parsers = customerList.nuqs(createParser);
+*
+* function Customers() {
+*   const list = useRecordListState(customerList, useQueryStates(parsers));
+*   list.set({ q: "acme" });
+*   // fetch(`/api/customers/list?${list.searchParams}`)
+* }
+* ```
+*/
+function useRecordListState(list, queryStates) {
+	const [state, setState] = queryStates;
+	return useMemo(() => {
+		const searchParams = list.toSearchParams(present(state));
+		const parsed = list.parse(searchParams);
+		const query = parsed.ok ? parsed.value : list.defaults;
+		return {
+			state,
+			query,
+			searchParams,
+			set(patch) {
+				setState({
+					...patch,
+					page: null,
+					after: null
+				});
+			},
+			setPage(page) {
+				setState(typeof page === "string" ? {
+					page: null,
+					after: page
+				} : {
+					page,
+					after: null
+				});
+			},
+			reset() {
+				setState(Object.fromEntries(Object.keys(state).map((key) => [key, null])));
+			}
+		};
+	}, [
+		list,
+		state,
+		setState
+	]);
+}
+//#endregion
+//#region src/react/record-form.ts
+const NO_VALUES = {};
+const NO_ERRORS = {};
+/**
+* The state of a form from `recordForm`: the values by key, the errors of the
+* last submit, and `submit`, which validates with the entity schema before it
+* calls `onSubmit`.
+*
+* ```tsx
+* const state = useRecordForm(form, {
+*   onSubmit: (values) => create(values),
+* });
+* <form onSubmit={state.submit}>…</form>;
+* ```
+*/
+function useRecordForm(form, options) {
+	const initial = options.initial ?? NO_VALUES;
+	const [values, setValues] = useState(initial);
+	const [errors, setErrors] = useState(NO_ERRORS);
+	const [pending, setPending] = useState(false);
+	return {
+		values,
+		errors,
+		pending,
+		set: (key, value) => {
+			setValues((current) => ({
+				...current,
+				[key]: value
+			}));
+		},
+		submit: async (event) => {
+			event?.preventDefault();
+			setPending(true);
+			const result = await form.validate(values);
+			if (!result.ok) {
+				setErrors(result.errors);
+				setPending(false);
+				return;
+			}
+			setErrors(NO_ERRORS);
+			await Promise.resolve(options.onSubmit({
+				input: result.input,
+				custom: result.custom
+			})).finally(() => {
+				setPending(false);
+			});
+		},
+		reset: () => {
+			setValues(initial);
+			setErrors(NO_ERRORS);
+		}
+	};
+}
+//#endregion
+//#region src/react/block-hooks.ts
+/**
+* Calls a read method of any block client (`blocks.tasks.list`, renamed or not)
+* on mount and when its arguments change. `refetchOn` calls it again on block
+* events.
+*/
+function useBlockQuery(client, method, args, options = {}) {
+	return useController(() => createBlockQuery(client, method, args, options), [
+		client,
+		method,
+		blockArgsKey(args),
+		options.refetchOn?.source
+	]).view;
+}
+/** Calls a write method of any block client and tracks its state. */
+function useBlockMutation(client, method) {
+	return useController(() => createBlockMutation(client, method), [client, method]).view;
+}
+/**
+* Calls `handler` for each block event matching `pattern` (`"task.*"`), typed
+* by `events` (`blockEvents` from `blocks.generated.ts`). `source` is the
+* client's `betterSupabase`.
+*/
+function useBlockEvent(source, events, pattern, handler) {
+	const latest = useLatest(handler);
+	useEffect(() => listenToBlockEvents(source, events, pattern, () => latest.current), [
+		source,
+		events,
+		pattern,
+		latest
+	]);
+}
+//#endregion
+//#region src/react/data-hooks.ts
+function useClient() {
+	const context = useContext(ClientContext);
+	if (!context) throw new Error("better-supabase: wrap your app in <BetterSupabaseProvider client={bsb}>");
+	return context.client;
+}
+/**
+* The list and record hooks for one table or block instance. The generated
+* `hooks.ts` calls it once per table (`useTickets`, `useTicket`); `select`
+* picks the source from the provider's `db`.
+*
+* ```ts
+* export const { useList: useTickets, useOne: useTicket } =
+*   defineDataHooks("tickets", (db: AppDb) => db.tickets);
+* ```
+*/
+function defineDataHooks(name, select) {
+	return {
+		useList: (args) => {
+			const client = useClient();
+			const target = dataTarget(client, name, select);
+			return useController(() => createDataList(target, args), [
+				client.db,
+				target.engine,
+				dataArgsKey(target.scope),
+				dataArgsKey(args)
+			]).view;
+		},
+		useOne: (id) => {
+			const client = useClient();
+			const target = dataTarget(client, name, select);
+			return useController(() => createDataOne(target, id), [
+				client.db,
+				target.engine,
+				dataArgsKey(target.scope),
+				dataArgsKey(id)
+			]).view;
+		}
+	};
+}
+//#endregion
+//#region src/react/sync.ts
+const NO_CHANGES = [];
+const none = () => NO_CHANGES;
+const noSubscription = () => () => void 0;
+const noState = () => void 0;
+function useSync() {
+	return useContext(ClientContext)?.client.engine?.sync;
+}
+/**
+* The local database's connection and sync progress, for a status badge or a
+* "syncing" banner. `undefined` when the provider's engine syncs nothing (the
+* hooks read the server). Re-renders only when a field changes.
+*/
+function useSyncStatus() {
+	const sync = useSync();
+	return useSyncExternalStore(sync?.subscribe ?? noSubscription, sync?.current ?? noState, sync?.current ?? noState);
+}
+const ignore = () => void 0;
+/**
+* The changes the engine's upload connector could not upload: conflicts with a
+* newer server row and changes the server refused. Show them next to the row,
+* then `dismiss` them.
+*/
+function useConflicts() {
+	const conflicts = useSync()?.conflicts;
+	return {
+		changes: useSyncExternalStore(conflicts?.subscribe ?? noSubscription, conflicts?.current ?? none, conflicts?.current ?? none),
+		dismiss: conflicts?.dismiss ?? ignore
+	};
+}
+//#endregion
+//#region src/react/presence.ts
+const NONE = [];
+const NO_HANDLERS = {};
+const notJoined = () => Promise.resolve(dbError("invalid_request", "better-supabase: the presence topic is not joined"));
+/**
+* Joins a presence topic while mounted and returns who is on it. Pass `null`
+* values to pause. It rejoins when the topic or the user changes.
+*
+* ```tsx
+* const { members } = usePresence(
+*   roomTopic,
+*   { roomId },
+*   { state: { name } },
+* );
+* ```
+*/
+function usePresence(topic, values, options = {}) {
+	const context = useContext(ClientContext);
+	const supabase = options.client ?? context?.client.supabase;
+	if (!supabase) throw new Error("better-supabase: usePresence needs <BetterSupabaseProvider client={bsb}> or { client: supabase }");
+	const auth = useBroadcastAuth(options.client === void 0 ? context?.client : void 0, supabase);
+	const [members, setMembers] = useState(NONE);
+	const [status, setStatus] = useState("closed");
+	const joinedRef = useRef(null);
+	const trackedKey = useRef(void 0);
+	const name = values ? topic.topic(values) : null;
+	const userId = auth.userId;
+	const state = options.state;
+	const stateKey = state === void 0 ? void 0 : JSON.stringify(state);
+	const latest = useRef({
+		state,
+		stateKey
+	});
+	latest.current = {
+		state,
+		stateKey
+	};
+	useEffect(() => {
+		if (!name || auth.status === "loading") return;
+		const matched = topic.match(name);
+		if (!matched) return;
+		const joined = topic.subscribe(supabase, matched, NO_HANDLERS, {
+			onStatus: setStatus,
+			onPresence: setMembers
+		});
+		joinedRef.current = joined;
+		syncState(joined, latest.current, trackedKey);
+		return () => {
+			joinedRef.current = null;
+			trackedKey.current = void 0;
+			setMembers(NONE);
+			setStatus("closed");
+			joined.unsubscribe();
+		};
+	}, [
+		supabase,
+		topic,
+		name,
+		userId,
+		auth.status
+	]);
+	useEffect(() => {
+		const joined = joinedRef.current;
+		if (joined) syncState(joined, {
+			state: latest.current.state,
+			stateKey
+		}, trackedKey);
+	}, [stateKey]);
+	return {
+		members,
+		status,
+		...useMemo(() => ({
+			track: async (next) => {
+				const joined = joinedRef.current;
+				if (!joined) return notJoined();
+				const result = await joined.track(next);
+				return result.ok ? void 0 : result.error;
+			},
+			untrack: async () => {
+				const joined = joinedRef.current;
+				if (!joined) return notJoined();
+				const result = await joined.untrack();
+				return result.ok ? void 0 : result.error;
+			}
+		}), [])
+	};
+}
+/** Tracks or untracks the `state` option once per distinct value. */
+function syncState(joined, current, tracked) {
+	if (current.stateKey === void 0 || current.stateKey === tracked.current) return;
+	tracked.current = current.stateKey;
+	if (current.state === null || current.state === void 0) joined.untrack();
+	else joined.track(current.state);
+}
+//#endregion
+//#region src/react/search.ts
+/**
+* A search box's value, debounced. Pass `term` to `contains` (which escapes it)
+* or `pattern` to `ilike`; both are `undefined` while empty.
+*
+* ```tsx
+* const search = useDebouncedSearch();
+* useQuery(
+*   q.customers.list({
+*     where: search.term ? { name: { contains: search.term } } : {},
+*   }),
+* );
+* ```
+*/
+function useDebouncedSearch(initial = "", options = {}) {
+	const delayMs = options.delayMs ?? 250;
+	const minLength = options.minLength ?? 1;
+	const [value, setValue] = useState(initial);
+	const [settled, setSettled] = useState(initial);
+	useEffect(() => {
+		if (value === settled) return;
+		const timer = setTimeout(() => {
+			setSettled(value);
+		}, delayMs);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [
+		value,
+		settled,
+		delayMs
+	]);
+	const trimmed = settled.trim();
+	const term = trimmed.length >= minLength ? trimmed : void 0;
+	return {
+		value,
+		setValue,
+		term,
+		pattern: term === void 0 ? void 0 : `%${escapeLike(term)}%`,
+		pending: value !== settled
+	};
+}
+//#endregion
+//#region src/react/storage.ts
+/** Re-sign this share of the TTL before the URL expires. */
+const REFRESH_AT = .9;
+/**
+* A signed URL for an object, signed again before it expires. Pass `null` as
+* the target to pause. Connect the bucket with `cacheSignedUrls: true` so
+* components showing the same object share one URL.
+*
+* ```tsx
+* const { url } = useSignedUrl(
+*   avatars,
+*   user ? { userId: user.id } : null,
+*   { ttl: "hour" },
+* );
+* ```
+*/
+function useSignedUrl(bucket, target, options = {}) {
+	const key = target === null || target === void 0 ? null : JSON.stringify([target, options]);
+	const [state, setState] = useState({
+		key: null,
+		url: void 0,
+		error: void 0
+	});
+	const latest = useRef({
+		target,
+		options
+	});
+	latest.current = {
+		target,
+		options
+	};
+	const ttl = ttlSeconds(options.ttl);
+	useEffect(() => {
+		if (key === null) return;
+		let active = true;
+		const sign = () => {
+			const current = latest.current.target;
+			if (current === null || current === void 0) return;
+			bucket.signedUrl(current, latest.current.options).then((result) => {
+				if (!active) return;
+				if (!result.ok) {
+					setState((last) => ({
+						key,
+						url: last.key === key ? last.url : void 0,
+						error: result.error
+					}));
+					return;
+				}
+				setState({
+					key,
+					url: result.data,
+					error: void 0
+				});
+			});
+		};
+		sign();
+		const timer = setInterval(sign, ttl * 1e3 * REFRESH_AT);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, [
+		bucket,
+		key,
+		ttl
+	]);
+	const fresh = key !== null && state.key === key;
+	return {
+		url: fresh ? state.url : void 0,
+		error: fresh ? state.error : void 0,
+		loading: key !== null && (!fresh || state.url === void 0 && !state.error)
+	};
+}
+const DENSITIES = [1, 2];
+const IDLE_IMAGE = {
+	src: void 0,
+	srcSet: void 0,
+	width: void 0,
+	height: void 0,
+	error: void 0,
+	loading: false
+};
+/**
+* The `src` and `srcSet` of a stored image at a variant or transform. Public
+* buckets build the URLs during render, with no request. Private buckets sign
+* one URL per density and sign them again before they expire, since a signed
+* URL's token covers the size it was signed at. Pass `null` as the target to
+* pause.
+*
+* ```tsx
+* const avatar = useImage(
+*   avatars,
+*   user ? { userId: user.id, version, ext } : null,
+*   "md",
+* );
+* <img
+*   src={avatar.src}
+*   srcSet={avatar.srcSet}
+*   width={avatar.width}
+*   height={avatar.height}
+*   alt=""
+* />;
+* ```
+*/
+function useImage(source, target, transform, options = {}) {
+	const { bucket } = source;
+	const given = [...new Set(options.densities ?? DENSITIES)];
+	const densities = given.length > 0 ? given : [1];
+	const ttl = ttlSeconds(options.ttl);
+	const { cacheNonce } = options;
+	const resolved = (() => {
+		try {
+			return ok(transformFor(bucket.id, bucket.variants, transform) ?? {});
+		} catch (cause) {
+			return err(toDbError(cause));
+		}
+	})();
+	const scaled = resolved.ok ? densities.map((density) => scaleTransform(resolved.data, density)) : [];
+	const key = target === null || target === void 0 || !resolved.ok ? null : JSON.stringify([
+		target,
+		scaled,
+		ttl,
+		cacheNonce
+	]);
+	const [state, setState] = useState({
+		key: null,
+		urls: void 0,
+		error: void 0
+	});
+	const latest = useRef({
+		target,
+		scaled,
+		cacheNonce
+	});
+	latest.current = {
+		target,
+		scaled,
+		cacheNonce
+	};
+	const isPublic = bucket.public;
+	useEffect(() => {
+		if (key === null || isPublic) return;
+		let active = true;
+		const sign = () => {
+			const current = latest.current;
+			const currentTarget = current.target;
+			if (currentTarget === null || currentTarget === void 0) return;
+			const signing = current.scaled.map(async (transformAt) => source.signedUrl(currentTarget, {
+				ttl,
+				transform: transformAt,
+				...current.cacheNonce ? { cacheNonce: current.cacheNonce } : {}
+			}));
+			Promise.all(signing).then((results) => {
+				if (!active) return;
+				const urls = [];
+				for (const result of results) {
+					if (!result.ok) {
+						setState((last) => ({
+							key,
+							urls: last.key === key ? last.urls : void 0,
+							error: result.error
+						}));
+						return;
+					}
+					urls.push(result.data);
+				}
+				setState({
+					key,
+					urls,
+					error: void 0
+				});
+			});
+		};
+		sign();
+		const timer = setInterval(sign, ttl * 1e3 * REFRESH_AT);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, [
+		source,
+		isPublic,
+		key,
+		ttl,
+		latest
+	]);
+	if (!resolved.ok) return {
+		...IDLE_IMAGE,
+		error: resolved.error
+	};
+	const size = {
+		width: resolved.data.width,
+		height: resolved.data.height
+	};
+	if (key === null || target === null || target === void 0) return {
+		...IDLE_IMAGE,
+		...size
+	};
+	if (bucket.public) return {
+		...publicImage(source, target, scaled, densities, cacheNonce),
+		...size
+	};
+	const fresh = state.key === key;
+	const urls = fresh ? state.urls : void 0;
+	return {
+		...urlsToImage(urls, densities),
+		...size,
+		error: fresh ? state.error : void 0,
+		loading: !fresh || urls === void 0 && !state.error
+	};
+}
+function urlsToImage(urls, densities) {
+	if (urls === void 0 || urls.length === 0) return {
+		src: void 0,
+		srcSet: void 0
+	};
+	return {
+		src: urls[0],
+		srcSet: urls.length > 1 ? urls.map((url, index) => `${url} ${String(densities[index])}x`).join(", ") : void 0
+	};
+}
+function publicImage(source, target, scaled, densities, cacheNonce) {
+	const urls = [];
+	for (const transformAt of scaled) {
+		const url = source.publicUrl(target, {
+			transform: transformAt,
+			...cacheNonce ? { cacheNonce } : {}
+		});
+		if (!url.ok) return {
+			...IDLE_IMAGE,
+			error: url.error
+		};
+		urls.push(url.data);
+	}
+	return {
+		...urlsToImage(urls, densities),
+		error: void 0,
+		loading: false
+	};
+}
+const IDLE = {
+	status: "idle",
+	progress: 0,
+	data: void 0,
+	error: void 0
+};
+/**
+* Uploads to a connected bucket with progress, abort and status state.
+* Unmounting aborts the upload in flight.
+*
+* ```tsx
+* const avatar = useUpload(avatars, { onSuccess: ({ path }) => save(path) });
+* <input type="file" onChange={(e) => avatar.upload({ userId }, e.target.files[0], { upsert: true })} />
+* <progress value={avatar.progress} />
+* ```
+*/
+function useUpload(bucket, options = {}) {
+	const [state, setState] = useState(IDLE);
+	const latest = useRef({
+		controller: void 0,
+		options
+	});
+	latest.current.options = options;
+	useEffect(() => () => {
+		latest.current.controller?.abort();
+	}, []);
+	const calls = useMemo(() => {
+		const stop = () => {
+			latest.current.controller?.abort();
+			latest.current.controller = void 0;
+			setState(IDLE);
+		};
+		return {
+			upload: async (target, body, uploadOptions) => {
+				latest.current.controller?.abort();
+				const controller = new AbortController();
+				latest.current.controller = controller;
+				const mine = () => latest.current.controller === controller;
+				setState({
+					...IDLE,
+					status: "uploading"
+				});
+				let result;
+				try {
+					result = await bucket.upload(target, body, {
+						...uploadOptions,
+						signal: controller.signal,
+						onProgress: (progress) => {
+							if (mine()) setState((last) => ({
+								...last,
+								progress
+							}));
+						}
+					});
+				} catch (cause) {
+					result = err(toDbError(cause));
+				}
+				if (!mine() || controller.signal.aborted) return result;
+				latest.current.controller = void 0;
+				if (result.ok) {
+					setState({
+						status: "done",
+						progress: 1,
+						data: result.data,
+						error: void 0
+					});
+					latest.current.options.onSuccess?.(result.data);
+				} else {
+					setState((last) => ({
+						...last,
+						status: "error",
+						error: result.error
+					}));
+					latest.current.options.onError?.(result.error);
+				}
+				return result;
+			},
+			abort: stop,
+			reset: stop
+		};
+	}, [bucket]);
+	return {
+		...state,
+		...calls
+	};
+}
+//#endregion
+export { useController as _, usePresence as a, useActionForm as b, defineDataHooks as c, useBlockQuery as d, useRecordForm as f, useBlockTenant as g, useBlockEnv as h, useDebouncedSearch as i, useBlockEvent as l, createRecordProvider as m, useSignedUrl as n, useConflicts as o, useRecordListState as p, useUpload as r, useSyncStatus as s, useImage as t, useBlockMutation as u, useLatest as v, useAction as y };