@react-component-selector-mcp/react 1.0.0

package/dist/index.js

@@ -0,0 +1,1198 @@
+"use client";
+import { useCallback, useState, useRef, useEffect } from 'react';
+import { z } from 'zod';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { nanoid } from 'nanoid';
+import { SourceMapConsumer } from 'source-map-js';
+import { toPng } from 'html-to-image';
+
+var ComponentTypeSchema = z.enum(["function", "class", "forwardRef", "memo"]);
+var ComponentInfoSchema = z.object({
+  name: z.string(),
+  type: ComponentTypeSchema
+});
+var SourceLocationSchema = z.object({
+  filePath: z.string().nullable(),
+  lineNumber: z.number().nullable(),
+  columnNumber: z.number().nullable()
+});
+var BoundingRectSchema = z.object({
+  x: z.number(),
+  y: z.number(),
+  width: z.number(),
+  height: z.number(),
+  top: z.number(),
+  right: z.number(),
+  bottom: z.number(),
+  left: z.number()
+});
+var DOMInfoSchema = z.object({
+  tagName: z.string(),
+  className: z.string().nullable(),
+  boundingRect: BoundingRectSchema
+});
+var ScreenshotSchema = z.object({
+  dataUrl: z.string(),
+  width: z.number(),
+  height: z.number()
+});
+var SelectionContextSchema = z.object({
+  pageUrl: z.string(),
+  parentComponents: z.array(z.string())
+});
+var SelectionDataSchema = z.object({
+  id: z.string(),
+  timestamp: z.number(),
+  component: ComponentInfoSchema,
+  source: SourceLocationSchema,
+  props: z.record(z.unknown()),
+  state: z.record(z.unknown()).nullable(),
+  dom: DOMInfoSchema,
+  screenshot: ScreenshotSchema,
+  context: SelectionContextSchema
+});
+var MessageTypeSchema = z.enum([
+  "selection",
+  "ping",
+  "pong",
+  "connect",
+  "disconnect",
+  "error",
+  "selectionMode"
+]);
+var BaseMessageSchema = z.object({
+  type: MessageTypeSchema,
+  timestamp: z.number()
+});
+var SelectionMessageSchema = BaseMessageSchema.extend({
+  type: z.literal("selection"),
+  payload: SelectionDataSchema
+});
+var PingMessageSchema = BaseMessageSchema.extend({
+  type: z.literal("ping")
+});
+var PongMessageSchema = BaseMessageSchema.extend({
+  type: z.literal("pong")
+});
+var ConnectMessageSchema = BaseMessageSchema.extend({
+  type: z.literal("connect"),
+  payload: z.object({
+    clientId: z.string(),
+    userAgent: z.string().optional()
+  })
+});
+var DisconnectMessageSchema = BaseMessageSchema.extend({
+  type: z.literal("disconnect"),
+  payload: z.object({
+    clientId: z.string(),
+    reason: z.string().optional()
+  })
+});
+var ErrorMessageSchema = BaseMessageSchema.extend({
+  type: z.literal("error"),
+  payload: z.object({
+    code: z.string(),
+    message: z.string()
+  })
+});
+var SelectionModeMessageSchema = BaseMessageSchema.extend({
+  type: z.literal("selectionMode"),
+  payload: z.object({
+    enabled: z.boolean(),
+    message: z.string().optional()
+  })
+});
+var WebSocketMessageSchema = z.discriminatedUnion("type", [
+  SelectionMessageSchema,
+  PingMessageSchema,
+  PongMessageSchema,
+  ConnectMessageSchema,
+  DisconnectMessageSchema,
+  ErrorMessageSchema,
+  SelectionModeMessageSchema
+]);
+function createMessage(type, payload) {
+  const base = { type, timestamp: Date.now() };
+  if (payload !== void 0) {
+    return { ...base, payload };
+  }
+  return base;
+}
+
+// src/hooks/useWebSocketClient.ts
+function useWebSocketClient(options) {
+  const { port } = options;
+  const onSelectionModeChangeRef = useRef(options.onSelectionModeChange);
+  const onConnectionChangeRef = useRef(options.onConnectionChange);
+  onSelectionModeChangeRef.current = options.onSelectionModeChange;
+  onConnectionChangeRef.current = options.onConnectionChange;
+  const wsRef = useRef(null);
+  const reconnectTimeoutRef = useRef(null);
+  const pingIntervalRef = useRef(null);
+  const isCleaningUpRef = useRef(false);
+  const [connected, setConnected] = useState(false);
+  const [clientId, setClientId] = useState(null);
+  const sendSelection = useCallback((data) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      const message = createMessage("selection", data);
+      wsRef.current.send(JSON.stringify(message));
+    } else {
+      console.warn("[component-picker] Cannot send selection - not connected");
+    }
+  }, []);
+  useEffect(() => {
+    isCleaningUpRef.current = false;
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      return;
+    }
+    const connect = () => {
+      if (wsRef.current?.readyState === WebSocket.OPEN || isCleaningUpRef.current) {
+        return;
+      }
+      try {
+        const ws = new WebSocket(`ws://localhost:${port}`);
+        ws.onopen = () => {
+          if (isCleaningUpRef.current) {
+            ws.close();
+            return;
+          }
+          console.log("[component-picker] Connected to server");
+          setConnected(true);
+          onConnectionChangeRef.current?.(true);
+          pingIntervalRef.current = setInterval(() => {
+            if (ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify(createMessage("ping")));
+            }
+          }, 25e3);
+        };
+        ws.onclose = () => {
+          console.log("[component-picker] Disconnected from server");
+          setConnected(false);
+          setClientId(null);
+          onConnectionChangeRef.current?.(false);
+          if (pingIntervalRef.current) {
+            clearInterval(pingIntervalRef.current);
+            pingIntervalRef.current = null;
+          }
+          if (!isCleaningUpRef.current) {
+            reconnectTimeoutRef.current = setTimeout(() => {
+              connect();
+            }, 3e3);
+          }
+        };
+        ws.onerror = () => {
+        };
+        ws.onmessage = (event) => {
+          try {
+            const parsed = JSON.parse(event.data);
+            const result = WebSocketMessageSchema.safeParse(parsed);
+            if (!result.success) {
+              console.warn("[component-picker] Invalid message:", result.error);
+              return;
+            }
+            const message = result.data;
+            switch (message.type) {
+              case "connect":
+                setClientId(message.payload.clientId);
+                break;
+              case "selectionMode":
+                onSelectionModeChangeRef.current?.(
+                  message.payload.enabled,
+                  message.payload.message
+                );
+                break;
+              case "pong":
+                break;
+              default:
+                break;
+            }
+          } catch (error) {
+            console.error("[component-picker] Error handling message:", error);
+          }
+        };
+        wsRef.current = ws;
+      } catch (error) {
+        console.error("[component-picker] Failed to connect:", error);
+        if (!isCleaningUpRef.current) {
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect();
+          }, 3e3);
+        }
+      }
+    };
+    connect();
+    return () => {
+      isCleaningUpRef.current = true;
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+      if (pingIntervalRef.current) {
+        clearInterval(pingIntervalRef.current);
+        pingIntervalRef.current = null;
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [port]);
+  return {
+    connected,
+    sendSelection,
+    clientId
+  };
+}
+function useKeyboardShortcut(options) {
+  const { key = "C", onTrigger, enabled = true } = options;
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!enabled) return;
+      const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+      const modifierKey = isMac ? event.metaKey : event.ctrlKey;
+      if (modifierKey && event.altKey && event.key.toUpperCase() === key.toUpperCase()) {
+        event.preventDefault();
+        event.stopPropagation();
+        onTrigger();
+      }
+    },
+    [key, onTrigger, enabled]
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [handleKeyDown, enabled]);
+}
+function useSelectionMode() {
+  const [isSelectionMode, setIsSelectionMode] = useState(false);
+  const [selectionMessage, setSelectionMessage] = useState();
+  const enableSelectionMode = useCallback((message) => {
+    setIsSelectionMode(true);
+    setSelectionMessage(message);
+  }, []);
+  const disableSelectionMode = useCallback(() => {
+    setIsSelectionMode(false);
+    setSelectionMessage(void 0);
+  }, []);
+  const toggleSelectionMode = useCallback(() => {
+    setIsSelectionMode((prev) => !prev);
+    if (isSelectionMode) {
+      setSelectionMessage(void 0);
+    }
+  }, [isSelectionMode]);
+  return {
+    isSelectionMode,
+    selectionMessage,
+    enableSelectionMode,
+    disableSelectionMode,
+    toggleSelectionMode
+  };
+}
+var FIBER_TAGS = {
+  FunctionComponent: 0,
+  ClassComponent: 1,
+  ForwardRef: 11,
+  MemoComponent: 14,
+  SimpleMemoComponent: 15
+};
+function useFiberInspector() {
+  const getFiberFromElement = useCallback((element) => {
+    if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__?.renderers) {
+      for (const renderer of window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values()) {
+        const fiber = renderer.findFiberByHostInstance?.(element);
+        if (fiber) return fiber;
+      }
+    }
+    const fiberKey = Object.keys(element).find(
+      (key) => key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")
+    );
+    if (fiberKey) {
+      const fiber = element[fiberKey];
+      return fiber ?? null;
+    }
+    return null;
+  }, []);
+  const getComponentType = useCallback((fiber) => {
+    switch (fiber.tag) {
+      case FIBER_TAGS.ClassComponent:
+        return "class";
+      case FIBER_TAGS.ForwardRef:
+        return "forwardRef";
+      case FIBER_TAGS.MemoComponent:
+      case FIBER_TAGS.SimpleMemoComponent:
+        return "memo";
+      case FIBER_TAGS.FunctionComponent:
+      default:
+        return "function";
+    }
+  }, []);
+  const getComponentName2 = useCallback((fiber) => {
+    const type = fiber.type;
+    if (!type) return "Unknown";
+    if (typeof type === "function") {
+      const fn = type;
+      return fn.displayName || fn.name || "Anonymous";
+    }
+    if (typeof type === "object" && type !== null) {
+      const obj = type;
+      if (obj.displayName) return obj.displayName;
+      if (obj.render) return obj.render.displayName || obj.render.name || "ForwardRef";
+      if (obj.type) return obj.type.displayName || obj.type.name || "Memo";
+    }
+    return "Unknown";
+  }, []);
+  const findNearestComponentFiber = useCallback((fiber) => {
+    let current = fiber;
+    while (current) {
+      const tag = current.tag;
+      if (tag === FIBER_TAGS.FunctionComponent || tag === FIBER_TAGS.ClassComponent || tag === FIBER_TAGS.ForwardRef || tag === FIBER_TAGS.MemoComponent || tag === FIBER_TAGS.SimpleMemoComponent) {
+        const name = getComponentName2(current);
+        if (!name.startsWith("_") && name !== "Unknown" && name !== "Anonymous") {
+          return current;
+        }
+      }
+      current = current.return;
+    }
+    return null;
+  }, [getComponentName2]);
+  const getParentComponents = useCallback(
+    (fiber) => {
+      const parents = [];
+      let current = fiber.return;
+      while (current && parents.length < 10) {
+        const tag = current.tag;
+        if (tag === FIBER_TAGS.FunctionComponent || tag === FIBER_TAGS.ClassComponent || tag === FIBER_TAGS.ForwardRef || tag === FIBER_TAGS.MemoComponent || tag === FIBER_TAGS.SimpleMemoComponent) {
+          const name = getComponentName2(current);
+          if (!name.startsWith("_") && name !== "Unknown") {
+            parents.push(name);
+          }
+        }
+        current = current.return;
+      }
+      return parents;
+    },
+    [getComponentName2]
+  );
+  const serializeProps = useCallback((props) => {
+    const result = {};
+    for (const [key, value] of Object.entries(props)) {
+      if (key === "children" || key === "key" || key === "ref") continue;
+      try {
+        if (typeof value === "function") {
+          result[key] = "[Function]";
+        } else if (value instanceof Element) {
+          result[key] = "[Element]";
+        } else if (typeof value === "object" && value !== null) {
+          JSON.stringify(value);
+          result[key] = value;
+        } else {
+          result[key] = value;
+        }
+      } catch {
+        result[key] = "[Circular or Unserializable]";
+      }
+    }
+    return result;
+  }, []);
+  const extractState = useCallback((fiber) => {
+    if (fiber.tag !== FIBER_TAGS.ClassComponent) {
+      return null;
+    }
+    const instance = fiber.stateNode;
+    if (instance?.state) {
+      try {
+        JSON.stringify(instance.state);
+        return instance.state;
+      } catch {
+        return { error: "[Unserializable state]" };
+      }
+    }
+    return null;
+  }, []);
+  const extractFiberData = useCallback(
+    (fiber) => {
+      return {
+        componentInfo: {
+          name: getComponentName2(fiber),
+          type: getComponentType(fiber)
+        },
+        props: serializeProps(fiber.memoizedProps || {}),
+        state: extractState(fiber),
+        parentComponents: getParentComponents(fiber),
+        debugSource: {
+          fileName: fiber._debugSource?.fileName ?? null,
+          lineNumber: fiber._debugSource?.lineNumber ?? null,
+          columnNumber: fiber._debugSource?.columnNumber ?? null
+        }
+      };
+    },
+    [getComponentName2, getComponentType, serializeProps, extractState, getParentComponents]
+  );
+  return {
+    getFiberFromElement,
+    extractFiberData,
+    findNearestComponentFiber
+  };
+}
+function SelectionOverlay({
+  enabled,
+  message,
+  onSelect,
+  onCancel
+}) {
+  const [highlight, setHighlight] = useState(null);
+  const hoveredElementRef = useRef(null);
+  const getComponentName2 = useCallback((element) => {
+    const fiberKey = Object.keys(element).find(
+      (k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$")
+    );
+    let reactName = null;
+    if (fiberKey) {
+      const fiber = element[fiberKey];
+      if (fiber?.type && typeof fiber.type === "function") {
+        const fn = fiber.type;
+        reactName = fn.displayName || fn.name || null;
+      }
+      if (!reactName || reactName === "div" || reactName === "button") {
+        let current = fiber;
+        while (current?.return) {
+          current = current.return;
+          if (current?.type && typeof current.type === "function") {
+            const fn = current.type;
+            const name = fn.displayName || fn.name;
+            if (name && !["Fragment", "Suspense", "Provider", "Consumer"].includes(name)) {
+              reactName = name;
+              break;
+            }
+          }
+        }
+      }
+    }
+    const textContent = element.textContent?.trim().slice(0, 20) || "";
+    const textSuffix = textContent ? ` "${textContent}${element.textContent && element.textContent.length > 20 ? "..." : ""}"` : "";
+    if (reactName && !["div", "button", "span", "p", "h1", "h2", "h3"].includes(reactName.toLowerCase())) {
+      return `<${reactName}>${textSuffix}`;
+    }
+    if (element.className && typeof element.className === "string" && element.className.trim()) {
+      const classes = element.className.trim().split(/\s+/)[0];
+      return `.${classes}${textSuffix}`;
+    }
+    return `<${element.tagName.toLowerCase()}>${textSuffix}`;
+  }, []);
+  const handleMouseMove = useCallback(
+    (event) => {
+      if (!enabled) return;
+      const target = event.target;
+      if (target.closest("[data-component-picker]")) {
+        setHighlight(null);
+        hoveredElementRef.current = null;
+        return;
+      }
+      if (["HTML", "BODY", "SCRIPT", "STYLE", "NOSCRIPT"].includes(target.tagName)) {
+        setHighlight(null);
+        hoveredElementRef.current = null;
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      hoveredElementRef.current = target;
+      setHighlight({
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        componentName: getComponentName2(target)
+      });
+    },
+    [enabled, getComponentName2]
+  );
+  const handleClick = useCallback(
+    (event) => {
+      if (!enabled) return;
+      const target = event.target;
+      if (target.closest("[data-component-picker]")) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (hoveredElementRef.current) {
+        onSelect(hoveredElementRef.current);
+      }
+    },
+    [enabled, onSelect]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!enabled) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+      }
+    },
+    [enabled, onCancel]
+  );
+  useEffect(() => {
+    if (!enabled) {
+      setHighlight(null);
+      hoveredElementRef.current = null;
+      return;
+    }
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    document.body.style.cursor = "crosshair";
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+      document.body.style.cursor = "";
+    };
+  }, [enabled, handleMouseMove, handleClick, handleKeyDown]);
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    highlight && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-component-picker": "highlight",
+        style: {
+          position: "fixed",
+          top: highlight.top,
+          left: highlight.left,
+          width: highlight.width,
+          height: highlight.height,
+          border: "2px solid #3b82f6",
+          backgroundColor: "rgba(59, 130, 246, 0.1)",
+          pointerEvents: "none",
+          zIndex: 999998,
+          boxSizing: "border-box"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: -24,
+              left: -2,
+              padding: "2px 8px",
+              backgroundColor: "#3b82f6",
+              color: "white",
+              fontSize: "12px",
+              fontFamily: "system-ui, sans-serif",
+              fontWeight: 500,
+              borderRadius: "4px 4px 0 0",
+              whiteSpace: "nowrap",
+              maxWidth: "300px",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: highlight.componentName
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-component-picker": "info-bar",
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          padding: "12px 16px",
+          backgroundColor: "#3b82f6",
+          color: "white",
+          fontFamily: "system-ui, sans-serif",
+          fontSize: "14px",
+          textAlign: "center",
+          zIndex: 999999,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "16px",
+          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: message || "Click a component to select it" }),
+          /* @__PURE__ */ jsx("span", { style: { opacity: 0.8, fontSize: "12px" }, children: "Press ESC to cancel" })
+        ]
+      }
+    )
+  ] });
+}
+var sourceMapCache = /* @__PURE__ */ new Map();
+var failedFetches = /* @__PURE__ */ new Set();
+async function fetchSourceMap(scriptUrl) {
+  if (sourceMapCache.has(scriptUrl)) {
+    return sourceMapCache.get(scriptUrl) || null;
+  }
+  if (failedFetches.has(scriptUrl)) {
+    return null;
+  }
+  try {
+    const sourceMapUrl = await findSourceMapUrl(scriptUrl);
+    if (!sourceMapUrl) {
+      failedFetches.add(scriptUrl);
+      sourceMapCache.set(scriptUrl, null);
+      return null;
+    }
+    const response = await fetch(sourceMapUrl);
+    if (!response.ok) {
+      failedFetches.add(scriptUrl);
+      sourceMapCache.set(scriptUrl, null);
+      return null;
+    }
+    const sourceMapData = await response.json();
+    const consumer = new SourceMapConsumer(sourceMapData);
+    sourceMapCache.set(scriptUrl, consumer);
+    return consumer;
+  } catch (error) {
+    console.debug("[component-picker] Failed to fetch source map:", error);
+    failedFetches.add(scriptUrl);
+    sourceMapCache.set(scriptUrl, null);
+    return null;
+  }
+}
+async function findSourceMapUrl(scriptUrl) {
+  try {
+    const scriptResponse = await fetch(scriptUrl);
+    if (scriptResponse.ok) {
+      const scriptContent = await scriptResponse.text();
+      const match = scriptContent.match(
+        /\/\/[#@]\s*sourceMappingURL=([^\s'"]+)/
+      );
+      if (match?.[1]) {
+        const mapUrl = match[1];
+        if (mapUrl.startsWith("data:")) {
+          return null;
+        }
+        return new URL(mapUrl, scriptUrl).href;
+      }
+    }
+    const patterns = [
+      `${scriptUrl}.map`,
+      scriptUrl.replace(/\.js$/, ".js.map"),
+      scriptUrl.replace(/\.mjs$/, ".mjs.map")
+    ];
+    for (const pattern of patterns) {
+      try {
+        const response = await fetch(pattern, { method: "HEAD" });
+        if (response.ok) {
+          return pattern;
+        }
+      } catch {
+      }
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function resolveSourcePath(sourcePath, scriptUrl) {
+  if (sourcePath.startsWith("webpack://")) {
+    const match = sourcePath.match(/webpack:\/\/(?:[^/]+)?\/\.?\/?(.+)/);
+    if (match?.[1]) {
+      return match[1];
+    }
+  }
+  if (sourcePath.startsWith("[project]/")) {
+    return sourcePath.replace("[project]/", "");
+  }
+  if (sourcePath.startsWith("./") || sourcePath.startsWith("../")) {
+    try {
+      const scriptDir = scriptUrl.substring(0, scriptUrl.lastIndexOf("/"));
+      const resolved = new URL(sourcePath, scriptDir + "/").pathname;
+      return resolved.replace(/^\//, "");
+    } catch {
+      return sourcePath;
+    }
+  }
+  if (sourcePath.startsWith("/")) {
+    return sourcePath.substring(1);
+  }
+  return sourcePath;
+}
+async function searchSourceMapsForComponent(componentName) {
+  const scripts = Array.from(document.querySelectorAll("script[src]")).map((s) => s.src).filter((src) => src && !src.includes("node_modules"));
+  const nextScripts = Array.from(
+    document.querySelectorAll('script[src*="/_next/"]')
+  ).map((s) => s.src);
+  const allScripts = [.../* @__PURE__ */ new Set([...scripts, ...nextScripts])];
+  for (const scriptUrl of allScripts) {
+    const consumer = await fetchSourceMap(scriptUrl);
+    if (!consumer) continue;
+    const sources = consumer.sources || [];
+    for (const source of sources) {
+      const fileName = source.split("/").pop() || "";
+      const baseName = fileName.replace(/\.(tsx?|jsx?)$/, "");
+      if (baseName === componentName || fileName.toLowerCase().includes(componentName.toLowerCase())) {
+        try {
+          let firstMapping = null;
+          consumer.eachMapping((mapping) => {
+            if (mapping.source === source && !firstMapping) {
+              if (mapping.name === componentName && mapping.originalLine !== null && mapping.originalColumn !== null) {
+                firstMapping = {
+                  line: mapping.originalLine,
+                  column: mapping.originalColumn
+                };
+              }
+            }
+          });
+          if (firstMapping !== null) {
+            return {
+              source: resolveSourcePath(source, scriptUrl),
+              line: firstMapping.line,
+              column: firstMapping.column
+            };
+          }
+          if (baseName === componentName) {
+            return {
+              source: resolveSourcePath(source, scriptUrl),
+              line: 1,
+              column: 0
+            };
+          }
+        } catch {
+        }
+      }
+    }
+  }
+  return null;
+}
+
+// src/utils/stackTraceParser.ts
+function parseStackTrace(error) {
+  const stack = error.stack;
+  if (!stack) return [];
+  const frames = [];
+  const lines = stack.split("\n");
+  for (const line of lines) {
+    const frame = parseStackLine(line);
+    if (frame) {
+      frames.push(frame);
+    }
+  }
+  return frames;
+}
+function parseStackLine(line) {
+  const chromeMatch = line.match(
+    /^\s*at\s+(?:async\s+)?(?:(\S+)\s+)?\(?(https?:\/\/[^)]+|file:\/\/[^)]+):(\d+):(\d+)\)?/
+  );
+  if (chromeMatch) {
+    return {
+      functionName: chromeMatch[1] || null,
+      url: chromeMatch[2],
+      lineNumber: parseInt(chromeMatch[3], 10),
+      columnNumber: parseInt(chromeMatch[4], 10)
+    };
+  }
+  const firefoxMatch = line.match(
+    /^(?:(\S*)@)?(https?:\/\/[^:]+|file:\/\/[^:]+):(\d+):(\d+)/
+  );
+  if (firefoxMatch) {
+    return {
+      functionName: firefoxMatch[1] || null,
+      url: firefoxMatch[2],
+      lineNumber: parseInt(firefoxMatch[3], 10),
+      columnNumber: parseInt(firefoxMatch[4], 10)
+    };
+  }
+  return null;
+}
+function filterInternalFrames(frames) {
+  const internalPatterns = [
+    /node_modules/,
+    /react-dom/,
+    /react\.production/,
+    /react\.development/,
+    /scheduler/,
+    /\/_next\/static\/chunks\/webpack/,
+    /\/__webpack_/,
+    /\/turbopack-/,
+    // React internal function names
+    /^(?:renderWithHooks|mountIndeterminateComponent|beginWork|performUnitOfWork)/,
+    /^(?:callCallback|invokeGuardedCallbackDev|invokeGuardedCallback)/,
+    /^(?:commitRoot|flushSync|batchedUpdates)/
+  ];
+  return frames.filter((frame) => {
+    for (const pattern of internalPatterns) {
+      if (pattern.test(frame.url)) {
+        return false;
+      }
+    }
+    if (frame.functionName) {
+      for (const pattern of internalPatterns) {
+        if (pattern.test(frame.functionName)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  });
+}
+
+// src/utils/sourceLocationResolver.ts
+async function resolveSourceLocation(fiber, element) {
+  const debugSourceResult = tryDebugSource(fiber);
+  if (debugSourceResult.filePath) {
+    return debugSourceResult;
+  }
+  const sourceMapResult = await trySourceMapResolution(fiber);
+  if (sourceMapResult?.filePath) {
+    return sourceMapResult;
+  }
+  const stackResult = tryStackTraceParsing();
+  if (stackResult?.filePath) {
+    return stackResult;
+  }
+  return {
+    filePath: null,
+    lineNumber: null,
+    columnNumber: null
+  };
+}
+function tryDebugSource(fiber) {
+  if (fiber) {
+    console.log("[component-picker] Fiber keys:", Object.keys(fiber));
+    console.log("[component-picker] _debugSource:", fiber._debugSource);
+    console.log("[component-picker] _debugInfo:", fiber._debugInfo);
+  }
+  if (!fiber?._debugSource) {
+    return { filePath: null, lineNumber: null, columnNumber: null };
+  }
+  const { fileName, lineNumber, columnNumber } = fiber._debugSource;
+  if (!fileName) {
+    return { filePath: null, lineNumber: null, columnNumber: null };
+  }
+  return {
+    filePath: formatFilePath(fileName),
+    lineNumber: lineNumber ?? null,
+    columnNumber: columnNumber ?? null
+  };
+}
+async function trySourceMapResolution(fiber, _element) {
+  try {
+    const componentName = fiber?.type ? getComponentName(fiber.type) : null;
+    if (!componentName) {
+      return null;
+    }
+    const result = await searchSourceMapsForComponent(componentName);
+    if (!result) {
+      return null;
+    }
+    return {
+      filePath: formatFilePath(result.source),
+      lineNumber: result.line,
+      columnNumber: result.column
+    };
+  } catch (error) {
+    console.debug("[component-picker] Source map resolution failed:", error);
+    return null;
+  }
+}
+function tryStackTraceParsing() {
+  try {
+    const error = new Error();
+    const frames = parseStackTrace(error);
+    const userFrames = filterInternalFrames(frames);
+    if (userFrames.length === 0) {
+      return null;
+    }
+    const frame = userFrames[0];
+    const filePath = extractFilePathFromUrl(frame.url);
+    if (!filePath) {
+      return null;
+    }
+    return {
+      filePath,
+      lineNumber: frame.lineNumber,
+      columnNumber: frame.columnNumber
+    };
+  } catch {
+    return null;
+  }
+}
+function getComponentName(type) {
+  if (!type) return null;
+  if (typeof type === "function") {
+    return type.displayName || type.name || null;
+  }
+  if (typeof type === "object" && type !== null) {
+    const obj = type;
+    return obj.displayName || obj.render?.displayName || obj.render?.name || null;
+  }
+  return null;
+}
+function extractFilePathFromUrl(url) {
+  try {
+    const urlObj = new URL(url);
+    let path = urlObj.pathname;
+    path = path.replace(/^\/+/, "");
+    path = path.replace(/^_next\/static\/chunks\//, "").replace(/^_next\/static\/[^/]+\/pages\//, "pages/").replace(/^\/@fs\//, "").replace(/^@vite\//, "").replace(/^webpack:\/\/[^/]+\//, "").replace(/^\[project\]\//, "");
+    path = path.split("?")[0]?.split("#")[0] || path;
+    if (!path.includes("/") && !path.match(/\.(tsx?|jsx?|mjs)$/)) {
+      return null;
+    }
+    return path || null;
+  } catch {
+    return url;
+  }
+}
+function formatFilePath(filePath) {
+  if (!filePath) return null;
+  let cleaned = filePath.replace(/^webpack:\/\/[^/]+\//, "").replace(/^\.\//g, "").replace(/^\/+/, "").replace(/^\[project\]\//, "");
+  cleaned = cleaned.replace(/\\/g, "/");
+  return cleaned;
+}
+var DEFAULT_OPTIONS = {
+  maxWidth: 800,
+  maxHeight: 600,
+  backgroundColor: "#ffffff",
+  pixelRatio: 1,
+  padding: 10
+};
+async function captureScreenshot(element, options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  try {
+    const rect = element.getBoundingClientRect();
+    const width = Math.min(rect.width + opts.padding * 2, opts.maxWidth);
+    const height = Math.min(rect.height + opts.padding * 2, opts.maxHeight);
+    const dataUrl = await toPng(element, {
+      backgroundColor: opts.backgroundColor,
+      pixelRatio: opts.pixelRatio,
+      width: rect.width,
+      height: rect.height,
+      style: {
+        margin: "0",
+        padding: "0"
+      },
+      filter: (node) => {
+        if (node instanceof Element) {
+          if (node.hasAttribute("data-component-picker")) {
+            return false;
+          }
+        }
+        return true;
+      }
+    });
+    return {
+      dataUrl,
+      width: Math.round(width),
+      height: Math.round(height)
+    };
+  } catch (error) {
+    console.error("[component-picker] Screenshot capture failed:", error);
+    return {
+      dataUrl: createFallbackScreenshot(element),
+      width: 200,
+      height: 100
+    };
+  }
+}
+function createFallbackScreenshot(element) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 200;
+  canvas.height = 100;
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    ctx.fillStyle = "#f0f0f0";
+    ctx.fillRect(0, 0, 200, 100);
+    ctx.fillStyle = "#666";
+    ctx.font = "12px sans-serif";
+    ctx.textAlign = "center";
+    ctx.fillText("Screenshot unavailable", 100, 45);
+    ctx.fillText(element.tagName.toLowerCase(), 100, 65);
+  }
+  return canvas.toDataURL("image/png");
+}
+
+// src/utils/componentMetadata.ts
+function extractDOMInfo(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    tagName: element.tagName.toLowerCase(),
+    className: element.className || null,
+    boundingRect: {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left
+    }
+  };
+}
+async function buildSelectionData(element, fiberData, options = {}) {
+  const fiber = options.fiber ?? {
+    _debugSource: fiberData.debugSource
+  };
+  const source = await resolveSourceLocation(fiber);
+  const screenshot = await captureScreenshot(element, options.screenshotOptions);
+  const selectionData = {
+    id: nanoid(),
+    timestamp: Date.now(),
+    component: fiberData.componentInfo,
+    source: {
+      filePath: formatFilePath(source.filePath),
+      lineNumber: source.lineNumber,
+      columnNumber: source.columnNumber
+    },
+    props: fiberData.props,
+    state: fiberData.state,
+    dom: extractDOMInfo(element),
+    screenshot,
+    context: {
+      pageUrl: window.location.href,
+      parentComponents: fiberData.parentComponents
+    }
+  };
+  return selectionData;
+}
+function ComponentPicker(props) {
+  if (process.env.NODE_ENV !== "development") {
+    return props.children;
+  }
+  return /* @__PURE__ */ jsx(ComponentPickerImpl, { ...props });
+}
+function ComponentPickerImpl({
+  port = 3333,
+  children,
+  shortcutKey = "C",
+  onConnectionChange,
+  onSelect
+}) {
+  const { isSelectionMode, selectionMessage, enableSelectionMode, disableSelectionMode } = useSelectionMode();
+  const { getFiberFromElement, extractFiberData, findNearestComponentFiber } = useFiberInspector();
+  const { connected, sendSelection } = useWebSocketClient({
+    port,
+    onSelectionModeChange: (enabled, message) => {
+      if (enabled) {
+        enableSelectionMode(message);
+      } else {
+        disableSelectionMode();
+      }
+    },
+    onConnectionChange
+  });
+  useKeyboardShortcut({
+    key: shortcutKey,
+    onTrigger: () => {
+      if (isSelectionMode) {
+        disableSelectionMode();
+      } else {
+        enableSelectionMode();
+      }
+    },
+    enabled: connected
+  });
+  const handleSelect = useCallback(
+    async (element) => {
+      try {
+        const fiber = getFiberFromElement(element);
+        if (!fiber) {
+          console.warn("[component-picker] No React fiber found for element");
+          disableSelectionMode();
+          return;
+        }
+        const componentFiber = findNearestComponentFiber(fiber);
+        if (!componentFiber) {
+          console.warn("[component-picker] No component fiber found");
+          disableSelectionMode();
+          return;
+        }
+        const fiberData = extractFiberData(componentFiber);
+        const selectionData = await buildSelectionData(element, fiberData, {
+          fiber: componentFiber
+        });
+        sendSelection(selectionData);
+        onSelect?.(selectionData.component.name, selectionData.source.filePath);
+        console.log(
+          `[component-picker] Selected: ${selectionData.component.name}`,
+          selectionData.source.filePath ? `at ${selectionData.source.filePath}:${selectionData.source.lineNumber}` : ""
+        );
+      } catch (error) {
+        console.error("[component-picker] Selection error:", error);
+      } finally {
+        disableSelectionMode();
+      }
+    },
+    [
+      getFiberFromElement,
+      findNearestComponentFiber,
+      extractFiberData,
+      sendSelection,
+      disableSelectionMode,
+      onSelect
+    ]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx(
+      SelectionOverlay,
+      {
+        enabled: isSelectionMode,
+        message: selectionMessage,
+        onSelect: handleSelect,
+        onCancel: disableSelectionMode
+      }
+    ),
+    process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-component-picker": "status",
+        onClick: () => {
+          if (!connected) return;
+          if (isSelectionMode) {
+            disableSelectionMode();
+          } else {
+            enableSelectionMode();
+          }
+        },
+        style: {
+          position: "fixed",
+          bottom: 16,
+          right: 16,
+          padding: "8px 12px",
+          backgroundColor: !connected ? "#ef4444" : isSelectionMode ? "#f59e0b" : "#22c55e",
+          color: "white",
+          borderRadius: "9999px",
+          fontSize: "12px",
+          fontFamily: "system-ui, sans-serif",
+          fontWeight: 500,
+          zIndex: 999997,
+          opacity: 0.9,
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+          border: "none",
+          cursor: connected ? "pointer" : "not-allowed",
+          transition: "background-color 0.2s ease"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                backgroundColor: "white",
+                animation: !connected ? "pulse 2s infinite" : "none"
+              }
+            }
+          ),
+          !connected ? "Connecting..." : isSelectionMode ? "Click a Component" : "Select Component"
+        ]
+      }
+    )
+  ] });
+}
+
+export { ComponentPicker };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map