elements-kit 0.27.2 → 0.27.4

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/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
 /**
@@ -8,8 +8,17 @@ import { t as Computed } from "../index-B1FHAd5T.mjs";
  * `Computed<T>`. Using `() => T` instead of `Computed<T>` prevents TypeScript from
  * picking the write overload of `Signal<T>` during type inference.
  *
+ * **Server rendering:** pass `getServerSnapshot` for any component React renders
+ * on the server — React requires it there and throws without one. It runs on
+ * the server *and* again for the hydration render on the client, so it must
+ * return the same value both times: whatever the server put in the HTML. A
+ * signal reading browser state (`matchMedia`, `localStorage`, `location`) does
+ * not qualify, since it answers differently in the browser.
+ *
  * @template T - The type of the signal value.
  * @param value - A writable `Signal<T>` or a derived `Computed<T>`.
+ * @param getServerSnapshot - Returns the value the server rendered. Required
+ *   for server-rendered components; omit only for client-only ones.
  * @returns The current value, updated on every signal change.
  *
  * @example
@@ -23,8 +32,15 @@ import { t as Computed } from "../index-B1FHAd5T.mjs";
  *   return <div>{countValue} × 2 = {doubleValue}</div>;
  * }
  * ```
+ *
+ * @example
+ * Server-rendered component reading a browser-only signal:
+ * ```tsx
+ * // `theme` resolves to "light" on the server — say so, or hydration mismatches.
+ * const mode = useSignal(theme, () => "light");
+ * ```
  */
-declare function useSignal<T>(value: () => T): T;
+declare function useSignal<T>(value: () => T, getServerSnapshot?: () => T): T;
 /**
  * Create a signal effect scope tied to a React component's lifetime.
  *

package/dist/integrations/react.mjs

@@ -10,8 +10,17 @@ import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 * `Computed<T>`. Using `() => T` instead of `Computed<T>` prevents TypeScript from
 * picking the write overload of `Signal<T>` during type inference.
 *
+* **Server rendering:** pass `getServerSnapshot` for any component React renders
+* on the server — React requires it there and throws without one. It runs on
+* the server *and* again for the hydration render on the client, so it must
+* return the same value both times: whatever the server put in the HTML. A
+* signal reading browser state (`matchMedia`, `localStorage`, `location`) does
+* not qualify, since it answers differently in the browser.
+*
 * @template T - The type of the signal value.
 * @param value - A writable `Signal<T>` or a derived `Computed<T>`.
+* @param getServerSnapshot - Returns the value the server rendered. Required
+*   for server-rendered components; omit only for client-only ones.
 * @returns The current value, updated on every signal change.
 *
 * @example
@@ -25,12 +34,19 @@ import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 *   return <div>{countValue} × 2 = {doubleValue}</div>;
 * }
 * ```
+*
+* @example
+* Server-rendered component reading a browser-only signal:
+* ```tsx
+* // `theme` resolves to "light" on the server — say so, or hydration mismatches.
+* const mode = useSignal(theme, () => "light");
+* ```
 */
-function useSignal(value) {
+function useSignal(value, getServerSnapshot) {
 	return useSyncExternalStore((callback) => effect(() => {
 		value();
 		callback();
-	}), () => value(), () => value());
+	}), value, getServerSnapshot);
 }
 /**
 * Create a signal effect scope tied to a React component's lifetime.

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/marketing/marketing.css

@@ -522,7 +522,6 @@
     flex-flow: wrap;
     justify-content: center;
     align-items: center;
-    gap: 1rem 1.5rem;
     width: auto;
   }
 }

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

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/dom-lifecycle.d.mts

@@ -1,3 +1,5 @@
+import { t as HTMLElementBase } from "../environment-c2ftMYT0.mjs";
+
 //#region src/utilities/dom-lifecycle.d.ts
 type LifecycleCallback = (self: DomLifecycleElement) => void;
 type AdoptedCallback = (oldDocument: Document, newDocument: Document) => void;
@@ -59,7 +61,7 @@ type AdoptedCallback = (oldDocument: Document, newDocument: Document) => void;
  * </div>
  * ```
  */
-declare class DomLifecycleElement extends HTMLElement {
+declare class DomLifecycleElement extends HTMLElementBase {
   #private;
   set onConnect(fn: LifecycleCallback | null);
   get onConnect(): LifecycleCallback | null;

package/dist/utilities/dom-lifecycle.mjs

@@ -1,6 +1,6 @@
 import { d as effectScope } from "../lib-DYypKhxk.mjs";
 import "../signals/index.mjs";
-import { isBrowser } from "./environment.mjs";
+import { HTMLElementBase, isBrowser } from "./environment.mjs";
 //#region src/utilities/dom-lifecycle.ts
 /**
 * Custom element backing the `<dom-lifecycle>` JSX tag. Place inside any
@@ -60,7 +60,7 @@ import { isBrowser } from "./environment.mjs";
 * </div>
 * ```
 */
-var DomLifecycleElement = class extends HTMLElement {
+var DomLifecycleElement = class extends HTMLElementBase {
 	#onConnect = null;
 	#onDisconnect = null;
 	#onMove = null;

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> = {
@@ -11,6 +11,9 @@ type StorageOptions<T> = {
  * Changes made in other tabs/windows are synchronised automatically via
  * the `StorageEvent`.
  *
+ * Outside a browser — or when `localStorage` is unavailable — the signal is
+ * plain in-memory state seeded with `initialValue`; nothing is persisted.
+ *
  * @example
  * ```ts
  * import { createLocalStorage } from "elements-kit/utilities/storage";
@@ -26,6 +29,9 @@ declare function createLocalStorage<T>(key: string, initialValue: T, options?: S
  *
  * Session storage is scoped to the current tab — no cross-tab sync.
  *
+ * Outside a browser — or when `sessionStorage` is unavailable — the signal is
+ * plain in-memory state seeded with `initialValue`; nothing is persisted.
+ *
  * @example
  * ```ts
  * import { createSessionStorage } from "elements-kit/utilities/storage";

package/dist/utilities/storage.mjs

@@ -1,5 +1,20 @@
+import { x as signal } from "../lib-DYypKhxk.mjs";
+import "../signals/index.mjs";
 import { sync } from "./event-driven.mjs";
+import { isBrowser } from "./environment.mjs";
 //#region src/utilities/storage.ts
+/**
+* The requested `Storage`, or `null` outside a browser and when access throws
+* (sandboxed iframes, blocked site data).
+*/
+function getStorage(area) {
+	if (!isBrowser) return null;
+	try {
+		return area === "local" ? localStorage : sessionStorage;
+	} catch {
+		return null;
+	}
+}
 function readOrDefault(storage, key, initialValue, deserialise) {
 	try {
 		const item = storage.getItem(key);
@@ -7,28 +22,17 @@ function readOrDefault(storage, key, initialValue, deserialise) {
 	} catch {}
 	return initialValue;
 }
-/**
-* Returns a `Signal` persisted to `localStorage`.
-*
-* Changes made in other tabs/windows are synchronised automatically via
-* the `StorageEvent`.
-*
-* @example
-* ```ts
-* import { createLocalStorage } from "elements-kit/utilities/storage";
-*
-* const theme = createLocalStorage<"light" | "dark">("theme", "light");
-* theme();         // read current
-* theme("dark");   // write — persists and notifies
-* ```
-*/
-function createLocalStorage(key, initialValue, options) {
+function createStorageSignal(area, key, initialValue, options, crossTab) {
+	const storage = getStorage(area);
+	if (!storage) return signal(initialValue);
 	const serialise = options?.serialise ?? ((v) => JSON.stringify(v));
 	const deserialise = options?.deserialise ?? ((raw) => JSON.parse(raw));
-	const storage = localStorage;
 	let notify;
 	const subscribe = (cb) => {
 		notify = cb;
+		if (!crossTab) return () => {
+			notify = void 0;
+		};
 		const handler = (e) => {
 			if (e.key === key && e.storageArea === storage) cb();
 		};
@@ -47,10 +51,34 @@ function createLocalStorage(key, initialValue, options) {
 	return s;
 }
 /**
+* Returns a `Signal` persisted to `localStorage`.
+*
+* Changes made in other tabs/windows are synchronised automatically via
+* the `StorageEvent`.
+*
+* Outside a browser — or when `localStorage` is unavailable — the signal is
+* plain in-memory state seeded with `initialValue`; nothing is persisted.
+*
+* @example
+* ```ts
+* import { createLocalStorage } from "elements-kit/utilities/storage";
+*
+* const theme = createLocalStorage<"light" | "dark">("theme", "light");
+* theme();         // read current
+* theme("dark");   // write — persists and notifies
+* ```
+*/
+function createLocalStorage(key, initialValue, options) {
+	return createStorageSignal("local", key, initialValue, options, true);
+}
+/**
 * Returns a `Signal` persisted to `sessionStorage`.
 *
 * Session storage is scoped to the current tab — no cross-tab sync.
 *
+* Outside a browser — or when `sessionStorage` is unavailable — the signal is
+* plain in-memory state seeded with `initialValue`; nothing is persisted.
+*
 * @example
 * ```ts
 * import { createSessionStorage } from "elements-kit/utilities/storage";
@@ -60,23 +88,7 @@ function createLocalStorage(key, initialValue, options) {
 * ```
 */
 function createSessionStorage(key, initialValue, options) {
-	const serialise = options?.serialise ?? ((v) => JSON.stringify(v));
-	const deserialise = options?.deserialise ?? ((raw) => JSON.parse(raw));
-	const storage = sessionStorage;
-	let notify;
-	const subscribe = (cb) => {
-		notify = cb;
-		return () => {
-			notify = void 0;
-		};
-	};
-	const [s] = sync(subscribe, () => readOrDefault(storage, key, initialValue, deserialise), (v) => {
-		try {
-			storage.setItem(key, serialise(v));
-		} catch {}
-		notify?.();
-	});
-	return s;
+	return createStorageSignal("session", key, initialValue, options, false);
 }
 //#endregion
 export { createLocalStorage, createSessionStorage };

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.2",
+  "version": "0.27.4",
   "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",
@@ -124,7 +124,8 @@
     "storybook": "pnpm --filter elements-kit-storybook dev",
     "watch": "tsdown -w",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "test:engines": "node scripts/engine-matrix.mjs"
   },
   "packageManager": "pnpm@10.33.0",
   "devDependencies": {
@@ -138,7 +139,8 @@
     "react-dom": "^19.2.5",
     "tsdown": "0.22.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.2"
+    "vitest": "^4.1.2",
+    "puppeteer-core": "^24.0.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",