Feature/framework audit improvements

CHANGELOG.md

@@ -6,6 +6,47 @@ This project follows [Semantic Versioning](https://semver.org/).
 
 ---
 
+## [3.3.3] — 2026-06-26
+
+A hardening pass across the non-core subsystems (`ui`, `widgets`, `components`, `plugins`, `data`, `platform`, `patterns`, `performance`, `devtools`): correctness fixes, memory-leak plugs, SSR-safety guards, and accessibility improvements. No breaking changes.
+
+### Added
+
+- **`bindField` reflects an array back to `<select multiple>`** — the field's array value is now written onto each option's `selected` state on render and on update. (3.3.2 added the read side; this completes the two-way binding.)
+- **`captureSignalGraph()` returns a real node inventory** — the devtools hook now implements `getSignalNodes()`, so the snapshot reports live signals/derived/effects (id, name, kind, current value) instead of always being empty. Dependency edges are not yet tracked.
+- **`prefersReducedMotion()`** is now exported from `reducedMotion` (the one-shot check was previously duplicated privately in the spring/preset helpers).
+- **`RouterLink` accepts positional children** — `RouterLink(props, children)` matches the framework's children convention; the `nodes` prop is kept as a deprecated alias.
+
+### Fixed
+
+- **Teardown-tied memory leaks** — `Head()`, the router's route outlets (`Route` / `KeepAliveRoute` / `Outlet`), `transition()`, and `hover()` now release their injected elements / cached subtrees / timers / listeners when their element or subtree is disposed, instead of living for the page's lifetime.
+- **SSR no longer crashes** in `persisted()`, the priority scheduler, `stream()` / `socket()`, the router constructor (`createMemoryRouter`), `scrollRestoration()`, and `battery()` — each guards the browser global it touches and degrades gracefully instead of throwing a `ReferenceError`.
+- **Devtools trace profiler** — `stop()` / `stopTrace()` no longer throw; the hook's `on()` now returns a working unsubscribe, so listeners are removed instead of leaking.
+- **`form().isDirty`** no longer reports a field as dirty when an array/object value is unchanged (e.g. a multi-select with `initial: []`).
+- **`createAction().submit`** — a slow earlier submission can no longer overwrite the result of a newer one (run-sequenced state updates).
+- **`inputMask`** caret restoration — fixed mis-counting of literal characters for `*` masks and patterns with a leading literal.
+- **`pagination`** clamps the current page reactively when the item count shrinks, so indices stay in bounds.
+- **`infiniteScroll`** re-checks intersection after loading, so it doesn't stall when appended content doesn't push the sentinel out of view.
+- **`lazyModule`** caches a loader that resolves to `undefined`/falsy instead of re-invoking it on every `get()`.
+- **`normalize`** — child relations default to `id` instead of inheriting the parent's custom `idKey` (which produced `String(undefined)` ids).
+- **Route matching is specificity-ordered** — a broad parameter route can no longer shadow a more specific route registered after it.
+- Smaller fixes: the test `mockFetch` tolerates non-JSON request bodies; the a11y checker no longer exempts the literal string `"undefined"` from ARIA value validation.
+
+### Accessibility
+
+- **`Loading`** exposes `role="status"` + `aria-live="polite"` and a default label, so it is announced to screen readers.
+- **`datePicker`** gives its grid an accessible name (the displayed month) and moves real focus to follow the roving tabindex during keyboard navigation.
+- **Widget `bind()` is reversible** — `Combobox`, `Select`, and `datePicker` restore the `role` / `aria-*` / `id` / `tabindex` they set when torn down (matching `Accordion` / `Tabs` / `Popover`).
+- **`Combobox`** no longer races a blur-close against an option click (a pointer-down inside the listbox keeps the input focused).
+- **`contentEditable`** can be scoped to an editor element so its formatting commands ignore selections elsewhere on the page.
+
+### Changed
+
+- Internal coordination state for several modules (the `plugin` default registry, the `devtools` session, and the WASM / microfrontend module caches) is now shared across duplicate runtime copies, extending the 3.3.1/3.3.2 first-copy-wins sweep.
+- `ErrorDisplay` reads dev-mode state at render time rather than at module load, so a runtime-configured dev flag is respected.
+
+---
+
 ## [3.3.2] — 2026-06-26
 
 Continues the duplicate-runtime hardening from 3.3.1, plus two small additive enhancements. No breaking changes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sibujs",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "A lightweight, function-based frontend framework that combines the best of React, Svelte, and Vue — with zero VDOM and maximum simplicity. Designed for developers who want fine-grained reactivity and full control without compilation or magic.",
   "keywords": [
     "frontend",

src/browser/animationFrame.ts

@@ -51,6 +51,7 @@ export function animationFrame(options: AnimationFrameOptions = {}): {
   let id: number | null = null;
   let prev = -1;
   let start = -1;
+  let disposed = false;
   const minFrameMs = options.fpsLimit ? 1000 / options.fpsLimit : 0;
 
   const step = (now: number) => {
@@ -66,7 +67,8 @@ export function animationFrame(options: AnimationFrameOptions = {}): {
   };
 
   function resume() {
-    if (id !== null) return;
+    // `disposed` makes dispose() permanent — resume() can't restart the loop.
+    if (disposed || id !== null) return;
     setRunning(true);
     id = requestAnimationFrame(step);
   }
@@ -82,6 +84,7 @@ export function animationFrame(options: AnimationFrameOptions = {}): {
   }
 
   function dispose() {
+    disposed = true;
     pause();
   }
 

src/browser/battery.ts

@@ -41,27 +41,34 @@ export function battery(): {
   if (typeof navigator !== "undefined" && "getBattery" in navigator) {
     setSupported(true);
 
-    (navigator as unknown as { getBattery(): Promise<BatteryManager> }).getBattery().then((bm: BatteryManager) => {
-      if (disposed) return;
+    const batteryPromise = (navigator as unknown as { getBattery(): Promise<BatteryManager> })
+      .getBattery()
+      .then((bm: BatteryManager) => {
+        if (disposed) return;
 
-      battery = bm;
+        battery = bm;
 
-      batch(() => {
-        setLevel(bm.level);
-        setCharging(bm.charging);
-        setChargingTime(bm.chargingTime);
-        setDischargingTime(bm.dischargingTime);
-      });
+        batch(() => {
+          setLevel(bm.level);
+          setCharging(bm.charging);
+          setChargingTime(bm.chargingTime);
+          setDischargingTime(bm.dischargingTime);
+        });
 
-      onLevelChange = () => setLevel(bm.level);
-      onChargingChange = () => setCharging(bm.charging);
-      onChargingTimeChange = () => setChargingTime(bm.chargingTime);
-      onDischargingTimeChange = () => setDischargingTime(bm.dischargingTime);
+        onLevelChange = () => setLevel(bm.level);
+        onChargingChange = () => setCharging(bm.charging);
+        onChargingTimeChange = () => setChargingTime(bm.chargingTime);
+        onDischargingTimeChange = () => setDischargingTime(bm.dischargingTime);
 
-      bm.addEventListener("levelchange", onLevelChange);
-      bm.addEventListener("chargingchange", onChargingChange);
-      bm.addEventListener("chargingtimechange", onChargingTimeChange);
-      bm.addEventListener("dischargingtimechange", onDischargingTimeChange);
+        bm.addEventListener("levelchange", onLevelChange);
+        bm.addEventListener("chargingchange", onChargingChange);
+        bm.addEventListener("chargingtimechange", onChargingTimeChange);
+        bm.addEventListener("dischargingtimechange", onDischargingTimeChange);
+      });
+    batteryPromise.catch(() => {
+      // getBattery() can reject (insecure context / permission denied) —
+      // degrade quietly instead of surfacing an unhandled rejection.
+      if (!disposed) setSupported(false);
     });
   }
 

src/browser/bounds.ts

@@ -70,7 +70,12 @@ export function bounds(target: Element): {
     };
   }
 
+  let disposed = false;
+
   function refresh() {
+    // A queued observer/scroll callback or a manual refresh() after dispose()
+    // must not write to the torn-down instance's signal.
+    if (disposed) return;
     setRect(readRect(target));
   }
 
@@ -86,6 +91,7 @@ export function bounds(target: Element): {
   window.addEventListener("scroll", onScroll, { passive: true, capture: true });
 
   function dispose() {
+    disposed = true;
     resizeObserver?.disconnect();
     window.removeEventListener("scroll", onScroll, { capture: true });
   }

src/browser/wakeLock.ts

@@ -47,10 +47,19 @@ export function wakeLock(): {
 
   const api = (navigator as unknown as { wakeLock: WakeLockApi }).wakeLock;
   let sentinel: WakeLockSentinel | null = null;
+  let disposed = false;
 
   async function request(): Promise<void> {
+    if (disposed) return;
     try {
-      sentinel = await api.request("screen");
+      const s = await api.request("screen");
+      // If dispose() ran while the request was in flight, release the sentinel
+      // immediately and don't register it / its listener (which would leak).
+      if (disposed) {
+        s.release().catch(() => {});
+        return;
+      }
+      sentinel = s;
       setActive(true);
       sentinel.addEventListener("release", () => {
         setActive(false);
@@ -84,6 +93,7 @@ export function wakeLock(): {
   document.addEventListener("visibilitychange", onVisibility);
 
   function dispose(): void {
+    disposed = true;
     document.removeEventListener("visibilitychange", onVisibility);
     release().catch((err) => {
       if (typeof console !== "undefined") {

src/components/ErrorBoundary.ts

@@ -250,7 +250,10 @@ function getMemoizedFallback(
  *
  * Features:
  * - Catches sync errors thrown by children
- * - Catches async errors (Promise rejections) from children
+ * - Catches the rejection of a Promise *returned* by children (async components)
+ *   — it does NOT observe fire-and-forget async errors (rejections from timers,
+ *   event handlers, or detached/unawaited promises), which surface as global
+ *   `unhandledrejection` events instead.
  * - Supports nested ErrorBoundaries (inner catches first, outer catches propagation)
  * - Retry functionality to clear error and re-render children
  * - Memoized fallback to avoid re-creating fallback UI on every render

src/components/ErrorDisplay.ts

@@ -25,8 +25,6 @@ import { signal } from "../core/signals/signal";
 // No dependencies, no JSX, no compilation — every element is built
 // via the tag factories, and styles are injected once per page.
 
-const _isDev = isDev();
-
 export type ErrorSeverity = "error" | "warning" | "info";
 
 export interface ErrorDisplayProps {
@@ -427,7 +425,9 @@ export function ErrorDisplay(props: ErrorDisplayProps): Element {
 
   const severity = props.severity ?? "error";
   const normalized = normalizeError(props.error);
-  const showDetails = props.alwaysShowDetails ?? _isDev;
+  // Read dev state at render time, not module-eval — otherwise a runtime-set
+  // dev config (configured after this module is imported) would be ignored.
+  const showDetails = props.alwaysShowDetails ?? isDev();
   const headline = props.title ?? normalized.message;
   const timestamp = new Date().toISOString().replace("T", " ").slice(0, 19);
 

src/components/Loading.ts

@@ -92,6 +92,11 @@ export function Loading(props: LoadingProps = {}): HTMLElement {
   if (variant === "dots") {
     return div({
       class: `sibu-loading${sizeClass}`,
+      role: "status",
+      "aria-live": "polite",
+      // When there's no visible text, give the live region an accessible name
+      // so it isn't announced as an empty status.
+      "aria-label": text ? undefined : "Loading",
       nodes: [
         div({
           class: "sibu-loading-dots",
@@ -108,6 +113,9 @@ export function Loading(props: LoadingProps = {}): HTMLElement {
 
   return div({
     class: `sibu-loading${sizeClass}`,
+    role: "status",
+    "aria-live": "polite",
+    "aria-label": text ? undefined : "Loading",
     nodes: [
       div({ class: "sibu-loading-spinner" }) as HTMLElement,
       text ? (span({ class: "sibu-loading-text", nodes: text }) as HTMLElement) : null,

src/data/query.ts

@@ -3,6 +3,7 @@ import { effect } from "../core/signals/effect";
 import { signal } from "../core/signals/signal";
 import { getRequestScopedCache } from "../core/ssr-context";
 import { batch } from "../reactivity/batch";
+import { globalSingleton } from "../utils/globalSingleton";
 import type { RetryOptions } from "./retry";
 import { withRetry } from "./retry";
 
@@ -66,7 +67,10 @@ interface CacheEntry {
 // data (e.g. user A's profile under key "profile") bleeds into a concurrent
 // request for user B that resolves the same key. `getActiveQueryCache()`
 // returns the request-scoped map under SSR and this global otherwise.
-const globalQueryCache = new Map<string, CacheEntry>();
+//
+// Shared via globalSingleton so a bundler that duplicates this module doesn't
+// give `query()` and `invalidateQueries`/`setQueryData` two separate caches.
+const globalQueryCache = globalSingleton(Symbol.for("sibujs.query.cache.v1"), () => new Map<string, CacheEntry>());
 
 function getActiveQueryCache(): Map<string, CacheEntry> {
   return getRequestScopedCache<CacheEntry>("query") ?? globalQueryCache;