sibujs 4.6.0 → 4.7.0

package/dist/{chunk-7GQCWFOE.js → chunk-XYV3EDB7.js}

@@ -135,40 +135,40 @@ import {
   use,
   var_,
   video
-} from "./chunk-JSXPZCET.js";
+} from "./chunk-7LUJQAOJ.js";
 import {
   trustHTML
 } from "./chunk-HURREPU2.js";
 import {
   watch
-} from "./chunk-UZQ6ALFS.js";
+} from "./chunk-SLM3IA34.js";
 import {
   __resetIdCounter,
   createId,
   domBinding
-} from "./chunk-3ISI6ACU.js";
+} from "./chunk-BC2SECJD.js";
 import {
   SVG_NS,
   bindChildNode,
   captureFocusWithin,
   restoreFocusWithin,
   tagFactory
-} from "./chunk-VVWPJ543.js";
+} from "./chunk-UOL2ECCS.js";
 import {
   bindAttribute,
   bindDynamic,
   setSafeAttribute
-} from "./chunk-47M47FOM.js";
+} from "./chunk-FNJXNGYZ.js";
 import {
   derived
-} from "./chunk-QE4TTDU3.js";
+} from "./chunk-RUSSKG6G.js";
 import {
   globalSingleton
 } from "./chunk-7ZHH77QA.js";
 import {
   effect,
   on
-} from "./chunk-XC4MEKGA.js";
+} from "./chunk-WEQ3DMVL.js";
 import {
   disableSSR,
   enableSSR,
@@ -187,8 +187,9 @@ import {
   external,
   isBatching,
   signal
-} from "./chunk-D33YTSX5.js";
+} from "./chunk-FQRUXCEE.js";
 import {
+  emitDevtools,
   notifySubscribers,
   reactiveBinding,
   recordDependency,
@@ -198,7 +199,7 @@ import {
   suspendTracking,
   track,
   untracked
-} from "./chunk-5Q4R7HCL.js";
+} from "./chunk-JWKYU5GV.js";
 import {
   DEV,
   MAX_DRAIN_TEARDOWNS,
@@ -216,7 +217,8 @@ import {
   reportDrainRunaway,
   reportError,
   setRuntimeErrorHandler,
-  unregisterDisposer
+  unregisterDisposer,
+  withDisposerRollback
 } from "./chunk-NYNYSPK7.js";
 
 // index.ts
@@ -557,10 +559,13 @@ function safeCall(cb, hookName) {
     return void 0;
   }
 }
-function runMountCallback(callback, hookName, element) {
+function runMountCallback(callback, hookName, element, isDisposed) {
   const cleanup = safeCall(callback, hookName);
-  if (typeof cleanup === "function" && element) {
-    registerDisposer(element, cleanup);
+  if (typeof cleanup !== "function") return;
+  if (isDisposed() || !element.isConnected) {
+    safeCall(cleanup, "onUnmount");
+  } else {
+    onUnmount(cleanup, element);
   }
 }
 var mountWatchers = /* @__PURE__ */ new WeakMap();
@@ -722,25 +727,26 @@ function onMount(callback, element) {
   if (typeof document === "undefined") return;
   if (element) {
     let disposed = false;
+    const isDisposed = () => disposed;
     registerDisposer(element, () => {
       disposed = true;
     });
     if (element.isConnected) {
       queueMicrotask(() => {
         if (disposed) return;
-        runMountCallback(callback, "onMount", element);
+        runMountCallback(callback, "onMount", element, isDisposed);
       });
       return;
     }
     queueMicrotask(() => {
       if (disposed) return;
       if (element.isConnected) {
-        runMountCallback(callback, "onMount", element);
+        runMountCallback(callback, "onMount", element, isDisposed);
         return;
       }
       const unregister = registerMountWatcher(element, () => {
         if (disposed) return;
-        runMountCallback(callback, "onMount", element);
+        runMountCallback(callback, "onMount", element, isDisposed);
       });
       registerDisposer(element, unregister);
     });
@@ -1574,36 +1580,34 @@ function Loading(props = {}) {
   const { text: text2, variant = "spinner", size = "md" } = props;
   const sizeClass = size !== "md" ? ` sibu-loading-${size}` : "";
   if (variant === "dots") {
-    return div({
+    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": text2 ? void 0 : "Loading"
+      },
+      [
+        div({ class: "sibu-loading-dots" }, [
+          span({ class: "sibu-loading-dot" }),
+          span({ class: "sibu-loading-dot" }),
+          span({ class: "sibu-loading-dot" })
+        ]),
+        text2 ? span({ class: "sibu-loading-text" }, text2) : null
+      ]
+    );
+  }
+  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": text2 ? void 0 : "Loading",
-      nodes: [
-        div({
-          class: "sibu-loading-dots",
-          nodes: [
-            span({ class: "sibu-loading-dot" }),
-            span({ class: "sibu-loading-dot" }),
-            span({ class: "sibu-loading-dot" })
-          ]
-        }),
-        text2 ? span({ class: "sibu-loading-text", nodes: text2 }) : null
-      ].filter(Boolean)
-    });
-  }
-  return div({
-    class: `sibu-loading${sizeClass}`,
-    role: "status",
-    "aria-live": "polite",
-    "aria-label": text2 ? void 0 : "Loading",
-    nodes: [
-      div({ class: "sibu-loading-spinner" }),
-      text2 ? span({ class: "sibu-loading-text", nodes: text2 }) : null
-    ].filter(Boolean)
-  });
+      "aria-label": text2 ? void 0 : "Loading"
+    },
+    [div({ class: "sibu-loading-spinner" }), text2 ? span({ class: "sibu-loading-text" }, text2) : null]
+  );
 }
 
 // src/core/rendering/action.ts
@@ -1714,8 +1718,9 @@ var globalErrorHandler = null;
 function catchError(fn, onError) {
   try {
     const result = fn();
-    if (result && typeof result.then === "function") {
-      result.catch((err) => {
+    const adopted = adoptThenable(result);
+    if (adopted) {
+      adopted.then(void 0, (err) => {
         if (onError) {
           onError(err, "async");
         } else if (globalErrorHandler) {
@@ -1839,7 +1844,7 @@ function when(condition, thenBranch, elseBranch) {
     const show2 = condition();
     const parent = anchor.parentNode;
     if (!parent) return;
-    if (initialized && show2 === lastCondition) return;
+    if (initialized && Object.is(show2, lastCondition)) return;
     lastCondition = show2;
     const focused = currentNode ? captureFocusWithin([currentNode]) : null;
     if (currentNode?.parentNode) {
@@ -1848,7 +1853,7 @@ function when(condition, thenBranch, elseBranch) {
       currentNode = null;
     }
     const branch = show2 ? thenBranch : elseBranch !== void 0 ? elseBranch : null;
-    const attached = attachBranch(parent, anchor, branch, attachedOnce, "when");
+    const attached = untracked(() => attachBranch(parent, anchor, branch, attachedOnce, "when"));
     currentNode = attached.node;
     currentNodeOwned = attached.owned;
     restoreFocusWithin(focused, currentNode ? [currentNode] : [], "when");
@@ -1888,7 +1893,7 @@ function match(value, cases, fallback) {
       currentNode = null;
     }
     const branch = Object.hasOwn(cases, key) ? cases[key] : fallback;
-    const attached = attachBranch(parent, anchor, branch ?? null, attachedOnce, "match");
+    const attached = untracked(() => attachBranch(parent, anchor, branch ?? null, attachedOnce, "match"));
     currentNode = attached.node;
     currentNodeOwned = attached.owned;
     restoreFocusWithin(focused, currentNode ? [currentNode] : [], "match");
@@ -1912,11 +1917,17 @@ var componentRegistry = globalSingleton(
   /* @__PURE__ */ Symbol.for("sibujs.components.registry.v1"),
   () => /* @__PURE__ */ new Map()
 );
+var registryVersion = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.components.registryVersion.v1"), () => signal(0));
+function bumpRegistry() {
+  const [read, write] = registryVersion;
+  write(untracked(read) + 1);
+}
 function registerComponent(name, component) {
   componentRegistry.set(name, component);
+  bumpRegistry();
 }
 function unregisterComponent(name) {
-  componentRegistry.delete(name);
+  if (componentRegistry.delete(name)) bumpRegistry();
 }
 function resolveComponent(name) {
   const component = componentRegistry.get(name);
@@ -1927,14 +1938,21 @@ function resolveComponent(name) {
 }
 function DynamicComponent(is) {
   const container = div({ class: "sibu-dynamic" });
+  const NONE = {};
+  let shown = NONE;
   function render() {
     const target = is();
-    let el;
+    let component;
     if (typeof target === "function") {
-      el = target();
+      component = target;
     } else {
-      el = resolveComponent(target);
+      registryVersion[0]();
+      component = componentRegistry.get(target);
     }
+    const next = component ?? `missing:${target}`;
+    if (next === shown) return;
+    const el = untracked(() => component ? component() : div(`[Component "${target}" not found]`));
+    shown = next;
     replaceChildrenSafely(container, el);
   }
   const untrack = track(render);
@@ -2198,27 +2216,26 @@ function Fragment(nodes) {
     if (Array.isArray(child)) {
       for (const nested of child) {
         if (nested == null || typeof nested === "boolean") continue;
-        frag.appendChild(resolveChild(nested));
+        appendChild(frag, nested);
       }
     } else {
-      frag.appendChild(resolveChild(child));
+      appendChild(frag, child);
     }
   }
   return frag;
 }
-function resolveChild(child) {
-  if (child == null) {
-    return document.createTextNode("");
-  }
+function appendChild(frag, child) {
   if (child instanceof Node) {
-    return child;
+    frag.appendChild(child);
+    return;
   }
   if (typeof child === "function") {
-    const result = child();
-    if (result instanceof Node) return result;
-    return document.createTextNode(String(result ?? ""));
+    const placeholder = document.createComment("");
+    frag.appendChild(placeholder);
+    registerDisposer(placeholder, bindChildNode(placeholder, child));
+    return;
   }
-  return document.createTextNode(String(child));
+  frag.appendChild(document.createTextNode(String(child)));
 }
 
 // src/core/rendering/htm.ts
@@ -2688,25 +2705,77 @@ function mount(component, container) {
     typeof component === "function" || component instanceof Node,
     "mount: first argument must be a component function or a DOM Node."
   );
-  const startTime = typeof performance !== "undefined" ? performance.now() : 0;
-  const node = typeof component === "function" ? component() : component;
-  const duration = typeof performance !== "undefined" ? performance.now() - startTime : 0;
-  container.appendChild(node);
-  const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-  if (hook) {
-    hook.emit("app:init", { rootElement: node, container, duration });
+  const now = () => typeof performance !== "undefined" ? performance.now() : 0;
+  const startTime = now();
+  let range = null;
+  const attach = (built) => {
+    if (built instanceof DocumentFragment) {
+      const start = document.createComment("");
+      const end = document.createComment("");
+      built.insertBefore(start, built.firstChild);
+      built.appendChild(end);
+      range = { start, end };
+    }
+    container.appendChild(built);
+  };
+  let node;
+  if (typeof component === "function") {
+    node = withDisposerRollback(() => {
+      const built = component();
+      attach(built);
+      return built;
+    });
+  } else {
+    node = component;
+    attach(node);
   }
+  const duration = now() - startTime;
+  const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook) emitDevtools(hook, "app:init", { rootElement: node, container, duration });
+  const mounted = range;
   return {
     node,
     unmount() {
-      if (hook) hook.emit("app:unmount", { rootElement: node });
-      dispose(node);
-      if (node.parentNode) {
-        node.parentNode.removeChild(node);
+      if (hook) emitDevtools(hook, "app:unmount", { rootElement: node });
+      if (mounted) {
+        unmountRange(mounted.start, mounted.end);
+        return;
       }
+      dispose(node);
+      node.parentNode?.removeChild(node);
     }
   };
 }
+function unmountRange(start, end) {
+  const parent = start.parentNode;
+  if (!parent && !end.parentNode) return;
+  let budget = MAX_DRAIN_TEARDOWNS;
+  for (let n = start.nextSibling; n && n !== end; n = n.nextSibling) budget++;
+  let before = start;
+  let after = null;
+  let intact = true;
+  for (; ; ) {
+    if (start.parentNode !== parent || end.parentNode !== parent) intact = false;
+    else if (start.previousSibling !== before || end.nextSibling !== after) {
+      before = start.previousSibling;
+      after = end.nextSibling;
+      intact = !!(start.compareDocumentPosition(end) & 4);
+    }
+    const n = start.nextSibling;
+    if (!intact || n === end) break;
+    if (budget-- <= 0) {
+      reportDrainRunaway("mount", MAX_DRAIN_TEARDOWNS, 1);
+      return;
+    }
+    dispose(n);
+    if (n.parentNode === parent) parent.removeChild(n);
+  }
+  if (!intact) {
+    reportError(new Error("[SibuJS mount] fragment markers lost"), { phase: "cleanup", name: "mount" });
+  }
+  start.parentNode?.removeChild(start);
+  end.parentNode?.removeChild(end);
+}
 
 // src/core/rendering/portal.ts
 function Portal(nodes, target) {

package/dist/{chunk-AIF3Z2T7.js → chunk-XZR4PXRE.js}

@@ -4,14 +4,14 @@ import {
 } from "./chunk-H3SRKIYX.js";
 import {
   derived
-} from "./chunk-QE4TTDU3.js";
+} from "./chunk-RUSSKG6G.js";
 import {
   effect
-} from "./chunk-XC4MEKGA.js";
+} from "./chunk-WEQ3DMVL.js";
 import {
   batch,
   signal
-} from "./chunk-D33YTSX5.js";
+} from "./chunk-FQRUXCEE.js";
 import {
   DEV,
   devWarn,

package/dist/{chunk-HYXDKS4N.js → chunk-Z3OHK6QT.js}

@@ -1,21 +1,21 @@
 import {
   watch
-} from "./chunk-UZQ6ALFS.js";
+} from "./chunk-SLM3IA34.js";
 import {
   createId,
   domBinding,
   idSegment
-} from "./chunk-3ISI6ACU.js";
+} from "./chunk-BC2SECJD.js";
 import {
   derived
-} from "./chunk-QE4TTDU3.js";
+} from "./chunk-RUSSKG6G.js";
 import {
   stripHtml
 } from "./chunk-2INLLLMZ.js";
 import {
   batch,
   signal
-} from "./chunk-D33YTSX5.js";
+} from "./chunk-FQRUXCEE.js";
 
 // src/widgets/Combobox.ts
 var boundComboboxes = /* @__PURE__ */ new WeakMap();

package/dist/{chunk-OXUY2A6L.js → chunk-ZVL7TY4K.js}

@@ -9,11 +9,11 @@ import {
 } from "./chunk-7ZHH77QA.js";
 import {
   effect
-} from "./chunk-XC4MEKGA.js";
+} from "./chunk-WEQ3DMVL.js";
 import {
   batch,
   signal
-} from "./chunk-D33YTSX5.js";
+} from "./chunk-FQRUXCEE.js";
 import {
   reportError
 } from "./chunk-NYNYSPK7.js";

package/dist/{contracts-DRIuclVT.d.ts → contracts-CLqzJnOV.d.ts}

@@ -1,8 +1,15 @@
+import { C as Component } from './types-CJFViL6Q.js';
+
 /**
  * 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.