@pascal-app/viewer 1.0.7 → 1.1.1

package/dist/ui/floorplan/floorplan-preview.js

@@ -0,0 +1,700 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildFloorplanContext, FLOORPLAN_VIEW_ROTATION_DEG, floorplanLayerRank, floorplanLocalToWorldPoint, isNodeKindEnabled, nodeRegistry, useLocale, usePascalI18n, useScene, worldToFloorplanLocalPoint, } from '@pascal-app/core';
+import { AnyNode as AnyNodeSchema } from '@pascal-app/core/schema';
+import { Maximize2, Minus, Plus } from 'lucide-react';
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import useViewer from '../../store/use-viewer';
+import { FloorplanCompassButton } from '../components/floorplan-compass-button';
+import { localizedLevelName } from '../lib/level-name';
+import { publishNavigationSyncPose, subscribeNavigationSyncPose, } from '../store/navigation-sync-pose-store';
+import { subscribeFloorplanCameraNavigation, useFloorplanCameraSyncBridge, } from './floorplan-camera-sync';
+import { FloorplanGeometryRenderer } from './floorplan-geometry-renderer';
+import { createFloorplanNavigationSyncScheduler, setFloorplanCompassRotation, } from './floorplan-navigation-sync';
+import { getFloorplanBounds, padFloorplanBounds, panFloorplanViewBox, scaleFloorplanViewBox, scaleFloorplanViewBoxBetweenClients, } from './floorplan-preview-geometry';
+import { cameraAzimuthFromFloorplanRotation, floorplanRotationFromCameraAzimuth, floorplanViewBoxFromNavigationPose, nearestEquivalentDegrees, rotateFloorplanPoint, visibleFloorplanViewWidth, } from './floorplan-preview-navigation';
+import { isVisibleInFloorplan } from './floorplan-preview-visibility';
+const READ_ONLY_PALETTE = {
+    selectedStroke: '#4f46e5',
+    selectedFill: '#e0e7ff',
+    selectedHatch: '#818cf8',
+    wallHoverStroke: '#64748b',
+    endpointHandleFill: '#ffffff',
+    endpointHandleStroke: '#f97316',
+    endpointHandleHoverStroke: '#fb923c',
+    endpointHandleActiveFill: '#fed7aa',
+    endpointHandleActiveStroke: '#ea580c',
+    curveHandleFill: '#ffffff',
+    curveHandleStroke: '#0d9488',
+    curveHandleHoverStroke: '#14b8a6',
+    measurementStroke: '#475569',
+    measurementLabelBackground: '#ffffff',
+    measurementLabelText: '#0f172a',
+};
+const EMPTY_PREVIEW_NODES = {};
+const EMPTY_INSTALLED_PLUGINS = [];
+const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+function FloorplanCameraSyncMount() {
+    useFloorplanCameraSyncBridge();
+    return null;
+}
+function boundsToViewBox(bounds) {
+    return {
+        x: bounds.minX,
+        y: bounds.minY,
+        width: Math.max(bounds.maxX - bounds.minX, 1),
+        height: Math.max(bounds.maxY - bounds.minY, 1),
+    };
+}
+function collectLevelTree(root, nodes) {
+    const result = [root];
+    const seen = new Set();
+    const queue = [...(root.children ?? [])];
+    let index = 0;
+    while (index < queue.length) {
+        const id = queue[index++];
+        if (!id || seen.has(id))
+            continue;
+        seen.add(id);
+        const node = nodes[id];
+        if (!node)
+            continue;
+        result.push(node);
+        queue.push(...(node.children ?? []));
+    }
+    return result;
+}
+export function normalizeFloorplanPreviewNodes(nodes) {
+    const normalized = {};
+    for (const [id, node] of Object.entries(nodes)) {
+        const builtin = AnyNodeSchema.safeParse(node);
+        if (builtin.success) {
+            normalized[builtin.data.id] = builtin.data;
+            continue;
+        }
+        const type = node && typeof node === 'object' && !Array.isArray(node)
+            ? node.type
+            : null;
+        const registered = typeof type === 'string' ? nodeRegistry.get(type)?.schema.safeParse(node) : null;
+        if (registered?.success) {
+            const parsed = registered.data;
+            normalized[parsed.id] = parsed;
+        }
+        else {
+            console.warn(`[floorplan-preview] Skipping invalid node ${id}`, builtin.error.issues);
+        }
+    }
+    return normalized;
+}
+function buildFloorplanGeometries(nodes, installedPlugins, level, unit, metricNotation) {
+    const building = level.parentId ? nodes[level.parentId] : undefined;
+    const levelTree = collectLevelTree(level, nodes);
+    const entries = levelTree.map((node) => ({ node }));
+    const entryIds = new Set(entries.map((entry) => entry.node.id));
+    if (building) {
+        for (const candidate of Object.values(nodes)) {
+            const definition = nodeRegistry.get(candidate.type);
+            if (definition?.floorplanScope === 'building' &&
+                candidate.parentId === building.id &&
+                !entryIds.has(candidate.id)) {
+                entries.push({
+                    node: candidate,
+                    contextOverrides: { children: [], siblings: [], parent: level },
+                });
+                entryIds.add(candidate.id);
+            }
+        }
+    }
+    for (const candidate of Object.values(nodes)) {
+        const definition = nodeRegistry.get(candidate.type);
+        const linkedLevelIds = definition?.floorplanLinkedLevelIds;
+        if (definition?.floorplan &&
+            linkedLevelIds?.(candidate).includes(level.id) &&
+            !entryIds.has(candidate.id)) {
+            const childIds = candidate.children;
+            const children = Array.isArray(childIds)
+                ? childIds.map((id) => nodes[id]).filter((child) => child !== undefined)
+                : [];
+            entries.push({
+                node: candidate,
+                contextOverrides: { children, siblings: [], parent: level },
+            });
+            entryIds.add(candidate.id);
+        }
+    }
+    const renderable = entries
+        .filter((entry) => isVisibleInFloorplan(entry.node, nodes))
+        .filter((entry) => isNodeKindEnabled(entry.node.type, installedPlugins))
+        .filter((entry) => nodeRegistry.get(entry.node.type)?.floorplan)
+        .sort((a, b) => floorplanLayerRank(a.node.type) - floorplanLayerRank(b.node.type));
+    const byType = new Map();
+    for (const node of levelTree) {
+        if (!isNodeKindEnabled(node.type, installedPlugins))
+            continue;
+        if (!nodeRegistry.get(node.type)?.computeFloorplanLevelData)
+            continue;
+        const siblings = byType.get(node.type) ?? [];
+        siblings.push(node);
+        byType.set(node.type, siblings);
+    }
+    const levelData = new Map();
+    for (const [type, siblings] of byType) {
+        const definition = nodeRegistry.get(type);
+        if (definition?.computeFloorplanLevelData) {
+            levelData.set(type, definition.computeFloorplanLevelData({ siblings, nodes }));
+        }
+    }
+    const geometries = [];
+    for (const { node, contextOverrides } of renderable) {
+        const definition = nodeRegistry.get(node.type);
+        if (!definition?.floorplan)
+            continue;
+        const baseContext = buildFloorplanContext(node, nodes, {
+            automaticDimensions: false,
+            selected: false,
+            unit,
+            metricNotation,
+            purpose: 'document',
+            highlighted: false,
+            hovered: false,
+            moving: false,
+            palette: READ_ONLY_PALETTE,
+        }, levelData.get(node.type));
+        const context = contextOverrides ? { ...baseContext, ...contextOverrides } : baseContext;
+        try {
+            const geometry = definition.floorplan(node, context);
+            if (geometry) {
+                geometries.push({
+                    id: node.id,
+                    geometry,
+                    includeInInitialFit: definition.category !== 'furnish',
+                });
+            }
+        }
+        catch (error) {
+            console.error(`[floorplan-preview] Failed to render ${node.type}:${node.id}`, error);
+        }
+    }
+    return geometries;
+}
+export function FloorplanPreview({ className, compassHost, levelId, navigationVisible = true, onLevelChange, scene, showCompass = true, showLevelSelector = true, synchronizeNavigation = false, }) {
+    const i18n = usePascalI18n();
+    const locale = useLocale();
+    const storeNodes = useScene((state) => (scene ? EMPTY_PREVIEW_NODES : state.nodes));
+    const storeInstalledPlugins = useScene((state) => scene ? EMPTY_INSTALLED_PLUGINS : state.installedPlugins);
+    const unit = useViewer((state) => state.unit);
+    const metricNotation = useViewer((state) => state.metricNotation);
+    const externalNodes = useMemo(() => (scene?.nodes ? normalizeFloorplanPreviewNodes(scene.nodes) : null), [scene?.nodes]);
+    const nodes = externalNodes ?? storeNodes;
+    const installedPlugins = scene ? scene.installedPlugins : storeInstalledPlugins;
+    const levels = useMemo(() => Object.values(nodes)
+        .filter((node) => node.type === 'level')
+        .sort((a, b) => (a.level ?? 0) - (b.level ?? 0)), [nodes]);
+    const [internalLevelId, setInternalLevelId] = useState(null);
+    const activeLevelId = (levelId && levels.some((level) => level.id === levelId) ? levelId : null) ??
+        (internalLevelId && levels.some((level) => level.id === internalLevelId)
+            ? internalLevelId
+            : null) ??
+        levels[0]?.id ??
+        null;
+    const activeLevel = activeLevelId ? nodes[activeLevelId] : undefined;
+    const activeBuilding = activeLevel?.parentId
+        ? nodes[activeLevel.parentId]
+        : undefined;
+    const buildingPosition = useMemo(() => (activeBuilding?.type === 'building' ? activeBuilding.position : [0, 0, 0]), [activeBuilding]);
+    const buildingRotationY = activeBuilding?.type === 'building' ? activeBuilding.rotation[1] : 0;
+    const buildingRotationDeg = (buildingRotationY * 180) / Math.PI;
+    const renderEntries = useMemo(() => activeLevel
+        ? buildFloorplanGeometries(nodes, installedPlugins, activeLevel, unit, metricNotation)
+        : [], [activeLevel, installedPlugins, metricNotation, nodes, unit]);
+    const framingEntries = useMemo(() => {
+        const structural = renderEntries.filter((entry) => entry.includeInInitialFit);
+        return structural.length > 0 ? structural : renderEntries;
+    }, [renderEntries]);
+    const fitKey = `${activeLevelId ?? 'none'}:${framingEntries.map((entry) => entry.id).join('|')}`;
+    const geometricFitBounds = useMemo(() => getFloorplanBounds(framingEntries.map((entry) => entry.geometry)), [framingEntries]);
+    const [measuredFit, setMeasuredFit] = useState(null);
+    const fittedViewBox = useMemo(() => {
+        const bounds = measuredFit?.key === fitKey ? measuredFit.bounds : geometricFitBounds;
+        return bounds
+            ? boundsToViewBox(padFloorplanBounds(bounds))
+            : { x: -5, y: -5, width: 10, height: 10 };
+    }, [fitKey, geometricFitBounds, measuredFit]);
+    const [viewBox, setViewBox] = useState(fittedViewBox);
+    const viewBoxRef = useRef(viewBox);
+    const interactionRef = useRef(null);
+    const svgRef = useRef(null);
+    const gridRef = useRef(null);
+    const sceneRef = useRef(null);
+    const compassNeedleRef = useRef(null);
+    const fitElementRefs = useRef(new Map());
+    const pointersRef = useRef(new Map());
+    const dragRef = useRef(null);
+    const pinchRef = useRef(null);
+    const [isPanning, setIsPanning] = useState(false);
+    const [isRotating, setIsRotating] = useState(false);
+    const [viewportSize, setViewportSize] = useState({ width: 1000, height: 1000 });
+    const [rotationDeg, setRotationDeg] = useState(0);
+    const rotationDegRef = useRef(rotationDeg);
+    const latestNavigationPoseRef = useRef(null);
+    const gridPatternId = useId().replaceAll(':', '');
+    const updateViewBox = useCallback((update) => {
+        setViewBox((current) => {
+            const next = typeof update === 'function' ? update(current) : update;
+            viewBoxRef.current = next;
+            return next;
+        });
+    }, []);
+    const presentViewBox = useCallback((next) => {
+        viewBoxRef.current = next;
+        const value = `${next.x} ${next.y} ${next.width} ${next.height}`;
+        svgRef.current?.setAttribute('viewBox', value);
+        const grid = gridRef.current;
+        if (grid) {
+            grid.setAttribute('x', String(next.x));
+            grid.setAttribute('y', String(next.y));
+            grid.setAttribute('width', String(next.width));
+            grid.setAttribute('height', String(next.height));
+        }
+    }, []);
+    const presentRotation = useCallback((nextRotationDeg) => {
+        rotationDegRef.current = nextRotationDeg;
+        const sceneRotationDeg = FLOORPLAN_VIEW_ROTATION_DEG + nextRotationDeg - buildingRotationDeg;
+        const sceneElement = sceneRef.current;
+        if (sceneElement) {
+            if (sceneRotationDeg === 0)
+                sceneElement.removeAttribute('transform');
+            else
+                sceneElement.setAttribute('transform', `rotate(${sceneRotationDeg})`);
+        }
+        setFloorplanCompassRotation(compassNeedleRef.current, nextRotationDeg);
+    }, [buildingRotationDeg]);
+    const commitPresentation = useCallback((nextViewBox, nextRotationDeg) => {
+        presentViewBox(nextViewBox);
+        presentRotation(nextRotationDeg);
+        setViewBox(nextViewBox);
+        setRotationDeg(nextRotationDeg);
+    }, [presentRotation, presentViewBox]);
+    const publishNavigation = useCallback((nextViewBox, nextRotationDeg) => {
+        if (!synchronizeNavigation)
+            return;
+        const sceneRotationDeg = FLOORPLAN_VIEW_ROTATION_DEG + nextRotationDeg - buildingRotationDeg;
+        const displayedCenter = {
+            x: nextViewBox.x + nextViewBox.width / 2,
+            y: nextViewBox.y + nextViewBox.height / 2,
+        };
+        const localCenter = rotateFloorplanPoint(displayedCenter, -sceneRotationDeg);
+        const worldCenter = floorplanLocalToWorldPoint(localCenter, buildingPosition, buildingRotationY);
+        publishNavigationSyncPose({
+            source: '2d',
+            target: [
+                worldCenter.x,
+                latestNavigationPoseRef.current?.target[1] ?? buildingPosition[1],
+                worldCenter.z,
+            ],
+            azimuth: cameraAzimuthFromFloorplanRotation(nextRotationDeg),
+            viewWidth: visibleFloorplanViewWidth(nextViewBox, viewportSize),
+        });
+    }, [buildingPosition, buildingRotationDeg, buildingRotationY, synchronizeNavigation, viewportSize]);
+    const applyNavigationPresentationRef = useRef(() => { });
+    const commitNavigationPresentationRef = useRef(() => { });
+    const navigationSchedulerRef = useRef(null);
+    if (!navigationSchedulerRef.current) {
+        navigationSchedulerRef.current = createFloorplanNavigationSyncScheduler({
+            applyPresentation: (pose) => applyNavigationPresentationRef.current(pose),
+            commit: (pose) => commitNavigationPresentationRef.current(pose),
+        });
+    }
+    applyNavigationPresentationRef.current = (pose) => {
+        latestNavigationPoseRef.current = pose;
+        const nextRotationDeg = floorplanRotationFromCameraAzimuth(pose.azimuth, rotationDegRef.current);
+        presentRotation(nextRotationDeg);
+        if (!navigationVisible)
+            return;
+        const localCenter = worldToFloorplanLocalPoint(pose.target[0], pose.target[2], buildingPosition, buildingRotationY);
+        presentViewBox(floorplanViewBoxFromNavigationPose(pose, localCenter, FLOORPLAN_VIEW_ROTATION_DEG + nextRotationDeg - buildingRotationDeg, viewportSize));
+    };
+    commitNavigationPresentationRef.current = (_pose) => {
+        if (!navigationVisible)
+            return;
+        setViewBox(viewBoxRef.current);
+        setRotationDeg(rotationDegRef.current);
+    };
+    useClientLayoutEffect(() => {
+        let bounds = null;
+        for (const entry of framingEntries) {
+            const element = fitElementRefs.current.get(entry.id);
+            if (!element || typeof element.getBBox !== 'function')
+                continue;
+            let box;
+            try {
+                box = element.getBBox();
+            }
+            catch {
+                continue;
+            }
+            if (![box.x, box.y, box.width, box.height].every(Number.isFinite))
+                continue;
+            if (box.width === 0 && box.height === 0)
+                continue;
+            const next = {
+                minX: box.x,
+                minY: box.y,
+                maxX: box.x + box.width,
+                maxY: box.y + box.height,
+            };
+            bounds = bounds
+                ? {
+                    minX: Math.min(bounds.minX, next.minX),
+                    minY: Math.min(bounds.minY, next.minY),
+                    maxX: Math.max(bounds.maxX, next.maxX),
+                    maxY: Math.max(bounds.maxY, next.maxY),
+                }
+                : next;
+        }
+        if (bounds)
+            setMeasuredFit({ key: fitKey, bounds });
+    }, [fitKey, framingEntries]);
+    useClientLayoutEffect(() => {
+        if (synchronizeNavigation && latestNavigationPoseRef.current)
+            return;
+        updateViewBox(fittedViewBox);
+        pointersRef.current.clear();
+        dragRef.current = null;
+        pinchRef.current = null;
+        setIsPanning(false);
+        setIsRotating(false);
+    }, [fittedViewBox, synchronizeNavigation, updateViewBox]);
+    useEffect(() => {
+        const svg = svgRef.current;
+        if (!svg)
+            return;
+        const updateSize = () => {
+            const rect = svg.getBoundingClientRect();
+            setViewportSize({ width: Math.max(rect.width, 1), height: Math.max(rect.height, 1) });
+        };
+        updateSize();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', updateSize);
+            return () => window.removeEventListener('resize', updateSize);
+        }
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(svg);
+        return () => observer.disconnect();
+    }, []);
+    useClientLayoutEffect(() => {
+        presentRotation(rotationDegRef.current);
+    }, [presentRotation]);
+    useEffect(() => {
+        if (!synchronizeNavigation)
+            return;
+        const scheduler = navigationSchedulerRef.current;
+        if (!scheduler)
+            return;
+        const receivePose = (pose) => {
+            latestNavigationPoseRef.current = pose;
+            if (navigationVisible)
+                scheduler.update(pose);
+            else
+                applyNavigationPresentationRef.current(pose);
+        };
+        const unsubscribeCamera = subscribeFloorplanCameraNavigation(receivePose);
+        const unsubscribeStored = subscribeNavigationSyncPose((pose) => {
+            if (pose.source === '2d' && !navigationVisible)
+                receivePose(pose);
+        });
+        return () => {
+            unsubscribeCamera();
+            unsubscribeStored();
+            scheduler.discard();
+        };
+    }, [navigationVisible, synchronizeNavigation]);
+    useEffect(() => {
+        if (!(synchronizeNavigation && navigationVisible && latestNavigationPoseRef.current))
+            return;
+        navigationSchedulerRef.current?.update(latestNavigationPoseRef.current);
+    }, [navigationVisible, synchronizeNavigation]);
+    const chooseLevel = useCallback((nextLevelId) => {
+        setInternalLevelId(nextLevelId);
+        onLevelChange?.(nextLevelId);
+    }, [onLevelChange]);
+    const updateLocalViewBox = useCallback((update, commit = true) => {
+        const current = viewBoxRef.current;
+        const next = typeof update === 'function' ? update(current) : update;
+        presentViewBox(next);
+        if (commit)
+            setViewBox(next);
+        publishNavigation(next, rotationDegRef.current);
+        return next;
+    }, [presentViewBox, publishNavigation]);
+    const zoom = useCallback((factor, anchorX = 0.5, anchorY = 0.5) => {
+        updateLocalViewBox((current) => scaleFloorplanViewBox(current, factor, anchorX, anchorY));
+    }, [updateLocalViewBox]);
+    const onWheel = useCallback((event) => {
+        event.preventDefault();
+        const rect = event.currentTarget.getBoundingClientRect();
+        updateLocalViewBox((current) => scaleFloorplanViewBoxBetweenClients(current, event.deltaY > 0 ? 1.12 : 0.88, rect, [event.clientX, event.clientY], [event.clientX, event.clientY]));
+    }, [updateLocalViewBox]);
+    const onPointerDown = useCallback((event) => {
+        if (event.pointerType === 'mouse' && event.button !== 0 && event.button !== 2)
+            return;
+        event.preventDefault();
+        interactionRef.current?.focus();
+        try {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Pointer capture is an enhancement; the gesture still works while events stay over the SVG.
+        }
+        const point = { x: event.clientX, y: event.clientY };
+        pointersRef.current.set(event.pointerId, point);
+        const pointers = Array.from(pointersRef.current.entries());
+        if (pointers.length === 1) {
+            dragRef.current = {
+                mode: event.pointerType === 'mouse' && event.button === 2 ? 'rotate' : 'pan',
+                pointerId: event.pointerId,
+                point,
+                rotationDeg: rotationDegRef.current,
+                viewBox: viewBoxRef.current,
+            };
+            pinchRef.current = null;
+        }
+        else {
+            const [first, second] = pointers;
+            if (!first || !second)
+                return;
+            const dx = second[1].x - first[1].x;
+            const dy = second[1].y - first[1].y;
+            pinchRef.current = {
+                pointerIds: [first[0], second[0]],
+                midpoint: { x: (first[1].x + second[1].x) / 2, y: (first[1].y + second[1].y) / 2 },
+                distance: Math.max(Math.hypot(dx, dy), 1),
+                viewBox: viewBoxRef.current,
+            };
+            dragRef.current = null;
+        }
+        setIsPanning(true);
+        setIsRotating(dragRef.current?.mode === 'rotate');
+    }, []);
+    const onPointerMove = useCallback((event) => {
+        if (!pointersRef.current.has(event.pointerId))
+            return;
+        pointersRef.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        const rect = event.currentTarget.getBoundingClientRect();
+        const pinch = pinchRef.current;
+        if (pinch) {
+            const first = pointersRef.current.get(pinch.pointerIds[0]);
+            const second = pointersRef.current.get(pinch.pointerIds[1]);
+            if (!(first && second))
+                return;
+            const dx = second.x - first.x;
+            const dy = second.y - first.y;
+            const midpoint = { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 };
+            updateLocalViewBox(scaleFloorplanViewBoxBetweenClients(pinch.viewBox, pinch.distance / Math.max(Math.hypot(dx, dy), 1), rect, [pinch.midpoint.x, pinch.midpoint.y], [midpoint.x, midpoint.y]), false);
+            return;
+        }
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId)
+            return;
+        if (drag.mode === 'rotate') {
+            const nextRotationDeg = drag.rotationDeg + (event.clientX - drag.point.x) * 0.35;
+            const initialSceneRotationDeg = FLOORPLAN_VIEW_ROTATION_DEG + drag.rotationDeg - buildingRotationDeg;
+            const nextSceneRotationDeg = FLOORPLAN_VIEW_ROTATION_DEG + nextRotationDeg - buildingRotationDeg;
+            const displayedCenter = {
+                x: drag.viewBox.x + drag.viewBox.width / 2,
+                y: drag.viewBox.y + drag.viewBox.height / 2,
+            };
+            const localCenter = rotateFloorplanPoint(displayedCenter, -initialSceneRotationDeg);
+            const nextCenter = rotateFloorplanPoint(localCenter, nextSceneRotationDeg);
+            const nextViewBox = {
+                ...drag.viewBox,
+                x: nextCenter.x - drag.viewBox.width / 2,
+                y: nextCenter.y - drag.viewBox.height / 2,
+            };
+            presentRotation(nextRotationDeg);
+            presentViewBox(nextViewBox);
+            publishNavigation(nextViewBox, nextRotationDeg);
+            return;
+        }
+        updateLocalViewBox(panFloorplanViewBox(drag.viewBox, rect, [drag.point.x, drag.point.y], [event.clientX, event.clientY]), false);
+    }, [buildingRotationDeg, presentRotation, presentViewBox, publishNavigation, updateLocalViewBox]);
+    const onPointerUp = useCallback((event) => {
+        pointersRef.current.delete(event.pointerId);
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        pinchRef.current = null;
+        const [remaining] = pointersRef.current.entries();
+        if (remaining) {
+            dragRef.current = {
+                mode: 'pan',
+                pointerId: remaining[0],
+                point: remaining[1],
+                rotationDeg: rotationDegRef.current,
+                viewBox: viewBoxRef.current,
+            };
+            setIsRotating(false);
+        }
+        else {
+            dragRef.current = null;
+            setIsPanning(false);
+            setIsRotating(false);
+            setViewBox(viewBoxRef.current);
+            setRotationDeg(rotationDegRef.current);
+        }
+    }, []);
+    const onKeyDown = useCallback((event) => {
+        const panStep = 0.08;
+        switch (event.key) {
+            case '+':
+            case '=':
+                event.preventDefault();
+                zoom(0.8);
+                return;
+            case '-':
+            case '_':
+                event.preventDefault();
+                zoom(1.2);
+                return;
+            case '0':
+            case 'f':
+            case 'F':
+                event.preventDefault();
+                updateLocalViewBox(fittedViewBox);
+                return;
+            case 'ArrowLeft':
+                event.preventDefault();
+                updateLocalViewBox((current) => ({
+                    ...current,
+                    x: current.x - current.width * panStep,
+                }));
+                return;
+            case 'ArrowRight':
+                event.preventDefault();
+                updateLocalViewBox((current) => ({
+                    ...current,
+                    x: current.x + current.width * panStep,
+                }));
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                updateLocalViewBox((current) => ({
+                    ...current,
+                    y: current.y - current.height * panStep,
+                }));
+                return;
+            case 'ArrowDown':
+                event.preventDefault();
+                updateLocalViewBox((current) => ({
+                    ...current,
+                    y: current.y + current.height * panStep,
+                }));
+        }
+    }, [fittedViewBox, updateLocalViewBox, zoom]);
+    const alignToNorth = useCallback(() => {
+        const currentRotationDeg = rotationDegRef.current;
+        const nextRotationDeg = nearestEquivalentDegrees(0, currentRotationDeg);
+        if (!navigationVisible) {
+            const pose = latestNavigationPoseRef.current;
+            if (!pose)
+                return;
+            publishNavigationSyncPose({
+                source: '2d',
+                target: [...pose.target],
+                azimuth: cameraAzimuthFromFloorplanRotation(nextRotationDeg),
+                viewWidth: pose.viewWidth,
+            });
+            return;
+        }
+        const currentViewBox = viewBoxRef.current;
+        const currentSceneRotationDeg = FLOORPLAN_VIEW_ROTATION_DEG + currentRotationDeg - buildingRotationDeg;
+        const nextSceneRotationDeg = FLOORPLAN_VIEW_ROTATION_DEG + nextRotationDeg - buildingRotationDeg;
+        const currentCenter = {
+            x: currentViewBox.x + currentViewBox.width / 2,
+            y: currentViewBox.y + currentViewBox.height / 2,
+        };
+        const localCenter = rotateFloorplanPoint(currentCenter, -currentSceneRotationDeg);
+        const nextCenter = rotateFloorplanPoint(localCenter, nextSceneRotationDeg);
+        const nextViewBox = {
+            ...currentViewBox,
+            x: nextCenter.x - currentViewBox.width / 2,
+            y: nextCenter.y - currentViewBox.height / 2,
+        };
+        commitPresentation(nextViewBox, nextRotationDeg);
+        publishNavigation(nextViewBox, nextRotationDeg);
+    }, [buildingRotationDeg, commitPresentation, navigationVisible, publishNavigation]);
+    const screenUnitsPerPixel = Math.max(viewBox.width / Math.max(viewportSize.width, 1), viewBox.height / Math.max(viewportSize.height, 1));
+    const compassControl = (_jsx(FloorplanCompassButton, { needleRef: compassNeedleRef, northRotationDeg: rotationDeg, onAlignNorth: alignToNorth }));
+    if (levels.length === 0) {
+        return (_jsx("div", { className: className, style: { display: 'grid', placeItems: 'center', background: '#f8fafc', color: '#64748b' }, children: i18n._({
+                id: 'viewer.floorplan.empty',
+                message: 'No floor plans are available for this scene.',
+            }) }));
+    }
+    return (_jsxs("div", { className: className, style: { position: 'relative', overflow: 'hidden', background: '#f8fafc' }, children: [synchronizeNavigation ? _jsx(FloorplanCameraSyncMount, {}) : null, _jsx("div", { "aria-keyshortcuts": "ArrowUp ArrowDown ArrowLeft ArrowRight + - 0 F", "aria-label": i18n._({
+                    id: 'viewer.floorplan.viewLabel',
+                    message: '{floor} 2D view',
+                    values: {
+                        floor: activeLevel
+                            ? localizedLevelName(activeLevel, i18n, locale)
+                            : i18n._({ id: 'viewer.floorplan.floorPlan', message: 'Floor plan' }),
+                    },
+                }), onKeyDown: onKeyDown, role: "application", ref: interactionRef, style: { width: '100%', height: '100%' }, 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: The plan canvas supports keyboard pan, zoom, and fit controls.
+                tabIndex: 0, children: _jsxs("svg", { "aria-hidden": "true", "data-floorplan-preview": "", onContextMenu: (event) => event.preventDefault(), onPointerCancel: onPointerUp, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onWheel: onWheel, preserveAspectRatio: "xMidYMid meet", ref: svgRef, style: {
+                        width: '100%',
+                        height: '100%',
+                        cursor: isRotating ? 'ew-resize' : isPanning ? 'grabbing' : 'grab',
+                        touchAction: 'none',
+                    }, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, children: [_jsx("defs", { children: _jsx("pattern", { height: "1", id: gridPatternId, patternUnits: "userSpaceOnUse", width: "1", children: _jsx("path", { d: "M 1 0 L 0 0 0 1", fill: "none", stroke: "#cbd5e1", strokeOpacity: "0.32", strokeWidth: "0.012" }) }) }), _jsx("rect", { fill: `url(#${gridPatternId})`, height: viewBox.height, ref: gridRef, width: viewBox.width, x: viewBox.x, y: viewBox.y }), _jsx("g", { pointerEvents: "none", ref: sceneRef, transform: FLOORPLAN_VIEW_ROTATION_DEG + rotationDeg - buildingRotationDeg === 0
+                                ? undefined
+                                : `rotate(${FLOORPLAN_VIEW_ROTATION_DEG + rotationDeg - buildingRotationDeg})`, children: renderEntries.map((entry) => (_jsx("g", { "data-floorplan-node-id": entry.id, ref: (element) => {
+                                    if (element)
+                                        fitElementRefs.current.set(entry.id, element);
+                                    else
+                                        fitElementRefs.current.delete(entry.id);
+                                }, children: _jsx(FloorplanGeometryRenderer, { geometry: entry.geometry, pointerEventsOverride: "none", screenUnitsPerPixel: screenUnitsPerPixel }) }, entry.id))) })] }) }), showLevelSelector && levels.length > 1 ? (_jsxs("label", { style: {
+                    position: 'absolute',
+                    bottom: 16,
+                    left: 64,
+                    display: 'grid',
+                    gap: 4,
+                    color: '#475569',
+                    fontSize: 11,
+                    fontWeight: 600,
+                }, children: [i18n._({ id: 'viewer.floorplan.floor', message: 'Floor' }), _jsx("select", { "aria-label": i18n._({ id: 'viewer.floorplan.floor', message: 'Floor' }), onChange: (event) => chooseLevel(event.target.value), style: {
+                            border: '1px solid rgba(148,163,184,.55)',
+                            borderRadius: 999,
+                            background: 'rgba(255,255,255,.94)',
+                            padding: '8px 30px 8px 12px',
+                            color: '#0f172a',
+                            boxShadow: '0 8px 24px rgba(15,23,42,.10)',
+                        }, value: activeLevelId ?? '', children: levels.map((level) => (_jsx("option", { value: level.id, children: localizedLevelName(level, i18n, locale) }, level.id))) })] })) : null, showCompass
+                ? compassHost
+                    ? createPortal(compassControl, compassHost)
+                    : compassControl
+                : null, _jsxs("div", { style: {
+                    position: 'absolute',
+                    right: 16,
+                    bottom: 16,
+                    display: 'flex',
+                    gap: 4,
+                    border: '1px solid rgba(148,163,184,.45)',
+                    borderRadius: 999,
+                    background: 'rgba(255,255,255,.94)',
+                    padding: 4,
+                    boxShadow: '0 8px 24px rgba(15,23,42,.10)',
+                }, children: [_jsx("button", { "aria-label": i18n._({ id: 'viewer.floorplan.zoomOut', message: 'Zoom out' }), onClick: () => zoom(1.2), style: controlStyle, title: i18n._({ id: 'viewer.floorplan.zoomOut', message: 'Zoom out' }), type: "button", children: _jsx(Minus, { size: 16 }) }), _jsx("button", { "aria-label": i18n._({ id: 'viewer.floorplan.fit', message: 'Fit floor plan' }), onClick: () => updateLocalViewBox(fittedViewBox), style: controlStyle, title: i18n._({ id: 'viewer.floorplan.fit', message: 'Fit floor plan' }), type: "button", children: _jsx(Maximize2, { size: 15 }) }), _jsx("button", { "aria-label": i18n._({ id: 'viewer.floorplan.zoomIn', message: 'Zoom in' }), onClick: () => zoom(0.8), style: controlStyle, title: i18n._({ id: 'viewer.floorplan.zoomIn', message: 'Zoom in' }), type: "button", children: _jsx(Plus, { size: 16 }) })] })] }));
+}
+const controlStyle = {
+    display: 'grid',
+    width: 32,
+    height: 32,
+    placeItems: 'center',
+    border: 0,
+    borderRadius: 999,
+    background: 'transparent',
+    color: '#334155',
+    cursor: 'pointer',
+};