elements-kit 0.0.9 → 0.0.11

package/dist/{signals/lib → utilities}/timeout.test.mjs

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

package/dist/utilities/window-size.d.mts

@@ -0,0 +1,10 @@
+import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+
+//#region src/utilities/window-size.d.ts
+type WindowSizeResult = {
+  width: Computed<number>;
+  height: Computed<number>;
+} & Disposable;
+declare const windowSize: WindowSizeResult;
+//#endregion
+export { windowSize };

package/dist/utilities/window-size.mjs

@@ -0,0 +1,22 @@
+import { a as computed } from "../signals-DcgXhkU2.mjs";
+import { fromEvent, sync } from "./event-driven.mjs";
+//#region src/utilities/window-size.ts
+/**
+* Returns reactive `width` and `height` signals tracking the browser window
+* inner dimensions.
+*/
+function createWindowSize() {
+	const isBrowser = typeof window !== "undefined";
+	const [size, stop] = sync(fromEvent(window, "resize"), () => ({
+		w: isBrowser ? window.innerWidth : 0,
+		h: isBrowser ? window.innerHeight : 0
+	}));
+	return {
+		width: computed(() => size().w),
+		height: computed(() => size().h),
+		[Symbol.dispose]: stop
+	};
+}
+const windowSize = createWindowSize();
+//#endregion
+export { windowSize };

package/dist/utilities/window-size.test.mjs

@@ -0,0 +1,42 @@
+import { o as describe, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
+import { windowSize } from "./window-size.mjs";
+//#region src/utilities/window-size.test.ts
+describe("windowSize (singleton)", () => {
+	it("starts with current window dimensions", () => {
+		globalExpect(windowSize.width()).toBe(window.innerWidth);
+		globalExpect(windowSize.height()).toBe(window.innerHeight);
+	});
+	it("updates on resize event", () => {
+		const origWidth = window.innerWidth;
+		const origHeight = window.innerHeight;
+		Object.defineProperty(window, "innerWidth", {
+			value: 1234,
+			configurable: true
+		});
+		Object.defineProperty(window, "innerHeight", {
+			value: 5678,
+			configurable: true
+		});
+		window.dispatchEvent(new Event("resize"));
+		globalExpect(windowSize.width()).toBe(1234);
+		globalExpect(windowSize.height()).toBe(5678);
+		Object.defineProperty(window, "innerWidth", {
+			value: origWidth,
+			configurable: true
+		});
+		Object.defineProperty(window, "innerHeight", {
+			value: origHeight,
+			configurable: true
+		});
+	});
+	it("remains reactive after Symbol.dispose", () => {
+		Object.defineProperty(window, "innerWidth", {
+			value: 42,
+			configurable: true
+		});
+		window.dispatchEvent(new Event("resize"));
+		globalExpect(windowSize.width()).toBe(42);
+	});
+});
+//#endregion
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",
@@ -33,11 +33,6 @@
       "import": "./dist/signals/index.mjs",
       "types": "./dist/signals/index.d.ts"
     },
-    "./signals/*": {
-      "source": "./src/signals/lib/*.ts",
-      "import": "./dist/signals/lib/*.mjs",
-      "types": "./dist/signals/lib/*.d.ts"
-    },
     "./slot": {
       "source": "./src/slot.ts",
       "import": "./dist/slot.mjs",
@@ -67,6 +62,16 @@
       "source": "./src/jsx-runtime/index.ts",
       "import": "./dist/jsx-runtime/index.mjs",
       "types": "./dist/jsx-runtime/index.d.ts"
+    },
+    "./integrations/*": {
+      "source": "./src/integrations/*.ts",
+      "import": "./dist/integrations/*.mjs",
+      "types": "./dist/integrations/*.d.ts"
+    },
+    "./utilities/*": {
+      "source": "./src/utilities/*.ts",
+      "import": "./dist/utilities/*.mjs",
+      "types": "./dist/utilities/*.d.ts"
     }
   },
   "scripts": {

package/dist/index-CKjDUp1B.d.mts

@@ -1,89 +0,0 @@
-import { t as PrimitiveNodeType } from "./polyfill-AFIi9kAN.mjs";
-
-//#region src/builder/index.d.ts
-declare const DISPOSABLES: unique symbol;
-declare const DISPOSE: symbol;
-declare const VALUE: unique symbol;
-declare const EFFECT: unique symbol;
-declare class ElementBuilder<T extends Element = Element> {
-  /** Dispose the reactive element and run all cleanup functions */
-  [DISPOSE]: () => void;
-  /** The underlying DOM element */
-  private [VALUE];
-  /** A set of cleanup functions to run when disposing the element */
-  private [DISPOSABLES];
-  [EFFECT](fn: () => void): this;
-  private constructor();
-  static create<T extends Element>(el: T): ReactiveElement<T>;
-  children(...children: ValueOrReactive<ElementBuilder | Node | string | number>[]): T;
-  ref(): T;
-  ref(apply: (ref: T) => void | (() => void)): this;
-  on<K extends keyof HTMLElementEventMap>(eventType: K, listener: (ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): this;
-}
-declare function toNode(c: ElementBuilder | PrimitiveNodeType): Node;
-declare function builder<T extends Element>(el: T): ReactiveElementOf<T>;
-/**
- * Callable overloads matching the Proxy apply trap → ref() behavior.
- * Calling a reactive element as a function delegates to ref():
- *   el()            → returns the raw DOM element
- *   el((ref) => {}) → applies a side-effect, returns the builder for chaining
- */
-interface RefCallable<T extends Element> {
-  (): T;
-  (apply: (ref: T) => void | (() => void)): this;
-}
-type ReactiveElement<T extends Element> = ElementBuilder<T> & RefCallable<T>;
-type ValueOrReactive<T> = (() => T) | T;
-type ValueOrReactiveArray<T extends any[]> = { [K in keyof T]: ValueOrReactive<T[K]> | T[K] };
-/**
- * Filter keys that are writable (exclude readonly and getter-only).
- */
-type WritableKeys<T> = { [K in keyof T]: (<U>() => U extends { [Q in K]: T[K] } ? 1 : 2) extends (<U>() => U extends { readonly [Q in K]: T[K] } ? 1 : 2) ? never : K }[keyof T];
-/**
- * Extracts the object chaining part of ReactiveBuilder.
- * Used for properties like `style` where you can do both:
- *   .style("padding: 20px;")     // setter
- *   .style.padding("20px")       // sub-property chaining
- */
-type Chain<R, T> = T extends object ? { [K in WritableKeys<T>]: Builder<R, T[K]> } : {};
-type Builder<R, T = R> = T extends ((...args: infer U) => unknown) ? (...value: ValueOrReactiveArray<U>) => R : (value?: ValueOrReactive<T>) => R;
-/**
- * Types eligible for sub-property chaining (e.g., `.style.padding("20px")`).
- */
-type ChainableType = CSSStyleDeclaration | DOMTokenList | DOMStringMap | StylePropertyMap;
-/**
- * Filters keys to only writable data properties.
- * Excludes methods (function-valued properties) and event handlers (`on*`).
- */
-type DataPropertyKeys<T> = { [K in keyof T]: K extends `on${string}` ? never : T[K] extends ((...args: any[]) => any) ? never : K }[keyof T];
-/**
- * Reactive setter for a single property.
- * Chainable types (CSSStyleDeclaration, DOMTokenList, etc.) get both
- * sub-property chaining and direct setter support.
- */
-type ReactiveSetter<R, T> = T extends ChainableType ? Chain<R, T> & ((value: ValueOrReactive<T>) => R) : (value: ValueOrReactive<T>) => R;
-/**
- * A fully-typed reactive element builder for any Element type.
- * Automatically maps all writable data properties into reactive setters.
- *
- * Use this for custom elements instead of needing generated builder interfaces.
- *
- * @example
- * ```ts
- * import { reactive, type ReactiveElementOf } from "elements-kit";
- *
- * class MyElement extends HTMLElement {
- *   greeting = "hello";
- * }
- * customElements.define("my-element", MyElement);
- *
- * const myEl = () =>
- *   reactive(document.createElement("my-element") as MyElement);
- *
- * // Full type support for both own and inherited properties:
- * myEl().greeting("world").style.padding("20px").id("main");
- * ```
- */
-type ReactiveElementOf<T extends Element> = ElementBuilder<T> & { [K in WritableKeys<T> & DataPropertyKeys<T> & keyof T]: ReactiveSetter<ReactiveElementOf<T>, T[K]> };
-//#endregion
-export { EFFECT as a, ReactiveElementOf as c, builder as d, toNode as f, DISPOSE as i, VALUE as l, Chain as n, ElementBuilder as o, DISPOSABLES as r, ReactiveElement as s, Builder as t, ValueOrReactive as u };

package/dist/polyfill-AFIi9kAN.d.mts

@@ -1,14 +0,0 @@
-//#region src/lib.d.ts
-type PrimitiveNodeType = Node | string | boolean | number | bigint | symbol | Date | RegExp | null | undefined;
-//#endregion
-//#region src/polyfill.d.ts
-declare global {
-  interface SymbolConstructor {
-    readonly dispose: symbol;
-  }
-  interface Disposable {
-    [Symbol.dispose](): void;
-  }
-}
-//#endregion
-export { PrimitiveNodeType as t };

package/dist/signals/lib/active-element.d.mts

@@ -1,10 +0,0 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
-
-//#region src/signals/lib/active-element.d.ts
-/**
- * Returns a `Computed` that tracks `document.activeElement`.
- * Updates on every `focusin` / `focusout` event bubbling through the document.
- */
-declare function createActiveElement(): Computed<Element | null> & Disposable;
-//#endregion
-export { createActiveElement };

package/dist/signals/lib/active-element.mjs

@@ -1,20 +0,0 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
-import { createEventListener } from "./event-listener.mjs";
-//#region src/signals/lib/active-element.ts
-/**
-* Returns a `Computed` that tracks `document.activeElement`.
-* Updates on every `focusin` / `focusout` event bubbling through the document.
-*/
-function createActiveElement() {
-	const active = signal(typeof document !== "undefined" ? document.activeElement : null);
-	const update = () => active(document.activeElement);
-	const r1 = createEventListener(document, "focusin", update);
-	const r2 = createEventListener(document, "focusout", update);
-	const cleanup = () => {
-		r1();
-		r2();
-	};
-	return Object.assign(active, { [Symbol.dispose]: cleanup });
-}
-//#endregion
-export { createActiveElement };

package/dist/signals/lib/active-element.test.mjs

@@ -1,39 +0,0 @@
-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 { createActiveElement } from "./active-element.mjs";
-//#region src/signals/lib/active-element.test.ts
-afterEach(() => {
-	document.body.innerHTML = "";
-});
-describe("createActiveElement", () => {
-	it("returns a computed that reads the current activeElement", () => {
-		let active;
-		effectScope(() => {
-			active = createActiveElement();
-		});
-		globalExpect(active()).toBe(document.activeElement);
-	});
-	it("updates when focus changes", () => {
-		const input = document.createElement("input");
-		document.body.appendChild(input);
-		let active;
-		effectScope(() => {
-			active = createActiveElement();
-		});
-		document.dispatchEvent(new FocusEvent("focusin", { relatedTarget: input }));
-		globalExpect(active()).toBe(document.activeElement);
-	});
-	it("stops updating after Symbol.dispose", () => {
-		let active;
-		effectScope(() => {
-			active = createActiveElement();
-		});
-		active[Symbol.dispose]();
-		const input = document.createElement("input");
-		document.body.appendChild(input);
-		input.focus();
-		globalExpect(typeof active()).not.toBe("undefined");
-	});
-});
-//#endregion
-export {};

package/dist/signals/lib/animation-frames.d.mts

@@ -1,18 +0,0 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
-
-//#region src/signals/lib/animation-frames.d.ts
-type AnimationFramesResult = {
-  isRunning: Computed<boolean>;
-  delta: Computed<number>;
-  elapsed: Computed<number>;
-  start(): void;
-  stop(): void;
-} & Disposable;
-/**
- * RAF loop with pause/resume, delta time, and elapsed time tracking.
- *
- * Starts paused — call `start()` to begin.
- */
-declare function createAnimationFrames(): AnimationFramesResult;
-//#endregion
-export { createAnimationFrames };

package/dist/signals/lib/animation-frames.mjs

@@ -1,48 +0,0 @@
-import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
-//#region src/signals/lib/animation-frames.ts
-/**
-* RAF loop with pause/resume, delta time, and elapsed time tracking.
-*
-* Starts paused — call `start()` to begin.
-*/
-function createAnimationFrames() {
-	const isRunning = signal(false);
-	const delta = signal(0);
-	const elapsed = signal(0);
-	let rafId;
-	let lastTime;
-	const loop = (time) => {
-		if (lastTime !== void 0) {
-			const d = time - lastTime;
-			delta(d);
-			elapsed(elapsed() + d);
-		}
-		lastTime = time;
-		rafId = requestAnimationFrame(loop);
-	};
-	const start = () => {
-		if (isRunning()) return;
-		lastTime = void 0;
-		isRunning(true);
-		rafId = requestAnimationFrame(loop);
-	};
-	const stop = () => {
-		if (rafId !== void 0) {
-			cancelAnimationFrame(rafId);
-			rafId = void 0;
-		}
-		lastTime = void 0;
-		isRunning(false);
-	};
-	const cleanup = () => stop();
-	onCleanup(cleanup);
-	return Object.assign({
-		isRunning,
-		delta,
-		elapsed,
-		start,
-		stop
-	}, { [Symbol.dispose]: cleanup });
-}
-//#endregion
-export { createAnimationFrames };

package/dist/signals/lib/animation-frames.test.mjs

@@ -1,52 +0,0 @@
-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 { createAnimationFrames } from "./animation-frames.mjs";
-//#region src/signals/lib/animation-frames.test.ts
-afterEach(() => {
-	document.body.innerHTML = "";
-	vi.unstubAllGlobals();
-});
-describe("createAnimationFrames", () => {
-	it("starts paused", () => {
-		let af;
-		effectScope(() => {
-			af = createAnimationFrames();
-		});
-		globalExpect(af.isRunning()).toBe(false);
-	});
-	it("start() sets isRunning to true", () => {
-		vi.stubGlobal("requestAnimationFrame", vi.fn().mockReturnValue(1));
-		vi.stubGlobal("cancelAnimationFrame", vi.fn());
-		let af;
-		effectScope(() => {
-			af = createAnimationFrames();
-		});
-		af.start();
-		globalExpect(af.isRunning()).toBe(true);
-	});
-	it("stop() sets isRunning to false", () => {
-		vi.stubGlobal("requestAnimationFrame", vi.fn().mockReturnValue(1));
-		vi.stubGlobal("cancelAnimationFrame", vi.fn());
-		let af;
-		effectScope(() => {
-			af = createAnimationFrames();
-		});
-		af.start();
-		af.stop();
-		globalExpect(af.isRunning()).toBe(false);
-	});
-	it("Symbol.dispose stops the loop", () => {
-		const cancel = vi.fn();
-		vi.stubGlobal("requestAnimationFrame", vi.fn().mockReturnValue(1));
-		vi.stubGlobal("cancelAnimationFrame", cancel);
-		let af;
-		effectScope(() => {
-			af = createAnimationFrames();
-		});
-		af.start();
-		af[Symbol.dispose]();
-		globalExpect(cancel).toHaveBeenCalled();
-	});
-});
-//#endregion
-export {};

package/dist/signals/lib/async-retry.d.mts

@@ -1,21 +0,0 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
-
-//#region src/signals/lib/async-retry.d.ts
-type AsyncRetryResult<T> = {
-  data: Computed<T | undefined>;
-  loading: Computed<boolean>;
-  error: Computed<unknown>;
-  retry(): void;
-  attempt: Computed<number>;
-};
-/**
- * Like `createResource` but automatically retries on failure up to
- * `maxRetries` times with an exponential-back-off delay.
- */
-declare function createAsyncRetry<S, T>(source: () => S, fetcher: (source: S, signal: AbortSignal) => Promise<T>, options?: {
-  initialValue?: T;
-  maxRetries?: number;
-  delay?: number;
-}): AsyncRetryResult<T>;
-//#endregion
-export { createAsyncRetry };

package/dist/signals/lib/async-retry.mjs

@@ -1,57 +0,0 @@
-import { a as effect, d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
-//#region src/signals/lib/async-retry.ts
-/**
-* Like `createResource` but automatically retries on failure up to
-* `maxRetries` times with an exponential-back-off delay.
-*/
-function createAsyncRetry(source, fetcher, options) {
-	const { maxRetries = 3, delay = 1e3 } = options ?? {};
-	const data = signal(options?.initialValue);
-	const loading = signal(false);
-	const error = signal(void 0);
-	const attempt = signal(0);
-	const tick = signal(0);
-	effect(() => {
-		tick();
-		const src = source();
-		const controller = new AbortController();
-		loading(true);
-		error(void 0);
-		attempt(0);
-		let currentAttempt = 0;
-		const run = () => {
-			fetcher(src, controller.signal).then((result) => {
-				data(result);
-				loading(false);
-			}, (err) => {
-				if (err.name === "AbortError") return;
-				if (currentAttempt < maxRetries) {
-					currentAttempt++;
-					attempt(currentAttempt);
-					const retryTimer = setTimeout(run, delay * 2 ** (currentAttempt - 1));
-					const orig = cleanup;
-					cleanup = () => {
-						clearTimeout(retryTimer);
-						orig();
-					};
-				} else {
-					error(err);
-					loading(false);
-				}
-			});
-		};
-		let cleanup = () => controller.abort();
-		run();
-		onCleanup(() => cleanup());
-	});
-	const retry = () => tick(tick() + 1);
-	return {
-		data,
-		loading,
-		error,
-		attempt,
-		retry
-	};
-}
-//#endregion
-export { createAsyncRetry };

package/dist/signals/lib/async-retry.test.mjs

@@ -1,57 +0,0 @@
-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 { createAsyncRetry } from "./async-retry.mjs";
-//#region src/signals/lib/async-retry.test.ts
-afterEach(() => {
-	document.body.innerHTML = "";
-	vi.useRealTimers();
-});
-describe("createAsyncRetry", () => {
-	it("resolves successfully on first try", async () => {
-		const src = () => "url";
-		let r;
-		effectScope(() => {
-			r = createAsyncRetry(src, async () => "ok");
-		});
-		await new Promise((res) => setTimeout(res, 0));
-		globalExpect(r.data()).toBe("ok");
-		globalExpect(r.loading()).toBe(false);
-	});
-	it("retries on failure and eventually resolves", async () => {
-		vi.useFakeTimers();
-		let calls = 0;
-		const src = () => "url";
-		let r;
-		effectScope(() => {
-			r = createAsyncRetry(src, async () => {
-				calls++;
-				if (calls < 3) throw new Error("fail");
-				return "success";
-			}, {
-				maxRetries: 3,
-				delay: 100
-			});
-		});
-		await vi.runAllTicks();
-		await vi.runAllTimersAsync();
-		globalExpect(r.data()).toBe("success");
-	}, 1e4);
-	it("sets error after exhausting retries", async () => {
-		vi.useFakeTimers();
-		const src = () => "url";
-		let r;
-		effectScope(() => {
-			r = createAsyncRetry(src, async () => {
-				throw new Error("persistent");
-			}, {
-				maxRetries: 2,
-				delay: 50
-			});
-		});
-		await vi.runAllTimersAsync();
-		globalExpect(r.error()).toBeInstanceOf(Error);
-		globalExpect(r.loading()).toBe(false);
-	}, 1e4);
-});
-//#endregion
-export {};

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

@@ -1,26 +0,0 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
-
-//#region src/signals/lib/audio.d.ts
-type AudioResult = {
-  element: HTMLAudioElement;
-  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 `HTMLAudioElement` with reactive state and playback controls.
- * Pass a `src` string to create a new element, or pass an existing element.
- */
-declare function createAudio(src: string | HTMLAudioElement): AudioResult;
-//#endregion
-export { createAudio };