@parhelia/core 0.1.12903 → 0.1.12905

package/dist/editor/page-viewer/MiniMap.js

@@ -1,68 +1,49 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useEditContext } from "../client/editContext";
 import { PlaceholderDropZones } from "../page-editor-chrome/PlaceholderDropZones";
-import { MinimapDropTargets } from "./MinimapDropTargets";
 import { FieldEditedIndicators } from "../page-editor-chrome/FieldEditedIndicators";
 import { CommentHighlightings } from "../page-editor-chrome/CommentHighlightings";
 import { SuggestionHighlightings } from "../page-editor-chrome/SuggestionHighlightings";
 import { VersionDiffHighlightings } from "../page-editor-chrome/VersionDiffHighlightings";
-import { IframeOverlayProvider } from "../page-editor-chrome/overlay/IframeOverlayProvider";
-import { getAllComponentInstances } from "../componentTreeHelper";
-export const BRIDGE_DOM_UPDATED_EVENT = "parhelia:bridge-dom-updated";
-export function MiniMap({ compareView, scroll, pageViewContext, }) {
+export function MiniMap({ compareView, deviceHeight, scroll, mainViewIframeRef, pageViewContext, }) {
     const editContext = useEditContext();
     const [scale, setScale] = useState(1);
     const minimapRef = useRef(null);
     const scaleContainerRef = useRef(null);
     const iframeRef = useRef(null);
     const [minimapReady, setMinimapReady] = useState(false);
-    const [bridgeDomRevision, setBridgeDomRevision] = useState(0);
+    const [refreshScale, setRefreshScale] = useState(0);
+    const observerRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const assetLoadHandlerRef = useRef(null);
     const minimapContainerRef = useRef(null);
-    const viewport = pageViewContext.viewport;
-    const bridgeDom = pageViewContext.bridgeDom;
-    const bridgeMetrics = bridgeDom
-        ? getBridgeMinimapMetrics(bridgeDom, viewport, undefined, pageViewContext.bridgeGeometry)
-        : null;
-    const isBridgeMinimap = !!bridgeDom && !!bridgeMetrics;
-    const bridgeMinimapHtml = useMemo(() => bridgeDom
-        ? createBridgeMinimapHtml(bridgeDom.html, pageViewContext.bridgeGeometry, bridgeDom.viewport.width || viewport.width)
-        : undefined, [
-        bridgeDom,
-        bridgeDomRevision,
-        pageViewContext.bridgeGeometry,
-        viewport.width,
-    ]);
-    const getDocumentMetrics = useCallback(() => {
-        return getBridgeMinimapMetrics(pageViewContext.bridgeDom, viewport, scroll, pageViewContext.bridgeGeometry);
-    }, [
-        bridgeDomRevision,
-        pageViewContext.bridgeDom,
-        pageViewContext.bridgeGeometry,
-        scroll,
-        viewport,
-    ]);
-    const minimapMetrics = getDocumentMetrics();
+    if (!mainViewIframeRef.current)
+        return null;
+    const getScrollContainer = useCallback(() => {
+        const doc = mainViewIframeRef.current?.contentWindow?.document;
+        return doc?.scrollingElement || doc?.body || null;
+    }, [mainViewIframeRef]);
     const calcAndUpdateScale = () => {
+        const viewport = pageViewContext.viewport;
         const minimapHeight = minimapContainerRef.current?.clientHeight;
-        const metrics = getDocumentMetrics();
-        if (!metrics)
+        const scrollContainer = getScrollContainer();
+        if (!viewport || !scrollContainer)
             return;
-        const scaleX = (editContext?.configuration.outline.width || 100) / metrics.viewportWidth;
-        const scaleY = (minimapHeight || metrics.viewportHeight) / metrics.documentHeight;
+        const width = viewport.width;
+        const scaleX = (editContext?.configuration.outline.width || 100) / width;
+        const scaleY = Math.max(deviceHeight || 0, minimapHeight || viewport.height) /
+            scrollContainer.scrollHeight;
         const newScale = Math.min(scaleX, scaleY, 1);
         updateScale(newScale);
         setScale(newScale);
+        syncDimensions();
         return newScale;
     };
     // Prevent scale/width feedback loop by tracking previous values
     const prevScaleRef = useRef(scale);
     const prevWidthRef = useRef(0);
-    const currentWidth = Math.max(30, scale *
-        (minimapMetrics?.viewportWidth ||
-            bridgeMetrics?.viewportWidth ||
-            pageViewContext.viewport.width ||
-            0));
+    const currentWidth = Math.max(30, scale * (pageViewContext.viewport.width || 0));
     // Only update if change is significant (>1px) to avoid minor oscillations
     let miniMapWidth;
     if (prevWidthRef.current < currentWidth ||
@@ -75,382 +56,366 @@ export function MiniMap({ compareView, scroll, pageViewContext, }) {
     else {
         miniMapWidth = prevWidthRef.current;
     }
-    useEffect(() => {
-        setMinimapReady(isBridgeMinimap);
-    }, [isBridgeMinimap]);
-    useEffect(() => {
-        const handleBridgeDomUpdated = () => {
-            setBridgeDomRevision((revision) => revision + 1);
+    function getNodePath(node) {
+        const path = [];
+        let current = node;
+        if (node?.tagName === "HTML")
+            return null;
+        while (current &&
+            current !== current.ownerDocument?.documentElement &&
+            current.parentNode) {
+            const index = Array.prototype.indexOf.call(current.parentNode.childNodes, current);
+            path.unshift(index);
+            current = current.parentNode;
+        }
+        return path;
+    }
+    function findCorrespondingNode(node) {
+        const path = getNodePath(node);
+        if (!path)
+            return null;
+        const minimapDoc = iframeRef.current?.contentDocument;
+        if (!minimapDoc)
+            return null;
+        let correspondingNode = minimapDoc.documentElement;
+        let originalNode = mainViewIframeRef.current?.contentWindow?.document.documentElement;
+        for (const index of path) {
+            if (!originalNode || !correspondingNode)
+                return null;
+            if (originalNode.childNodes.length !== correspondingNode.childNodes.length)
+                return null;
+            originalNode = originalNode.childNodes[index];
+            correspondingNode = correspondingNode.childNodes[index];
+        }
+        return correspondingNode || null;
+    }
+    function updateCorrespondingNode(node) {
+        const path = getNodePath(node);
+        if (!path)
+            return;
+        const minimapDoc = iframeRef.current?.contentDocument;
+        if (!minimapDoc)
+            return;
+        let correspondingNode = minimapDoc.documentElement;
+        let originalNode = mainViewIframeRef.current?.contentWindow?.document.documentElement;
+        for (const index of path) {
+            if (originalNode && correspondingNode) {
+                if (originalNode.childNodes.length !== correspondingNode.childNodes.length) {
+                    // When the mismatch is at the document root (HTML), only sync the
+                    // body element instead of replacing the entire innerHTML. Replacing
+                    // HTML.innerHTML causes a visible flash and can create a duplicate
+                    // HEAD element in the minimap iframe.
+                    if (originalNode.tagName === "HTML") {
+                        const srcBody = originalNode.ownerDocument?.body;
+                        const dstBody = correspondingNode.ownerDocument?.body;
+                        if (srcBody && dstBody) {
+                            dstBody.innerHTML = srcBody.innerHTML;
+                        }
+                        return;
+                    }
+                    correspondingNode.innerHTML = originalNode.innerHTML;
+                    return;
+                }
+            }
+            if (originalNode) {
+                originalNode = originalNode.childNodes[index];
+            }
+            if (correspondingNode) {
+                correspondingNode = correspondingNode.childNodes[index];
+            }
+        }
+        if (correspondingNode && originalNode) {
+            if (originalNode.tagName === "HEAD") {
+                correspondingNode.innerHTML = originalNode.innerHTML;
+            }
+            else if (correspondingNode.parentNode?.nodeType === Node.DOCUMENT_NODE) {
+                correspondingNode.innerHTML = originalNode.innerHTML;
+            }
+            else {
+                correspondingNode.outerHTML = originalNode.outerHTML;
+            }
+        }
+    }
+    const handleLoad = () => {
+        if (!mainViewIframeRef?.current?.contentWindow?.document)
+            return;
+        if (!iframeRef.current)
+            return;
+        observerRef.current?.disconnect();
+        resizeObserverRef.current?.disconnect();
+        const sourceDoc = mainViewIframeRef.current.contentWindow.document;
+        if (assetLoadHandlerRef.current) {
+            sourceDoc.removeEventListener("load", assetLoadHandlerRef.current, true);
+            assetLoadHandlerRef.current = null;
+        }
+        mirrorIframeContent(mainViewIframeRef.current, iframeRef.current);
+        const observer = new MutationObserver((mutationsList) => {
+            const minimapDoc = iframeRef.current?.contentDocument;
+            if (!minimapDoc)
+                return;
+            // Sync attribute mutations lightweight — copy only the changed attribute
+            const attributeMutations = mutationsList.filter((x) => x.type === "attributes" && x.attributeName && x.target.parentElement);
+            for (const mutation of attributeMutations) {
+                const target = mutation.target;
+                if (!target || target.tagName === "HTML")
+                    continue;
+                const correspondingNode = findCorrespondingNode(target);
+                if (!correspondingNode)
+                    continue;
+                const attrName = mutation.attributeName;
+                const value = target.getAttribute(attrName);
+                if (value !== null) {
+                    correspondingNode.setAttribute(attrName, value);
+                }
+                else {
+                    correspondingNode.removeAttribute(attrName);
+                }
+            }
+            // Structural mutations (childList / characterData) need full DOM sync
+            const structuralMutations = mutationsList.filter((x) => x.type === "childList" || x.type === "characterData");
+            if (structuralMutations.length === 0)
+                return;
+            const targetNodes = structuralMutations
+                .filter((x) => x.type === "childList" && x.target.parentElement)
+                .map((m) => m.target)
+                .concat(structuralMutations
+                .filter((x) => x.type === "characterData")
+                .map((m) => m.target.parentElement));
+            const distinctTargetNodes = Array.from(new Set(targetNodes));
+            const nodesToRemove = new Set();
+            for (let i = 0; i < distinctTargetNodes.length; i++) {
+                for (let j = 0; j < distinctTargetNodes.length; j++) {
+                    if (i !== j) {
+                        if (distinctTargetNodes[i]?.contains(distinctTargetNodes[j])) {
+                            nodesToRemove.add(distinctTargetNodes[j]);
+                        }
+                    }
+                }
+            }
+            const filteredNodes = distinctTargetNodes.filter((node) => !nodesToRemove.has(node));
+            filteredNodes.forEach((targetNode) => {
+                updateCorrespondingNode(targetNode);
+            });
+            // Re-bake dimensions in the same tick as the structural sync so the
+            // source/destination tree pairing stays consistent — MutationObserver
+            // callbacks are microtasks, no other JS can run between the two.
+            syncDimensions();
+            setRefreshScale((x) => x + 1);
+        });
+        observer.observe(mainViewIframeRef.current.contentWindow.document, {
+            childList: true, // observe direct children changes
+            subtree: true, // observe all descendants changes
+            characterData: true, // observe text changes
+            attributes: true, // observe attribute changes (like style or class)
+        });
+        // Catch async layout changes that don't trigger the MutationObserver:
+        // image/video metadata loading, web font swap-in, CSS animations
+        // settling, and iframe-size changes from device-mode toggles.
+        const ro = new ResizeObserver(() => {
+            syncDimensions();
+        });
+        ro.observe(sourceDoc.documentElement);
+        resizeObserverRef.current = ro;
+        const onAssetLoad = () => {
+            syncDimensions();
         };
-        window.addEventListener(BRIDGE_DOM_UPDATED_EVENT, handleBridgeDomUpdated);
+        // <img>/<video>/<iframe> 'load' events don't bubble — capture phase
+        // catches them at the document root.
+        sourceDoc.addEventListener("load", onAssetLoad, true);
+        assetLoadHandlerRef.current = onAssetLoad;
+        setMinimapReady(true);
+        observerRef.current = observer;
+    };
+    useEffect(() => {
+        if (mainViewIframeRef?.current) {
+            mainViewIframeRef?.current.addEventListener("load", handleLoad);
+        }
+        handleLoad();
+        // Cleanup function
         return () => {
-            window.removeEventListener(BRIDGE_DOM_UPDATED_EVENT, handleBridgeDomUpdated);
+            observerRef.current?.disconnect();
+            observerRef.current = null;
+            resizeObserverRef.current?.disconnect();
+            resizeObserverRef.current = null;
+            const sourceDoc = mainViewIframeRef?.current?.contentWindow?.document ?? null;
+            if (sourceDoc && assetLoadHandlerRef.current) {
+                sourceDoc.removeEventListener("load", assetLoadHandlerRef.current, true);
+            }
+            assetLoadHandlerRef.current = null;
+            mainViewIframeRef?.current?.removeEventListener("load", handleLoad);
         };
-    }, []);
+    }, [mainViewIframeRef.current, iframeRef.current]);
     useEffect(() => {
         calcAndUpdateScale();
     }, [
-        isBridgeMinimap,
+        refreshScale,
+        mainViewIframeRef,
+        //pageViewContext?.windowSize,
         pageViewContext?.zoom,
         pageViewContext.viewport,
         pageViewContext.deviceHeight,
         pageViewContext.deviceWidth,
-        pageViewContext.bridgeDom,
-        pageViewContext.bridgeGeometry,
-        bridgeDomRevision,
     ]);
-    const scrollDocumentTo = (y, behavior = "smooth") => {
-        const metrics = getDocumentMetrics();
-        if (!metrics)
+    if (!editContext) {
+        return null;
+    }
+    const scrollDocumentTo = (y) => {
+        if (!mainViewIframeRef?.current)
             return;
-        const maxScrollTop = Math.max(0, metrics.documentHeight - metrics.viewportHeight);
-        const targetY = Math.min(maxScrollTop, Math.max(0, y));
-        const currentY = pageViewContext.bridgeGeometry?.scroll.y ??
-            scroll ??
-            pageViewContext.bridgeDom?.scroll.y ??
-            metrics.scrollTop;
-        pageViewContext.requestBridgeScrollBy?.({
-            y: targetY - currentY,
-            behavior,
+        const scrollContainer = getScrollContainer();
+        if (!scrollContainer)
+            return;
+        scrollContainer.scrollTo({
+            top: y,
+            behavior: "smooth",
         });
     };
-    // Registered on pageViewContext so the drag orchestration can drive minimap
-    // scrolling while the cursor hovers the minimap mid-drag (the pointer is
-    // captured by the drag source, so the minimap's own pointer handlers never
-    // fire during a drag). Given a PARENT-viewport point: if it is over the
-    // minimap, scroll the canvas to that region (instant, so it tracks the cursor)
-    // and return true; otherwise return false.
-    // The last scroll position we COMMANDED via minimap hover. Deltas are computed
-    // against this, not the live (laggy) scroll readout, so repeated commands for a
-    // held cursor converge instead of oscillating. Reset to null on leave so the
-    // next entry re-syncs to the real scroll.
-    const lastMinimapScrollTargetRef = useRef(null);
-    const minimapHoverRafRef = useRef(0);
-    const pendingMinimapHoverRef = useRef(null);
-    const flushMinimapHoverScroll = () => {
-        minimapHoverRafRef.current = 0;
-        const point = pendingMinimapHoverRef.current;
-        if (!point)
-            return;
-        const containerRect = minimapContainerRef.current?.getBoundingClientRect();
-        if (!containerRect)
+    const scrollHeight = getScrollContainer()?.scrollHeight;
+    const scrollTop = scroll;
+    const viewport = pageViewContext.viewport;
+    function mirrorIframeContent(sourceIframe, targetIframe) {
+        const sourceDoc = sourceIframe.contentDocument;
+        const targetDoc = targetIframe.contentDocument;
+        // Check that both documents AND their documentElements exist
+        if (sourceDoc?.documentElement && targetDoc?.documentElement) {
+            const sourceHtml = sourceDoc.documentElement.innerHTML;
+            targetDoc.documentElement.innerHTML = sourceHtml;
+            targetDoc.documentElement.style.overflow = "hidden";
+            const targetHead = targetDoc.documentElement.querySelector("head");
+            // Inject CSS to constrain media elements in minimap. Width/height for
+            // <video> are now baked by syncDimensions() so we no longer need the
+            // viewport-unit (`max-height: 100vh`) hack that misresolved against the
+            // tall minimap iframe.
+            let style = targetHead?.querySelector("style[data-minimap-constraints]");
+            if (!style && targetHead) {
+                style = targetDoc.createElement("style");
+                style.setAttribute("data-minimap-constraints", "true");
+                style.textContent = `
+          video, img, picture, iframe {
+            max-width: 100% !important;
+            height: auto !important;
+          }
+        `;
+                targetHead.appendChild(style);
+            }
+        }
+        syncDimensions();
+        setRefreshScale((x) => x + 1);
+    }
+    // Bake the main iframe's resolved layout (width/height per element, plus
+    // top/left for absolute/fixed elements) into the minimap clone as inline
+    // !important px styles. This neutralizes vh/vw drift between the two
+    // iframes (their layout viewports differ — main = deviceHeight, minimap =
+    // scrollHeight) and any other unit/calc/percentage that would resolve
+    // differently inside the minimap document.
+    function syncDimensions() {
+        const sourceDoc = mainViewIframeRef.current?.contentDocument;
+        const targetDoc = iframeRef.current?.contentDocument;
+        if (!sourceDoc?.body || !targetDoc?.body)
             return;
-        const metrics = getDocumentMetrics();
-        if (!metrics)
+        const srcView = sourceDoc.defaultView;
+        if (!srcView)
             return;
-        const iframeRect = iframeRef.current?.getBoundingClientRect();
-        const reference = iframeRect && iframeRect.height > 0 ? iframeRect : containerRect;
-        const ratio = Math.min(1, Math.max(0, (point.y - reference.top) / reference.height));
-        const maxScrollTop = Math.max(0, metrics.documentHeight - metrics.viewportHeight);
-        const target = Math.min(maxScrollTop, Math.max(0, ratio * maxScrollTop));
-        const base = lastMinimapScrollTargetRef.current ??
-            pageViewContext.bridgeGeometry?.scroll.y ??
-            scroll ??
-            pageViewContext.bridgeDom?.scroll.y ??
-            metrics.scrollTop;
-        const delta = target - base;
-        lastMinimapScrollTargetRef.current = target;
-        if (Math.abs(delta) > 0.5) {
-            pageViewContext.requestBridgeScrollBy?.({ y: delta, behavior: "auto" });
-        }
-    };
-    const scrollViaMinimapPointRef = useRef(() => false);
-    scrollViaMinimapPointRef.current = (clientX, clientY) => {
-        const containerRect = minimapContainerRef.current?.getBoundingClientRect();
-        if (!containerRect ||
-            clientX < containerRect.left ||
-            clientX > containerRect.right ||
-            clientY < containerRect.top ||
-            clientY > containerRect.bottom) {
-            lastMinimapScrollTargetRef.current = null;
-            pendingMinimapHoverRef.current = null;
-            return false;
-        }
-        pendingMinimapHoverRef.current = { x: clientX, y: clientY };
-        if (!minimapHoverRafRef.current) {
-            minimapHoverRafRef.current = requestAnimationFrame(flushMinimapHoverScroll);
-        }
-        return true;
-    };
-    useEffect(() => {
-        const handler = (x, y) => scrollViaMinimapPointRef.current(x, y);
-        pageViewContext.scrollViaMinimapPoint = handler;
-        return () => {
-            if (pageViewContext.scrollViaMinimapPoint === handler) {
-                pageViewContext.scrollViaMinimapPoint = undefined;
+        walkDimensions(sourceDoc.body, targetDoc.body, srcView);
+    }
+    function walkDimensions(src, dst, srcView) {
+        // We can't use `instanceof HTMLElement` here because src/dst live in
+        // different window realms (main iframe / minimap iframe) than this
+        // component, so each realm has its own HTMLElement constructor and the
+        // check would always be false. Use duck typing instead.
+        const srcEl = src;
+        const dstEl = dst;
+        const dstStyle = dstEl.style;
+        if (dstStyle && typeof srcEl.getBoundingClientRect === "function") {
+            const rect = srcEl.getBoundingClientRect();
+            if (rect.width > 0 || rect.height > 0) {
+                dstStyle.setProperty("width", `${rect.width}px`, "important");
+                dstStyle.setProperty("height", `${rect.height}px`, "important");
             }
-            if (minimapHoverRafRef.current) {
-                cancelAnimationFrame(minimapHoverRafRef.current);
-                minimapHoverRafRef.current = 0;
+            const cs = srcView.getComputedStyle(srcEl);
+            if (cs.position === "absolute" || cs.position === "fixed") {
+                const offsetParent = srcEl.offsetParent;
+                const parentRect = offsetParent?.getBoundingClientRect();
+                if (parentRect) {
+                    dstStyle.setProperty("left", `${rect.left - parentRect.left}px`, "important");
+                    dstStyle.setProperty("top", `${rect.top - parentRect.top}px`, "important");
+                    dstStyle.removeProperty("right");
+                    dstStyle.removeProperty("bottom");
+                }
             }
-        };
-    }, [pageViewContext]);
+        }
+        // Walk children in lock-step. Bail at any divergent subtree — the
+        // MutationObserver path keeps structures aligned, so this is purely
+        // defensive.
+        const sChildren = src.children;
+        const dChildren = dst.children;
+        const len = Math.min(sChildren.length, dChildren.length);
+        for (let i = 0; i < len; i++) {
+            walkDimensions(sChildren[i], dChildren[i], srcView);
+        }
+    }
     const updateScale = (scale) => {
-        if (!scaleContainerRef.current)
+        const scrollContainer = getScrollContainer();
+        if (!iframeRef.current || !scaleContainerRef.current)
             return;
-        const metrics = getDocumentMetrics();
-        if (!metrics)
+        if (!scrollContainer)
             return;
         scaleContainerRef.current.style.transform = `scale(${scale})`;
         scaleContainerRef.current.style.transformOrigin = "0 0";
-        if (iframeRef.current) {
-            iframeRef.current.style.width = `${metrics?.viewportWidth ?? 0}px`;
-            iframeRef.current.style.height = `${metrics?.documentHeight ?? 0}px`;
-        }
+        iframeRef.current.style.width = `${scrollContainer?.clientWidth}px`;
+        iframeRef.current.style.height = `${scrollContainer?.scrollHeight}px`;
     };
     const handleClick = (e) => {
-        const metrics = getDocumentMetrics();
-        if (!metrics)
+        const scrollContainer = getScrollContainer();
+        if (!scrollContainer)
             return;
-        // Check if click was on an actual control. Passive minimap overlays also
-        // use pointer-events-auto so they can display hover affordances, but they
-        // should not prevent normal minimap navigation.
+        // Check if click was on an interactive element (button, link, or element with pointer-events-auto)
         const target = e.target;
-        const isInteractiveElement = target.closest('button, a, [role="button"], [data-testid="placeholder-dropzone-button"]');
+        const isInteractiveElement = target.closest('button, a, [role="button"], .placeholder-dropzone, [data-testid="placeholder-dropzone"], [data-testid="placeholder-dropzone-button"], .pointer-events-auto');
         if (isInteractiveElement) {
             // Don't scroll if user clicked on an interactive element (like dropzone buttons, comment icons, etc.)
             return;
         }
+        const iframeRect = iframeRef.current?.getBoundingClientRect();
+        if (!iframeRect)
+            return;
+        // Calculate click position relative to the minimap container
         const containerRect = minimapContainerRef.current?.getBoundingClientRect();
         if (!containerRect)
             return;
-        const iframeRect = iframeRef.current?.getBoundingClientRect();
-        const clickReferenceRect = iframeRect && iframeRect.height > 0 ? iframeRect : containerRect;
-        const absY = e.clientY - clickReferenceRect.top;
-        const clickRatio = Math.min(1, Math.max(0, absY / clickReferenceRect.height));
-        const maxScrollTop = Math.max(0, metrics.documentHeight - metrics.viewportHeight);
+        const absY = e.clientY - containerRect.top;
+        const scaledHeight = scrollContainer.scrollHeight * scale;
+        const relY = (absY / scaledHeight) * scrollContainer.scrollHeight;
         e.stopPropagation();
-        scrollDocumentTo(clickRatio * maxScrollTop);
+        scrollDocumentTo(relY - viewport.height / 2);
     };
     const handleScroll = useCallback((e) => {
-        pageViewContext.requestBridgeScrollBy?.({
-            x: 0,
-            y: e.deltaY,
+        const scrollContainer = getScrollContainer();
+        if (!scrollContainer)
+            return;
+        scrollContainer.scrollBy({
+            behavior: "instant",
+            left: 0,
+            top: e.deltaY,
+        });
+        mainViewIframeRef.current?.contentWindow?.document.documentElement?.scrollBy({
             behavior: "instant",
+            left: 0,
+            top: e.deltaY,
         });
         e.stopPropagation();
-    }, [pageViewContext]);
-    const viewportHighlight = minimapMetrics
-        ? getMinimapViewportHighlight(minimapMetrics, scale)
-        : null;
-    if (!editContext || !isBridgeMinimap) {
-        return null;
-    }
-    return (_jsxs("div", { "data-testid": "minimap-container", className: "relative cursor-pointer overflow-hidden bg-white", ref: minimapContainerRef, onClickCapture: handleClick, onWheelCapture: handleScroll, style: {
+    }, [getScrollContainer, mainViewIframeRef]);
+    return (_jsxs("div", { "data-testid": "minimap-container", className: "relative cursor-pointer overflow-hidden bg-white", ref: minimapContainerRef, onPointerDownCapture: handleClick, onWheelCapture: handleScroll, style: {
             height: "100%",
             width: miniMapWidth + "px",
-            boxShadow: "5px 0 5px -5px var(--color-neutral-grey-100)",
+            boxShadow: "5px 0 5px -5px #333",
         }, children: [_jsx("div", { className: "bg-opacity-50 absolute inset-0 overflow-hidden select-none", style: {
-                    boxShadow: "var(--color-neutral-grey-15) -10px 1px 13px -10px",
-                }, children: _jsx("div", { ref: minimapRef, onDragOverCapture: handleClick, className: "h-full w-full", children: _jsx("div", { ref: scaleContainerRef, children: _jsx("iframe", { className: "pointer-events-none", ref: iframeRef, sandbox: "", srcDoc: bridgeMinimapHtml, style: {
-                                border: 0,
-                                display: "block",
-                                height: `${minimapMetrics?.documentHeight ?? 0}px`,
-                                visibility: minimapReady ? "visible" : "hidden",
-                                width: `${minimapMetrics?.viewportWidth ?? 0}px`,
-                            } }) }) }) }), _jsx("div", { "aria-hidden": "true", className: "absolute inset-0" }), viewportHighlight && minimapReady && (_jsx("div", { "data-testid": "minimap-viewport-highlight", className: "bg-neutral-grey-10 pointer-events-none absolute w-full opacity-60 hover:opacity-65", style: {
-                    top: viewportHighlight.top + "px",
-                    height: viewportHighlight.height + "px",
-                } })), iframeRef.current && (_jsxs(IframeOverlayProvider, { iframe: iframeRef.current, mode: "static", scrollScale: 1, visualScale: scale, children: [editContext.mode === "edit" && (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZones, { size: "small", pageViewContext: pageViewContext, scopeInsertModeToHoveredComponent: false, avoidOverlaps: false }), _jsx(MinimapDropTargets, { pageViewContext: pageViewContext })] })), _jsx(FieldEditedIndicators, { pageViewContext: pageViewContext }), editContext.showComments && (_jsx(CommentHighlightings, { pageViewContext: pageViewContext, variant: "minimap" })), editContext.showSuggestedEdits && (_jsx(SuggestionHighlightings, { pageViewContext: pageViewContext, variant: "minimap" })), editContext.showVersionDiffHighlighting && !compareView && (_jsx(VersionDiffHighlightings, { pageViewContext: pageViewContext, variant: "minimap" }))] })), _jsx(MiniMapSelectionHighlights, { pageViewContext: pageViewContext, scale: scale })] }));
-}
-export function getBridgeMinimapMetrics(snapshot, fallbackViewport, scrollOverride, geometry) {
-    if (!snapshot)
-        return null;
-    const scrollScale = getBridgeMinimapScrollScale(geometry);
-    const viewportWidth = snapshot.viewport.width || fallbackViewport.width || 0;
-    const viewportHeight = snapshot.viewport.height || fallbackViewport.height || 0;
-    const scrollTop = Math.max(0, scrollOverride ?? snapshot.scroll?.y ?? 0);
-    const documentHeight = Math.max(viewportHeight, scrollTop + viewportHeight, snapshot.scrollHeight || 0, getBridgeGeometryDocumentHeight(geometry) / scrollScale);
-    if (!viewportWidth || !documentHeight)
-        return null;
-    return {
-        viewportWidth,
-        viewportHeight,
-        documentHeight,
-        scrollTop,
-        scrollScale,
-    };
-}
-export function getMinimapViewportHighlight(metrics, scale) {
-    const scaledDocumentHeight = metrics.documentHeight * scale;
-    const viewportHeight = Math.min(metrics.viewportHeight, metrics.documentHeight);
-    const maxScrollTop = Math.max(0, metrics.documentHeight - viewportHeight);
-    const top = Math.min(maxScrollTop, Math.max(0, metrics.scrollTop)) * scale;
-    const height = Math.min(viewportHeight * scale, Math.max(0, scaledDocumentHeight - top));
-    return { top, height };
-}
-const MINIMAP_SELECTION_BORDER_WIDTH = 2;
-export function getMiniMapSelectionHighlightRect(rect) {
-    const outset = MINIMAP_SELECTION_BORDER_WIDTH;
-    return {
-        x: rect.x - outset,
-        y: rect.y - outset,
-        width: Math.max(outset * 2, rect.width + outset * 2),
-        height: Math.max(outset * 2, rect.height + outset * 2),
-    };
-}
-export function getMiniMapSelectionRects(selection, page, geometry, scale) {
-    if (!selection?.length || !page || !geometry)
-        return [];
-    return getSelectedMiniMapComponents(selection, page)
-        .map((component) => getMiniMapComponentRect(component, geometry, scale))
-        .filter((rect) => !!rect);
-}
-function MiniMapSelectionHighlights({ pageViewContext, scale, }) {
-    const editContext = useEditContext();
-    const selectionRects = useMemo(() => getMiniMapSelectionRects(editContext?.selection, pageViewContext.page, pageViewContext.bridgeGeometry, scale), [
-        editContext?.selection,
-        pageViewContext.page,
-        pageViewContext.bridgeGeometry,
-        scale,
-    ]);
-    if (selectionRects.length === 0)
-        return null;
-    return (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-20", "data-testid": "minimap-selection-highlights", children: selectionRects.map((rect, index) => {
-            const highlightRect = getMiniMapSelectionHighlightRect(rect);
-            return (_jsx("div", { className: "absolute", "data-testid": "minimap-selection-highlight", style: {
-                    border: `${MINIMAP_SELECTION_BORDER_WIDTH}px solid var(--color-component-default)`,
-                    boxSizing: "border-box",
-                    height: highlightRect.height,
-                    left: highlightRect.x,
-                    top: highlightRect.y,
-                    width: highlightRect.width,
-                } }, index));
-        }) }));
-}
-function getSelectedMiniMapComponents(selection, page) {
-    const uniqueById = new Map();
-    for (const id of selection) {
-        for (const component of getAllComponentInstances(id, page)) {
-            if (!uniqueById.has(component.id)) {
-                uniqueById.set(component.id, component);
-            }
-        }
-    }
-    return Array.from(uniqueById.values());
-}
-function getMiniMapComponentRect(component, geometry, scale) {
-    const componentId = normalizeBridgeKey(component.id);
-    const target = geometry.targets.find((candidate) => {
-        if (candidate.kind !== "component")
-            return false;
-        return (normalizeBridgeKey(candidate.componentId) === componentId ||
-            normalizeBridgeKey(candidate.key) === componentId);
-    });
-    if (!target?.rect || (target.rect.width <= 0 && target.rect.height <= 0)) {
-        return null;
-    }
-    const rectScale = getBridgeMinimapRectScale(geometry);
-    const scrollScale = getBridgeMinimapScrollScale(geometry);
-    const minimapScale = scale / scrollScale;
-    return {
-        x: (target.rect.left * rectScale + geometry.scroll.x * scrollScale) *
-            minimapScale,
-        y: (target.rect.top * rectScale + geometry.scroll.y * scrollScale) *
-            minimapScale,
-        width: target.rect.width * rectScale * minimapScale,
-        height: target.rect.height * rectScale * minimapScale,
-    };
-}
-function createBridgeMinimapHtml(html, geometry, viewportWidth) {
-    if (typeof DOMParser === "undefined")
-        return html;
-    try {
-        const doc = new DOMParser().parseFromString(html, "text/html");
-        neutralizeBridgeMinimapZoom(doc);
-        constrainBridgeMinimapWidth(doc, viewportWidth);
-        if (geometry) {
-            bakeBridgeGeometryDimensions(doc, geometry);
-        }
-        return `<!DOCTYPE html>${doc.documentElement.outerHTML}`;
-    }
-    catch {
-        return html;
-    }
-}
-function getBridgeMinimapScrollScale(geometry) {
-    return typeof geometry?.scrollScale === "number" &&
-        Number.isFinite(geometry.scrollScale) &&
-        geometry.scrollScale > 0
-        ? geometry.scrollScale
-        : 1;
-}
-function getBridgeMinimapRectScale(geometry) {
-    return typeof geometry?.rectScale === "number" &&
-        Number.isFinite(geometry.rectScale) &&
-        geometry.rectScale > 0
-        ? geometry.rectScale
-        : 1;
-}
-function getBridgeGeometryDocumentHeight(geometry) {
-    if (!geometry)
-        return 0;
-    const rectScale = getBridgeMinimapRectScale(geometry);
-    const scrollScale = getBridgeMinimapScrollScale(geometry);
-    return Math.max(geometry.viewport.height || 0, ...geometry.targets.map((target) => target.rect.bottom * rectScale + geometry.scroll.y * scrollScale));
-}
-function neutralizeBridgeMinimapZoom(doc) {
-    const root = doc.documentElement;
-    if (!root)
-        return;
-    root.style.removeProperty("zoom");
-    root.style.removeProperty("transform");
-    root.style.removeProperty("transform-origin");
-    root.style.removeProperty("will-change");
-}
-function constrainBridgeMinimapWidth(doc, viewportWidth) {
-    if (!viewportWidth || viewportWidth <= 0)
-        return;
-    [doc.documentElement, doc.body].forEach((element) => {
-        if (!element)
-            return;
-        element.style.setProperty("box-sizing", "border-box", "important");
-        element.style.setProperty("width", `${viewportWidth}px`, "important");
-        element.style.setProperty("max-width", `${viewportWidth}px`, "important");
-        element.style.setProperty("overflow-x", "hidden", "important");
-    });
-}
-function bakeBridgeGeometryDimensions(doc, geometry) {
-    const rectScale = getBridgeMinimapRectScale(geometry);
-    const keyedElements = Array.from(doc.querySelectorAll("[data-parhelia-element-key]"));
-    const componentElements = Array.from(doc.querySelectorAll("[data-component-id], [data-component-start], [data-renderingid], [data-rendering-id]"));
-    const fieldElements = Array.from(doc.querySelectorAll("[data-fieldid]"));
-    geometry.targets.forEach((target) => {
-        if (!target.rect || (target.rect.width <= 0 && target.rect.height <= 0)) {
-            return;
-        }
-        let element;
-        if (target.elementKey) {
-            const elementKey = normalizeBridgeKey(target.elementKey);
-            element = keyedElements.find((candidate) => normalizeBridgeKey(candidate.getAttribute("data-parhelia-element-key")) === elementKey);
-        }
-        if (!element && target.kind === "component") {
-            const componentKey = normalizeBridgeKey(target.componentId || target.key);
-            element = componentElements.find((candidate) => normalizeBridgeKey(candidate.getAttribute("data-component-id") ||
-                candidate.getAttribute("data-component-start") ||
-                candidate.getAttribute("data-renderingid") ||
-                candidate.getAttribute("data-rendering-id")) === componentKey);
-        }
-        else if (target.kind === "field") {
-            const fieldKey = normalizeBridgeKey(target.fieldId || target.key);
-            element = fieldElements.find((candidate) => normalizeBridgeKey(candidate.getAttribute("data-fieldid")) ===
-                fieldKey);
-        }
-        if (!element)
-            return;
-        if (target.kind === "field" || target.kind === "textRange")
-            return;
-        if (target.rect.width > 0) {
-            element.style.setProperty("width", `${target.rect.width * rectScale}px`, "important");
-            element.style.setProperty("min-width", `${target.rect.width * rectScale}px`, "important");
-        }
-        if (target.rect.height > 0) {
-            element.style.setProperty("height", `${target.rect.height * rectScale}px`, "important");
-            element.style.setProperty("min-height", `${target.rect.height * rectScale}px`, "important");
-        }
-    });
-}
-function normalizeBridgeKey(value) {
-    return (value || "").replace(/[{}-]/g, "").toLowerCase();
+                    boxShadow: "rgb(200, 200, 200) -10px 1px 13px -10px",
+                }, children: _jsx("div", { ref: minimapRef, onDragOverCapture: handleClick, className: "h-full w-full", children: _jsx("div", { ref: scaleContainerRef, children: _jsx("iframe", { className: "pointer-events-none", ref: iframeRef, style: { visibility: minimapReady ? "visible" : "hidden" } }) }) }) }), scrollTop !== undefined &&
+                scrollHeight !== undefined &&
+                minimapReady && (_jsx("div", { className: "pointer-events-none absolute w-full bg-gray-300 opacity-60 hover:opacity-65", style: {
+                    top: scrollTop * scale + "px",
+                    height: viewport.height * scale + "px",
+                } })), editContext.mode === "edit" && (_jsx(PlaceholderDropZones, { scale: scale, iframe: iframeRef.current, size: "small", scroll: 0, pageViewContext: pageViewContext })), _jsx(FieldEditedIndicators, { scale: scale, pageViewContext: pageViewContext, scroll: scroll }), editContext.showComments && (_jsx(CommentHighlightings, { iframe: iframeRef.current, scale: scale })), editContext.showSuggestedEdits && (_jsx(SuggestionHighlightings, { iframe: iframeRef.current, scale: scale })), editContext.showVersionDiffHighlighting && !compareView && (_jsx(VersionDiffHighlightings, { iframe: iframeRef.current, scale: scale, pageViewContext: pageViewContext, variant: "minimap" }))] }));
 }
 //# sourceMappingURL=MiniMap.js.map