sibujs 1.0.4 → 1.0.5

package/dist/build.cjs

@@ -3611,35 +3611,123 @@ var errorBoundaryStyles = `
   }
 
   .sibu-error-fallback {
-    border: 2px solid #dc3545;
+    border: 1px solid #e5484d;
     border-radius: 8px;
-    padding: 20px;
+    padding: 0;
     margin: 10px 0;
-    background: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
-    box-shadow: 0 2px 12px rgba(220, 53, 69, 0.15);
+    background: #1a1a2e;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: #e1e1e6;
+    overflow: hidden;
+  }
+
+  .sibu-error-fallback .sibu-error-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background: #e5484d;
+    color: white;
   }
 
   .sibu-error-fallback .sibu-error-title {
-    margin: 0 0 12px 0;
-    color: #dc3545;
-    font-size: 1.1em;
+    margin: 0;
+    font-size: 0.95em;
     font-weight: 600;
   }
 
+  .sibu-error-fallback .sibu-error-source {
+    margin-left: auto;
+    font-size: 0.8em;
+    opacity: 0.9;
+    font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
+  }
+
+  .sibu-error-fallback .sibu-error-body {
+    padding: 16px;
+  }
+
   .sibu-error-fallback .sibu-error-message {
     font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
-    background-color: rgba(0, 0, 0, 0.04);
-    padding: 10px 14px;
-    border-radius: 6px;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    margin: 10px 0;
-    color: #495057;
+    margin: 0 0 12px 0;
+    color: #f1a9a0;
     word-break: break-word;
     font-size: 0.9em;
     line-height: 1.5;
   }
 
+  .sibu-error-fallback .sibu-error-stack-container {
+    position: relative;
+    margin: 0 0 12px 0;
+    border-radius: 6px;
+    border: 1px solid #2a2a3e;
+    background: #12121f;
+    overflow: hidden;
+  }
+
+  .sibu-error-fallback .sibu-error-stack-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background: #1e1e32;
+    border-bottom: 1px solid #2a2a3e;
+    font-size: 0.75em;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .sibu-error-fallback .sibu-error-copy-btn {
+    background: transparent;
+    border: 1px solid #3a3a4e;
+    border-radius: 4px;
+    color: #888;
+    cursor: pointer;
+    padding: 2px 8px;
+    font-size: 1em;
+    transition: all 0.15s ease;
+  }
+
+  .sibu-error-fallback .sibu-error-copy-btn:hover {
+    background: #2a2a3e;
+    color: #ccc;
+    border-color: #4a4a5e;
+  }
+
+  .sibu-error-fallback .sibu-error-stack pre {
+    margin: 0;
+    padding: 12px;
+    overflow-x: auto;
+    font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
+    font-size: 0.82em;
+    line-height: 1.6;
+    color: #a0a0b0;
+  }
+
+  .sibu-error-fallback .sibu-error-stack .sibu-line-num {
+    display: inline-block;
+    width: 3ch;
+    margin-right: 12px;
+    color: #555;
+    text-align: right;
+    user-select: none;
+  }
+
+  .sibu-error-fallback .sibu-error-stack .sibu-stack-fn {
+    color: #7ec8e3;
+  }
+
+  .sibu-error-fallback .sibu-error-stack .sibu-stack-loc {
+    color: #666;
+  }
+
+  .sibu-error-fallback .sibu-error-actions {
+    display: flex;
+    gap: 8px;
+  }
+
   .sibu-error-fallback .sibu-error-btn {
     display: inline-flex;
     align-items: center;
@@ -3648,22 +3736,28 @@ var errorBoundaryStyles = `
     border: none;
     border-radius: 6px;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
-    transition: all 0.2s ease;
-    margin-top: 8px;
-    background-color: #dc3545;
+    transition: all 0.15s ease;
+  }
+
+  .sibu-error-fallback .sibu-error-btn-retry {
+    background: #e5484d;
     color: white;
   }
 
-  .sibu-error-fallback .sibu-error-btn:hover {
-    background-color: #c82333;
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
+  .sibu-error-fallback .sibu-error-btn-retry:hover {
+    background: #d13438;
+  }
+
+  .sibu-error-fallback .sibu-error-btn-reload {
+    background: #2a2a3e;
+    color: #ccc;
+    border: 1px solid #3a3a4e;
   }
 
-  .sibu-error-fallback .sibu-error-btn:active {
-    transform: translateY(0);
+  .sibu-error-fallback .sibu-error-btn-reload:hover {
+    background: #3a3a4e;
   }
 `;
 var stylesInjected = false;
@@ -3687,6 +3781,35 @@ 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();
   const [error, setError] = signal(null);
@@ -3702,24 +3825,112 @@ function ErrorBoundary({ nodes, fallback, onError }) {
     onError?.(errorObj);
     return errorObj;
   };
-  const defaultFallback = (err, retryFn) => div({
-    class: "sibu-error-fallback",
-    nodes: [
-      h3({
-        nodes: "Something went wrong",
-        class: "sibu-error-title"
-      }),
-      p({
-        nodes: _isDev8 ? err.message : "An unexpected error occurred. Please try again.",
-        class: "sibu-error-message"
-      }),
-      button({
-        nodes: "Retry",
-        class: "sibu-error-btn",
-        on: { click: retryFn }
+  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() }
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    });
+  };
   const tryRenderFallback = (err) => {
     const fn = fallback || defaultFallback;
     try {

package/dist/build.js

@@ -1,6 +1,6 @@
 import {
   index_exports
-} from "./chunk-32ZISOLJ.js";
+} from "./chunk-VAU366PN.js";
 import "./chunk-EWFVA3TJ.js";
 import "./chunk-CZUGLNJS.js";
 import "./chunk-Z65KYU7I.js";