feat(toggle-pan): Add toggle to switch between scroll to pan and scroll to zoom

- Modify wheel behaviour to pan by default for a more natural behaviour with trackpads (https://github.com/BetterTyped/react-zoom-pan-pinch/pull/447)
- Bump `react-zoom-pan-pinch` version to `3.6.1` from `3.4.4`

apps/artboard/src/pages/builder.tsx

@@ -1,7 +1,7 @@
 import { SectionKey } from "@reactive-resume/schema";
 import { pageSizeMap, Template } from "@reactive-resume/utils";
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 
 import { MM_TO_PX, Page } from "../components/page";
@@ -14,6 +14,8 @@ export const BuilderLayout = () => {
   const layout = useArtboardStore((state) => state.resume.metadata.layout);
   const template = useArtboardStore((state) => state.resume.metadata.template as Template);
 
+  const [wheelPanning, setWheelPanning] = useState(true);
+
   const Template = useMemo(() => getTemplate(template), [template]);
 
   useEffect(() => {
@@ -27,6 +29,9 @@ export const BuilderLayout = () => {
         transformRef.current?.resetTransform(0);
         setTimeout(() => transformRef.current?.centerView(0.8, 0), 10);
       }
+      if (event.data.type === "TOGGLE_PAN_MODE") {
+        setWheelPanning(event.data.panMode);
+      }
     };
 
     window.addEventListener("message", handleMessage);
@@ -44,6 +49,12 @@ export const BuilderLayout = () => {
       minScale={0.4}
       initialScale={0.8}
       limitToBounds={false}
+      panning={{
+        wheelPanning: wheelPanning,
+      }}
+      wheel={{
+        wheelDisabled: wheelPanning,
+      }}
     >
       <TransformComponent
         wrapperClass="!w-screen !h-screen"