```
/**
 * Finds the most ancestral DOM elements enclosed within a specified rectangle in page coordinates
 * with an allowed ratio error. Uses BFS for traversal with performance optimizations.
 *
 * @param {number} x - The X-coordinate of the target rectangle (relative to the viewport).
 * @param {number} y - The Y-coordinate of the target rectangle (relative to the viewport).
 * @param {number} width - The width of the target rectangle.
 * @param {number} height - The height of the target rectangle.
 * @param {number} errorRatio - The allowed error ratio (0 to 1) for matching.
 * @param {Object} [options] - Optional settings.
 * @param {boolean} [options.exhaustive=true] - If true, performs an exhaustive search.
 * @param {number} [options.asyncIterations] - Number of iterations per asynchronous batch.
 *                                             If null, undefined, or <= 0, executes synchronously.
 * @param {Function} [options.onProgress] - Callback function to receive progress updates.
 * @returns {Promise<Element[]>|Element[]} A promise that resolves to an array of the most ancestral DOM elements matching the criteria, or the array directly if not asynchronous.
 */
function findMostAncestralElements(
    x,
    y,
    width,
    height,
    errorRatio,
    options = {}
) {
    const {
        exhaustive = true,
        asyncIterations, // Renamed from 'async' to 'asyncIterations'
        onProgress,
    } = options;

    // Determine if the function should execute asynchronously
    const isAsync = typeof asyncIterations === 'number' && asyncIterations > 0;
    const iterationBatch = isAsync ? asyncIterations : null;

    // Clamp errorRatio between 0 and 1
    const z = Math.max(0, Math.min(errorRatio, 1));

    const target = { x, y, width, height };
    const results = new Set();
    const queue = [document.body];
    let head = 0;

    /**
     * Processes a batch of elements from the queue asynchronously.
     *
     * @returns {Promise<void>} Resolves when the batch is processed.
     */
    function processBatchAsync() {
        return new Promise((resolve) => {
            let processed = 0;

            while (head < queue.length && processed < iterationBatch) {
                const elem = queue[head++];
                const rect = elem.getBoundingClientRect();

                // Inline 'matches' logic
                const matches =
                    Math.abs(rect.left - target.x) <= target.width * z &&
                    Math.abs(rect.top - target.y) <= target.height * z &&
                    Math.abs(rect.width - target.width) <= target.width * z &&
                    Math.abs(rect.height - target.height) <= target.height * z;

                if (matches) {
                    results.add(elem);
                    // Skip enqueuing children to maintain ancestry
                } else {
                    // Inline 'overlaps' logic
                    const overlaps =
                        rect.left < target.x + target.width &&
                        rect.left + rect.width > target.x &&
                        rect.top < target.y + target.height &&
                        rect.top + rect.height > target.y;

                    if (exhaustive || overlaps) {
                        const children = elem.children;
                        for (let i = 0, len = children.length; i < len; i++) {
                            queue.push(children[i]);
                        }
                    }
                }

                processed++;
            }

            if (onProgress) {
                onProgress({
                    processedElements: head,
                    totalQueued: queue.length,
                    uniqueResults: results.size,
                });
            }

            resolve();
        });
    }

    if (isAsync) {
        return new Promise((resolve) => {
            function iterate() {
                processBatchAsync().then(() => {
                    if (head < queue.length) {
                        setTimeout(iterate, 0);
                    } else {
                        resolve(Array.from(results));
                    }
                });
            }
            iterate();
        });
    } else {
        // Synchronous Processing
        while (head < queue.length) {
            const elem = queue[head++];
            const rect = elem.getBoundingClientRect();

            // Inline 'matches' logic
            if (
                Math.abs(rect.left - target.x) <= target.width * z &&
                Math.abs(rect.top - target.y) <= target.height * z &&
                Math.abs(rect.width - target.width) <= target.width * z &&
                Math.abs(rect.height - target.height) <= target.height * z
            ) {
                results.add(elem);
                continue; // Skip enqueuing children to maintain ancestry
            }

            // Inline 'overlaps' logic
            if (
                exhaustive ||
                (
                    rect.left < target.x + target.width &&
                    rect.left + rect.width > target.x &&
                    rect.top < target.y + target.height &&
                    rect.top + rect.height > target.y
                )
            ) {
                const children = elem.children;
                for (let i = 0, len = children.length; i < len; i++) {
                    queue.push(children[i]);
                }
            }
        }
        return Array.from(results);
    }
}
```
refactor the inlined logic into functions. for object dot notations like `x.y`, use local variable with destructuring assignment when it gets used for more than once