@ue-too/board-react-adapter 0.10.0

package/README.md

@@ -0,0 +1,496 @@
+# @ue-too/board-react-adapter
+
+React adapter for the @ue-too/board infinite canvas library.
+
+[![npm version](https://img.shields.io/npm/v/@ue-too/board-react-adapter.svg)](https://www.npmjs.com/package/@ue-too/board-react-adapter)
+[![license](https://img.shields.io/npm/l/@ue-too/board-react-adapter.svg)](https://github.com/ue-too/ue-too/blob/main/LICENSE.txt)
+
+## Overview
+
+`@ue-too/board-react-adapter` provides React components and hooks to integrate the `@ue-too/board` infinite canvas into React applications. It handles lifecycle management, state synchronization, and provides idiomatic React patterns for working with the board.
+
+### Key Features
+
+- **React Components**: `<Board>` component with full lifecycle management
+- **State Synchronization**: Camera state changes trigger React re-renders
+- **Performance Optimized**: Uses `useSyncExternalStore` for efficient subscriptions
+- **Type-Safe Hooks**: Full TypeScript support with type inference
+- **Context-Based**: Share board instance across component tree
+- **Animation Integration**: Hooks for animation loops integrated with board
+- **Camera Controls**: Idiomatic React hooks for pan, zoom, and rotation
+
+## 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
+
+## Quick Start
+
+Here's a simple example creating an infinite canvas with React:
+
+```tsx
+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);
+      }}
+    />
+  );
+}
+```
+
+## Core APIs
+
+### Board Component
+
+Main component that renders the canvas and manages the board instance.
+
+```tsx
+<Board
+  width={number}
+  height={number}
+  animationCallback={(timestamp, ctx, camera) => void}
+  // Optional props
+  className?={string}
+  style?={React.CSSProperties}
+/>
+```
+
+**Props:**
+- `width`: Canvas width in pixels
+- `height`: Canvas height in pixels
+- `animationCallback`: Function called on each frame with timestamp, context, and camera
+- `className`: CSS class name for the canvas element
+- `style`: Inline styles for the canvas element
+
+**Children:**
+The component supports children, which will have access to the board via context.
+
+```tsx
+<Board width={800} height={600}>
+  <Controls />
+  <StatusDisplay />
+</Board>
+```
+
+### State Hooks
+
+#### `useBoardCameraState(key)`
+
+Subscribe to a specific camera state property.
+
+```tsx
+function useBoardCameraState<K extends keyof CameraState>(
+  key: K
+): CameraState[K];
+```
+
+**Example:**
+```tsx
+function CameraPosition() {
+  const position = useBoardCameraState('position');
+
+  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
+
+#### `useAllBoardCameraState()`
+
+Subscribe to all camera state at once.
+
+```tsx
+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>
+  );
+}
+```
+
+#### `useBoard()`
+
+Access the board instance from context.
+
+```tsx
+function useBoard(): BoardType | null;
+```
+
+#### `useBoard Camera()`
+
+Access the camera instance from context.
+
+```tsx
+function useBoardCamera(): Camera | null;
+```
+
+### Control Hooks
+
+#### `useCameraInput()`
+
+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;
+};
+```
+
+**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>
+  );
+}
+```
+
+#### `useCustomCameraMux(customMux)`
+
+Set a custom camera multiplexer for advanced camera control.
+
+```tsx
+function useCustomCameraMux(
+  customMux: CameraMux | undefined
+): void;
+```
+
+#### `useBoardify(width, height, animationCallback)`
+
+Create a standalone board instance without using the provider pattern.
+
+```tsx
+function useBoardify(
+  width: number,
+  height: number,
+  animationCallback: AnimationCallback
+): {
+  canvas: HTMLCanvasElement | null;
+  board: BoardType | null;
+};
+```
+
+### Animation Hooks
+
+#### `useAnimationFrame(callback)`
+
+Generic animation frame hook.
+
+```tsx
+function useAnimationFrame(
+  callback: (timestamp: number) => void
+): void;
+```
+
+**Example:**
+```tsx
+function AnimatedComponent() {
+  const [rotation, setRotation] = useState(0);
+
+  useAnimationFrame((timestamp) => {
+    setRotation(timestamp * 0.001); // Rotate based on time
+  });
+
+  return <div style={{ transform: `rotate(${rotation}rad)` }}>Spinning</div>;
+}
+```
+
+#### `useAnimationFrameWithBoard(callback)`
+
+Animation loop integrated with `board.step()`.
+
+```tsx
+function useAnimationFrameWithBoard(
+  callback: (timestamp: number, ctx: CanvasRenderingContext2D, camera: Camera) => void
+): void;
+```
+
+## Common Use Cases
+
+### Basic Canvas with Pan and Zoom
+
+```tsx
+import Board, { useCameraInput, useBoardCameraState } 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>
+  );
+}
+
+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>
+  );
+}
+```
+
+### Interactive Drawing
+
+```tsx
+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();
+        });
+      }}
+    />
+  );
+}
+```
+
+### Animated Scene
+
+```tsx
+import Board, { useAnimationFrameWithBoard } from '@ue-too/board-react-adapter';
+import { useState } from 'react';
+
+function AnimatedScene() {
+  const [time, setTime] = useState(0);
+
+  useAnimationFrameWithBoard((timestamp, ctx, camera) => {
+    setTime(timestamp * 0.001);
+
+    // 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();
+  });
+
+  return null; // No UI, just updates
+}
+
+function App() {
+  return (
+    <Board width={800} height={600}>
+      <AnimatedScene />
+    </Board>
+  );
+}
+```
+
+### Camera Controls with Buttons
+
+```tsx
+import Board, { useCameraInput, useBoardCameraState } 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>
+  );
+}
+
+function App() {
+  return (
+    <Board width={800} height={600}>
+      <CameraControls />
+    </Board>
+  );
+}
+```
+
+### With Custom Animation Loop
+
+```tsx
+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} />;
+}
+```
+
+## API Reference
+
+For complete API documentation with detailed type information, see the [TypeDoc-generated documentation](../../docs/board-react-adapter).
+
+## TypeScript Support
+
+This package is written in TypeScript with complete type definitions:
+
+```tsx
+import Board, {
+  useBoardCameraState,
+  useCameraInput,
+  type CameraState,
+  type AnimationCallback
+} from '@ue-too/board-react-adapter';
+
+// State is fully typed
+const position: Point = useBoardCameraState('position');
+const zoom: number = useBoardCameraState('zoomLevel');
+
+// Functions are type-safe
+const { panToWorld }: { panToWorld: (position: Point) => void } = useCameraInput();
+
+// Callbacks are typed
+const callback: AnimationCallback = (timestamp, ctx, camera) => {
+  // All parameters are properly typed
+};
+```
+
+## Design Philosophy
+
+This adapter follows these principles:
+
+- **React Idiomatic**: Uses hooks, context, and component patterns
+- **Performance First**: Optimized state subscriptions with `useSyncExternalStore`
+- **Type Safety**: Full TypeScript support throughout
+- **Minimal API Surface**: Simple, focused hooks and components
+- **Flexible**: Supports both provider and standalone patterns
+
+## Performance Considerations
+
+- **State Subscriptions**: Use specific state hooks (`useBoardCameraState('position')`) instead of `useAllBoardCameraState()` to minimize re-renders
+- **Animation Callbacks**: Keep animation callbacks pure and avoid heavy computations
+- **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
+- Use the board's built-in coordinate transformation instead of manual calculations
+
+## Related Packages
+
+- **[@ue-too/board](../board)**: The core infinite canvas library
+- **[@ue-too/math](../math)**: Vector operations for point calculations
+- **[@ue-too/animate](../animate)**: Animation system for canvas objects
+
+## License
+
+MIT
+
+## Repository
+
+[https://github.com/ue-too/ue-too](https://github.com/ue-too/ue-too)

package/components/Board.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Props for the Board component.
+ *
+ * @category Components
+ */
+export type BoardProps = {
+    /** Enable fullscreen mode (canvas resizes with window) */
+    fullScreen?: boolean;
+    /** Canvas width in pixels */
+    width?: number;
+    /** Canvas height in pixels */
+    height?: number;
+    /** Callback function for drawing on each animation frame */
+    animationCallback?: (timestamp: number, ctx: CanvasRenderingContext2D) => void;
+    /** Child components that can access the board via hooks */
+    children?: React.ReactNode;
+};
+/**
+ * Main Board component with provider wrapper for React applications.
+ *
+ * @remarks
+ * This component provides a complete infinite canvas solution for React. It combines:
+ * - A {@link BoardProvider} to share the board instance across components
+ * - A canvas element configured with the @ue-too/board package
+ * - An integrated animation loop for drawing
+ * - Support for child components that can access board state and controls
+ *
+ * ## Features
+ *
+ * - **Infinite Canvas**: Pan, zoom, and rotate with mouse/touch input
+ * - **Animation Loop**: Automatic rendering loop with customizable draw callback
+ * - **React Integration**: Use hooks to access camera state and controls
+ * - **Fullscreen Support**: Optional auto-resize with window
+ * - **Type-Safe**: Full TypeScript support
+ *
+ * ## Usage Pattern
+ *
+ * 1. Render the Board component
+ * 2. Provide an animation callback for drawing
+ * 3. Use child components with board hooks for UI controls
+ * 4. Access camera state reactively via hooks
+ *
+ * @param props - Component props
+ * @param props.width - Canvas width in pixels (default: auto)
+ * @param props.height - Canvas height in pixels (default: auto)
+ * @param props.fullScreen - Enable fullscreen mode (canvas resizes with window)
+ * @param props.animationCallback - Function called on each frame with timestamp and context
+ * @param props.children - Child components that can use board hooks
+ *
+ * @example
+ * Basic usage with drawing
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <Board
+ *       width={800}
+ *       height={600}
+ *       animationCallback={(timestamp, ctx) => {
+ *         // Draw a rectangle at world position (0, 0)
+ *         ctx.fillStyle = 'blue';
+ *         ctx.fillRect(0, 0, 100, 100);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * With child components and camera controls
+ * ```tsx
+ * function CameraControls() {
+ *   const { panToWorld, zoomTo } = useCameraInput();
+ *   const position = useBoardCameraState('position');
+ *
+ *   return (
+ *     <div style={{ position: 'absolute', top: 10, left: 10 }}>
+ *       <p>Position: ({position.x.toFixed(0)}, {position.y.toFixed(0)})</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={drawScene}>
+ *       <CameraControls />
+ *     </Board>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Fullscreen mode
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <Board
+ *       fullScreen
+ *       animationCallback={(timestamp, ctx) => {
+ *         // Canvas automatically resizes to window size
+ *         ctx.fillStyle = 'green';
+ *         ctx.fillRect(-50, -50, 100, 100);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @category Components
+ * @see {@link useBoardCameraState} for accessing camera state
+ * @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;

package/components/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Components module for @ue-too/board-react-adapter.
+ *
+ * @remarks
+ * This module exports React components for rendering the infinite canvas.
+ *
+ * @module
+ */
+export * from "./Board";
+export { default as Board } from "./Board";

package/hooks/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hooks module for @ue-too/board-react-adapter.
+ *
+ * @remarks
+ * This module exports all React hooks for working with the board:
+ * - State hooks for subscribing to camera changes
+ * - Control hooks for manipulating the camera
+ * - Animation hooks for rendering loops
+ * - Context hooks for accessing the board instance
+ *
+ * @module
+ */
+export * from "./useAnimationFrame";
+export * from "./useBoardify";

package/hooks/useAnimationFrame.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Hook to run a callback on every animation frame.
+ *
+ * @remarks
+ * This hook uses `requestAnimationFrame` to execute a callback repeatedly for smooth animations.
+ * The animation loop starts when the component mounts and stops when it unmounts, automatically
+ * cleaning up the animation frame request.
+ *
+ * **Performance Note**: The callback is called on every frame, so ensure your callback is
+ * optimized to avoid performance issues. The callback dependency should be stable to prevent
+ * restarting the animation loop unnecessarily.
+ *
+ * @param callback - Function to call on each animation frame, receives the current timestamp
+ *
+ * @example
+ * ```tsx
+ * function AnimatedComponent() {
+ *   const [rotation, setRotation] = useState(0);
+ *
+ *   useAnimationFrame((timestamp) => {
+ *     // Rotate 45 degrees per second
+ *     setRotation((prev) => prev + (Math.PI / 4) * (1 / 60));
+ *   });
+ *
+ *   return <div style={{ transform: `rotate(${rotation}rad)` }}>Spinning!</div>;
+ * }
+ * ```
+ *
+ * @category Hooks
+ * @see {@link useAnimationFrameWithBoard} for board-integrated animation loop
+ */
+export declare function useAnimationFrame(callback: (timestamp: number) => void): void;
+/**
+ * Hook to run an animation loop integrated with the Board's step function.
+ *
+ * @remarks
+ * This hook automatically calls `board.step(timestamp)` on every frame to update the board's
+ * camera transform, then invokes your callback with the timestamp and canvas context.
+ * This is the recommended way to implement drawing logic for board-based applications.
+ *
+ * The hook handles:
+ * - Calling `board.step()` to update camera transforms
+ * - Providing the canvas context for drawing
+ * - Warning if context is not available
+ * - Cleaning up the animation loop on unmount
+ *
+ * **Typical Usage Pattern**:
+ * 1. Board calls `step()` to update transforms
+ * 2. Your callback draws on the canvas
+ * 3. Browser paints the frame
+ * 4. Repeat next frame
+ *
+ * @param callback - Optional function to call after board.step(), receives timestamp and canvas context
+ *
+ * @example
+ * ```tsx
+ * function MyBoard() {
+ *   useAnimationFrameWithBoard((timestamp, ctx) => {
+ *     // Draw a rectangle at world position (0, 0)
+ *     ctx.fillStyle = 'red';
+ *     ctx.fillRect(0, 0, 100, 100);
+ *
+ *     // Draw a circle that moves
+ *     const x = Math.sin(timestamp / 1000) * 200;
+ *     const y = Math.cos(timestamp / 1000) * 200;
+ *     ctx.fillStyle = 'blue';
+ *     ctx.beginPath();
+ *     ctx.arc(x, y, 20, 0, Math.PI * 2);
+ *     ctx.fill();
+ *   });
+ *
+ *   return <Board width={800} height={600} />;
+ * }
+ * ```
+ *
+ * @category Hooks
+ * @see {@link useAnimationFrame} for generic animation frame hook
+ */
+export declare function useAnimationFrameWithBoard(callback?: (timestamp: number, ctx: CanvasRenderingContext2D) => void): void;

package/hooks/useBoardify.d.ts

@@ -0,0 +1,289 @@
+import { Board as Boardify } from "@ue-too/board";
+import { CameraMux, CameraState } from "@ue-too/board/camera";
+import { Point } from "@ue-too/math";
+/**
+ * Hook to create and manage a Board instance.
+ *
+ * @remarks
+ * This hook creates a stable Board instance that persists across re-renders.
+ * The board is created once and stored in a ref, making it suitable for use
+ * in React components without recreating the board on every render.
+ *
+ * **Important**: This hook creates an independent board instance. If you need
+ * to share a board across multiple components, use {@link BoardProvider} and
+ * {@link useBoard} instead.
+ *
+ * @param fullScreen - Whether the board should be in fullscreen mode (resizes with window)
+ * @returns Object containing the board instance and a subscribe function
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { board, subscribe } = useBoardify(true);
+ *
+ *   useEffect(() => {
+ *     // Subscribe to camera pan events
+ *     const unsubscribe = subscribe(() => {
+ *       console.log('Camera panned');
+ *     });
+ *     return unsubscribe;
+ *   }, [subscribe]);
+ *
+ *   return <canvas ref={(ref) => ref && board.attach(ref)} />;
+ * }
+ * ```
+ *
+ * @category Hooks
+ */
+export declare function useBoardify(fullScreen?: boolean): {
+    board: Boardify;
+    subscribe: (callback: () => void) => import("@ue-too/board").UnSubscribe;
+};
+/**
+ * Hook to subscribe to a specific camera state property with automatic re-rendering.
+ *
+ * @remarks
+ * This hook uses React's `useSyncExternalStore` to efficiently subscribe to camera state changes.
+ * It only triggers re-renders when the specified property actually changes, and uses caching
+ * to maintain referential equality for object values (like position).
+ *
+ * **Performance**: The hook is optimized to prevent unnecessary re-renders by:
+ * - Caching object values (position) to maintain referential equality
+ * - Using `useSyncExternalStore` for efficient subscription management
+ * - Only subscribing to the specific state property needed
+ *
+ * @typeParam K - Key of the camera state to subscribe to
+ * @param state - The camera state property to track ("position", "rotation", or "zoomLevel")
+ * @returns The current value of the specified camera state property
+ *
+ * @example
+ * ```tsx
+ * function CameraInfo() {
+ *   const position = useBoardCameraState('position');
+ *   const rotation = useBoardCameraState('rotation');
+ *   const zoomLevel = useBoardCameraState('zoomLevel');
+ *
+ *   return (
+ *     <div>
+ *       Position: {position.x}, {position.y}<br/>
+ *       Rotation: {rotation}<br/>
+ *       Zoom: {zoomLevel}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @category Hooks
+ * @see {@link useAllBoardCameraState} for subscribing to all camera state at once
+ */
+export declare function useBoardCameraState<K extends keyof CameraState>(state: K): CameraState[K];
+/**
+ * Hook to get camera control functions for programmatic camera manipulation.
+ *
+ * @remarks
+ * This hook provides a stable set of functions to control the camera programmatically.
+ * The functions are memoized and only recreate when the board instance changes.
+ *
+ * All camera operations go through the camera rig, which enforces boundaries,
+ * restrictions, and other constraints configured on the board.
+ *
+ * @returns Object containing camera control functions:
+ * - `panToWorld` - Pan camera to a world position
+ * - `panToViewPort` - Pan camera to a viewport position
+ * - `zoomTo` - Set camera zoom to specific level
+ * - `zoomBy` - Adjust camera zoom by delta
+ * - `rotateTo` - Set camera rotation to specific angle
+ * - `rotateBy` - Adjust camera rotation by delta
+ *
+ * @example
+ * ```tsx
+ * function CameraControls() {
+ *   const { panToWorld, zoomTo, rotateTo } = useCameraInput();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => panToWorld({ x: 0, y: 0 })}>
+ *         Center Camera
+ *       </button>
+ *       <button onClick={() => zoomTo(1.0)}>
+ *         Reset Zoom
+ *       </button>
+ *       <button onClick={() => rotateTo(0)}>
+ *         Reset Rotation
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @category Hooks
+ */
+export declare function useCameraInput(): {
+    panToWorld: (worldPosition: Point) => void;
+    panToViewPort: (viewPortPosition: Point) => void;
+    zoomTo: (zoomLevel: number) => void;
+    zoomBy: (zoomDelta: number) => void;
+    rotateTo: (rotation: number) => void;
+    rotateBy: (rotationDelta: number) => void;
+};
+/**
+ * Hook to subscribe to all camera state properties with automatic re-rendering.
+ *
+ * @remarks
+ * This hook provides a snapshot of all camera state (position, rotation, zoomLevel) and
+ * re-renders only when any of these values change. It's more efficient than using multiple
+ * {@link useBoardCameraState} calls when you need all state properties.
+ *
+ * **Performance**: The hook uses snapshot caching to maintain referential equality when
+ * values haven't changed, preventing unnecessary re-renders in child components.
+ *
+ * @returns Object containing:
+ * - `position` - Current camera position {x, y}
+ * - `rotation` - Current camera rotation in radians
+ * - `zoomLevel` - Current camera zoom level
+ *
+ * @example
+ * ```tsx
+ * function CameraStateDisplay() {
+ *   const { position, rotation, zoomLevel } = useAllBoardCameraState();
+ *
+ *   return (
+ *     <div>
+ *       <h3>Camera State</h3>
+ *       <p>Position: ({position.x.toFixed(2)}, {position.y.toFixed(2)})</p>
+ *       <p>Rotation: {rotation.toFixed(2)} rad</p>
+ *       <p>Zoom: {zoomLevel.toFixed(2)}x</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @category Hooks
+ * @see {@link useBoardCameraState} for subscribing to individual state properties
+ */
+export declare function useAllBoardCameraState(): {
+    position: {
+        x: number;
+        y: number;
+    };
+    rotation: number;
+    zoomLevel: number;
+};
+/**
+ * Hook to set a custom camera multiplexer on the board.
+ *
+ * @remarks
+ * This hook allows you to replace the board's default camera mux with a custom implementation.
+ * Useful when you need custom input coordination, animation control, or state-based input blocking.
+ *
+ * The camera mux is updated whenever the provided `cameraMux` instance changes.
+ *
+ * @param cameraMux - Custom camera mux implementation to use
+ *
+ * @example
+ * ```tsx
+ * function CustomMuxBoard() {
+ *   const myCustomMux = useMemo(() => {
+ *     return createCameraMuxWithAnimationAndLock(camera);
+ *   }, []);
+ *
+ *   useCustomCameraMux(myCustomMux);
+ *
+ *   return <Board />;
+ * }
+ * ```
+ *
+ * @category Hooks
+ * @see {@link CameraMux} from @ue-too/board for camera mux interface
+ */
+export declare function useCustomCameraMux(cameraMux: CameraMux): void;
+/**
+ * Provider component for sharing a Board instance across the component tree.
+ *
+ * @remarks
+ * This component creates a single Board instance and makes it available to all child
+ * components via the {@link useBoard} hook. This is the recommended way to use the
+ * board in React applications when you need to access it from multiple components.
+ *
+ * The board instance is created once when the provider mounts and persists for the
+ * lifetime of the provider.
+ *
+ * @param props - Component props
+ * @param props.children - Child components that will have access to the board
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <BoardProvider>
+ *       <Board width={800} height={600} />
+ *       <CameraControls />
+ *       <CameraStateDisplay />
+ *     </BoardProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @category Components
+ * @see {@link useBoard} for accessing the board instance
+ */
+export declare function BoardProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the Board instance from context.
+ *
+ * @remarks
+ * This hook retrieves the Board instance provided by {@link BoardProvider}.
+ * It must be used within a component that is a descendant of BoardProvider,
+ * otherwise it will throw an error.
+ *
+ * @returns The Board instance from context
+ * @throws Error if used outside of BoardProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const board = useBoard();
+ *
+ *   useEffect(() => {
+ *     // Configure board
+ *     board.camera.boundaries = { min: { x: -1000, y: -1000 }, max: { x: 1000, y: 1000 } };
+ *   }, [board]);
+ *
+ *   return <div>Board ready</div>;
+ * }
+ * ```
+ *
+ * @category Hooks
+ * @see {@link BoardProvider} for providing the board instance
+ */
+export declare function useBoard(): Boardify;
+/**
+ * Hook to access the camera instance from the Board context.
+ *
+ * @remarks
+ * This is a convenience hook that returns the camera from the board instance.
+ * Equivalent to calling `useBoard().camera` but more concise.
+ *
+ * @returns The camera instance from the board
+ * @throws Error if used outside of BoardProvider
+ *
+ * @example
+ * ```tsx
+ * function CameraConfig() {
+ *   const camera = useBoardCamera();
+ *
+ *   useEffect(() => {
+ *     camera.setMinZoomLevel(0.5);
+ *     camera.setMaxZoomLevel(4.0);
+ *   }, [camera]);
+ *
+ *   return null;
+ * }
+ * ```
+ *
+ * @category Hooks
+ * @see {@link useBoard} for accessing the full board instance
+ */
+export declare function useBoardCamera(): import("@ue-too/board").ObservableBoardCamera;

package/index.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @packageDocumentation
+ * React adapter for the @ue-too/board infinite canvas library.
+ *
+ * @remarks
+ * This package provides React components and hooks to integrate the @ue-too/board
+ * infinite canvas into React applications. It handles lifecycle management, state
+ * synchronization, and provides idiomatic React patterns for working with the board.
+ *
+ * ## Core Components
+ *
+ * - **{@link Board}**: Main component that renders the canvas and manages the board instance
+ * - **{@link BoardProvider}**: Context provider for sharing board across components
+ *
+ * ## State Hooks
+ *
+ * - **{@link useBoardCameraState}**: Subscribe to specific camera state (position, rotation, zoomLevel)
+ * - **{@link useAllBoardCameraState}**: Subscribe to all camera state at once
+ * - **{@link useBoard}**: Access the board instance from context
+ * - **{@link useBoardCamera}**: Access the camera instance from context
+ *
+ * ## Control Hooks
+ *
+ * - **{@link useCameraInput}**: Get camera control functions (pan, zoom, rotate)
+ * - **{@link useCustomCameraMux}**: Set a custom camera multiplexer
+ * - **{@link useBoardify}**: Create a standalone board instance (alternative to provider)
+ *
+ * ## Animation Hooks
+ *
+ * - **{@link useAnimationFrame}**: Generic animation frame hook
+ * - **{@link useAnimationFrameWithBoard}**: Animation loop integrated with board.step()
+ *
+ * ## Key Features
+ *
+ * - **Automatic State Sync**: Camera state changes trigger React re-renders
+ * - **Performance Optimized**: Uses `useSyncExternalStore` for efficient subscriptions
+ * - **Type-Safe**: Full TypeScript support with type inference
+ * - **Context-Based**: Share board instance across component tree
+ * - **Lifecycle Management**: Automatic cleanup and resource management
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * import Board from '@ue-too/board-react-adapter';
+ *
+ * function App() {
+ *   return (
+ *     <Board
+ *       width={800}
+ *       height={600}
+ *       animationCallback={(timestamp, ctx) => {
+ *         ctx.fillStyle = 'blue';
+ *         ctx.fillRect(0, 0, 100, 100);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * With camera controls
+ * ```tsx
+ * import Board, {
+ *   useBoardCameraState,
+ *   useCameraInput
+ * } from '@ue-too/board-react-adapter';
+ *
+ * function Controls() {
+ *   const position = useBoardCameraState('position');
+ *   const { panToWorld, zoomTo } = useCameraInput();
+ *
+ *   return (
+ *     <div>
+ *       <p>Position: {position.x}, {position.y}</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}>
+ *       <Controls />
+ *     </Board>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link Board} for the main component
+ */
+export * from "./components/Board";
+export * from "./hooks";

package/index.js

@@ -0,0 +1,3 @@
+import{useCallback as L,useEffect as T,useRef as j}from"react";import{Board as q}from"@ue-too/board";import{createContext as I,useContext as U,useEffect as O,useMemo as Y,useRef as $,useSyncExternalStore as A}from"react";import{jsxDEV as Z}from"react/jsx-dev-runtime";function C(G=!1){let H=$(new q);return O(()=>{H.current.fullScreen=G},[G]),{board:H.current,subscribe:(K)=>{if(H.current==null)return()=>{};return H.current.on("pan",(J,N)=>{K()})}}}function E(G){let H=X(),K=G==="position"?"pan":G==="zoomLevel"?"zoom":"rotate",J=$(null);return A((N)=>H.camera.on(K,N),()=>{if(G==="position"){let N=H.camera.position,Q=J.current;if(Q&&Q.x===N.x&&Q.y===N.y)return Q;let _={...N};return J.current=_,_}return H.camera[G]})}function F(){let G=X();return Y(()=>{let K=G.getCameraRig();return{panToWorld:(J)=>{K.panToWorld(J)},panToViewPort:(J)=>{K.panToViewPort(J)},zoomTo:(J)=>{K.zoomTo(J)},zoomBy:(J)=>{K.zoomBy(J)},rotateTo:(J)=>{K.rotateTo(J)},rotateBy:(J)=>{K.rotateBy(J)}}},[G])}function y(){let G=X(),H=$(null);return A((K)=>{return G.camera.on("all",K)},()=>{let K=G.camera.position,J=G.camera.rotation,N=G.camera.zoomLevel,Q=H.current;if(Q&&Q.position.x===K.x&&Q.position.y===K.y&&Q.rotation===J&&Q.zoomLevel===N)return Q;let _={position:{...K},rotation:J,zoomLevel:N};return H.current=_,_})}function k(G){let H=X();O(()=>{H.cameraMux=G},[G])}var W=I(null);function V({children:G}){let H=Y(()=>new q,[]);return Z(W.Provider,{value:H,children:G},void 0,!1,void 0,this)}function X(){let G=U(W);if(G==null)throw Error("Board Provider not found");return G}function B(){return X().camera}function z(G){let H=j(null);T(()=>{let K=(J)=>{G(J),H.current=requestAnimationFrame(K)};return H.current=requestAnimationFrame(K),()=>{if(H.current)cancelAnimationFrame(H.current)}},[G])}function D(G){let H=X(),K=L((J)=>{H.step(J);let N=H.context;if(N==null){console.warn("Canvas context not available");return}G?.(J,N)},[G,H]);z(K)}import{jsxDEV as d}from"react/jsx-dev-runtime";export{k as useCustomCameraMux,F as useCameraInput,C as useBoardify,E as useBoardCameraState,B as useBoardCamera,X as useBoard,D as useAnimationFrameWithBoard,z as useAnimationFrame,y as useAllBoardCameraState,V as BoardProvider};
+
+//# debugId=E0E749EB72A2F9E564756E2164756E21

package/index.js.map

@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": ["../src/hooks/useAnimationFrame.ts", "../src/hooks/useBoardify.tsx"],
+  "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} from \"@ue-too/board\";\nimport {createContext, 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 create and manage a Board instance.\n *\n * @remarks\n * This hook creates a stable Board instance that persists across re-renders.\n * The board is created once and stored in a ref, making it suitable for use\n * in React components without recreating the board on every render.\n *\n * **Important**: This hook creates an independent board instance. If you need\n * to share a board across multiple components, use {@link BoardProvider} and\n * {@link useBoard} instead.\n *\n * @param fullScreen - Whether the board should be in fullscreen mode (resizes with window)\n * @returns Object containing the board instance and a subscribe function\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { board, subscribe } = useBoardify(true);\n *\n *   useEffect(() => {\n *     // Subscribe to camera pan events\n *     const unsubscribe = subscribe(() => {\n *       console.log('Camera panned');\n *     });\n *     return unsubscribe;\n *   }, [subscribe]);\n *\n *   return <canvas ref={(ref) => ref && board.attach(ref)} />;\n * }\n * ```\n *\n * @category Hooks\n */\nexport function useBoardify(fullScreen: boolean = false) {\n\n    const boardRef = useRef<Boardify>(new Boardify());\n\n    useEffect(() => {\n        boardRef.current.fullScreen = fullScreen;\n    }, [fullScreen]);\n\n    return {\n        board: boardRef.current,\n        subscribe: (callback: () => void) => {\n            if (boardRef.current == null) {\n                return () => {};\n            }\n            return boardRef.current.on(\"pan\", (_event, _data) => {\n                callback();\n            });\n        }\n    }\n}\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            panToWorld: (worldPosition: Point) => {\n                cameraRig.panToWorld(worldPosition);\n            },\n            panToViewPort: (viewPortPosition: Point) => {\n                cameraRig.panToViewPort(viewPortPosition);\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]);\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"
+  ],
+  "mappings": "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",
+  "debugId": "E0E749EB72A2F9E564756E2164756E21",
+  "names": []
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@ue-too/board-react-adapter",
+  "type": "module",
+  "version": "0.10.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ue-too/ue-too.git"
+  },
+  "homepage": "https://github.com/ue-too/ue-too",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "module": "./index.js",
+  "dependencies": {
+    "@ue-too/board": "^0.10.0",
+    "@ue-too/math": "^0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1"
+  },
+  "devDependencies": {
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1"
+  }
+}