elements-kit 0.0.7 → 0.0.9

package/dist/signals/lib/media-devices.test.mjs

@@ -0,0 +1,44 @@
+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 { createMediaDevices } from "./media-devices.mjs";
+//#region src/signals/lib/media-devices.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.unstubAllGlobals();
+});
+describe("createMediaDevices", () => {
+	it("returns a list of devices", async () => {
+		const mockDevices = [{
+			deviceId: "1",
+			kind: "audioinput",
+			label: "Mic"
+		}];
+		vi.stubGlobal("navigator", { mediaDevices: {
+			enumerateDevices: vi.fn().mockResolvedValue(mockDevices),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn()
+		} });
+		let d;
+		effectScope(() => {
+			d = createMediaDevices();
+		});
+		await new Promise((res) => setTimeout(res, 0));
+		globalExpect(d()).toEqual(mockDevices);
+	});
+	it("removes devicechange listener on Symbol.dispose", () => {
+		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]();
+		globalExpect(removeListener).toHaveBeenCalledWith("devicechange", globalExpect.any(Function));
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/media.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../../index-BGKVkZ6y.mjs";
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
 
 //#region src/signals/lib/media.d.ts
 declare const isBrowser: boolean;

package/dist/signals/lib/motion.d.mts

@@ -0,0 +1,15 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/motion.d.ts
+type MotionResult = {
+  acceleration: Computed<DeviceMotionEventAcceleration | null>;
+  accelerationIncludingGravity: Computed<DeviceMotionEventAcceleration | null>;
+  rotationRate: Computed<DeviceMotionEventRotationRate | null>;
+  interval: Computed<number | null>;
+} & Disposable;
+/**
+ * Returns reactive signals driven by the `devicemotion` event.
+ */
+declare function createMotion(): MotionResult;
+//#endregion
+export { createMotion };

package/dist/signals/lib/motion.mjs

@@ -0,0 +1,27 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/motion.ts
+/**
+* Returns reactive signals driven by the `devicemotion` event.
+*/
+function createMotion() {
+	const acceleration = signal(null);
+	const accelerationIncludingGravity = signal(null);
+	const rotationRate = signal(null);
+	const interval = signal(null);
+	const onMotion = (e) => {
+		acceleration(e.acceleration);
+		accelerationIncludingGravity(e.accelerationIncludingGravity);
+		rotationRate(e.rotationRate);
+		interval(e.interval);
+	};
+	const cleanup = createEventListener(window, "devicemotion", onMotion);
+	return Object.assign({
+		acceleration,
+		accelerationIncludingGravity,
+		rotationRate,
+		interval
+	}, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createMotion };

package/dist/signals/lib/motion.test.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/signals/lib/motion.test.mjs

@@ -0,0 +1,51 @@
+import { o as effectScope } from "../../signals-CLAPw8kk.mjs";
+import { a as describe, o as it, r as afterEach, t as globalExpect } from "../../test.BmQO5GaM-CR2qjV1t.mjs";
+import { createMotion } from "./motion.mjs";
+//#region src/signals/lib/motion.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+});
+describe("createMotion", () => {
+	it("starts with null values", () => {
+		let m;
+		effectScope(() => {
+			m = createMotion();
+		});
+		globalExpect(m.acceleration()).toBeNull();
+		globalExpect(m.rotationRate()).toBeNull();
+		globalExpect(m.interval()).toBeNull();
+	});
+	it("updates on devicemotion event", () => {
+		let m;
+		effectScope(() => {
+			m = createMotion();
+		});
+		const accel = {
+			x: 1,
+			y: 2,
+			z: 3
+		};
+		window.dispatchEvent(Object.assign(new Event("devicemotion"), {
+			acceleration: accel,
+			accelerationIncludingGravity: accel,
+			rotationRate: {
+				alpha: 0,
+				beta: 90,
+				gamma: -45
+			},
+			interval: 16
+		}));
+		globalExpect(m.interval()).toBe(16);
+	});
+	it("stops reacting after Symbol.dispose", () => {
+		let m;
+		effectScope(() => {
+			m = createMotion();
+		});
+		m[Symbol.dispose]();
+		window.dispatchEvent(Object.assign(new Event("devicemotion"), { interval: 100 }));
+		globalExpect(m.interval()).toBeNull();
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/mouse-position.d.mts

@@ -0,0 +1,14 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/mouse-position.d.ts
+type MousePositionResult = {
+  x: Computed<number>;
+  y: Computed<number>;
+} & Disposable;
+/**
+ * Returns reactive `x` / `y` signals that track the mouse pointer position on
+ * the document.
+ */
+declare function createMousePosition(): MousePositionResult;
+//#endregion
+export { createMousePosition };

package/dist/signals/lib/mouse-position.mjs

@@ -0,0 +1,22 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/mouse-position.ts
+/**
+* Returns reactive `x` / `y` signals that track the mouse pointer position on
+* the document.
+*/
+function createMousePosition() {
+	const x = signal(0);
+	const y = signal(0);
+	const handler = (e) => {
+		x(e.clientX);
+		y(e.clientY);
+	};
+	const cleanup = createEventListener(document, "mousemove", handler);
+	return Object.assign({
+		x,
+		y
+	}, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createMousePosition };

package/dist/signals/lib/mouse-position.test.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/signals/lib/mouse-position.test.mjs

@@ -0,0 +1,44 @@
+import { o as effectScope } from "../../signals-CLAPw8kk.mjs";
+import { a as describe, o as it, r as afterEach, t as globalExpect } from "../../test.BmQO5GaM-CR2qjV1t.mjs";
+import { createMousePosition } from "./mouse-position.mjs";
+//#region src/signals/lib/mouse-position.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+});
+describe("createMousePosition", () => {
+	it("starts at (0, 0)", () => {
+		let pos;
+		effectScope(() => {
+			pos = createMousePosition();
+		});
+		globalExpect(pos.x()).toBe(0);
+		globalExpect(pos.y()).toBe(0);
+	});
+	it("updates on mousemove", () => {
+		let pos;
+		effectScope(() => {
+			pos = createMousePosition();
+		});
+		document.dispatchEvent(new MouseEvent("mousemove", {
+			clientX: 100,
+			clientY: 200
+		}));
+		globalExpect(pos.x()).toBe(100);
+		globalExpect(pos.y()).toBe(200);
+	});
+	it("stops updating after Symbol.dispose", () => {
+		let pos;
+		effectScope(() => {
+			pos = createMousePosition();
+		});
+		pos[Symbol.dispose]();
+		document.dispatchEvent(new MouseEvent("mousemove", {
+			clientX: 99,
+			clientY: 77
+		}));
+		globalExpect(pos.x()).toBe(0);
+		globalExpect(pos.y()).toBe(0);
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/mouse-wheel.d.mts

@@ -0,0 +1,10 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/mouse-wheel.d.ts
+/**
+ * Returns a `Computed<number>` tracking the cumulative vertical mouse-wheel
+ * delta (positive = scrolled down).
+ */
+declare function createMouseWheel(): Computed<number> & Disposable;
+//#endregion
+export { createMouseWheel };

package/dist/signals/lib/mouse-wheel.mjs

@@ -0,0 +1,17 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/mouse-wheel.ts
+/**
+* Returns a `Computed<number>` tracking the cumulative vertical mouse-wheel
+* delta (positive = scrolled down).
+*/
+function createMouseWheel() {
+	const delta = signal(0);
+	const handler = (e) => {
+		delta(delta() + e.deltaY);
+	};
+	const cleanup = createEventListener(window, "wheel", handler, { passive: true });
+	return Object.assign(delta, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createMouseWheel };

package/dist/signals/lib/mouse-wheel.test.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/signals/lib/mouse-wheel.test.mjs

@@ -0,0 +1,38 @@
+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 { createMouseWheel } from "./mouse-wheel.mjs";
+//#region src/signals/lib/mouse-wheel.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.useRealTimers();
+});
+describe("createMouseWheel", () => {
+	it("starts at 0", () => {
+		let w;
+		effectScope(() => {
+			w = createMouseWheel();
+		});
+		globalExpect(w()).toBe(0);
+	});
+	it("accumulates deltaY on wheel events", () => {
+		let w;
+		effectScope(() => {
+			w = createMouseWheel();
+		});
+		window.dispatchEvent(new WheelEvent("wheel", { deltaY: 100 }));
+		globalExpect(w()).toBe(100);
+		window.dispatchEvent(new WheelEvent("wheel", { deltaY: -50 }));
+		globalExpect(w()).toBe(50);
+	});
+	it("stops updating after Symbol.dispose", () => {
+		let w;
+		effectScope(() => {
+			w = createMouseWheel();
+		});
+		w[Symbol.dispose]();
+		window.dispatchEvent(new WheelEvent("wheel", { deltaY: 200 }));
+		globalExpect(w()).toBe(0);
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/mutation-observer.d.mts

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

package/dist/signals/lib/mutation-observer.mjs

@@ -0,0 +1,16 @@
+import { d as onCleanup } from "../../signals-CLAPw8kk.mjs";
+//#region src/signals/lib/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;
+	if (el) observer.observe(el, options);
+	const cleanup = () => observer.disconnect();
+	onCleanup(cleanup);
+	return { [Symbol.dispose]: cleanup };
+}
+//#endregion
+export { createMutationObserver };

package/dist/signals/lib/mutation-observer.test.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/signals/lib/mutation-observer.test.mjs

@@ -0,0 +1,46 @@
+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 { createMutationObserver } from "./mutation-observer.mjs";
+//#region src/signals/lib/mutation-observer.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.unstubAllGlobals();
+});
+describe("createMutationObserver", () => {
+	it("observes mutations on a target element", () => {
+		const target = document.createElement("div");
+		document.body.appendChild(target);
+		let observeCount = 0;
+		vi.stubGlobal("MutationObserver", function MockMO(cb) {
+			return {
+				observe: () => {
+					observeCount++;
+				},
+				disconnect: vi.fn()
+			};
+		});
+		effectScope(() => {
+			createMutationObserver(target, { childList: true }, vi.fn());
+		});
+		globalExpect(observeCount).toBe(1);
+	});
+	it("disconnects on Symbol.dispose", () => {
+		const target = document.createElement("div");
+		document.body.appendChild(target);
+		const disconnect = vi.fn();
+		vi.stubGlobal("MutationObserver", function MockMO() {
+			return {
+				observe: vi.fn(),
+				disconnect
+			};
+		});
+		let mo;
+		effectScope(() => {
+			mo = createMutationObserver(target, { childList: true }, vi.fn());
+		});
+		mo[Symbol.dispose]();
+		globalExpect(disconnect).toHaveBeenCalledOnce();
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/network-state.d.mts

@@ -0,0 +1,17 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/network-state.d.ts
+type NetworkStateResult = {
+  online: Computed<boolean>;
+  downlink: Computed<number | undefined>;
+  effectiveType: Computed<string | undefined>;
+  rtt: Computed<number | undefined>;
+  saveData: Computed<boolean | undefined>;
+} & Disposable;
+/**
+ * Returns reactive signals reflecting `navigator.onLine` and the Network
+ * Information API (`navigator.connection`) when available.
+ */
+declare function createNetworkState(): NetworkStateResult;
+//#endregion
+export { createNetworkState };

package/dist/signals/lib/network-state.mjs

@@ -0,0 +1,34 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/network-state.ts
+/**
+* Returns reactive signals reflecting `navigator.onLine` and the Network
+* Information API (`navigator.connection`) when available.
+*/
+function createNetworkState() {
+	const connection = navigator.connection;
+	const online = signal(typeof navigator !== "undefined" ? navigator.onLine : true);
+	const downlink = signal(connection?.downlink);
+	const effectiveType = signal(connection?.effectiveType);
+	const rtt = signal(connection?.rtt);
+	const saveData = signal(connection?.saveData);
+	const updateOnline = () => online(navigator.onLine);
+	const updateConnection = () => {
+		downlink(connection?.downlink);
+		effectiveType(connection?.effectiveType);
+		rtt(connection?.rtt);
+		saveData(connection?.saveData);
+	};
+	const cleanups = [createEventListener(window, "online", updateOnline), createEventListener(window, "offline", updateOnline)];
+	if (connection) cleanups.push(createEventListener(connection, "change", updateConnection));
+	const cleanup = () => cleanups.forEach((fn) => fn());
+	return Object.assign({
+		online,
+		downlink,
+		effectiveType,
+		rtt,
+		saveData
+	}, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createNetworkState };

package/dist/signals/lib/network-state.test.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/signals/lib/network-state.test.mjs

@@ -0,0 +1,61 @@
+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 { createNetworkState } from "./network-state.mjs";
+//#region src/signals/lib/network-state.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.restoreAllMocks();
+});
+describe("createNetworkState", () => {
+	it("reads navigator.onLine initially", () => {
+		let n;
+		effectScope(() => {
+			n = createNetworkState();
+		});
+		globalExpect(n.online()).toBe(navigator.onLine);
+	});
+	it("becomes false on offline event", () => {
+		let n;
+		effectScope(() => {
+			n = createNetworkState();
+		});
+		Object.defineProperty(navigator, "onLine", {
+			configurable: true,
+			get: () => false
+		});
+		window.dispatchEvent(new Event("offline"));
+		globalExpect(n.online()).toBe(false);
+	});
+	it("becomes true on online event", () => {
+		Object.defineProperty(navigator, "onLine", {
+			configurable: true,
+			get: () => false
+		});
+		let n;
+		effectScope(() => {
+			n = createNetworkState();
+		});
+		Object.defineProperty(navigator, "onLine", {
+			configurable: true,
+			get: () => true
+		});
+		window.dispatchEvent(new Event("online"));
+		globalExpect(n.online()).toBe(true);
+	});
+	it("stops reacting after Symbol.dispose", () => {
+		let n;
+		effectScope(() => {
+			n = createNetworkState();
+		});
+		const initial = n.online();
+		n[Symbol.dispose]();
+		Object.defineProperty(navigator, "onLine", {
+			configurable: true,
+			get: () => !initial
+		});
+		window.dispatchEvent(new Event("offline"));
+		globalExpect(n.online()).toBe(initial);
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/on-click-outside.d.mts

@@ -0,0 +1,11 @@
+//#region src/signals/lib/on-click-outside.d.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.
+ */
+declare function createOnClickOutside(target: Element | (() => Element | null), handler: (e: PointerEvent) => void): void;
+//#endregion
+export { createOnClickOutside };

package/dist/signals/lib/on-click-outside.mjs

@@ -0,0 +1,20 @@
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/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 createOnClickOutside(target, handler) {
+	const getTarget = typeof target === "function" ? target : () => target;
+	const listener = (e) => {
+		const el = getTarget();
+		if (!el) return;
+		if (!el.contains(e.target)) handler(e);
+	};
+	createEventListener(document, "pointerdown", listener);
+}
+//#endregion
+export { createOnClickOutside };

package/dist/signals/lib/on-click-outside.test.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/signals/lib/on-click-outside.test.mjs

@@ -0,0 +1,54 @@
+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
+afterEach(() => {
+	document.body.innerHTML = "";
+});
+describe("createOnClickOutside", () => {
+	it("fires handler when clicking outside the target", () => {
+		const inside = document.createElement("div");
+		const outside = document.createElement("span");
+		document.body.append(inside, outside);
+		const handler = vi.fn();
+		effectScope(() => {
+			createOnClickOutside(inside, handler);
+		});
+		outside.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+		globalExpect(handler).toHaveBeenCalledOnce();
+	});
+	it("does not fire handler when clicking inside the target", () => {
+		const el = document.createElement("div");
+		document.body.appendChild(el);
+		const handler = vi.fn();
+		effectScope(() => {
+			createOnClickOutside(el, handler);
+		});
+		el.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+		globalExpect(handler).not.toHaveBeenCalled();
+	});
+	it("does not fire after scope disposal", () => {
+		const inside = document.createElement("div");
+		const outside = document.createElement("span");
+		document.body.append(inside, outside);
+		const handler = vi.fn();
+		effectScope(() => {
+			createOnClickOutside(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/signals/lib/orientation.d.mts

@@ -0,0 +1,13 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/orientation.d.ts
+type OrientationResult = {
+  angle: Computed<number>;
+  type: Computed<OrientationType>;
+} & Disposable;
+/**
+ * Returns reactive signals for the screen orientation.
+ */
+declare function createOrientation(): OrientationResult;
+//#endregion
+export { createOrientation };

package/dist/signals/lib/orientation.mjs

@@ -0,0 +1,21 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/orientation.ts
+/**
+* Returns reactive signals for the screen orientation.
+*/
+function createOrientation() {
+	const angle = signal(screen.orientation?.angle ?? 0);
+	const type = signal(screen.orientation?.type ?? "portrait-primary");
+	const onChange = () => {
+		angle(screen.orientation.angle);
+		type(screen.orientation.type);
+	};
+	const cleanup = createEventListener(screen.orientation, "change", onChange);
+	return Object.assign({
+		angle,
+		type
+	}, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createOrientation };

package/dist/signals/lib/orientation.test.d.mts

@@ -0,0 +1 @@
+export { };