@ue-too/board-react-adapter 0.14.1 → 0.15.0

package/README.md

@@ -22,16 +22,19 @@ React adapter for the @ue-too/board infinite canvas library.
 ## Installation
 
 Using Bun:
+
 ```bash
 bun add @ue-too/board-react-adapter react react-dom
 ```
 
 Using npm:
+
 ```bash
 npm install @ue-too/board-react-adapter react react-dom
 ```
 
 **Peer Dependencies:**
+
 - React >= 19.0.0
 - React-DOM >= 19.0.0
 
@@ -43,20 +46,20 @@ Here's a simple example creating an infinite canvas with React:
 import Board from '@ue-too/board-react-adapter';
 
 function App() {
-  return (
-    <Board
-      width={800}
-      height={600}
-      animationCallback={(timestamp, ctx, camera) => {
-        // Clear canvas
-        ctx.clearRect(0, 0, 800, 600);
-
-        // Draw a blue square at world origin
-        ctx.fillStyle = 'blue';
-        ctx.fillRect(0, 0, 100, 100);
-      }}
-    />
-  );
+    return (
+        <Board
+            width={800}
+            height={600}
+            animationCallback={(timestamp, ctx, camera) => {
+                // Clear canvas
+                ctx.clearRect(0, 0, 800, 600);
+
+                // Draw a blue square at world origin
+                ctx.fillStyle = 'blue';
+                ctx.fillRect(0, 0, 100, 100);
+            }}
+        />
+    );
 }
 ```
 
@@ -78,6 +81,7 @@ Main component that renders the canvas and manages the board instance.
 ```
 
 **Props:**
+
 - `width`: Canvas width in pixels
 - `height`: Canvas height in pixels
 - `animationCallback`: Function called on each frame with timestamp, context, and camera
@@ -89,8 +93,8 @@ The component supports children, which will have access to the board via context
 
 ```tsx
 <Board width={800} height={600}>
-  <Controls />
-  <StatusDisplay />
+    <Controls />
+    <StatusDisplay />
 </Board>
 ```
 
@@ -102,20 +106,26 @@ Subscribe to a specific camera state property.
 
 ```tsx
 function useBoardCameraState<K extends keyof CameraState>(
-  key: K
+    key: K
 ): CameraState[K];
 ```
 
 **Example:**
+
 ```tsx
 function CameraPosition() {
-  const position = useBoardCameraState('position');
+    const position = useBoardCameraState('position');
 
-  return <div>Position: ({position.x.toFixed(0)}, {position.y.toFixed(0)})</div>;
+    return (
+        <div>
+            Position: ({position.x.toFixed(0)}, {position.y.toFixed(0)})
+        </div>
+    );
 }
 ```
 
 **Available Keys:**
+
 - `position`: `{ x: number, y: number }` - Camera world position
 - `rotation`: `number` - Camera rotation in radians
 - `zoomLevel`: `number` - Current zoom level
@@ -129,17 +139,20 @@ function useAllBoardCameraState(): CameraState;
 ```
 
 **Example:**
+
 ```tsx
 function CameraInfo() {
-  const camera = useAllBoardCameraState();
-
-  return (
-    <div>
-      <p>Position: ({camera.position.x}, {camera.position.y})</p>
-      <p>Rotation: {camera.rotation}rad</p>
-      <p>Zoom: {camera.zoomLevel}x</p>
-    </div>
-  );
+    const camera = useAllBoardCameraState();
+
+    return (
+        <div>
+            <p>
+                Position: ({camera.position.x}, {camera.position.y})
+            </p>
+            <p>Rotation: {camera.rotation}rad</p>
+            <p>Zoom: {camera.zoomLevel}x</p>
+        </div>
+    );
 }
 ```
 
@@ -167,27 +180,28 @@ Get camera control functions.
 
 ```tsx
 function useCameraInput(): {
-  panToWorld: (position: Point) => void;
-  panByScreen: (offset: Point) => void;
-  zoomTo: (level: number) => void;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  rotateTo: (angle: number) => void;
+    panToWorld: (position: Point) => void;
+    panByScreen: (offset: Point) => void;
+    zoomTo: (level: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    rotateTo: (angle: number) => void;
 };
 ```
 
 **Example:**
+
 ```tsx
 function Controls() {
-  const { panToWorld, zoomTo, rotateTo } = useCameraInput();
-
-  return (
-    <div>
-      <button onClick={() => panToWorld({ x: 0, y: 0 })}>Center</button>
-      <button onClick={() => zoomTo(1.0)}>Reset Zoom</button>
-      <button onClick={() => rotateTo(0)}>Reset Rotation</button>
-    </div>
-  );
+    const { panToWorld, zoomTo, rotateTo } = useCameraInput();
+
+    return (
+        <div>
+            <button onClick={() => panToWorld({ x: 0, y: 0 })}>Center</button>
+            <button onClick={() => zoomTo(1.0)}>Reset Zoom</button>
+            <button onClick={() => rotateTo(0)}>Reset Rotation</button>
+        </div>
+    );
 }
 ```
 
@@ -196,9 +210,7 @@ function Controls() {
 Set a custom camera multiplexer for advanced camera control.
 
 ```tsx
-function useCustomCameraMux(
-  customMux: CameraMux | undefined
-): void;
+function useCustomCameraMux(customMux: CameraMux | undefined): void;
 ```
 
 #### `useBoardify(width, height, animationCallback)`
@@ -207,12 +219,12 @@ Create a standalone board instance without using the provider pattern.
 
 ```tsx
 function useBoardify(
-  width: number,
-  height: number,
-  animationCallback: AnimationCallback
+    width: number,
+    height: number,
+    animationCallback: AnimationCallback
 ): {
-  canvas: HTMLCanvasElement | null;
-  board: BoardType | null;
+    canvas: HTMLCanvasElement | null;
+    board: BoardType | null;
 };
 ```
 
@@ -223,21 +235,20 @@ function useBoardify(
 Generic animation frame hook.
 
 ```tsx
-function useAnimationFrame(
-  callback: (timestamp: number) => void
-): void;
+function useAnimationFrame(callback: (timestamp: number) => void): void;
 ```
 
 **Example:**
+
 ```tsx
 function AnimatedComponent() {
-  const [rotation, setRotation] = useState(0);
+    const [rotation, setRotation] = useState(0);
 
-  useAnimationFrame((timestamp) => {
-    setRotation(timestamp * 0.001); // Rotate based on time
-  });
+    useAnimationFrame(timestamp => {
+        setRotation(timestamp * 0.001); // Rotate based on time
+    });
 
-  return <div style={{ transform: `rotate(${rotation}rad)` }}>Spinning</div>;
+    return <div style={{ transform: `rotate(${rotation}rad)` }}>Spinning</div>;
 }
 ```
 
@@ -247,7 +258,11 @@ Animation loop integrated with `board.step()`.
 
 ```tsx
 function useAnimationFrameWithBoard(
-  callback: (timestamp: number, ctx: CanvasRenderingContext2D, camera: Camera) => void
+    callback: (
+        timestamp: number,
+        ctx: CanvasRenderingContext2D,
+        camera: Camera
+    ) => void
 ): void;
 ```
 
@@ -256,39 +271,44 @@ function useAnimationFrameWithBoard(
 ### Basic Canvas with Pan and Zoom
 
 ```tsx
-import Board, { useCameraInput, useBoardCameraState } from '@ue-too/board-react-adapter';
+import Board, {
+    useBoardCameraState,
+    useCameraInput,
+} from '@ue-too/board-react-adapter';
 
 function Controls() {
-  const position = useBoardCameraState('position');
-  const zoom = useBoardCameraState('zoomLevel');
-  const { panToWorld, zoomTo } = useCameraInput();
-
-  return (
-    <div style={{ position: 'absolute', top: 10, left: 10 }}>
-      <p>Position: ({position.x.toFixed(0)}, {position.y.toFixed(0)})</p>
-      <p>Zoom: {zoom.toFixed(2)}x</p>
-      <button onClick={() => panToWorld({ x: 0, y: 0 })}>Center</button>
-      <button onClick={() => zoomTo(1.0)}>Reset Zoom</button>
-    </div>
-  );
+    const position = useBoardCameraState('position');
+    const zoom = useBoardCameraState('zoomLevel');
+    const { panToWorld, zoomTo } = useCameraInput();
+
+    return (
+        <div style={{ position: 'absolute', top: 10, left: 10 }}>
+            <p>
+                Position: ({position.x.toFixed(0)}, {position.y.toFixed(0)})
+            </p>
+            <p>Zoom: {zoom.toFixed(2)}x</p>
+            <button onClick={() => panToWorld({ x: 0, y: 0 })}>Center</button>
+            <button onClick={() => zoomTo(1.0)}>Reset Zoom</button>
+        </div>
+    );
 }
 
 function App() {
-  return (
-    <Board
-      width={800}
-      height={600}
-      animationCallback={(timestamp, ctx) => {
-        ctx.fillStyle = 'lightblue';
-        ctx.fillRect(-200, -200, 400, 400);
-
-        ctx.fillStyle = 'red';
-        ctx.fillRect(-50, -50, 100, 100);
-      }}
-    >
-      <Controls />
-    </Board>
-  );
+    return (
+        <Board
+            width={800}
+            height={600}
+            animationCallback={(timestamp, ctx) => {
+                ctx.fillStyle = 'lightblue';
+                ctx.fillRect(-200, -200, 400, 400);
+
+                ctx.fillStyle = 'red';
+                ctx.fillRect(-50, -50, 100, 100);
+            }}
+        >
+            <Controls />
+        </Board>
+    );
 }
 ```
 
@@ -299,36 +319,39 @@ import Board, { useBoard } from '@ue-too/board-react-adapter';
 import { useState } from 'react';
 
 function Drawing() {
-  const board = useBoard();
-  const [points, setPoints] = useState<Point[]>([]);
-
-  const handleClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!board) return;
-
-    const rect = e.currentTarget.getBoundingClientRect();
-    const screenX = e.clientX - rect.left;
-    const screenY = e.clientY - rect.top;
-
-    const worldPoint = board.camera.screenToWorld({ x: screenX, y: screenY });
-    setPoints([...points, worldPoint]);
-  };
-
-  return (
-    <Board
-      width={800}
-      height={600}
-      onClick={handleClick}
-      animationCallback={(timestamp, ctx) => {
-        // Draw all points
-        ctx.fillStyle = 'red';
-        points.forEach(point => {
-          ctx.beginPath();
-          ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
-          ctx.fill();
+    const board = useBoard();
+    const [points, setPoints] = useState<Point[]>([]);
+
+    const handleClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
+        if (!board) return;
+
+        const rect = e.currentTarget.getBoundingClientRect();
+        const screenX = e.clientX - rect.left;
+        const screenY = e.clientY - rect.top;
+
+        const worldPoint = board.camera.screenToWorld({
+            x: screenX,
+            y: screenY,
         });
-      }}
-    />
-  );
+        setPoints([...points, worldPoint]);
+    };
+
+    return (
+        <Board
+            width={800}
+            height={600}
+            onClick={handleClick}
+            animationCallback={(timestamp, ctx) => {
+                // Draw all points
+                ctx.fillStyle = 'red';
+                points.forEach(point => {
+                    ctx.beginPath();
+                    ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
+                    ctx.fill();
+                });
+            }}
+        />
+    );
 }
 ```
 
@@ -339,67 +362,74 @@ import Board, { useAnimationFrameWithBoard } from '@ue-too/board-react-adapter';
 import { useState } from 'react';
 
 function AnimatedScene() {
-  const [time, setTime] = useState(0);
+    const [time, setTime] = useState(0);
 
-  useAnimationFrameWithBoard((timestamp, ctx, camera) => {
-    setTime(timestamp * 0.001);
+    useAnimationFrameWithBoard((timestamp, ctx, camera) => {
+        setTime(timestamp * 0.001);
 
-    // Draw animated circle
-    const x = Math.cos(time) * 100;
-    const y = Math.sin(time) * 100;
+        // Draw animated circle
+        const x = Math.cos(time) * 100;
+        const y = Math.sin(time) * 100;
 
-    ctx.fillStyle = 'green';
-    ctx.beginPath();
-    ctx.arc(x, y, 20, 0, Math.PI * 2);
-    ctx.fill();
-  });
+        ctx.fillStyle = 'green';
+        ctx.beginPath();
+        ctx.arc(x, y, 20, 0, Math.PI * 2);
+        ctx.fill();
+    });
 
-  return null; // No UI, just updates
+    return null; // No UI, just updates
 }
 
 function App() {
-  return (
-    <Board width={800} height={600}>
-      <AnimatedScene />
-    </Board>
-  );
+    return (
+        <Board width={800} height={600}>
+            <AnimatedScene />
+        </Board>
+    );
 }
 ```
 
 ### Camera Controls with Buttons
 
 ```tsx
-import Board, { useCameraInput, useBoardCameraState } from '@ue-too/board-react-adapter';
+import Board, {
+    useBoardCameraState,
+    useCameraInput,
+} from '@ue-too/board-react-adapter';
 
 function CameraControls() {
-  const { panByScreen, zoomIn, zoomOut, rotateTo } = useCameraInput();
-  const rotation = useBoardCameraState('rotation');
-
-  return (
-    <div style={{ position: 'absolute', top: 10, right: 10 }}>
-      <button onClick={() => panByScreen({ x: 0, y: -50 })}>↑</button>
-      <br />
-      <button onClick={() => panByScreen({ x: -50, y: 0 })}>←</button>
-      <button onClick={() => panByScreen({ x: 50, y: 0 })}>→</button>
-      <br />
-      <button onClick={() => panByScreen({ x: 0, y: 50 })}>↓</button>
-      <br />
-      <button onClick={zoomIn}>Zoom In</button>
-      <button onClick={zoomOut}>Zoom Out</button>
-      <br />
-      <button onClick={() => rotateTo((rotation + Math.PI / 4) % (Math.PI * 2))}>
-        Rotate 45°
-      </button>
-    </div>
-  );
+    const { panByScreen, zoomIn, zoomOut, rotateTo } = useCameraInput();
+    const rotation = useBoardCameraState('rotation');
+
+    return (
+        <div style={{ position: 'absolute', top: 10, right: 10 }}>
+            <button onClick={() => panByScreen({ x: 0, y: -50 })}>↑</button>
+            <br />
+            <button onClick={() => panByScreen({ x: -50, y: 0 })}>←</button>
+            <button onClick={() => panByScreen({ x: 50, y: 0 })}>→</button>
+            <br />
+            <button onClick={() => panByScreen({ x: 0, y: 50 })}>↓</button>
+            <br />
+            <button onClick={zoomIn}>Zoom In</button>
+            <button onClick={zoomOut}>Zoom Out</button>
+            <br />
+            <button
+                onClick={() =>
+                    rotateTo((rotation + Math.PI / 4) % (Math.PI * 2))
+                }
+            >
+                Rotate 45°
+            </button>
+        </div>
+    );
 }
 
 function App() {
-  return (
-    <Board width={800} height={600}>
-      <CameraControls />
-    </Board>
-  );
+    return (
+        <Board width={800} height={600}>
+            <CameraControls />
+        </Board>
+    );
 }
 ```
 
@@ -410,23 +440,23 @@ import { useBoardify } from '@ue-too/board-react-adapter';
 import { useEffect, useRef } from 'react';
 
 function CustomBoard() {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { canvas, board } = useBoardify(
-    800,
-    600,
-    (timestamp, ctx, camera) => {
-      ctx.fillStyle = 'purple';
-      ctx.fillRect(-100, -100, 200, 200);
-    }
-  );
-
-  useEffect(() => {
-    if (canvas && containerRef.current) {
-      containerRef.current.appendChild(canvas);
-    }
-  }, [canvas]);
-
-  return <div ref={containerRef} />;
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { canvas, board } = useBoardify(
+        800,
+        600,
+        (timestamp, ctx, camera) => {
+            ctx.fillStyle = 'purple';
+            ctx.fillRect(-100, -100, 200, 200);
+        }
+    );
+
+    useEffect(() => {
+        if (canvas && containerRef.current) {
+            containerRef.current.appendChild(canvas);
+        }
+    }, [canvas]);
+
+    return <div ref={containerRef} />;
 }
 ```
 
@@ -440,10 +470,10 @@ This package is written in TypeScript with complete type definitions:
 
 ```tsx
 import Board, {
-  useBoardCameraState,
-  useCameraInput,
-  type CameraState,
-  type AnimationCallback
+    type AnimationCallback,
+    type CameraState,
+    useBoardCameraState,
+    useCameraInput,
 } from '@ue-too/board-react-adapter';
 
 // State is fully typed
@@ -451,11 +481,12 @@ const position: Point = useBoardCameraState('position');
 const zoom: number = useBoardCameraState('zoomLevel');
 
 // Functions are type-safe
-const { panToWorld }: { panToWorld: (position: Point) => void } = useCameraInput();
+const { panToWorld }: { panToWorld: (position: Point) => void } =
+    useCameraInput();
 
 // Callbacks are typed
 const callback: AnimationCallback = (timestamp, ctx, camera) => {
-  // All parameters are properly typed
+    // All parameters are properly typed
 };
 ```
 
@@ -476,6 +507,7 @@ This adapter follows these principles:
 - **Canvas Updates**: Board automatically handles canvas clearing and transformation
 
 **Performance Tips:**
+
 - Subscribe only to the state you need
 - Use `useMemo` for expensive calculations in render
 - Avoid creating new objects in animation callbacks

package/components/Board.d.ts

@@ -112,4 +112,4 @@ export type BoardProps = {
  * @see {@link useCameraInput} for camera control functions
  * @see {@link useBoard} for accessing the board instance
  */
-export default function BoardWrapperWithChildren({ width, height, fullScreen, animationCallback: animationCallbackProp, children }: BoardProps): import("react/jsx-runtime").JSX.Element;
+export default function BoardWrapperWithChildren({ width, height, fullScreen, animationCallback: animationCallbackProp, children, }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/components/index.d.ts

@@ -6,5 +6,5 @@
  *
  * @module
  */
-export * from "./Board";
-export { default as Board } from "./Board";
+export * from './Board';
+export { default as Board } from './Board';

package/hooks/index.d.ts

@@ -10,6 +10,6 @@
  *
  * @module
  */
-export * from "./useAnimationFrame";
-export * from "./useBoardify";
-export * from "./useCanvasProxy";
+export * from './useAnimationFrame';
+export * from './useBoardify';
+export * from './useCanvasProxy';

package/hooks/useBoardify.d.ts

@@ -1,6 +1,6 @@
-import { Board as Boardify, KMTEventParser, OutputEvent, TouchEventParser } from "@ue-too/board";
-import { CameraMux, CameraState } from "@ue-too/board/camera";
-import { Point } from "@ue-too/math";
+import { Board as Boardify, KMTEventParser, OutputEvent, TouchEventParser } from '@ue-too/board';
+import { CameraMux, CameraState } from '@ue-too/board/camera';
+import { Point } from '@ue-too/math';
 /**
  * Hook to subscribe to a specific camera state property with automatic re-rendering.
  *

package/hooks/useCanvasProxy.d.ts

@@ -1,4 +1,4 @@
-import { CanvasProxy } from "@ue-too/board";
+import { CanvasProxy } from '@ue-too/board';
 export declare function useCanvasProxy(): CanvasProxy;
 export declare function useCanvasProxyWithRef(): {
     canvasProxy: CanvasProxy;

package/index.d.ts

@@ -89,5 +89,5 @@
  *
  * @see {@link Board} for the main component
  */
-export * from "./components/Board";
-export * from "./hooks";
+export * from './components/Board';
+export * from './hooks';

package/index.js

@@ -1,5 +1,5 @@
-import{useCallback as S,useEffect as I,useRef as L}from"react";import{Board as T}from"@ue-too/board";import{createContext as U,useCallback as O,useContext as V,useEffect as $,useMemo as Y,useRef as A,useSyncExternalStore as q}from"react";import{jsxDEV as j}from"react/jsx-dev-runtime";function P(G){let H=N(),J=G==="position"?"pan":G==="zoomLevel"?"zoom":"rotate",_=A(null);return q((K)=>H.camera.on(J,K),()=>{if(G==="position"){let K=H.camera.position,Q=_.current;if(Q&&Q.x===K.x&&Q.y===K.y)return Q;let X={...K};return _.current=X,X}return H.camera[G]})}function f(){let G=N();return Y(()=>{let J=G.getCameraRig();return{panByViewPort:(_)=>{J.panByViewPort(_)},panByWorld:(_)=>{J.panByWorld(_)},panToWorld:(_)=>{J.panToWorld(_)},panToViewPort:(_)=>{J.panToViewPort(_)},zoomToAtViewPort:(_,K)=>{J.zoomToAt(_,K)},zoomToAtWorld:(_,K)=>{J.zoomToAtWorld(_,K)},zoomTo:(_)=>{J.zoomTo(_)},zoomBy:(_)=>{J.zoomBy(_)},rotateTo:(_)=>{J.rotateTo(_)},rotateBy:(_)=>{J.rotateBy(_)}}},[G])}function w(){let G=N(),H=A(null);return q((J)=>{return G.camera.on("all",J)},()=>{let J=G.camera.position,_=G.camera.rotation,K=G.camera.zoomLevel,Q=H.current;if(Q&&Q.position.x===J.x&&Q.position.y===J.y&&Q.rotation===_&&Q.zoomLevel===K)return Q;let X={position:{...J},rotation:_,zoomLevel:K};return H.current=X,X})}function v(G){let H=N();$(()=>{H.cameraMux=G},[G,H])}function b(){let G=N(),H=O((J)=>{G.inputOrchestrator.processInputEvent(J)},[G]);return $(()=>{return G.disableEventListeners(),()=>{G.enableEventListeners()}},[G]),{processInputEvent:H}}var W=U(null);function Z({children:G}){let H=Y(()=>new T,[]);return j(W.Provider,{value:H,children:G},void 0,!1,void 0,this)}function N(){let G=V(W);if(G==null)throw Error("Board Provider not found");return G}function p(){return N().camera}function u(){let G=N();return q((H)=>G.onCanvasDimensionChange(H),()=>{return G.canvasDimensions})}function h(){let G=N();return O((H)=>{return G.convertWindowPoint2WorldCoord(H)},[G])}function m(G){let H=N();$(()=>{H.kmtParser=G},[G,H])}function d(G){let H=N();$(()=>{H.touchParser=G},[G,H])}function D(G){let H=L(null);I(()=>{let J=(_)=>{G(_),H.current=requestAnimationFrame(J)};return H.current=requestAnimationFrame(J),()=>{if(H.current)cancelAnimationFrame(H.current)}},[G])}function M(G){let H=N(),J=S((_)=>{H.step(_);let K=H.context;if(K==null){console.warn("Canvas context not available");return}G?.(_,K)},[G,H]);D(J)}import{PointCal as JG}from"@ue-too/math";import{jsxDEV as NG}from"react/jsx-dev-runtime";import{CanvasProxy as z}from"@ue-too/board";import{useState as C,useCallback as y}from"react";function F(){let[G,H]=C(()=>new z);return G}function YG(){let G=F(),H=y((J)=>{if(J==null){G.tearDown();return}G.attach(J)},[G]);return{canvasProxy:G,refCallback:H}}export{d as useCustomTouchEventParser,m as useCustomKMTEventParser,b as useCustomInputHandling,v as useCustomCameraMux,h as useCoordinateConversion,YG as useCanvasProxyWithRef,F as useCanvasProxy,u as useCanvasDimension,f as useCameraInput,P as useBoardCameraState,p as useBoardCamera,N as useBoard,M as useAnimationFrameWithBoard,D as useAnimationFrame,w as useAllBoardCameraState,Z as BoardProvider};
+import{PointCal as t}from"@ue-too/math";import{useCallback as S,useEffect as I,useRef as L}from"react";import{Board as T}from"@ue-too/board";import{createContext as U,useCallback as O,useContext as V,useEffect as $,useMemo as Y,useRef as A,useSyncExternalStore as q}from"react";import{jsxDEV as j}from"react/jsx-dev-runtime";function P(G){let H=N(),J=G==="position"?"pan":G==="zoomLevel"?"zoom":"rotate",_=A(null);return q((K)=>H.camera.on(J,K),()=>{if(G==="position"){let K=H.camera.position,Q=_.current;if(Q&&Q.x===K.x&&Q.y===K.y)return Q;let X={...K};return _.current=X,X}return H.camera[G]})}function f(){let G=N();return Y(()=>{let J=G.getCameraRig();return{panByViewPort:(_)=>{J.panByViewPort(_)},panByWorld:(_)=>{J.panByWorld(_)},panToWorld:(_)=>{J.panToWorld(_)},panToViewPort:(_)=>{J.panToViewPort(_)},zoomToAtViewPort:(_,K)=>{J.zoomToAt(_,K)},zoomToAtWorld:(_,K)=>{J.zoomToAtWorld(_,K)},zoomTo:(_)=>{J.zoomTo(_)},zoomBy:(_)=>{J.zoomBy(_)},rotateTo:(_)=>{J.rotateTo(_)},rotateBy:(_)=>{J.rotateBy(_)}}},[G])}function w(){let G=N(),H=A(null);return q((J)=>{return G.camera.on("all",J)},()=>{let J=G.camera.position,_=G.camera.rotation,K=G.camera.zoomLevel,Q=H.current;if(Q&&Q.position.x===J.x&&Q.position.y===J.y&&Q.rotation===_&&Q.zoomLevel===K)return Q;let X={position:{...J},rotation:_,zoomLevel:K};return H.current=X,X})}function v(G){let H=N();$(()=>{H.cameraMux=G},[G,H])}function b(){let G=N(),H=O((J)=>{G.inputOrchestrator.processInputEvent(J)},[G]);return $(()=>{return G.disableEventListeners(),()=>{G.enableEventListeners()}},[G]),{processInputEvent:H}}var W=U(null);function Z({children:G}){let H=Y(()=>new T,[]);return j(W.Provider,{value:H,children:G},void 0,!1,void 0,this)}function N(){let G=V(W);if(G==null)throw Error("Board Provider not found");return G}function p(){return N().camera}function u(){let G=N();return q((H)=>G.onCanvasDimensionChange(H),()=>{return G.canvasDimensions})}function h(){let G=N();return O((H)=>{return G.convertWindowPoint2WorldCoord(H)},[G])}function m(G){let H=N();$(()=>{H.kmtParser=G},[G,H])}function d(G){let H=N();$(()=>{H.touchParser=G},[G,H])}function D(G){let H=L(null);I(()=>{let J=(_)=>{G(_),H.current=requestAnimationFrame(J)};return H.current=requestAnimationFrame(J),()=>{if(H.current)cancelAnimationFrame(H.current)}},[G])}function M(G){let H=N(),J=S((_)=>{H.step(_);let K=H.context;if(K==null){console.warn("Canvas context not available");return}G?.(_,K)},[G,H]);D(J)}import{jsxDEV as NG}from"react/jsx-dev-runtime";import{CanvasProxy as z}from"@ue-too/board";import{useCallback as C,useState as y}from"react";function F(){let[G,H]=y(()=>new z);return G}function YG(){let G=F(),H=C((J)=>{if(J==null){G.tearDown();return}G.attach(J)},[G]);return{canvasProxy:G,refCallback:H}}export{d as useCustomTouchEventParser,m as useCustomKMTEventParser,b as useCustomInputHandling,v as useCustomCameraMux,h as useCoordinateConversion,YG as useCanvasProxyWithRef,F as useCanvasProxy,u as useCanvasDimension,f as useCameraInput,P as useBoardCameraState,p as useBoardCamera,N as useBoard,M as useAnimationFrameWithBoard,D as useAnimationFrame,w as useAllBoardCameraState,Z as BoardProvider};
 
-//# debugId=6B2CEE4C23D45A0964756E2164756E21
+//# debugId=E2568A6219EBF3E864756E2164756E21
 
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1,18 +1,18 @@
 {
   "version": 3,
   "sources": [
+    "Board.tsx",
     "useAnimationFrame.ts",
     "useBoardify.tsx",
-    "Board.tsx",
     "useCanvasProxy.ts"
   ],
   "sourcesContent": [
-    "import { useCallback, useEffect, useRef } from 'react';\nimport { useBoard } from './useBoardify';\n\n/**\n * Hook to run a callback on every animation frame.\n *\n * @remarks\n * This hook uses `requestAnimationFrame` to execute a callback repeatedly for smooth animations.\n * The animation loop starts when the component mounts and stops when it unmounts, automatically\n * cleaning up the animation frame request.\n *\n * **Performance Note**: The callback is called on every frame, so ensure your callback is\n * optimized to avoid performance issues. The callback dependency should be stable to prevent\n * restarting the animation loop unnecessarily.\n *\n * @param callback - Function to call on each animation frame, receives the current timestamp\n *\n * @example\n * ```tsx\n * function AnimatedComponent() {\n *   const [rotation, setRotation] = useState(0);\n *\n *   useAnimationFrame((timestamp) => {\n *     // Rotate 45 degrees per second\n *     setRotation((prev) => prev + (Math.PI / 4) * (1 / 60));\n *   });\n *\n *   return <div style={{ transform: `rotate(${rotation}rad)` }}>Spinning!</div>;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAnimationFrameWithBoard} for board-integrated animation loop\n */\nexport function useAnimationFrame(callback: (timestamp: number) => void) {\n    const animationFrameRef = useRef<number | null>(null);\n\n    useEffect(() => {\n        const step = (timestamp: number) => {\n            callback(timestamp);\n            animationFrameRef.current = requestAnimationFrame(step);\n        };\n\n        // Start the animation loop\n        animationFrameRef.current = requestAnimationFrame(step);\n\n        // Cleanup function\n        return () => {\n            if (animationFrameRef.current) {\n                cancelAnimationFrame(animationFrameRef.current);\n            }\n        };\n    }, [callback]);\n}\n\n/**\n * Hook to run an animation loop integrated with the Board's step function.\n *\n * @remarks\n * This hook automatically calls `board.step(timestamp)` on every frame to update the board's\n * camera transform, then invokes your callback with the timestamp and canvas context.\n * This is the recommended way to implement drawing logic for board-based applications.\n *\n * The hook handles:\n * - Calling `board.step()` to update camera transforms\n * - Providing the canvas context for drawing\n * - Warning if context is not available\n * - Cleaning up the animation loop on unmount\n *\n * **Typical Usage Pattern**:\n * 1. Board calls `step()` to update transforms\n * 2. Your callback draws on the canvas\n * 3. Browser paints the frame\n * 4. Repeat next frame\n *\n * @param callback - Optional function to call after board.step(), receives timestamp and canvas context\n *\n * @example\n * ```tsx\n * function MyBoard() {\n *   useAnimationFrameWithBoard((timestamp, ctx) => {\n *     // Draw a rectangle at world position (0, 0)\n *     ctx.fillStyle = 'red';\n *     ctx.fillRect(0, 0, 100, 100);\n *\n *     // Draw a circle that moves\n *     const x = Math.sin(timestamp / 1000) * 200;\n *     const y = Math.cos(timestamp / 1000) * 200;\n *     ctx.fillStyle = 'blue';\n *     ctx.beginPath();\n *     ctx.arc(x, y, 20, 0, Math.PI * 2);\n *     ctx.fill();\n *   });\n *\n *   return <Board width={800} height={600} />;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAnimationFrame} for generic animation frame hook\n */\nexport function useAnimationFrameWithBoard(callback?: (timestamp: number, ctx: CanvasRenderingContext2D) => void) {\n\n    const board = useBoard();\n\n    const animationCallback = useCallback((timestamp: number) => {\n        board.step(timestamp);\n        const ctx = board.context;\n        if (ctx == undefined) {\n            console.warn('Canvas context not available');\n            return;\n        }\n        callback?.(timestamp, ctx);\n    }, [callback, board]);\n\n    useAnimationFrame(animationCallback);\n}\n",
-    "import {Board as Boardify, KMTEventParser, KmtInputStateMachine, OutputEvent, TouchEventParser} from \"@ue-too/board\";\nimport {createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore} from \"react\";\nimport { CameraMux, CameraState  } from \"@ue-too/board/camera\";\nimport { Point } from \"@ue-too/math\";\n\n/**\n * Maps camera state keys to their corresponding event names.\n * @internal\n */\ntype StateToEventKey<K extends keyof CameraState> =\n    K extends \"position\" ? \"pan\" : K extends \"zoomLevel\" ? \"zoom\" : \"rotate\";\n\n/**\n * Hook to subscribe to a specific camera state property with automatic re-rendering.\n *\n * @remarks\n * This hook uses React's `useSyncExternalStore` to efficiently subscribe to camera state changes.\n * It only triggers re-renders when the specified property actually changes, and uses caching\n * to maintain referential equality for object values (like position).\n *\n * **Performance**: The hook is optimized to prevent unnecessary re-renders by:\n * - Caching object values (position) to maintain referential equality\n * - Using `useSyncExternalStore` for efficient subscription management\n * - Only subscribing to the specific state property needed\n *\n * @typeParam K - Key of the camera state to subscribe to\n * @param state - The camera state property to track (\"position\", \"rotation\", or \"zoomLevel\")\n * @returns The current value of the specified camera state property\n *\n * @example\n * ```tsx\n * function CameraInfo() {\n *   const position = useBoardCameraState('position');\n *   const rotation = useBoardCameraState('rotation');\n *   const zoomLevel = useBoardCameraState('zoomLevel');\n *\n *   return (\n *     <div>\n *       Position: {position.x}, {position.y}<br/>\n *       Rotation: {rotation}<br/>\n *       Zoom: {zoomLevel}\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAllBoardCameraState} for subscribing to all camera state at once\n */\nexport function useBoardCameraState<K extends keyof CameraState>(state: K): CameraState[K] {\n    const board = useBoard();\n    const stateKey = (state === \"position\" ? \"pan\" : state === \"zoomLevel\" ? \"zoom\" : \"rotate\") as StateToEventKey<K>;\n    const cachedPositionRef = useRef<{ x: number; y: number } | null>(null);\n\n    return useSyncExternalStore(\n        (cb) => board.camera.on(stateKey, cb),\n        () => {\n            // For position (object), we need to cache to avoid creating new objects\n            if (state === \"position\") {\n                const currentPosition = board.camera.position;\n                const cached = cachedPositionRef.current;\n                \n                if (cached && cached.x === currentPosition.x && cached.y === currentPosition.y) {\n                    // Return cached snapshot to maintain referential equality\n                    return cached as CameraState[K];\n                }\n                \n                // Cache the new position object\n                const newPosition = {...currentPosition};\n                cachedPositionRef.current = newPosition;\n                return newPosition as CameraState[K];\n            }\n            \n            // For primitive values (rotation, zoomLevel), return directly\n            // Object.is works correctly for primitives\n            return board.camera[state] as CameraState[K];\n        },\n    );\n}\n\n/**\n * Hook to get camera control functions for programmatic camera manipulation.\n *\n * @remarks\n * This hook provides a stable set of functions to control the camera programmatically.\n * The functions are memoized and only recreate when the board instance changes.\n *\n * All camera operations go through the camera rig, which enforces boundaries,\n * restrictions, and other constraints configured on the board.\n *\n * @returns Object containing camera control functions:\n * - `panToWorld` - Pan camera to a world position\n * - `panToViewPort` - Pan camera to a viewport position\n * - `zoomTo` - Set camera zoom to specific level\n * - `zoomBy` - Adjust camera zoom by delta\n * - `rotateTo` - Set camera rotation to specific angle\n * - `rotateBy` - Adjust camera rotation by delta\n *\n * @example\n * ```tsx\n * function CameraControls() {\n *   const { panToWorld, zoomTo, rotateTo } = useCameraInput();\n *\n *   return (\n *     <div>\n *       <button onClick={() => panToWorld({ x: 0, y: 0 })}>\n *         Center Camera\n *       </button>\n *       <button onClick={() => zoomTo(1.0)}>\n *         Reset Zoom\n *       </button>\n *       <button onClick={() => rotateTo(0)}>\n *         Reset Rotation\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n */\nexport function useCameraInput(){\n    const board = useBoard();\n\n    const test = useMemo(()=>{\n        const cameraRig = board.getCameraRig();\n\n        return {\n            panByViewPort: (delta: Point) => {\n                cameraRig.panByViewPort(delta);\n            },\n            panByWorld: (delta: Point) => {\n                cameraRig.panByWorld(delta);\n            },\n            panToWorld: (worldPosition: Point) => {\n                cameraRig.panToWorld(worldPosition);\n            },\n            panToViewPort: (viewPortPosition: Point) => {\n                cameraRig.panToViewPort(viewPortPosition);\n            },\n            zoomToAtViewPort: (zoomLevel: number, at: Point) => {\n                cameraRig.zoomToAt(zoomLevel, at);\n            },\n            zoomToAtWorld: (zoomLevel: number, at: Point) => {\n                cameraRig.zoomToAtWorld(zoomLevel, at);\n            },\n            zoomTo: (zoomLevel: number) => {\n                cameraRig.zoomTo(zoomLevel);\n            },\n            zoomBy: (zoomDelta: number) => {\n                cameraRig.zoomBy(zoomDelta);\n            },\n            rotateTo: (rotation: number) => {\n                cameraRig.rotateTo(rotation);\n            },\n            rotateBy: (rotationDelta: number) => {\n                cameraRig.rotateBy(rotationDelta);\n            }\n        }\n\n    }, [board]);\n\n    return test;\n}\n\n/**\n * Hook to subscribe to all camera state properties with automatic re-rendering.\n *\n * @remarks\n * This hook provides a snapshot of all camera state (position, rotation, zoomLevel) and\n * re-renders only when any of these values change. It's more efficient than using multiple\n * {@link useBoardCameraState} calls when you need all state properties.\n *\n * **Performance**: The hook uses snapshot caching to maintain referential equality when\n * values haven't changed, preventing unnecessary re-renders in child components.\n *\n * @returns Object containing:\n * - `position` - Current camera position {x, y}\n * - `rotation` - Current camera rotation in radians\n * - `zoomLevel` - Current camera zoom level\n *\n * @example\n * ```tsx\n * function CameraStateDisplay() {\n *   const { position, rotation, zoomLevel } = useAllBoardCameraState();\n *\n *   return (\n *     <div>\n *       <h3>Camera State</h3>\n *       <p>Position: ({position.x.toFixed(2)}, {position.y.toFixed(2)})</p>\n *       <p>Rotation: {rotation.toFixed(2)} rad</p>\n *       <p>Zoom: {zoomLevel.toFixed(2)}x</p>\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useBoardCameraState} for subscribing to individual state properties\n */\nexport function useAllBoardCameraState()  {\n    const board = useBoard();\n    const cachedSnapshotRef = useRef<{\n        position: { x: number; y: number };\n        rotation: number;\n        zoomLevel: number;\n    } | null>(null);\n\n    return useSyncExternalStore(\n        (cb) => { return board.camera.on(\"all\", cb) },\n        () => {\n            const currentPosition = board.camera.position;\n            const currentRotation = board.camera.rotation;\n            const currentZoomLevel = board.camera.zoomLevel;\n\n            // Check if values actually changed\n            const cached = cachedSnapshotRef.current;\n            if (\n                cached &&\n                cached.position.x === currentPosition.x &&\n                cached.position.y === currentPosition.y &&\n                cached.rotation === currentRotation &&\n                cached.zoomLevel === currentZoomLevel\n            ) {\n                // Return cached snapshot to maintain referential equality\n                return cached;\n            }\n\n            // Create new snapshot only when values changed\n            const newSnapshot = {\n                position: {...currentPosition},\n                rotation: currentRotation,\n                zoomLevel: currentZoomLevel,\n            };\n            cachedSnapshotRef.current = newSnapshot;\n            return newSnapshot;\n        },\n    )\n}\n\n/**\n * Hook to set a custom camera multiplexer on the board.\n *\n * @remarks\n * This hook allows you to replace the board's default camera mux with a custom implementation.\n * Useful when you need custom input coordination, animation control, or state-based input blocking.\n *\n * The camera mux is updated whenever the provided `cameraMux` instance changes.\n *\n * @param cameraMux - Custom camera mux implementation to use\n *\n * @example\n * ```tsx\n * function CustomMuxBoard() {\n *   const myCustomMux = useMemo(() => {\n *     return createCameraMuxWithAnimationAndLock(camera);\n *   }, []);\n *\n *   useCustomCameraMux(myCustomMux);\n *\n *   return <Board />;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link CameraMux} from @ue-too/board for camera mux interface\n */\nexport function useCustomCameraMux(cameraMux: CameraMux) {\n    const board = useBoard();\n\n    useEffect(()=>{\n        board.cameraMux = cameraMux;\n    }, [cameraMux, board]);\n}\n\n/**\n * The custom input handling logic is before everything else. To use this hook, you would need to handle the event from the canvas and pass down the result to the `processInputEvent` function. \n * @returns Object containing the `processInputEvent` function\n * @example\n * ```typescript\n * const { processInputEvent } = useCustomInputHandling();\n * \n * const handlePointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {\n *   // custom logic to determine the user input\n * \n *   // if the user input is valid, pass it to the `processInputEvent` function\n *   // e.g. pass the pan event down the input handling system\n *   processInputEvent({\n *     type: \"pan\",\n *     delta: {\n *       x: 10,\n *       y: 10,\n *     },\n *   });\n * }\n * ```\n */\nexport function useCustomInputHandling(){\n    const board = useBoard();\n\n    const processInputEvent = useCallback((input: OutputEvent) => {\n        board.inputOrchestrator.processInputEvent(input);\n    }, [board]);\n\n    useEffect(()=>{\n        board.disableEventListeners();\n\n        return () => {\n            board.enableEventListeners();\n        };\n    }, [board])\n\n    return {\n        processInputEvent\n    };\n}\n\n\n\n/**\n * React context for sharing a Board instance across components.\n * @internal\n */\nconst BoardContext = createContext<Boardify | null>(null);\n\n/**\n * Provider component for sharing a Board instance across the component tree.\n *\n * @remarks\n * This component creates a single Board instance and makes it available to all child\n * components via the {@link useBoard} hook. This is the recommended way to use the\n * board in React applications when you need to access it from multiple components.\n *\n * The board instance is created once when the provider mounts and persists for the\n * lifetime of the provider.\n *\n * @param props - Component props\n * @param props.children - Child components that will have access to the board\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <BoardProvider>\n *       <Board width={800} height={600} />\n *       <CameraControls />\n *       <CameraStateDisplay />\n *     </BoardProvider>\n *   );\n * }\n * ```\n *\n * @category Components\n * @see {@link useBoard} for accessing the board instance\n */\nexport function BoardProvider({children}: {children: React.ReactNode}) {\n    const board = useMemo(() => new Boardify(), []);\n    return <BoardContext.Provider value={board}>{children}</BoardContext.Provider>;\n}\n\n/**\n * Hook to access the Board instance from context.\n *\n * @remarks\n * This hook retrieves the Board instance provided by {@link BoardProvider}.\n * It must be used within a component that is a descendant of BoardProvider,\n * otherwise it will throw an error.\n *\n * @returns The Board instance from context\n * @throws Error if used outside of BoardProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const board = useBoard();\n *\n *   useEffect(() => {\n *     // Configure board\n *     board.camera.boundaries = { min: { x: -1000, y: -1000 }, max: { x: 1000, y: 1000 } };\n *   }, [board]);\n *\n *   return <div>Board ready</div>;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link BoardProvider} for providing the board instance\n */\nexport function useBoard() {\n    const board = useContext(BoardContext);\n    if (board == null) {\n        throw new Error('Board Provider not found');\n    }\n    return board;\n}\n\n/**\n * Hook to access the camera instance from the Board context.\n *\n * @remarks\n * This is a convenience hook that returns the camera from the board instance.\n * Equivalent to calling `useBoard().camera` but more concise.\n *\n * @returns The camera instance from the board\n * @throws Error if used outside of BoardProvider\n *\n * @example\n * ```tsx\n * function CameraConfig() {\n *   const camera = useBoardCamera();\n *\n *   useEffect(() => {\n *     camera.setMinZoomLevel(0.5);\n *     camera.setMaxZoomLevel(4.0);\n *   }, [camera]);\n *\n *   return null;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useBoard} for accessing the full board instance\n */\nexport function useBoardCamera() {\n    const board = useBoard();\n    return board.camera;\n}\n\nexport function useCanvasDimension() {\n    const board = useBoard();\n\n    return useSyncExternalStore((cb) => board.onCanvasDimensionChange(cb), ()=> {\n        return board.canvasDimensions\n    });\n}\n\nexport function useCoordinateConversion() {\n    const board = useBoard();\n    return useCallback((pointInWindow: Point)=>{\n        return board.convertWindowPoint2WorldCoord(pointInWindow);\n    }, [board]);\n}\n\n\nexport function useCustomKMTEventParser(eventParser: KMTEventParser) {\n    const board = useBoard();\n\n    useEffect(()=>{\n        board.kmtParser = eventParser;\n    }, [eventParser, board]);\n}\n\nexport function useCustomTouchEventParser(eventParser: TouchEventParser) {\n    const board = useBoard();\n\n    useEffect(()=>{\n        board.touchParser = eventParser;\n    }, [eventParser, board]);\n}\n",
-    "import {useRef, useCallback, useSyncExternalStore, useMemo, useState} from \"react\";\nimport {useAnimationFrame, useAnimationFrameWithBoard} from \"../hooks/useAnimationFrame\";\nimport {BoardProvider, useBoard, useBoardCameraState, useCustomCameraMux, useCustomInputHandling} from \"../hooks/useBoardify\";\nimport { Point, PointCal } from \"@ue-too/math\";\nimport type { CameraMux } from \"@ue-too/board/camera\";\nimport { useCanvasProxyWithRef } from \"../hooks/useCanvasProxy\";\nimport { useEffect } from \"react\";\nimport { OutputEvent } from \"@ue-too/board\";\n/**\n * Props for the Board component.\n *\n * @category Components\n */\nexport type BoardProps = {\n    /** Enable fullscreen mode (canvas resizes with window) */\n    fullScreen?: boolean;\n    /** Canvas width in pixels */\n    width?: number;\n    /** Canvas height in pixels */\n    height?: number;\n    /** Callback function for drawing on each animation frame */\n    animationCallback?: (timestamp: number, ctx: CanvasRenderingContext2D) => void;\n    /** Child components that can access the board via hooks */\n    children?: React.ReactNode;\n}\n\n/**\n * Internal Board component that renders the canvas element.\n *\n * @remarks\n * This component must be used within a {@link BoardProvider} to access the board instance.\n * It handles canvas attachment/detachment and integrates the animation loop.\n *\n * @internal\n */\nfunction Board({width, height, fullScreen, animationCallback: animationCallbackProp}: BoardProps) {\n\n    const board = useBoard();\n\n    useAnimationFrameWithBoard(animationCallbackProp);\n\n    // const {processInputEvent} = useCustomInputHandling();\n\n    // const keyboardMouseInput = useMemo(() => {console.log(\"new KeyboardMouseInput\"); return new KeyboardMouseInput(processInputEvent)}, [processInputEvent]);\n\n    return (\n        <canvas\n            width={width}\n            height={height}\n            ref={(ref) => {\n                if (ref == null) {\n                    board.tearDown();\n                    return;\n                }\n\n                board.attach(ref);\n            }}\n            // onPointerDown={(e: React.PointerEvent<HTMLCanvasElement>) => keyboardMouseInput.pointerdownHandler(e.nativeEvent)}\n            // onPointerMove={(e: React.PointerEvent<HTMLCanvasElement>) => keyboardMouseInput.pointermoveHandler(e.nativeEvent)}\n            // onPointerUp={(e: React.PointerEvent<HTMLCanvasElement>) => keyboardMouseInput.pointerupHandler(e.nativeEvent)}\n        />\n    );\n}\n\n/**\n * Main Board component with provider wrapper for React applications.\n *\n * @remarks\n * This component provides a complete infinite canvas solution for React. It combines:\n * - A {@link BoardProvider} to share the board instance across components\n * - A canvas element configured with the @ue-too/board package\n * - An integrated animation loop for drawing\n * - Support for child components that can access board state and controls\n *\n * ## Features\n *\n * - **Infinite Canvas**: Pan, zoom, and rotate with mouse/touch input\n * - **Animation Loop**: Automatic rendering loop with customizable draw callback\n * - **React Integration**: Use hooks to access camera state and controls\n * - **Fullscreen Support**: Optional auto-resize with window\n * - **Type-Safe**: Full TypeScript support\n *\n * ## Usage Pattern\n *\n * 1. Render the Board component\n * 2. Provide an animation callback for drawing\n * 3. Use child components with board hooks for UI controls\n * 4. Access camera state reactively via hooks\n *\n * @param props - Component props\n * @param props.width - Canvas width in pixels (default: auto)\n * @param props.height - Canvas height in pixels (default: auto)\n * @param props.fullScreen - Enable fullscreen mode (canvas resizes with window)\n * @param props.animationCallback - Function called on each frame with timestamp and context\n * @param props.children - Child components that can use board hooks\n *\n * @example\n * Basic usage with drawing\n * ```tsx\n * function App() {\n *   return (\n *     <Board\n *       width={800}\n *       height={600}\n *       animationCallback={(timestamp, ctx) => {\n *         // Draw a rectangle at world position (0, 0)\n *         ctx.fillStyle = 'blue';\n *         ctx.fillRect(0, 0, 100, 100);\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @example\n * With child components and camera controls\n * ```tsx\n * function CameraControls() {\n *   const { panToWorld, zoomTo } = useCameraInput();\n *   const position = useBoardCameraState('position');\n *\n *   return (\n *     <div style={{ position: 'absolute', top: 10, left: 10 }}>\n *       <p>Position: ({position.x.toFixed(0)}, {position.y.toFixed(0)})</p>\n *       <button onClick={() => panToWorld({ x: 0, y: 0 })}>Center</button>\n *       <button onClick={() => zoomTo(1.0)}>Reset Zoom</button>\n *     </div>\n *   );\n * }\n *\n * function App() {\n *   return (\n *     <Board width={800} height={600} animationCallback={drawScene}>\n *       <CameraControls />\n *     </Board>\n *   );\n * }\n * ```\n *\n * @example\n * Fullscreen mode\n * ```tsx\n * function App() {\n *   return (\n *     <Board\n *       fullScreen\n *       animationCallback={(timestamp, ctx) => {\n *         // Canvas automatically resizes to window size\n *         ctx.fillStyle = 'green';\n *         ctx.fillRect(-50, -50, 100, 100);\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @category Components\n * @see {@link useBoardCameraState} for accessing camera state\n * @see {@link useCameraInput} for camera control functions\n * @see {@link useBoard} for accessing the board instance\n */\nexport default function BoardWrapperWithChildren({width, height, fullScreen, animationCallback: animationCallbackProp, children}: BoardProps) {\n    return (\n        <BoardProvider>\n            <Board width={width} height={height} fullScreen={fullScreen} animationCallback={animationCallbackProp} />\n            {children}\n        </BoardProvider>\n    );\n}\n\nclass KeyboardMouseInput{\n\n    private isPanning: boolean;\n    private panStartPoint: Point;\n    private processInputEvent: (input: OutputEvent) => void;\n\n    constructor(processInputEvent: (input: OutputEvent) => void){\n        this.isPanning = false;\n        this.panStartPoint = {x: 0, y: 0};\n        this.processInputEvent = processInputEvent;\n        this.bindFunctions();\n    }\n\n    bindFunctions(): void {\n        this.pointerdownHandler = this.pointerdownHandler.bind(this);\n        this.pointermoveHandler = this.pointermoveHandler.bind(this);\n        this.pointerupHandler = this.pointerupHandler.bind(this);\n    }\n\n    pointerdownHandler(event: PointerEvent): void {\n        if(event.pointerType !== \"mouse\"){\n            return;\n        }\n        this.isPanning = true;\n        this.panStartPoint = {x: event.clientX, y: event.clientY};\n    }\n\n    pointermoveHandler(event: PointerEvent): void {\n        if(!this.isPanning){\n            return;\n        }\n        const curPosition = {x: event.clientX, y: event.clientY};\n        const diff = PointCal.subVector(this.panStartPoint, curPosition);\n        this.processInputEvent({\n            type: 'pan',\n            delta: diff,\n        });\n        this.panStartPoint = curPosition;\n    }\n\n    pointerupHandler(event: PointerEvent): void {\n        if(event.pointerType !== \"mouse\"){\n            return;\n        }\n        this.isPanning = false;\n    }\n\n}\n",
-    "import { CanvasProxy } from \"@ue-too/board\";\nimport { useEffect, useState, useRef, useCallback } from \"react\";\n\n\nexport function useCanvasProxy() {\n    const [canvasProxy, _] = useState(() => new CanvasProxy());\n\n    return canvasProxy;\n}\n\nexport function useCanvasProxyWithRef() {\n    const canvasProxy = useCanvasProxy();\n    const refCallback = useCallback((canvas: HTMLCanvasElement | null)=>{\n        if(canvas == null){\n            canvasProxy.tearDown();\n            return;\n        }\n        canvasProxy.attach(canvas);\n    }, [canvasProxy]);\n\n    return {\n        canvasProxy,\n        refCallback,\n    };\n}\n"
+    "import { OutputEvent } from '@ue-too/board';\nimport type { CameraMux } from '@ue-too/board/camera';\nimport { Point, PointCal } from '@ue-too/math';\nimport {\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n    useSyncExternalStore,\n} from 'react';\nimport { useEffect } from 'react';\n\nimport {\n    useAnimationFrame,\n    useAnimationFrameWithBoard,\n} from '../hooks/useAnimationFrame';\nimport {\n    BoardProvider,\n    useBoard,\n    useBoardCameraState,\n    useCustomCameraMux,\n    useCustomInputHandling,\n} from '../hooks/useBoardify';\nimport { useCanvasProxyWithRef } from '../hooks/useCanvasProxy';\n\n/**\n * Props for the Board component.\n *\n * @category Components\n */\nexport type BoardProps = {\n    /** Enable fullscreen mode (canvas resizes with window) */\n    fullScreen?: boolean;\n    /** Canvas width in pixels */\n    width?: number;\n    /** Canvas height in pixels */\n    height?: number;\n    /** Callback function for drawing on each animation frame */\n    animationCallback?: (\n        timestamp: number,\n        ctx: CanvasRenderingContext2D\n    ) => void;\n    /** Child components that can access the board via hooks */\n    children?: React.ReactNode;\n};\n\n/**\n * Internal Board component that renders the canvas element.\n *\n * @remarks\n * This component must be used within a {@link BoardProvider} to access the board instance.\n * It handles canvas attachment/detachment and integrates the animation loop.\n *\n * @internal\n */\nfunction Board({\n    width,\n    height,\n    fullScreen,\n    animationCallback: animationCallbackProp,\n}: BoardProps) {\n    const board = useBoard();\n\n    useAnimationFrameWithBoard(animationCallbackProp);\n\n    // const {processInputEvent} = useCustomInputHandling();\n\n    // const keyboardMouseInput = useMemo(() => {console.log(\"new KeyboardMouseInput\"); return new KeyboardMouseInput(processInputEvent)}, [processInputEvent]);\n\n    return (\n        <canvas\n            width={width}\n            height={height}\n            ref={ref => {\n                if (ref == null) {\n                    board.tearDown();\n                    return;\n                }\n\n                board.attach(ref);\n            }}\n            // onPointerDown={(e: React.PointerEvent<HTMLCanvasElement>) => keyboardMouseInput.pointerdownHandler(e.nativeEvent)}\n            // onPointerMove={(e: React.PointerEvent<HTMLCanvasElement>) => keyboardMouseInput.pointermoveHandler(e.nativeEvent)}\n            // onPointerUp={(e: React.PointerEvent<HTMLCanvasElement>) => keyboardMouseInput.pointerupHandler(e.nativeEvent)}\n        />\n    );\n}\n\n/**\n * Main Board component with provider wrapper for React applications.\n *\n * @remarks\n * This component provides a complete infinite canvas solution for React. It combines:\n * - A {@link BoardProvider} to share the board instance across components\n * - A canvas element configured with the @ue-too/board package\n * - An integrated animation loop for drawing\n * - Support for child components that can access board state and controls\n *\n * ## Features\n *\n * - **Infinite Canvas**: Pan, zoom, and rotate with mouse/touch input\n * - **Animation Loop**: Automatic rendering loop with customizable draw callback\n * - **React Integration**: Use hooks to access camera state and controls\n * - **Fullscreen Support**: Optional auto-resize with window\n * - **Type-Safe**: Full TypeScript support\n *\n * ## Usage Pattern\n *\n * 1. Render the Board component\n * 2. Provide an animation callback for drawing\n * 3. Use child components with board hooks for UI controls\n * 4. Access camera state reactively via hooks\n *\n * @param props - Component props\n * @param props.width - Canvas width in pixels (default: auto)\n * @param props.height - Canvas height in pixels (default: auto)\n * @param props.fullScreen - Enable fullscreen mode (canvas resizes with window)\n * @param props.animationCallback - Function called on each frame with timestamp and context\n * @param props.children - Child components that can use board hooks\n *\n * @example\n * Basic usage with drawing\n * ```tsx\n * function App() {\n *   return (\n *     <Board\n *       width={800}\n *       height={600}\n *       animationCallback={(timestamp, ctx) => {\n *         // Draw a rectangle at world position (0, 0)\n *         ctx.fillStyle = 'blue';\n *         ctx.fillRect(0, 0, 100, 100);\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @example\n * With child components and camera controls\n * ```tsx\n * function CameraControls() {\n *   const { panToWorld, zoomTo } = useCameraInput();\n *   const position = useBoardCameraState('position');\n *\n *   return (\n *     <div style={{ position: 'absolute', top: 10, left: 10 }}>\n *       <p>Position: ({position.x.toFixed(0)}, {position.y.toFixed(0)})</p>\n *       <button onClick={() => panToWorld({ x: 0, y: 0 })}>Center</button>\n *       <button onClick={() => zoomTo(1.0)}>Reset Zoom</button>\n *     </div>\n *   );\n * }\n *\n * function App() {\n *   return (\n *     <Board width={800} height={600} animationCallback={drawScene}>\n *       <CameraControls />\n *     </Board>\n *   );\n * }\n * ```\n *\n * @example\n * Fullscreen mode\n * ```tsx\n * function App() {\n *   return (\n *     <Board\n *       fullScreen\n *       animationCallback={(timestamp, ctx) => {\n *         // Canvas automatically resizes to window size\n *         ctx.fillStyle = 'green';\n *         ctx.fillRect(-50, -50, 100, 100);\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @category Components\n * @see {@link useBoardCameraState} for accessing camera state\n * @see {@link useCameraInput} for camera control functions\n * @see {@link useBoard} for accessing the board instance\n */\nexport default function BoardWrapperWithChildren({\n    width,\n    height,\n    fullScreen,\n    animationCallback: animationCallbackProp,\n    children,\n}: BoardProps) {\n    return (\n        <BoardProvider>\n            <Board\n                width={width}\n                height={height}\n                fullScreen={fullScreen}\n                animationCallback={animationCallbackProp}\n            />\n            {children}\n        </BoardProvider>\n    );\n}\n\nclass KeyboardMouseInput {\n    private isPanning: boolean;\n    private panStartPoint: Point;\n    private processInputEvent: (input: OutputEvent) => void;\n\n    constructor(processInputEvent: (input: OutputEvent) => void) {\n        this.isPanning = false;\n        this.panStartPoint = { x: 0, y: 0 };\n        this.processInputEvent = processInputEvent;\n        this.bindFunctions();\n    }\n\n    bindFunctions(): void {\n        this.pointerdownHandler = this.pointerdownHandler.bind(this);\n        this.pointermoveHandler = this.pointermoveHandler.bind(this);\n        this.pointerupHandler = this.pointerupHandler.bind(this);\n    }\n\n    pointerdownHandler(event: PointerEvent): void {\n        if (event.pointerType !== 'mouse') {\n            return;\n        }\n        this.isPanning = true;\n        this.panStartPoint = { x: event.clientX, y: event.clientY };\n    }\n\n    pointermoveHandler(event: PointerEvent): void {\n        if (!this.isPanning) {\n            return;\n        }\n        const curPosition = { x: event.clientX, y: event.clientY };\n        const diff = PointCal.subVector(this.panStartPoint, curPosition);\n        this.processInputEvent({\n            type: 'pan',\n            delta: diff,\n        });\n        this.panStartPoint = curPosition;\n    }\n\n    pointerupHandler(event: PointerEvent): void {\n        if (event.pointerType !== 'mouse') {\n            return;\n        }\n        this.isPanning = false;\n    }\n}\n",
+    "import { useCallback, useEffect, useRef } from 'react';\n\nimport { useBoard } from './useBoardify';\n\n/**\n * Hook to run a callback on every animation frame.\n *\n * @remarks\n * This hook uses `requestAnimationFrame` to execute a callback repeatedly for smooth animations.\n * The animation loop starts when the component mounts and stops when it unmounts, automatically\n * cleaning up the animation frame request.\n *\n * **Performance Note**: The callback is called on every frame, so ensure your callback is\n * optimized to avoid performance issues. The callback dependency should be stable to prevent\n * restarting the animation loop unnecessarily.\n *\n * @param callback - Function to call on each animation frame, receives the current timestamp\n *\n * @example\n * ```tsx\n * function AnimatedComponent() {\n *   const [rotation, setRotation] = useState(0);\n *\n *   useAnimationFrame((timestamp) => {\n *     // Rotate 45 degrees per second\n *     setRotation((prev) => prev + (Math.PI / 4) * (1 / 60));\n *   });\n *\n *   return <div style={{ transform: `rotate(${rotation}rad)` }}>Spinning!</div>;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAnimationFrameWithBoard} for board-integrated animation loop\n */\nexport function useAnimationFrame(callback: (timestamp: number) => void) {\n    const animationFrameRef = useRef<number | null>(null);\n\n    useEffect(() => {\n        const step = (timestamp: number) => {\n            callback(timestamp);\n            animationFrameRef.current = requestAnimationFrame(step);\n        };\n\n        // Start the animation loop\n        animationFrameRef.current = requestAnimationFrame(step);\n\n        // Cleanup function\n        return () => {\n            if (animationFrameRef.current) {\n                cancelAnimationFrame(animationFrameRef.current);\n            }\n        };\n    }, [callback]);\n}\n\n/**\n * Hook to run an animation loop integrated with the Board's step function.\n *\n * @remarks\n * This hook automatically calls `board.step(timestamp)` on every frame to update the board's\n * camera transform, then invokes your callback with the timestamp and canvas context.\n * This is the recommended way to implement drawing logic for board-based applications.\n *\n * The hook handles:\n * - Calling `board.step()` to update camera transforms\n * - Providing the canvas context for drawing\n * - Warning if context is not available\n * - Cleaning up the animation loop on unmount\n *\n * **Typical Usage Pattern**:\n * 1. Board calls `step()` to update transforms\n * 2. Your callback draws on the canvas\n * 3. Browser paints the frame\n * 4. Repeat next frame\n *\n * @param callback - Optional function to call after board.step(), receives timestamp and canvas context\n *\n * @example\n * ```tsx\n * function MyBoard() {\n *   useAnimationFrameWithBoard((timestamp, ctx) => {\n *     // Draw a rectangle at world position (0, 0)\n *     ctx.fillStyle = 'red';\n *     ctx.fillRect(0, 0, 100, 100);\n *\n *     // Draw a circle that moves\n *     const x = Math.sin(timestamp / 1000) * 200;\n *     const y = Math.cos(timestamp / 1000) * 200;\n *     ctx.fillStyle = 'blue';\n *     ctx.beginPath();\n *     ctx.arc(x, y, 20, 0, Math.PI * 2);\n *     ctx.fill();\n *   });\n *\n *   return <Board width={800} height={600} />;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAnimationFrame} for generic animation frame hook\n */\nexport function useAnimationFrameWithBoard(\n    callback?: (timestamp: number, ctx: CanvasRenderingContext2D) => void\n) {\n    const board = useBoard();\n\n    const animationCallback = useCallback(\n        (timestamp: number) => {\n            board.step(timestamp);\n            const ctx = board.context;\n            if (ctx == undefined) {\n                console.warn('Canvas context not available');\n                return;\n            }\n            callback?.(timestamp, ctx);\n        },\n        [callback, board]\n    );\n\n    useAnimationFrame(animationCallback);\n}\n",
+    "import {\n    Board as Boardify,\n    KMTEventParser,\n    KmtInputStateMachine,\n    OutputEvent,\n    TouchEventParser,\n} from '@ue-too/board';\nimport { CameraMux, CameraState } from '@ue-too/board/camera';\nimport { Point } from '@ue-too/math';\nimport {\n    createContext,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useSyncExternalStore,\n} from 'react';\n\n/**\n * Maps camera state keys to their corresponding event names.\n * @internal\n */\ntype StateToEventKey<K extends keyof CameraState> = K extends 'position'\n    ? 'pan'\n    : K extends 'zoomLevel'\n      ? 'zoom'\n      : 'rotate';\n\n/**\n * Hook to subscribe to a specific camera state property with automatic re-rendering.\n *\n * @remarks\n * This hook uses React's `useSyncExternalStore` to efficiently subscribe to camera state changes.\n * It only triggers re-renders when the specified property actually changes, and uses caching\n * to maintain referential equality for object values (like position).\n *\n * **Performance**: The hook is optimized to prevent unnecessary re-renders by:\n * - Caching object values (position) to maintain referential equality\n * - Using `useSyncExternalStore` for efficient subscription management\n * - Only subscribing to the specific state property needed\n *\n * @typeParam K - Key of the camera state to subscribe to\n * @param state - The camera state property to track (\"position\", \"rotation\", or \"zoomLevel\")\n * @returns The current value of the specified camera state property\n *\n * @example\n * ```tsx\n * function CameraInfo() {\n *   const position = useBoardCameraState('position');\n *   const rotation = useBoardCameraState('rotation');\n *   const zoomLevel = useBoardCameraState('zoomLevel');\n *\n *   return (\n *     <div>\n *       Position: {position.x}, {position.y}<br/>\n *       Rotation: {rotation}<br/>\n *       Zoom: {zoomLevel}\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useAllBoardCameraState} for subscribing to all camera state at once\n */\nexport function useBoardCameraState<K extends keyof CameraState>(\n    state: K\n): CameraState[K] {\n    const board = useBoard();\n    const stateKey = (\n        state === 'position' ? 'pan' : state === 'zoomLevel' ? 'zoom' : 'rotate'\n    ) as StateToEventKey<K>;\n    const cachedPositionRef = useRef<{ x: number; y: number } | null>(null);\n\n    return useSyncExternalStore(\n        cb => board.camera.on(stateKey, cb),\n        () => {\n            // For position (object), we need to cache to avoid creating new objects\n            if (state === 'position') {\n                const currentPosition = board.camera.position;\n                const cached = cachedPositionRef.current;\n\n                if (\n                    cached &&\n                    cached.x === currentPosition.x &&\n                    cached.y === currentPosition.y\n                ) {\n                    // Return cached snapshot to maintain referential equality\n                    return cached as CameraState[K];\n                }\n\n                // Cache the new position object\n                const newPosition = { ...currentPosition };\n                cachedPositionRef.current = newPosition;\n                return newPosition as CameraState[K];\n            }\n\n            // For primitive values (rotation, zoomLevel), return directly\n            // Object.is works correctly for primitives\n            return board.camera[state] as CameraState[K];\n        }\n    );\n}\n\n/**\n * Hook to get camera control functions for programmatic camera manipulation.\n *\n * @remarks\n * This hook provides a stable set of functions to control the camera programmatically.\n * The functions are memoized and only recreate when the board instance changes.\n *\n * All camera operations go through the camera rig, which enforces boundaries,\n * restrictions, and other constraints configured on the board.\n *\n * @returns Object containing camera control functions:\n * - `panToWorld` - Pan camera to a world position\n * - `panToViewPort` - Pan camera to a viewport position\n * - `zoomTo` - Set camera zoom to specific level\n * - `zoomBy` - Adjust camera zoom by delta\n * - `rotateTo` - Set camera rotation to specific angle\n * - `rotateBy` - Adjust camera rotation by delta\n *\n * @example\n * ```tsx\n * function CameraControls() {\n *   const { panToWorld, zoomTo, rotateTo } = useCameraInput();\n *\n *   return (\n *     <div>\n *       <button onClick={() => panToWorld({ x: 0, y: 0 })}>\n *         Center Camera\n *       </button>\n *       <button onClick={() => zoomTo(1.0)}>\n *         Reset Zoom\n *       </button>\n *       <button onClick={() => rotateTo(0)}>\n *         Reset Rotation\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n */\nexport function useCameraInput() {\n    const board = useBoard();\n\n    const test = useMemo(() => {\n        const cameraRig = board.getCameraRig();\n\n        return {\n            panByViewPort: (delta: Point) => {\n                cameraRig.panByViewPort(delta);\n            },\n            panByWorld: (delta: Point) => {\n                cameraRig.panByWorld(delta);\n            },\n            panToWorld: (worldPosition: Point) => {\n                cameraRig.panToWorld(worldPosition);\n            },\n            panToViewPort: (viewPortPosition: Point) => {\n                cameraRig.panToViewPort(viewPortPosition);\n            },\n            zoomToAtViewPort: (zoomLevel: number, at: Point) => {\n                cameraRig.zoomToAt(zoomLevel, at);\n            },\n            zoomToAtWorld: (zoomLevel: number, at: Point) => {\n                cameraRig.zoomToAtWorld(zoomLevel, at);\n            },\n            zoomTo: (zoomLevel: number) => {\n                cameraRig.zoomTo(zoomLevel);\n            },\n            zoomBy: (zoomDelta: number) => {\n                cameraRig.zoomBy(zoomDelta);\n            },\n            rotateTo: (rotation: number) => {\n                cameraRig.rotateTo(rotation);\n            },\n            rotateBy: (rotationDelta: number) => {\n                cameraRig.rotateBy(rotationDelta);\n            },\n        };\n    }, [board]);\n\n    return test;\n}\n\n/**\n * Hook to subscribe to all camera state properties with automatic re-rendering.\n *\n * @remarks\n * This hook provides a snapshot of all camera state (position, rotation, zoomLevel) and\n * re-renders only when any of these values change. It's more efficient than using multiple\n * {@link useBoardCameraState} calls when you need all state properties.\n *\n * **Performance**: The hook uses snapshot caching to maintain referential equality when\n * values haven't changed, preventing unnecessary re-renders in child components.\n *\n * @returns Object containing:\n * - `position` - Current camera position {x, y}\n * - `rotation` - Current camera rotation in radians\n * - `zoomLevel` - Current camera zoom level\n *\n * @example\n * ```tsx\n * function CameraStateDisplay() {\n *   const { position, rotation, zoomLevel } = useAllBoardCameraState();\n *\n *   return (\n *     <div>\n *       <h3>Camera State</h3>\n *       <p>Position: ({position.x.toFixed(2)}, {position.y.toFixed(2)})</p>\n *       <p>Rotation: {rotation.toFixed(2)} rad</p>\n *       <p>Zoom: {zoomLevel.toFixed(2)}x</p>\n *     </div>\n *   );\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useBoardCameraState} for subscribing to individual state properties\n */\nexport function useAllBoardCameraState() {\n    const board = useBoard();\n    const cachedSnapshotRef = useRef<{\n        position: { x: number; y: number };\n        rotation: number;\n        zoomLevel: number;\n    } | null>(null);\n\n    return useSyncExternalStore(\n        cb => {\n            return board.camera.on('all', cb);\n        },\n        () => {\n            const currentPosition = board.camera.position;\n            const currentRotation = board.camera.rotation;\n            const currentZoomLevel = board.camera.zoomLevel;\n\n            // Check if values actually changed\n            const cached = cachedSnapshotRef.current;\n            if (\n                cached &&\n                cached.position.x === currentPosition.x &&\n                cached.position.y === currentPosition.y &&\n                cached.rotation === currentRotation &&\n                cached.zoomLevel === currentZoomLevel\n            ) {\n                // Return cached snapshot to maintain referential equality\n                return cached;\n            }\n\n            // Create new snapshot only when values changed\n            const newSnapshot = {\n                position: { ...currentPosition },\n                rotation: currentRotation,\n                zoomLevel: currentZoomLevel,\n            };\n            cachedSnapshotRef.current = newSnapshot;\n            return newSnapshot;\n        }\n    );\n}\n\n/**\n * Hook to set a custom camera multiplexer on the board.\n *\n * @remarks\n * This hook allows you to replace the board's default camera mux with a custom implementation.\n * Useful when you need custom input coordination, animation control, or state-based input blocking.\n *\n * The camera mux is updated whenever the provided `cameraMux` instance changes.\n *\n * @param cameraMux - Custom camera mux implementation to use\n *\n * @example\n * ```tsx\n * function CustomMuxBoard() {\n *   const myCustomMux = useMemo(() => {\n *     return createCameraMuxWithAnimationAndLock(camera);\n *   }, []);\n *\n *   useCustomCameraMux(myCustomMux);\n *\n *   return <Board />;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link CameraMux} from @ue-too/board for camera mux interface\n */\nexport function useCustomCameraMux(cameraMux: CameraMux) {\n    const board = useBoard();\n\n    useEffect(() => {\n        board.cameraMux = cameraMux;\n    }, [cameraMux, board]);\n}\n\n/**\n * The custom input handling logic is before everything else. To use this hook, you would need to handle the event from the canvas and pass down the result to the `processInputEvent` function.\n * @returns Object containing the `processInputEvent` function\n * @example\n * ```typescript\n * const { processInputEvent } = useCustomInputHandling();\n *\n * const handlePointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {\n *   // custom logic to determine the user input\n *\n *   // if the user input is valid, pass it to the `processInputEvent` function\n *   // e.g. pass the pan event down the input handling system\n *   processInputEvent({\n *     type: \"pan\",\n *     delta: {\n *       x: 10,\n *       y: 10,\n *     },\n *   });\n * }\n * ```\n */\nexport function useCustomInputHandling() {\n    const board = useBoard();\n\n    const processInputEvent = useCallback(\n        (input: OutputEvent) => {\n            board.inputOrchestrator.processInputEvent(input);\n        },\n        [board]\n    );\n\n    useEffect(() => {\n        board.disableEventListeners();\n\n        return () => {\n            board.enableEventListeners();\n        };\n    }, [board]);\n\n    return {\n        processInputEvent,\n    };\n}\n\n/**\n * React context for sharing a Board instance across components.\n * @internal\n */\nconst BoardContext = createContext<Boardify | null>(null);\n\n/**\n * Provider component for sharing a Board instance across the component tree.\n *\n * @remarks\n * This component creates a single Board instance and makes it available to all child\n * components via the {@link useBoard} hook. This is the recommended way to use the\n * board in React applications when you need to access it from multiple components.\n *\n * The board instance is created once when the provider mounts and persists for the\n * lifetime of the provider.\n *\n * @param props - Component props\n * @param props.children - Child components that will have access to the board\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <BoardProvider>\n *       <Board width={800} height={600} />\n *       <CameraControls />\n *       <CameraStateDisplay />\n *     </BoardProvider>\n *   );\n * }\n * ```\n *\n * @category Components\n * @see {@link useBoard} for accessing the board instance\n */\nexport function BoardProvider({ children }: { children: React.ReactNode }) {\n    const board = useMemo(() => new Boardify(), []);\n    return (\n        <BoardContext.Provider value={board}>{children}</BoardContext.Provider>\n    );\n}\n\n/**\n * Hook to access the Board instance from context.\n *\n * @remarks\n * This hook retrieves the Board instance provided by {@link BoardProvider}.\n * It must be used within a component that is a descendant of BoardProvider,\n * otherwise it will throw an error.\n *\n * @returns The Board instance from context\n * @throws Error if used outside of BoardProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const board = useBoard();\n *\n *   useEffect(() => {\n *     // Configure board\n *     board.camera.boundaries = { min: { x: -1000, y: -1000 }, max: { x: 1000, y: 1000 } };\n *   }, [board]);\n *\n *   return <div>Board ready</div>;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link BoardProvider} for providing the board instance\n */\nexport function useBoard() {\n    const board = useContext(BoardContext);\n    if (board == null) {\n        throw new Error('Board Provider not found');\n    }\n    return board;\n}\n\n/**\n * Hook to access the camera instance from the Board context.\n *\n * @remarks\n * This is a convenience hook that returns the camera from the board instance.\n * Equivalent to calling `useBoard().camera` but more concise.\n *\n * @returns The camera instance from the board\n * @throws Error if used outside of BoardProvider\n *\n * @example\n * ```tsx\n * function CameraConfig() {\n *   const camera = useBoardCamera();\n *\n *   useEffect(() => {\n *     camera.setMinZoomLevel(0.5);\n *     camera.setMaxZoomLevel(4.0);\n *   }, [camera]);\n *\n *   return null;\n * }\n * ```\n *\n * @category Hooks\n * @see {@link useBoard} for accessing the full board instance\n */\nexport function useBoardCamera() {\n    const board = useBoard();\n    return board.camera;\n}\n\nexport function useCanvasDimension() {\n    const board = useBoard();\n\n    return useSyncExternalStore(\n        cb => board.onCanvasDimensionChange(cb),\n        () => {\n            return board.canvasDimensions;\n        }\n    );\n}\n\nexport function useCoordinateConversion() {\n    const board = useBoard();\n    return useCallback(\n        (pointInWindow: Point) => {\n            return board.convertWindowPoint2WorldCoord(pointInWindow);\n        },\n        [board]\n    );\n}\n\nexport function useCustomKMTEventParser(eventParser: KMTEventParser) {\n    const board = useBoard();\n\n    useEffect(() => {\n        board.kmtParser = eventParser;\n    }, [eventParser, board]);\n}\n\nexport function useCustomTouchEventParser(eventParser: TouchEventParser) {\n    const board = useBoard();\n\n    useEffect(() => {\n        board.touchParser = eventParser;\n    }, [eventParser, board]);\n}\n",
+    "import { CanvasProxy } from '@ue-too/board';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport function useCanvasProxy() {\n    const [canvasProxy, _] = useState(() => new CanvasProxy());\n\n    return canvasProxy;\n}\n\nexport function useCanvasProxyWithRef() {\n    const canvasProxy = useCanvasProxy();\n    const refCallback = useCallback(\n        (canvas: HTMLCanvasElement | null) => {\n            if (canvas == null) {\n                canvasProxy.tearDown();\n                return;\n            }\n            canvasProxy.attach(canvas);\n        },\n        [canvasProxy]\n    );\n\n    return {\n        canvasProxy,\n        refCallback,\n    };\n}\n"
   ],
-  "mappings": "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",
-  "debugId": "6B2CEE4C23D45A0964756E2164756E21",
+  "mappings": "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",
+  "debugId": "E2568A6219EBF3E864756E2164756E21",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ue-too/board-react-adapter",
   "type": "module",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/ue-too/ue-too.git"
@@ -23,8 +23,8 @@
   "types": "./index.d.ts",
   "module": "./index.js",
   "dependencies": {
-    "@ue-too/board": "^0.14.1",
-    "@ue-too/math": "^0.14.1"
+    "@ue-too/board": "^0.15.0",
+    "@ue-too/math": "^0.15.0"
   },
   "peerDependencies": {
     "react": "^19.0.1",