elements-kit 0.0.9 → 0.0.11

package/dist/{signals/lib → utilities}/media-devices.mjs

@@ -1,6 +1,6 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
-import { createEventListener } from "./event-listener.mjs";
-//#region src/signals/lib/media-devices.ts
+import { p as signal } from "../signals-DcgXhkU2.mjs";
+import { on } from "./event-listener.mjs";
+//#region src/utilities/media-devices.ts
 /**
 * Returns a reactive list of available media devices, refreshed whenever
 * devices are added or removed.
@@ -11,8 +11,8 @@ function createMediaDevices() {
 		navigator.mediaDevices.enumerateDevices().then((list) => devices(list));
 	};
 	refresh();
-	const cleanup = createEventListener(navigator.mediaDevices, "devicechange", refresh);
-	return Object.assign(devices, { [Symbol.dispose]: cleanup });
+	on(navigator.mediaDevices, "devicechange", refresh);
+	return devices;
 }
 //#endregion
 export { createMediaDevices };

package/dist/{signals/lib → utilities}/media-devices.test.mjs

@@ -1,7 +1,7 @@
-import { o as effectScope } from "../../signals-CLAPw8kk.mjs";
-import { a as describe, n as vi, o as it, r as afterEach, t as globalExpect } from "../../test.BmQO5GaM-CR2qjV1t.mjs";
+import { s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { createMediaDevices } from "./media-devices.mjs";
-//#region src/signals/lib/media-devices.test.ts
+//#region src/utilities/media-devices.test.ts
 afterEach(() => {
 	document.body.innerHTML = "";
 	vi.unstubAllGlobals();
@@ -25,18 +25,16 @@ describe("createMediaDevices", () => {
 		await new Promise((res) => setTimeout(res, 0));
 		globalExpect(d()).toEqual(mockDevices);
 	});
-	it("removes devicechange listener on Symbol.dispose", () => {
+	it("removes devicechange listener on scope disposal", () => {
 		const removeListener = vi.fn();
 		vi.stubGlobal("navigator", { mediaDevices: {
 			enumerateDevices: vi.fn().mockResolvedValue([]),
 			addEventListener: vi.fn(),
 			removeEventListener: removeListener
 		} });
-		let d;
 		effectScope(() => {
-			d = createMediaDevices();
-		});
-		d[Symbol.dispose]();
+			createMediaDevices();
+		})();
 		globalExpect(removeListener).toHaveBeenCalledWith("devicechange", globalExpect.any(Function));
 	});
 });

package/dist/utilities/media-player.d.mts

@@ -0,0 +1,22 @@
+import { r as Signal, t as Computed } from "../index-Cvdhuy6Y.mjs";
+
+//#region src/utilities/media-player.d.ts
+type MediaPlayerResult<T extends HTMLMediaElement> = {
+  element: T;
+  playing: Computed<boolean>;
+  muted: Signal<boolean>;
+  volume: Signal<number>;
+  duration: Computed<number>;
+  time: Signal<number>;
+  ended: Computed<boolean>;
+  play(): void;
+  pause(): void;
+  toggle(): void;
+} & Disposable;
+/**
+ * Wraps an `HTMLMediaElement` (`<audio>` or `<video>`) with reactive state
+ * and playback controls.
+ */
+declare function createMediaPlayer<T extends HTMLMediaElement>(element: T): MediaPlayerResult<T>;
+//#endregion
+export { createMediaPlayer };

package/dist/utilities/media-player.mjs

@@ -0,0 +1,36 @@
+import { fromEvent, sync } from "./event-driven.mjs";
+//#region src/utilities/media-player.ts
+/**
+* Wraps an `HTMLMediaElement` (`<audio>` or `<video>`) with reactive state
+* and playback controls.
+*/
+function createMediaPlayer(element) {
+	const el = element;
+	const [playing] = sync(fromEvent(el, ["play", "pause"]), () => !el.paused);
+	const [muted] = sync(fromEvent(el, "volumechange"), () => el.muted, (v) => {
+		el.muted = v;
+	});
+	const [volume] = sync(fromEvent(el, "volumechange"), () => el.volume, (v) => {
+		el.volume = Math.min(1, Math.max(0, v));
+	});
+	const [duration] = sync(fromEvent(el, "durationchange"), () => el.duration || 0);
+	const [time] = sync(fromEvent(el, "timeupdate"), () => el.currentTime, (v) => {
+		el.currentTime = v;
+	});
+	const [ended] = sync(fromEvent(el, "ended"), () => el.ended);
+	return {
+		element: el,
+		playing,
+		muted,
+		volume,
+		duration,
+		time,
+		ended,
+		play: () => el.play(),
+		pause: () => el.pause(),
+		toggle: () => el.paused ? el.play() : el.pause(),
+		[Symbol.dispose]: () => {}
+	};
+}
+//#endregion
+export { createMediaPlayer };

package/dist/utilities/media-player.test.mjs

@@ -0,0 +1,100 @@
+import { s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
+import { createMediaPlayer } from "./media-player.mjs";
+//#region src/utilities/media-player.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.restoreAllMocks();
+});
+describe("createMediaPlayer", () => {
+	describe("with <audio>", () => {
+		it("accepts an HTMLAudioElement", () => {
+			const el = new Audio();
+			let a;
+			effectScope(() => {
+				a = createMediaPlayer(el);
+			});
+			globalExpect(a.element).toBe(el);
+		});
+		it("starts as paused", () => {
+			let a;
+			effectScope(() => {
+				a = createMediaPlayer(new Audio());
+			});
+			globalExpect(a.playing()).toBe(false);
+		});
+		it("muted(true) sets muted to true", () => {
+			let a;
+			effectScope(() => {
+				a = createMediaPlayer(new Audio());
+			});
+			a.muted(true);
+			globalExpect(a.element.muted).toBe(true);
+		});
+		it("volume() clamps to [0, 1]", () => {
+			let a;
+			effectScope(() => {
+				a = createMediaPlayer(new Audio());
+			});
+			a.volume(2);
+			globalExpect(a.element.volume).toBe(1);
+			a.volume(-1);
+			globalExpect(a.element.volume).toBe(0);
+		});
+		it("removes event listeners when scope is disposed", () => {
+			const removeSpy = vi.fn();
+			const el = new Audio();
+			let dispose;
+			let a;
+			dispose = effectScope(() => {
+				a = createMediaPlayer(el);
+			});
+			vi.spyOn(a.element, "removeEventListener").mockImplementation(removeSpy);
+			dispose();
+			globalExpect(removeSpy).toHaveBeenCalled();
+		});
+	});
+	describe("with <video>", () => {
+		it("accepts an HTMLVideoElement", () => {
+			const el = document.createElement("video");
+			document.body.appendChild(el);
+			let v;
+			effectScope(() => {
+				v = createMediaPlayer(el);
+			});
+			globalExpect(v.element).toBe(el);
+		});
+		it("starts as paused", () => {
+			const el = document.createElement("video");
+			document.body.appendChild(el);
+			let v;
+			effectScope(() => {
+				v = createMediaPlayer(el);
+			});
+			globalExpect(v.playing()).toBe(false);
+		});
+		it("time(v) updates currentTime", () => {
+			const el = document.createElement("video");
+			document.body.appendChild(el);
+			let v;
+			effectScope(() => {
+				v = createMediaPlayer(el);
+			});
+			v.time(30);
+			globalExpect(el.currentTime).toBe(30);
+		});
+		it("removes event listeners when scope is disposed", () => {
+			const el = document.createElement("video");
+			document.body.appendChild(el);
+			let dispose;
+			dispose = effectScope(() => {
+				createMediaPlayer(el);
+			});
+			const removeSpy = vi.spyOn(el, "removeEventListener");
+			dispose();
+			globalExpect(removeSpy).toHaveBeenCalled();
+		});
+	});
+});
+//#endregion
+export {};

package/dist/{signals/lib/media.d.mts → utilities/media-query.d.mts}

@@ -1,6 +1,6 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
+import { t as Computed } from "../index-Cvdhuy6Y.mjs";
 
-//#region src/signals/lib/media.d.ts
+//#region src/utilities/media-query.d.ts
 declare const isBrowser: boolean;
 /**
  * Creates a signal that tracks a CSS media query.
@@ -9,6 +9,6 @@ declare const isBrowser: boolean;
  * @param defaultState The default value (for SSR/hydration)
  * @returns Computed<boolean> that is true if the query matches
  */
-declare function createMediaSignal(query: string, defaultState?: boolean): Computed<boolean>;
+declare function createMediaQuery(query: string, defaultState?: boolean): Computed<boolean>;
 //#endregion
-export { createMediaSignal, isBrowser };
+export { createMediaQuery, isBrowser };

package/dist/utilities/media-query.mjs

@@ -0,0 +1,19 @@
+import { p as signal } from "../signals-DcgXhkU2.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
+//#region src/utilities/media-query.ts
+const isBrowser = typeof window !== "undefined";
+/**
+* Creates a signal that tracks a CSS media query.
+*
+* @param query The media query string (e.g. '(max-width: 600px)')
+* @param defaultState The default value (for SSR/hydration)
+* @returns Computed<boolean> that is true if the query matches
+*/
+function createMediaQuery(query, defaultState) {
+	if (!isBrowser) return signal(defaultState ?? false);
+	const mql = window.matchMedia(query);
+	const [state] = sync(fromEvent(mql, "change"), () => mql.matches);
+	return state;
+}
+//#endregion
+export { createMediaQuery, isBrowser };

package/dist/utilities/mutation-observer.d.mts

@@ -0,0 +1,8 @@
+//#region src/utilities/mutation-observer.d.ts
+/**
+ * Watches `target` for DOM mutations and calls `callback` with each batch of
+ * `MutationRecord`s.
+ */
+declare function createMutationObserver(target: Element, options: MutationObserverInit, callback: (records: MutationRecord[]) => void): Disposable;
+//#endregion
+export { createMutationObserver };

package/dist/{signals/lib → utilities}/mutation-observer.mjs

@@ -1,12 +1,12 @@
-import { d as onCleanup } from "../../signals-CLAPw8kk.mjs";
-//#region src/signals/lib/mutation-observer.ts
+import { f as onCleanup } from "../signals-DcgXhkU2.mjs";
+//#region src/utilities/mutation-observer.ts
 /**
 * Watches `target` for DOM mutations and calls `callback` with each batch of
 * `MutationRecord`s.
 */
 function createMutationObserver(target, options, callback) {
 	const observer = new MutationObserver((records) => callback(records));
-	const el = typeof target === "function" ? target() : target;
+	const el = target;
 	if (el) observer.observe(el, options);
 	const cleanup = () => observer.disconnect();
 	onCleanup(cleanup);

package/dist/{signals/lib → utilities}/mutation-observer.test.mjs

@@ -1,7 +1,7 @@
-import { o as effectScope } from "../../signals-CLAPw8kk.mjs";
-import { a as describe, n as vi, o as it, r as afterEach, t as globalExpect } from "../../test.BmQO5GaM-CR2qjV1t.mjs";
+import { s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { createMutationObserver } from "./mutation-observer.mjs";
-//#region src/signals/lib/mutation-observer.test.ts
+//#region src/utilities/mutation-observer.test.ts
 afterEach(() => {
 	document.body.innerHTML = "";
 	vi.unstubAllGlobals();

package/dist/{signals/lib → utilities}/on-click-outside.d.mts

@@ -1,4 +1,4 @@
-//#region src/signals/lib/on-click-outside.d.ts
+//#region src/utilities/on-click-outside.d.ts
 /**
  * Fires `handler` whenever a pointer-down event occurs outside `target`.
  *
@@ -6,6 +6,6 @@
  * touch input.  Cleanup is registered automatically when called inside an
  * effect or scope.
  */
-declare function createOnClickOutside(target: Element | (() => Element | null), handler: (e: PointerEvent) => void): void;
+declare function onClickOutside(target: Element, handler: (e: PointerEvent) => void): () => void;
 //#endregion
-export { createOnClickOutside };
+export { onClickOutside };

package/dist/utilities/on-click-outside.mjs

@@ -0,0 +1,17 @@
+import { on } from "./event-listener.mjs";
+//#region src/utilities/on-click-outside.ts
+/**
+* Fires `handler` whenever a pointer-down event occurs outside `target`.
+*
+* Built on a `document` `pointerdown` listener so it works for both mouse and
+* touch input.  Cleanup is registered automatically when called inside an
+* effect or scope.
+*/
+function onClickOutside(target, handler) {
+	const listener = (e) => {
+		if (!target.contains(e.target)) handler(e);
+	};
+	return on(document, "pointerdown", listener);
+}
+//#endregion
+export { onClickOutside };

package/dist/{signals/lib → utilities}/on-click-outside.test.mjs

@@ -1,7 +1,7 @@
-import { o as effectScope } from "../../signals-CLAPw8kk.mjs";
-import { a as describe, n as vi, o as it, r as afterEach, t as globalExpect } from "../../test.BmQO5GaM-CR2qjV1t.mjs";
-import { createOnClickOutside } from "./on-click-outside.mjs";
-//#region src/signals/lib/on-click-outside.test.ts
+import { s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
+import { onClickOutside } from "./on-click-outside.mjs";
+//#region src/utilities/on-click-outside.test.ts
 afterEach(() => {
 	document.body.innerHTML = "";
 });
@@ -12,7 +12,7 @@ describe("createOnClickOutside", () => {
 		document.body.append(inside, outside);
 		const handler = vi.fn();
 		effectScope(() => {
-			createOnClickOutside(inside, handler);
+			onClickOutside(inside, handler);
 		});
 		outside.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
 		globalExpect(handler).toHaveBeenCalledOnce();
@@ -22,7 +22,7 @@ describe("createOnClickOutside", () => {
 		document.body.appendChild(el);
 		const handler = vi.fn();
 		effectScope(() => {
-			createOnClickOutside(el, handler);
+			onClickOutside(el, handler);
 		});
 		el.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
 		globalExpect(handler).not.toHaveBeenCalled();
@@ -33,22 +33,11 @@ describe("createOnClickOutside", () => {
 		document.body.append(inside, outside);
 		const handler = vi.fn();
 		effectScope(() => {
-			createOnClickOutside(inside, handler);
+			onClickOutside(inside, handler);
 		})();
 		outside.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
 		globalExpect(handler).not.toHaveBeenCalled();
 	});
-	it("works with a reactive target getter", () => {
-		const el = document.createElement("div");
-		const outside = document.createElement("span");
-		document.body.append(el, outside);
-		const handler = vi.fn();
-		effectScope(() => {
-			createOnClickOutside(() => el, handler);
-		});
-		outside.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
-		globalExpect(handler).toHaveBeenCalledOnce();
-	});
 });
 //#endregion
 export {};

package/dist/utilities/orientation.d.mts

@@ -0,0 +1,10 @@
+import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+
+//#region src/utilities/orientation.d.ts
+type OrientationResult = {
+  angle: Computed<number>;
+  type: Computed<OrientationType>;
+} & Disposable;
+declare const orientation: OrientationResult;
+//#endregion
+export { orientation };

package/dist/utilities/orientation.mjs

@@ -0,0 +1,21 @@
+import { fromEvent, sync } from "./event-driven.mjs";
+//#region src/utilities/orientation.ts
+/**
+* Returns reactive signals for the screen orientation.
+*/
+function createOrientation() {
+	const subscribe = fromEvent(screen.orientation, "change");
+	const [angle, stopAngle] = sync(subscribe, () => screen.orientation?.angle ?? 0);
+	const [type, stopType] = sync(subscribe, () => screen.orientation?.type ?? "portrait-primary");
+	return {
+		angle,
+		type,
+		[Symbol.dispose]: () => {
+			stopAngle();
+			stopType();
+		}
+	};
+}
+const orientation = createOrientation();
+//#endregion
+export { orientation };

package/dist/utilities/previous.d.mts

@@ -0,0 +1,12 @@
+import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+
+//#region src/utilities/previous.d.ts
+/**
+ * Returns a `Computed` that always holds the *previous* value of `source`.
+ * Starts as `undefined` until the source changes for the first time.
+ *
+ * When `ignore` is provided, the previous value only updates when the ignore check fails.
+ */
+declare function createPrevious<T>(source: Computed<T>, ignore?: (a: T, b: T) => boolean): Computed<T | undefined>;
+//#endregion
+export { createPrevious };

package/dist/utilities/previous.mjs

@@ -0,0 +1,24 @@
+import { o as effect, p as signal } from "../signals-DcgXhkU2.mjs";
+//#region src/utilities/previous.ts
+/**
+* Returns a `Computed` that always holds the *previous* value of `source`.
+* Starts as `undefined` until the source changes for the first time.
+*
+* When `ignore` is provided, the previous value only updates when the ignore check fails.
+*/
+function createPrevious(source, ignore) {
+	const prev = signal(void 0);
+	let current;
+	let initialized = false;
+	effect(() => {
+		const next = source();
+		if (!initialized || !ignore || !ignore(next, current)) {
+			prev(current);
+			current = next;
+			initialized = true;
+		}
+	});
+	return prev;
+}
+//#endregion
+export { createPrevious };

package/dist/utilities/previous.test.mjs

@@ -0,0 +1,88 @@
+import { p as signal, s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { o as describe, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
+import { createPrevious } from "./previous.mjs";
+//#region src/utilities/previous.test.ts
+describe("createPrevious", () => {
+	it("starts as undefined", () => {
+		const s = signal(1);
+		let p;
+		effectScope(() => {
+			p = createPrevious(s);
+		});
+		globalExpect(p()).toBeUndefined();
+	});
+	it("returns the previous value after a change", () => {
+		const s = signal(1);
+		let p;
+		effectScope(() => {
+			p = createPrevious(s);
+		});
+		s(2);
+		globalExpect(p()).toBe(1);
+	});
+	it("tracks each successive previous value", () => {
+		const s = signal("a");
+		let p;
+		effectScope(() => {
+			p = createPrevious(s);
+		});
+		s("b");
+		globalExpect(p()).toBe("a");
+		s("c");
+		globalExpect(p()).toBe("b");
+	});
+	it("does not update after scope disposal", () => {
+		const s = signal(10);
+		let p;
+		const stop = effectScope(() => {
+			p = createPrevious(s);
+		});
+		s(20);
+		stop();
+		s(30);
+		globalExpect(p()).toBe(10);
+	});
+});
+describe("createPrevious with isEqual (distinct mode)", () => {
+	it("starts as undefined", () => {
+		const s = signal(0);
+		let prev;
+		effectScope(() => {
+			prev = createPrevious(s, Object.is);
+		});
+		globalExpect(prev()).toBeUndefined();
+	});
+	it("updates previous when value changes", () => {
+		const s = signal(0);
+		let prev;
+		effectScope(() => {
+			prev = createPrevious(s, Object.is);
+		});
+		s(1);
+		globalExpect(prev()).toBe(0);
+	});
+	it("does not update previous when value is the same", () => {
+		const s = signal(0);
+		let prev;
+		effectScope(() => {
+			prev = createPrevious(s, Object.is);
+		});
+		s(1);
+		globalExpect(prev()).toBe(0);
+		s(1);
+		globalExpect(prev()).toBe(0);
+	});
+	it("uses a custom equality function", () => {
+		const s = signal({ id: 1 });
+		let prev;
+		effectScope(() => {
+			prev = createPrevious(s, (a, b) => a.id === b.id);
+		});
+		s({ id: 1 });
+		globalExpect(prev()).toBeUndefined();
+		s({ id: 2 });
+		globalExpect(prev()?.id).toBe(1);
+	});
+});
+//#endregion
+export {};

package/dist/utilities/resize-observer.d.mts

@@ -0,0 +1,8 @@
+//#region src/utilities/resize-observer.d.ts
+/**
+ * Raw `ResizeObserver` wrapper with automatic cleanup.
+ * Use `createElementRect` for the common case.
+ */
+declare function createResizeObserver(target: Element, callback: ResizeObserverCallback): Disposable;
+//#endregion
+export { createResizeObserver };

package/dist/{signals/lib → utilities}/resize-observer.mjs

@@ -1,13 +1,12 @@
-import { d as onCleanup } from "../../signals-CLAPw8kk.mjs";
-//#region src/signals/lib/resize-observer.ts
+import { f as onCleanup } from "../signals-DcgXhkU2.mjs";
+//#region src/utilities/resize-observer.ts
 /**
 * Raw `ResizeObserver` wrapper with automatic cleanup.
-* Use `createElementSize` / `createElementRect` for the common cases.
+* Use `createElementRect` for the common case.
 */
 function createResizeObserver(target, callback) {
 	const observer = new ResizeObserver(callback);
-	const el = typeof target === "function" ? target() : target;
-	if (el) observer.observe(el);
+	if (target) observer.observe(target);
 	const cleanup = () => observer.disconnect();
 	onCleanup(cleanup);
 	return { [Symbol.dispose]: cleanup };

package/dist/utilities/routing.d.mts

@@ -0,0 +1,59 @@
+import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+
+//#region src/utilities/routing.d.ts
+declare function patchHistory(): void;
+type NavigateOptions = {
+  replace?: boolean;
+  state?: unknown;
+};
+/**
+ * Navigates to `url` via `history.pushState` (or `replaceState` when
+ * `replace` is `true`).
+ *
+ * `history.pushState` / `replaceState` are patched once at module load so
+ * all navigation — including third-party router calls — dispatches the
+ * `pushstate` / `replacestate` events that `currentLocation` signals react to.
+ */
+declare function navigate(url: string | URL, {
+  replace,
+  state
+}?: NavigateOptions): void;
+/**
+ * Returns `true` when a click event on an `<a>` element should be handled
+ * client-side — same origin, primary button, no modifier keys, no download,
+ * no `_blank` target. Walks up to the nearest anchor via `closest("a")`.
+ *
+ * Use alongside `navigate()` to intercept anchor clicks:
+ *
+ * ```ts
+ * el.addEventListener("click", (e) => {
+ *   if (isLocalNavigationEvent(e)) { e.preventDefault(); navigate(el.href); }
+ * });
+ * ```
+ */
+declare function isLocalNavigationEvent(e: MouseEvent): boolean;
+/**
+ * Returns `Computed<boolean>` — `true` when the current URL matches `input`.
+ * Uses `URLPattern.test()` — faster than `match` when you don't need
+ * captured groups.
+ *
+ * Use object form: `{ pathname: "/users/:id" }`. Relative string patterns
+ * require a base URL and will throw.
+ *
+ * Requires `urlpattern-polyfill` for Safari < 26 and Firefox < 142.
+ */
+declare function matches(input: URLPatternInput, options?: URLPatternOptions): Computed<boolean>;
+/**
+ * Returns `Computed<URLPatternResult | null>` — the full match result when
+ * the current URL matches `input`, `null` when it does not.
+ * Use when you need captured groups (params). For a boolean gate,
+ * prefer `matches()` which is faster.
+ *
+ * Use object form: `{ pathname: "/users/:id" }`. Relative string patterns
+ * require a base URL and will throw.
+ *
+ * Requires `urlpattern-polyfill` for Safari < 26 and Firefox < 142.
+ */
+declare function match(input: URLPatternInput, options?: URLPatternOptions): Computed<URLPatternResult | null>;
+//#endregion
+export { isLocalNavigationEvent, match, matches, navigate, patchHistory };