kviewer 0.0.10 → 0.0.11

package/dist/runtime/annotation/parsers/extractCheckboxStyles.js

@@ -0,0 +1,75 @@
+import { PDFButton, PDFCheckBox, PDFDocument, PDFDict, PDFHexString, PDFName, PDFString } from "pdf-lib";
+import { captionToStyle } from "../checkbox-styles.js";
+export async function extractCheckboxStyles(pdfBytes) {
+  const out = /* @__PURE__ */ new Map();
+  let doc;
+  try {
+    doc = await PDFDocument.load(pdfBytes, { ignoreEncryption: true });
+  } catch {
+    return out;
+  }
+  let form;
+  try {
+    form = doc.getForm();
+  } catch {
+    return out;
+  }
+  for (const field of form.getFields()) {
+    if (!(field instanceof PDFCheckBox)) continue;
+    const acro = field.acroField;
+    const name = field.getName();
+    if (!name || out.has(name)) continue;
+    const widgets = acro.getWidgets();
+    for (const widget of widgets) {
+      const mk = widget.dict.get(PDFName.of("MK"));
+      if (!(mk instanceof PDFDict)) continue;
+      const ca = mk.get(PDFName.of("CA"));
+      let caption;
+      if (ca instanceof PDFString || ca instanceof PDFHexString) {
+        caption = ca.decodeText();
+      }
+      if (!caption) continue;
+      const style = captionToStyle(caption);
+      if (style) {
+        out.set(name, style);
+        break;
+      }
+    }
+  }
+  return out;
+}
+export async function extractButtonCaptions(pdfBytes) {
+  const out = /* @__PURE__ */ new Map();
+  let doc;
+  try {
+    doc = await PDFDocument.load(pdfBytes, { ignoreEncryption: true });
+  } catch {
+    return out;
+  }
+  let form;
+  try {
+    form = doc.getForm();
+  } catch {
+    return out;
+  }
+  for (const field of form.getFields()) {
+    if (!(field instanceof PDFButton)) continue;
+    const acro = field.acroField;
+    const name = field.getName();
+    if (!name || out.has(name)) continue;
+    const widgets = acro.getWidgets();
+    for (const widget of widgets) {
+      const mk = widget.dict.get(PDFName.of("MK"));
+      if (!(mk instanceof PDFDict)) continue;
+      const ca = mk.get(PDFName.of("CA"));
+      if (ca instanceof PDFString || ca instanceof PDFHexString) {
+        const caption = ca.decodeText();
+        if (caption) {
+          out.set(name, caption);
+          break;
+        }
+      }
+    }
+  }
+  return out;
+}

package/dist/runtime/annotation/parsers/parseFormFields.js

@@ -19,8 +19,10 @@ export function parseFormFields(annotations, pageNumber) {
       fieldType,
       fieldName: ann.fieldName ?? "",
       rect: normalizedRect,
+      originalRect: [...normalizedRect],
       readOnly: Boolean(ann.readOnly),
-      required: Boolean(ann.required)
+      required: Boolean(ann.required),
+      origin: "parsed"
     };
     if (fieldType === "text") {
       if (ann.fieldValue != null) def.defaultValue = String(ann.fieldValue);
@@ -68,8 +70,19 @@ export function parseFormFields(annotations, pageNumber) {
     if (fieldType === "button") {
       def.buttonLabel = ann.alternativeText ?? ann.fieldValue ?? ann.fieldName ?? "Button";
     }
-    if (typeof ann.fontSize === "number") def.fontSize = ann.fontSize;
-    if (Array.isArray(ann.color)) {
+    const da = ann.defaultAppearanceData ?? {};
+    if (typeof da.fontSize === "number" && da.fontSize > 0) {
+      def.fontSize = da.fontSize;
+    } else if (typeof ann.fontSize === "number" && ann.fontSize > 0) {
+      def.fontSize = ann.fontSize;
+    }
+    if (typeof da.fontName === "string" && da.fontName.length > 0) {
+      def.fontName = da.fontName;
+    }
+    if (da.fontColor && da.fontColor.length >= 3) {
+      const fc = da.fontColor;
+      def.color = [fc[0] ?? 0, fc[1] ?? 0, fc[2] ?? 0];
+    } else if (Array.isArray(ann.color)) {
       def.color = ann.color.map(
         (c) => (
           // pdf.js colors may be 0-1 floats or 0-255 integers

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

@@ -1,9 +1,12 @@
-import type { PDFDocument } from 'pdf-lib';
-import type { FormFieldValue } from '../engine/types.js';
+import { type PDFDocument } from 'pdf-lib';
+import type { FormFieldDefinition, FormFieldValue } from '../engine/types.js';
 /**
  * Write form field values back to the PDF using pdf-lib's AcroForm API.
  *
- * This updates existing form fields in the PDF with the values the user
- * entered in the viewer. It does NOT create new fields.
+ * - Placed/detected fields that originate from the viewer are created as new
+ *   AcroForm widgets (text, checkbox, radio). Signature fields are drawn as
+ *   flat images (pdf-lib does not support creating AcroForm signature widgets).
+ * - Parsed fields (already present in the source PDF) get their values
+ *   updated in place.
  */
-export declare function writeFormFieldsToPdf(pdfDoc: PDFDocument, fieldValues: FormFieldValue[]): Promise<void>;
+export declare function writeFormFieldsToPdf(pdfDoc: PDFDocument, fieldValues: FormFieldValue[], placedDefinitions?: FormFieldDefinition[]): Promise<void>;

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.vue

@@ -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"
     />
@@ -79,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(() => {
@@ -125,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 () => {

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;