@docmentis/udoc-viewer 0.1.0

package/dist/ui/viewer/components/Viewport.js

@@ -0,0 +1,793 @@
+import { subscribeSelector } from "../../framework/selectors";
+import { getPointsToPixels } from "../state";
+import { showAnnotationPopup, closeAnnotationPopup } from "../annotation";
+import { calculateSpreads, calculateSpreadLayouts, findSpreadForPage, findVisibleSpreadRange, getSpreadPrimaryPage, getSpreadDimensions } from "../layout/spreadLayout";
+import { createSpread } from "./Spread";
+import { createFloatingToolbar } from "./FloatingToolbar";
+import { on } from "../../framework/events";
+import { getDevicePixelRatio, snapToDevice, toCssPixels, toDevicePixels } from "../layout";
+function viewportSliceEqual(a, b) {
+    return (a.docId === b.docId &&
+        a.page === b.page &&
+        a.pageCount === b.pageCount &&
+        a.pageInfos === b.pageInfos &&
+        a.scrollMode === b.scrollMode &&
+        a.layoutMode === b.layoutMode &&
+        a.zoomMode === b.zoomMode &&
+        a.zoom === b.zoom &&
+        a.dpi === b.dpi &&
+        a.pageRotation === b.pageRotation &&
+        a.spacingMode === b.spacingMode &&
+        a.pageSpacing === b.pageSpacing &&
+        a.spreadSpacing === b.spreadSpacing &&
+        a.pageAnnotations === b.pageAnnotations &&
+        a.highlightedAnnotation === b.highlightedAnnotation);
+}
+let cachedScrollbarSize = null;
+/** Number of spreads to render above/below viewport for smooth scrolling */
+const RENDER_BUFFER = 2;
+function parsePixel(value) {
+    const parsed = parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+function readInsets(style) {
+    return {
+        top: parsePixel(style.paddingTop),
+        right: parsePixel(style.paddingRight),
+        bottom: parsePixel(style.paddingBottom),
+        left: parsePixel(style.paddingLeft)
+    };
+}
+function addInsets(a, b) {
+    return {
+        top: a.top + b.top,
+        right: a.right + b.right,
+        bottom: a.bottom + b.bottom,
+        left: a.left + b.left
+    };
+}
+function readViewportMetrics(scrollArea, container) {
+    const scrollStyle = getComputedStyle(scrollArea);
+    const containerStyle = getComputedStyle(container);
+    const padding = addInsets(readInsets(scrollStyle), readInsets(containerStyle));
+    const width = scrollArea.clientWidth;
+    const height = scrollArea.clientHeight;
+    const innerWidth = Math.max(0, width - padding.left - padding.right);
+    const innerHeight = Math.max(0, height - padding.top - padding.bottom);
+    return {
+        width,
+        height,
+        innerWidth,
+        innerHeight,
+        padding
+    };
+}
+function metricsEqual(a, b) {
+    // Use epsilon tolerance to prevent oscillation from 1px fluctuations
+    const epsilon = 1;
+    return (Math.abs(a.width - b.width) <= epsilon &&
+        Math.abs(a.height - b.height) <= epsilon &&
+        Math.abs(a.innerWidth - b.innerWidth) <= epsilon &&
+        Math.abs(a.innerHeight - b.innerHeight) <= epsilon &&
+        a.padding.top === b.padding.top &&
+        a.padding.right === b.padding.right &&
+        a.padding.bottom === b.padding.bottom &&
+        a.padding.left === b.padding.left);
+}
+function resolveOverflowState(prev, delta, threshold) {
+    if (prev === null)
+        return delta > threshold;
+    if (prev)
+        return delta >= -threshold;
+    return delta > threshold;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function getCenteredOffset(containerSize, contentSize) {
+    const dpr = getDevicePixelRatio();
+    const containerDevice = toDevicePixels(containerSize, dpr);
+    const contentDevice = toDevicePixels(contentSize, dpr);
+    const offsetDevice = Math.max(0, Math.floor((containerDevice - contentDevice) / 2));
+    return toCssPixels(offsetDevice, dpr);
+}
+function getScrollbarSize() {
+    if (cachedScrollbarSize)
+        return cachedScrollbarSize;
+    if (!document.body) {
+        cachedScrollbarSize = { width: 0, height: 0 };
+        return cachedScrollbarSize;
+    }
+    const probe = document.createElement("div");
+    probe.style.width = "100px";
+    probe.style.height = "100px";
+    probe.style.overflow = "scroll";
+    probe.style.position = "absolute";
+    probe.style.top = "-9999px";
+    document.body.appendChild(probe);
+    const width = probe.offsetWidth - probe.clientWidth;
+    const height = probe.offsetHeight - probe.clientHeight;
+    probe.remove();
+    cachedScrollbarSize = { width, height };
+    return cachedScrollbarSize;
+}
+function computeScale(slice, metrics, spreads) {
+    if (slice.zoomMode === "custom")
+        return slice.zoom;
+    if (metrics.innerWidth <= 0 || metrics.innerHeight <= 0)
+        return slice.zoom;
+    if (spreads.length === 0)
+        return slice.zoom;
+    let maxWidth = 0;
+    let maxHeight = 0;
+    for (const spread of spreads) {
+        const dims = getSpreadDimensions(spread, slice.pageInfos, 1, slice.pageSpacing, slice.dpi, slice.pageRotation);
+        maxWidth = Math.max(maxWidth, dims.width);
+        maxHeight = Math.max(maxHeight, dims.height);
+    }
+    if (maxWidth <= 0 || maxHeight <= 0)
+        return slice.zoom;
+    // Use snapped values to match layout calculations exactly.
+    // Round to the nearest device pixel to avoid scrollbar feedback loops.
+    const snappedSpacing = snapToDevice(slice.spreadSpacing);
+    const snappedViewportHeight = snapToDevice(metrics.innerHeight);
+    const snappedViewportWidth = snapToDevice(metrics.innerWidth);
+    const verticalSpacing = snappedSpacing * 2;
+    // Add 1 pixel buffer to compensate for device pixel rounding in layout calculations.
+    // Without this, the spread may be slightly smaller than the viewport, allowing
+    // a thin line of the next page to show at the bottom in continuous scroll mode.
+    // The same buffer is used in spread mode for consistency when switching modes.
+    // Scrollbar overflow in spread mode is handled by applySingleLayout using viewport height.
+    const targetHeight = Math.max(0, snappedViewportHeight - verticalSpacing + 1);
+    const widthScale = snappedViewportWidth / maxWidth;
+    const heightScale = targetHeight / maxHeight;
+    switch (slice.zoomMode) {
+        case "fit-spread-width":
+            return widthScale;
+        case "fit-spread-height":
+            return heightScale;
+        case "fit-spread":
+            return Math.min(widthScale, heightScale);
+        default:
+            return slice.zoom;
+    }
+}
+function buildLayout(slice, metrics) {
+    const spreads = calculateSpreads(slice.pageCount, slice.layoutMode);
+    const scale = computeScale(slice, metrics, spreads);
+    const layout = calculateSpreadLayouts(spreads, slice.pageInfos, scale, slice.pageSpacing, slice.spreadSpacing, slice.dpi, slice.pageRotation);
+    return {
+        spreads,
+        layouts: layout.layouts,
+        contentWidth: layout.contentWidth,
+        contentHeight: layout.contentHeight,
+        scale
+    };
+}
+function computeViewportUpdate(prevSlice, nextSlice, prevMetrics, nextMetrics, lastScrollMode) {
+    const metricsChanged = !prevMetrics || !metricsEqual(prevMetrics, nextMetrics);
+    const layoutChanged = !prevSlice ||
+        nextSlice.docId !== prevSlice.docId ||
+        nextSlice.pageCount !== prevSlice.pageCount ||
+        nextSlice.pageInfos !== prevSlice.pageInfos ||
+        nextSlice.layoutMode !== prevSlice.layoutMode ||
+        nextSlice.zoomMode !== prevSlice.zoomMode ||
+        nextSlice.zoom !== prevSlice.zoom ||
+        nextSlice.dpi !== prevSlice.dpi ||
+        nextSlice.pageRotation !== prevSlice.pageRotation ||
+        nextSlice.pageSpacing !== prevSlice.pageSpacing ||
+        nextSlice.spreadSpacing !== prevSlice.spreadSpacing ||
+        metricsChanged;
+    const modeChanged = !prevSlice || nextSlice.scrollMode !== prevSlice.scrollMode;
+    const zoomModeChanged = !prevSlice || nextSlice.zoomMode !== prevSlice.zoomMode;
+    const fitZoomChanged = nextSlice.zoomMode !== "custom" && (!prevSlice || nextSlice.zoom !== prevSlice.zoom);
+    const spreadsChanged = !prevSlice ||
+        nextSlice.docId !== prevSlice.docId ||
+        nextSlice.pageCount !== prevSlice.pageCount ||
+        nextSlice.pageInfos !== prevSlice.pageInfos ||
+        nextSlice.layoutMode !== prevSlice.layoutMode;
+    const shouldClearSpreads = layoutChanged && spreadsChanged;
+    const shouldCaptureAnchor = layoutChanged &&
+        !spreadsChanged &&
+        nextSlice.scrollMode === "continuous" &&
+        !fitZoomChanged &&
+        !zoomModeChanged;
+    const shouldCenterOnModeChange = modeChanged && lastScrollMode !== null && lastScrollMode !== "continuous";
+    const shouldScrollToPage = spreadsChanged || zoomModeChanged || fitZoomChanged;
+    const shouldResetSingleScroll = (modeChanged && lastScrollMode === "continuous") ||
+        spreadsChanged ||
+        (layoutChanged && nextSlice.zoomMode !== "custom");
+    return {
+        layoutChanged,
+        shouldClearSpreads,
+        shouldCaptureAnchor,
+        shouldCenterOnModeChange,
+        shouldScrollToPage,
+        shouldResetSingleScroll
+    };
+}
+export function createViewport() {
+    const el = document.createElement("div");
+    el.className = "udoc-viewport";
+    const scrollArea = document.createElement("div");
+    scrollArea.className = "udoc-viewport__scroll";
+    el.appendChild(scrollArea);
+    const container = document.createElement("div");
+    container.className = "udoc-viewport__container";
+    scrollArea.appendChild(container);
+    const floatingToolbar = createFloatingToolbar();
+    let renderManager = null;
+    let storeRef = null;
+    let unsubRender = null;
+    let unsubScroll = null;
+    let unsubNavigation = null;
+    let resizeObserver = null;
+    let currentSlice = null;
+    let lastSlice = null;
+    let lastMetrics = null;
+    let layoutState = null;
+    let spreadComponents = new Map();
+    let layoutDirty = false;
+    let lastVisibleRange = { start: 0, end: -1 };
+    let containerSize = { width: 0, height: 0 };
+    let lastScrollMode = null;
+    let lastOverflowX = null;
+    let lastOverflowY = null;
+    let updateRaf = 0;
+    let scrollRaf = 0;
+    const unsubEvents = [];
+    function mount(parent, store, rm) {
+        parent.appendChild(el);
+        renderManager = rm;
+        storeRef = store;
+        floatingToolbar.mount(el, store);
+        currentSlice = selectViewport(store.getState());
+        scheduleUpdate();
+        unsubRender = subscribeSelector(store, selectViewport, (slice) => {
+            currentSlice = slice;
+            scheduleUpdate();
+        }, {
+            equality: viewportSliceEqual
+        });
+        unsubScroll = on(scrollArea, "scroll", () => {
+            if (!currentSlice || currentSlice.scrollMode !== "continuous")
+                return;
+            if (scrollRaf)
+                return;
+            scrollRaf = requestAnimationFrame(() => {
+                scrollRaf = 0;
+                if (!currentSlice || !layoutState || !lastMetrics)
+                    return;
+                updateVisibleSpreads(currentSlice, lastMetrics, layoutState);
+            });
+        });
+        if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(() => scheduleUpdate());
+            resizeObserver.observe(scrollArea);
+        }
+        const handleResize = () => scheduleUpdate();
+        window.addEventListener("resize", handleResize);
+        unsubEvents.push(() => window.removeEventListener("resize", handleResize));
+        // Handle annotation clicks (links and sticky notes)
+        const handleAnnotationClick = (e) => {
+            const target = e.target;
+            // Handle sticky note (text) annotation - show popup
+            const textEl = target.closest(".udoc-annotation--text");
+            if (textEl) {
+                e.stopPropagation();
+                const annotationData = textEl.dataset.annotation;
+                if (annotationData) {
+                    try {
+                        const annotation = JSON.parse(annotationData);
+                        showAnnotationPopup(annotation, textEl, container);
+                    }
+                    catch {
+                        // Ignore parse errors
+                    }
+                }
+                return;
+            }
+            // Handle link annotation - navigate
+            const linkEl = target.closest(".udoc-annotation--link");
+            if (linkEl) {
+                const actionData = linkEl.getAttribute("data-action");
+                if (!actionData)
+                    return;
+                try {
+                    const action = JSON.parse(actionData);
+                    if (action.actionType === "goTo" && action.destination) {
+                        store.dispatch({ type: "NAVIGATE_TO_DESTINATION", destination: action.destination });
+                    }
+                    else if (action.actionType === "uri" && action.uri) {
+                        window.open(action.uri, "_blank", "noopener");
+                    }
+                }
+                catch {
+                    // Ignore parse errors
+                }
+                return;
+            }
+            // Click elsewhere closes any open popup
+            closeAnnotationPopup();
+        };
+        container.addEventListener("click", handleAnnotationClick);
+        unsubEvents.push(() => container.removeEventListener("click", handleAnnotationClick));
+        // Handle mouse wheel for page flip in spread mode
+        let wheelCooldown = false;
+        const handleWheel = (e) => {
+            if (!currentSlice || currentSlice.scrollMode !== "spread")
+                return;
+            if (!layoutState || layoutState.spreads.length === 0)
+                return;
+            // Prevent default scroll in spread mode
+            e.preventDefault();
+            // Debounce rapid wheel events
+            if (wheelCooldown)
+                return;
+            wheelCooldown = true;
+            setTimeout(() => { wheelCooldown = false; }, 150);
+            const currentSpreadIndex = findSpreadForPage(layoutState.spreads, currentSlice.page);
+            if (e.deltaY > 0) {
+                // Scroll down - next spread
+                const nextSpreadIndex = Math.min(currentSpreadIndex + 1, layoutState.spreads.length - 1);
+                if (nextSpreadIndex !== currentSpreadIndex) {
+                    const nextPage = getSpreadPrimaryPage(layoutState.spreads[nextSpreadIndex]);
+                    store.dispatch({ type: "SET_PAGE", page: nextPage });
+                }
+            }
+            else if (e.deltaY < 0) {
+                // Scroll up - previous spread
+                const prevSpreadIndex = Math.max(currentSpreadIndex - 1, 0);
+                if (prevSpreadIndex !== currentSpreadIndex) {
+                    const prevPage = getSpreadPrimaryPage(layoutState.spreads[prevSpreadIndex]);
+                    store.dispatch({ type: "SET_PAGE", page: prevPage });
+                }
+            }
+        };
+        scrollArea.addEventListener("wheel", handleWheel, { passive: false });
+        unsubEvents.push(() => scrollArea.removeEventListener("wheel", handleWheel));
+        unsubNavigation = store.subscribeEffect((prev, next) => {
+            if (prev.navigationTarget === next.navigationTarget)
+                return;
+            if (next.navigationTarget === null)
+                return;
+            const target = next.navigationTarget;
+            // Handle zoom change if specified
+            if (target.zoom !== undefined && target.zoom !== next.zoom) {
+                store.dispatch({ type: "SET_ZOOM", zoom: target.zoom });
+            }
+            if (next.scrollMode === "continuous") {
+                scrollToTarget(target);
+            }
+            else {
+                store.dispatch({ type: "SET_PAGE", page: target.page });
+            }
+            store.dispatch({ type: "CLEAR_NAVIGATION_TARGET" });
+        });
+    }
+    function scheduleUpdate() {
+        if (!currentSlice)
+            return;
+        if (updateRaf)
+            return;
+        updateRaf = requestAnimationFrame(() => {
+            updateRaf = 0;
+            if (!currentSlice)
+                return;
+            applyState(currentSlice);
+        });
+    }
+    function applyState(slice) {
+        scrollArea.style.paddingLeft = `${slice.pageSpacing}px`;
+        scrollArea.style.paddingRight = `${slice.pageSpacing}px`;
+        el.classList.toggle("udoc-viewport--seamless", slice.spacingMode === "none");
+        const metrics = readViewportMetrics(scrollArea, container);
+        const hasDoc = !!slice.docId && slice.pageCount > 0 && slice.pageInfos.length > 0;
+        if (!hasDoc || metrics.innerWidth <= 0 || metrics.innerHeight <= 0) {
+            clearSpreads();
+            container.style.height = "";
+            container.style.width = "";
+            scrollArea.style.overflowX = "hidden";
+            scrollArea.style.overflowY = "hidden";
+            layoutState = null;
+            lastVisibleRange = { start: 0, end: -1 };
+            syncEffectiveZoom(slice, null);
+            lastSlice = slice;
+            lastMetrics = metrics;
+            lastScrollMode = slice.scrollMode;
+            return;
+        }
+        const plan = computeViewportUpdate(lastSlice, slice, lastMetrics, metrics, lastScrollMode);
+        if (plan.shouldClearSpreads) {
+            clearSpreads();
+            lastVisibleRange = { start: 0, end: -1 };
+        }
+        const anchor = (plan.shouldCaptureAnchor && layoutState)
+            ? captureScrollAnchor(metrics, layoutState)
+            : null;
+        if (plan.layoutChanged || !layoutState) {
+            layoutState = buildLayout(slice, metrics);
+            layoutDirty = true;
+            // Only update lastMetrics when layout rebuilds, so small changes accumulate
+            // until they exceed the epsilon threshold (important for fit-page modes)
+            lastMetrics = metrics;
+        }
+        syncEffectiveZoom(slice, layoutState);
+        if (slice.scrollMode === "continuous") {
+            applyContinuousLayout(metrics, layoutState);
+            if (plan.shouldCenterOnModeChange) {
+                // When switching from single to continuous, center the page to maintain position
+                scrollToPage(slice.page, metrics, true);
+            }
+            else if (plan.shouldScrollToPage) {
+                scrollToPage(slice.page, metrics);
+            }
+            else if (anchor) {
+                restoreScrollAnchor(anchor, metrics);
+            }
+            updateVisibleSpreads(slice, metrics, layoutState);
+        }
+        else {
+            applySingleLayout(slice, metrics, layoutState);
+            if (plan.shouldResetSingleScroll) {
+                scrollArea.scrollTop = 0;
+                scrollArea.scrollLeft = 0;
+                // Reset overflow state when switching to spread mode to avoid
+                // hysteresis from continuous mode keeping scrollbar visible
+                lastOverflowX = null;
+                lastOverflowY = null;
+            }
+            showSingleSpread(slice, metrics, layoutState);
+        }
+        updateOverflow(slice, metrics);
+        lastSlice = slice;
+        lastScrollMode = slice.scrollMode;
+    }
+    function updateOverflow(slice, metrics) {
+        const epsilon = 1;
+        const scrollWidth = scrollArea.scrollWidth;
+        const scrollHeight = scrollArea.scrollHeight;
+        const clientWidth = scrollArea.clientWidth;
+        const clientHeight = scrollArea.clientHeight;
+        const scrollbar = getScrollbarSize();
+        // Apply hysteresis to avoid scrollbar-induced resize loops near 1px thresholds.
+        const assumeY = lastOverflowY ?? (scrollHeight - clientHeight > epsilon);
+        const availableWidth = clientWidth + (assumeY ? scrollbar.width : 0);
+        const deltaX = scrollWidth - availableWidth;
+        const needsX = resolveOverflowState(lastOverflowX, deltaX, epsilon);
+        const availableHeight = clientHeight + (needsX ? scrollbar.height : 0);
+        const deltaY = scrollHeight - availableHeight;
+        const finalNeedsY = resolveOverflowState(lastOverflowY, deltaY, epsilon);
+        lastOverflowX = needsX;
+        lastOverflowY = finalNeedsY;
+        scrollArea.style.overflowX = needsX ? "auto" : "hidden";
+        scrollArea.style.overflowY = finalNeedsY ? "auto" : "hidden";
+    }
+    function applyContinuousLayout(metrics, state) {
+        container.style.display = "block";
+        const width = snapToDevice(Math.max(metrics.innerWidth, state.contentWidth));
+        const height = snapToDevice(Math.max(metrics.innerHeight, state.contentHeight));
+        container.style.width = `${width}px`;
+        container.style.height = `${height}px`;
+        containerSize = { width, height };
+    }
+    function applySingleLayout(slice, metrics, state) {
+        container.style.display = "block";
+        const spreadIndex = findSpreadForPage(state.spreads, slice.page);
+        const layout = state.layouts[spreadIndex];
+        const spreadWidth = layout ? layout.width : 0;
+        const spreadHeight = layout ? layout.height : 0;
+        const snappedSpreadSpacing = snapToDevice(slice.spreadSpacing);
+        const width = snapToDevice(Math.max(metrics.innerWidth, spreadWidth));
+        const height = snapToDevice(Math.max(metrics.innerHeight, spreadHeight + snappedSpreadSpacing * 2));
+        container.style.width = `${width}px`;
+        container.style.height = `${height}px`;
+        containerSize = { width, height };
+    }
+    function syncEffectiveZoom(slice, state) {
+        if (!storeRef)
+            return;
+        const nextZoom = slice.zoomMode === "custom" ? null : state?.scale ?? null;
+        const current = storeRef.getState().effectiveZoom;
+        if (nextZoom === null) {
+            if (current === null)
+                return;
+            storeRef.dispatch({ type: "SET_EFFECTIVE_ZOOM", zoom: null });
+            return;
+        }
+        if (current !== null && Math.abs(nextZoom - current) < 0.001)
+            return;
+        storeRef.dispatch({ type: "SET_EFFECTIVE_ZOOM", zoom: nextZoom });
+    }
+    function captureScrollAnchor(metrics, state) {
+        if (state.layouts.length === 0 || state.spreads.length === 0)
+            return null;
+        const scrollTop = scrollArea.scrollTop;
+        const viewportCenter = scrollTop + metrics.innerHeight / 2;
+        const focusPage = findFocusPage(viewportCenter, state);
+        if (focusPage === null)
+            return null;
+        const spreadIndex = findSpreadForPage(state.spreads, focusPage);
+        const layout = state.layouts[spreadIndex];
+        if (!layout)
+            return null;
+        const spreadCenter = layout.top + layout.height / 2;
+        return {
+            page: focusPage,
+            offset: spreadCenter - scrollTop
+        };
+    }
+    function restoreScrollAnchor(anchor, metrics) {
+        if (!layoutState)
+            return;
+        const spreadIndex = findSpreadForPage(layoutState.spreads, anchor.page);
+        const layout = layoutState.layouts[spreadIndex];
+        if (!layout)
+            return;
+        const spreadCenter = layout.top + layout.height / 2;
+        const targetScrollTop = spreadCenter - anchor.offset;
+        const maxScrollTop = Math.max(0, containerSize.height - metrics.innerHeight);
+        scrollArea.scrollTop = clamp(targetScrollTop, 0, maxScrollTop);
+    }
+    function updateVisibleSpreads(slice, metrics, state) {
+        if (!renderManager || !slice.docId)
+            return;
+        if (state.layouts.length === 0)
+            return;
+        const scrollTop = scrollArea.scrollTop;
+        const visibleRange = findVisibleSpreadRange(state.layouts, scrollTop, metrics.innerHeight, RENDER_BUFFER);
+        const rangeChanged = visibleRange.start !== lastVisibleRange.start ||
+            visibleRange.end !== lastVisibleRange.end;
+        const layoutOptions = {
+            pageInfos: slice.pageInfos,
+            scale: state.scale,
+            dpi: slice.dpi,
+            rotation: slice.pageRotation,
+            pageSpacing: slice.pageSpacing
+        };
+        if (layoutDirty || rangeChanged) {
+            for (const [index, spread] of spreadComponents) {
+                if (index < visibleRange.start || index > visibleRange.end) {
+                    spread.destroy();
+                    spreadComponents.delete(index);
+                }
+            }
+            const renderOptions = {
+                docId: slice.docId,
+                scale: state.scale,
+                dpi: slice.dpi
+            };
+            for (let i = visibleRange.start; i <= visibleRange.end; i++) {
+                const layout = state.layouts[i];
+                if (!layout)
+                    continue;
+                let spreadComp = spreadComponents.get(i);
+                if (!spreadComp) {
+                    const spreadData = state.spreads[i];
+                    spreadComp = createSpread(spreadData);
+                    spreadComp.mount(container);
+                    spreadComponents.set(i, spreadComp);
+                }
+                spreadComp.updateLayout(layoutOptions);
+                // Set spread position and dimensions from layout.
+                // Layout values are pre-snapped with cumulative consistency.
+                const spreadEl = spreadComp.getElement();
+                spreadEl.style.position = "absolute";
+                spreadEl.style.top = `${layout.top}px`;
+                spreadEl.style.width = `${layout.width}px`;
+                spreadEl.style.height = `${layout.height}px`;
+                spreadEl.style.left = `${getCenteredOffset(containerSize.width, layout.width)}px`;
+                spreadEl.style.transform = "none";
+                spreadComp.render(renderManager, renderOptions);
+            }
+            lastVisibleRange = visibleRange;
+            layoutDirty = false;
+        }
+        // Always update annotations on visible spreads (annotations may load after layout)
+        for (let i = visibleRange.start; i <= visibleRange.end; i++) {
+            const spreadComp = spreadComponents.get(i);
+            if (spreadComp) {
+                spreadComp.updateAnnotations(slice.pageAnnotations, layoutOptions, slice.highlightedAnnotation);
+            }
+        }
+        const viewportCenter = scrollTop + metrics.innerHeight / 2;
+        const focusPage = findFocusPage(viewportCenter, state);
+        if (focusPage !== null) {
+            renderManager.boost(slice.docId, focusPage);
+        }
+        updateCurrentPageFromScroll(scrollTop, metrics.innerHeight, state);
+    }
+    function showSingleSpread(slice, metrics, state) {
+        if (!renderManager || !slice.docId)
+            return;
+        const spreadIndex = findSpreadForPage(state.spreads, slice.page);
+        const layout = state.layouts[spreadIndex];
+        if (!layout)
+            return;
+        for (const [index, spread] of spreadComponents) {
+            if (index !== spreadIndex) {
+                spread.destroy();
+                spreadComponents.delete(index);
+            }
+        }
+        let spreadComp = spreadComponents.get(spreadIndex);
+        if (!spreadComp) {
+            const spreadData = state.spreads[spreadIndex];
+            spreadComp = createSpread(spreadData);
+            spreadComp.mount(container);
+            spreadComponents.set(spreadIndex, spreadComp);
+        }
+        const layoutOptions = {
+            pageInfos: slice.pageInfos,
+            scale: state.scale,
+            dpi: slice.dpi,
+            rotation: slice.pageRotation,
+            pageSpacing: slice.pageSpacing
+        };
+        spreadComp.updateLayout(layoutOptions);
+        spreadComp.updateAnnotations(slice.pageAnnotations, layoutOptions, slice.highlightedAnnotation);
+        // Layout values are pre-snapped
+        const top = getCenteredOffset(containerSize.height, layout.height);
+        const spreadEl = spreadComp.getElement();
+        spreadEl.style.position = "absolute";
+        spreadEl.style.top = `${top}px`;
+        spreadEl.style.width = `${layout.width}px`;
+        spreadEl.style.height = `${layout.height}px`;
+        spreadEl.style.left = `${getCenteredOffset(containerSize.width, layout.width)}px`;
+        spreadEl.style.transform = "none";
+        spreadComp.render(renderManager, {
+            docId: slice.docId,
+            scale: state.scale,
+            dpi: slice.dpi
+        });
+        lastVisibleRange = { start: spreadIndex, end: spreadIndex };
+        layoutDirty = false;
+    }
+    function findFocusPage(viewportCenter, state) {
+        if (state.layouts.length === 0 || state.spreads.length === 0)
+            return null;
+        let closestIndex = 0;
+        let closestDistance = Infinity;
+        for (let i = 0; i < state.layouts.length; i++) {
+            const layout = state.layouts[i];
+            const spreadCenter = layout.top + layout.height / 2;
+            const distance = Math.abs(spreadCenter - viewportCenter);
+            if (distance < closestDistance) {
+                closestDistance = distance;
+                closestIndex = i;
+            }
+        }
+        const spread = state.spreads[closestIndex];
+        return spread ? getSpreadPrimaryPage(spread) : null;
+    }
+    function updateCurrentPageFromScroll(scrollTop, viewportHeight, state) {
+        if (!storeRef)
+            return;
+        const viewportCenter = scrollTop + viewportHeight / 2;
+        const primaryPage = findFocusPage(viewportCenter, state);
+        if (primaryPage === null)
+            return;
+        const currentState = storeRef.getState();
+        if (currentState.page !== primaryPage) {
+            storeRef.dispatch({ type: "SET_PAGE", page: primaryPage });
+        }
+    }
+    function scrollToPage(page, metrics, center) {
+        if (!layoutState)
+            return;
+        if (layoutState.layouts.length === 0)
+            return;
+        const viewport = metrics ?? lastMetrics;
+        if (!viewport)
+            return;
+        const slice = currentSlice ?? lastSlice;
+        if (!slice)
+            return;
+        const spreadIndex = findSpreadForPage(layoutState.spreads, page);
+        const layout = layoutState.layouts[spreadIndex];
+        if (!layout)
+            return;
+        // Top-align with spacing (default), or center vertically if requested
+        const snappedSpreadSpacing = snapToDevice(slice.spreadSpacing);
+        const targetScrollTop = center
+            ? layout.top - (viewport.innerHeight - layout.height) / 2
+            : layout.top - snappedSpreadSpacing;
+        const maxScrollTop = Math.max(0, containerSize.height - viewport.innerHeight);
+        scrollArea.scrollTop = clamp(targetScrollTop, 0, maxScrollTop);
+    }
+    function scrollToTarget(target, metrics) {
+        if (!layoutState)
+            return;
+        if (layoutState.layouts.length === 0)
+            return;
+        const viewport = metrics ?? lastMetrics;
+        if (!viewport)
+            return;
+        const slice = currentSlice ?? lastSlice;
+        if (!slice)
+            return;
+        const spreadIndex = findSpreadForPage(layoutState.spreads, target.page);
+        const layout = layoutState.layouts[spreadIndex];
+        if (!layout)
+            return;
+        let targetScrollTop;
+        let targetScrollLeft = 0;
+        // Apply scroll offset if specified (convert from PDF points to scaled pixels)
+        if (target.scrollTo && target.scrollTo.y !== undefined) {
+            // scrollTo.y is in PDF points from top of page (already Y-flipped by WASM)
+            // Full conversion: points * (dpi/72) * zoomScale
+            const dpiScale = getPointsToPixels(slice.dpi);
+            const pointsToPixels = dpiScale * layoutState.scale;
+            const yInPixels = target.scrollTo.y * pointsToPixels;
+            // Position target at top of viewport
+            targetScrollTop = layout.top + yInPixels;
+            if (target.scrollTo.x !== undefined) {
+                const xInPixels = target.scrollTo.x * pointsToPixels;
+                // Center the x position in viewport if possible
+                targetScrollLeft = Math.max(0, xInPixels - viewport.innerWidth / 2);
+            }
+        }
+        else {
+            // No specific scroll position - scroll to top of spread with spacing
+            const snappedSpreadSpacing = snapToDevice(slice.spreadSpacing);
+            targetScrollTop = layout.top - snappedSpreadSpacing;
+        }
+        const maxScrollTop = Math.max(0, containerSize.height - viewport.innerHeight);
+        const maxScrollLeft = Math.max(0, containerSize.width - viewport.innerWidth);
+        scrollArea.scrollTop = clamp(targetScrollTop, 0, maxScrollTop);
+        scrollArea.scrollLeft = clamp(targetScrollLeft, 0, maxScrollLeft);
+    }
+    function clearSpreads() {
+        for (const spread of spreadComponents.values()) {
+            spread.destroy();
+        }
+        spreadComponents.clear();
+        lastOverflowX = null;
+        lastOverflowY = null;
+    }
+    function destroy() {
+        if (unsubRender)
+            unsubRender();
+        if (unsubScroll)
+            unsubScroll();
+        if (unsubNavigation)
+            unsubNavigation();
+        if (resizeObserver)
+            resizeObserver.disconnect();
+        for (const off of unsubEvents)
+            off();
+        if (updateRaf)
+            cancelAnimationFrame(updateRaf);
+        if (scrollRaf)
+            cancelAnimationFrame(scrollRaf);
+        floatingToolbar.destroy();
+        clearSpreads();
+        renderManager = null;
+        storeRef = null;
+        currentSlice = null;
+        lastSlice = null;
+        layoutState = null;
+        el.remove();
+    }
+    return { el, mount, destroy };
+}
+function selectViewport(state) {
+    return {
+        docId: state.doc?.id ?? null,
+        page: state.page,
+        pageCount: state.pageCount,
+        pageInfos: state.pageInfos,
+        scrollMode: state.scrollMode,
+        layoutMode: state.layoutMode,
+        zoomMode: state.zoomMode,
+        zoom: state.zoom,
+        dpi: state.dpi,
+        pageRotation: state.pageRotation,
+        spacingMode: state.spacingMode,
+        pageSpacing: state.pageSpacing,
+        spreadSpacing: state.spreadSpacing,
+        pageAnnotations: state.pageAnnotations,
+        highlightedAnnotation: state.highlightedAnnotation
+    };
+}
+//# sourceMappingURL=Viewport.js.map