kviewer 0.0.9 → 0.0.11

package/dist/runtime/annotation/pdf-export/export-form-fields.js

@@ -1,6 +1,32 @@
-export async function writeFormFieldsToPdf(pdfDoc, fieldValues) {
+import { PDFBool, PDFDict, PDFName, PDFString, StandardFonts, rgb } from "pdf-lib";
+import { CHECKBOX_STYLE_TABLE } from "../checkbox-styles.js";
+export async function writeFormFieldsToPdf(pdfDoc, fieldValues, placedDefinitions = []) {
+  const valueByFieldId = new Map(fieldValues.map((v) => [v.fieldId, v]));
+  const createdFieldNames = /* @__PURE__ */ new Set();
+  const radioGroupCache = /* @__PURE__ */ new Map();
+  for (const def of placedDefinitions) {
+    try {
+      if (def.origin === "parsed") {
+        updateParsedField(pdfDoc, def);
+      } else {
+        await createWidgetForDefinition(
+          pdfDoc,
+          def,
+          valueByFieldId.get(def.id),
+          radioGroupCache
+        );
+        createdFieldNames.add(def.fieldName);
+      }
+    } catch (err) {
+      console.warn(
+        `Failed to write form field "${def.fieldName}" (${def.fieldType}, origin=${def.origin ?? "parsed"}):`,
+        err
+      );
+    }
+  }
   const form = pdfDoc.getForm();
   for (const field of fieldValues) {
+    if (createdFieldNames.has(field.fieldName)) continue;
     try {
       switch (field.fieldType) {
         case "text": {
@@ -50,6 +76,224 @@ export async function writeFormFieldsToPdf(pdfDoc, fieldValues) {
     }
   }
 }
+function applyCheckboxStyle(pdfDoc, cb, def) {
+  const style = def.checkboxStyle;
+  if (!style) return;
+  const caption = CHECKBOX_STYLE_TABLE[style]?.caption;
+  if (!caption) return;
+  const widgets = cb.acroField.getWidgets();
+  for (const widget of widgets) {
+    let mk = widget.dict.get(PDFName.of("MK"));
+    if (!(mk instanceof PDFDict)) {
+      mk = pdfDoc.context.obj({});
+      widget.dict.set(PDFName.of("MK"), mk);
+    }
+    mk.set(PDFName.of("CA"), PDFString.of(caption));
+  }
+  const form = pdfDoc.getForm();
+  form.acroForm.dict.set(PDFName.of("NeedAppearances"), PDFBool.True);
+}
+function updateParsedField(pdfDoc, def) {
+  const form = pdfDoc.getForm();
+  let field;
+  try {
+    field = form.getField(def.fieldName);
+  } catch {
+    return;
+  }
+  const widgets = field.acroField.getWidgets();
+  if (widgets.length === 0) return;
+  const target = def.originalRect ? pickWidgetByRect(widgets, def.originalRect) : widgets[0];
+  if (!target) return;
+  if (def.originalRect && !rectsEqual(def.rect, def.originalRect)) {
+    const [x1, y1, x2, y2] = def.rect;
+    target.setRectangle({
+      x: x1,
+      y: y1,
+      width: Math.max(1, x2 - x1),
+      height: Math.max(1, y2 - y1)
+    });
+    if (def.fieldType === "text" && def.comb) {
+      form.acroForm.dict.set(PDFName.of("NeedAppearances"), PDFBool.True);
+    }
+  }
+  if (def.fieldType === "checkbox" && (def.checkboxStyle ?? "check") !== (def.originalCheckboxStyle ?? "check")) {
+    const caption = CHECKBOX_STYLE_TABLE[def.checkboxStyle ?? "check"]?.caption;
+    if (caption) {
+      for (const widget of widgets) {
+        let mk = widget.dict.get(PDFName.of("MK"));
+        if (!(mk instanceof PDFDict)) {
+          mk = pdfDoc.context.obj({});
+          widget.dict.set(PDFName.of("MK"), mk);
+        }
+        mk.set(PDFName.of("CA"), PDFString.of(caption));
+      }
+      form.acroForm.dict.set(PDFName.of("NeedAppearances"), PDFBool.True);
+    }
+  }
+}
+function rectsEqual(a, b) {
+  for (let i = 0; i < 4; i++) {
+    if (Math.abs((a[i] ?? 0) - (b[i] ?? 0)) > 0.01) return false;
+  }
+  return true;
+}
+function pickWidgetByRect(widgets, expected) {
+  const [ex1, ey1, ex2, ey2] = expected;
+  const ew = ex2 - ex1;
+  const eh = ey2 - ey1;
+  const tolerance = 0.5;
+  for (const w of widgets) {
+    const r = w.getRectangle();
+    if (Math.abs(r.x - ex1) <= tolerance && Math.abs(r.y - ey1) <= tolerance && Math.abs(r.width - ew) <= tolerance && Math.abs(r.height - eh) <= tolerance) return w;
+  }
+  return void 0;
+}
+async function createWidgetForDefinition(pdfDoc, def, fv, radioGroupCache) {
+  const form = pdfDoc.getForm();
+  const pageIndex = def.pageNumber - 1;
+  const pages = pdfDoc.getPages();
+  const page = pages[pageIndex];
+  if (!page) return;
+  const [x1, y1, x2, y2] = def.rect;
+  const box = {
+    x: x1,
+    y: y1,
+    width: Math.max(1, x2 - x1),
+    height: Math.max(1, y2 - y1)
+  };
+  switch (def.fieldType) {
+    case "text": {
+      const tf = form.createTextField(def.fieldName);
+      if (def.maxLen && def.maxLen > 0) tf.setMaxLength(def.maxLen);
+      if (def.multiLine) tf.enableMultiline();
+      const v = fv?.value;
+      if (typeof v === "string" && v !== "") tf.setText(v);
+      tf.addToPage(page, box);
+      applyFlags(tf, def);
+      break;
+    }
+    case "checkbox": {
+      const cb = form.createCheckBox(def.fieldName);
+      cb.addToPage(page, box);
+      if (fv?.value === true) cb.check();
+      applyFlags(cb, def);
+      applyCheckboxStyle(pdfDoc, cb, def);
+      break;
+    }
+    case "radio": {
+      let group = radioGroupCache.get(def.fieldName);
+      if (!group) {
+        try {
+          group = form.getRadioGroup(def.fieldName);
+        } catch {
+          group = form.createRadioGroup(def.fieldName);
+        }
+        radioGroupCache.set(def.fieldName, group);
+      }
+      const existingOptions = new Set(group.getOptions());
+      let optionValue = def.buttonValue || `Option_${existingOptions.size + 1}`;
+      if (existingOptions.has(optionValue)) {
+        let n = existingOptions.size + 1;
+        while (existingOptions.has(`Option_${n}`)) n += 1;
+        optionValue = `Option_${n}`;
+      }
+      group.addOptionToPage(optionValue, page, box);
+      if (typeof fv?.value === "string" && fv.value === optionValue) {
+        group.select(optionValue);
+      }
+      applyFlags(group, def);
+      break;
+    }
+    case "signature": {
+      const v = fv?.value;
+      const signed = typeof v === "string" && v.startsWith("data:image");
+      if (signed) {
+        await drawSignatureImage(pdfDoc, page, v, box);
+      } else {
+        await drawSignaturePlaceholder(pdfDoc, page, box);
+      }
+      break;
+    }
+    case "dropdown": {
+      const labels = (def.options ?? []).map((o) => o.displayValue);
+      if (def.combo === false) {
+        const list = form.createOptionList(def.fieldName);
+        if (labels.length > 0) list.setOptions(labels);
+        list.addToPage(page, box);
+        if (def.multiSelect) list.enableMultiselect();
+        const v = fv?.value;
+        if (Array.isArray(v) && v.length > 0) list.select(v);
+        else if (typeof v === "string" && v) list.select(v);
+        applyFlags(list, def);
+      } else {
+        const dd = form.createDropdown(def.fieldName);
+        if (labels.length > 0) dd.setOptions(labels);
+        dd.addToPage(page, box);
+        if (def.editable) dd.enableEditing();
+        const v = fv?.value;
+        if (typeof v === "string" && v) dd.select(v);
+        else if (Array.isArray(v) && v[0]) dd.select(v[0]);
+        applyFlags(dd, def);
+      }
+      break;
+    }
+  }
+}
+function applyFlags(field, def) {
+  if (def.readOnly) field.enableReadOnly();
+  if (def.required) field.enableRequired();
+}
+async function drawSignatureImage(pdfDoc, page, dataUrl, box) {
+  const match = dataUrl.match(/^data:(image\/[a-zA-Z0-9.+-]+);base64,(.+)$/);
+  if (!match) return;
+  const mimeType = match[1] ?? "";
+  const base64 = match[2] ?? "";
+  let image;
+  if (mimeType.includes("jpeg") || mimeType.includes("jpg")) {
+    image = await pdfDoc.embedJpg(base64);
+  } else {
+    image = await pdfDoc.embedPng(base64);
+  }
+  const imgAspect = image.width / image.height;
+  const boxAspect = box.width / box.height;
+  let drawW = box.width;
+  let drawH = box.height;
+  if (imgAspect > boxAspect) {
+    drawH = box.width / imgAspect;
+  } else {
+    drawW = box.height * imgAspect;
+  }
+  const drawX = box.x + (box.width - drawW) / 2;
+  const drawY = box.y + (box.height - drawH) / 2;
+  page.drawImage(image, { x: drawX, y: drawY, width: drawW, height: drawH });
+}
+async function drawSignaturePlaceholder(pdfDoc, page, box) {
+  page.drawRectangle({
+    x: box.x,
+    y: box.y,
+    width: box.width,
+    height: box.height,
+    borderColor: rgb(0.55, 0.55, 0.55),
+    borderWidth: 0.75,
+    borderDashArray: [3, 2]
+  });
+  try {
+    const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+    const label = "Sign here";
+    const fontSize = Math.max(6, Math.min(12, box.height * 0.4));
+    const textWidth = font.widthOfTextAtSize(label, fontSize);
+    const textHeight = font.heightAtSize(fontSize);
+    page.drawText(label, {
+      x: box.x + (box.width - textWidth) / 2,
+      y: box.y + (box.height - textHeight) / 2,
+      size: fontSize,
+      font,
+      color: rgb(0.55, 0.55, 0.55)
+    });
+  } catch {
+  }
+}
 async function embedSignatureImage(pdfDoc, field) {
   const dataUrl = field.value;
   const match = dataUrl.match(/^data:(image\/[a-zA-Z0-9.+-]+);base64,(.+)$/);

package/dist/runtime/annotation/pdf-export/export.d.ts

@@ -1,4 +1,4 @@
-import { type IAnnotationStore, type FormFieldValue } from '../engine/types.js';
+import { type IAnnotationStore, type FormFieldDefinition, type FormFieldValue } from '../engine/types.js';
 export interface ExportPdfOptions {
     flatten?: boolean;
     download?: boolean;
@@ -10,9 +10,10 @@ interface ExportPdfParams {
     annotations: IAnnotationStore[];
     options?: ExportPdfOptions;
     formFieldValues?: FormFieldValue[];
+    placedFormFieldDefinitions?: FormFieldDefinition[];
     originalAnnotationIds?: Set<string>;
     modifiedAnnotationIds?: Set<string>;
     deletedAnnotationIds?: Set<string>;
 }
-export declare function exportAnnotationsToPdf({ pdfData, annotations, options, formFieldValues, originalAnnotationIds, modifiedAnnotationIds, deletedAnnotationIds, }: ExportPdfParams): Promise<Uint8Array>;
+export declare function exportAnnotationsToPdf({ pdfData, annotations, options, formFieldValues, placedFormFieldDefinitions, originalAnnotationIds, modifiedAnnotationIds, deletedAnnotationIds, }: ExportPdfParams): Promise<Uint8Array>;
 export {};

package/dist/runtime/annotation/pdf-export/export.js

@@ -198,6 +198,7 @@ export async function exportAnnotationsToPdf({
   annotations,
   options,
   formFieldValues,
+  placedFormFieldDefinitions,
   originalAnnotationIds,
   modifiedAnnotationIds,
   deletedAnnotationIds
@@ -205,8 +206,14 @@ export async function exportAnnotationsToPdf({
   const flatten = options?.flatten ?? false;
   const preserveOriginalAnnotations = options?.preserveOriginalAnnotations ?? false;
   const pdfDoc = await PDFDocument.load(toUint8Array(pdfData));
-  if (formFieldValues && formFieldValues.length > 0) {
-    await writeFormFieldsToPdf(pdfDoc, formFieldValues);
+  const hasValues = formFieldValues && formFieldValues.length > 0;
+  const hasPlaced = placedFormFieldDefinitions && placedFormFieldDefinitions.length > 0;
+  if (hasValues || hasPlaced) {
+    await writeFormFieldsToPdf(
+      pdfDoc,
+      formFieldValues ?? [],
+      placedFormFieldDefinitions ?? []
+    );
   }
   let annotationsToWrite = annotations;
   if (!preserveOriginalAnnotations) {

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;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}
+.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;display:block;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:500;height:100%;line-height:normal;margin:0;outline:none;padding:1px 2px;resize:none;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;vertical-align:top}.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{align-items:center;background:#c8c8c8;border:1px solid rgba(0,0,0,.35);box-sizing:border-box;color:#000;cursor:pointer;display:flex;font-family:inherit;font-weight:700;height:100%;justify-content:center;line-height:1;padding:0 6px;text-align:center;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.kviewer-form-button:hover{background:#bdbdbd}.kviewer-form-button:active{background:#b0b0b0}.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/FormFieldLayer.d.vue.ts

@@ -5,6 +5,11 @@ type __VLS_Props = {
     pageHeight: number;
     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

@@ -11,7 +11,11 @@
   transform: `scale(${props.scale})`,
   transformOrigin: '0 0',
   zIndex: props.zIndex,
-  pointerEvents: props.pointerEvents
+  pointerEvents: props.pointerEvents,
+  // Force native form controls (inputs, checkboxes, radios, scrollbars)
+  // to render in light mode regardless of the user\'s OS theme — PDF
+  // pages have a white background, so dark-mode controls clash.
+  colorScheme: 'light'
 }"
   >
     <FormFieldWrapper
@@ -19,13 +23,20 @@
       :key="field.id"
       :field="field"
       :page-height="props.pageHeight"
+      :scale="props.scale"
+      :view-offset-x="props.viewOffsetX ?? 0"
+      :view-offset-y="props.viewOffsetY ?? 0"
+      :selected="selectedFieldId === field.id"
+      @select="formFields.selectPlacedField(field.id)"
     />
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted, onBeforeUnmount, watch } from "vue";
 import { useFormFields } from "../composables/useFormFields";
+import { useViewerState } from "../composables/useViewerState";
+import { AnnotationType } from "../annotation/engine/types";
 import FormFieldWrapper from "./form-fields/FormFieldWrapper.vue";
 const props = defineProps({
   pageNumber: { type: Number, required: true },
@@ -33,8 +44,34 @@ const props = defineProps({
   pageWidth: { type: Number, required: true },
   pageHeight: { type: Number, required: true },
   pointerEvents: { type: String, required: true },
-  zIndex: { type: Number, required: true }
+  zIndex: { type: Number, required: true },
+  viewOffsetX: { type: Number, required: false },
+  viewOffsetY: { type: Number, required: false }
 });
 const formFields = useFormFields();
+const state = useViewerState();
 const fields = computed(() => formFields.getFieldsForPage(props.pageNumber));
+const selectedFieldId = formFields.selectedPlacedFieldId;
+watch(() => state.formEditMode.value, (enabled) => {
+  if (!enabled) formFields.selectPlacedField(null);
+});
+watch(() => state.activeTool.value, (tool) => {
+  const isFormFieldTool = typeof tool === "number" && (tool === AnnotationType.FORM_TEXT || tool === AnnotationType.FORM_CHECKBOX || tool === AnnotationType.FORM_RADIO || tool === AnnotationType.FORM_SIGNATURE);
+  if (tool !== "hand" && !isFormFieldTool) formFields.selectPlacedField(null);
+});
+function onKeyDown(e) {
+  if (!selectedFieldId.value) return;
+  if (e.key !== "Delete" && e.key !== "Backspace") return;
+  const target = e.target;
+  const tag = target?.tagName.toLowerCase();
+  if (tag === "input" || tag === "textarea" || target?.isContentEditable) return;
+  const id = selectedFieldId.value;
+  formFields.removePlacedField(id);
+}
+onMounted(() => {
+  window.addEventListener("keydown", onKeyDown);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", onKeyDown);
+});
 </script>

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

@@ -5,6 +5,11 @@ type __VLS_Props = {
     pageHeight: number;
     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.d.vue.ts

@@ -3,7 +3,12 @@ type __VLS_Props = {
     pageNumber: number;
     pageMeta: PageMeta;
     scale: number;
+    /** Canvas internal resolution multiplier (CSS size unchanged).
+     *  Used by panzoom to sharpen the PDF when visually zoomed in. */
+    renderQuality?: 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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    renderQuality: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/PdfPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="kviewer-page"
+    class="kviewer-page shadow-lg"
     :style="{
   position: 'relative',
   width: cssWidth + 'px',
@@ -31,6 +31,8 @@
       :scale="props.scale"
       :page-width="baseWidth"
       :page-height="baseHeight"
+      :view-offset-x="viewOffsetX"
+      :view-offset-y="viewOffsetY"
       :pointer-events="formFieldPointerEvents"
       :z-index="formFieldZIndex"
     />
@@ -63,7 +65,8 @@ const PDFJS_ANNOTATION_MODE_DISABLE = 0;
 const props = defineProps({
   pageNumber: { type: Number, required: true },
   pageMeta: { type: Object, required: true },
-  scale: { type: Number, required: true }
+  scale: { type: Number, required: true },
+  renderQuality: { type: Number, required: false, default: 1 }
 });
 const canvasRef = ref(null);
 const textLayerRef = ref(null);
@@ -78,6 +81,8 @@ 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(() => {
@@ -124,6 +129,26 @@ onMounted(async () => {
     }
   }
 });
+watch(
+  () => state.shapeDetection.value,
+  async (enabled) => {
+    if (!enabled || !pageProxy.value) return;
+    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 () => {
@@ -141,7 +166,14 @@ watch(
     }
   }
 );
-async function renderCanvas() {
+watch(
+  () => props.renderQuality,
+  async () => {
+    if (!pageProxy.value) return;
+    await renderCanvas({ doubleBuffer: true });
+  }
+);
+async function renderCanvas(opts) {
   const canvas = canvasRef.value;
   const proxy = pageProxy.value;
   if (!canvas || !proxy) return;
@@ -150,23 +182,48 @@ async function renderCanvas() {
     currentRenderTask = null;
   }
   const dpr = window.devicePixelRatio || 1;
+  const quality = props.renderQuality ?? 1;
   const viewport = proxy.getViewport({
-    scale: props.scale * dpr
+    scale: props.scale * quality * dpr
   });
-  canvas.width = viewport.width;
-  canvas.height = viewport.height;
-  try {
-    currentRenderTask = proxy.render({
-      canvasContext: canvas.getContext("2d"),
-      viewport,
-      annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
-    });
-    await currentRenderTask.promise;
-  } catch (e) {
-    if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
-    throw e;
-  } finally {
-    currentRenderTask = null;
+  if (opts?.doubleBuffer) {
+    const tmp = document.createElement("canvas");
+    tmp.width = viewport.width;
+    tmp.height = viewport.height;
+    try {
+      currentRenderTask = proxy.render({
+        canvasContext: tmp.getContext("2d"),
+        viewport,
+        annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
+      });
+      await currentRenderTask.promise;
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+      canvas.getContext("2d").drawImage(tmp, 0, 0);
+    } catch (e) {
+      if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
+      throw e;
+    } finally {
+      currentRenderTask = null;
+      tmp.width = 0;
+      tmp.height = 0;
+    }
+  } else {
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+    try {
+      currentRenderTask = proxy.render({
+        canvasContext: canvas.getContext("2d"),
+        viewport,
+        annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
+      });
+      await currentRenderTask.promise;
+    } catch (e) {
+      if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
+      throw e;
+    } finally {
+      currentRenderTask = null;
+    }
   }
 }
 function initKonva() {

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

@@ -3,7 +3,12 @@ type __VLS_Props = {
     pageNumber: number;
     pageMeta: PageMeta;
     scale: number;
+    /** Canvas internal resolution multiplier (CSS size unchanged).
+     *  Used by panzoom to sharpen the PDF when visually zoomed in. */
+    renderQuality?: 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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    renderQuality: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,8 @@
-import type { IAnnotationType } from '../annotation/engine/types.js';
 type __VLS_Props = {
-    tool: IAnnotationType | undefined;
+    tool: {
+        name: string;
+        icon?: string;
+    } | undefined;
     active: boolean;
     indicatorColor?: string;
 };

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

@@ -1,6 +1,8 @@
-import type { IAnnotationType } from '../annotation/engine/types.js';
 type __VLS_Props = {
-    tool: IAnnotationType | undefined;
+    tool: {
+        name: string;
+        icon?: string;
+    } | undefined;
     active: boolean;
     indicatorColor?: string;
 };

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

@@ -17,6 +17,10 @@ type __VLS_Props = {
     active?: boolean;
     /** Delay in ms before consecutive freehand strokes are finalized as a single annotation. Set to 0 to disable grouping. Default: 1000. */
     freehandGroupingDelay?: number;
+    /** Whether the viewer is in form-edit mode: every form field renders
+     *  with selection chrome, can be moved/resized, and the property panel
+     *  is shown. Supports v-model via `v-model:form-edit-mode`. */
+    formEditMode?: boolean;
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
 type ImportMode = 'replace' | 'merge';
@@ -27,11 +31,11 @@ declare function importAnnotations(annotations: IAnnotationStore[], options?: {
     skipped: number;
 }>;
 declare function getKonvaCanvasState(): Record<number, string>;
-declare var __VLS_1: {}, __VLS_40: {};
+declare var __VLS_1: {}, __VLS_51: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
-    footer?: (props: typeof __VLS_40) => any;
+    footer?: (props: typeof __VLS_51) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getAnnotations: () => IAnnotationStore[];
@@ -40,7 +44,17 @@ 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<{}>, {
+    /** Reactive form-edit-mode flag — read with `.value`. */
+    formEditMode: import("vue").Ref<boolean, boolean>;
+    /** Programmatically enter or leave form-edit mode. */
+    setFormEditMode: (enabled: boolean) => void;
+    /** Flip form-edit mode. Returns the new state. */
+    toggleFormEditMode: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:formEditMode": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:formEditMode"?: ((value: boolean) => any) | undefined;
+}>, {
     userName: string;
     freehandGroupingDelay: number;
     zoom: number;
@@ -50,6 +64,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
     shapeDetection: boolean;
+    formEditMode: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;