@ubuilder-ai/workspace 0.1.0-alpha.1

package/dist/floorplan-navigation-shell.js

@@ -0,0 +1,1178 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { floorplanLocalToWorldPoint, worldToFloorplanLocalPoint, } from './floorplan-coordinates';
+import { resolveEmptyFloorplanViewWidth, resolveFloorplanSyncedView, } from './floorplan-initial-view';
+import { canApplyFloorplanNavigationSync, canZoomFloorplanDuringNavigation, createFloorplanNavigationSyncScheduler, finalizeFloorplanNavigation, flushFloorplanRotationPresentationRestore, getFloorplanRotationOverscanViewBox, queueFloorplanRotationPresentationRestore, resolveFloorplanPresentationViewBox, setFloorplanCompassRotation, } from './floorplan-navigation-presentation';
+const FALLBACK_VIEW_SIZE = 12;
+const FLOORPLAN_PADDING = 2;
+const MIN_VIEWPORT_WIDTH_RATIO = 0.08;
+const MAX_VIEWPORT_WIDTH_RATIO = 40;
+const FLOORPLAN_ROTATION_DEGREES_PER_PIXEL = 0.35;
+const FLOORPLAN_VIEW_ANIMATION_TIME_CONSTANT_MS = 90;
+const FLOORPLAN_VIEW_ANIMATION_EPSILON = 0.0005;
+const FLOORPLAN_ROTATION_ANIMATION_EPSILON_DEG = 0.01;
+function floorplanViewportEquals(a, b) {
+    if (a === b)
+        return true;
+    if (!(a && b))
+        return false;
+    return a.centerX === b.centerX && a.centerY === b.centerY && a.width === b.width;
+}
+function floorplanViewportWithinEpsilon(a, b, epsilon) {
+    return (Math.abs(a.centerX - b.centerX) < epsilon &&
+        Math.abs(a.centerY - b.centerY) < epsilon &&
+        Math.abs(a.width - b.width) < epsilon);
+}
+function restoreFloorplanNavigationSyncPresentation(presentationState) {
+    presentationState.svg.style.transform = presentationState.svgStyle.transform;
+    presentationState.svg.style.transformOrigin = presentationState.svgStyle.transformOrigin;
+    presentationState.svg.style.willChange = presentationState.svgStyle.willChange;
+}
+export const __testFloorplanNavigationNativeEvents = {
+    register(svg, handlers) {
+        svg.addEventListener('wheel', handlers.wheel, { passive: false });
+        svg.addEventListener('gesturestart', handlers.gesturestart, { passive: false });
+        svg.addEventListener('gesturechange', handlers.gesturechange, { passive: false });
+        svg.addEventListener('gestureend', handlers.gestureend, { passive: false });
+        return () => {
+            svg.removeEventListener('wheel', handlers.wheel);
+            svg.removeEventListener('gesturestart', handlers.gesturestart);
+            svg.removeEventListener('gesturechange', handlers.gesturechange);
+            svg.removeEventListener('gestureend', handlers.gestureend);
+        };
+    },
+};
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function resolveFloorplanViewWidth(requestedWidth, currentWidth, fittedViewport, clampViewWidth) {
+    if (!(Number.isFinite(requestedWidth) && requestedWidth > 0)) {
+        return currentWidth;
+    }
+    if (!clampViewWidth || !fittedViewport) {
+        return Math.max(0.001, requestedWidth);
+    }
+    const minWidth = fittedViewport.width * MIN_VIEWPORT_WIDTH_RATIO;
+    const maxWidth = fittedViewport.width * MAX_VIEWPORT_WIDTH_RATIO;
+    return clamp(requestedWidth, Math.min(minWidth, currentWidth), Math.max(maxWidth, currentWidth));
+}
+export function rotateFloorplanPoint(point, rotationDegrees) {
+    if (rotationDegrees === 0) {
+        return point;
+    }
+    const radians = (rotationDegrees * Math.PI) / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    return {
+        x: point.x * cos - point.y * sin,
+        y: point.x * sin + point.y * cos,
+    };
+}
+function radiansToDegrees(angle) {
+    return (angle * 180) / Math.PI;
+}
+function degreesToRadians(angle) {
+    return (angle * Math.PI) / 180;
+}
+function nearestEquivalentDegrees(angle, reference) {
+    let nextAngle = angle;
+    while (nextAngle - reference > 180) {
+        nextAngle -= 360;
+    }
+    while (nextAngle - reference < -180) {
+        nextAngle += 360;
+    }
+    return nextAngle;
+}
+function floorplanRotationFromCameraAzimuth(azimuth, reference, baselineRotationDeg) {
+    return nearestEquivalentDegrees(radiansToDegrees(azimuth) - baselineRotationDeg, reference);
+}
+function cameraAzimuthFromFloorplanRotation(rotationDeg, baselineRotationDeg) {
+    return degreesToRadians(rotationDeg + baselineRotationDeg);
+}
+export function useFloorplanNavigation({ active, activationAzimuth, baselineRotationDeg, contentKey, fitPoints, fitSuspended, hasContent, initialNavigationPose, onNavigationStart, planeWorldY, publishContinuously, publishNavigationPose, subscribeNavigationPose, worldOrigin, worldRotationY, }) {
+    const viewportHostRef = useRef(null);
+    const svgRef = useRef(null);
+    const backgroundRef = useRef(null);
+    const sceneRef = useRef(null);
+    const contentRef = useRef(null);
+    const panStateRef = useRef(null);
+    const rotationStateRef = useRef(null);
+    const pendingRotationRestoreRef = useRef(null);
+    const spacePanPressedRef = useRef(false);
+    const navigationClickSuppressedRef = useRef(false);
+    const gestureScaleRef = useRef(1);
+    const hasUserAdjustedViewportRef = useRef(false);
+    const previousContentKeyRef = useRef(null);
+    const previousActiveRef = useRef(false);
+    const latestUserRotationDegRef = useRef(0);
+    const latestViewportRef = useRef(null);
+    const latestFittedViewportRef = useRef(null);
+    const blankInitialViewPublishedForKeyRef = useRef(null);
+    const viewAnimationFrameRef = useRef(null);
+    const viewAnimationTargetRef = useRef(null);
+    const zoomCommitTimerRef = useRef(null);
+    const renderScaleCommitTimerRef = useRef(null);
+    const viewportInteractionInProgressRef = useRef(false);
+    const imperativeViewBoxRef = useRef(null);
+    const navigationSyncPresentationRef = useRef(null);
+    const applyNavigationSyncPresentationRef = useRef(() => { });
+    const commitNavigationSyncPresentationRef = useRef(() => { });
+    const navigationSyncSchedulerRef = useRef(null);
+    const latestRenderUnitsPerPixelRef = useRef(1);
+    const zoomPoseRef = useRef(null);
+    const panPoseRef = useRef(null);
+    const latestNavigationPoseRef = useRef(initialNavigationPose);
+    const compassNeedleRef = useRef(null);
+    const hiddenCompassAnimationRef = useRef(null);
+    const activeRef = useRef(active);
+    activeRef.current = active;
+    const [isSpacePanPressed, setIsSpacePanPressed] = useState(false);
+    const [isPanning, setIsPanning] = useState(false);
+    const [isRotating, setIsRotating] = useState(false);
+    const [surfaceSize, setSurfaceSize] = useState({ width: 1, height: 1 });
+    const [viewport, setViewport] = useState(null);
+    const [renderUnitsPerPixel, setRenderUnitsPerPixel] = useState(null);
+    const [measuredSceneBBox, setMeasuredSceneBBox] = useState(null);
+    const [floorplanUserRotationDeg, setFloorplanUserRotationDeg] = useState(0);
+    if (!viewportInteractionInProgressRef.current) {
+        latestViewportRef.current = viewport;
+    }
+    const worldRotationDeg = (worldRotationY * 180) / Math.PI;
+    const sceneRotationDeg = baselineRotationDeg + floorplanUserRotationDeg - worldRotationDeg;
+    const getSceneRotationDeg = useCallback(() => baselineRotationDeg + latestUserRotationDegRef.current - worldRotationDeg, [baselineRotationDeg, worldRotationDeg]);
+    if (activeRef.current && !viewportInteractionInProgressRef.current) {
+        latestUserRotationDegRef.current = floorplanUserRotationDeg;
+    }
+    useEffect(() => {
+        const host = viewportHostRef.current;
+        if (!host)
+            return;
+        const updateSize = () => {
+            const rect = host.getBoundingClientRect();
+            setSurfaceSize({
+                width: Math.max(rect.width, 1),
+                height: Math.max(rect.height, 1),
+            });
+        };
+        updateSize();
+        const resizeObserver = new ResizeObserver(updateSize);
+        resizeObserver.observe(host);
+        return () => resizeObserver.disconnect();
+    }, []);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: visibility remounts the observed SVG subtree.
+    useLayoutEffect(() => {
+        const element = contentRef.current;
+        if (!element)
+            return;
+        let scheduledFrame = null;
+        let mutationVersion = 0;
+        let observedVersion = 0;
+        const measure = () => {
+            let bbox;
+            try {
+                const measured = element.getBBox();
+                bbox = {
+                    x: measured.x,
+                    y: measured.y,
+                    width: measured.width,
+                    height: measured.height,
+                };
+            }
+            catch {
+                return;
+            }
+            if (bbox.width <= 0 && bbox.height <= 0)
+                return;
+            setMeasuredSceneBBox((previous) => {
+                if (previous &&
+                    previous.x === bbox.x &&
+                    previous.y === bbox.y &&
+                    previous.width === bbox.width &&
+                    previous.height === bbox.height) {
+                    return previous;
+                }
+                return bbox;
+            });
+        };
+        const flushWhenSettled = () => {
+            if (observedVersion !== mutationVersion) {
+                observedVersion = mutationVersion;
+                scheduledFrame = requestAnimationFrame(flushWhenSettled);
+                return;
+            }
+            scheduledFrame = null;
+            measure();
+        };
+        const observer = new MutationObserver(() => {
+            mutationVersion += 1;
+            if (scheduledFrame !== null)
+                return;
+            observedVersion = mutationVersion - 1;
+            scheduledFrame = requestAnimationFrame(flushWhenSettled);
+        });
+        measure();
+        observer.observe(element, {
+            attributes: true,
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+            if (scheduledFrame !== null)
+                cancelAnimationFrame(scheduledFrame);
+        };
+    }, [active]);
+    const svgAspectRatio = surfaceSize.width / surfaceSize.height || 1;
+    const fittedViewport = useMemo(() => {
+        let minX = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        for (const point of fitPoints) {
+            const svgPoint = rotateFloorplanPoint(point, sceneRotationDeg);
+            minX = Math.min(minX, svgPoint.x);
+            maxX = Math.max(maxX, svgPoint.x);
+            minY = Math.min(minY, svgPoint.y);
+            maxY = Math.max(maxY, svgPoint.y);
+        }
+        if (measuredSceneBBox && measuredSceneBBox.width >= 0 && measuredSceneBBox.height >= 0) {
+            const { x, y, width, height } = measuredSceneBBox;
+            const corners = [
+                rotateFloorplanPoint({ x, y }, sceneRotationDeg),
+                rotateFloorplanPoint({ x: x + width, y }, sceneRotationDeg),
+                rotateFloorplanPoint({ x, y: y + height }, sceneRotationDeg),
+                rotateFloorplanPoint({ x: x + width, y: y + height }, sceneRotationDeg),
+            ];
+            for (const corner of corners) {
+                minX = Math.min(minX, corner.x);
+                maxX = Math.max(maxX, corner.x);
+                minY = Math.min(minY, corner.y);
+                maxY = Math.max(maxY, corner.y);
+            }
+        }
+        if (!Number.isFinite(minX) || !Number.isFinite(minY)) {
+            return {
+                centerX: 0,
+                centerY: 0,
+                width: resolveEmptyFloorplanViewWidth(svgAspectRatio),
+            };
+        }
+        const rawWidth = maxX - minX;
+        const rawHeight = maxY - minY;
+        const paddedWidth = rawWidth + FLOORPLAN_PADDING * 2;
+        const paddedHeight = rawHeight + FLOORPLAN_PADDING * 2;
+        const width = Math.max(FALLBACK_VIEW_SIZE, paddedWidth, paddedHeight * svgAspectRatio);
+        return {
+            centerX: (minX + maxX) / 2,
+            centerY: (minY + maxY) / 2,
+            width,
+        };
+    }, [fitPoints, measuredSceneBBox, sceneRotationDeg, svgAspectRatio]);
+    latestFittedViewportRef.current = fittedViewport;
+    const applyViewportImperatively = useCallback((nextViewport) => {
+        const nextHeight = nextViewport.width / svgAspectRatio;
+        const nextMinX = nextViewport.centerX - nextViewport.width / 2;
+        const nextMinY = nextViewport.centerY - nextHeight / 2;
+        const nextViewBox = {
+            minX: nextMinX,
+            minY: nextMinY,
+            width: nextViewport.width,
+            height: nextHeight,
+        };
+        const nextPaintViewBox = getFloorplanRotationOverscanViewBox(nextViewBox);
+        imperativeViewBoxRef.current = nextViewBox;
+        hasUserAdjustedViewportRef.current = true;
+        latestViewportRef.current = nextViewport;
+        svgRef.current?.setAttribute('viewBox', `${nextMinX} ${nextMinY} ${nextViewport.width} ${nextHeight}`);
+        const background = backgroundRef.current;
+        if (background) {
+            background.setAttribute('x', String(nextPaintViewBox.minX));
+            background.setAttribute('y', String(nextPaintViewBox.minY));
+            background.setAttribute('width', String(nextPaintViewBox.width));
+            background.setAttribute('height', String(nextPaintViewBox.height));
+        }
+    }, [svgAspectRatio]);
+    const applyNavigationState = useCallback((nextViewport, userRotationDeg) => {
+        hasUserAdjustedViewportRef.current = true;
+        latestUserRotationDegRef.current = userRotationDeg;
+        latestViewportRef.current = nextViewport;
+        setFloorplanUserRotationDeg((current) => current === userRotationDeg ? current : userRotationDeg);
+        setViewport((current) => floorplanViewportEquals(current, nextViewport) ? current : nextViewport);
+    }, []);
+    const stopViewAnimation = useCallback(() => {
+        if (viewAnimationFrameRef.current !== null) {
+            window.cancelAnimationFrame(viewAnimationFrameRef.current);
+            viewAnimationFrameRef.current = null;
+        }
+        viewAnimationTargetRef.current = null;
+    }, []);
+    const animateNavigationState = useCallback((nextViewport, userRotationDeg) => {
+        viewAnimationTargetRef.current = {
+            viewport: nextViewport,
+            userRotationDeg,
+            lastTimestamp: viewAnimationTargetRef.current?.lastTimestamp ?? null,
+        };
+        if (viewAnimationFrameRef.current !== null)
+            return;
+        const step = (timestamp) => {
+            const target = viewAnimationTargetRef.current;
+            if (!target) {
+                viewAnimationFrameRef.current = null;
+                return;
+            }
+            const currentViewport = latestViewportRef.current ?? target.viewport;
+            const currentRotationDeg = latestUserRotationDegRef.current;
+            const deltaMs = target.lastTimestamp === null ? 16.67 : timestamp - target.lastTimestamp;
+            target.lastTimestamp = timestamp;
+            const alpha = 1 - Math.exp(-deltaMs / FLOORPLAN_VIEW_ANIMATION_TIME_CONSTANT_MS);
+            const targetRotationDeg = nearestEquivalentDegrees(target.userRotationDeg, currentRotationDeg);
+            const nextRotationDeg = currentRotationDeg + (targetRotationDeg - currentRotationDeg) * alpha;
+            const animatedViewport = {
+                centerX: currentViewport.centerX + (target.viewport.centerX - currentViewport.centerX) * alpha,
+                centerY: currentViewport.centerY + (target.viewport.centerY - currentViewport.centerY) * alpha,
+                width: currentViewport.width + (target.viewport.width - currentViewport.width) * alpha,
+            };
+            const isComplete = floorplanViewportWithinEpsilon(animatedViewport, target.viewport, FLOORPLAN_VIEW_ANIMATION_EPSILON) &&
+                Math.abs(targetRotationDeg - nextRotationDeg) < FLOORPLAN_ROTATION_ANIMATION_EPSILON_DEG;
+            if (isComplete) {
+                applyNavigationState(target.viewport, targetRotationDeg);
+                viewAnimationTargetRef.current = null;
+                viewAnimationFrameRef.current = null;
+                return;
+            }
+            applyNavigationState(animatedViewport, nextRotationDeg);
+            viewAnimationFrameRef.current = window.requestAnimationFrame(step);
+        };
+        viewAnimationFrameRef.current = window.requestAnimationFrame(step);
+    }, [applyNavigationState]);
+    const applyNavigationView = useCallback((localCenter, userRotationDeg, viewWidth, options) => {
+        const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current;
+        if (!currentViewport)
+            return;
+        const nextSceneRotationDeg = baselineRotationDeg + userRotationDeg - worldRotationDeg;
+        const centerSvg = rotateFloorplanPoint(localCenter, nextSceneRotationDeg);
+        const nextWidth = resolveFloorplanViewWidth(viewWidth ?? currentViewport.width, currentViewport.width, latestFittedViewportRef.current, options?.clampViewWidth !== false);
+        const nextViewport = { centerX: centerSvg.x, centerY: centerSvg.y, width: nextWidth };
+        if (options?.smooth) {
+            animateNavigationState(nextViewport, userRotationDeg);
+        }
+        else {
+            stopViewAnimation();
+            applyNavigationState(nextViewport, userRotationDeg);
+        }
+    }, [
+        animateNavigationState,
+        applyNavigationState,
+        baselineRotationDeg,
+        stopViewAnimation,
+        worldRotationDeg,
+    ]);
+    const smoothNavigationView = useCallback((localCenter, userRotationDeg, viewWidth) => {
+        applyNavigationView(localCenter, userRotationDeg, viewWidth, { smooth: true });
+    }, [applyNavigationView]);
+    useEffect(() => () => stopViewAnimation(), [stopViewAnimation]);
+    const publishLocalNavigationPose = useCallback((localCenter, userRotationDeg, viewWidth) => {
+        const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current;
+        const resolvedViewWidth = viewWidth ?? currentViewport?.width;
+        if (!(resolvedViewWidth && resolvedViewWidth > 0))
+            return;
+        const worldCenter = floorplanLocalToWorldPoint(localCenter, worldOrigin, worldRotationY);
+        const targetY = latestNavigationPoseRef.current?.target[1] ?? planeWorldY;
+        publishNavigationPose({
+            source: '2d',
+            target: [worldCenter.x, targetY, worldCenter.z],
+            azimuth: cameraAzimuthFromFloorplanRotation(userRotationDeg, baselineRotationDeg),
+            viewWidth: resolvedViewWidth,
+        });
+    }, [baselineRotationDeg, planeWorldY, publishNavigationPose, worldOrigin, worldRotationY]);
+    const applyNavigationSyncPresentation = useCallback((pose) => {
+        const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current;
+        const svg = svgRef.current;
+        if (!(currentViewport && svg))
+            return;
+        let presentationState = navigationSyncPresentationRef.current;
+        if (!presentationState) {
+            const initialUserRotationDeg = latestUserRotationDegRef.current;
+            const initialSceneRotationDeg = baselineRotationDeg + initialUserRotationDeg - worldRotationDeg;
+            presentationState = {
+                initialUserRotationDeg,
+                initialSceneRotationDeg,
+                latestUserRotationDeg: initialUserRotationDeg,
+                latestSceneRotationDeg: initialSceneRotationDeg,
+                latestViewport: currentViewport,
+                svg,
+                svgStyle: {
+                    transform: svg.style.transform,
+                    transformOrigin: svg.style.transformOrigin,
+                    willChange: svg.style.willChange,
+                },
+            };
+            navigationSyncPresentationRef.current = presentationState;
+            viewportInteractionInProgressRef.current = true;
+            svg.style.transformOrigin = 'center';
+            svg.style.willChange = 'transform';
+        }
+        const nextUserRotationDeg = floorplanRotationFromCameraAzimuth(pose.azimuth, presentationState.latestUserRotationDeg, baselineRotationDeg);
+        const localCenter = worldToFloorplanLocalPoint(pose.target[0], pose.target[2], worldOrigin, worldRotationY);
+        const nextWidth = resolveFloorplanViewWidth(pose.viewWidth, currentViewport.width, latestFittedViewportRef.current, false);
+        const nextSceneRotationDeg = baselineRotationDeg + nextUserRotationDeg - worldRotationDeg;
+        const nextCenterSvg = rotateFloorplanPoint(localCenter, nextSceneRotationDeg);
+        const nextViewport = { centerX: nextCenterSvg.x, centerY: nextCenterSvg.y, width: nextWidth };
+        const presentationCenterSvg = rotateFloorplanPoint(localCenter, presentationState.initialSceneRotationDeg);
+        applyViewportImperatively({
+            centerX: presentationCenterSvg.x,
+            centerY: presentationCenterSvg.y,
+            width: nextWidth,
+        });
+        svg.style.transform = `rotate(${nextUserRotationDeg - presentationState.initialUserRotationDeg}deg)`;
+        latestUserRotationDegRef.current = nextUserRotationDeg;
+        latestViewportRef.current = nextViewport;
+        presentationState.latestUserRotationDeg = nextUserRotationDeg;
+        presentationState.latestSceneRotationDeg = nextSceneRotationDeg;
+        presentationState.latestViewport = nextViewport;
+    }, [applyViewportImperatively, baselineRotationDeg, worldOrigin, worldRotationDeg, worldRotationY]);
+    const commitNavigationSyncPresentation = useCallback((_pose) => {
+        const presentationState = navigationSyncPresentationRef.current;
+        if (!presentationState)
+            return;
+        applyViewportImperatively(presentationState.latestViewport);
+        const scene = sceneRef.current;
+        if (scene) {
+            if (presentationState.latestSceneRotationDeg === 0) {
+                scene.removeAttribute('transform');
+            }
+            else {
+                scene.setAttribute('transform', `rotate(${presentationState.latestSceneRotationDeg})`);
+            }
+        }
+        restoreFloorplanNavigationSyncPresentation(presentationState);
+        navigationSyncPresentationRef.current = null;
+        viewportInteractionInProgressRef.current = false;
+        imperativeViewBoxRef.current = null;
+        setFloorplanUserRotationDeg((current) => current === presentationState.latestUserRotationDeg
+            ? current
+            : presentationState.latestUserRotationDeg);
+        setViewport((current) => floorplanViewportEquals(current, presentationState.latestViewport)
+            ? current
+            : presentationState.latestViewport);
+    }, [applyViewportImperatively]);
+    applyNavigationSyncPresentationRef.current = applyNavigationSyncPresentation;
+    commitNavigationSyncPresentationRef.current = commitNavigationSyncPresentation;
+    if (!navigationSyncSchedulerRef.current) {
+        navigationSyncSchedulerRef.current = createFloorplanNavigationSyncScheduler({
+            applyPresentation: (pose) => applyNavigationSyncPresentationRef.current(pose),
+            commit: (pose) => commitNavigationSyncPresentationRef.current(pose),
+        });
+    }
+    const navigationSyncScheduler = navigationSyncSchedulerRef.current;
+    const discardNavigationSyncPresentation = useCallback(() => {
+        navigationSyncScheduler.discard();
+        const presentationState = navigationSyncPresentationRef.current;
+        if (presentationState) {
+            restoreFloorplanNavigationSyncPresentation(presentationState);
+            navigationSyncPresentationRef.current = null;
+        }
+        viewportInteractionInProgressRef.current = false;
+        imperativeViewBoxRef.current = null;
+    }, [navigationSyncScheduler]);
+    const syncViewportToNavigationPose = useCallback((pose) => {
+        if (!activeRef.current)
+            return;
+        const localNavigationInProgress = viewportInteractionInProgressRef.current && navigationSyncPresentationRef.current === null;
+        if (!canApplyFloorplanNavigationSync(localNavigationInProgress))
+            return;
+        if (!hasContent && !(surfaceSize.width > 1 && surfaceSize.height > 1))
+            return;
+        let scheduledPose = pose;
+        if (!hasContent) {
+            const nextUserRotationDeg = floorplanRotationFromCameraAzimuth(pose.azimuth, latestUserRotationDegRef.current, baselineRotationDeg);
+            const navigationLocalCenter = worldToFloorplanLocalPoint(pose.target[0], pose.target[2], worldOrigin, worldRotationY);
+            const resolvedView = resolveFloorplanSyncedView({
+                emptyLocalCenter: { x: 0, y: 0 },
+                emptyViewWidth: resolveEmptyFloorplanViewWidth(svgAspectRatio),
+                hasAuthoredContent: false,
+                navigationLocalCenter,
+                navigationUserRotationDeg: nextUserRotationDeg,
+                navigationViewWidth: pose.viewWidth,
+            });
+            const worldCenter = floorplanLocalToWorldPoint(resolvedView.localCenter, worldOrigin, worldRotationY);
+            scheduledPose = {
+                ...pose,
+                target: [worldCenter.x, planeWorldY, worldCenter.z],
+                azimuth: cameraAzimuthFromFloorplanRotation(resolvedView.userRotationDeg, baselineRotationDeg),
+                viewWidth: resolvedView.viewWidth,
+            };
+            const blankKey = contentKey ?? 'blank-floorplan';
+            if (blankInitialViewPublishedForKeyRef.current !== blankKey) {
+                blankInitialViewPublishedForKeyRef.current = blankKey;
+                publishNavigationPose({
+                    source: '2d',
+                    target: [...scheduledPose.target],
+                    azimuth: scheduledPose.azimuth,
+                    viewWidth: scheduledPose.viewWidth,
+                });
+            }
+        }
+        navigationSyncScheduler.update(scheduledPose);
+    }, [
+        baselineRotationDeg,
+        contentKey,
+        hasContent,
+        navigationSyncScheduler,
+        planeWorldY,
+        publishNavigationPose,
+        surfaceSize.height,
+        surfaceSize.width,
+        svgAspectRatio,
+        worldOrigin,
+        worldRotationY,
+    ]);
+    const cancelHiddenCompassAnimation = useCallback(() => {
+        if (hiddenCompassAnimationRef.current !== null) {
+            cancelAnimationFrame(hiddenCompassAnimationRef.current);
+            hiddenCompassAnimationRef.current = null;
+        }
+    }, []);
+    const animateHiddenCompassNeedle = useCallback((targetDeg) => {
+        cancelHiddenCompassAnimation();
+        let last = performance.now();
+        const tick = (now) => {
+            hiddenCompassAnimationRef.current = null;
+            if (activeRef.current)
+                return;
+            const deltaMs = now - last;
+            last = now;
+            const currentDeg = latestUserRotationDegRef.current;
+            const decay = Math.exp(-deltaMs / FLOORPLAN_VIEW_ANIMATION_TIME_CONSTANT_MS);
+            let nextDeg = targetDeg - (targetDeg - currentDeg) * decay;
+            if (Math.abs(targetDeg - nextDeg) < 0.05)
+                nextDeg = targetDeg;
+            latestUserRotationDegRef.current = nextDeg;
+            setFloorplanCompassRotation(compassNeedleRef.current, nextDeg);
+            if (nextDeg !== targetDeg) {
+                hiddenCompassAnimationRef.current = requestAnimationFrame(tick);
+            }
+        };
+        hiddenCompassAnimationRef.current = requestAnimationFrame(tick);
+    }, [cancelHiddenCompassAnimation]);
+    const receiveNavigationPose = useCallback((pose) => {
+        const previousPose = latestNavigationPoseRef.current;
+        if (previousPose?.source === pose.source && previousPose.revision === pose.revision)
+            return;
+        latestNavigationPoseRef.current = pose;
+        if (!activeRef.current) {
+            const nextDeg = floorplanRotationFromCameraAzimuth(pose.azimuth, latestUserRotationDegRef.current, baselineRotationDeg);
+            if (pose.source === '3d') {
+                cancelHiddenCompassAnimation();
+                latestUserRotationDegRef.current = nextDeg;
+                setFloorplanCompassRotation(compassNeedleRef.current, nextDeg);
+            }
+            else {
+                animateHiddenCompassNeedle(nextDeg);
+            }
+            return;
+        }
+        if (pose.source === '3d')
+            syncViewportToNavigationPose(pose);
+    }, [
+        animateHiddenCompassNeedle,
+        baselineRotationDeg,
+        cancelHiddenCompassAnimation,
+        syncViewportToNavigationPose,
+    ]);
+    useEffect(() => subscribeNavigationPose(receiveNavigationPose), [receiveNavigationPose, subscribeNavigationPose]);
+    useLayoutEffect(() => {
+        const wasActive = previousActiveRef.current;
+        previousActiveRef.current = active;
+        if (!active || wasActive)
+            return;
+        const pose = latestNavigationPoseRef.current;
+        if (pose?.source === '3d') {
+            syncViewportToNavigationPose(activationAzimuth === null ? pose : { ...pose, azimuth: activationAzimuth });
+        }
+    }, [activationAzimuth, active, syncViewportToNavigationPose]);
+    useEffect(() => {
+        if (active)
+            return;
+        discardNavigationSyncPresentation();
+    }, [active, discardNavigationSyncPresentation]);
+    useEffect(() => () => {
+        discardNavigationSyncPresentation();
+        cancelHiddenCompassAnimation();
+    }, [cancelHiddenCompassAnimation, discardNavigationSyncPresentation]);
+    useLayoutEffect(() => {
+        if (!active) {
+            setFloorplanCompassRotation(compassNeedleRef.current, latestUserRotationDegRef.current);
+        }
+    });
+    useEffect(() => {
+        const contentChanged = previousContentKeyRef.current !== contentKey;
+        if (contentChanged) {
+            previousContentKeyRef.current = contentKey;
+            if (!latestNavigationPoseRef.current) {
+                stopViewAnimation();
+                hasUserAdjustedViewportRef.current = false;
+                latestUserRotationDegRef.current = 0;
+                latestViewportRef.current = null;
+                setFloorplanUserRotationDeg(0);
+                setViewport(null);
+            }
+            return;
+        }
+        if (!(hasUserAdjustedViewportRef.current || fitSuspended())) {
+            setViewport((current) => floorplanViewportEquals(current, fittedViewport) ? current : fittedViewport);
+        }
+    }, [contentKey, fitSuspended, fittedViewport, stopViewAnimation]);
+    const viewBox = useMemo(() => {
+        const currentViewport = viewport ?? fittedViewport;
+        const width = currentViewport.width;
+        const height = width / svgAspectRatio;
+        return {
+            minX: currentViewport.centerX - width / 2,
+            minY: currentViewport.centerY - height / 2,
+            width,
+            height,
+        };
+    }, [fittedViewport, svgAspectRatio, viewport]);
+    const presentationViewBox = resolveFloorplanPresentationViewBox(viewBox, imperativeViewBoxRef.current, viewportInteractionInProgressRef.current);
+    const paintViewBox = getFloorplanRotationOverscanViewBox(viewBox);
+    const presentationPaintViewBox = getFloorplanRotationOverscanViewBox(presentationViewBox);
+    const worldUnitsPerPixel = useMemo(() => {
+        const widthUnitsPerPixel = viewBox.width / Math.max(surfaceSize.width, 1);
+        const heightUnitsPerPixel = viewBox.height / Math.max(surfaceSize.height, 1);
+        return (widthUnitsPerPixel + heightUnitsPerPixel) / 2;
+    }, [surfaceSize.height, surfaceSize.width, viewBox.height, viewBox.width]);
+    const getLiveUnitsPerPixel = useCallback(() => {
+        const width = latestViewportRef.current?.width ?? viewBox.width;
+        const height = width / svgAspectRatio;
+        const widthUnitsPerPixel = width / Math.max(surfaceSize.width, 1);
+        const heightUnitsPerPixel = height / Math.max(surfaceSize.height, 1);
+        return (widthUnitsPerPixel + heightUnitsPerPixel) / 2;
+    }, [surfaceSize.height, surfaceSize.width, svgAspectRatio, viewBox.width]);
+    const liveUnitsPerPixel = viewBox.width / Math.max(surfaceSize.width, 1);
+    const unitsPerPixel = renderUnitsPerPixel ?? liveUnitsPerPixel;
+    latestRenderUnitsPerPixelRef.current = unitsPerPixel;
+    const getScenePointFromClientPoint = useCallback((clientX, clientY) => {
+        const svg = svgRef.current;
+        const target = sceneRef.current ?? svg;
+        const ctm = target?.getScreenCTM();
+        if (!(svg && ctm))
+            return null;
+        const screenPoint = svg.createSVGPoint();
+        screenPoint.x = clientX;
+        screenPoint.y = clientY;
+        const transformedPoint = screenPoint.matrixTransform(ctm.inverse());
+        return { x: transformedPoint.x, y: transformedPoint.y };
+    }, []);
+    const alignToNorth = useCallback(() => {
+        if (!activeRef.current) {
+            const pose = latestNavigationPoseRef.current;
+            if (!pose)
+                return;
+            const currentRotation = latestUserRotationDegRef.current;
+            publishNavigationPose({
+                source: '2d',
+                target: [...pose.target],
+                azimuth: cameraAzimuthFromFloorplanRotation(nearestEquivalentDegrees(0, currentRotation), baselineRotationDeg),
+                viewWidth: pose.viewWidth,
+            });
+            return;
+        }
+        const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current;
+        if (!currentViewport)
+            return;
+        const currentUserRotationDeg = latestUserRotationDegRef.current;
+        const currentSceneRotationDeg = baselineRotationDeg + currentUserRotationDeg - worldRotationDeg;
+        const localCenter = rotateFloorplanPoint({ x: currentViewport.centerX, y: currentViewport.centerY }, -currentSceneRotationDeg);
+        const nextUserRotationDeg = nearestEquivalentDegrees(0, currentUserRotationDeg);
+        smoothNavigationView(localCenter, nextUserRotationDeg, currentViewport.width);
+        publishLocalNavigationPose(localCenter, nextUserRotationDeg, currentViewport.width);
+    }, [
+        baselineRotationDeg,
+        publishLocalNavigationPose,
+        publishNavigationPose,
+        smoothNavigationView,
+        worldRotationDeg,
+    ]);
+    const applyRotationImperatively = useCallback((rotationState, nextUserRotationDeg) => {
+        const currentViewport = latestViewportRef.current ?? rotationState.latestViewport;
+        const nextSceneRotationDeg = baselineRotationDeg + nextUserRotationDeg - worldRotationDeg;
+        const nextCenterSvg = rotateFloorplanPoint(rotationState.viewportCenterLocal, nextSceneRotationDeg);
+        const nextViewport = {
+            centerX: nextCenterSvg.x,
+            centerY: nextCenterSvg.y,
+            width: currentViewport.width,
+        };
+        hasUserAdjustedViewportRef.current = true;
+        latestUserRotationDegRef.current = nextUserRotationDeg;
+        latestViewportRef.current = nextViewport;
+        setFloorplanCompassRotation(compassNeedleRef.current, nextUserRotationDeg);
+        rotationState.svg.style.transform = `rotate(${nextUserRotationDeg - rotationState.initialUserRotationDeg}deg)`;
+        rotationState.latestUserRotationDeg = nextUserRotationDeg;
+        rotationState.latestViewport = nextViewport;
+    }, [baselineRotationDeg, worldRotationDeg]);
+    const commitZoom = useCallback(() => {
+        if (zoomCommitTimerRef.current !== null) {
+            window.clearTimeout(zoomCommitTimerRef.current);
+            zoomCommitTimerRef.current = null;
+        }
+        const nextViewport = latestViewportRef.current;
+        const pendingPose = zoomPoseRef.current;
+        zoomPoseRef.current = null;
+        viewportInteractionInProgressRef.current = false;
+        imperativeViewBoxRef.current = null;
+        if (!nextViewport)
+            return;
+        setRenderUnitsPerPixel((current) => current ?? latestRenderUnitsPerPixelRef.current);
+        setViewport((current) => floorplanViewportEquals(current, nextViewport) ? current : nextViewport);
+        if (renderScaleCommitTimerRef.current !== null) {
+            window.clearTimeout(renderScaleCommitTimerRef.current);
+        }
+        renderScaleCommitTimerRef.current = window.setTimeout(() => {
+            renderScaleCommitTimerRef.current = null;
+            setRenderUnitsPerPixel(null);
+        }, 350);
+        if (pendingPose) {
+            publishLocalNavigationPose(pendingPose.localCenter, pendingPose.userRotationDeg, pendingPose.viewWidth);
+        }
+    }, [publishLocalNavigationPose]);
+    const scheduleZoomCommit = useCallback(() => {
+        if (zoomCommitTimerRef.current !== null)
+            window.clearTimeout(zoomCommitTimerRef.current);
+        zoomCommitTimerRef.current = window.setTimeout(commitZoom, 300);
+    }, [commitZoom]);
+    const zoomViewportAtClientPoint = useCallback((clientX, clientY, widthFactor) => {
+        if (!canZoomFloorplanDuringNavigation(rotationStateRef.current !== null))
+            return;
+        if (!Number.isFinite(widthFactor) || widthFactor <= 0)
+            return;
+        const localPoint = getScenePointFromClientPoint(clientX, clientY);
+        if (!localPoint)
+            return;
+        const currentSceneRotationDeg = baselineRotationDeg + latestUserRotationDegRef.current - worldRotationDeg;
+        const svgPoint = rotateFloorplanPoint(localPoint, currentSceneRotationDeg);
+        const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current;
+        if (!currentViewport)
+            return;
+        const currentViewBox = {
+            minX: currentViewport.centerX - currentViewport.width / 2,
+            minY: currentViewport.centerY - currentViewport.width / svgAspectRatio / 2,
+            width: currentViewport.width,
+            height: currentViewport.width / svgAspectRatio,
+        };
+        const nextWidth = resolveFloorplanViewWidth(currentViewport.width * widthFactor, currentViewport.width, latestFittedViewportRef.current, true);
+        const nextHeight = nextWidth / svgAspectRatio;
+        const normalizedX = (svgPoint.x - currentViewBox.minX) / currentViewBox.width;
+        const normalizedY = (svgPoint.y - currentViewBox.minY) / currentViewBox.height;
+        const nextMinX = svgPoint.x - normalizedX * nextWidth;
+        const nextMinY = svgPoint.y - normalizedY * nextHeight;
+        const nextCenterSvg = {
+            x: nextMinX + nextWidth / 2,
+            y: nextMinY + nextHeight / 2,
+        };
+        const localCenter = rotateFloorplanPoint(nextCenterSvg, -currentSceneRotationDeg);
+        const nextViewport = {
+            centerX: nextCenterSvg.x,
+            centerY: nextCenterSvg.y,
+            width: nextWidth,
+        };
+        stopViewAnimation();
+        if (renderScaleCommitTimerRef.current !== null) {
+            window.clearTimeout(renderScaleCommitTimerRef.current);
+            renderScaleCommitTimerRef.current = null;
+        }
+        viewportInteractionInProgressRef.current = true;
+        applyViewportImperatively(nextViewport);
+        scheduleZoomCommit();
+        const userRotationDeg = latestUserRotationDegRef.current;
+        zoomPoseRef.current = { localCenter, userRotationDeg, viewWidth: nextWidth };
+        if (publishContinuously()) {
+            publishLocalNavigationPose(localCenter, userRotationDeg, nextWidth);
+        }
+    }, [
+        applyViewportImperatively,
+        baselineRotationDeg,
+        getScenePointFromClientPoint,
+        publishContinuously,
+        publishLocalNavigationPose,
+        scheduleZoomCommit,
+        stopViewAnimation,
+        svgAspectRatio,
+        worldRotationDeg,
+    ]);
+    const commitPan = useCallback(() => {
+        const nextViewport = latestViewportRef.current;
+        const pendingPose = panPoseRef.current;
+        panPoseRef.current = null;
+        viewportInteractionInProgressRef.current = false;
+        imperativeViewBoxRef.current = null;
+        if (nextViewport) {
+            setViewport((current) => floorplanViewportEquals(current, nextViewport) ? current : nextViewport);
+        }
+        if (pendingPose) {
+            publishLocalNavigationPose(pendingPose.localCenter, pendingPose.userRotationDeg, pendingPose.viewWidth);
+        }
+    }, [publishLocalNavigationPose]);
+    const commitRotation = useCallback((rotationState) => {
+        viewportInteractionInProgressRef.current = false;
+        imperativeViewBoxRef.current = null;
+        queueFloorplanRotationPresentationRestore(pendingRotationRestoreRef, rotationState);
+        setFloorplanUserRotationDeg((current) => current === rotationState.latestUserRotationDeg
+            ? current
+            : rotationState.latestUserRotationDeg);
+        setViewport((current) => floorplanViewportEquals(current, rotationState.latestViewport)
+            ? current
+            : rotationState.latestViewport);
+        publishLocalNavigationPose(rotationState.viewportCenterLocal, rotationState.latestUserRotationDeg, rotationState.latestViewport.width);
+    }, [publishLocalNavigationPose]);
+    useLayoutEffect(() => {
+        flushFloorplanRotationPresentationRestore(pendingRotationRestoreRef);
+    });
+    const endPointerNavigation = useCallback((event) => {
+        const wasPanning = panStateRef.current !== null;
+        const rotationState = rotationStateRef.current;
+        if (event &&
+            (panStateRef.current || rotationStateRef.current) &&
+            event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        panStateRef.current = null;
+        rotationStateRef.current = null;
+        if (wasPanning)
+            commitPan();
+        if (rotationState)
+            commitRotation(rotationState);
+        setIsPanning(false);
+        setIsRotating(false);
+        window.setTimeout(() => {
+            navigationClickSuppressedRef.current = false;
+        }, 0);
+    }, [commitPan, commitRotation]);
+    useEffect(() => {
+        if (active)
+            return;
+        blankInitialViewPublishedForKeyRef.current = null;
+        stopViewAnimation();
+        const rotationState = rotationStateRef.current;
+        finalizeFloorplanNavigation({
+            zoomPending: zoomCommitTimerRef.current !== null || zoomPoseRef.current !== null,
+            panActive: panStateRef.current !== null,
+            rotationState,
+            commitZoom,
+            commitPan,
+            commitRotation,
+        });
+        spacePanPressedRef.current = false;
+        panStateRef.current = null;
+        rotationStateRef.current = null;
+        viewportInteractionInProgressRef.current = false;
+        imperativeViewBoxRef.current = null;
+        setIsSpacePanPressed(false);
+        setIsPanning(false);
+        setIsRotating(false);
+    }, [active, commitPan, commitRotation, commitZoom, stopViewAnimation]);
+    useEffect(() => {
+        if (!active)
+            return;
+        setMeasuredSceneBBox(null);
+        if (!latestNavigationPoseRef.current) {
+            stopViewAnimation();
+            hasUserAdjustedViewportRef.current = false;
+            latestUserRotationDegRef.current = 0;
+            latestViewportRef.current = null;
+            setFloorplanUserRotationDeg(0);
+            setViewport(null);
+        }
+    }, [active, stopViewAnimation]);
+    useEffect(() => () => {
+        if (zoomCommitTimerRef.current !== null)
+            window.clearTimeout(zoomCommitTimerRef.current);
+        if (renderScaleCommitTimerRef.current !== null) {
+            window.clearTimeout(renderScaleCommitTimerRef.current);
+        }
+        viewportInteractionInProgressRef.current = false;
+        imperativeViewBoxRef.current = null;
+    }, []);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            const target = event.target;
+            const isEditableTarget = target instanceof HTMLInputElement ||
+                target instanceof HTMLTextAreaElement ||
+                target instanceof HTMLSelectElement ||
+                Boolean(target?.isContentEditable);
+            if (isEditableTarget)
+                return;
+            if (event.code === 'Space' && active) {
+                event.preventDefault();
+                spacePanPressedRef.current = true;
+                setIsSpacePanPressed(true);
+            }
+        };
+        const handleKeyUp = (event) => {
+            if (event.code === 'Space') {
+                spacePanPressedRef.current = false;
+                setIsSpacePanPressed(false);
+            }
+        };
+        const handleBlur = () => {
+            spacePanPressedRef.current = false;
+            setIsSpacePanPressed(false);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        window.addEventListener('blur', handleBlur);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+            window.removeEventListener('blur', handleBlur);
+        };
+    }, [active]);
+    const handlePointerDownCapture = useCallback((event) => {
+        if (event.button === 1 || (event.button === 0 && spacePanPressedRef.current)) {
+            event.preventDefault();
+            event.stopPropagation();
+            navigationSyncScheduler.flush();
+            if (zoomCommitTimerRef.current !== null)
+                commitZoom();
+            stopViewAnimation();
+            navigationClickSuppressedRef.current = true;
+            const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current;
+            if (!currentViewport)
+                return;
+            viewportInteractionInProgressRef.current = true;
+            panStateRef.current = {
+                pointerId: event.pointerId,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                centerSvg: { x: currentViewport.centerX, y: currentViewport.centerY },
+            };
+            setIsPanning(true);
+            onNavigationStart?.();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            return;
+        }
+        if (event.button !== 2)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        navigationSyncScheduler.flush();
+        if (zoomCommitTimerRef.current !== null)
+            commitZoom();
+        stopViewAnimation();
+        const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current;
+        const svg = svgRef.current;
+        if (!(currentViewport && svg))
+            return;
+        const currentUserRotationDeg = latestUserRotationDegRef.current;
+        const currentSceneRotationDeg = baselineRotationDeg + currentUserRotationDeg - worldRotationDeg;
+        const viewportCenterLocal = rotateFloorplanPoint({ x: currentViewport.centerX, y: currentViewport.centerY }, -currentSceneRotationDeg);
+        const svgStyle = {
+            transform: svg.style.transform,
+            transformOrigin: svg.style.transformOrigin,
+            willChange: svg.style.willChange,
+        };
+        viewportInteractionInProgressRef.current = true;
+        svg.style.transformOrigin = 'center';
+        svg.style.willChange = 'transform';
+        rotationStateRef.current = {
+            pointerId: event.pointerId,
+            startClientX: event.clientX,
+            initialUserRotationDeg: currentUserRotationDeg,
+            viewportCenterLocal,
+            svg,
+            svgStyle,
+            latestUserRotationDeg: currentUserRotationDeg,
+            latestViewport: currentViewport,
+        };
+        setIsRotating(true);
+        onNavigationStart?.();
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }, [
+        baselineRotationDeg,
+        commitZoom,
+        navigationSyncScheduler,
+        onNavigationStart,
+        stopViewAnimation,
+        worldRotationDeg,
+    ]);
+    const handlePointerMove = useCallback((event) => {
+        const rotationState = rotationStateRef.current;
+        if (rotationState?.pointerId === event.pointerId) {
+            event.preventDefault();
+            event.stopPropagation();
+            const angleDeltaDeg = (rotationState.startClientX - event.clientX) * FLOORPLAN_ROTATION_DEGREES_PER_PIXEL;
+            const nextUserRotationDeg = rotationState.initialUserRotationDeg + angleDeltaDeg;
+            applyRotationImperatively(rotationState, nextUserRotationDeg);
+            if (publishContinuously()) {
+                publishLocalNavigationPose(rotationState.viewportCenterLocal, nextUserRotationDeg, rotationState.latestViewport.width);
+            }
+            return true;
+        }
+        const panState = panStateRef.current;
+        if (panState?.pointerId === event.pointerId) {
+            event.preventDefault();
+            event.stopPropagation();
+            const deltaX = event.clientX - panState.clientX;
+            const deltaY = event.clientY - panState.clientY;
+            const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current;
+            if (!currentViewport)
+                return true;
+            const currentHeight = currentViewport.width / svgAspectRatio;
+            const worldPerPixelX = currentViewport.width / surfaceSize.width;
+            const worldPerPixelY = currentHeight / surfaceSize.height;
+            const nextCenterSvg = {
+                x: panState.centerSvg.x - deltaX * worldPerPixelX,
+                y: panState.centerSvg.y - deltaY * worldPerPixelY,
+            };
+            const currentUserRotationDeg = latestUserRotationDegRef.current;
+            const currentSceneRotationDeg = baselineRotationDeg + currentUserRotationDeg - worldRotationDeg;
+            const localCenter = rotateFloorplanPoint(nextCenterSvg, -currentSceneRotationDeg);
+            const nextViewport = {
+                centerX: nextCenterSvg.x,
+                centerY: nextCenterSvg.y,
+                width: currentViewport.width,
+            };
+            applyViewportImperatively(nextViewport);
+            panPoseRef.current = {
+                localCenter,
+                userRotationDeg: currentUserRotationDeg,
+                viewWidth: currentViewport.width,
+            };
+            if (publishContinuously()) {
+                publishLocalNavigationPose(localCenter, currentUserRotationDeg, currentViewport.width);
+            }
+            panStateRef.current = {
+                pointerId: event.pointerId,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                centerSvg: nextCenterSvg,
+            };
+            return true;
+        }
+        return false;
+    }, [
+        applyRotationImperatively,
+        applyViewportImperatively,
+        baselineRotationDeg,
+        publishContinuously,
+        publishLocalNavigationPose,
+        surfaceSize.height,
+        surfaceSize.width,
+        svgAspectRatio,
+        worldRotationDeg,
+    ]);
+    useEffect(() => {
+        const svg = svgRef.current;
+        if (!svg)
+            return;
+        const getFallbackClientPoint = () => {
+            const rect = svg.getBoundingClientRect();
+            return { clientX: rect.left + rect.width / 2, clientY: rect.top + rect.height / 2 };
+        };
+        const handleNativeWheel = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            navigationSyncScheduler.flush();
+            const widthFactor = Math.exp(event.deltaY * (event.ctrlKey ? 0.003 : 0.0015));
+            zoomViewportAtClientPoint(event.clientX, event.clientY, widthFactor);
+        };
+        const handleGestureStart = (event) => {
+            navigationSyncScheduler.flush();
+            const gestureEvent = event;
+            gestureScaleRef.current = gestureEvent.scale ?? 1;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        const handleGestureChange = (event) => {
+            const gestureEvent = event;
+            const nextScale = gestureEvent.scale ?? 1;
+            const previousScale = gestureScaleRef.current || 1;
+            const widthFactor = previousScale / nextScale;
+            const fallbackClientPoint = getFallbackClientPoint();
+            zoomViewportAtClientPoint(gestureEvent.clientX ?? fallbackClientPoint.clientX, gestureEvent.clientY ?? fallbackClientPoint.clientY, widthFactor);
+            gestureScaleRef.current = nextScale;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        const handleGestureEnd = (event) => {
+            gestureScaleRef.current = 1;
+            commitZoom();
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        return __testFloorplanNavigationNativeEvents.register(svg, {
+            wheel: handleNativeWheel,
+            gesturestart: handleGestureStart,
+            gesturechange: handleGestureChange,
+            gestureend: handleGestureEnd,
+        });
+    }, [commitZoom, navigationSyncScheduler, zoomViewportAtClientPoint]);
+    return {
+        active,
+        alignToNorth,
+        averageUnitsPerPixel: worldUnitsPerPixel,
+        backgroundRef,
+        compassNeedleRef,
+        contentRef,
+        floorplanUserRotationDeg,
+        getLiveUnitsPerPixel,
+        getScenePointFromClientPoint,
+        getSceneRotationDeg,
+        handlePointerDownCapture,
+        handlePointerMove,
+        isNavigating: isPanning || isRotating,
+        navigationCursor: isPanning || isRotating ? 'grabbing' : isSpacePanPressed ? 'grab' : null,
+        navigationOverlayVisible: isSpacePanPressed || isPanning || isRotating,
+        paintViewBox,
+        presentationPaintViewBox,
+        presentationViewBox,
+        sceneRef,
+        sceneRotationDeg,
+        consumeSuppressedClick: () => {
+            if (!navigationClickSuppressedRef.current)
+                return false;
+            navigationClickSuppressedRef.current = false;
+            return true;
+        },
+        surfaceSize,
+        svgRef,
+        unitsPerPixel,
+        viewBox,
+        viewportHostRef,
+        endPointerNavigation,
+    };
+}
+function FloorplanCompassButton({ label, navigation, }) {
+    return (_jsx("button", { "aria-label": label, className: "group absolute bottom-3 left-3 z-30 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white/85 shadow-sm backdrop-blur-md transition hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-neutral-900/85 dark:hover:bg-neutral-900", onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            navigation.alignToNorth();
+        }, onPointerDown: (event) => event.stopPropagation(), type: "button", children: _jsx("span", { className: "relative flex h-6 w-6 items-center justify-center rounded-full bg-[#b8b8b8] shadow-inner dark:bg-neutral-700", children: _jsxs("svg", { "aria-hidden": "true", className: "h-6 w-6", ref: navigation.compassNeedleRef, style: { transform: `rotate(${navigation.floorplanUserRotationDeg}deg)` }, viewBox: "0 0 48 48", children: [_jsx("path", { d: "M24 4.5 31.5 25 24 21.5 16.5 25Z", fill: "#f15b5b" }), _jsx("path", { d: "M24 43.5 16.5 23 24 26.5 31.5 23Z", fill: "#ffffff" })] }) }) }));
+}
+export function FloorplanNavigationShell({ active, available, backgroundFill, children, compassHost, compassLabel, definitions, emptyState, navigation, onClick, onPointerMove, overlays, renderCompassTooltip, style, ...svgProps }) {
+    const compassButton = _jsx(FloorplanCompassButton, { label: compassLabel, navigation: navigation });
+    const compass = renderCompassTooltip
+        ? renderCompassTooltip(compassButton, compassLabel)
+        : compassButton;
+    return (_jsxs("div", { className: "relative min-h-0 flex-1 bg-white", ref: navigation.viewportHostRef, children: [overlays, available && (compassHost ? createPortal(compass, compassHost) : compass), !available ? (emptyState) : active ? (_jsxs("svg", { ...svgProps, className: "h-full w-full touch-none", "data-pascal-floorplan-2d": "", onClick: (event) => {
+                    if (navigation.consumeSuppressedClick()) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        return;
+                    }
+                    onClick?.(event);
+                }, onPointerCancel: navigation.endPointerNavigation, onPointerDownCapture: navigation.handlePointerDownCapture, onPointerMove: (event) => {
+                    if (!navigation.handlePointerMove(event))
+                        onPointerMove?.(event);
+                }, onPointerUp: navigation.endPointerNavigation, ref: navigation.svgRef, style: {
+                    ...style,
+                    cursor: navigation.navigationCursor ?? style?.cursor,
+                    overflow: 'visible',
+                }, viewBox: `${navigation.presentationViewBox.minX} ${navigation.presentationViewBox.minY} ${navigation.presentationViewBox.width} ${navigation.presentationViewBox.height}`, children: [definitions, _jsx("rect", { fill: backgroundFill, height: navigation.presentationPaintViewBox.height, ref: navigation.backgroundRef, width: navigation.presentationPaintViewBox.width, x: navigation.presentationPaintViewBox.minX, y: navigation.presentationPaintViewBox.minY }), _jsx("g", { "data-floorplan-scene": "", ref: navigation.sceneRef, transform: navigation.sceneRotationDeg !== 0
+                            ? `rotate(${navigation.sceneRotationDeg})`
+                            : undefined, children: children }), navigation.navigationOverlayVisible ? (_jsx("rect", { fill: "transparent", height: navigation.presentationViewBox.height, pointerEvents: "all", style: { cursor: navigation.navigationCursor ?? 'grab' }, width: navigation.presentationViewBox.width, x: navigation.presentationViewBox.minX, y: navigation.presentationViewBox.minY })) : null] })) : null] }));
+}