@hunterchen/canvas 0.8.0 → 0.9.0

package/dist/components/canvas/canvas.js

@@ -1,391 +1,455 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { motion, useMotionValue, animate, useTransform, } from "framer-motion";
-import { useState, useRef, useEffect, useCallback, useMemo, } from "react";
-import { CanvasProvider } from "../../contexts/CanvasContext";
-import { calcInitialBoxWidth, getDistance, getMidpoint, getScreenSizeEnum, getSectionPanCoordinates, INTERACTIVE_SELECTOR, MAX_ZOOM, MIN_ZOOMS, panToOffsetScene, ZOOM_BOUND, } from "../../lib/canvas";
-import { STAGE2_TRANSITION, MOUSE_WHEEL_ZOOM_SENSITIVITY, TRACKPAD_ZOOM_SENSITIVITY, DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT, } from "../../lib/constants";
-import useWindowDimensions from "../../hooks/useWindowDimensions";
-import Navbar from "./navbar";
-import Toolbar from "./toolbar";
-import { CanvasWrapper } from "./wrapper";
-import { usePerformanceMode } from "../../hooks/usePerformanceMode";
-import { DefaultCanvasBackground } from "./backgrounds";
+import { CanvasProvider } from "../../contexts/CanvasContext.js";
+import { DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, INTERACTIVE_SELECTOR, MAX_ZOOM, MIN_ZOOMS, MOUSE_WHEEL_ZOOM_SENSITIVITY, STAGE2_TRANSITION, TRACKPAD_ZOOM_SENSITIVITY, ZOOM_BOUND } from "../../lib/constants.js";
+import { calcInitialBoxWidth, getDistance, getMidpoint, getScreenSizeEnum, getSectionPanCoordinates, panToOffsetScene } from "../../lib/canvas.js";
+import useWindowDimensions_default from "../../hooks/useWindowDimensions.js";
+import { usePerformanceMode } from "../../hooks/usePerformanceMode.js";
+import Navbar from "./navbar/index.js";
+import toolbar_default from "./toolbar.js";
+import { CanvasWrapper } from "./wrapper.js";
+import { DefaultCanvasBackground } from "./backgrounds.js";
+import { animate, motion, useMotionValue, useTransform } from "framer-motion";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/canvas/canvas.tsx
 const stopAllMotion = (x, y, scale) => {
-    x.stop();
-    y.stop();
-    scale.stop();
+	x.stop();
+	y.stop();
+	scale.stop();
 };
-const Canvas = ({ children, homeCoordinates, navItems, skipIntro = false, introContent, loadingText, introBackgroundGradient, canvasBoxGradient, growTransition, blurTransition, canvasBackground, wrapperBackground, toolbarConfig, navbarConfig, canvasHeight, canvasWidth, }) => {
-    const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-    const { mode } = usePerformanceMode();
-    const hasNavbar = Boolean(navItems && navItems.length > 0);
-    const sceneWidth = canvasWidth ?? DEFAULT_CANVAS_WIDTH;
-    const sceneHeight = canvasHeight ?? DEFAULT_CANVAS_HEIGHT;
-    const MIN_ZOOM = MIN_ZOOMS[getScreenSizeEnum(windowWidth)];
-    // tracks if user is panning the screen
-    const [isPanning, setIsPanning] = useState(false);
-    // this one is moving from scene control, not from user
-    const [isSceneMoving, setIsSceneMoving] = useState(false);
-    const [panStartPoint, setPanStartPoint] = useState({ x: 0, y: 0 });
-    const [initialPanOffsetOnDrag, setInitialPanOffsetOnDrag] = useState({
-        x: 0,
-        y: 0,
-    });
-    const [isResetting, setIsResetting] = useState(false);
-    const [maxZIndex, setMaxZIndex] = useState(50);
-    const [animationStage, setAnimationStage] = useState(0); // 0: initial, 1: finish grow, 2: pan to home
-    const [nextTargetSection, setNextTargetSection] = useState(null);
-    // Track if the intro (stage1 + stage2) is still running, to avoid accidental cancellation
-    const isIntroAnimatingRef = useRef(true);
-    const initialBoxWidth = useMemo(() => calcInitialBoxWidth(windowWidth, windowHeight), [windowWidth, windowHeight]);
-    // somewhere near the middle-ish
-    const x = useMotionValue(0);
-    const y = useMotionValue(0);
-    const scale = useMotionValue(initialBoxWidth);
-    const offsetHomeCoordinates = useMemo(() => getSectionPanCoordinates({
-        windowDimensions: { width: windowWidth, height: windowHeight },
-        coords: homeCoordinates,
-        targetZoom: 1,
-    }), [homeCoordinates, windowWidth, windowHeight]);
-    const onResetViewAndItems = useCallback((onComplete) => {
-        setIsResetting(true);
-        void panToOffsetScene(offsetHomeCoordinates, x, y, scale, 1).then(() => {
-            setIsResetting(false);
-            if (onComplete)
-                onComplete();
-        });
-    }, [offsetHomeCoordinates, x, y, scale]);
-    // Shared intro progress (0->1) driven by CanvasWrapper
-    const introProgress = useMotionValue(0);
-    // Precompute final stage1 scale and offsets (snapshot dimensions once on mount)
-    const stage1Targets = useMemo(() => {
-        const finalScale = Math.max((windowWidth || 0) / sceneWidth, (windowHeight || 0) / sceneHeight);
-        const endX = (windowWidth - sceneWidth * finalScale) / 2;
-        const endY = (windowHeight - sceneHeight * finalScale) / 2;
-        return { finalScale, endX, endY };
-    }, [windowWidth, windowHeight, sceneWidth, sceneHeight]);
-    // Replace direct motion values with derived transforms during stage1
-    const derivedScale = useTransform(introProgress, [0, 1], [initialBoxWidth, stage1Targets.finalScale]);
-    const derivedX = useTransform(introProgress, [0, 1], [0, stage1Targets.endX]);
-    const derivedY = useTransform(introProgress, [0, 1], [0, stage1Targets.endY]);
-    // While intro (stage1) is running, bind x/y/scale to derived versions.
-    useEffect(() => {
-        const unsubscribeScale = derivedScale.on("change", (v) => {
-            if (animationStage === 0)
-                scale.set(v);
-        });
-        const unsubscribeX = derivedX.on("change", (v) => {
-            if (animationStage === 0)
-                x.set(v);
-        });
-        const unsubscribeY = derivedY.on("change", (v) => {
-            if (animationStage === 0)
-                y.set(v);
-        });
-        return () => {
-            unsubscribeScale();
-            unsubscribeX();
-            unsubscribeY();
-        };
-    }, [derivedScale, derivedX, derivedY, animationStage, scale, x, y]);
-    // Kick off stage2 (pan to home) when grow completes (introProgress hits 1)
-    const startStage2 = useCallback(() => {
-        setAnimationStage(1);
-        Promise.all([
-            animate(x, offsetHomeCoordinates.x, STAGE2_TRANSITION),
-            animate(y, offsetHomeCoordinates.y, STAGE2_TRANSITION),
-            animate(scale, 1, STAGE2_TRANSITION),
-        ])
-            .then(() => {
-            setAnimationStage(2);
-            isIntroAnimatingRef.current = false;
-        })
-            .catch(() => {
-            isIntroAnimatingRef.current = false;
-        });
-    }, [offsetHomeCoordinates, x, y, scale]);
-    const viewportRef = useRef(null);
-    const sceneRef = useRef(null);
-    // Stable wheel listener wrapper that always calls the latest handler via ref
-    const wheelHandlerRef = useRef(null);
-    const wheelWrapper = useCallback((e) => {
-        wheelHandlerRef.current?.(e);
-    }, []);
-    // Ensure wheel listener attaches when the element actually mounts (wrapper delays child mount)
-    const setViewportRef = useCallback((node) => {
-        // Clean up old listener if ref changes/unmounts
-        if (viewportRef.current) {
-            viewportRef.current.removeEventListener("wheel", wheelWrapper);
-        }
-        viewportRef.current = node;
-        if (node) {
-            node.addEventListener("wheel", wheelWrapper, { passive: false });
-        }
-    }, [wheelWrapper]);
-    const activePointersRef = useRef(new Map());
-    const initialPinchStateRef = useRef(null);
-    const panToOffset = useCallback((offset, viewportRef, onComplete, zoom) => {
-        if (!viewportRef.current)
-            return;
-        setIsSceneMoving(true);
-        // Calculate bounds based on scene and viewport dimensions
-        const viewportWidth = viewportRef.current.offsetWidth;
-        const viewportHeight = viewportRef.current.offsetHeight;
-        const minPanX = viewportWidth - sceneWidth * (zoom ?? 1);
-        const maxPanX = 0;
-        const minPanY = viewportHeight - sceneHeight * (zoom ?? 1);
-        const maxPanY = 0;
-        // Clamp the offset to keep the scene within bounds, shouldn't be needed but still implemented
-        const clampedX = Math.min(Math.max(offset.x, minPanX), maxPanX);
-        const clampedY = Math.min(Math.max(offset.y, minPanY), maxPanY);
-        void panToOffsetScene({ x: clampedX, y: clampedY }, x, y, scale, zoom).then(() => {
-            setIsSceneMoving(false);
-            if (onComplete)
-                onComplete();
-        });
-    }, [sceneWidth, sceneHeight, x, y, scale]);
-    // Guarded stop that ignores attempts during intro animations
-    const stopAllSceneMotion = useCallback(() => {
-        if (isIntroAnimatingRef.current)
-            return; // ignore stops while intro runs
-        stopAllMotion(x, y, scale);
-    }, [x, y, scale]);
-    const handlePointerDown = useCallback((event) => {
-        if (animationStage < 2)
-            return; // ignore during intro animations
-        activePointersRef.current.set(event.pointerId, event);
-        event.target.setPointerCapture(event.pointerId);
-        if (isResetting || isSceneMoving)
-            return;
-        stopAllSceneMotion();
-        // pan with 1 pointer, pinch with 2 pointers
-        if (activePointersRef.current.size === 1) {
-            // do not pan from interactive elements
-            const targetElement = event.target;
-            if (targetElement.closest(INTERACTIVE_SELECTOR)) {
-                activePointersRef.current.delete(event.pointerId);
-                event.target.releasePointerCapture(event.pointerId);
-                return;
-            }
-            setIsPanning(true);
-            setPanStartPoint({ x: event.clientX, y: event.clientY });
-            setInitialPanOffsetOnDrag({ x: x.get(), y: y.get() });
-            if (viewportRef.current)
-                viewportRef.current.style.cursor = "grabbing";
-        }
-        else if (activePointersRef.current.size === 2) {
-            setIsPanning(false);
-            const pointers = Array.from(activePointersRef.current.values());
-            initialPinchStateRef.current = {
-                distance: getDistance(pointers[0], pointers[1]),
-                midpoint: getMidpoint(pointers[0], pointers[1]),
-                zoom: scale.get(),
-                panOffset: { x: x.get(), y: y.get() },
-            };
-        }
-    }, [
-        isResetting,
-        isSceneMoving,
-        setIsPanning,
-        setPanStartPoint,
-        setInitialPanOffsetOnDrag,
-        x,
-        y,
-        scale,
-        viewportRef,
-        animationStage,
-        stopAllSceneMotion,
-    ]);
-    const handlePointerMove = useCallback((event) => {
-        if (animationStage < 2)
-            return;
-        if (isPanning || activePointersRef.current.size >= 2) {
-            stopAllSceneMotion();
-        }
-        if (!activePointersRef.current.has(event.pointerId) || isResetting)
-            return;
-        activePointersRef.current.set(event.pointerId, event);
-        if (isPanning && activePointersRef.current.size === 1) {
-            event.preventDefault();
-            const deltaX = event.clientX - panStartPoint.x;
-            const deltaY = event.clientY - panStartPoint.y;
-            // UPDATE to use motion value
-            const minPanX = windowWidth - sceneWidth * scale.get();
-            const maxPanX = 0;
-            const minPanY = windowHeight - sceneHeight * scale.get();
-            const maxPanY = 0;
-            const newX = Math.min(Math.max(initialPanOffsetOnDrag.x + deltaX, minPanX), maxPanX);
-            const newY = Math.min(Math.max(initialPanOffsetOnDrag.y + deltaY, minPanY), maxPanY);
-            x.set(newX);
-            y.set(newY);
-        }
-        else if (activePointersRef.current.size >= 2 &&
-            initialPinchStateRef.current) {
-            event.preventDefault();
-            const pointers = Array.from(activePointersRef.current.values());
-            const p1 = pointers[0];
-            const p2 = pointers[1];
-            const currentDistance = getDistance(p1, p2);
-            const currentMidpoint = getMidpoint(p1, p2);
-            const { distance: initialDistance, zoom: initialZoom, panOffset: initialPanOffsetPinch, } = initialPinchStateRef.current;
-            if (initialDistance === 0)
-                return;
-            let newZoom = initialZoom * (currentDistance / initialDistance);
-            newZoom = Math.max((window.innerWidth / sceneWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas
-            (window.innerHeight / sceneHeight) * ZOOM_BOUND, // Ensure zoom is at least the height of the canvas
-            Math.min(newZoom, 10), MIN_ZOOM // Ensure zoom is not less than MIN_ZOOM
-            );
-            const mx = currentMidpoint.x;
-            const my = currentMidpoint.y;
-            const minPanX = windowWidth - sceneWidth * newZoom;
-            const maxPanX = 0;
-            const minPanY = windowHeight - sceneHeight * newZoom;
-            const maxPanY = 0;
-            let newPanX = mx - ((mx - initialPanOffsetPinch.x) / initialZoom) * newZoom;
-            let newPanY = my - ((my - initialPanOffsetPinch.y) / initialZoom) * newZoom;
-            // Clamp pan to prevent leaving bounds
-            newPanX = Math.min(Math.max(newPanX, minPanX), maxPanX);
-            newPanY = Math.min(Math.max(newPanY, minPanY), maxPanY);
-            scale.set(newZoom);
-            x.set(newPanX);
-            y.set(newPanY);
-        }
-    }, [
-        isPanning,
-        isResetting,
-        x,
-        y,
-        scale,
-        panStartPoint.x,
-        panStartPoint.y,
-        windowWidth,
-        sceneWidth,
-        windowHeight,
-        sceneHeight,
-        initialPanOffsetOnDrag.x,
-        initialPanOffsetOnDrag.y,
-        MIN_ZOOM,
-        animationStage,
-        stopAllSceneMotion,
-    ]);
-    const handlePointerUpOrCancel = useCallback((event) => {
-        if (animationStage < 2) {
-            event.preventDefault();
-            return; // ignore pointer up during intro
-        }
-        stopAllSceneMotion();
-        event.preventDefault();
-        if (event.target.hasPointerCapture(event.pointerId)) {
-            event.target.releasePointerCapture(event.pointerId);
-        }
-        activePointersRef.current.delete(event.pointerId);
-        if (isPanning && activePointersRef.current.size < 1) {
-            setIsPanning(false);
-            if (viewportRef.current)
-                viewportRef.current.style.cursor = "url('/customcursor.svg'), grab";
-        }
-        if (initialPinchStateRef.current && activePointersRef.current.size < 2) {
-            initialPinchStateRef.current = null;
-        }
-        if (!isPanning &&
-            activePointersRef.current.size === 1 &&
-            !initialPinchStateRef.current) {
-            const lastPointer = Array.from(activePointersRef.current.values())[0];
-            setIsPanning(true);
-            setPanStartPoint({ x: lastPointer.clientX, y: lastPointer.clientY });
-            setInitialPanOffsetOnDrag({ x: x.get(), y: y.get() });
-        }
-    }, [x, y, isPanning, animationStage, stopAllSceneMotion]);
-    const handleWheelZoom = useCallback((event) => {
-        if (animationStage < 2) {
-            event.preventDefault();
-            return; // block wheel interaction during intro animations
-        }
-        event.preventDefault();
-        // pinch gesture on track
-        const isPinch = event.ctrlKey || event.metaKey;
-        const isMouseWheelZoom = event.deltaMode === WheelEvent.DOM_DELTA_LINE ||
-            Math.abs(event.deltaY) >= 100;
-        // mouse wheel zoom and track pad zoom have different sensitivities
-        const ZOOM_SENSITIVITY = isMouseWheelZoom
-            ? MOUSE_WHEEL_ZOOM_SENSITIVITY
-            : TRACKPAD_ZOOM_SENSITIVITY;
-        if (isPinch) {
-            const currentZoom = scale.get();
-            const nextZoom = Math.max(Math.min(currentZoom * (1 - event.deltaY * ZOOM_SENSITIVITY), MAX_ZOOM), MIN_ZOOM, (window.innerWidth / sceneWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas
-            (window.innerHeight / sceneHeight) * ZOOM_BOUND // Ensure zoom is at least the height of the canvas
-            );
-            const rect = viewportRef.current?.getBoundingClientRect();
-            if (!rect)
-                return;
-            const vpLeft = rect.left;
-            const vpTop = rect.top;
-            const viewportWidth = rect.width;
-            const viewportHeight = rect.height;
-            const cursorSceneX = (event.clientX - vpLeft - x.get()) / currentZoom;
-            const cursorSceneY = (event.clientY - vpTop - y.get()) / currentZoom;
-            let newPanX = event.clientX - vpLeft - cursorSceneX * nextZoom;
-            let newPanY = event.clientY - vpTop - cursorSceneY * nextZoom;
-            const minPanX = viewportWidth - sceneWidth * nextZoom;
-            const minPanY = viewportHeight - sceneHeight * nextZoom;
-            const maxPanX = 0;
-            const maxPanY = 0;
-            newPanX = Math.min(maxPanX, Math.max(minPanX, newPanX));
-            newPanY = Math.min(maxPanY, Math.max(minPanY, newPanY));
-            x.set(newPanX);
-            y.set(newPanY);
-            scale.set(nextZoom);
-        }
-        else {
-            stopAllSceneMotion();
-            const scrollSpeed = 1;
-            const newPanX = x.get() - event.deltaX * scrollSpeed;
-            const newPanY = y.get() - event.deltaY * scrollSpeed;
-            const minPanX = windowWidth - sceneWidth * scale.get();
-            const maxPanX = 0;
-            const minPanY = windowHeight - sceneHeight * scale.get();
-            const maxPanY = 0;
-            const clampedPanX = Math.min(Math.max(newPanX, minPanX), maxPanX);
-            const clampedPanY = Math.min(Math.max(newPanY, minPanY), maxPanY);
-            x.set(clampedPanX);
-            y.set(clampedPanY);
-        }
-    }, [
-        scale,
-        MIN_ZOOM,
-        x,
-        y,
-        sceneWidth,
-        sceneHeight,
-        windowWidth,
-        windowHeight,
-        animationStage,
-        stopAllSceneMotion,
-    ]);
-    // Keep the wheel handler ref pointing to the latest implementation
-    useEffect(() => {
-        wheelHandlerRef.current = handleWheelZoom;
-    }, [handleWheelZoom]);
-    const handlePanToOffset = useCallback((offset, onComplete, zoom) => {
-        panToOffset({
-            x: -offset.x,
-            y: -offset.y,
-        }, viewportRef, onComplete, zoom);
-    }, [panToOffset, viewportRef]);
-    return (_jsx(CanvasWrapper, { introProgress: introProgress, onIntroGrowComplete: startStage2, skipIntro: skipIntro, introContent: introContent, loadingText: loadingText, introBackgroundGradient: introBackgroundGradient, wrapperBackground: wrapperBackground, canvasBoxGradient: canvasBoxGradient, growTransition: growTransition, blurTransition: blurTransition, children: _jsxs(CanvasProvider, { x: x, y: y, scale: scale, isResetting: isResetting, maxZIndex: maxZIndex, setMaxZIndex: setMaxZIndex, animationStage: animationStage, nextTargetSection: nextTargetSection, setNextTargetSection: setNextTargetSection, children: [animationStage >= 2 && (_jsxs(_Fragment, { children: [!toolbarConfig?.hidden && (_jsx(Toolbar, { homeCoordinates: offsetHomeCoordinates, config: toolbarConfig })), hasNavbar && navItems && !navbarConfig?.hidden && (_jsx(Navbar, { panToOffset: handlePanToOffset, onReset: onResetViewAndItems, items: navItems, config: navbarConfig }))] })), _jsx("div", { ref: setViewportRef, className: "relative h-full w-full touch-none select-none overflow-hidden", style: {
-                        touchAction: "none",
-                        pointerEvents: animationStage >= 2 ? "auto" : "none",
-                        overscrollBehavior: "contain",
-                    }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUpOrCancel, onPointerLeave: handlePointerUpOrCancel, onPointerCancel: handlePointerUpOrCancel, children: _jsxs(motion.div, { ref: sceneRef, className: "absolute z-20 origin-top-left", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, ease: "easeIn" }, style: {
-                            width: `${sceneWidth}px`,
-                            height: `${sceneHeight}px`,
-                            x,
-                            y,
-                            scale,
-                            willChange: mode !== "high" && (animationStage < 2 || isPanning)
-                                ? "transform"
-                                : "auto",
-                        }, children: [canvasBackground !== undefined ? (canvasBackground) : (_jsx(_Fragment, { children: animationStage >= 1 && mode === "high" ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5, ease: "easeIn" }, children: _jsx(DefaultCanvasBackground, {}) })) : (_jsx(DefaultCanvasBackground, {})) })), children] }) })] }) }));
+const Canvas = ({ children, homeCoordinates, navItems, skipIntro = false, introContent, loadingText, introBackgroundGradient, canvasBoxGradient, growTransition, blurTransition, canvasBackground, wrapperBackground, toolbarConfig, navbarConfig, canvasHeight, canvasWidth }) => {
+	const { height: windowHeight, width: windowWidth } = useWindowDimensions_default();
+	const { mode } = usePerformanceMode();
+	const hasNavbar = Boolean(navItems && navItems.length > 0);
+	const sceneWidth = canvasWidth ?? DEFAULT_CANVAS_WIDTH;
+	const sceneHeight = canvasHeight ?? DEFAULT_CANVAS_HEIGHT;
+	const MIN_ZOOM = MIN_ZOOMS[getScreenSizeEnum(windowWidth)];
+	const [isPanning, setIsPanning] = useState(false);
+	const [isSceneMoving, setIsSceneMoving] = useState(false);
+	const [panStartPoint, setPanStartPoint] = useState({
+		x: 0,
+		y: 0
+	});
+	const [initialPanOffsetOnDrag, setInitialPanOffsetOnDrag] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isResetting, setIsResetting] = useState(false);
+	const [maxZIndex, setMaxZIndex] = useState(50);
+	const [animationStage, setAnimationStage] = useState(0);
+	const [nextTargetSection, setNextTargetSection] = useState(null);
+	const isIntroAnimatingRef = useRef(true);
+	const initialBoxWidth = useMemo(() => calcInitialBoxWidth(windowWidth, windowHeight), [windowWidth, windowHeight]);
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	const scale = useMotionValue(initialBoxWidth);
+	const offsetHomeCoordinates = useMemo(() => getSectionPanCoordinates({
+		windowDimensions: {
+			width: windowWidth,
+			height: windowHeight
+		},
+		coords: homeCoordinates,
+		targetZoom: 1
+	}), [
+		homeCoordinates,
+		windowWidth,
+		windowHeight
+	]);
+	const onResetViewAndItems = useCallback((onComplete) => {
+		setIsResetting(true);
+		panToOffsetScene(offsetHomeCoordinates, x, y, scale, 1).then(() => {
+			setIsResetting(false);
+			if (onComplete) onComplete();
+		});
+	}, [
+		offsetHomeCoordinates,
+		x,
+		y,
+		scale
+	]);
+	const introProgress = useMotionValue(0);
+	const stage1Targets = useMemo(() => {
+		const finalScale = Math.max((windowWidth || 0) / sceneWidth, (windowHeight || 0) / sceneHeight);
+		return {
+			finalScale,
+			endX: (windowWidth - sceneWidth * finalScale) / 2,
+			endY: (windowHeight - sceneHeight * finalScale) / 2
+		};
+	}, [
+		windowWidth,
+		windowHeight,
+		sceneWidth,
+		sceneHeight
+	]);
+	const derivedScale = useTransform(introProgress, [0, 1], [initialBoxWidth, stage1Targets.finalScale]);
+	const derivedX = useTransform(introProgress, [0, 1], [0, stage1Targets.endX]);
+	const derivedY = useTransform(introProgress, [0, 1], [0, stage1Targets.endY]);
+	useEffect(() => {
+		const unsubscribeScale = derivedScale.on("change", (v) => {
+			if (animationStage === 0) scale.set(v);
+		});
+		const unsubscribeX = derivedX.on("change", (v) => {
+			if (animationStage === 0) x.set(v);
+		});
+		const unsubscribeY = derivedY.on("change", (v) => {
+			if (animationStage === 0) y.set(v);
+		});
+		return () => {
+			unsubscribeScale();
+			unsubscribeX();
+			unsubscribeY();
+		};
+	}, [
+		derivedScale,
+		derivedX,
+		derivedY,
+		animationStage,
+		scale,
+		x,
+		y
+	]);
+	const startStage2 = useCallback(() => {
+		setAnimationStage(1);
+		Promise.all([
+			animate(x, offsetHomeCoordinates.x, STAGE2_TRANSITION),
+			animate(y, offsetHomeCoordinates.y, STAGE2_TRANSITION),
+			animate(scale, 1, STAGE2_TRANSITION)
+		]).then(() => {
+			setAnimationStage(2);
+			isIntroAnimatingRef.current = false;
+		}).catch(() => {
+			isIntroAnimatingRef.current = false;
+		});
+	}, [
+		offsetHomeCoordinates,
+		x,
+		y,
+		scale
+	]);
+	const viewportRef = useRef(null);
+	const sceneRef = useRef(null);
+	const wheelHandlerRef = useRef(null);
+	const wheelWrapper = useCallback((e) => {
+		wheelHandlerRef.current?.(e);
+	}, []);
+	const setViewportRef = useCallback((node) => {
+		if (viewportRef.current) viewportRef.current.removeEventListener("wheel", wheelWrapper);
+		viewportRef.current = node;
+		if (node) node.addEventListener("wheel", wheelWrapper, { passive: false });
+	}, [wheelWrapper]);
+	const activePointersRef = useRef(/* @__PURE__ */ new Map());
+	const initialPinchStateRef = useRef(null);
+	const panToOffset = useCallback((offset, viewportRef, onComplete, zoom) => {
+		if (!viewportRef.current) return;
+		setIsSceneMoving(true);
+		const viewportWidth = viewportRef.current.offsetWidth;
+		const viewportHeight = viewportRef.current.offsetHeight;
+		const minPanX = viewportWidth - sceneWidth * (zoom ?? 1);
+		const maxPanX = 0;
+		const minPanY = viewportHeight - sceneHeight * (zoom ?? 1);
+		panToOffsetScene({
+			x: Math.min(Math.max(offset.x, minPanX), maxPanX),
+			y: Math.min(Math.max(offset.y, minPanY), 0)
+		}, x, y, scale, zoom).then(() => {
+			setIsSceneMoving(false);
+			if (onComplete) onComplete();
+		});
+	}, [
+		sceneWidth,
+		sceneHeight,
+		x,
+		y,
+		scale
+	]);
+	const stopAllSceneMotion = useCallback(() => {
+		if (isIntroAnimatingRef.current) return;
+		stopAllMotion(x, y, scale);
+	}, [
+		x,
+		y,
+		scale
+	]);
+	const handlePointerDown = useCallback((event) => {
+		if (animationStage < 2) return;
+		activePointersRef.current.set(event.pointerId, event);
+		event.target.setPointerCapture(event.pointerId);
+		if (isResetting || isSceneMoving) return;
+		stopAllSceneMotion();
+		if (activePointersRef.current.size === 1) {
+			if (event.target.closest(INTERACTIVE_SELECTOR)) {
+				activePointersRef.current.delete(event.pointerId);
+				event.target.releasePointerCapture(event.pointerId);
+				return;
+			}
+			setIsPanning(true);
+			setPanStartPoint({
+				x: event.clientX,
+				y: event.clientY
+			});
+			setInitialPanOffsetOnDrag({
+				x: x.get(),
+				y: y.get()
+			});
+			if (viewportRef.current) viewportRef.current.style.cursor = "grabbing";
+		} else if (activePointersRef.current.size === 2) {
+			setIsPanning(false);
+			const pointers = Array.from(activePointersRef.current.values());
+			initialPinchStateRef.current = {
+				distance: getDistance(pointers[0], pointers[1]),
+				midpoint: getMidpoint(pointers[0], pointers[1]),
+				zoom: scale.get(),
+				panOffset: {
+					x: x.get(),
+					y: y.get()
+				}
+			};
+		}
+	}, [
+		isResetting,
+		isSceneMoving,
+		setIsPanning,
+		setPanStartPoint,
+		setInitialPanOffsetOnDrag,
+		x,
+		y,
+		scale,
+		viewportRef,
+		animationStage,
+		stopAllSceneMotion
+	]);
+	const handlePointerMove = useCallback((event) => {
+		if (animationStage < 2) return;
+		if (isPanning || activePointersRef.current.size >= 2) stopAllSceneMotion();
+		if (!activePointersRef.current.has(event.pointerId) || isResetting) return;
+		activePointersRef.current.set(event.pointerId, event);
+		if (isPanning && activePointersRef.current.size === 1) {
+			event.preventDefault();
+			const deltaX = event.clientX - panStartPoint.x;
+			const deltaY = event.clientY - panStartPoint.y;
+			const minPanX = windowWidth - sceneWidth * scale.get();
+			const maxPanX = 0;
+			const minPanY = windowHeight - sceneHeight * scale.get();
+			const maxPanY = 0;
+			const newX = Math.min(Math.max(initialPanOffsetOnDrag.x + deltaX, minPanX), maxPanX);
+			const newY = Math.min(Math.max(initialPanOffsetOnDrag.y + deltaY, minPanY), maxPanY);
+			x.set(newX);
+			y.set(newY);
+		} else if (activePointersRef.current.size >= 2 && initialPinchStateRef.current) {
+			event.preventDefault();
+			const pointers = Array.from(activePointersRef.current.values());
+			const p1 = pointers[0];
+			const p2 = pointers[1];
+			const currentDistance = getDistance(p1, p2);
+			const currentMidpoint = getMidpoint(p1, p2);
+			const { distance: initialDistance, zoom: initialZoom, panOffset: initialPanOffsetPinch } = initialPinchStateRef.current;
+			if (initialDistance === 0) return;
+			let newZoom = initialZoom * (currentDistance / initialDistance);
+			newZoom = Math.max(window.innerWidth / sceneWidth * ZOOM_BOUND, window.innerHeight / sceneHeight * ZOOM_BOUND, Math.min(newZoom, 10), MIN_ZOOM);
+			const mx = currentMidpoint.x;
+			const my = currentMidpoint.y;
+			const minPanX = windowWidth - sceneWidth * newZoom;
+			const maxPanX = 0;
+			const minPanY = windowHeight - sceneHeight * newZoom;
+			const maxPanY = 0;
+			let newPanX = mx - (mx - initialPanOffsetPinch.x) / initialZoom * newZoom;
+			let newPanY = my - (my - initialPanOffsetPinch.y) / initialZoom * newZoom;
+			newPanX = Math.min(Math.max(newPanX, minPanX), maxPanX);
+			newPanY = Math.min(Math.max(newPanY, minPanY), maxPanY);
+			scale.set(newZoom);
+			x.set(newPanX);
+			y.set(newPanY);
+		}
+	}, [
+		isPanning,
+		isResetting,
+		x,
+		y,
+		scale,
+		panStartPoint.x,
+		panStartPoint.y,
+		windowWidth,
+		sceneWidth,
+		windowHeight,
+		sceneHeight,
+		initialPanOffsetOnDrag.x,
+		initialPanOffsetOnDrag.y,
+		MIN_ZOOM,
+		animationStage,
+		stopAllSceneMotion
+	]);
+	const handlePointerUpOrCancel = useCallback((event) => {
+		if (animationStage < 2) {
+			event.preventDefault();
+			return;
+		}
+		stopAllSceneMotion();
+		event.preventDefault();
+		if (event.target.hasPointerCapture(event.pointerId)) event.target.releasePointerCapture(event.pointerId);
+		activePointersRef.current.delete(event.pointerId);
+		if (isPanning && activePointersRef.current.size < 1) {
+			setIsPanning(false);
+			if (viewportRef.current) viewportRef.current.style.cursor = "url('/customcursor.svg'), grab";
+		}
+		if (initialPinchStateRef.current && activePointersRef.current.size < 2) initialPinchStateRef.current = null;
+		if (!isPanning && activePointersRef.current.size === 1 && !initialPinchStateRef.current) {
+			const lastPointer = Array.from(activePointersRef.current.values())[0];
+			setIsPanning(true);
+			setPanStartPoint({
+				x: lastPointer.clientX,
+				y: lastPointer.clientY
+			});
+			setInitialPanOffsetOnDrag({
+				x: x.get(),
+				y: y.get()
+			});
+		}
+	}, [
+		x,
+		y,
+		isPanning,
+		animationStage,
+		stopAllSceneMotion
+	]);
+	const handleWheelZoom = useCallback((event) => {
+		if (animationStage < 2) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		const isPinch = event.ctrlKey || event.metaKey;
+		const ZOOM_SENSITIVITY = event.deltaMode === WheelEvent.DOM_DELTA_LINE || Math.abs(event.deltaY) >= 100 ? MOUSE_WHEEL_ZOOM_SENSITIVITY : TRACKPAD_ZOOM_SENSITIVITY;
+		if (isPinch) {
+			const currentZoom = scale.get();
+			const nextZoom = Math.max(Math.min(currentZoom * (1 - event.deltaY * ZOOM_SENSITIVITY), MAX_ZOOM), MIN_ZOOM, window.innerWidth / sceneWidth * ZOOM_BOUND, window.innerHeight / sceneHeight * ZOOM_BOUND);
+			const rect = viewportRef.current?.getBoundingClientRect();
+			if (!rect) return;
+			const vpLeft = rect.left;
+			const vpTop = rect.top;
+			const viewportWidth = rect.width;
+			const viewportHeight = rect.height;
+			const cursorSceneX = (event.clientX - vpLeft - x.get()) / currentZoom;
+			const cursorSceneY = (event.clientY - vpTop - y.get()) / currentZoom;
+			let newPanX = event.clientX - vpLeft - cursorSceneX * nextZoom;
+			let newPanY = event.clientY - vpTop - cursorSceneY * nextZoom;
+			const minPanX = viewportWidth - sceneWidth * nextZoom;
+			const minPanY = viewportHeight - sceneHeight * nextZoom;
+			const maxPanX = 0;
+			const maxPanY = 0;
+			newPanX = Math.min(maxPanX, Math.max(minPanX, newPanX));
+			newPanY = Math.min(maxPanY, Math.max(minPanY, newPanY));
+			x.set(newPanX);
+			y.set(newPanY);
+			scale.set(nextZoom);
+		} else {
+			stopAllSceneMotion();
+			const scrollSpeed = 1;
+			const newPanX = x.get() - event.deltaX * scrollSpeed;
+			const newPanY = y.get() - event.deltaY * scrollSpeed;
+			const minPanX = windowWidth - sceneWidth * scale.get();
+			const maxPanX = 0;
+			const minPanY = windowHeight - sceneHeight * scale.get();
+			const maxPanY = 0;
+			const clampedPanX = Math.min(Math.max(newPanX, minPanX), maxPanX);
+			const clampedPanY = Math.min(Math.max(newPanY, minPanY), maxPanY);
+			x.set(clampedPanX);
+			y.set(clampedPanY);
+		}
+	}, [
+		scale,
+		MIN_ZOOM,
+		x,
+		y,
+		sceneWidth,
+		sceneHeight,
+		windowWidth,
+		windowHeight,
+		animationStage,
+		stopAllSceneMotion
+	]);
+	useEffect(() => {
+		wheelHandlerRef.current = handleWheelZoom;
+	}, [handleWheelZoom]);
+	const handlePanToOffset = useCallback((offset, onComplete, zoom) => {
+		panToOffset({
+			x: -offset.x,
+			y: -offset.y
+		}, viewportRef, onComplete, zoom);
+	}, [panToOffset, viewportRef]);
+	return /* @__PURE__ */ jsx(CanvasWrapper, {
+		introProgress,
+		onIntroGrowComplete: startStage2,
+		skipIntro,
+		introContent,
+		loadingText,
+		introBackgroundGradient,
+		wrapperBackground,
+		canvasBoxGradient,
+		growTransition,
+		blurTransition,
+		children: /* @__PURE__ */ jsxs(CanvasProvider, {
+			x,
+			y,
+			scale,
+			isResetting,
+			maxZIndex,
+			setMaxZIndex,
+			animationStage,
+			nextTargetSection,
+			setNextTargetSection,
+			children: [animationStage >= 2 && /* @__PURE__ */ jsxs(Fragment, { children: [!toolbarConfig?.hidden && /* @__PURE__ */ jsx(toolbar_default, {
+				homeCoordinates: offsetHomeCoordinates,
+				config: toolbarConfig
+			}), hasNavbar && navItems && !navbarConfig?.hidden && /* @__PURE__ */ jsx(Navbar, {
+				panToOffset: handlePanToOffset,
+				onReset: onResetViewAndItems,
+				items: navItems,
+				config: navbarConfig
+			})] }), /* @__PURE__ */ jsx("div", {
+				ref: setViewportRef,
+				className: "relative h-full w-full touch-none select-none overflow-hidden",
+				style: {
+					touchAction: "none",
+					pointerEvents: animationStage >= 2 ? "auto" : "none",
+					overscrollBehavior: "contain"
+				},
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: handlePointerUpOrCancel,
+				onPointerLeave: handlePointerUpOrCancel,
+				onPointerCancel: handlePointerUpOrCancel,
+				children: /* @__PURE__ */ jsxs(motion.div, {
+					ref: sceneRef,
+					className: "absolute z-20 origin-top-left",
+					initial: { opacity: 0 },
+					animate: { opacity: 1 },
+					transition: {
+						duration: .3,
+						ease: "easeIn"
+					},
+					style: {
+						width: `${sceneWidth}px`,
+						height: `${sceneHeight}px`,
+						x,
+						y,
+						scale,
+						willChange: mode !== "high" && (animationStage < 2 || isPanning) ? "transform" : "auto"
+					},
+					children: [canvasBackground !== void 0 ? canvasBackground : /* @__PURE__ */ jsx(Fragment, { children: animationStage >= 1 && mode === "high" ? /* @__PURE__ */ jsx(motion.div, {
+						initial: { opacity: 0 },
+						animate: { opacity: 1 },
+						transition: {
+							duration: .5,
+							ease: "easeIn"
+						},
+						children: /* @__PURE__ */ jsx(DefaultCanvasBackground, {})
+					}) : /* @__PURE__ */ jsx(DefaultCanvasBackground, {}) }), children]
+				})
+			})]
+		})
+	});
 };
-export default Canvas;
+var canvas_default = Canvas;
+
+//#endregion
+export { canvas_default as default };
 //# sourceMappingURL=canvas.js.map