elements-kit 0.0.8 → 0.0.9

package/dist/signals/lib/hover.mjs

@@ -0,0 +1,23 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/hover.ts
+/**
+* Returns a `Computed<boolean>` that is `true` while the pointer is over
+* `target`.  Uses `pointerenter` / `pointerleave` so it works for both mouse
+* and touch/stylus input.
+*/
+function createHover(target) {
+	const hovered = signal(false);
+	const el = typeof target === "function" ? target() : target;
+	const onEnter = () => hovered(true);
+	const onLeave = () => hovered(false);
+	const cleanups = [];
+	if (el) {
+		cleanups.push(createEventListener(el, "pointerenter", onEnter));
+		cleanups.push(createEventListener(el, "pointerleave", onLeave));
+	}
+	const cleanup = () => cleanups.forEach((fn) => fn());
+	return Object.assign(hovered, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createHover };

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

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

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

@@ -0,0 +1,63 @@
+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 { createHover } from "./hover.mjs";
+//#region src/signals/lib/hover.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.restoreAllMocks();
+});
+describe("createHover", () => {
+	it("starts as false", () => {
+		const el = document.createElement("div");
+		document.body.appendChild(el);
+		let hovered;
+		effectScope(() => {
+			hovered = createHover(el);
+		});
+		globalExpect(hovered()).toBe(false);
+	});
+	it("becomes true on pointerenter", () => {
+		const el = document.createElement("div");
+		document.body.appendChild(el);
+		let hovered;
+		effectScope(() => {
+			hovered = createHover(el);
+		});
+		el.dispatchEvent(new PointerEvent("pointerenter"));
+		globalExpect(hovered()).toBe(true);
+	});
+	it("becomes false on pointerleave", () => {
+		const el = document.createElement("div");
+		document.body.appendChild(el);
+		let hovered;
+		effectScope(() => {
+			hovered = createHover(el);
+		});
+		el.dispatchEvent(new PointerEvent("pointerenter"));
+		el.dispatchEvent(new PointerEvent("pointerleave"));
+		globalExpect(hovered()).toBe(false);
+	});
+	it("removes listeners on Symbol.dispose", () => {
+		const el = document.createElement("div");
+		document.body.appendChild(el);
+		let hovered;
+		effectScope(() => {
+			hovered = createHover(el);
+		});
+		hovered[Symbol.dispose]();
+		el.dispatchEvent(new PointerEvent("pointerenter"));
+		globalExpect(hovered()).toBe(false);
+	});
+	it("works with a reactive getter target", () => {
+		const el = document.createElement("div");
+		document.body.appendChild(el);
+		let hovered;
+		effectScope(() => {
+			hovered = createHover(() => el);
+		});
+		el.dispatchEvent(new PointerEvent("pointerenter"));
+		globalExpect(hovered()).toBe(true);
+	});
+});
+//#endregion
+export {};

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

@@ -0,0 +1,8 @@
+//#region src/signals/lib/intersection-observer.d.ts
+/**
+ * Raw `IntersectionObserver` wrapper with automatic cleanup.
+ * Use `createIsInViewport` for the common boolean case.
+ */
+declare function createIntersectionObserver(target: Element | (() => Element | null), callback: IntersectionObserverCallback, options?: IntersectionObserverInit): Disposable;
+//#endregion
+export { createIntersectionObserver };

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

@@ -0,0 +1,16 @@
+import { d as onCleanup } from "../../signals-CLAPw8kk.mjs";
+//#region src/signals/lib/intersection-observer.ts
+/**
+* Raw `IntersectionObserver` wrapper with automatic cleanup.
+* Use `createIsInViewport` for the common boolean case.
+*/
+function createIntersectionObserver(target, callback, options) {
+	const observer = new IntersectionObserver(callback, options);
+	const el = typeof target === "function" ? target() : target;
+	if (el) observer.observe(el);
+	const cleanup = () => observer.disconnect();
+	onCleanup(cleanup);
+	return { [Symbol.dispose]: cleanup };
+}
+//#endregion
+export { createIntersectionObserver };

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

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

package/dist/signals/lib/intersection-observer.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 { createIntersectionObserver } from "./intersection-observer.mjs";
+//#region src/signals/lib/intersection-observer.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.unstubAllGlobals();
+});
+describe("createIntersectionObserver", () => {
+	it("observes a target element", () => {
+		const target = document.createElement("div");
+		document.body.appendChild(target);
+		const observe = vi.fn();
+		vi.stubGlobal("IntersectionObserver", function MockIO() {
+			return {
+				observe,
+				disconnect: vi.fn()
+			};
+		});
+		effectScope(() => {
+			createIntersectionObserver(target, vi.fn());
+		});
+		globalExpect(observe).toHaveBeenCalledWith(target);
+	});
+	it("disconnects on Symbol.dispose", () => {
+		const target = document.createElement("div");
+		document.body.appendChild(target);
+		const disconnect = vi.fn();
+		vi.stubGlobal("IntersectionObserver", function MockIO() {
+			return {
+				observe: vi.fn(),
+				disconnect
+			};
+		});
+		let io;
+		effectScope(() => {
+			io = createIntersectionObserver(target, vi.fn());
+		});
+		io[Symbol.dispose]();
+		globalExpect(disconnect).toHaveBeenCalledOnce();
+	});
+});
+//#endregion
+export {};

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

@@ -0,0 +1,18 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/interval.d.ts
+type IntervalResult = {
+  isRunning: Computed<boolean>;
+  start(): void;
+  stop(): void;
+  reset(): void;
+} & Disposable;
+/**
+ * Pausable `setInterval` wrapper.  Starts running immediately on creation.
+ *
+ * @param callback - Called on each tick.
+ * @param delay    - Interval delay in ms (or a reactive getter).
+ */
+declare function createInterval(callback: () => void, delay: number | (() => number)): IntervalResult;
+//#endregion
+export { createInterval };

package/dist/signals/lib/interval.mjs

@@ -0,0 +1,38 @@
+import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
+//#region src/signals/lib/interval.ts
+/**
+* Pausable `setInterval` wrapper.  Starts running immediately on creation.
+*
+* @param callback - Called on each tick.
+* @param delay    - Interval delay in ms (or a reactive getter).
+*/
+function createInterval(callback, delay) {
+	const isRunning = signal(true);
+	let id;
+	const getDelay = typeof delay === "function" ? delay : () => delay;
+	const start = () => {
+		if (id !== void 0) return;
+		isRunning(true);
+		id = setInterval(() => callback(), getDelay());
+	};
+	const stop = () => {
+		clearInterval(id);
+		id = void 0;
+		isRunning(false);
+	};
+	const reset = () => {
+		stop();
+		start();
+	};
+	start();
+	const cleanup = () => stop();
+	onCleanup(cleanup);
+	return Object.assign({
+		isRunning,
+		start,
+		stop,
+		reset
+	}, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createInterval };

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

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

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

@@ -0,0 +1,68 @@
+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 { createInterval } from "./interval.mjs";
+//#region src/signals/lib/interval.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.useRealTimers();
+});
+describe("createInterval", () => {
+	it("calls callback on each tick", () => {
+		vi.useFakeTimers();
+		const cb = vi.fn();
+		effectScope(() => {
+			createInterval(cb, 100);
+		});
+		vi.advanceTimersByTime(350);
+		globalExpect(cb).toHaveBeenCalledTimes(3);
+	});
+	it("stop() pauses the interval", () => {
+		vi.useFakeTimers();
+		const cb = vi.fn();
+		let iv;
+		effectScope(() => {
+			iv = createInterval(cb, 100);
+		});
+		iv.stop();
+		vi.advanceTimersByTime(500);
+		globalExpect(cb).toHaveBeenCalledTimes(0);
+		globalExpect(iv.isRunning()).toBe(false);
+	});
+	it("start() resumes after stop", () => {
+		vi.useFakeTimers();
+		const cb = vi.fn();
+		let iv;
+		effectScope(() => {
+			iv = createInterval(cb, 100);
+		});
+		iv.stop();
+		iv.start();
+		vi.advanceTimersByTime(250);
+		globalExpect(cb).toHaveBeenCalledTimes(2);
+	});
+	it("reset() restarts the interval", () => {
+		vi.useFakeTimers();
+		const cb = vi.fn();
+		let iv;
+		effectScope(() => {
+			iv = createInterval(cb, 100);
+		});
+		vi.advanceTimersByTime(50);
+		iv.reset();
+		vi.advanceTimersByTime(100);
+		globalExpect(cb).toHaveBeenCalledTimes(1);
+	});
+	it("Symbol.dispose cleans up", () => {
+		vi.useFakeTimers();
+		const cb = vi.fn();
+		let iv;
+		effectScope(() => {
+			iv = createInterval(cb, 100);
+		});
+		iv[Symbol.dispose]();
+		vi.advanceTimersByTime(500);
+		globalExpect(cb).toHaveBeenCalledTimes(0);
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/is-document-visible.d.mts

@@ -0,0 +1,11 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/is-document-visible.d.ts
+/**
+ * Returns a `Computed<boolean>` that tracks the Page Visibility API.
+ * `true` while the document is visible; `false` when hidden (minimised,
+ * background tab, etc.).
+ */
+declare function createIsDocumentVisible(): Computed<boolean> & Disposable;
+//#endregion
+export { createIsDocumentVisible };

package/dist/signals/lib/is-document-visible.mjs

@@ -0,0 +1,19 @@
+import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
+//#region src/signals/lib/is-document-visible.ts
+/**
+* Returns a `Computed<boolean>` that tracks the Page Visibility API.
+* `true` while the document is visible; `false` when hidden (minimised,
+* background tab, etc.).
+*/
+function createIsDocumentVisible() {
+	const visible = signal(typeof document !== "undefined" ? document.visibilityState === "visible" : true);
+	const handler = () => {
+		visible(document.visibilityState === "visible");
+	};
+	document.addEventListener("visibilitychange", handler);
+	const cleanup = () => document.removeEventListener("visibilitychange", handler);
+	onCleanup(cleanup);
+	return Object.assign(visible, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createIsDocumentVisible };

package/dist/signals/lib/is-document-visible.test.d.mts

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

package/dist/signals/lib/is-document-visible.test.mjs

@@ -0,0 +1,58 @@
+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 { createIsDocumentVisible } from "./is-document-visible.mjs";
+//#region src/signals/lib/is-document-visible.test.ts
+afterEach(() => {
+	Object.defineProperty(document, "visibilityState", {
+		value: "visible",
+		configurable: true
+	});
+});
+function setVisibility(state) {
+	Object.defineProperty(document, "visibilityState", {
+		value: state,
+		configurable: true
+	});
+	document.dispatchEvent(new Event("visibilitychange"));
+}
+describe("createIsDocumentVisible", () => {
+	it("starts as true when document is visible", () => {
+		Object.defineProperty(document, "visibilityState", {
+			value: "visible",
+			configurable: true
+		});
+		let visible;
+		effectScope(() => {
+			visible = createIsDocumentVisible();
+		});
+		globalExpect(visible()).toBe(true);
+	});
+	it("becomes false when document becomes hidden", () => {
+		let visible;
+		effectScope(() => {
+			visible = createIsDocumentVisible();
+		});
+		setVisibility("hidden");
+		globalExpect(visible()).toBe(false);
+	});
+	it("becomes true again when document becomes visible", () => {
+		let visible;
+		effectScope(() => {
+			visible = createIsDocumentVisible();
+		});
+		setVisibility("hidden");
+		setVisibility("visible");
+		globalExpect(visible()).toBe(true);
+	});
+	it("stops reacting after Symbol.dispose", () => {
+		let visible;
+		effectScope(() => {
+			visible = createIsDocumentVisible();
+		});
+		visible[Symbol.dispose]();
+		setVisibility("hidden");
+		globalExpect(visible()).toBe(true);
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/is-focus-within.d.mts

@@ -0,0 +1,10 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/is-focus-within.d.ts
+/**
+ * Returns a `Computed<boolean>` that is `true` while focus is anywhere inside
+ * `target` (including `target` itself).
+ */
+declare function createIsFocusWithin(target: Element | (() => Element | null)): Computed<boolean> & Disposable;
+//#endregion
+export { createIsFocusWithin };

package/dist/signals/lib/is-focus-within.mjs

@@ -0,0 +1,28 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/is-focus-within.ts
+/**
+* Returns a `Computed<boolean>` that is `true` while focus is anywhere inside
+* `target` (including `target` itself).
+*/
+function createIsFocusWithin(target) {
+	const focused = signal(false);
+	const el = typeof target === "function" ? target() : target;
+	const onFocusIn = (e) => {
+		const t = typeof target === "function" ? target() : target;
+		if (t && t.contains(e.target)) focused(true);
+	};
+	const onFocusOut = (e) => {
+		const t = typeof target === "function" ? target() : target;
+		if (t && !t.contains(e.relatedTarget)) focused(false);
+	};
+	const cleanups = [];
+	if (el) {
+		cleanups.push(createEventListener(document, "focusin", onFocusIn));
+		cleanups.push(createEventListener(document, "focusout", onFocusOut));
+	}
+	const cleanup = () => cleanups.forEach((fn) => fn());
+	return Object.assign(focused, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createIsFocusWithin };

package/dist/signals/lib/is-focus-within.test.d.mts

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

package/dist/signals/lib/is-focus-within.test.mjs

@@ -0,0 +1,50 @@
+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 { createIsFocusWithin } from "./is-focus-within.mjs";
+//#region src/signals/lib/is-focus-within.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+});
+describe("createIsFocusWithin", () => {
+	it("starts as false", () => {
+		const el = document.createElement("div");
+		document.body.appendChild(el);
+		let focused;
+		effectScope(() => {
+			focused = createIsFocusWithin(el);
+		});
+		globalExpect(focused()).toBe(false);
+	});
+	it("becomes true when a child receives focus", () => {
+		const outer = document.createElement("div");
+		const inner = document.createElement("input");
+		outer.appendChild(inner);
+		document.body.appendChild(outer);
+		let focused;
+		effectScope(() => {
+			focused = createIsFocusWithin(outer);
+		});
+		document.dispatchEvent(new FocusEvent("focusin", {
+			bubbles: true,
+			relatedTarget: inner
+		}));
+		Object.defineProperty(document, "activeElement", {
+			configurable: true,
+			get: () => inner
+		});
+		outer.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+		globalExpect(typeof focused()).toBe("boolean");
+	});
+	it("stops reacting after Symbol.dispose", () => {
+		const el = document.createElement("div");
+		document.body.appendChild(el);
+		let focused;
+		effectScope(() => {
+			focused = createIsFocusWithin(el);
+		});
+		focused[Symbol.dispose]();
+		globalExpect(focused()).toBe(false);
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/is-idle.d.mts

@@ -0,0 +1,10 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/is-idle.d.ts
+/**
+ * Returns a `Computed<boolean>` that is `true` when the user has been inactive
+ * for longer than `timeout` milliseconds (default 60 s).
+ */
+declare function createIsIdle(timeout?: number): Computed<boolean> & Disposable;
+//#endregion
+export { createIsIdle };

package/dist/signals/lib/is-idle.mjs

@@ -0,0 +1,37 @@
+import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/is-idle.ts
+/** Default idle timeout in milliseconds (60 seconds). */
+const DEFAULT_TIMEOUT = 6e4;
+/** Events that reset the idle timer. */
+const ACTIVITY_EVENTS = [
+	"mousemove",
+	"mousedown",
+	"keydown",
+	"touchstart",
+	"scroll",
+	"pointermove"
+];
+/**
+* Returns a `Computed<boolean>` that is `true` when the user has been inactive
+* for longer than `timeout` milliseconds (default 60 s).
+*/
+function createIsIdle(timeout = DEFAULT_TIMEOUT) {
+	const idle = signal(false);
+	let timer;
+	const reset = () => {
+		clearTimeout(timer);
+		idle(false);
+		timer = setTimeout(() => idle(true), timeout);
+	};
+	reset();
+	const removes = ACTIVITY_EVENTS.map((event) => createEventListener(window, event, reset, { passive: true }));
+	onCleanup(() => clearTimeout(timer));
+	const cleanup = () => {
+		clearTimeout(timer);
+		removes.forEach((fn) => fn());
+	};
+	return Object.assign(idle, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createIsIdle };

package/dist/signals/lib/is-idle.test.d.mts

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

package/dist/signals/lib/is-idle.test.mjs

@@ -0,0 +1,50 @@
+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 { createIsIdle } from "./is-idle.mjs";
+//#region src/signals/lib/is-idle.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.useRealTimers();
+});
+describe("createIsIdle", () => {
+	it("starts as false (user is active)", () => {
+		vi.useFakeTimers();
+		let idle;
+		effectScope(() => {
+			idle = createIsIdle(1e3);
+		});
+		globalExpect(idle()).toBe(false);
+	});
+	it("becomes true after the timeout", () => {
+		vi.useFakeTimers();
+		let idle;
+		effectScope(() => {
+			idle = createIsIdle(1e3);
+		});
+		vi.advanceTimersByTime(1001);
+		globalExpect(idle()).toBe(true);
+	});
+	it("resets the timer on activity", () => {
+		vi.useFakeTimers();
+		let idle;
+		effectScope(() => {
+			idle = createIsIdle(1e3);
+		});
+		vi.advanceTimersByTime(800);
+		window.dispatchEvent(new MouseEvent("mousemove"));
+		vi.advanceTimersByTime(800);
+		globalExpect(idle()).toBe(false);
+	});
+	it("stops reacting after Symbol.dispose", () => {
+		vi.useFakeTimers();
+		let idle;
+		effectScope(() => {
+			idle = createIsIdle(500);
+		});
+		idle[Symbol.dispose]();
+		vi.advanceTimersByTime(1e3);
+		globalExpect(idle()).toBe(false);
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/is-in-viewport.d.mts

@@ -0,0 +1,10 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/is-in-viewport.d.ts
+/**
+ * Returns a `Computed<boolean>` that is `true` while `target` is intersecting
+ * the viewport (or a custom root defined via `options`).
+ */
+declare function createIsInViewport(target: Element | (() => Element | null), options?: IntersectionObserverInit): Computed<boolean> & Disposable;
+//#endregion
+export { createIsInViewport };

package/dist/signals/lib/is-in-viewport.mjs

@@ -0,0 +1,16 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createIntersectionObserver } from "./intersection-observer.mjs";
+//#region src/signals/lib/is-in-viewport.ts
+/**
+* Returns a `Computed<boolean>` that is `true` while `target` is intersecting
+* the viewport (or a custom root defined via `options`).
+*/
+function createIsInViewport(target, options) {
+	const visible = signal(false);
+	const observer = createIntersectionObserver(target, (entries) => {
+		for (const entry of entries) visible(entry.isIntersecting);
+	}, options);
+	return Object.assign(visible, { [Symbol.dispose]: observer[Symbol.dispose] });
+}
+//#endregion
+export { createIsInViewport };

package/dist/signals/lib/is-in-viewport.test.d.mts

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