kviewer 0.1.2 → 0.2.1

package/dist/runtime/annotation/pdf-import/utils.d.ts

@@ -1,6 +1,7 @@
 import Konva from 'konva';
 import { type AnnotationType, type IAnnotationComment, type IAnnotationStore, type PdfjsAnnotationSubtype } from '../engine/types.js';
 import { type RawPdfAnnotation } from './types.js';
+import { type PageTransform } from './transform.js';
 type Rect = {
     x: number;
     y: number;
@@ -17,8 +18,8 @@ export declare function getAnnotationText(annotation: RawPdfAnnotation): string;
 export declare function getFreeTextContent(annotation: RawPdfAnnotation): string;
 export declare function getAnnotationDate(annotation: RawPdfAnnotation): string;
 export declare function getComments(annotation: RawPdfAnnotation, allAnnotations: RawPdfAnnotation[]): IAnnotationComment[];
-export declare function rectFromPdfRect(input: unknown, pageHeight: number): Rect | null;
-export declare function pointFromPdfPoint(input: unknown, pageHeight: number): {
+export declare function rectFromPdfRect(input: unknown, transform: PageTransform): Rect | null;
+export declare function pointFromPdfPoint(input: unknown, transform: PageTransform): {
     x: number;
     y: number;
 } | null;
@@ -26,9 +27,9 @@ export declare function localPointFromPdfPoint(input: unknown): {
     x: number;
     y: number;
 } | null;
-export declare function rectFromQuadPoints(input: unknown, pageHeight: number): Rect | null;
-export declare function pointsFromInkList(input: unknown, pageHeight: number): number[];
-export declare function linePointsFromCoordinates(input: unknown, pageHeight: number): number[] | null;
+export declare function rectFromQuadPoints(input: unknown, transform: PageTransform): Rect | null;
+export declare function pointsFromInkList(input: unknown, transform: PageTransform): number[];
+export declare function linePointsFromCoordinates(input: unknown, transform: PageTransform): number[] | null;
 export declare function normalizedStrokeWidth(annotation: RawPdfAnnotation, fallback?: number, options?: StrokeWidthOptions): number;
 export declare function dashedBorder(annotation: RawPdfAnnotation): number[];
 export declare function hasArrowEnding(value: unknown): boolean;

package/dist/runtime/annotation/pdf-import/utils.js

@@ -14,6 +14,10 @@ import {
   isRawPdfAnnotation,
   isString
 } from "./types.js";
+import {
+  convertPdfPointToCanvas,
+  convertPdfRectToCanvas
+} from "./transform.js";
 const UNKNOWN_USER = "Unknown user";
 function clampColor(value) {
   if (!Number.isFinite(value)) return 0;
@@ -108,23 +112,18 @@ export function getComments(annotation, allAnnotations) {
   }
   return comments;
 }
-export function rectFromPdfRect(input, pageHeight) {
+export function rectFromPdfRect(input, transform) {
   if (!Array.isArray(input) || input.length < 4) return null;
   const [x1, y1, x2, y2] = input;
   if (!isNumber(x1) || !isNumber(y1) || !isNumber(x2) || !isNumber(y2)) return null;
-  return {
-    x: x1,
-    y: pageHeight - y2,
-    width: x2 - x1,
-    height: y2 - y1
-  };
+  return convertPdfRectToCanvas(transform, [x1, y1, x2, y2]);
 }
-export function pointFromPdfPoint(input, pageHeight) {
+export function pointFromPdfPoint(input, transform) {
   const pair = toNumericTuple(input, 2);
-  if (pair) return { x: pair[0], y: pageHeight - pair[1] };
+  if (pair) return convertPdfPointToCanvas(transform, pair[0], pair[1]);
   const point = asPoint(input);
   if (!point || !isNumber(point.x) || !isNumber(point.y)) return null;
-  return { x: point.x, y: pageHeight - point.y };
+  return convertPdfPointToCanvas(transform, point.x, point.y);
 }
 export function localPointFromPdfPoint(input) {
   const pair = toNumericTuple(input, 2);
@@ -133,55 +132,71 @@ export function localPointFromPdfPoint(input) {
   if (!point || !isNumber(point.x) || !isNumber(point.y)) return null;
   return { x: point.x, y: point.y };
 }
-export function rectFromQuadPoints(input, pageHeight) {
+function rawPdfPoint(input) {
+  const pair = toNumericTuple(input, 2);
+  if (pair) return [pair[0], pair[1]];
+  const point = asPoint(input);
+  if (point && isNumber(point.x) && isNumber(point.y)) return [point.x, point.y];
+  return null;
+}
+export function rectFromQuadPoints(input, transform) {
+  let raw = null;
   const numeric = toCoordinateList(input);
   if (numeric && numeric.length >= 8) {
-    const p02 = pointFromPdfPoint([numeric[0], numeric[1]], pageHeight);
-    const p12 = pointFromPdfPoint([numeric[2], numeric[3]], pageHeight);
-    const p32 = pointFromPdfPoint([numeric[6], numeric[7]], pageHeight);
-    if (!p02 || !p12 || !p32) return null;
-    return {
-      x: p02.x,
-      y: p02.y,
-      width: p12.x - p02.x,
-      height: p12.y - p32.y
-    };
+    raw = [
+      [numeric[0], numeric[1]],
+      [numeric[2], numeric[3]],
+      [numeric[4], numeric[5]],
+      [numeric[6], numeric[7]]
+    ];
+  } else if (Array.isArray(input) && input.length >= 4) {
+    const collected = [];
+    for (let i = 0; i < 4; i++) {
+      const p = rawPdfPoint(input[i]);
+      if (!p) return null;
+      collected.push(p);
+    }
+    raw = collected;
   }
-  if (!Array.isArray(input) || input.length < 4) return null;
-  const p0 = pointFromPdfPoint(input[0], pageHeight);
-  const p1 = pointFromPdfPoint(input[1], pageHeight);
-  const p3 = pointFromPdfPoint(input[3], pageHeight);
-  if (!p0 || !p1 || !p3) return null;
-  return {
-    x: p0.x,
-    y: p0.y,
-    width: p1.x - p0.x,
-    height: p1.y - p3.y
-  };
+  if (!raw) return null;
+  const xs = [];
+  const ys = [];
+  for (const [rx, ry] of raw) {
+    const p = convertPdfPointToCanvas(transform, rx, ry);
+    xs.push(p.x);
+    ys.push(p.y);
+  }
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
-export function pointsFromInkList(input, pageHeight) {
+export function pointsFromInkList(input, transform) {
   const numeric = toCoordinateList(input);
   if (numeric) {
     const points2 = [];
     for (let index = 0; index + 1 < numeric.length; index += 2) {
-      points2.push(numeric[index], pageHeight - numeric[index + 1]);
+      const p = convertPdfPointToCanvas(transform, numeric[index], numeric[index + 1]);
+      points2.push(p.x, p.y);
     }
     return points2;
   }
   if (!Array.isArray(input)) return [];
   const points = [];
   for (const item of input) {
-    const converted = pointFromPdfPoint(item, pageHeight);
+    const converted = pointFromPdfPoint(item, transform);
     if (!converted) continue;
     points.push(converted.x, converted.y);
   }
   return points;
 }
-export function linePointsFromCoordinates(input, pageHeight) {
+export function linePointsFromCoordinates(input, transform) {
   const tuple = toNumericTuple(input, 4);
   if (!tuple) return null;
-  const [x, y, x1, y1] = tuple;
-  return [x, pageHeight - y, x1, pageHeight - y1];
+  const a = convertPdfPointToCanvas(transform, tuple[0], tuple[1]);
+  const b = convertPdfPointToCanvas(transform, tuple[2], tuple[3]);
+  return [a.x, a.y, b.x, b.y];
 }
 export function normalizedStrokeWidth(annotation, fallback = 1, options = {}) {
   const borderStyle = asBorderStyle(annotation.borderStyle);

package/dist/runtime/components/AnnotationToolbar.vue

@@ -44,6 +44,17 @@
         {{ state.selectedAnnotations.value.length }} selected
       </span>
 
+      <!-- Edit text (free text only) -->
+      <button
+        v-if="isFreeText"
+        class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
+        title="Edit text"
+        data-testid="annotation-edit-text"
+        @click="onEditText"
+      >
+        <UIcon name="i-lucide-pencil" class="text-sm text-muted" />
+      </button>
+
       <!-- Delete -->
       <button
         class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
@@ -114,6 +125,11 @@ function onFontSizeChange(value) {
   ann.fontSize = fontSize;
   state.selectedAnnotation.value = { ...ann };
 }
+function onEditText() {
+  const ann = state.selectedAnnotation.value;
+  if (!ann || !state.painter.value) return;
+  void state.painter.value.editFreeText(ann.id);
+}
 function onDelete() {
   if (isMultiSelect.value) {
     const ids = state.selectedAnnotations.value.map((a) => a.id);

package/dist/runtime/components/FormFieldLayer.d.vue.ts

@@ -1,15 +1,12 @@
+import type { PageTransform } from '../annotation/pdf-import/transform.js';
 type __VLS_Props = {
     pageNumber: number;
     scale: number;
-    pageWidth: number;
-    pageHeight: number;
+    /** Carries displayed width/height plus the page's `/Rotate` and MediaBox
+     *  origin — the single source of truth for mapping `/Rect` to canvas. */
+    pageTransform: PageTransform;
     pointerEvents: string;
     zIndex: number;
-    /** PDF user-space origin offsets (`view[0]`, `view[1]`). Forwarded to
-     *  FormFieldWrapper so /Rect coordinates can be mapped to canvas space
-     *  when the page's MediaBox is not at (0, 0). */
-    viewOffsetX?: number;
-    viewOffsetY?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/FormFieldLayer.vue

@@ -6,8 +6,8 @@
   position: 'absolute',
   top: 0,
   left: 0,
-  width: props.pageWidth + 'px',
-  height: props.pageHeight + 'px',
+  width: props.pageTransform.width + 'px',
+  height: props.pageTransform.height + 'px',
   transform: `scale(${props.scale})`,
   transformOrigin: '0 0',
   zIndex: props.zIndex,
@@ -22,10 +22,8 @@
       v-for="field in fields"
       :key="field.id"
       :field="field"
-      :page-height="props.pageHeight"
+      :page-transform="props.pageTransform"
       :scale="props.scale"
-      :view-offset-x="props.viewOffsetX ?? 0"
-      :view-offset-y="props.viewOffsetY ?? 0"
       :selected="selectedFieldId === field.id"
       @select="formFields.selectPlacedField(field.id)"
     />
@@ -41,12 +39,9 @@ import FormFieldWrapper from "./form-fields/FormFieldWrapper.vue";
 const props = defineProps({
   pageNumber: { type: Number, required: true },
   scale: { type: Number, required: true },
-  pageWidth: { type: Number, required: true },
-  pageHeight: { type: Number, required: true },
+  pageTransform: { type: Object, required: true },
   pointerEvents: { type: String, required: true },
-  zIndex: { type: Number, required: true },
-  viewOffsetX: { type: Number, required: false },
-  viewOffsetY: { type: Number, required: false }
+  zIndex: { type: Number, required: true }
 });
 const formFields = useFormFields();
 const state = useViewerState();

package/dist/runtime/components/FormFieldLayer.vue.d.ts

@@ -1,15 +1,12 @@
+import type { PageTransform } from '../annotation/pdf-import/transform.js';
 type __VLS_Props = {
     pageNumber: number;
     scale: number;
-    pageWidth: number;
-    pageHeight: number;
+    /** Carries displayed width/height plus the page's `/Rotate` and MediaBox
+     *  origin — the single source of truth for mapping `/Rect` to canvas. */
+    pageTransform: PageTransform;
     pointerEvents: string;
     zIndex: number;
-    /** PDF user-space origin offsets (`view[0]`, `view[1]`). Forwarded to
-     *  FormFieldWrapper so /Rect coordinates can be mapped to canvas space
-     *  when the page's MediaBox is not at (0, 0). */
-    viewOffsetX?: number;
-    viewOffsetY?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/PdfPage.vue

@@ -29,10 +29,7 @@
     <FormFieldLayer
       :page-number="props.pageNumber"
       :scale="props.scale"
-      :page-width="baseWidth"
-      :page-height="baseHeight"
-      :view-offset-x="viewOffsetX"
-      :view-offset-y="viewOffsetY"
+      :page-transform="props.pageMeta"
       :pointer-events="formFieldPointerEvents"
       :z-index="formFieldZIndex"
     />
@@ -86,8 +83,6 @@ let currentRenderTask = null;
 let textLayer = null;
 const baseWidth = props.pageMeta.width;
 const baseHeight = props.pageMeta.height;
-const viewOffsetX = props.pageMeta.viewOffsetX ?? 0;
-const viewOffsetY = props.pageMeta.viewOffsetY ?? 0;
 const cssWidth = computed(() => baseWidth * props.scale);
 const cssHeight = computed(() => baseHeight * props.scale);
 const isAnnotating = computed(() => {

package/dist/runtime/components/Viewer.d.vue.ts

@@ -84,12 +84,24 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     setFormEditMode: (enabled: boolean) => void;
     /** Flip form-edit mode. Returns the new state. */
     toggleFormEditMode: () => boolean;
+    /** True once the user has viewed every page — each page has entered the
+     *  viewport at least once. Use to gate a "must read all pages" sign action.
+     *  See also the `all-pages-read` event for a push-style signal. */
+    allPagesRead: () => boolean;
+    /** Page numbers viewed so far, ascending. */
+    getViewedPages: () => number[];
+    /** Clear viewed-page tracking, e.g. to restart a signing session. */
+    resetViewedPages: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "all-pages-read": () => any;
     "update:formEditMode": (value: boolean) => any;
     "update:activeRoleId": (value: string | null) => any;
+    "update:viewedPages": (pages: number[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onAll-pages-read"?: (() => any) | undefined;
     "onUpdate:formEditMode"?: ((value: boolean) => any) | undefined;
     "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
+    "onUpdate:viewedPages"?: ((pages: number[]) => any) | undefined;
 }>, {
     userName: string;
     freehandGroupingDelay: number;

package/dist/runtime/components/Viewer.vue

@@ -229,7 +229,7 @@ const props = defineProps({
   scripting: { type: Boolean, required: false, default: false },
   menuItems: { type: Array, required: false, default: void 0 }
 });
-const emit = defineEmits(["update:formEditMode", "update:activeRoleId"]);
+const emit = defineEmits(["update:formEditMode", "update:activeRoleId", "update:viewedPages", "all-pages-read"]);
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
 const { state: viewerState, setScrollToPageFn, setDownloadPdfFn } = provideViewerState();
@@ -306,6 +306,31 @@ watch(
     viewerState.currentPage.value = page;
   }
 );
+watch(
+  () => viewerState.currentPage.value,
+  (page) => virtualization.markPageViewed(page),
+  { immediate: true }
+);
+watch(
+  () => pageMetas.value.length,
+  (len) => {
+    if (len > 0 && !isSinglePageMode.value) {
+      nextTick(() => virtualization.updateCurrentPageByRect());
+    }
+  }
+);
+watch(
+  virtualization.allPagesRead,
+  (read, prev) => {
+    if (read && !prev) emit("all-pages-read");
+  }
+);
+watch(
+  virtualization.viewedPages,
+  (pages) => {
+    emit("update:viewedPages", [...pages].sort((a, b) => a - b));
+  }
+);
 function onPageRef(pageNumber, el) {
   if (el) {
     virtualization.observePage(pageNumber, el);
@@ -892,7 +917,15 @@ defineExpose({
     const next = !viewerState.formEditMode.value;
     viewerState.setFormEditMode(next);
     return next;
-  }
+  },
+  /** True once the user has viewed every page — each page has entered the
+   *  viewport at least once. Use to gate a "must read all pages" sign action.
+   *  See also the `all-pages-read` event for a push-style signal. */
+  allPagesRead: () => virtualization.allPagesRead.value,
+  /** Page numbers viewed so far, ascending. */
+  getViewedPages: () => [...virtualization.viewedPages.value].sort((a, b) => a - b),
+  /** Clear viewed-page tracking, e.g. to restart a signing session. */
+  resetViewedPages: () => virtualization.resetViewedPages()
 });
 </script>
 

package/dist/runtime/components/Viewer.vue.d.ts

@@ -84,12 +84,24 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     setFormEditMode: (enabled: boolean) => void;
     /** Flip form-edit mode. Returns the new state. */
     toggleFormEditMode: () => boolean;
+    /** True once the user has viewed every page — each page has entered the
+     *  viewport at least once. Use to gate a "must read all pages" sign action.
+     *  See also the `all-pages-read` event for a push-style signal. */
+    allPagesRead: () => boolean;
+    /** Page numbers viewed so far, ascending. */
+    getViewedPages: () => number[];
+    /** Clear viewed-page tracking, e.g. to restart a signing session. */
+    resetViewedPages: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "all-pages-read": () => any;
     "update:formEditMode": (value: boolean) => any;
     "update:activeRoleId": (value: string | null) => any;
+    "update:viewedPages": (pages: number[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onAll-pages-read"?: (() => any) | undefined;
     "onUpdate:formEditMode"?: ((value: boolean) => any) | undefined;
     "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
+    "onUpdate:viewedPages"?: ((pages: number[]) => any) | undefined;
 }>, {
     userName: string;
     freehandGroupingDelay: number;

package/dist/runtime/components/form-fields/FormFieldWrapper.d.vue.ts

@@ -1,13 +1,12 @@
 import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+import { type PageTransform } from '../../annotation/pdf-import/transform.js';
 type __VLS_Props = {
     field: FormFieldDefinition;
-    pageHeight: number;
+    /** Coord transform for this page. `/Rect` is in unrotated user space; the
+     *  transform applies the page's `/Rotate` and the MediaBox origin so the
+     *  field lands at the right canvas position regardless of page rotation. */
+    pageTransform: PageTransform;
     scale: number;
-    /** PDF user-space origin (view[0], view[1]). /Rect coords are in
-     *  default user space; the canvas top-left corresponds to PDF
-     *  (viewOffsetX, viewOffsetY + pageHeight), so we have to subtract. */
-    viewOffsetX?: number;
-    viewOffsetY?: number;
     selected: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

package/dist/runtime/components/form-fields/FormFieldWrapper.vue

@@ -26,7 +26,7 @@
       :field="props.field"
       :selected="props.selected"
       :scale="props.scale"
-      :page-height="props.pageHeight"
+      :page-height="props.pageTransform.height"
       @select="emit('select')"
     />
   </div>
@@ -34,6 +34,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { convertPdfRectToCanvas } from "../../annotation/pdf-import/transform";
 import { useViewerState } from "../../composables/useViewerState";
 import { useFormFields } from "../../composables/useFormFields";
 import FormTextField from "./FormTextField.vue";
@@ -45,10 +46,8 @@ import FormButton from "./FormButton.vue";
 import PlacedFieldChrome from "./PlacedFieldChrome.vue";
 const props = defineProps({
   field: { type: Object, required: true },
-  pageHeight: { type: Number, required: true },
+  pageTransform: { type: Object, required: true },
   scale: { type: Number, required: true },
-  viewOffsetX: { type: Number, required: false },
-  viewOffsetY: { type: Number, required: false },
   selected: { type: Boolean, required: true }
 });
 const emit = defineEmits(["select"]);
@@ -64,18 +63,13 @@ const chromeColor = computed(() => {
 });
 const positionStyle = computed(() => {
   const rect = props.field.rect;
-  const vx = props.viewOffsetX ?? 0;
-  const vy = props.viewOffsetY ?? 0;
-  const left = rect[0] - vx;
-  const top = props.pageHeight + vy - rect[3];
-  const width = rect[2] - rect[0];
-  const height = rect[3] - rect[1];
+  const r = convertPdfRectToCanvas(props.pageTransform, [rect[0], rect[1], rect[2], rect[3]]);
   return {
     position: "absolute",
-    left: `${left}px`,
-    top: `${top}px`,
-    width: `${width}px`,
-    height: `${height}px`
+    left: `${r.x}px`,
+    top: `${r.y}px`,
+    width: `${r.width}px`,
+    height: `${r.height}px`
   };
 });
 </script>

package/dist/runtime/components/form-fields/FormFieldWrapper.vue.d.ts

@@ -1,13 +1,12 @@
 import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+import { type PageTransform } from '../../annotation/pdf-import/transform.js';
 type __VLS_Props = {
     field: FormFieldDefinition;
-    pageHeight: number;
+    /** Coord transform for this page. `/Rect` is in unrotated user space; the
+     *  transform applies the page's `/Rotate` and the MediaBox origin so the
+     *  field lands at the right canvas position regardless of page rotation. */
+    pageTransform: PageTransform;
     scale: number;
-    /** PDF user-space origin (view[0], view[1]). /Rect coords are in
-     *  default user space; the canvas top-left corresponds to PDF
-     *  (viewOffsetX, viewOffsetY + pageHeight), so we have to subtract. */
-    viewOffsetX?: number;
-    viewOffsetY?: number;
     selected: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

package/dist/runtime/composables/usePageVirtualization.d.ts

@@ -2,8 +2,14 @@ import { type ShallowRef, type ComputedRef, type Ref } from 'vue';
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 export interface PageMeta {
     pageNumber: number;
+    /** Displayed page width — already accounts for the page's intrinsic
+     *  `/Rotate`, so width/height are swapped for 90°/270° pages. */
     width: number;
     height: number;
+    /** The page's intrinsic `/Rotate` value, normalized to 0 | 90 | 180 | 270.
+     *  `getViewport()` bakes this in by default; annotation layers that map
+     *  unrotated `/Rect` coordinates need it to apply the same rotation. */
+    rotation: number;
     /** PDF user-space origin of the page's visible area (`view[0]`, `view[1]`).
      *  Almost always (0, 0); non-zero for PDFs whose MediaBox has been
      *  shifted. Annotations in `/Rect` are in default user space, so any
@@ -15,6 +21,17 @@ export interface PageVirtualization {
     pageMetas: ShallowRef<PageMeta[]>;
     currentPage: Ref<number>;
     renderedPages: ComputedRef<Set<number>>;
+    /** Pages that have entered the viewport at least once since the document
+     *  loaded (or since the last `resetViewedPages()`). Marked from scroll/pan
+     *  geometry — not render state — so a fast fling that skips rendering the
+     *  middle pages still counts them as viewed. */
+    viewedPages: ShallowRef<Set<number>>;
+    /** True once every page has been viewed. */
+    allPagesRead: ComputedRef<boolean>;
+    /** Mark a single page as viewed (used by single-page navigation). */
+    markPageViewed: (pageNumber: number) => void;
+    /** Clear the viewed-pages set, e.g. to start a fresh signing session. */
+    resetViewedPages: () => void;
     isPageRendered: (pageNumber: number) => boolean;
     observePage: (pageNumber: number, element: HTMLElement) => void;
     unobservePage: (pageNumber: number) => void;

package/dist/runtime/composables/usePageVirtualization.js

@@ -5,6 +5,30 @@ export function createPageVirtualization() {
   const pageMetas = shallowRef([]);
   const currentPage = ref(1);
   const visiblePages = shallowRef(/* @__PURE__ */ new Set());
+  const viewedPages = shallowRef(/* @__PURE__ */ new Set());
+  const allPagesRead = computed(() => {
+    const total = pageMetas.value.length;
+    return total > 0 && viewedPages.value.size >= total;
+  });
+  function markPageViewed(pageNumber) {
+    if (viewedPages.value.has(pageNumber)) return;
+    const next = new Set(viewedPages.value);
+    next.add(pageNumber);
+    viewedPages.value = next;
+  }
+  function markPagesViewed(pageNumbers) {
+    let next = null;
+    for (const n of pageNumbers) {
+      if (viewedPages.value.has(n) || next?.has(n)) continue;
+      if (!next) next = new Set(viewedPages.value);
+      next.add(n);
+    }
+    if (next) viewedPages.value = next;
+  }
+  function resetViewedPages() {
+    if (viewedPages.value.size === 0) return;
+    viewedPages.value = /* @__PURE__ */ new Set();
+  }
   let observer = null;
   let scrollRoot = null;
   let scrollListener = null;
@@ -88,12 +112,19 @@ export function createPageVirtualization() {
     if (bestPage !== currentPage.value) {
       currentPage.value = bestPage;
     }
+    const viewportBottom = rootTop + scrollRoot.clientHeight;
+    const reached = [];
+    for (const [pageNum, el] of pageToElement) {
+      if (el.offsetTop < viewportBottom) reached.push(pageNum);
+    }
+    markPagesViewed(reached);
   }
   function scrollToPage(pageNumber) {
     const element = pageToElement.get(pageNumber);
     if (element && scrollRoot) {
       element.scrollIntoView({ block: "start", behavior: "instant" });
       currentPage.value = pageNumber;
+      markPageViewed(pageNumber);
     }
   }
   function getPageElement(pageNumber) {
@@ -103,8 +134,10 @@ export function createPageVirtualization() {
     if (!scrollRoot) return;
     const rootRect = scrollRoot.getBoundingClientRect();
     const rootMid = rootRect.top + rootRect.height / 2;
+    const rootBottom = rootRect.top + rootRect.height;
     let bestPage = currentPage.value;
     let bestDist = Infinity;
+    const reached = [];
     for (const [pageNum, el] of pageToElement) {
       const rect = el.getBoundingClientRect();
       const dist = rootMid < rect.top ? rect.top - rootMid : rootMid > rect.bottom ? rootMid - rect.bottom : 0;
@@ -112,7 +145,9 @@ export function createPageVirtualization() {
         bestDist = dist;
         bestPage = pageNum;
       }
+      if (rect.top < rootBottom) reached.push(pageNum);
     }
+    markPagesViewed(reached);
     if (bestPage !== currentPage.value) {
       currentPage.value = bestPage;
     }
@@ -124,10 +159,15 @@ export function createPageVirtualization() {
     const vy = view[1] ?? 0;
     const vw = view[2] ?? 0;
     const vh = view[3] ?? 0;
+    const w = vw - vx;
+    const h = vh - vy;
+    const rotation = (proxy.rotate % 360 + 360) % 360;
+    const swap = rotation % 180 !== 0;
     return {
       pageNumber,
-      width: vw - vx,
-      height: vh - vy,
+      width: swap ? h : w,
+      height: swap ? w : h,
+      rotation,
       viewOffsetX: vx,
       viewOffsetY: vy
     };
@@ -146,6 +186,7 @@ export function createPageVirtualization() {
           pageNumber: i,
           width: firstMeta.width,
           height: firstMeta.height,
+          rotation: firstMeta.rotation,
           viewOffsetX: firstMeta.viewOffsetX,
           viewOffsetY: firstMeta.viewOffsetY
         });
@@ -215,6 +256,7 @@ export function createPageVirtualization() {
     elementToPage.clear();
     pageToElement.clear();
     visiblePages.value = /* @__PURE__ */ new Set();
+    viewedPages.value = /* @__PURE__ */ new Set();
     pageMetas.value = [];
     scrollRoot = null;
   }
@@ -222,6 +264,10 @@ export function createPageVirtualization() {
     pageMetas,
     currentPage,
     renderedPages,
+    viewedPages,
+    allPagesRead,
+    markPageViewed,
+    resetViewedPages,
     isPageRendered,
     observePage,
     unobservePage,