solid-route-progress 0.1.0

package/dist/router.jsx

@@ -0,0 +1,67 @@
+import { a as isIgnored, c as Progress, d as useController, r as disposalSignal, s as OPTION_KEYS, t as createCrossDocumentProgress } from "./shared.jsx";
+import { createEffect, on, onCleanup, splitProps } from "solid-js";
+import { isServer } from "solid-js/web";
+import { useBeforeLeave, useIsRouting } from "@solidjs/router";
+//#region src/router.tsx
+/**
+* Wire a controller to `@solidjs/router`: `useIsRouting()` covers `<A>` clicks,
+* `navigate()`, back/forward and action redirects, including any `<Suspense>` the new
+* route waits on. `useBeforeLeave()` supplies the target for `shallow` / `filter`.
+*/
+function createRouteProgress(controller, options = {}) {
+	if (isServer) return;
+	const isRouting = useIsRouting();
+	let skip = false;
+	const skipNext = () => {
+		skip = true;
+		queueMicrotask(() => {
+			skip = false;
+		});
+	};
+	document.addEventListener("click", (event) => {
+		if (isIgnored(event.target)) skipNext();
+	}, {
+		capture: true,
+		signal: disposalSignal()
+	});
+	useBeforeLeave((event) => {
+		if (typeof event.to !== "string") return;
+		if (options.shallow === true && samePathname(event.to, event.from.pathname) || options.filter?.(event.to, event.from) === false) skipNext();
+	});
+	let release;
+	createEffect(on(isRouting, (routing) => {
+		release?.();
+		release = routing && !skip ? controller.start() : void 0;
+		if (routing) skip = false;
+	}));
+	onCleanup(() => release?.());
+	if (options.crossDocument !== false) createCrossDocumentProgress(controller, typeof options.crossDocument === "object" ? options.crossDocument : void 0);
+}
+const samePathname = (to, pathname) => {
+	const end = to.search(/[?#]/);
+	return (end === -1 ? to : to.slice(0, end)).replace(/\/+$/, "") === pathname.replace(/\/+$/, "");
+};
+const LOCAL = [
+	"shallow",
+	"filter",
+	"crossDocument",
+	"controller"
+];
+/**
+* Drop-in route progress bar. Place it anywhere under `<Router>` — typically in the root
+* layout — and import `style.css` once. Inside a `<ProgressProvider>` it drives that
+* provider's controller, so `useProgress()` works anywhere in the app.
+*
+* @example
+* ```tsx
+* <Router root={(props) => <><RouteProgress /><Suspense>{props.children}</Suspense></>}>
+* ```
+*/
+function RouteProgress(props) {
+	const [local, options, rest] = splitProps(props, LOCAL, OPTION_KEYS);
+	const controller = useController(local.controller, options);
+	createRouteProgress(controller, local);
+	return <Progress controller={controller} {...rest} />;
+}
+//#endregion
+export { RouteProgress, createRouteProgress };

package/dist/shared.d.ts

@@ -0,0 +1,202 @@
+import { Accessor, Context, JSX, ParentProps } from "solid-js";
+//#region src/core.d.ts
+/**
+ * Visual state of the bar. Mirrored to the root element as `data-state`.
+ *
+ * - `idle`     hidden (faded out, `visibility: hidden`)
+ * - `trickle`  visible, drifting toward `trickleTo` on a long CSS transition
+ * - `active`   visible, moving to an explicit `set()` value on a short transition
+ * - `done`     visible, moving to 100% before fading out
+ */
+type ProgressState = "idle" | "trickle" | "active" | "done";
+/**
+ * How a load ended, when it did not simply succeed: `'error'` completes the bar with
+ * `data-error` set, `'cancel'` fades it out without running to 100%.
+ */
+type Outcome = "error" | "cancel";
+/**
+ * `{ [Symbol.dispose](): void }` where the consumer's TypeScript `lib` knows `Symbol.dispose`,
+ * and no constraint otherwise, so the type never forces `esnext.disposable` on anyone.
+ */
+type DisposableLike = SymbolConstructor extends {
+  readonly dispose: infer K extends symbol;
+} ? { [P in K]: () => void; } : unknown;
+/**
+ * Lets go of one hold on the bar. Calling it again is a no-op. Where `Symbol.dispose`
+ * exists it is also a disposable, so `using hold = progress.start()` releases on scope exit.
+ */
+type Release = ((outcome?: Outcome) => void) & DisposableLike;
+interface TrackOptions {
+  /** Release the hold after this many milliseconds even if the promise never settles. */
+  timeout?: number;
+}
+interface ProgressOptions {
+  /**
+   * Value (0–1) the bar drifts toward while loading. The drift itself is a single CSS
+   * transition (`--sp-trickle-duration` / `--sp-trickle-easing`); no JS timer steps it.
+   * @default 0.95
+   */
+  trickleTo?: number;
+  /**
+   * Milliseconds a load must last before the bar shows, so quick loads never draw one. A
+   * load that settles before the next frame is dropped unseen even with `0`.
+   * @default 200
+   */
+  delay?: number;
+  /**
+   * Milliseconds to wait before completing once the last hold is released. Useful when a
+   * route mounts and immediately kicks off another load you also want covered.
+   * @default 0
+   */
+  stopDelay?: number;
+  /**
+   * Milliseconds for the short transitions: `set()`, `done()` and the fade in/out. The bar
+   * writes it to `--sp-speed`, so JS timers and CSS transitions always agree.
+   * @default 200
+   */
+  speed?: number;
+}
+interface ProgressController {
+  /** Target value (0–1) the bar is transitioning toward. */
+  readonly value: Accessor<number>;
+  /** Current visual state. */
+  readonly state: Accessor<ProgressState>;
+  /** `true` while the bar is visible (any state other than `idle`). */
+  readonly active: Accessor<boolean>;
+  /** `true` during the `done` phase of a load that failed. Mirrored as `data-error`. */
+  readonly error: Accessor<boolean>;
+  /**
+   * Hold the bar open: shows it (after `delay`) and starts trickling. Returns a release
+   * function; the bar completes once every hold is released, so the router, `track()` and
+   * your own code never finish each other's loads.
+   */
+  start(): Release;
+  /**
+   * Complete the bar (after `stopDelay`), dropping every hold. No-op while hidden. An
+   * `outcome` marks the load as failed or cancelled, as with a release.
+   */
+  done(outcome?: Outcome): void;
+  /**
+   * Move the bar to an explicit value (0–1) on a short transition, then resume
+   * trickling. Values `>= 1` complete the bar. Shows the bar if it is hidden, except
+   * while a `delay` is still pending: a load that finishes early stays invisible.
+   */
+  set(value: number): void;
+  /**
+   * Hold the bar open until `promise` settles; a rejection ends it as an `'error'`. Returns
+   * `promise` itself, so it can wrap a call in place.
+   */
+  track<P extends PromiseLike<unknown>>(promise: P, options?: TrackOptions): P;
+  /** The options this controller was created with (read lazily, so reactive props work). */
+  readonly options: ProgressOptions;
+}
+/**
+ * Headless progress state machine. Rendering is left to CSS: the controller only
+ * exposes a target `value` and a `state`, which `<Progress>` mirrors to
+ * `--sp-value` and `data-state`.
+ */
+declare function createProgress(options?: ProgressOptions): ProgressController;
+//#endregion
+//#region src/components.d.ts
+/** Context carrying the active controller. Exposed for integrations; prefer `useProgress()`. */
+declare const ProgressContext: Context<ProgressController | undefined>;
+/**
+ * Read the nearest progress controller — from `<ProgressProvider>`, `<Progress>`,
+ * `<RouteProgress>` or `<NavigationProgress>`.
+ */
+declare function useProgress(): ProgressController;
+interface ProgressProviderProps extends ProgressOptions {
+  /** Share an existing controller instead of creating one. */
+  controller?: ProgressController;
+  children?: JSX.Element;
+}
+/** Provides a controller to descendants without rendering anything. */
+declare function ProgressProvider(props: ProgressProviderProps): JSX.Element;
+interface ProgressProps extends ProgressOptions, Omit<JSX.HTMLAttributes<HTMLDivElement>, "style" | "children" | "role"> {
+  /** Drive this bar from an existing controller (defaults to the nearest provided one, else a new one). */
+  controller?: ProgressController;
+  /** Inline styles; merged with the custom properties the component sets. */
+  style?: JSX.CSSProperties;
+  /** Accessible name announced for the progress bar. @default "Loading" */
+  label?: string;
+  /**
+   * Human-readable text for a known value, announced as `aria-valuetext` (as in Kobalte and
+   * Radix), e.g. `(percent) => percent + ' percent uploaded'`. Not used while trickling.
+   */
+  getValueLabel?: (percent: number) => string;
+  /**
+   * Set `data-sp-busy` on `<html>` while the bar is visible, for page-wide styling hooks
+   * (e.g. Tailwind `in-data-sp-busy:opacity-50`). With several bars it stays set until the
+   * last of them goes idle.
+   * @default true
+   */
+  busyAttribute?: boolean;
+  /**
+   * Also set `aria-busy="true"` on `<html>` while the bar is visible, as Turbo does. Off by
+   * default: how screen readers treat a busy root varies.
+   * @default false
+   */
+  ariaBusy?: boolean;
+  /** Custom template. Defaults to `<Bar />`. */
+  children?: JSX.Element;
+}
+/**
+ * The bar shell. Renders a fixed, full-width `role="progressbar"` element and mirrors the
+ * controller into `--sp-value` / `--sp-speed` / `data-state` / `data-error`; everything
+ * visual lives in `style.css`. Renders the idle shell on the server.
+ */
+declare function Progress(props: ProgressProps): JSX.Element;
+/** The sliding bar: a full-width strip slid in from the inline-start edge. */
+declare function Bar(props: ParentProps<JSX.HTMLAttributes<HTMLDivElement>>): JSX.Element;
+//#endregion
+//#region src/navigation-api.d.ts
+/**
+ * Minimal structural typings for the Navigation API (Baseline 2026-01), kept local so the
+ * library type-checks against any `lib.dom` version.
+ */
+interface NavigateEventLike extends Event {
+  readonly navigationType: "push" | "replace" | "reload" | "traverse";
+  readonly destination: {
+    readonly url: string;
+    readonly sameDocument: boolean;
+  };
+  readonly canIntercept: boolean;
+  readonly userInitiated: boolean;
+  readonly hashChange: boolean;
+  readonly downloadRequest: string | null;
+  readonly formData: FormData | null;
+  /** The element that initiated the navigation, when known (Chrome 135, Firefox 147, Safari 26.2). */
+  readonly sourceElement?: Element | null;
+}
+/** Anchors (or their ancestors) carrying this attribute never trigger the bar. */
+declare const IGNORE_ATTRIBUTE = "data-sp-ignore";
+//#endregion
+//#region src/cross-document.d.ts
+interface CrossDocumentOptions {
+  /**
+   * Safety net: a cross-document navigation that never unloads the page and is never
+   * reported as cancelled (a `204` response, a server-sent download) completes the bar after
+   * this many milliseconds. `0` disables it.
+   * @default 10000
+   */
+  timeout?: number;
+  /** Decide per navigation. Return `false` to keep the bar hidden. */
+  filter?: (event: NavigateEventLike) => boolean;
+}
+/**
+ * Show the bar for navigations the page starts that leave the current document: external
+ * links, plain form posts, `location` assignments and reloads, back/forward to another
+ * document. Browser-UI navigations (the reload button, the address bar, bookmarks) never
+ * reach the page, so they show nothing.
+ *
+ * Uses the Navigation API `navigate` event, which fires before the request is made; where
+ * the API is missing this does nothing. Links marked `data-sp-ignore` are skipped. The bar
+ * fades out when the navigation is cancelled before the document unloads (`navigateerror`:
+ * a stop, a newer navigation) or the page is restored from the back/forward cache, and
+ * completes after `timeout`, the only end for a `204` or a server-sent download, which
+ * Chromium does not report back. A navigation a router intercepts instead completes on
+ * `navigatesuccess` / `navigateerror`.
+ */
+declare function createCrossDocumentProgress(controller: ProgressController, options?: CrossDocumentOptions): void;
+//#endregion
+export { Release as _, Bar as a, ProgressProps as c, useProgress as d, DisposableLike as f, ProgressState as g, ProgressOptions as h, NavigateEventLike as i, ProgressProvider as l, ProgressController as m, createCrossDocumentProgress as n, Progress as o, Outcome as p, IGNORE_ATTRIBUTE as r, ProgressContext as s, CrossDocumentOptions as t, ProgressProviderProps as u, TrackOptions as v, createProgress as y };

package/dist/shared.js

@@ -0,0 +1,360 @@
+import { batch, createContext, createEffect, createSignal, getOwner, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { createComponent, getNextElement, insert, isDev as DEV, isServer, memo, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
+//#region src/core.ts
+/** `Symbol.dispose` where the runtime has it. */
+const dispose = Symbol.dispose;
+const DEFAULTS = {
+	trickleTo: .95,
+	delay: 200,
+	stopDelay: 0,
+	speed: 200
+};
+/**
+* Headless progress state machine. Rendering is left to CSS: the controller only
+* exposes a target `value` and a `state`, which `<Progress>` mirrors to
+* `--sp-value` and `data-state`.
+*/
+function createProgress(options = {}) {
+	const [value, setValue] = createSignal(0);
+	const [state, setState] = createSignal("idle");
+	const [error, setError] = createSignal(false);
+	const opt = (key) => options[key] ?? DEFAULTS[key];
+	const holds = /* @__PURE__ */ new Set();
+	/** The one scheduled step: reveal while `idle`, resume trickling while `active`, hide while `done`. */
+	let timer;
+	let stopTimer;
+	/** `true` once the browser has had a chance to paint the visible bar. */
+	let painted = false;
+	/** A hold was released as an `'error'` during the current load. */
+	let failed = false;
+	const schedule = (step, ms) => {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			timer = void 0;
+			step();
+		}, ms);
+	};
+	const cancel = () => {
+		clearTimeout(timer);
+		timer = void 0;
+	};
+	/** A reveal is scheduled: the load has not lasted `delay` yet. */
+	const pending = () => state() === "idle" && timer !== void 0;
+	const move = (s, v) => batch(() => {
+		setState(s);
+		setValue(v);
+	});
+	const hide = () => {
+		failed = false;
+		batch(() => {
+			setError(false);
+			move("idle", 0);
+		});
+	};
+	const drop = () => {
+		cancel();
+		hide();
+	};
+	const reveal = (s, v) => {
+		painted = false;
+		requestAnimationFrame(() => painted = true);
+		move(s, v);
+	};
+	const show = () => reveal("trickle", opt("trickleTo"));
+	const finish = () => {
+		if (!painted) return drop();
+		batch(() => {
+			setError(failed);
+			move("done", 1);
+		});
+		schedule(hide, opt("speed"));
+	};
+	/** Every hold is gone: complete or drop the bar, or cancel a reveal that is not due yet. */
+	const settle = (cancelled) => {
+		const s = state();
+		if (s === "trickle" || s === "active") {
+			const end = cancelled && !failed ? drop : finish;
+			const stopDelay = opt("stopDelay");
+			clearTimeout(stopTimer);
+			if (stopDelay > 0) stopTimer = setTimeout(end, stopDelay);
+			else end();
+		} else if (s === "idle") {
+			cancel();
+			failed = false;
+		}
+	};
+	const release = (hold, outcome) => {
+		if (!holds.delete(hold)) return;
+		if (outcome === "error") failed = true;
+		if (!holds.size) settle(outcome === "cancel");
+	};
+	const start = () => {
+		const hold = {};
+		if (!isServer) {
+			holds.add(hold);
+			clearTimeout(stopTimer);
+			const s = state();
+			if (s === "done") {
+				hide();
+				schedule(show, opt("speed"));
+			} else if (s === "idle" && !pending()) {
+				const delay = opt("delay");
+				if (delay > 0) schedule(show, delay);
+				else show();
+			}
+		}
+		const releaseHold = (outcome) => release(hold, outcome);
+		if (dispose) releaseHold[dispose] = releaseHold;
+		return releaseHold;
+	};
+	const done = (outcome) => {
+		holds.clear();
+		if (outcome === "error") failed = true;
+		settle(outcome === "cancel");
+	};
+	const set = (n) => {
+		if (isServer) return;
+		n = Math.min(1, Math.max(0, n));
+		if (n === 1) return done();
+		const s = state();
+		if (s === "done" || pending()) return;
+		if (s === "idle") reveal("active", n);
+		else move("active", n);
+		const trickleTo = opt("trickleTo");
+		if (n < trickleTo) schedule(() => move("trickle", trickleTo), opt("speed"));
+		else cancel();
+	};
+	const track = (promise, options) => {
+		const releaseHold = start();
+		promise.then(() => releaseHold(), () => releaseHold("error"));
+		const timeout = options?.timeout;
+		if (timeout && !isServer) setTimeout(releaseHold, timeout);
+		return promise;
+	};
+	if (getOwner()) onCleanup(() => {
+		clearTimeout(timer);
+		clearTimeout(stopTimer);
+	});
+	return {
+		value,
+		state,
+		error,
+		active: () => state() !== "idle",
+		start,
+		done,
+		set,
+		track,
+		options
+	};
+}
+//#endregion
+//#region src/dev.ts
+const warn = (message) => console.warn(`[sprogress] ${message}`);
+//#endregion
+//#region src/components.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+/** Context carrying the active controller. Exposed for integrations; prefer `useProgress()`. */
+const ProgressContext = createContext();
+/**
+* Read the nearest progress controller — from `<ProgressProvider>`, `<Progress>`,
+* `<RouteProgress>` or `<NavigationProgress>`.
+*/
+function useProgress() {
+	const controller = useContext(ProgressContext);
+	if (!controller) throw new Error("useProgress(): no progress controller in scope. Wrap the app in <ProgressProvider> (the route bar picks it up automatically) or call it inside <Progress>.");
+	return controller;
+}
+/** The props that configure a controller, as opposed to the bar element. */
+const OPTION_KEYS = [
+	"trickleTo",
+	"delay",
+	"stopDelay",
+	"speed"
+];
+/**
+* The controller a bar drives: the `controller` prop, else the nearest `<ProgressProvider>`,
+* else a new one built from `options`. Options only apply in the last case, so development
+* builds say so when they would be dropped.
+*/
+function useController(controller, options) {
+	const provided = controller ?? useContext(ProgressContext);
+	if (!provided) return createProgress(options);
+	if (DEV) {
+		const dropped = OPTION_KEYS.filter((key) => options[key] !== void 0);
+		if (dropped.length) warn(`${dropped.join(", ")} ignored: this bar drives an existing controller, so set options where it is created (createProgress() or <ProgressProvider>).`);
+	}
+	return provided;
+}
+/** Provides a controller to descendants without rendering anything. */
+function ProgressProvider(props) {
+	const [local, options] = splitProps(props, ["controller", "children"]);
+	const controller = local.controller ?? createProgress(options);
+	return createComponent(ProgressContext.Provider, {
+		value: controller,
+		get children() {
+			return local.children;
+		}
+	});
+}
+const LOCAL = [
+	"controller",
+	"style",
+	"label",
+	"getValueLabel",
+	"busyAttribute",
+	"ariaBusy",
+	"children",
+	"class"
+];
+/** Bars currently marking the page busy, per attribute: it stays until the last one goes idle. */
+const busyBars = /* @__PURE__ */ new Map();
+function createBusyAttribute(attribute, value, active) {
+	let bars = busyBars.get(attribute);
+	if (!bars) busyBars.set(attribute, bars = /* @__PURE__ */ new Set());
+	const bar = {};
+	const sync = (on) => {
+		if (on) bars.add(bar);
+		else bars.delete(bar);
+		if (bars.size) document.documentElement.setAttribute(attribute, value);
+		else document.documentElement.removeAttribute(attribute);
+	};
+	createEffect(() => sync(active()));
+	onCleanup(() => sync(false));
+}
+/**
+* The bar shell. Renders a fixed, full-width `role="progressbar"` element and mirrors the
+* controller into `--sp-value` / `--sp-speed` / `data-state` / `data-error`; everything
+* visual lives in `style.css`. Renders the idle shell on the server.
+*/
+function Progress(props) {
+	const [local, options, rest] = splitProps(props, LOCAL, OPTION_KEYS);
+	const controller = useController(local.controller, options);
+	let root;
+	const valueNow = () => controller.state() === "trickle" ? void 0 : Math.round(controller.value() * 100);
+	const valueText = () => {
+		const percent = valueNow();
+		return percent === void 0 ? void 0 : local.getValueLabel?.(percent);
+	};
+	if (!isServer) {
+		if (DEV) onMount(() => {
+			if (root.getClientRects().length && getComputedStyle(root).position === "static") warn("style.css is not loaded: import 'solid-route-progress/style.css' once.");
+		});
+		createBusyAttribute("data-sp-busy", "", () => local.busyAttribute !== false && controller.active());
+		createBusyAttribute("aria-busy", "true", () => local.ariaBusy === true && controller.active());
+	}
+	return createComponent(ProgressContext.Provider, {
+		value: controller,
+		get children() {
+			var _el$ = getNextElement(_tmpl$);
+			var _ref$ = root;
+			typeof _ref$ === "function" ? use(_ref$, _el$) : root = _el$;
+			spread(_el$, mergeProps(rest, {
+				"role": "progressbar",
+				get ["aria-label"]() {
+					return local.label ?? "Loading";
+				},
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				get ["aria-valuenow"]() {
+					return valueNow();
+				},
+				get ["aria-valuetext"]() {
+					return valueText();
+				},
+				get ["data-state"]() {
+					return controller.state();
+				},
+				get ["data-error"]() {
+					return controller.error() ? "" : void 0;
+				},
+				get ["class"]() {
+					return memo(() => !!local.class)() ? `sprogress ${local.class}` : "sprogress";
+				},
+				get style() {
+					return {
+						...local.style,
+						"--sp-value": controller.value(),
+						"--sp-speed": `${controller.options.speed ?? DEFAULTS.speed}ms`
+					};
+				}
+			}), false, true);
+			insert(_el$, () => local.children ?? createComponent(Bar, {}));
+			runHydrationEvents();
+			return _el$;
+		}
+	});
+}
+/** The sliding bar: a full-width strip slid in from the inline-start edge. */
+function Bar(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = getNextElement(_tmpl$);
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return memo(() => !!local.class)() ? `sprogress-bar ${local.class}` : "sprogress-bar";
+		} }, rest), false, false);
+		runHydrationEvents();
+		return _el$2;
+	})();
+}
+//#endregion
+//#region src/navigation-api.ts
+/** `window.navigation`, or `undefined` where the Navigation API is unavailable. */
+const getNavigation = () => globalThis.navigation;
+/** Anchors (or their ancestors) carrying this attribute never trigger the bar. */
+const IGNORE_ATTRIBUTE = "data-sp-ignore";
+/** Whether `target` is, or sits inside, an element marked `data-sp-ignore`. */
+const isIgnored = (target) => target instanceof Element && target.closest(`[data-sp-ignore]`) !== null;
+/**
+* An `AbortSignal` that fires when the surrounding Solid owner is disposed. Pass it to
+* `addEventListener` and the listener removes itself.
+*/
+function disposalSignal() {
+	const controller = new AbortController();
+	if (getOwner()) onCleanup(() => controller.abort());
+	return controller.signal;
+}
+//#endregion
+//#region src/cross-document.ts
+/**
+* Show the bar for navigations the page starts that leave the current document: external
+* links, plain form posts, `location` assignments and reloads, back/forward to another
+* document. Browser-UI navigations (the reload button, the address bar, bookmarks) never
+* reach the page, so they show nothing.
+*
+* Uses the Navigation API `navigate` event, which fires before the request is made; where
+* the API is missing this does nothing. Links marked `data-sp-ignore` are skipped. The bar
+* fades out when the navigation is cancelled before the document unloads (`navigateerror`:
+* a stop, a newer navigation) or the page is restored from the back/forward cache, and
+* completes after `timeout`, the only end for a `204` or a server-sent download, which
+* Chromium does not report back. A navigation a router intercepts instead completes on
+* `navigatesuccess` / `navigateerror`.
+*/
+function createCrossDocumentProgress(controller, options = {}) {
+	const navigation = getNavigation();
+	if (isServer || !navigation) return;
+	const signal = disposalSignal();
+	let timer;
+	/** Releases the hold of the navigation still in flight. */
+	let release;
+	const finish = (outcome) => {
+		clearTimeout(timer);
+		release?.(outcome);
+		release = void 0;
+	};
+	navigation.addEventListener("navigate", (event) => {
+		if (event.defaultPrevented || event.destination.sameDocument || event.downloadRequest !== null || !/^https?:/.test(event.destination.url) || isIgnored(event.sourceElement) || options.filter?.(event) === false) return;
+		const previous = release;
+		release = controller.start();
+		previous?.();
+		clearTimeout(timer);
+		const timeout = options.timeout ?? 1e4;
+		if (timeout > 0) timer = setTimeout(finish, timeout);
+	}, { signal });
+	navigation.addEventListener("currententrychange", () => navigation.transition && clearTimeout(timer), { signal });
+	navigation.addEventListener("navigatesuccess", () => finish(), { signal });
+	navigation.addEventListener("navigateerror", (event) => finish(event.error?.name === "AbortError" ? "cancel" : "error"), { signal });
+	window.addEventListener("pageshow", (event) => event.persisted && finish("cancel"), { signal });
+	signal.addEventListener("abort", () => finish());
+}
+//#endregion
+export { isIgnored as a, Progress as c, useController as d, useProgress as f, createProgress as h, getNavigation as i, ProgressContext as l, warn as m, IGNORE_ATTRIBUTE as n, Bar as o, DEV as p, disposalSignal as r, OPTION_KEYS as s, createCrossDocumentProgress as t, ProgressProvider as u };