@unsetsoft/ryunixjs 1.2.5-canary.0 → 1.2.5-canary.2

package/dist/Ryunix.umd.js

@@ -7,7 +7,6 @@
   // Improved state management - avoid global mutable object
   // Instead, create a state manager that can be instantiated per render tree
 
-
   const rIC =
     typeof requestIdleCallback !== 'undefined'
       ? requestIdleCallback
@@ -24,7 +23,6 @@
     effects: [],
   });
 
-  // Singleton for backward compatibility, but allows testing with isolated instances
   let globalState = createRenderState();
 
   const getState = () => globalState;
@@ -102,7 +100,12 @@
 
   const nextValidSibling$1 = (node) => {
     let next = node;
-    while (next && (next.nodeType === 3 && !next.nodeValue.trim() || next.nodeType === 8)) {
+    while (
+      next &&
+      ((next.nodeType === 3 && !next.nodeValue.trim()) ||
+        next.nodeType === 8 ||
+        (next.nodeType === 1 && next.hasAttribute('data-ryunix-ssr')))
+    ) {
       next = next.nextSibling;
     }
     return next
@@ -257,6 +260,7 @@
    */
   const isGone = (next) => (key) => !(key in next);
 
+
   /**
    * Cancel effects for a single fiber
    * @param {Object} fiber - Fiber node
@@ -718,6 +722,8 @@
       });
   };
 
+
+
   /**
    * Clear all children from a DOM element
    * @param {HTMLElement} container - DOM element to clear
@@ -1077,6 +1083,7 @@
           alternate: matchedFiber,
           effectTag: EFFECT_TAGS.UPDATE,
           hooks: matchedFiber.hooks,
+          stateError: matchedFiber.stateError,
           key: element.key,
           index,
         };
@@ -1221,6 +1228,11 @@
   };
 
   const useStore = (initialState, priority = getCurrentPriority()) => {
+    // SSR safety check - more reliable than state.isServerRendering
+    if (typeof window === 'undefined') {
+      return [is.function(initialState) ? initialState() : initialState, () => { }]
+    }
+
     const state = getState();
     if (state.isServerRendering) {
       return [is.function(initialState) ? initialState() : initialState, () => { }]
@@ -1233,6 +1245,11 @@
 
 
   const useReducer = (reducer, initialState, init, defaultPriority = getCurrentPriority()) => {
+    // SSR safety check - more reliable than state.isServerRendering
+    if (typeof window === 'undefined') {
+      return [init ? init(initialState) : initialState, () => { }]
+    }
+
     const state = getState();
     if (state.isServerRendering) {
       return [init ? init(initialState) : initialState, () => { }]
@@ -1277,14 +1294,12 @@
 
       if (!activeRoot) return
 
-      currentState.wipRoot = {
+      const newRoot = {
         dom: activeRoot.dom,
         props: activeRoot.props,
         alternate: currentState.currentRoot || null,
       };
-      currentState.deletions = [];
-      currentState.hookIndex = 0;
-      queueUpdate(() => scheduleWork$1(currentState.wipRoot, priority));
+      queueUpdate(() => scheduleWork$1(newRoot, priority));
     };
 
     wipFiber.hooks[hookIndex] = hook;
@@ -1304,6 +1319,11 @@
    * of the values in the `deps` array have changed since the last render. If the `deps` array
    */
   const useEffect = (callback, deps) => {
+    // SSR safety check - more reliable than state.isServerRendering
+    if (typeof window === 'undefined') {
+      return
+    }
+
     const state = getState();
     if (state.isServerRendering) {
       return
@@ -1343,6 +1363,11 @@
    * contains the initial value passed to the `useRef` function.
    */
   const useRef = (initialValue) => {
+    // SSR safety check - more reliable than state.isServerRendering
+    if (typeof window === 'undefined') {
+      return { current: initialValue }
+    }
+
     const state = getState();
     if (state.isServerRendering) {
       return { current: initialValue }
@@ -1377,6 +1402,11 @@
    * @returns The `useMemo` function is returning the `value` calculated by the `compute` function.
    */
   const useMemo = (compute, deps) => {
+    // SSR safety check - more reliable than state.isServerRendering
+    if (typeof window === 'undefined') {
+      return compute()
+    }
+
     const state = getState();
     if (state.isServerRendering) {
       return compute()
@@ -1655,8 +1685,26 @@
    * `value` prop set to `contextValue`, and wrapping the `children` within a `Fragment`.
    */
   const RouterProvider = ({ routes, children }) => {
+    // SSR: Return server-safe version without hooks
+    if (typeof window === 'undefined') {
+      const location = '/';
+      const currentRouteData = findRoute(routes, location) || {};
+      const contextValue = {
+        location,
+        params: currentRouteData.params || {},
+        query: {},
+        navigate: () => {},
+        route: currentRouteData.route,
+      };
+      return createElement(
+        RouterContext.Provider,
+        { value: contextValue },
+        Fragment({ children }),
+      )
+    }
+
     const [location, setLocation] = useStore(
-      typeof window !== 'undefined' ? window.location.pathname : '/'
+      window.location.pathname
     );
 
     useEffect(() => {
@@ -1961,6 +2009,11 @@
    * @param {Array} deps - Dependencies array
    */
   const useLayoutEffect = (callback, deps) => {
+    // SSR safety check - more reliable than state.isServerRendering
+    if (typeof window === 'undefined') {
+      return
+    }
+
     const state = getState();
     if (state.isServerRendering) {
       return
@@ -1995,6 +2048,14 @@
   // Counter for deterministic ID generation
   let idCounter = 0;
 
+  /**
+   * Reset the idCounter for useId - call this before each SSR renderToString
+   * to ensure deterministic IDs across multiple renders
+   */
+  const resetIdCounter = () => {
+    idCounter = 0;
+  };
+
   /**
    * useId - Generate a deterministic, unique ID that is stable across SSR and hydration.
    * @returns {string} A unique ID string
@@ -2082,6 +2143,7 @@
     NavLink: NavLink,
     RouterProvider: RouterProvider,
     createContext: createContext,
+    resetIdCounter: resetIdCounter,
     useCallback: useCallback,
     useDebounce: useDebounce,
     useDeferredValue: useDeferredValue,
@@ -2116,6 +2178,21 @@
       fiber.effectTag = EFFECT_TAGS.HYDRATE;
     }
 
+    // Memo bailout: skip re-render if props haven't changed
+    if (fiber.type._isMemo && fiber.alternate) {
+      const { children: _pc, ...prevRest } = fiber.alternate.props || {};
+      const { children: _nc, ...nextRest } = fiber.props || {};
+      if (fiber.type._arePropsEqual(prevRest, nextRest)) {
+        fiber.hooks = fiber.alternate.hooks;
+        const oldChild = fiber.alternate.child;
+        if (oldChild) {
+          oldChild.parent = fiber;
+          fiber.child = oldChild;
+        }
+        return
+      }
+    }
+
     let children = [fiber.type(fiber.props)];
 
     if (fiber.type._contextId && fiber.props.value !== undefined) {
@@ -2435,6 +2512,22 @@
     } catch (error) {
       if (process.env.NODE_ENV !== 'production') {
         console.error('[Ryunix ErrorBoundary] Caught error during render:', error);
+        
+        try {
+          // Attempt to attach original JSX source map for DevOverlay lookup
+          const src = fiber.props && fiber.props.__source;
+          if (src && error && typeof error === 'object') {
+            error.__ryunix_source = src;
+          }
+          
+          let targetFiber = fiber;
+          while (!error.__ryunix_source && targetFiber) {
+             if (targetFiber.props && targetFiber.props.__source) {
+               error.__ryunix_source = targetFiber.props.__source;
+             }
+             targetFiber = targetFiber.parent;
+          }
+        } catch(e) {}
       }
 
       // Traverse upwards to find nearest ErrorBoundary
@@ -2536,7 +2629,7 @@
     }
   };
 
-  // ... performUnitOfWork stays same ...
+
 
   const scheduleWork = (root, priority = getCurrentPriority()) => {
     const state = getState();
@@ -2609,7 +2702,12 @@
 
   const nextValidSibling = (node) => {
     let next = node;
-    while (next && (next.nodeType === 3 && !next.nodeValue.trim() || next.nodeType === 8)) {
+    while (
+      next &&
+      ((next.nodeType === 3 && !next.nodeValue.trim()) ||
+        next.nodeType === 8 ||
+        (next.nodeType === 1 && next.hasAttribute('data-ryunix-ssr')))
+    ) {
       next = next.nextSibling;
     }
     return next
@@ -2647,11 +2745,17 @@
     state.isHydrating = false;
     state.hydrationFailed = false;
 
+    // Auto-detect SSR based on child nodes - no need to manually set process.env.RYUNIX_SSR
+    const hasChildNodes = state.containerRoot && state.containerRoot.hasChildNodes();
+
     if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
-      console.log(`[Ryunix Debug] init: RYUNIX_SSR=${process.env.RYUNIX_SSR}, hasChildNodes=${state.containerRoot.hasChildNodes()}`);
+      console.log(`[Ryunix Debug] init: hasChildNodes=${hasChildNodes}, has SSR content detected.`);
     }
 
-    if (process.env.RYUNIX_SSR && state.containerRoot.hasChildNodes()) {
+    // Auto-detect: if there's existing content, try to hydrate (SSR)
+    // If explicitly disabled via RYUNIX_SSR=false, skip hydration
+    const ssrEnabled = process.env.RYUNIX_SSR !== 'false';
+    if (hasChildNodes && ssrEnabled) {
       if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
         console.log(`[Ryunix Debug] init: SSR content detected. Starting hydration on #${root}`);
       }
@@ -2782,7 +2886,7 @@
         if (value) {
           attributes += ` class="${escapeHtml(value)}"`;
         }
-      } else if (!key.startsWith('on')) { // Ignore event listeners
+      } else if (!key.startsWith('on') && key !== '__source' && key !== '__self') {
         if (typeof value === 'boolean') {
           if (value) attributes += ` ${key}=""`;
         } else if (value != null) {
@@ -2940,7 +3044,7 @@ function $RC(id, templateId) {
         if (value) {
           attributes += ` class="${escapeHtml(value)}"`;
         }
-      } else if (!key.startsWith('on')) {
+      } else if (!key.startsWith('on') && key !== '__source' && key !== '__self') {
         if (typeof value === 'boolean') {
           if (value) attributes += ` ${key}=""`;
         } else if (value != null) {
@@ -2974,6 +3078,9 @@ function $RC(id, templateId) {
     const state = getState();
     const encoder = new TextEncoder();
 
+    // Reset idCounter for deterministic useId values
+    resetIdCounter();
+
     return new ReadableStream({
       async start(controller) {
         const wasServerRendering = state.isServerRendering;
@@ -2986,7 +3093,7 @@ function $RC(id, templateId) {
         try {
           // 0. Inject RC helper script first
           const nonceAttr = options.nonce ? ` nonce="${options.nonce}"` : '';
-          push(`<script${nonceAttr}>${RC_SCRIPT}</script>`);
+          push(`<script${nonceAttr} data-ryunix-ssr>${RC_SCRIPT}</script>`);
 
           // 1. Render initial tree (with fallbacks)
           await renderToStreamImpl(element, push, suspenseTasks);
@@ -2998,8 +3105,8 @@ function $RC(id, templateId) {
             const task = suspenseTasks.shift();
             const res = await task;
             if (res.success) {
-              push(`<template id="P:${res.id}">${res.content}</template>`);
-              push(`<script${nonceAttr}>$RC("S:${res.id}", "P:${res.id}")</script>`);
+              push(`<template id="P:${res.id}" data-ryunix-ssr>${res.content}</template>`);
+              push(`<script${nonceAttr} data-ryunix-ssr>$RC("S:${res.id}", "P:${res.id}")</script>`);
             }
           }
 
@@ -3018,6 +3125,10 @@ function $RC(id, templateId) {
     const wasServerRendering = state.isServerRendering;
     state.isServerRendering = true;
     state.ssrMetadata = {};
+    
+    // Reset idCounter for deterministic useId values
+    resetIdCounter();
+    
     try {
       return renderToStringImpl(element)
     } finally {
@@ -3048,18 +3159,12 @@ function $RC(id, templateId) {
    * @returns {Function} Memoized component
    */
   const memo = (Component, arePropsEqual = shallowEqual) => {
-    let prevProps = null;
-    let prevResult = null;
-
     const MemoizedComponent = (props) => {
-      if (prevProps && arePropsEqual(prevProps, props)) {
-        return prevResult
-      }
-      prevProps = props;
-      prevResult = Component(props);
-      return prevResult
+      return Component(props)
     };
-
+    MemoizedComponent._isMemo = true;
+    MemoizedComponent._wrappedComponent = Component;
+    MemoizedComponent._arePropsEqual = arePropsEqual;
     MemoizedComponent.displayName = `Memo(${Component.displayName || Component.name || 'Component'})`;
     return MemoizedComponent
   };
@@ -3300,6 +3405,312 @@ function $RC(id, templateId) {
     };
   }
 
+  function RyunixDevOverlay(propsOrError) {
+    // If propsOrError is an event or wrapped object, try to extract error
+    const rawError = propsOrError && propsOrError.nativeEvent 
+      ? propsOrError.error
+      : propsOrError;
+      
+    let error = rawError instanceof Error || (rawError && rawError.message) 
+      ? rawError 
+      : (rawError?.error || rawError);
+
+    // Debug string if error is broken
+    const debugObjectStr = JSON.stringify(propsOrError, Object.getOwnPropertyNames(propsOrError || {}));
+
+    const [snippet, setSnippet] = useStore(null);
+    const [startLine, setStartLine] = useStore(1);
+    const [errorFile, setErrorFile] = useStore('');
+    const [errorLine, setErrorLine] = useStore(0);
+
+    // Normalize stack ensuring we have lines
+    let stackLines = [];
+    if (error && error.stack) {
+      stackLines = typeof error.stack === 'string' ? error.stack.split('\n').filter(line => {
+        const trimmed = line.trim();
+        if (!trimmed) return false;
+        if (trimmed.includes('node_modules')) return false;
+        // Filter out internal Ryunix core framework files to isolate user code
+        const isInternal = [
+          'components.js', 'workers.js', 'reconciler.js', 'commits.js', 
+          'hooks.js', 'errorBoundary.js', 'serverBoundary.js', 'app-router.js', 
+          'app-router-server.js', 'render.js', 'createElement.js', 'index.js'
+        ].some(file => trimmed.includes(file));
+        return !isInternal;
+      }) : error.stack;
+    }
+    
+    const errorName = error && error.name ? error.name : 'Unknown Error Type';
+    const errorMessage = error && error.message ? error.message : `Raw unhandled error. Debug: ${debugObjectStr}`;
+
+    useEffect(() => {
+      let targetPath = null;
+      let targetLine = null;
+
+      // 1. Direct JSX __source mapping (injected by Webpack/SWC)
+      if (error && error.__ryunix_source && error.__ryunix_source.fileName) {
+        targetPath = error.__ryunix_source.fileName;
+        targetLine = error.__ryunix_source.lineNumber;
+      }
+
+      // 2. Fallback to Regex Stack Parsing
+      if (!targetPath || !targetLine) {
+        for (let i = 0; i < stackLines.length; i++) {
+          const line = stackLines[i];
+          if (!line.includes(':')) continue;
+
+          // Deterministic string-based parsing (no regex on uncontrolled data)
+          let matchedPath = null;
+          let matchedLine = null;
+
+          // V8 format: "at fn (file:line:col)" — extract content between parens
+          const parenOpen = line.indexOf('(');
+          const parenClose = line.lastIndexOf(')');
+          if (parenOpen !== -1 && parenClose > parenOpen) {
+            const inner = line.slice(parenOpen + 1, parenClose);
+            const c2 = inner.lastIndexOf(':');
+            const c1 = c2 > 0 ? inner.lastIndexOf(':', c2 - 1) : -1;
+            if (c1 > 0) {
+              const col = inner.slice(c2 + 1);
+              const ln = inner.slice(c1 + 1, c2);
+              if (/^\d+$/.test(ln) && /^\d+$/.test(col)) {
+                matchedPath = inner.slice(0, c1);
+                matchedLine = parseInt(ln, 10);
+              }
+            }
+          }
+
+          // V8 format without parens: "at file:line:col"
+          if (!matchedPath) {
+            const trimmed = line.trim();
+            if (trimmed.startsWith('at ')) {
+              const rest = trimmed.slice(3).trim();
+              const c2 = rest.lastIndexOf(':');
+              const c1 = c2 > 0 ? rest.lastIndexOf(':', c2 - 1) : -1;
+              if (c1 > 0) {
+                const col = rest.slice(c2 + 1);
+                const ln = rest.slice(c1 + 1, c2);
+                if (/^\d+$/.test(ln) && /^\d+$/.test(col)) {
+                  matchedPath = rest.slice(0, c1);
+                  matchedLine = parseInt(ln, 10);
+                }
+              }
+            }
+          }
+
+          // Ryunix format: "file.ryx:line" or "file.jsx:line"
+          if (!matchedPath) {
+            const exts = ['.ryx', '.jsx', '.js', '.ts', '.tsx'];
+            const c1 = line.lastIndexOf(':');
+            if (c1 > 0) {
+              const ln = line.slice(c1 + 1).trim();
+              const filePart = line.slice(0, c1).trim();
+              if (/^\d+$/.test(ln) && exts.some(ext => filePart.endsWith(ext))) {
+                matchedPath = filePart;
+                matchedLine = parseInt(ln, 10);
+              }
+            }
+          }
+
+          if (matchedPath && matchedLine) {
+            targetPath = matchedPath;
+            targetLine = matchedLine;
+            break;
+          }
+        }
+      }
+
+      if (targetPath && targetLine) {
+        setErrorFile(targetPath);
+        setErrorLine(targetLine);
+        fetch(`/_ryunix/source?file=${encodeURIComponent(targetPath)}&line=${targetLine}`)
+          .then(res => res.json())
+          .then(data => {
+            if (data.snippet) {
+              setSnippet(data.snippet);
+              setStartLine(data.startLine);
+            }
+          })
+          .catch(err => console.error('Failed to fetch source snippet', err));
+      }
+    }, [error]);
+
+    const overlayStyle = {
+      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 2147483647,
+      backgroundColor: 'rgba(0, 0, 0, 0.85)', backdropFilter: 'blur(8px)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      padding: '20px', fontFamily: 'system-ui, -apple-system, sans-serif'
+    };
+
+    const modalStyle = {
+      backgroundColor: '#0c0c0c', width: '100%', maxWidth: '1000px', maxHeight: '90vh',
+      borderRadius: '12px', boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.8)',
+      display: 'flex', flexDirection: 'column', overflow: 'hidden',
+      border: '1px solid #333'
+    };
+
+    const headerStyle = {
+      backgroundColor: '#161616', padding: '16px 24px', borderBottom: '1px solid #333',
+      display: 'flex', justifyContent: 'space-between', alignItems: 'center'
+    };
+
+    const badgeStyle = {
+      backgroundColor: 'rgba(239, 68, 68, 0.2)', color: '#ef4444', padding: '4px 8px',
+      borderRadius: '4px', fontSize: '13px', fontWeight: 'bold', textTransform: 'uppercase',
+      letterSpacing: '0.05em'
+    };
+
+    const contentStyle = {
+      padding: '32px', overflowY: 'auto', flex: 1, color: '#fff'
+    };
+
+    const titleStyle = {
+      fontSize: '24px', fontWeight: 'bold', marginBottom: '24px',
+      fontFamily: 'ui-monospace, monospace', wordBreak: 'break-word', lineHeight: 1.4
+    };
+
+    const snippetContainerStyle = {
+      backgroundColor: '#000', borderRadius: '8px', border: '1px solid #333',
+      padding: '16px', fontFamily: 'ui-monospace, monospace', fontSize: '14px',
+      overflowX: 'auto', color: '#d1d5db', marginBottom: '32px',
+      whiteSpace: 'pre-wrap',
+      maxHeight: '150px',
+      height: 'auto'
+    };
+
+    const lineStyle = (isErrorLine) => ({
+      display: 'flex',
+      backgroundColor: isErrorLine ? 'rgba(239, 68, 68, 0.15)' : 'transparent',
+      padding: '2px 8px',
+      borderRadius: '4px',
+      borderLeft: isErrorLine ? '3px solid #ef4444' : '3px solid transparent'
+    });
+
+    const snippetLines = snippet ? snippet.split('\n') : [];
+
+    let badgeText = 'UNHANDLED RUNTIME ERROR';
+    if (errorName && errorName !== 'Error' && errorName !== 'Unknown Error Type') {
+      badgeText = errorName.replace(/([a-z])([A-Z])/g, '$1 $2').toUpperCase();
+    }
+
+    return createElement('div', { style: overlayStyle },
+      createElement('div', { style: modalStyle },
+        createElement('div', { style: headerStyle },
+          createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
+            createElement('span', { style: badgeStyle }, badgeText),
+            createElement('span', { style: { color: '#9ca3af', fontSize: '14px' } }, 'Ryunix Development')
+          ),
+          createElement('button', {
+            onClick: () => window.location.reload(),
+            style: { background: 'none', border: 'none', color: '#9ca3af', cursor: 'pointer', outline: 'none' },
+            title: 'Reload page'
+          },
+            createElement('svg', { width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' },
+              createElement('path', { d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' }),
+              createElement('path', { d: 'M3 3v5h5' })
+            )
+          )
+        ),
+        createElement('div', { style: contentStyle },
+          createElement('h1', { style: titleStyle },
+            createElement('span', { style: { color: '#f87171' } }, errorName),
+            ': ', errorMessage
+          ),
+
+          errorFile && createElement('div', { style: { marginBottom: '16px', color: '#9ca3af', fontSize: '14px', display: 'flex', alignItems: 'center', gap: '8px' } },
+            createElement('svg', { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' },
+              createElement('path', { d: 'M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z' }),
+              createElement('polyline', { points: '13 2 13 9 20 9' })
+            ),
+            errorFile, ':', errorLine
+          ),
+
+          snippet && createElement('div', { style: snippetContainerStyle },
+            createElement('div', { style: { display: 'flex', flexDirection: 'column' } },
+              ...snippetLines.map((lineText, index) => {
+                const currentLineNumber = startLine + index;
+                const isErrorLine = currentLineNumber === errorLine;
+                return createElement('div', { key: index, style: lineStyle(isErrorLine) },
+                  createElement('span', { style: { color: '#6b7280', width: '40px', userSelect: 'none', textAlign: 'right', marginRight: '16px', display: 'inline-block' } }, currentLineNumber),
+                  createElement('span', { style: { color: isErrorLine ? '#f87171' : '#e5e7eb', whiteSpace: 'pre' } }, lineText || ' ')
+                );
+              })
+            )
+          ),
+
+          createElement('div', { style: { marginBottom: '16px' } },
+            createElement('p', { style: { color: '#9ca3af', fontSize: '14px', marginBottom: '8px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Call Stack'),
+            createElement('div', { style: snippetContainerStyle },
+              stackLines.length > 0 ? createElement('ul', { style: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '12px' } },
+                ...stackLines.map((line, i) => {
+                  if (i === 0 && (line.startsWith('Error:') || line.startsWith('TypeError:'))) return null;
+                  
+                  // Deterministic string-based stack frame parsing (no polynomial regex)
+                  const trimmed = line.trim();
+                  let fnName = '<anonymous>';
+                  let filePath = line;
+
+                  // V8 format: "at fnName (file:line:col)" or "at file:line:col"
+                  if (trimmed.startsWith('at ')) {
+                    const rest = trimmed.slice(3);
+                    const parenOpen = rest.indexOf('(');
+                    const parenClose = rest.lastIndexOf(')');
+                    if (parenOpen !== -1 && parenClose > parenOpen) {
+                      fnName = rest.slice(0, parenOpen).trim() || '<anonymous>';
+                      filePath = rest.slice(parenOpen + 1, parenClose);
+                    } else {
+                      // "at file:line:col" — no function name
+                      if (rest.includes(':')) {
+                        fnName = '<anonymous>';
+                      } else {
+                        fnName = rest;
+                      }
+                      filePath = rest;
+                    }
+                  }
+                  // Firefox format: "fnName@file:line:col"
+                  else if (trimmed.includes('@')) {
+                    const atIdx = trimmed.indexOf('@');
+                    fnName = trimmed.slice(0, atIdx) || '<anonymous>';
+                    filePath = trimmed.slice(atIdx + 1);
+                  }
+                  // Ryunix format: "fnName file.ext:line"
+                  else {
+                    const exts = ['.ryx', '.jsx', '.js', '.ts', '.tsx'];
+                    const parts = trimmed.split(/\s+/);
+                    if (parts.length >= 2) {
+                      const lastPart = parts[parts.length - 1];
+                      const colonIdx = lastPart.indexOf(':');
+                      const fileCandidate = colonIdx > 0 ? lastPart.slice(0, colonIdx) : lastPart;
+                      if (exts.some(ext => fileCandidate.endsWith(ext))) {
+                        fnName = parts.slice(0, -1).join(' ');
+                        filePath = lastPart;
+                      } else {
+                        fnName = parts[0];
+                        filePath = parts.slice(1).join(' ');
+                      }
+                    }
+                  }
+
+                  return createElement('li', { key: i },
+                    createElement('span', { style: { color: '#60a5fa', fontWeight: 600 } }, fnName),
+                    createElement('div', { style: { color: '#6b7280', marginTop: '4px', paddingLeft: '16px', display: 'flex', alignItems: 'center', gap: '8px' } },
+                      createElement('svg', { width: '12', height: '12', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' },
+                        createElement('path', { d: 'M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z' }),
+                        createElement('polyline', { points: '13 2 13 9 20 9' })
+                      ),
+                      filePath
+                    )
+                  );
+                })
+              ) : createElement('div', { style: { color: '#6b7280', fontStyle: 'italic' } }, 'No stack trace available.')
+            )
+          )
+        )
+      )
+    );
+  }
+
   var Ryunix = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Children: Children,
@@ -3310,6 +3721,7 @@ function $RC(id, templateId) {
     NavLink: NavLink,
     Priority: Priority,
     RouterProvider: RouterProvider,
+    RyunixDevOverlay: RyunixDevOverlay,
     ServerBoundary: ServerBoundary,
     Suspense: Suspense,
     batchUpdates: batchUpdates,
@@ -3333,6 +3745,7 @@ function $RC(id, templateId) {
     renderToReadableStream: renderToReadableStream,
     renderToString: renderToString,
     renderToStringAsync: renderToStringAsync,
+    resetIdCounter: resetIdCounter,
     safeRender: safeRender,
     shallowEqual: shallowEqual,
     useCallback: useCallback,
@@ -3374,6 +3787,7 @@ function $RC(id, templateId) {
   exports.NavLink = NavLink;
   exports.Priority = Priority;
   exports.RouterProvider = RouterProvider;
+  exports.RyunixDevOverlay = RyunixDevOverlay;
   exports.ServerBoundary = ServerBoundary;
   exports.Suspense = Suspense;
   exports.batchUpdates = batchUpdates;
@@ -3400,6 +3814,7 @@ function $RC(id, templateId) {
   exports.renderToReadableStream = renderToReadableStream;
   exports.renderToString = renderToString;
   exports.renderToStringAsync = renderToStringAsync;
+  exports.resetIdCounter = resetIdCounter;
   exports.safeRender = safeRender;
   exports.shallowEqual = shallowEqual;
   exports.useCallback = useCallback;