feat(canvas): add synchronized in-canvas overlays

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to `@mathnotes/mobile-ink` will be documented here.
 
+## [0.3.4] - 2026-08-15
+
+- Added the optional `overlay` prop to `InfiniteInkCanvas`. Host applications
+  can render React overlays inside the UI-thread transformed viewport, keeping
+  inserted images, text boxes, and other page content synchronized with ink
+  during panning and zooming.
+
 ## [0.3.3] - 2026-08-14
 
 - Prevented software-keyboard viewport resizes from being treated as orientation changes.

docs/api.md

@@ -27,6 +27,9 @@ High-level continuous notebook component.
 - `pageWidth` / `pageHeight`: logical page size.
 - `minScale` / `maxScale`: viewport zoom bounds.
 - `showPageLabels`: whether the generic example-style page number labels render.
+- `overlay`: optional app-owned React content rendered inside the UI-thread
+  transformed viewport. Use this for images, text boxes, or other overlays
+  that must stay synchronized with ink during panning and zooming.
 - `onDrawingChange(pageId)`: called when a page becomes dirty.
 - `onCurrentPageChange(pageIndex)`: called when the settled/current page changes.
 - `onPagesChange(pages)`: called when page growth or trimming changes the page array.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathnotes/mobile-ink",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Production-grade React Native ink engine with native Skia drawing and continuous canvas primitives.",
   "license": "Apache-2.0",
   "author": "BuilderPro LLC",

src/InfiniteInkCanvas.tsx

@@ -107,6 +107,7 @@ function InfiniteInkCanvasImpl(
     maxScale = 5,
     contentPadding = DEFAULT_CONTENT_PADDING,
     showPageLabels = true,
+    overlay,
     onReady,
     onDrawingChange,
     onSelectionChange,
@@ -670,6 +671,7 @@ function InfiniteInkCanvasImpl(
               shouldCaptureBeforeReassign={shouldCaptureBeforeReassign}
               onSlotCaptureBeforeUnmount={updatePageData}
             />
+            {overlay}
             <PageBreaks pages={pages} pageHeight={pageHeight} />
           </View>
         </View>

src/infinite-ink-canvas/types.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 import type { ContinuousEnginePoolToolState } from "../ContinuousEnginePool";
 import type {
@@ -54,6 +55,12 @@ export type InfiniteInkCanvasProps = {
   maxScale?: number;
   contentPadding?: number;
   showPageLabels?: boolean;
+  /**
+   * Optional app-owned content rendered inside the UI-thread transformed
+   * viewport. Use this for overlays that must stay synchronized with ink
+   * while the canvas pans or zooms.
+   */
+  overlay?: ReactNode;
   onReady?: () => void;
   onDrawingChange?: (pageId: string) => void;
   onSelectionChange?: (