Function selectElement

packages/overlay/src/selection.ts:640–718

(el: HTMLElement, options?: { skipSidebar?: boolean })

}

export async function selectElement(el: HTMLElement, options?: { skipSidebar?: boolean }): Promise<void> {
  try {
    const displayRect = el.getBoundingClientRect();

    // Show selection overlay with loading dots immediately, before async resolve
    selectedElement = el;
    showSelectionOverlay(displayRect, null);
    hideHoverOverlay();

    const resolved = (await resolveComponentFromElement(el)) ?? buildFallbackSelection(el);

    // Layer 2: grep-based discovery when filePath is empty
    if (!resolved.filePath && resolved.componentName) {
      const cached = getCachedFilePath(resolved.componentName);
      if (cached === undefined) {
        // Not looked up yet — ask CLI
        const discovered = await requestFileDiscovery(resolved.componentName);
        setCachedFilePath(resolved.componentName, discovered);
        if (discovered) {
          resolved.filePath = discovered;
          if (resolved.stack) {
            for (const frame of resolved.stack) {
              if (frame.componentName === resolved.componentName && !frame.filePath) {
                frame.filePath = discovered;
              }
            }
          }
        }
      } else if (cached) {
        resolved.filePath = cached;
        if (resolved.stack) {
          for (const frame of resolved.stack) {
            if (frame.componentName === resolved.componentName && !frame.filePath) {
              frame.filePath = cached;
            }
          }
        }
      }
    }

    console.log("[ReactRewrite] selectElement:", el.tagName, "→", resolved.componentName, resolved.filePath, "stack:", resolved.stack?.map(s => s.componentName));

    currentSelection = {
      tagName: resolved.tagName,
      componentName: resolved.componentName,
      filePath: resolved.filePath,
      lineNumber: resolved.lineNumber,
      columnNumber: resolved.columnNumber,
      stack: resolved.stack,
      boundingRect: {
        top: displayRect.top,
        left: displayRect.left,
        width: displayRect.width,
        height: displayRect.height,
      },
      jsxPath: resolved.jsxPath,
    };