@stinsky/xray 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ivan Stinsky
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+# @stinsky/xray
+
+Click-to-component for React 19. Hover any element to see its React component name and source file, click to open in your editor. The only click-to-source inspector that works with React 19, Next.js 15+, and Turbopack.
+
+[![npm version](https://img.shields.io/npm/v/@stinsky/xray)](https://www.npmjs.com/package/@stinsky/xray)
+[![license](https://img.shields.io/npm/l/@stinsky/xray)](./LICENSE)
+
+## Features
+
+- **Click to open source** — click any element to open its source file in VS Code, WebStorm, IntelliJ, or any editor
+- **Component name overlay** — hover to see the React component name + file path
+- **Works with React 19** — uses compile-time AST injection, not `fiber._debugSource` (removed in React 19)
+- **All bundlers** — Next.js (Turbopack & Webpack), Vite, Webpack, Rspack, esbuild
+- **Zero production cost** — fully tree-shaken, zero bytes in your production bundle
+- **Floating toggle button** — auto-positions next to the Next.js dev indicator, or bottom-left in other setups
+- **Keyboard shortcut** — `Cmd+Shift+X` to toggle (customizable)
+- **Scroll-aware** — rAF-based tracking, works with smooth scrolling libraries (Lenis, etc.)
+- **Interaction blocking** — all clicks/pointer events blocked while inspecting, no accidental navigation
+
+## Why not react-dev-inspector / click-to-react-component / LocatorJS?
+
+React 19 removed `fiber._debugSource`, which broke every existing click-to-component tool. These packages rely on runtime fiber inspection to find source locations — an approach that no longer works.
+
+`@stinsky/xray` uses [`code-inspector-plugin`](https://github.com/nicolo-ribaudo/code-inspector-plugin) to inject `data-insp-path` attributes at compile time via AST transformation. This is the only approach that works reliably across React 18, React 19, and all modern bundlers.
+
+## Install
+
+```bash
+npm install -D @stinsky/xray
+```
+
+## Setup
+
+### 1. Add the build plugin
+
+The plugin injects source location attributes on every DOM element at compile time. It does nothing in production builds.
+
+#### Next.js (Turbopack)
+
+```ts
+// next.config.ts
+import { xrayPlugin } from '@stinsky/xray/plugin'
+
+const nextConfig = {
+  turbopack: {
+    rules: xrayPlugin({ bundler: 'turbopack' }),
+  },
+}
+
+export default nextConfig
+```
+
+#### Next.js (Webpack)
+
+```ts
+// next.config.ts
+import { xrayPlugin } from '@stinsky/xray/plugin'
+
+const nextConfig = {
+  webpack: (config) => {
+    config.plugins.push(xrayPlugin({ bundler: 'webpack' }))
+    return config
+  },
+}
+
+export default nextConfig
+```
+
+#### Vite
+
+```ts
+// vite.config.ts
+import { xrayPlugin } from '@stinsky/xray/plugin'
+
+export default {
+  plugins: [xrayPlugin({ bundler: 'vite' })],
+}
+```
+
+#### Webpack
+
+```ts
+// webpack.config.js
+const { xrayPlugin } = require('@stinsky/xray/plugin')
+
+module.exports = {
+  plugins: [xrayPlugin({ bundler: 'webpack' })],
+}
+```
+
+### 2. Add the component
+
+```tsx
+// app/layout.tsx (Next.js) or your root component
+import { Xray } from '@stinsky/xray'
+
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Xray />
+      </body>
+    </html>
+  )
+}
+```
+
+The component is fully tree-shaken in production — zero bytes in your bundle. Bundlers replace `process.env.NODE_ENV`, detect the dead code path, and eliminate the entire inspector along with all its dependencies.
+
+## Usage
+
+- **Toggle**: `Cmd+Shift+X` or click the floating button
+- **Hover**: Shows component name + source file path
+- **Click**: Opens the source file in your editor
+
+All clicks and pointer events are blocked while the inspector is active, so you won't accidentally trigger links or buttons.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `hotKey` | `{ metaKey?, ctrlKey?, altKey?, shiftKey?, key }` | `{ metaKey: true, shiftKey: true, key: 'x' }` | Keyboard shortcut to toggle |
+| `port` | `number` | `5678` | `code-inspector-plugin` server port |
+| `color` | `string` | `'#6366f1'` | Accent color for overlay, tooltip, and button |
+| `showButton` | `boolean` | `true` | Show the floating toggle button |
+| `followNextIndicator` | `boolean` | `true` | Position button next to the Next.js dev indicator |
+
+## Plugin options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `bundler` | `'webpack' \| 'vite' \| 'turbopack' \| 'rspack' \| 'esbuild'` | — | **Required.** Your bundler |
+| `editor` | `string` | `'code'` | Editor to open files in (`code`, `webstorm`, `idea`, etc.) |
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,505 @@
+"use client";
+"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, {
+  Xray: () => Xray
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/xray.tsx
+var import_react4 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/use-badge.ts
+var import_react = require("react");
+var BADGE_SIZE = 36;
+var BADGE_GAP = 4;
+var DRAG_THRESHOLD = 10;
+function findNextjsIndicator() {
+  const portal = document.querySelector("nextjs-portal");
+  if (!portal?.shadowRoot) return null;
+  return portal.shadowRoot.querySelector("[data-nextjs-toast]") ?? portal.shadowRoot.querySelector("div");
+}
+function useBadge({ badgeRef, show, followNextIndicator }) {
+  (0, import_react.useEffect)(() => {
+    if (!show) return;
+    const badge = badgeRef.current;
+    if (!badge) return;
+    badge.style.scale = "0";
+    let rafId;
+    let dragging = false;
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let hidden = false;
+    let settling = false;
+    let positioned = false;
+    let settled = false;
+    let hideTimeout;
+    let reappearTimeout;
+    const getIndicator = () => followNextIndicator ? findNextjsIndicator() : null;
+    const positionBadge = () => {
+      if (!badge) return;
+      const indicator = getIndicator();
+      if (indicator) {
+        const rect = indicator.getBoundingClientRect();
+        const midX = rect.left + rect.width / 2;
+        const isRight = midX > window.innerWidth / 2;
+        badge.style.left = "";
+        badge.style.bottom = "";
+        badge.style.left = isRight ? `${rect.left - BADGE_SIZE - BADGE_GAP}px` : `${rect.right + BADGE_GAP}px`;
+        badge.style.top = `${rect.top + (rect.height - BADGE_SIZE) / 2}px`;
+      } else {
+        badge.style.top = "";
+        badge.style.bottom = "12px";
+        badge.style.left = "12px";
+        settled = true;
+      }
+      if (!positioned) {
+        positioned = true;
+        requestAnimationFrame(() => {
+          badge.style.scale = "1";
+        });
+      }
+    };
+    const onPointerDown = (e) => {
+      const indicator = getIndicator();
+      if (!indicator) return;
+      const rect = indicator.getBoundingClientRect();
+      if (e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom) {
+        dragging = true;
+        dragStartX = e.clientX;
+        dragStartY = e.clientY;
+      }
+    };
+    const onPointerMove = (e) => {
+      if (!dragging) return;
+      const dx = e.clientX - dragStartX;
+      const dy = e.clientY - dragStartY;
+      if (!hidden && Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
+        hidden = true;
+        settling = true;
+        badge.style.transition = "scale 200ms ease";
+        badge.style.scale = "0";
+        hideTimeout = setTimeout(() => {
+          badge.style.display = "none";
+        }, 200);
+      }
+    };
+    const onPointerUp = () => {
+      if (!dragging) return;
+      dragging = false;
+      if (hidden) {
+        reappearTimeout = setTimeout(() => {
+          hidden = false;
+          settling = false;
+          settled = false;
+          badge.style.scale = "0";
+          badge.style.display = "";
+          badge.style.transition = "scale 300ms cubic-bezier(0.23, 0.88, 0.26, 0.92)";
+          void badge.offsetHeight;
+          badge.style.scale = "1";
+        }, 1e3);
+      }
+    };
+    let lastKey = "";
+    const tick = () => {
+      if (settled) return;
+      if (!hidden && !settling) {
+        const indicator = getIndicator();
+        if (indicator) {
+          const rect = indicator.getBoundingClientRect();
+          const key = `${rect.top},${rect.left},${rect.right},${rect.bottom}`;
+          if (key !== lastKey) {
+            lastKey = key;
+            positionBadge();
+          }
+        } else if (lastKey !== "fallback") {
+          lastKey = "fallback";
+          positionBadge();
+        }
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("pointermove", onPointerMove, true);
+    window.addEventListener("pointerup", onPointerUp, true);
+    return () => {
+      cancelAnimationFrame(rafId);
+      clearTimeout(hideTimeout);
+      clearTimeout(reappearTimeout);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("pointermove", onPointerMove, true);
+      window.removeEventListener("pointerup", onPointerUp, true);
+    };
+  }, [badgeRef, show, followNextIndicator]);
+}
+
+// src/use-hotkey.ts
+var import_react2 = require("react");
+var DEFAULT_HOT_KEY = { metaKey: true, shiftKey: true, key: "x" };
+function useHotkey(hotKey, onToggle) {
+  (0, import_react2.useEffect)(() => {
+    const handler = (e) => {
+      if (e.key === hotKey.key && !!e.metaKey === !!hotKey.metaKey && !!e.ctrlKey === !!hotKey.ctrlKey && !!e.altKey === !!hotKey.altKey && !!e.shiftKey === !!hotKey.shiftKey) {
+        onToggle();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [hotKey.key, hotKey.metaKey, hotKey.ctrlKey, hotKey.altKey, hotKey.shiftKey, onToggle]);
+}
+
+// src/use-inspector.ts
+var import_react3 = require("react");
+function getFiberFromElement(el) {
+  const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
+  return key ? el[key] : null;
+}
+function getComponentName(fiber) {
+  if (!fiber.type || typeof fiber.type === "string") return null;
+  return fiber.type.displayName || fiber.type.name || null;
+}
+function getComponentInfo(el) {
+  let fiber = getFiberFromElement(el);
+  if (!fiber) return null;
+  let depth = 0;
+  while (fiber && depth < 30) {
+    const name = getComponentName(fiber);
+    if (name) return { name };
+    fiber = fiber.return;
+    depth++;
+  }
+  return null;
+}
+function parseInspPath(attr) {
+  const parts = attr.split(":");
+  parts.pop();
+  const column = parts.pop();
+  const line = parts.pop();
+  const filePath = parts.join(":");
+  return { filePath, line, column };
+}
+function findInspPath(el) {
+  while (el) {
+    const attr = el.getAttribute?.("data-insp-path");
+    if (attr) return attr;
+    el = el.parentElement;
+  }
+  return null;
+}
+function useInspector({
+  enabled,
+  port,
+  overlayRef,
+  tooltipRef,
+  ignoreRefs
+}) {
+  const currentTarget = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) return;
+    const isIgnored = (e) => ignoreRefs.some(
+      (ref) => ref.current && (e.target === ref.current || ref.current.contains(e.target))
+    );
+    const blockEvent = (e) => {
+      if (isIgnored(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const handleClick = (e) => {
+      if (isIgnored(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const attr = findInspPath(e.target);
+      if (!attr) return;
+      const { filePath, line, column } = parseInspPath(attr);
+      const url = `http://localhost:${port}/?file=${encodeURIComponent(filePath)}&line=${line}&column=${column}`;
+      const xhr = new XMLHttpRequest();
+      xhr.open("GET", url, true);
+      xhr.send();
+    };
+    const events = ["mousedown", "mouseup", "pointerdown", "pointerup"];
+    window.addEventListener("click", handleClick, true);
+    events.forEach((e) => window.addEventListener(e, blockEvent, true));
+    return () => {
+      window.removeEventListener("click", handleClick, true);
+      events.forEach((e) => window.removeEventListener(e, blockEvent, true));
+    };
+  }, [enabled, port, ignoreRefs]);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) {
+      if (overlayRef.current) overlayRef.current.style.display = "none";
+      if (tooltipRef.current) tooltipRef.current.style.display = "none";
+      currentTarget.current = null;
+      return;
+    }
+    let mouseX = 0;
+    let mouseY = 0;
+    const hideOverlay = () => {
+      if (overlayRef.current) overlayRef.current.style.display = "none";
+      if (tooltipRef.current) tooltipRef.current.style.display = "none";
+    };
+    const isIgnoredElement = (target) => ignoreRefs.some(
+      (ref) => ref.current && (target === ref.current || ref.current.contains(target))
+    );
+    const updateTooltipContent = (target, info) => {
+      const tooltip = tooltipRef.current;
+      if (!tooltip) return;
+      tooltip.textContent = "";
+      const nameLine = document.createElement("div");
+      nameLine.textContent = info.name;
+      tooltip.appendChild(nameLine);
+      const attr = findInspPath(target);
+      if (attr) {
+        const { filePath, line } = parseInspPath(attr);
+        const pathLine = document.createElement("div");
+        pathLine.textContent = `${filePath}:${line}`;
+        pathLine.style.opacity = "0.7";
+        pathLine.style.fontSize = "10px";
+        tooltip.appendChild(pathLine);
+      }
+    };
+    const inspectTarget = (target) => {
+      if (!target || target === overlayRef.current || target === tooltipRef.current || isIgnoredElement(target) || target === document.documentElement || target === document.body) {
+        if (target === document.documentElement || target === document.body) {
+          hideOverlay();
+          currentTarget.current = null;
+        }
+        return;
+      }
+      if (target === currentTarget.current) return;
+      currentTarget.current = target;
+      const info = getComponentInfo(target);
+      if (!info) {
+        hideOverlay();
+        return;
+      }
+      updateTooltipContent(target, info);
+    };
+    const updateOverlayPosition = () => {
+      const target = currentTarget.current;
+      if (!target || !target.isConnected) {
+        hideOverlay();
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      if (overlayRef.current) {
+        const s = overlayRef.current.style;
+        s.display = "block";
+        s.top = `${rect.top}px`;
+        s.left = `${rect.left}px`;
+        s.width = `${rect.width}px`;
+        s.height = `${rect.height}px`;
+      }
+      if (tooltipRef.current) {
+        const s = tooltipRef.current.style;
+        s.display = "block";
+        const gap = 12;
+        let top = mouseY + gap;
+        let left = mouseX + gap;
+        if (top + tooltipRef.current.offsetHeight > window.innerHeight) {
+          top = mouseY - tooltipRef.current.offsetHeight - gap;
+        }
+        if (left + tooltipRef.current.offsetWidth > window.innerWidth) {
+          left = mouseX - tooltipRef.current.offsetWidth - gap;
+        }
+        s.top = `${Math.max(0, top)}px`;
+        s.left = `${Math.max(0, left)}px`;
+      }
+    };
+    const handleMouseMove = (e) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+      inspectTarget(e.target);
+      updateOverlayPosition();
+    };
+    const handleMouseLeave = () => {
+      hideOverlay();
+      currentTarget.current = null;
+    };
+    let rafId;
+    const tick = () => {
+      const el = document.elementFromPoint(mouseX, mouseY);
+      if (el) inspectTarget(el);
+      updateOverlayPosition();
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    window.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [enabled, overlayRef, tooltipRef, ignoreRefs]);
+}
+
+// src/xray.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_PORT = 5678;
+var DEFAULT_COLOR = "#6366f1";
+function colorWithAlpha(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function XrayImpl({
+  hotKey = DEFAULT_HOT_KEY,
+  port = DEFAULT_PORT,
+  color = DEFAULT_COLOR,
+  showButton = true,
+  followNextIndicator = true
+} = {}) {
+  const [enabled, setEnabled] = (0, import_react4.useState)(false);
+  const overlayRef = (0, import_react4.useRef)(null);
+  const tooltipRef = (0, import_react4.useRef)(null);
+  const badgeRef = (0, import_react4.useRef)(null);
+  const toggle = (0, import_react4.useCallback)(() => setEnabled((prev) => !prev), []);
+  useHotkey(hotKey, toggle);
+  useBadge({ badgeRef, show: showButton, followNextIndicator });
+  useInspector({
+    enabled,
+    port,
+    overlayRef,
+    tooltipRef,
+    ignoreRefs: [badgeRef]
+  });
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: overlayRef,
+          style: {
+            position: "fixed",
+            pointerEvents: "none",
+            zIndex: 99998,
+            border: `2px solid ${color}`,
+            borderRadius: "3px",
+            backgroundColor: colorWithAlpha(color, 0.08),
+            transition: "none",
+            display: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: tooltipRef,
+          style: {
+            position: "fixed",
+            pointerEvents: "none",
+            zIndex: 99999,
+            backgroundColor: color,
+            color: "white",
+            fontSize: "11px",
+            fontFamily: "monospace",
+            fontWeight: 600,
+            padding: "2px 7px",
+            borderRadius: "4px",
+            whiteSpace: "nowrap",
+            display: "none",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.25)"
+          }
+        }
+      ),
+      showButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: badgeRef,
+          style: {
+            position: "fixed",
+            zIndex: 2147483646,
+            width: "36px",
+            height: "36px",
+            transformOrigin: "center center"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                toggle();
+              },
+              style: {
+                width: "36px",
+                height: "36px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "rgba(0, 0, 0, 0.8)",
+                backdropFilter: "blur(48px)",
+                border: "none",
+                borderRadius: "50%",
+                boxShadow: enabled ? `0 0 0 1px ${color}, inset 0 0 0 1px ${colorWithAlpha(color, 0.4)}, 0 16px 32px -8px rgba(0, 0, 0, 0.24)` : "0 0 0 1px #171717, inset 0 0 0 1px hsla(0, 0%, 100%, 0.14), 0 16px 32px -8px rgba(0, 0, 0, 0.24)",
+                opacity: enabled ? 1 : 0.4,
+                transition: "opacity 200ms ease, box-shadow 200ms ease",
+                cursor: "pointer",
+                userSelect: "none",
+                padding: 0
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.opacity = "1";
+              },
+              onMouseLeave: (e) => {
+                if (!enabled) e.currentTarget.style.opacity = "0.4";
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: enabled ? color : "white",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  style: {
+                    transition: "stroke 200ms ease, transform 300ms cubic-bezier(0.23, 0.88, 0.26, 0.92)",
+                    transform: enabled ? "rotate(90deg)" : "rotate(0deg)"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.5" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "12", x2: "22", y2: "12" })
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+var Xray = process.env.NODE_ENV === "development" ? XrayImpl : () => null;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Xray
+});

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+interface HotKey {
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    shiftKey?: boolean;
+    key: string;
+}
+
+interface XrayProps {
+    /** Keyboard shortcut to toggle. Default: Cmd+Shift+X */
+    hotKey?: HotKey;
+    /** code-inspector-plugin server port. Default: 5678 */
+    port?: number;
+    /** Accent color for overlay/tooltip/button. Default: '#6366f1' (indigo) */
+    color?: string;
+    /** Whether to show the floating toggle button. Default: true */
+    showButton?: boolean;
+    /** Whether to position next to Next.js dev indicator. Default: true */
+    followNextIndicator?: boolean;
+}
+declare const Xray: (props?: XrayProps) => React.ReactNode;
+
+export { Xray, type XrayProps };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+interface HotKey {
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    shiftKey?: boolean;
+    key: string;
+}
+
+interface XrayProps {
+    /** Keyboard shortcut to toggle. Default: Cmd+Shift+X */
+    hotKey?: HotKey;
+    /** code-inspector-plugin server port. Default: 5678 */
+    port?: number;
+    /** Accent color for overlay/tooltip/button. Default: '#6366f1' (indigo) */
+    color?: string;
+    /** Whether to show the floating toggle button. Default: true */
+    showButton?: boolean;
+    /** Whether to position next to Next.js dev indicator. Default: true */
+    followNextIndicator?: boolean;
+}
+declare const Xray: (props?: XrayProps) => React.ReactNode;
+
+export { Xray, type XrayProps };

package/dist/index.mjs

@@ -0,0 +1,479 @@
+"use client";
+
+// src/xray.tsx
+import { useCallback, useRef as useRef2, useState } from "react";
+import { createPortal } from "react-dom";
+
+// src/use-badge.ts
+import { useEffect } from "react";
+var BADGE_SIZE = 36;
+var BADGE_GAP = 4;
+var DRAG_THRESHOLD = 10;
+function findNextjsIndicator() {
+  const portal = document.querySelector("nextjs-portal");
+  if (!portal?.shadowRoot) return null;
+  return portal.shadowRoot.querySelector("[data-nextjs-toast]") ?? portal.shadowRoot.querySelector("div");
+}
+function useBadge({ badgeRef, show, followNextIndicator }) {
+  useEffect(() => {
+    if (!show) return;
+    const badge = badgeRef.current;
+    if (!badge) return;
+    badge.style.scale = "0";
+    let rafId;
+    let dragging = false;
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let hidden = false;
+    let settling = false;
+    let positioned = false;
+    let settled = false;
+    let hideTimeout;
+    let reappearTimeout;
+    const getIndicator = () => followNextIndicator ? findNextjsIndicator() : null;
+    const positionBadge = () => {
+      if (!badge) return;
+      const indicator = getIndicator();
+      if (indicator) {
+        const rect = indicator.getBoundingClientRect();
+        const midX = rect.left + rect.width / 2;
+        const isRight = midX > window.innerWidth / 2;
+        badge.style.left = "";
+        badge.style.bottom = "";
+        badge.style.left = isRight ? `${rect.left - BADGE_SIZE - BADGE_GAP}px` : `${rect.right + BADGE_GAP}px`;
+        badge.style.top = `${rect.top + (rect.height - BADGE_SIZE) / 2}px`;
+      } else {
+        badge.style.top = "";
+        badge.style.bottom = "12px";
+        badge.style.left = "12px";
+        settled = true;
+      }
+      if (!positioned) {
+        positioned = true;
+        requestAnimationFrame(() => {
+          badge.style.scale = "1";
+        });
+      }
+    };
+    const onPointerDown = (e) => {
+      const indicator = getIndicator();
+      if (!indicator) return;
+      const rect = indicator.getBoundingClientRect();
+      if (e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom) {
+        dragging = true;
+        dragStartX = e.clientX;
+        dragStartY = e.clientY;
+      }
+    };
+    const onPointerMove = (e) => {
+      if (!dragging) return;
+      const dx = e.clientX - dragStartX;
+      const dy = e.clientY - dragStartY;
+      if (!hidden && Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
+        hidden = true;
+        settling = true;
+        badge.style.transition = "scale 200ms ease";
+        badge.style.scale = "0";
+        hideTimeout = setTimeout(() => {
+          badge.style.display = "none";
+        }, 200);
+      }
+    };
+    const onPointerUp = () => {
+      if (!dragging) return;
+      dragging = false;
+      if (hidden) {
+        reappearTimeout = setTimeout(() => {
+          hidden = false;
+          settling = false;
+          settled = false;
+          badge.style.scale = "0";
+          badge.style.display = "";
+          badge.style.transition = "scale 300ms cubic-bezier(0.23, 0.88, 0.26, 0.92)";
+          void badge.offsetHeight;
+          badge.style.scale = "1";
+        }, 1e3);
+      }
+    };
+    let lastKey = "";
+    const tick = () => {
+      if (settled) return;
+      if (!hidden && !settling) {
+        const indicator = getIndicator();
+        if (indicator) {
+          const rect = indicator.getBoundingClientRect();
+          const key = `${rect.top},${rect.left},${rect.right},${rect.bottom}`;
+          if (key !== lastKey) {
+            lastKey = key;
+            positionBadge();
+          }
+        } else if (lastKey !== "fallback") {
+          lastKey = "fallback";
+          positionBadge();
+        }
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("pointermove", onPointerMove, true);
+    window.addEventListener("pointerup", onPointerUp, true);
+    return () => {
+      cancelAnimationFrame(rafId);
+      clearTimeout(hideTimeout);
+      clearTimeout(reappearTimeout);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("pointermove", onPointerMove, true);
+      window.removeEventListener("pointerup", onPointerUp, true);
+    };
+  }, [badgeRef, show, followNextIndicator]);
+}
+
+// src/use-hotkey.ts
+import { useEffect as useEffect2 } from "react";
+var DEFAULT_HOT_KEY = { metaKey: true, shiftKey: true, key: "x" };
+function useHotkey(hotKey, onToggle) {
+  useEffect2(() => {
+    const handler = (e) => {
+      if (e.key === hotKey.key && !!e.metaKey === !!hotKey.metaKey && !!e.ctrlKey === !!hotKey.ctrlKey && !!e.altKey === !!hotKey.altKey && !!e.shiftKey === !!hotKey.shiftKey) {
+        onToggle();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [hotKey.key, hotKey.metaKey, hotKey.ctrlKey, hotKey.altKey, hotKey.shiftKey, onToggle]);
+}
+
+// src/use-inspector.ts
+import { useEffect as useEffect3, useRef } from "react";
+function getFiberFromElement(el) {
+  const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
+  return key ? el[key] : null;
+}
+function getComponentName(fiber) {
+  if (!fiber.type || typeof fiber.type === "string") return null;
+  return fiber.type.displayName || fiber.type.name || null;
+}
+function getComponentInfo(el) {
+  let fiber = getFiberFromElement(el);
+  if (!fiber) return null;
+  let depth = 0;
+  while (fiber && depth < 30) {
+    const name = getComponentName(fiber);
+    if (name) return { name };
+    fiber = fiber.return;
+    depth++;
+  }
+  return null;
+}
+function parseInspPath(attr) {
+  const parts = attr.split(":");
+  parts.pop();
+  const column = parts.pop();
+  const line = parts.pop();
+  const filePath = parts.join(":");
+  return { filePath, line, column };
+}
+function findInspPath(el) {
+  while (el) {
+    const attr = el.getAttribute?.("data-insp-path");
+    if (attr) return attr;
+    el = el.parentElement;
+  }
+  return null;
+}
+function useInspector({
+  enabled,
+  port,
+  overlayRef,
+  tooltipRef,
+  ignoreRefs
+}) {
+  const currentTarget = useRef(null);
+  useEffect3(() => {
+    if (!enabled) return;
+    const isIgnored = (e) => ignoreRefs.some(
+      (ref) => ref.current && (e.target === ref.current || ref.current.contains(e.target))
+    );
+    const blockEvent = (e) => {
+      if (isIgnored(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const handleClick = (e) => {
+      if (isIgnored(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const attr = findInspPath(e.target);
+      if (!attr) return;
+      const { filePath, line, column } = parseInspPath(attr);
+      const url = `http://localhost:${port}/?file=${encodeURIComponent(filePath)}&line=${line}&column=${column}`;
+      const xhr = new XMLHttpRequest();
+      xhr.open("GET", url, true);
+      xhr.send();
+    };
+    const events = ["mousedown", "mouseup", "pointerdown", "pointerup"];
+    window.addEventListener("click", handleClick, true);
+    events.forEach((e) => window.addEventListener(e, blockEvent, true));
+    return () => {
+      window.removeEventListener("click", handleClick, true);
+      events.forEach((e) => window.removeEventListener(e, blockEvent, true));
+    };
+  }, [enabled, port, ignoreRefs]);
+  useEffect3(() => {
+    if (!enabled) {
+      if (overlayRef.current) overlayRef.current.style.display = "none";
+      if (tooltipRef.current) tooltipRef.current.style.display = "none";
+      currentTarget.current = null;
+      return;
+    }
+    let mouseX = 0;
+    let mouseY = 0;
+    const hideOverlay = () => {
+      if (overlayRef.current) overlayRef.current.style.display = "none";
+      if (tooltipRef.current) tooltipRef.current.style.display = "none";
+    };
+    const isIgnoredElement = (target) => ignoreRefs.some(
+      (ref) => ref.current && (target === ref.current || ref.current.contains(target))
+    );
+    const updateTooltipContent = (target, info) => {
+      const tooltip = tooltipRef.current;
+      if (!tooltip) return;
+      tooltip.textContent = "";
+      const nameLine = document.createElement("div");
+      nameLine.textContent = info.name;
+      tooltip.appendChild(nameLine);
+      const attr = findInspPath(target);
+      if (attr) {
+        const { filePath, line } = parseInspPath(attr);
+        const pathLine = document.createElement("div");
+        pathLine.textContent = `${filePath}:${line}`;
+        pathLine.style.opacity = "0.7";
+        pathLine.style.fontSize = "10px";
+        tooltip.appendChild(pathLine);
+      }
+    };
+    const inspectTarget = (target) => {
+      if (!target || target === overlayRef.current || target === tooltipRef.current || isIgnoredElement(target) || target === document.documentElement || target === document.body) {
+        if (target === document.documentElement || target === document.body) {
+          hideOverlay();
+          currentTarget.current = null;
+        }
+        return;
+      }
+      if (target === currentTarget.current) return;
+      currentTarget.current = target;
+      const info = getComponentInfo(target);
+      if (!info) {
+        hideOverlay();
+        return;
+      }
+      updateTooltipContent(target, info);
+    };
+    const updateOverlayPosition = () => {
+      const target = currentTarget.current;
+      if (!target || !target.isConnected) {
+        hideOverlay();
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      if (overlayRef.current) {
+        const s = overlayRef.current.style;
+        s.display = "block";
+        s.top = `${rect.top}px`;
+        s.left = `${rect.left}px`;
+        s.width = `${rect.width}px`;
+        s.height = `${rect.height}px`;
+      }
+      if (tooltipRef.current) {
+        const s = tooltipRef.current.style;
+        s.display = "block";
+        const gap = 12;
+        let top = mouseY + gap;
+        let left = mouseX + gap;
+        if (top + tooltipRef.current.offsetHeight > window.innerHeight) {
+          top = mouseY - tooltipRef.current.offsetHeight - gap;
+        }
+        if (left + tooltipRef.current.offsetWidth > window.innerWidth) {
+          left = mouseX - tooltipRef.current.offsetWidth - gap;
+        }
+        s.top = `${Math.max(0, top)}px`;
+        s.left = `${Math.max(0, left)}px`;
+      }
+    };
+    const handleMouseMove = (e) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+      inspectTarget(e.target);
+      updateOverlayPosition();
+    };
+    const handleMouseLeave = () => {
+      hideOverlay();
+      currentTarget.current = null;
+    };
+    let rafId;
+    const tick = () => {
+      const el = document.elementFromPoint(mouseX, mouseY);
+      if (el) inspectTarget(el);
+      updateOverlayPosition();
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    window.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [enabled, overlayRef, tooltipRef, ignoreRefs]);
+}
+
+// src/xray.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_PORT = 5678;
+var DEFAULT_COLOR = "#6366f1";
+function colorWithAlpha(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function XrayImpl({
+  hotKey = DEFAULT_HOT_KEY,
+  port = DEFAULT_PORT,
+  color = DEFAULT_COLOR,
+  showButton = true,
+  followNextIndicator = true
+} = {}) {
+  const [enabled, setEnabled] = useState(false);
+  const overlayRef = useRef2(null);
+  const tooltipRef = useRef2(null);
+  const badgeRef = useRef2(null);
+  const toggle = useCallback(() => setEnabled((prev) => !prev), []);
+  useHotkey(hotKey, toggle);
+  useBadge({ badgeRef, show: showButton, followNextIndicator });
+  useInspector({
+    enabled,
+    port,
+    overlayRef,
+    tooltipRef,
+    ignoreRefs: [badgeRef]
+  });
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: overlayRef,
+          style: {
+            position: "fixed",
+            pointerEvents: "none",
+            zIndex: 99998,
+            border: `2px solid ${color}`,
+            borderRadius: "3px",
+            backgroundColor: colorWithAlpha(color, 0.08),
+            transition: "none",
+            display: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: tooltipRef,
+          style: {
+            position: "fixed",
+            pointerEvents: "none",
+            zIndex: 99999,
+            backgroundColor: color,
+            color: "white",
+            fontSize: "11px",
+            fontFamily: "monospace",
+            fontWeight: 600,
+            padding: "2px 7px",
+            borderRadius: "4px",
+            whiteSpace: "nowrap",
+            display: "none",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.25)"
+          }
+        }
+      ),
+      showButton && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: badgeRef,
+          style: {
+            position: "fixed",
+            zIndex: 2147483646,
+            width: "36px",
+            height: "36px",
+            transformOrigin: "center center"
+          },
+          children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                toggle();
+              },
+              style: {
+                width: "36px",
+                height: "36px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "rgba(0, 0, 0, 0.8)",
+                backdropFilter: "blur(48px)",
+                border: "none",
+                borderRadius: "50%",
+                boxShadow: enabled ? `0 0 0 1px ${color}, inset 0 0 0 1px ${colorWithAlpha(color, 0.4)}, 0 16px 32px -8px rgba(0, 0, 0, 0.24)` : "0 0 0 1px #171717, inset 0 0 0 1px hsla(0, 0%, 100%, 0.14), 0 16px 32px -8px rgba(0, 0, 0, 0.24)",
+                opacity: enabled ? 1 : 0.4,
+                transition: "opacity 200ms ease, box-shadow 200ms ease",
+                cursor: "pointer",
+                userSelect: "none",
+                padding: 0
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.opacity = "1";
+              },
+              onMouseLeave: (e) => {
+                if (!enabled) e.currentTarget.style.opacity = "0.4";
+              },
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: enabled ? color : "white",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  style: {
+                    transition: "stroke 200ms ease, transform 300ms cubic-bezier(0.23, 0.88, 0.26, 0.92)",
+                    transform: enabled ? "rotate(90deg)" : "rotate(0deg)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.5" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+                    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
+                    /* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
+                    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
+                    /* @__PURE__ */ jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" })
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+var Xray = process.env.NODE_ENV === "development" ? XrayImpl : () => null;
+export {
+  Xray
+};

package/dist/plugin.cjs

@@ -0,0 +1,38 @@
+"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/plugin.ts
+var plugin_exports = {};
+__export(plugin_exports, {
+  xrayPlugin: () => xrayPlugin
+});
+module.exports = __toCommonJS(plugin_exports);
+var import_code_inspector_plugin = require("code-inspector-plugin");
+function xrayPlugin(options) {
+  return (0, import_code_inspector_plugin.codeInspectorPlugin)({
+    bundler: options.bundler,
+    editor: options.editor ?? "code",
+    hotKeys: false,
+    showSwitch: false
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  xrayPlugin
+});

package/dist/plugin.d.cts

@@ -0,0 +1,16 @@
+interface XrayPluginOptions {
+    /** Which bundler you're using. Required. */
+    bundler: 'webpack' | 'vite' | 'turbopack' | 'rspack' | 'esbuild';
+    /** Editor to open files in. Default: 'code' (VS Code) */
+    editor?: string;
+}
+/**
+ * Build plugin that injects `data-insp-path` attributes on every DOM element.
+ * Wraps `code-inspector-plugin` with xray defaults.
+ *
+ * Returns a plugin object for webpack/vite/rspack/esbuild,
+ * or a rules object for turbopack (Next.js).
+ */
+declare function xrayPlugin(options: XrayPluginOptions): any;
+
+export { type XrayPluginOptions, xrayPlugin };

package/dist/plugin.d.ts

@@ -0,0 +1,16 @@
+interface XrayPluginOptions {
+    /** Which bundler you're using. Required. */
+    bundler: 'webpack' | 'vite' | 'turbopack' | 'rspack' | 'esbuild';
+    /** Editor to open files in. Default: 'code' (VS Code) */
+    editor?: string;
+}
+/**
+ * Build plugin that injects `data-insp-path` attributes on every DOM element.
+ * Wraps `code-inspector-plugin` with xray defaults.
+ *
+ * Returns a plugin object for webpack/vite/rspack/esbuild,
+ * or a rules object for turbopack (Next.js).
+ */
+declare function xrayPlugin(options: XrayPluginOptions): any;
+
+export { type XrayPluginOptions, xrayPlugin };

package/dist/plugin.mjs

@@ -0,0 +1,13 @@
+// src/plugin.ts
+import { codeInspectorPlugin } from "code-inspector-plugin";
+function xrayPlugin(options) {
+  return codeInspectorPlugin({
+    bundler: options.bundler,
+    editor: options.editor ?? "code",
+    hotKeys: false,
+    showSwitch: false
+  });
+}
+export {
+  xrayPlugin
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@stinsky/xray",
+  "version": "0.1.0",
+  "description": "React dev inspector — hover to see component names, click to open source in your editor. Works with React 19 + Turbopack.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.mjs",
+      "require": "./dist/plugin.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "code-inspector-plugin": "^0.19.1"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0"
+  },
+  "keywords": [
+    "react",
+    "inspector",
+    "devtools",
+    "click-to-component",
+    "click-to-source",
+    "nextjs",
+    "turbopack",
+    "vite",
+    "webpack"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stinsky/xray"
+  }
+}