Function buildJSXPath

packages/overlay/src/utils/jsx-path.ts:26–136

(
  element: HTMLElement,
  filePath: string,
  componentName: string,
)

 * isn't found.
 */
export function buildJSXPath(
  element: HTMLElement,
  filePath: string,
  componentName: string,
): JSXStructuralPath | null {
  const fiber = getFiberFromHostInstance(element);
  if (!fiber) return null;

  const segments: JSXPathSegment[] = [];
  let current = fiber;
  let foundBoundary = false;

  while (current) {
    // Check if this is the component boundary (composite fiber matching componentName)
    if (isCompositeFiber(current)) {
      const name = getDisplayName(current);
      if (name === componentName) {
        foundBoundary = true;
        break;
      }
    }

    // Determine if this fiber should be included as a path segment
    const fiberType = current.type;

    // Skip fibers with symbol types (Fragment, StrictMode, Suspense, Context, etc.)
    if (typeof fiberType === "symbol") {
      current = current.return;
      continue;
    }

    let name: string | null = null;

    if (typeof fiberType === "string") {
      // Host fiber (div, span, etc.)
      name = fiberType;
    } else if (isCompositeFiber(current)) {
      // Composite fiber — get display name
      const displayName = getDisplayName(current);
      // Only include user-level components (uppercase first letter)
      if (displayName && displayName[0] === displayName[0].toUpperCase() && /^[A-Z]/.test(displayName)) {
        name = displayName;
      }
    }

    if (name === null) {
      current = current.return;
      continue;
    }

    // Skip non-HTML lowercase names that slipped through (e.g. from non-string non-symbol types)
    if (name[0] === name[0].toLowerCase() && !HTML_TAGS.has(name)) {
      current = current.return;
      continue;
    }

    // Determine discriminator
    let discriminator: JSXPathSegment["discriminator"];