elements-kit 0.27.3 → 0.27.5

package/README.md

@@ -339,6 +339,7 @@ const op = async(() => fetch("/api/items").then((r) => r.json()));
 op.start();   // run with reactive tracking — reruns when tracked signals change
 await op;     // awaitable (delegates to .then/.catch/.finally via .raw)
 op.stop();    // halt reruns + fire registered cleanup
+op.reset();   // stop + clear state back to `idle`
 ```
 
 Reactive state getters: `.state` (`"idle" | "pending" | "fulfilled" | "rejected"` — `idle` before the first run, so `.pending` is `false` until you trigger one), `.value`, `.reason`, `.result`, `.pending`, `.raw` (the underlying `ComputedPromise`).

package/dist/await.d.mts

@@ -1,4 +1,4 @@
-import { s as Props, t as Children } from "./children-CB8W0ANY.mjs";
+import { s as Props, t as Children } from "./children-_cMdyX7Q.mjs";
 
 //#region src/await.d.ts
 /** @internal Metadata stamped on an Await region getter (see claim walk). */

package/dist/{children-CB8W0ANY.d.mts → children-_cMdyX7Q.d.mts}

@@ -1,6 +1,6 @@
 import { n as AttrChangeHandler, t as ATTRIBUTES } from "./attributes-3r7Diua4.mjs";
 import { i as PropertiesOf, n as CustomElementRegistry, r as EventsOf } from "./custom-elements-C7oiqw-y.mjs";
-import { r as MaybeReactive } from "./index-B1FHAd5T.mjs";
+import { r as MaybeReactive } from "./index-BrVMftR8.mjs";
 import * as CSS from "csstype";
 import { JSX } from "dom-expressions/src/jsx";
 

package/dist/for.d.mts

@@ -1,4 +1,4 @@
-import { o as MaybeReactiveProps } from "./children-CB8W0ANY.mjs";
+import { o as MaybeReactiveProps } from "./children-_cMdyX7Q.mjs";
 
 //#region src/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;

package/dist/{index-B1FHAd5T.d.mts → index-BrVMftR8.d.mts}

@@ -333,6 +333,10 @@ type MaybeReactive<T> = T | Computed<T>;
  * the runtime hands props over exactly as the caller wrote them, so the value
  * may be either form. Reading inside an effect or a JSX getter subscribes.
  *
+ * Only branded handles created by `signal`/`computed` are called — a
+ * plain function is treated as a static VALUE and returned as-is (so
+ * `T` itself may be a function type).
+ *
  * @example
  * ```ts
  * resolve(5);            // 5

package/dist/integrations/astro-server.mjs

@@ -1,7 +1,7 @@
 import { y as setInertEffects } from "../lib-DYypKhxk.mjs";
 import { i as setRenderer, t as createElement } from "../element-DgQvp-49.mjs";
-import { i as serverJsx, n as renderToString, r as SNode } from "../server-CoEm-C0I.mjs";
 import { withSlotProps } from "./astro-slots.mjs";
+import { i as serverJsx, n as renderToString, r as SNode } from "../server-CoEm-C0I.mjs";
 //#region src/integrations/astro-server.ts
 /**
 * Decide whether `Component` is an elements-kit component. Invoked by Astro

package/dist/integrations/react.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/integrations/react.d.ts
 /**

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

@@ -1,5 +1,5 @@
-import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children } from "../children-CB8W0ANY.mjs";
-import { n as ComputedProps, r as MaybeReactive } from "../index-B1FHAd5T.mjs";
+import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children } from "../children-_cMdyX7Q.mjs";
+import { n as ComputedProps, r as MaybeReactive } from "../index-BrVMftR8.mjs";
 
 //#region src/jsx-runtime/hot.d.ts
 /**

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

@@ -1,3 +1,3 @@
-import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children, u as createElement } from "../children-CB8W0ANY.mjs";
-import { n as ComputedProps, r as MaybeReactive } from "../index-B1FHAd5T.mjs";
+import { a as Fragment, c as PropsOf, i as JSX, l as Require, n as ComponentClass, o as MaybeReactiveProps, r as ComponentFn, s as Props, t as Children, u as createElement } from "../children-_cMdyX7Q.mjs";
+import { n as ComputedProps, r as MaybeReactive } from "../index-BrVMftR8.mjs";
 export { type Children, ComponentClass, ComponentFn, type ComputedProps, Fragment, JSX, type MaybeReactive, type MaybeReactiveProps, type Props, type PropsOf, type Require, createElement as h, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/signals/index.d.mts

@@ -1,2 +1,2 @@
-import { C as isSignal, D as untracked, E as trigger, S as isEffectScope, T as signal, _ as computed, a as Updater, b as isComputed, c as reactive, d as COMPUTED, f as EFFECT, g as batch, h as SIGNAL, i as Signal, l as resolve, m as SEED, n as ComputedProps, o as computedProps, p as EFFECT_SCOPE, r as MaybeReactive, s as isReactive, t as Computed, u as CLAIM, v as effect, w as onCleanup, x as isEffect, y as effectScope } from "../index-B1FHAd5T.mjs";
+import { C as isSignal, D as untracked, E as trigger, S as isEffectScope, T as signal, _ as computed, a as Updater, b as isComputed, c as reactive, d as COMPUTED, f as EFFECT, g as batch, h as SIGNAL, i as Signal, l as resolve, m as SEED, n as ComputedProps, o as computedProps, p as EFFECT_SCOPE, r as MaybeReactive, s as isReactive, t as Computed, u as CLAIM, v as effect, w as onCleanup, x as isEffect, y as effectScope } from "../index-BrVMftR8.mjs";
 export { CLAIM, COMPUTED, Computed, ComputedProps, EFFECT, EFFECT_SCOPE, MaybeReactive, SEED, SIGNAL, Signal, Updater, batch, computed, computedProps, effect, effectScope, isComputed, isEffect, isEffectScope, isReactive, isSignal, onCleanup, reactive, resolve, signal, trigger, untracked };

package/dist/signals/index.mjs

@@ -83,6 +83,10 @@ function reactive(source) {
 * the runtime hands props over exactly as the caller wrote them, so the value
 * may be either form. Reading inside an effect or a JSX getter subscribes.
 *
+* Only branded handles created by `signal`/`computed` are called — a
+* plain function is treated as a static VALUE and returned as-is (so
+* `T` itself may be a function type).
+*
 * @example
 * ```ts
 * resolve(5);            // 5

package/dist/ui/overlay/index.d.mts

@@ -11,9 +11,9 @@ import { Placement } from "@floating-ui/dom";
  * viewport defaults). Derived values build on regions — `detents()`
  * quantizes one, `rubber()` resists at its edges.
  */
-/** A reactive rect — the shape `createElementRect` returns, so an
- * `Element` works directly and custom rects (a static region, a virtual
- * area) can be supplied too. */
+/** A reactive rect. `createElementRect` returns one reactive `DOMRect`,
+ * so the element branch projects its fields onto this shape; custom
+ * rects (a static region, a virtual area) can be supplied too. */
 interface Region {
   top(): number;
   left(): number;

package/dist/ui/overlay/index.mjs

@@ -19,7 +19,12 @@ function constraint(source) {
 	if (source instanceof Element) {
 		const rect = createElementRect(source);
 		onCleanup(() => rect[Symbol.dispose]());
-		return rect;
+		return {
+			top: () => rect().top,
+			left: () => rect().left,
+			width: () => rect().width,
+			height: () => rect().height
+		};
 	}
 	return {
 		top: () => source.top,

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

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

package/dist/utilities/async.d.mts

@@ -1,4 +1,4 @@
-import { m as SEED, r as MaybeReactive, u as CLAIM } from "../index-B1FHAd5T.mjs";
+import { m as SEED, r as MaybeReactive, u as CLAIM } from "../index-BrVMftR8.mjs";
 import { ComputedPromise } from "./promise.mjs";
 
 //#region src/utilities/async.d.ts
@@ -68,6 +68,12 @@ declare class Async<TInput = undefined, TOutput = unknown> {
    * Stops the current async operation and run cleanup effects.
    */
   stop(): this;
+  /**
+   * Stops the current operation and returns to the idle state — `state` is
+   * `"idle"` again and `value` / `reason` / `result` read `undefined`. Unlike
+   * {@link stop}, which leaves the last settled operation in place.
+   */
+  reset(): this;
   [Symbol.dispose](): void;
   /**
    * Starts a new reactive async operation, stopping any currently active one.

package/dist/utilities/async.mjs

@@ -138,6 +138,17 @@ var Async = class {
 		this.#cleanup = () => {};
 		return this;
 	}
+	/**
+	* Stops the current operation and returns to the idle state — `state` is
+	* `"idle"` again and `value` / `reason` / `result` read `undefined`. Unlike
+	* {@link stop}, which leaves the last settled operation in place.
+	*/
+	reset() {
+		this.stop();
+		deferredRuns.delete(this);
+		this.#current(IDLE);
+		return this;
+	}
 	[Symbol.dispose]() {
 		this.stop();
 	}
@@ -170,6 +181,7 @@ const ASYNC_KEYS = new Set([
 	"pending",
 	"start",
 	"stop",
+	"reset",
 	"run",
 	"fn",
 	"raw",

package/dist/utilities/debounced.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/debounced.d.ts
 /**

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

@@ -1,21 +1,21 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { r as MaybeReactive, t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/element-rect.d.ts
-type RectResult = {
-  x: Computed<number>;
-  y: Computed<number>;
-  width: Computed<number>;
-  height: Computed<number>;
-  top: Computed<number>;
-  right: Computed<number>;
-  bottom: Computed<number>;
-  left: Computed<number>;
-} & Disposable;
 /**
- * Observes the full bounding rect of `target` using a `ResizeObserver` (which
- * fires on size changes) and returns all eight DOMRect properties as reactive
- * computeds.
+ * Observes the full bounding rect of `target` and returns it as ONE reactive
+ * `DOMRect`, so every field a reader sees was measured at the same instant.
+ * Change sources: a `ResizeObserver` for size, plus capture-phase `scroll` and
+ * window `resize` for position — a `ResizeObserver` stays silent when an
+ * element merely moves.
+ *
+ * `target` may be a getter, in which case the observer follows it: the previous
+ * element is unobserved before the new one is observed. The returned computed
+ * keeps its identity across a swap, so consumers never rebind.
+ *
+ * The value is CACHED, not measured per read: it refreshes when one of the
+ * sources above fires, not at the moment you read it. Dispose explicitly, or
+ * let the enclosing scope do it.
  */
-declare function createElementRect(target: Element): RectResult;
+declare function createElementRect(target: MaybeReactive<Element>): Computed<DOMRect> & Disposable;
 //#endregion
 export { createElementRect };

package/dist/utilities/element-rect.mjs

@@ -1,47 +1,50 @@
-import { x as signal } from "../lib-DYypKhxk.mjs";
-import "../signals/index.mjs";
+import { _ as onCleanup, d as effectScope, l as computed, u as effect, x as signal } from "../lib-DYypKhxk.mjs";
+import { resolve } from "../signals/index.mjs";
 import { createResizeObserver } from "./resize-observer.mjs";
 //#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
-* computeds.
+* Observes the full bounding rect of `target` and returns it as ONE reactive
+* `DOMRect`, so every field a reader sees was measured at the same instant.
+* Change sources: a `ResizeObserver` for size, plus capture-phase `scroll` and
+* window `resize` for position — a `ResizeObserver` stays silent when an
+* element merely moves.
+*
+* `target` may be a getter, in which case the observer follows it: the previous
+* element is unobserved before the new one is observed. The returned computed
+* keeps its identity across a swap, so consumers never rebind.
+*
+* The value is CACHED, not measured per read: it refreshes when one of the
+* sources above fires, not at the moment you read it. Dispose explicitly, or
+* let the enclosing scope do it.
 */
 function createElementRect(target) {
-	const x = signal(0);
-	const y = signal(0);
-	const width = signal(0);
-	const height = signal(0);
-	const top = signal(0);
-	const right = signal(0);
-	const bottom = signal(0);
-	const left = signal(0);
+	const cache = signal(resolve(target).getBoundingClientRect());
 	const updateRect = (el) => {
-		const rect = el.getBoundingClientRect();
-		x(rect.x);
-		y(rect.y);
-		width(rect.width);
-		height(rect.height);
-		top(rect.top);
-		right(rect.right);
-		bottom(rect.bottom);
-		left(rect.left);
+		cache(el.getBoundingClientRect());
 	};
-	const observer = createResizeObserver(target, (entries) => {
-		for (const entry of entries) updateRect(entry.target);
+	const stop = effectScope(() => {
+		effect(() => {
+			const el = resolve(target);
+			createResizeObserver(el, (entries) => {
+				for (const entry of entries) updateRect(entry.target);
+			});
+			const remeasure = () => updateRect(el);
+			window.addEventListener("scroll", remeasure, {
+				capture: true,
+				passive: true
+			});
+			window.addEventListener("resize", remeasure, { passive: true });
+			onCleanup(() => {
+				window.removeEventListener("scroll", remeasure, { capture: true });
+				window.removeEventListener("resize", remeasure);
+			});
+			updateRect(el);
+		});
 	});
-	updateRect(target);
-	return {
-		x,
-		y,
-		width,
-		height,
-		top,
-		right,
-		bottom,
-		left,
-		[Symbol.dispose]: observer[Symbol.dispose]
-	};
+	onCleanup(stop);
+	const rect = computed(() => cache());
+	rect[Symbol.dispose] = stop;
+	return rect;
 }
 //#endregion
 export { createElementRect };

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

@@ -1,4 +1,4 @@
-import { i as Signal } from "../index-B1FHAd5T.mjs";
+import { i as Signal } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/element-scroll.d.ts
 type ElementScrollResult = {

package/dist/utilities/event-driven.d.mts

@@ -1,4 +1,4 @@
-import { i as Signal, t as Computed } from "../index-B1FHAd5T.mjs";
+import { i as Signal, t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/event-driven.d.ts
 /**

package/dist/utilities/event-listener.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/event-listener.d.ts
 /**

package/dist/utilities/focus-within.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/focus-within.d.ts
 /**

package/dist/utilities/hover.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/hover.d.ts
 /**

package/dist/utilities/interval.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/interval.d.ts
 type IntervalResult = {

package/dist/utilities/location.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/location.d.ts
 type LocationResult = {

package/dist/utilities/media-devices.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/media-devices.d.ts
 /**

package/dist/utilities/media-player.d.mts

@@ -1,4 +1,4 @@
-import { i as Signal, t as Computed } from "../index-B1FHAd5T.mjs";
+import { i as Signal, t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/media-player.d.ts
 type MediaPlayerResult<T extends HTMLMediaElement> = {

package/dist/utilities/media-query.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/media-query.d.ts
 /**

package/dist/utilities/network.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/network.d.ts
 /**

package/dist/utilities/orientation.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/orientation.d.ts
 type OrientationResult = {

package/dist/utilities/previous.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/previous.d.ts
 /**

package/dist/utilities/promise.d.mts

@@ -1,4 +1,4 @@
-import { m as SEED, t as Computed, u as CLAIM } from "../index-B1FHAd5T.mjs";
+import { m as SEED, t as Computed, u as CLAIM } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/promise.d.ts
 /**

package/dist/utilities/routing.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/routing.d.ts
 /**

package/dist/utilities/search-params.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/search-params.d.ts
 /**

package/dist/utilities/storage.d.mts

@@ -1,4 +1,4 @@
-import { i as Signal } from "../index-B1FHAd5T.mjs";
+import { i as Signal } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/storage.d.ts
 type StorageOptions<T> = {

package/dist/utilities/throttled.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/throttled.d.ts
 /**

package/dist/utilities/timeout.d.mts

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/timeout.d.ts
 type TimeoutResult = {

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

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/window-focus.d.ts
 /**

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

@@ -1,4 +1,4 @@
-import { t as Computed } from "../index-B1FHAd5T.mjs";
+import { t as Computed } from "../index-BrVMftR8.mjs";
 
 //#region src/utilities/window-size.d.ts
 type WindowSizeResult = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.27.3",
+  "version": "0.27.5",
   "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",
@@ -127,7 +127,7 @@
     "test:watch": "vitest",
     "test:engines": "node scripts/engine-matrix.mjs"
   },
-  "packageManager": "pnpm@10.33.0",
+  "packageManager": "pnpm@11.25.0",
   "devDependencies": {
     "@tsdown/css": "^0.22.0",
     "@types/react": "^19.2.14",
@@ -139,8 +139,7 @@
     "react-dom": "^19.2.5",
     "tsdown": "0.22.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.2",
-    "puppeteer-core": "^24.0.0"
+    "vitest": "^4.1.2"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",