sibujs 4.13.0 → 4.14.0

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.ts
 var index_exports = {};
 __export(index_exports, {
+  ClientOnly: () => ClientOnly,
   DynamicComponent: () => DynamicComponent,
   ErrorBoundary: () => ErrorBoundary,
   ErrorDisplay: () => ErrorDisplay,
@@ -125,7 +126,9 @@ __export(index_exports, {
   input: () => input,
   ins: () => ins,
   isBatching: () => isBatching,
+  isClient: () => isClient,
   isSSR: () => isSSR,
+  isServer: () => isServer,
   kbd: () => kbd,
   label: () => label,
   lazy: () => lazy,
@@ -199,7 +202,7 @@ __export(index_exports, {
   setRuntimeErrorHandler: () => setRuntimeErrorHandler,
   show: () => show,
   signal: () => signal,
-  slot: () => slot,
+  slot: () => slot2,
   small: () => small,
   source: () => source,
   span: () => span,
@@ -308,12 +311,12 @@ function claimedByBoundary(error, context2) {
 }
 function resolveEventTarget(node) {
   const ELEMENT_NODE = 1;
-  let current = node;
-  while (current) {
-    if (current.nodeType === ELEMENT_NODE && typeof current.dispatchEvent === "function") {
-      return current;
+  let current2 = node;
+  while (current2) {
+    if (current2.nodeType === ELEMENT_NODE && typeof current2.dispatchEvent === "function") {
+      return current2;
     }
-    current = current.parentNode;
+    current2 = current2.parentNode;
   }
   const self = node;
   return typeof self.dispatchEvent === "function" ? self : null;
@@ -322,10 +325,21 @@ function defaultReport(error, context2) {
   if (typeof console === "undefined") return;
   console.error(`[SibuJS] Uncaught error during ${describe(context2)}: ${error.message}`, error);
 }
+function requestErrorSink() {
+  const shared = globalThis[/* @__PURE__ */ Symbol.for("sibujs.ssr.v1")];
+  if (!shared) return void 0;
+  const store2 = shared.als ? shared.als.getStore() : shared.fallbackDepth > 0 ? shared.fallbackStore : void 0;
+  return store2?.errors;
+}
 function reportError(error, context2) {
   const err = normalizeError(error);
   untrackedRun(() => {
     if (claimedByBoundary(err, context2)) return;
+    const sink = requestErrorSink();
+    if (sink) {
+      sink.push({ error: err, context: context2 });
+      return;
+    }
     const s2 = state();
     const handler = s2.handler;
     if (handler && s2.handlerDepth === 0) {
@@ -373,6 +387,78 @@ function devWarn(message) {
   }
 }
 
+// src/core/rendering/adoptScope.ts
+var current = null;
+function inAdoptScope() {
+  return current?.s.on === true;
+}
+function currentSink() {
+  return current?.s.on ? current.s : null;
+}
+function createScopedElement(tag, ns) {
+  const c = current;
+  if (c?.s.on) {
+    const el = c.s.el(tag, ns, c.p + (c.n++).toString(36));
+    if (el) return el;
+  }
+  return ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+}
+function captureScope() {
+  const c = current;
+  return c?.s.on ? { p: `${c.p}${(c.n++).toString(36)}.`, n: 0, s: c.s } : null;
+}
+function keyedScope(scope, key) {
+  if (!scope?.s.on) return null;
+  const type = typeof key;
+  if (type !== "string" && type !== "number") {
+    throw new TypeError(`[SibuJS] adopt: a key must be a string or a number, not ${type}`);
+  }
+  const text2 = String(key).replace(/[^\w-]/g, (c) => `~${c.charCodeAt(0).toString(16).padStart(4, "0")}`);
+  return { p: `${scope.p}${type === "string" ? "_" : "-"}${text2}.`, n: 0, s: scope.s };
+}
+function inScope(scope, fn) {
+  const prev = current;
+  if (!scope && !prev) return fn();
+  current = scope?.s.on ? { p: scope.p, n: 0, s: scope.s } : null;
+  try {
+    return fn();
+  } finally {
+    current = prev;
+  }
+}
+
+// src/core/rendering/hydrationHooks.ts
+var _a;
+var slot = globalThis[_a = /* @__PURE__ */ Symbol.for("sibujs.hydration.v2")] ?? (globalThis[_a] = { a: /* @__PURE__ */ new Set(), c: null });
+function isHydrating() {
+  return slot.a.size > 0;
+}
+function ownSession() {
+  return currentSink()?.h ?? slot.c;
+}
+function hydrationOwners() {
+  const own = ownSession();
+  return own ? own.open ? [own] : [] : Array.from(slot.a);
+}
+function afterHydration(fn) {
+  const owners = hydrationOwners();
+  let left = owners.length;
+  const once = () => {
+    if (--left < 1) fn();
+  };
+  if (left) for (const s2 of owners) s2.done.push(once);
+  else fn();
+}
+function notify(session) {
+  for (const wake of Array.from(session.wake)) wake();
+}
+function holdHydration(sessions, entry) {
+  for (const s2 of sessions) s2.pending.add(entry);
+  return () => {
+    for (const s2 of sessions) if (s2.pending.delete(entry)) notify(s2);
+  };
+}
+
 // src/core/rendering/dispose.ts
 var elementDisposers = /* @__PURE__ */ new WeakMap();
 var MAX_DRAIN_TEARDOWNS = 1e4;
@@ -469,9 +555,9 @@ function dispose(node) {
   const stack = [node];
   const order = [];
   while (stack.length > 0) {
-    const current = stack.pop();
-    order.push(current);
-    const children = Array.from(current.childNodes);
+    const current2 = stack.pop();
+    order.push(current2);
+    const children = Array.from(current2.childNodes);
     for (let i2 = 0; i2 < children.length; i2++) {
       stack.push(children[i2]);
     }
@@ -510,13 +596,27 @@ function disposeNodeOwn(node) {
   }
 }
 function replaceChildrenSafely(parent, ...next) {
+  if (isHydrating() && next.length > 0 && next[0] === parent.firstChild) {
+    let ok = true;
+    for (let i2 = 1; i2 < next.length && ok; i2++) ok = next[i2 - 1].nextSibling === next[i2];
+    if (ok) {
+      let rest = next[next.length - 1].nextSibling;
+      while (rest) {
+        const following = rest.nextSibling;
+        dispose(rest);
+        parent.removeChild(rest);
+        rest = following;
+      }
+      return;
+    }
+  }
   for (let i2 = 0; i2 < next.length; i2++) {
     const node = next[i2];
     node.parentNode?.removeChild(node);
   }
-  const current = Array.from(parent.childNodes);
-  for (let i2 = 0; i2 < current.length; i2++) {
-    dispose(current[i2]);
+  const current2 = Array.from(parent.childNodes);
+  for (let i2 = 0; i2 < current2.length; i2++) {
+    dispose(current2[i2]);
   }
   parent.replaceChildren(...next);
 }
@@ -588,19 +688,19 @@ function sanitizeSrcset(value) {
     if (url.endsWith(",")) {
       url = url.replace(/,+$/, "");
     } else {
-      let current = "";
+      let current2 = "";
       let inParens = false;
       while (i2 < n) {
         const ch = input2[i2];
         if (inParens) {
-          current += ch;
+          current2 += ch;
           if (ch === ")") inParens = false;
           i2++;
           continue;
         }
         if (isSrcsetWhitespace(ch)) {
-          if (current) descriptors.push(current);
-          current = "";
+          if (current2) descriptors.push(current2);
+          current2 = "";
           i2++;
           continue;
         }
@@ -609,10 +709,10 @@ function sanitizeSrcset(value) {
           break;
         }
         if (ch === "(") inParens = true;
-        current += ch;
+        current2 += ch;
         i2++;
       }
-      if (current) descriptors.push(current);
+      if (current2) descriptors.push(current2);
     }
     if (url === "") continue;
     if (descriptors.length > 1) continue;
@@ -1185,8 +1285,8 @@ function commitSafeAttribute(el, name, value, options) {
     else el.removeAttribute(name);
     return true;
   }
-  const current = ns ? el.getAttributeNS(ns, localName) : el.getAttribute(name);
-  if (current === safe) return true;
+  const current2 = ns ? el.getAttributeNS(ns, localName) : el.getAttribute(name);
+  if (current2 === safe) return true;
   if (ns) el.setAttributeNS(ns, name, safe);
   else el.setAttribute(name, safe);
   return true;
@@ -1774,7 +1874,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.13.0" : "dev";
+var _runtimeVersion = true ? "4.14.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g2 = globalThis;
@@ -1995,10 +2095,11 @@ function restoreFocusWithin(snapshot, nodes, where, policy) {
 // src/reactivity/bindChildNode.ts
 function bindChildNode(placeholder, getter) {
   let lastNodes = [];
+  const scope = captureScope();
   function commit() {
     let result;
     try {
-      result = getter();
+      result = inScope(scope, getter);
     } catch (err) {
       reportError(err, { phase: "binding", name: "bindChildNode", node: placeholder });
       return;
@@ -2257,7 +2358,7 @@ function tagFactory(tag, ns) {
       throw new Error(`tagFactory: refusing to create <${tag}> \u2014 tag is blocked for security reasons.`);
     }
     if (typeof document === "undefined") noDocument();
-    const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+    const el = createScopedElement(tag, ns);
     if (first === void 0) return el;
     if (typeof first === "string") {
       if (second !== void 0) {
@@ -2467,7 +2568,7 @@ var details = tagFactory("details");
 var dialog = tagFactory("dialog");
 var menu = tagFactory("menu");
 var summary = tagFactory("summary");
-var slot = tagFactory("slot");
+var slot2 = tagFactory("slot");
 var template = tagFactory("template");
 var base = tagFactory("base");
 var link = tagFactory("link");
@@ -2498,6 +2599,152 @@ var font = tagFactory("font");
 var marquee = tagFactory("marquee");
 var customElement = (tagName) => tagFactory(tagName);
 
+// src/core/rendering/streamBoundary.ts
+var _a2;
+var slot3 = globalThis[_a2 = /* @__PURE__ */ Symbol.for("sibujs.streamBoundary.v1")] ?? (globalThis[_a2] = { hook: null, current: null });
+function openBoundary(container) {
+  return slot3.hook ? slot3.hook(container) : null;
+}
+function currentBoundary() {
+  return slot3.current;
+}
+
+// src/core/ssr-context.ts
+var SSR_KEY = /* @__PURE__ */ Symbol.for("sibujs.ssr.v1");
+function detectSSRShared() {
+  let detected = null;
+  try {
+    if (typeof process !== "undefined" && process.versions && process.versions.node) {
+      let mod = null;
+      const getBuiltin = process.getBuiltinModule;
+      if (typeof getBuiltin === "function") {
+        mod = getBuiltin("node:async_hooks");
+      } else if (typeof require === "function") {
+        mod = require("async_hooks");
+      }
+      if (mod) detected = new mod.AsyncLocalStorage();
+    }
+    const globalAls = globalThis.AsyncLocalStorage;
+    if (!detected && typeof globalAls === "function") detected = new globalAls();
+  } catch {
+    detected = null;
+  }
+  return {
+    als: detected,
+    fallbackStore: { ssr: false, suspenseIdCounter: 0, locale: void 0 },
+    fallbackDepth: 0
+  };
+}
+var _shared = globalThis[SSR_KEY] ?? (globalThis[SSR_KEY] = detectSSRShared());
+var als = _shared.als;
+var fallbackStore = _shared.fallbackStore;
+_shared.fallbackDepth ?? (_shared.fallbackDepth = 0);
+var _alsWarned = false;
+function warnMissingAsyncLocalStorage() {
+  if (_alsWarned || als) return;
+  const isNode = typeof process !== "undefined" && !!process.versions?.node;
+  if (!isNode) return;
+  _alsWarned = true;
+  const version = process.versions.node;
+  devWarn(
+    `SSR request isolation is UNAVAILABLE on this runtime (Node ${version}). AsyncLocalStorage could not be loaded, so concurrent requests share one SSR store: request state and the query cache can bleed between them. Node >= 22.3 is required for isolated SSR under ESM; the CommonJS build works on older versions. A fully synchronous render is unaffected.`
+  );
+}
+function getSSRStore() {
+  if (als) {
+    const s2 = als.getStore();
+    if (s2) return s2;
+  }
+  return fallbackStore;
+}
+function getRequestStore() {
+  if (als) return als.getStore() ?? null;
+  return _shared.fallbackDepth > 0 ? fallbackStore : null;
+}
+function isSSR() {
+  return getSSRStore().ssr;
+}
+function getRequestScopedCache(name) {
+  if (!isSSR()) return null;
+  const store2 = getSSRStore();
+  const caches = store2.caches ?? (store2.caches = /* @__PURE__ */ new Map());
+  let c = caches.get(name);
+  if (!c) {
+    c = /* @__PURE__ */ new Map();
+    caches.set(name, c);
+  }
+  return c;
+}
+var PRERENDER_HOST = /* @__PURE__ */ Symbol.for("sibujs.prerender.v1");
+function isServer() {
+  return getSSRStore().ssr || globalThis[PRERENDER_HOST] !== void 0;
+}
+function isClient() {
+  return !isServer();
+}
+function enableSSR() {
+  getSSRStore().ssr = true;
+}
+function disableSSR() {
+  getSSRStore().ssr = false;
+}
+function runInSSRContext(fn) {
+  const store2 = {
+    ssr: true,
+    suspenseIdCounter: 0,
+    idCounter: 0,
+    locale: void 0,
+    pending: /* @__PURE__ */ new Set(),
+    wake: null
+  };
+  if (als) {
+    return als.run(store2, fn);
+  }
+  warnMissingAsyncLocalStorage();
+  const prev = { ...fallbackStore };
+  Object.assign(fallbackStore, store2);
+  _shared.fallbackDepth++;
+  try {
+    return fn();
+  } finally {
+    _shared.fallbackDepth--;
+    for (const key of Object.keys(fallbackStore)) {
+      if (!(key in prev)) delete fallbackStore[key];
+    }
+    Object.assign(fallbackStore, prev);
+  }
+}
+function trackPending(promise, label2, hydration = true) {
+  const store2 = getRequestStore();
+  const pending = store2?.pending;
+  const sessions = pending || !hydration ? [] : hydrationOwners();
+  if (!pending && sessions.length === 0) return promise;
+  const entry = { label: label2, since: Date.now(), boundary: currentBoundary() ?? void 0 };
+  pending?.add(entry);
+  const release = holdHydration(sessions, entry);
+  const done = () => {
+    pending?.delete(entry);
+    store2?.wake?.();
+    release();
+  };
+  try {
+    Promise.resolve(promise).then(done, done);
+  } catch {
+    done();
+  }
+  return promise;
+}
+function withSSR(fn) {
+  const store2 = getSSRStore();
+  const wasSSR = store2.ssr;
+  store2.ssr = true;
+  try {
+    return fn();
+  } finally {
+    if (!wasSSR) store2.ssr = false;
+  }
+}
+
 // src/core/rendering/lazy.ts
 var PENDING_ERROR = "__sibuPendingError";
 function dispatchPropagate(node, error) {
@@ -2524,18 +2771,28 @@ function takePendingError(node) {
 function lazy(importFn) {
   let cached = null;
   return function LazyComponent() {
-    if (cached) {
+    if (cached && !inAdoptScope()) {
       return cached();
     }
     const container = div({ class: "sibu-lazy" });
+    const scope = captureScope();
+    const boundary = currentBoundary();
     let disposed = false;
-    importFn().then(
+    const loading = inScope(null, () => span("sibu-lazy-loading", "Loading..."));
+    if (cached) {
+      const loaded = cached;
+      replaceChildrenSafely(container, inScope(scope, () => loaded()));
+      return container;
+    }
+    trackPending(importFn(), "lazy").then(
       // The component renders after the import resolves, in the owner scope
       // of whoever rendered the placeholder.
       bindOwnerScope2((mod) => {
         if (disposed) return;
         cached = mod.default;
-        const rendered = cached();
+        const component = cached;
+        const build = () => inScope(scope, () => component());
+        const rendered = boundary ? boundary.enter(build) : build();
         replaceChildrenSafely(container, rendered);
       })
     ).catch((err) => {
@@ -2547,7 +2804,7 @@ function lazy(importFn) {
       );
       dispatchPropagate(container, errorObj);
     });
-    container.appendChild(span("sibu-lazy-loading", "Loading..."));
+    if (!(isHydrating() && container.firstChild)) container.appendChild(loading);
     registerDisposer(container, () => {
       disposed = true;
     });
@@ -2556,8 +2813,15 @@ function lazy(importFn) {
 }
 function Suspense({ nodes, fallback }) {
   const container = div({ class: "sibu-suspense" });
-  const fallbackEl = fallback();
-  container.appendChild(fallbackEl);
+  const scope = captureScope();
+  const boundary = openBoundary(container);
+  const commit = (el) => {
+    replaceChildrenSafely(container, el);
+    boundary?.done();
+  };
+  const fallbackEl = inScope(null, fallback);
+  if (isHydrating() && container.firstChild) dispose(fallbackEl);
+  else container.appendChild(fallbackEl);
   let suspenseDisposed = false;
   let observer = null;
   let childEl = null;
@@ -2572,11 +2836,11 @@ function Suspense({ nodes, fallback }) {
   const renderContent = bindOwnerScope2(() => {
     if (suspenseDisposed) return;
     try {
-      const el = nodes();
+      const el = boundary ? boundary.enter(() => inScope(scope, nodes)) : inScope(scope, nodes);
       childEl = el;
       if (el.classList.contains("sibu-lazy")) {
         if (!el.querySelector(".sibu-lazy-loading")) {
-          replaceChildrenSafely(container, el);
+          commit(el);
           return;
         }
         observer = new MutationObserver(() => {
@@ -2585,12 +2849,12 @@ function Suspense({ nodes, fallback }) {
           if (!loading) {
             observer?.disconnect();
             observer = null;
-            replaceChildrenSafely(container, el);
+            commit(el);
           }
         });
         observer.observe(el, { childList: true, subtree: true });
       } else {
-        replaceChildrenSafely(container, el);
+        commit(el);
       }
     } catch (err) {
       const errorObj = err instanceof Error ? err : new Error(String(err));
@@ -2780,7 +3044,7 @@ function registerUnmountWatcher(element, cb) {
   };
 }
 function onMount(callback, element) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined" || isSSR()) return;
   const scope = getOwnerScope2();
   callback = pinScope(scope, callback);
   if (element) {
@@ -2815,7 +3079,7 @@ function onMount(callback, element) {
   }
 }
 function onUnmount(callback, element) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined" || isSSR()) return;
   watchUnmount(pinScope(getOwnerScope2(), callback), element);
 }
 function watchUnmount(callback, element) {
@@ -2852,112 +3116,6 @@ function emitDevtools(hook, event, payload) {
   }
 }
 
-// src/core/ssr-context.ts
-var SSR_KEY = /* @__PURE__ */ Symbol.for("sibujs.ssr.v1");
-function detectSSRShared() {
-  let detected = null;
-  try {
-    if (typeof process !== "undefined" && process.versions && process.versions.node) {
-      let mod = null;
-      const getBuiltin = process.getBuiltinModule;
-      if (typeof getBuiltin === "function") {
-        mod = getBuiltin("node:async_hooks");
-      } else if (typeof require === "function") {
-        mod = require("async_hooks");
-      }
-      if (mod) detected = new mod.AsyncLocalStorage();
-    }
-  } catch {
-    detected = null;
-  }
-  return {
-    als: detected,
-    fallbackStore: { ssr: false, suspenseIdCounter: 0, locale: void 0 },
-    fallbackDepth: 0
-  };
-}
-var _shared = globalThis[SSR_KEY] ?? (globalThis[SSR_KEY] = detectSSRShared());
-var als = _shared.als;
-var fallbackStore = _shared.fallbackStore;
-_shared.fallbackDepth ?? (_shared.fallbackDepth = 0);
-var _alsWarned = false;
-function warnMissingAsyncLocalStorage() {
-  if (_alsWarned || als) return;
-  const isNode = typeof process !== "undefined" && !!process.versions?.node;
-  if (!isNode) return;
-  _alsWarned = true;
-  const version = process.versions.node;
-  devWarn(
-    `SSR request isolation is UNAVAILABLE on this runtime (Node ${version}). AsyncLocalStorage could not be loaded, so concurrent requests share one SSR store: request state and the query cache can bleed between them. Node >= 22.3 is required for isolated SSR under ESM; the CommonJS build works on older versions. A fully synchronous render is unaffected.`
-  );
-}
-function getSSRStore() {
-  if (als) {
-    const s2 = als.getStore();
-    if (s2) return s2;
-  }
-  return fallbackStore;
-}
-function getRequestStore() {
-  if (als) return als.getStore() ?? null;
-  return _shared.fallbackDepth > 0 ? fallbackStore : null;
-}
-function isSSR() {
-  return getSSRStore().ssr;
-}
-function getRequestScopedCache(name) {
-  if (!isSSR()) return null;
-  const store2 = getSSRStore();
-  const caches = store2.caches ?? (store2.caches = /* @__PURE__ */ new Map());
-  let c = caches.get(name);
-  if (!c) {
-    c = /* @__PURE__ */ new Map();
-    caches.set(name, c);
-  }
-  return c;
-}
-function enableSSR() {
-  getSSRStore().ssr = true;
-}
-function disableSSR() {
-  getSSRStore().ssr = false;
-}
-function runInSSRContext(fn) {
-  const store2 = { ssr: true, suspenseIdCounter: 0, idCounter: 0, locale: void 0 };
-  if (als) {
-    return als.run(store2, fn);
-  }
-  warnMissingAsyncLocalStorage();
-  const prevSSR = fallbackStore.ssr;
-  const prevCounter = fallbackStore.suspenseIdCounter;
-  const prevIdCounter = fallbackStore.idCounter;
-  const prevLocale = fallbackStore.locale;
-  fallbackStore.ssr = true;
-  fallbackStore.suspenseIdCounter = 0;
-  fallbackStore.idCounter = 0;
-  fallbackStore.locale = void 0;
-  _shared.fallbackDepth++;
-  try {
-    return fn();
-  } finally {
-    _shared.fallbackDepth--;
-    fallbackStore.ssr = prevSSR;
-    fallbackStore.suspenseIdCounter = prevCounter;
-    fallbackStore.idCounter = prevIdCounter;
-    fallbackStore.locale = prevLocale;
-  }
-}
-function withSSR(fn) {
-  const store2 = getSSRStore();
-  const wasSSR = store2.ssr;
-  store2.ssr = true;
-  try {
-    return fn();
-  } finally {
-    if (!wasSSR) store2.ssr = false;
-  }
-}
-
 // src/core/signals/effect.ts
 var _g = globalThis;
 function on(deps, handler) {
@@ -3038,7 +3196,7 @@ function disposeEffect(ctx) {
 }
 function effect(effectFn, options) {
   devAssert(typeof effectFn === "function", "effect: argument must be a function.");
-  if (isSSR()) return () => {
+  if (isSSR() && !options?.server) return () => {
   };
   const ctx = {
     fn: effectFn,
@@ -3844,21 +4002,21 @@ function ErrorBoundary(optionsOrChildren, maybeChildren) {
     stopResetKeysWatcher();
     let baseline = null;
     resetKeysTeardown = effect(() => {
-      const current = readResetKeyValues(keys);
+      const current2 = readResetKeyValues(keys);
       if (baseline === null) {
-        baseline = current;
+        baseline = current2;
         return;
       }
-      let changed = current.length !== baseline.length;
+      let changed = current2.length !== baseline.length;
       if (!changed) {
-        for (let i2 = 0; i2 < current.length; i2++) {
-          if (!Object.is(current[i2], baseline[i2])) {
+        for (let i2 = 0; i2 < current2.length; i2++) {
+          if (!Object.is(current2[i2], baseline[i2])) {
             changed = true;
             break;
           }
         }
       }
-      baseline = current;
+      baseline = current2;
       if (changed) retry();
     });
   };
@@ -4250,68 +4408,6 @@ function setGlobalErrorHandler(handler) {
   globalErrorHandler = handler;
 }
 
-// src/core/rendering/context.ts
-function context(defaultValue) {
-  const [getValue, setValue] = signal(defaultValue);
-  const warnIfSSR = (method) => {
-    if (!DEV || !isSSR()) return;
-    devWarn(
-      `context.${method}() called during SSR. SibuJS context() is application-global \u2014 it is NOT isolated per request, so a concurrent request can observe this value. Do not use context() for request-specific SSR data; pass it explicitly or use request-scoped storage instead.`
-    );
-  };
-  const ctx = {
-    provide(value) {
-      warnIfSSR("provide");
-      const previous = getValue();
-      setValue(value);
-      return () => setValue(previous);
-    },
-    use() {
-      return getValue;
-    },
-    get() {
-      return getValue();
-    },
-    set(value) {
-      warnIfSSR("set");
-      setValue(value);
-    },
-    withContext(value, fn) {
-      warnIfSSR("withContext");
-      const previous = getValue();
-      setValue(value);
-      try {
-        const result = fn();
-        if (DEV && result !== null && typeof result?.then === "function") {
-          devWarn(
-            "context.withContext() received an async callback. Scoping is synchronous only \u2014 the previous value is restored as soon as the callback returns its promise, so anything after an `await` runs outside the scope."
-          );
-        }
-        return result;
-      } finally {
-        setValue(previous);
-      }
-    }
-  };
-  return ctx;
-}
-
-// src/core/rendering/createId.ts
-var COUNTER_KEY = /* @__PURE__ */ Symbol.for("sibujs.createId.v1");
-var _counter = globalThis[COUNTER_KEY] ?? (globalThis[COUNTER_KEY] = { n: 0 });
-function createId(prefix = "sibu") {
-  const request = getRequestStore();
-  if (request) {
-    request.idCounter = (request.idCounter ?? 0) + 1;
-    return `${prefix}-${request.idCounter}`;
-  }
-  _counter.n++;
-  return `${prefix}-${_counter.n}`;
-}
-function __resetIdCounter() {
-  _counter.n = 0;
-}
-
 // src/core/rendering/directives.ts
 function show(condition, element) {
   const resolved = typeof element === "function" ? element() : element;
@@ -4337,7 +4433,7 @@ function attachBranch(parent, anchor, branch, attachedOnce, where) {
       () => `${where}: ${handedIn ? "a branch was given as an element rather than a function" : "a branch factory returned a node it had already returned"}, so the SAME node is being re-attached \u2014 any state it accumulated while detached (input value, scroll position, classes set imperatively) comes back with it. Its reactive bindings are left intact rather than disposed, because the node is not this directive's to tear down. Return a FRESH node per call (\`() => div(\u2026)\`) for rebuild semantics, or keep this form deliberately when the reuse is what you want.`
     );
   }
-  parent.insertBefore(node, anchor.nextSibling);
+  if (anchor.nextSibling !== node) parent.insertBefore(node, anchor.nextSibling);
   return { node, owned };
 }
 function releaseBranchNode(node, owned) {
@@ -4353,6 +4449,7 @@ function when(condition, thenBranch, elseBranch, options) {
   const elseNode = elseBranch;
   const focusPolicy = options?.focus;
   const anchor = document.createComment("when");
+  const scope = captureScope();
   let currentNode = null;
   let lastCondition;
   let initialized = false;
@@ -4372,7 +4469,7 @@ function when(condition, thenBranch, elseBranch, options) {
       currentNode = null;
     }
     const branch = show2 ? thenBranch : elseNode !== void 0 ? elseNode : null;
-    const attached = untracked2(() => attachBranch(parent, anchor, branch, attachedOnce, "when"));
+    const attached = untracked2(() => inScope(scope, () => attachBranch(parent, anchor, branch, attachedOnce, "when")));
     currentNode = attached.node;
     currentNodeOwned = attached.owned;
     restoreFocusWithin(focused, currentNode ? [currentNode] : [], "when", focusPolicy);
@@ -4403,6 +4500,7 @@ function match(value, cases, fallback, options) {
   const fallbackNode = fallback;
   const focusPolicy = options?.focus;
   const anchor = document.createComment("match");
+  const scope = captureScope();
   let currentNode = null;
   let lastKey;
   let initialized = false;
@@ -4422,7 +4520,9 @@ function match(value, cases, fallback, options) {
       currentNode = null;
     }
     const branch = Object.hasOwn(cases, key) ? cases[key] : fallbackNode;
-    const attached = untracked2(() => attachBranch(parent, anchor, branch ?? null, attachedOnce, "match"));
+    const attached = untracked2(
+      () => inScope(scope, () => attachBranch(parent, anchor, branch ?? null, attachedOnce, "match"))
+    );
     currentNode = attached.node;
     currentNodeOwned = attached.owned;
     restoreFocusWithin(focused, currentNode ? [currentNode] : [], "match", focusPolicy);
@@ -4445,6 +4545,76 @@ function match(value, cases, fallback, options) {
   return anchor;
 }
 
+// src/core/rendering/clientOnly.ts
+function ClientOnly(content, options = {}) {
+  const server = isServer();
+  const [ready, setReady] = signal(!server && !isHydrating());
+  if (!server && !ready()) afterHydration(() => setReady(true));
+  return when(ready, content, options.fallback);
+}
+
+// src/core/rendering/context.ts
+function context(defaultValue) {
+  const [getValue, setValue] = signal(defaultValue);
+  const warnIfSSR = (method) => {
+    if (!DEV || !isSSR()) return;
+    devWarn(
+      `context.${method}() called during SSR. SibuJS context() is application-global \u2014 it is NOT isolated per request, so a concurrent request can observe this value. Do not use context() for request-specific SSR data; pass it explicitly or use request-scoped storage instead.`
+    );
+  };
+  const ctx = {
+    provide(value) {
+      warnIfSSR("provide");
+      const previous = getValue();
+      setValue(value);
+      return () => setValue(previous);
+    },
+    use() {
+      return getValue;
+    },
+    get() {
+      return getValue();
+    },
+    set(value) {
+      warnIfSSR("set");
+      setValue(value);
+    },
+    withContext(value, fn) {
+      warnIfSSR("withContext");
+      const previous = getValue();
+      setValue(value);
+      try {
+        const result = fn();
+        if (DEV && result !== null && typeof result?.then === "function") {
+          devWarn(
+            "context.withContext() received an async callback. Scoping is synchronous only \u2014 the previous value is restored as soon as the callback returns its promise, so anything after an `await` runs outside the scope."
+          );
+        }
+        return result;
+      } finally {
+        setValue(previous);
+      }
+    }
+  };
+  return ctx;
+}
+
+// src/core/rendering/createId.ts
+var COUNTER_KEY = /* @__PURE__ */ Symbol.for("sibujs.createId.v1");
+var _counter = globalThis[COUNTER_KEY] ?? (globalThis[COUNTER_KEY] = { n: 0 });
+function createId(prefix = "sibu") {
+  const request = getRequestStore();
+  if (request) {
+    request.idCounter = (request.idCounter ?? 0) + 1;
+    return `${prefix}-${request.idCounter}`;
+  }
+  _counter.n++;
+  return `${prefix}-${_counter.n}`;
+}
+function __resetIdCounter() {
+  _counter.n = 0;
+}
+
 // src/utils/globalSingleton.ts
 function globalSingleton(key, create) {
   const g2 = globalThis;
@@ -4546,6 +4716,7 @@ function each(getArray, render, options) {
   );
   requireDocument();
   const anchor = document.createComment("each:anchor");
+  const scope = captureScope();
   const end = document.createComment("each:end");
   const oldKeysBufA = [];
   const oldKeysBufB = [];
@@ -4575,7 +4746,9 @@ function each(getArray, render, options) {
     const parent = anchor.parentNode;
     if (!parent) return;
     if (!sentinelInserted) {
-      parent.insertBefore(end, anchor.nextSibling);
+      const serverEnd = isHydrating() ? findServerEnd(anchor) : null;
+      if (serverEnd) parent.replaceChild(end, serverEnd);
+      else parent.insertBefore(end, anchor.nextSibling);
       sentinelInserted = true;
     }
     if (newKeysBuf.length < newLen) {
@@ -4616,7 +4789,7 @@ function each(getArray, render, options) {
         try {
           suspendTracking2();
           try {
-            node = resolveNodeChild(render(itemGetter, indexGetter));
+            node = resolveNodeChild(inScope(keyedScope(scope, key), () => render(itemGetter, indexGetter)));
           } finally {
             resumeTracking2();
           }
@@ -4750,6 +4923,19 @@ function each(getArray, render, options) {
   }
   return anchor;
 }
+function findServerEnd(anchor) {
+  let depth = 0;
+  for (let n = anchor.nextSibling; n; n = n.nextSibling) {
+    if (n.nodeType !== 8) continue;
+    const data2 = n.data;
+    if (data2 === "each:anchor") depth++;
+    else if (data2 === "each:end") {
+      if (depth === 0) return n;
+      depth--;
+    }
+  }
+  return null;
+}
 
 // src/core/rendering/fragment.ts
 function Fragment(nodes) {
@@ -4873,19 +5059,19 @@ function parseTemplate(strings) {
       pos++;
       const statics = [];
       const exprs = [];
-      let current = "";
+      let current2 = "";
       while (pos < len && template2[pos] !== quote2) {
         const innerIdx = tryExprIdx();
         if (innerIdx >= 0) {
-          statics.push(current);
-          current = "";
+          statics.push(current2);
+          current2 = "";
           exprs.push(innerIdx);
         } else {
-          current += template2[pos++];
+          current2 += template2[pos++];
         }
       }
       if (pos < len) pos++;
-      statics.push(current);
+      statics.push(current2);
       if (exprs.length === 0) {
         return { kind: "static", value: statics[0] };
       }
@@ -4894,20 +5080,20 @@ function parseTemplate(strings) {
     {
       const statics = [];
       const exprs = [];
-      let current = "";
+      let current2 = "";
       while (pos < len) {
         const c = template2.charCodeAt(pos);
         if (c === 32 || c === 9 || c === 10 || c === 13 || c === 62) break;
         const innerIdx = tryExprIdx();
         if (innerIdx >= 0) {
-          statics.push(current);
-          current = "";
+          statics.push(current2);
+          current2 = "";
           exprs.push(innerIdx);
         } else {
-          current += template2[pos++];
+          current2 += template2[pos++];
         }
       }
-      statics.push(current);
+      statics.push(current2);
       if (exprs.length === 0) {
         return { kind: "static", value: statics[0] };
       }
@@ -5031,7 +5217,7 @@ function parseTemplate(strings) {
   return parseChildren();
 }
 function executeElement(tmpl, values) {
-  const el = tmpl.svg ? document.createElementNS(SVG_NS3, tmpl.tag) : document.createElement(tmpl.tag);
+  const el = createScopedElement(tmpl.tag, tmpl.svg ? SVG_NS3 : void 0);
   for (let i2 = 0; i2 < tmpl.attrs.length; i2++) {
     const attr = tmpl.attrs[i2];
     switch (attr.t) {
@@ -5124,7 +5310,7 @@ function renderTemplate(tmpl, values) {
   if (tmpl.length === 1 && tmpl[0].t === 0) {
     return executeElement(tmpl[0].el, values);
   }
-  const wrapper = document.createElement("div");
+  const wrapper = createScopedElement("div");
   for (let i2 = 0; i2 < tmpl.length; i2++) {
     const child = tmpl[i2];
     switch (child.t) {
@@ -5368,8 +5554,8 @@ function Portal(nodes, target) {
 // src/core/rendering/slots.ts
 function getSlot(slots, name = "default") {
   if (slots == null || !Object.hasOwn(slots, name)) return void 0;
-  const slot2 = slots[name];
-  return typeof slot2 === "function" ? slot2 : void 0;
+  const slot4 = slots[name];
+  return typeof slot4 === "function" ? slot4 : void 0;
 }
 
 // src/core/signals/array.ts
@@ -5453,7 +5639,7 @@ function reactiveArray(initial = []) {
   let data2 = [...initial];
   let snapshot = null;
   const signal2 = { __v: 0 };
-  function notify() {
+  function notify2() {
     snapshot = null;
     signal2.__v++;
     if (!enqueueBatchedSignal(signal2)) {
@@ -5472,52 +5658,52 @@ function reactiveArray(initial = []) {
     push(...items) {
       if (items.length === 0) return;
       data2.push(...items);
-      notify();
+      notify2();
     },
     pop() {
       if (data2.length === 0) return void 0;
       const removed = data2.pop();
-      notify();
+      notify2();
       return removed;
     },
     shift() {
       if (data2.length === 0) return void 0;
       const removed = data2.shift();
-      notify();
+      notify2();
       return removed;
     },
     unshift(...items) {
       if (items.length === 0) return;
       data2.unshift(...items);
-      notify();
+      notify2();
     },
     splice(start, ...rest) {
       const removed = nativeSplice(data2, start, rest);
       if (removed.length > 0 || rest.length > 1) {
-        notify();
+        notify2();
       }
       return removed;
     },
     remove(index) {
       if (index < 0 || index >= data2.length) return;
       data2.splice(index, 1);
-      notify();
+      notify2();
     },
     removeWhere(predicate) {
       const idx = data2.findIndex(predicate);
       if (idx === -1) return;
       data2.splice(idx, 1);
-      notify();
+      notify2();
     },
     set(items) {
       data2 = [...items];
-      notify();
+      notify2();
     },
     update(index, value) {
       if (index < 0 || index >= data2.length) return;
       if (Object.is(data2[index], value)) return;
       data2[index] = value;
-      notify();
+      notify2();
     },
     updateWhere(predicate, updater) {
       let changed = false;
@@ -5530,23 +5716,23 @@ function reactiveArray(initial = []) {
           }
         }
       }
-      if (changed) notify();
+      if (changed) notify2();
     },
     sort(compareFn) {
       if (data2.length <= 1) return;
       data2.sort(compareFn);
-      notify();
+      notify2();
     },
     reverse() {
       if (data2.length <= 1) return;
       data2.reverse();
-      notify();
+      notify2();
     },
     filter(predicate) {
       const filtered = data2.filter(predicate);
       if (filtered.length === data2.length) return;
       data2 = filtered;
-      notify();
+      notify2();
     },
     map(transform) {
       let changed = false;
@@ -5557,12 +5743,12 @@ function reactiveArray(initial = []) {
           changed = true;
         }
       }
-      if (changed) notify();
+      if (changed) notify2();
     },
     clear() {
       if (data2.length === 0) return;
       data2 = [];
-      notify();
+      notify2();
     }
   };
   return [get, actions];
@@ -5900,8 +6086,8 @@ function store(initialState) {
     return snapshot;
   };
   const setState = (patch) => {
-    const current = getSnapshot();
-    const nextState = typeof patch === "function" ? patch(current) : patch;
+    const current2 = getSnapshot();
+    const nextState = typeof patch === "function" ? patch(current2) : patch;
     batch(() => {
       Object.entries(nextState).forEach(([key, value]) => {
         if (Object.hasOwn(signals, key)) {
@@ -5938,18 +6124,18 @@ function store(initialState) {
     let prev;
     let first = true;
     return effect(() => {
-      const current = signals[key][0]();
+      const current2 = signals[key][0]();
       if (first) {
-        prev = current;
+        prev = current2;
         first = false;
         return;
       }
-      if (!Object.is(current, prev)) {
+      if (!Object.is(current2, prev)) {
         const oldPrev = prev;
-        prev = current;
+        prev = current2;
         suspendTracking2();
         try {
-          callback(current, oldPrev);
+          callback(current2, oldPrev);
         } finally {
           resumeTracking2();
         }
@@ -6577,6 +6763,7 @@ function nextTick() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ClientOnly,
   DynamicComponent,
   ErrorBoundary,
   ErrorDisplay,
@@ -6682,7 +6869,9 @@ function nextTick() {
   input,
   ins,
   isBatching,
+  isClient,
   isSSR,
+  isServer,
   kbd,
   label,
   lazy,