elements-kit 0.0.9 → 0.0.11

package/README.md

@@ -224,7 +224,7 @@ customElements.define("x-counter", CounterElement);
 Connect signals and stores to React components via `useSyncExternalStore`:
 
 ```tsx
-import { useSignal, useScope } from "elements-kit/signals/react";
+import { useSignal, useScope } from "elements-kit/integrations/react";
 import { cart } from "./cart-store";
 
 function CartSummary() {
@@ -245,12 +245,12 @@ The same `cart` store drives custom elements, React trees, and plain scripts —
 
 ---
 
-## Signal Helpers
+## Utilities
 
 Pre-built signal factories for common browser APIs:
 
 ```ts
-import { createMediaQuery } from "elements-kit/signals/media";
+import { createMediaQuery } from "elements-kit/utilities/media-query";
 
 const isDark = createMediaQuery("(prefers-color-scheme: dark)");
 const isMobile = createMediaQuery("(max-width: 640px)");
@@ -323,7 +323,6 @@ class MyElement extends HTMLElement {
 
 ## Roadmap
 
-- [ ] More signal helpers (`localStorage`, `IntersectionObserver`, `ResizeObserver`, …)
 - [ ] Context — share state across a subtree without prop drilling
 - [ ] Async signal — `signal.from(promise)`, `signal.from(observable)`
 - [ ] UI library — pre-built reactive components built on ElementsKit primitives

package/dist/builder/dom.d.mts

@@ -1,4 +1,4 @@
-import { c as ReactiveElementOf } from "../index-CKjDUp1B.mjs";
+import { ReactiveElementOf } from "./index.mjs";
 
 //#region src/builder/dom.d.ts
 interface Lifecycle {

package/dist/builder/index.d.mts

@@ -1,2 +1,88 @@
-import { a as EFFECT, c as ReactiveElementOf, d as builder, f as toNode, i as DISPOSE, l as VALUE, n as Chain, o as ElementBuilder, r as DISPOSABLES, s as ReactiveElement, t as Builder, u as ValueOrReactive } from "../index-CKjDUp1B.mjs";
+import { t as PrimitiveNodeType } from "../lib-BYJ5jPTG.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 { Builder, Chain, DISPOSABLES, DISPOSE, EFFECT, ElementBuilder, ReactiveElement, ReactiveElementOf, VALUE, ValueOrReactive, builder, toNode };

package/dist/builder/index.mjs

@@ -1,4 +1,4 @@
-import { a as effect, t as isReactive } from "../signals-CLAPw8kk.mjs";
+import { o as effect, t as isReactive } from "../signals-DcgXhkU2.mjs";
 import "../polyfill-B1lNNcum.mjs";
 import { i as resolveNode, n as Slot } from "../slot-Cydy7-0L.mjs";
 //#region src/builder/index.ts

package/dist/{element-Ddk9YaoE.mjs → element-MXzFk4G2.mjs}

@@ -1,4 +1,4 @@
-import { a as effect, d as onCleanup, m as untracked, o as effectScope, t as isReactive } from "./signals-CLAPw8kk.mjs";
+import { f as onCleanup, h as untracked, o as effect, s as effectScope, t as isReactive } from "./signals-DcgXhkU2.mjs";
 import "./polyfill-B1lNNcum.mjs";
 import { i as resolveNode$1, n as Slot, r as Slots, t as $slots } from "./slot-Cydy7-0L.mjs";
 //#region \0rolldown/runtime.js

package/dist/{index-BtqiEEfc.d.mts → index-Cvdhuy6Y.d.mts}

@@ -1,5 +1,3 @@
-import { u as ValueOrReactive } from "./index-CKjDUp1B.mjs";
-
 //#region src/signals/lib.d.ts
 /**
  * Returns `true` if `fn` is a signal handle created by {@link signal}.
@@ -220,7 +218,7 @@ declare function untracked<T>(fn: Computed<T>): T;
 declare function trigger<T = void>(fn: Computed<T>): void;
 //#endregion
 //#region src/signals/index.d.ts
-declare function isReactive<T>(value: ValueOrReactive<T>): value is () => T;
+declare function isReactive<T>(value: MaybeReactive<T>): value is () => T;
 type Updater<T> = (value: T) => void;
 type Computed<T> = () => T;
 type Signal<T> = Updater<T> & Computed<T>;
@@ -253,5 +251,11 @@ type Signal<T> = Updater<T> & Computed<T>;
  * ```
  */
 declare function reactive<This extends object, Value>(source?: (self: This) => Signal<Value>): (_target: unknown, context: ClassFieldDecoratorContext<This, Value>) => (this: This, initialValue: Value) => Value;
+type MaybeReactive<T> = T | Computed<T>;
+/**
+ * Resolves a MaybeReactive<T> to its current value.
+ * If the input is a function, calls it; otherwise returns as-is.
+ */
+declare function resolve<T>(value: MaybeReactive<T>): T;
 //#endregion
-export { untracked as _, reactive as a, effect as c, isEffect as d, isEffectScope as f, trigger as g, signal as h, isReactive as i, effectScope as l, onCleanup as m, Signal as n, batch as o, isSignal as p, Updater as r, computed as s, Computed as t, isComputed as u };
+export { signal as _, isReactive as a, batch as c, effectScope as d, isComputed as f, onCleanup as g, isSignal as h, Updater as i, computed as l, isEffectScope as m, MaybeReactive as n, reactive as o, isEffect as p, Signal as r, resolve as s, Computed as t, effect as u, trigger as v, untracked as y };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-//#region src/components/for.d.ts
+//#region src/jsx-runtime/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;
 type RenderFn<T> = (item: T, index: number) => Element | DocumentFragment | null;
 /**

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { n as disposeElement } from "./element-Ddk9YaoE.mjs";
-import { a as effect, d as onCleanup, f as signal, m as untracked, p as trigger } from "./signals-CLAPw8kk.mjs";
-//#region src/components/for.ts
+import { n as disposeElement } from "./element-MXzFk4G2.mjs";
+import { f as onCleanup, h as untracked, m as trigger, o as effect, p as signal } from "./signals-DcgXhkU2.mjs";
+//#region src/jsx-runtime/for.ts
 /**
 * Keyed list renderer. Reconciles a reactive array into the DOM using a key
 * function to match existing nodes — minimising create/destroy churn.

package/dist/{signals/lib → integrations}/react.d.mts

@@ -1,6 +1,6 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
+import { t as Computed } from "../index-Cvdhuy6Y.mjs";
 
-//#region src/signals/lib/react.d.ts
+//#region src/integrations/react.d.ts
 /**
  * Subscribe to any readable signal — writable or computed — returning its current value.
  *

package/dist/{signals/lib → integrations}/react.mjs

@@ -1,6 +1,6 @@
-import { a as effect, f as signal, o as effectScope } from "../../signals-CLAPw8kk.mjs";
+import { o as effect, p as signal, s as effectScope } from "../signals-DcgXhkU2.mjs";
 import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
-//#region src/signals/lib/react.ts
+//#region src/integrations/react.ts
 /**
 * Subscribe to any readable signal — writable or computed — returning its current value.
 *

package/dist/jsx-runtime/index.d.mts

@@ -1,4 +1,4 @@
-import { t as PrimitiveNodeType } from "../polyfill-AFIi9kAN.mjs";
+import { t as PrimitiveNodeType } from "../lib-BYJ5jPTG.mjs";
 import { JSX as JSX$1 } from "dom-expressions/src/jsx-h";
 
 //#region src/jsx-runtime/types.d.ts
@@ -20,7 +20,7 @@ declare function createElement(type: string | Element | DocumentFragment | Compo
 //#region src/jsx-runtime/ref.d.ts
 declare const $ref: unique symbol;
 //#endregion
-//#region src/components/fragment.d.ts
+//#region src/jsx-runtime/fragment.d.ts
 /**
  * Used by the JSX transform for `<>...</>` fragments.
  *

package/dist/jsx-runtime/index.mjs

@@ -1,6 +1,6 @@
-import { t as createElement } from "../element-Ddk9YaoE.mjs";
-import { d as onCleanup } from "../signals-CLAPw8kk.mjs";
-//#region src/components/fragment.ts
+import { t as createElement } from "../element-MXzFk4G2.mjs";
+import { f as onCleanup } from "../signals-DcgXhkU2.mjs";
+//#region src/jsx-runtime/fragment.ts
 /**
 * Used by the JSX transform for `<>...</>` fragments.
 *

package/dist/lib-BYJ5jPTG.d.mts

@@ -0,0 +1,4 @@
+//#region src/lib.d.ts
+type PrimitiveNodeType = Node | string | boolean | number | bigint | symbol | Date | RegExp | null | undefined;
+//#endregion
+export { PrimitiveNodeType as t };

package/dist/polyfill-DR5XVnh_.d.mts

@@ -0,0 +1,9 @@
+//#region src/polyfill.d.ts
+declare global {
+  interface SymbolConstructor {
+    readonly dispose: symbol;
+  }
+  interface Disposable {
+    [Symbol.dispose](): void;
+  }
+}

package/dist/signals/index.d.mts

@@ -1,2 +1,2 @@
-import { _ as untracked, a as reactive, c as effect, d as isEffect, f as isEffectScope, g as trigger, h as signal, i as isReactive, l as effectScope, m as onCleanup, n as Signal, o as batch, p as isSignal, r as Updater, s as computed, t as Computed, u as isComputed } from "../index-BtqiEEfc.mjs";
-export { Computed, Signal, Updater, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, signal, trigger, untracked };
+import { _ as signal, a as isReactive, c as batch, d as effectScope, f as isComputed, g as onCleanup, h as isSignal, i as Updater, l as computed, m as isEffectScope, n as MaybeReactive, o as reactive, p as isEffect, r as Signal, s as resolve, t as Computed, u as effect, v as trigger, y as untracked } from "../index-Cvdhuy6Y.mjs";
+export { Computed, MaybeReactive, Signal, Updater, batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, signal, trigger, untracked };

package/dist/signals/index.mjs

@@ -1,2 +1,2 @@
-import { a as effect, c as isEffect, d as onCleanup, f as signal, i as computed, l as isEffectScope, m as untracked, n as reactive, o as effectScope, p as trigger, r as batch, s as isComputed, t as isReactive, u as isSignal } from "../signals-CLAPw8kk.mjs";
-export { batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, signal, trigger, untracked };
+import { a as computed, c as isComputed, d as isSignal, f as onCleanup, h as untracked, i as batch, l as isEffect, m as trigger, n as reactive, o as effect, p as signal, r as resolve, s as effectScope, t as isReactive, u as isEffectScope } from "../signals-DcgXhkU2.mjs";
+export { batch, computed, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, signal, trigger, untracked };

package/dist/{signals-CLAPw8kk.mjs → signals-DcgXhkU2.mjs}

@@ -290,6 +290,12 @@ let queuedLength = 0;
 * link back to this node.
 */
 let activeSub;
+/**
+* The innermost effect or effectScope that owns the current execution frame.
+* Unlike `activeSub`, this is **not** cleared by `untracked`, so `onCleanup`
+* can be called from inside an untracked block and still register correctly.
+*/
+let activeOwner;
 /** Ring-buffer of effects waiting to be flushed. */
 const queued = [];
 const { link, unlink, propagate, checkDirty, shallowPropagate } = createReactiveSystem({
@@ -471,11 +477,14 @@ function effect(fn) {
 		flags: ReactiveFlags.Watching | ReactiveFlags.RecursedCheck
 	};
 	const prevSub = setActiveSub(e);
+	const prevOwner = activeOwner;
+	activeOwner = e;
 	if (prevSub !== void 0) link(e, prevSub, 0);
 	try {
 		e.fn();
 	} finally {
 		activeSub = prevSub;
+		activeOwner = prevOwner;
 		e.flags &= ~ReactiveFlags.RecursedCheck;
 	}
 	return effectOper.bind(e);
@@ -513,11 +522,14 @@ function effectScope(fn) {
 		flags: ReactiveFlags.None
 	};
 	const prevSub = setActiveSub(e);
+	const prevOwner = activeOwner;
+	activeOwner = e;
 	if (prevSub !== void 0) link(e, prevSub, 0);
 	try {
 		fn();
 	} finally {
 		activeSub = prevSub;
+		activeOwner = prevOwner;
 	}
 	return effectScopeOper.bind(e);
 }
@@ -560,7 +572,11 @@ function effectScope(fn) {
 * ```
 */
 function onCleanup(fn) {
-	if (activeSub !== void 0) activeSub.onCleanup = fn;
+	if (activeOwner !== void 0) {
+		const node = activeOwner;
+		if (node.onCleanup === void 0) node.onCleanup = [fn];
+		else node.onCleanup.push(fn);
+	}
 }
 /**
 * Runs `fn` as a single atomic update: all signal writes inside `fn` are
@@ -698,17 +714,22 @@ function run(e) {
 	if (flags & ReactiveFlags.Dirty || flags & ReactiveFlags.Pending && checkDirty(e.deps, e)) {
 		++cycle;
 		if (e.onCleanup !== void 0) {
-			const cleanup = e.onCleanup;
+			const cleanups = e.onCleanup;
 			e.onCleanup = void 0;
-			cleanup();
+			untracked(() => {
+				for (const fn of cleanups) fn();
+			});
 		}
 		e.depsTail = void 0;
 		e.flags = ReactiveFlags.Watching | ReactiveFlags.RecursedCheck;
 		const prevSub = setActiveSub(e);
+		const prevOwner = activeOwner;
+		activeOwner = e;
 		try {
 			e.fn();
 		} finally {
 			activeSub = prevSub;
+			activeOwner = prevOwner;
 			e.flags &= ~ReactiveFlags.RecursedCheck;
 			purgeDeps(e);
 		}
@@ -822,9 +843,11 @@ function signalOper(...value) {
 */
 function effectOper() {
 	if (this.onCleanup !== void 0) {
-		const cleanup = this.onCleanup;
+		const cleanups = this.onCleanup;
 		this.onCleanup = void 0;
-		cleanup();
+		untracked(() => {
+			for (const fn of cleanups) fn();
+		});
 	}
 	effectScopeOper.call(this);
 }
@@ -847,10 +870,12 @@ function effectOper() {
 * @internal
 */
 function effectScopeOper() {
-	const cleanup = this.onCleanup;
-	if (cleanup !== void 0) {
+	const cleanups = this.onCleanup;
+	if (cleanups !== void 0) {
 		this.onCleanup = void 0;
-		cleanup();
+		untracked(() => {
+			for (const fn of cleanups) fn();
+		});
 	}
 	this.depsTail = void 0;
 	this.flags = ReactiveFlags.None;
@@ -928,5 +953,12 @@ function reactive(source) {
 		};
 	};
 }
+/**
+* Resolves a MaybeReactive<T> to its current value.
+* If the input is a function, calls it; otherwise returns as-is.
+*/
+function resolve(value) {
+	return isReactive(value) ? value() : value;
+}
 //#endregion
-export { effect as a, isEffect as c, onCleanup as d, signal as f, computed as i, isEffectScope as l, untracked as m, reactive as n, effectScope as o, trigger as p, batch as r, isComputed as s, isReactive as t, isSignal as u };
+export { computed as a, isComputed as c, isSignal as d, onCleanup as f, untracked as h, batch as i, isEffect as l, trigger as m, reactive as n, effect as o, signal as p, resolve as r, effectScope as s, isReactive as t, isEffectScope as u };

package/dist/slot.d.mts

@@ -1,5 +1,4 @@
-import { t as PrimitiveNodeType } from "./polyfill-AFIi9kAN.mjs";
-
+import { t as PrimitiveNodeType } from "./lib-BYJ5jPTG.mjs";
 //#region src/slot.d.ts
 /**
  * A lightweight slot that reserves a region in the DOM using comment markers.

package/dist/{test.BmQO5GaM-CR2qjV1t.mjs → test.BmQO5GaM-ANkhHvbr.mjs}

@@ -13311,4 +13311,4 @@ Object.defineProperty(globalThis, GLOBAL_EXPECT, {
 	configurable: true
 });
 //#endregion
-export { describe as a, beforeEach as i, vi as n, it as o, afterEach as r, globalExpect as t };
+export { beforeEach as a, beforeAll as i, vi as n, describe as o, afterEach as r, it as s, globalExpect as t };

package/dist/utilities/active-element.d.mts

@@ -0,0 +1,6 @@
+import { t as Computed } from "../index-Cvdhuy6Y.mjs";
+
+//#region src/utilities/active-element.d.ts
+declare const activeElement: Computed<Element | null>;
+//#endregion
+export { activeElement };

package/dist/utilities/active-element.mjs

@@ -0,0 +1,13 @@
+import { fromEvent, sync } from "./event-driven.mjs";
+//#region src/utilities/active-element.ts
+/**
+* Returns a read-only `Computed<Element | null>` bound to `document.activeElement`.
+* Reacts to `focusin` and `focusout` events on the document.
+*/
+function createActiveElement() {
+	const [active] = sync(fromEvent(document, ["focusin", "focusout"]), () => typeof document !== "undefined" ? document.activeElement : null);
+	return active;
+}
+const activeElement = createActiveElement();
+//#endregion
+export { activeElement };

package/dist/utilities/active-element.test.mjs

@@ -0,0 +1,24 @@
+import { o as describe, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
+import { activeElement } from "./active-element.mjs";
+//#region src/utilities/active-element.test.ts
+describe("activeElement (singleton)", () => {
+	it("returns a computed that reads the current activeElement", () => {
+		globalExpect(activeElement()).toBe(document.activeElement);
+	});
+	it("updates when focus changes", () => {
+		const input = document.createElement("input");
+		document.body.appendChild(input);
+		input.focus();
+		globalExpect(activeElement()).toBe(input);
+		document.body.removeChild(input);
+	});
+	it("remains reactive after scope disposal", () => {
+		const input = document.createElement("input");
+		document.body.appendChild(input);
+		input.focus();
+		globalExpect(activeElement()).toBe(input);
+		document.body.removeChild(input);
+	});
+});
+//#endregion
+export {};

package/dist/{signals/lib → utilities}/debounced.d.mts

@@ -1,12 +1,12 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
+import { t as Computed } from "../index-Cvdhuy6Y.mjs";
 
-//#region src/signals/lib/debounced.d.ts
+//#region src/utilities/debounced.d.ts
 /**
  * Returns a `Computed` that mirrors `getter` but only updates after `delay`
  * milliseconds of silence (i.e. no new values from `getter`).
  *
  * The initial value is read synchronously, so the computed is never undefined.
  */
-declare function createDebounced<T>(getter: () => T, delay: number): Computed<T>;
+declare function createDebounced<T>(getter: () => T, delay: number | (() => number)): Computed<T>;
 //#endregion
 export { createDebounced };

package/dist/{signals/lib → utilities}/debounced.mjs

@@ -1,5 +1,6 @@
-import { a as effect, d as onCleanup, f as signal } from "../../signals-CLAPw8kk.mjs";
-//#region src/signals/lib/debounced.ts
+import { o as effect, p as signal } from "../signals-DcgXhkU2.mjs";
+import { createTimeout } from "./timeout.mjs";
+//#region src/utilities/debounced.ts
 /**
 * Returns a `Computed` that mirrors `getter` but only updates after `delay`
 * milliseconds of silence (i.e. no new values from `getter`).
@@ -8,11 +9,11 @@ import { a as effect, d as onCleanup, f as signal } from "../../signals-CLAPw8kk
 */
 function createDebounced(getter, delay) {
 	const s = signal(getter());
-	let timer;
+	let latest;
+	const { reset } = createTimeout(() => s(latest), delay, false);
 	effect(() => {
-		const latest = getter();
-		timer = setTimeout(() => s(latest), delay);
-		onCleanup(() => clearTimeout(timer));
+		latest = getter();
+		reset();
 	});
 	return s;
 }

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

@@ -1,7 +1,7 @@
-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 { p as signal, s as effectScope } from "../signals-DcgXhkU2.mjs";
+import { a as beforeEach, n as vi, o as describe, r as afterEach, s as it, t as globalExpect } from "../test.BmQO5GaM-ANkhHvbr.mjs";
 import { createDebounced } from "./debounced.mjs";
-//#region src/signals/lib/debounced.test.ts
+//#region src/utilities/debounced.test.ts
 beforeEach(() => {
 	vi.useFakeTimers();
 });

package/dist/{signals/lib → utilities}/element-rect.d.mts

@@ -1,6 +1,6 @@
-import { t as Computed } from "../../index-BtqiEEfc.mjs";
+import { t as Computed } from "../index-Cvdhuy6Y.mjs";
 
-//#region src/signals/lib/element-rect.d.ts
+//#region src/utilities/element-rect.d.ts
 type RectResult = {
   x: Computed<number>;
   y: Computed<number>;
@@ -16,6 +16,6 @@ type RectResult = {
  * fires on size changes) and returns all eight DOMRect properties as reactive
  * computeds.
  */
-declare function createElementRect(target: Element | (() => Element | null)): RectResult;
+declare function createElementRect(target: Element): RectResult;
 //#endregion
 export { createElementRect };

package/dist/{signals/lib → utilities}/element-rect.mjs

@@ -1,6 +1,6 @@
-import { f as signal } from "../../signals-CLAPw8kk.mjs";
+import { p as signal } from "../signals-DcgXhkU2.mjs";
 import { createResizeObserver } from "./resize-observer.mjs";
-//#region src/signals/lib/element-rect.ts
+//#region src/utilities/element-rect.ts
 /**
 * Observes the full bounding rect of `target` using a `ResizeObserver` (which
 * fires on size changes) and returns all eight DOMRect properties as reactive
@@ -29,9 +29,8 @@ function createElementRect(target) {
 	const observer = createResizeObserver(target, (entries) => {
 		for (const entry of entries) updateRect(entry.target);
 	});
-	const el = typeof target === "function" ? target() : target;
-	if (el) updateRect(el);
-	return Object.assign({
+	updateRect(target);
+	return {
 		x,
 		y,
 		width,
@@ -39,8 +38,9 @@ function createElementRect(target) {
 		top,
 		right,
 		bottom,
-		left
-	}, { [Symbol.dispose]: observer[Symbol.dispose] });
+		left,
+		[Symbol.dispose]: observer[Symbol.dispose]
+	};
 }
 //#endregion
 export { createElementRect };

package/dist/{signals/lib → utilities}/element-rect.test.mjs

@@ -1,7 +1,7 @@
-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 { createElementRect } from "./element-rect.mjs";
-//#region src/signals/lib/element-rect.test.ts
+//#region src/utilities/element-rect.test.ts
 afterEach(() => {
 	document.body.innerHTML = "";
 	vi.restoreAllMocks();

package/dist/utilities/element-scroll.d.mts

@@ -0,0 +1,16 @@
+import { r as Signal } from "../index-Cvdhuy6Y.mjs";
+
+//#region src/utilities/element-scroll.d.ts
+type ElementScrollResult = {
+  /** Horizontal scroll position (writable — setting it scrolls the element). */x: Signal<number>; /** Vertical scroll position (writable — setting it scrolls the element). */
+  y: Signal<number>;
+} & Disposable;
+/**
+ * Returns writable signals for an element's scroll position.
+ *
+ * Reading `x()` / `y()` returns the current `scrollLeft` / `scrollTop`.
+ * Writing `x(100)` or `y(200)` scrolls the element to that position.
+ */
+declare function createElementScroll(target: Element): ElementScrollResult;
+//#endregion
+export { createElementScroll };

package/dist/utilities/element-scroll.mjs

@@ -0,0 +1,52 @@
+import { f as onCleanup, o as effect, p as signal } from "../signals-DcgXhkU2.mjs";
+import { on } from "./event-listener.mjs";
+//#region src/utilities/element-scroll.ts
+/**
+* Returns writable signals for an element's scroll position.
+*
+* Reading `x()` / `y()` returns the current `scrollLeft` / `scrollTop`.
+* Writing `x(100)` or `y(200)` scrolls the element to that position.
+*/
+function createElementScroll(target) {
+	const el = target;
+	const x = signal(el?.scrollLeft ?? 0);
+	const y = signal(el?.scrollTop ?? 0);
+	let skipEvent = false;
+	const handler = () => {
+		if (skipEvent) {
+			skipEvent = false;
+			return;
+		}
+		if (!el) return;
+		x(el.scrollLeft);
+		y(el.scrollTop);
+	};
+	const cleanup = el ? on(el, "scroll", handler, { passive: true }) : () => {};
+	const stopX = effect(() => {
+		const val = x();
+		if (el && el.scrollLeft !== val) {
+			skipEvent = true;
+			el.scrollLeft = val;
+		}
+	});
+	const stopY = effect(() => {
+		const val = y();
+		if (el && el.scrollTop !== val) {
+			skipEvent = true;
+			el.scrollTop = val;
+		}
+	});
+	const dispose = () => {
+		cleanup();
+		stopX();
+		stopY();
+	};
+	onCleanup(dispose);
+	return {
+		x,
+		y,
+		[Symbol.dispose]: dispose
+	};
+}
+//#endregion
+export { createElementScroll };