@vizejs/composable 0.426.2 → 0.427.0

package/dist/use-navigation-api.mjs

@@ -0,0 +1,231 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { computed, hasInjectionContext, readonly, shallowRef, toValue, watch, watchPostEffect } from "vue";
+//#region src/use-navigation-api.ts
+function isNavigationHost(candidate) {
+	return typeof candidate === "object" && candidate !== null && typeof Reflect.get(candidate, "navigate") === "function" && typeof Reflect.get(candidate, "addEventListener") === "function";
+}
+function browserNavigation() {
+	if (typeof window === "undefined") return void 0;
+	const candidate = Reflect.get(window, "navigation");
+	return isNavigationHost(candidate) ? candidate : void 0;
+}
+function isNavigateEvent(event) {
+	return "destination" in event && "canIntercept" in event && "intercept" in event;
+}
+function isEntryChangeEvent(event) {
+	return "from" in event && "navigationType" in event;
+}
+function snapshot(entry) {
+	return {
+		url: entry.url,
+		key: entry.key,
+		id: entry.id,
+		index: entry.index,
+		sameDocument: entry.sameDocument
+	};
+}
+function ignore() {}
+/**
+* Reactive access to the Navigation API (`window.navigation`).
+*
+* Entry snapshots refresh on `currententrychange`, `navigatesuccess` and
+* `navigateerror`. Actions resolve to a {@link NavigationOutcome} and never
+* reject; failures also land in `error`. Listeners (including interceptors)
+* are removed when the owning reactive scope stops; outside a scope the
+* caller removes them with the returned functions.
+*
+* Server rendering: nothing is read or subscribed; `supported` is false,
+* `currentEntry` null, `entries` empty, and actions resolve to
+* `{ status: "unsupported" }`.
+* Inside a component the host is resolved after mounting, so hydration
+* renders this server state first.
+*
+* @example
+* ```ts
+* const nav = useNavigationApi<{ tab: string }>();
+* nav.intercept((url) => url.pathname.startsWith("/app/"), {
+*   handler: async () => renderRoute(location.pathname),
+* });
+* ```
+*
+* @param options Navigation host and state parser.
+* @default options {}
+* @returns Navigation state, hooks and actions.
+*/
+function useNavigationApi(options = {}) {
+	const currentEntry = shallowRef(null);
+	const entries = shallowRef([]);
+	const canGoBack = shallowRef(false);
+	const canGoForward = shallowRef(false);
+	const transition = shallowRef(null);
+	const state = shallowRef(void 0);
+	const error = shallowRef(void 0);
+	const navigateListeners = /* @__PURE__ */ new Set();
+	const successListeners = /* @__PURE__ */ new Set();
+	const errorListeners = /* @__PURE__ */ new Set();
+	const changeListeners = /* @__PURE__ */ new Set();
+	const hydrated = shallowRef(!hasInjectionContext());
+	if (!hydrated.value) watchPostEffect(() => {
+		hydrated.value = true;
+	});
+	const resolveHost = () => {
+		if (!hydrated.value) return void 0;
+		if (options.navigation === void 0) return browserNavigation();
+		return toValue(options.navigation) ?? void 0;
+	};
+	const parse = (raw) => {
+		if (options.parseState) return options.parseState(raw);
+		return raw;
+	};
+	const getState = () => {
+		const entry = resolveHost()?.currentEntry;
+		return entry ? parse(entry.getState()) : void 0;
+	};
+	const refresh = (host) => {
+		const entry = host?.currentEntry ?? null;
+		currentEntry.value = entry ? snapshot(entry) : null;
+		entries.value = host ? host.entries().map(snapshot) : [];
+		canGoBack.value = host?.canGoBack ?? false;
+		canGoForward.value = host?.canGoForward ?? false;
+		const active = host?.transition ?? null;
+		transition.value = active ? {
+			navigationType: active.navigationType,
+			from: snapshot(active.from)
+		} : null;
+		state.value = entry ? parse(entry.getState()) : void 0;
+	};
+	const add = (set, listener) => {
+		set.add(listener);
+		return () => {
+			set.delete(listener);
+		};
+	};
+	const stopWatch = watch(resolveHost, (host, _previous, onCleanup) => {
+		refresh(host);
+		if (!host) return;
+		const onNavigate = (event) => {
+			if (!isNavigateEvent(event)) return;
+			for (const listener of Array.from(navigateListeners)) listener(event);
+		};
+		const onSuccess = () => {
+			refresh(host);
+			for (const listener of Array.from(successListeners)) listener();
+		};
+		const onError = (event) => {
+			refresh(host);
+			const cause = Reflect.get(event, "error");
+			error.value = cause;
+			for (const listener of Array.from(errorListeners)) listener(cause);
+		};
+		const onChange = (event) => {
+			refresh(host);
+			if (!isEntryChangeEvent(event)) return;
+			const change = {
+				navigationType: event.navigationType,
+				from: snapshot(event.from)
+			};
+			for (const listener of Array.from(changeListeners)) listener(change);
+		};
+		host.addEventListener("navigate", onNavigate);
+		host.addEventListener("navigatesuccess", onSuccess);
+		host.addEventListener("navigateerror", onError);
+		host.addEventListener("currententrychange", onChange);
+		onCleanup(() => {
+			host.removeEventListener("navigate", onNavigate);
+			host.removeEventListener("navigatesuccess", onSuccess);
+			host.removeEventListener("navigateerror", onError);
+			host.removeEventListener("currententrychange", onChange);
+		});
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	const perform = async (action) => {
+		const host = resolveHost();
+		if (!host) return { status: "unsupported" };
+		try {
+			const result = action(host);
+			result.committed?.catch(ignore);
+			const entry = await result.finished ?? host.currentEntry;
+			error.value = void 0;
+			refresh(host);
+			return entry ? {
+				status: "success",
+				entry: snapshot(entry)
+			} : {
+				status: "error",
+				error: void 0
+			};
+		} catch (cause) {
+			error.value = cause;
+			return {
+				status: "error",
+				error: cause
+			};
+		}
+	};
+	const intercept = (predicate, interceptOptions = {}) => add(navigateListeners, (event) => {
+		if (!event.canIntercept || event.hashChange || event.downloadRequest !== null) return;
+		const url = new URL(event.destination.url);
+		const current = resolveHost()?.currentEntry?.url;
+		if (current && new URL(current).origin !== url.origin) return;
+		if (!predicate(url, event)) return;
+		const { handler, focusReset, scroll } = interceptOptions;
+		event.intercept({
+			...handler ? { handler: async () => handler(event) } : {},
+			...focusReset ? { focusReset } : {},
+			...scroll ? { scroll } : {}
+		});
+	});
+	const infoOption = (info) => info === void 0 ? {} : { info };
+	tryOnScopeDispose(() => {
+		stopWatch();
+		navigateListeners.clear();
+		successListeners.clear();
+		errorListeners.clear();
+		changeListeners.clear();
+	});
+	return {
+		supported: computed(() => resolveHost() !== void 0),
+		currentEntry: readonly(currentEntry),
+		entries: readonly(entries),
+		canGoBack: readonly(canGoBack),
+		canGoForward: readonly(canGoForward),
+		transition: readonly(transition),
+		state: computed(() => state.value),
+		error: readonly(error),
+		getState,
+		onNavigate: (listener) => add(navigateListeners, listener),
+		onNavigateSuccess: (listener) => add(successListeners, listener),
+		onNavigateError: (listener) => add(errorListeners, listener),
+		onCurrentEntryChange: (listener) => add(changeListeners, listener),
+		intercept,
+		navigate: (url, navigateOptions = {}) => perform((host) => host.navigate(url, {
+			..."state" in navigateOptions ? { state: navigateOptions.state } : {},
+			...navigateOptions.history ? { history: navigateOptions.history } : {},
+			...infoOption(navigateOptions.info)
+		})),
+		back: (info) => perform((host) => host.back(infoOption(info))),
+		forward: (info) => perform((host) => host.forward(infoOption(info))),
+		traverseTo: (key, info) => perform((host) => host.traverseTo(key, infoOption(info))),
+		reload: (reloadOptions = {}) => perform((host) => host.reload({
+			..."state" in reloadOptions ? { state: reloadOptions.state } : {},
+			...infoOption(reloadOptions.info)
+		})),
+		updateCurrentEntry: ({ state: next }) => {
+			const host = resolveHost();
+			if (!host) return false;
+			try {
+				host.updateCurrentEntry({ state: next });
+				error.value = void 0;
+				refresh(host);
+				return true;
+			} catch (cause) {
+				error.value = cause;
+				return false;
+			}
+		}
+	};
+}
+//#endregion
+export { useNavigationApi };

package/dist/use-notification.d.mts

@@ -0,0 +1,139 @@
+import { ComputedRef, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+
+//#region src/use-notification.d.ts
+/** Notification permission, plus `"unsupported"` when the API is missing. */
+type NotificationPermissionState = "default" | "granted" | "denied" | "unsupported";
+/** Options accepted by the `Notification` constructor. */
+interface NotificationOptionsLike<Data> {
+  /** Body text. */
+  readonly body?: string;
+  /** Icon URL. */
+  readonly icon?: string;
+  /** Monochrome badge URL for constrained surfaces. */
+  readonly badge?: string;
+  /** Grouping tag; a new notification with the same tag replaces the old one. */
+  readonly tag?: string;
+  /** BCP 47 language tag. */
+  readonly lang?: string;
+  /** Text direction. */
+  readonly dir?: "auto" | "ltr" | "rtl";
+  /** Keep the notification visible until the user interacts with it. */
+  readonly requireInteraction?: boolean;
+  /** Suppress sounds and vibration. */
+  readonly silent?: boolean | null;
+  /** Application data attached to the notification. */
+  readonly data?: Data;
+}
+/** Minimal `Notification` instance consumed by {@link useWebNotification}. */
+interface NotificationLike extends EventTarget {
+  /** Dismiss the notification. */
+  close(): void;
+}
+/** Minimal `Notification` constructor (with its static members). */
+interface NotificationHost {
+  /** Current permission. */
+  readonly permission: string;
+  /** Ask the user for permission. */
+  requestPermission(): Promise<string>;
+  /** Show a notification. */
+  new (title: string, options?: NotificationOptionsLike<unknown>): NotificationLike;
+}
+/** Default notification content for {@link useWebNotification}. */
+interface WebNotificationDefaults<Data> extends NotificationOptionsLike<Data> {
+  /** Default title. */
+  readonly title?: string;
+}
+/** Options for {@link useWebNotification}. */
+interface UseWebNotificationOptions<Data> {
+  /**
+   * Notification constructor for alternate runtimes and tests. A ref (not a
+   * getter) because the host itself is a constructor function.
+   *
+   * @default window.Notification when it exists
+   */
+  readonly host?: MaybeRef<NotificationHost | null | undefined>;
+  /**
+   * Reactive default title and options merged into every `show` call.
+   *
+   * @default {}
+   */
+  readonly defaults?: MaybeRefOrGetter<WebNotificationDefaults<Data>>;
+  /**
+   * Request permission from `show` when it has not been decided yet.
+   *
+   * @default true
+   */
+  readonly requestPermissionOnShow?: boolean;
+}
+/** Discriminated outcome of {@link WebNotificationControls.show}. */
+type WebNotificationResult = {
+  /** The notification is showing. */readonly status: "shown"; /** The shown notification. */
+  readonly notification: NotificationLike;
+} | {
+  /** Permission is not granted, the API is missing, or construction failed. */readonly status: "denied" | "unsupported" | "failed"; /** Exact error thrown by the host, when one was thrown. */
+  readonly error: unknown;
+};
+/** Notification lifecycle events exposed by {@link useWebNotification}. */
+type WebNotificationEvent = "click" | "show" | "error" | "close";
+/** Reactive state and actions returned by {@link useWebNotification}. */
+interface WebNotificationControls<Data> {
+  /** Whether the Notifications API is available. */
+  readonly supported: ComputedRef<boolean>;
+  /** Current permission state. */
+  readonly permission: Readonly<Ref<NotificationPermissionState>>;
+  /** Most recently shown notification, cleared when it closes. */
+  readonly notification: Readonly<ShallowRef<NotificationLike | undefined>>;
+  /** Data attached to the current notification. */
+  readonly data: Readonly<ShallowRef<Data | undefined>>;
+  /**
+   * Ask the user for permission.
+   *
+   * @returns The resulting permission state.
+   */
+  readonly requestPermission: () => Promise<NotificationPermissionState>;
+  /**
+   * Show a notification, replacing the current one.
+   *
+   * @param title Title overriding the default.
+   * @param options Options merged over the defaults.
+   * @returns The discriminated outcome; never rejects.
+   */
+  readonly show: (title?: string, options?: NotificationOptionsLike<Data>) => Promise<WebNotificationResult>;
+  /** Close the current notification. */
+  readonly close: () => void;
+  /**
+   * Subscribe to an event of every notification shown by this composable.
+   *
+   * @param event Lifecycle event.
+   * @param handler Called with the native event and its notification.
+   * @returns Unsubscribe function.
+   */
+  readonly on: (event: WebNotificationEvent, handler: (event: Event, notification: NotificationLike) => void) => () => void;
+}
+/**
+ * Show typed Web Notifications with permission handling.
+ *
+ * `show` merges reactive defaults with per-call options, asks for
+ * permission first when it is still undecided (configurable), and resolves
+ * to a discriminated {@link WebNotificationResult}. Handlers registered with
+ * `on` apply to every notification this composable shows. The current
+ * notification is closed when the owning reactive scope stops.
+ *
+ * Server rendering: the API is never touched; `permission` is
+ * `"unsupported"` and `supported` is false.
+ *
+ * @example
+ * ```ts
+ * const notify = useWebNotification<{ id: string }>({ defaults: { icon: "/icon.png" } });
+ * notify.on("click", () => window.focus());
+ * await notify.show("Build finished", { data: { id: "42" } });
+ * ```
+ *
+ * @typeParam Data Application data attached to notifications.
+ * @param options Capability, defaults, and permission policy.
+ * @default options {}
+ * @returns Notification state and actions.
+ */
+declare function useWebNotification<Data = unknown>(options?: UseWebNotificationOptions<Data>): WebNotificationControls<Data>;
+//#endregion
+export { NotificationHost, NotificationLike, NotificationOptionsLike, NotificationPermissionState, UseWebNotificationOptions, WebNotificationControls, WebNotificationDefaults, WebNotificationEvent, WebNotificationResult, useWebNotification };

package/dist/use-notification.mjs

@@ -0,0 +1,131 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { computed, readonly, ref, shallowRef, toValue, unref } from "vue";
+//#region src/use-notification.ts
+function browserNotificationHost() {
+	if (typeof window === "undefined") return void 0;
+	return "Notification" in window ? window.Notification : void 0;
+}
+function normalizePermission(permission) {
+	return permission === "granted" || permission === "denied" ? permission : "default";
+}
+const notificationEvents = [
+	"click",
+	"show",
+	"error",
+	"close"
+];
+/**
+* Show typed Web Notifications with permission handling.
+*
+* `show` merges reactive defaults with per-call options, asks for
+* permission first when it is still undecided (configurable), and resolves
+* to a discriminated {@link WebNotificationResult}. Handlers registered with
+* `on` apply to every notification this composable shows. The current
+* notification is closed when the owning reactive scope stops.
+*
+* Server rendering: the API is never touched; `permission` is
+* `"unsupported"` and `supported` is false.
+*
+* @example
+* ```ts
+* const notify = useWebNotification<{ id: string }>({ defaults: { icon: "/icon.png" } });
+* notify.on("click", () => window.focus());
+* await notify.show("Build finished", { data: { id: "42" } });
+* ```
+*
+* @typeParam Data Application data attached to notifications.
+* @param options Capability, defaults, and permission policy.
+* @default options {}
+* @returns Notification state and actions.
+*/
+function useWebNotification(options = {}) {
+	const resolveHost = () => options.host === void 0 ? browserNotificationHost() : unref(options.host) ?? void 0;
+	const readPermission = () => {
+		const host = resolveHost();
+		return host ? normalizePermission(host.permission) : "unsupported";
+	};
+	const permission = ref(readPermission());
+	const notification = shallowRef(void 0);
+	const data = shallowRef(void 0);
+	const handlers = /* @__PURE__ */ new Map();
+	const requestPermission = async () => {
+		const host = resolveHost();
+		if (!host) return permission.value = "unsupported";
+		try {
+			permission.value = normalizePermission(await host.requestPermission());
+		} catch {
+			permission.value = readPermission();
+		}
+		return permission.value;
+	};
+	const close = () => {
+		notification.value?.close();
+		notification.value = void 0;
+		data.value = void 0;
+	};
+	const show = async (title, overrides) => {
+		const host = resolveHost();
+		if (!host) return {
+			status: "unsupported",
+			error: void 0
+		};
+		permission.value = readPermission();
+		if (permission.value === "default" && (options.requestPermissionOnShow ?? true)) await requestPermission();
+		if (permission.value !== "granted") return {
+			status: "denied",
+			error: void 0
+		};
+		const { title: defaultTitle = "", ...defaults } = toValue(options.defaults) ?? {};
+		const merged = {
+			...defaults,
+			...overrides
+		};
+		let created;
+		try {
+			created = new host(title ?? defaultTitle, merged);
+		} catch (error) {
+			return {
+				status: "failed",
+				error
+			};
+		}
+		close();
+		notification.value = created;
+		data.value = merged.data;
+		for (const event of notificationEvents) created.addEventListener(event, (nativeEvent) => {
+			for (const handler of handlers.get(event) ?? []) handler(nativeEvent, created);
+			if (event === "close" && notification.value === created) {
+				notification.value = void 0;
+				data.value = void 0;
+			}
+		});
+		return {
+			status: "shown",
+			notification: created
+		};
+	};
+	const on = (event, handler) => {
+		let set = handlers.get(event);
+		if (!set) handlers.set(event, set = /* @__PURE__ */ new Set());
+		set.add(handler);
+		return () => {
+			set.delete(handler);
+		};
+	};
+	tryOnScopeDispose(() => {
+		close();
+		handlers.clear();
+	});
+	return {
+		supported: computed(() => resolveHost() !== void 0),
+		permission: readonly(permission),
+		notification,
+		data,
+		requestPermission,
+		show,
+		close,
+		on
+	};
+}
+//#endregion
+export { useWebNotification };

package/dist/use-now.d.mts

@@ -0,0 +1,137 @@
+import { n as IntervalScheduler, r as PausableControls } from "./use-interval-BA55gTHT.mjs";
+import { FrameScheduler } from "./use-raf-fn.mjs";
+import { ComputedRef, MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/use-now.d.ts
+/** Options for {@link useTimestamp}. */
+interface UseTimestampOptions<Controls extends boolean = false> {
+  /**
+   * Update cadence: a period in milliseconds (reactive), or
+   * `"requestAnimationFrame"` to update on every animation frame.
+   *
+   * @default 1000
+   */
+  readonly interval?: MaybeRefOrGetter<number> | "requestAnimationFrame";
+  /**
+   * Milliseconds added to every reading, for example a server clock skew.
+   *
+   * @default 0
+   */
+  readonly offset?: number;
+  /**
+   * Clock source returning Unix epoch milliseconds.
+   *
+   * @default Date.now
+   */
+  readonly now?: () => number;
+  /**
+   * Hydration-stable starting value. When set, the first reading is this
+   * value on both server and client instead of the live clock, and the live
+   * clock takes over on the first tick. Pass the server's render time here
+   * (for example through a payload) to avoid hydration mismatches.
+   *
+   * @default undefined (read the clock immediately)
+   */
+  readonly initial?: number;
+  /**
+   * Start updating as soon as the composable is created.
+   *
+   * @default true
+   */
+  readonly immediate?: boolean;
+  /**
+   * Starts host timers or frames when no browser `window` is available.
+   *
+   * @default false
+   */
+  readonly runOnServer?: boolean;
+  /**
+   * Repeating timer host for millisecond cadences.
+   *
+   * @default globalThis timer functions
+   */
+  readonly scheduler?: IntervalScheduler;
+  /**
+   * Frame host for the `"requestAnimationFrame"` cadence.
+   *
+   * @default globalThis animation-frame functions when available
+   */
+  readonly frameScheduler?: FrameScheduler;
+  /**
+   * Invoked after every update with the new timestamp.
+   *
+   * @default undefined
+   */
+  readonly callback?: (timestamp: number) => void;
+  /**
+   * Return the full control object instead of the bare ref.
+   *
+   * @default false
+   */
+  readonly controls?: Controls;
+}
+/** Options for {@link useNow}; identical to {@link UseTimestampOptions}. */
+type UseNowOptions<Controls extends boolean = false> = UseTimestampOptions<Controls>;
+/** Timestamp and controls returned by `useTimestamp({ controls: true })`. */
+interface TimestampControls extends PausableControls {
+  /** Latest reading in Unix epoch milliseconds. */
+  readonly timestamp: Readonly<ShallowRef<number>>;
+  /**
+   * Read the clock immediately, store the value, and return it.
+   *
+   * @returns The new timestamp.
+   */
+  readonly refresh: () => number;
+}
+/** Date and controls returned by `useNow({ controls: true })`. */
+interface NowControls extends PausableControls {
+  /** Latest reading as a `Date`; a fresh instance per update. */
+  readonly now: ComputedRef<Date>;
+  /**
+   * Read the clock immediately, store the value, and return it.
+   *
+   * @returns The new date.
+   */
+  readonly refresh: () => Date;
+}
+/**
+ * Reactive Unix timestamp in milliseconds.
+ *
+ * Updates on a millisecond interval or every animation frame. For SSR,
+ * supply {@link UseTimestampOptions.initial} (or an injected `now`) so the
+ * server and the hydrating client render the same value; no timer runs on
+ * the server. Timers stop with the owning reactive scope.
+ *
+ * @example
+ * ```ts
+ * const timestamp = useTimestamp({ interval: 250 });
+ * const { timestamp: t, pause } = useTimestamp({ controls: true });
+ * ```
+ *
+ * @param options Cadence, clock, SSR, and scheduler policy.
+ * @default options {}
+ * @throws `RangeError` for invalid millisecond cadences (see `useIntervalFn`).
+ * @returns The timestamp ref, or the full controls when `controls` is `true`.
+ */
+declare function useTimestamp(options?: UseTimestampOptions<false>): Readonly<ShallowRef<number>>;
+declare function useTimestamp(options: UseTimestampOptions<true>): TimestampControls;
+/**
+ * Reactive current `Date`.
+ *
+ * Same cadence, SSR, and cleanup rules as {@link useTimestamp}; the value is
+ * a fresh `Date` derived from the latest timestamp.
+ *
+ * @example
+ * ```ts
+ * const now = useNow({ initial: serverRenderedAt });
+ * ```
+ *
+ * @param options Cadence, clock, SSR, and scheduler policy.
+ * @default options {}
+ * @throws `RangeError` for invalid millisecond cadences (see `useIntervalFn`).
+ * @returns The date ref, or the full controls when `controls` is `true`.
+ */
+declare function useNow(options?: UseNowOptions<false>): ComputedRef<Date>;
+declare function useNow(options: UseNowOptions<true>): NowControls;
+//#endregion
+export { NowControls, TimestampControls, UseNowOptions, UseTimestampOptions, useNow, useTimestamp };

package/dist/use-now.mjs

@@ -0,0 +1,44 @@
+import { useRafFn } from "./use-raf-fn.mjs";
+import { useIntervalFn } from "./use-interval.mjs";
+import { computed, shallowRef } from "vue";
+//#region src/use-now.ts
+function createTimestamp(options) {
+	const offset = options.offset ?? 0;
+	const read = options.now ?? Date.now;
+	const timestamp = shallowRef(options.initial ?? read() + offset);
+	const refresh = () => {
+		timestamp.value = read() + offset;
+		options.callback?.(timestamp.value);
+		return timestamp.value;
+	};
+	const interval = options.interval ?? 1e3;
+	return {
+		...interval === "requestAnimationFrame" ? useRafFn(refresh, {
+			immediate: options.immediate ?? true,
+			runOnServer: options.runOnServer ?? false,
+			...options.frameScheduler === void 0 ? {} : { scheduler: options.frameScheduler }
+		}) : useIntervalFn(refresh, interval, {
+			immediate: options.immediate ?? true,
+			runOnServer: options.runOnServer ?? false,
+			...options.scheduler === void 0 ? {} : { scheduler: options.scheduler }
+		}),
+		timestamp,
+		refresh
+	};
+}
+function useTimestamp(options = {}) {
+	const controls = createTimestamp(options);
+	return options.controls === true ? controls : controls.timestamp;
+}
+function useNow(options = {}) {
+	const { timestamp, refresh, ...pausable } = createTimestamp(options);
+	const now = computed(() => new Date(timestamp.value));
+	if (options.controls !== true) return now;
+	return {
+		...pausable,
+		now,
+		refresh: () => new Date(refresh())
+	};
+}
+//#endregion
+export { useNow, useTimestamp };