@vizejs/composable 0.426.2 → 0.427.0

package/dist/use-permission.d.mts

@@ -0,0 +1,99 @@
+import { MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/use-permission.d.ts
+/**
+ * Permission names understood by at least one major browser.
+ *
+ * The `(string & {})` member keeps autocompletion for the well-known names
+ * while still accepting names that browsers add later.
+ */
+type WellKnownPermissionName = "accelerometer" | "background-fetch" | "background-sync" | "bluetooth" | "camera" | "clipboard-read" | "clipboard-write" | "display-capture" | "geolocation" | "gyroscope" | "idle-detection" | "local-fonts" | "magnetometer" | "microphone" | "midi" | "nfc" | "notifications" | "payment-handler" | "periodic-background-sync" | "persistent-storage" | "push" | "screen-wake-lock" | "speaker-selection" | "storage-access" | "window-management" | (string & {});
+/** Descriptor passed to `navigator.permissions.query`. */
+interface PermissionDescriptorLike {
+  /** Permission name. */
+  readonly name: WellKnownPermissionName;
+  /** Push: only user-visible notifications (required `true` by most browsers). */
+  readonly userVisibleOnly?: boolean;
+  /** MIDI: request system-exclusive message access. */
+  readonly sysex?: boolean;
+  /** Camera: request pan-tilt-zoom control. */
+  readonly panTiltZoom?: boolean;
+  /** Clipboard (Chromium): allow access without a user gesture. */
+  readonly allowWithoutGesture?: boolean;
+}
+/** Browser permission state, plus the capability states added by this package. */
+type PermissionQueryState = "granted" | "denied" | "prompt" | "unsupported" | "unknown";
+/** Minimal `PermissionStatus` shape consumed by {@link usePermission}. */
+interface PermissionStatusLike extends EventTarget {
+  /** Current state reported by the browser. */
+  readonly state: string;
+}
+/** Minimal `Permissions` shape consumed by {@link usePermission}. */
+interface PermissionsHost {
+  /**
+   * Query one permission. Rejects (TypeError) for names the browser does not
+   * know. Declared with method syntax so the DOM `Permissions` object, whose
+   * descriptor names are a narrower union, satisfies this interface.
+   */
+  query(descriptor: PermissionDescriptorLike): Promise<PermissionStatusLike>;
+}
+/** Options for {@link usePermission}. */
+interface UsePermissionOptions {
+  /**
+   * Permissions capability for alternate runtimes and tests.
+   *
+   * @default window.navigator.permissions when a browser window exists
+   */
+  readonly host?: MaybeRefOrGetter<PermissionsHost | null | undefined>;
+  /**
+   * State exposed before the first query settles and during server rendering.
+   *
+   * @default "unknown"
+   */
+  readonly initialState?: PermissionQueryState;
+}
+/** Reactive state returned by {@link usePermission}. */
+interface PermissionControls {
+  /**
+   * Current permission state. `"unsupported"` means the Permissions API (or
+   * this permission name) is unavailable; `"unknown"` means no answer yet.
+   */
+  readonly state: Readonly<Ref<PermissionQueryState>>;
+  /** Whether a Permissions capability is attached. */
+  readonly supported: Readonly<Ref<boolean>>;
+  /**
+   * Query the permission again and resubscribe to its changes.
+   *
+   * @returns The settled state.
+   */
+  readonly query: () => Promise<PermissionQueryState>;
+}
+/**
+ * Observe a browser permission reactively.
+ *
+ * The permission is queried when the composable is created and whenever
+ * the reactive name/descriptor or host changes; the `change` event of the
+ * returned `PermissionStatus` keeps `state` current (for example after the
+ * user revokes camera access in the site settings). The subscription is
+ * removed when the name changes and when the owning reactive scope stops.
+ *
+ * Server rendering: no browser window exists, so nothing is queried and
+ * `state` stays at `initialState` (`"unknown"`) with `supported` false.
+ * Unknown names (the browser rejects the query) report `"unsupported"`.
+ * Inside a component the first query runs after mounting, so hydration
+ * renders `initialState` exactly like the server did.
+ *
+ * @example
+ * ```ts
+ * const { state } = usePermission("camera");
+ * const canUseCamera = computed(() => state.value === "granted");
+ * ```
+ *
+ * @param name Reactive permission name or full descriptor.
+ * @param options Capability host and initial state.
+ * @default options {}
+ * @returns The reactive permission state and a re-query control.
+ */
+declare function usePermission(name: MaybeRefOrGetter<WellKnownPermissionName | PermissionDescriptorLike>, options?: UsePermissionOptions): PermissionControls;
+//#endregion
+export { PermissionControls, PermissionDescriptorLike, PermissionQueryState, PermissionStatusLike, PermissionsHost, UsePermissionOptions, WellKnownPermissionName, usePermission };

package/dist/use-permission.mjs

@@ -0,0 +1,92 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { hasInjectionContext, readonly, ref, toValue, watchEffect } from "vue";
+//#region src/use-permission.ts
+function normalizeState(state) {
+	return state === "granted" || state === "denied" || state === "prompt" ? state : "unknown";
+}
+function browserPermissions() {
+	if (typeof window === "undefined") return void 0;
+	return window.navigator.permissions ?? void 0;
+}
+function toDescriptor(name) {
+	return typeof name === "string" ? { name } : name;
+}
+/**
+* Observe a browser permission reactively.
+*
+* The permission is queried when the composable is created and whenever
+* the reactive name/descriptor or host changes; the `change` event of the
+* returned `PermissionStatus` keeps `state` current (for example after the
+* user revokes camera access in the site settings). The subscription is
+* removed when the name changes and when the owning reactive scope stops.
+*
+* Server rendering: no browser window exists, so nothing is queried and
+* `state` stays at `initialState` (`"unknown"`) with `supported` false.
+* Unknown names (the browser rejects the query) report `"unsupported"`.
+* Inside a component the first query runs after mounting, so hydration
+* renders `initialState` exactly like the server did.
+*
+* @example
+* ```ts
+* const { state } = usePermission("camera");
+* const canUseCamera = computed(() => state.value === "granted");
+* ```
+*
+* @param name Reactive permission name or full descriptor.
+* @param options Capability host and initial state.
+* @default options {}
+* @returns The reactive permission state and a re-query control.
+*/
+function usePermission(name, options = {}) {
+	const initialState = options.initialState ?? "unknown";
+	const state = ref(initialState);
+	const supported = ref(false);
+	let generation = 0;
+	let unsubscribe;
+	let active = true;
+	const resolveHost = () => options.host === void 0 ? browserPermissions() : toValue(options.host) ?? void 0;
+	const release = () => {
+		unsubscribe?.();
+		unsubscribe = void 0;
+	};
+	const query = async () => {
+		const current = ++generation;
+		release();
+		const host = resolveHost();
+		supported.value = host !== void 0;
+		if (!host) {
+			state.value = typeof window === "undefined" ? initialState : "unsupported";
+			return state.value;
+		}
+		let status;
+		try {
+			status = await host.query(toDescriptor(toValue(name)));
+		} catch {
+			if (current === generation) state.value = "unsupported";
+			return "unsupported";
+		}
+		if (current !== generation || !active) return normalizeState(status.state);
+		const update = () => {
+			state.value = normalizeState(status.state);
+		};
+		update();
+		status.addEventListener("change", update);
+		unsubscribe = () => status.removeEventListener("change", update);
+		return state.value;
+	};
+	if (typeof window !== "undefined" || options.host !== void 0) watchEffect(() => {
+		query();
+	}, { flush: hasInjectionContext() ? "post" : "sync" });
+	tryOnScopeDispose(() => {
+		active = false;
+		generation += 1;
+		release();
+	});
+	return {
+		state: readonly(state),
+		supported: readonly(supported),
+		query
+	};
+}
+//#endregion
+export { usePermission };

package/dist/use-plural-rules.d.mts

@@ -0,0 +1,79 @@
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+
+//#region src/use-plural-rules.d.ts
+/** CLDR plural categories. */
+type PluralCategory = Intl.LDMLPluralRule;
+/**
+ * One plural message: a template where `{count}` and `#` are replaced by the
+ * locale-formatted count, or a function receiving the raw and formatted count.
+ */
+type PluralMessage = string | ((count: number, formatted: string) => string);
+/**
+ * Messages per plural category. `other` is required because every locale
+ * falls back to it; exact-value overrides such as `"=0"` take precedence
+ * over categories.
+ */
+type PluralMessages = { readonly [Category in Exclude<PluralCategory, "other">]?: PluralMessage } & {
+  /** Required fallback message. */readonly other: PluralMessage;
+} & {
+  readonly [exact: `=${number}`]: PluralMessage | undefined;
+};
+/** Options for {@link usePluralRules}. */
+interface UsePluralRulesOptions extends Intl.PluralRulesOptions {
+  /**
+   * Locale used for plural selection and count formatting. Pass it
+   * explicitly for hydration-stable server rendering.
+   *
+   * @default the browser language, otherwise "en"
+   */
+  readonly locale?: string | Intl.Locale;
+}
+/** Reactive plural selection returned by {@link usePluralRules}. */
+interface PluralRulesControls {
+  /** Canonical locale in use. */
+  readonly locale: ComputedRef<string>;
+  /** Plural rules for the current locale and options. */
+  readonly rules: ComputedRef<Intl.PluralRules>;
+  /** Category of the current count. */
+  readonly category: ComputedRef<PluralCategory>;
+  /** Message for the current count with `{count}` / `#` interpolated. */
+  readonly message: ComputedRef<string>;
+  /**
+   * Plural category of any count.
+   *
+   * @param count Count to classify.
+   * @returns The CLDR category.
+   */
+  readonly select: (count: number) => PluralCategory;
+  /**
+   * Message for any count.
+   *
+   * @param count Count to render.
+   * @returns The interpolated message.
+   */
+  readonly format: (count: number) => string;
+}
+/**
+ * Choose and render a message by CLDR plural category (`Intl.PluralRules`).
+ *
+ * Messages are typed per category with a mandatory `other`, plus optional
+ * exact overrides (`"=0": "No items"`). Cardinal (`1 item`) and ordinal
+ * (`1st`, `2nd`) rules are supported via `type`. The count is formatted
+ * with the same locale for interpolation. Everything is derived state:
+ * no listeners or timers, deterministic during server rendering when the
+ * locale is explicit. Invalid options surface as the platform `RangeError`.
+ *
+ * @example
+ * ```ts
+ * const { message } = usePluralRules(count, { "=0": "No files", one: "# file", other: "# files" }, { locale: "en" });
+ * ```
+ *
+ * @param count Reactive count.
+ * @param messages Reactive messages per category.
+ * @param options Reactive locale and `Intl.PluralRules` options.
+ * @default options {}
+ * @returns Reactive category, message, and selection helpers.
+ */
+declare function usePluralRules(count: MaybeRefOrGetter<number>, messages: MaybeRefOrGetter<PluralMessages>, options?: MaybeRefOrGetter<UsePluralRulesOptions>): PluralRulesControls;
+//#endregion
+export { PluralCategory, PluralMessage, PluralMessages, PluralRulesControls, UsePluralRulesOptions, usePluralRules };

package/dist/use-plural-rules.mjs

@@ -0,0 +1,59 @@
+import { useLocale } from "./locale.mjs";
+import { computed, toValue } from "vue";
+//#region src/use-plural-rules.ts
+function browserLanguage() {
+	return typeof window === "undefined" ? void 0 : window.navigator.language;
+}
+function renderMessage(message, count, formatted) {
+	return typeof message === "function" ? message(count, formatted) : message.replaceAll("{count}", formatted).replaceAll("#", formatted);
+}
+/**
+* Choose and render a message by CLDR plural category (`Intl.PluralRules`).
+*
+* Messages are typed per category with a mandatory `other`, plus optional
+* exact overrides (`"=0": "No items"`). Cardinal (`1 item`) and ordinal
+* (`1st`, `2nd`) rules are supported via `type`. The count is formatted
+* with the same locale for interpolation. Everything is derived state:
+* no listeners or timers, deterministic during server rendering when the
+* locale is explicit. Invalid options surface as the platform `RangeError`.
+*
+* @example
+* ```ts
+* const { message } = usePluralRules(count, { "=0": "No files", one: "# file", other: "# files" }, { locale: "en" });
+* ```
+*
+* @param count Reactive count.
+* @param messages Reactive messages per category.
+* @param options Reactive locale and `Intl.PluralRules` options.
+* @default options {}
+* @returns Reactive category, message, and selection helpers.
+*/
+function usePluralRules(count, messages, options = {}) {
+	const localeControls = useLocale(() => toValue(options).locale, { detect: browserLanguage });
+	const rules = computed(() => {
+		const { locale: _locale, ...ruleOptions } = toValue(options);
+		return new Intl.PluralRules(localeControls.locale.value, ruleOptions);
+	});
+	const numberFormat = computed(() => {
+		const { minimumFractionDigits, maximumFractionDigits } = toValue(options);
+		return localeControls.number({
+			...minimumFractionDigits === void 0 ? {} : { minimumFractionDigits },
+			...maximumFractionDigits === void 0 ? {} : { maximumFractionDigits }
+		});
+	});
+	const select = (value) => rules.value.select(value);
+	const format = (value) => {
+		const table = toValue(messages);
+		return renderMessage(table[`=${value}`] ?? table[select(value)] ?? table.other, value, numberFormat.value.format(value));
+	};
+	return {
+		locale: localeControls.locale,
+		rules,
+		category: computed(() => select(toValue(count))),
+		message: computed(() => format(toValue(count))),
+		select,
+		format
+	};
+}
+//#endregion
+export { usePluralRules };

package/dist/use-push-subscription.d.mts

@@ -0,0 +1,154 @@
+import { ComputedRef, MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/use-push-subscription.d.ts
+/** Push permission states. */
+type PushPermissionState = "granted" | "denied" | "prompt";
+/** JSON form of a push subscription (`PushSubscription.toJSON()`). */
+interface PushSubscriptionJsonLike {
+  /** Push service endpoint. */
+  readonly endpoint?: string | undefined;
+  /** Expiration time in epoch milliseconds, if any. */
+  readonly expirationTime?: number | null | undefined;
+  /** Base64url-encoded keys (`p256dh`, `auth`). */
+  readonly keys?: Readonly<Record<string, string>> | undefined;
+}
+/** Minimal `PushSubscription` consumed by {@link usePushSubscription}. */
+interface PushSubscriptionLike {
+  /** Push service endpoint. */
+  readonly endpoint: string;
+  /** Expiration time in epoch milliseconds, if any. */
+  readonly expirationTime: number | null;
+  /** Serialize for a server. */
+  toJSON(): PushSubscriptionJsonLike;
+  /** Cancel the subscription. */
+  unsubscribe(): Promise<boolean>;
+}
+/** Options forwarded to `PushManager.subscribe`. */
+interface PushManagerSubscribeOptions {
+  /** VAPID public key bytes. */
+  readonly applicationServerKey: BufferSource;
+  /** Only user-visible notifications. */
+  readonly userVisibleOnly: boolean;
+}
+/** Minimal `PushManager` consumed by {@link usePushSubscription}. */
+interface PushManagerLike {
+  /** Create (or return the existing) subscription. */
+  subscribe(options: PushManagerSubscribeOptions): Promise<PushSubscriptionLike>;
+  /** Current subscription, if any. */
+  getSubscription(): Promise<PushSubscriptionLike | null>;
+  /** Permission state for push. */
+  permissionState(options?: {
+    readonly userVisibleOnly?: boolean;
+  }): Promise<PushPermissionState>;
+}
+/** Registration-like owner of a push manager. */
+interface PushRegistrationLike {
+  /** The registration's push manager. */
+  readonly pushManager: PushManagerLike;
+}
+/** Options for {@link usePushSubscription}. */
+interface UsePushSubscriptionOptions {
+  /**
+   * Service worker registration owning the push manager. `null` while it is
+   * not known yet.
+   *
+   * @default window.navigator.serviceWorker.ready when push is available
+   */
+  readonly registration?: MaybeRefOrGetter<PushRegistrationLike | null | undefined>;
+  /**
+   * Load the existing subscription as soon as a registration is known.
+   *
+   * @default true
+   */
+  readonly immediate?: boolean;
+}
+/** Arguments of {@link PushSubscriptionControls.subscribe}. */
+interface PushSubscribeOptions {
+  /** VAPID public key as a base64url string or raw bytes. */
+  readonly applicationServerKey: string | BufferSource;
+  /**
+   * Only user-visible notifications (required by most browsers).
+   *
+   * @default true
+   */
+  readonly userVisibleOnly?: boolean;
+}
+/** Serializable snapshot of the current subscription. */
+interface PushSubscriptionSnapshot {
+  /** Push service endpoint. */
+  readonly endpoint: string;
+  /** Expiration time in epoch milliseconds, or `null`. */
+  readonly expirationTime: number | null;
+  /** Base64url-encoded keys (`p256dh`, `auth`). */
+  readonly keys: Readonly<Record<string, string>>;
+}
+/** Reactive state and actions returned by {@link usePushSubscription}. */
+interface PushSubscriptionControls {
+  /** Whether the Push API is available. */
+  readonly supported: ComputedRef<boolean>;
+  /** Current subscription, or `null`. */
+  readonly subscription: Readonly<ShallowRef<PushSubscriptionLike | null>>;
+  /** JSON snapshot of the current subscription, or `null`. */
+  readonly json: ComputedRef<PushSubscriptionSnapshot | null>;
+  /** Most recent failure, cleared by the next successful action. */
+  readonly error: Readonly<ShallowRef<unknown>>;
+  /**
+   * Subscribe to push messages. Rejects with a tagged `TypeError` when the
+   * key string is not valid base64url.
+   *
+   * @param options VAPID key and visibility flag.
+   * @returns The subscription, or `null` when unsupported or on failure.
+   */
+  readonly subscribe: (options: PushSubscribeOptions) => Promise<PushSubscriptionLike | null>;
+  /**
+   * Cancel the current subscription.
+   *
+   * @returns Whether a subscription was cancelled.
+   */
+  readonly unsubscribe: () => Promise<boolean>;
+  /**
+   * Re-read the existing subscription.
+   *
+   * @returns The subscription, or `null`.
+   */
+  readonly refresh: () => Promise<PushSubscriptionLike | null>;
+  /**
+   * Query the push permission state.
+   *
+   * @param userVisibleOnly Query for user-visible pushes.
+   * @default userVisibleOnly true
+   * @returns The permission state, or `"unsupported"`.
+   */
+  readonly permissionState: (userVisibleOnly?: boolean) => Promise<PushPermissionState | "unsupported">;
+}
+/**
+ * Manage a Web Push subscription.
+ *
+ * Uses the push manager of `options.registration`, or of
+ * `navigator.serviceWorker.ready` by default. The existing subscription is
+ * loaded when the registration becomes known; `subscribe` accepts the VAPID
+ * key as a base64url string. `json` is the snapshot to send to a push server.
+ * Nothing needs cleanup; pending results are ignored after the owning
+ * reactive scope stops.
+ *
+ * Server rendering: nothing is read, `supported` is false and the
+ * subscription is `null`.
+ * Inside a component the host is resolved after mounting, so hydration
+ * renders this server state first.
+ *
+ * @example
+ * ```ts
+ * const push = usePushSubscription();
+ * const enable = async () => {
+ *   await push.subscribe({ applicationServerKey: VAPID_PUBLIC_KEY });
+ *   await fetch("/api/push", { method: "POST", body: JSON.stringify(push.json.value) });
+ * };
+ * ```
+ *
+ * @param options Registration override and initial read policy.
+ * @default options {}
+ * @returns Subscription state and actions.
+ */
+declare function usePushSubscription(options?: UsePushSubscriptionOptions): PushSubscriptionControls;
+//#endregion
+export { PushManagerLike, PushManagerSubscribeOptions, PushPermissionState, PushRegistrationLike, PushSubscribeOptions, PushSubscriptionControls, PushSubscriptionJsonLike, PushSubscriptionLike, PushSubscriptionSnapshot, UsePushSubscriptionOptions, usePushSubscription };

package/dist/use-push-subscription.mjs

@@ -0,0 +1,146 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { computed, hasInjectionContext, readonly, shallowReadonly, shallowRef, toValue, watch, watchPostEffect } from "vue";
+//#region src/use-push-subscription.ts
+const base64UrlAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+function decodeApplicationServerKey(text) {
+	const clean = text.trim().replace(/=+$/u, "").replaceAll("+", "-").replaceAll("/", "_");
+	const invalid = () => /* @__PURE__ */ new TypeError("[VIZE_COMPOSE_PUSH_INVALID_KEY] applicationServerKey must be a base64url string.");
+	if (clean.length % 4 === 1) throw invalid();
+	const bytes = new Uint8Array(Math.floor(clean.length * 3 / 4));
+	let buffer = 0;
+	let bits = 0;
+	let offset = 0;
+	for (const character of clean) {
+		const value = base64UrlAlphabet.indexOf(character);
+		if (value === -1) throw invalid();
+		buffer = (buffer << 6 | value) & 16777215;
+		bits += 6;
+		if (bits >= 8) {
+			bits -= 8;
+			bytes[offset] = buffer >> bits & 255;
+			offset += 1;
+		}
+	}
+	return bytes;
+}
+function browserContainer() {
+	if (typeof window === "undefined" || !("PushManager" in window)) return void 0;
+	const { navigator } = window;
+	return "serviceWorker" in navigator && navigator.serviceWorker ? navigator.serviceWorker : void 0;
+}
+/**
+* Manage a Web Push subscription.
+*
+* Uses the push manager of `options.registration`, or of
+* `navigator.serviceWorker.ready` by default. The existing subscription is
+* loaded when the registration becomes known; `subscribe` accepts the VAPID
+* key as a base64url string. `json` is the snapshot to send to a push server.
+* Nothing needs cleanup; pending results are ignored after the owning
+* reactive scope stops.
+*
+* Server rendering: nothing is read, `supported` is false and the
+* subscription is `null`.
+* Inside a component the host is resolved after mounting, so hydration
+* renders this server state first.
+*
+* @example
+* ```ts
+* const push = usePushSubscription();
+* const enable = async () => {
+*   await push.subscribe({ applicationServerKey: VAPID_PUBLIC_KEY });
+*   await fetch("/api/push", { method: "POST", body: JSON.stringify(push.json.value) });
+* };
+* ```
+*
+* @param options Registration override and initial read policy.
+* @default options {}
+* @returns Subscription state and actions.
+*/
+function usePushSubscription(options = {}) {
+	const subscription = shallowRef(null);
+	const error = shallowRef(void 0);
+	let active = true;
+	const hydrated = shallowRef(!hasInjectionContext());
+	if (!hydrated.value) watchPostEffect(() => {
+		hydrated.value = true;
+	});
+	const source = () => {
+		if (!hydrated.value) return void 0;
+		return options.registration === void 0 ? browserContainer() : toValue(options.registration) ?? void 0;
+	};
+	const resolveManager = async () => {
+		const current = source();
+		if (!current) return void 0;
+		return "pushManager" in current ? current.pushManager : (await current.ready).pushManager;
+	};
+	const attempt = async (fallback, action) => {
+		try {
+			const manager = await resolveManager();
+			if (!manager) return fallback;
+			const value = await action(manager);
+			if (active) error.value = void 0;
+			return value;
+		} catch (cause) {
+			if (active) error.value = cause;
+			return fallback;
+		}
+	};
+	const refresh = () => attempt(null, async (manager) => {
+		const current = await manager.getSubscription();
+		if (active) subscription.value = current;
+		return current;
+	});
+	const subscribe = async ({ applicationServerKey, userVisibleOnly = true }) => {
+		const key = typeof applicationServerKey === "string" ? decodeApplicationServerKey(applicationServerKey) : applicationServerKey;
+		return attempt(null, async (manager) => {
+			const next = await manager.subscribe({
+				applicationServerKey: key,
+				userVisibleOnly
+			});
+			if (active) subscription.value = next;
+			return next;
+		});
+	};
+	const unsubscribe = async () => {
+		const current = subscription.value;
+		if (!current) return false;
+		try {
+			const removed = await current.unsubscribe();
+			if (active && removed && subscription.value === current) subscription.value = null;
+			if (active) error.value = void 0;
+			return removed;
+		} catch (cause) {
+			if (active) error.value = cause;
+			return false;
+		}
+	};
+	const permissionState = (userVisibleOnly = true) => attempt("unsupported", (manager) => manager.permissionState({ userVisibleOnly }));
+	if (options.immediate ?? true) watch(source, (current) => {
+		if (current) refresh();
+		else subscription.value = null;
+	}, { immediate: true });
+	tryOnScopeDispose(() => {
+		active = false;
+	});
+	return {
+		supported: computed(() => source() !== void 0),
+		subscription: shallowReadonly(subscription),
+		json: computed(() => {
+			const current = subscription.value;
+			if (!current) return null;
+			const serialized = current.toJSON();
+			return {
+				endpoint: serialized.endpoint ?? current.endpoint,
+				expirationTime: serialized.expirationTime ?? current.expirationTime,
+				keys: serialized.keys ?? {}
+			};
+		}),
+		error: readonly(error),
+		subscribe,
+		unsubscribe,
+		refresh,
+		permissionState
+	};
+}
+//#endregion
+export { usePushSubscription };