sibujs 1.4.0 → 1.5.0

package/dist/patterns.cjs

@@ -430,7 +430,7 @@ function persisted(key, initial, options = {}) {
   }
   const [value, setValue] = signal(restored);
   let applyingFromStorage = false;
-  effect(() => {
+  const stopPersistEffect = effect(() => {
     const current = value();
     if (applyingFromStorage) return;
     try {
@@ -470,6 +470,7 @@ function persisted(key, initial, options = {}) {
     window.addEventListener("storage", storageListener);
   }
   const dispose = () => {
+    stopPersistEffect();
     if (storageListener && typeof window !== "undefined") {
       window.removeEventListener("storage", storageListener);
       storageListener = null;
@@ -487,27 +488,53 @@ function persisted(key, initial, options = {}) {
 // src/patterns/optimistic.ts
 function optimistic(initialValue) {
   const [value, setValue] = signal(initialValue);
-  const [_pending, setPending] = signal(false);
-  async function addOptimistic(optimisticValue, asyncAction) {
+  const [pending, setPending] = signal(false);
+  let inflightCount = 0;
+  let version = 0;
+  async function update(optimisticValue, asyncAction) {
+    const myVersion = ++version;
     const previousValue = value();
     setValue(optimisticValue);
+    inflightCount++;
     setPending(true);
     try {
       const result = await asyncAction();
-      setValue(result);
+      if (version === myVersion) {
+        setValue(result);
+      }
     } catch {
-      setValue(previousValue);
+      if (version === myVersion) {
+        setValue(previousValue);
+      }
     } finally {
-      setPending(false);
+      inflightCount--;
+      if (inflightCount === 0) setPending(false);
     }
   }
-  return [value, addOptimistic];
+  return { value, pending, update };
 }
 function optimisticList(initialValue) {
   const [items, setItems] = signal([...initialValue]);
-  async function addOptimistic(item, asyncAction) {
+  const [pending, setPending] = signal(false);
+  let inflightCount = 0;
+  let version = 0;
+  function begin() {
+    const v = ++version;
+    inflightCount++;
+    setPending(true);
+    return v;
+  }
+  function end(myVersion, revertFn) {
+    if (revertFn && version === myVersion) {
+      revertFn();
+    }
+    inflightCount--;
+    if (inflightCount === 0) setPending(false);
+  }
+  async function add(item, asyncAction) {
     const prev = items();
     setItems([...prev, item]);
+    const myVersion = begin();
     try {
       const result = await asyncAction();
       setItems((current) => {
@@ -517,32 +544,56 @@ function optimisticList(initialValue) {
           next[idx] = result;
           return next;
         }
-        return [...current.filter((i) => i !== item), result];
+        return [...current, result];
       });
+      end(myVersion);
     } catch {
-      setItems(prev);
+      end(myVersion, () => setItems(prev));
     }
   }
-  async function removeOptimistic(predicate, asyncAction) {
+  async function remove(predicate, asyncAction) {
     const prev = items();
     setItems(prev.filter((item) => !predicate(item)));
+    const myVersion = begin();
     try {
       await asyncAction();
+      end(myVersion);
     } catch {
-      setItems(prev);
+      end(myVersion, () => setItems(prev));
     }
   }
-  async function updateOptimistic(predicate, update, asyncAction) {
+  async function updateItem(predicate, patch, asyncAction) {
     const prev = items();
-    setItems(prev.map((item) => predicate(item) ? { ...item, ...update } : item));
+    const patchedRefs = [];
+    setItems(
+      prev.map((item) => {
+        if (predicate(item)) {
+          const patched = { ...item, ...patch };
+          patchedRefs.push(patched);
+          return patched;
+        }
+        return item;
+      })
+    );
+    const myVersion = begin();
     try {
       const result = await asyncAction();
-      setItems((current) => current.map((item) => predicate(item) ? result : item));
+      setItems((current) => current.map((item) => patchedRefs.includes(item) ? result : item));
+      end(myVersion);
     } catch {
-      setItems(prev);
+      end(myVersion, () => setItems(prev));
     }
   }
-  return { items, addOptimistic, removeOptimistic, updateOptimistic };
+  return {
+    items,
+    pending,
+    add,
+    remove,
+    update: updateItem,
+    addOptimistic: add,
+    removeOptimistic: remove,
+    updateOptimistic: updateItem
+  };
 }
 
 // src/core/signals/derived.ts
@@ -563,21 +614,37 @@ function derived(getter, options) {
     cs._v = getter();
   }, markDirty);
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  let evaluating = false;
   function computedGetter() {
+    if (evaluating) {
+      throw new Error(
+        `[SibuJS] Circular dependency detected in derived${debugName ? ` "${debugName}"` : ""}. A derived signal cannot read itself (directly or through a chain).`
+      );
+    }
     if (trackingSuspended) {
       if (cs._d) {
-        cs._d = false;
-        cs._v = getter();
+        evaluating = true;
+        try {
+          cs._d = false;
+          cs._v = getter();
+        } finally {
+          evaluating = false;
+        }
       }
       return cs._v;
     }
     recordDependency(cs);
     if (cs._d) {
       const oldValue = cs._v;
-      track(() => {
-        cs._d = false;
-        cs._v = getter();
-      }, markDirty);
+      evaluating = true;
+      try {
+        track(() => {
+          cs._d = false;
+          cs._v = getter();
+        }, markDirty);
+      } finally {
+        evaluating = false;
+      }
       if (hook && oldValue !== cs._v) {
         hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
       }
@@ -642,7 +709,7 @@ function timeline(initial, maxHistory = 100) {
 
 // src/patterns/globalStore.ts
 function globalStore(config) {
-  const initialState = { ...config.state };
+  const initialState = JSON.parse(JSON.stringify(config.state));
   const [getState, setState] = signal({ ...initialState });
   const listeners = /* @__PURE__ */ new Set();
   const middlewares = config.middleware || [];

package/dist/patterns.d.cts

@@ -1,4 +1,4 @@
-export { C as ComponentProps, P as PropDef, a as PropSchema, R as RenderProp, V as Validator, b as assertType, c as compose, d as createGuard, e as createSlots, f as defineComponent, g as defineSlottedComponent, h as defineStrictComponent, v as validateProps, i as validators, w as withBoundary, j as withDefaults, k as withProps, l as withWrapper } from './contracts-xo5ckdRP.cjs';
+export { C as ComponentProps, P as PropDef, a as PropSchema, R as RenderProp, V as Validator, b as assertType, c as compose, d as createGuard, e as createSlots, f as defineComponent, g as defineSlottedComponent, h as defineStrictComponent, v as validateProps, i as validators, w as withBoundary, j as withDefaults, k as withProps, l as withWrapper } from './contracts-ey_Qh8ef.cjs';
 
 interface MachineConfig<S extends string, E extends string, C extends Record<string, unknown> = Record<string, unknown>> {
     initial: S;
@@ -88,31 +88,65 @@ interface PersistOptions<T = unknown> {
 }
 declare function persisted<T>(key: string, initial: T, options?: PersistOptions<T>): [() => T, (next: T | ((prev: T) => T)) => void];
 
-interface OptimisticAction<T> {
-    optimisticValue: T;
-    revert: T;
-}
 /**
  * optimistic provides optimistic UI updates that can be reverted on failure.
  * The value updates immediately, then reverts if the async operation fails.
  *
- * Note: concurrent optimistic updates on the same value are inherently
- * ambiguous. If multiple operations are in flight, a failed revert restores
- * the value captured before that specific operation started.
+ * Returns a named object with `value`, `pending`, and `update`.
+ *
+ * Concurrent safety: each operation is tagged with a version counter.
+ * A failing operation only reverts if no newer operation has started since,
+ * preventing stale snapshots from overwriting fresher optimistic state.
+ *
+ * @example
+ * ```ts
+ * const likes = optimistic(42);
+ *
+ * button(
+ *   { on: { click: () => likes.update(likes.value() + 1, () => api.like()) } },
+ *   () => `${likes.value()} ${likes.pending() ? "(saving…)" : ""}`,
+ * );
+ * ```
  */
-declare function optimistic<T>(initialValue: T): [() => T, (optimisticValue: T, asyncAction: () => Promise<T>) => Promise<void>];
+declare function optimistic<T>(initialValue: T): {
+    value: () => T;
+    pending: () => boolean;
+    update: (optimisticValue: T, asyncAction: () => Promise<T>) => Promise<void>;
+};
 /**
  * optimisticList provides optimistic updates for array state.
  *
  * Uses functional updates (setItems(current => ...)) for the success path
  * to avoid losing changes made by concurrent operations. The failure path
- * reverts to a snapshot taken before the operation started.
+ * uses a version guard so stale reverts don't overwrite newer state.
+ *
+ * @example
+ * ```ts
+ * const todos = optimisticList<Todo>([]);
+ *
+ * todos.add(
+ *   { id: tempId(), text: "New" },
+ *   async () => api.createTodo("New"),
+ * );
+ *
+ * div([
+ *   () => todos.pending() ? span("Saving…") : null,
+ *   each(() => todos.items(), (t) => div(t().text), { key: (t) => t.id }),
+ * ]);
+ * ```
  */
 declare function optimisticList<T>(initialValue: T[]): {
     items: () => T[];
+    pending: () => boolean;
+    add: (item: T, asyncAction: () => Promise<T>) => Promise<void>;
+    remove: (predicate: (item: T) => boolean, asyncAction: () => Promise<void>) => Promise<void>;
+    update: (predicate: (item: T) => boolean, patch: Partial<T>, asyncAction: () => Promise<T>) => Promise<void>;
+    /** @deprecated Use `add` instead */
     addOptimistic: (item: T, asyncAction: () => Promise<T>) => Promise<void>;
+    /** @deprecated Use `remove` instead */
     removeOptimistic: (predicate: (item: T) => boolean, asyncAction: () => Promise<void>) => Promise<void>;
-    updateOptimistic: (predicate: (item: T) => boolean, update: Partial<T>, asyncAction: () => Promise<T>) => Promise<void>;
+    /** @deprecated Use `update` instead */
+    updateOptimistic: (predicate: (item: T) => boolean, patch: Partial<T>, asyncAction: () => Promise<T>) => Promise<void>;
 };
 
 interface TimeTravelReturn<T> {
@@ -151,4 +185,4 @@ declare function globalStore<S extends Record<string, unknown>, A extends Record
     middleware?: Middleware<S>[];
 }): GlobalStore<S, A>;
 
-export { type GlobalStore, type MachineConfig, type MachineReturn, type Middleware, type OptimisticAction, type PersistOptions, type Selector, type TimeTravelReturn, globalStore, machine, optimistic, optimisticList, persisted, timeline };
+export { type GlobalStore, type MachineConfig, type MachineReturn, type Middleware, type PersistOptions, type Selector, type TimeTravelReturn, globalStore, machine, optimistic, optimisticList, persisted, timeline };

package/dist/patterns.d.ts

@@ -1,4 +1,4 @@
-export { C as ComponentProps, P as PropDef, a as PropSchema, R as RenderProp, V as Validator, b as assertType, c as compose, d as createGuard, e as createSlots, f as defineComponent, g as defineSlottedComponent, h as defineStrictComponent, v as validateProps, i as validators, w as withBoundary, j as withDefaults, k as withProps, l as withWrapper } from './contracts-xo5ckdRP.js';
+export { C as ComponentProps, P as PropDef, a as PropSchema, R as RenderProp, V as Validator, b as assertType, c as compose, d as createGuard, e as createSlots, f as defineComponent, g as defineSlottedComponent, h as defineStrictComponent, v as validateProps, i as validators, w as withBoundary, j as withDefaults, k as withProps, l as withWrapper } from './contracts-ey_Qh8ef.js';
 
 interface MachineConfig<S extends string, E extends string, C extends Record<string, unknown> = Record<string, unknown>> {
     initial: S;
@@ -88,31 +88,65 @@ interface PersistOptions<T = unknown> {
 }
 declare function persisted<T>(key: string, initial: T, options?: PersistOptions<T>): [() => T, (next: T | ((prev: T) => T)) => void];
 
-interface OptimisticAction<T> {
-    optimisticValue: T;
-    revert: T;
-}
 /**
  * optimistic provides optimistic UI updates that can be reverted on failure.
  * The value updates immediately, then reverts if the async operation fails.
  *
- * Note: concurrent optimistic updates on the same value are inherently
- * ambiguous. If multiple operations are in flight, a failed revert restores
- * the value captured before that specific operation started.
+ * Returns a named object with `value`, `pending`, and `update`.
+ *
+ * Concurrent safety: each operation is tagged with a version counter.
+ * A failing operation only reverts if no newer operation has started since,
+ * preventing stale snapshots from overwriting fresher optimistic state.
+ *
+ * @example
+ * ```ts
+ * const likes = optimistic(42);
+ *
+ * button(
+ *   { on: { click: () => likes.update(likes.value() + 1, () => api.like()) } },
+ *   () => `${likes.value()} ${likes.pending() ? "(saving…)" : ""}`,
+ * );
+ * ```
  */
-declare function optimistic<T>(initialValue: T): [() => T, (optimisticValue: T, asyncAction: () => Promise<T>) => Promise<void>];
+declare function optimistic<T>(initialValue: T): {
+    value: () => T;
+    pending: () => boolean;
+    update: (optimisticValue: T, asyncAction: () => Promise<T>) => Promise<void>;
+};
 /**
  * optimisticList provides optimistic updates for array state.
  *
  * Uses functional updates (setItems(current => ...)) for the success path
  * to avoid losing changes made by concurrent operations. The failure path
- * reverts to a snapshot taken before the operation started.
+ * uses a version guard so stale reverts don't overwrite newer state.
+ *
+ * @example
+ * ```ts
+ * const todos = optimisticList<Todo>([]);
+ *
+ * todos.add(
+ *   { id: tempId(), text: "New" },
+ *   async () => api.createTodo("New"),
+ * );
+ *
+ * div([
+ *   () => todos.pending() ? span("Saving…") : null,
+ *   each(() => todos.items(), (t) => div(t().text), { key: (t) => t.id }),
+ * ]);
+ * ```
  */
 declare function optimisticList<T>(initialValue: T[]): {
     items: () => T[];
+    pending: () => boolean;
+    add: (item: T, asyncAction: () => Promise<T>) => Promise<void>;
+    remove: (predicate: (item: T) => boolean, asyncAction: () => Promise<void>) => Promise<void>;
+    update: (predicate: (item: T) => boolean, patch: Partial<T>, asyncAction: () => Promise<T>) => Promise<void>;
+    /** @deprecated Use `add` instead */
     addOptimistic: (item: T, asyncAction: () => Promise<T>) => Promise<void>;
+    /** @deprecated Use `remove` instead */
     removeOptimistic: (predicate: (item: T) => boolean, asyncAction: () => Promise<void>) => Promise<void>;
-    updateOptimistic: (predicate: (item: T) => boolean, update: Partial<T>, asyncAction: () => Promise<T>) => Promise<void>;
+    /** @deprecated Use `update` instead */
+    updateOptimistic: (predicate: (item: T) => boolean, patch: Partial<T>, asyncAction: () => Promise<T>) => Promise<void>;
 };
 
 interface TimeTravelReturn<T> {
@@ -151,4 +185,4 @@ declare function globalStore<S extends Record<string, unknown>, A extends Record
     middleware?: Middleware<S>[];
 }): GlobalStore<S, A>;
 
-export { type GlobalStore, type MachineConfig, type MachineReturn, type Middleware, type OptimisticAction, type PersistOptions, type Selector, type TimeTravelReturn, globalStore, machine, optimistic, optimisticList, persisted, timeline };
+export { type GlobalStore, type MachineConfig, type MachineReturn, type Middleware, type PersistOptions, type Selector, type TimeTravelReturn, globalStore, machine, optimistic, optimisticList, persisted, timeline };

package/dist/patterns.js

@@ -5,7 +5,7 @@ import {
   optimisticList,
   persisted,
   timeline
-} from "./chunk-ZWKZCBO6.js";
+} from "./chunk-VAPYJN4X.js";
 import {
   RenderProp,
   assertType,
@@ -22,11 +22,11 @@ import {
   withProps,
   withWrapper
 } from "./chunk-CNZ35WI2.js";
-import "./chunk-NEKUBFPT.js";
-import "./chunk-CHF5OHIA.js";
+import "./chunk-XHK6BDAJ.js";
+import "./chunk-VQNQZCWJ.js";
 import "./chunk-EUZND3CB.js";
-import "./chunk-WZSPOOER.js";
-import "./chunk-ZD6OAMTH.js";
+import "./chunk-NZIIMDWI.js";
+import "./chunk-K4G4ZQNR.js";
 import "./chunk-5X6PP2UK.js";
 export {
   RenderProp,

package/dist/performance.cjs

@@ -189,6 +189,11 @@ function isDev() {
   return typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 }
 var _isDev = isDev();
+function devAssert(condition, message) {
+  if (_isDev && !condition) {
+    throw new Error(`[Sibu] ${message}`);
+  }
+}
 function devWarn(message) {
   if (_isDev) {
     console.warn(`[Sibu] ${message}`);
@@ -198,6 +203,8 @@ function devWarn(message) {
 // src/reactivity/track.ts
 var _isDev2 = isDev();
 var subscriberStack = new Array(32);
+var stackCapacity = 32;
+var stackTop = -1;
 var currentSubscriber = null;
 var signalSubscribers = /* @__PURE__ */ new WeakMap();
 var SUBS = "__s";
@@ -211,6 +218,24 @@ function safeInvoke(sub) {
     if (_isDev2) devWarn(`Subscriber threw during notification: ${err instanceof Error ? err.message : String(err)}`);
   }
 }
+function track(effectFn, subscriber) {
+  if (!subscriber) subscriber = effectFn;
+  cleanup(subscriber);
+  ++stackTop;
+  if (stackTop >= stackCapacity) {
+    stackCapacity *= 2;
+    subscriberStack.length = stackCapacity;
+  }
+  subscriberStack[stackTop] = subscriber;
+  currentSubscriber = subscriber;
+  try {
+    effectFn();
+  } finally {
+    stackTop--;
+    currentSubscriber = stackTop >= 0 ? subscriberStack[stackTop] : null;
+  }
+  return () => cleanup(subscriber);
+}
 function recordDependency(signal2) {
   if (!currentSubscriber) return;
   const sub = currentSubscriber;
@@ -352,6 +377,69 @@ function notifySubscribers(signal2) {
     notifyDepth--;
   }
 }
+function cleanup(subscriber) {
+  const sub = subscriber;
+  const singleDep = sub._dep;
+  if (singleDep !== void 0) {
+    const subs = singleDep[SUBS];
+    if (subs) {
+      subs.delete(subscriber);
+      if (singleDep.__f === subscriber) {
+        singleDep.__f = void 0;
+      }
+    }
+    sub._dep = void 0;
+    return;
+  }
+  const deps = sub._deps;
+  if (!deps || deps.size === 0) return;
+  for (const signal2 of deps) {
+    const subs = signal2[SUBS];
+    if (subs) {
+      subs.delete(subscriber);
+      if (signal2.__f === subscriber) {
+        signal2.__f = void 0;
+      }
+    }
+  }
+  deps.clear();
+}
+
+// src/core/ssr-context.ts
+var ssrMode = false;
+function isSSR() {
+  return ssrMode;
+}
+
+// src/core/signals/effect.ts
+var _g = globalThis;
+function effect(effectFn, options) {
+  devAssert(typeof effectFn === "function", "effect: argument must be a function.");
+  if (isSSR()) return () => {
+  };
+  const onError = options?.onError;
+  const wrappedFn = onError ? () => {
+    try {
+      effectFn();
+    } catch (err) {
+      onError(err);
+    }
+  } : effectFn;
+  let cleanupHandle = () => {
+  };
+  const subscriber = () => {
+    cleanupHandle();
+    cleanupHandle = track(wrappedFn, subscriber);
+  };
+  cleanupHandle = track(wrappedFn, subscriber);
+  const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook) hook.emit("effect:create", { effectFn });
+  return () => {
+    const h = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+    if (h) h.emit("effect:destroy", { effectFn });
+    cleanupHandle();
+  };
+}
 
 // src/reactivity/batch.ts
 var batchDepth = 0;
@@ -363,7 +451,7 @@ function enqueueBatchedSignal(signal2) {
 }
 
 // src/core/signals/signal.ts
-var _g = globalThis;
+var _g2 = globalThis;
 var _isDev3 = isDev();
 function signal(initial, options) {
   const state = { value: initial };
@@ -384,7 +472,7 @@ function signal(initial, options) {
     if (_isDev3) {
       const oldValue = state.value;
       state.value = newValue;
-      const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+      const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
       if (hook) hook.emit("signal:update", { signal: state, name: debugName, oldValue, newValue });
     } else {
       state.value = newValue;
@@ -394,7 +482,7 @@ function signal(initial, options) {
     }
   }
   if (_isDev3) {
-    const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+    const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
     if (hook) hook.emit("signal:create", { signal: state, name: debugName, getter: get, initial });
   }
   return [get, set];
@@ -406,15 +494,12 @@ function startTransition(callback) {
 }
 function deferredValue(getter) {
   const [deferred, setDeferred] = signal(getter());
-  const sync = () => {
-    const current = getter();
-    setDeferred(current);
-  };
-  scheduleUpdate(Priority.LOW, sync);
-  return () => {
-    scheduleUpdate(Priority.LOW, sync);
-    return deferred();
-  };
+  let latest = deferred();
+  effect(() => {
+    latest = getter();
+    scheduleUpdate(Priority.LOW, () => setDeferred(latest));
+  });
+  return deferred;
 }
 function transitionState() {
   const [isPending, setIsPending] = signal(false);

package/dist/performance.d.cts

@@ -56,6 +56,11 @@ declare function startTransition(callback: () => void): void;
  * The deferred value mirrors the source but updates at LOW priority,
  * allowing the UI to remain responsive while expensive derived state
  * catches up.
+ *
+ * Uses an effect to subscribe to the source getter. When the source
+ * changes, a LOW-priority update is scheduled. The deferred signal
+ * only updates when the scheduler flushes, so fast bursts of source
+ * changes collapse into a single deferred update.
  */
 declare function deferredValue<T>(getter: () => T): () => T;
 /**
@@ -89,7 +94,7 @@ declare function setIdPrefix(prefix: string): void;
  * @example
  * ```ts
  * const id = id();
- * label({ htmlFor: id, nodes: "Name" });
+ * label({ htmlFor: id }, "Name");
  * input({ id, type: "text" });
  * ```
  */

package/dist/performance.d.ts

@@ -56,6 +56,11 @@ declare function startTransition(callback: () => void): void;
  * The deferred value mirrors the source but updates at LOW priority,
  * allowing the UI to remain responsive while expensive derived state
  * catches up.
+ *
+ * Uses an effect to subscribe to the source getter. When the source
+ * changes, a LOW-priority update is scheduled. The deferred signal
+ * only updates when the scheduler flushes, so fast bursts of source
+ * changes collapse into a single deferred update.
  */
 declare function deferredValue<T>(getter: () => T): () => T;
 /**
@@ -89,7 +94,7 @@ declare function setIdPrefix(prefix: string): void;
  * @example
  * ```ts
  * const id = id();
- * label({ htmlFor: id, nodes: "Name" });
+ * label({ htmlFor: id }, "Name");
  * input({ id, type: "text" });
  * ```
  */

package/dist/performance.js

@@ -33,9 +33,11 @@ import {
   transitionState,
   uniqueId,
   yieldToMain
-} from "./chunk-TSOKIX5Z.js";
-import "./chunk-WZSPOOER.js";
-import "./chunk-ZD6OAMTH.js";
+} from "./chunk-BMPL52BF.js";
+import "./chunk-VQNQZCWJ.js";
+import "./chunk-EUZND3CB.js";
+import "./chunk-NZIIMDWI.js";
+import "./chunk-K4G4ZQNR.js";
 import "./chunk-5X6PP2UK.js";
 export {
   DOMPool,