Merge pull request #112 from cloakyard/dev

Merge dev into main: editor fixes + dependency updates

Author: sumitsahoo

package.json

@@ -17,12 +17,12 @@
   "dependencies": {
     "@huggingface/transformers": "^4.2.0",
     "@langchain/community": "^1.1.29",
-    "@langchain/core": "^1.1.49",
-    "@langchain/langgraph": "^1.4.2",
-    "@llamaindex/liteparse-wasm": "^2.0.8",
+    "@langchain/core": "^1.2.0",
+    "@langchain/langgraph": "^1.4.4",
+    "@llamaindex/liteparse-wasm": "^2.1.0",
     "@pdfme/pdf-lib": "^6.1.6",
     "jszip": "^3.10.1",
-    "lucide-react": "^1.20.0",
+    "lucide-react": "^1.21.0",
     "motion": "^12.40.0",
     "node-forge": "^1.4.0",
     "ogl": "^1.0.11",

pnpm-lock.yaml

@@ -177,6 +177,9 @@ export function EditorProvider({
   // in, post-redesign) so the no-doc fallback never flashes before loadFile runs.
   const [loading, setLoading] = useState(initialFile != null);
   const [busyLabel, setBusyLabel] = useState<string | null>(null);
+  // Synchronous in-flight flag for runBusy's re-entry lock (busyLabel is async
+  // state and updates a frame late, too slow to block a fast second invocation).
+  const busyRef = useRef(false);
   const [error, setError] = useState<string | null>(null);
   // The dropped PDF turned out to be password-protected — pdf-lib/PDF.js can't
   // parse it, so we surface the PDF Password tool instead of a raw load error.
@@ -257,6 +260,17 @@ export function EditorProvider({
       fn: (setLabel: (label: string) => void) => void | Promise<void>,
     ): Promise<void> => {
       return new Promise<void>((resolve, reject) => {
+        // Re-entry lock: every byte transform (Apply) and background task funnels
+        // through here, all branching off docRef.current. A second op started
+        // before the first resolves would race on the same base and the last
+        // commit would silently drop the other's edit. The busy overlay blocks
+        // most double-clicks, but not the 2-rAF window below nor tools that don't
+        // read busyLabel — so guard synchronously. Re-entrant calls no-op.
+        if (busyRef.current) {
+          resolve();
+          return;
+        }
+        busyRef.current = true;
         setError(null); // clear any stale error from a prior operation
         setBusyLabel(label);
         requestAnimationFrame(() => {
@@ -276,6 +290,7 @@ export function EditorProvider({
               setError(e instanceof Error ? e.message : "Something went wrong. Please try again.");
               reject(e);
             } finally {
+              busyRef.current = false;
               setBusyLabel(null);
             }
           });
@@ -357,6 +372,10 @@ export function EditorProvider({
   /** Commit a new doc state to history and make it live. */
   const commitDoc = useCallback((next: CanvasDoc, label: string) => {
     setDoc(next);
+    // A transform can shrink the page count (delete / extract / split) below the
+    // focused index; clamp it so the stage doesn't land on a missing page and
+    // render blank.
+    setSelectedPageState((p) => Math.min(p, Math.max(0, next.pageCount - 1)));
     historyRef.current.push({
       label,
       bytes: next.bytes,
@@ -381,6 +400,7 @@ export function EditorProvider({
     const cur = docRef.current;
     if (!entry || !cur) return;
     setDoc({ ...cur, bytes: entry.bytes, pages: entry.pages, objects: entry.objects });
+    setSelectedPageState((p) => Math.min(p, Math.max(0, entry.pages.length - 1)));
     setHistoryVersion((v) => v + 1);
   }, []);
 
@@ -410,6 +430,7 @@ export function EditorProvider({
     const cur = docRef.current;
     if (!base || !cur) return;
     setDoc({ ...cur, bytes: base.bytes, pages: base.pages, objects: base.objects });
+    setSelectedPageState((p) => Math.min(p, Math.max(0, base.pages.length - 1)));
     toolCheckpointRef.current = historyRef.current.index();
     setHistoryVersion((v) => v + 1);
   }, []);

src/editor/EditorContext.tsx

@@ -40,6 +40,43 @@ function measureInlineWidth(text: string, font: string): number {
   return _measureCtx.measureText(text).width;
 }
 
+/** Decode a page's preview thumbnail into an offscreen canvas so the overlay
+ *  painters can sample its pixels (Smart-Erase paints a true fill / mosaic
+ *  preview from it). Re-decodes when the URL changes (page switch, re-render);
+ *  willReadFrequently because the erase preview reads it back with getImageData.
+ *  Same-origin blob: URL, so the canvas is never tainted. */
+function usePageBitmap(thumbUrl: string | null | undefined): HTMLCanvasElement | null {
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
+  useEffect(() => {
+    // Drop the prior page's bitmap up front so a sampler (erase preview) never
+    // reads the wrong page during the async decode; it falls back to the
+    // placeholder for the frame or two until the new page decodes.
+    setCanvas(null);
+    if (!thumbUrl) return;
+    let cancelled = false;
+    const img = new Image();
+    img.decoding = "async";
+    img.onload = () => {
+      if (cancelled) return;
+      const c = document.createElement("canvas");
+      c.width = img.naturalWidth;
+      c.height = img.naturalHeight;
+      const ctx = c.getContext("2d", { willReadFrequently: true });
+      if (!ctx) return;
+      ctx.drawImage(img, 0, 0);
+      setCanvas(c);
+    };
+    img.onerror = () => {
+      if (!cancelled) setCanvas(null);
+    };
+    img.src = thumbUrl;
+    return () => {
+      cancelled = true;
+    };
+  }, [thumbUrl]);
+  return canvas;
+}
+
 /** Coarse-pointer (touch) primary input — phones/tablets, where the fit-to-screen
  *  page renders small and the OS soft keyboard is in play. `pointer: coarse` is
  *  true only when the PRIMARY input is touch (a touchscreen laptop with a
@@ -279,6 +316,9 @@ export function PdfStage() {
   );
 
   const page = doc?.pages[selectedPage] ?? null;
+  // Decoded raster of the focused page — fed to the overlay painters so erase
+  // marks render as a true fill / mosaic preview rather than a flat placeholder.
+  const pageBitmap = usePageBitmap(page?.thumbUrl);
 
   // Fit-contain: size the page box to the largest rect with the page's exact
   // aspect ratio that fits the available area — never stretches, in either
@@ -334,9 +374,9 @@ export function PdfStage() {
     // Always-on base layer: the pending destructive marks (redaction / erase),
     // so they stay visible no matter which tool is active — they aren't burned
     // into the page until export. The active tool's overlay paints on top.
-    paintDestructiveMarks(ctx, width, height, selectedPage, doc?.objects ?? []);
-    stageProps.paintOverlay?.(ctx, width, height, selectedPage);
-  }, [stageProps, selectedPage, doc?.objects]);
+    paintDestructiveMarks(ctx, width, height, selectedPage, doc?.objects ?? [], pageBitmap);
+    stageProps.paintOverlay?.(ctx, width, height, selectedPage, pageBitmap);
+  }, [stageProps, selectedPage, doc?.objects, pageBitmap]);
 
   // Always call the freshest repaint without re-subscribing the observer.
   const repaintRef = useRef(repaint);