elements-kit 0.0.10 → 0.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.0.10",
+  "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,12 +0,0 @@
-import { fromEvent, sync } from "./event-driven.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, cleanup] = sync(fromEvent(document, ["focusin", "focusout"]), () => typeof document !== "undefined" ? document.activeElement : null);
-	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,21 +0,0 @@
-import { n as Signal, t as Computed } from "../../index-BtqiEEfc.mjs";
-
-//#region src/signals/lib/audio.d.ts
-type AudioResult = {
-  element: HTMLAudioElement;
-  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 `HTMLAudioElement` with reactive state and playback controls.
- */
-declare function createAudio(element: HTMLAudioElement): AudioResult;
-//#endregion
-export { createAudio };

package/dist/signals/lib/audio.mjs

@@ -1,35 +0,0 @@
-import { fromEvent, sync } from "./event-driven.mjs";
-//#region src/signals/lib/audio.ts
-/**
-* Wraps an `HTMLAudioElement` with reactive state and playback controls.
-*/
-function createAudio(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 { createAudio };

package/dist/signals/lib/audio.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 { createAudio } from "./audio.mjs";
-//#region src/signals/lib/audio.test.ts
-afterEach(() => {
-	document.body.innerHTML = "";
-	vi.restoreAllMocks();
-});
-describe("createAudio", () => {
-	it("accepts an HTMLAudioElement", () => {
-		const el = new Audio();
-		let a;
-		effectScope(() => {
-			a = createAudio(el);
-		});
-		globalExpect(a.element).toBe(el);
-	});
-	it("starts as paused", () => {
-		let a;
-		effectScope(() => {
-			a = createAudio(new Audio());
-		});
-		globalExpect(a.playing()).toBe(false);
-	});
-	it("muted(true) sets muted to true", () => {
-		let a;
-		effectScope(() => {
-			a = createAudio(new Audio());
-		});
-		a.muted(true);
-		globalExpect(a.element.muted).toBe(true);
-	});
-	it("volume() clamps to [0, 1]", () => {
-		let a;
-		effectScope(() => {
-			a = createAudio(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 = createAudio(el);
-		});
-		vi.spyOn(a.element, "removeEventListener").mockImplementation(removeSpy);
-		dispose();
-		globalExpect(removeSpy).toHaveBeenCalled();
-	});
-});
-//#endregion
-export {};

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

@@ -1,17 +0,0 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
-
-//#region src/signals/lib/battery.d.ts
-type BatteryResult = {
-  charging: Computed<boolean>;
-  level: Computed<number>;
-  chargingTime: Computed<number>;
-  dischargingTime: Computed<number>;
-  supported: Computed<boolean>;
-} & Disposable;
-/**
- * Exposes the Battery Status API as reactive signals.
- * `supported` will be `false` when the API is unavailable.
- */
-declare function createBattery(): BatteryResult;
-//#endregion
-export { createBattery };

package/dist/signals/lib/battery.mjs

@@ -1,45 +0,0 @@
-import { d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
-//#region src/signals/lib/battery.ts
-/**
-* Exposes the Battery Status API as reactive signals.
-* `supported` will be `false` when the API is unavailable.
-*/
-function createBattery() {
-	const supported = signal(typeof navigator !== "undefined" && "getBattery" in navigator);
-	const charging = signal(false);
-	const level = signal(1);
-	const chargingTime = signal(0);
-	const dischargingTime = signal(Infinity);
-	let battery;
-	const update = () => {
-		if (!battery) return;
-		charging(battery.charging);
-		level(battery.level);
-		chargingTime(battery.chargingTime);
-		dischargingTime(battery.dischargingTime);
-	};
-	const events = [
-		"chargingchange",
-		"levelchange",
-		"chargingtimechange",
-		"dischargingtimechange"
-	];
-	const cleanup = () => {
-		events.forEach((e) => battery?.removeEventListener(e, update));
-	};
-	if (supported()) navigator.getBattery().then((b) => {
-		battery = b;
-		update();
-		events.forEach((e) => b.addEventListener(e, update));
-	});
-	onCleanup(cleanup);
-	return Object.assign({
-		supported,
-		charging,
-		level,
-		chargingTime,
-		dischargingTime
-	}, { [Symbol.dispose]: cleanup });
-}
-//#endregion
-export { createBattery };