@vizejs/composable 0.426.2 → 0.427.0

package/dist/use-hid.mjs

@@ -0,0 +1,156 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { computed, hasInjectionContext, readonly, shallowReadonly, shallowRef, toValue, watch, watchPostEffect } from "vue";
+//#region src/use-hid.ts
+function browserHIDHost() {
+	if (typeof window === "undefined") return void 0;
+	const { navigator } = window;
+	const hid = "hid" in navigator ? navigator.hid : void 0;
+	return isHIDHost(hid) ? hid : void 0;
+}
+function isHIDHost(value) {
+	return typeof value === "object" && value !== null && "getDevices" in value;
+}
+function isInputReport(event) {
+	return "reportId" in event && "data" in event;
+}
+function describe(device) {
+	return {
+		device,
+		vendorId: device.vendorId,
+		productId: device.productId,
+		productName: device.productName,
+		opened: device.opened
+	};
+}
+/**
+* Talk to human-interface devices with the WebHID API.
+*
+* `devices` lists granted devices as plain snapshots and follows the host's
+* `connect` / `disconnect` events. Devices opened through `open()` forward
+* `inputreport` events to `onInputReport`. Every action resolves to a
+* boolean or value and records failures in `error`. Report listeners are
+* removed and opened devices closed when the owning reactive scope stops;
+* outside a scope call `close()` per device.
+*
+* Server rendering: `supported` is false and `devices` is empty.
+* Inside a component the host is resolved after mounting, so hydration
+* renders this server state first.
+*
+* @example
+* ```ts
+* const hid = useHID({ onInputReport: ({ reportId, data }) => read(reportId, data) });
+* const [device] = await hid.requestDevice([{ vendorId: 0x054c }]);
+* if (device) await hid.open(device);
+* ```
+*
+* @param options Host and input report callback.
+* @default options {}
+* @returns HID state and actions.
+*/
+function useHID(options = {}) {
+	const devices = shallowRef([]);
+	const error = shallowRef(void 0);
+	const reportListeners = /* @__PURE__ */ new Map();
+	const owned = /* @__PURE__ */ new Set();
+	const hydrated = shallowRef(!hasInjectionContext());
+	if (!hydrated.value) watchPostEffect(() => {
+		hydrated.value = true;
+	});
+	const resolveHost = () => {
+		if (!hydrated.value) return void 0;
+		return options.host === void 0 ? browserHIDHost() : toValue(options.host) ?? void 0;
+	};
+	const attempt = async (action, clearError = true) => {
+		try {
+			const value = await action();
+			if (clearError) error.value = void 0;
+			return value;
+		} catch (cause) {
+			error.value = cause;
+			return;
+		}
+	};
+	const getDevices = async () => {
+		const host = resolveHost();
+		const granted = host ? await attempt(() => host.getDevices(), false) : [];
+		if (granted) devices.value = granted.map(describe);
+		return devices.value;
+	};
+	const requestDevice = async (filters = []) => {
+		const host = resolveHost();
+		if (!host) return [];
+		const chosen = await attempt(() => host.requestDevice({ filters }));
+		await getDevices();
+		return chosen ?? [];
+	};
+	const unlisten = (device) => {
+		const listener = reportListeners.get(device);
+		if (!listener) return;
+		device.removeEventListener("inputreport", listener);
+		reportListeners.delete(device);
+	};
+	const open = async (device) => {
+		if (!device.opened && await attempt(() => device.open().then(() => true)) !== true) return false;
+		owned.add(device);
+		const onInputReport = options.onInputReport;
+		if (onInputReport && !reportListeners.has(device)) {
+			const listener = (event) => {
+				if (isInputReport(event)) onInputReport({
+					device,
+					reportId: event.reportId,
+					data: event.data
+				});
+			};
+			reportListeners.set(device, listener);
+			device.addEventListener("inputreport", listener);
+		}
+		devices.value = devices.value.map((entry) => describe(entry.device));
+		return true;
+	};
+	const close = async (device) => {
+		unlisten(device);
+		owned.delete(device);
+		const closed = !device.opened || await attempt(() => device.close().then(() => true)) === true;
+		devices.value = devices.value.map((entry) => describe(entry.device));
+		return closed;
+	};
+	const sendReport = async (device, reportId, data) => await attempt(() => device.sendReport(reportId, data).then(() => true)) === true;
+	const sendFeatureReport = async (device, reportId, data) => await attempt(() => device.sendFeatureReport(reportId, data).then(() => true)) === true;
+	const receiveFeatureReport = (device, reportId) => attempt(() => device.receiveFeatureReport(reportId));
+	const onConnectionChange = () => {
+		getDevices();
+	};
+	watch(resolveHost, (host, _previous, onCleanup) => {
+		if (!host) {
+			devices.value = [];
+			return;
+		}
+		host.addEventListener("connect", onConnectionChange);
+		host.addEventListener("disconnect", onConnectionChange);
+		onCleanup(() => {
+			host.removeEventListener("connect", onConnectionChange);
+			host.removeEventListener("disconnect", onConnectionChange);
+		});
+		getDevices();
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	tryOnScopeDispose(() => {
+		for (const device of owned) close(device);
+	});
+	return {
+		supported: computed(() => resolveHost() !== void 0),
+		devices: shallowReadonly(devices),
+		error: readonly(error),
+		requestDevice,
+		getDevices,
+		open,
+		close,
+		sendReport,
+		sendFeatureReport,
+		receiveFeatureReport
+	};
+}
+//#endregion
+export { useHID };

package/dist/use-id-generator.d.mts

@@ -0,0 +1,44 @@
+//#region src/use-id-generator.d.ts
+/** Options for {@link useIdGenerator}. */
+interface UseIdGeneratorOptions {
+  /**
+   * Namespace placed in front of every id.
+   *
+   * @default "vize"
+   */
+  readonly prefix?: string;
+  /**
+   * Stable seed identifying this generator. Defaults to Vue's `useId()`
+   * inside a component (identical on server and hydrating client), or to
+   * `"root"` outside one.
+   *
+   * @default useId() or "root"
+   */
+  readonly seed?: string;
+}
+/** Id factory returned by {@link useIdGenerator}. */
+type IdGenerator = (hint?: string) => string;
+/**
+ * Create an SSR-stable id factory for one component.
+ *
+ * Each call to the returned function yields
+ * `<prefix>-<seed>-<hint>-<n>` with a per-generator counter, so as long as
+ * ids are generated in the same order on the server and the client (for
+ * example during `setup`), the markup hydrates without mismatches. The seed
+ * comes from Vue's `useId()` inside components, which is itself stable across
+ * SSR and hydration; outside components pass an explicit `seed`. Characters
+ * outside `[A-Za-z0-9_-]` are replaced so ids are valid in selectors.
+ *
+ * @example
+ * ```ts
+ * const nextId = useIdGenerator({ prefix: "field" });
+ * const inputId = nextId("input"); // "field-v-0-input-0"
+ * ```
+ *
+ * @param options Prefix and seed.
+ * @default options {}
+ * @returns The id factory.
+ */
+declare function useIdGenerator(options?: UseIdGeneratorOptions): IdGenerator;
+//#endregion
+export { IdGenerator, UseIdGeneratorOptions, useIdGenerator };

package/dist/use-id-generator.mjs

@@ -0,0 +1,38 @@
+import { hasInjectionContext, useId } from "vue";
+//#region src/use-id-generator.ts
+function sanitize(part) {
+	return part.replaceAll(/[^\w-]/g, "-");
+}
+/**
+* Create an SSR-stable id factory for one component.
+*
+* Each call to the returned function yields
+* `<prefix>-<seed>-<hint>-<n>` with a per-generator counter, so as long as
+* ids are generated in the same order on the server and the client (for
+* example during `setup`), the markup hydrates without mismatches. The seed
+* comes from Vue's `useId()` inside components, which is itself stable across
+* SSR and hydration; outside components pass an explicit `seed`. Characters
+* outside `[A-Za-z0-9_-]` are replaced so ids are valid in selectors.
+*
+* @example
+* ```ts
+* const nextId = useIdGenerator({ prefix: "field" });
+* const inputId = nextId("input"); // "field-v-0-input-0"
+* ```
+*
+* @param options Prefix and seed.
+* @default options {}
+* @returns The id factory.
+*/
+function useIdGenerator(options = {}) {
+	const seed = options.seed ?? (hasInjectionContext() ? useId() : "root");
+	const base = `${sanitize(options.prefix ?? "vize")}-${sanitize(seed)}`;
+	let counter = 0;
+	return (hint = "id") => {
+		const id = `${base}-${sanitize(hint)}-${counter}`;
+		counter += 1;
+		return id;
+	};
+}
+//#endregion
+export { useIdGenerator };

package/dist/use-image.d.mts

@@ -0,0 +1,125 @@
+import { ComputedRef, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+
+//#region src/use-image.d.ts
+/** Image attributes accepted by {@link useImage}. */
+interface ImageSource {
+  /** Image URL. */
+  readonly src: string;
+  /** Responsive candidates. */
+  readonly srcset?: string;
+  /** Responsive layout sizes. */
+  readonly sizes?: string;
+  /** Alternative text. */
+  readonly alt?: string;
+  /** CORS mode. */
+  readonly crossOrigin?: "anonymous" | "use-credentials";
+  /** Referrer policy. */
+  readonly referrerPolicy?: ReferrerPolicy;
+  /** Loading strategy. */
+  readonly loading?: "eager" | "lazy";
+  /** Decoding hint. */
+  readonly decoding?: "sync" | "async" | "auto";
+  /** Fetch priority hint. */
+  readonly fetchPriority?: "high" | "low" | "auto";
+  /** Intrinsic width. */
+  readonly width?: number;
+  /** Intrinsic height. */
+  readonly height?: number;
+}
+/** `HTMLImageElement` subset used by {@link useImage}. */
+interface ImageLike extends EventTarget {
+  /** Image URL. */
+  src: string;
+  /** Responsive candidates. */
+  srcset: string;
+  /** Responsive layout sizes. */
+  sizes: string;
+  /** Alternative text. */
+  alt: string;
+  /** CORS mode. */
+  crossOrigin: string | null;
+  /** Referrer policy. */
+  referrerPolicy: string;
+  /** Loading strategy. */
+  loading: string;
+  /** Decoding hint. */
+  decoding: string;
+  /** Fetch priority hint; absent in engines without priority hints. */
+  fetchPriority?: string;
+  /** Intrinsic width. */
+  width: number;
+  /** Intrinsic height. */
+  height: number;
+}
+/** Image constructor used by {@link useImage}. */
+type ImageHost = new () => ImageLike;
+/** Loading state of the image. */
+type ImageStatus = "idle" | "loading" | "loaded" | "error";
+/** Discriminated outcome of {@link ImageControls.load}. */
+type ImageLoadResult = {
+  /** The image loaded. */readonly status: "loaded"; /** Loaded image. */
+  readonly image: ImageLike;
+} | {
+  /** The image failed to load. */readonly status: "error"; /** Native error event. */
+  readonly error: Event;
+} | {
+  /** A newer load started, the scope stopped, or no capability exists. */readonly status: "cancelled" | "unsupported";
+};
+/** Options for {@link useImage}. */
+interface UseImageOptions {
+  /**
+   * Load when created and whenever the source changes.
+   *
+   * @default true
+   */
+  readonly immediate?: boolean;
+  /**
+   * Image constructor for alternate runtimes and tests. A ref (not a
+   * getter) because the host is a constructor function.
+   *
+   * @default window.Image when a browser window exists
+   */
+  readonly host?: MaybeRef<ImageHost | null | undefined>;
+}
+/** Reactive state and actions returned by {@link useImage}. */
+interface ImageControls {
+  /** Loading state of the newest load. */
+  readonly status: Readonly<Ref<ImageStatus>>;
+  /** Most recently loaded image. */
+  readonly image: Readonly<ShallowRef<ImageLike | undefined>>;
+  /** Error event of the newest load, cleared when a load starts. */
+  readonly error: Readonly<ShallowRef<Event | undefined>>;
+  /** Whether the newest load succeeded. */
+  readonly ready: ComputedRef<boolean>;
+  /**
+   * Load the current source, superseding any pending load.
+   *
+   * @returns The discriminated outcome; never rejects.
+   */
+  readonly load: () => Promise<ImageLoadResult>;
+}
+/**
+ * Preload an image and track its loading state.
+ *
+ * A detached image is created for every source; the newest load wins, and
+ * superseded images have their listeners removed and their `src` cleared so
+ * the browser can abort the download. Use it to show a placeholder until
+ * the real image is decoded, or to validate URLs before rendering them.
+ *
+ * Server rendering: no image is created and `status` stays `"idle"`. The
+ * pending load is cancelled when the owning reactive scope stops.
+ *
+ * @example
+ * ```ts
+ * const { ready } = useImage(() => ({ src: avatarUrl.value }));
+ * // <img v-if="ready" :src="avatarUrl"> <Skeleton v-else />
+ * ```
+ *
+ * @param source Reactive image attributes.
+ * @param options Timing and capability.
+ * @default options {}
+ * @returns Image state and actions.
+ */
+declare function useImage(source: MaybeRefOrGetter<ImageSource>, options?: UseImageOptions): ImageControls;
+//#endregion
+export { ImageControls, ImageHost, ImageLike, ImageLoadResult, ImageSource, ImageStatus, UseImageOptions, useImage };

package/dist/use-image.mjs

@@ -0,0 +1,109 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { computed, readonly, ref, shallowRef, toValue, unref, watch } from "vue";
+//#region src/use-image.ts
+function browserImageHost() {
+	return typeof window === "undefined" ? void 0 : window.Image;
+}
+function applySource(image, source) {
+	if (source.crossOrigin !== void 0) image.crossOrigin = source.crossOrigin;
+	if (source.referrerPolicy !== void 0) image.referrerPolicy = source.referrerPolicy;
+	if (source.loading !== void 0) image.loading = source.loading;
+	if (source.decoding !== void 0) image.decoding = source.decoding;
+	if (source.fetchPriority !== void 0) image.fetchPriority = source.fetchPriority;
+	if (source.alt !== void 0) image.alt = source.alt;
+	if (source.width !== void 0) image.width = source.width;
+	if (source.height !== void 0) image.height = source.height;
+	if (source.sizes !== void 0) image.sizes = source.sizes;
+	if (source.srcset !== void 0) image.srcset = source.srcset;
+	image.src = source.src;
+}
+/**
+* Preload an image and track its loading state.
+*
+* A detached image is created for every source; the newest load wins, and
+* superseded images have their listeners removed and their `src` cleared so
+* the browser can abort the download. Use it to show a placeholder until
+* the real image is decoded, or to validate URLs before rendering them.
+*
+* Server rendering: no image is created and `status` stays `"idle"`. The
+* pending load is cancelled when the owning reactive scope stops.
+*
+* @example
+* ```ts
+* const { ready } = useImage(() => ({ src: avatarUrl.value }));
+* // <img v-if="ready" :src="avatarUrl"> <Skeleton v-else />
+* ```
+*
+* @param source Reactive image attributes.
+* @param options Timing and capability.
+* @default options {}
+* @returns Image state and actions.
+*/
+function useImage(source, options = {}) {
+	const status = ref("idle");
+	const image = shallowRef(void 0);
+	const error = shallowRef(void 0);
+	let cancelActive;
+	const resolveHost = () => options.host === void 0 ? browserImageHost() : unref(options.host) ?? void 0;
+	const load = () => {
+		cancelActive?.();
+		cancelActive = void 0;
+		const Host = resolveHost();
+		if (!Host) return Promise.resolve({ status: "unsupported" });
+		const candidate = new Host();
+		status.value = "loading";
+		error.value = void 0;
+		return new Promise((resolve) => {
+			const detach = () => {
+				candidate.removeEventListener("load", onLoad);
+				candidate.removeEventListener("error", onError);
+				cancelActive = void 0;
+			};
+			const onLoad = () => {
+				detach();
+				image.value = candidate;
+				status.value = "loaded";
+				resolve({
+					status: "loaded",
+					image: candidate
+				});
+			};
+			const onError = (event) => {
+				detach();
+				error.value = event;
+				status.value = "error";
+				resolve({
+					status: "error",
+					error: event
+				});
+			};
+			candidate.addEventListener("load", onLoad);
+			candidate.addEventListener("error", onError);
+			cancelActive = () => {
+				detach();
+				candidate.src = "";
+				resolve({ status: "cancelled" });
+			};
+			applySource(candidate, toValue(source));
+		});
+	};
+	if (options.immediate ?? true) watch(() => toValue(source), () => {
+		load();
+	}, {
+		immediate: true,
+		deep: true,
+		flush: "sync"
+	});
+	tryOnScopeDispose(() => {
+		cancelActive?.();
+	});
+	return {
+		status: readonly(status),
+		image,
+		error,
+		ready: computed(() => status.value === "loaded"),
+		load
+	};
+}
+//#endregion
+export { useImage };

package/dist/use-indexed-db.d.mts

@@ -0,0 +1,207 @@
+import { MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+
+//#region src/use-indexed-db.d.ts
+/** Minimal structural view of an `IDBRequest`. */
+interface IndexedDBRequestLike<Result> extends Pick<EventTarget, "addEventListener"> {
+  /** Result available after the `success` event. */
+  readonly result: Result;
+  /** Failure available after the `error` event. */
+  readonly error: unknown;
+}
+/** Minimal structural view of an `IDBObjectStore` using out-of-line keys. */
+interface IndexedDBObjectStoreLike {
+  /** Read the value stored under `key`. */
+  readonly get: (key: IDBValidKey) => IndexedDBRequestLike<unknown>;
+  /** Store `value` under `key`. */
+  readonly put: (value: unknown, key: IDBValidKey) => IndexedDBRequestLike<IDBValidKey>;
+  /** Delete `key`. */
+  readonly delete: (key: IDBValidKey) => IndexedDBRequestLike<undefined>;
+  /** List every key. */
+  readonly getAllKeys: () => IndexedDBRequestLike<IDBValidKey[]>;
+  /** Delete every entry. */
+  readonly clear: () => IndexedDBRequestLike<undefined>;
+}
+/** Minimal structural view of an `IDBTransaction` (`complete`/`error`/`abort` events). */
+interface IndexedDBTransactionLike extends Pick<EventTarget, "addEventListener"> {
+  /** Access an object store in the transaction scope. */
+  readonly objectStore: (name: string) => IndexedDBObjectStoreLike;
+  /** Failure available after `error`/`abort`. */
+  readonly error: unknown;
+}
+/** Minimal structural view of an `IDBDatabase`. */
+interface IndexedDBDatabaseLike {
+  /** Current schema version. */
+  readonly version: number;
+  /** Names of the existing object stores. */
+  readonly objectStoreNames: {
+    readonly contains: (name: string) => boolean;
+  };
+  /** Create an object store; only valid during `upgradeneeded`. */
+  readonly createObjectStore: (name: string) => unknown;
+  /** Start a transaction on one store. */
+  readonly transaction: (store: string, mode: "readonly" | "readwrite") => IndexedDBTransactionLike;
+  /** Close the connection. */
+  readonly close: () => void;
+}
+/** Minimal structural view of an `IDBFactory`; `window.indexedDB` satisfies it. */
+interface IndexedDBFactoryLike {
+  /** Open (and possibly upgrade) a database; fires `upgradeneeded`, `success`, `error`. */
+  readonly open: (name: string, version?: number) => IndexedDBRequestLike<IndexedDBDatabaseLike>;
+}
+/** Options for {@link createIndexedDBKeyval}. */
+interface IndexedDBKeyvalOptions {
+  /**
+   * Database name.
+   *
+   * @default "vize-keyval"
+   */
+  readonly database?: string;
+  /**
+   * Object store name; created on demand.
+   *
+   * @default "keyval"
+   */
+  readonly store?: string;
+  /**
+   * IndexedDB implementation.
+   *
+   * @default window.indexedDB when a browser window exists
+   */
+  readonly factory?: IndexedDBFactoryLike | null;
+}
+/** Promise-based key-value store returned by {@link createIndexedDBKeyval}. */
+interface IndexedDBKeyval {
+  /** Read a structured-cloned value, or `undefined` when absent. */
+  readonly get: (key: IDBValidKey) => Promise<unknown>;
+  /** Store a structured-cloneable value. Resolves when the transaction commits. */
+  readonly set: (key: IDBValidKey, value: unknown) => Promise<void>;
+  /** Delete a key. Resolves when the transaction commits. */
+  readonly delete: (key: IDBValidKey) => Promise<void>;
+  /** List every key. */
+  readonly keys: () => Promise<IDBValidKey[]>;
+  /** Delete every entry. */
+  readonly clear: () => Promise<void>;
+  /** Close the connection; the next operation reopens it. */
+  readonly close: () => void;
+}
+/**
+ * Create a small promise-based key-value store on one IndexedDB object
+ * store. The connection opens lazily on the first operation, the store is
+ * created on demand, and writes resolve once their transaction commits.
+ * Without IndexedDB (server rendering, privacy modes) every operation
+ * rejects with a tagged `[VIZE_COMPOSE_INDEXED_DB_UNAVAILABLE]` error.
+ *
+ * @param options Database, store, and implementation.
+ * @default options {}
+ * @returns Key-value operations.
+ */
+declare function createIndexedDBKeyval(options?: IndexedDBKeyvalOptions): IndexedDBKeyval;
+/** Stable failure codes reported by {@link useIndexedDB}. */
+type IndexedDBErrorCode = "read-failed" | "invalid-value" | "write-failed";
+/** Failure observed while synchronizing a value with IndexedDB. */
+interface IndexedDBFailure {
+  /** Which synchronization step failed. */
+  readonly code: IndexedDBErrorCode;
+  /** Key involved in the failure. */
+  readonly key: IDBValidKey;
+  /** Exact rejection, or the rejected candidate for `"invalid-value"`. */
+  readonly cause: unknown;
+}
+/** Options for {@link useIndexedDB}. */
+interface UseIndexedDBOptions<Value> {
+  /**
+   * Database name.
+   *
+   * @default "vize-keyval"
+   */
+  readonly database?: string;
+  /**
+   * Object store name; created on demand.
+   *
+   * @default "keyval"
+   */
+  readonly store?: string;
+  /**
+   * Reactive IndexedDB implementation. `null`/`undefined` keeps the default
+   * value, which is also what happens during server rendering.
+   *
+   * @default window.indexedDB when a browser window exists
+   */
+  readonly factory?: MaybeRefOrGetter<IndexedDBFactoryLike | null | undefined>;
+  /**
+   * Validation hook applied to every loaded value.
+   *
+   * @default a structural check that the value has the default's kind
+   */
+  readonly validate?: (candidate: unknown) => candidate is Value;
+  /**
+   * Persist the default value when the key is absent.
+   *
+   * @default true
+   */
+  readonly writeDefaults?: boolean;
+  /**
+   * Watch nested mutations of object values.
+   *
+   * @default true
+   */
+  readonly deep?: boolean;
+  /**
+   * Write timing relative to component rendering.
+   *
+   * @default "pre"
+   */
+  readonly flush?: "pre" | "post" | "sync";
+  /**
+   * Observe failures. Failures never reject out of the composable.
+   *
+   * @default undefined
+   */
+  readonly onError?: (failure: IndexedDBFailure) => void;
+}
+/** Reactive state and controls returned by {@link useIndexedDB}. */
+interface IndexedDBControls<Value> {
+  /** Writable value; assignments and nested mutations are persisted. */
+  readonly state: Ref<Value>;
+  /** Whether an IndexedDB implementation is attached. */
+  readonly supported: Readonly<Ref<boolean>>;
+  /** Whether the stored value for the current key has been loaded. */
+  readonly ready: Readonly<Ref<boolean>>;
+  /** Most recent failure, cleared by the next success. */
+  readonly error: Readonly<ShallowRef<IndexedDBFailure | undefined>>;
+  /** Reload the stored value. Never rejects. */
+  readonly refresh: () => Promise<void>;
+  /** Delete the key and restore the default value. Never rejects. */
+  readonly remove: () => Promise<void>;
+}
+/**
+ * Synchronize a reactive value with one IndexedDB key.
+ *
+ * Values are stored by structured clone, so objects, arrays, `Map`, `Set`,
+ * `Date`, typed arrays, and `Blob`s round-trip without a serializer. The
+ * value is loaded asynchronously: `state` holds the default until `ready`
+ * becomes `true`. Loaded values pass `validate` before they are accepted.
+ * Assignments and nested mutations are written back; changing the reactive
+ * `key` loads the new key (stale loads are discarded).
+ *
+ * Server rendering: without a browser `window` nothing is opened, `state`
+ * is the default, and `ready` stays `false`, so server and client first
+ * render identically. The connection closes and watchers stop with the
+ * owning reactive scope. Failures never reject; they are exposed through
+ * `error` and `onError`.
+ *
+ * @example
+ * ```ts
+ * const { state: draft, ready } = useIndexedDB("draft", { title: "", body: "" });
+ * ```
+ *
+ * @typeParam Value Stored value type, inferred from `defaultValue`.
+ * @param key Reactive IndexedDB key.
+ * @param defaultValue Value used until loaded, and when absent or invalid.
+ * @param options Database, store, implementation, and validation.
+ * @default options {}
+ * @returns The synchronized value and its controls.
+ */
+declare function useIndexedDB<Value>(key: MaybeRefOrGetter<IDBValidKey>, defaultValue: Value, options?: UseIndexedDBOptions<Value>): IndexedDBControls<Value>;
+//#endregion
+export { IndexedDBControls, IndexedDBDatabaseLike, IndexedDBErrorCode, IndexedDBFactoryLike, IndexedDBFailure, IndexedDBKeyval, IndexedDBKeyvalOptions, IndexedDBObjectStoreLike, IndexedDBRequestLike, IndexedDBTransactionLike, UseIndexedDBOptions, createIndexedDBKeyval, useIndexedDB };