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

package/dist/Ryunix.esm.js

@@ -1,7 +1,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
@@ -18,7 +17,6 @@ const createRenderState = () => ({
   effects: [],
 });
 
-// Singleton for backward compatibility, but allows testing with isolated instances
 let globalState = createRenderState();
 
 const getState = () => globalState;
@@ -96,7 +94,12 @@ const is = {
 
 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
@@ -251,6 +254,7 @@ const isNew = (prev, next) => (key) => {
  */
 const isGone = (next) => (key) => !(key in next);
 
+
 /**
  * Cancel effects for a single fiber
  * @param {Object} fiber - Fiber node
@@ -712,6 +716,8 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
     });
 };
 
+
+
 /**
  * Clear all children from a DOM element
  * @param {HTMLElement} container - DOM element to clear
@@ -1071,6 +1077,7 @@ const reconcileChildren = (wipFiber, elements) => {
         alternate: matchedFiber,
         effectTag: EFFECT_TAGS.UPDATE,
         hooks: matchedFiber.hooks,
+        stateError: matchedFiber.stateError,
         key: element.key,
         index,
       };
@@ -1215,6 +1222,11 @@ const haveDepsChanged = (oldDeps, newDeps) => {
 };
 
 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, () => { }]
@@ -1227,6 +1239,11 @@ const useStore = (initialState, priority = getCurrentPriority()) => {
 
 
 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, () => { }]
@@ -1271,14 +1288,12 @@ const useReducer = (reducer, initialState, init, defaultPriority = getCurrentPri
 
     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;
@@ -1298,6 +1313,11 @@ const useReducer = (reducer, initialState, init, defaultPriority = getCurrentPri
  * 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
@@ -1337,6 +1357,11 @@ const useEffect = (callback, deps) => {
  * 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 }
@@ -1371,6 +1396,11 @@ const useRef = (initialValue) => {
  * @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()
@@ -1649,8 +1679,26 @@ const findRoute = (routes, path) => {
  * `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(() => {
@@ -1955,6 +2003,11 @@ const useSwitch = (initialState = false) => {
  * @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
@@ -1989,6 +2042,14 @@ const useLayoutEffect = (callback, deps) => {
 // 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
@@ -2076,6 +2137,7 @@ var hooks = /*#__PURE__*/Object.freeze({
   NavLink: NavLink,
   RouterProvider: RouterProvider,
   createContext: createContext,
+  resetIdCounter: resetIdCounter,
   useCallback: useCallback,
   useDebounce: useDebounce,
   useDeferredValue: useDeferredValue,
@@ -2110,6 +2172,21 @@ const updateFunctionComponent = (fiber) => {
     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) {
@@ -2429,6 +2506,22 @@ function performUnitOfWork(fiber) {
   } 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
@@ -2530,7 +2623,7 @@ const workLoop = (deadline) => {
   }
 };
 
-// ... performUnitOfWork stays same ...
+
 
 const scheduleWork = (root, priority = getCurrentPriority()) => {
   const state = getState();
@@ -2603,7 +2696,12 @@ const render = (element, container) => {
 
 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
@@ -2641,11 +2739,17 @@ const init = (MainElement, root = '__ryunix', components = {}) => {
   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}`);
     }
@@ -2776,7 +2880,7 @@ const renderToStringImpl = (element) => {
       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) {
@@ -2934,7 +3038,7 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
       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) {
@@ -2968,6 +3072,9 @@ const renderToReadableStream = (element, options = {}) => {
   const state = getState();
   const encoder = new TextEncoder();
 
+  // Reset idCounter for deterministic useId values
+  resetIdCounter();
+
   return new ReadableStream({
     async start(controller) {
       const wasServerRendering = state.isServerRendering;
@@ -2980,7 +3087,7 @@ const renderToReadableStream = (element, options = {}) => {
       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);
@@ -2992,8 +3099,8 @@ const renderToReadableStream = (element, options = {}) => {
           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>`);
           }
         }
 
@@ -3012,6 +3119,10 @@ const renderToString = (element, options = {}) => {
   const wasServerRendering = state.isServerRendering;
   state.isServerRendering = true;
   state.ssrMetadata = {};
+  
+  // Reset idCounter for deterministic useId values
+  resetIdCounter();
+  
   try {
     return renderToStringImpl(element)
   } finally {
@@ -3042,18 +3153,12 @@ const renderToStringAsync = async (element, options = {}) => {
  * @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
 };
@@ -3294,6 +3399,312 @@ function createActionProxy(actionId) {
   };
 }
 
+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,
@@ -3304,6 +3715,7 @@ var Ryunix = /*#__PURE__*/Object.freeze({
   NavLink: NavLink,
   Priority: Priority,
   RouterProvider: RouterProvider,
+  RyunixDevOverlay: RyunixDevOverlay,
   ServerBoundary: ServerBoundary,
   Suspense: Suspense,
   batchUpdates: batchUpdates,
@@ -3327,6 +3739,7 @@ var Ryunix = /*#__PURE__*/Object.freeze({
   renderToReadableStream: renderToReadableStream,
   renderToString: renderToString,
   renderToStringAsync: renderToStringAsync,
+  resetIdCounter: resetIdCounter,
   safeRender: safeRender,
   shallowEqual: shallowEqual,
   useCallback: useCallback,
@@ -3357,5 +3770,5 @@ var Ryunix = /*#__PURE__*/Object.freeze({
 
 if (typeof window !== 'undefined') window.Ryunix = Ryunix;
 
-export { Children, ErrorBoundary, Fragment, hooks as Hooks, Image, Link, MDXContent, MDXProvider, NavLink, Priority, RouterProvider, ServerBoundary, Suspense, batchUpdates, cloneElement, createActionProxy, createContext, createElement, createPortal, deepEqual, Ryunix as default, defaultComponents, escapeHtml, forwardRef, getMDXComponents, getState, hydrate, init, isValidElement, lazy, memo, preload, profiler, render, renderToReadableStream, renderToString, renderToStringAsync, safeRender, shallowEqual, useCallback, useDebounce, useDeferredValue, useEffect, useHash, useId, useLayoutEffect, useMDXComponents, useMemo, useMetadata, usePathname, usePersistentStore, usePersistentStore as usePersitentStore, useProfiler, useQuery, useReducer, useRef, useRouter, useSearchParams, useStore, useStorePriority, useSwitch, useThrottle, useTransition, withProfiler };
+export { Children, ErrorBoundary, Fragment, hooks as Hooks, Image, Link, MDXContent, MDXProvider, NavLink, Priority, RouterProvider, RyunixDevOverlay, ServerBoundary, Suspense, batchUpdates, cloneElement, createActionProxy, createContext, createElement, createPortal, deepEqual, Ryunix as default, defaultComponents, escapeHtml, forwardRef, getMDXComponents, getState, hydrate, init, isValidElement, lazy, memo, preload, profiler, render, renderToReadableStream, renderToString, renderToStringAsync, resetIdCounter, safeRender, shallowEqual, useCallback, useDebounce, useDeferredValue, useEffect, useHash, useId, useLayoutEffect, useMDXComponents, useMemo, useMetadata, usePathname, usePersistentStore, usePersistentStore as usePersitentStore, useProfiler, useQuery, useReducer, useRef, useRouter, useSearchParams, useStore, useStorePriority, useSwitch, useThrottle, useTransition, withProfiler };
 //# sourceMappingURL=Ryunix.esm.js.map