@visual-agentic-dev/react-devtools 1.1.4 → 1.2.0

package/README.md

@@ -0,0 +1,134 @@
+# @visual-agentic-dev/react-devtools
+
+The React runtime SDK for Visual Agentic Dev. This package provides the connection between your React application and the Visual Dev browser extension.
+
+## Integration
+
+### 1. Install
+
+```bash
+npm install @visual-agentic-dev/react-devtools
+# or
+pnpm add @visual-agentic-dev/react-devtools
+# or
+yarn add @visual-agentic-dev/react-devtools
+```
+
+### 2. Runtime Setup (Required)
+
+Wrap your root application with `DevToolsProvider`:
+
+```tsx
+// App.tsx or main.tsx
+import { DevToolsProvider } from '@visual-agentic-dev/react-devtools';
+
+export default function App() {
+  return (
+    <DevToolsProvider enabled={process.env.NODE_ENV === 'development'}>
+      <YourApp />
+    </DevToolsProvider>
+  );
+}
+```
+
+## React 19 Support & Source Location
+
+For **React 16, 17, and 18**, the runtime SDK can usually detect source location (file path, line number) automatically using React's internal fiber information.
+
+For **React 19+**, due to internal changes in React Fiber (removal of `_debugSource`), runtime detection may be unreliable or fail completely.
+
+**We strongly recommend configuring the build plugin** to ensure 100% accurate source location detection across all React versions and build tools.
+
+### Build Tool Configuration
+
+We provide an **Universal Plugin** (unplugin) that supports Vite, Webpack, Rspack, Rollup, and esbuild.
+
+#### Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { vitePlugin as visualDev } from '@visual-agentic-dev/react-devtools/unplugin';
+
+export default defineConfig({
+  plugins: [
+    // ... other plugins
+    visualDev(), 
+  ],
+});
+```
+
+#### Webpack
+
+```js
+// webpack.config.js
+const { webpackPlugin: visualDev } = require('@visual-agentic-dev/react-devtools/unplugin');
+
+module.exports = {
+  // ...
+  plugins: [
+    visualDev(),
+  ],
+};
+```
+
+#### Rspack
+
+```js
+// rspack.config.js
+const { rspackPlugin: visualDev } = require('@visual-agentic-dev/react-devtools/unplugin');
+
+module.exports = {
+  // ...
+  plugins: [
+    visualDev(),
+  ],
+};
+```
+
+#### Next.js (Webpack)
+
+```js
+// next.config.js
+const { webpackPlugin: visualDev } = require('@visual-agentic-dev/react-devtools/unplugin');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    config.plugins.push(visualDev());
+    return config;
+  },
+};
+
+module.exports = nextConfig;
+```
+
+#### Rollup
+
+```js
+// rollup.config.js
+import { rollupPlugin as visualDev } from '@visual-agentic-dev/react-devtools/unplugin';
+
+export default {
+  // ...
+  plugins: [
+    visualDev(),
+  ],
+};
+```
+
+## Options
+
+The plugin accepts an options object:
+
+```ts
+visualDev({
+  // Filter files to transform
+  include: [/\.[jt]sx$/], // default
+  exclude: [/node_modules/], // default
+  
+  // Customize the data attribute prefix
+  // default: 'vdev' -> data-vdev-file, data-vdev-line
+  prefix: 'vdev', 
+})
+```

package/dist/index.d.mts

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 
-interface SourceLocation {
+interface SourceLocation$1 {
     fileName: string;
     lineNumber: number;
     columnNumber: number;
+    componentName?: string;
 }
 interface ElementInfo {
     tagName: string;
@@ -16,7 +17,7 @@ interface VDevMessage {
     payload?: unknown;
 }
 interface ElementSelectedPayload {
-    source: SourceLocation;
+    source: SourceLocation$1;
     elementInfo: ElementInfo;
 }
 
@@ -24,7 +25,7 @@ interface DevToolsContextValue {
     isInspecting: boolean;
     setInspecting: (v: boolean) => void;
     selectedElement: HTMLElement | null;
-    selectedSource: SourceLocation | null;
+    selectedSource: SourceLocation$1 | null;
     clearSelection: () => void;
 }
 declare const useDevTools: () => DevToolsContextValue;
@@ -56,20 +57,29 @@ interface Props {
 declare const SelectionBox: React.FC<Props>;
 
 /**
- * Parse the data-vdev-source attribute value into a SourceLocation object
- * (Legacy support for projects using the babel/vite plugin)
+ * Source Location Detection Utilities
+ * Reference implementation based on:
+ * https://github.com/benjitaylor/agentation/blob/main/package/src/utils/source-location.ts
  */
-declare function parseSourceAttr(attrValue: string | null): SourceLocation | null;
+interface SourceLocation {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+    componentName?: string;
+}
 /**
- * Find the closest element with source information
- * First tries React Fiber (runtime), then falls back to data attributes
+ * Parse the data-vdev-source attribute value (Legacy/Fallback)
  */
-declare function findSourceElement(target: HTMLElement, prefix?: string): HTMLElement | null;
+declare function parseSourceAttr(attrValue: string | null): SourceLocation | null;
 /**
- * Get source location from an element
- * Prioritizes React Fiber _debugSource, falls back to data attributes
+ * Main function to get source location from an element
+ * Combines Fiber inspection and data attribute fallbacks
  */
 declare function getSourceFromElement(element: HTMLElement, prefix?: string): SourceLocation | null;
+/**
+ * Find the closest element with source information
+ */
+declare function findSourceElement(target: HTMLElement, prefix?: string): HTMLElement | null;
 
 /**
  * Send a message to the Chrome extension via window.postMessage
@@ -84,4 +94,4 @@ declare function notifyReady(): void;
  */
 declare function createMessageHandler(handler: (message: VDevMessage) => void): (event: MessageEvent) => void;
 
-export { DevToolsProvider, type ElementInfo, type ElementSelectedPayload, Highlighter, SelectionBox, type SourceLocation, type VDevMessage, createMessageHandler, findSourceElement, getSourceFromElement, notifyReady, parseSourceAttr, sendToExtension, useDevTools };
+export { DevToolsProvider, type ElementInfo, type ElementSelectedPayload, Highlighter, SelectionBox, type SourceLocation$1 as SourceLocation, type VDevMessage, createMessageHandler, findSourceElement, getSourceFromElement, notifyReady, parseSourceAttr, sendToExtension, useDevTools };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 
-interface SourceLocation {
+interface SourceLocation$1 {
     fileName: string;
     lineNumber: number;
     columnNumber: number;
+    componentName?: string;
 }
 interface ElementInfo {
     tagName: string;
@@ -16,7 +17,7 @@ interface VDevMessage {
     payload?: unknown;
 }
 interface ElementSelectedPayload {
-    source: SourceLocation;
+    source: SourceLocation$1;
     elementInfo: ElementInfo;
 }
 
@@ -24,7 +25,7 @@ interface DevToolsContextValue {
     isInspecting: boolean;
     setInspecting: (v: boolean) => void;
     selectedElement: HTMLElement | null;
-    selectedSource: SourceLocation | null;
+    selectedSource: SourceLocation$1 | null;
     clearSelection: () => void;
 }
 declare const useDevTools: () => DevToolsContextValue;
@@ -56,20 +57,29 @@ interface Props {
 declare const SelectionBox: React.FC<Props>;
 
 /**
- * Parse the data-vdev-source attribute value into a SourceLocation object
- * (Legacy support for projects using the babel/vite plugin)
+ * Source Location Detection Utilities
+ * Reference implementation based on:
+ * https://github.com/benjitaylor/agentation/blob/main/package/src/utils/source-location.ts
  */
-declare function parseSourceAttr(attrValue: string | null): SourceLocation | null;
+interface SourceLocation {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+    componentName?: string;
+}
 /**
- * Find the closest element with source information
- * First tries React Fiber (runtime), then falls back to data attributes
+ * Parse the data-vdev-source attribute value (Legacy/Fallback)
  */
-declare function findSourceElement(target: HTMLElement, prefix?: string): HTMLElement | null;
+declare function parseSourceAttr(attrValue: string | null): SourceLocation | null;
 /**
- * Get source location from an element
- * Prioritizes React Fiber _debugSource, falls back to data attributes
+ * Main function to get source location from an element
+ * Combines Fiber inspection and data attribute fallbacks
  */
 declare function getSourceFromElement(element: HTMLElement, prefix?: string): SourceLocation | null;
+/**
+ * Find the closest element with source information
+ */
+declare function findSourceElement(target: HTMLElement, prefix?: string): HTMLElement | null;
 
 /**
  * Send a message to the Chrome extension via window.postMessage
@@ -84,4 +94,4 @@ declare function notifyReady(): void;
  */
 declare function createMessageHandler(handler: (message: VDevMessage) => void): (event: MessageEvent) => void;
 
-export { DevToolsProvider, type ElementInfo, type ElementSelectedPayload, Highlighter, SelectionBox, type SourceLocation, type VDevMessage, createMessageHandler, findSourceElement, getSourceFromElement, notifyReady, parseSourceAttr, sendToExtension, useDevTools };
+export { DevToolsProvider, type ElementInfo, type ElementSelectedPayload, Highlighter, SelectionBox, type SourceLocation$1 as SourceLocation, type VDevMessage, createMessageHandler, findSourceElement, getSourceFromElement, notifyReady, parseSourceAttr, sendToExtension, useDevTools };

package/dist/index.js

@@ -83,74 +83,153 @@ var Highlighter = ({
 var import_react2 = require("react");
 
 // src/utils/sourceLocator.ts
-function getReactFiber(element) {
-  const key = Object.keys(element).find(
-    (k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$")
-  );
-  return key ? element[key] : null;
+function getFiberFromElement(element) {
+  if (!element || typeof element !== "object") {
+    return null;
+  }
+  const keys = Object.keys(element);
+  const fiberKey = keys.find((key) => key.startsWith("__reactFiber$"));
+  if (fiberKey) {
+    return element[fiberKey];
+  }
+  const instanceKey = keys.find((key) => key.startsWith("__reactInternalInstance$"));
+  if (instanceKey) {
+    return element[instanceKey];
+  }
+  const possibleFiberKey = keys.find((key) => {
+    if (!key.startsWith("__react")) return false;
+    if (key.startsWith("__reactContainer") || key.startsWith("__reactProps") || key.startsWith("__reactEvents")) return false;
+    const value = element[key];
+    return value && typeof value === "object" && ("_debugSource" in value || "tag" in value || "return" in value);
+  });
+  if (possibleFiberKey) {
+    return element[possibleFiberKey];
+  }
+  return null;
 }
-function findFiberWithSource(fiber) {
+function getComponentName(fiber) {
+  if (!fiber.type) return null;
+  if (typeof fiber.type === "string") return null;
+  if (typeof fiber.type === "object" || typeof fiber.type === "function") {
+    return fiber.type.displayName || fiber.type.name || null;
+  }
+  return null;
+}
+function findDebugSource(fiber, maxDepth = 50) {
   let current = fiber;
-  while (current) {
+  let depth = 0;
+  while (current && depth < maxDepth) {
     if (current._debugSource) {
-      return current;
+      return {
+        source: current._debugSource,
+        componentName: getComponentName(current)
+      };
+    }
+    if (current._debugOwner?._debugSource) {
+      return {
+        source: current._debugOwner._debugSource,
+        componentName: getComponentName(current._debugOwner)
+      };
     }
     current = current.return;
+    depth++;
   }
   return null;
 }
-function getSourceFromFiber(element) {
-  const fiber = getReactFiber(element);
-  if (!fiber) return null;
-  const fiberWithSource = findFiberWithSource(fiber);
-  if (fiberWithSource?._debugSource) {
-    const { fileName, lineNumber, columnNumber } = fiberWithSource._debugSource;
-    return {
-      fileName,
-      lineNumber,
-      columnNumber: columnNumber || 1
-    };
+function findDebugSourceReact19(fiber) {
+  let current = fiber;
+  let depth = 0;
+  const maxDepth = 50;
+  while (current && depth < maxDepth) {
+    const anyFiber = current;
+    const possibleSourceKeys = ["_debugSource", "__source", "_source", "debugSource", "_debugInfo"];
+    for (const key of possibleSourceKeys) {
+      const source = anyFiber[key];
+      if (source) {
+        if (typeof source === "object" && typeof source.fileName === "string") {
+          return {
+            source,
+            componentName: getComponentName(current)
+          };
+        }
+        if (Array.isArray(source)) {
+          for (const info of source) {
+            if (info && typeof info.fileName === "string") {
+              return {
+                source: info,
+                componentName: getComponentName(current)
+              };
+            }
+          }
+        }
+      }
+    }
+    const props = current.memoizedProps || current.pendingProps;
+    if (props && typeof props === "object") {
+      if (props.__source && typeof props.__source === "object" && props.__source.fileName) {
+        return {
+          source: props.__source,
+          componentName: getComponentName(current)
+        };
+      }
+    }
+    current = current.return;
+    depth++;
   }
   return null;
 }
 function parseSourceAttr(attrValue) {
   if (!attrValue) return null;
   try {
-    const parsed = JSON.parse(attrValue);
-    if (typeof parsed.fileName === "string" && typeof parsed.lineNumber === "number" && typeof parsed.columnNumber === "number") {
-      return parsed;
+    if (attrValue.startsWith("{")) {
+      const parsed = JSON.parse(attrValue);
+      if (parsed.fileName && typeof parsed.lineNumber === "number") {
+        return parsed;
+      }
     }
   } catch {
   }
   return null;
 }
+function getSourceFromElement(element, prefix = "vdev") {
+  const fiber = getFiberFromElement(element);
+  if (fiber) {
+    let result = findDebugSource(fiber);
+    if (!result) {
+      result = findDebugSourceReact19(fiber);
+    }
+    if (result) {
+      return {
+        fileName: result.source.fileName,
+        lineNumber: result.source.lineNumber,
+        columnNumber: result.source.columnNumber || 1,
+        componentName: result.componentName || void 0
+      };
+    }
+  }
+  const file = element.getAttribute(`data-${prefix}-file`);
+  const line = element.getAttribute(`data-${prefix}-line`);
+  const col = element.getAttribute(`data-${prefix}-col`);
+  if (file && line) {
+    return {
+      fileName: file,
+      lineNumber: parseInt(line, 10),
+      columnNumber: col ? parseInt(col, 10) : 1,
+      componentName: element.tagName.toLowerCase()
+      // Simple fallback
+    };
+  }
+  return null;
+}
 function findSourceElement(target, prefix = "vdev") {
   let current = target;
   while (current && current !== document.body) {
-    if (getSourceFromFiber(current)) {
+    if (getSourceFromElement(current, prefix)) {
       return current;
     }
     current = current.parentElement;
   }
-  return target.closest(`[data-${prefix}-file], [data-${prefix}-source]`);
-}
-function getSourceFromElement(element, prefix = "vdev") {
-  const fiberSource = getSourceFromFiber(element);
-  if (fiberSource) {
-    return fiberSource;
-  }
-  const fileName = element.getAttribute(`data-${prefix}-file`);
-  const lineStr = element.getAttribute(`data-${prefix}-line`);
-  const colStr = element.getAttribute(`data-${prefix}-col`);
-  if (fileName && lineStr) {
-    return {
-      fileName,
-      lineNumber: parseInt(lineStr, 10),
-      columnNumber: colStr ? parseInt(colStr, 10) : 1
-    };
-  }
-  const attrValue = element.getAttribute(`data-${prefix}-source`);
-  return parseSourceAttr(attrValue);
+  return null;
 }
 
 // src/overlay/SelectionBox.tsx

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/DevToolsProvider.tsx","../src/overlay/Highlighter.tsx","../src/overlay/SelectionBox.tsx","../src/utils/sourceLocator.ts","../src/utils/messaging.ts"],"sourcesContent":["// Components\nexport { DevToolsProvider, useDevTools } from './components';\n\n// Overlay (advanced usage)\nexport { Highlighter, SelectionBox } from './overlay';\n\n// Utilities\nexport {\n    parseSourceAttr,\n    findSourceElement,\n    getSourceFromElement\n} from './utils/sourceLocator';\n\nexport {\n    sendToExtension,\n    notifyReady,\n    createMessageHandler\n} from './utils/messaging';\n\n// Types\nexport type {\n    SourceLocation,\n    ElementInfo,\n    VDevMessage,\n    ElementSelectedPayload\n} from './types';\n","import React, {\n    createContext,\n    useContext,\n    useState,\n    useCallback,\n    useEffect,\n    type ReactNode\n} from 'react';\nimport { Highlighter } from '../overlay/Highlighter';\nimport { SelectionBox } from '../overlay/SelectionBox';\nimport { getSourceFromElement, findSourceElement } from '../utils/sourceLocator';\nimport { sendToExtension, createMessageHandler, notifyReady } from '../utils/messaging';\nimport type { SourceLocation, VDevMessage } from '../types';\n\ninterface DevToolsContextValue {\n    isInspecting: boolean;\n    setInspecting: (v: boolean) => void;\n    selectedElement: HTMLElement | null;\n    selectedSource: SourceLocation | null;\n    clearSelection: () => void;\n}\n\nconst DevToolsContext = createContext<DevToolsContextValue | null>(null);\n\nexport const useDevTools = () => {\n    const context = useContext(DevToolsContext);\n    if (!context) {\n        throw new Error('useDevTools must be used within a DevToolsProvider');\n    }\n    return context;\n};\n\ninterface DevToolsProviderProps {\n    children: ReactNode;\n    /** Only enable in development mode (default: true) */\n    enabled?: boolean;\n    /** Attribute prefix (default: 'vdev') */\n    prefix?: string;\n}\n\nexport const DevToolsProvider: React.FC<DevToolsProviderProps> = ({\n    children,\n    enabled = true,\n    prefix = 'vdev'\n}) => {\n    const [isInspecting, setInspecting] = useState(false);\n    const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);\n    const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(null);\n    const [selectedSource, setSelectedSource] = useState<SourceLocation | null>(null);\n\n    const clearSelection = useCallback(() => {\n        setSelectedElement(null);\n        setSelectedSource(null);\n    }, []);\n\n    // Listen to messages from extension\n    useEffect(() => {\n        if (!enabled) return;\n\n        const handler = createMessageHandler((message: VDevMessage) => {\n            console.log('[DevTools] Received message:', message);\n            if (message.type === 'VDEV_START_INSPECT') {\n                console.log('[DevTools] Starting inspection');\n                setInspecting(true);\n                clearSelection();\n            } else if (message.type === 'VDEV_STOP_INSPECT') {\n                console.log('[DevTools] Stopping inspection');\n                setInspecting(false);\n                setHoveredElement(null);\n            } else if (message.type === 'VDEV_TOGGLE_INSPECT') {\n                console.log('[DevTools] Toggling inspection');\n                setInspecting(prev => {\n                    const newState = !prev;\n                    if (newState) {\n                        // Starting inspection, clear selection\n                        clearSelection();\n                    } else {\n                        // Stopping inspection, clear hovered\n                        setHoveredElement(null);\n                    }\n                    // Notify extension of state change\n                    sendToExtension({\n                        type: 'VDEV_INSPECT_STATE_CHANGED',\n                        payload: { isInspecting: newState }\n                    });\n                    return newState;\n                });\n            } else if (message.type === 'VDEV_CLEAR_SELECTION') {\n                clearSelection();\n            }\n        });\n\n        window.addEventListener('message', handler);\n\n        // Notify extension that SDK is ready\n        notifyReady();\n        console.log('[DevTools] SDK Ready, listening for messages');\n\n        return () => window.removeEventListener('message', handler);\n    }, [enabled, clearSelection]);\n\n    // Handle mouse events in inspect mode\n    useEffect(() => {\n        if (!isInspecting || !enabled) return;\n\n        const handleMouseMove = (e: MouseEvent) => {\n            const target = e.target as HTMLElement;\n\n            // Ignore our own overlay elements\n            if (target.hasAttribute('data-vdev-overlay')) return;\n\n            const sourceElement = findSourceElement(target, prefix);\n            // console.log('[DevTools] Mouse move', target, sourceElement);\n\n            if (sourceElement && sourceElement !== hoveredElement) {\n                console.log('[DevTools] Hovered element found:', sourceElement);\n                setHoveredElement(sourceElement);\n            }\n        };\n\n        const handleClick = (e: MouseEvent) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            const target = e.target as HTMLElement;\n\n            // Ignore clicks on overlay\n            if (target.hasAttribute('data-vdev-overlay')) return;\n\n            const sourceElement = findSourceElement(target, prefix);\n\n            if (sourceElement) {\n                const source = getSourceFromElement(sourceElement, prefix);\n                setSelectedElement(sourceElement);\n                setSelectedSource(source);\n                setInspecting(false);\n                setHoveredElement(null);\n\n                // Notify extension of selection\n                sendToExtension({\n                    type: 'VDEV_ELEMENT_SELECTED',\n                    payload: {\n                        source,\n                        elementInfo: {\n                            tagName: sourceElement.tagName.toLowerCase(),\n                            className: sourceElement.className,\n                            textContent: sourceElement.textContent?.slice(0, 100) || '',\n                        },\n                    },\n                });\n            }\n        };\n\n        // Use capture to intercept before normal handlers\n        document.addEventListener('mousemove', handleMouseMove, true);\n        document.addEventListener('click', handleClick, true);\n\n        // Add cursor style\n        document.body.style.cursor = 'crosshair';\n\n        return () => {\n            document.removeEventListener('mousemove', handleMouseMove, true);\n            document.removeEventListener('click', handleClick, true);\n            document.body.style.cursor = '';\n        };\n    }, [isInspecting, enabled, hoveredElement, prefix]);\n\n    // Don't render anything if disabled\n    if (!enabled) {\n        return <>{children}</>;\n    }\n\n    return (\n        <DevToolsContext.Provider\n            value={{\n                isInspecting,\n                setInspecting,\n                selectedElement,\n                selectedSource,\n                clearSelection\n            }}\n        >\n            {children}\n\n            {/* Hover highlighter */}\n            {isInspecting && hoveredElement && (\n                <Highlighter element={hoveredElement} />\n            )}\n\n            {/* Selection box */}\n            {selectedElement && (\n                <SelectionBox element={selectedElement} prefix={prefix} />\n            )}\n        </DevToolsContext.Provider>\n    );\n};\n","import React, { useEffect, useState } from 'react';\n\ninterface Props {\n    element: HTMLElement;\n    color?: string;\n}\n\n/**\n * Highlighter overlay component - shows a blue overlay on hovered elements\n */\nexport const Highlighter: React.FC<Props> = ({\n    element,\n    color = 'rgba(66, 153, 225, 0.3)'\n}) => {\n    const [rect, setRect] = useState<DOMRect | null>(null);\n\n    useEffect(() => {\n        const update = () => setRect(element.getBoundingClientRect());\n        update();\n\n        const observer = new ResizeObserver(update);\n        observer.observe(element);\n\n        window.addEventListener('scroll', update, true);\n        window.addEventListener('resize', update);\n\n        return () => {\n            observer.disconnect();\n            window.removeEventListener('scroll', update, true);\n            window.removeEventListener('resize', update);\n        };\n    }, [element]);\n\n    if (!rect) return null;\n\n    return (\n        <div\n            style={{\n                position: 'fixed',\n                top: rect.top,\n                left: rect.left,\n                width: rect.width,\n                height: rect.height,\n                backgroundColor: color,\n                border: '2px solid #4299e1',\n                pointerEvents: 'none',\n                zIndex: 999999,\n                transition: 'all 0.1s ease',\n                boxSizing: 'border-box',\n            }}\n            data-vdev-overlay=\"highlighter\"\n        />\n    );\n};\n","import React, { useEffect, useState } from 'react';\nimport type { SourceLocation } from '../types';\nimport { getSourceFromElement } from '../utils/sourceLocator';\n\ninterface Props {\n    element: HTMLElement;\n    prefix?: string;\n}\n\n/**\n * SelectionBox component - shows a persistent selection box with source info label\n */\nexport const SelectionBox: React.FC<Props> = ({ element, prefix = 'vdev' }) => {\n    const [rect, setRect] = useState<DOMRect | null>(null);\n    const [source, setSource] = useState<SourceLocation | null>(null);\n\n    useEffect(() => {\n        const update = () => setRect(element.getBoundingClientRect());\n        update();\n\n        // Get source info\n        setSource(getSourceFromElement(element, prefix));\n\n        const observer = new ResizeObserver(update);\n        observer.observe(element);\n\n        window.addEventListener('scroll', update, true);\n        window.addEventListener('resize', update);\n\n        return () => {\n            observer.disconnect();\n            window.removeEventListener('scroll', update, true);\n            window.removeEventListener('resize', update);\n        };\n    }, [element, prefix]);\n\n    if (!rect) return null;\n\n    // Format file path for display (show only basename)\n    const fileName = source?.fileName.split('/').pop() || 'unknown';\n    const lineInfo = source ? `${fileName}:${source.lineNumber}` : '';\n\n    return (\n        <>\n            {/* Selection border */}\n            <div\n                style={{\n                    position: 'fixed',\n                    top: rect.top,\n                    left: rect.left,\n                    width: rect.width,\n                    height: rect.height,\n                    border: '2px solid #6366f1',\n                    backgroundColor: 'rgba(99, 102, 241, 0.1)',\n                    pointerEvents: 'none',\n                    zIndex: 999999,\n                    boxSizing: 'border-box',\n                }}\n                data-vdev-overlay=\"selection\"\n            />\n\n            {/* Label showing file:line */}\n            {lineInfo && (\n                <div\n                    style={{\n                        position: 'fixed',\n                        top: Math.max(0, rect.top - 24),\n                        left: rect.left,\n                        backgroundColor: '#6366f1',\n                        color: 'white',\n                        fontSize: '11px',\n                        fontFamily: 'monospace',\n                        padding: '2px 6px',\n                        borderRadius: '3px',\n                        pointerEvents: 'none',\n                        zIndex: 999999,\n                        whiteSpace: 'nowrap',\n                    }}\n                    data-vdev-overlay=\"label\"\n                >\n                    {lineInfo}\n                </div>\n            )}\n        </>\n    );\n};\n","import type { SourceLocation } from '../types';\n\n/**\n * Get React Fiber node from DOM element\n * React attaches fiber information to DOM elements with internal keys\n */\nfunction getReactFiber(element: HTMLElement): any {\n    const key = Object.keys(element).find(\n        k => k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$')\n    );\n    return key ? (element as any)[key] : null;\n}\n\n/**\n * Walk up the fiber tree to find a fiber with _debugSource\n */\nfunction findFiberWithSource(fiber: any): any {\n    let current = fiber;\n    while (current) {\n        if (current._debugSource) {\n            return current;\n        }\n        current = current.return;\n    }\n    return null;\n}\n\n/**\n * Get source from React Fiber's _debugSource (runtime detection)\n * This is the preferred method as it doesn't require any build plugin\n */\nexport function getSourceFromFiber(element: HTMLElement): SourceLocation | null {\n    const fiber = getReactFiber(element);\n    if (!fiber) return null;\n\n    const fiberWithSource = findFiberWithSource(fiber);\n    if (fiberWithSource?._debugSource) {\n        const { fileName, lineNumber, columnNumber } = fiberWithSource._debugSource;\n        return {\n            fileName,\n            lineNumber,\n            columnNumber: columnNumber || 1\n        };\n    }\n    return null;\n}\n\n/**\n * Parse the data-vdev-source attribute value into a SourceLocation object\n * (Legacy support for projects using the babel/vite plugin)\n */\nexport function parseSourceAttr(attrValue: string | null): SourceLocation | null {\n    if (!attrValue) return null;\n\n    try {\n        const parsed = JSON.parse(attrValue);\n        if (\n            typeof parsed.fileName === 'string' &&\n            typeof parsed.lineNumber === 'number' &&\n            typeof parsed.columnNumber === 'number'\n        ) {\n            return parsed as SourceLocation;\n        }\n    } catch {\n        // Ignore parse errors\n    }\n\n    return null;\n}\n\n/**\n * Find the closest element with source information\n * First tries React Fiber (runtime), then falls back to data attributes\n */\nexport function findSourceElement(target: HTMLElement, prefix = 'vdev'): HTMLElement | null {\n    // First, try to find source from React Fiber (runtime)\n    let current: HTMLElement | null = target;\n    while (current && current !== document.body) {\n        if (getSourceFromFiber(current)) {\n            return current;\n        }\n        current = current.parentElement;\n    }\n\n    // Fallback: check for data attributes (legacy plugin support)\n    return target.closest(`[data-${prefix}-file], [data-${prefix}-source]`) as HTMLElement | null;\n}\n\n/**\n * Get source location from an element\n * Prioritizes React Fiber _debugSource, falls back to data attributes\n */\nexport function getSourceFromElement(element: HTMLElement, prefix = 'vdev'): SourceLocation | null {\n    // 1. Try React Fiber _debugSource first (runtime, no plugin needed)\n    const fiberSource = getSourceFromFiber(element);\n    if (fiberSource) {\n        return fiberSource;\n    }\n\n    // 2. Try new data attribute format (plugin-based)\n    const fileName = element.getAttribute(`data-${prefix}-file`);\n    const lineStr = element.getAttribute(`data-${prefix}-line`);\n    const colStr = element.getAttribute(`data-${prefix}-col`);\n\n    if (fileName && lineStr) {\n        return {\n            fileName,\n            lineNumber: parseInt(lineStr, 10),\n            columnNumber: colStr ? parseInt(colStr, 10) : 1\n        };\n    }\n\n    // 3. Fallback to legacy format (JSON in single attribute)\n    const attrValue = element.getAttribute(`data-${prefix}-source`);\n    return parseSourceAttr(attrValue);\n}\n\n","import type { VDevMessage } from '../types';\n\nconst MESSAGE_SOURCE = 'vdev-react-sdk';\n\n/**\n * Send a message to the Chrome extension via window.postMessage\n */\nexport function sendToExtension(message: VDevMessage): void {\n    window.postMessage(\n        { ...message, source: MESSAGE_SOURCE },\n        '*'\n    );\n}\n\n/**\n * Notify extension that SDK is ready\n */\nexport function notifyReady(): void {\n    sendToExtension({ type: 'VDEV_SDK_READY' });\n}\n\n/**\n * Create a message handler that only processes messages from the extension\n */\nexport function createMessageHandler(\n    handler: (message: VDevMessage) => void\n): (event: MessageEvent) => void {\n    return (event: MessageEvent) => {\n        // Only process messages from the same window\n        if (event.source !== window) return;\n\n        // Only process messages from extension (not from SDK itself)\n        if (event.data?.source === MESSAGE_SOURCE) return;\n\n        // Process VDEV messages\n        if (event.data?.type?.startsWith('VDEV_')) {\n            handler(event.data as VDevMessage);\n        }\n    };\n}\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/components/DevToolsProvider.tsx","../src/overlay/Highlighter.tsx","../src/overlay/SelectionBox.tsx","../src/utils/sourceLocator.ts","../src/utils/messaging.ts"],"sourcesContent":["// Components\nexport { DevToolsProvider, useDevTools } from './components';\n\n// Overlay (advanced usage)\nexport { Highlighter, SelectionBox } from './overlay';\n\n// Utilities\nexport {\n    parseSourceAttr,\n    findSourceElement,\n    getSourceFromElement\n} from './utils/sourceLocator';\n\nexport {\n    sendToExtension,\n    notifyReady,\n    createMessageHandler\n} from './utils/messaging';\n\n// Types\nexport type {\n    SourceLocation,\n    ElementInfo,\n    VDevMessage,\n    ElementSelectedPayload\n} from './types';\n","import React, {\n    createContext,\n    useContext,\n    useState,\n    useCallback,\n    useEffect,\n    type ReactNode\n} from 'react';\nimport { Highlighter } from '../overlay/Highlighter';\nimport { SelectionBox } from '../overlay/SelectionBox';\nimport { getSourceFromElement, findSourceElement } from '../utils/sourceLocator';\nimport { sendToExtension, createMessageHandler, notifyReady } from '../utils/messaging';\nimport type { SourceLocation, VDevMessage } from '../types';\n\ninterface DevToolsContextValue {\n    isInspecting: boolean;\n    setInspecting: (v: boolean) => void;\n    selectedElement: HTMLElement | null;\n    selectedSource: SourceLocation | null;\n    clearSelection: () => void;\n}\n\nconst DevToolsContext = createContext<DevToolsContextValue | null>(null);\n\nexport const useDevTools = () => {\n    const context = useContext(DevToolsContext);\n    if (!context) {\n        throw new Error('useDevTools must be used within a DevToolsProvider');\n    }\n    return context;\n};\n\ninterface DevToolsProviderProps {\n    children: ReactNode;\n    /** Only enable in development mode (default: true) */\n    enabled?: boolean;\n    /** Attribute prefix (default: 'vdev') */\n    prefix?: string;\n}\n\nexport const DevToolsProvider: React.FC<DevToolsProviderProps> = ({\n    children,\n    enabled = true,\n    prefix = 'vdev'\n}) => {\n    const [isInspecting, setInspecting] = useState(false);\n    const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);\n    const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(null);\n    const [selectedSource, setSelectedSource] = useState<SourceLocation | null>(null);\n\n    const clearSelection = useCallback(() => {\n        setSelectedElement(null);\n        setSelectedSource(null);\n    }, []);\n\n    // Listen to messages from extension\n    useEffect(() => {\n        if (!enabled) return;\n\n        const handler = createMessageHandler((message: VDevMessage) => {\n            console.log('[DevTools] Received message:', message);\n            if (message.type === 'VDEV_START_INSPECT') {\n                console.log('[DevTools] Starting inspection');\n                setInspecting(true);\n                clearSelection();\n            } else if (message.type === 'VDEV_STOP_INSPECT') {\n                console.log('[DevTools] Stopping inspection');\n                setInspecting(false);\n                setHoveredElement(null);\n            } else if (message.type === 'VDEV_TOGGLE_INSPECT') {\n                console.log('[DevTools] Toggling inspection');\n                setInspecting(prev => {\n                    const newState = !prev;\n                    if (newState) {\n                        // Starting inspection, clear selection\n                        clearSelection();\n                    } else {\n                        // Stopping inspection, clear hovered\n                        setHoveredElement(null);\n                    }\n                    // Notify extension of state change\n                    sendToExtension({\n                        type: 'VDEV_INSPECT_STATE_CHANGED',\n                        payload: { isInspecting: newState }\n                    });\n                    return newState;\n                });\n            } else if (message.type === 'VDEV_CLEAR_SELECTION') {\n                clearSelection();\n            }\n        });\n\n        window.addEventListener('message', handler);\n\n        // Notify extension that SDK is ready\n        notifyReady();\n        console.log('[DevTools] SDK Ready, listening for messages');\n\n        return () => window.removeEventListener('message', handler);\n    }, [enabled, clearSelection]);\n\n    // Handle mouse events in inspect mode\n    useEffect(() => {\n        if (!isInspecting || !enabled) return;\n\n        const handleMouseMove = (e: MouseEvent) => {\n            const target = e.target as HTMLElement;\n\n            // Ignore our own overlay elements\n            if (target.hasAttribute('data-vdev-overlay')) return;\n\n            const sourceElement = findSourceElement(target, prefix);\n            // console.log('[DevTools] Mouse move', target, sourceElement);\n\n            if (sourceElement && sourceElement !== hoveredElement) {\n                console.log('[DevTools] Hovered element found:', sourceElement);\n                setHoveredElement(sourceElement);\n            }\n        };\n\n        const handleClick = (e: MouseEvent) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            const target = e.target as HTMLElement;\n\n            // Ignore clicks on overlay\n            if (target.hasAttribute('data-vdev-overlay')) return;\n\n            const sourceElement = findSourceElement(target, prefix);\n\n            if (sourceElement) {\n                const source = getSourceFromElement(sourceElement, prefix);\n                setSelectedElement(sourceElement);\n                setSelectedSource(source);\n                setInspecting(false);\n                setHoveredElement(null);\n\n                // Notify extension of selection\n                sendToExtension({\n                    type: 'VDEV_ELEMENT_SELECTED',\n                    payload: {\n                        source,\n                        elementInfo: {\n                            tagName: sourceElement.tagName.toLowerCase(),\n                            className: sourceElement.className,\n                            textContent: sourceElement.textContent?.slice(0, 100) || '',\n                        },\n                    },\n                });\n            }\n        };\n\n        // Use capture to intercept before normal handlers\n        document.addEventListener('mousemove', handleMouseMove, true);\n        document.addEventListener('click', handleClick, true);\n\n        // Add cursor style\n        document.body.style.cursor = 'crosshair';\n\n        return () => {\n            document.removeEventListener('mousemove', handleMouseMove, true);\n            document.removeEventListener('click', handleClick, true);\n            document.body.style.cursor = '';\n        };\n    }, [isInspecting, enabled, hoveredElement, prefix]);\n\n    // Don't render anything if disabled\n    if (!enabled) {\n        return <>{children}</>;\n    }\n\n    return (\n        <DevToolsContext.Provider\n            value={{\n                isInspecting,\n                setInspecting,\n                selectedElement,\n                selectedSource,\n                clearSelection\n            }}\n        >\n            {children}\n\n            {/* Hover highlighter */}\n            {isInspecting && hoveredElement && (\n                <Highlighter element={hoveredElement} />\n            )}\n\n            {/* Selection box */}\n            {selectedElement && (\n                <SelectionBox element={selectedElement} prefix={prefix} />\n            )}\n        </DevToolsContext.Provider>\n    );\n};\n","import React, { useEffect, useState } from 'react';\n\ninterface Props {\n    element: HTMLElement;\n    color?: string;\n}\n\n/**\n * Highlighter overlay component - shows a blue overlay on hovered elements\n */\nexport const Highlighter: React.FC<Props> = ({\n    element,\n    color = 'rgba(66, 153, 225, 0.3)'\n}) => {\n    const [rect, setRect] = useState<DOMRect | null>(null);\n\n    useEffect(() => {\n        const update = () => setRect(element.getBoundingClientRect());\n        update();\n\n        const observer = new ResizeObserver(update);\n        observer.observe(element);\n\n        window.addEventListener('scroll', update, true);\n        window.addEventListener('resize', update);\n\n        return () => {\n            observer.disconnect();\n            window.removeEventListener('scroll', update, true);\n            window.removeEventListener('resize', update);\n        };\n    }, [element]);\n\n    if (!rect) return null;\n\n    return (\n        <div\n            style={{\n                position: 'fixed',\n                top: rect.top,\n                left: rect.left,\n                width: rect.width,\n                height: rect.height,\n                backgroundColor: color,\n                border: '2px solid #4299e1',\n                pointerEvents: 'none',\n                zIndex: 999999,\n                transition: 'all 0.1s ease',\n                boxSizing: 'border-box',\n            }}\n            data-vdev-overlay=\"highlighter\"\n        />\n    );\n};\n","import React, { useEffect, useState } from 'react';\nimport type { SourceLocation } from '../types';\nimport { getSourceFromElement } from '../utils/sourceLocator';\n\ninterface Props {\n    element: HTMLElement;\n    prefix?: string;\n}\n\n/**\n * SelectionBox component - shows a persistent selection box with source info label\n */\nexport const SelectionBox: React.FC<Props> = ({ element, prefix = 'vdev' }) => {\n    const [rect, setRect] = useState<DOMRect | null>(null);\n    const [source, setSource] = useState<SourceLocation | null>(null);\n\n    useEffect(() => {\n        const update = () => setRect(element.getBoundingClientRect());\n        update();\n\n        // Get source info\n        setSource(getSourceFromElement(element, prefix));\n\n        const observer = new ResizeObserver(update);\n        observer.observe(element);\n\n        window.addEventListener('scroll', update, true);\n        window.addEventListener('resize', update);\n\n        return () => {\n            observer.disconnect();\n            window.removeEventListener('scroll', update, true);\n            window.removeEventListener('resize', update);\n        };\n    }, [element, prefix]);\n\n    if (!rect) return null;\n\n    // Format file path for display (show only basename)\n    const fileName = source?.fileName.split('/').pop() || 'unknown';\n    const lineInfo = source ? `${fileName}:${source.lineNumber}` : '';\n\n    return (\n        <>\n            {/* Selection border */}\n            <div\n                style={{\n                    position: 'fixed',\n                    top: rect.top,\n                    left: rect.left,\n                    width: rect.width,\n                    height: rect.height,\n                    border: '2px solid #6366f1',\n                    backgroundColor: 'rgba(99, 102, 241, 0.1)',\n                    pointerEvents: 'none',\n                    zIndex: 999999,\n                    boxSizing: 'border-box',\n                }}\n                data-vdev-overlay=\"selection\"\n            />\n\n            {/* Label showing file:line */}\n            {lineInfo && (\n                <div\n                    style={{\n                        position: 'fixed',\n                        top: Math.max(0, rect.top - 24),\n                        left: rect.left,\n                        backgroundColor: '#6366f1',\n                        color: 'white',\n                        fontSize: '11px',\n                        fontFamily: 'monospace',\n                        padding: '2px 6px',\n                        borderRadius: '3px',\n                        pointerEvents: 'none',\n                        zIndex: 999999,\n                        whiteSpace: 'nowrap',\n                    }}\n                    data-vdev-overlay=\"label\"\n                >\n                    {lineInfo}\n                </div>\n            )}\n        </>\n    );\n};\n","/**\n * Source Location Detection Utilities\n * Reference implementation based on:\n * https://github.com/benjitaylor/agentation/blob/main/package/src/utils/source-location.ts\n */\n\nexport interface SourceLocation {\n    fileName: string;\n    lineNumber: number;\n    columnNumber: number;\n    componentName?: string;\n}\n\n/**\n * React Fiber node structure (partial)\n */\ninterface ReactFiber {\n    _debugSource?: {\n        fileName: string;\n        lineNumber: number;\n        columnNumber?: number;\n    };\n    _debugOwner?: ReactFiber;\n    _debugInfo?: any; // React 19 specific\n    type?: {\n        displayName?: string;\n        name?: string;\n    } | string | any;\n    tag?: number;\n    return?: ReactFiber | null;\n    memoizedProps?: Record<string, any>;\n    pendingProps?: Record<string, any>;\n}\n\n/**\n * Gets the React fiber node associated with a DOM element\n */\nfunction getFiberFromElement(element: HTMLElement): ReactFiber | null {\n    if (!element || typeof element !== \"object\") {\n        return null;\n    }\n\n    const keys = Object.keys(element);\n\n    // React 18+ uses __reactFiber$ prefix\n    const fiberKey = keys.find((key) => key.startsWith(\"__reactFiber$\"));\n    if (fiberKey) {\n        return (element as any)[fiberKey];\n    }\n\n    // React 16-17 uses __reactInternalInstance$ prefix\n    const instanceKey = keys.find((key) => key.startsWith(\"__reactInternalInstance$\"));\n    if (instanceKey) {\n        return (element as any)[instanceKey];\n    }\n\n    // React 19 may use different patterns - check for any fiber-like object\n    // that contains _debugSource, or looks like a fiber\n    const possibleFiberKey = keys.find((key) => {\n        if (!key.startsWith(\"__react\")) return false;\n        // Avoid known non-fiber keys\n        if (key.startsWith(\"__reactContainer\") || key.startsWith(\"__reactProps\") || key.startsWith(\"__reactEvents\")) return false;\n\n        const value = (element as any)[key];\n        return value && typeof value === \"object\" &&\n            (\"_debugSource\" in value || \"tag\" in value || \"return\" in value);\n    });\n\n    if (possibleFiberKey) {\n        return (element as any)[possibleFiberKey];\n    }\n\n    return null;\n}\n\n/**\n * Gets the display name of a React component from its fiber\n */\nfunction getComponentName(fiber: ReactFiber): string | null {\n    if (!fiber.type) return null;\n    if (typeof fiber.type === \"string\") return null;\n\n    if (typeof fiber.type === \"object\" || typeof fiber.type === \"function\") {\n        return fiber.type.displayName || fiber.type.name || null;\n    }\n    return null;\n}\n\n/**\n * Walks up the fiber tree to find the nearest component with _debugSource\n * (Standard React 16-18)\n */\nfunction findDebugSource(fiber: ReactFiber, maxDepth = 50): { source: NonNullable<ReactFiber[\"_debugSource\"]>; componentName: string | null } | null {\n    let current: ReactFiber | null | undefined = fiber;\n    let depth = 0;\n\n    while (current && depth < maxDepth) {\n        if (current._debugSource) {\n            return {\n                source: current._debugSource,\n                componentName: getComponentName(current),\n            };\n        }\n\n        if (current._debugOwner?._debugSource) {\n            return {\n                source: current._debugOwner._debugSource,\n                componentName: getComponentName(current._debugOwner),\n            };\n        }\n\n        current = current.return;\n        depth++;\n    }\n\n    return null;\n}\n\n/**\n * Attempts to find source location using React 19's potentially different structure\n * or alternative build tool injections\n */\nfunction findDebugSourceReact19(fiber: ReactFiber): { source: NonNullable<ReactFiber[\"_debugSource\"]>; componentName: string | null } | null {\n    let current: ReactFiber | null | undefined = fiber;\n    let depth = 0;\n    const maxDepth = 50;\n\n    while (current && depth < maxDepth) {\n        const anyFiber = current as any;\n\n        // 1. Check for valid keys on the fiber itself\n        const possibleSourceKeys = [\"_debugSource\", \"__source\", \"_source\", \"debugSource\", \"_debugInfo\"];\n        for (const key of possibleSourceKeys) {\n            const source = anyFiber[key];\n            if (source) {\n                // Handle standard object with fileName\n                if (typeof source === \"object\" && typeof source.fileName === 'string') {\n                    return {\n                        source: source,\n                        componentName: getComponentName(current),\n                    };\n                }\n                // Handle React 19 _debugInfo array\n                if (Array.isArray(source)) {\n                    for (const info of source) {\n                        if (info && typeof info.fileName === 'string') {\n                            return {\n                                source: info,\n                                componentName: getComponentName(current)\n                            };\n                        }\n                    }\n                }\n            }\n        }\n\n        // 2. Check memoizedProps/pendingProps for injected __source\n        const props = current.memoizedProps || current.pendingProps;\n        if (props && typeof props === 'object') {\n            if (props.__source && typeof props.__source === 'object' && props.__source.fileName) {\n                return {\n                    source: props.__source as any,\n                    componentName: getComponentName(current)\n                };\n            }\n        }\n\n        current = current.return;\n        depth++;\n    }\n\n    return null;\n}\n\n/**\n * Parse the data-vdev-source attribute value (Legacy/Fallback)\n */\nexport function parseSourceAttr(attrValue: string | null): SourceLocation | null {\n    if (!attrValue) return null;\n    try {\n        // Try parsing JSON first\n        if (attrValue.startsWith('{')) {\n            const parsed = JSON.parse(attrValue);\n            if (parsed.fileName && typeof parsed.lineNumber === 'number') {\n                return parsed as SourceLocation;\n            }\n        }\n    } catch { }\n    return null;\n}\n\n/**\n * Main function to get source location from an element\n * Combines Fiber inspection and data attribute fallbacks\n */\nexport function getSourceFromElement(element: HTMLElement, prefix = 'vdev'): SourceLocation | null {\n    // 1. Try React Fiber (Runtime)\n    const fiber = getFiberFromElement(element);\n    if (fiber) {\n        // Try standard strategy\n        let result = findDebugSource(fiber);\n\n        // Try React 19 strategy if standard failed\n        if (!result) {\n            result = findDebugSourceReact19(fiber);\n        }\n\n        if (result) {\n            return {\n                fileName: result.source.fileName,\n                lineNumber: result.source.lineNumber,\n                columnNumber: result.source.columnNumber || 1,\n                componentName: result.componentName || undefined\n            };\n        }\n    }\n\n    // 2. Fallback: Data attributes (Build-time plugin)\n    // Check for explicit individual attributes from vite-plugin\n    const file = element.getAttribute(`data-${prefix}-file`);\n    const line = element.getAttribute(`data-${prefix}-line`);\n    const col = element.getAttribute(`data-${prefix}-col`);\n\n    if (file && line) {\n        return {\n            fileName: file,\n            lineNumber: parseInt(line, 10),\n            columnNumber: col ? parseInt(col, 10) : 1,\n            componentName: element.tagName.toLowerCase() // Simple fallback\n        };\n    }\n\n    return null;\n}\n\n/**\n * Find the closest element with source information\n */\nexport function findSourceElement(target: HTMLElement, prefix = 'vdev'): HTMLElement | null {\n    let current: HTMLElement | null = target;\n\n    // Check up to Body\n    while (current && current !== document.body) {\n        // Check if this element has source info via Fiber OR Attributes\n        if (getSourceFromElement(current, prefix)) {\n            return current;\n        }\n        current = current.parentElement;\n    }\n\n    return null;\n}\n","import type { VDevMessage } from '../types';\n\nconst MESSAGE_SOURCE = 'vdev-react-sdk';\n\n/**\n * Send a message to the Chrome extension via window.postMessage\n */\nexport function sendToExtension(message: VDevMessage): void {\n    window.postMessage(\n        { ...message, source: MESSAGE_SOURCE },\n        '*'\n    );\n}\n\n/**\n * Notify extension that SDK is ready\n */\nexport function notifyReady(): void {\n    sendToExtension({ type: 'VDEV_SDK_READY' });\n}\n\n/**\n * Create a message handler that only processes messages from the extension\n */\nexport function createMessageHandler(\n    handler: (message: VDevMessage) => void\n): (event: MessageEvent) => void {\n    return (event: MessageEvent) => {\n        // Only process messages from the same window\n        if (event.source !== window) return;\n\n        // Only process messages from extension (not from SDK itself)\n        if (event.data?.source === MESSAGE_SOURCE) return;\n\n        // Process VDEV messages\n        if (event.data?.type?.startsWith('VDEV_')) {\n            handler(event.data as VDevMessage);\n        }\n    };\n}\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime","import_jsx_runtime"]}