sibujs 4.6.0 → 4.7.0

package/dist/{contracts-DRIuclVT.d.cts → contracts-CTOJXu-x.d.cts}

@@ -1,8 +1,15 @@
+import { C as Component } from './types-CJFViL6Q.cjs';
+
 /**
  * Higher-order component utilities for SibuJS.
  * These functions wrap or compose components to add behavior.
+ *
+ * Each helper is generic over the wrapped component's root type `R`, so a
+ * component returning `div()` keeps its `HTMLDivElement` root and an SVG
+ * component works as well. `R` defaults to `HTMLElement`, the type these
+ * helpers used before, for callers that pass the type arguments explicitly.
  */
-type Component<P = unknown> = (props: P) => HTMLElement;
+
 /**
  * Wraps a component with additional behavior that runs before/after rendering.
  *
@@ -18,7 +25,7 @@ type Component<P = unknown> = (props: P) => HTMLElement;
  * });
  * ```
  */
-declare function withWrapper<P>(WrappedComponent: Component<P>, wrapper: (component: Component<P>, props: P) => HTMLElement): Component<P>;
+declare function withWrapper<P, R extends Node = HTMLElement, W extends Node = R>(WrappedComponent: Component<P, R>, wrapper: (component: Component<P, R>, props: P) => W): Component<P, W>;
 /**
  * Adds default props to a component. Missing props are filled from defaults.
  *
@@ -38,9 +45,9 @@ declare function withWrapper<P>(WrappedComponent: Component<P>, wrapper: (compon
  * optional status.
  */
 type WithDefaultsProps<P, D> = Omit<P, keyof D> & Partial<Pick<P, Extract<keyof P, keyof D>>>;
-declare function withDefaults<P extends object, const D extends Partial<P> = Partial<P>>(component: Component<P>, defaults: D & {
+declare function withDefaults<P extends object, const D extends Partial<P> = Partial<P>, R extends Node = HTMLElement>(component: Component<P, R>, defaults: D & {
     [K in Exclude<keyof D, keyof P>]: never;
-}): Component<WithDefaultsProps<P, D>>;
+}): Component<WithDefaultsProps<P, D>, R>;
 /**
  * Composes multiple HOC wrappers into a single wrapper.
  * Applied from right to left (like function composition).
@@ -54,7 +61,7 @@ declare function withDefaults<P extends object, const D extends Partial<P> = Par
  * const EnhancedPage = enhance(Page);
  * ```
  */
-declare function compose(...wrappers: Array<(component: Component) => Component>): (component: Component) => Component;
+declare function compose<C extends Component<never, Node> = Component<unknown, HTMLElement>>(...wrappers: Array<(component: C) => C>): (component: C) => C;
 
 /**
  * RenderProp implements the render-prop pattern.
@@ -83,6 +90,7 @@ declare function createSlots(slots: Record<string, () => HTMLElement | HTMLEleme
  * Provides utilities to define typed components with prop defaults,
  * nodes slots, and prop mapping — all with full TypeScript inference.
  */
+
 /**
  * Extract the props type from a component defined with defineComponent.
  *
@@ -94,7 +102,7 @@ declare function createSlots(slots: Record<string, () => HTMLElement | HTMLEleme
  * type ButtonProps = ComponentProps<typeof Button>; // { label: string }
  * ```
  */
-type ComponentProps<T> = T extends (props: infer P) => HTMLElement ? P : never;
+type ComponentProps<T> = T extends (props: infer P) => Node ? P : never;
 /**
  * Props that include an optional nodes slot.
  */
@@ -104,11 +112,14 @@ type WithNodes<Props> = Props & {
 /**
  * Define a typed component with props inference, defaults, and a setup function.
  *
- * The `setup` function receives merged props (defaults + provided) and must
- * return an HTMLElement. TypeScript infers the full props type from the generic.
+ * The `setup` function receives merged props (defaults + provided) and
+ * returns the component's root. TypeScript infers the full props type from the
+ * generic. `R` is the root type; it defaults to `HTMLElement` (every HTML tag
+ * factory's result fits) — pass it explicitly for an SVG root
+ * (`defineComponent<Props, SVGSVGElement>`).
  *
  * @param config Component configuration with optional defaults and a setup function
- * @returns A component function that accepts props and returns an HTMLElement
+ * @returns A component function that accepts props and returns the root
  *
  * @example
  * ```ts
@@ -125,10 +136,10 @@ type WithNodes<Props> = Props & {
  * // Usage: Button({ label: 'Click me' }) — TypeScript infers props
  * ```
  */
-declare function defineComponent<Props extends object>(config: {
+declare function defineComponent<Props extends object, R extends Node = HTMLElement>(config: {
     defaults?: Partial<Props>;
-    setup: (props: Props) => HTMLElement;
-}): (props: Props) => HTMLElement;
+    setup: (props: Props) => R;
+}): Component<Props, R>;
 /**
  * Create a component with nodes slot support.
  *
@@ -137,7 +148,7 @@ declare function defineComponent<Props extends object>(config: {
  * wraps arbitrary child content.
  *
  * @param config Component configuration with optional defaults and a setup function
- * @returns A component function that accepts props (including nodes) and returns an HTMLElement
+ * @returns A component function that accepts props (including nodes) and returns the root
  *
  * @example
  * ```ts
@@ -156,10 +167,10 @@ declare function defineComponent<Props extends object>(config: {
  * // Usage: Card({ title: 'Hello', nodes: p('World') })
  * ```
  */
-declare function defineSlottedComponent<Props extends object>(config: {
+declare function defineSlottedComponent<Props extends object, R extends Node = HTMLElement>(config: {
     defaults?: Partial<Props>;
-    setup: (props: WithNodes<Props>) => HTMLElement;
-}): (props: WithNodes<Props>) => HTMLElement;
+    setup: (props: WithNodes<Props>) => R;
+}): Component<WithNodes<Props>, R>;
 /**
  * Higher-order helper to create a component that maps outer props to inner props.
  *
@@ -185,7 +196,7 @@ declare function defineSlottedComponent<Props extends object>(config: {
  * // Usage: SmallIconButton({ icon: 'star', label: 'Favorite' })
  * ```
  */
-declare function withProps<OuterProps extends object, InnerProps extends object>(component: (props: InnerProps) => HTMLElement, mapProps: (outer: OuterProps) => InnerProps): (props: OuterProps) => HTMLElement;
+declare function withProps<OuterProps extends object, InnerProps extends object, R extends Node = HTMLElement>(component: Component<InnerProps, R>, mapProps: (outer: OuterProps) => InnerProps): Component<OuterProps, R>;
 
 /**
  * Runtime prop validation and strict typing contracts for SibuJS.

package/dist/data.cjs

@@ -660,7 +660,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.6.0" : "dev";
+var _runtimeVersion = true ? "4.7.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;
@@ -716,6 +716,14 @@ var getSubscriberCount2 = API.getSubscriberCount;
 var getSubscriberDeps2 = API.getSubscriberDeps;
 var forEachSubscriber2 = API.forEachSubscriber;
 
+// src/core/devtoolsHook.ts
+function emitDevtools(hook, event, payload) {
+  try {
+    hook.emit(event, payload);
+  } catch {
+  }
+}
+
 // src/core/signals/derived.ts
 function derived(getter, options) {
   devAssert(typeof getter === "function", "derived: argument must be a getter function.");
@@ -742,17 +750,17 @@ function derived(getter, options) {
     cs._d = false;
     cs._init = true;
   };
-  track2(() => {
-    let threw = true;
-    try {
+  try {
+    track2(() => {
       cs._v = getter();
       cs._d = false;
       cs._init = true;
-      threw = false;
-    } finally {
-      if (threw) cs._d = true;
-    }
-  }, markDirty);
+    }, markDirty);
+  } catch (err) {
+    disposed = true;
+    cleanup2(markDirty);
+    throw err;
+  }
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
   const validate = () => {
     if (!cs._d || disposed || pendingError !== void 0) return;
@@ -771,7 +779,7 @@ function derived(getter, options) {
       if (disposed) cleanup2(markDirty);
     }
     if (hook && !disposed && !Object.is(oldValue, cs._v)) {
-      hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
+      emitDevtools(hook, "computed:update", { signal: cs, oldValue, newValue: cs._v });
     }
   };
   cs._validate = validate;
@@ -822,7 +830,7 @@ function derived(getter, options) {
       }
     }
   };
-  if (hook) hook.emit("computed:create", { signal: cs, name: debugName, getter: computedGetter });
+  if (hook) emitDevtools(hook, "computed:create", { signal: cs, name: debugName, getter: computedGetter });
   return computedGetter;
 }
 
@@ -991,12 +999,17 @@ function effect(effectFn, options) {
   try {
     retrack2(ctx.bodyFn, ctx.subscriber);
     if (ctx.rerunPending) drainReruns(ctx);
+  } catch (err) {
+    ctx.disposed = true;
+    if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
+    cleanup2(ctx.subscriber);
+    throw err;
   } finally {
     ctx.running = false;
     ctx.rerunPending = false;
   }
   const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-  if (hook) hook.emit("effect:create", { effectFn });
+  if (hook) emitDevtools(hook, "effect:create", { effectFn });
   return () => disposeEffect(ctx);
 }
 
@@ -1083,7 +1096,7 @@ function signal(initial, options) {
       state2.__v++;
       if (DEV) {
         const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-        if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+        if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       }
       if (!enqueueBatchedSignal(state2)) {
         notifySubscribers2(state2);
@@ -1097,7 +1110,7 @@ function signal(initial, options) {
       state2.value = newValue;
       state2.__v++;
       const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-      if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+      if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       if (!enqueueBatchedSignal(state2)) {
         notifySubscribers2(state2);
       }
@@ -1116,7 +1129,7 @@ function signal(initial, options) {
   }
   if (DEV) {
     const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-    if (hook) hook.emit("signal:create", { signal: state2, name: debugName, getter: get, initial });
+    if (hook) emitDevtools(hook, "signal:create", { signal: state2, name: debugName, getter: get, initial });
   }
   return [get, set];
 }
@@ -1238,7 +1251,83 @@ function waitForRetryDelay(delay, signal2) {
   });
 }
 
+// src/data/structuralSharing.ts
+function isPlainObject(value) {
+  if (value === null || typeof value !== "object") return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+function isPlainArray(value) {
+  return Array.isArray(value) && Object.getPrototypeOf(value) === Array.prototype;
+}
+function reconcile(prev, next, depth, walk, newRoot) {
+  if (Object.is(prev, next)) return prev;
+  const arrays = isPlainArray(prev) && isPlainArray(next);
+  if (!arrays && !(isPlainObject(prev) && isPlainObject(next))) return next;
+  if (Object.getPrototypeOf(prev) !== Object.getPrototypeOf(next)) return next;
+  const nextObject = next;
+  const seenAt = walk.path.get(nextObject);
+  if (seenAt !== void 0) {
+    walk.cycleTo = Math.min(walk.cycleTo, seenAt);
+    return next;
+  }
+  const prevRecord = prev;
+  const nextRecord = next;
+  const nextKeys = arrays ? Array.from({ length: next.length }, (_, i) => i) : Object.keys(nextRecord);
+  const prevSize = arrays ? prev.length : Object.keys(prevRecord).length;
+  const copy = arrays ? new Array(nextKeys.length) : Object.create(Object.getPrototypeOf(next));
+  let allFromPrev = prevSize === nextKeys.length;
+  let allFromNext = true;
+  const outerCycleTo = walk.cycleTo;
+  walk.cycleTo = Number.POSITIVE_INFINITY;
+  walk.path.set(nextObject, depth);
+  for (const key of nextKeys) {
+    if (arrays && !Object.hasOwn(nextRecord, key)) {
+      if (Object.hasOwn(prevRecord, key)) allFromPrev = false;
+      continue;
+    }
+    const nextChild = nextRecord[key];
+    const hasPrev = Object.hasOwn(prevRecord, key);
+    const shared = hasPrev ? reconcile(prevRecord[key], nextChild, depth + 1, walk, false) : nextChild;
+    copy[key] = shared;
+    if (!hasPrev || !Object.is(shared, prevRecord[key])) allFromPrev = false;
+    if (!Object.is(shared, nextChild)) allFromNext = false;
+  }
+  walk.path.delete(nextObject);
+  const reached = walk.cycleTo;
+  walk.cycleTo = Math.min(outerCycleTo, reached < depth ? reached : Number.POSITIVE_INFINITY);
+  if (reached <= depth) return next;
+  if (allFromPrev && !newRoot) return prev;
+  if (allFromNext) return next;
+  return copy;
+}
+function applyStructuralSharing(option, prev, next, explicit = false) {
+  if (option === false || prev === void 0) return next;
+  const forceNew = explicit && !Object.is(prev, next);
+  if (typeof option === "function") {
+    const shared = option(prev, next);
+    return forceNew && Object.is(shared, prev) ? next : shared;
+  }
+  return reconcile(prev, next, 0, { path: /* @__PURE__ */ new Map(), cycleTo: Number.POSITIVE_INFINITY }, forceNew);
+}
+
 // src/data/query.ts
+function shareSafely(option, prev, next, explicit) {
+  const shared = untracked2(
+    () => runSelect("query structuralSharing", () => applyStructuralSharing(option, prev, next, explicit))
+  );
+  return shared.ok ? shared.value : next;
+}
+function sharedView(entry) {
+  const raw = entry.data;
+  if (raw === void 0) return void 0;
+  if (entry.hasShared && Object.is(entry.sharedFrom, raw)) return entry.shared;
+  const value = shareSafely(true, entry.hasShared ? entry.shared : void 0, raw, entry.explicit);
+  entry.shared = value;
+  entry.sharedFrom = raw;
+  entry.hasShared = true;
+  return value;
+}
 var globalQueryCache = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.query.cache.v1"), () => /* @__PURE__ */ new Map());
 function getActiveQueryCache() {
   return getRequestScopedCache("query") ?? globalQueryCache;
@@ -1264,7 +1353,11 @@ function getOrCreateEntry(cache, key, initialData) {
       listeners: /* @__PURE__ */ new Set(),
       refetchers: /* @__PURE__ */ new Set(),
       controller: null,
-      generation: 0
+      generation: 0,
+      explicit: false,
+      shared: void 0,
+      sharedFrom: void 0,
+      hasShared: false
     };
     cache.set(key, entry);
   }
@@ -1283,13 +1376,24 @@ function query(key, fetcher, options = {}) {
     onSuccess,
     onError,
     onSettled,
-    select
+    select,
+    structuralSharing = true
   } = options;
   const resolveKey = typeof key === "function" ? key : () => key;
   const cache = getActiveQueryCache();
   const [data, setData] = signal(initialData);
   const [isFetching, setIsFetching] = signal(false);
   const [error, setError] = signal(void 0);
+  const [updatedAt, setUpdatedAt] = signal(0);
+  const [base, setBase] = signal(void 0);
+  let baseEntry = null;
+  let baseValue;
+  let baseExplicit = false;
+  let customEntry = null;
+  let customFrom;
+  let customValue;
+  let selectedEntry = null;
+  let selectedValue;
   let disposed = false;
   let currentKey = null;
   let attachedEntry = null;
@@ -1298,11 +1402,57 @@ function query(key, fetcher, options = {}) {
   const loading = derived(() => isFetching() && data() === void 0);
   const isStale = derived(() => {
     data();
+    updatedAt();
     if (!currentKey) return true;
     const entry = cache.get(currentKey);
     if (!entry || entry.dataUpdatedAt === 0) return true;
     return Date.now() - entry.dataUpdatedAt >= staleTime;
   });
+  function viewOf(entry) {
+    const raw = entry.data;
+    if (raw === void 0) return void 0;
+    if (structuralSharing === false) return raw;
+    if (typeof structuralSharing !== "function") return sharedView(entry);
+    const sameEntry = customEntry === entry;
+    if (sameEntry && Object.is(customFrom, raw)) return customValue;
+    const value = shareSafely(structuralSharing, sameEntry ? customValue : void 0, raw, entry.explicit);
+    customEntry = entry;
+    customFrom = raw;
+    customValue = value;
+    return value;
+  }
+  function commitBase(entry, value) {
+    const changed = !Object.is(value, baseValue);
+    baseEntry = entry;
+    baseValue = value;
+    if (!select) {
+      setData(value);
+      return;
+    }
+    if (!changed) return;
+    baseExplicit = entry?.explicit === true;
+    setBase(value);
+  }
+  const stopSelect = select ? effect(() => {
+    const raw = base();
+    const entry = baseEntry;
+    const explicit = baseExplicit;
+    baseExplicit = false;
+    if (entry === null && selectedEntry === null) return;
+    if (raw === void 0) {
+      selectedEntry = entry;
+      selectedValue = void 0;
+      setData(void 0);
+      return;
+    }
+    const selected = runSelect("query select", () => select(raw));
+    if (!selected.ok) return;
+    const prev = selectedEntry === entry ? selectedValue : void 0;
+    const value = shareSafely(structuralSharing, prev, selected.value, explicit);
+    selectedEntry = entry;
+    selectedValue = value;
+    setData(value);
+  }) : null;
   function detachFromEntry() {
     const entry = attachedEntry;
     const key2 = attachedKey;
@@ -1361,7 +1511,7 @@ function query(key, fetcher, options = {}) {
             const settledError = entry.error;
             runCallback("query onError", () => onError?.(settledError));
           } else if (entry.data !== void 0) {
-            const settledData = entry.data;
+            const settledData = viewOf(entry);
             runCallback("query onSuccess", () => onSuccess?.(settledData));
           }
           runCallback("query onSettled", () => onSettled?.());
@@ -1392,17 +1542,14 @@ function query(key, fetcher, options = {}) {
       entry.promise = null;
       entry.controller = null;
       entry.data = result;
+      entry.explicit = false;
       entry.dataUpdatedAt = Date.now();
       entry.error = void 0;
       notifyListeners(entry.listeners, "query cache listener");
       if (disposed || currentKey !== key2) return;
-      const selected = runSelect("query select", () => select ? select(result) : result);
-      batch(() => {
-        if (selected.ok) setData(selected.value);
-        setIsFetching(false);
-        setError(void 0);
-      });
-      runCallback("query onSuccess", () => onSuccess?.(result));
+      if (!entry.listeners.has(onCacheUpdate)) onCacheUpdate();
+      const committedResult = viewOf(entry);
+      runCallback("query onSuccess", () => onSuccess?.(committedResult));
     } catch (err) {
       if (entry.generation !== generation) return;
       entry.promise = null;
@@ -1432,18 +1579,19 @@ function query(key, fetcher, options = {}) {
     const entry = cache.get(currentKey);
     if (!entry) {
       batch(() => {
-        setData(void 0);
+        commitBase(null, void 0);
         setError(void 0);
         setIsFetching(false);
+        setUpdatedAt(0);
       });
       return;
     }
-    const raw = entry.data;
-    const selected = raw !== void 0 && select ? runSelect("query select", () => select(raw)) : { ok: true, value: raw };
+    const view = viewOf(entry);
     batch(() => {
-      if (selected.ok) setData(selected.value);
+      commitBase(entry, view);
       setError(entry.error);
       if (!entry.promise) setIsFetching(false);
+      setUpdatedAt(entry.dataUpdatedAt);
     });
   }
   const effectCleanup = effect(() => {
@@ -1453,11 +1601,11 @@ function query(key, fetcher, options = {}) {
     const entry = getOrCreateEntry(cache, key2, initialData);
     attachToEntry(entry, key2);
     if (entry.data !== void 0) {
-      const raw = entry.data;
-      const selected = runSelect("query select", () => select ? select(raw) : raw);
+      const view = viewOf(entry);
       batch(() => {
-        if (selected.ok) setData(selected.value);
+        commitBase(entry, view);
         setError(entry.error);
+        setUpdatedAt(entry.dataUpdatedAt);
       });
     }
     if (!keyChanged && currentKey === key2 && entry.data !== void 0) {
@@ -1495,6 +1643,7 @@ function query(key, fetcher, options = {}) {
     if (disposed) return;
     disposed = true;
     effectCleanup();
+    stopSelect?.();
     loading.dispose();
     isStale.dispose();
     if (intervalTimer) clearInterval(intervalTimer);
@@ -1526,13 +1675,15 @@ function invalidateQueries(keyOrPredicate) {
   }
 }
 function getQueryData(key) {
-  return getActiveQueryCache().get(key)?.data;
+  const entry = getActiveQueryCache().get(key);
+  return entry ? sharedView(entry) : void 0;
 }
 function setQueryData(key, data) {
   const entry = getActiveQueryCache().get(key);
   if (!entry) return;
-  const newData = typeof data === "function" ? data(entry.data) : data;
+  const newData = typeof data === "function" ? data(sharedView(entry)) : data;
   entry.data = newData;
+  entry.explicit = true;
   entry.dataUpdatedAt = Date.now();
   notifyListeners(entry.listeners, "query cache listener");
 }
@@ -1916,6 +2067,15 @@ function resource(sourceOrFetcher, fetcherOrOptions, maybeOptions) {
   const [loading, setLoading] = signal(false);
   const [error, setError] = signal(void 0);
   let currentData = options.initialValue;
+  function commitData(next, explicit) {
+    const sharing = options.structuralSharing ?? true;
+    const shared = untracked2(
+      () => runSelect("resource structuralSharing", () => applyStructuralSharing(sharing, currentData, next, explicit))
+    );
+    currentData = shared.ok ? shared.value : next;
+    setData(currentData);
+    return currentData;
+  }
   let abortController = null;
   let disposed = false;
   let effectCleanup = null;
@@ -1935,12 +2095,12 @@ function resource(sourceOrFetcher, fetcherOrOptions, maybeOptions) {
     try {
       const result = await withRetry(() => fetcher(sourceValue, { signal: signal2, prev }), options.retry, void 0, signal2);
       if (version !== fetchVersion || disposed) return;
-      currentData = result;
+      let committed = result;
       batch(() => {
-        setData(result);
+        committed = commitData(result, false);
         setLoading(false);
       });
-      runCallback("resource onSuccess", () => options.onSuccess?.(result));
+      runCallback("resource onSuccess", () => options.onSuccess?.(committed));
     } catch (err) {
       if (version !== fetchVersion || disposed) return;
       if (isAbortError(err)) {
@@ -1974,8 +2134,7 @@ function resource(sourceOrFetcher, fetcherOrOptions, maybeOptions) {
     refetch: () => doFetch(source ? source() : void 0),
     mutate: (value) => {
       const newValue = typeof value === "function" ? value(currentData) : value;
-      currentData = newValue;
-      setData(newValue);
+      commitData(newValue, true);
     },
     abort: () => abortController?.abort(),
     dispose: () => {