@keak/sdk 2.0.1 → 2.0.3

package/dist/index.cjs.js

@@ -35,301 +35,88 @@ var css_248z$1 = "@import \"./toolbar/styles/toolbar.css\";.keak-toolbar,.keak-t
 styleInject(css_248z$1);
 
 /**
- * Try to inject source locations using jsx-tool (primary method)
- * jsx-tool may inject source locations directly into elements or via WebSocket
+ * Find the internal React fiber node from a DOM element
  */
-function injectSourceLocationsViaJsxTool() {
-    if (typeof window === 'undefined')
-        return 0;
-    let injectedCount = 0;
-    // Check for jsx-tool injected attributes directly on elements
-    // jsx-tool may inject data-jsx-source or similar attributes
-    const allElements = document.querySelectorAll('*');
-    // Check for jsx-tool WebSocket URL (primary indicator that jsx-tool is set up)
-    // According to jsx-tool docs, this is set by the Vite plugin or manual script tag
-    const jsxToolWsUrl = window.__JSX_TOOL_DEV_SERVER_WS_URL__;
-    // Also check for other jsx-tool indicators
-    const hasJsxToolGlobal = !!jsxToolWsUrl || !!window.__JSX_TOOL__ || !!window.__JSX_TOOL_SOURCE_MAP__ || !!window.__JSX_TOOL_WS__;
-    if (jsxToolWsUrl) {
-        console.log('[Keak] 🔍 jsx-tool WebSocket URL detected:', jsxToolWsUrl);
-    }
-    else if (hasJsxToolGlobal) {
-        console.log('[Keak] 🔍 jsx-tool globals detected (but no WS URL):', {
-            __JSX_TOOL__: !!window.__JSX_TOOL__,
-            __JSX_TOOL_SOURCE_MAP__: !!window.__JSX_TOOL_SOURCE_MAP__,
-            __JSX_TOOL_WS__: !!window.__JSX_TOOL_WS__
-        });
+function getFiberFromNode(node) {
+    try {
+        // React stores fiber on DOM nodes with keys starting with __react
+        const key = Object.keys(node).find(k => k.startsWith('__reactFiber') ||
+            k.startsWith('__reactInternalInstance'));
+        if (key) {
+            const fiber = node[key];
+            return fiber;
+        }
+        // Fallback: search through all properties for React-like objects
+        const allValues = Object.values(node);
+        const fiberCandidate = allValues.find((v) => v &&
+            typeof v === 'object' &&
+            v.hasOwnProperty('memoizedProps') &&
+            v.hasOwnProperty('return') &&
+            (v.hasOwnProperty('type') || v.hasOwnProperty('elementType')));
+        return fiberCandidate;
     }
-    allElements.forEach((element) => {
-        if (!(element instanceof HTMLElement))
-            return;
-        // Skip if already has our source location
-        if (element.hasAttribute('data-keak-src'))
-            return;
-        // Skip Keak's own elements
-        if (element.classList.contains('keak-toolbar') ||
-            element.closest('.keak-toolbar') ||
-            element.id === 'keak-toolbar-root') {
-            return;
-        }
-        // Check for jsx-tool injected source attributes
-        // jsx-tool may use various attribute names - check common patterns
-        const jsxSource = element.getAttribute('data-jsx-source') ||
-            element.getAttribute('data-jsx-tool-source') ||
-            element.getAttribute('data-source') ||
-            element.getAttribute('data-jsx-file') ||
-            element.getAttribute('data-jsx-line');
-        if (jsxSource) {
-            // Copy jsx-tool source location to our attribute
-            element.setAttribute('data-keak-src', jsxSource);
-            injectedCount++;
-        }
-        else {
-            // Also check for jsx-tool ID attributes that we can use to look up in source map
-            const jsxToolId = element.getAttribute('data-jsx-tool-id') ||
-                element.getAttribute('data-jsx-id') ||
-                element.getAttribute('data-reactid');
-            if (jsxToolId && window.__JSX_TOOL_SOURCE_MAP__) {
-                const sourceMap = window.__JSX_TOOL_SOURCE_MAP__;
-                if (sourceMap[jsxToolId]) {
-                    const mapping = sourceMap[jsxToolId];
-                    if (mapping.file && mapping.line) {
-                        const sourceLocation = `${mapping.file}:${mapping.line}:${mapping.column || 1}`;
-                        element.setAttribute('data-keak-src', sourceLocation);
-                        injectedCount++;
-                    }
-                }
-            }
-        }
-    });
-    if (injectedCount > 0) {
-        console.log(`[Keak] ✅ Injected ${injectedCount} source locations via jsx-tool (direct attributes)`);
-        return injectedCount;
-    }
-    else if (hasJsxToolGlobal) {
-        console.log('[Keak] 🔍 jsx-tool globals found but no source locations injected yet (may need to wait for jsx-tool to initialize)');
-    }
-    // Check for jsx-tool WebSocket connection or source map global
-    const jsxTool = window.__JSX_TOOL__;
-    const jsxToolWS = window.__JSX_TOOL_WS__;
-    const jsxToolSourceMap = window.__JSX_TOOL_SOURCE_MAP__;
-    // Debug logging for jsx-tool detection
-    if (jsxTool || jsxToolWS || jsxToolSourceMap) {
-        console.log('[Keak] 🔍 jsx-tool detected:', {
-            __JSX_TOOL__: !!jsxTool,
-            __JSX_TOOL_WS__: !!jsxToolWS,
-            __JSX_TOOL_SOURCE_MAP__: !!jsxToolSourceMap,
-            sourceMapKeys: jsxToolSourceMap ? Object.keys(jsxToolSourceMap).length : 0
-        });
+    catch (error) {
+        console.warn('[Keak Source] Error accessing fiber node:', error);
+        return null;
     }
-    // If jsx-tool source map is available globally, use it
-    if (jsxToolSourceMap && typeof jsxToolSourceMap === 'object') {
-        allElements.forEach((element) => {
-            if (!(element instanceof HTMLElement))
-                return;
-            if (element.hasAttribute('data-keak-src'))
-                return;
-            if (element.classList.contains('keak-toolbar') ||
-                element.closest('.keak-toolbar') ||
-                element.id === 'keak-toolbar-root') {
-                return;
-            }
-            // Try to find source mapping for this element
-            const elementId = element.getAttribute('data-jsx-tool-id') ||
-                element.getAttribute('data-reactid') ||
-                element.id;
-            if (elementId && jsxToolSourceMap[elementId]) {
-                const mapping = jsxToolSourceMap[elementId];
-                if (mapping.file && mapping.line) {
-                    const sourceLocation = `${mapping.file}:${mapping.line}:${mapping.column || 1}`;
-                    element.setAttribute('data-keak-src', sourceLocation);
-                    if (mapping.component) {
-                        element.setAttribute('data-keak-component', mapping.component);
-                    }
-                    injectedCount++;
-                }
-            }
-        });
-        if (injectedCount > 0) {
-            console.log(`[Keak] ✅ Injected ${injectedCount} source locations via jsx-tool (global source map)`);
-            return injectedCount;
-        }
-    }
-    // Try to connect to jsx-tool WebSocket server (non-blocking)
-    // Only try once per page load to avoid repeated connection attempts
-    // Use the WebSocket URL from jsx-tool's configuration
-    if (!jsxTool && !jsxToolWS && !window.__KEAK_JSX_TOOL_CONNECTION_ATTEMPTED__) {
-        // Check for jsx-tool WebSocket URL (set by Vite plugin or manual script)
-        const jsxToolWsUrl = window.__JSX_TOOL_DEV_SERVER_WS_URL__;
-        // Also check for other indicators
-        const hasJsxToolScript = Array.from(document.scripts).some(script => script.src.includes('jsx-tool') || script.textContent?.includes('jsx-tool') || script.textContent?.includes('__JSX_TOOL_DEV_SERVER_WS_URL__'));
-        // Check for any elements with jsx-tool attributes (indicates jsx-tool is active)
-        const hasJsxToolAttributes = document.querySelector('[data-jsx-source], [data-jsx-tool-source], [data-jsx-tool-id]') !== null;
-        // Use jsx-tool's WebSocket URL if available, otherwise try default port
-        let wsUrl = null;
-        if (jsxToolWsUrl) {
-            // Use the URL provided by jsx-tool
-            wsUrl = jsxToolWsUrl;
-            console.log('[Keak] 🔍 Using jsx-tool WebSocket URL:', wsUrl);
-        }
-        else if (hasJsxToolScript || hasJsxToolAttributes || window.__JSX_TOOL_WS_PORT__) {
-            // Fallback to default port if indicators suggest jsx-tool might be running
-            const wsPort = window.__JSX_TOOL_WS_PORT__ || 12021;
-            const wsHost = window.__JSX_TOOL_WS_HOST__ || 'localhost';
-            const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            wsUrl = `${wsProtocol}//${wsHost}:${wsPort}`;
-            console.log('[Keak] 🔍 jsx-tool indicators found, attempting WebSocket connection to:', wsUrl);
-        }
-        if (wsUrl) {
-            window.__KEAK_JSX_TOOL_CONNECTION_ATTEMPTED__ = true;
-            try {
-                // Try to establish connection (non-blocking, async)
-                // Use a very short timeout to fail fast if server isn't running
-                const testWs = new WebSocket(wsUrl);
-                // Set a short timeout to close connection if it doesn't establish quickly
-                const connectionTimeout = setTimeout(() => {
-                    if (testWs.readyState === WebSocket.CONNECTING) {
-                        testWs.close();
-                    }
-                }, 1000); // Reduced to 1 second to fail faster
-                testWs.onopen = () => {
-                    clearTimeout(connectionTimeout);
-                    console.log('[Keak] ✅ Connected to jsx-tool WebSocket server');
-                    window.__JSX_TOOL_WS__ = testWs;
-                    // Request source mappings for all elements
-                    testWs.send(JSON.stringify({ type: 'getSourceMappings' }));
-                };
-                testWs.onmessage = (event) => {
-                    try {
-                        const data = JSON.parse(event.data);
-                        if (data.type === 'sourceMappings' && data.mappings) {
-                            let wsInjectedCount = 0;
-                            // Apply source mappings to elements
-                            Object.entries(data.mappings).forEach(([elementId, mapping]) => {
-                                const element = document.querySelector(`[data-jsx-tool-id="${elementId}"]`);
-                                if (element && mapping.file && mapping.line && !element.hasAttribute('data-keak-src')) {
-                                    const sourceLocation = `${mapping.file}:${mapping.line}:${mapping.column || 1}`;
-                                    element.setAttribute('data-keak-src', sourceLocation);
-                                    if (mapping.component) {
-                                        element.setAttribute('data-keak-component', mapping.component);
-                                    }
-                                    wsInjectedCount++;
-                                }
-                            });
-                            if (wsInjectedCount > 0) {
-                                console.log(`[Keak] ✅ Injected ${wsInjectedCount} source locations via jsx-tool WebSocket`);
-                                // Re-run injection to update counts
-                                setTimeout(() => injectSourceLocations(), 100);
-                            }
-                        }
-                    }
-                    catch (error) {
-                        console.warn('[Keak] Error parsing jsx-tool WebSocket message:', error);
-                    }
-                };
-                testWs.onerror = () => {
-                    clearTimeout(connectionTimeout);
-                    // WebSocket connection failed - this is expected if jsx-tool isn't running
-                    // Silently fall back to React Fiber - no error logging needed
-                };
-                testWs.onclose = () => {
-                    clearTimeout(connectionTimeout);
-                    // Connection closed - expected if jsx-tool server isn't running
-                };
-            }
-            catch (error) {
-                // WebSocket not available - will fall back silently
-            }
+}
+/**
+ * Extract source information from a React fiber node
+ */
+function getSourceFromFiber(fiber) {
+    if (!fiber)
+        return null;
+    let pointer = fiber;
+    let steps = 0;
+    const maxSteps = 20; // Prevent infinite loops
+    while (pointer && steps < maxSteps) {
+        // Check _debugSource (primary source of truth)
+        if (pointer._debugSource) {
+            const src = pointer._debugSource;
+            return {
+                fileName: src.fileName,
+                lineNumber: src.lineNumber,
+                columnNumber: src.columnNumber
+            };
         }
-        else {
-            // No indicators that jsx-tool is set up - skip connection attempt
-            window.__KEAK_JSX_TOOL_CONNECTION_ATTEMPTED__ = true;
+        // Check owner fiber if available
+        if (pointer._owner && pointer._owner._debugSource) {
+            const src = pointer._owner._debugSource;
+            return {
+                fileName: src.fileName,
+                lineNumber: src.lineNumber,
+                columnNumber: src.columnNumber
+            };
         }
+        // Check props.__source as fallback (Babel plugin output)
+        const props = pointer.memoizedProps || pointer.pendingProps;
+        if (props && props.__source) {
+            const src = props.__source;
+            return {
+                fileName: src.fileName,
+                lineNumber: src.lineNumber,
+                columnNumber: src.columnNumber
+            };
+        }
+        // Try both return and _owner for traversal
+        pointer = pointer.return || pointer._owner;
+        steps++;
     }
-    return injectedCount;
+    return null;
 }
+/**
+ * Inject source attributes into all DOM elements using React Fiber data
+ */
 function injectSourceLocations() {
-    if (typeof window === 'undefined')
-        return;
-    // Step 1: Try jsx-tool first (primary method)
-    const jsxToolCount = injectSourceLocationsViaJsxTool();
-    if (jsxToolCount > 0) {
-        console.log(`[Keak] ✅ Used jsx-tool for source mapping (${jsxToolCount} elements)`);
-        return;
-    }
-    // Step 1.5: If jsx-tool is detected but no injections yet, schedule a retry
-    // Check for the WebSocket URL (primary indicator) or other globals
-    const jsxToolWsUrl = window.__JSX_TOOL_DEV_SERVER_WS_URL__;
-    const hasJsxToolGlobals = !!jsxToolWsUrl || !!window.__JSX_TOOL__ || !!window.__JSX_TOOL_SOURCE_MAP__ || !!window.__JSX_TOOL_WS__;
-    const retryCount = (window.__KEAK_JSX_TOOL_RETRY_COUNT__ || 0);
-    if (hasJsxToolGlobals && retryCount < 3) {
-        window.__KEAK_JSX_TOOL_RETRY_COUNT__ = retryCount + 1;
-        console.log(`[Keak] 🔄 jsx-tool detected (WS URL: ${jsxToolWsUrl || 'not set'}) but not ready yet, will retry in 1s (attempt ${retryCount + 1}/3)...`);
-        setTimeout(() => {
-            injectSourceLocations();
-        }, 1000);
-        return; // Don't fall back yet, wait for retry
-    }
-    // Step 2: Fall back to React Fiber
-    // Only log if we haven't already tried and failed multiple times
-    const attemptCount = (window.__KEAK_INJECTION_ATTEMPTS__ || 0) + 1;
-    window.__KEAK_INJECTION_ATTEMPTS__ = attemptCount;
-    if (attemptCount <= 3) {
-        // Only log on first few attempts to avoid console spam
-        if (attemptCount === 1) {
-            if (!hasJsxToolGlobals) {
-                console.log('[Keak] jsx-tool not detected, trying React Fiber fallback...');
-                console.log('[Keak] 💡 To use jsx-tool for better source mapping:');
-                console.log('[Keak]   1. Install: npm install @jsx-tool/jsx-tool');
-                console.log('[Keak]   2. For Vite: Add jsxToolDevServer() to vite.config.ts plugins');
-                console.log('[Keak]   3. For non-Vite: Add script tag with window.__JSX_TOOL_DEV_SERVER_WS_URL__');
-                console.log('[Keak]   4. Restart your dev server');
-            }
-            else {
-                console.log('[Keak] jsx-tool detected but no source locations found, falling back to React Fiber...');
-                console.log('[Keak] 💡 Make sure jsx-tool dev server is running (check for WebSocket connection)');
-            }
-        }
-    }
-    // Check if React DevTools is available (development mode)
-    const reactDevTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    if (!reactDevTools) {
-        console.warn('[Keak] React DevTools not detected. Source locations will not be available.');
-        console.warn('[Keak] Make sure you are running in development mode.');
-        return;
-    }
-    // Find React Fiber roots
-    const reactRoots = [];
-    if (reactDevTools.renderers) {
-        reactDevTools.renderers.forEach((renderer) => {
-            try {
-                // Get the fiber root from the renderer
-                const fiberRoot = renderer.findFiberByHostInstance || renderer.getFiberRoots;
-                if (fiberRoot) {
-                    reactRoots.push(renderer);
-                }
-            }
-            catch (error) {
-                console.warn('[Keak] Error accessing renderer:', error);
-            }
-        });
-    }
-    if (reactRoots.length === 0) {
-        // Logging disabled - using Babel plugin for source injection instead
-        // console.warn('[Keak] No React roots found. Trying alternative method...');
-        injectSourceLocationsViaFiber();
-        return;
-    }
-    // Logging disabled - using Babel plugin for source injection instead
-    // console.log(`[Keak] Found ${reactRoots.length} React renderer(s)`);
-    // Process all DOM elements
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return 0;
     let injectedCount = 0;
     const allElements = document.querySelectorAll('*');
     allElements.forEach((element) => {
         if (!(element instanceof HTMLElement))
             return;
-        // Skip if already has source location
-        if (element.hasAttribute('data-keak-src'))
+        // Skip if already has source attributes
+        if (element.hasAttribute('data-source-file'))
             return;
         // Skip Keak's own elements
         if (element.classList.contains('keak-toolbar') ||
@@ -337,171 +124,68 @@ function injectSourceLocations() {
             element.id === 'keak-toolbar-root') {
             return;
         }
-        // Try to find React Fiber for this element
-        const fiber = findFiberForElement(element);
-        if (fiber && fiber._debugSource) {
-            const { fileName, lineNumber, columnNumber } = fiber._debugSource;
-            // Clean up the file name (remove webpack prefixes, make relative)
-            let cleanFileName = fileName;
-            // Remove webpack internal paths
-            cleanFileName = cleanFileName.replace(/^webpack:\/\/\/_next\//, '');
-            cleanFileName = cleanFileName.replace(/^webpack:\/\/\/\.\//, '');
-            cleanFileName = cleanFileName.replace(/^\.\/_next\//, '');
-            // Remove node_modules
-            if (cleanFileName.includes('node_modules')) {
-                return; // Skip node_modules files
-            }
-            // Make path relative to project root
-            cleanFileName = cleanFileName.replace(/^.*\/(app|src|pages|components)\//, '$1/');
-            const sourceLocation = `${cleanFileName}:${lineNumber}:${columnNumber || 1}`;
-            element.setAttribute('data-keak-src', sourceLocation);
-            // Add component name if available
-            if (fiber.type && fiber.type.name) {
-                element.setAttribute('data-keak-component', fiber.type.name);
-            }
+        // Get React fiber for this element
+        const fiber = getFiberFromNode(element);
+        const source = getSourceFromFiber(fiber);
+        if (source) {
+            // Clean the file path for better display
+            let cleanPath = source.fileName;
+            // Extract from src/ onwards
+            if (cleanPath.includes('/src/')) {
+                const parts = cleanPath.split('/src/');
+                cleanPath = 'src/' + parts[parts.length - 1];
+            }
+            else if (cleanPath.includes('/app/')) {
+                const parts = cleanPath.split('/app/');
+                cleanPath = 'app/' + parts[parts.length - 1];
+            }
+            else if (cleanPath.includes('/components/')) {
+                const parts = cleanPath.split('/components/');
+                cleanPath = 'components/' + parts[parts.length - 1];
+            }
+            // Inject source attributes (same format as react-source-lens)
+            element.setAttribute('data-source-file', cleanPath);
+            element.setAttribute('data-source-line', String(source.lineNumber));
+            // Also create combined data-keak-src for backward compatibility
+            element.setAttribute('data-keak-src', `${cleanPath}:${source.lineNumber}:${source.columnNumber || 1}`);
             injectedCount++;
         }
     });
-    console.log(`[Keak] Injected source locations into ${injectedCount} elements (React Fiber fallback)`);
-    if (injectedCount === 0) {
-        console.warn('[Keak] No source locations injected. Make sure you are running in development mode with source maps enabled.');
-    }
-}
-// Find React Fiber node for a DOM element
-function findFiberForElement(element) {
-    // Look for React Fiber keys on the element
-    const allKeys = Object.keys(element);
-    const fiberKey = allKeys.find(key => key.startsWith('__reactFiber') ||
-        key.startsWith('__reactInternalInstance') ||
-        key.startsWith('__reactProps'));
-    if (fiberKey) {
-        const fiber = element[fiberKey];
-        // Debug disabled - using Babel plugin instead of runtime injection
-        // if (!element.hasAttribute('data-keak-debug-logged')) {
-        //   element.setAttribute('data-keak-debug-logged', 'true');
-        //   console.log('[Keak Debug] Sample Fiber node:', {
-        //     hasFiber: !!fiber,
-        //     hasDebugSource: !!fiber?._debugSource,
-        //     debugSource: fiber?._debugSource,
-        //     type: fiber?.type,
-        //     elementType: fiber?.elementType,
-        //     keys: allKeys.filter(k => k.startsWith('__react'))
-        //   });
-        // }
-        return fiber;
+    if (injectedCount > 0) {
+        console.log(`[Keak Source] ✅ Injected ${injectedCount} source locations from React Fiber`);
     }
-    return null;
-}
-// Alternative method: Walk the Fiber tree and inject source locations
-function injectSourceLocationsViaFiber() {
-    if (typeof window === 'undefined')
-        return;
-    // Find all elements with React Fiber data
-    const allElements = document.querySelectorAll('*');
-    allElements.forEach((element) => {
-        if (!(element instanceof HTMLElement))
-            return;
-        // Skip if already has source location
-        if (element.hasAttribute('data-keak-src')) {
-            return;
-        }
-        // Skip Keak's own elements
-        if (element.classList.contains('keak-toolbar') ||
-            element.closest('.keak-toolbar') ||
-            element.id === 'keak-toolbar-root' ||
-            element.id?.startsWith('keak-')) {
-            return;
-        }
-        // Find React Fiber
-        const fiber = findFiberForElement(element);
-        if (!fiber) {
-            return;
-        }
-        if (!fiber._debugSource) {
-            return;
-        }
-        const { fileName, lineNumber, columnNumber } = fiber._debugSource;
-        // Skip node_modules BEFORE cleaning
-        if (fileName.includes('node_modules')) {
-            return;
-        }
-        // Clean file name
-        let cleanFileName = fileName;
-        // Remove webpack prefixes
-        cleanFileName = cleanFileName.replace(/^webpack:\/\/\/_next\//, '');
-        cleanFileName = cleanFileName.replace(/^webpack:\/\/\/\.\//, '');
-        cleanFileName = cleanFileName.replace(/^\.\/_next\//, '');
-        cleanFileName = cleanFileName.replace(/^webpack-internal:\/\/\//, '');
-        cleanFileName = cleanFileName.replace(/^\(app-pages-browser\)\//, '');
-        // Make relative to project root - find common patterns
-        const patterns = [
-            /^.*?\/(app|src|pages|components|lib|utils)\//,
-            /^.*\/\.next\/server\/(app|src|pages)\//,
-        ];
-        for (const pattern of patterns) {
-            if (pattern.test(cleanFileName)) {
-                cleanFileName = cleanFileName.replace(pattern, '$1/');
-                break;
-            }
-        }
-        const sourceLocation = `${cleanFileName}:${lineNumber}:${columnNumber || 1}`;
-        element.setAttribute('data-keak-src', sourceLocation);
-        // Add component name
-        if (fiber.type) {
-            const componentName = fiber.type.name || fiber.type.displayName;
-            if (componentName && typeof componentName === 'string') {
-                element.setAttribute('data-keak-component', componentName);
-            }
-        }
-    });
-    // Logging disabled - using Babel plugin for source injection instead
-    // console.log(`[Keak] Source injection summary:`);
-    // console.log(`  ✅ Injected: ${injectedCount} elements`);
-    // console.log(`  ⏭️  Skipped (no fiber): ${skippedNoFiber}`);
-    // console.log(`  ⏭️  Skipped (no source): ${skippedNoSource}`);
-    // console.log(`  ⏭️  Skipped (node_modules): ${skippedNodeModules}`);
-    // // If no elements injected, log a warning with tips
-    // if (injectedCount === 0) {
-    //   console.warn('[Keak] ⚠️  No source locations injected!');
-    //   console.warn('[Keak] Make sure:');
-    //   console.warn('[Keak]   1. You are running in development mode (npm run dev)');
-    //   console.warn('[Keak]   2. React DevTools is available');
-    //   console.warn('[Keak]   3. Next.js is generating source maps (default in dev)');
-    // }
+    return injectedCount;
 }
-// Auto-inject source locations when page loads
+/**
+ * Initialize source injection on DOM ready and watch for changes
+ */
 if (typeof window !== 'undefined') {
-    // Wait longer for React to fully render (especially Next.js App Router)
-    const runInjection = () => {
-        // Try multiple times with delays
-        setTimeout(() => injectSourceLocations(), 1000);
-        setTimeout(() => injectSourceLocations(), 2000);
-        setTimeout(() => injectSourceLocations(), 3000);
-        // Also watch for DOM changes
-        const observer = new MutationObserver(() => {
-            // Debounced injection on DOM changes
-            clearTimeout(window.__keakInjectionTimeout);
-            window.__keakInjectionTimeout = setTimeout(() => {
-                injectSourceLocations();
-            }, 500);
-        });
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true
-        });
-    };
+    // Wait for DOM to be ready
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', runInjection);
+        document.addEventListener('DOMContentLoaded', () => {
+            // Initial injection with delays to catch dynamically rendered content
+            setTimeout(() => injectSourceLocations(), 500);
+            setTimeout(() => injectSourceLocations(), 1500);
+            setTimeout(() => injectSourceLocations(), 3000);
+        });
     }
     else {
-        runInjection();
+        // DOM already ready
+        setTimeout(() => injectSourceLocations(), 500);
+        setTimeout(() => injectSourceLocations(), 1500);
+        setTimeout(() => injectSourceLocations(), 3000);
     }
-    // Re-inject on navigation (for SPAs)
-    if (typeof window !== 'undefined' && 'navigation' in window) {
-        window.navigation?.addEventListener('navigate', () => {
-            setTimeout(() => injectSourceLocations(), 1000);
+    // Watch for DOM changes and re-inject
+    const observer = new MutationObserver(() => {
+        injectSourceLocations();
+    });
+    // Start observing after a brief delay
+    setTimeout(() => {
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
         });
-    }
+    }, 1000);
 }
 
 /**
@@ -1830,14 +1514,33 @@ const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
             sourceMappingTelemetry.fiberSuccess++;
         }
         else {
-            // Fallback to data-keak-src attribute from Babel plugin
-            const keakSrc = element.getAttribute('data-keak-src');
+            // Fallback to various data-* attributes from different source mapping tools
+            // Priority: data-keak-src > react-source-lens > webpack loader
+            let keakSrc = element.getAttribute('data-keak-src');
             const keakComponent = element.getAttribute('data-keak-component');
             const keakIdx = element.getAttribute('data-keak-idx');
             console.log('[Keak Toolbar] No Fiber source, checking data-keak-* attributes:');
             console.log('[Keak Toolbar]   data-keak-src:', keakSrc);
             console.log('[Keak Toolbar]   data-keak-component:', keakComponent);
             console.log('[Keak Toolbar]   data-keak-idx:', keakIdx);
+            // Fallback 1: Check for react-source-lens attributes if data-keak-src not found
+            if (!keakSrc) {
+                const sourceLensFile = element.getAttribute('data-source-file');
+                const sourceLensLine = element.getAttribute('data-source-line');
+                if (sourceLensFile && sourceLensLine) {
+                    keakSrc = `${sourceLensFile}:${sourceLensLine}:1`;
+                    console.log('[Keak Toolbar]   react-source-lens detected:', keakSrc);
+                }
+            }
+            // Fallback 2: Check for webpack loader attributes if still not found
+            if (!keakSrc) {
+                const keakFile = element.getAttribute('data-keak-file');
+                const keakLine = element.getAttribute('data-keak-line');
+                if (keakFile && keakLine) {
+                    keakSrc = `${keakFile}:${keakLine}:1`;
+                    console.log('[Keak Toolbar]   webpack loader attributes detected:', keakSrc);
+                }
+            }
             if (keakSrc) {
                 // Format is "file:line:column"
                 const parts = keakSrc.split(':');
@@ -1846,7 +1549,7 @@ const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
                 const columnNumber = parts[parts.length - 1];
                 const parsedLineNumber = parseInt(lineNumber, 10);
                 const parsedColumnNumber = parseInt(columnNumber, 10);
-                console.log('[Keak Toolbar] ✅ Using Babel plugin source:', { fileName, lineNumber: parsedLineNumber, columnNumber: parsedColumnNumber });
+                console.log('[Keak Toolbar] ✅ Using build-time source attributes:', { fileName, lineNumber: parsedLineNumber, columnNumber: parsedColumnNumber });
                 elementData.sourceMapping = {
                     method: 'babel-plugin',
                     fileName: fileName,
@@ -1860,7 +1563,7 @@ const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
                 sourceMappingTelemetry.babelUsed++;
             }
             else {
-                console.log('[Keak Toolbar] ❌ No source mapping found - no data-keak-src attribute in DOM');
+                console.log('[Keak Toolbar] ❌ No source mapping found - no data-keak-src, react-source-lens, or webpack loader attributes in DOM');
                 // Track complete failure (Fiber failed, no Babel either)
                 sourceMappingTelemetry.fiberFailed++;
                 sourceMappingTelemetry.noMapping++;
@@ -3008,7 +2711,6 @@ class KeakSDK {
 }
 /**
  * Main Keak hook - initializes the SDK with minimal configuration
- * Similar to react-source-lens's useReactSourceLens() hook
  *
  * @example
  * // Minimal usage (no config needed)