browser-devtools-mcp 0.0.3 → 0.1.1

package/dist/tools/react/get-component-for-element.js

@@ -0,0 +1,941 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GetComponentForElement = void 0;
+const zod_1 = require("zod");
+/**
+ * -------------------------
+ * Defaults / limits
+ * -------------------------
+ */
+const DEFAULT_MAX_STACK_DEPTH = 30;
+const DEFAULT_MAX_PROPS_PREVIEW_CHARS = 2000;
+const DEFAULT_INCLUDE_PROPS_PREVIEW = true;
+const DEFAULT_MAX_ELEMENT_PATH_DEPTH = 25;
+/**
+ * Fiber subtree search can be large on big pages.
+ * Keep a conservative cap to avoid freezing the page.
+ */
+const DEFAULT_MAX_FIBER_SUBTREE_NODES_TO_SCAN = 50_000;
+class GetComponentForElement {
+    name() {
+        return 'react_get-component-for-element';
+    }
+    description() {
+        return `
+Finds the React component(s) associated with a DOM element using React Fiber (best-effort).
+
+How it works:
+- Resolve a DOM element by CSS selector OR by (x,y) using elementFromPoint()
+- Attempt to locate React Fiber pointers on that element (e.g. __reactFiber$*)
+- If not present, walk up ancestor elements to find the nearest React-owned host node
+
+Key correctness fix:
+- If fiber is found on an ANCESTOR element, we scan that fiber subtree to locate the EXACT host fiber
+  where fiber.stateNode === target DOM element, then build the component stack from that host fiber.
+  This reduces unrelated components appearing in the returned stack.
+
+What to expect (important for AI debugging):
+- React Fiber is not a public API; results are best-effort and can differ by build (dev/prod).
+- Component names may come from displayName, wrappers, third-party libraries, or minified production builds.
+- wrappersDetected/wrapperFrames help interpret memo/forwardRef/context boundaries that can otherwise look confusing.
+- If hostMapping.strategy is "ancestor-fallback", the stack may include unrelated frames; try a more specific selector
+  or target a deeper DOM node to improve mapping accuracy.
+        `.trim();
+    }
+    inputSchema() {
+        return {
+            selector: zod_1.z
+                .string()
+                .optional()
+                .describe('CSS selector for the target element. If provided, takes precedence over x/y.'),
+            x: zod_1.z
+                .number()
+                .int()
+                .optional()
+                .describe('Viewport X coordinate in CSS pixels. Used when selector is not provided.'),
+            y: zod_1.z
+                .number()
+                .int()
+                .optional()
+                .describe('Viewport Y coordinate in CSS pixels. Used when selector is not provided.'),
+            maxStackDepth: zod_1.z
+                .number()
+                .int()
+                .positive()
+                .optional()
+                .default(DEFAULT_MAX_STACK_DEPTH)
+                .describe('Maximum number of component frames to return in the component stack.'),
+            includePropsPreview: zod_1.z
+                .boolean()
+                .optional()
+                .default(DEFAULT_INCLUDE_PROPS_PREVIEW)
+                .describe('If true, includes a best-effort, truncated props preview for the nearest component.'),
+            maxPropsPreviewChars: zod_1.z
+                .number()
+                .int()
+                .positive()
+                .optional()
+                .default(DEFAULT_MAX_PROPS_PREVIEW_CHARS)
+                .describe('Maximum characters for props preview (after safe stringification).'),
+        };
+    }
+    outputSchema() {
+        return {
+            target: zod_1.z.object({
+                selector: zod_1.z.string().nullable(),
+                point: zod_1.z.object({
+                    x: zod_1.z.number().int().nullable(),
+                    y: zod_1.z.number().int().nullable(),
+                }),
+                found: zod_1.z.boolean(),
+                domHint: zod_1.z.string().nullable(),
+                elementPath: zod_1.z.string().nullable(),
+            }),
+            react: zod_1.z.object({
+                detected: zod_1.z.boolean(),
+                detectionReason: zod_1.z.string(),
+                fiberKey: zod_1.z.string().nullable(),
+                hostMapping: zod_1.z.object({
+                    fiberOnTargetElement: zod_1.z
+                        .boolean()
+                        .describe('Whether the initial fiber pointer was found directly on the target element.'),
+                    anchorDomHint: zod_1.z
+                        .string()
+                        .nullable()
+                        .describe('DOM hint of the element where fiber pointer was found (target or ancestor).'),
+                    targetDomHint: zod_1.z
+                        .string()
+                        .nullable()
+                        .describe('DOM hint of the actual target element.'),
+                    hostFiberMatchedTarget: zod_1.z
+                        .boolean()
+                        .describe('Whether we found the exact host fiber for target element (fiber.stateNode === targetEl) via subtree scan.'),
+                    subtreeScanNodesScanned: zod_1.z
+                        .number()
+                        .int()
+                        .describe('Number of fiber nodes scanned during subtree search.'),
+                    subtreeScanMaxNodes: zod_1.z
+                        .number()
+                        .int()
+                        .describe('Maximum fiber nodes allowed to scan (safety cap).'),
+                    strategy: zod_1.z
+                        .enum([
+                        'direct-on-target',
+                        'ancestor-subtree-scan',
+                        'ancestor-fallback',
+                    ])
+                        .describe('Mapping strategy used to produce the final stack.'),
+                }),
+                nearestComponent: zod_1.z
+                    .object({
+                    name: zod_1.z.string().nullable(),
+                    displayName: zod_1.z.string().nullable(),
+                    kind: zod_1.z.enum(['function', 'class', 'unknown']),
+                    debugSource: zod_1.z
+                        .object({
+                        fileName: zod_1.z.string().optional(),
+                        lineNumber: zod_1.z.number().int().optional(),
+                        columnNumber: zod_1.z.number().int().optional(),
+                    })
+                        .optional(),
+                    propsPreview: zod_1.z.string().optional(),
+                })
+                    .nullable(),
+                componentStack: zod_1.z.array(zod_1.z.object({
+                    name: zod_1.z.string().nullable(),
+                    displayName: zod_1.z.string().nullable(),
+                    kind: zod_1.z.enum(['function', 'class', 'unknown']),
+                    debugSource: zod_1.z
+                        .object({
+                        fileName: zod_1.z.string().optional(),
+                        lineNumber: zod_1.z.number().int().optional(),
+                        columnNumber: zod_1.z.number().int().optional(),
+                    })
+                        .optional(),
+                })),
+                componentStackText: zod_1.z.string(),
+                wrappersDetected: zod_1.z.array(zod_1.z.string()),
+                wrapperFrames: zod_1.z.array(zod_1.z.object({
+                    wrapper: zod_1.z.string(),
+                    frameIndex: zod_1.z.number().int(),
+                    frameLabel: zod_1.z.string(),
+                })),
+                notes: zod_1.z.array(zod_1.z.string()),
+            }),
+        };
+    }
+    async handle(context, args) {
+        const selector = typeof args.selector === 'string' && args.selector.trim()
+            ? args.selector.trim()
+            : undefined;
+        const x = typeof args.x === 'number' && Number.isFinite(args.x)
+            ? Math.floor(args.x)
+            : undefined;
+        const y = typeof args.y === 'number' && Number.isFinite(args.y)
+            ? Math.floor(args.y)
+            : undefined;
+        if (!selector) {
+            if (typeof x !== 'number' || typeof y !== 'number') {
+                throw new Error('Provide either selector, or both x and y for elementFromPoint.');
+            }
+        }
+        const maxStackDepth = typeof args.maxStackDepth === 'number' && args.maxStackDepth > 0
+            ? Math.floor(args.maxStackDepth)
+            : DEFAULT_MAX_STACK_DEPTH;
+        const includePropsPreview = args.includePropsPreview === undefined
+            ? DEFAULT_INCLUDE_PROPS_PREVIEW
+            : args.includePropsPreview === true;
+        const maxPropsPreviewChars = typeof args.maxPropsPreviewChars === 'number' &&
+            Number.isFinite(args.maxPropsPreviewChars) &&
+            args.maxPropsPreviewChars > 0
+            ? Math.floor(args.maxPropsPreviewChars)
+            : DEFAULT_MAX_PROPS_PREVIEW_CHARS;
+        const result = await context.page.evaluate(({ selectorEval, xEval, yEval, maxStackDepthEval, includePropsPreviewEval, maxPropsPreviewCharsEval, maxElementPathDepthEval, maxFiberNodesToScanEval, }) => {
+            const notes = [];
+            function domHint(el) {
+                if (!el) {
+                    return null;
+                }
+                const tag = el.tagName.toLowerCase();
+                const idVal = el.id && el.id.trim()
+                    ? '#' + el.id.trim()
+                    : '';
+                const clsRaw = typeof el.className === 'string'
+                    ? el.className
+                    : '';
+                const cls = clsRaw
+                    ? '.' + clsRaw.trim().split(/\s+/).slice(0, 4).join('.')
+                    : '';
+                return tag + idVal + cls;
+            }
+            function buildElementPath(el, maxDepth) {
+                if (!el) {
+                    return null;
+                }
+                const parts = [];
+                let cur = el;
+                let depth = 0;
+                while (cur && depth < maxDepth) {
+                    const tag = cur.tagName
+                        ? cur.tagName.toLowerCase()
+                        : 'unknown';
+                    const idVal = cur.id &&
+                        cur.id.trim()
+                        ? '#' + cur.id.trim()
+                        : '';
+                    const clsRaw = typeof cur.className === 'string'
+                        ? cur.className
+                        : '';
+                    const clsList = clsRaw
+                        ? clsRaw
+                            .trim()
+                            .split(/\s+/)
+                            .filter(Boolean)
+                            .slice(0, 3)
+                        : [];
+                    const cls = clsList.length > 0 ? '.' + clsList.join('.') : '';
+                    let nth = '';
+                    try {
+                        const parent = cur.parentElement;
+                        if (parent) {
+                            const siblings = Array.from(parent.children).filter((c) => {
+                                return c.tagName === cur.tagName;
+                            });
+                            if (siblings.length > 1) {
+                                const idx = siblings.indexOf(cur) + 1;
+                                if (idx > 0) {
+                                    nth = `:nth-of-type(${idx})`;
+                                }
+                            }
+                        }
+                    }
+                    catch {
+                        // ignore
+                    }
+                    parts.push(`${tag}${idVal}${cls}${nth}`);
+                    cur = cur.parentElement;
+                    depth++;
+                }
+                parts.reverse();
+                return parts.join(' > ');
+            }
+            function findFiberKeyOn(el) {
+                if (!el) {
+                    return null;
+                }
+                const keys = Object.getOwnPropertyNames(el);
+                for (const k of keys) {
+                    if (k.startsWith('__reactFiber$')) {
+                        return k;
+                    }
+                    if (k.startsWith('__reactInternalInstance$')) {
+                        return k;
+                    }
+                }
+                return null;
+            }
+            function findFiberForElement(start) {
+                if (!start) {
+                    return null;
+                }
+                const directKey = findFiberKeyOn(start);
+                if (directKey) {
+                    const fiber = start[directKey];
+                    if (fiber) {
+                        return {
+                            fiber,
+                            fiberKey: directKey,
+                            onTarget: true,
+                            anchorEl: start,
+                        };
+                    }
+                }
+                let cur = start;
+                while (cur) {
+                    const k = findFiberKeyOn(cur);
+                    if (k) {
+                        const fiber = cur[k];
+                        if (fiber) {
+                            return {
+                                fiber,
+                                fiberKey: k,
+                                onTarget: false,
+                                anchorEl: cur,
+                            };
+                        }
+                    }
+                    cur = cur.parentElement;
+                }
+                return null;
+            }
+            /**
+             * If fiber was found on an ancestor element, scan that fiber subtree
+             * to locate the exact host fiber where fiber.stateNode === targetEl.
+             *
+             * This improves stack correctness and avoids unrelated frames.
+             */
+            function findHostFiberForDomElement(subtreeRootFiber, targetEl, maxNodesToScan) {
+                if (!subtreeRootFiber) {
+                    return { hostFiber: null, scanned: 0, found: false };
+                }
+                if (subtreeRootFiber.stateNode === targetEl) {
+                    return {
+                        hostFiber: subtreeRootFiber,
+                        scanned: 1,
+                        found: true,
+                    };
+                }
+                const queue = [];
+                const visited = new Set();
+                queue.push(subtreeRootFiber);
+                visited.add(subtreeRootFiber);
+                let scanned = 0;
+                while (queue.length > 0) {
+                    const f = queue.shift();
+                    scanned++;
+                    if (f && f.stateNode === targetEl) {
+                        return { hostFiber: f, scanned, found: true };
+                    }
+                    if (scanned >= maxNodesToScan) {
+                        return { hostFiber: null, scanned, found: false };
+                    }
+                    const child = f ? f.child : null;
+                    if (child && !visited.has(child)) {
+                        visited.add(child);
+                        queue.push(child);
+                    }
+                    const sibling = f ? f.sibling : null;
+                    if (sibling && !visited.has(sibling)) {
+                        visited.add(sibling);
+                        queue.push(sibling);
+                    }
+                }
+                return { hostFiber: null, scanned, found: false };
+            }
+            function isClassComponentType(t) {
+                if (!t) {
+                    return false;
+                }
+                const proto = t.prototype;
+                return Boolean(proto && proto.isReactComponent);
+            }
+            function typeDisplayName(t) {
+                if (!t) {
+                    return null;
+                }
+                if (typeof t === 'function') {
+                    const dn = t.displayName;
+                    if (typeof dn === 'string' && dn.trim()) {
+                        return dn.trim();
+                    }
+                    if (typeof t.name === 'string' && t.name.trim()) {
+                        return t.name.trim();
+                    }
+                    return 'Anonymous';
+                }
+                if (typeof t === 'object') {
+                    const dn = t.displayName;
+                    if (typeof dn === 'string' && dn.trim()) {
+                        return dn.trim();
+                    }
+                    const render = t.render;
+                    if (typeof render === 'function') {
+                        const rdn = render.displayName;
+                        if (typeof rdn === 'string' && rdn.trim()) {
+                            return rdn.trim();
+                        }
+                        if (typeof render.name === 'string' &&
+                            render.name.trim()) {
+                            return render.name.trim();
+                        }
+                        return 'Anonymous';
+                    }
+                }
+                return null;
+            }
+            function typeName(t) {
+                if (!t) {
+                    return null;
+                }
+                if (typeof t === 'function') {
+                    if (typeof t.name === 'string' && t.name.trim()) {
+                        return t.name.trim();
+                    }
+                    return null;
+                }
+                if (typeof t === 'object') {
+                    const render = t.render;
+                    if (typeof render === 'function') {
+                        if (typeof render.name === 'string' &&
+                            render.name.trim()) {
+                            return render.name.trim();
+                        }
+                    }
+                    return null;
+                }
+                return null;
+            }
+            function unwrapType(t) {
+                if (!t) {
+                    return t;
+                }
+                if (typeof t === 'object') {
+                    const render = t.render;
+                    if (typeof render === 'function') {
+                        return render;
+                    }
+                }
+                return t;
+            }
+            function isMeaningfulComponentFiber(f) {
+                if (!f) {
+                    return false;
+                }
+                const t = unwrapType(f.type ?? f.elementType);
+                if (typeof t === 'function') {
+                    return true;
+                }
+                return false;
+            }
+            function inferKind(f) {
+                if (!f) {
+                    return 'unknown';
+                }
+                const t = unwrapType(f.type ?? f.elementType);
+                if (typeof t === 'function') {
+                    if (isClassComponentType(t)) {
+                        return 'class';
+                    }
+                    return 'function';
+                }
+                return 'unknown';
+            }
+            function getDebugSource(f) {
+                const ds = f ? f._debugSource : undefined;
+                if (!ds || typeof ds !== 'object') {
+                    return undefined;
+                }
+                const out = {};
+                if (typeof ds.fileName === 'string') {
+                    out.fileName = ds.fileName;
+                }
+                if (typeof ds.lineNumber === 'number') {
+                    out.lineNumber = ds.lineNumber;
+                }
+                if (typeof ds.columnNumber === 'number') {
+                    out.columnNumber = ds.columnNumber;
+                }
+                return Object.keys(out).length > 0 ? out : undefined;
+            }
+            function safeStringify(v, maxChars) {
+                const seen = new WeakSet();
+                function helper(x, depth) {
+                    if (x === null) {
+                        return null;
+                    }
+                    const t = typeof x;
+                    if (t === 'string') {
+                        return x.length > 500 ? x.slice(0, 500) + '…' : x;
+                    }
+                    if (t === 'number' || t === 'boolean') {
+                        return x;
+                    }
+                    if (t === 'bigint') {
+                        return String(x);
+                    }
+                    if (t === 'undefined') {
+                        return undefined;
+                    }
+                    if (t === 'function') {
+                        return '[function]';
+                    }
+                    if (t === 'symbol') {
+                        return String(x);
+                    }
+                    if (t === 'object') {
+                        if (x instanceof Element) {
+                            return ('[Element ' +
+                                (x.tagName ? x.tagName.toLowerCase() : '') +
+                                ']');
+                        }
+                        if (x instanceof Window) {
+                            return '[Window]';
+                        }
+                        if (x instanceof Document) {
+                            return '[Document]';
+                        }
+                        if (x instanceof Date) {
+                            return x.toISOString();
+                        }
+                        if (seen.has(x)) {
+                            return '[circular]';
+                        }
+                        seen.add(x);
+                        if (Array.isArray(x)) {
+                            if (depth <= 0) {
+                                return '[array len=' + x.length + ']';
+                            }
+                            return x.slice(0, 20).map((it) => {
+                                return helper(it, depth - 1);
+                            });
+                        }
+                        if (depth <= 0) {
+                            return '[object]';
+                        }
+                        const out = {};
+                        const keys = Object.keys(x).slice(0, 40);
+                        for (const k of keys) {
+                            try {
+                                out[k] = helper(x[k], depth - 1);
+                            }
+                            catch {
+                                out[k] = '[unreadable]';
+                            }
+                        }
+                        return out;
+                    }
+                    return String(x);
+                }
+                let s = '';
+                try {
+                    s = JSON.stringify(helper(v, 2));
+                }
+                catch {
+                    try {
+                        s = String(v);
+                    }
+                    catch {
+                        s = '[unserializable]';
+                    }
+                }
+                if (s.length > maxChars) {
+                    return s.slice(0, maxChars) + '…(truncated)';
+                }
+                return s;
+            }
+            function stackTextFromFrames(frames) {
+                const names = frames
+                    .map((f) => {
+                    const dn = f?.displayName;
+                    const nm = f?.name;
+                    if (typeof dn === 'string' && dn.trim()) {
+                        return dn.trim();
+                    }
+                    if (typeof nm === 'string' && nm.trim()) {
+                        return nm.trim();
+                    }
+                    return 'Anonymous';
+                })
+                    .filter((x) => {
+                    return Boolean(x);
+                });
+                return names.reverse().join(' > ');
+            }
+            function frameFromFiber(f) {
+                const t = unwrapType(f.type ?? f.elementType);
+                const name = typeName(t);
+                const displayName = typeDisplayName(t);
+                const kind = inferKind(f);
+                const debugSource = getDebugSource(f);
+                const frame = { name, displayName, kind };
+                if (debugSource) {
+                    frame.debugSource = debugSource;
+                }
+                return frame;
+            }
+            function makeFrameKey(frame) {
+                const dn = frame.displayName
+                    ? frame.displayName
+                    : '';
+                const nm = frame.name ? frame.name : '';
+                const src = frame.debugSource;
+                const srcKey = src && typeof src === 'object'
+                    ? `${String(src.fileName ?? '')}:${String(src.lineNumber ?? '')}:${String(src.columnNumber ?? '')}`
+                    : '';
+                return `${dn}|${nm}|${frame.kind}|${srcKey}`;
+            }
+            function collapseConsecutiveDuplicates(frames) {
+                const out = [];
+                let lastKey = null;
+                for (const f of frames) {
+                    const k = makeFrameKey(f);
+                    if (lastKey && k === lastKey) {
+                        continue;
+                    }
+                    out.push(f);
+                    lastKey = k;
+                }
+                return out;
+            }
+            function detectWrappers(frames) {
+                const found = new Set();
+                function canonicalAdd(key) {
+                    const v = key.trim().toLowerCase();
+                    if (v) {
+                        found.add(v);
+                    }
+                }
+                for (const f of frames) {
+                    const label = typeof f.displayName === 'string' &&
+                        f.displayName.trim()
+                        ? f.displayName.trim()
+                        : typeof f.name === 'string' && f.name.trim()
+                            ? f.name.trim()
+                            : '';
+                    if (!label) {
+                        continue;
+                    }
+                    const l = label.toLowerCase();
+                    if (/^memo(\(|$)/i.test(label)) {
+                        canonicalAdd('memo');
+                    }
+                    if (l.includes('forwardref')) {
+                        canonicalAdd('forwardref');
+                    }
+                    if (l.includes('.provider')) {
+                        canonicalAdd('context-provider');
+                    }
+                    if (l.includes('.consumer')) {
+                        canonicalAdd('context-consumer');
+                    }
+                    if (l.includes('suspense')) {
+                        canonicalAdd('suspense');
+                    }
+                    if (l.includes('fragment')) {
+                        canonicalAdd('fragment');
+                    }
+                    if (l.includes('strictmode')) {
+                        canonicalAdd('strictmode');
+                    }
+                    if (l.includes('profiler')) {
+                        canonicalAdd('profiler');
+                    }
+                }
+                const out = Array.from(found);
+                out.sort((a, b) => {
+                    if (a < b) {
+                        return -1;
+                    }
+                    if (a > b) {
+                        return 1;
+                    }
+                    return 0;
+                });
+                return out;
+            }
+            function findWrapperFrames(frames, wrappersDetected) {
+                const out = [];
+                const wrappers = new Set(wrappersDetected.map((w) => w.toLowerCase()));
+                for (let i = 0; i < frames.length; i++) {
+                    const f = frames[i];
+                    const label = f.displayName && f.displayName.trim()
+                        ? f.displayName.trim()
+                        : f.name && f.name.trim()
+                            ? f.name.trim()
+                            : 'Anonymous';
+                    const l = label.toLowerCase();
+                    for (const w of wrappers) {
+                        let hit = false;
+                        if (w === 'memo') {
+                            hit = /^memo(\(|$)/i.test(label);
+                        }
+                        else if (w === 'forwardref') {
+                            hit = l.includes('forwardref');
+                        }
+                        else if (w === 'context-provider') {
+                            hit = l.includes('.provider');
+                        }
+                        else if (w === 'context-consumer') {
+                            hit = l.includes('.consumer');
+                        }
+                        else if (w === 'suspense') {
+                            hit = l.includes('suspense');
+                        }
+                        else if (w === 'fragment') {
+                            hit = l.includes('fragment');
+                        }
+                        else if (w === 'strictmode') {
+                            hit = l.includes('strictmode');
+                        }
+                        else if (w === 'profiler') {
+                            hit = l.includes('profiler');
+                        }
+                        if (hit) {
+                            out.push({
+                                wrapper: w,
+                                frameIndex: i,
+                                frameLabel: label,
+                            });
+                        }
+                    }
+                }
+                return out;
+            }
+            // Resolve target element
+            let targetEl = null;
+            if (selectorEval && selectorEval.trim()) {
+                try {
+                    targetEl = document.querySelector(selectorEval);
+                }
+                catch {
+                    targetEl = null;
+                }
+            }
+            else if (typeof xEval === 'number' &&
+                typeof yEval === 'number') {
+                targetEl = document.elementFromPoint(xEval, yEval);
+            }
+            const foundEl = Boolean(targetEl);
+            const targetHint = domHint(targetEl);
+            const elementPath = buildElementPath(targetEl, maxElementPathDepthEval);
+            if (!foundEl) {
+                const hostMapping = {
+                    fiberOnTargetElement: false,
+                    anchorDomHint: null,
+                    targetDomHint: null,
+                    hostFiberMatchedTarget: false,
+                    subtreeScanNodesScanned: 0,
+                    subtreeScanMaxNodes: maxFiberNodesToScanEval,
+                    strategy: 'ancestor-fallback',
+                };
+                return {
+                    target: {
+                        selector: selectorEval ?? null,
+                        point: {
+                            x: typeof xEval === 'number' ? xEval : null,
+                            y: typeof yEval === 'number' ? yEval : null,
+                        },
+                        found: false,
+                        domHint: null,
+                        elementPath: null,
+                    },
+                    react: {
+                        detected: false,
+                        detectionReason: 'Target element not found.',
+                        fiberKey: null,
+                        hostMapping,
+                        nearestComponent: null,
+                        componentStack: [],
+                        componentStackText: '',
+                        wrappersDetected: [],
+                        wrapperFrames: [],
+                        notes: [
+                            'No DOM element could be resolved; cannot inspect React.',
+                        ],
+                    },
+                };
+            }
+            // Find a fiber pointer (maybe on target, maybe on ancestor)
+            const fiberHit = findFiberForElement(targetEl);
+            if (!fiberHit) {
+                notes.push('No React fiber pointer found on the element or its ancestors.');
+                notes.push('This can happen if the page is not React, uses a different renderer, or runs with hardened/minified internals.');
+                const hostMapping = {
+                    fiberOnTargetElement: false,
+                    anchorDomHint: null,
+                    targetDomHint: targetHint,
+                    hostFiberMatchedTarget: false,
+                    subtreeScanNodesScanned: 0,
+                    subtreeScanMaxNodes: maxFiberNodesToScanEval,
+                    strategy: 'ancestor-fallback',
+                };
+                return {
+                    target: {
+                        selector: selectorEval ?? null,
+                        point: {
+                            x: typeof xEval === 'number' ? xEval : null,
+                            y: typeof yEval === 'number' ? yEval : null,
+                        },
+                        found: true,
+                        domHint: targetHint,
+                        elementPath,
+                    },
+                    react: {
+                        detected: false,
+                        detectionReason: 'React fiber not found on element/ancestors.',
+                        fiberKey: null,
+                        hostMapping,
+                        nearestComponent: null,
+                        componentStack: [],
+                        componentStackText: '',
+                        wrappersDetected: [],
+                        wrapperFrames: [],
+                        notes,
+                    },
+                };
+            }
+            // Determine the best "host fiber" to build the stack from.
+            let hostFiber = fiberHit.fiber;
+            let hostMatch = fiberHit.onTarget;
+            let subtreeScanned = 0;
+            const anchorHint = domHint(fiberHit.anchorEl);
+            let strategy = 'direct-on-target';
+            if (!fiberHit.onTarget) {
+                strategy = 'ancestor-fallback';
+                const scanRes = findHostFiberForDomElement(fiberHit.fiber, targetEl, maxFiberNodesToScanEval);
+                subtreeScanned = scanRes.scanned;
+                if (scanRes.found && scanRes.hostFiber) {
+                    hostFiber = scanRes.hostFiber;
+                    hostMatch = true;
+                    strategy = 'ancestor-subtree-scan';
+                    notes.push(`Mapped target DOM element to host fiber by scanning fiber subtree (scanned=${subtreeScanned}).`);
+                }
+                else {
+                    hostMatch = false;
+                    notes.push(`Could not find exact host fiber for the target element in the ancestor fiber subtree (scanned=${subtreeScanned}). Falling back to ancestor fiber stack; some frames may be unrelated.`);
+                }
+            }
+            const hostMapping = {
+                fiberOnTargetElement: fiberHit.onTarget,
+                anchorDomHint: anchorHint,
+                targetDomHint: targetHint,
+                hostFiberMatchedTarget: hostMatch,
+                subtreeScanNodesScanned: subtreeScanned,
+                subtreeScanMaxNodes: maxFiberNodesToScanEval,
+                strategy,
+            };
+            // Find nearest meaningful component above the host fiber.
+            let nearest = null;
+            let cur = hostFiber;
+            while (cur) {
+                if (isMeaningfulComponentFiber(cur)) {
+                    nearest = cur;
+                    break;
+                }
+                cur = cur.return ?? null;
+            }
+            if (!nearest) {
+                notes.push('Fiber was found, but no meaningful function/class component was detected in the return chain.');
+            }
+            // Build stack (from nearest up) using return chain
+            const stack = [];
+            const seenFibers = new Set();
+            let stackCur = nearest;
+            while (stackCur && stack.length < maxStackDepthEval) {
+                if (seenFibers.has(stackCur)) {
+                    notes.push('Detected a cycle in fiber.return chain; stopping stack traversal.');
+                    break;
+                }
+                seenFibers.add(stackCur);
+                if (isMeaningfulComponentFiber(stackCur)) {
+                    stack.push(frameFromFiber(stackCur));
+                }
+                stackCur = stackCur.return ?? null;
+            }
+            const collapsedStack = stack.length > 0
+                ? collapseConsecutiveDuplicates(stack)
+                : [];
+            const componentStackText = stackTextFromFrames(collapsedStack);
+            const wrappersDetected = detectWrappers(collapsedStack);
+            const wrapperFrames = findWrapperFrames(collapsedStack, wrappersDetected);
+            if (wrappersDetected.length >= 3) {
+                notes.push(`Wrapper-heavy stack detected (${wrappersDetected.join(', ')}). Interpreting nearestComponent may require skipping wrappers.`);
+            }
+            // Props preview (best-effort)
+            let nearestOut = null;
+            if (nearest) {
+                nearestOut = frameFromFiber(nearest);
+                if (includePropsPreviewEval) {
+                    try {
+                        const props = nearest.memoizedProps;
+                        if (props !== undefined) {
+                            nearestOut.propsPreview = safeStringify(props, maxPropsPreviewCharsEval);
+                        }
+                        else {
+                            notes.push('memoizedProps not available on nearest component fiber.');
+                        }
+                    }
+                    catch {
+                        notes.push('Failed to read memoizedProps for nearest component (best-effort).');
+                    }
+                }
+            }
+            notes.push('React Fiber inspection uses non-public internals; fields are best-effort.');
+            notes.push('Component names may come from displayName, wrappers, third-party libraries, or minified production builds.');
+            if (strategy === 'ancestor-fallback') {
+                notes.push('Host mapping fallback was used; consider selecting a deeper/more specific DOM element for a more accurate component stack.');
+            }
+            const detectionReason = strategy === 'direct-on-target'
+                ? 'React fiber found on the target element.'
+                : strategy === 'ancestor-subtree-scan'
+                    ? 'React fiber found on an ancestor; exact host fiber located via subtree scan.'
+                    : 'React fiber found on an ancestor; exact host fiber not found, stack may include unrelated frames.';
+            return {
+                target: {
+                    selector: selectorEval ?? null,
+                    point: {
+                        x: typeof xEval === 'number' ? xEval : null,
+                        y: typeof yEval === 'number' ? yEval : null,
+                    },
+                    found: true,
+                    domHint: targetHint,
+                    elementPath,
+                },
+                react: {
+                    detected: true,
+                    detectionReason,
+                    fiberKey: fiberHit.fiberKey,
+                    hostMapping,
+                    nearestComponent: nearestOut,
+                    componentStack: collapsedStack,
+                    componentStackText,
+                    wrappersDetected,
+                    wrapperFrames,
+                    notes,
+                },
+            };
+        }, {
+            selectorEval: selector ?? null,
+            xEval: typeof x === 'number' ? x : null,
+            yEval: typeof y === 'number' ? y : null,
+            maxStackDepthEval: maxStackDepth,
+            includePropsPreviewEval: includePropsPreview,
+            maxPropsPreviewCharsEval: maxPropsPreviewChars,
+            maxElementPathDepthEval: DEFAULT_MAX_ELEMENT_PATH_DEPTH,
+            maxFiberNodesToScanEval: DEFAULT_MAX_FIBER_SUBTREE_NODES_TO_SCAN,
+        });
+        return result;
+    }
+}
+exports.GetComponentForElement = GetComponentForElement;
+//# sourceMappingURL=get-component-for-element.js.map