sibujs 1.1.0 → 1.3.0

package/dist/build.cjs

@@ -1059,12 +1059,14 @@ var index_exports = {};
 __export(index_exports, {
   DynamicComponent: () => DynamicComponent,
   ErrorBoundary: () => ErrorBoundary,
+  ErrorDisplay: () => ErrorDisplay,
   Fragment: () => Fragment,
   KeepAlive: () => KeepAlive,
   Loading: () => Loading,
   Portal: () => Portal,
   SVG_NS: () => SVG_NS,
   Suspense: () => Suspense,
+  __resetIdCounter: () => __resetIdCounter,
   a: () => a,
   abbr: () => abbr,
   action: () => action,
@@ -1073,6 +1075,7 @@ __export(index_exports, {
   array: () => array,
   article: () => article,
   aside: () => aside,
+  asyncDerived: () => asyncDerived,
   audio: () => audio,
   autoResize: () => autoResize,
   b: () => b,
@@ -1100,12 +1103,14 @@ __export(index_exports, {
   colgroup: () => colgroup,
   context: () => context,
   copyOnClick: () => copyOnClick,
+  createId: () => createId,
   customElement: () => customElement,
   data: () => data,
   datalist: () => datalist,
   dd: () => dd,
   deepEqual: () => deepEqual,
   deepSignal: () => deepSignal,
+  defer: () => defer,
   defs: () => defs,
   del: () => del,
   derived: () => derived,
@@ -1173,6 +1178,7 @@ __export(index_exports, {
   meter: () => meter,
   mount: () => mount,
   nav: () => nav,
+  nextTick: () => nextTick,
   noscript: () => noscript,
   object: () => object,
   ol: () => ol,
@@ -1218,6 +1224,8 @@ __export(index_exports, {
   span: () => span,
   stop: () => stop,
   store: () => store,
+  strict: () => strict,
+  strictEffect: () => strictEffect,
   strong: () => strong,
   style: () => style,
   sub: () => sub,
@@ -1239,6 +1247,7 @@ __export(index_exports, {
   title: () => title,
   tr: () => tr,
   track: () => track2,
+  transition: () => transition,
   trapFocus: () => trapFocus,
   tspan: () => tspan,
   u: () => u,
@@ -1557,7 +1566,20 @@ function cleanup(subscriber) {
 
 // src/reactivity/bindAttribute.ts
 var _isDev3 = isDev();
+function isEventHandlerAttr(name) {
+  if (name.length < 3) return false;
+  const lower = name.toLowerCase();
+  return lower[0] === "o" && lower[1] === "n" && lower.charCodeAt(2) >= 97 && lower.charCodeAt(2) <= 122;
+}
 function bindAttribute(el, attr, getter) {
+  if (isEventHandlerAttr(attr)) {
+    if (_isDev3)
+      devWarn(
+        `bindAttribute: refusing to bind event-handler attribute "${attr}". Use on:{ ${attr.slice(2)}: fn } instead.`
+      );
+    return () => {
+    };
+  }
   function commit() {
     let value;
     try {
@@ -1637,11 +1659,11 @@ function bindChildNode(placeholder, getter) {
       if (_isDev4) devWarn(`bindChildNode: getter threw: ${err instanceof Error ? err.message : String(err)}`);
       return;
     }
-    for (let i2 = 0; i2 < lastNodes.length; i2++) {
-      const node = lastNodes[i2];
-      if (node.parentNode) node.parentNode.removeChild(node);
-    }
     if (result == null || typeof result === "boolean") {
+      for (let i2 = 0; i2 < lastNodes.length; i2++) {
+        const node = lastNodes[i2];
+        if (node.parentNode) node.parentNode.removeChild(node);
+      }
       lastNodes.length = 0;
       return;
     }
@@ -1650,24 +1672,46 @@ function bindChildNode(placeholder, getter) {
       lastNodes.length = 0;
       return;
     }
-    const anchor = placeholder.nextSibling;
-    let count = 0;
+    let newNodes;
     if (Array.isArray(result)) {
-      if (lastNodes.length < result.length) lastNodes = new Array(result.length);
+      newNodes = [];
       for (let i2 = 0; i2 < result.length; i2++) {
         const item = result[i2];
         if (item == null || typeof item === "boolean") continue;
-        const node = item instanceof Node ? item : document.createTextNode(String(item));
-        parent.insertBefore(node, anchor);
-        lastNodes[count++] = node;
+        newNodes.push(item instanceof Node ? item : document.createTextNode(String(item)));
       }
     } else {
-      if (lastNodes.length < 1) lastNodes = [null];
       const node = result instanceof Node ? result : document.createTextNode(String(result));
-      parent.insertBefore(node, anchor);
-      lastNodes[count++] = node;
+      newNodes = [node];
+    }
+    const reused = lastNodes.length > 0 && newNodes.length > 0 ? /* @__PURE__ */ new Set() : void 0;
+    if (reused) {
+      for (let i2 = 0; i2 < newNodes.length; i2++) {
+        for (let j = 0; j < lastNodes.length; j++) {
+          if (newNodes[i2] === lastNodes[j]) {
+            reused.add(newNodes[i2]);
+            break;
+          }
+        }
+      }
+    }
+    for (let i2 = 0; i2 < lastNodes.length; i2++) {
+      const node = lastNodes[i2];
+      if (reused?.has(node)) continue;
+      if (node.parentNode) node.parentNode.removeChild(node);
+    }
+    const anchor = placeholder.nextSibling;
+    for (let i2 = 0; i2 < newNodes.length; i2++) {
+      const node = newNodes[i2];
+      if (reused?.has(node) && node.parentNode === parent) {
+        if (node.nextSibling !== anchor) {
+          parent.insertBefore(node, anchor);
+        }
+      } else {
+        parent.insertBefore(node, anchor);
+      }
     }
-    lastNodes.length = count;
+    lastNodes = newNodes;
   }
   return track(commit);
 }
@@ -1845,16 +1889,20 @@ function appendChildren(el, nodes) {
 var tagFactory = (tag, ns) => (first, second) => {
   const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
   if (first === void 0) return el;
-  if (second === void 0 && typeof first === "string") {
+  if (typeof first === "string") {
+    if (second !== void 0) {
+      el.setAttribute("class", first);
+      appendChildren(el, second);
+      return el;
+    }
     el.textContent = first;
     return el;
   }
-  if (second !== void 0) {
-    el.setAttribute("class", first);
-    appendChildren(el, second);
+  if (typeof first === "number") {
+    el.textContent = String(first);
     return el;
   }
-  if (Array.isArray(first) || first instanceof Node) {
+  if (Array.isArray(first) || first instanceof Node || typeof first === "function") {
     appendChildren(el, first);
     return el;
   }
@@ -1863,7 +1911,7 @@ var tagFactory = (tag, ns) => (first, second) => {
   if (pClass != null) applyClass(el, pClass);
   const pId = props.id;
   if (pId != null) el.id = pId;
-  const pNodes = props.nodes;
+  const pNodes = second !== void 0 ? second : props.nodes;
   if (pNodes != null) appendChildren(el, pNodes);
   const pOn = props.on;
   if (pOn) {
@@ -1888,12 +1936,18 @@ var tagFactory = (tag, ns) => (first, second) => {
       // already handled above / below
       default: {
         const value = props[key];
-        if (value == null || value === false) continue;
+        if (value == null) continue;
         if (key[0] === "o" && key[1] === "n") continue;
         if (typeof value === "function") {
           registerDisposer(el, bindAttribute(el, key, value));
-        } else if (value === true) {
-          el.setAttribute(key, "");
+        } else if (typeof value === "boolean") {
+          if (key in el && (key === "checked" || key === "disabled" || key === "selected")) {
+            el[key] = value;
+          } else if (value) {
+            el.setAttribute(key, "");
+          } else {
+            el.removeAttribute(key);
+          }
         } else {
           const str = String(value);
           el.setAttribute(key, isUrlAttribute(key) ? sanitizeUrl(str) : str);
@@ -2941,6 +2995,16 @@ function setGlobalErrorHandler(handler) {
   globalErrorHandler = handler;
 }
 
+// src/core/rendering/createId.ts
+var idCounter = 0;
+function createId(prefix = "sibu") {
+  idCounter++;
+  return `${prefix}-${idCounter}`;
+}
+function __resetIdCounter() {
+  idCounter = 0;
+}
+
 // src/reactivity/batch.ts
 var batchDepth = 0;
 var pendingSignals = /* @__PURE__ */ new Set();
@@ -3021,11 +3085,12 @@ function disableSSR() {
   ssrMode = false;
 }
 function withSSR(fn) {
+  const wasSSR = ssrMode;
   enableSSR();
   try {
     return fn();
   } finally {
-    disableSSR();
+    if (!wasSSR) disableSSR();
   }
 }
 
@@ -3475,6 +3540,47 @@ function writable(get, set, options) {
   return [getter, setter];
 }
 
+// src/core/signals/asyncDerived.ts
+function asyncDerived(factory, initial) {
+  const [value, setValue] = signal(initial);
+  const [loading, setLoading] = signal(false);
+  const [error, setError] = signal(null);
+  const [tick, setTick] = signal(0);
+  let runId = 0;
+  effect(() => {
+    tick();
+    const currentRun = ++runId;
+    setLoading(true);
+    setError(null);
+    let promise;
+    try {
+      promise = factory();
+    } catch (err) {
+      setError(err);
+      setLoading(false);
+      return;
+    }
+    promise.then(
+      (result) => {
+        if (currentRun !== runId) return;
+        setValue(result);
+        setLoading(false);
+      },
+      (err) => {
+        if (currentRun !== runId) return;
+        setError(err);
+        setLoading(false);
+      }
+    );
+  });
+  return {
+    value,
+    loading,
+    error,
+    refresh: () => setTick((n) => n + 1)
+  };
+}
+
 // src/core/rendering/lifecycle.ts
 function safeCall(cb, hookName) {
   try {
@@ -3553,6 +3659,116 @@ function context(defaultValue) {
   };
 }
 
+// src/core/strict.ts
+function strict(fn) {
+  const result = fn();
+  if (isDev()) {
+    queueMicrotask(() => {
+      try {
+        fn();
+      } catch (err) {
+        console.warn("[Sibu strict] second run threw:", err);
+      }
+    });
+  }
+  return result;
+}
+function strictEffect(fn) {
+  if (!isDev()) {
+    return effect(fn);
+  }
+  const firstTeardown = effect(fn);
+  let secondTeardown = null;
+  queueMicrotask(() => {
+    try {
+      secondTeardown = effect(fn);
+    } catch (err) {
+      console.warn("[Sibu strictEffect] second run threw:", err);
+    }
+  });
+  return () => {
+    firstTeardown();
+    if (secondTeardown) secondTeardown();
+  };
+}
+
+// src/reactivity/nextTick.ts
+function nextTick() {
+  return new Promise((resolve) => {
+    queueMicrotask(() => {
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => resolve());
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+// src/reactivity/concurrent.ts
+function defer(getter) {
+  const [value, setValue] = signal(getter());
+  let pending = false;
+  let latest = value();
+  const flush = () => {
+    pending = false;
+    setValue(latest);
+  };
+  const schedule = () => {
+    if (pending) return;
+    pending = true;
+    queueMicrotask(() => {
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(flush);
+      } else {
+        flush();
+      }
+    });
+  };
+  track(() => {
+    latest = getter();
+    schedule();
+  });
+  return value;
+}
+var IDLE_FALLBACK_MS = 16;
+function scheduleIdle(fn) {
+  const g2 = globalThis;
+  if (typeof g2.requestIdleCallback === "function") {
+    g2.requestIdleCallback(fn, { timeout: IDLE_FALLBACK_MS * 4 });
+    return;
+  }
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(() => fn());
+    return;
+  }
+  setTimeout(fn, IDLE_FALLBACK_MS);
+}
+function transition() {
+  const [pending, setPending] = signal(false);
+  function start(fn) {
+    setPending(true);
+    scheduleIdle(() => {
+      let result;
+      try {
+        result = fn();
+      } catch {
+        setPending(false);
+        return;
+      }
+      if (result && typeof result.then === "function") {
+        result.then(
+          () => setPending(false),
+          () => setPending(false)
+        );
+      } else {
+        setPending(false);
+      }
+    });
+  }
+  return { pending, start };
+}
+
 // src/core/rendering/lazy.ts
 function lazy(importFn) {
   let cached = null;
@@ -3611,8 +3827,446 @@ function Suspense({ nodes, fallback }) {
   return container;
 }
 
-// src/components/ErrorBoundary.ts
+// src/components/ErrorDisplay.ts
 var _isDev8 = isDev();
+var STYLES = `
+  .sibu-error-display {
+    border: 1px solid var(--sibu-err-border, #e5484d);
+    border-radius: 10px;
+    margin: 12px 0;
+    background: #0f0f1a;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: #e5e7eb;
+    overflow: hidden;
+  }
+  .sibu-error-display[data-severity="warning"] { --sibu-err-border: #d97706; --sibu-err-accent: #d97706; }
+  .sibu-error-display[data-severity="info"] { --sibu-err-border: #3b82f6; --sibu-err-accent: #3b82f6; }
+  .sibu-error-display { --sibu-err-accent: #e5484d; }
+
+  .sibu-error-display .sibu-err-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 18px;
+    background: var(--sibu-err-accent);
+    color: white;
+    user-select: none;
+  }
+  .sibu-error-display .sibu-err-icon {
+    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
+    font-weight: bold;
+    font-size: 1.05em;
+    padding: 2px 8px;
+    background: rgba(0, 0, 0, 0.22);
+    border-radius: 4px;
+    letter-spacing: 0.02em;
+  }
+  .sibu-error-display .sibu-err-title {
+    margin: 0;
+    font-size: 0.98em;
+    font-weight: 600;
+    flex: 1;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .sibu-error-display .sibu-err-timestamp {
+    font-size: 0.75em;
+    opacity: 0.85;
+    font-family: 'SF Mono', 'JetBrains Mono', monospace;
+  }
+
+  .sibu-error-display .sibu-err-body {
+    padding: 16px 18px;
+  }
+  .sibu-error-display .sibu-err-message {
+    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
+    margin: 0 0 14px;
+    color: #fecaca;
+    word-break: break-word;
+    font-size: 0.9em;
+    line-height: 1.55;
+    padding: 10px 12px;
+    background: rgba(229, 72, 77, 0.08);
+    border-left: 3px solid var(--sibu-err-accent);
+    border-radius: 4px;
+  }
+
+  .sibu-error-display .sibu-err-section {
+    margin-top: 14px;
+    border-radius: 6px;
+    border: 1px solid #2a2a3e;
+    background: #0a0a14;
+    overflow: hidden;
+  }
+  .sibu-error-display .sibu-err-section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background: #16162a;
+    border-bottom: 1px solid #2a2a3e;
+    font-size: 0.72em;
+    color: #8b8fa3;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+  }
+  .sibu-error-display .sibu-err-copy-btn {
+    background: transparent;
+    border: 1px solid #3a3a4e;
+    border-radius: 4px;
+    color: #a0a3b8;
+    cursor: pointer;
+    padding: 2px 10px;
+    font-size: 0.95em;
+    font-family: inherit;
+    transition: all 0.12s ease;
+  }
+  .sibu-error-display .sibu-err-copy-btn:hover {
+    background: #2a2a3e;
+    color: #e5e7eb;
+    border-color: #4a4a5e;
+  }
+
+  .sibu-error-display .sibu-err-stack {
+    margin: 0;
+    padding: 10px 12px;
+    overflow-x: auto;
+    font-family: 'SF Mono', 'JetBrains Mono', monospace;
+    font-size: 0.8em;
+    line-height: 1.7;
+  }
+  .sibu-error-display .sibu-err-frame {
+    display: flex;
+    gap: 10px;
+    padding: 1px 0;
+  }
+  .sibu-error-display .sibu-err-line {
+    display: inline-block;
+    min-width: 2.2ch;
+    color: #4b5066;
+    text-align: right;
+    user-select: none;
+    flex-shrink: 0;
+  }
+  .sibu-error-display .sibu-err-fn {
+    color: #7dd3fc;
+    font-weight: 500;
+  }
+  .sibu-error-display .sibu-err-loc {
+    color: #6b7280;
+    white-space: nowrap;
+  }
+  .sibu-error-display .sibu-err-cause-label {
+    margin: 12px 0 6px;
+    color: #a0a3b8;
+    font-size: 0.75em;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .sibu-error-display .sibu-err-meta {
+    margin: 0;
+    padding: 10px 12px;
+    font-family: 'SF Mono', 'JetBrains Mono', monospace;
+    font-size: 0.78em;
+    color: #a0a3b8;
+    display: grid;
+    grid-template-columns: minmax(120px, auto) 1fr;
+    gap: 4px 16px;
+  }
+  .sibu-error-display .sibu-err-meta dt { color: #6b7280; }
+  .sibu-error-display .sibu-err-meta dd { margin: 0; color: #d1d5db; word-break: break-word; }
+
+  .sibu-error-display .sibu-err-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+  }
+  .sibu-error-display .sibu-err-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 18px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.12s ease;
+    font-family: inherit;
+  }
+  .sibu-error-display .sibu-err-btn-retry {
+    background: var(--sibu-err-accent);
+    color: white;
+  }
+  .sibu-error-display .sibu-err-btn-retry:hover { filter: brightness(1.1); }
+  .sibu-error-display .sibu-err-btn-reload {
+    background: #1f2133;
+    color: #d1d5db;
+    border: 1px solid #3a3a4e;
+  }
+  .sibu-error-display .sibu-err-btn-reload:hover { background: #2a2b40; }
+`;
+var _stylesInjected = false;
+function injectStyles() {
+  if (_stylesInjected || typeof document === "undefined") return;
+  const el = style({ nodes: STYLES });
+  document.head.appendChild(el);
+  _stylesInjected = true;
+}
+function parseStack(stack) {
+  const frames = [];
+  const lines = stack.split("\n");
+  for (const raw of lines) {
+    const line2 = raw.trim();
+    const chrome = line2.match(/^at\s+(?:(.+?)\s+\((.+)\)|(.+))$/);
+    if (chrome) {
+      frames.push({ fn: chrome[1] || "(anonymous)", loc: chrome[2] || chrome[3] || "" });
+      continue;
+    }
+    const ff = line2.match(/^(.+?)@(.+)$/);
+    if (ff) {
+      frames.push({ fn: ff[1] || "(anonymous)", loc: ff[2] || "" });
+    }
+  }
+  return frames;
+}
+function normalizeError(err) {
+  if (err instanceof Error) {
+    const code2 = err.code ?? err.name ?? "ERROR";
+    const message = err.message || "Unknown error";
+    const stack = err.stack ?? "";
+    const frames = parseStack(stack);
+    const rawCause = err.cause;
+    const cause = rawCause != null ? normalizeError(rawCause) : null;
+    return { code: code2, message, stack, frames, cause };
+  }
+  return {
+    code: "NON_ERROR",
+    message: typeof err === "string" ? err : JSON.stringify(err),
+    stack: "",
+    frames: [],
+    cause: null
+  };
+}
+function buildCopyText(err, meta2) {
+  const lines = [];
+  lines.push(`[${err.code}] ${err.message}`);
+  if (err.stack) {
+    lines.push("");
+    lines.push(err.stack);
+  }
+  if (err.cause) {
+    lines.push("");
+    lines.push("Caused by:");
+    lines.push(`  [${err.cause.code}] ${err.cause.message}`);
+    if (err.cause.stack) {
+      const indented = err.cause.stack.split("\n").map((l) => `  ${l}`).join("\n");
+      lines.push(indented);
+    }
+  }
+  if (meta2 && Object.keys(meta2).length > 0) {
+    lines.push("");
+    lines.push("Metadata:");
+    for (const [k, v] of Object.entries(meta2)) {
+      lines.push(`  ${k}: ${String(v)}`);
+    }
+  }
+  lines.push("");
+  lines.push(`At: ${(/* @__PURE__ */ new Date()).toISOString()}`);
+  if (typeof navigator !== "undefined" && navigator.userAgent) {
+    lines.push(`UA: ${navigator.userAgent}`);
+  }
+  return lines.join("\n");
+}
+function renderFrames(frames) {
+  const rows = frames.map(
+    (f, i2) => div({
+      class: "sibu-err-frame",
+      nodes: [
+        span({ class: "sibu-err-line", nodes: String(i2 + 1) }),
+        span({ class: "sibu-err-fn", nodes: f.fn }),
+        span({ class: "sibu-err-loc", nodes: ` \u2014 ${f.loc}` })
+      ]
+    })
+  );
+  return pre({ class: "sibu-err-stack", nodes: rows });
+}
+function renderCauseChain(cause) {
+  if (!cause) return [];
+  return [
+    div({ class: "sibu-err-cause-label", nodes: "Caused by" }),
+    div({
+      class: "sibu-err-section",
+      nodes: [
+        div({
+          class: "sibu-err-section-head",
+          nodes: [span({ nodes: `[${cause.code}] ${cause.message}` }), span({ nodes: "" })]
+        }),
+        cause.frames.length > 0 ? renderFrames(cause.frames) : div({ class: "sibu-err-stack", nodes: "(no stack)" })
+      ]
+    }),
+    ...renderCauseChain(cause.cause)
+  ];
+}
+function renderMetadata(meta2) {
+  const rows = [];
+  for (const [k, v] of Object.entries(meta2)) {
+    rows.push(document.createElement("dt"));
+    rows[rows.length - 1].textContent = k;
+    const dd2 = document.createElement("dd");
+    dd2.textContent = v == null ? "(null)" : String(v);
+    rows.push(dd2);
+  }
+  const dl2 = document.createElement("dl");
+  dl2.className = "sibu-err-meta";
+  for (const r of rows) dl2.appendChild(r);
+  return dl2;
+}
+function ErrorDisplay(props) {
+  injectStyles();
+  const severity = props.severity ?? "error";
+  const normalized = normalizeError(props.error);
+  const showDetails = props.alwaysShowDetails ?? _isDev8;
+  const headline = props.title ?? normalized.message;
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace("T", " ").slice(0, 19);
+  const [copyLabel, setCopyLabel] = signal("Copy");
+  const copyBtn = button({
+    class: "sibu-err-copy-btn",
+    nodes: () => copyLabel(),
+    on: {
+      click: () => {
+        const text2 = buildCopyText(normalized, props.metadata);
+        if (typeof navigator !== "undefined" && navigator.clipboard) {
+          navigator.clipboard.writeText(text2).then(
+            () => {
+              setCopyLabel("Copied!");
+              setTimeout(() => setCopyLabel("Copy"), 1500);
+            },
+            () => {
+              setCopyLabel("Copy failed");
+              setTimeout(() => setCopyLabel("Copy"), 1500);
+            }
+          );
+        }
+      }
+    }
+  });
+  const header2 = div({
+    class: "sibu-err-header",
+    nodes: [
+      code({ class: "sibu-err-icon", nodes: normalized.code }),
+      h3({ class: "sibu-err-title", nodes: headline }),
+      span({ class: "sibu-err-timestamp", nodes: timestamp })
+    ]
+  });
+  const bodyChildren = [p({ class: "sibu-err-message", nodes: normalized.message })];
+  if (showDetails && normalized.frames.length > 0) {
+    bodyChildren.push(
+      div({
+        class: "sibu-err-section",
+        nodes: [
+          div({
+            class: "sibu-err-section-head",
+            nodes: [span({ nodes: "Stack Trace" }), copyBtn]
+          }),
+          renderFrames(normalized.frames)
+        ]
+      })
+    );
+  } else if (showDetails) {
+    bodyChildren.push(
+      div({
+        class: "sibu-err-section",
+        nodes: [
+          div({
+            class: "sibu-err-section-head",
+            nodes: [span({ nodes: "Details" }), copyBtn]
+          }),
+          div({ class: "sibu-err-stack", nodes: "(no stack available)" })
+        ]
+      })
+    );
+  }
+  if (showDetails) {
+    bodyChildren.push(...renderCauseChain(normalized.cause));
+  }
+  if (showDetails && props.metadata && Object.keys(props.metadata).length > 0) {
+    bodyChildren.push(
+      div({
+        class: "sibu-err-section",
+        nodes: [
+          div({ class: "sibu-err-section-head", nodes: [span({ nodes: "Metadata" })] }),
+          renderMetadata(props.metadata)
+        ]
+      })
+    );
+  }
+  if (showDetails && typeof navigator !== "undefined" && navigator.userAgent) {
+    bodyChildren.push(
+      div({
+        class: "sibu-err-section",
+        nodes: [
+          div({ class: "sibu-err-section-head", nodes: [span({ nodes: "Environment" })] }),
+          div({
+            class: "sibu-err-meta",
+            nodes: (() => {
+              const dl2 = document.createElement("dl");
+              dl2.className = "sibu-err-meta";
+              const entries = [
+                ["User Agent", navigator.userAgent],
+                ["URL", typeof location !== "undefined" ? location.href : "(n/a)"],
+                ["Timestamp", (/* @__PURE__ */ new Date()).toISOString()]
+              ];
+              for (const [k, v] of entries) {
+                const dt2 = document.createElement("dt");
+                dt2.textContent = k;
+                const dd2 = document.createElement("dd");
+                dd2.textContent = v;
+                dl2.appendChild(dt2);
+                dl2.appendChild(dd2);
+              }
+              return dl2;
+            })()
+          })
+        ]
+      })
+    );
+  }
+  const actionButtons = [];
+  if (props.onRetry) {
+    actionButtons.push(
+      button({
+        class: "sibu-err-btn sibu-err-btn-retry",
+        nodes: props.retryLabel ?? "Retry",
+        on: { click: props.onRetry }
+      })
+    );
+  }
+  if (!props.hideReload && typeof location !== "undefined") {
+    actionButtons.push(
+      button({
+        class: "sibu-err-btn sibu-err-btn-reload",
+        nodes: "Reload Page",
+        on: { click: () => location.reload() }
+      })
+    );
+  }
+  if (actionButtons.length > 0) {
+    bodyChildren.push(div({ class: "sibu-err-actions", nodes: actionButtons }));
+  }
+  const body2 = div({ class: "sibu-err-body", nodes: bodyChildren });
+  return div({
+    class: "sibu-error-display",
+    "data-severity": severity,
+    nodes: [header2, body2]
+  });
+}
+
+// src/components/ErrorBoundary.ts
 var errorBoundaryStyles = `
   .sibu-error-boundary {
     position: relative;
@@ -3769,7 +4423,7 @@ var errorBoundaryStyles = `
   }
 `;
 var stylesInjected = false;
-function injectStyles() {
+function injectStyles2() {
   if (!stylesInjected && typeof document !== "undefined") {
     const styleElement = style({ nodes: errorBoundaryStyles });
     document.head.appendChild(styleElement);
@@ -3789,37 +4443,8 @@ function getMemoizedFallback(fallbackFn, error, retry) {
   }
   return cache2.get(key);
 }
-function parseStack(err) {
-  const stack = err.stack || "";
-  const lines = stack.split("\n");
-  const frames = [];
-  let source2 = "";
-  for (const line2 of lines) {
-    const trimmed = line2.trim();
-    const chromeMatch = trimmed.match(/^at\s+(?:(.+?)\s+\((.+)\)|(.+))$/);
-    if (chromeMatch) {
-      const fn = chromeMatch[1] || "(anonymous)";
-      const loc = chromeMatch[2] || chromeMatch[3] || "";
-      frames.push({ fn, loc });
-      if (!source2 && fn !== "(anonymous)" && !fn.startsWith("Object.") && !fn.startsWith("Module.")) {
-        source2 = fn;
-      }
-      continue;
-    }
-    const firefoxMatch = trimmed.match(/^(.+?)@(.+)$/);
-    if (firefoxMatch) {
-      const fn = firefoxMatch[1] || "(anonymous)";
-      const loc = firefoxMatch[2] || "";
-      frames.push({ fn, loc });
-      if (!source2 && fn !== "(anonymous)") {
-        source2 = fn;
-      }
-    }
-  }
-  return { source: source2, frames };
-}
-function ErrorBoundary({ nodes, fallback, onError }) {
-  injectStyles();
+function ErrorBoundary({ nodes, fallback, onError, resetKeys }) {
+  injectStyles2();
   const [error, setError] = signal(null);
   const retry = () => {
     if (fallback) {
@@ -3827,6 +4452,22 @@ function ErrorBoundary({ nodes, fallback, onError }) {
     }
     setError(null);
   };
+  if (resetKeys && resetKeys.length > 0) {
+    let initialized = false;
+    effect(() => {
+      for (const k of resetKeys) {
+        try {
+          k();
+        } catch {
+        }
+      }
+      if (!initialized) {
+        initialized = true;
+        return;
+      }
+      if (error() !== null) retry();
+    });
+  }
   const handleError = (e) => {
     const errorObj = e instanceof Error ? e : new Error(String(e));
     setError(errorObj);
@@ -3834,110 +4475,7 @@ function ErrorBoundary({ nodes, fallback, onError }) {
     return errorObj;
   };
   const defaultFallback = (err, retryFn) => {
-    if (!_isDev8) {
-      return div({
-        class: "sibu-error-fallback",
-        nodes: [
-          div({
-            class: "sibu-error-header",
-            nodes: [h3({ nodes: "Something went wrong", class: "sibu-error-title" })]
-          }),
-          div({
-            class: "sibu-error-body",
-            nodes: [
-              p({ nodes: "An unexpected error occurred. Please try again.", class: "sibu-error-message" }),
-              div({
-                class: "sibu-error-actions",
-                nodes: [
-                  button({
-                    nodes: "Retry",
-                    class: "sibu-error-btn sibu-error-btn-retry",
-                    on: { click: retryFn }
-                  }),
-                  button({
-                    nodes: "Reload Page",
-                    class: "sibu-error-btn sibu-error-btn-reload",
-                    on: { click: () => location.reload() }
-                  })
-                ]
-              })
-            ]
-          })
-        ]
-      });
-    }
-    const { source: source2, frames } = parseStack(err);
-    const fullText = `${err.message}
-
-${err.stack || ""}`;
-    const copyBtn = button({
-      nodes: "Copy",
-      class: "sibu-error-copy-btn",
-      on: {
-        click: () => {
-          navigator.clipboard.writeText(fullText).then(() => {
-            copyBtn.textContent = "Copied!";
-            setTimeout(() => {
-              copyBtn.textContent = "Copy";
-            }, 1500);
-          });
-        }
-      }
-    });
-    const stackLines = frames.map(
-      (f, i2) => div({
-        nodes: [
-          span({ class: "sibu-line-num", nodes: String(i2 + 1) }),
-          span({ class: "sibu-stack-fn", nodes: f.fn }),
-          span({ class: "sibu-stack-loc", nodes: ` ${f.loc}` })
-        ]
-      })
-    );
-    return div({
-      class: "sibu-error-fallback",
-      nodes: [
-        div({
-          class: "sibu-error-header",
-          nodes: [
-            h3({ nodes: source2 ? `Error in ${source2}` : "Something went wrong", class: "sibu-error-title" }),
-            ...source2 ? [] : [span()]
-          ]
-        }),
-        div({
-          class: "sibu-error-body",
-          nodes: [
-            p({ nodes: err.message, class: "sibu-error-message" }),
-            ...frames.length > 0 ? [
-              div({
-                class: "sibu-error-stack-container",
-                nodes: [
-                  div({
-                    class: "sibu-error-stack-label",
-                    nodes: [span({ nodes: "Stack Trace" }), copyBtn]
-                  }),
-                  div({ class: "sibu-error-stack", nodes: [pre({ nodes: stackLines })] })
-                ]
-              })
-            ] : [],
-            div({
-              class: "sibu-error-actions",
-              nodes: [
-                button({
-                  nodes: "Retry",
-                  class: "sibu-error-btn sibu-error-btn-retry",
-                  on: { click: retryFn }
-                }),
-                button({
-                  nodes: "Reload Page",
-                  class: "sibu-error-btn sibu-error-btn-reload",
-                  on: { click: () => location.reload() }
-                })
-              ]
-            })
-          ]
-        })
-      ]
-    });
+    return ErrorDisplay({ error: err, severity: "error", onRetry: retryFn });
   };
   const tryRenderFallback = (err) => {
     const fn = fallback || defaultFallback;
@@ -4686,6 +5224,13 @@ var lintRules = {
         const line2 = lines[lineIdx];
         const trimmed = line2.trim();
         if (trimmed.startsWith("//") || trimmed.startsWith("*")) continue;
+        if (lineIdx > 0) {
+          const prevTrimmed = lines[lineIdx - 1].trim();
+          if (prevTrimmed.includes("sibujs-disable-next-line") && (prevTrimmed.includes("no-direct-dom-mutation") || !prevTrimmed.includes(" ", prevTrimmed.indexOf("sibujs-disable-next-line") + 25))) {
+            continue;
+          }
+        }
+        if (line2.includes("sibujs-disable") && !line2.includes("sibujs-disable-next-line")) continue;
         for (const { pattern: pattern2, name, suggestion } of mutationPatterns) {
           pattern2.lastIndex = 0;
           const match2 = pattern2.exec(line2);