react-code-locator 0.1.18 → 0.2.0

package/README.md

@@ -2,21 +2,33 @@
 
 개발 중인 React 앱에서 요소를 `Shift + Click`하면 해당 UI와 연결된 소스 위치를 찾는 패키지입니다.
 
-- React element 생성 시 source metadata를 붙이고, 브라우저 런타임에서 Fiber를 따라 위치를 계산합니다.
-- **Zero Dependency**: Babel 없이 acorn 기반으로 동작합니다.
-- **Universal**: 하나의 패키지로 Vite, Webpack, Rollup, esbuild 모두 지원합니다.
+- React element 생성 시 source metadata를 주입하고, 브라우저 런타임에서 Fiber를 따라 위치를 계산합니다.
+- **완전 번들링**: acorn 기반 순수 JS 파서를 내장 — 별도 파서 설치 불필요
+- **Universal**: Vite, Webpack, Rollup, esbuild, Rspack 모두 지원
+- **개발 전용**: 프로덕션 빌드에 영향 없음
 
 ## 설치
 
 ```bash
-npm i -D react-code-locator unplugin
+npm i -D react-code-locator
 ```
 
+> Vite / Rollup / esbuild / Rspack 플러그인을 사용하려면 `unplugin`도 필요합니다.
+>
+> ```bash
+> npm i -D unplugin
+> ```
+>
+> Webpack은 unplugin 없이 동작합니다.
+
 ## 빠른 시작
 
 ### Vite
 
+`vitePlugin`은 소스 transform + 클라이언트 런타임 자동 주입을 모두 처리합니다.
+
 ```ts
+// vite.config.ts
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { vitePlugin } from "react-code-locator";
@@ -29,51 +41,88 @@ export default defineConfig({
 });
 ```
 
-### Webpack (CRA 등)
+### Next.js (Webpack)
+
+```js
+// next.config.js
+const { webpackPlugin } = require("react-code-locator/webpack");
+
+module.exports = {
+  webpack(config, { dev }) {
+    if (dev) {
+      config.plugins.push(webpackPlugin());
+    }
+    return config;
+  },
+};
+```
+
+### Create React App
 
 ```js
 // config-overrides.js
-const { webpackPlugin } = require('react-code-locator');
+const { webpackPlugin } = require("react-code-locator/webpack");
 
 module.exports = {
-  webpack: function(config, env) {
-    if (env === 'development') {
+  webpack(config, env) {
+    if (env === "development") {
       config.plugins.push(webpackPlugin());
     }
     return config;
-  }
+  },
 };
 ```
 
 ### Rollup
 
 ```js
-import { rollupPlugin } from 'react-code-locator';
+// rollup.config.js
+import { rollupPlugin } from "react-code-locator";
 
 export default {
-  plugins: [rollupPlugin()]
+  plugins: [rollupPlugin()],
 };
 ```
 
 ### esbuild
 
 ```js
-import { esbuildPlugin } from 'react-code-locator';
+import { esbuildPlugin } from "react-code-locator";
 
-const result = await esbuild.build({
-  plugins: [esbuildPlugin()]
+await esbuild.build({
+  plugins: [esbuildPlugin()],
 });
 ```
 
+### Rspack
+
+```js
+// rspack.config.js
+const { rspackPlugin } = require("react-code-locator");
+
+module.exports = {
+  plugins: [rspackPlugin()],
+};
+```
+
 ## 옵션
 
+모든 플러그인이 동일한 옵션을 공유합니다.
+
 ```ts
 vitePlugin({
-  projectRoot: process.cwd(),    // 프로젝트 루트 경로
+  // 소스 transform 옵션
+  projectRoot: process.cwd(),    // 프로젝트 루트 (상대 경로 기준)
   injectComponentSource: true,   // 컴포넌트 정의에 소스 주입
   injectJsxSource: true,         // JSX 호출부에 소스 주입
   include: /\.[jt]sx$/,          // 포함할 파일 패턴
   exclude: /node_modules/,       // 제외할 파일 패턴
+
+  // Vite 전용 옵션
+  injectClient: true,            // 클라이언트 런타임 자동 주입 (기본값: true)
+  locator: {                     // 런타임 옵션
+    triggerKey: "shift",         // 트리거 키 (기본값: "shift")
+  },
 });
 ```
 
@@ -81,43 +130,42 @@ vitePlugin({
 
 개발 서버에서 `Shift + Click`하면 브라우저 콘솔에 소스 위치가 출력됩니다.
 
-```text
+```
 [react-code-locator] src/components/Button.tsx:14:1
 ```
 
-### 단축키
+결과를 클릭하면 클립보드에 복사됩니다.
 
-- `Shift + Click`: 소스 위치 찾기
-- `Alt + 1`: direct 모드 (JSX 호출부)
-- `Alt + 2`: screen 모드 (화면 컴포넌트)
-- `Alt + 3`: implementation 모드 (구현체)
+### 단축키
 
-### 클릭 복사
+| 키 | 동작 |
+|----|------|
+| `Shift + Click` | 소스 위치 찾기 |
+| `Alt + 1` | direct 모드 (JSX 호출부 위치) |
+| `Alt + 2` | screen 모드 (화면에 보이는 컴포넌트) |
+| `Alt + 3` | implementation 모드 (구현체 위치) |
 
-결과를 클릭하면 클립보드에 복사됩니다.
+## 수동 설정 (고급)
 
-## 수동 주입 (고급)
-
-자동 주입을 사용하지 않고 직접 런타임을 초기화하려면:
+Vite가 아닌 환경에서는 클라이언트 런타임을 직접 초기화해야 합니다.
 
 ```ts
 import { enableReactComponentJump } from "react-code-locator/client";
 
-if (import.meta.env.DEV) {
-  enableReactComponentJump({
-    triggerKey: "shift",
-    onLocate(result) {
-      console.log("Source:", result.source);
-    }
-  });
-}
+enableReactComponentJump({
+  triggerKey: "shift",
+  onLocate(result) {
+    console.log("Source:", result.source);
+  },
+});
 ```
 
-## 주의점
+## 알려진 제한사항
 
-- **개발 모드 전용**입니다.
-- React 낵부 필드인 Fiber와 `_debugSource`에 의존합니다.
-- production build에서는 동작하지 않습니다.
+- **React Native 미지원**: DOM API에 의존합니다.
+- **Turbopack 미지원**: Next.js 13+의 Turbopack은 현재 지원되지 않습니다.
+- **TSX generic arrow function**: `.tsx` 파일에서 `<T,>` 형태의 제네릭 화살표 함수가 있는 파일은 transform이 스킵됩니다. (`function` 선언형이나 `.ts` 파일에서는 정상 동작합니다.)
+- **개발 전용**: `NODE_ENV=development` 환경에서만 사용하세요.
 
 ## License
 

package/dist/client.cjs

@@ -1,400 +1,2 @@
-"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/client.ts
-var client_exports = {};
-__export(client_exports, {
-  enableReactComponentJump: () => enableReactComponentJump,
-  locateComponentSource: () => locateComponentSource
-});
-module.exports = __toCommonJS(client_exports);
-
-// src/constants.ts
-var SOURCE_PROP = "__componentSourceLoc";
-var JSX_SOURCE_PROP = "$componentSourceLoc";
-var JSX_SOURCE_REGISTRY_SYMBOL = "react-code-locator.jsxSourceRegistry";
-
-// src/sourceMetadata.ts
-function normalizeSlashes(value) {
-  return value.replace(/\\/g, "/");
-}
-function trimTrailingSlash(value) {
-  return value.replace(/\/+$/, "");
-}
-function splitPathSegments(value) {
-  return normalizeSlashes(value).split("/").filter(Boolean);
-}
-function computeRelativePath(fromPath, toPath) {
-  const fromSegments = splitPathSegments(fromPath);
-  const toSegments = splitPathSegments(toPath);
-  let sharedIndex = 0;
-  while (sharedIndex < fromSegments.length && sharedIndex < toSegments.length && fromSegments[sharedIndex] === toSegments[sharedIndex]) {
-    sharedIndex += 1;
-  }
-  const upSegments = new Array(Math.max(0, fromSegments.length - sharedIndex)).fill("..");
-  const downSegments = toSegments.slice(sharedIndex);
-  const relativeSegments = [...upSegments, ...downSegments];
-  return relativeSegments.length > 0 ? relativeSegments.join("/") : ".";
-}
-function normalizeProjectRoot(projectRoot) {
-  if (projectRoot) {
-    return trimTrailingSlash(normalizeSlashes(projectRoot));
-  }
-  return "";
-}
-function getSourceFile(source) {
-  if (!source) {
-    return null;
-  }
-  const match = source.match(/^(.*):\d+:\d+$/);
-  return match?.[1] ?? null;
-}
-function isProjectLocalFile(filename, projectRoot) {
-  if (!filename) {
-    return false;
-  }
-  const root = normalizeProjectRoot(projectRoot);
-  const normalizedFilename = normalizeSlashes(filename);
-  if (!root) {
-    return !normalizedFilename.startsWith("../") && !normalizedFilename.startsWith("/") && !/^[A-Za-z]:\//.test(normalizedFilename);
-  }
-  if (normalizedFilename.startsWith(`${root}/`) || normalizedFilename === root) {
-    return true;
-  }
-  const relativePath = computeRelativePath(root, normalizedFilename);
-  return !relativePath.startsWith("../");
-}
-function isProjectLocalSource(source, projectRoot) {
-  const file = getSourceFile(source);
-  return isProjectLocalFile(file ?? void 0, projectRoot);
-}
-
-// src/runtime.ts
-function isTriggerPressed(event, triggerKey) {
-  if (triggerKey === "none") {
-    return true;
-  }
-  if (triggerKey === "alt") {
-    return event.altKey;
-  }
-  if (triggerKey === "meta") {
-    return event.metaKey;
-  }
-  if (triggerKey === "ctrl") {
-    return event.ctrlKey;
-  }
-  return event.shiftKey;
-}
-function getReactFiberKey(element) {
-  return Object.keys(element).find((key) => key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$"));
-}
-function getClosestReactFiber(target) {
-  let current = target;
-  while (current) {
-    const fiberKey = getReactFiberKey(current);
-    if (fiberKey) {
-      return current[fiberKey];
-    }
-    current = current.parentElement;
-  }
-  return null;
-}
-function getSourceFromType(type) {
-  if (!type) {
-    return null;
-  }
-  if (typeof type === "function") {
-    const source2 = type[SOURCE_PROP];
-    return typeof source2 === "string" ? source2 : null;
-  }
-  if (typeof type !== "object") {
-    return null;
-  }
-  const record = type;
-  const source = record[SOURCE_PROP] ?? record.type?.[SOURCE_PROP] ?? record.render?.[SOURCE_PROP];
-  return typeof source === "string" ? source : null;
-}
-function getSourceFromProps(props) {
-  if (props && typeof props === "object") {
-    const registry = globalThis[Symbol.for(JSX_SOURCE_REGISTRY_SYMBOL)];
-    if (registry instanceof WeakMap) {
-      const intrinsicSource = registry.get(props);
-      if (typeof intrinsicSource === "string") {
-        return intrinsicSource;
-      }
-    }
-  }
-  const source = props?.[JSX_SOURCE_PROP];
-  return typeof source === "string" ? source : null;
-}
-function resolveComponentSourceFromFiber(fiber) {
-  let current = fiber;
-  while (current) {
-    const source = getSourceFromType(current.type) ?? getSourceFromType(current.elementType);
-    if (source) {
-      return source;
-    }
-    current = current.return ?? null;
-  }
-  return null;
-}
-function getDirectDebugSource(fiber) {
-  const debugSource = fiber?._debugSource;
-  if (debugSource?.fileName && typeof debugSource.lineNumber === "number") {
-    return `${debugSource.fileName.replace(/\\/g, "/")}:${debugSource.lineNumber}:${debugSource.columnNumber ?? 1}`;
-  }
-  return null;
-}
-function resolveSourceCandidates(fiber) {
-  let current = fiber;
-  const jsxCandidates = [];
-  const componentCandidates = [];
-  while (current) {
-    const jsxSource = getSourceFromProps(current.pendingProps) ?? getSourceFromProps(current.memoizedProps) ?? getDirectDebugSource(current);
-    if (jsxSource) {
-      const file = getSourceFile(jsxSource);
-      if (file && !jsxCandidates.some((candidate) => candidate.source === jsxSource)) {
-        jsxCandidates.push({ source: jsxSource, file });
-      }
-    }
-    const componentSource = getSourceFromType(current.type) ?? getSourceFromType(current.elementType);
-    if (componentSource) {
-      const file = getSourceFile(componentSource);
-      if (file && !componentCandidates.some((candidate) => candidate.source === componentSource)) {
-        componentCandidates.push({ source: componentSource, file });
-      }
-    }
-    current = current.return ?? null;
-  }
-  const direct = jsxCandidates[0]?.source ?? null;
-  const nearestProjectLocalComponentFile = componentCandidates.find((candidate) => isProjectLocalSource(candidate.source))?.file;
-  let screen = null;
-  if (nearestProjectLocalComponentFile) {
-    const matchingJsxCandidate = jsxCandidates.find((candidate) => candidate.file === nearestProjectLocalComponentFile);
-    if (matchingJsxCandidate) {
-      screen = matchingJsxCandidate.source;
-    } else {
-      const matchingComponentCandidate = componentCandidates.find(
-        (candidate) => candidate.file === nearestProjectLocalComponentFile
-      );
-      if (matchingComponentCandidate) {
-        screen = matchingComponentCandidate.source;
-      }
-    }
-  }
-  const implementationComponentCandidate = componentCandidates.find((candidate) => !isProjectLocalSource(candidate.source))?.source ?? null;
-  const implementationJsxCandidate = jsxCandidates.find((candidate) => !isProjectLocalSource(candidate.source))?.source ?? null;
-  const projectLocalJsxCandidate = jsxCandidates.find((candidate) => isProjectLocalSource(candidate.source))?.source ?? null;
-  const screenFallback = screen ?? projectLocalJsxCandidate ?? componentCandidates.find((candidate) => isProjectLocalSource(candidate.source))?.source ?? null;
-  return {
-    direct: direct ?? screenFallback,
-    screen: screenFallback,
-    implementation: implementationComponentCandidate ?? implementationJsxCandidate ?? screenFallback
-  };
-}
-function getModeDescription(mode) {
-  if (mode === "direct") {
-    return "Direct JSX";
-  }
-  if (mode === "screen") {
-    return "Screen source";
-  }
-  return "Implementation source";
-}
-function createStatusOverlay(triggerKey) {
-  if (typeof document === "undefined") {
-    return null;
-  }
-  const element = document.createElement("div");
-  let copyValue = null;
-  let currentMode = "screen";
-  let hideTimer = null;
-  element.setAttribute("data-react-code-locator", "true");
-  Object.assign(element.style, {
-    position: "fixed",
-    right: "12px",
-    bottom: "12px",
-    zIndex: "2147483647",
-    padding: "8px 10px",
-    borderRadius: "8px",
-    background: "rgba(17, 24, 39, 0.92)",
-    color: "#fff",
-    fontSize: "12px",
-    lineHeight: "1.4",
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-    boxShadow: "0 8px 30px rgba(0, 0, 0, 0.25)",
-    pointerEvents: "auto",
-    cursor: "pointer",
-    maxWidth: "min(70vw, 720px)",
-    wordBreak: "break-all",
-    opacity: "0",
-    transition: "opacity 120ms ease"
-  });
-  const show = (message, tone) => {
-    element.textContent = message;
-    element.style.background = tone === "success" ? "rgba(6, 95, 70, 0.92)" : tone === "error" ? "rgba(153, 27, 27, 0.94)" : "rgba(17, 24, 39, 0.92)";
-    element.style.opacity = "1";
-    element.style.pointerEvents = "auto";
-    if (hideTimer) {
-      clearTimeout(hideTimer);
-    }
-    hideTimer = setTimeout(() => {
-      element.style.opacity = "0";
-      element.style.pointerEvents = "none";
-    }, 2e3);
-  };
-  element.addEventListener("click", async () => {
-    if (!copyValue) {
-      return;
-    }
-    try {
-      await navigator.clipboard.writeText(copyValue);
-      show(`[react-code-locator] copied`, "success");
-    } catch {
-      show(`[react-code-locator] copy failed`, "error");
-    }
-  });
-  show(`[react-code-locator] enabled (${triggerKey}+click, alt+1/2/3 to switch mode)`, "idle");
-  const mount = () => {
-    if (!element.isConnected && document.body) {
-      document.body.appendChild(element);
-    }
-  };
-  if (document.body) {
-    mount();
-  } else {
-    document.addEventListener("DOMContentLoaded", mount, { once: true });
-  }
-  return {
-    setStatus(message, tone = "idle") {
-      show(message, tone);
-    },
-    setCopyValue(value) {
-      copyValue = value;
-    },
-    setMode(mode) {
-      currentMode = mode;
-      show(`[react-code-locator] ${getModeDescription(mode)}`, "idle");
-    },
-    remove() {
-      if (hideTimer) {
-        clearTimeout(hideTimer);
-      }
-      element.remove();
-    }
-  };
-}
-function locateComponentSource(target, mode = "screen") {
-  const elementTarget = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
-  const fiber = getClosestReactFiber(elementTarget);
-  if (!fiber) {
-    return null;
-  }
-  const candidates = resolveSourceCandidates(fiber);
-  const source = candidates[mode] ?? candidates.screen ?? candidates.direct ?? candidates.implementation;
-  if (source) {
-    return {
-      source,
-      mode
-    };
-  }
-  const componentSource = resolveComponentSourceFromFiber(fiber);
-  if (!componentSource) {
-    return null;
-  }
-  return {
-    source: componentSource,
-    mode
-  };
-}
-function enableReactComponentJump(options = {}) {
-  const overlay = createStatusOverlay(options.triggerKey ?? "shift");
-  let currentMode = "screen";
-  const {
-    triggerKey = "shift",
-    onLocate = (result) => {
-      console.log(`[react-code-locator] ${result.source}`);
-      overlay?.setCopyValue(result.source);
-      overlay?.setStatus(`[react-code-locator] ${result.source}`, "success");
-    },
-    onError = (error) => {
-      console.error("[react-code-locator]", error);
-      const message = error instanceof Error ? error.message : String(error);
-      overlay?.setCopyValue(null);
-      overlay?.setStatus(`[react-code-locator] ${message}`, "error");
-    }
-  } = options;
-  console.log("[react-code-locator] enabled", { triggerKey });
-  const keyHandler = (event) => {
-    if (!event.altKey) {
-      return;
-    }
-    if (event.code === "Digit1") {
-      currentMode = "direct";
-      overlay?.setMode(currentMode);
-      event.preventDefault();
-      return;
-    }
-    if (event.code === "Digit2") {
-      currentMode = "screen";
-      overlay?.setMode(currentMode);
-      event.preventDefault();
-      return;
-    }
-    if (event.code === "Digit3") {
-      currentMode = "implementation";
-      overlay?.setMode(currentMode);
-      event.preventDefault();
-    }
-  };
-  const handler = (event) => {
-    console.log("[react-code-locator] click", {
-      triggerKey,
-      shiftKey: event.shiftKey,
-      altKey: event.altKey,
-      ctrlKey: event.ctrlKey,
-      metaKey: event.metaKey,
-      target: event.target
-    });
-    if (!isTriggerPressed(event, triggerKey)) {
-      return;
-    }
-    const result = locateComponentSource(event.target, currentMode);
-    if (!result) {
-      onError(new Error("No React component source metadata found for clicked element."));
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    onLocate(result);
-  };
-  document.addEventListener("click", handler, true);
-  document.addEventListener("keydown", keyHandler, true);
-  return () => {
-    document.removeEventListener("click", handler, true);
-    document.removeEventListener("keydown", keyHandler, true);
-    overlay?.remove();
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  enableReactComponentJump,
-  locateComponentSource
-});
+"use strict";var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var n in e)h(t,n,{get:e[n],enumerable:!0})},T=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of P(e))!M.call(t,c)&&c!==n&&h(t,c,{get:()=>e[c],enumerable:!(o=k(e,c))||o.enumerable});return t};var F=t=>T(h({},"__esModule",{value:!0}),t);var X={};O(X,{enableReactComponentJump:()=>v,locateComponentSource:()=>x});module.exports=F(X);var p="__componentSourceLoc",C="$componentSourceLoc",E="react-code-locator.jsxSourceRegistry";function R(t){return t.replace(/\\/g,"/")}function _(t){return t.replace(/\/+$/,"")}function L(t){return R(t).split("/").filter(Boolean)}function K(t,e){let n=L(t),o=L(e),c=0;for(;c<n.length&&c<o.length&&n[c]===o[c];)c+=1;let s=new Array(Math.max(0,n.length-c)).fill(".."),l=o.slice(c),u=[...s,...l];return u.length>0?u.join("/"):"."}function $(t){return t?_(R(t)):""}function g(t){return t?t.match(/^(.*):\d+:\d+$/)?.[1]??null:null}function j(t,e){if(!t)return!1;let n=$(e),o=R(t);return n?o.startsWith(`${n}/`)||o===n?!0:!K(n,o).startsWith("../"):!o.startsWith("../")&&!o.startsWith("/")&&!/^[A-Za-z]:\//.test(o)}function f(t,e){let n=g(t);return j(n??void 0,e)}function D(t,e){return e==="none"?!0:e==="alt"?t.altKey:e==="meta"?t.metaKey:e==="ctrl"?t.ctrlKey:t.shiftKey}function N(t){return Object.keys(t).find(e=>e.startsWith("__reactFiber$")||e.startsWith("__reactInternalInstance$"))}function J(t){let e=t;for(;e;){let n=N(e);if(n)return e[n];e=e.parentElement}return null}function y(t){if(!t)return null;if(typeof t=="function"){let o=t[p];return typeof o=="string"?o:null}if(typeof t!="object")return null;let e=t,n=e[p]??e.type?.[p]??e.render?.[p];return typeof n=="string"?n:null}function w(t){if(t&&typeof t=="object"){let n=globalThis[Symbol.for(E)];if(n instanceof WeakMap){let o=n.get(t);if(typeof o=="string")return o}}let e=t?.[C];return typeof e=="string"?e:null}function z(t){let e=t;for(;e;){let n=y(e.type)??y(e.elementType);if(n)return n;e=e.return??null}return null}function W(t){let e=t?._debugSource;return e?.fileName&&typeof e.lineNumber=="number"?`${e.fileName.replace(/\\/g,"/")}:${e.lineNumber}:${e.columnNumber??1}`:null}function I(t){let e=t,n=[],o=[];for(;e;){let i=w(e.pendingProps)??w(e.memoizedProps)??W(e);if(i){let d=g(i);d&&!n.some(b=>b.source===i)&&n.push({source:i,file:d})}let a=y(e.type)??y(e.elementType);if(a){let d=g(a);d&&!o.some(b=>b.source===a)&&o.push({source:a,file:d})}e=e.return??null}let c=n[0]?.source??null,s=o.find(i=>f(i.source))?.file,l=null;if(s){let i=n.find(a=>a.file===s);if(i)l=i.source;else{let a=o.find(d=>d.file===s);a&&(l=a.source)}}let u=o.find(i=>!f(i.source))?.source??null,r=n.find(i=>!f(i.source))?.source??null,m=n.find(i=>f(i.source))?.source??null,S=l??m??o.find(i=>f(i.source))?.source??null;return{direct:c??S,screen:S,implementation:u??r??S}}function U(t){return t==="direct"?"Direct JSX":t==="screen"?"Screen source":"Implementation source"}function V(t){if(typeof document>"u")return null;let e=document.createElement("div"),n=null,o="screen",c=null;e.setAttribute("data-react-code-locator","true"),Object.assign(e.style,{position:"fixed",right:"12px",bottom:"12px",zIndex:"2147483647",padding:"8px 10px",borderRadius:"8px",background:"rgba(17, 24, 39, 0.92)",color:"#fff",fontSize:"12px",lineHeight:"1.4",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",boxShadow:"0 8px 30px rgba(0, 0, 0, 0.25)",pointerEvents:"auto",cursor:"pointer",maxWidth:"min(70vw, 720px)",wordBreak:"break-all",opacity:"0",transition:"opacity 120ms ease"});let s=(u,r)=>{e.textContent=u,e.style.background=r==="success"?"rgba(6, 95, 70, 0.92)":r==="error"?"rgba(153, 27, 27, 0.94)":"rgba(17, 24, 39, 0.92)",e.style.opacity="1",e.style.pointerEvents="auto",c&&clearTimeout(c),c=setTimeout(()=>{e.style.opacity="0",e.style.pointerEvents="none"},2e3)};e.addEventListener("click",async()=>{if(n)try{await navigator.clipboard.writeText(n),s("[react-code-locator] copied","success")}catch{s("[react-code-locator] copy failed","error")}}),s(`[react-code-locator] enabled (${t}+click, alt+1/2/3 to switch mode)`,"idle");let l=()=>{!e.isConnected&&document.body&&document.body.appendChild(e)};return document.body?l():document.addEventListener("DOMContentLoaded",l,{once:!0}),{setStatus(u,r="idle"){s(u,r)},setCopyValue(u){n=u},setMode(u){o=u,s(`[react-code-locator] ${U(u)}`,"idle")},remove(){c&&clearTimeout(c),e.remove()}}}function x(t,e="screen"){let n=t instanceof Element?t:t instanceof Node?t.parentElement:null,o=J(n);if(!o)return null;let c=I(o),s=c[e]??c.screen??c.direct??c.implementation;if(s)return{source:s,mode:e};let l=z(o);return l?{source:l,mode:e}:null}function v(t={}){if(process.env.NODE_ENV!=="development")return;let e=V(t.triggerKey??"shift"),n="screen",{triggerKey:o="shift",onLocate:c=r=>{console.log(`[react-code-locator] ${r.source}`),e?.setCopyValue(r.source),e?.setStatus(`[react-code-locator] ${r.source}`,"success")},onError:s=r=>{console.error("[react-code-locator]",r);let m=r instanceof Error?r.message:String(r);e?.setCopyValue(null),e?.setStatus(`[react-code-locator] ${m}`,"error")}}=t;console.log("[react-code-locator] enabled",{triggerKey:o});let l=r=>{if(r.altKey){if(r.code==="Digit1"){n="direct",e?.setMode(n),r.preventDefault();return}if(r.code==="Digit2"){n="screen",e?.setMode(n),r.preventDefault();return}r.code==="Digit3"&&(n="implementation",e?.setMode(n),r.preventDefault())}},u=r=>{if(console.log("[react-code-locator] click",{triggerKey:o,shiftKey:r.shiftKey,altKey:r.altKey,ctrlKey:r.ctrlKey,metaKey:r.metaKey,target:r.target}),!D(r,o))return;let m=x(r.target,n);if(!m){s(new Error("No React component source metadata found for clicked element."));return}r.preventDefault(),r.stopPropagation(),c(m)};return document.addEventListener("click",u,!0),document.addEventListener("keydown",l,!0),()=>{document.removeEventListener("click",u,!0),document.removeEventListener("keydown",l,!0),e?.remove()}}0&&(module.exports={enableReactComponentJump,locateComponentSource});
 //# sourceMappingURL=client.cjs.map