chore: normalize line endings

1 files changed, 576 insertions, 576 deletions

diff --git a/apps/web/src/components/editor/panels/preview/preview-viewport.tsx b/apps/web/src/components/editor/panels/preview/preview-viewport.tsx
index e38183af..8fd38768 100644
--- a/apps/web/src/components/editor/panels/preview/preview-viewport.tsx
+++ b/apps/web/src/components/editor/panels/preview/preview-viewport.tsx
@@ -1,576 +1,576 @@
-"use client";
-
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import {
-	canvasToOverlay,
-	getDisplayScale,
-	positionToOverlay,
-	screenPixelsToLogicalThreshold,
-	screenToCanvas,
-} from "@/lib/preview/preview-coords";
-import { clamp, isNearlyEqual } from "@/utils/math";
-import { PREVIEW_ZOOM } from "@/constants/editor-constants";
-
-const MIDDLE_MOUSE_BUTTON = 1;
-const IS_AT_FIT_EPSILON = 0.001;
-const IS_AT_ACTUAL_SIZE_EPSILON = 0.01;
-
-interface PreviewViewportContextValue {
-	canPan: boolean;
-	isAtFit: boolean;
-	isAtActualSize: boolean;
-	isPanning: boolean;
-	sceneHeight: number;
-	sceneLeft: number;
-	sceneTop: number;
-	sceneWidth: number;
-	zoomPercent: number;
-	canvasToOverlay: ({
-		canvasX,
-		canvasY,
-	}: {
-		canvasX: number;
-		canvasY: number;
-	}) => { x: number; y: number };
-	fitToScreen: () => void;
-	getDisplayScale: () => { x: number; y: number };
-	handlePanPointerDown: ({ event }: { event: React.PointerEvent }) => boolean;
-	handlePanPointerMove: ({ event }: { event: React.PointerEvent }) => boolean;
-	handlePanPointerUp: ({ event }: { event: React.PointerEvent }) => boolean;
-	positionToOverlay: ({
-		positionX,
-		positionY,
-	}: {
-		positionX: number;
-		positionY: number;
-	}) => { x: number; y: number };
-	panByScreenDelta: ({
-		deltaX,
-		deltaY,
-	}: {
-		deltaX: number;
-		deltaY: number;
-	}) => void;
-	resetPan: () => void;
-	scaleZoom: ({ factor }: { factor: number }) => void;
-	screenPixelsToLogicalThreshold: ({
-		screenPixels,
-	}: {
-		screenPixels: number;
-	}) => { x: number; y: number };
-	screenToCanvas: ({
-		clientX,
-		clientY,
-	}: {
-		clientX: number;
-		clientY: number;
-	}) => { x: number; y: number } | null;
-	setActualSize: () => void;
-	setViewportPercent: ({ percent }: { percent: number }) => void;
-	zoomIn: () => void;
-	zoomOut: () => void;
-}
-
-const PreviewViewportContext =
-	createContext<PreviewViewportContextValue | null>(null);
-
-interface PreviewViewportProviderProps {
-	children: React.ReactNode;
-	value: PreviewViewportContextValue;
-}
-
-interface PreviewViewportStateOptions {
-	canvasHeight: number;
-	canvasWidth: number;
-	viewportHeight: number;
-	viewportRef: React.RefObject<HTMLDivElement | null>;
-	viewportWidth: number;
-}
-
-interface PanSession {
-	centerX: number;
-	centerY: number;
-	clientX: number;
-	clientY: number;
-	pointerId: number;
-}
-
-function getClampedCenterAxis({
-	axisSize,
-	center,
-	scale,
-	viewportSize,
-}: {
-	axisSize: number;
-	center: number;
-	scale: number;
-	viewportSize: number;
-}): number {
-	if (axisSize <= 0 || scale <= 0 || viewportSize <= 0) {
-		return axisSize / 2;
-	}
-
-	const visibleHalfSpan = viewportSize / (2 * scale);
-	if (visibleHalfSpan >= axisSize / 2) {
-		return axisSize / 2;
-	}
-
-	return clamp({
-		value: center,
-		min: visibleHalfSpan,
-		max: axisSize - visibleHalfSpan,
-	});
-}
-
-function clampViewportCenter({
-	canvasHeight,
-	canvasWidth,
-	centerX,
-	centerY,
-	scale,
-	viewportHeight,
-	viewportWidth,
-}: {
-	canvasHeight: number;
-	canvasWidth: number;
-	centerX: number;
-	centerY: number;
-	scale: number;
-	viewportHeight: number;
-	viewportWidth: number;
-}): { x: number; y: number } {
-	return {
-		x: getClampedCenterAxis({
-			center: centerX,
-			axisSize: canvasWidth,
-			scale,
-			viewportSize: viewportWidth,
-		}),
-		y: getClampedCenterAxis({
-			center: centerY,
-			axisSize: canvasHeight,
-			scale,
-			viewportSize: viewportHeight,
-		}),
-	};
-}
-
-function getFitScale({
-	canvasHeight,
-	canvasWidth,
-	viewportHeight,
-	viewportWidth,
-}: {
-	canvasHeight: number;
-	canvasWidth: number;
-	viewportHeight: number;
-	viewportWidth: number;
-}): number {
-	if (
-		canvasHeight <= 0 ||
-		canvasWidth <= 0 ||
-		viewportHeight <= 0 ||
-		viewportWidth <= 0
-	) {
-		return 1;
-	}
-
-	return Math.min(viewportWidth / canvasWidth, viewportHeight / canvasHeight);
-}
-
-function getClampedZoom({ zoom }: { zoom: number }): number {
-	return clamp({
-		value: zoom,
-		min: PREVIEW_ZOOM.min,
-		max: PREVIEW_ZOOM.max,
-	});
-}
-
-export function PreviewViewportProvider({
-	children,
-	value,
-}: PreviewViewportProviderProps) {
-	return (
-		<PreviewViewportContext.Provider value={value}>
-			{children}
-		</PreviewViewportContext.Provider>
-	);
-}
-
-export function usePreviewViewportState({
-	canvasHeight,
-	canvasWidth,
-	viewportHeight,
-	viewportRef,
-	viewportWidth,
-}: PreviewViewportStateOptions): PreviewViewportContextValue {
-	const [zoom, setZoomState] = useState(1);
-	const [center, setCenter] = useState(() => ({
-		x: canvasWidth / 2,
-		y: canvasHeight / 2,
-	}));
-	const [isPanning, setIsPanning] = useState(false);
-	const panSessionRef = useRef<PanSession | null>(null);
-	const centerRef = useRef(center);
-	centerRef.current = center;
-
-	const fitScale = useMemo(
-		() =>
-			getFitScale({
-				canvasHeight,
-				canvasWidth,
-				viewportHeight,
-				viewportWidth,
-			}),
-		[canvasHeight, canvasWidth, viewportHeight, viewportWidth],
-	);
-	const viewportScale = fitScale * zoom;
-	const geometry = useMemo(
-		() => ({
-			canvasHeight,
-			canvasWidth,
-			centerX: center.x,
-			centerY: center.y,
-			scale: viewportScale,
-			viewportHeight,
-			viewportWidth,
-		}),
-		[
-			canvasHeight,
-			canvasWidth,
-			center.x,
-			center.y,
-			viewportHeight,
-			viewportScale,
-			viewportWidth,
-		],
-	);
-
-	const scaleZoom = useCallback(({ factor }: { factor: number }) => {
-		setZoomState((previousZoom) =>
-			getClampedZoom({
-				zoom: previousZoom * factor,
-			}),
-		);
-	}, []);
-
-	const panByScreenDelta = useCallback(
-		({ deltaX, deltaY }: { deltaX: number; deltaY: number }) => {
-			if (zoom <= 1 || (deltaX === 0 && deltaY === 0)) {
-				return;
-			}
-
-			setCenter((previousCenter) =>
-				clampViewportCenter({
-					canvasHeight,
-					canvasWidth,
-					centerX: previousCenter.x + deltaX / viewportScale,
-					centerY: previousCenter.y + deltaY / viewportScale,
-					scale: viewportScale,
-					viewportHeight,
-					viewportWidth,
-				}),
-			);
-		},
-		[
-			canvasHeight,
-			canvasWidth,
-			viewportHeight,
-			viewportScale,
-			viewportWidth,
-			zoom,
-		],
-	);
-
-	const resetPan = useCallback(() => {
-		setCenter({
-			x: canvasWidth / 2,
-			y: canvasHeight / 2,
-		});
-	}, [canvasHeight, canvasWidth]);
-
-	const fitToScreen = useCallback(() => {
-		setZoomState(1);
-		setCenter({
-			x: canvasWidth / 2,
-			y: canvasHeight / 2,
-		});
-	}, [canvasHeight, canvasWidth]);
-
-	const zoomIn = useCallback(() => {
-		setZoomState((previousZoom) =>
-			getClampedZoom({
-				zoom: previousZoom * PREVIEW_ZOOM.step,
-			}),
-		);
-	}, []);
-
-	const zoomOut = useCallback(() => {
-		setZoomState((previousZoom) =>
-			getClampedZoom({
-				zoom: previousZoom / PREVIEW_ZOOM.step,
-			}),
-		);
-	}, []);
-
-	const setActualSize = useCallback(() => {
-		const actualSizeZoom = fitScale > 0 ? 1 / fitScale : 1;
-		setZoomState(
-			getClampedZoom({
-				zoom: actualSizeZoom,
-			}),
-		);
-	}, [fitScale]);
-
-	const setViewportPercent = useCallback(
-		({ percent }: { percent: number }) => {
-			const targetZoom = fitScale > 0 ? percent / 100 / fitScale : 1;
-			setZoomState(getClampedZoom({ zoom: targetZoom }));
-		},
-		[fitScale],
-	);
-
-	const getViewportRect = useCallback(
-		() => viewportRef.current?.getBoundingClientRect() ?? null,
-		[viewportRef],
-	);
-
-	const screenToCanvasWithViewport = useCallback(
-		({ clientX, clientY }: { clientX: number; clientY: number }) => {
-			const viewportRect = getViewportRect();
-			if (!viewportRect) return null;
-
-			return screenToCanvas({
-				clientX,
-				clientY,
-				geometry,
-				viewportRect,
-			});
-		},
-		[getViewportRect, geometry],
-	);
-
-	const canvasToOverlayWithViewport = useCallback(
-		({ canvasX, canvasY }: { canvasX: number; canvasY: number }) =>
-			canvasToOverlay({
-				canvasX,
-				canvasY,
-				geometry,
-			}),
-		[geometry],
-	);
-
-	const positionToOverlayWithViewport = useCallback(
-		({ positionX, positionY }: { positionX: number; positionY: number }) =>
-			positionToOverlay({
-				geometry,
-				positionX,
-				positionY,
-			}),
-		[geometry],
-	);
-
-	const getDisplayScaleWithViewport = useCallback(
-		() => getDisplayScale({ geometry }),
-		[geometry],
-	);
-
-	const getLogicalThresholdForScreenPixels = useCallback(
-		({ screenPixels }: { screenPixels: number }) =>
-			screenPixelsToLogicalThreshold({
-				geometry,
-				screenPixels,
-			}),
-		[geometry],
-	);
-
-	const handlePanPointerDown = useCallback(
-		({ event }: { event: React.PointerEvent }) => {
-			if (event.button !== MIDDLE_MOUSE_BUTTON || zoom <= 1) {
-				return false;
-			}
-
-			event.preventDefault();
-			event.stopPropagation();
-
-			panSessionRef.current = {
-				centerX: centerRef.current.x,
-				centerY: centerRef.current.y,
-				clientX: event.clientX,
-				clientY: event.clientY,
-				pointerId: event.pointerId,
-			};
-			setIsPanning(true);
-			(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
-			return true;
-		},
-		[zoom],
-	);
-
-	const handlePanPointerMove = useCallback(
-		({ event }: { event: React.PointerEvent }) => {
-			const panSession = panSessionRef.current;
-			if (!panSession) {
-				return false;
-			}
-
-			event.preventDefault();
-			event.stopPropagation();
-
-			const deltaX = event.clientX - panSession.clientX;
-			const deltaY = event.clientY - panSession.clientY;
-			const nextCenter = clampViewportCenter({
-				canvasHeight,
-				canvasWidth,
-				centerX: panSession.centerX - deltaX / viewportScale,
-				centerY: panSession.centerY - deltaY / viewportScale,
-				scale: viewportScale,
-				viewportHeight,
-				viewportWidth,
-			});
-
-			setCenter(nextCenter);
-			return true;
-		},
-		[canvasHeight, canvasWidth, viewportHeight, viewportScale, viewportWidth],
-	);
-
-	const handlePanPointerUp = useCallback(
-		({ event }: { event: React.PointerEvent }) => {
-			const panSession = panSessionRef.current;
-			if (!panSession) {
-				return false;
-			}
-
-			if (
-				(event.currentTarget as HTMLElement).hasPointerCapture(
-					panSession.pointerId,
-				)
-			) {
-				(event.currentTarget as HTMLElement).releasePointerCapture(
-					panSession.pointerId,
-				);
-			}
-
-			panSessionRef.current = null;
-			setIsPanning(false);
-			return true;
-		},
-		[],
-	);
-
-	useEffect(() => {
-		setZoomState(1);
-		setCenter({
-			x: canvasWidth / 2,
-			y: canvasHeight / 2,
-		});
-		panSessionRef.current = null;
-		setIsPanning(false);
-	}, [canvasHeight, canvasWidth]);
-
-	useEffect(() => {
-		setCenter((previousCenter) =>
-			clampViewportCenter({
-				canvasHeight,
-				canvasWidth,
-				centerX: previousCenter.x,
-				centerY: previousCenter.y,
-				scale: viewportScale,
-				viewportHeight,
-				viewportWidth,
-			}),
-		);
-	}, [canvasHeight, canvasWidth, viewportHeight, viewportScale, viewportWidth]);
-
-	const sceneWidth = canvasWidth * viewportScale;
-	const sceneHeight = canvasHeight * viewportScale;
-	const sceneLeft = viewportWidth / 2 - center.x * viewportScale;
-	const sceneTop = viewportHeight / 2 - center.y * viewportScale;
-	const canPan = zoom > 1;
-	const zoomPercent = Math.round(viewportScale * 100);
-
-	return useMemo(
-		() => ({
-			canPan,
-			isAtActualSize: isNearlyEqual({
-				leftValue: viewportScale,
-				rightValue: 1,
-				epsilon: IS_AT_ACTUAL_SIZE_EPSILON,
-			}),
-			isAtFit: isNearlyEqual({
-				leftValue: zoom,
-				rightValue: 1,
-				epsilon: IS_AT_FIT_EPSILON,
-			}),
-			isPanning,
-			sceneHeight,
-			sceneLeft,
-			sceneTop,
-			sceneWidth,
-			zoomPercent,
-			canvasToOverlay: canvasToOverlayWithViewport,
-			fitToScreen,
-			getDisplayScale: getDisplayScaleWithViewport,
-			handlePanPointerDown,
-			handlePanPointerMove,
-			handlePanPointerUp,
-			panByScreenDelta,
-			positionToOverlay: positionToOverlayWithViewport,
-			resetPan,
-			scaleZoom,
-			screenPixelsToLogicalThreshold: getLogicalThresholdForScreenPixels,
-			screenToCanvas: screenToCanvasWithViewport,
-			setActualSize,
-			setViewportPercent,
-			zoomIn,
-			zoomOut,
-		}),
-		[
-			canPan,
-			viewportScale,
-			zoom,
-			isPanning,
-			sceneHeight,
-			sceneLeft,
-			sceneTop,
-			sceneWidth,
-			zoomPercent,
-			canvasToOverlayWithViewport,
-			fitToScreen,
-			getDisplayScaleWithViewport,
-			handlePanPointerDown,
-			handlePanPointerMove,
-			handlePanPointerUp,
-			panByScreenDelta,
-			positionToOverlayWithViewport,
-			resetPan,
-			scaleZoom,
-			getLogicalThresholdForScreenPixels,
-			screenToCanvasWithViewport,
-			setActualSize,
-			setViewportPercent,
-			zoomIn,
-			zoomOut,
-		],
-	);
-}
-
-export function usePreviewViewport() {
-	const context = useContext(PreviewViewportContext);
-	if (!context) {
-		throw new Error(
-			"usePreviewViewport must be used within PreviewViewportProvider",
-		);
-	}
-
-	return context;
-}
+"use client";

+

+import {

+	createContext,

+	useCallback,

+	useContext,

+	useEffect,

+	useMemo,

+	useRef,

+	useState,

+} from "react";

+import {

+	canvasToOverlay,

+	getDisplayScale,

+	positionToOverlay,

+	screenPixelsToLogicalThreshold,

+	screenToCanvas,

+} from "@/lib/preview/preview-coords";

+import { clamp, isNearlyEqual } from "@/utils/math";

+import { PREVIEW_ZOOM } from "@/constants/editor-constants";

+

+const MIDDLE_MOUSE_BUTTON = 1;

+const IS_AT_FIT_EPSILON = 0.001;

+const IS_AT_ACTUAL_SIZE_EPSILON = 0.01;

+

+interface PreviewViewportContextValue {

+	canPan: boolean;

+	isAtFit: boolean;

+	isAtActualSize: boolean;

+	isPanning: boolean;

+	sceneHeight: number;

+	sceneLeft: number;

+	sceneTop: number;

+	sceneWidth: number;

+	zoomPercent: number;

+	canvasToOverlay: ({

+		canvasX,

+		canvasY,

+	}: {

+		canvasX: number;

+		canvasY: number;

+	}) => { x: number; y: number };

+	fitToScreen: () => void;

+	getDisplayScale: () => { x: number; y: number };

+	handlePanPointerDown: ({ event }: { event: React.PointerEvent }) => boolean;

+	handlePanPointerMove: ({ event }: { event: React.PointerEvent }) => boolean;

+	handlePanPointerUp: ({ event }: { event: React.PointerEvent }) => boolean;

+	positionToOverlay: ({

+		positionX,

+		positionY,

+	}: {

+		positionX: number;

+		positionY: number;

+	}) => { x: number; y: number };

+	panByScreenDelta: ({

+		deltaX,

+		deltaY,

+	}: {

+		deltaX: number;

+		deltaY: number;

+	}) => void;

+	resetPan: () => void;

+	scaleZoom: ({ factor }: { factor: number }) => void;

+	screenPixelsToLogicalThreshold: ({

+		screenPixels,

+	}: {

+		screenPixels: number;

+	}) => { x: number; y: number };

+	screenToCanvas: ({

+		clientX,

+		clientY,

+	}: {

+		clientX: number;

+		clientY: number;

+	}) => { x: number; y: number } | null;

+	setActualSize: () => void;

+	setViewportPercent: ({ percent }: { percent: number }) => void;

+	zoomIn: () => void;

+	zoomOut: () => void;

+}

+

+const PreviewViewportContext =

+	createContext<PreviewViewportContextValue | null>(null);

+

+interface PreviewViewportProviderProps {

+	children: React.ReactNode;

+	value: PreviewViewportContextValue;

+}

+

+interface PreviewViewportStateOptions {

+	canvasHeight: number;

+	canvasWidth: number;

+	viewportHeight: number;

+	viewportRef: React.RefObject<HTMLDivElement | null>;

+	viewportWidth: number;

+}

+

+interface PanSession {

+	centerX: number;

+	centerY: number;

+	clientX: number;

+	clientY: number;

+	pointerId: number;

+}

+

+function getClampedCenterAxis({

+	axisSize,

+	center,

+	scale,

+	viewportSize,

+}: {

+	axisSize: number;

+	center: number;

+	scale: number;

+	viewportSize: number;

+}): number {

+	if (axisSize <= 0 || scale <= 0 || viewportSize <= 0) {

+		return axisSize / 2;

+	}

+

+	const visibleHalfSpan = viewportSize / (2 * scale);

+	if (visibleHalfSpan >= axisSize / 2) {

+		return axisSize / 2;

+	}

+

+	return clamp({

+		value: center,

+		min: visibleHalfSpan,

+		max: axisSize - visibleHalfSpan,

+	});

+}

+

+function clampViewportCenter({

+	canvasHeight,

+	canvasWidth,

+	centerX,

+	centerY,

+	scale,

+	viewportHeight,

+	viewportWidth,

+}: {

+	canvasHeight: number;

+	canvasWidth: number;

+	centerX: number;

+	centerY: number;

+	scale: number;

+	viewportHeight: number;

+	viewportWidth: number;

+}): { x: number; y: number } {

+	return {

+		x: getClampedCenterAxis({

+			center: centerX,

+			axisSize: canvasWidth,

+			scale,

+			viewportSize: viewportWidth,

+		}),

+		y: getClampedCenterAxis({

+			center: centerY,

+			axisSize: canvasHeight,

+			scale,

+			viewportSize: viewportHeight,

+		}),

+	};

+}

+

+function getFitScale({

+	canvasHeight,

+	canvasWidth,

+	viewportHeight,

+	viewportWidth,

+}: {

+	canvasHeight: number;

+	canvasWidth: number;

+	viewportHeight: number;

+	viewportWidth: number;

+}): number {

+	if (

+		canvasHeight <= 0 ||

+		canvasWidth <= 0 ||

+		viewportHeight <= 0 ||

+		viewportWidth <= 0

+	) {

+		return 1;

+	}

+

+	return Math.min(viewportWidth / canvasWidth, viewportHeight / canvasHeight);

+}

+

+function getClampedZoom({ zoom }: { zoom: number }): number {

+	return clamp({

+		value: zoom,

+		min: PREVIEW_ZOOM.min,

+		max: PREVIEW_ZOOM.max,

+	});

+}

+

+export function PreviewViewportProvider({

+	children,

+	value,

+}: PreviewViewportProviderProps) {

+	return (

+		<PreviewViewportContext.Provider value={value}>

+			{children}

+		</PreviewViewportContext.Provider>

+	);

+}

+

+export function usePreviewViewportState({

+	canvasHeight,

+	canvasWidth,

+	viewportHeight,

+	viewportRef,

+	viewportWidth,

+}: PreviewViewportStateOptions): PreviewViewportContextValue {

+	const [zoom, setZoomState] = useState(1);

+	const [center, setCenter] = useState(() => ({

+		x: canvasWidth / 2,

+		y: canvasHeight / 2,

+	}));

+	const [isPanning, setIsPanning] = useState(false);

+	const panSessionRef = useRef<PanSession | null>(null);

+	const centerRef = useRef(center);

+	centerRef.current = center;

+

+	const fitScale = useMemo(

+		() =>

+			getFitScale({

+				canvasHeight,

+				canvasWidth,

+				viewportHeight,

+				viewportWidth,

+			}),

+		[canvasHeight, canvasWidth, viewportHeight, viewportWidth],

+	);

+	const viewportScale = fitScale * zoom;

+	const geometry = useMemo(

+		() => ({

+			canvasHeight,

+			canvasWidth,

+			centerX: center.x,

+			centerY: center.y,

+			scale: viewportScale,

+			viewportHeight,

+			viewportWidth,

+		}),

+		[

+			canvasHeight,

+			canvasWidth,

+			center.x,

+			center.y,

+			viewportHeight,

+			viewportScale,

+			viewportWidth,

+		],

+	);

+

+	const scaleZoom = useCallback(({ factor }: { factor: number }) => {

+		setZoomState((previousZoom) =>

+			getClampedZoom({

+				zoom: previousZoom * factor,

+			}),

+		);

+	}, []);

+

+	const panByScreenDelta = useCallback(

+		({ deltaX, deltaY }: { deltaX: number; deltaY: number }) => {

+			if (zoom <= 1 || (deltaX === 0 && deltaY === 0)) {

+				return;

+			}

+

+			setCenter((previousCenter) =>

+				clampViewportCenter({

+					canvasHeight,

+					canvasWidth,

+					centerX: previousCenter.x + deltaX / viewportScale,

+					centerY: previousCenter.y + deltaY / viewportScale,

+					scale: viewportScale,

+					viewportHeight,

+					viewportWidth,

+				}),

+			);

+		},

+		[

+			canvasHeight,

+			canvasWidth,

+			viewportHeight,

+			viewportScale,

+			viewportWidth,

+			zoom,

+		],

+	);

+

+	const resetPan = useCallback(() => {

+		setCenter({

+			x: canvasWidth / 2,

+			y: canvasHeight / 2,

+		});

+	}, [canvasHeight, canvasWidth]);

+

+	const fitToScreen = useCallback(() => {

+		setZoomState(1);

+		setCenter({

+			x: canvasWidth / 2,

+			y: canvasHeight / 2,

+		});

+	}, [canvasHeight, canvasWidth]);

+

+	const zoomIn = useCallback(() => {

+		setZoomState((previousZoom) =>

+			getClampedZoom({

+				zoom: previousZoom * PREVIEW_ZOOM.step,

+			}),

+		);

+	}, []);

+

+	const zoomOut = useCallback(() => {

+		setZoomState((previousZoom) =>

+			getClampedZoom({

+				zoom: previousZoom / PREVIEW_ZOOM.step,

+			}),

+		);

+	}, []);

+

+	const setActualSize = useCallback(() => {

+		const actualSizeZoom = fitScale > 0 ? 1 / fitScale : 1;

+		setZoomState(

+			getClampedZoom({

+				zoom: actualSizeZoom,

+			}),

+		);

+	}, [fitScale]);

+

+	const setViewportPercent = useCallback(

+		({ percent }: { percent: number }) => {

+			const targetZoom = fitScale > 0 ? percent / 100 / fitScale : 1;

+			setZoomState(getClampedZoom({ zoom: targetZoom }));

+		},

+		[fitScale],

+	);

+

+	const getViewportRect = useCallback(

+		() => viewportRef.current?.getBoundingClientRect() ?? null,

+		[viewportRef],

+	);

+

+	const screenToCanvasWithViewport = useCallback(

+		({ clientX, clientY }: { clientX: number; clientY: number }) => {

+			const viewportRect = getViewportRect();

+			if (!viewportRect) return null;

+

+			return screenToCanvas({

+				clientX,

+				clientY,

+				geometry,

+				viewportRect,

+			});

+		},

+		[getViewportRect, geometry],

+	);

+

+	const canvasToOverlayWithViewport = useCallback(

+		({ canvasX, canvasY }: { canvasX: number; canvasY: number }) =>

+			canvasToOverlay({

+				canvasX,

+				canvasY,

+				geometry,

+			}),

+		[geometry],

+	);

+

+	const positionToOverlayWithViewport = useCallback(

+		({ positionX, positionY }: { positionX: number; positionY: number }) =>

+			positionToOverlay({

+				geometry,

+				positionX,

+				positionY,

+			}),

+		[geometry],

+	);

+

+	const getDisplayScaleWithViewport = useCallback(

+		() => getDisplayScale({ geometry }),

+		[geometry],

+	);

+

+	const getLogicalThresholdForScreenPixels = useCallback(

+		({ screenPixels }: { screenPixels: number }) =>

+			screenPixelsToLogicalThreshold({

+				geometry,

+				screenPixels,

+			}),

+		[geometry],

+	);

+

+	const handlePanPointerDown = useCallback(

+		({ event }: { event: React.PointerEvent }) => {

+			if (event.button !== MIDDLE_MOUSE_BUTTON || zoom <= 1) {

+				return false;

+			}

+

+			event.preventDefault();

+			event.stopPropagation();

+

+			panSessionRef.current = {

+				centerX: centerRef.current.x,

+				centerY: centerRef.current.y,

+				clientX: event.clientX,

+				clientY: event.clientY,

+				pointerId: event.pointerId,

+			};

+			setIsPanning(true);

+			(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);

+			return true;

+		},

+		[zoom],

+	);

+

+	const handlePanPointerMove = useCallback(

+		({ event }: { event: React.PointerEvent }) => {

+			const panSession = panSessionRef.current;

+			if (!panSession) {

+				return false;

+			}

+

+			event.preventDefault();

+			event.stopPropagation();

+

+			const deltaX = event.clientX - panSession.clientX;

+			const deltaY = event.clientY - panSession.clientY;

+			const nextCenter = clampViewportCenter({

+				canvasHeight,

+				canvasWidth,

+				centerX: panSession.centerX - deltaX / viewportScale,

+				centerY: panSession.centerY - deltaY / viewportScale,

+				scale: viewportScale,

+				viewportHeight,

+				viewportWidth,

+			});

+

+			setCenter(nextCenter);

+			return true;

+		},

+		[canvasHeight, canvasWidth, viewportHeight, viewportScale, viewportWidth],

+	);

+

+	const handlePanPointerUp = useCallback(

+		({ event }: { event: React.PointerEvent }) => {

+			const panSession = panSessionRef.current;

+			if (!panSession) {

+				return false;

+			}

+

+			if (

+				(event.currentTarget as HTMLElement).hasPointerCapture(

+					panSession.pointerId,

+				)

+			) {

+				(event.currentTarget as HTMLElement).releasePointerCapture(

+					panSession.pointerId,

+				);

+			}

+

+			panSessionRef.current = null;

+			setIsPanning(false);

+			return true;

+		},

+		[],

+	);

+

+	useEffect(() => {

+		setZoomState(1);

+		setCenter({

+			x: canvasWidth / 2,

+			y: canvasHeight / 2,

+		});

+		panSessionRef.current = null;

+		setIsPanning(false);

+	}, [canvasHeight, canvasWidth]);

+

+	useEffect(() => {

+		setCenter((previousCenter) =>

+			clampViewportCenter({

+				canvasHeight,

+				canvasWidth,

+				centerX: previousCenter.x,

+				centerY: previousCenter.y,

+				scale: viewportScale,

+				viewportHeight,

+				viewportWidth,

+			}),

+		);

+	}, [canvasHeight, canvasWidth, viewportHeight, viewportScale, viewportWidth]);

+

+	const sceneWidth = canvasWidth * viewportScale;

+	const sceneHeight = canvasHeight * viewportScale;

+	const sceneLeft = viewportWidth / 2 - center.x * viewportScale;

+	const sceneTop = viewportHeight / 2 - center.y * viewportScale;

+	const canPan = zoom > 1;

+	const zoomPercent = Math.round(viewportScale * 100);

+

+	return useMemo(

+		() => ({

+			canPan,

+			isAtActualSize: isNearlyEqual({

+				leftValue: viewportScale,

+				rightValue: 1,

+				epsilon: IS_AT_ACTUAL_SIZE_EPSILON,

+			}),

+			isAtFit: isNearlyEqual({

+				leftValue: zoom,

+				rightValue: 1,

+				epsilon: IS_AT_FIT_EPSILON,

+			}),

+			isPanning,

+			sceneHeight,

+			sceneLeft,

+			sceneTop,

+			sceneWidth,

+			zoomPercent,

+			canvasToOverlay: canvasToOverlayWithViewport,

+			fitToScreen,

+			getDisplayScale: getDisplayScaleWithViewport,

+			handlePanPointerDown,

+			handlePanPointerMove,

+			handlePanPointerUp,

+			panByScreenDelta,

+			positionToOverlay: positionToOverlayWithViewport,

+			resetPan,

+			scaleZoom,

+			screenPixelsToLogicalThreshold: getLogicalThresholdForScreenPixels,

+			screenToCanvas: screenToCanvasWithViewport,

+			setActualSize,

+			setViewportPercent,

+			zoomIn,

+			zoomOut,

+		}),

+		[

+			canPan,

+			viewportScale,

+			zoom,

+			isPanning,

+			sceneHeight,

+			sceneLeft,

+			sceneTop,

+			sceneWidth,

+			zoomPercent,

+			canvasToOverlayWithViewport,

+			fitToScreen,

+			getDisplayScaleWithViewport,

+			handlePanPointerDown,

+			handlePanPointerMove,

+			handlePanPointerUp,

+			panByScreenDelta,

+			positionToOverlayWithViewport,

+			resetPan,

+			scaleZoom,

+			getLogicalThresholdForScreenPixels,

+			screenToCanvasWithViewport,

+			setActualSize,

+			setViewportPercent,

+			zoomIn,

+			zoomOut,

+		],

+	);

+}

+

+export function usePreviewViewport() {

+	const context = useContext(PreviewViewportContext);

+	if (!context) {

+		throw new Error(

+			"usePreviewViewport must be used within PreviewViewportProvider",

+		);

+	}

+

+	return context;

+}