@visual-agentic-dev/react-devtools 1.1.4

package/dist/index.js

@@ -0,0 +1,380 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DevToolsProvider: () => DevToolsProvider,
+  Highlighter: () => Highlighter,
+  SelectionBox: () => SelectionBox,
+  createMessageHandler: () => createMessageHandler,
+  findSourceElement: () => findSourceElement,
+  getSourceFromElement: () => getSourceFromElement,
+  notifyReady: () => notifyReady,
+  parseSourceAttr: () => parseSourceAttr,
+  sendToExtension: () => sendToExtension,
+  useDevTools: () => useDevTools
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/DevToolsProvider.tsx
+var import_react3 = require("react");
+
+// src/overlay/Highlighter.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Highlighter = ({
+  element,
+  color = "rgba(66, 153, 225, 0.3)"
+}) => {
+  const [rect, setRect] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    const update = () => setRect(element.getBoundingClientRect());
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [element]);
+  if (!rect) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        backgroundColor: color,
+        border: "2px solid #4299e1",
+        pointerEvents: "none",
+        zIndex: 999999,
+        transition: "all 0.1s ease",
+        boxSizing: "border-box"
+      },
+      "data-vdev-overlay": "highlighter"
+    }
+  );
+};
+
+// src/overlay/SelectionBox.tsx
+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 findFiberWithSource(fiber) {
+  let current = fiber;
+  while (current) {
+    if (current._debugSource) {
+      return current;
+    }
+    current = current.return;
+  }
+  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
+    };
+  }
+  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;
+    }
+  } catch {
+  }
+  return null;
+}
+function findSourceElement(target, prefix = "vdev") {
+  let current = target;
+  while (current && current !== document.body) {
+    if (getSourceFromFiber(current)) {
+      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);
+}
+
+// src/overlay/SelectionBox.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SelectionBox = ({ element, prefix = "vdev" }) => {
+  const [rect, setRect] = (0, import_react2.useState)(null);
+  const [source, setSource] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    const update = () => setRect(element.getBoundingClientRect());
+    update();
+    setSource(getSourceFromElement(element, prefix));
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [element, prefix]);
+  if (!rect) return null;
+  const fileName = source?.fileName.split("/").pop() || "unknown";
+  const lineInfo = source ? `${fileName}:${source.lineNumber}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height,
+          border: "2px solid #6366f1",
+          backgroundColor: "rgba(99, 102, 241, 0.1)",
+          pointerEvents: "none",
+          zIndex: 999999,
+          boxSizing: "border-box"
+        },
+        "data-vdev-overlay": "selection"
+      }
+    ),
+    lineInfo && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: Math.max(0, rect.top - 24),
+          left: rect.left,
+          backgroundColor: "#6366f1",
+          color: "white",
+          fontSize: "11px",
+          fontFamily: "monospace",
+          padding: "2px 6px",
+          borderRadius: "3px",
+          pointerEvents: "none",
+          zIndex: 999999,
+          whiteSpace: "nowrap"
+        },
+        "data-vdev-overlay": "label",
+        children: lineInfo
+      }
+    )
+  ] });
+};
+
+// src/utils/messaging.ts
+var MESSAGE_SOURCE = "vdev-react-sdk";
+function sendToExtension(message) {
+  window.postMessage(
+    { ...message, source: MESSAGE_SOURCE },
+    "*"
+  );
+}
+function notifyReady() {
+  sendToExtension({ type: "VDEV_SDK_READY" });
+}
+function createMessageHandler(handler) {
+  return (event) => {
+    if (event.source !== window) return;
+    if (event.data?.source === MESSAGE_SOURCE) return;
+    if (event.data?.type?.startsWith("VDEV_")) {
+      handler(event.data);
+    }
+  };
+}
+
+// src/components/DevToolsProvider.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DevToolsContext = (0, import_react3.createContext)(null);
+var useDevTools = () => {
+  const context = (0, import_react3.useContext)(DevToolsContext);
+  if (!context) {
+    throw new Error("useDevTools must be used within a DevToolsProvider");
+  }
+  return context;
+};
+var DevToolsProvider = ({
+  children,
+  enabled = true,
+  prefix = "vdev"
+}) => {
+  const [isInspecting, setInspecting] = (0, import_react3.useState)(false);
+  const [hoveredElement, setHoveredElement] = (0, import_react3.useState)(null);
+  const [selectedElement, setSelectedElement] = (0, import_react3.useState)(null);
+  const [selectedSource, setSelectedSource] = (0, import_react3.useState)(null);
+  const clearSelection = (0, import_react3.useCallback)(() => {
+    setSelectedElement(null);
+    setSelectedSource(null);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) return;
+    const handler = createMessageHandler((message) => {
+      console.log("[DevTools] Received message:", message);
+      if (message.type === "VDEV_START_INSPECT") {
+        console.log("[DevTools] Starting inspection");
+        setInspecting(true);
+        clearSelection();
+      } else if (message.type === "VDEV_STOP_INSPECT") {
+        console.log("[DevTools] Stopping inspection");
+        setInspecting(false);
+        setHoveredElement(null);
+      } else if (message.type === "VDEV_TOGGLE_INSPECT") {
+        console.log("[DevTools] Toggling inspection");
+        setInspecting((prev) => {
+          const newState = !prev;
+          if (newState) {
+            clearSelection();
+          } else {
+            setHoveredElement(null);
+          }
+          sendToExtension({
+            type: "VDEV_INSPECT_STATE_CHANGED",
+            payload: { isInspecting: newState }
+          });
+          return newState;
+        });
+      } else if (message.type === "VDEV_CLEAR_SELECTION") {
+        clearSelection();
+      }
+    });
+    window.addEventListener("message", handler);
+    notifyReady();
+    console.log("[DevTools] SDK Ready, listening for messages");
+    return () => window.removeEventListener("message", handler);
+  }, [enabled, clearSelection]);
+  (0, import_react3.useEffect)(() => {
+    if (!isInspecting || !enabled) return;
+    const handleMouseMove = (e) => {
+      const target = e.target;
+      if (target.hasAttribute("data-vdev-overlay")) return;
+      const sourceElement = findSourceElement(target, prefix);
+      if (sourceElement && sourceElement !== hoveredElement) {
+        console.log("[DevTools] Hovered element found:", sourceElement);
+        setHoveredElement(sourceElement);
+      }
+    };
+    const handleClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.target;
+      if (target.hasAttribute("data-vdev-overlay")) return;
+      const sourceElement = findSourceElement(target, prefix);
+      if (sourceElement) {
+        const source = getSourceFromElement(sourceElement, prefix);
+        setSelectedElement(sourceElement);
+        setSelectedSource(source);
+        setInspecting(false);
+        setHoveredElement(null);
+        sendToExtension({
+          type: "VDEV_ELEMENT_SELECTED",
+          payload: {
+            source,
+            elementInfo: {
+              tagName: sourceElement.tagName.toLowerCase(),
+              className: sourceElement.className,
+              textContent: sourceElement.textContent?.slice(0, 100) || ""
+            }
+          }
+        });
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.body.style.cursor = "crosshair";
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.body.style.cursor = "";
+    };
+  }, [isInspecting, enabled, hoveredElement, prefix]);
+  if (!enabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    DevToolsContext.Provider,
+    {
+      value: {
+        isInspecting,
+        setInspecting,
+        selectedElement,
+        selectedSource,
+        clearSelection
+      },
+      children: [
+        children,
+        isInspecting && hoveredElement && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Highlighter, { element: hoveredElement }),
+        selectedElement && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectionBox, { element: selectedElement, prefix })
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DevToolsProvider,
+  Highlighter,
+  SelectionBox,
+  createMessageHandler,
+  findSourceElement,
+  getSourceFromElement,
+  notifyReady,
+  parseSourceAttr,
+  sendToExtension,
+  useDevTools
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}