elements-kit 0.0.7 → 0.0.9

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

@@ -0,0 +1,56 @@
+import { f as signal, o as effectScope } from "../../signals-CLAPw8kk.mjs";
+import { a as describe, i as beforeEach, n as vi, o as it, r as afterEach, t as globalExpect } from "../../test.BmQO5GaM-CR2qjV1t.mjs";
+import { createThrottled } from "./throttled.mjs";
+//#region src/signals/lib/throttled.test.ts
+beforeEach(() => {
+	vi.useFakeTimers();
+});
+afterEach(() => {
+	vi.useRealTimers();
+});
+describe("createThrottled", () => {
+	it("returns the initial value synchronously", () => {
+		const s = signal(7);
+		let t;
+		effectScope(() => {
+			t = createThrottled(() => s(), 200);
+		});
+		globalExpect(t()).toBe(7);
+	});
+	it("passes through the first change immediately (leading edge)", () => {
+		const s = signal(0);
+		let t;
+		effectScope(() => {
+			t = createThrottled(() => s(), 200);
+		});
+		s(1);
+		globalExpect(t()).toBe(1);
+	});
+	it("schedules a trailing update for rapid changes within the interval", () => {
+		const s = signal(0);
+		let t;
+		effectScope(() => {
+			t = createThrottled(() => s(), 200);
+		});
+		s(1);
+		globalExpect(t()).toBe(1);
+		s(2);
+		globalExpect(t()).toBe(1);
+		vi.advanceTimersByTime(200);
+		globalExpect(t()).toBe(2);
+	});
+	it("stops updating after scope disposal", () => {
+		const s = signal(0);
+		let t;
+		const stop = effectScope(() => {
+			t = createThrottled(() => s(), 200);
+		});
+		s(1);
+		stop();
+		s(99);
+		vi.advanceTimersByTime(400);
+		globalExpect(t()).toBe(1);
+	});
+});
+//#endregion
+export {};

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

@@ -0,0 +1,16 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/timeout.d.ts
+type TimeoutResult = {
+  isPending: Computed<boolean>;
+  start(): void;
+  stop(): void;
+  reset(): void;
+} & Disposable;
+/**
+ * Reactive `setTimeout` wrapper with pause/resume/reset control.
+ * The callback fires once after `delay` ms.  Starts running immediately.
+ */
+declare function createTimeout(callback: () => void, delay: number): TimeoutResult;
+//#endregion
+export { createTimeout };

package/dist/signals/lib/timeout.mjs

@@ -0,0 +1,39 @@
+import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
+//#region src/signals/lib/timeout.ts
+/**
+* Reactive `setTimeout` wrapper with pause/resume/reset control.
+* The callback fires once after `delay` ms.  Starts running immediately.
+*/
+function createTimeout(callback, delay) {
+	const isPending = signal(false);
+	let id;
+	const stop = () => {
+		clearTimeout(id);
+		id = void 0;
+		isPending(false);
+	};
+	const start = () => {
+		if (isPending()) return;
+		isPending(true);
+		id = setTimeout(() => {
+			isPending(false);
+			id = void 0;
+			callback();
+		}, delay);
+	};
+	const reset = () => {
+		stop();
+		start();
+	};
+	start();
+	const cleanup = () => stop();
+	onCleanup(cleanup);
+	return Object.assign({
+		isPending,
+		start,
+		stop,
+		reset
+	}, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createTimeout };

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

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

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

@@ -0,0 +1,64 @@
+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 { createTimeout } from "./timeout.mjs";
+//#region src/signals/lib/timeout.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.useRealTimers();
+});
+describe("createTimeout", () => {
+	it("starts as pending", () => {
+		vi.useFakeTimers();
+		let t;
+		const cb = vi.fn();
+		effectScope(() => {
+			t = createTimeout(cb, 500);
+		});
+		globalExpect(t.isPending()).toBe(true);
+	});
+	it("fires callback after delay", () => {
+		vi.useFakeTimers();
+		const cb = vi.fn();
+		effectScope(() => {
+			createTimeout(cb, 500);
+		});
+		vi.advanceTimersByTime(600);
+		globalExpect(cb).toHaveBeenCalledOnce();
+	});
+	it("isPending becomes false after firing", () => {
+		vi.useFakeTimers();
+		let t;
+		effectScope(() => {
+			t = createTimeout(vi.fn(), 200);
+		});
+		vi.advanceTimersByTime(300);
+		globalExpect(t.isPending()).toBe(false);
+	});
+	it("stop() cancels the timeout", () => {
+		vi.useFakeTimers();
+		const cb = vi.fn();
+		let t;
+		effectScope(() => {
+			t = createTimeout(cb, 500);
+		});
+		t.stop();
+		vi.advanceTimersByTime(1e3);
+		globalExpect(cb).not.toHaveBeenCalled();
+	});
+	it("reset() restarts the timer", () => {
+		vi.useFakeTimers();
+		const cb = vi.fn();
+		let t;
+		effectScope(() => {
+			t = createTimeout(cb, 500);
+		});
+		vi.advanceTimersByTime(300);
+		t.reset();
+		vi.advanceTimersByTime(300);
+		globalExpect(cb).not.toHaveBeenCalled();
+		vi.advanceTimersByTime(300);
+		globalExpect(cb).toHaveBeenCalledOnce();
+	});
+});
+//#endregion
+export {};

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

@@ -0,0 +1,12 @@
+import { n as Signal } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/toggle.d.ts
+type ToggleResult = Signal<boolean> & {
+  toggle(): void;
+};
+/**
+ * Returns a boolean `Signal` with an additional `toggle()` helper.
+ */
+declare function createToggle(initial?: boolean): ToggleResult;
+//#endregion
+export { createToggle };

package/dist/signals/lib/toggle.mjs

@@ -0,0 +1,12 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+//#region src/signals/lib/toggle.ts
+/**
+* Returns a boolean `Signal` with an additional `toggle()` helper.
+*/
+function createToggle(initial = false) {
+	const s = signal(initial);
+	const toggle = () => s(!s());
+	return Object.assign(s, { toggle });
+}
+//#endregion
+export { createToggle };

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

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

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

@@ -0,0 +1,43 @@
+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 { createToggle } from "./toggle.mjs";
+//#region src/signals/lib/toggle.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+});
+describe("createToggle", () => {
+	it("starts as false by default", () => {
+		let t;
+		effectScope(() => {
+			t = createToggle();
+		});
+		globalExpect(t()).toBe(false);
+	});
+	it("starts with provided initial value", () => {
+		let t;
+		effectScope(() => {
+			t = createToggle(true);
+		});
+		globalExpect(t()).toBe(true);
+	});
+	it("toggle() flips the value", () => {
+		let t;
+		effectScope(() => {
+			t = createToggle(false);
+		});
+		t.toggle();
+		globalExpect(t()).toBe(true);
+		t.toggle();
+		globalExpect(t()).toBe(false);
+	});
+	it("can be set directly via signal call", () => {
+		let t;
+		effectScope(() => {
+			t = createToggle();
+		});
+		t(true);
+		globalExpect(t()).toBe(true);
+	});
+});
+//#endregion
+export {};

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

@@ -0,0 +1,25 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/video.d.ts
+type VideoResult = {
+  element: HTMLVideoElement;
+  playing: Computed<boolean>;
+  muted: Computed<boolean>;
+  volume: Computed<number>;
+  duration: Computed<number>;
+  time: Computed<number>;
+  ended: Computed<boolean>;
+  play(): void;
+  pause(): void;
+  toggle(): void;
+  setVolume(v: number): void;
+  setTime(t: number): void;
+  mute(): void;
+  unmute(): void;
+} & Disposable;
+/**
+ * Wraps an `HTMLVideoElement` with reactive state and playback controls.
+ */
+declare function createVideo(element: HTMLVideoElement): VideoResult;
+//#endregion
+export { createVideo };

package/dist/signals/lib/video.mjs

@@ -0,0 +1,59 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/video.ts
+/**
+* Wraps an `HTMLVideoElement` with reactive state and playback controls.
+*/
+function createVideo(element) {
+	const el = element;
+	const playing = signal(!el.paused);
+	const muted = signal(el.muted);
+	const volume = signal(el.volume);
+	const duration = signal(el.duration || 0);
+	const time = signal(el.currentTime);
+	const ended = signal(el.ended);
+	const onPlay = () => playing(true);
+	const onPause = () => playing(false);
+	const onVolumeChange = () => {
+		muted(el.muted);
+		volume(el.volume);
+	};
+	const onDurationChange = () => duration(el.duration);
+	const onTimeUpdate = () => time(el.currentTime);
+	const onEnded = () => ended(true);
+	const cleanups = [
+		createEventListener(el, "play", onPlay),
+		createEventListener(el, "pause", onPause),
+		createEventListener(el, "volumechange", onVolumeChange),
+		createEventListener(el, "durationchange", onDurationChange),
+		createEventListener(el, "timeupdate", onTimeUpdate),
+		createEventListener(el, "ended", onEnded)
+	];
+	const cleanup = () => cleanups.forEach((fn) => fn());
+	return Object.assign({
+		element: el,
+		playing,
+		muted,
+		volume,
+		duration,
+		time,
+		ended,
+		play: () => el.play(),
+		pause: () => el.pause(),
+		toggle: () => el.paused ? el.play() : el.pause(),
+		setVolume: (v) => {
+			el.volume = Math.min(1, Math.max(0, v));
+		},
+		setTime: (t) => {
+			el.currentTime = t;
+		},
+		mute: () => {
+			el.muted = true;
+		},
+		unmute: () => {
+			el.muted = false;
+		}
+	}, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createVideo };

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

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

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

@@ -0,0 +1,51 @@
+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 { createVideo } from "./video.mjs";
+//#region src/signals/lib/video.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+	vi.restoreAllMocks();
+});
+describe("createVideo", () => {
+	it("accepts an HTMLVideoElement", () => {
+		const el = document.createElement("video");
+		document.body.appendChild(el);
+		let v;
+		effectScope(() => {
+			v = createVideo(el);
+		});
+		globalExpect(v.element).toBe(el);
+	});
+	it("starts as paused", () => {
+		const el = document.createElement("video");
+		document.body.appendChild(el);
+		let v;
+		effectScope(() => {
+			v = createVideo(el);
+		});
+		globalExpect(v.playing()).toBe(false);
+	});
+	it("setTime updates currentTime", () => {
+		const el = document.createElement("video");
+		document.body.appendChild(el);
+		let v;
+		effectScope(() => {
+			v = createVideo(el);
+		});
+		v.setTime(30);
+		globalExpect(el.currentTime).toBe(30);
+	});
+	it("removes event listeners on Symbol.dispose", () => {
+		const el = document.createElement("video");
+		document.body.appendChild(el);
+		let v;
+		effectScope(() => {
+			v = createVideo(el);
+		});
+		const removeSpy = vi.spyOn(el, "removeEventListener");
+		v[Symbol.dispose]();
+		globalExpect(removeSpy).toHaveBeenCalled();
+	});
+});
+//#endregion
+export {};

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

@@ -0,0 +1,16 @@
+//#region src/signals/lib/watch.d.ts
+/**
+ * Watches a reactive `source` getter and runs `callback` whenever the source
+ * changes, skipping the initial run.
+ *
+ * ```ts
+ * const count = signal(0);
+ * createWatch(() => count(), (value, prev) => console.log(value, prev));
+ * count(1); // logs: 1, 0
+ * ```
+ *
+ * @returns A disposal function.
+ */
+declare function createWatch<T>(source: () => T, callback: (value: T, prev: T | undefined) => void): () => void;
+//#endregion
+export { createWatch };

package/dist/signals/lib/watch.mjs

@@ -0,0 +1,31 @@
+import { a as effect, m as untracked } from "../../signals-CLAPw8kk.mjs";
+//#region src/signals/lib/watch.ts
+/**
+* Watches a reactive `source` getter and runs `callback` whenever the source
+* changes, skipping the initial run.
+*
+* ```ts
+* const count = signal(0);
+* createWatch(() => count(), (value, prev) => console.log(value, prev));
+* count(1); // logs: 1, 0
+* ```
+*
+* @returns A disposal function.
+*/
+function createWatch(source, callback) {
+	let prev;
+	let firstRun = true;
+	return effect(() => {
+		const value = source();
+		if (firstRun) {
+			firstRun = false;
+			prev = value;
+			return;
+		}
+		const p = prev;
+		prev = value;
+		untracked(() => callback(value, p));
+	});
+}
+//#endregion
+export { createWatch };

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

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

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

@@ -0,0 +1,51 @@
+import { f as signal, 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 { createWatch } from "./watch.mjs";
+//#region src/signals/lib/watch.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+});
+describe("createWatch", () => {
+	it("does not call callback on initial run", () => {
+		const s = signal(0);
+		const cb = vi.fn();
+		effectScope(() => {
+			createWatch(() => s(), cb);
+		});
+		globalExpect(cb).not.toHaveBeenCalled();
+	});
+	it("calls callback when the source changes", () => {
+		const s = signal(0);
+		const cb = vi.fn();
+		effectScope(() => {
+			createWatch(() => s(), cb);
+		});
+		s(1);
+		globalExpect(cb).toHaveBeenCalledOnce();
+		globalExpect(cb).toHaveBeenCalledWith(1, 0);
+	});
+	it("passes the previous value correctly", () => {
+		const s = signal("a");
+		const cb = vi.fn();
+		effectScope(() => {
+			createWatch(() => s(), cb);
+		});
+		s("b");
+		s("c");
+		globalExpect(cb).toHaveBeenNthCalledWith(1, "b", "a");
+		globalExpect(cb).toHaveBeenNthCalledWith(2, "c", "b");
+	});
+	it("disposal stops the watch", () => {
+		const s = signal(0);
+		const cb = vi.fn();
+		let stop;
+		effectScope(() => {
+			stop = createWatch(() => s(), cb);
+		});
+		stop();
+		s(1);
+		globalExpect(cb).not.toHaveBeenCalled();
+	});
+});
+//#endregion
+export {};

package/dist/signals/lib/window-size.d.mts

@@ -0,0 +1,14 @@
+import { t as Computed } from "../../index-BtqiEEfc.mjs";
+
+//#region src/signals/lib/window-size.d.ts
+type WindowSizeResult = {
+  width: Computed<number>;
+  height: Computed<number>;
+} & Disposable;
+/**
+ * Returns reactive `width` and `height` signals tracking the browser window
+ * inner dimensions.
+ */
+declare function createWindowSize(): WindowSizeResult;
+//#endregion
+export { createWindowSize };

package/dist/signals/lib/window-size.mjs

@@ -0,0 +1,22 @@
+import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { createEventListener } from "./event-listener.mjs";
+//#region src/signals/lib/window-size.ts
+/**
+* Returns reactive `width` and `height` signals tracking the browser window
+* inner dimensions.
+*/
+function createWindowSize() {
+	const width = signal(typeof window !== "undefined" ? window.innerWidth : 0);
+	const height = signal(typeof window !== "undefined" ? window.innerHeight : 0);
+	const onResize = () => {
+		width(window.innerWidth);
+		height(window.innerHeight);
+	};
+	const cleanup = createEventListener(window, "resize", onResize);
+	return Object.assign({
+		width,
+		height
+	}, { [Symbol.dispose]: cleanup });
+}
+//#endregion
+export { createWindowSize };

package/dist/signals/lib/window-size.test.d.mts

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

package/dist/signals/lib/window-size.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 { createWindowSize } from "./window-size.mjs";
+//#region src/signals/lib/window-size.test.ts
+afterEach(() => {
+	document.body.innerHTML = "";
+});
+describe("createWindowSize", () => {
+	it("starts with current window dimensions", () => {
+		let ws;
+		effectScope(() => {
+			ws = createWindowSize();
+		});
+		globalExpect(ws.width()).toBe(window.innerWidth);
+		globalExpect(ws.height()).toBe(window.innerHeight);
+	});
+	it("updates on resize event", () => {
+		let ws;
+		effectScope(() => {
+			ws = createWindowSize();
+		});
+		Object.defineProperty(window, "innerWidth", {
+			configurable: true,
+			get: () => 1024
+		});
+		Object.defineProperty(window, "innerHeight", {
+			configurable: true,
+			get: () => 768
+		});
+		window.dispatchEvent(new Event("resize"));
+		globalExpect(ws.width()).toBe(1024);
+		globalExpect(ws.height()).toBe(768);
+	});
+	it("stops reacting after Symbol.dispose", () => {
+		let ws;
+		effectScope(() => {
+			ws = createWindowSize();
+		});
+		const w0 = ws.width();
+		ws[Symbol.dispose]();
+		Object.defineProperty(window, "innerWidth", {
+			configurable: true,
+			get: () => 9999
+		});
+		window.dispatchEvent(new Event("resize"));
+		globalExpect(ws.width()).toBe(w0);
+	});
+});
+//#endregion
+export {};