@visual-agentic-dev/react-devtools 1.1.4

package/dist/babel-plugin/jsx-source.d.mts

@@ -0,0 +1,12 @@
+import * as _babel_core from '@babel/core';
+import { PluginObj } from '@babel/core';
+
+interface PluginOptions {
+    /** Prefix for the data attribute (default: 'vdev') */
+    prefix?: string;
+    /** File patterns to exclude */
+    exclude?: RegExp[];
+}
+declare const _default: (api: object, options: PluginOptions | null | undefined, dirname: string) => PluginObj<_babel_core.PluginPass>;
+
+export { _default as default };

package/dist/babel-plugin/jsx-source.d.ts

@@ -0,0 +1,12 @@
+import * as _babel_core from '@babel/core';
+import { PluginObj } from '@babel/core';
+
+interface PluginOptions {
+    /** Prefix for the data attribute (default: 'vdev') */
+    prefix?: string;
+    /** File patterns to exclude */
+    exclude?: RegExp[];
+}
+declare const _default: (api: object, options: PluginOptions | null | undefined, dirname: string) => PluginObj<_babel_core.PluginPass>;
+
+export { _default as default };

package/dist/babel-plugin/jsx-source.js

@@ -0,0 +1,73 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/babel-plugin/jsx-source.ts
+var jsx_source_exports = {};
+__export(jsx_source_exports, {
+  default: () => jsx_source_default
+});
+module.exports = __toCommonJS(jsx_source_exports);
+var import_helper_plugin_utils = require("@babel/helper-plugin-utils");
+var t = __toESM(require("@babel/types"));
+var jsx_source_default = (0, import_helper_plugin_utils.declare)((api, options) => {
+  api.assertVersion(7);
+  const prefix = options.prefix || "vdev";
+  const exclude = options.exclude || [/node_modules/];
+  return {
+    name: "visual-agentic-dev-jsx-source",
+    visitor: {
+      JSXOpeningElement(path, state) {
+        const filename = state.filename || "";
+        if (exclude.some((pattern) => pattern.test(filename))) {
+          return;
+        }
+        const { line, column } = path.node.loc?.start || {};
+        if (!filename || line === void 0) return;
+        const hasAttr = path.node.attributes.some(
+          (attr) => t.isJSXAttribute(attr) && (attr.name.name === `data-${prefix}-file` || attr.name.name === `data-${prefix}-source`)
+        );
+        if (hasAttr) return;
+        const fileAttr = t.jsxAttribute(
+          t.jsxIdentifier(`data-${prefix}-file`),
+          t.stringLiteral(filename)
+        );
+        const lineAttr = t.jsxAttribute(
+          t.jsxIdentifier(`data-${prefix}-line`),
+          t.stringLiteral(String(line))
+        );
+        const colAttr = t.jsxAttribute(
+          t.jsxIdentifier(`data-${prefix}-col`),
+          t.stringLiteral(String(column))
+        );
+        path.node.attributes.push(fileAttr, lineAttr, colAttr);
+      }
+    }
+  };
+});
+//# sourceMappingURL=jsx-source.js.map

package/dist/babel-plugin/jsx-source.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/babel-plugin/jsx-source.ts"],"sourcesContent":["import { declare } from '@babel/helper-plugin-utils';\nimport type { PluginObj, NodePath } from '@babel/core';\nimport * as t from '@babel/types';\n\ninterface PluginOptions {\n    /** Prefix for the data attribute (default: 'vdev') */\n    prefix?: string;\n    /** File patterns to exclude */\n    exclude?: RegExp[];\n}\n\nexport default declare((api, options: PluginOptions): PluginObj => {\n    api.assertVersion(7);\n\n    const prefix = options.prefix || 'vdev';\n    const exclude = options.exclude || [/node_modules/];\n\n    return {\n        name: 'visual-agentic-dev-jsx-source',\n        visitor: {\n            JSXOpeningElement(path: NodePath<t.JSXOpeningElement>, state) {\n                const filename = state.filename || '';\n\n                // Check if file should be excluded\n                if (exclude.some(pattern => pattern.test(filename))) {\n                    return;\n                }\n\n                const { line, column } = path.node.loc?.start || {};\n\n                if (!filename || line === undefined) return;\n\n                // Check if attribute already exists\n                const hasAttr = path.node.attributes.some(\n                    attr => t.isJSXAttribute(attr) &&\n                        (attr.name.name === `data-${prefix}-file` ||\n                            attr.name.name === `data-${prefix}-source`)\n                );\n\n                if (hasAttr) return;\n\n                // Use separate attributes to avoid JSON escaping issues with esbuild\n                // Format: data-vdev-file, data-vdev-line, data-vdev-col\n                const fileAttr = t.jsxAttribute(\n                    t.jsxIdentifier(`data-${prefix}-file`),\n                    t.stringLiteral(filename)\n                );\n\n                const lineAttr = t.jsxAttribute(\n                    t.jsxIdentifier(`data-${prefix}-line`),\n                    t.stringLiteral(String(line))\n                );\n\n                const colAttr = t.jsxAttribute(\n                    t.jsxIdentifier(`data-${prefix}-col`),\n                    t.stringLiteral(String(column))\n                );\n\n                path.node.attributes.push(fileAttr, lineAttr, colAttr);\n            },\n        },\n    };\n});\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAAwB;AAExB,QAAmB;AASnB,IAAO,yBAAQ,oCAAQ,CAAC,KAAK,YAAsC;AAC/D,MAAI,cAAc,CAAC;AAEnB,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,UAAU,QAAQ,WAAW,CAAC,cAAc;AAElD,SAAO;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA,MACL,kBAAkB,MAAqC,OAAO;AAC1D,cAAM,WAAW,MAAM,YAAY;AAGnC,YAAI,QAAQ,KAAK,aAAW,QAAQ,KAAK,QAAQ,CAAC,GAAG;AACjD;AAAA,QACJ;AAEA,cAAM,EAAE,MAAM,OAAO,IAAI,KAAK,KAAK,KAAK,SAAS,CAAC;AAElD,YAAI,CAAC,YAAY,SAAS,OAAW;AAGrC,cAAM,UAAU,KAAK,KAAK,WAAW;AAAA,UACjC,UAAU,iBAAe,IAAI,MACxB,KAAK,KAAK,SAAS,QAAQ,MAAM,WAC9B,KAAK,KAAK,SAAS,QAAQ,MAAM;AAAA,QAC7C;AAEA,YAAI,QAAS;AAIb,cAAM,WAAa;AAAA,UACb,gBAAc,QAAQ,MAAM,OAAO;AAAA,UACnC,gBAAc,QAAQ;AAAA,QAC5B;AAEA,cAAM,WAAa;AAAA,UACb,gBAAc,QAAQ,MAAM,OAAO;AAAA,UACnC,gBAAc,OAAO,IAAI,CAAC;AAAA,QAChC;AAEA,cAAM,UAAY;AAAA,UACZ,gBAAc,QAAQ,MAAM,MAAM;AAAA,UAClC,gBAAc,OAAO,MAAM,CAAC;AAAA,QAClC;AAEA,aAAK,KAAK,WAAW,KAAK,UAAU,UAAU,OAAO;AAAA,MACzD;AAAA,IACJ;AAAA,EACJ;AACJ,CAAC;","names":[]}

package/dist/babel-plugin/jsx-source.mjs

@@ -0,0 +1,42 @@
+// src/babel-plugin/jsx-source.ts
+import { declare } from "@babel/helper-plugin-utils";
+import * as t from "@babel/types";
+var jsx_source_default = declare((api, options) => {
+  api.assertVersion(7);
+  const prefix = options.prefix || "vdev";
+  const exclude = options.exclude || [/node_modules/];
+  return {
+    name: "visual-agentic-dev-jsx-source",
+    visitor: {
+      JSXOpeningElement(path, state) {
+        const filename = state.filename || "";
+        if (exclude.some((pattern) => pattern.test(filename))) {
+          return;
+        }
+        const { line, column } = path.node.loc?.start || {};
+        if (!filename || line === void 0) return;
+        const hasAttr = path.node.attributes.some(
+          (attr) => t.isJSXAttribute(attr) && (attr.name.name === `data-${prefix}-file` || attr.name.name === `data-${prefix}-source`)
+        );
+        if (hasAttr) return;
+        const fileAttr = t.jsxAttribute(
+          t.jsxIdentifier(`data-${prefix}-file`),
+          t.stringLiteral(filename)
+        );
+        const lineAttr = t.jsxAttribute(
+          t.jsxIdentifier(`data-${prefix}-line`),
+          t.stringLiteral(String(line))
+        );
+        const colAttr = t.jsxAttribute(
+          t.jsxIdentifier(`data-${prefix}-col`),
+          t.stringLiteral(String(column))
+        );
+        path.node.attributes.push(fileAttr, lineAttr, colAttr);
+      }
+    }
+  };
+});
+export {
+  jsx_source_default as default
+};
+//# sourceMappingURL=jsx-source.mjs.map

package/dist/babel-plugin/jsx-source.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/babel-plugin/jsx-source.ts"],"sourcesContent":["import { declare } from '@babel/helper-plugin-utils';\nimport type { PluginObj, NodePath } from '@babel/core';\nimport * as t from '@babel/types';\n\ninterface PluginOptions {\n    /** Prefix for the data attribute (default: 'vdev') */\n    prefix?: string;\n    /** File patterns to exclude */\n    exclude?: RegExp[];\n}\n\nexport default declare((api, options: PluginOptions): PluginObj => {\n    api.assertVersion(7);\n\n    const prefix = options.prefix || 'vdev';\n    const exclude = options.exclude || [/node_modules/];\n\n    return {\n        name: 'visual-agentic-dev-jsx-source',\n        visitor: {\n            JSXOpeningElement(path: NodePath<t.JSXOpeningElement>, state) {\n                const filename = state.filename || '';\n\n                // Check if file should be excluded\n                if (exclude.some(pattern => pattern.test(filename))) {\n                    return;\n                }\n\n                const { line, column } = path.node.loc?.start || {};\n\n                if (!filename || line === undefined) return;\n\n                // Check if attribute already exists\n                const hasAttr = path.node.attributes.some(\n                    attr => t.isJSXAttribute(attr) &&\n                        (attr.name.name === `data-${prefix}-file` ||\n                            attr.name.name === `data-${prefix}-source`)\n                );\n\n                if (hasAttr) return;\n\n                // Use separate attributes to avoid JSON escaping issues with esbuild\n                // Format: data-vdev-file, data-vdev-line, data-vdev-col\n                const fileAttr = t.jsxAttribute(\n                    t.jsxIdentifier(`data-${prefix}-file`),\n                    t.stringLiteral(filename)\n                );\n\n                const lineAttr = t.jsxAttribute(\n                    t.jsxIdentifier(`data-${prefix}-line`),\n                    t.stringLiteral(String(line))\n                );\n\n                const colAttr = t.jsxAttribute(\n                    t.jsxIdentifier(`data-${prefix}-col`),\n                    t.stringLiteral(String(column))\n                );\n\n                path.node.attributes.push(fileAttr, lineAttr, colAttr);\n            },\n        },\n    };\n});\n\n"],"mappings":";AAAA,SAAS,eAAe;AAExB,YAAY,OAAO;AASnB,IAAO,qBAAQ,QAAQ,CAAC,KAAK,YAAsC;AAC/D,MAAI,cAAc,CAAC;AAEnB,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,UAAU,QAAQ,WAAW,CAAC,cAAc;AAElD,SAAO;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA,MACL,kBAAkB,MAAqC,OAAO;AAC1D,cAAM,WAAW,MAAM,YAAY;AAGnC,YAAI,QAAQ,KAAK,aAAW,QAAQ,KAAK,QAAQ,CAAC,GAAG;AACjD;AAAA,QACJ;AAEA,cAAM,EAAE,MAAM,OAAO,IAAI,KAAK,KAAK,KAAK,SAAS,CAAC;AAElD,YAAI,CAAC,YAAY,SAAS,OAAW;AAGrC,cAAM,UAAU,KAAK,KAAK,WAAW;AAAA,UACjC,UAAU,iBAAe,IAAI,MACxB,KAAK,KAAK,SAAS,QAAQ,MAAM,WAC9B,KAAK,KAAK,SAAS,QAAQ,MAAM;AAAA,QAC7C;AAEA,YAAI,QAAS;AAIb,cAAM,WAAa;AAAA,UACb,gBAAc,QAAQ,MAAM,OAAO;AAAA,UACnC,gBAAc,QAAQ;AAAA,QAC5B;AAEA,cAAM,WAAa;AAAA,UACb,gBAAc,QAAQ,MAAM,OAAO;AAAA,UACnC,gBAAc,OAAO,IAAI,CAAC;AAAA,QAChC;AAEA,cAAM,UAAY;AAAA,UACZ,gBAAc,QAAQ,MAAM,MAAM;AAAA,UAClC,gBAAc,OAAO,MAAM,CAAC;AAAA,QAClC;AAEA,aAAK,KAAK,WAAW,KAAK,UAAU,UAAU,OAAO;AAAA,MACzD;AAAA,IACJ;AAAA,EACJ;AACJ,CAAC;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,87 @@
+import React, { ReactNode } from 'react';
+
+interface SourceLocation {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}
+interface ElementInfo {
+    tagName: string;
+    className: string;
+    textContent: string;
+}
+interface VDevMessage {
+    type: string;
+    source?: string;
+    payload?: unknown;
+}
+interface ElementSelectedPayload {
+    source: SourceLocation;
+    elementInfo: ElementInfo;
+}
+
+interface DevToolsContextValue {
+    isInspecting: boolean;
+    setInspecting: (v: boolean) => void;
+    selectedElement: HTMLElement | null;
+    selectedSource: SourceLocation | null;
+    clearSelection: () => void;
+}
+declare const useDevTools: () => DevToolsContextValue;
+interface DevToolsProviderProps {
+    children: ReactNode;
+    /** Only enable in development mode (default: true) */
+    enabled?: boolean;
+    /** Attribute prefix (default: 'vdev') */
+    prefix?: string;
+}
+declare const DevToolsProvider: React.FC<DevToolsProviderProps>;
+
+interface Props$1 {
+    element: HTMLElement;
+    color?: string;
+}
+/**
+ * Highlighter overlay component - shows a blue overlay on hovered elements
+ */
+declare const Highlighter: React.FC<Props$1>;
+
+interface Props {
+    element: HTMLElement;
+    prefix?: string;
+}
+/**
+ * SelectionBox component - shows a persistent selection box with source info label
+ */
+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)
+ */
+declare function parseSourceAttr(attrValue: string | null): SourceLocation | null;
+/**
+ * Find the closest element with source information
+ * First tries React Fiber (runtime), then falls back to data attributes
+ */
+declare function findSourceElement(target: HTMLElement, prefix?: string): HTMLElement | null;
+/**
+ * Get source location from an element
+ * Prioritizes React Fiber _debugSource, falls back to data attributes
+ */
+declare function getSourceFromElement(element: HTMLElement, prefix?: string): SourceLocation | null;
+
+/**
+ * Send a message to the Chrome extension via window.postMessage
+ */
+declare function sendToExtension(message: VDevMessage): void;
+/**
+ * Notify extension that SDK is ready
+ */
+declare function notifyReady(): void;
+/**
+ * Create a message handler that only processes messages from the extension
+ */
+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 };

package/dist/index.d.ts

@@ -0,0 +1,87 @@
+import React, { ReactNode } from 'react';
+
+interface SourceLocation {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}
+interface ElementInfo {
+    tagName: string;
+    className: string;
+    textContent: string;
+}
+interface VDevMessage {
+    type: string;
+    source?: string;
+    payload?: unknown;
+}
+interface ElementSelectedPayload {
+    source: SourceLocation;
+    elementInfo: ElementInfo;
+}
+
+interface DevToolsContextValue {
+    isInspecting: boolean;
+    setInspecting: (v: boolean) => void;
+    selectedElement: HTMLElement | null;
+    selectedSource: SourceLocation | null;
+    clearSelection: () => void;
+}
+declare const useDevTools: () => DevToolsContextValue;
+interface DevToolsProviderProps {
+    children: ReactNode;
+    /** Only enable in development mode (default: true) */
+    enabled?: boolean;
+    /** Attribute prefix (default: 'vdev') */
+    prefix?: string;
+}
+declare const DevToolsProvider: React.FC<DevToolsProviderProps>;
+
+interface Props$1 {
+    element: HTMLElement;
+    color?: string;
+}
+/**
+ * Highlighter overlay component - shows a blue overlay on hovered elements
+ */
+declare const Highlighter: React.FC<Props$1>;
+
+interface Props {
+    element: HTMLElement;
+    prefix?: string;
+}
+/**
+ * SelectionBox component - shows a persistent selection box with source info label
+ */
+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)
+ */
+declare function parseSourceAttr(attrValue: string | null): SourceLocation | null;
+/**
+ * Find the closest element with source information
+ * First tries React Fiber (runtime), then falls back to data attributes
+ */
+declare function findSourceElement(target: HTMLElement, prefix?: string): HTMLElement | null;
+/**
+ * Get source location from an element
+ * Prioritizes React Fiber _debugSource, falls back to data attributes
+ */
+declare function getSourceFromElement(element: HTMLElement, prefix?: string): SourceLocation | null;
+
+/**
+ * Send a message to the Chrome extension via window.postMessage
+ */
+declare function sendToExtension(message: VDevMessage): void;
+/**
+ * Notify extension that SDK is ready
+ */
+declare function notifyReady(): void;
+/**
+ * Create a message handler that only processes messages from the extension
+ */
+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 };