@hunterchen/canvas 0.10.1 → 0.11.1

package/dist/components/canvas/canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,EAIZ,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AA2Bf,OAAO,KAAK,EAEV,OAAO,EACP,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACd,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,KAAK;IACb,eAAe,EAAE,kBAAkB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,WAAW,CAAC,EAAC,MAAM,CAAC;IACpB,YAAY,CAAC,EAAC,MAAM,CAAC;IAGrB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAGrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,8CAA8C;IAC9C,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,qDAAqD;IACrD,cAAc,CAAC,EAAE,UAAU,CAAC;IAG5B,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,sFAAsF;IACtF,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAG9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;IAG9B,mCAAmC;IACnC,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAYD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,KAAK,CAwnBrB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,EAIZ,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AA4Bf,OAAO,KAAK,EAEV,OAAO,EACP,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACd,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,KAAK;IACb,eAAe,EAAE,kBAAkB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,WAAW,CAAC,EAAC,MAAM,CAAC;IACpB,YAAY,CAAC,EAAC,MAAM,CAAC;IAGrB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAGrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,8CAA8C;IAC9C,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,qDAAqD;IACrD,cAAc,CAAC,EAAE,UAAU,CAAC;IAG5B,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,sFAAsF;IACtF,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAG9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;IAG9B,mCAAmC;IACnC,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAYD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,KAAK,CA6qBrB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/canvas/canvas.js

@@ -1,5 +1,5 @@
 import { CanvasProvider } from "../../contexts/CanvasContext.js";
-import { DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, FADE_TRANSITION, INTERACTIVE_SELECTOR, MAX_ZOOM, MIN_ZOOMS, MOUSE_WHEEL_ZOOM_SENSITIVITY, STAGE2_TRANSITION, TRACKPAD_ZOOM_SENSITIVITY, ZOOM_BOUND } from "../../lib/constants.js";
+import { DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, FADE_TRANSITION, INTERACTIVE_SELECTOR, MAX_ZOOM, MIN_ZOOMS, MOUSE_WHEEL_ZOOM_SENSITIVITY, RESPONSIVE_ZOOM_MAP, 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";
@@ -392,6 +392,10 @@ const Canvas = ({ children, homeCoordinates, navItems, skipIntro = false, introC
 			y: -offset.y
 		}, viewportRef, onComplete, zoom);
 	}, [panToOffset, viewportRef]);
+	const navbarNavigateRef = useRef(null);
+	const registerNavbarNavigate = useCallback((handler) => {
+		navbarNavigateRef.current = handler;
+	}, []);
 	return /* @__PURE__ */ jsx(CanvasWrapper, {
 		introProgress,
 		onIntroGrowComplete: startStage2,
@@ -413,6 +417,39 @@ const Canvas = ({ children, homeCoordinates, navItems, skipIntro = false, introC
 			animationStage,
 			nextTargetSection,
 			setNextTargetSection,
+			navigateToSection: useCallback((sectionId) => {
+				if (navbarNavigateRef.current) navbarNavigateRef.current(sectionId);
+				else if (navItems) {
+					const item = navItems.find((i) => i.id === sectionId);
+					if (!item) return;
+					setNextTargetSection(sectionId);
+					if (item.isHome) onResetViewAndItems();
+					else {
+						const zoom = RESPONSIVE_ZOOM_MAP[getScreenSizeEnum(windowWidth)];
+						handlePanToOffset(getSectionPanCoordinates({
+							windowDimensions: {
+								width: windowWidth,
+								height: windowHeight
+							},
+							coords: {
+								x: item.x,
+								y: item.y,
+								width: item.width,
+								height: item.height
+							},
+							targetZoom: zoom,
+							negative: true
+						}), void 0, zoom);
+					}
+				}
+			}, [
+				navItems,
+				windowWidth,
+				windowHeight,
+				onResetViewAndItems,
+				handlePanToOffset,
+				setNextTargetSection
+			]),
 			children: [animationStage >= 2 && /* @__PURE__ */ jsxs(Fragment, { children: [!toolbarConfig?.hidden && /* @__PURE__ */ jsx(toolbar_default, {
 				homeCoordinates: offsetHomeCoordinates,
 				config: toolbarConfig
@@ -420,7 +457,8 @@ const Canvas = ({ children, homeCoordinates, navItems, skipIntro = false, introC
 				panToOffset: handlePanToOffset,
 				onReset: onResetViewAndItems,
 				items: navItems,
-				config: navbarConfig
+				config: navbarConfig,
+				onRegisterNavigate: registerNavbarNavigate
 			})] }), /* @__PURE__ */ jsx("div", {
 				ref: setViewportRef,
 				className: "relative h-full w-full touch-none select-none overflow-hidden",

package/dist/components/canvas/canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.js","names":["useWindowDimensions","Toolbar"],"sources":["../../../src/components/canvas/canvas.tsx"],"sourcesContent":["import {\n  motion,\n  type MotionValue,\n  type Point,\n  useMotionValue,\n  animate,\n  useTransform,\n  type Transition,\n} from \"framer-motion\";\nimport React, {\n  useState,\n  useRef,\n  type PointerEvent,\n  type FC,\n  useEffect,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { CanvasProvider } from \"../../contexts/CanvasContext\";\nimport {\n  calcInitialBoxWidth,\n  canvasHeight,\n  canvasWidth,\n  getDistance,\n  getMidpoint,\n  getScreenSizeEnum,\n  getSectionPanCoordinates,\n  INTERACTIVE_SELECTOR,\n  MAX_ZOOM,\n  MIN_ZOOMS,\n  panToOffsetScene,\n  ZOOM_BOUND,\n} from \"../../lib/canvas\";\nimport {\n  STAGE2_TRANSITION,\n  FADE_TRANSITION,\n  MOUSE_WHEEL_ZOOM_SENSITIVITY,\n  TRACKPAD_ZOOM_SENSITIVITY,\n  DEFAULT_CANVAS_WIDTH,\n  DEFAULT_CANVAS_HEIGHT,\n} from \"../../lib/constants\";\nimport useWindowDimensions from \"../../hooks/useWindowDimensions\";\nimport Navbar from \"./navbar\";\nimport Toolbar from \"./toolbar\";\nimport type {\n  CanvasSection,\n  NavItem,\n  NavbarConfig,\n  SectionCoordinates,\n  ToolbarConfig,\n} from \"../../types\";\nimport { CanvasWrapper } from \"./wrapper\";\nimport { usePerformanceMode } from \"../../hooks/usePerformanceMode\";\nimport type { ReactNode } from \"react\";\nimport { DefaultCanvasBackground } from \"./backgrounds\";\n\ninterface Props {\n  homeCoordinates: SectionCoordinates;\n  children: React.ReactNode;\n\n  // Optional height and with params, if omitted sizing will be 6000x4000\n  canvasWidth?:number;\n  canvasHeight?:number;\n\n  // Navbar data (optional). If omitted, navbar is hidden.\n  /** Array of navigation items for the navbar. If omitted, navbar is hidden. */\n  navItems?: NavItem[];\n\n  // ============== Intro Animation Customization ==============\n  /** Disable intro animation entirely */\n  skipIntro?: boolean;\n  /** Custom intro content during loading */\n  introContent?: ReactNode;\n  /** Custom loading text */\n  loadingText?: string;\n  /** Background gradient for intro */\n  introBackgroundGradient?: string;\n  /** Canvas box gradient */\n  canvasBoxGradient?: string;\n  /** Custom grow transition */\n  growTransition?: Transition;\n  /** Custom blur transition */\n  blurTransition?: Transition;\n  /** Custom pan-to-home transition (stage 2) */\n  panTransition?: Transition;\n  /** Custom fade-in transition for the canvas scene */\n  fadeTransition?: Transition;\n\n  // ============== Background Customization ==============\n  /** Custom canvas background. If not provided, uses DefaultCanvasBackground. */\n  canvasBackground?: ReactNode;\n  /** Custom wrapper/intro background. If not provided, uses introBackgroundGradient. */\n  wrapperBackground?: ReactNode;\n\n  // ============== Toolbar Customization ==============\n  /** Toolbar customization options */\n  toolbarConfig?: ToolbarConfig;\n\n  // ============== Navbar Customization ==============\n  /** Navbar customization options */\n  navbarConfig?: NavbarConfig;\n}\n\nconst stopAllMotion = (\n  x: MotionValue<number>,\n  y: MotionValue<number>,\n  scale: MotionValue<number>\n) => {\n  x.stop();\n  y.stop();\n  scale.stop();\n};\n\nconst Canvas: FC<Props> = ({\n  children,\n  homeCoordinates,\n  navItems,\n  skipIntro = false,\n  introContent,\n  loadingText,\n  introBackgroundGradient,\n  canvasBoxGradient,\n  growTransition,\n  blurTransition,\n  panTransition,\n  fadeTransition,\n  canvasBackground,\n  wrapperBackground,\n  toolbarConfig,\n  navbarConfig,\n  canvasHeight,\n  canvasWidth,\n}) => {\n  const { height: windowHeight, width: windowWidth } = useWindowDimensions();\n\n  const { mode } = usePerformanceMode();\n\n  const hasNavbar = Boolean(navItems && navItems.length > 0);\n\n  const sceneWidth = canvasWidth ?? DEFAULT_CANVAS_WIDTH;\n  const sceneHeight = canvasHeight ?? DEFAULT_CANVAS_HEIGHT;\n\n  const MIN_ZOOM = MIN_ZOOMS[getScreenSizeEnum(windowWidth)];\n\n  // tracks if user is panning the screen\n  const [isPanning, setIsPanning] = useState<boolean>(false);\n  // this one is moving from scene control, not from user\n  const [isSceneMoving, setIsSceneMoving] = useState<boolean>(false);\n  const [panStartPoint, setPanStartPoint] = useState<Point>({ x: 0, y: 0 });\n  const [initialPanOffsetOnDrag, setInitialPanOffsetOnDrag] = useState<Point>({\n    x: 0,\n    y: 0,\n  });\n  const [isResetting, setIsResetting] = useState<boolean>(false);\n  const [maxZIndex, setMaxZIndex] = useState<number>(50);\n  const [animationStage, setAnimationStage] = useState<number>(\n    skipIntro ? 2 : 0\n  ); // 0: initial, 1: finish grow, 2: pan to home\n  const [nextTargetSection, setNextTargetSection] =\n    useState<CanvasSection | null>(null);\n  // Track if the intro (stage1 + stage2) is still running, to avoid accidental cancellation\n  const isIntroAnimatingRef = useRef(!skipIntro);\n\n  const initialBoxWidth = useMemo(\n    () => calcInitialBoxWidth(windowWidth, windowHeight),\n    [windowWidth, windowHeight]\n  );\n\n  const offsetHomeCoordinates = useMemo(\n    () =>\n      getSectionPanCoordinates({\n        windowDimensions: { width: windowWidth, height: windowHeight },\n        coords: homeCoordinates,\n        targetZoom: 1,\n      }),\n    [homeCoordinates, windowWidth, windowHeight]\n  );\n\n  // When skipIntro, initialize at home position; otherwise start at origin for intro animation\n  const x = useMotionValue(skipIntro ? offsetHomeCoordinates.x : 0);\n  const y = useMotionValue(skipIntro ? offsetHomeCoordinates.y : 0);\n  const scale = useMotionValue(skipIntro ? 1 : initialBoxWidth);\n\n  const onResetViewAndItems = useCallback(\n    (onComplete?: () => void): void => {\n      setIsResetting(true);\n\n      void panToOffsetScene(offsetHomeCoordinates, x, y, scale, 1).then(() => {\n        setIsResetting(false);\n        if (onComplete) onComplete();\n      });\n    },\n    [offsetHomeCoordinates, x, y, scale]\n  );\n\n  // Shared intro progress (0->1) driven by CanvasWrapper\n  const introProgress = useMotionValue(0);\n\n  // Precompute final stage1 scale and offsets (snapshot dimensions once on mount)\n  const stage1Targets = useMemo(() => {\n    const finalScale = Math.max(\n      (windowWidth || 0) / sceneWidth,\n      (windowHeight || 0) / sceneHeight\n    );\n    const endX = (windowWidth - sceneWidth * finalScale) / 2;\n    const endY = (windowHeight - sceneHeight * finalScale) / 2;\n    return { finalScale, endX, endY };\n  }, [windowWidth, windowHeight, sceneWidth, sceneHeight]);\n\n  // Replace direct motion values with derived transforms during stage1\n  const derivedScale = useTransform(\n    introProgress,\n    [0, 1],\n    [initialBoxWidth, stage1Targets.finalScale]\n  );\n  const derivedX = useTransform(introProgress, [0, 1], [0, stage1Targets.endX]);\n  const derivedY = useTransform(introProgress, [0, 1], [0, stage1Targets.endY]);\n\n  // While intro (stage1) is running, bind x/y/scale to derived versions.\n  useEffect(() => {\n    const unsubscribeScale = derivedScale.on(\"change\", (v) => {\n      if (animationStage === 0) scale.set(v);\n    });\n    const unsubscribeX = derivedX.on(\"change\", (v) => {\n      if (animationStage === 0) x.set(v);\n    });\n    const unsubscribeY = derivedY.on(\"change\", (v) => {\n      if (animationStage === 0) y.set(v);\n    });\n    return () => {\n      unsubscribeScale();\n      unsubscribeX();\n      unsubscribeY();\n    };\n  }, [derivedScale, derivedX, derivedY, animationStage, scale, x, y]);\n\n  // Merge custom panTransition with defaults\n  const effectivePanTransition: Transition = useMemo(() => {\n    if (!panTransition) return STAGE2_TRANSITION;\n    return {\n      ...STAGE2_TRANSITION,\n      ...panTransition,\n    };\n  }, [panTransition]);\n\n  // Kick off stage2 (pan to home) when grow completes (introProgress hits 1)\n  const startStage2 = useCallback(() => {\n    if (skipIntro) {\n      x.set(offsetHomeCoordinates.x);\n      y.set(offsetHomeCoordinates.y);\n      scale.set(1);\n      setAnimationStage(2);\n      isIntroAnimatingRef.current = false;\n      return;\n    }\n\n    setAnimationStage(1);\n\n    Promise.all([\n      animate(x, offsetHomeCoordinates.x, effectivePanTransition),\n      animate(y, offsetHomeCoordinates.y, effectivePanTransition),\n      animate(scale, 1, effectivePanTransition),\n    ])\n      .then(() => {\n        setAnimationStage(2);\n        isIntroAnimatingRef.current = false;\n      })\n      .catch(() => {\n        isIntroAnimatingRef.current = false;\n      });\n  }, [offsetHomeCoordinates, x, y, scale, effectivePanTransition, skipIntro]);\n\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const sceneRef = useRef<HTMLDivElement>(null);\n\n  // Stable wheel listener wrapper that always calls the latest handler via ref\n  const wheelHandlerRef = useRef<((e: WheelEvent) => void) | null>(null);\n  const wheelWrapper = useCallback((e: WheelEvent) => {\n    wheelHandlerRef.current?.(e);\n  }, []);\n\n  // Ensure wheel listener attaches when the element actually mounts (wrapper delays child mount)\n  const setViewportRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // Clean up old listener if ref changes/unmounts\n      if (viewportRef.current) {\n        viewportRef.current.removeEventListener(\"wheel\", wheelWrapper);\n      }\n      viewportRef.current = node;\n      if (node) {\n        node.addEventListener(\"wheel\", wheelWrapper, { passive: false });\n      }\n    },\n    [wheelWrapper]\n  );\n\n  const activePointersRef = useRef<Map<number, PointerEvent<HTMLDivElement>>>(\n    new Map()\n  );\n  const initialPinchStateRef = useRef<{\n    distance: number;\n    midpoint: Point;\n    zoom: number;\n    panOffset: Point;\n  } | null>(null);\n\n  const panToOffset = useCallback(\n    (\n      offset: Point,\n      viewportRef: React.RefObject<HTMLDivElement | null>,\n      onComplete?: () => void,\n      zoom?: number\n    ): void => {\n      if (!viewportRef.current) return;\n      setIsSceneMoving(true);\n\n      // Calculate bounds based on scene and viewport dimensions\n      const viewportWidth = viewportRef.current.offsetWidth;\n      const viewportHeight = viewportRef.current.offsetHeight;\n\n      const minPanX = viewportWidth - sceneWidth * (zoom ?? 1);\n      const maxPanX = 0;\n      const minPanY = viewportHeight - sceneHeight * (zoom ?? 1);\n      const maxPanY = 0;\n\n      // Clamp the offset to keep the scene within bounds, shouldn't be needed but still implemented\n      const clampedX = Math.min(Math.max(offset.x, minPanX), maxPanX);\n      const clampedY = Math.min(Math.max(offset.y, minPanY), maxPanY);\n\n      void panToOffsetScene(\n        { x: clampedX, y: clampedY },\n        x,\n        y,\n        scale,\n        zoom\n      ).then(() => {\n        setIsSceneMoving(false);\n        if (onComplete) onComplete();\n      });\n    },\n    [sceneWidth, sceneHeight, x, y, scale]\n  );\n\n  // Guarded stop that ignores attempts during intro animations\n  const stopAllSceneMotion = useCallback(() => {\n    if (isIntroAnimatingRef.current) return; // ignore stops while intro runs\n    stopAllMotion(x, y, scale);\n  }, [x, y, scale]);\n\n  const handlePointerDown = useCallback(\n    (event: PointerEvent<HTMLDivElement>): void => {\n      if (animationStage < 2) return; // ignore during intro animations\n      activePointersRef.current.set(event.pointerId, event);\n      (event.target as HTMLElement).setPointerCapture(event.pointerId);\n      if (isResetting || isSceneMoving) return;\n      stopAllSceneMotion();\n      // pan with 1 pointer, pinch with 2 pointers\n      if (activePointersRef.current.size === 1) {\n        // do not pan from interactive elements\n        const targetElement = event.target as HTMLElement;\n        if (targetElement.closest(INTERACTIVE_SELECTOR)) {\n          activePointersRef.current.delete(event.pointerId);\n          (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n          return;\n        }\n\n        setIsPanning(true);\n        setPanStartPoint({ x: event.clientX, y: event.clientY });\n        setInitialPanOffsetOnDrag({ x: x.get(), y: y.get() });\n        if (viewportRef.current) viewportRef.current.style.cursor = \"grabbing\";\n      } else if (activePointersRef.current.size === 2) {\n        setIsPanning(false);\n        const pointers = Array.from(activePointersRef.current.values());\n        initialPinchStateRef.current = {\n          distance: getDistance(pointers[0]!, pointers[1]!),\n          midpoint: getMidpoint(pointers[0]!, pointers[1]!),\n          zoom: scale.get(),\n          panOffset: { x: x.get(), y: y.get() },\n        };\n      }\n    },\n    [\n      isResetting,\n      isSceneMoving,\n      setIsPanning,\n      setPanStartPoint,\n      setInitialPanOffsetOnDrag,\n      x,\n      y,\n      scale,\n      viewportRef,\n      animationStage,\n      stopAllSceneMotion,\n    ]\n  );\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent<HTMLDivElement>): void => {\n      if (animationStage < 2) return;\n      if (isPanning || activePointersRef.current.size >= 2) {\n        stopAllSceneMotion();\n      }\n      if (!activePointersRef.current.has(event.pointerId) || isResetting)\n        return;\n      activePointersRef.current.set(event.pointerId, event);\n\n      if (isPanning && activePointersRef.current.size === 1) {\n        event.preventDefault();\n        const deltaX = event.clientX - panStartPoint.x;\n        const deltaY = event.clientY - panStartPoint.y;\n\n        // UPDATE to use motion value\n        const minPanX = windowWidth - sceneWidth * scale.get();\n        const maxPanX = 0;\n        const minPanY = windowHeight - sceneHeight * scale.get();\n        const maxPanY = 0;\n\n        const newX = Math.min(\n          Math.max(initialPanOffsetOnDrag.x + deltaX, minPanX),\n          maxPanX\n        );\n        const newY = Math.min(\n          Math.max(initialPanOffsetOnDrag.y + deltaY, minPanY),\n          maxPanY\n        );\n        x.set(newX);\n        y.set(newY);\n      } else if (\n        activePointersRef.current.size >= 2 &&\n        initialPinchStateRef.current\n      ) {\n        event.preventDefault();\n        const pointers = Array.from(activePointersRef.current.values());\n        const p1 = pointers[0]!;\n        const p2 = pointers[1]!;\n\n        const currentDistance = getDistance(p1, p2);\n        const currentMidpoint = getMidpoint(p1, p2);\n\n        const {\n          distance: initialDistance,\n          zoom: initialZoom,\n          panOffset: initialPanOffsetPinch,\n        } = initialPinchStateRef.current;\n\n        if (initialDistance === 0) return;\n\n        let newZoom = initialZoom * (currentDistance / initialDistance);\n        newZoom = Math.max(\n          (window.innerWidth / sceneWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas\n          (window.innerHeight / sceneHeight) * ZOOM_BOUND, // Ensure zoom is at least the height of the canvas\n          Math.min(newZoom, 10),\n          MIN_ZOOM // Ensure zoom is not less than MIN_ZOOM\n        );\n\n        const mx = currentMidpoint.x;\n        const my = currentMidpoint.y;\n\n        const minPanX = windowWidth - sceneWidth * newZoom;\n        const maxPanX = 0;\n        const minPanY = windowHeight - sceneHeight * newZoom;\n        const maxPanY = 0;\n\n        let newPanX =\n          mx - ((mx - initialPanOffsetPinch.x) / initialZoom) * newZoom;\n        let newPanY =\n          my - ((my - initialPanOffsetPinch.y) / initialZoom) * newZoom;\n\n        // Clamp pan to prevent leaving bounds\n        newPanX = Math.min(Math.max(newPanX, minPanX), maxPanX);\n        newPanY = Math.min(Math.max(newPanY, minPanY), maxPanY);\n\n        scale.set(newZoom);\n        x.set(newPanX);\n        y.set(newPanY);\n      }\n    },\n    [\n      isPanning,\n      isResetting,\n      x,\n      y,\n      scale,\n      panStartPoint.x,\n      panStartPoint.y,\n      windowWidth,\n      sceneWidth,\n      windowHeight,\n      sceneHeight,\n      initialPanOffsetOnDrag.x,\n      initialPanOffsetOnDrag.y,\n      MIN_ZOOM,\n      animationStage,\n      stopAllSceneMotion,\n    ]\n  );\n\n  const handlePointerUpOrCancel = useCallback(\n    (event: PointerEvent<HTMLDivElement>): void => {\n      if (animationStage < 2) {\n        event.preventDefault();\n        return; // ignore pointer up during intro\n      }\n      stopAllSceneMotion();\n      event.preventDefault();\n      if ((event.target as HTMLElement).hasPointerCapture(event.pointerId)) {\n        (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n      }\n      activePointersRef.current.delete(event.pointerId);\n\n      if (isPanning && activePointersRef.current.size < 1) {\n        setIsPanning(false);\n        if (viewportRef.current)\n          viewportRef.current.style.cursor = \"url('/customcursor.svg'), grab\";\n      }\n\n      if (initialPinchStateRef.current && activePointersRef.current.size < 2) {\n        initialPinchStateRef.current = null;\n      }\n\n      if (\n        !isPanning &&\n        activePointersRef.current.size === 1 &&\n        !initialPinchStateRef.current\n      ) {\n        const lastPointer = Array.from(activePointersRef.current.values())[0]!;\n        setIsPanning(true);\n        setPanStartPoint({ x: lastPointer.clientX, y: lastPointer.clientY });\n        setInitialPanOffsetOnDrag({ x: x.get(), y: y.get() });\n      }\n    },\n    [x, y, isPanning, animationStage, stopAllSceneMotion]\n  );\n\n  const handleWheelZoom = useCallback(\n    (event: WheelEvent) => {\n      if (animationStage < 2) {\n        event.preventDefault();\n        return; // block wheel interaction during intro animations\n      }\n      event.preventDefault();\n      // pinch gesture on track\n      const isPinch = event.ctrlKey || event.metaKey;\n      const isMouseWheelZoom =\n        event.deltaMode === WheelEvent.DOM_DELTA_LINE ||\n        Math.abs(event.deltaY) >= 100;\n\n      // mouse wheel zoom and track pad zoom have different sensitivities\n      const ZOOM_SENSITIVITY = isMouseWheelZoom\n        ? MOUSE_WHEEL_ZOOM_SENSITIVITY\n        : TRACKPAD_ZOOM_SENSITIVITY;\n\n      if (isPinch) {\n        const currentZoom = scale.get();\n        const nextZoom = Math.max(\n          Math.min(\n            currentZoom * (1 - event.deltaY * ZOOM_SENSITIVITY),\n            MAX_ZOOM\n          ),\n          MIN_ZOOM,\n          (window.innerWidth / sceneWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas\n          (window.innerHeight / sceneHeight) * ZOOM_BOUND // Ensure zoom is at least the height of the canvas\n        );\n\n        const rect = viewportRef.current?.getBoundingClientRect();\n\n        if (!rect) return;\n\n        const vpLeft = rect.left;\n        const vpTop = rect.top;\n        const viewportWidth = rect.width;\n        const viewportHeight = rect.height;\n\n        const cursorSceneX = (event.clientX - vpLeft - x.get()) / currentZoom;\n        const cursorSceneY = (event.clientY - vpTop - y.get()) / currentZoom;\n\n        let newPanX = event.clientX - vpLeft - cursorSceneX * nextZoom;\n        let newPanY = event.clientY - vpTop - cursorSceneY * nextZoom;\n\n        const minPanX = viewportWidth - sceneWidth * nextZoom;\n        const minPanY = viewportHeight - sceneHeight * nextZoom;\n        const maxPanX = 0;\n        const maxPanY = 0;\n\n        newPanX = Math.min(maxPanX, Math.max(minPanX, newPanX));\n        newPanY = Math.min(maxPanY, Math.max(minPanY, newPanY));\n\n        x.set(newPanX);\n        y.set(newPanY);\n        scale.set(nextZoom);\n      } else {\n        stopAllSceneMotion();\n\n        const scrollSpeed = 1;\n        const newPanX = x.get() - event.deltaX * scrollSpeed;\n        const newPanY = y.get() - event.deltaY * scrollSpeed;\n\n        const minPanX = windowWidth - sceneWidth * scale.get();\n        const maxPanX = 0;\n        const minPanY = windowHeight - sceneHeight * scale.get();\n        const maxPanY = 0;\n\n        const clampedPanX = Math.min(Math.max(newPanX, minPanX), maxPanX);\n        const clampedPanY = Math.min(Math.max(newPanY, minPanY), maxPanY);\n\n        x.set(clampedPanX);\n        y.set(clampedPanY);\n      }\n    },\n    [\n      scale,\n      MIN_ZOOM,\n      x,\n      y,\n      sceneWidth,\n      sceneHeight,\n      windowWidth,\n      windowHeight,\n      animationStage,\n      stopAllSceneMotion,\n    ]\n  );\n\n  // Keep the wheel handler ref pointing to the latest implementation\n  useEffect(() => {\n    wheelHandlerRef.current = handleWheelZoom;\n  }, [handleWheelZoom]);\n\n  const handlePanToOffset = useCallback(\n    (\n      offset: { x: number; y: number },\n      onComplete?: () => void,\n      zoom?: number\n    ) => {\n      panToOffset(\n        {\n          x: -offset.x,\n          y: -offset.y,\n        },\n        viewportRef,\n        onComplete,\n        zoom\n      );\n    },\n    [panToOffset, viewportRef]\n  );\n\n  return (\n    <CanvasWrapper\n      introProgress={introProgress}\n      onIntroGrowComplete={startStage2}\n      skipIntro={skipIntro}\n      introContent={introContent}\n      loadingText={loadingText}\n      introBackgroundGradient={introBackgroundGradient}\n      wrapperBackground={wrapperBackground}\n      canvasBoxGradient={canvasBoxGradient}\n      growTransition={growTransition}\n      blurTransition={blurTransition}\n    >\n      <CanvasProvider\n        x={x}\n        y={y}\n        scale={scale}\n        isResetting={isResetting}\n        maxZIndex={maxZIndex}\n        setMaxZIndex={setMaxZIndex}\n        animationStage={animationStage}\n        nextTargetSection={nextTargetSection}\n        setNextTargetSection={setNextTargetSection}\n      >\n        {animationStage >= 2 && (\n          <>\n            {!toolbarConfig?.hidden && (\n              <Toolbar\n                homeCoordinates={offsetHomeCoordinates}\n                config={toolbarConfig}\n              />\n            )}\n            {hasNavbar && navItems && !navbarConfig?.hidden && (\n              <Navbar\n                panToOffset={handlePanToOffset}\n                onReset={onResetViewAndItems}\n                items={navItems}\n                config={navbarConfig}\n              />\n            )}\n          </>\n        )}\n        <div\n          ref={setViewportRef}\n          className=\"relative h-full w-full touch-none select-none overflow-hidden\"\n          style={{\n            touchAction: \"none\",\n            pointerEvents: animationStage >= 2 ? \"auto\" : \"none\",\n            overscrollBehavior: \"contain\",\n          }}\n          onPointerDown={handlePointerDown}\n          onPointerMove={handlePointerMove}\n          onPointerUp={handlePointerUpOrCancel}\n          onPointerLeave={handlePointerUpOrCancel}\n          onPointerCancel={handlePointerUpOrCancel}\n        >\n          <motion.div\n            ref={sceneRef}\n            className=\"absolute z-20 origin-top-left\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={fadeTransition ?? FADE_TRANSITION}\n            style={{\n              width: `${sceneWidth}px`,\n              height: `${sceneHeight}px`,\n              x,\n              y,\n              scale,\n              willChange:\n                mode !== \"high\" && (animationStage < 2 || isPanning)\n                  ? \"transform\"\n                  : \"auto\",\n            }}\n          >\n            {/* Canvas Background - customizable or default */}\n            {canvasBackground !== undefined ? (\n              canvasBackground\n            ) : (\n              <>\n                {animationStage >= 1 && mode === \"high\" ? (\n                  <motion.div\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    transition={{ duration: 0.5, ease: \"easeIn\" }}\n                  >\n                    <DefaultCanvasBackground />\n                  </motion.div>\n                ) : (\n                  <DefaultCanvasBackground />\n                )}\n              </>\n            )}\n            {children}\n          </motion.div>\n        </div>\n      </CanvasProvider>\n    </CanvasWrapper>\n  );\n};\n\nexport default Canvas;\n"],"mappings":"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"}
+{"version":3,"file":"canvas.js","names":["useWindowDimensions","Toolbar"],"sources":["../../../src/components/canvas/canvas.tsx"],"sourcesContent":["import {\n  motion,\n  type MotionValue,\n  type Point,\n  useMotionValue,\n  animate,\n  useTransform,\n  type Transition,\n} from \"framer-motion\";\nimport React, {\n  useState,\n  useRef,\n  type PointerEvent,\n  type FC,\n  useEffect,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { CanvasProvider } from \"../../contexts/CanvasContext\";\nimport {\n  calcInitialBoxWidth,\n  canvasHeight,\n  canvasWidth,\n  getDistance,\n  getMidpoint,\n  getScreenSizeEnum,\n  getSectionPanCoordinates,\n  INTERACTIVE_SELECTOR,\n  MAX_ZOOM,\n  MIN_ZOOMS,\n  panToOffsetScene,\n  ZOOM_BOUND,\n} from \"../../lib/canvas\";\nimport {\n  STAGE2_TRANSITION,\n  FADE_TRANSITION,\n  MOUSE_WHEEL_ZOOM_SENSITIVITY,\n  TRACKPAD_ZOOM_SENSITIVITY,\n  DEFAULT_CANVAS_WIDTH,\n  DEFAULT_CANVAS_HEIGHT,\n  RESPONSIVE_ZOOM_MAP,\n} from \"../../lib/constants\";\nimport useWindowDimensions from \"../../hooks/useWindowDimensions\";\nimport Navbar from \"./navbar\";\nimport Toolbar from \"./toolbar\";\nimport type {\n  CanvasSection,\n  NavItem,\n  NavbarConfig,\n  SectionCoordinates,\n  ToolbarConfig,\n} from \"../../types\";\nimport { CanvasWrapper } from \"./wrapper\";\nimport { usePerformanceMode } from \"../../hooks/usePerformanceMode\";\nimport type { ReactNode } from \"react\";\nimport { DefaultCanvasBackground } from \"./backgrounds\";\n\ninterface Props {\n  homeCoordinates: SectionCoordinates;\n  children: React.ReactNode;\n\n  // Optional height and with params, if omitted sizing will be 6000x4000\n  canvasWidth?:number;\n  canvasHeight?:number;\n\n  // Navbar data (optional). If omitted, navbar is hidden.\n  /** Array of navigation items for the navbar. If omitted, navbar is hidden. */\n  navItems?: NavItem[];\n\n  // ============== Intro Animation Customization ==============\n  /** Disable intro animation entirely */\n  skipIntro?: boolean;\n  /** Custom intro content during loading */\n  introContent?: ReactNode;\n  /** Custom loading text */\n  loadingText?: string;\n  /** Background gradient for intro */\n  introBackgroundGradient?: string;\n  /** Canvas box gradient */\n  canvasBoxGradient?: string;\n  /** Custom grow transition */\n  growTransition?: Transition;\n  /** Custom blur transition */\n  blurTransition?: Transition;\n  /** Custom pan-to-home transition (stage 2) */\n  panTransition?: Transition;\n  /** Custom fade-in transition for the canvas scene */\n  fadeTransition?: Transition;\n\n  // ============== Background Customization ==============\n  /** Custom canvas background. If not provided, uses DefaultCanvasBackground. */\n  canvasBackground?: ReactNode;\n  /** Custom wrapper/intro background. If not provided, uses introBackgroundGradient. */\n  wrapperBackground?: ReactNode;\n\n  // ============== Toolbar Customization ==============\n  /** Toolbar customization options */\n  toolbarConfig?: ToolbarConfig;\n\n  // ============== Navbar Customization ==============\n  /** Navbar customization options */\n  navbarConfig?: NavbarConfig;\n}\n\nconst stopAllMotion = (\n  x: MotionValue<number>,\n  y: MotionValue<number>,\n  scale: MotionValue<number>\n) => {\n  x.stop();\n  y.stop();\n  scale.stop();\n};\n\nconst Canvas: FC<Props> = ({\n  children,\n  homeCoordinates,\n  navItems,\n  skipIntro = false,\n  introContent,\n  loadingText,\n  introBackgroundGradient,\n  canvasBoxGradient,\n  growTransition,\n  blurTransition,\n  panTransition,\n  fadeTransition,\n  canvasBackground,\n  wrapperBackground,\n  toolbarConfig,\n  navbarConfig,\n  canvasHeight,\n  canvasWidth,\n}) => {\n  const { height: windowHeight, width: windowWidth } = useWindowDimensions();\n\n  const { mode } = usePerformanceMode();\n\n  const hasNavbar = Boolean(navItems && navItems.length > 0);\n\n  const sceneWidth = canvasWidth ?? DEFAULT_CANVAS_WIDTH;\n  const sceneHeight = canvasHeight ?? DEFAULT_CANVAS_HEIGHT;\n\n  const MIN_ZOOM = MIN_ZOOMS[getScreenSizeEnum(windowWidth)];\n\n  // tracks if user is panning the screen\n  const [isPanning, setIsPanning] = useState<boolean>(false);\n  // this one is moving from scene control, not from user\n  const [isSceneMoving, setIsSceneMoving] = useState<boolean>(false);\n  const [panStartPoint, setPanStartPoint] = useState<Point>({ x: 0, y: 0 });\n  const [initialPanOffsetOnDrag, setInitialPanOffsetOnDrag] = useState<Point>({\n    x: 0,\n    y: 0,\n  });\n  const [isResetting, setIsResetting] = useState<boolean>(false);\n  const [maxZIndex, setMaxZIndex] = useState<number>(50);\n  const [animationStage, setAnimationStage] = useState<number>(\n    skipIntro ? 2 : 0\n  ); // 0: initial, 1: finish grow, 2: pan to home\n  const [nextTargetSection, setNextTargetSection] =\n    useState<CanvasSection | null>(null);\n  // Track if the intro (stage1 + stage2) is still running, to avoid accidental cancellation\n  const isIntroAnimatingRef = useRef(!skipIntro);\n\n  const initialBoxWidth = useMemo(\n    () => calcInitialBoxWidth(windowWidth, windowHeight),\n    [windowWidth, windowHeight]\n  );\n\n  const offsetHomeCoordinates = useMemo(\n    () =>\n      getSectionPanCoordinates({\n        windowDimensions: { width: windowWidth, height: windowHeight },\n        coords: homeCoordinates,\n        targetZoom: 1,\n      }),\n    [homeCoordinates, windowWidth, windowHeight]\n  );\n\n  // When skipIntro, initialize at home position; otherwise start at origin for intro animation\n  const x = useMotionValue(skipIntro ? offsetHomeCoordinates.x : 0);\n  const y = useMotionValue(skipIntro ? offsetHomeCoordinates.y : 0);\n  const scale = useMotionValue(skipIntro ? 1 : initialBoxWidth);\n\n  const onResetViewAndItems = useCallback(\n    (onComplete?: () => void): void => {\n      setIsResetting(true);\n\n      void panToOffsetScene(offsetHomeCoordinates, x, y, scale, 1).then(() => {\n        setIsResetting(false);\n        if (onComplete) onComplete();\n      });\n    },\n    [offsetHomeCoordinates, x, y, scale]\n  );\n\n  // Shared intro progress (0->1) driven by CanvasWrapper\n  const introProgress = useMotionValue(0);\n\n  // Precompute final stage1 scale and offsets (snapshot dimensions once on mount)\n  const stage1Targets = useMemo(() => {\n    const finalScale = Math.max(\n      (windowWidth || 0) / sceneWidth,\n      (windowHeight || 0) / sceneHeight\n    );\n    const endX = (windowWidth - sceneWidth * finalScale) / 2;\n    const endY = (windowHeight - sceneHeight * finalScale) / 2;\n    return { finalScale, endX, endY };\n  }, [windowWidth, windowHeight, sceneWidth, sceneHeight]);\n\n  // Replace direct motion values with derived transforms during stage1\n  const derivedScale = useTransform(\n    introProgress,\n    [0, 1],\n    [initialBoxWidth, stage1Targets.finalScale]\n  );\n  const derivedX = useTransform(introProgress, [0, 1], [0, stage1Targets.endX]);\n  const derivedY = useTransform(introProgress, [0, 1], [0, stage1Targets.endY]);\n\n  // While intro (stage1) is running, bind x/y/scale to derived versions.\n  useEffect(() => {\n    const unsubscribeScale = derivedScale.on(\"change\", (v) => {\n      if (animationStage === 0) scale.set(v);\n    });\n    const unsubscribeX = derivedX.on(\"change\", (v) => {\n      if (animationStage === 0) x.set(v);\n    });\n    const unsubscribeY = derivedY.on(\"change\", (v) => {\n      if (animationStage === 0) y.set(v);\n    });\n    return () => {\n      unsubscribeScale();\n      unsubscribeX();\n      unsubscribeY();\n    };\n  }, [derivedScale, derivedX, derivedY, animationStage, scale, x, y]);\n\n  // Merge custom panTransition with defaults\n  const effectivePanTransition: Transition = useMemo(() => {\n    if (!panTransition) return STAGE2_TRANSITION;\n    return {\n      ...STAGE2_TRANSITION,\n      ...panTransition,\n    };\n  }, [panTransition]);\n\n  // Kick off stage2 (pan to home) when grow completes (introProgress hits 1)\n  const startStage2 = useCallback(() => {\n    if (skipIntro) {\n      x.set(offsetHomeCoordinates.x);\n      y.set(offsetHomeCoordinates.y);\n      scale.set(1);\n      setAnimationStage(2);\n      isIntroAnimatingRef.current = false;\n      return;\n    }\n\n    setAnimationStage(1);\n\n    Promise.all([\n      animate(x, offsetHomeCoordinates.x, effectivePanTransition),\n      animate(y, offsetHomeCoordinates.y, effectivePanTransition),\n      animate(scale, 1, effectivePanTransition),\n    ])\n      .then(() => {\n        setAnimationStage(2);\n        isIntroAnimatingRef.current = false;\n      })\n      .catch(() => {\n        isIntroAnimatingRef.current = false;\n      });\n  }, [offsetHomeCoordinates, x, y, scale, effectivePanTransition, skipIntro]);\n\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const sceneRef = useRef<HTMLDivElement>(null);\n\n  // Stable wheel listener wrapper that always calls the latest handler via ref\n  const wheelHandlerRef = useRef<((e: WheelEvent) => void) | null>(null);\n  const wheelWrapper = useCallback((e: WheelEvent) => {\n    wheelHandlerRef.current?.(e);\n  }, []);\n\n  // Ensure wheel listener attaches when the element actually mounts (wrapper delays child mount)\n  const setViewportRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // Clean up old listener if ref changes/unmounts\n      if (viewportRef.current) {\n        viewportRef.current.removeEventListener(\"wheel\", wheelWrapper);\n      }\n      viewportRef.current = node;\n      if (node) {\n        node.addEventListener(\"wheel\", wheelWrapper, { passive: false });\n      }\n    },\n    [wheelWrapper]\n  );\n\n  const activePointersRef = useRef<Map<number, PointerEvent<HTMLDivElement>>>(\n    new Map()\n  );\n  const initialPinchStateRef = useRef<{\n    distance: number;\n    midpoint: Point;\n    zoom: number;\n    panOffset: Point;\n  } | null>(null);\n\n  const panToOffset = useCallback(\n    (\n      offset: Point,\n      viewportRef: React.RefObject<HTMLDivElement | null>,\n      onComplete?: () => void,\n      zoom?: number\n    ): void => {\n      if (!viewportRef.current) return;\n      setIsSceneMoving(true);\n\n      // Calculate bounds based on scene and viewport dimensions\n      const viewportWidth = viewportRef.current.offsetWidth;\n      const viewportHeight = viewportRef.current.offsetHeight;\n\n      const minPanX = viewportWidth - sceneWidth * (zoom ?? 1);\n      const maxPanX = 0;\n      const minPanY = viewportHeight - sceneHeight * (zoom ?? 1);\n      const maxPanY = 0;\n\n      // Clamp the offset to keep the scene within bounds, shouldn't be needed but still implemented\n      const clampedX = Math.min(Math.max(offset.x, minPanX), maxPanX);\n      const clampedY = Math.min(Math.max(offset.y, minPanY), maxPanY);\n\n      void panToOffsetScene(\n        { x: clampedX, y: clampedY },\n        x,\n        y,\n        scale,\n        zoom\n      ).then(() => {\n        setIsSceneMoving(false);\n        if (onComplete) onComplete();\n      });\n    },\n    [sceneWidth, sceneHeight, x, y, scale]\n  );\n\n  // Guarded stop that ignores attempts during intro animations\n  const stopAllSceneMotion = useCallback(() => {\n    if (isIntroAnimatingRef.current) return; // ignore stops while intro runs\n    stopAllMotion(x, y, scale);\n  }, [x, y, scale]);\n\n  const handlePointerDown = useCallback(\n    (event: PointerEvent<HTMLDivElement>): void => {\n      if (animationStage < 2) return; // ignore during intro animations\n      activePointersRef.current.set(event.pointerId, event);\n      (event.target as HTMLElement).setPointerCapture(event.pointerId);\n      if (isResetting || isSceneMoving) return;\n      stopAllSceneMotion();\n      // pan with 1 pointer, pinch with 2 pointers\n      if (activePointersRef.current.size === 1) {\n        // do not pan from interactive elements\n        const targetElement = event.target as HTMLElement;\n        if (targetElement.closest(INTERACTIVE_SELECTOR)) {\n          activePointersRef.current.delete(event.pointerId);\n          (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n          return;\n        }\n\n        setIsPanning(true);\n        setPanStartPoint({ x: event.clientX, y: event.clientY });\n        setInitialPanOffsetOnDrag({ x: x.get(), y: y.get() });\n        if (viewportRef.current) viewportRef.current.style.cursor = \"grabbing\";\n      } else if (activePointersRef.current.size === 2) {\n        setIsPanning(false);\n        const pointers = Array.from(activePointersRef.current.values());\n        initialPinchStateRef.current = {\n          distance: getDistance(pointers[0]!, pointers[1]!),\n          midpoint: getMidpoint(pointers[0]!, pointers[1]!),\n          zoom: scale.get(),\n          panOffset: { x: x.get(), y: y.get() },\n        };\n      }\n    },\n    [\n      isResetting,\n      isSceneMoving,\n      setIsPanning,\n      setPanStartPoint,\n      setInitialPanOffsetOnDrag,\n      x,\n      y,\n      scale,\n      viewportRef,\n      animationStage,\n      stopAllSceneMotion,\n    ]\n  );\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent<HTMLDivElement>): void => {\n      if (animationStage < 2) return;\n      if (isPanning || activePointersRef.current.size >= 2) {\n        stopAllSceneMotion();\n      }\n      if (!activePointersRef.current.has(event.pointerId) || isResetting)\n        return;\n      activePointersRef.current.set(event.pointerId, event);\n\n      if (isPanning && activePointersRef.current.size === 1) {\n        event.preventDefault();\n        const deltaX = event.clientX - panStartPoint.x;\n        const deltaY = event.clientY - panStartPoint.y;\n\n        // UPDATE to use motion value\n        const minPanX = windowWidth - sceneWidth * scale.get();\n        const maxPanX = 0;\n        const minPanY = windowHeight - sceneHeight * scale.get();\n        const maxPanY = 0;\n\n        const newX = Math.min(\n          Math.max(initialPanOffsetOnDrag.x + deltaX, minPanX),\n          maxPanX\n        );\n        const newY = Math.min(\n          Math.max(initialPanOffsetOnDrag.y + deltaY, minPanY),\n          maxPanY\n        );\n        x.set(newX);\n        y.set(newY);\n      } else if (\n        activePointersRef.current.size >= 2 &&\n        initialPinchStateRef.current\n      ) {\n        event.preventDefault();\n        const pointers = Array.from(activePointersRef.current.values());\n        const p1 = pointers[0]!;\n        const p2 = pointers[1]!;\n\n        const currentDistance = getDistance(p1, p2);\n        const currentMidpoint = getMidpoint(p1, p2);\n\n        const {\n          distance: initialDistance,\n          zoom: initialZoom,\n          panOffset: initialPanOffsetPinch,\n        } = initialPinchStateRef.current;\n\n        if (initialDistance === 0) return;\n\n        let newZoom = initialZoom * (currentDistance / initialDistance);\n        newZoom = Math.max(\n          (window.innerWidth / sceneWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas\n          (window.innerHeight / sceneHeight) * ZOOM_BOUND, // Ensure zoom is at least the height of the canvas\n          Math.min(newZoom, 10),\n          MIN_ZOOM // Ensure zoom is not less than MIN_ZOOM\n        );\n\n        const mx = currentMidpoint.x;\n        const my = currentMidpoint.y;\n\n        const minPanX = windowWidth - sceneWidth * newZoom;\n        const maxPanX = 0;\n        const minPanY = windowHeight - sceneHeight * newZoom;\n        const maxPanY = 0;\n\n        let newPanX =\n          mx - ((mx - initialPanOffsetPinch.x) / initialZoom) * newZoom;\n        let newPanY =\n          my - ((my - initialPanOffsetPinch.y) / initialZoom) * newZoom;\n\n        // Clamp pan to prevent leaving bounds\n        newPanX = Math.min(Math.max(newPanX, minPanX), maxPanX);\n        newPanY = Math.min(Math.max(newPanY, minPanY), maxPanY);\n\n        scale.set(newZoom);\n        x.set(newPanX);\n        y.set(newPanY);\n      }\n    },\n    [\n      isPanning,\n      isResetting,\n      x,\n      y,\n      scale,\n      panStartPoint.x,\n      panStartPoint.y,\n      windowWidth,\n      sceneWidth,\n      windowHeight,\n      sceneHeight,\n      initialPanOffsetOnDrag.x,\n      initialPanOffsetOnDrag.y,\n      MIN_ZOOM,\n      animationStage,\n      stopAllSceneMotion,\n    ]\n  );\n\n  const handlePointerUpOrCancel = useCallback(\n    (event: PointerEvent<HTMLDivElement>): void => {\n      if (animationStage < 2) {\n        event.preventDefault();\n        return; // ignore pointer up during intro\n      }\n      stopAllSceneMotion();\n      event.preventDefault();\n      if ((event.target as HTMLElement).hasPointerCapture(event.pointerId)) {\n        (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n      }\n      activePointersRef.current.delete(event.pointerId);\n\n      if (isPanning && activePointersRef.current.size < 1) {\n        setIsPanning(false);\n        if (viewportRef.current)\n          viewportRef.current.style.cursor = \"url('/customcursor.svg'), grab\";\n      }\n\n      if (initialPinchStateRef.current && activePointersRef.current.size < 2) {\n        initialPinchStateRef.current = null;\n      }\n\n      if (\n        !isPanning &&\n        activePointersRef.current.size === 1 &&\n        !initialPinchStateRef.current\n      ) {\n        const lastPointer = Array.from(activePointersRef.current.values())[0]!;\n        setIsPanning(true);\n        setPanStartPoint({ x: lastPointer.clientX, y: lastPointer.clientY });\n        setInitialPanOffsetOnDrag({ x: x.get(), y: y.get() });\n      }\n    },\n    [x, y, isPanning, animationStage, stopAllSceneMotion]\n  );\n\n  const handleWheelZoom = useCallback(\n    (event: WheelEvent) => {\n      if (animationStage < 2) {\n        event.preventDefault();\n        return; // block wheel interaction during intro animations\n      }\n      event.preventDefault();\n      // pinch gesture on track\n      const isPinch = event.ctrlKey || event.metaKey;\n      const isMouseWheelZoom =\n        event.deltaMode === WheelEvent.DOM_DELTA_LINE ||\n        Math.abs(event.deltaY) >= 100;\n\n      // mouse wheel zoom and track pad zoom have different sensitivities\n      const ZOOM_SENSITIVITY = isMouseWheelZoom\n        ? MOUSE_WHEEL_ZOOM_SENSITIVITY\n        : TRACKPAD_ZOOM_SENSITIVITY;\n\n      if (isPinch) {\n        const currentZoom = scale.get();\n        const nextZoom = Math.max(\n          Math.min(\n            currentZoom * (1 - event.deltaY * ZOOM_SENSITIVITY),\n            MAX_ZOOM\n          ),\n          MIN_ZOOM,\n          (window.innerWidth / sceneWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas\n          (window.innerHeight / sceneHeight) * ZOOM_BOUND // Ensure zoom is at least the height of the canvas\n        );\n\n        const rect = viewportRef.current?.getBoundingClientRect();\n\n        if (!rect) return;\n\n        const vpLeft = rect.left;\n        const vpTop = rect.top;\n        const viewportWidth = rect.width;\n        const viewportHeight = rect.height;\n\n        const cursorSceneX = (event.clientX - vpLeft - x.get()) / currentZoom;\n        const cursorSceneY = (event.clientY - vpTop - y.get()) / currentZoom;\n\n        let newPanX = event.clientX - vpLeft - cursorSceneX * nextZoom;\n        let newPanY = event.clientY - vpTop - cursorSceneY * nextZoom;\n\n        const minPanX = viewportWidth - sceneWidth * nextZoom;\n        const minPanY = viewportHeight - sceneHeight * nextZoom;\n        const maxPanX = 0;\n        const maxPanY = 0;\n\n        newPanX = Math.min(maxPanX, Math.max(minPanX, newPanX));\n        newPanY = Math.min(maxPanY, Math.max(minPanY, newPanY));\n\n        x.set(newPanX);\n        y.set(newPanY);\n        scale.set(nextZoom);\n      } else {\n        stopAllSceneMotion();\n\n        const scrollSpeed = 1;\n        const newPanX = x.get() - event.deltaX * scrollSpeed;\n        const newPanY = y.get() - event.deltaY * scrollSpeed;\n\n        const minPanX = windowWidth - sceneWidth * scale.get();\n        const maxPanX = 0;\n        const minPanY = windowHeight - sceneHeight * scale.get();\n        const maxPanY = 0;\n\n        const clampedPanX = Math.min(Math.max(newPanX, minPanX), maxPanX);\n        const clampedPanY = Math.min(Math.max(newPanY, minPanY), maxPanY);\n\n        x.set(clampedPanX);\n        y.set(clampedPanY);\n      }\n    },\n    [\n      scale,\n      MIN_ZOOM,\n      x,\n      y,\n      sceneWidth,\n      sceneHeight,\n      windowWidth,\n      windowHeight,\n      animationStage,\n      stopAllSceneMotion,\n    ]\n  );\n\n  // Keep the wheel handler ref pointing to the latest implementation\n  useEffect(() => {\n    wheelHandlerRef.current = handleWheelZoom;\n  }, [handleWheelZoom]);\n\n  const handlePanToOffset = useCallback(\n    (\n      offset: { x: number; y: number },\n      onComplete?: () => void,\n      zoom?: number\n    ) => {\n      panToOffset(\n        {\n          x: -offset.x,\n          y: -offset.y,\n        },\n        viewportRef,\n        onComplete,\n        zoom\n      );\n    },\n    [panToOffset, viewportRef]\n  );\n\n  // --- navigateToSection: delegates to Navbar when mounted, falls back to basic pan ---\n  const navbarNavigateRef = useRef<((sectionId: string) => void) | null>(null);\n\n  const registerNavbarNavigate = useCallback(\n    (handler: ((sectionId: string) => void) | null) => {\n      navbarNavigateRef.current = handler;\n    },\n    []\n  );\n\n  const navigateToSection = useCallback(\n    (sectionId: string) => {\n      if (navbarNavigateRef.current) {\n        // Navbar is mounted — delegate for full behavior (highlight, pre-render, etc.)\n        navbarNavigateRef.current(sectionId);\n      } else if (navItems) {\n        // Fallback: no navbar, do basic pan\n        const item = navItems.find((i) => i.id === sectionId);\n        if (!item) return;\n\n        setNextTargetSection(sectionId);\n\n        if (item.isHome) {\n          onResetViewAndItems();\n        } else {\n          const zoom = RESPONSIVE_ZOOM_MAP[getScreenSizeEnum(windowWidth)];\n          const panCoords = getSectionPanCoordinates({\n            windowDimensions: { width: windowWidth, height: windowHeight },\n            coords: {\n              x: item.x,\n              y: item.y,\n              width: item.width,\n              height: item.height,\n            },\n            targetZoom: zoom,\n            negative: true,\n          });\n          handlePanToOffset(panCoords, undefined, zoom);\n        }\n      }\n    },\n    [\n      navItems,\n      windowWidth,\n      windowHeight,\n      onResetViewAndItems,\n      handlePanToOffset,\n      setNextTargetSection,\n    ]\n  );\n\n  return (\n    <CanvasWrapper\n      introProgress={introProgress}\n      onIntroGrowComplete={startStage2}\n      skipIntro={skipIntro}\n      introContent={introContent}\n      loadingText={loadingText}\n      introBackgroundGradient={introBackgroundGradient}\n      wrapperBackground={wrapperBackground}\n      canvasBoxGradient={canvasBoxGradient}\n      growTransition={growTransition}\n      blurTransition={blurTransition}\n    >\n      <CanvasProvider\n        x={x}\n        y={y}\n        scale={scale}\n        isResetting={isResetting}\n        maxZIndex={maxZIndex}\n        setMaxZIndex={setMaxZIndex}\n        animationStage={animationStage}\n        nextTargetSection={nextTargetSection}\n        setNextTargetSection={setNextTargetSection}\n        navigateToSection={navigateToSection}\n      >\n        {animationStage >= 2 && (\n          <>\n            {!toolbarConfig?.hidden && (\n              <Toolbar\n                homeCoordinates={offsetHomeCoordinates}\n                config={toolbarConfig}\n              />\n            )}\n            {hasNavbar && navItems && !navbarConfig?.hidden && (\n              <Navbar\n                panToOffset={handlePanToOffset}\n                onReset={onResetViewAndItems}\n                items={navItems}\n                config={navbarConfig}\n                onRegisterNavigate={registerNavbarNavigate}\n              />\n            )}\n          </>\n        )}\n        <div\n          ref={setViewportRef}\n          className=\"relative h-full w-full touch-none select-none overflow-hidden\"\n          style={{\n            touchAction: \"none\",\n            pointerEvents: animationStage >= 2 ? \"auto\" : \"none\",\n            overscrollBehavior: \"contain\",\n          }}\n          onPointerDown={handlePointerDown}\n          onPointerMove={handlePointerMove}\n          onPointerUp={handlePointerUpOrCancel}\n          onPointerLeave={handlePointerUpOrCancel}\n          onPointerCancel={handlePointerUpOrCancel}\n        >\n          <motion.div\n            ref={sceneRef}\n            className=\"absolute z-20 origin-top-left\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={fadeTransition ?? FADE_TRANSITION}\n            style={{\n              width: `${sceneWidth}px`,\n              height: `${sceneHeight}px`,\n              x,\n              y,\n              scale,\n              willChange:\n                mode !== \"high\" && (animationStage < 2 || isPanning)\n                  ? \"transform\"\n                  : \"auto\",\n            }}\n          >\n            {/* Canvas Background - customizable or default */}\n            {canvasBackground !== undefined ? (\n              canvasBackground\n            ) : (\n              <>\n                {animationStage >= 1 && mode === \"high\" ? (\n                  <motion.div\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    transition={{ duration: 0.5, ease: \"easeIn\" }}\n                  >\n                    <DefaultCanvasBackground />\n                  </motion.div>\n                ) : (\n                  <DefaultCanvasBackground />\n                )}\n              </>\n            )}\n            {children}\n          </motion.div>\n        </div>\n      </CanvasProvider>\n    </CanvasWrapper>\n  );\n};\n\nexport default Canvas;\n"],"mappings":"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"}

package/dist/components/canvas/draggable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,eAAe,CAAC;AAGvB,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC5D,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO,CAAC;CAC5D;AAID,eAAO,MAAM,SAAS,oGAoGrB,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAuDD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAwGxD"}
+{"version":3,"file":"draggable.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,eAAe,CAAC;AAGvB,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe,CAAC,KAAK,CAAC;IAC5D,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO,CAAC;CAC5D;AAID,eAAO,MAAM,SAAS,oGAoGrB,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAyDD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAwGxD"}

package/dist/components/canvas/draggable.js

@@ -85,6 +85,8 @@ const Draggable = forwardRef((props, ref) => {
 });
 Draggable.displayName = "Draggable";
 function drawImageToCanvas(img, canvas) {
+	canvas.width = img.naturalWidth;
+	canvas.height = img.naturalHeight;
 	const ctx = canvas.getContext("2d", { willReadFrequently: true });
 	if (!ctx) return;
 	ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -95,8 +97,8 @@ function getAlphaAtCoords(clientX, clientY, canvas, img) {
 	const ctx = canvas.getContext("2d");
 	if (!ctx) return 0;
 	const rect = img.getBoundingClientRect();
-	const x = (clientX - rect.left) / rect.width * img.naturalWidth;
-	const y = (clientY - rect.top) / rect.height * img.naturalHeight;
+	const x = (clientX - rect.left) / rect.width * canvas.width;
+	const y = (clientY - rect.top) / rect.height * canvas.height;
 	return ctx.getImageData(x, y, 1, 1).data[3] ?? 0;
 }
 function isMouseOverImage(clientX, clientY, img) {

package/dist/components/canvas/draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.js","names":[],"sources":["../../../src/components/canvas/draggable.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useEffect,\n  forwardRef,\n  useState,\n  useCallback,\n} from \"react\";\nimport {\n  animate,\n  motion,\n  useAnimationControls,\n  useMotionValue,\n  type HTMLMotionProps,\n  type PanInfo,\n} from \"framer-motion\";\nimport { useCanvasContext } from \"../../contexts/CanvasContext\";\n\ninterface Point {\n  x: number;\n  y: number;\n}\n\nexport interface DraggableProps extends HTMLMotionProps<\"div\"> {\n  initialPos?: Point;\n  shouldStopPropagation?: (e: React.PointerEvent) => boolean;\n}\n\nconst defaultPos = { x: 0, y: 0 };\n\nexport const Draggable = forwardRef<HTMLDivElement, DraggableProps>(\n  (props, ref) => {\n    const {\n      initialPos: passedPos,\n      children,\n      style,\n      shouldStopPropagation = () => true,\n      ...restProps\n    } = props;\n\n    const {\n      scale: parentZoom,\n      isResetting,\n      maxZIndex,\n      setMaxZIndex,\n    } = useCanvasContext();\n\n    const initialPos = passedPos ?? defaultPos;\n\n    const x = useMotionValue(initialPos.x);\n    const y = useMotionValue(initialPos.y);\n\n    const logicalPositionRef = useRef<Point>({ ...initialPos });\n    const controls = useAnimationControls();\n\n    const [zIndex, setZIndex] = useState(1);\n\n    useEffect(() => {\n      if (isResetting) {\n        logicalPositionRef.current = { ...initialPos };\n        void animate(x, initialPos.x, {\n          duration: 0.3,\n          type: \"spring\",\n          damping: 14,\n          stiffness: 120,\n          mass: 1,\n        });\n        void animate(y, initialPos.y, {\n          duration: 0.3,\n          type: \"spring\",\n          damping: 14,\n          stiffness: 120,\n          mass: 1,\n        });\n      }\n    }, [initialPos, controls, isResetting, x, y]);\n\n    const handleDrag = (\n      _event: MouseEvent | TouchEvent | PointerEvent,\n      info: PanInfo,\n    ) => {\n      controls.stop();\n      const deltaParentX = info.delta.x / parentZoom.get();\n      const deltaParentY = info.delta.y / parentZoom.get();\n\n      logicalPositionRef.current.x += deltaParentX;\n      logicalPositionRef.current.y += deltaParentY;\n\n      x.set(logicalPositionRef.current.x);\n      y.set(logicalPositionRef.current.y);\n\n      if (zIndex < maxZIndex) {\n        setZIndex(maxZIndex + 1);\n        setMaxZIndex(maxZIndex + 1);\n      }\n    };\n\n    return (\n      <motion.div\n        ref={ref}\n        dragMomentum={false}\n        drag\n        animate={controls}\n        onDrag={handleDrag}\n        style={{\n          ...style,\n          x,\n          y,\n          zIndex,\n        }}\n        initial={{\n          scale: 1,\n          filter: \"drop-shadow(0 0px 0px rgba(0, 0, 0, 0)) brightness(1)\",\n          position: \"relative\",\n        }}\n        onPointerDown={(e: React.PointerEvent) => {\n          if (shouldStopPropagation?.(e)) {\n            e.stopPropagation();\n          }\n        }}\n        transition={{\n          duration: 0.1,\n          ease: \"easeOut\",\n        }}\n        {...restProps}\n      >\n        {children}\n      </motion.div>\n    );\n  },\n);\n\nDraggable.displayName = \"Draggable\";\n\nexport interface DraggableImageProps extends DraggableProps {\n  src: string;\n  alt?: string;\n  width?: string | number;\n  height?: string | number;\n  scale?: number;\n  hoverScale?: number;\n}\n\nfunction drawImageToCanvas(img: HTMLImageElement, canvas: HTMLCanvasElement) {\n  const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n  if (!ctx) return;\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  ctx.drawImage(img, 0, 0);\n}\n\nfunction getAlphaAtCoords(\n  clientX: number,\n  clientY: number,\n  canvas: HTMLCanvasElement | null,\n  img: HTMLImageElement | null,\n): number {\n  if (!canvas || !img) return 0;\n\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) return 0;\n\n  const rect = img.getBoundingClientRect();\n\n  const x = ((clientX - rect.left) / rect.width) * img.naturalWidth;\n  const y = ((clientY - rect.top) / rect.height) * img.naturalHeight;\n\n  const alpha = ctx.getImageData(x, y, 1, 1).data[3] ?? 0;\n  return alpha;\n}\n\nfunction isMouseOverImage(\n  clientX: number,\n  clientY: number,\n  img: HTMLImageElement | null,\n) {\n  if (!img) return false;\n  const rect = img.getBoundingClientRect();\n  return (\n    clientX >= rect.left &&\n    clientX <= rect.right &&\n    clientY >= rect.top &&\n    clientY <= rect.bottom\n  );\n}\n\nfunction updateCursor(\n  opaque: boolean,\n  isMouseDown: boolean,\n  img: HTMLImageElement | null,\n) {\n  let cursor = \"url('customcursor.svg'), auto\"; // default\n  if (opaque) cursor = \"grab\";\n  if (isMouseDown) cursor = \"grabbing\";\n  if (img) img.style.cursor = cursor;\n}\n\nexport function DraggableImage(props: DraggableImageProps) {\n  const {\n    src,\n    alt,\n    width,\n    height,\n    initialPos,\n    animate,\n    className,\n    scale,\n    hoverScale,\n    ...restProps\n  } = props;\n  const imgRef = useRef<HTMLImageElement>(null);\n  const [isOpaque, setIsOpaque] = useState(true); // default to true for better UX\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const isMouseDown = useRef(false);\n\n  // create a invisible canvas element to check the alpha value of the image\n  useEffect(() => {\n    if (typeof window !== \"undefined\" && !canvasRef.current) {\n      canvasRef.current = document.createElement(\"canvas\");\n    }\n    const img = imgRef.current;\n    const canvas = canvasRef.current;\n    if (!img || !canvas) return;\n    if (!img.complete) {\n      img.onload = () => drawImageToCanvas(img, canvas);\n    } else {\n      drawImageToCanvas(img, canvas);\n    }\n    return () => {\n      if (img) img.onload = null;\n    };\n  }, []);\n\n  // handle global mouse move to update cursor and opacity\n  useEffect(() => {\n    const handleGlobalMouseMove = (e: MouseEvent) => {\n      if (\n        !isMouseDown.current &&\n        isMouseOverImage(e.clientX, e.clientY, imgRef.current)\n      ) {\n        const alpha = getAlphaAtCoords(\n          e.clientX,\n          e.clientY,\n          canvasRef.current,\n          imgRef.current,\n        );\n\n        // checking alpha > n rather than 0 to not trigger on shadows and such\n        const opaque = alpha > 128;\n\n        setIsOpaque(opaque);\n        updateCursor(opaque, false, imgRef.current);\n      }\n    };\n    window.addEventListener(\"mousemove\", handleGlobalMouseMove);\n    return () => {\n      window.removeEventListener(\"mousemove\", handleGlobalMouseMove);\n    };\n  }, []);\n\n  const handlePointerDown = useCallback((e: React.PointerEvent) => {\n    isMouseDown.current = true;\n    e.stopPropagation(); // Prevents the event from bubbling up\n    updateCursor(true, true, imgRef.current);\n  }, []);\n\n  const handlePointerUp = () => {\n    isMouseDown.current = false;\n    updateCursor(isOpaque, false, imgRef.current);\n  };\n\n  const hoverScaleValue = isOpaque ? (hoverScale ?? (scale ?? 1)) : (scale ?? 1);\n\n  return (\n    <Draggable\n      initialPos={initialPos}\n      className={className}\n      drag={isOpaque}\n      style={{\n        height: 0,\n      }}\n      {...restProps}\n    >\n      <motion.img\n        ref={imgRef}\n        src={src}\n        alt={alt}\n        width={width}\n        height={height}\n        animate={animate}\n        draggable=\"false\"\n        whileHover={{ scale: hoverScaleValue }}\n        style={{\n          scale: scale ?? 1,\n          pointerEvents: isOpaque ? \"auto\" : \"none\",\n        }}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n      />\n    </Draggable>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"draggable.js","names":[],"sources":["../../../src/components/canvas/draggable.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useEffect,\n  forwardRef,\n  useState,\n  useCallback,\n} from \"react\";\nimport {\n  animate,\n  motion,\n  useAnimationControls,\n  useMotionValue,\n  type HTMLMotionProps,\n  type PanInfo,\n} from \"framer-motion\";\nimport { useCanvasContext } from \"../../contexts/CanvasContext\";\n\ninterface Point {\n  x: number;\n  y: number;\n}\n\nexport interface DraggableProps extends HTMLMotionProps<\"div\"> {\n  initialPos?: Point;\n  shouldStopPropagation?: (e: React.PointerEvent) => boolean;\n}\n\nconst defaultPos = { x: 0, y: 0 };\n\nexport const Draggable = forwardRef<HTMLDivElement, DraggableProps>(\n  (props, ref) => {\n    const {\n      initialPos: passedPos,\n      children,\n      style,\n      shouldStopPropagation = () => true,\n      ...restProps\n    } = props;\n\n    const {\n      scale: parentZoom,\n      isResetting,\n      maxZIndex,\n      setMaxZIndex,\n    } = useCanvasContext();\n\n    const initialPos = passedPos ?? defaultPos;\n\n    const x = useMotionValue(initialPos.x);\n    const y = useMotionValue(initialPos.y);\n\n    const logicalPositionRef = useRef<Point>({ ...initialPos });\n    const controls = useAnimationControls();\n\n    const [zIndex, setZIndex] = useState(1);\n\n    useEffect(() => {\n      if (isResetting) {\n        logicalPositionRef.current = { ...initialPos };\n        void animate(x, initialPos.x, {\n          duration: 0.3,\n          type: \"spring\",\n          damping: 14,\n          stiffness: 120,\n          mass: 1,\n        });\n        void animate(y, initialPos.y, {\n          duration: 0.3,\n          type: \"spring\",\n          damping: 14,\n          stiffness: 120,\n          mass: 1,\n        });\n      }\n    }, [initialPos, controls, isResetting, x, y]);\n\n    const handleDrag = (\n      _event: MouseEvent | TouchEvent | PointerEvent,\n      info: PanInfo,\n    ) => {\n      controls.stop();\n      const deltaParentX = info.delta.x / parentZoom.get();\n      const deltaParentY = info.delta.y / parentZoom.get();\n\n      logicalPositionRef.current.x += deltaParentX;\n      logicalPositionRef.current.y += deltaParentY;\n\n      x.set(logicalPositionRef.current.x);\n      y.set(logicalPositionRef.current.y);\n\n      if (zIndex < maxZIndex) {\n        setZIndex(maxZIndex + 1);\n        setMaxZIndex(maxZIndex + 1);\n      }\n    };\n\n    return (\n      <motion.div\n        ref={ref}\n        dragMomentum={false}\n        drag\n        animate={controls}\n        onDrag={handleDrag}\n        style={{\n          ...style,\n          x,\n          y,\n          zIndex,\n        }}\n        initial={{\n          scale: 1,\n          filter: \"drop-shadow(0 0px 0px rgba(0, 0, 0, 0)) brightness(1)\",\n          position: \"relative\",\n        }}\n        onPointerDown={(e: React.PointerEvent) => {\n          if (shouldStopPropagation?.(e)) {\n            e.stopPropagation();\n          }\n        }}\n        transition={{\n          duration: 0.1,\n          ease: \"easeOut\",\n        }}\n        {...restProps}\n      >\n        {children}\n      </motion.div>\n    );\n  },\n);\n\nDraggable.displayName = \"Draggable\";\n\nexport interface DraggableImageProps extends DraggableProps {\n  src: string;\n  alt?: string;\n  width?: string | number;\n  height?: string | number;\n  scale?: number;\n  hoverScale?: number;\n}\n\nfunction drawImageToCanvas(img: HTMLImageElement, canvas: HTMLCanvasElement) {\n  canvas.width = img.naturalWidth;\n  canvas.height = img.naturalHeight;\n  const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n  if (!ctx) return;\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  ctx.drawImage(img, 0, 0);\n}\n\nfunction getAlphaAtCoords(\n  clientX: number,\n  clientY: number,\n  canvas: HTMLCanvasElement | null,\n  img: HTMLImageElement | null,\n): number {\n  if (!canvas || !img) return 0;\n\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) return 0;\n\n  const rect = img.getBoundingClientRect();\n\n  const x = ((clientX - rect.left) / rect.width) * canvas.width;\n  const y = ((clientY - rect.top) / rect.height) * canvas.height;\n\n  const alpha = ctx.getImageData(x, y, 1, 1).data[3] ?? 0;\n  return alpha;\n}\n\nfunction isMouseOverImage(\n  clientX: number,\n  clientY: number,\n  img: HTMLImageElement | null,\n) {\n  if (!img) return false;\n  const rect = img.getBoundingClientRect();\n  return (\n    clientX >= rect.left &&\n    clientX <= rect.right &&\n    clientY >= rect.top &&\n    clientY <= rect.bottom\n  );\n}\n\nfunction updateCursor(\n  opaque: boolean,\n  isMouseDown: boolean,\n  img: HTMLImageElement | null,\n) {\n  let cursor = \"url('customcursor.svg'), auto\"; // default\n  if (opaque) cursor = \"grab\";\n  if (isMouseDown) cursor = \"grabbing\";\n  if (img) img.style.cursor = cursor;\n}\n\nexport function DraggableImage(props: DraggableImageProps) {\n  const {\n    src,\n    alt,\n    width,\n    height,\n    initialPos,\n    animate,\n    className,\n    scale,\n    hoverScale,\n    ...restProps\n  } = props;\n  const imgRef = useRef<HTMLImageElement>(null);\n  const [isOpaque, setIsOpaque] = useState(true); // default to true for better UX\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const isMouseDown = useRef(false);\n\n  // create a invisible canvas element to check the alpha value of the image\n  useEffect(() => {\n    if (typeof window !== \"undefined\" && !canvasRef.current) {\n      canvasRef.current = document.createElement(\"canvas\");\n    }\n    const img = imgRef.current;\n    const canvas = canvasRef.current;\n    if (!img || !canvas) return;\n    if (!img.complete) {\n      img.onload = () => drawImageToCanvas(img, canvas);\n    } else {\n      drawImageToCanvas(img, canvas);\n    }\n    return () => {\n      if (img) img.onload = null;\n    };\n  }, []);\n\n  // handle global mouse move to update cursor and opacity\n  useEffect(() => {\n    const handleGlobalMouseMove = (e: MouseEvent) => {\n      if (\n        !isMouseDown.current &&\n        isMouseOverImage(e.clientX, e.clientY, imgRef.current)\n      ) {\n        const alpha = getAlphaAtCoords(\n          e.clientX,\n          e.clientY,\n          canvasRef.current,\n          imgRef.current,\n        );\n\n        // checking alpha > n rather than 0 to not trigger on shadows and such\n        const opaque = alpha > 128;\n\n        setIsOpaque(opaque);\n        updateCursor(opaque, false, imgRef.current);\n      }\n    };\n    window.addEventListener(\"mousemove\", handleGlobalMouseMove);\n    return () => {\n      window.removeEventListener(\"mousemove\", handleGlobalMouseMove);\n    };\n  }, []);\n\n  const handlePointerDown = useCallback((e: React.PointerEvent) => {\n    isMouseDown.current = true;\n    e.stopPropagation(); // Prevents the event from bubbling up\n    updateCursor(true, true, imgRef.current);\n  }, []);\n\n  const handlePointerUp = () => {\n    isMouseDown.current = false;\n    updateCursor(isOpaque, false, imgRef.current);\n  };\n\n  const hoverScaleValue = isOpaque ? (hoverScale ?? (scale ?? 1)) : (scale ?? 1);\n\n  return (\n    <Draggable\n      initialPos={initialPos}\n      className={className}\n      drag={isOpaque}\n      style={{\n        height: 0,\n      }}\n      {...restProps}\n    >\n      <motion.img\n        ref={imgRef}\n        src={src}\n        alt={alt}\n        width={width}\n        height={height}\n        animate={animate}\n        draggable=\"false\"\n        whileHover={{ scale: hoverScaleValue }}\n        style={{\n          scale: scale ?? 1,\n          pointerEvents: isOpaque ? \"auto\" : \"none\",\n        }}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n      />\n    </Draggable>\n  );\n}\n"],"mappings":"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"}

package/dist/components/canvas/navbar/index.d.ts

@@ -9,7 +9,9 @@ interface NavbarProps {
     items: NavItem[];
     /** Navbar configuration options */
     config?: NavbarConfig;
+    /** Register a handler so external code can trigger navigation via navigateToSection */
+    onRegisterNavigate?: (handler: ((sectionId: string) => void) | null) => void;
 }
-export default function Navbar({ panToOffset, onReset, items, config, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export default function Navbar({ panToOffset, onReset, items, config, onRegisterNavigate, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/canvas/navbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/canvas/navbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAkB,MAAM,gBAAgB,CAAC;AAc5E,UAAU,WAAW;IACnB,WAAW,EAAE,CACX,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAChC,UAAU,CAAC,EAAE,MAAM,IAAI,EACvB,IAAI,CAAC,EAAE,MAAM,KACV,IAAI,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gFAAgF;IAChF,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,mCAAmC;IACnC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAqCD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,WAAW,EACX,OAAO,EACP,KAAK,EACL,MAAW,GACZ,EAAE,WAAW,2CAsLb"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/canvas/navbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAkB,MAAM,gBAAgB,CAAC;AAc5E,UAAU,WAAW;IACnB,WAAW,EAAE,CACX,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAChC,UAAU,CAAC,EAAE,MAAM,IAAI,EACvB,IAAI,CAAC,EAAE,MAAM,KACV,IAAI,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gFAAgF;IAChF,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,mCAAmC;IACnC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,uFAAuF;IACvF,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9E;AAqCD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,WAAW,EACX,OAAO,EACP,KAAK,EACL,MAAW,EACX,kBAAkB,GACnB,EAAE,WAAW,2CA2Mb"}

package/dist/components/canvas/navbar/index.js

@@ -42,7 +42,7 @@ const responsivePositionClasses = {
 	left: "left-4",
 	right: "right-4"
 };
-function Navbar({ panToOffset, onReset, items, config = {} }) {
+function Navbar({ panToOffset, onReset, items, config = {}, onRegisterNavigate }) {
 	const { x, y, scale, animationStage, setNextTargetSection } = useCanvasContext();
 	const [expandedButton, setExpandedButton] = useState(null);
 	const activePans = useRef(0);
@@ -112,6 +112,23 @@ function Navbar({ panToOffset, onReset, items, config = {} }) {
 		defaultZoom,
 		setNextTargetSection
 	]);
+	const handlePanRef = useRef(handlePan);
+	useEffect(() => {
+		handlePanRef.current = handlePan;
+	}, [handlePan]);
+	const itemsRef = useRef(items);
+	useEffect(() => {
+		itemsRef.current = items;
+	}, [items]);
+	useEffect(() => {
+		if (!onRegisterNavigate) return;
+		const handler = (sectionId) => {
+			const item = itemsRef.current.find((i) => i.id === sectionId);
+			if (item) handlePanRef.current(item);
+		};
+		onRegisterNavigate(handler);
+		return () => onRegisterNavigate(null);
+	}, [onRegisterNavigate]);
 	useEffect(() => {
 		if (animationStage < 2) return;
 		if (homeItem) handlePan(homeItem);

package/dist/components/canvas/navbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useWindowDimensions"],"sources":["../../../../src/components/canvas/navbar/index.tsx"],"sourcesContent":["import { motion, useMotionValueEvent } from \"framer-motion\";\nimport { useState, useRef, useEffect, useCallback, useMemo } from \"react\";\nimport SingleButton from \"./single-button\";\nimport type { NavItem, NavbarConfig, NavbarPosition } from \"../../../types\";\nimport { useCanvasContext } from \"../../../contexts/CanvasContext\";\nimport useWindowDimensions from \"../../../hooks/useWindowDimensions\";\nimport { usePerformanceMode } from \"../../../hooks/usePerformanceMode\";\nimport {\n  getScreenSizeEnum,\n  getSectionPanCoordinates,\n} from \"../../../lib/canvas\";\nimport {\n  RESPONSIVE_ZOOM_MAP,\n  NAVBAR_DEBOUNCE_MS,\n} from \"../../../lib/constants\";\nimport { cn } from \"../../../lib/utils\";\n\ninterface NavbarProps {\n  panToOffset: (\n    offset: { x: number; y: number },\n    onComplete?: () => void,\n    zoom?: number,\n  ) => void;\n  onReset: () => void;\n  /** Array of navigation items defining sections, their icons, and coordinates */\n  items: NavItem[];\n  /** Navbar configuration options */\n  config?: NavbarConfig;\n}\n\nconst positionStyles: Record<NavbarPosition, React.CSSProperties> = {\n  top: {\n    top: \"1rem\",\n    bottom: \"auto\",\n    left: \"50%\",\n    transform: \"translateX(-50%)\",\n  },\n  bottom: {\n    bottom: \"1rem\",\n    top: \"auto\",\n    left: \"50%\",\n    transform: \"translateX(-50%)\",\n  },\n  left: {\n    left: \"1rem\",\n    right: \"auto\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n  },\n  right: {\n    right: \"1rem\",\n    left: \"auto\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n  },\n};\n\n// Responsive position adjustments (mobile vs desktop)\nconst responsivePositionClasses: Record<NavbarPosition, string> = {\n  top: \"top-12 md:top-4\",\n  bottom: \"bottom-12 md:bottom-4\",\n  left: \"left-4\",\n  right: \"right-4\",\n};\n\nexport default function Navbar({\n  panToOffset,\n  onReset,\n  items,\n  config = {},\n}: NavbarProps) {\n  const { x, y, scale, animationStage, setNextTargetSection } =\n    useCanvasContext();\n  const [expandedButton, setExpandedButton] = useState<string | null>(null);\n  const activePans = useRef(0);\n  const panTimeout = useRef<NodeJS.Timeout | null>(null);\n\n  // Debounce state\n  const debounceBlocked = useRef(false);\n  const debounceCooldownTimeout = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n\n  const { height, width } = useWindowDimensions();\n  const { mode } = usePerformanceMode();\n\n  const defaultZoom = RESPONSIVE_ZOOM_MAP[getScreenSizeEnum(width)];\n\n  // Derive debounce duration from performance mode\n  const debounceMs = NAVBAR_DEBOUNCE_MS[mode] ?? 0;\n\n  // Extract config values\n  const {\n    display = \"icons\",\n    position = \"bottom\",\n    className,\n    style,\n    buttonConfig,\n    tooltipConfig,\n    gap,\n    padding,\n  } = config;\n\n  const isVertical = position === \"left\" || position === \"right\";\n\n  // Find the home section from items\n  const homeItem = useMemo(() => items.find((item) => item.isHome), [items]);\n\n  // Leading-edge debounce handler\n  const handleDebouncedClick = useCallback(\n    (callback: () => void) => {\n      if (debounceMs === 0) {\n        callback();\n        return;\n      }\n\n      if (debounceBlocked.current) {\n        // We're in the cooldown window; ignore this click\n        return;\n      }\n\n      // Enter cooldown and perform the click immediately\n      debounceBlocked.current = true;\n      callback();\n\n      if (debounceCooldownTimeout.current) {\n        clearTimeout(debounceCooldownTimeout.current);\n      }\n\n      debounceCooldownTimeout.current = setTimeout(() => {\n        debounceBlocked.current = false;\n        debounceCooldownTimeout.current = null;\n      }, debounceMs);\n    },\n    [debounceMs],\n  );\n\n  const updateExpandedButton = () => {\n    // reset activePans if no movement has occurred recently\n    if (panTimeout.current) clearTimeout(panTimeout.current);\n    panTimeout.current = setTimeout(() => {\n      activePans.current = 0;\n    }, 500);\n\n    if (activePans.current == 0) setExpandedButton(null);\n  };\n\n  useMotionValueEvent(x, \"change\", updateExpandedButton);\n  useMotionValueEvent(y, \"change\", updateExpandedButton);\n  useMotionValueEvent(scale, \"change\", updateExpandedButton);\n\n  const handlePan = useCallback(\n    function handlePan(item: NavItem) {\n      setExpandedButton(item.id);\n      activePans.current++;\n\n      // Predictive pre-render hint: mark the target section so its CanvasComponent can\n      // render even before it comes fully into view.\n      setNextTargetSection(item.id);\n\n      if (item.isHome) {\n        onReset();\n        return;\n      }\n\n      const panCoords = getSectionPanCoordinates({\n        windowDimensions: { width, height },\n        coords: { x: item.x, y: item.y, width: item.width, height: item.height },\n        targetZoom: defaultZoom,\n        negative: true,\n      });\n\n      panToOffset(\n        panCoords,\n        () => {\n          activePans.current--;\n        },\n        defaultZoom,\n      );\n    },\n    [panToOffset, onReset, width, height, defaultZoom, setNextTargetSection],\n  );\n\n  // Clean up timers on unmount and pan to home on animation complete\n  useEffect(() => {\n    if (animationStage < 2) return;\n    if (homeItem) {\n      handlePan(homeItem);\n    }\n    return () => {\n      if (panTimeout.current) clearTimeout(panTimeout.current);\n      if (debounceCooldownTimeout.current)\n        clearTimeout(debounceCooldownTimeout.current);\n    };\n  }, [handlePan, animationStage, homeItem]);\n\n  // Compute container styles (positioning only)\n  const containerStyle: React.CSSProperties = {\n    position: \"fixed\",\n    zIndex: 1000,\n    pointerEvents: \"auto\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    ...positionStyles[position],\n  };\n\n  // Compute inner container styles (visual styling)\n  const innerStyle: React.CSSProperties = {\n    ...(gap !== undefined && { gap: `${gap}px` }),\n    ...(padding !== undefined && { padding: `${padding}px` }),\n    ...(isVertical && { flexDirection: \"column\" }),\n    ...style,\n  };\n\n  return (\n    <div\n      className={responsivePositionClasses[position]}\n      style={containerStyle}\n    >\n      {/* padding to prevent edge bug */}\n      <div className={isVertical ? \"py-4 md:py-8\" : \"px-4 md:px-8\"}>\n        <motion.div\n          className={cn(\n            \"flex select-none items-center justify-center gap-1 rounded-[10px] border p-1 shadow-[0_6px_12px_rgba(0,0,0,0.08)]\",\n            !style?.backgroundColor && \"bg-white\",\n            !style?.borderColor && \"border-neutral-200\",\n            isVertical && \"flex-col\",\n            className,\n          )}\n          style={innerStyle}\n        >\n          <div className={cn(\"flex items-center gap-1\", isVertical && \"flex-col\")}>\n            {items.map((item) => (\n              <SingleButton\n                key={item.id}\n                label={item.label}\n                icon={item.icon}\n                onClick={() => handlePan(item)}\n                isPushed={expandedButton === item.id}\n                onDebouncedClick={handleDebouncedClick}\n                displayMode={display}\n                buttonConfig={buttonConfig}\n                tooltipConfig={tooltipConfig}\n                isVertical={isVertical}\n              />\n            ))}\n          </div>\n        </motion.div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["useWindowDimensions"],"sources":["../../../../src/components/canvas/navbar/index.tsx"],"sourcesContent":["import { motion, useMotionValueEvent } from \"framer-motion\";\nimport { useState, useRef, useEffect, useCallback, useMemo } from \"react\";\nimport SingleButton from \"./single-button\";\nimport type { NavItem, NavbarConfig, NavbarPosition } from \"../../../types\";\nimport { useCanvasContext } from \"../../../contexts/CanvasContext\";\nimport useWindowDimensions from \"../../../hooks/useWindowDimensions\";\nimport { usePerformanceMode } from \"../../../hooks/usePerformanceMode\";\nimport {\n  getScreenSizeEnum,\n  getSectionPanCoordinates,\n} from \"../../../lib/canvas\";\nimport {\n  RESPONSIVE_ZOOM_MAP,\n  NAVBAR_DEBOUNCE_MS,\n} from \"../../../lib/constants\";\nimport { cn } from \"../../../lib/utils\";\n\ninterface NavbarProps {\n  panToOffset: (\n    offset: { x: number; y: number },\n    onComplete?: () => void,\n    zoom?: number,\n  ) => void;\n  onReset: () => void;\n  /** Array of navigation items defining sections, their icons, and coordinates */\n  items: NavItem[];\n  /** Navbar configuration options */\n  config?: NavbarConfig;\n  /** Register a handler so external code can trigger navigation via navigateToSection */\n  onRegisterNavigate?: (handler: ((sectionId: string) => void) | null) => void;\n}\n\nconst positionStyles: Record<NavbarPosition, React.CSSProperties> = {\n  top: {\n    top: \"1rem\",\n    bottom: \"auto\",\n    left: \"50%\",\n    transform: \"translateX(-50%)\",\n  },\n  bottom: {\n    bottom: \"1rem\",\n    top: \"auto\",\n    left: \"50%\",\n    transform: \"translateX(-50%)\",\n  },\n  left: {\n    left: \"1rem\",\n    right: \"auto\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n  },\n  right: {\n    right: \"1rem\",\n    left: \"auto\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n  },\n};\n\n// Responsive position adjustments (mobile vs desktop)\nconst responsivePositionClasses: Record<NavbarPosition, string> = {\n  top: \"top-12 md:top-4\",\n  bottom: \"bottom-12 md:bottom-4\",\n  left: \"left-4\",\n  right: \"right-4\",\n};\n\nexport default function Navbar({\n  panToOffset,\n  onReset,\n  items,\n  config = {},\n  onRegisterNavigate,\n}: NavbarProps) {\n  const { x, y, scale, animationStage, setNextTargetSection } =\n    useCanvasContext();\n  const [expandedButton, setExpandedButton] = useState<string | null>(null);\n  const activePans = useRef(0);\n  const panTimeout = useRef<NodeJS.Timeout | null>(null);\n\n  // Debounce state\n  const debounceBlocked = useRef(false);\n  const debounceCooldownTimeout = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n\n  const { height, width } = useWindowDimensions();\n  const { mode } = usePerformanceMode();\n\n  const defaultZoom = RESPONSIVE_ZOOM_MAP[getScreenSizeEnum(width)];\n\n  // Derive debounce duration from performance mode\n  const debounceMs = NAVBAR_DEBOUNCE_MS[mode] ?? 0;\n\n  // Extract config values\n  const {\n    display = \"icons\",\n    position = \"bottom\",\n    className,\n    style,\n    buttonConfig,\n    tooltipConfig,\n    gap,\n    padding,\n  } = config;\n\n  const isVertical = position === \"left\" || position === \"right\";\n\n  // Find the home section from items\n  const homeItem = useMemo(() => items.find((item) => item.isHome), [items]);\n\n  // Leading-edge debounce handler\n  const handleDebouncedClick = useCallback(\n    (callback: () => void) => {\n      if (debounceMs === 0) {\n        callback();\n        return;\n      }\n\n      if (debounceBlocked.current) {\n        // We're in the cooldown window; ignore this click\n        return;\n      }\n\n      // Enter cooldown and perform the click immediately\n      debounceBlocked.current = true;\n      callback();\n\n      if (debounceCooldownTimeout.current) {\n        clearTimeout(debounceCooldownTimeout.current);\n      }\n\n      debounceCooldownTimeout.current = setTimeout(() => {\n        debounceBlocked.current = false;\n        debounceCooldownTimeout.current = null;\n      }, debounceMs);\n    },\n    [debounceMs],\n  );\n\n  const updateExpandedButton = () => {\n    // reset activePans if no movement has occurred recently\n    if (panTimeout.current) clearTimeout(panTimeout.current);\n    panTimeout.current = setTimeout(() => {\n      activePans.current = 0;\n    }, 500);\n\n    if (activePans.current == 0) setExpandedButton(null);\n  };\n\n  useMotionValueEvent(x, \"change\", updateExpandedButton);\n  useMotionValueEvent(y, \"change\", updateExpandedButton);\n  useMotionValueEvent(scale, \"change\", updateExpandedButton);\n\n  const handlePan = useCallback(\n    function handlePan(item: NavItem) {\n      setExpandedButton(item.id);\n      activePans.current++;\n\n      // Predictive pre-render hint: mark the target section so its CanvasComponent can\n      // render even before it comes fully into view.\n      setNextTargetSection(item.id);\n\n      if (item.isHome) {\n        onReset();\n        return;\n      }\n\n      const panCoords = getSectionPanCoordinates({\n        windowDimensions: { width, height },\n        coords: { x: item.x, y: item.y, width: item.width, height: item.height },\n        targetZoom: defaultZoom,\n        negative: true,\n      });\n\n      panToOffset(\n        panCoords,\n        () => {\n          activePans.current--;\n        },\n        defaultZoom,\n      );\n    },\n    [panToOffset, onReset, width, height, defaultZoom, setNextTargetSection],\n  );\n\n  // Register handlePan for external navigation via navigateToSection\n  const handlePanRef = useRef(handlePan);\n  useEffect(() => {\n    handlePanRef.current = handlePan;\n  }, [handlePan]);\n\n  const itemsRef = useRef(items);\n  useEffect(() => {\n    itemsRef.current = items;\n  }, [items]);\n\n  useEffect(() => {\n    if (!onRegisterNavigate) return;\n    const handler = (sectionId: string) => {\n      const item = itemsRef.current.find((i) => i.id === sectionId);\n      if (item) handlePanRef.current(item);\n    };\n    onRegisterNavigate(handler);\n    return () => onRegisterNavigate(null);\n  }, [onRegisterNavigate]);\n\n  // Clean up timers on unmount and pan to home on animation complete\n  useEffect(() => {\n    if (animationStage < 2) return;\n    if (homeItem) {\n      handlePan(homeItem);\n    }\n    return () => {\n      if (panTimeout.current) clearTimeout(panTimeout.current);\n      if (debounceCooldownTimeout.current)\n        clearTimeout(debounceCooldownTimeout.current);\n    };\n  }, [handlePan, animationStage, homeItem]);\n\n  // Compute container styles (positioning only)\n  const containerStyle: React.CSSProperties = {\n    position: \"fixed\",\n    zIndex: 1000,\n    pointerEvents: \"auto\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    ...positionStyles[position],\n  };\n\n  // Compute inner container styles (visual styling)\n  const innerStyle: React.CSSProperties = {\n    ...(gap !== undefined && { gap: `${gap}px` }),\n    ...(padding !== undefined && { padding: `${padding}px` }),\n    ...(isVertical && { flexDirection: \"column\" }),\n    ...style,\n  };\n\n  return (\n    <div\n      className={responsivePositionClasses[position]}\n      style={containerStyle}\n    >\n      {/* padding to prevent edge bug */}\n      <div className={isVertical ? \"py-4 md:py-8\" : \"px-4 md:px-8\"}>\n        <motion.div\n          className={cn(\n            \"flex select-none items-center justify-center gap-1 rounded-[10px] border p-1 shadow-[0_6px_12px_rgba(0,0,0,0.08)]\",\n            !style?.backgroundColor && \"bg-white\",\n            !style?.borderColor && \"border-neutral-200\",\n            isVertical && \"flex-col\",\n            className,\n          )}\n          style={innerStyle}\n        >\n          <div className={cn(\"flex items-center gap-1\", isVertical && \"flex-col\")}>\n            {items.map((item) => (\n              <SingleButton\n                key={item.id}\n                label={item.label}\n                icon={item.icon}\n                onClick={() => handlePan(item)}\n                isPushed={expandedButton === item.id}\n                onDebouncedClick={handleDebouncedClick}\n                displayMode={display}\n                buttonConfig={buttonConfig}\n                tooltipConfig={tooltipConfig}\n                isVertical={isVertical}\n              />\n            ))}\n          </div>\n        </motion.div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/contexts/CanvasContext.d.ts

@@ -15,6 +15,8 @@ export interface CanvasContextState {
     animationStage: number;
     nextTargetSection: CanvasSection | null;
     setNextTargetSection: (section: CanvasSection | null) => void;
+    /** Navigate to a section by its NavItem id. Pans the canvas and highlights the navbar button. */
+    navigateToSection: (sectionId: string) => void;
 }
 export declare const CanvasContext: React.Context<CanvasContextState>;
 export declare const useCanvasContext: () => CanvasContextState;

package/dist/contexts/CanvasContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasContext.d.ts","sourceRoot":"","sources":["../../src/contexts/CanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,aAAa,GAAG,IAAI,CAAC;IACxC,oBAAoB,EAAE,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/D;AAkBD,eAAO,MAAM,aAAa,mCAAkD,CAAC;AAE7E,eAAO,MAAM,gBAAgB,0BAAkC,CAAC;AAEhE,UAAU,mBAAoB,SAAQ,kBAAkB;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAMxD,CAAC"}
+{"version":3,"file":"CanvasContext.d.ts","sourceRoot":"","sources":["../../src/contexts/CanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,aAAa,GAAG,IAAI,CAAC;IACxC,oBAAoB,EAAE,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,iGAAiG;IACjG,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAqBD,eAAO,MAAM,aAAa,mCAAkD,CAAC;AAE7E,eAAO,MAAM,gBAAgB,0BAAkC,CAAC;AAEhE,UAAU,mBAAoB,SAAQ,kBAAkB;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAMxD,CAAC"}

package/dist/contexts/CanvasContext.js

@@ -15,6 +15,9 @@ const defaultState = {
 	nextTargetSection: null,
 	setNextTargetSection: () => {
 		console.log("setNextTargetSection not set");
+	},
+	navigateToSection: () => {
+		console.log("navigateToSection not set");
 	}
 };
 const CanvasContext = createContext(defaultState);

package/dist/contexts/CanvasContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasContext.js","names":[],"sources":["../../src/contexts/CanvasContext.tsx"],"sourcesContent":["import React, { createContext, useContext, type ReactNode } from \"react\";\nimport { type MotionValue } from \"framer-motion\";\nimport { CanvasSection } from \"../types\";\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface CanvasContextState {\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n  scale: MotionValue<number>;\n  isResetting: boolean;\n  maxZIndex: number;\n  setMaxZIndex: (zIndex: number) => void;\n  animationStage: number;\n  nextTargetSection: CanvasSection | null; // predictive pre-render target\n  setNextTargetSection: (section: CanvasSection | null) => void;\n}\n\nconst defaultState = {\n  x: undefined as unknown as MotionValue<number>,\n  y: undefined as unknown as MotionValue<number>,\n  scale: 1 as unknown as MotionValue<number>,\n  isResetting: false,\n  maxZIndex: 1,\n  setMaxZIndex: () => {\n    console.log(\"setMaxZIndex not set\");\n  },\n  animationStage: 0,\n  nextTargetSection: null,\n  setNextTargetSection: () => {\n    console.log(\"setNextTargetSection not set\");\n  },\n} as const;\n\nexport const CanvasContext = createContext<CanvasContextState>(defaultState);\n\nexport const useCanvasContext = () => useContext(CanvasContext);\n\ninterface CanvasProviderProps extends CanvasContextState {\n  children: ReactNode;\n}\n\nexport const CanvasProvider: React.FC<CanvasProviderProps> = React.memo(\n  ({ children, ...value }) => (\n    <CanvasContext.Provider value={value as CanvasContextState}>\n      {children}\n    </CanvasContext.Provider>\n  ),\n);\n\nCanvasProvider.displayName = \"CanvasProvider\";\n"],"mappings":";;;;AAqBA,MAAM,eAAe;CACnB,GAAG;CACH,GAAG;CACH,OAAO;CACP,aAAa;CACb,WAAW;CACX,oBAAoB;AAClB,UAAQ,IAAI,uBAAuB;;CAErC,gBAAgB;CAChB,mBAAmB;CACnB,4BAA4B;AAC1B,UAAQ,IAAI,+BAA+B;;CAE9C;AAED,MAAa,gBAAgB,cAAkC,aAAa;AAE5E,MAAa,yBAAyB,WAAW,cAAc;AAM/D,MAAa,iBAAgD,MAAM,MAChE,EAAE,UAAU,GAAG,YACd,oBAAC,cAAc;CAAgB;CAC5B;EACsB,CAE5B;AAED,eAAe,cAAc"}
+{"version":3,"file":"CanvasContext.js","names":[],"sources":["../../src/contexts/CanvasContext.tsx"],"sourcesContent":["import React, { createContext, useContext, type ReactNode } from \"react\";\nimport { type MotionValue } from \"framer-motion\";\nimport { CanvasSection } from \"../types\";\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface CanvasContextState {\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n  scale: MotionValue<number>;\n  isResetting: boolean;\n  maxZIndex: number;\n  setMaxZIndex: (zIndex: number) => void;\n  animationStage: number;\n  nextTargetSection: CanvasSection | null; // predictive pre-render target\n  setNextTargetSection: (section: CanvasSection | null) => void;\n  /** Navigate to a section by its NavItem id. Pans the canvas and highlights the navbar button. */\n  navigateToSection: (sectionId: string) => void;\n}\n\nconst defaultState = {\n  x: undefined as unknown as MotionValue<number>,\n  y: undefined as unknown as MotionValue<number>,\n  scale: 1 as unknown as MotionValue<number>,\n  isResetting: false,\n  maxZIndex: 1,\n  setMaxZIndex: () => {\n    console.log(\"setMaxZIndex not set\");\n  },\n  animationStage: 0,\n  nextTargetSection: null,\n  setNextTargetSection: () => {\n    console.log(\"setNextTargetSection not set\");\n  },\n  navigateToSection: () => {\n    console.log(\"navigateToSection not set\");\n  },\n} as const;\n\nexport const CanvasContext = createContext<CanvasContextState>(defaultState);\n\nexport const useCanvasContext = () => useContext(CanvasContext);\n\ninterface CanvasProviderProps extends CanvasContextState {\n  children: ReactNode;\n}\n\nexport const CanvasProvider: React.FC<CanvasProviderProps> = React.memo(\n  ({ children, ...value }) => (\n    <CanvasContext.Provider value={value as CanvasContextState}>\n      {children}\n    </CanvasContext.Provider>\n  ),\n);\n\nCanvasProvider.displayName = \"CanvasProvider\";\n"],"mappings":";;;;AAuBA,MAAM,eAAe;CACnB,GAAG;CACH,GAAG;CACH,OAAO;CACP,aAAa;CACb,WAAW;CACX,oBAAoB;AAClB,UAAQ,IAAI,uBAAuB;;CAErC,gBAAgB;CAChB,mBAAmB;CACnB,4BAA4B;AAC1B,UAAQ,IAAI,+BAA+B;;CAE7C,yBAAyB;AACvB,UAAQ,IAAI,4BAA4B;;CAE3C;AAED,MAAa,gBAAgB,cAAkC,aAAa;AAE5E,MAAa,yBAAyB,WAAW,cAAc;AAM/D,MAAa,iBAAgD,MAAM,MAChE,EAAE,UAAU,GAAG,YACd,oBAAC,cAAc;CAAgB;CAC5B;EACsB,CAE5B;AAED,eAAe,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hunterchen/canvas",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "description": "A React-based canvas library for creating pannable, zoomable, and interactive canvas experiences.",
   "license": "MIT",
   "type": "module",

package/src/components/canvas/canvas.tsx

@@ -38,6 +38,7 @@ import {
   TRACKPAD_ZOOM_SENSITIVITY,
   DEFAULT_CANVAS_WIDTH,
   DEFAULT_CANVAS_HEIGHT,
+  RESPONSIVE_ZOOM_MAP,
 } from "../../lib/constants";
 import useWindowDimensions from "../../hooks/useWindowDimensions";
 import Navbar from "./navbar";
@@ -645,6 +646,57 @@ const Canvas: FC<Props> = ({
     [panToOffset, viewportRef]
   );
 
+  // --- navigateToSection: delegates to Navbar when mounted, falls back to basic pan ---
+  const navbarNavigateRef = useRef<((sectionId: string) => void) | null>(null);
+
+  const registerNavbarNavigate = useCallback(
+    (handler: ((sectionId: string) => void) | null) => {
+      navbarNavigateRef.current = handler;
+    },
+    []
+  );
+
+  const navigateToSection = useCallback(
+    (sectionId: string) => {
+      if (navbarNavigateRef.current) {
+        // Navbar is mounted — delegate for full behavior (highlight, pre-render, etc.)
+        navbarNavigateRef.current(sectionId);
+      } else if (navItems) {
+        // Fallback: no navbar, do basic pan
+        const item = navItems.find((i) => i.id === sectionId);
+        if (!item) return;
+
+        setNextTargetSection(sectionId);
+
+        if (item.isHome) {
+          onResetViewAndItems();
+        } else {
+          const zoom = RESPONSIVE_ZOOM_MAP[getScreenSizeEnum(windowWidth)];
+          const panCoords = getSectionPanCoordinates({
+            windowDimensions: { width: windowWidth, height: windowHeight },
+            coords: {
+              x: item.x,
+              y: item.y,
+              width: item.width,
+              height: item.height,
+            },
+            targetZoom: zoom,
+            negative: true,
+          });
+          handlePanToOffset(panCoords, undefined, zoom);
+        }
+      }
+    },
+    [
+      navItems,
+      windowWidth,
+      windowHeight,
+      onResetViewAndItems,
+      handlePanToOffset,
+      setNextTargetSection,
+    ]
+  );
+
   return (
     <CanvasWrapper
       introProgress={introProgress}
@@ -668,6 +720,7 @@ const Canvas: FC<Props> = ({
         animationStage={animationStage}
         nextTargetSection={nextTargetSection}
         setNextTargetSection={setNextTargetSection}
+        navigateToSection={navigateToSection}
       >
         {animationStage >= 2 && (
           <>
@@ -683,6 +736,7 @@ const Canvas: FC<Props> = ({
                 onReset={onResetViewAndItems}
                 items={navItems}
                 config={navbarConfig}
+                onRegisterNavigate={registerNavbarNavigate}
               />
             )}
           </>

package/src/components/canvas/draggable.tsx

@@ -141,6 +141,8 @@ export interface DraggableImageProps extends DraggableProps {
 }
 
 function drawImageToCanvas(img: HTMLImageElement, canvas: HTMLCanvasElement) {
+  canvas.width = img.naturalWidth;
+  canvas.height = img.naturalHeight;
   const ctx = canvas.getContext("2d", { willReadFrequently: true });
   if (!ctx) return;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -160,8 +162,8 @@ function getAlphaAtCoords(
 
   const rect = img.getBoundingClientRect();
 
-  const x = ((clientX - rect.left) / rect.width) * img.naturalWidth;
-  const y = ((clientY - rect.top) / rect.height) * img.naturalHeight;
+  const x = ((clientX - rect.left) / rect.width) * canvas.width;
+  const y = ((clientY - rect.top) / rect.height) * canvas.height;
 
   const alpha = ctx.getImageData(x, y, 1, 1).data[3] ?? 0;
   return alpha;

package/src/components/canvas/navbar/index.tsx

@@ -26,6 +26,8 @@ interface NavbarProps {
   items: NavItem[];
   /** Navbar configuration options */
   config?: NavbarConfig;
+  /** Register a handler so external code can trigger navigation via navigateToSection */
+  onRegisterNavigate?: (handler: ((sectionId: string) => void) | null) => void;
 }
 
 const positionStyles: Record<NavbarPosition, React.CSSProperties> = {
@@ -68,6 +70,7 @@ export default function Navbar({
   onReset,
   items,
   config = {},
+  onRegisterNavigate,
 }: NavbarProps) {
   const { x, y, scale, animationStage, setNextTargetSection } =
     useCanvasContext();
@@ -181,6 +184,27 @@ export default function Navbar({
     [panToOffset, onReset, width, height, defaultZoom, setNextTargetSection],
   );
 
+  // Register handlePan for external navigation via navigateToSection
+  const handlePanRef = useRef(handlePan);
+  useEffect(() => {
+    handlePanRef.current = handlePan;
+  }, [handlePan]);
+
+  const itemsRef = useRef(items);
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+
+  useEffect(() => {
+    if (!onRegisterNavigate) return;
+    const handler = (sectionId: string) => {
+      const item = itemsRef.current.find((i) => i.id === sectionId);
+      if (item) handlePanRef.current(item);
+    };
+    onRegisterNavigate(handler);
+    return () => onRegisterNavigate(null);
+  }, [onRegisterNavigate]);
+
   // Clean up timers on unmount and pan to home on animation complete
   useEffect(() => {
     if (animationStage < 2) return;

package/src/contexts/CanvasContext.tsx

@@ -17,6 +17,8 @@ export interface CanvasContextState {
   animationStage: number;
   nextTargetSection: CanvasSection | null; // predictive pre-render target
   setNextTargetSection: (section: CanvasSection | null) => void;
+  /** Navigate to a section by its NavItem id. Pans the canvas and highlights the navbar button. */
+  navigateToSection: (sectionId: string) => void;
 }
 
 const defaultState = {
@@ -33,6 +35,9 @@ const defaultState = {
   setNextTargetSection: () => {
     console.log("setNextTargetSection not set");
   },
+  navigateToSection: () => {
+    console.log("navigateToSection not set");
+  },
 } as const;
 
 export const CanvasContext = createContext<CanvasContextState>(defaultState);