sibujs 4.5.0 → 4.6.0

package/dist/browser.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // browser.ts
 var browser_exports = {};
 __export(browser_exports, {
+  __resetSpeechCoordinator: () => __resetSpeechCoordinator,
   animationFrame: () => animationFrame,
   battery: () => battery,
   bounds: () => bounds,
@@ -163,6 +164,25 @@ function reportError(error, context) {
   });
 }
 
+// src/core/rendering/dispose.ts
+function resolveCapture(capture) {
+  let frame = capture;
+  while (frame?.closed) frame = frame.forwardTo;
+  return frame ?? null;
+}
+var registrationCaptures = [];
+function currentDisposerCapture() {
+  return resolveCapture(registrationCaptures[registrationCaptures.length - 1]);
+}
+function beginDisposerCapture(capture) {
+  if (capture === null && registrationCaptures.length === 0) return false;
+  registrationCaptures.push(resolveCapture(capture));
+  return true;
+}
+function endDisposerCapture() {
+  registrationCaptures.pop();
+}
+
 // src/reactivity/track-core.ts
 var POOL_MAX = 4096;
 var nodePool = [];
@@ -321,6 +341,7 @@ function retrack(effectFn, subscriber) {
   }
   currentSubscriber = subscriber;
   const sub = subscriber;
+  if (sub._cap === void 0) sub._cap = currentDisposerCapture();
   const epoch = ++subscriberEpochCounter;
   sub._epoch = epoch;
   sub._structDirty = false;
@@ -512,7 +533,12 @@ function drainQueue() {
       quarantined.add(sub);
       continue;
     }
-    safeInvoke(sub);
+    const pushed = beginDisposerCapture(sub._cap ?? null);
+    try {
+      safeInvoke(sub);
+    } finally {
+      if (pushed) endDisposerCapture();
+    }
   }
 }
 function drainNotificationQueue() {
@@ -648,7 +674,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.5.0" : "dev";
+var _runtimeVersion = true ? "4.6.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;
@@ -1279,13 +1305,15 @@ function clipboard() {
   const [copied, setCopied] = signal(false);
   let copiedTimer = null;
   let disposed = false;
+  let generation = 0;
   async function copy(value) {
     if (disposed) return;
     if (typeof navigator === "undefined" || !navigator.clipboard) {
       return;
     }
+    const mine = ++generation;
     await navigator.clipboard.writeText(value);
-    if (disposed) return;
+    if (disposed || mine !== generation) return;
     setText(value);
     setCopied(true);
     if (copiedTimer !== null) clearTimeout(copiedTimer);
@@ -1297,6 +1325,7 @@ function clipboard() {
   }
   function dispose() {
     disposed = true;
+    generation++;
     if (copiedTimer !== null) {
       clearTimeout(copiedTimer);
       copiedTimer = null;
@@ -1324,15 +1353,26 @@ function draggable(element, data) {
   let currentEl = null;
   let onDragStart = null;
   let onDragEnd = null;
+  let prevDraggableAttr = null;
+  function detach() {
+    if (!currentEl) return;
+    if (onDragStart) currentEl.removeEventListener("dragstart", onDragStart);
+    if (onDragEnd) currentEl.removeEventListener("dragend", onDragEnd);
+    if (prevDraggableAttr === null) currentEl.removeAttribute("draggable");
+    else currentEl.setAttribute("draggable", prevDraggableAttr);
+    currentEl = null;
+    onDragStart = null;
+    onDragEnd = null;
+    setIsDragging(false);
+  }
   const getter = resolveTarget2(element);
   const cleanup3 = effect(() => {
-    if (currentEl && onDragStart && onDragEnd) {
-      currentEl.removeEventListener("dragstart", onDragStart);
-      currentEl.removeEventListener("dragend", onDragEnd);
-    }
     const el = getter();
-    currentEl = el;
+    if (el === currentEl) return;
+    detach();
     if (!el) return;
+    currentEl = el;
+    prevDraggableAttr = el.getAttribute("draggable");
     el.draggable = true;
     onDragStart = (e) => {
       setIsDragging(true);
@@ -1346,16 +1386,16 @@ function draggable(element, data) {
     el.addEventListener("dragstart", onDragStart);
     el.addEventListener("dragend", onDragEnd);
   });
+  let disposed = false;
   function dispose() {
+    if (disposed) return;
+    disposed = true;
     cleanup3();
-    if (currentEl && onDragStart && onDragEnd) {
-      currentEl.removeEventListener("dragstart", onDragStart);
-      currentEl.removeEventListener("dragend", onDragEnd);
-      currentEl = null;
-    }
+    detach();
   }
   return { isDragging, dispose };
 }
+var DROP_ZONE_EXIT_GRACE_MS = 600;
 function dropZone(element, options) {
   const [isOver, setIsOver] = signal(false);
   if (typeof window === "undefined") {
@@ -1367,30 +1407,66 @@ function dropZone(element, options) {
   let onDragEnter = null;
   let onDragLeave = null;
   let onDrop = null;
-  const getter = resolveTarget2(element);
-  const cleanup3 = effect(() => {
+  let depth = 0;
+  let exitTimer = null;
+  function cancelPendingExit() {
+    if (exitTimer !== null) {
+      clearTimeout(exitTimer);
+      exitTimer = null;
+    }
+  }
+  function resetOver() {
+    cancelPendingExit();
+    depth = 0;
+    setIsOver(false);
+  }
+  function detach() {
     if (currentEl && onDragOver && onDragEnter && onDragLeave && onDrop) {
       currentEl.removeEventListener("dragover", onDragOver);
       currentEl.removeEventListener("dragenter", onDragEnter);
       currentEl.removeEventListener("dragleave", onDragLeave);
       currentEl.removeEventListener("drop", onDrop);
     }
+    currentEl = null;
+    resetOver();
+  }
+  const getter = resolveTarget2(element);
+  const cleanup3 = effect(() => {
     const el = getter();
-    currentEl = el;
+    if (el === currentEl) return;
+    detach();
     if (!el) return;
+    currentEl = el;
     onDragOver = (e) => {
       e.preventDefault();
+      cancelPendingExit();
     };
     onDragEnter = (e) => {
       e.preventDefault();
+      cancelPendingExit();
+      depth++;
       setIsOver(true);
     };
-    onDragLeave = () => {
-      setIsOver(false);
+    onDragLeave = (e) => {
+      depth = Math.max(0, depth - 1);
+      if (depth === 0) {
+        resetOver();
+        return;
+      }
+      const to = e.relatedTarget;
+      if (to != null && typeof to.nodeType === "number") {
+        if (!el.contains(to)) resetOver();
+        return;
+      }
+      cancelPendingExit();
+      exitTimer = setTimeout(() => {
+        exitTimer = null;
+        resetOver();
+      }, DROP_ZONE_EXIT_GRACE_MS);
     };
     onDrop = (e) => {
       e.preventDefault();
-      setIsOver(false);
+      resetOver();
       let transferData = null;
       if (e.dataTransfer) {
         const raw = e.dataTransfer.getData("application/json");
@@ -1411,13 +1487,7 @@ function dropZone(element, options) {
   });
   function dispose() {
     cleanup3();
-    if (currentEl && onDragOver && onDragEnter && onDragLeave && onDrop) {
-      currentEl.removeEventListener("dragover", onDragOver);
-      currentEl.removeEventListener("dragenter", onDragEnter);
-      currentEl.removeEventListener("dragleave", onDragLeave);
-      currentEl.removeEventListener("drop", onDrop);
-      currentEl = null;
-    }
+    detach();
   }
   return { isOver, dispose };
 }
@@ -1582,9 +1652,9 @@ function formatNumber(value, options) {
 function formatCurrency(value, currency, options) {
   const { locale, ...formatOptions } = options ?? {};
   return new Intl.NumberFormat(locale, {
+    ...formatOptions,
     style: "currency",
-    currency,
-    ...formatOptions
+    currency
   }).format(value);
 }
 
@@ -1670,18 +1740,36 @@ function swipe(target, options = {}) {
   }
   let startX = 0;
   let startY = 0;
-  let tracking = false;
+  let trackedId = null;
+  const idOf = (t) => t.identifier ?? 0;
+  const findTracked = (list) => {
+    if (!list) return null;
+    for (let i = 0; i < list.length; i++) {
+      const t = list[i];
+      if (idOf(t) === trackedId) return t;
+    }
+    return null;
+  };
   const onStart = (e) => {
-    if (e.touches.length === 0) return;
-    startX = e.touches[0].clientX;
-    startY = e.touches[0].clientY;
-    tracking = true;
+    const onTarget = e.targetTouches ?? e.touches;
+    if (onTarget.length > 1) {
+      trackedId = null;
+      return;
+    }
+    const touch = e.changedTouches?.[0] ?? e.touches[0];
+    if (!touch) return;
+    trackedId = idOf(touch);
+    startX = touch.clientX;
+    startY = touch.clientY;
+  };
+  const onCancel = (e) => {
+    if (trackedId !== null && findTracked(e.changedTouches)) trackedId = null;
   };
   const onEnd = (e) => {
-    if (!tracking) return;
-    tracking = false;
-    const touch = e.changedTouches[0];
+    if (trackedId === null) return;
+    const touch = findTracked(e.changedTouches);
     if (!touch) return;
+    trackedId = null;
     const dx = touch.clientX - startX;
     const dy = touch.clientY - startY;
     const absX = Math.abs(dx);
@@ -1698,9 +1786,12 @@ function swipe(target, options = {}) {
   };
   target.addEventListener("touchstart", onStart, { passive: true });
   target.addEventListener("touchend", onEnd, { passive: true });
+  target.addEventListener("touchcancel", onCancel, { passive: true });
   function dispose() {
     target.removeEventListener("touchstart", onStart);
     target.removeEventListener("touchend", onEnd);
+    target.removeEventListener("touchcancel", onCancel);
+    trackedId = null;
   }
   return { direction, dispose };
 }
@@ -1727,6 +1818,18 @@ function windowSize() {
 }
 
 // src/browser/urlState.ts
+var _url = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.urlState.v1"), () => ({
+  instances: /* @__PURE__ */ new Set()
+}));
+function notifyUrlWrite() {
+  for (const sync of Array.from(_url.instances)) sync();
+}
+var SCROLL_ENTRY_KEY = "__sibuScrollKey";
+function withoutEntryIdentity(state2) {
+  if (state2 === null || typeof state2 !== "object" || !Object.hasOwn(state2, SCROLL_ENTRY_KEY)) return state2;
+  const { [SCROLL_ENTRY_KEY]: _identity, ...rest } = state2;
+  return rest;
+}
 function urlState() {
   if (typeof window === "undefined") {
     const [params2] = signal(new URLSearchParams());
@@ -1760,26 +1863,36 @@ function urlState() {
   }
   window.addEventListener("popstate", syncFromLocation);
   window.addEventListener("hashchange", syncFromLocation);
+  _url.instances.add(syncFromLocation);
+  function writeHistory(newUrl, opts) {
+    const state2 = "state" in opts ? opts.state : window.history.state;
+    if (opts.replace) window.history.replaceState(state2, "", newUrl);
+    else window.history.pushState("state" in opts ? state2 : withoutEntryIdentity(state2), "", newUrl);
+  }
   function setParams(next, opts = {}) {
     const p = next instanceof URLSearchParams ? next : new URLSearchParams(next);
     const query = p.toString();
     const newUrl = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
-    if (opts.replace) window.history.replaceState(null, "", newUrl);
-    else window.history.pushState(null, "", newUrl);
+    writeHistory(newUrl, opts);
     lastSearch = window.location.search;
     setParamsSignal(new URLSearchParams(p));
+    notifyUrlWrite();
   }
   function setHash(next, opts = {}) {
     const normalized = next && next !== "#" ? next.startsWith("#") ? next : `#${next}` : "";
     const newUrl = `${window.location.pathname}${window.location.search}${normalized}`;
-    if (opts.replace) window.history.replaceState(null, "", newUrl);
-    else window.history.pushState(null, "", newUrl);
+    writeHistory(newUrl, opts);
     lastHash = normalized;
     setHashSignal(normalized);
+    notifyUrlWrite();
   }
+  let disposed = false;
   function dispose() {
+    if (disposed) return;
+    disposed = true;
     window.removeEventListener("popstate", syncFromLocation);
     window.removeEventListener("hashchange", syncFromLocation);
+    _url.instances.delete(syncFromLocation);
   }
   return { params, hash, setParams, setHash, dispose };
 }
@@ -1796,10 +1909,14 @@ function broadcast(channelName) {
   const channel = new BroadcastChannel(channelName);
   const handler = (ev) => setLast(ev.data);
   channel.addEventListener("message", handler);
+  let disposed = false;
   function post(message) {
+    if (disposed) return;
     channel.postMessage(message);
   }
   function dispose() {
+    if (disposed) return;
+    disposed = true;
     channel.removeEventListener("message", handler);
     channel.close();
   }
@@ -1998,31 +2115,42 @@ function animationFrame(options = {}) {
   let prev = -1;
   let start = -1;
   let disposed = false;
+  let active = false;
+  let generation = 0;
   const minFrameMs = options.fpsLimit ? 1e3 / options.fpsLimit : 0;
   const step = (now) => {
+    id = null;
+    if (!active) return;
+    const frameGeneration = generation;
     if (start < 0) start = now;
     const firstTick = prev < 0;
     const dt = firstTick ? 0 : now - prev;
     if (firstTick || dt >= minFrameMs) {
-      setDelta(dt);
-      setElapsed(now - start);
       prev = now;
+      const elapsedValue = now - start;
+      setDelta(dt);
+      if (!active || generation !== frameGeneration) return;
+      setElapsed(elapsedValue);
+      if (!active || generation !== frameGeneration) return;
     }
-    id = requestAnimationFrame(step);
+    if (id === null) id = requestAnimationFrame(step);
   };
   function resume() {
-    if (disposed || id !== null) return;
-    setRunning(true);
+    if (disposed || active) return;
+    active = true;
     id = requestAnimationFrame(step);
+    setRunning(true);
   }
   function pause() {
+    generation++;
+    active = false;
     if (id !== null) {
       cancelAnimationFrame(id);
       id = null;
     }
-    setRunning(false);
     prev = -1;
     start = -1;
+    setRunning(false);
   }
   function dispose() {
     disposed = true;
@@ -2152,6 +2280,35 @@ function keyboard(options = {}) {
 }
 
 // src/browser/speech.ts
+var _speech = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.speech.v1"), () => ({
+  queue: [],
+  active: null,
+  owners: /* @__PURE__ */ new Set()
+}));
+function syncOwners() {
+  for (const owner of Array.from(_speech.owners)) owner.sync();
+}
+function pump(synth) {
+  if (_speech.active) return;
+  const index = _speech.queue.findIndex((entry2) => !entry2.owner.paused);
+  if (index === -1) return;
+  const [entry] = _speech.queue.splice(index, 1);
+  _speech.active = entry;
+  const finish = () => {
+    if (_speech.active !== entry) return;
+    _speech.active = null;
+    pump(synth);
+    syncOwners();
+  };
+  entry.utterance.addEventListener("end", finish, { once: true });
+  entry.utterance.addEventListener("error", finish, { once: true });
+  synth.speak(entry.utterance);
+}
+function __resetSpeechCoordinator() {
+  _speech.queue.length = 0;
+  _speech.active = null;
+  _speech.owners.clear();
+}
 function speech() {
   const [speaking, setSpeaking] = signal(false);
   const [paused, setPaused] = signal(false);
@@ -2172,19 +2329,16 @@ function speech() {
     };
   }
   const synth = window.speechSynthesis;
-  let interval = null;
-  function startPolling() {
-    if (interval !== null) return;
-    interval = setInterval(() => {
-      setSpeaking(synth.speaking);
-      setPaused(synth.paused);
-      if (!synth.speaking && !synth.paused) {
-        clearInterval(interval);
-        interval = null;
-      }
-    }, 200);
-  }
   let disposed = false;
+  const owner = {
+    paused: false,
+    sync: () => {
+      const mine = _speech.active?.owner === owner || _speech.queue.some((entry) => entry.owner === owner);
+      setSpeaking(mine);
+      setPaused(owner.paused);
+    }
+  };
+  _speech.owners.add(owner);
   function speak(text, options = {}) {
     if (disposed) return;
     const u = new SpeechSynthesisUtterance(text);
@@ -2197,52 +2351,48 @@ function speech() {
       const match = voices.find((v) => v.name === options.voice);
       if (match) u.voice = match;
     }
-    u.addEventListener(
-      "start",
-      () => {
-        if (!disposed) setSpeaking(true);
-      },
-      { once: true }
-    );
-    u.addEventListener(
-      "end",
-      () => {
-        if (disposed) return;
-        setSpeaking(false);
-        setPaused(false);
-      },
-      { once: true }
-    );
-    u.addEventListener(
-      "error",
-      () => {
-        if (disposed) return;
-        setSpeaking(false);
-        setPaused(false);
-      },
-      { once: true }
-    );
-    synth.speak(u);
-    setSpeaking(true);
-    startPolling();
+    _speech.queue.push({ owner, utterance: u });
+    pump(synth);
+    syncOwners();
+  }
+  function pause() {
+    if (disposed || owner.paused) return;
+    owner.paused = true;
+    if (_speech.active?.owner === owner) synth.pause();
+    syncOwners();
+  }
+  function resume() {
+    if (disposed || !owner.paused) return;
+    owner.paused = false;
+    if (_speech.active?.owner === owner) synth.resume();
+    else pump(synth);
+    syncOwners();
+  }
+  function cancel() {
+    if (disposed) return;
+    cancelOwned();
+    syncOwners();
+  }
+  function cancelOwned() {
+    for (let i = _speech.queue.length - 1; i >= 0; i--) {
+      if (_speech.queue[i].owner === owner) _speech.queue.splice(i, 1);
+    }
+    owner.paused = false;
+    if (_speech.active?.owner === owner) {
+      _speech.active = null;
+      if (synth.paused) synth.resume();
+      synth.cancel();
+      pump(synth);
+    }
   }
   function dispose() {
+    if (disposed) return;
+    cancelOwned();
     disposed = true;
-    if (interval !== null) {
-      clearInterval(interval);
-      interval = null;
-    }
-    synth.cancel();
+    syncOwners();
+    _speech.owners.delete(owner);
   }
-  return {
-    speaking,
-    paused,
-    speak,
-    pause: () => synth.pause(),
-    resume: () => synth.resume(),
-    cancel: () => synth.cancel(),
-    dispose
-  };
+  return { speaking, paused, speak, pause, resume, cancel, dispose };
 }
 
 // src/browser/gamepad.ts
@@ -2253,6 +2403,7 @@ function gamepad() {
     } };
   }
   let rafId = null;
+  let disposed = false;
   function snapshot(pad) {
     return {
       index: pad.index,
@@ -2267,7 +2418,7 @@ function gamepad() {
     for (let i = 0; i < a.length; i++) {
       const pa = a[i];
       const pb = b[i];
-      if (pa.index !== pb.index || pa.connected !== pb.connected) return false;
+      if (pa.index !== pb.index || pa.id !== pb.id || pa.connected !== pb.connected) return false;
       if (pa.buttons.length !== pb.buttons.length) return false;
       for (let j = 0; j < pa.buttons.length; j++) {
         if (pa.buttons[j].pressed !== pb.buttons[j].pressed) return false;
@@ -2280,15 +2431,19 @@ function gamepad() {
     }
     return true;
   }
+  function publish() {
+    const snap = Array.from(navigator.getGamepads()).filter((g) => g !== null).map(snapshot);
+    if (!equal(pads(), snap)) setPads(snap);
+    return snap;
+  }
   function poll() {
-    const raw = navigator.getGamepads();
-    const snap = Array.from(raw).filter((g) => g !== null).map(snapshot);
-    const current = pads();
-    if (!equal(current, snap)) setPads(snap);
-    rafId = requestAnimationFrame(poll);
+    rafId = null;
+    if (disposed) return;
+    publish();
+    if (!disposed && rafId === null) rafId = requestAnimationFrame(poll);
   }
   function startPolling() {
-    if (rafId === null) poll();
+    if (!disposed && rafId === null) poll();
   }
   function stopPolling() {
     if (rafId !== null) {
@@ -2298,15 +2453,14 @@ function gamepad() {
   }
   const onConnect = () => startPolling();
   const onDisconnect = () => {
-    const raw = navigator.getGamepads();
-    const hasAny = Array.from(raw).some((g) => g !== null);
-    if (!hasAny) stopPolling();
+    if (publish().length === 0) stopPolling();
   };
   window.addEventListener("gamepadconnected", onConnect);
   window.addEventListener("gamepaddisconnected", onDisconnect);
   const initial = Array.from(navigator.getGamepads()).some((g) => g !== null);
   if (initial) startPolling();
   function dispose() {
+    disposed = true;
     stopPolling();
     window.removeEventListener("gamepadconnected", onConnect);
     window.removeEventListener("gamepaddisconnected", onDisconnect);
@@ -2320,8 +2474,7 @@ function pointerLock() {
   if (typeof document === "undefined") {
     return {
       locked,
-      request: () => {
-      },
+      request: () => Promise.resolve(),
       exit: () => {
       },
       dispose: () => {
@@ -2333,8 +2486,14 @@ function pointerLock() {
   };
   document.addEventListener("pointerlockchange", handler);
   function request(element) {
-    if (typeof element.requestPointerLock === "function") {
-      element.requestPointerLock();
+    if (typeof element.requestPointerLock !== "function") {
+      return Promise.resolve();
+    }
+    try {
+      const result = element.requestPointerLock();
+      return Promise.resolve(result).then(() => void 0);
+    } catch (err) {
+      return Promise.reject(err);
     }
   }
   function exit() {
@@ -2437,25 +2596,46 @@ function imageLoader(src) {
     };
   }
   let current = null;
+  let currentSettled = false;
   let disposed = false;
+  let startToken = 0;
+  function resetState() {
+    batch(() => {
+      setStatus("pending");
+      setImage(null);
+      setWidth(0);
+      setHeight(0);
+    });
+  }
+  function abandonCurrent() {
+    if (!current) return;
+    const prev = current;
+    current = null;
+    prev.onload = null;
+    prev.onerror = null;
+    if (!currentSettled) prev.src = "";
+  }
   function start(url) {
-    if (current) {
-      current.onload = null;
-      current.onerror = null;
-    }
-    setStatus("pending");
-    setImage(null);
+    const token = ++startToken;
+    abandonCurrent();
+    resetState();
+    if (disposed || token !== startToken) return;
     const img = new Image();
     current = img;
+    currentSettled = false;
     img.onload = () => {
       if (disposed || current !== img) return;
-      setImage(img);
-      setWidth(img.naturalWidth);
-      setHeight(img.naturalHeight);
-      setStatus("loaded");
+      currentSettled = true;
+      batch(() => {
+        setImage(img);
+        setWidth(img.naturalWidth);
+        setHeight(img.naturalHeight);
+        setStatus("loaded");
+      });
     };
     img.onerror = () => {
       if (disposed || current !== img) return;
+      currentSettled = true;
       setStatus("error");
     };
     img.src = url;
@@ -2470,21 +2650,21 @@ function imageLoader(src) {
     start(src);
   }
   function dispose() {
+    if (disposed) return;
     disposed = true;
+    startToken++;
     if (srcEffectTeardown) {
       srcEffectTeardown();
       srcEffectTeardown = null;
     }
-    if (current) {
-      current.onload = null;
-      current.onerror = null;
-      current = null;
-    }
+    abandonCurrent();
+    resetState();
   }
   return { status, image, width, height, dispose };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  __resetSpeechCoordinator,
   animationFrame,
   battery,
   bounds,