kviewer 0.0.4 → 0.0.6

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

@@ -0,0 +1,250 @@
+import Konva from "konva";
+import { annotationDefinitions } from "../engine/config.js";
+import { SHAPE_GROUP_NAME } from "../engine/const.js";
+import {
+  PdfjsAnnotationEditorType
+} from "../engine/types.js";
+import { formatTimestamp } from "../engine/utils.js";
+import {
+  asBorderStyle,
+  asPoint,
+  asTextObject,
+  isNumber,
+  isRecord,
+  isRawPdfAnnotation,
+  isString
+} from "./types.js";
+const UNKNOWN_USER = "Unknown user";
+function clampColor(value) {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(255, Math.round(value)));
+}
+function normalizeColorComponent(value) {
+  if (value >= 0 && value <= 1) return clampColor(value * 255);
+  return clampColor(value);
+}
+function getDefinition(type) {
+  return annotationDefinitions.find((def) => def.type === type) ?? null;
+}
+function getIndexedNumber(input, index) {
+  if (Array.isArray(input) || ArrayBuffer.isView(input)) {
+    const value = input[index];
+    return isNumber(value) ? value : null;
+  }
+  if (isRecord(input)) {
+    const value = input[String(index)];
+    return isNumber(value) ? value : null;
+  }
+  return null;
+}
+function toNumericTuple(input, size) {
+  const tuple = [];
+  for (let index = 0; index < size; index++) {
+    const value = getIndexedNumber(input, index);
+    if (!isNumber(value)) return null;
+    tuple.push(value);
+  }
+  return tuple;
+}
+function toCoordinateList(input) {
+  if (!Array.isArray(input) && !ArrayBuffer.isView(input)) return null;
+  const list = input;
+  const values = [];
+  for (let index = 0; index < list.length; index++) {
+    const value = list[index];
+    if (!isNumber(value)) return null;
+    values.push(value);
+  }
+  return values;
+}
+export function colorArrayToRgb(input) {
+  const tuple = toNumericTuple(input, 3);
+  if (!tuple) return null;
+  const [r, g, b] = tuple;
+  return `rgb(${normalizeColorComponent(r)}, ${normalizeColorComponent(g)}, ${normalizeColorComponent(b)})`;
+}
+export function getAnnotationColor(annotation, type) {
+  const decoded = colorArrayToRgb(annotation.color);
+  if (decoded) return decoded;
+  const fallback = getDefinition(type)?.style?.color;
+  return fallback ?? "rgb(255, 0, 0)";
+}
+export function getAnnotationTitle(annotation) {
+  const title = asTextObject(annotation.titleObj)?.str;
+  if (isString(title) && title.length > 0) return title;
+  return UNKNOWN_USER;
+}
+export function getAnnotationText(annotation) {
+  const text = asTextObject(annotation.contentsObj)?.str;
+  if (isString(text)) return text;
+  return "";
+}
+export function getFreeTextContent(annotation) {
+  if (isString(annotation.textContent)) return annotation.textContent;
+  if (Array.isArray(annotation.textContent)) {
+    const lines = annotation.textContent.filter((line) => isString(line));
+    if (lines.length > 0) return lines.join("\n");
+  }
+  return getAnnotationText(annotation);
+}
+export function getAnnotationDate(annotation) {
+  if (isString(annotation.modificationDate) && annotation.modificationDate.length > 0) {
+    return annotation.modificationDate;
+  }
+  return formatTimestamp(Date.now());
+}
+export function getComments(annotation, allAnnotations) {
+  const comments = [];
+  for (const candidate of allAnnotations) {
+    if (!isRawPdfAnnotation(candidate)) continue;
+    if (candidate.annotationType !== 1) continue;
+    if (candidate.inReplyTo !== annotation.id) continue;
+    comments.push({
+      id: candidate.id,
+      title: getAnnotationTitle(candidate),
+      date: getAnnotationDate(candidate),
+      content: getAnnotationText(candidate)
+    });
+  }
+  return comments;
+}
+export function rectFromPdfRect(input, pageHeight) {
+  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
+  };
+}
+export function pointFromPdfPoint(input, pageHeight) {
+  const pair = toNumericTuple(input, 2);
+  if (pair) return { x: pair[0], y: pageHeight - pair[1] };
+  const point = asPoint(input);
+  if (!point || !isNumber(point.x) || !isNumber(point.y)) return null;
+  return { x: point.x, y: pageHeight - point.y };
+}
+export function localPointFromPdfPoint(input) {
+  const pair = toNumericTuple(input, 2);
+  if (pair) return { x: pair[0], y: pair[1] };
+  const point = asPoint(input);
+  if (!point || !isNumber(point.x) || !isNumber(point.y)) return null;
+  return { x: point.x, y: point.y };
+}
+export function rectFromQuadPoints(input, pageHeight) {
+  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
+    };
+  }
+  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
+  };
+}
+export function pointsFromInkList(input, pageHeight) {
+  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]);
+    }
+    return points2;
+  }
+  if (!Array.isArray(input)) return [];
+  const points = [];
+  for (const item of input) {
+    const converted = pointFromPdfPoint(item, pageHeight);
+    if (!converted) continue;
+    points.push(converted.x, converted.y);
+  }
+  return points;
+}
+export function linePointsFromCoordinates(input, pageHeight) {
+  const tuple = toNumericTuple(input, 4);
+  if (!tuple) return null;
+  const [x, y, x1, y1] = tuple;
+  return [x, pageHeight - y, x1, pageHeight - y1];
+}
+export function normalizedStrokeWidth(annotation, fallback = 1, options = {}) {
+  const borderStyle = asBorderStyle(annotation.borderStyle);
+  const width = isNumber(borderStyle?.width) && borderStyle.width > 0 ? borderStyle.width : null;
+  const rawWidth = isNumber(borderStyle?.rawWidth) && borderStyle.rawWidth > 0 ? borderStyle.rawWidth : null;
+  const preferRawWidth = options.preferRawWidth === true;
+  const resolvedWidth = preferRawWidth && isNumber(rawWidth) && (!isNumber(width) || rawWidth > width) ? rawWidth : width ?? rawWidth;
+  if (!isNumber(resolvedWidth)) return fallback;
+  return resolvedWidth === 1 ? 2 : Math.max(0.1, resolvedWidth);
+}
+export function dashedBorder(annotation) {
+  const borderStyle = asBorderStyle(annotation.borderStyle);
+  if (!borderStyle) return [];
+  const style = borderStyle.style;
+  const dashArray = toCoordinateList(borderStyle.dashArray);
+  if (style !== 2 || !dashArray) return [];
+  return dashArray;
+}
+export function hasArrowEnding(value) {
+  if (!isString(value)) return false;
+  return value.toLowerCase() !== "none";
+}
+export function createGhostGroup(id) {
+  return new Konva.Group({
+    draggable: false,
+    name: SHAPE_GROUP_NAME,
+    id
+  });
+}
+export function createAnnotationStore(params) {
+  const {
+    annotation,
+    allAnnotations,
+    pageNumber,
+    type,
+    group,
+    color,
+    fontSize,
+    contentsText,
+    contentsImage,
+    overrideSubtype
+  } = params;
+  const def = getDefinition(type);
+  const pdfjsType = isNumber(annotation.annotationType) ? annotation.annotationType : def?.pdfjsAnnotationType ?? 0;
+  return {
+    id: annotation.id,
+    pageNumber,
+    konvaString: group.toJSON(),
+    konvaClientRect: group.getClientRect(),
+    title: getAnnotationTitle(annotation),
+    type,
+    color: color ?? def?.style?.color ?? null,
+    subtype: overrideSubtype ?? (isString(annotation.subtype) ? annotation.subtype : def?.subtype ?? "Text"),
+    fontSize: fontSize ?? def?.style?.fontSize ?? null,
+    pdfjsType,
+    pdfjsEditorType: def?.pdfjsEditorType ?? PdfjsAnnotationEditorType.NONE,
+    date: getAnnotationDate(annotation),
+    contentsObj: {
+      text: contentsText ?? getAnnotationText(annotation),
+      image: contentsImage
+    },
+    comments: getComments(annotation, allAnnotations),
+    resizable: def?.resizable ?? false,
+    draggable: def?.draggable ?? false
+  };
+}

package/dist/runtime/assets/kviewer.css

@@ -1 +1 @@
-.kviewer-text-layer{left:0;line-height:1;overflow:hidden;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.kviewer-text-layer--interactive{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.KViewer_is_painting.KViewer_painting_type_12 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_12 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_13 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_13 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_5 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_5 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_6 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_6 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_7 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_7 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_8 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_8 .kviewer-annotation-layer *{cursor:crosshair!important}.KViewer_is_painting.KViewer_painting_type_4 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_4 .kviewer-annotation-layer *{cursor:text!important}.KViewer_is_painting.KViewer_painting_type_11 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_11 .kviewer-annotation-layer *{cursor:crosshair!important}.KViewer_selector_hover{cursor:pointer!important}.kviewer-form-layer{left:0;overflow:hidden;position:absolute;top:0}.kviewer-form-field{box-sizing:border-box;position:absolute}.kviewer-form-input{background-color:rgba(224,232,255,.6);border:1px solid transparent;box-sizing:border-box;color:#000;font-family:inherit;height:100%;line-height:normal;margin:0;outline:none;padding:1px 2px;resize:none;width:100%}.kviewer-form-input:hover{background-color:rgba(224,232,255,.8);border-color:rgba(0,0,0,.2)}.kviewer-form-input:focus{background-color:rgba(224,232,255,.9);border-color:var(--color-primary,#3b82f6);outline:2px solid var(--color-primary,#3b82f6)}.kviewer-form-select{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;cursor:pointer}.kviewer-form-listbox{overflow-y:auto;padding:0}.kviewer-form-listbox option{padding:1px 3px}.kviewer-form-editable-combo{height:100%;position:relative;width:100%}.kviewer-form-editable-combo input{height:100%;width:100%}.kviewer-form-checkbox,.kviewer-form-radio{align-items:center;background:#fff;display:flex;height:100%;justify-content:center;width:100%}.kviewer-form-checkbox input,.kviewer-form-radio input{accent-color:var(--color-primary,#3b82f6);cursor:pointer;height:80%;margin:0;max-height:18px;max-width:18px;width:80%}.kviewer-form-button{background:linear-gradient(180deg,#f0f0f0,#d0d0d0);border:1px solid rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;font-family:inherit;font-weight:600;height:100%;padding:2px 6px;text-align:center;width:100%}.kviewer-form-button:hover{background:linear-gradient(180deg,#e8e8e8,#c8c8c8)}.kviewer-form-button:active{background:linear-gradient(180deg,#c8c8c8,#d0d0d0)}.kviewer-form-signature{align-items:center;background:rgba(255,255,200,.15);border:1px dashed rgba(0,0,0,.2);cursor:pointer;display:flex;height:100%;justify-content:center;width:100%}.kviewer-form-signature:hover{background:rgba(59,130,246,.08);border-color:var(--color-primary,#3b82f6)}.kviewer-form-signature--filled{background:transparent;border-color:transparent;border-style:solid}.kviewer-form-signature__preview{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.kviewer-form-signature__placeholder{color:rgba(0,0,0,.4);font-size:10px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+.kviewer-text-layer{left:0;line-height:1;overflow:hidden;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.kviewer-text-layer--interactive{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.KViewer_is_painting.KViewer_painting_type_12 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_12 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_13 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_13 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_5 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_5 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_6 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_6 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_7 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_7 .kviewer-annotation-layer *,.KViewer_is_painting.KViewer_painting_type_8 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_8 .kviewer-annotation-layer *{cursor:crosshair!important}.KViewer_is_painting.KViewer_painting_type_4 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_4 .kviewer-annotation-layer *{cursor:text!important}.KViewer_is_painting.KViewer_painting_type_11 .kviewer-annotation-layer,.KViewer_is_painting.KViewer_painting_type_11 .kviewer-annotation-layer *{cursor:crosshair!important}.KViewer_selector_hover{cursor:pointer!important}.kviewer-form-layer{left:0;overflow:hidden;position:absolute;top:0}.kviewer-form-field{box-sizing:border-box;position:absolute}.kviewer-form-input{background-color:rgba(224,232,255,.6);border:1px solid transparent;box-sizing:border-box;color:#000;font-family:inherit;height:100%;line-height:normal;margin:0;outline:none;padding:1px 2px;resize:none;width:100%}.kviewer-form-input:hover{background-color:rgba(224,232,255,.8);border-color:rgba(0,0,0,.2)}.kviewer-form-input:focus{background-color:rgba(224,232,255,.9);border-color:var(--color-primary,#3b82f6);outline:2px solid var(--color-primary,#3b82f6)}.kviewer-form-select{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;cursor:pointer}.kviewer-form-listbox{overflow-y:auto;padding:0}.kviewer-form-listbox option{padding:1px 3px}.kviewer-form-editable-combo{height:100%;position:relative;width:100%}.kviewer-form-editable-combo input{height:100%;width:100%}.kviewer-form-checkbox,.kviewer-form-radio{align-items:center;background:#fff;box-sizing:border-box;cursor:pointer;display:flex;height:100%;justify-content:center;width:100%}.kviewer-form-checkbox input,.kviewer-form-radio input{accent-color:var(--color-primary,#3b82f6);cursor:pointer;height:80%;margin:0;max-height:18px;max-width:18px;width:80%}.kviewer-form-checkbox--detected{background:transparent}.kviewer-form-checkbox--circle{border-radius:50%}.kviewer-form-checkbox__icon{color:#1a1a1a;height:65%;width:65%}.kviewer-form-checkbox--circle .kviewer-form-checkbox__icon{height:50%;width:50%}.kviewer-form-radio input{accent-color:var(--color-primary,#3b82f6);cursor:pointer;height:80%;margin:0;max-height:18px;max-width:18px;width:80%}.kviewer-form-button{background:linear-gradient(180deg,#f0f0f0,#d0d0d0);border:1px solid rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;font-family:inherit;font-weight:600;height:100%;padding:2px 6px;text-align:center;width:100%}.kviewer-form-button:hover{background:linear-gradient(180deg,#e8e8e8,#c8c8c8)}.kviewer-form-button:active{background:linear-gradient(180deg,#c8c8c8,#d0d0d0)}.kviewer-form-signature{align-items:center;background:rgba(255,255,200,.15);border:1px dashed rgba(0,0,0,.2);cursor:pointer;display:flex;height:100%;justify-content:center;width:100%}.kviewer-form-signature:hover{background:rgba(59,130,246,.08);border-color:var(--color-primary,#3b82f6)}.kviewer-form-signature--filled{background:transparent;border-color:transparent;border-style:solid}.kviewer-form-signature__preview{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.kviewer-form-signature__placeholder{color:rgba(0,0,0,.4);font-size:10px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}

package/dist/runtime/components/AnnotationToolbar.vue

@@ -48,6 +48,7 @@
       <button
         class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
         title="Delete"
+        data-testid="annotation-delete"
         @click="onDelete"
       >
         <UIcon name="i-lucide-trash-2" class="text-sm text-error" />

package/dist/runtime/components/FloatingPageIndicator.vue

@@ -11,16 +11,18 @@
       class="relative z-10 flex items-center gap-1 bg-elevated rounded-full px-1 py-0.5 shadow-md
              transition-opacity duration-300"
       :class="visible ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+      data-testid="page-indicator"
     >
       <UButton
         icon="i-lucide-chevron-left"
         variant="ghost"
         color="neutral"
         size="xs"
+        data-testid="page-prev"
         :disabled="state.currentPage.value <= 1"
         @click="goToPreviousPage"
       />
-      <span class="text-sm text-muted tabular-nums px-1 select-none">
+      <span class="text-sm text-muted tabular-nums px-1 select-none" data-testid="page-indicator-text">
         {{ state.currentPage.value }} / {{ state.totalPages.value }}
       </span>
       <UButton
@@ -28,6 +30,7 @@
         variant="ghost"
         color="neutral"
         size="xs"
+        data-testid="page-next"
         :disabled="state.currentPage.value >= state.totalPages.value"
         @click="goToNextPage"
       />

package/dist/runtime/components/PdfPage.vue

@@ -56,8 +56,10 @@ import { useViewerState } from "../composables/useViewerState";
 import { useViewerSearch } from "../composables/useViewerSearch";
 import { usePageProxyCache } from "../composables/usePageProxyCache";
 import { useFormFields } from "../composables/useFormFields";
+import { useShapeDetection } from "../composables/useShapeDetection";
 import { AnnotationType } from "../annotation/engine/types";
 import FormFieldLayer from "./FormFieldLayer.vue";
+const PDFJS_ANNOTATION_MODE_DISABLE = 0;
 const props = defineProps({
   pageNumber: { type: Number, required: true },
   pageMeta: { type: Object, required: true },
@@ -70,6 +72,7 @@ const state = useViewerState();
 const search = useViewerSearch();
 const proxyCache = usePageProxyCache();
 const formFields = useFormFields();
+const shapeDetection = useShapeDetection();
 const pageProxy = shallowRef(null);
 let currentRenderTask = null;
 let textLayer = null;
@@ -104,17 +107,38 @@ onMounted(async () => {
     const rawAnnotations = await pageProxy.value.getAnnotations();
     formFields.parsePageFields(props.pageNumber, rawAnnotations);
   }
+  if (state.shapeDetection.value && pageProxy.value) {
+    const viewport = pageProxy.value.getViewport({ scale: props.scale });
+    const shapes = await shapeDetection.preprocessShapesForPage(
+      props.pageNumber,
+      pageProxy.value,
+      viewport
+    );
+    if (shapes.length > 0) {
+      formFields.registerDetectedCheckboxes(
+        props.pageNumber,
+        shapes,
+        props.scale,
+        baseHeight
+      );
+    }
+  }
 });
 watch(
   () => props.scale,
   async () => {
     if (!pageProxy.value) return;
+    shapeDetection.clearShapeCache(props.pageNumber);
     await renderCanvas();
     updateTextLayer();
     if (state.painter.value) {
       state.painter.value.destroyCanvasForPage(props.pageNumber);
       initKonva();
     }
+    if (pageProxy.value) {
+      const viewport = pageProxy.value.getViewport({ scale: props.scale });
+      shapeDetection.preprocessShapesForPage(props.pageNumber, pageProxy.value, viewport);
+    }
   }
 );
 async function renderCanvas() {
@@ -134,7 +158,8 @@ async function renderCanvas() {
   try {
     currentRenderTask = proxy.render({
       canvasContext: canvas.getContext("2d"),
-      viewport
+      viewport,
+      annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
     });
     await currentRenderTask.promise;
   } catch (e) {
@@ -200,6 +225,7 @@ onBeforeUnmount(() => {
   textLayer?.cancel();
   textLayer = null;
   search.unregisterPageLayer(props.pageNumber);
+  shapeDetection.clearShapeCache(props.pageNumber);
   state.painter.value?.destroyCanvasForPage(props.pageNumber);
 });
 </script>

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

@@ -11,6 +11,8 @@ type __VLS_Props = {
     zoom?: number;
     /** When true, the viewer is in view-only mode: annotations, drawing tools, and form editing are disabled. */
     readonly?: boolean;
+    /** When true, auto-detect checkbox-like shapes (squares, circles) and create interactive form field checkboxes. */
+    shapeDetection?: boolean;
     /** When false, global keyboard shortcuts (e.g. Cmd+F) are suppressed. Used by ViewerTabs to prevent hidden viewers from capturing input. */
     active?: boolean;
 };
@@ -36,7 +38,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getKonvaCanvasState: typeof getKonvaCanvasState;
     getFormFieldValues: () => import("../annotation/engine/types.js").FormFieldValue[];
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    userName: string;
+    zoom: number;
+    readonly: boolean;
+    active: boolean;
+    stamps: StampDefinition[];
+    signatureHandlers: SignatureHandlers;
+    viewMode: ViewMode;
+    shapeDetection: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Viewer.vue

@@ -10,8 +10,35 @@
         ref="scrollContainer"
         class="absolute inset-0 overflow-auto bg-muted/50"
         :class="{ 'overflow-hidden': isSinglePageMode }"
+        data-testid="viewer-scroll"
       >
-        <ClientOnly>
+        <!-- Error state -->
+        <div
+          v-if="viewerState.error.value"
+          class="absolute inset-0 flex items-center justify-center"
+        >
+          <div class="flex flex-col items-center gap-3 text-center px-6">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="size-10 text-red-500"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            <p class="text-base font-medium text-foreground">
+              {{ viewerState.error.value }}
+            </p>
+          </div>
+        </div>
+
+        <ClientOnly v-else>
           <!-- Single-page-at-a-time mode -->
           <div
             v-if="isSinglePageMode && singlePageMeta"
@@ -135,12 +162,17 @@ import { mapViewModeToFitMode, normalizeZoom, provideViewerState } from "../comp
 import { provideViewerSearch } from "../composables/useViewerSearch";
 import { createAnnotationEngine } from "../composables/useAnnotationEngine";
 import { normalizeImportedAnnotations } from "../annotation/engine/import-normalize";
+import {
+  decodePdfAnnotationsFromDocument,
+  filterCollidingAnnotations
+} from "../annotation/pdf-import/decode";
 import { getTimestampString } from "../annotation/engine/utils";
 import { downloadPdfBytes } from "../annotation/pdf-export/download";
 import { exportAnnotationsToPdf } from "../annotation/pdf-export/export";
 import { createPageVirtualization } from "../composables/usePageVirtualization";
 import { createPageProxyCache } from "../composables/usePageProxyCache";
 import { createSearchIndex } from "../composables/useSearchIndex";
+import { createShapeDetection } from "../composables/useShapeDetection";
 import { provideFormFields } from "../composables/useFormFields";
 import { isIPad, getTouchDistance, getTouchCenter, clampScale } from "../annotation/engine/input-device";
 const props = defineProps({
@@ -152,14 +184,18 @@ const props = defineProps({
   viewMode: { type: String, required: false, default: "fit-width" },
   zoom: { type: Number, required: false, default: 1 },
   readonly: { type: Boolean, required: false, default: false },
+  shapeDetection: { type: Boolean, required: false, default: false },
   active: { type: Boolean, required: false, default: true }
 });
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
-const { state: viewerState, setScrollToPageFn } = provideViewerState();
+const { state: viewerState, setScrollToPageFn, setDownloadPdfFn } = provideViewerState();
 watchEffect(() => {
   viewerState.readonly.value = props.readonly ?? false;
 });
+watchEffect(() => {
+  viewerState.shapeDetection.value = props.shapeDetection ?? false;
+});
 const viewerSearch = provideViewerSearch();
 const formFieldsState = provideFormFields();
 const pageSettings = providePageSettings(viewerRoot);
@@ -173,6 +209,7 @@ setScrollToPageFn((pageNumber) => {
 });
 const proxyCache = createPageProxyCache();
 const searchIndex = createSearchIndex();
+const shapeDetectionCache = createShapeDetection();
 const doc = shallowRef(null);
 let painter = null;
 const pageMetas = virtualization.pageMetas;
@@ -287,37 +324,73 @@ function onFreeTextCancel() {
   freeTextResolve = null;
 }
 async function loadDocument() {
-  const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
-  if (!pdfjs.GlobalWorkerOptions.workerSrc) {
-    const workerModule = await import("pdfjs-dist/legacy/build/pdf.worker.min.mjs?url");
-    pdfjs.GlobalWorkerOptions.workerSrc = workerModule.default;
-  }
-  const source = props.source;
-  const loadingTask = pdfjs.getDocument(
-    source
-  );
-  const pdfDoc = await loadingTask.promise;
-  doc.value = pdfDoc;
-  viewerState.doc.value = pdfDoc;
-  viewerState.totalPages.value = pdfDoc.numPages;
-  proxyCache.setDocument(pdfDoc);
-  await virtualization.init(pdfDoc, scrollContainer.value);
-  const metas = virtualization.pageMetas.value;
-  if (metas.length > 0) {
-    viewerState.pageDimensions.value = {
-      width: metas[0].width,
-      height: metas[0].height
-    };
-  }
-  viewerSearch.setScrollToPage((pageNumber) => {
-    virtualization.scrollToPage(pageNumber);
-  });
-  searchIndex.buildIndex(pdfDoc).then(() => {
-    viewerSearch.setSearchIndex({
-      getPageText: searchIndex.getPageText,
-      totalPages: pdfDoc.numPages
+  viewerState.error.value = null;
+  viewerState.isLoading.value = true;
+  try {
+    const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
+    if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+      const workerModule = await import("pdfjs-dist/legacy/build/pdf.worker.min.mjs?url");
+      pdfjs.GlobalWorkerOptions.workerSrc = workerModule.default;
+    }
+    const source = props.source;
+    const loadingTask = pdfjs.getDocument(
+      source
+    );
+    const pdfDoc = await loadingTask.promise;
+    doc.value = pdfDoc;
+    viewerState.doc.value = pdfDoc;
+    viewerState.totalPages.value = pdfDoc.numPages;
+    proxyCache.setDocument(pdfDoc);
+    await virtualization.init(pdfDoc, scrollContainer.value);
+    const metas = virtualization.pageMetas.value;
+    if (metas.length > 0) {
+      viewerState.pageDimensions.value = {
+        width: metas[0].width,
+        height: metas[0].height
+      };
+    }
+    const nativeDecoded = await decodePdfAnnotationsFromDocument(pdfDoc);
+    let collisionSkipped = 0;
+    let nativeMergedCount = 0;
+    if (painter) {
+      const existingIds = new Set(painter.getData().map((item) => item.id));
+      const filtered = filterCollidingAnnotations(nativeDecoded.annotations, existingIds);
+      const nativeToMerge = filtered.annotations;
+      collisionSkipped = filtered.skipped;
+      if (nativeToMerge.length > 0) {
+        painter.mergeAnnotations(nativeToMerge);
+        nativeMergedCount = nativeToMerge.length;
+        viewerState.history.reset();
+      }
+      viewerState.annotations.value = new Map(
+        painter.getData().map((annotation) => [annotation.id, annotation])
+      );
+      triggerRef(viewerState.annotations);
+      viewerState.selectedAnnotation.value = null;
+      viewerState.selectedAnnotations.value = [];
+      viewerState.selectionRect.value = null;
+    }
+    const totalSkipped = nativeDecoded.skipped + collisionSkipped;
+    if (nativeMergedCount > 0 || totalSkipped > 0 || nativeDecoded.errors > 0 || nativeDecoded.pageErrors > 0 || nativeDecoded.stampExtracted > 0 || nativeDecoded.stampSkipped > 0) {
+      console.info(
+        `[KViewer] Native annotation import: loaded=${nativeMergedCount}, skipped=${totalSkipped}, decodeErrors=${nativeDecoded.errors}, pageErrors=${nativeDecoded.pageErrors}, stampExtracted=${nativeDecoded.stampExtracted}, stampSkipped=${nativeDecoded.stampSkipped}`
+      );
+    }
+    viewerSearch.setScrollToPage((pageNumber) => {
+      virtualization.scrollToPage(pageNumber);
     });
-  });
+    searchIndex.buildIndex(pdfDoc).then(() => {
+      viewerSearch.setSearchIndex({
+        getPageText: searchIndex.getPageText,
+        totalPages: pdfDoc.numPages
+      });
+    });
+  } catch (err) {
+    viewerState.error.value = "Failed to load document";
+    console.error("[KViewer] Document load error:", err);
+  } finally {
+    viewerState.isLoading.value = false;
+  }
 }
 let resizeObserver = null;
 function ensurePdfExtension(fileName) {
@@ -361,13 +434,16 @@ async function exportPdf(options = {}) {
     ...options
   };
   const pdfData = await doc.value.getData();
-  const annotations = painter.getData();
+  const exportContext = painter.getExportContext();
   const formFieldValues = formFieldsState.getAllFieldValues();
   const bytes = await exportAnnotationsToPdf({
     pdfData,
-    annotations,
+    annotations: exportContext.annotations,
     options: mergedOptions,
-    formFieldValues
+    formFieldValues,
+    originalAnnotationIds: exportContext.originalIds,
+    modifiedAnnotationIds: exportContext.modifiedIds,
+    deletedAnnotationIds: exportContext.deletedIds
   });
   if (mergedOptions.download) {
     downloadPdfBytes(bytes, resolveExportFileName(mergedOptions.fileName));
@@ -564,6 +640,7 @@ onMounted(() => {
   if (isIPad()) {
     viewerState.setStylusMode(true);
   }
+  setDownloadPdfFn(() => exportPdf({ download: true }));
   loadDocument();
   window.addEventListener("keydown", onGlobalKeydown);
 });
@@ -572,6 +649,7 @@ watch(
   () => {
     viewerSearch.reset();
     formFieldsState.reset();
+    shapeDetectionCache.clearAllShapeCache();
     searchIndex.destroy();
     virtualization.destroy();
     proxyCache.clear();
@@ -605,6 +683,7 @@ onBeforeUnmount(() => {
   scrollContainer.value?.removeEventListener("touchcancel", onPinchTouchEnd);
   resizeObserver?.disconnect();
   viewerSearch.reset();
+  shapeDetectionCache.clearAllShapeCache();
   searchIndex.destroy();
   virtualization.destroy();
   proxyCache.clear();

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

@@ -11,6 +11,8 @@ type __VLS_Props = {
     zoom?: number;
     /** When true, the viewer is in view-only mode: annotations, drawing tools, and form editing are disabled. */
     readonly?: boolean;
+    /** When true, auto-detect checkbox-like shapes (squares, circles) and create interactive form field checkboxes. */
+    shapeDetection?: boolean;
     /** When false, global keyboard shortcuts (e.g. Cmd+F) are suppressed. Used by ViewerTabs to prevent hidden viewers from capturing input. */
     active?: boolean;
 };
@@ -36,7 +38,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getKonvaCanvasState: typeof getKonvaCanvasState;
     getFormFieldValues: () => import("../annotation/engine/types.js").FormFieldValue[];
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    userName: string;
+    zoom: number;
+    readonly: boolean;
+    active: boolean;
+    stamps: StampDefinition[];
+    signatureHandlers: SignatureHandlers;
+    viewMode: ViewMode;
+    shapeDetection: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;