kviewer 0.2.1 → 0.2.3

package/README.md

@@ -71,6 +71,25 @@ const pdfUrl = '/documents/sample.pdf'
 
 `source` accepts a URL string, `Uint8Array`, or a pdfjs-dist source object.
 
+## Customizing the toolbar
+
+By default the toolbar is fully built-in. Pass `tools` to choose which buttons render and in what order, and interleave custom buttons via `#tool-<name>` slots. Each entry is a built-in tool ID (a string) or a `{ type: 'slot' }` object. When omitted, the default toolbar is rendered unchanged.
+
+```vue
+<template>
+  <KViewer
+    :source="pdfUrl"
+    :tools="['menu', 'pageSettings', 'separator', 'zoom', { type: 'slot', key: 'save' }, 'spacer', 'search']"
+  >
+    <template #tool-save="{ state }">
+      <UButton icon="i-lucide-save" size="xs" variant="ghost" color="neutral" @click="save(state)" />
+    </template>
+  </KViewer>
+</template>
+```
+
+`separator`/`spacer` are layout primitives (`spacer` right-aligns what follows). `tools` controls buttons only — it never gates programmatic `state.selectTool(...)` access. Form-edit mode is API-only (`v-model:form-edit-mode` / `setFormEditMode()` / `toggleFormEditMode()`); there is no built-in toggle button. See the [toolbar configuration docs](https://github.com/uppt/nuxt-kviewer) for the full tool-ID list and the array that reproduces the default toolbar.
+
 ## Viewer Ref API
 
 `KViewer` exposes methods via a template ref:

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-export { AddFormFieldPayload, CheckboxStyle, ExportPdfOptions, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, KVIEWER_EMBED_PROTOCOL_VERSION, KViewerApi, KViewerEmbedBridgeOptions, KViewerEmbedClient, KViewerEmbedClientOptions, KViewerEmbedEventName, KViewerEmbedEventPayloads, KViewerEmbedMethodName, SignatureData, SignatureHandlers, ViewMode, ViewerMenuButtonItem, ViewerMenuCheckboxItem, ViewerMenuItem, ViewerMenuSeparatorItem, useKViewerEmbedBridge } from '../dist/runtime/public-types.js';
+export { ActiveTool, AddFormFieldPayload, CheckboxStyle, ExportPdfOptions, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, KVIEWER_EMBED_PROTOCOL_VERSION, KViewerApi, KViewerEmbedBridgeOptions, KViewerEmbedClient, KViewerEmbedClientOptions, KViewerEmbedEventName, KViewerEmbedEventPayloads, KViewerEmbedMethodName, SignatureData, SignatureHandlers, ViewMode, ViewerBottomToolId, ViewerLayoutToolId, ViewerMenuButtonItem, ViewerMenuCheckboxItem, ViewerMenuItem, ViewerMenuSeparatorItem, ViewerState, ViewerToolEntry, ViewerToolId, ViewerToolSlot, ViewerTopToolId, useKViewerEmbedBridge } from '../dist/runtime/public-types.js';
 
 interface ModuleOptions {
     /**
@@ -15,6 +15,13 @@ interface ModuleOptions {
      * @defaultValue `2`
      */
     minRenderPixelRatio?: number;
+    /**
+     * Default UI language for built-in viewer strings (toolbar, search,
+     * modals, form sidebar). The Viewer `locale` prop overrides this
+     * per instance.
+     * @defaultValue `en`
+     */
+    locale?: 'en' | 'de';
 }
 
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "kviewer",
   "configKey": "kviewer",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -11,7 +11,8 @@ const module$1 = defineNuxtModule({
   // Default configuration options of the Nuxt module
   defaults: {
     prefix: "K",
-    minRenderPixelRatio: 2
+    minRenderPixelRatio: 2,
+    locale: "en"
   },
   // Declare @nuxt/ui as a hard dependency so Nuxt resolves it as a
   // top-level module before our setup() runs. We can NOT just call
@@ -38,10 +39,11 @@ const module$1 = defineNuxtModule({
         "pdfjs-dist/legacy/build/pdf.mjs",
         "pdfjs-dist/web/pdf_viewer.mjs"
       );
-    }, { client: true, server: false });
+    });
     nuxt.options.runtimeConfig.public.kviewer = {
       ...nuxt.options.runtimeConfig.public.kviewer,
-      minRenderPixelRatio: options.minRenderPixelRatio ?? 2
+      minRenderPixelRatio: options.minRenderPixelRatio ?? 2,
+      locale: options.locale ?? "en"
     };
     nuxt.options.css.push("pdfjs-dist/web/pdf_viewer.css");
     nuxt.options.css.push(resolve("./runtime/assets/kviewer.css"));
@@ -80,6 +82,26 @@ const module$1 = defineNuxtModule({
           dir: join(pdfjsDir, "legacy/build"),
           baseURL: "/_kviewer/pdfjs",
           maxAge: 60 * 60 * 24 * 365
+        },
+        // pdf.js v6 moved several features to WebAssembly, fetched at
+        // runtime from the `wasmUrl` API option (see Viewer.vue) and the
+        // scripting `wasmUrl` (see useScriptingManager): quickjs-eval.wasm
+        // backs the QuickJS scripting sandbox (no JS fallback — required
+        // for `scripting`), while jbig2/openjpeg/qcms.wasm (with bundled
+        // *_nowasm_fallback.js) decode JBIG2 / JPEG2000 images and ICC
+        // colour. Without this, scripting fails and those image/colour
+        // features silently degrade.
+        {
+          dir: join(pdfjsDir, "wasm"),
+          baseURL: "/_kviewer/wasm",
+          maxAge: 60 * 60 * 24 * 365
+        },
+        // CMYK ICC profile fetched via the `iccUrl` API option for
+        // DeviceCMYK ICC-based colour spaces.
+        {
+          dir: join(pdfjsDir, "iccs"),
+          baseURL: "/_kviewer/iccs",
+          maxAge: 60 * 60 * 24 * 365
         }
       );
     });

package/dist/runtime/annotation/engine/canvas-resolution.d.ts

@@ -0,0 +1,7 @@
+import type Konva from 'konva';
+/**
+ * Cap the backing-store resolution of every layer (scene + hit canvas)
+ * on the stage. Idempotent — call after adding a layer to a stage whose
+ * CSS size scales with zoom.
+ */
+export declare function applyStageResolutionCap(stage: Konva.Stage): void;

package/dist/runtime/annotation/engine/canvas-resolution.js

@@ -0,0 +1,21 @@
+import { isIPad } from "./input-device.js";
+const MAX_LAYER_PIXELS_IPAD = 1e6;
+const MAX_LAYER_PIXELS_DEFAULT = 8e6;
+const baseRatios = /* @__PURE__ */ new WeakMap();
+function capCanvas(canvas, cssArea, maxPixels) {
+  const current = canvas.getPixelRatio();
+  if (!baseRatios.has(canvas)) baseRatios.set(canvas, current);
+  const base = baseRatios.get(canvas);
+  const target = Math.min(base, Math.sqrt(maxPixels / cssArea));
+  if (Math.abs(target - current) > 0.01) canvas.setPixelRatio(target);
+}
+export function applyStageResolutionCap(stage) {
+  const cssArea = stage.width() * stage.height();
+  if (cssArea <= 0) return;
+  const maxPixels = isIPad() ? MAX_LAYER_PIXELS_IPAD : MAX_LAYER_PIXELS_DEFAULT;
+  for (const layer of stage.getLayers()) {
+    capCanvas(layer.getCanvas(), cssArea, maxPixels);
+    capCanvas(layer.getHitCanvas(), cssArea, maxPixels);
+    layer.batchDraw();
+  }
+}

package/dist/runtime/annotation/engine/editor/editor.d.ts

@@ -2,7 +2,7 @@ import Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { AnnotationType, IAnnotationContentsObj, IAnnotationStore, IAnnotationStyle, IAnnotationType } from '../types.js';
 export interface IEditorOptions {
-    userName: string;
+    userName?: string;
     konvaStage: Konva.Stage;
     pageNumber: number;
     annotation: IAnnotationType | null;
@@ -21,7 +21,7 @@ export interface IShapeGroup {
     annotation?: IAnnotationType;
 }
 export declare abstract class Editor {
-    protected userName: string;
+    protected userName?: string;
     readonly id: string;
     readonly onAdd: (annotationStore: IAnnotationStore) => void;
     readonly onChange: (id: string, updates: Partial<IAnnotationStore>) => void;
@@ -72,4 +72,9 @@ export declare abstract class Editor {
     static TimerStart(pageNumber: number, callback: (pageNumber: number) => void, delay?: number): void;
     /** Immediately execute and clear all pending timers (e.g. before export). */
     static flushAllTimers(): void;
+    /** Immediately execute and clear one page's pending timer — e.g. before
+     *  the page's Konva stage is destroyed (zoom commit, unmount), so an
+     *  in-flight freehand group is finalized into the store instead of
+     *  dying with the stage. */
+    static TimerFlush(pageNumber: number): void;
 }

package/dist/runtime/annotation/engine/editor/editor.js

@@ -213,6 +213,9 @@ export class Editor {
   addSerializedGroupToLayer(konvaStage, konvaString) {
     this.konvaStage = konvaStage;
     const ghostGroup = Konva.Node.create(konvaString);
+    if (ghostGroup instanceof Konva.Container) {
+      ghostGroup.find((node) => node instanceof Konva.Shape).forEach((shape) => shape.strokeScaleEnabled(true));
+    }
     const id = ghostGroup.id();
     this.getBgLayer(konvaStage).add(ghostGroup);
     if (this.shapeGroupStore.has(id)) return;
@@ -258,4 +261,15 @@ export class Editor {
       entry.callback(pageNumber);
     }
   }
+  /** Immediately execute and clear one page's pending timer — e.g. before
+   *  the page's Konva stage is destroyed (zoom commit, unmount), so an
+   *  in-flight freehand group is finalized into the store instead of
+   *  dying with the stage. */
+  static TimerFlush(pageNumber) {
+    const entry = Editor.Timer.get(pageNumber);
+    if (!entry) return;
+    window.clearTimeout(entry.id);
+    Editor.Timer.delete(pageNumber);
+    entry.callback(pageNumber);
+  }
 }

package/dist/runtime/annotation/engine/editor/selector.d.ts

@@ -6,6 +6,13 @@ export interface ISelectorOptions {
     getAnnotationStore: (id: string) => IAnnotationStore | undefined;
     onSelected: (id: string, isClick: boolean, transformerRect: IRect) => void;
     onMultiSelected: (ids: string[], combinedRect: IRect) => void;
+    /** Fired once after a marquee multi-drag with the final geometry of
+     *  every moved group, so the move persists as a single history step. */
+    onMultiChanged: (changes: Array<{
+        id: string;
+        konvaGroupString: string;
+        konvaClientRect: IRect;
+    }>, transformerRect: IRect) => void;
     onCancel: () => void;
     onChanged: (id: string, konvaGroupString: string, rawAnnotationStore: IAnnotationStore, konvaClientRect: IRect, transformerRect: IRect) => void;
     onDelete: (id: string) => void;
@@ -27,6 +34,11 @@ export declare class Selector {
     readonly onDelete: (id: string) => void;
     readonly onCancel: () => void;
     readonly onMultiSelected: (ids: string[], combinedRect: IRect) => void;
+    readonly onMultiChanged: (changes: Array<{
+        id: string;
+        konvaGroupString: string;
+        konvaClientRect: IRect;
+    }>, transformerRect: IRect) => void;
     private onRequestDeleteConfirm?;
     private onFreeTextDoubleClick?;
     private getStylusModeEnabled?;
@@ -40,7 +52,7 @@ export declare class Selector {
     private marqueeRect;
     private marqueeStartPos;
     private marqueeStage;
-    constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, setExternalGesturesEnabled, }: ISelectorOptions);
+    constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onMultiChanged, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, setExternalGesturesEnabled, }: ISelectorOptions);
     /** Returns true if this event should be rejected (finger touch in stylus mode). */
     private isStylusRejected;
     private handleKeyDown;

package/dist/runtime/annotation/engine/editor/selector.js

@@ -3,12 +3,14 @@ import { AnnotationType } from "../types.js";
 import { SELECTOR_HOVER_STYLE, SHAPE_GROUP_NAME } from "../const.js";
 import { defaultOptions } from "../config.js";
 import { isStylusTouch } from "../input-device.js";
+import { applyStageResolutionCap } from "../canvas-resolution.js";
 export class Selector {
   onSelected;
   onChanged;
   onDelete;
   onCancel;
   onMultiSelected;
+  onMultiChanged;
   onRequestDeleteConfirm;
   onFreeTextDoubleClick;
   getStylusModeEnabled;
@@ -28,6 +30,7 @@ export class Selector {
     onDelete,
     onSelected,
     onMultiSelected,
+    onMultiChanged,
     onCancel,
     onChanged,
     onRequestDeleteConfirm,
@@ -40,6 +43,7 @@ export class Selector {
     this.onDelete = onDelete;
     this.onSelected = onSelected;
     this.onMultiSelected = onMultiSelected;
+    this.onMultiChanged = onMultiChanged;
     this.onCancel = onCancel;
     this.onChanged = onChanged;
     this.onRequestDeleteConfirm = onRequestDeleteConfirm;
@@ -231,8 +235,9 @@ export class Selector {
     const moveToDragLayer = () => {
       if (dragLayer) return;
       const bg = this.getBackgroundLayer(konvaStage);
-      dragLayer = new Konva.Layer();
+      dragLayer = new Konva.Layer({ listening: false });
       konvaStage.add(dragLayer);
+      applyStageResolutionCap(konvaStage);
       group.moveTo(dragLayer);
       transformer.moveTo(dragLayer);
       bg.batchDraw();
@@ -240,6 +245,7 @@ export class Selector {
     };
     const restoreFromDragLayer = () => {
       if (!dragLayer) return;
+      endGhostDrag();
       const bg = this.getBackgroundLayer(konvaStage);
       group.moveTo(bg);
       transformer.moveTo(bg);
@@ -247,6 +253,32 @@ export class Selector {
       dragLayer = null;
       bg.batchDraw();
     };
+    let dragGhost = null;
+    let dragVisualOrigin = null;
+    const startGhostDrag = (origin) => {
+      if (!dragLayer || dragGhost) return;
+      dragLayer.draw();
+      const canvases = konvaStage.content.querySelectorAll("canvas");
+      const real = canvases[canvases.length - 1];
+      if (!real) return;
+      const ghost = document.createElement("canvas");
+      ghost.width = real.width;
+      ghost.height = real.height;
+      ghost.getContext("2d")?.drawImage(real, 0, 0);
+      ghost.style.cssText = `position:absolute;top:0;left:0;width:${real.style.width};height:${real.style.height};pointer-events:none;`;
+      konvaStage.content.appendChild(ghost);
+      dragGhost = ghost;
+      dragVisualOrigin = origin;
+      dragLayer.visible(false);
+    };
+    const endGhostDrag = () => {
+      dragVisualOrigin = null;
+      if (!dragGhost) return;
+      dragLayer?.visible(true);
+      dragLayer?.draw();
+      dragGhost.remove();
+      dragGhost = null;
+    };
     transformer.on("transformstart", () => {
       this.setExternalGesturesEnabled?.(false);
       moveToDragLayer();
@@ -273,9 +305,13 @@ export class Selector {
       dragStartRect = this.getTotalBox(boxes);
       const firstNode = transformer.nodes()[0];
       dragAnchorPos = firstNode ? firstNode.getAbsolutePosition() : null;
+      if (transformer.nodes().length === 1 && dragAnchorPos) {
+        startGhostDrag({ ...dragAnchorPos });
+      }
     });
     transformer.on("dragend", () => {
       this.setExternalGesturesEnabled?.(true);
+      endGhostDrag();
       restoreFromDragLayer();
       dragStartRect = null;
       dragAnchorPos = null;
@@ -299,14 +335,17 @@ export class Selector {
       const boxY = dragStartRect.y + dy;
       const halfWidth = dragStartRect.width / 2;
       const halfHeight = dragStartRect.height / 2;
-      const stageW = konvaStage.width();
-      const stageH = konvaStage.height();
+      const pageCss = konvaStage.getAttr("kvPageCss");
+      const minX = konvaStage.x();
+      const minY = konvaStage.y();
+      const maxX = minX + (pageCss?.width ?? konvaStage.width());
+      const maxY = minY + (pageCss?.height ?? konvaStage.height());
       let clampDx = 0;
       let clampDy = 0;
-      if (boxX + halfWidth < 0) clampDx = -(boxX + halfWidth);
-      else if (boxX + halfWidth > stageW) clampDx = stageW - (boxX + halfWidth);
-      if (boxY + halfHeight < 0) clampDy = -(boxY + halfHeight);
-      else if (boxY + halfHeight > stageH) clampDy = stageH - (boxY + halfHeight);
+      if (boxX + halfWidth < minX) clampDx = minX - (boxX + halfWidth);
+      else if (boxX + halfWidth > maxX) clampDx = maxX - (boxX + halfWidth);
+      if (boxY + halfHeight < minY) clampDy = minY - (boxY + halfHeight);
+      else if (boxY + halfHeight > maxY) clampDy = maxY - (boxY + halfHeight);
       if (clampDx !== 0 || clampDy !== 0) {
         nodes.forEach((shape) => {
           const pos = shape.getAbsolutePosition();
@@ -314,6 +353,10 @@ export class Selector {
         });
         dragAnchorPos = firstNode.getAbsolutePosition();
       }
+      if (dragGhost && dragVisualOrigin) {
+        const pos = firstNode.getAbsolutePosition();
+        dragGhost.style.transform = `translate(${pos.x - dragVisualOrigin.x}px, ${pos.y - dragVisualOrigin.y}px)`;
+      }
     });
     transformer.nodes([group]);
     this.getBackgroundLayer(konvaStage).add(transformer);
@@ -398,6 +441,7 @@ export class Selector {
         transformer.nodes().forEach((group) => {
           if (group instanceof Konva.Group) {
             group.draggable(false);
+            group.off(".marquee");
           }
         });
         transformer.nodes([]);
@@ -555,6 +599,12 @@ export class Selector {
             });
             node.on("dragend.marquee", () => {
               this.setExternalGesturesEnabled?.(true);
+              const changes = transformer.nodes().filter((n) => n instanceof Konva.Group).map((n) => ({
+                id: n.id(),
+                konvaGroupString: n.toJSON(),
+                konvaClientRect: Konva.Node.create(n.toJSON()).getClientRect()
+              }));
+              this.onMultiChanged(changes, transformer.getClientRect());
               this.onMultiSelected(matchedIds, transformer.getClientRect());
             });
           });
@@ -673,7 +723,9 @@ export class Selector {
         return;
       }
       const scale = this.eraserStage.scaleX() ?? 1;
-      const screenPoints = points.map((v) => v * scale);
+      const sx = this.eraserStage.x();
+      const sy = this.eraserStage.y();
+      const screenPoints = points.map((v, i) => v * scale + (i % 2 === 0 ? sx : sy));
       const tolerance = 6;
       const groups = this.getPageShapeGroups(this.eraserStage);
       const toDelete = [];

package/dist/runtime/annotation/engine/import-normalize.js

@@ -21,7 +21,7 @@ function normalizeComment(comment, fallbackTitle) {
   if (!isString(content)) return null;
   return {
     id: isString(comment.id) && comment.id.length > 0 ? comment.id : generateUUID(),
-    title: isString(comment.title) && comment.title.length > 0 ? comment.title : fallbackTitle,
+    title: isString(comment.title) && comment.title.length > 0 ? comment.title : fallbackTitle || void 0,
     date: isString(comment.date) && comment.date.length > 0 ? comment.date : formatTimestamp(Date.now()),
     content,
     status: isString(comment.status) ? comment.status : void 0
@@ -66,7 +66,7 @@ function normalizeAnnotation(raw, fallbackTitle) {
     pageNumber,
     konvaString,
     konvaClientRect: { x, y, width, height },
-    title: isString(raw.title) && raw.title.length > 0 ? raw.title : fallbackTitle,
+    title: isString(raw.title) && raw.title.length > 0 ? raw.title : fallbackTitle || void 0,
     type,
     subtype,
     pdfjsType,
@@ -81,7 +81,7 @@ function normalizeAnnotation(raw, fallbackTitle) {
   };
   return normalized;
 }
-export function normalizeImportedAnnotations(input, fallbackTitle = "User") {
+export function normalizeImportedAnnotations(input, fallbackTitle) {
   if (!Array.isArray(input)) {
     return { annotations: [], skipped: 0 };
   }

package/dist/runtime/annotation/engine/painter.d.ts

@@ -29,10 +29,14 @@ export interface PainterCallbacks {
     getFormFieldPreviewColor?: () => string | undefined;
 }
 export declare class Painter {
-    private userName;
+    private userName?;
     private konvaCanvasStore;
     private editorStore;
     private currentAnnotation;
+    /** Marquee/eraser set currentAnnotation to null, so the active mode is
+     *  tracked separately to allow restoring its bindings after programmatic
+     *  editor churn (undo/redo, import). */
+    private activeNonToolMode;
     private store;
     private selector;
     private tempDataTransfer;
@@ -41,7 +45,7 @@ export declare class Painter {
     private getReadonly?;
     private freehandGroupingDelay;
     constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, freehandGroupingDelay, setExternalGesturesEnabled, }: {
-        userName: string;
+        userName?: string;
         callbacks: PainterCallbacks;
         getStylusModeEnabled?: () => boolean;
         getReadonly?: () => boolean;
@@ -52,6 +56,21 @@ export declare class Painter {
     private bindGlobalEvents;
     private globalKeyUpHandler;
     private createKonvaStage;
+    /**
+     * Restrict the stage to the visible window of the page (page-CSS
+     * coords) — or restore the full page with `null`. iOS Safari blits a
+     * changing canvas at its CSS size in software: a page-sized canvas at
+     * high zoom costs hundreds of ms per frame on A-series iPads no matter
+     * how small the backing store is. Shrinking the stage CSS to the
+     * viewport window makes drag cost viewport-bound. The stage position
+     * offsets the content so shapes keep page coordinates.
+     */
+    setStageWindow(pageNumber: number, win: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null): void;
     private applyStylusTouchAction;
     private removeStylusTouchAction;
     private saveToStore;
@@ -89,6 +108,18 @@ export declare class Painter {
      * is currently active.
      */
     private refreshSelectorForPages;
+    /**
+     * Re-bind the stage handlers of whatever tool is currently active.
+     *
+     * Creating or activating an editor rebinds the Konva stage events to
+     * THAT editor (the Editor constructor and activate() both run
+     * disableEditMode + enableEditMode). Programmatic add paths — undo/redo
+     * via reAddAnnotation, importAnnotations via merge/replace — may lazily
+     * create editors for the restored annotation's type, which would leave
+     * the stage bound to the wrong tool (e.g. undoing a rectangle delete
+     * while freehand is active made the stage draw rectangles).
+     */
+    private restoreActiveToolBindings;
     refreshStylusMode(): void;
     initCanvasForPage(pageNumber: number, container: HTMLDivElement, width: number, height: number, scale: number): void;
     destroyCanvasForPage(pageNumber: number): void;

package/dist/runtime/annotation/engine/painter.js

@@ -26,6 +26,7 @@ import { EditorFormField } from "./tools/form-field.js";
 import { Selector } from "./editor/selector.js";
 import { Store } from "./store.js";
 import { isIPad } from "./input-device.js";
+import { applyStageResolutionCap } from "./canvas-resolution.js";
 if (typeof window !== "undefined" && isIPad()) {
   Konva.pixelRatio = 1;
 }
@@ -34,6 +35,10 @@ export class Painter {
   konvaCanvasStore = /* @__PURE__ */ new Map();
   editorStore = /* @__PURE__ */ new Map();
   currentAnnotation = null;
+  /** Marquee/eraser set currentAnnotation to null, so the active mode is
+   *  tracked separately to allow restoring its bindings after programmatic
+   *  editor churn (undo/redo, import). */
+  activeNonToolMode = null;
   store;
   selector;
   tempDataTransfer = null;
@@ -83,6 +88,21 @@ export class Painter {
           this.callbacks.onAnnotationChanged(ann, viewportRect);
         }
       },
+      onMultiChanged: (changes, transformerRect) => {
+        let lastChanged = null;
+        for (const change of changes) {
+          if (!this.store.annotation(change.id)) continue;
+          this.updateStore(change.id, {
+            konvaString: change.konvaGroupString,
+            konvaClientRect: change.konvaClientRect
+          });
+          lastChanged = this.store.annotation(change.id) ?? lastChanged;
+        }
+        if (lastChanged) {
+          const viewportRect = this.toViewportRect(lastChanged.pageNumber, transformerRect);
+          this.callbacks.onAnnotationChanged(lastChanged, viewportRect);
+        }
+      },
       onCancel: () => {
         this.callbacks.onAnnotationChanging();
       },
@@ -137,13 +157,46 @@ export class Painter {
       height: Math.floor(height * scale),
       scale: { x: scale, y: scale }
     });
+    stage.setAttr("kvPageCss", {
+      width: Math.floor(width * scale),
+      height: Math.floor(height * scale)
+    });
     const backgroundLayer = new Konva.Layer();
     stage.add(backgroundLayer);
+    applyStageResolutionCap(stage);
     if (this.getStylusModeEnabled?.()) {
       this.applyStylusTouchAction(stage);
     }
     return stage;
   }
+  /**
+   * Restrict the stage to the visible window of the page (page-CSS
+   * coords) — or restore the full page with `null`. iOS Safari blits a
+   * changing canvas at its CSS size in software: a page-sized canvas at
+   * high zoom costs hundreds of ms per frame on A-series iPads no matter
+   * how small the backing store is. Shrinking the stage CSS to the
+   * viewport window makes drag cost viewport-bound. The stage position
+   * offsets the content so shapes keep page coordinates.
+   */
+  setStageWindow(pageNumber, win) {
+    const canvas = this.konvaCanvasStore.get(pageNumber);
+    if (!canvas) return;
+    const stage = canvas.konvaStage;
+    const pageCss = stage.getAttr("kvPageCss");
+    const x = win ? Math.max(0, Math.min(win.x, pageCss.width)) : 0;
+    const y = win ? Math.max(0, Math.min(win.y, pageCss.height)) : 0;
+    const w = win ? Math.min(win.x + win.width, pageCss.width) - x : pageCss.width;
+    const h = win ? Math.min(win.y + win.height, pageCss.height) - y : pageCss.height;
+    if (w <= 0 || h <= 0) return;
+    if (Math.abs(stage.width() - w) < 1 && Math.abs(stage.height() - h) < 1 && Math.abs(stage.x() + x) < 1 && Math.abs(stage.y() + y) < 1) return;
+    stage.size({ width: Math.ceil(w), height: Math.ceil(h) });
+    stage.position({ x: -x, y: -y });
+    stage.content.style.position = "absolute";
+    stage.content.style.left = `${x}px`;
+    stage.content.style.top = `${y}px`;
+    applyStageResolutionCap(stage);
+    stage.batchDraw();
+  }
   applyStylusTouchAction(stage) {
     stage.preventDefault(false);
     if (!isIPad()) {
@@ -190,8 +243,8 @@ export class Painter {
   toViewportRect(pageNumber, stageRect) {
     const canvas = this.konvaCanvasStore.get(pageNumber);
     if (!canvas) return stageRect;
-    const containerBounds = canvas.wrapper.getBoundingClientRect();
-    const visualScale = canvas.wrapper.offsetWidth > 0 ? containerBounds.width / canvas.wrapper.offsetWidth : 1;
+    const containerBounds = canvas.konvaStage.content.getBoundingClientRect();
+    const visualScale = canvas.konvaStage.width() > 0 ? containerBounds.width / canvas.konvaStage.width() : 1;
     return {
       x: containerBounds.left + stageRect.x * visualScale,
       y: containerBounds.top + stageRect.y * visualScale,
@@ -460,6 +513,32 @@ export class Painter {
       this.selector.activate(pageNumber);
     }
   }
+  /**
+   * Re-bind the stage handlers of whatever tool is currently active.
+   *
+   * Creating or activating an editor rebinds the Konva stage events to
+   * THAT editor (the Editor constructor and activate() both run
+   * disableEditMode + enableEditMode). Programmatic add paths — undo/redo
+   * via reAddAnnotation, importAnnotations via merge/replace — may lazily
+   * create editors for the restored annotation's type, which would leave
+   * the stage bound to the wrong tool (e.g. undoing a rectangle delete
+   * while freehand is active made the stage draw rectangles).
+   */
+  restoreActiveToolBindings() {
+    if (this.currentAnnotation) {
+      this.enablePainting();
+      return;
+    }
+    if (this.activeNonToolMode === "marquee") {
+      this.konvaCanvasStore.forEach(({ pageNumber }) => {
+        this.selector.activateMarquee(pageNumber);
+      });
+    } else if (this.activeNonToolMode === "eraser") {
+      this.konvaCanvasStore.forEach(({ pageNumber }) => {
+        this.selector.activateEraser(pageNumber);
+      });
+    }
+  }
   // --- Public API ---
   refreshStylusMode() {
     const enabled = this.getStylusModeEnabled?.() ?? false;
@@ -489,12 +568,14 @@ export class Painter {
   destroyCanvasForPage(pageNumber) {
     const konvaCanvas = this.konvaCanvasStore.get(pageNumber);
     if (konvaCanvas) {
+      Editor.TimerFlush(pageNumber);
       konvaCanvas.konvaStage.destroy();
       this.konvaCanvasStore.delete(pageNumber);
     }
   }
   activate(annotation, dataTransfer) {
     this.currentAnnotation = annotation;
+    this.activeNonToolMode = null;
     this.disablePainting();
     this.saveTempDataTransfer(dataTransfer);
     if (!annotation) return;
@@ -522,6 +603,7 @@ export class Painter {
   }
   activateMarquee() {
     this.currentAnnotation = null;
+    this.activeNonToolMode = "marquee";
     this.disablePainting();
     this.konvaCanvasStore.forEach(({ pageNumber }) => {
       this.selector.activateMarquee(pageNumber);
@@ -529,6 +611,7 @@ export class Painter {
   }
   activateEraser() {
     this.currentAnnotation = null;
+    this.activeNonToolMode = "eraser";
     this.disablePainting();
     this.konvaCanvasStore.forEach(({ pageNumber }) => {
       this.selector.activateEraser(pageNumber);
@@ -585,6 +668,7 @@ export class Painter {
     }
     if (editor) {
       editor.addSerializedGroupToLayer(konvaCanvas.konvaStage, annotation.konvaString);
+      this.restoreActiveToolBindings();
       this.refreshSelectorForPages([annotation.pageNumber]);
     }
   }
@@ -622,6 +706,7 @@ export class Painter {
       this.drawAnnotation(annotation);
       touchedPages.add(annotation.pageNumber);
     });
+    this.restoreActiveToolBindings();
     this.refreshSelectorForPages(touchedPages);
   }
   mergeAnnotations(annotations) {
@@ -634,6 +719,7 @@ export class Painter {
       this.drawAnnotation(annotation);
       touchedPages.add(annotation.pageNumber);
     });
+    this.restoreActiveToolBindings();
     this.refreshSelectorForPages(touchedPages);
   }
   getCanvasState() {