From 62d680056708965218153a44e39a514a51997b49 Mon Sep 17 00:00:00 2001
From: Amani <tambweamani@gmail.com>
Date: Sat, 15 Aug 2026 16:46:15 -0500
Subject: [PATCH 1/2] fix(editor): synchronize overlays with canvas scrolling

---
 app/note/[id].tsx                      | 37 ++++++++++----------
 package.json                           |  2 +-
 src/components/editor/OverlayLayer.tsx | 47 +++++++++-----------------
 3 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/app/note/[id].tsx b/app/note/[id].tsx
index f75f641..46f1c49 100644
--- a/app/note/[id].tsx
+++ b/app/note/[id].tsx
@@ -793,26 +793,27 @@ export default function NoteScreen() {
           onCurrentPageChange={handleCurrentPageChange}
           onPagesChange={handlePagesChange}
           onPencilDoubleTap={handlePencilDoubleTap}
+          overlay={
+            <OverlayLayer
+              store={store}
+              pages={pagesForOverlay}
+              pageWidth={PAGE_WIDTH}
+              pageHeight={PAGE_HEIGHT}
+              activeTool={toolState.toolType as ToolDescriptor['type']}
+              activeColor={toolState.color}
+              selection={selection}
+              onSelectionChange={setSelection}
+              onCreateTextBox={handleCreateTextBox}
+              onUpdateTextBox={handleUpdateTextBox}
+              onRemoveTextBox={handleRemoveTextBox}
+              onUpdateInsertedElement={handleUpdateInsertedElement}
+              onDuplicateInsertedElement={handleDuplicateInsertedElement}
+              onRemoveInsertedElement={handleRemoveInsertedElement}
+              onCreateTextBoxId={textBoxId}
+            />
+          }
           onTransformChange={handleTransform}
         />
-
-        <OverlayLayer
-          store={store}
-          pages={pagesForOverlay}
-          pageWidth={PAGE_WIDTH}
-          pageHeight={PAGE_HEIGHT}
-          activeTool={toolState.toolType as ToolDescriptor['type']}
-          activeColor={toolState.color}
-          selection={selection}
-          onSelectionChange={setSelection}
-          onCreateTextBox={handleCreateTextBox}
-          onUpdateTextBox={handleUpdateTextBox}
-          onRemoveTextBox={handleRemoveTextBox}
-          onUpdateInsertedElement={handleUpdateInsertedElement}
-          onDuplicateInsertedElement={handleDuplicateInsertedElement}
-          onRemoveInsertedElement={handleRemoveInsertedElement}
-          onCreateTextBoxId={textBoxId}
-        />
       </KeyboardAvoidingView>
 
       <FloatingToolbar
diff --git a/package.json b/package.json
index 75a2697..c4bc5d6 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
-    "@mathnotes/mobile-ink": "0.3.3",
+    "@mathnotes/mobile-ink": "0.3.4",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@shopify/react-native-skia": "2.2.12",
     "expo": "54.0.34",
diff --git a/src/components/editor/OverlayLayer.tsx b/src/components/editor/OverlayLayer.tsx
index 0ecc8e5..6d36621 100644
--- a/src/components/editor/OverlayLayer.tsx
+++ b/src/components/editor/OverlayLayer.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   GestureResponderEvent,
   Keyboard,
@@ -15,10 +15,7 @@ import type {
 import { TextBoxOverlay } from './TextBoxOverlay';
 import { ImageInsertOverlay } from './ImageInsertOverlay';
 import type { ViewportTransformStore } from '../../hooks/useViewportTransform';
-import {
-  pageRectFromTransform,
-  screenToPageCoord,
-} from '../../hooks/useViewportTransform';
+import { screenToPageCoord } from '../../hooks/useViewportTransform';
 import type { SupportedTool } from '../../utils/toolPalette';
 
 const CONTENT_PADDING = 16;
@@ -70,19 +67,22 @@ export function OverlayLayer({
   onRemoveInsertedElement,
   onCreateTextBoxId,
 }: OverlayLayerProps) {
-  const [transform, setTransform] = useState<InfiniteInkViewportTransform | null>(
-    () => store.getSnapshot(),
-  );
+  const transformRef = useRef<InfiniteInkViewportTransform | null>(store.getSnapshot());
+  const [hasTransform, setHasTransform] = useState(() => transformRef.current !== null);
 
   useEffect(() => {
     const unsub = store.subscribe(() => {
-      setTransform(store.getSnapshot());
+      const next = store.getSnapshot();
+      if (!next) return;
+      transformRef.current = next;
+      setHasTransform(true);
     });
     return unsub;
   }, [store]);
 
   const handleTextToolTap = useCallback(
     (event: GestureResponderEvent) => {
+      const transform = transformRef.current;
       if (!transform || activeTool !== 'text') return;
       const { locationX, locationY } = event.nativeEvent;
       const coord = screenToPageCoord(
@@ -122,7 +122,6 @@ export function OverlayLayer({
       pageHeight,
       pageWidth,
       pages.length,
-      transform,
     ],
   );
 
@@ -140,7 +139,7 @@ export function OverlayLayer({
     [activeTool, handleTextToolTap, onSelectionChange, selection],
   );
 
-  if (!transform) {
+  if (!hasTransform) {
     return null;
   }
 
@@ -159,20 +158,6 @@ export function OverlayLayer({
       ) : null}
 
       {pages.map((page, pageIndex) => {
-        const rect = pageRectFromTransform(
-          transform,
-          pageIndex,
-          pageWidth,
-          pageHeight,
-          CONTENT_PADDING,
-          PAGE_GAP,
-        );
-        if (
-          rect.screenY + rect.height < -200 ||
-          rect.screenY > transform.containerHeight + 200
-        ) {
-          return null;
-        }
         const textBoxes = page.textBoxes ?? [];
         const elements = [...(page.insertedElements ?? [])].sort(
           (a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0),
@@ -184,10 +169,10 @@ export function OverlayLayer({
             style={[
               styles.pageHost,
               {
-                left: rect.screenX,
-                top: rect.screenY,
-                width: rect.width,
-                height: rect.height,
+                left: 0,
+                top: pageIndex * (pageHeight + PAGE_GAP),
+                width: pageWidth,
+                height: pageHeight,
               },
             ]}
           >
@@ -204,7 +189,7 @@ export function OverlayLayer({
                 <ImageInsertOverlay
                   key={el.id}
                   element={el}
-                  pageScale={rect.scale}
+                  pageScale={transformRef.current?.scale ?? 1}
                   screenLeft={0}
                   screenTop={0}
                   pageWidth={pageWidth}
@@ -250,7 +235,7 @@ export function OverlayLayer({
                 <TextBoxOverlay
                   key={tb.id}
                   textBox={tb}
-                  pageScale={rect.scale}
+                  pageScale={transformRef.current?.scale ?? 1}
                   screenLeft={0}
                   screenTop={0}
                   pageWidth={pageWidth}

From 31121f1dc6275bd4bbe4fff74c8adce15912d7ac Mon Sep 17 00:00:00 2001
From: Amani <tambweamani@gmail.com>
Date: Sat, 15 Aug 2026 16:58:21 -0500
Subject: [PATCH 2/2] fix(deps): lock mobile ink 0.3.4

---
 package-lock.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0e49ca8..60af6d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@expo/vector-icons": "^15.0.3",
-        "@mathnotes/mobile-ink": "0.3.3",
+        "@mathnotes/mobile-ink": "0.3.4",
         "@react-native-async-storage/async-storage": "2.2.0",
         "@shopify/react-native-skia": "2.2.12",
         "expo": "54.0.34",
@@ -2564,9 +2564,9 @@
       }
     },
     "node_modules/@mathnotes/mobile-ink": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@mathnotes/mobile-ink/-/mobile-ink-0.3.3.tgz",
-      "integrity": "sha512-xVmfoEV7B7EJ29xVvWzWNpipeQktythLNFKo4cd8PzXp3gLPzpeMk2WgKCrv0mqMitWxB9sdeAvDLnktieGE6A==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@mathnotes/mobile-ink/-/mobile-ink-0.3.4.tgz",
+      "integrity": "sha512-3PqHlAekzEwcytOJ/59wJcCDenb9HCkeNANS3sK4/jkamlt7DQrskxmqVKOGZJnhPklaKlBqekjv18K2F8cgpg==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "@shopify/react-native-skia": ">=2.0.0",