canvu-react 0.4.75 → 0.4.77

package/dist/react.js

@@ -1186,342 +1186,6 @@ async function createThumbnailBlobUrlFromStore(store, thumbnailBlobId) {
   return URL.createObjectURL(blob);
 }
 
-// src/image/pdf-worker-renderer.ts
-var PDF_WORKER_SOURCE = `
-let pdfjsPromise = null;
-
-const loadPdfJs = async (pdfjsModuleCandidates) => {
-	if (!pdfjsPromise) {
-		pdfjsPromise = (async () => {
-			let lastError;
-			for (const candidate of pdfjsModuleCandidates) {
-				try {
-					const pdfjs = await import(candidate.moduleUrl);
-					if (pdfjs.GlobalWorkerOptions) {
-						pdfjs.GlobalWorkerOptions.workerSrc = candidate.workerUrl;
-					}
-					return pdfjs;
-				} catch (error) {
-					lastError = error;
-				}
-			}
-			throw lastError ?? new Error("Unable to load pdfjs-dist");
-		})();
-	}
-	return await pdfjsPromise;
-};
-
-const createErrorPayload = (error) => ({
-	message: error instanceof Error ? error.message : String(error),
-	name: error instanceof Error ? error.name : "Error",
-	stack: error instanceof Error ? error.stack : undefined,
-});
-
-const normalizePdfPageNumbers = (pageNumbers, pageCount) => {
-	if (!Array.isArray(pageNumbers) || pageNumbers.length === 0) {
-		return Array.from({ length: pageCount }, (_, index) => index + 1);
-	}
-	return [...new Set(pageNumbers)]
-		.filter((pageNumber) => pageNumber >= 1 && pageNumber <= pageCount)
-		.sort((left, right) => left - right);
-};
-
-const runWithConcurrency = async (items, concurrency, execute) => {
-	const results = new Array(items.length);
-	let nextIndex = 0;
-	const safeConcurrency = Number.isFinite(concurrency) && concurrency > 0
-		? Math.round(concurrency)
-		: 1;
-	const workerCount = Math.max(1, Math.min(safeConcurrency, items.length));
-	await Promise.all(
-		Array.from({ length: workerCount }, async () => {
-			while (nextIndex < items.length) {
-				const currentIndex = nextIndex;
-				nextIndex += 1;
-				const item = items[currentIndex];
-				if (item === undefined) {
-					continue;
-				}
-				results[currentIndex] = await execute(item);
-			}
-		}),
-	);
-	return results;
-};
-
-const renderPageToBlob = async (page, scale, storeThumbnails) => {
-	const raw = page.getViewport({ scale: 1 });
-	const adjustedScale = Math.round(raw.width * scale) / raw.width;
-	const viewport = page.getViewport({ scale: adjustedScale });
-	const width = Math.round(viewport.width);
-	const height = Math.round(viewport.height);
-	const canvas = new OffscreenCanvas(width, height);
-	const canvasContext = canvas.getContext("2d");
-	if (!canvasContext) {
-		throw new Error("OffscreenCanvas 2D context unavailable");
-	}
-	canvasContext.imageSmoothingEnabled = true;
-	canvasContext.imageSmoothingQuality = "high";
-	await page.render({ canvasContext, viewport }).promise;
-	const blob = await canvas.convertToBlob({ type: "image/png" });
-	let thumbnailBlob;
-	if (storeThumbnails) {
-		const thumbScale = Math.min(1, 256 / Math.max(width, height));
-		const thumbnailWidth = Math.max(1, Math.round(width * thumbScale));
-		const thumbnailHeight = Math.max(1, Math.round(height * thumbScale));
-		const thumbnailCanvas = new OffscreenCanvas(thumbnailWidth, thumbnailHeight);
-		const thumbnailContext = thumbnailCanvas.getContext("2d");
-		if (thumbnailContext) {
-			thumbnailContext.imageSmoothingEnabled = true;
-			thumbnailContext.imageSmoothingQuality = "high";
-			thumbnailContext.drawImage(canvas, 0, 0, thumbnailWidth, thumbnailHeight);
-		}
-		thumbnailBlob = await thumbnailCanvas.convertToBlob({ type: "image/png" });
-	}
-	return { blob, height, thumbnailBlob, width };
-};
-
-self.onmessage = async (event) => {
-	const message = event.data;
-	if (!message || message.type !== "render") {
-		return;
-	}
-	try {
-		const pdfjs = await loadPdfJs(message.pdfjsModuleCandidates);
-		const pdf = await pdfjs.getDocument({
-			data: new Uint8Array(message.pdfData),
-			disableWorker: true,
-		}).promise;
-		try {
-			const pageNumbers = normalizePdfPageNumbers(message.pageNumbers, pdf.numPages);
-			const bufferedPages = new Map();
-			let nextEmitIndex = 0;
-			let emitChain = Promise.resolve();
-			const emitPageInOrder = async (pageNumber, renderedPage) => {
-				bufferedPages.set(pageNumber, renderedPage);
-				const flush = () => {
-					while (nextEmitIndex < pageNumbers.length) {
-						const nextPageNumber = pageNumbers[nextEmitIndex];
-						if (nextPageNumber == null) break;
-						const nextPage = bufferedPages.get(nextPageNumber);
-						if (!nextPage) break;
-						bufferedPages.delete(nextPageNumber);
-						nextEmitIndex += 1;
-						self.postMessage({
-							type: "page",
-							page: {
-								...nextPage,
-								pageNumber: nextPageNumber,
-							},
-						});
-					}
-				};
-				const nextChain = emitChain.then(flush, flush);
-				emitChain = nextChain.catch(() => {});
-				await nextChain;
-			};
-			await runWithConcurrency(
-				pageNumbers,
-				message.pageConcurrency,
-				async (pageNumber) => {
-					const page = await pdf.getPage(pageNumber);
-					try {
-						const renderedPage = await renderPageToBlob(
-							page,
-							message.scale,
-							message.storeThumbnails,
-						);
-						await emitPageInOrder(pageNumber, renderedPage);
-					} finally {
-						page.cleanup();
-					}
-				},
-			);
-			await emitChain;
-		} finally {
-			await pdf.destroy();
-		}
-		self.postMessage({ type: "done" });
-	} catch (error) {
-		self.postMessage({ type: "error", error: createErrorPayload(error) });
-	}
-};
-`;
-var isRecord = (value) => typeof value === "object" && value !== null;
-var hasObjectMembers = (value) => (typeof value === "object" || typeof value === "function") && value !== null;
-var isOffscreenCanvasCandidate = (value) => typeof value === "function";
-var getEnvironmentRecord = (environment) => isRecord(environment) ? environment : null;
-var canUsePdfWorkerRenderer = (environment = globalThis) => {
-  const candidateEnvironment = getEnvironmentRecord(environment);
-  if (!candidateEnvironment) return false;
-  if (typeof candidateEnvironment.Worker !== "function") return false;
-  if (typeof candidateEnvironment.Blob !== "function") return false;
-  if (!isOffscreenCanvasCandidate(candidateEnvironment.OffscreenCanvas)) {
-    return false;
-  }
-  const urlCandidate = candidateEnvironment.URL;
-  if (!hasObjectMembers(urlCandidate)) return false;
-  if (typeof urlCandidate.createObjectURL !== "function") return false;
-  if (typeof urlCandidate.revokeObjectURL !== "function") return false;
-  try {
-    const canvas = new candidateEnvironment.OffscreenCanvas(1, 1);
-    return typeof canvas.getContext === "function" && typeof canvas.convertToBlob === "function";
-  } catch {
-    return false;
-  }
-};
-var createAbortError = () => new DOMException("Aborted", "AbortError");
-var throwIfAborted = (signal) => {
-  if (signal?.aborted) {
-    throw createAbortError();
-  }
-};
-var createPdfWorker = () => {
-  const workerBlob = new Blob([PDF_WORKER_SOURCE], {
-    type: "text/javascript"
-  });
-  const workerUrl = URL.createObjectURL(workerBlob);
-  try {
-    const worker = new Worker(workerUrl, {
-      name: "canvu-pdf-renderer",
-      type: "module"
-    });
-    return {
-      release: () => URL.revokeObjectURL(workerUrl),
-      worker
-    };
-  } catch (error) {
-    URL.revokeObjectURL(workerUrl);
-    throw error;
-  }
-};
-var createWorkerError = (message) => {
-  const error = new Error(message.error.message);
-  error.name = message.error.name;
-  error.stack = message.error.stack;
-  return error;
-};
-var PACKAGED_PDFJS_MODULE_FILE = "./pdf.mjs";
-var PACKAGED_PDFJS_WORKER_FILE = "./pdf.worker.mjs";
-var resolveRelativeAssetUrl = (path, baseUrl) => new URL(path, baseUrl).toString();
-var resolvePackagedPdfJsModuleCandidate = (baseUrl = import.meta.url) => ({
-  moduleUrl: resolveRelativeAssetUrl(PACKAGED_PDFJS_MODULE_FILE, baseUrl),
-  workerUrl: resolveRelativeAssetUrl(PACKAGED_PDFJS_WORKER_FILE, baseUrl)
-});
-var resolveBundledPdfJsModuleCandidate = () => ({
-  moduleUrl: new URL("pdfjs-dist/build/pdf.min.mjs", import.meta.url).toString(),
-  workerUrl: new URL(
-    "pdfjs-dist/build/pdf.worker.min.mjs",
-    import.meta.url
-  ).toString()
-});
-var resolvePdfJsModuleCandidates = () => [
-  resolvePackagedPdfJsModuleCandidate(),
-  resolveBundledPdfJsModuleCandidate()
-];
-var loadPdfToStoreWithWorker = async (file, store, options) => {
-  throwIfAborted(options.signal);
-  const arrayBuffer = await file.arrayBuffer();
-  throwIfAborted(options.signal);
-  return await new Promise((resolve, reject) => {
-    const { release, worker } = createPdfWorker();
-    const pageResults = [];
-    let storeChain = Promise.resolve();
-    let cleanedUp = false;
-    let settled = false;
-    const cleanup = () => {
-      if (cleanedUp) return;
-      cleanedUp = true;
-      options.signal?.removeEventListener("abort", abortWorker);
-      worker.onmessage = null;
-      worker.onerror = null;
-      worker.terminate();
-      release();
-    };
-    const rejectOnce = (error) => {
-      if (settled) return;
-      settled = true;
-      cleanup();
-      reject(error);
-    };
-    const rejectAfterQueuedStores = (error) => {
-      if (settled) return;
-      cleanup();
-      storeChain.then(() => {
-        if (settled) return;
-        settled = true;
-        reject(error);
-      }).catch(rejectOnce);
-    };
-    function abortWorker() {
-      rejectOnce(createAbortError());
-    }
-    const storePage = (message) => {
-      try {
-        options.onPageReceived?.({ pageNumber: message.page.pageNumber });
-      } catch (error) {
-        rejectOnce(error);
-        return;
-      }
-      storeChain = storeChain.then(async () => {
-        throwIfAborted(options.signal);
-        const blobId = await store.storeOriginal(message.page.blob);
-        throwIfAborted(options.signal);
-        const thumbnailBlobId = options.storeThumbnails && message.page.thumbnailBlob ? await store.storeThumbnail(message.page.thumbnailBlob) : "";
-        throwIfAborted(options.signal);
-        const pageResult = {
-          blobId,
-          height: message.page.height,
-          pageNumber: message.page.pageNumber,
-          thumbnailBlobId,
-          width: message.page.width
-        };
-        pageResults.push(pageResult);
-        await options.onPageStored?.(pageResult);
-        throwIfAborted(options.signal);
-      });
-      void storeChain.catch(rejectOnce);
-    };
-    worker.onmessage = (event) => {
-      const message = event.data;
-      if (message.type === "page") {
-        storePage(message);
-        return;
-      }
-      if (message.type === "error") {
-        rejectAfterQueuedStores(createWorkerError(message));
-        return;
-      }
-      storeChain.then(() => {
-        if (settled) return;
-        settled = true;
-        cleanup();
-        resolve(pageResults);
-      }).catch(rejectOnce);
-    };
-    worker.onerror = (event) => {
-      rejectAfterQueuedStores(event.error ?? new Error(event.message));
-    };
-    options.signal?.addEventListener("abort", abortWorker, { once: true });
-    try {
-      worker.postMessage(
-        {
-          pdfData: arrayBuffer,
-          pdfjsModuleCandidates: resolvePdfJsModuleCandidates(),
-          pageNumbers: options.pageNumbers ? [...options.pageNumbers] : void 0,
-          pageConcurrency: options.pageConcurrency,
-          scale: options.scale,
-          storeThumbnails: options.storeThumbnails,
-          type: "render"
-        },
-        [arrayBuffer]
-      );
-    } catch (error) {
-      rejectOnce(error);
-    }
-  });
-};
-
 // src/image/pdf-loader.ts
 var pdfjsPromise = null;
 function getPdfJs() {
@@ -1538,7 +1202,7 @@ function getPdfJs() {
   return pdfjsPromise;
 }
 async function renderPageToCanvas(page, scale, signal) {
-  throwIfAborted2(signal);
+  throwIfAborted(signal);
   const raw = page.getViewport({ scale: 1 });
   const adjustedScale = Math.round(raw.width * scale) / raw.width;
   const viewport = page.getViewport({ scale: adjustedScale });
@@ -1560,7 +1224,7 @@ async function renderPageToCanvas(page, scale, signal) {
     try {
       await renderTask.promise;
     } catch (error) {
-      if (signal.aborted) throw createAbortError2();
+      if (signal.aborted) throw createAbortError();
       throw error;
     } finally {
       signal.removeEventListener("abort", abortRender);
@@ -1568,15 +1232,15 @@ async function renderPageToCanvas(page, scale, signal) {
   } else {
     await renderTask.promise;
   }
-  throwIfAborted2(signal);
+  throwIfAborted(signal);
   return { canvas, width: w, height: h };
 }
-function createAbortError2() {
+function createAbortError() {
   return new DOMException("Aborted", "AbortError");
 }
-function throwIfAborted2(signal) {
+function throwIfAborted(signal) {
   if (signal?.aborted) {
-    throw createAbortError2();
+    throw createAbortError();
   }
 }
 function normalizePdfPageNumbers(pageNumbers, pageCount) {
@@ -1592,7 +1256,7 @@ async function runWithConcurrency(items, concurrency, execute, signal) {
   await Promise.all(
     Array.from({ length: workerCount }, async () => {
       while (nextIndex < items.length) {
-        throwIfAborted2(signal);
+        throwIfAborted(signal);
         const currentIndex = nextIndex;
         nextIndex += 1;
         const item = items[currentIndex];
@@ -1600,7 +1264,7 @@ async function runWithConcurrency(items, concurrency, execute, signal) {
           continue;
         }
         results[currentIndex] = await execute(item);
-        throwIfAborted2(signal);
+        throwIfAborted(signal);
       }
     })
   );
@@ -1611,52 +1275,11 @@ async function loadPdfToStore(file, store, options) {
   const pageConcurrency = options?.pageConcurrency ?? 2;
   const storeThumbnails = options?.storeThumbnails ?? false;
   const signal = options?.signal;
-  throwIfAborted2(signal);
-  if (canUsePdfWorkerRenderer()) {
-    let workerPageCount = 0;
-    try {
-      return await loadPdfToStoreWithWorker(file, store, {
-        scale,
-        pageNumbers: options?.pageNumbers,
-        pageConcurrency,
-        storeThumbnails,
-        signal,
-        onPageReceived: () => {
-          workerPageCount += 1;
-        },
-        onPageStored: async (page) => {
-          await options?.onPageStored?.(page);
-        }
-      });
-    } catch (error) {
-      if (signal?.aborted || workerPageCount > 0) {
-        throw error;
-      }
-    }
-  }
-  return await loadPdfToStoreOnMainThread(file, store, {
-    scale,
-    pageNumbers: options?.pageNumbers,
-    pageConcurrency,
-    storeThumbnails,
-    signal,
-    onPageStored: options?.onPageStored
-  });
-}
-async function loadPdfToStoreOnMainThread(file, store, options) {
-  const {
-    pageConcurrency,
-    scale,
-    signal,
-    storeThumbnails,
-    onPageStored,
-    pageNumbers
-  } = options;
-  throwIfAborted2(signal);
+  throwIfAborted(signal);
   const pdfjs = await getPdfJs();
-  throwIfAborted2(signal);
+  throwIfAborted(signal);
   const arrayBuffer = await file.arrayBuffer();
-  throwIfAborted2(signal);
+  throwIfAborted(signal);
   const loadingTask = pdfjs.getDocument({ data: arrayBuffer });
   if (signal) {
     const abortLoading = () => {
@@ -1668,14 +1291,14 @@ async function loadPdfToStoreOnMainThread(file, store, options) {
       signal.removeEventListener("abort", abortLoading);
       return await loadPdfDocumentToStore(pdf2, store, {
         scale,
-        pageNumbers,
+        pageNumbers: options?.pageNumbers,
         pageConcurrency,
         storeThumbnails,
         signal,
-        onPageStored
+        onPageStored: options?.onPageStored
       });
     } catch (error) {
-      if (signal.aborted) throw createAbortError2();
+      if (signal.aborted) throw createAbortError();
       throw error;
     } finally {
       signal.removeEventListener("abort", abortLoading);
@@ -1684,16 +1307,16 @@ async function loadPdfToStoreOnMainThread(file, store, options) {
   const pdf = await loadingTask.promise;
   return await loadPdfDocumentToStore(pdf, store, {
     scale,
-    pageNumbers,
+    pageNumbers: options?.pageNumbers,
     pageConcurrency,
     storeThumbnails,
-    onPageStored
+    onPageStored: options?.onPageStored
   });
 }
 async function loadPdfDocumentToStore(pdf, store, options) {
   const { pageConcurrency, scale, signal } = options;
   const storeThumbnails = options.storeThumbnails ?? false;
-  throwIfAborted2(signal);
+  throwIfAborted(signal);
   const pageNumbers = normalizePdfPageNumbers(options?.pageNumbers, pdf.numPages);
   const bufferedResults = /* @__PURE__ */ new Map();
   let nextEmitIndex = 0;
@@ -1708,9 +1331,9 @@ async function loadPdfDocumentToStore(pdf, store, options) {
         if (!bufferedResult) break;
         bufferedResults.delete(nextPageNumber);
         nextEmitIndex += 1;
-        throwIfAborted2(signal);
+        throwIfAborted(signal);
         await options?.onPageStored?.(bufferedResult);
-        throwIfAborted2(signal);
+        throwIfAborted(signal);
       }
     };
     const nextChain = emitChain.then(run, run);
@@ -1722,20 +1345,20 @@ async function loadPdfDocumentToStore(pdf, store, options) {
     pageNumbers,
     pageConcurrency,
     async (pageNumber) => {
-      throwIfAborted2(signal);
+      throwIfAborted(signal);
       const page = await pdf.getPage(pageNumber);
-      throwIfAborted2(signal);
+      throwIfAborted(signal);
       const { canvas, width, height } = await renderPageToCanvas(
         page,
         scale,
         signal
       );
-      throwIfAborted2(signal);
+      throwIfAborted(signal);
       const mime = "image/png";
       const pageBlob = await encodeCanvasToBlob(canvas, { mimeType: mime });
-      throwIfAborted2(signal);
+      throwIfAborted(signal);
       const blobId = await store.storeOriginal(pageBlob);
-      throwIfAborted2(signal);
+      throwIfAborted(signal);
       const thumbnailBlobId = storeThumbnails ? await (async () => {
         const thumbScale = Math.min(1, 256 / Math.max(width, height));
         const tw = Math.max(1, Math.round(width * thumbScale));
@@ -1752,7 +1375,7 @@ async function loadPdfDocumentToStore(pdf, store, options) {
         const thumbBlob = await encodeCanvasToBlob(thumbCanvas, {
           mimeType: mime
         });
-        throwIfAborted2(signal);
+        throwIfAborted(signal);
         return await store.storeThumbnail(thumbBlob);
       })() : "";
       const pageResult = {
@@ -2106,22 +1729,22 @@ function finalizeIngestedItem(item, context, uploadResult, decorateItem) {
   const itemWithAssetData = applyAssetUploadResultToItem(item, uploadResult);
   return decorateItem ? decorateItem(itemWithAssetData, context) : itemWithAssetData;
 }
-function createAbortError3() {
+function createAbortError2() {
   return new DOMException("Aborted", "AbortError");
 }
-function throwIfAborted3(signal) {
+function throwIfAborted2(signal) {
   if (signal?.aborted) {
-    throw createAbortError3();
+    throw createAbortError2();
   }
 }
 function isAbortError(error) {
   return (error instanceof DOMException || error instanceof Error) && error.name === "AbortError";
 }
 async function uploadAssetIfNeeded(assetStore, file, kind, signal) {
-  throwIfAborted3(signal);
+  throwIfAborted2(signal);
   if (!assetStore) return null;
   const result = await assetStore.upload({ file, kind, signal });
-  throwIfAborted3(signal);
+  throwIfAborted2(signal);
   return result ?? null;
 }
 async function ingestAssetFilesToSceneItems(options) {
@@ -2144,7 +1767,7 @@ async function ingestAssetFilesToSceneItems(options) {
   const errors = [];
   let occupiedBottomY = existingItems.length > 0 ? Math.max(...existingItems.map((item) => item.bounds.y + item.bounds.height)) : null;
   for (const file of files) {
-    throwIfAborted3(signal);
+    throwIfAborted2(signal);
     const kind = getAssetKindForFile(file);
     if (!kind) {
       const error = {
@@ -2170,10 +1793,10 @@ async function ingestAssetFilesToSceneItems(options) {
           storeThumbnails: false,
           signal,
           onPageStored: async (page) => {
-            throwIfAborted3(signal);
+            throwIfAborted2(signal);
             const uploadResult2 = await uploadResultPromise;
             const fullUrl2 = await createBlobUrlFromStore(imageStore, page.blobId);
-            throwIfAborted3(signal);
+            throwIfAborted2(signal);
             const naturalTopY2 = worldCenter.y - page.height / 2;
             const stackedTopY2 = occupiedBottomY == null ? naturalTopY2 : occupiedBottomY + gapWorld;
             const bounds2 = {
@@ -2213,18 +1836,18 @@ async function ingestAssetFilesToSceneItems(options) {
             );
             items.push(item2);
             occupiedBottomY = bounds2.y + page.height;
-            throwIfAborted3(signal);
+            throwIfAborted2(signal);
             onItemsReady?.([item2], { file, kind });
           }
         });
         continue;
       }
-      throwIfAborted3(signal);
+      throwIfAborted2(signal);
       const [uploadResult, storedImage] = await Promise.all([
         uploadAssetIfNeeded(assetStore, file, kind, signal),
         loadImageToStore(file, imageStore)
       ]);
-      throwIfAborted3(signal);
+      throwIfAborted2(signal);
       const { blobId, thumbnailBlobId, width, height } = storedImage;
       const fullUrl = await createBlobUrlFromStore(imageStore, blobId);
       const thumbBlob = await imageStore.getThumbnail(thumbnailBlobId);
@@ -2262,7 +1885,7 @@ async function ingestAssetFilesToSceneItems(options) {
         decorateItem
       );
       items.push(item);
-      throwIfAborted3(signal);
+      throwIfAborted2(signal);
       onItemsReady?.([item], { file, kind });
       occupiedBottomY = occupiedBottomY == null ? bounds.y + height : Math.max(occupiedBottomY, bounds.y + height);
     } catch (error) {
@@ -7539,6 +7162,9 @@ function shouldRedrawRasterImageCanvas({
   if (currentSourceKey !== nextSourceKey && safeCurrentWidth === safeNextWidth && safeCurrentHeight === safeNextHeight) {
     return true;
   }
+  if (currentSourceKey !== nextSourceKey && (safeNextWidth < safeCurrentWidth || safeNextHeight < safeCurrentHeight)) {
+    return true;
+  }
   return safeNextWidth > safeCurrentWidth * upscaleRedrawRatio || safeNextHeight > safeCurrentHeight * upscaleRedrawRatio;
 }
 function toPositiveFiniteNumber(value, fallback) {
@@ -8918,6 +8544,42 @@ function didReadOnlyActivationMovePastTap(session, pointer, tapPx) {
   return Math.hypot(dx, dy) > tapPx;
 }
 
+// src/react/render-scheduler.ts
+var getDefaultAnimationFrameRuntime = () => typeof window === "undefined" ? {} : window;
+function createAnimationFrameRenderScheduler({
+  render,
+  runtime = getDefaultAnimationFrameRuntime()
+}) {
+  let frameId = null;
+  const canceledFrameIds = /* @__PURE__ */ new Set();
+  const request = () => {
+    if (frameId != null) return;
+    if (typeof runtime.requestAnimationFrame !== "function") {
+      render();
+      return;
+    }
+    const scheduledFrameId = runtime.requestAnimationFrame(() => {
+      const currentFrameId = scheduledFrameId;
+      if (canceledFrameIds.has(currentFrameId)) {
+        canceledFrameIds.delete(currentFrameId);
+        return;
+      }
+      if (frameId === currentFrameId) {
+        frameId = null;
+      }
+      render();
+    });
+    frameId = scheduledFrameId;
+  };
+  const cancel = () => {
+    if (frameId == null) return;
+    canceledFrameIds.add(frameId);
+    runtime.cancelAnimationFrame?.(frameId);
+    frameId = null;
+  };
+  return { request, cancel };
+}
+
 // src/react/stable-selection.ts
 function shallowEqualStringArray(a, b) {
   if (a === b) return true;
@@ -9930,6 +9592,9 @@ var VectorViewport = forwardRef(
     reducedMotionRef.current = reducedMotion;
     const [zoomPercent, setZoomPercent] = useState(100);
     const [cameraTick, setCameraTick] = useState(0);
+    const renderFrameSchedulerRef = useRef(
+      null
+    );
     const [placementPreview, setPlacementPreview] = useState(null);
     const [eraserTrail, setEraserTrail] = useState([]);
     const [laserTrail, setLaserTrail] = useState([]);
@@ -10310,7 +9975,7 @@ var VectorViewport = forwardRef(
         renderSceneWithLivePenStroke
       ]
     );
-    const renderFrame = useCallback(() => {
+    const renderFrameNow = useCallback(() => {
       const renderer = rendererRef.current;
       const cam = cameraRef.current;
       if (!renderer || !cam) return;
@@ -10323,6 +9988,14 @@ var VectorViewport = forwardRef(
       }
       onCameraChangeRef.current?.();
     }, []);
+    const renderFrame = useCallback(() => {
+      const scheduler = renderFrameSchedulerRef.current;
+      if (!scheduler) {
+        renderFrameNow();
+        return;
+      }
+      scheduler.request();
+    }, [renderFrameNow]);
     useEffect(() => {
       const el = sceneContainerRef.current;
       const interactionEl = interactionRootRef.current;
@@ -10341,6 +10014,9 @@ var VectorViewport = forwardRef(
         rasterImageCanvas: imageCanvasRenderingRef.current
       });
       rendererRef.current = renderer;
+      renderFrameSchedulerRef.current = createAnimationFrameRenderScheduler({
+        render: renderFrameNow
+      });
       renderer.setInteractionState({
         selectedIds: effectiveSelectedIdsRef.current,
         hoveredItemId: hoveredItemIdRef.current
@@ -10375,6 +10051,8 @@ var VectorViewport = forwardRef(
         });
       }
       return () => {
+        renderFrameSchedulerRef.current?.cancel();
+        renderFrameSchedulerRef.current = null;
         detachInput();
         detachPencil?.();
         renderer.destroy();
@@ -10383,7 +10061,7 @@ var VectorViewport = forwardRef(
         cameraRef.current = null;
         setCameraForOverlay(null);
       };
-    }, [applePencilNav, renderFrame, resolveReadOnlyActivation]);
+    }, [applePencilNav, renderFrame, renderFrameNow, resolveReadOnlyActivation]);
     useEffect(() => {
       rendererRef.current?.setInteractionState({
         selectedIds: effectiveSelectedIds,
@@ -10511,10 +10189,10 @@ var VectorViewport = forwardRef(
           livePenStrokeItemRef.current = null;
         }
         scene.setItems(resolvedSceneItems);
-        renderFrame();
+        renderFrameNow();
         renderer?.renderLiveItem(livePenStrokeItemRef.current);
       }
-    }, [resolvedSceneItems, renderFrame]);
+    }, [resolvedSceneItems, renderFrameNow]);
     useEffect(() => {
       const ids = effectiveSelectedIds;
       const valid = ids.filter((id) => items.some((i) => i.id === id));