kviewer 0.3.3 → 0.3.4

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-export { ActiveTool, AddFormFieldPayload, CheckboxStyle, ExportPdfOptions, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, KVIEWER_EMBED_PROTOCOL_VERSION, KVIEWER_EMBED_UNSUPPORTED_METHOD_ERROR_NAME, KViewerApi, KViewerEmbedBridgeOptions, KViewerEmbedClient, KViewerEmbedClientOptions, KViewerEmbedEventName, KViewerEmbedEventPayloads, KViewerEmbedMethodName, KViewerHostApi, PlacedFieldDefaults, SignatureData, SignatureFieldStatus, SignatureHandlers, ViewMode, ViewerBottomToolId, ViewerLayoutToolId, ViewerMenuButtonItem, ViewerMenuCheckboxItem, ViewerMenuItem, ViewerMenuSeparatorItem, ViewerState, ViewerToolEntry, ViewerToolId, ViewerToolSlot, ViewerTopToolId, useKViewerEmbedBridge } from '../dist/runtime/public-types.js';
+export { ActiveTool, AddFormFieldPayload, CheckboxStyle, ExportPdfOptions, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, IAnnotationStore, KVIEWER_EMBED_PROTOCOL_VERSION, KVIEWER_EMBED_UNSUPPORTED_METHOD_ERROR_NAME, KViewerApi, KViewerEmbedBridgeOptions, KViewerEmbedClient, KViewerEmbedClientOptions, KViewerEmbedEventName, KViewerEmbedEventPayloads, KViewerEmbedMethodName, KViewerHostApi, PlacedFieldDefaults, SignatureData, SignatureFieldStatus, SignatureHandlers, ViewMode, ViewerBottomToolId, ViewerLayoutToolId, ViewerMenuButtonItem, ViewerMenuCheckboxItem, ViewerMenuItem, ViewerMenuSeparatorItem, ViewerSelectionButtonItem, ViewerSelectionContext, ViewerSelectionItem, ViewerSelectionSelectItem, ViewerState, ViewerToolEntry, ViewerToolId, ViewerToolSlot, ViewerTopToolId, useKViewerEmbedBridge } from '../dist/runtime/public-types.js';
 
 interface ModuleOptions {
     /**

package/dist/module.json

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

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

@@ -52,6 +52,7 @@ export declare class Selector {
     private marqueeRect;
     private marqueeStartPos;
     private marqueeStage;
+    private suppressStageClick;
     constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onMultiChanged, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, setExternalGesturesEnabled, }: ISelectorOptions);
     /** Returns true if this event should be rejected (finger touch in stylus mode). */
     private isStylusRejected;

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

@@ -24,6 +24,7 @@ export class Selector {
   marqueeRect = null;
   marqueeStartPos = null;
   marqueeStage = null;
+  suppressStageClick = false;
   constructor({
     konvaCanvasStore,
     getAnnotationStore,
@@ -88,13 +89,17 @@ export class Selector {
   }
   disableStageEvents(konvaStage) {
     konvaStage.off(
-      "click mousedown mousemove mouseup touchstart touchmove touchend pointerdown pointermove pointerup"
+      "click tap mousedown mousemove mouseup touchstart touchmove touchend pointerdown pointermove pointerup"
     );
   }
   bindStageEvents(konvaStage) {
     konvaStage.on("click tap", (e) => {
       if (e.target !== konvaStage) return;
       if (this.isStylusRejected(e.evt)) return;
+      if (this.suppressStageClick) {
+        this.suppressStageClick = false;
+        return;
+      }
       this.clearTransformers();
     });
   }
@@ -474,6 +479,7 @@ export class Selector {
     this.handleShapeClick(shape, konvaStage, false);
   }
   clear() {
+    this.suppressStageClick = false;
     this.clearTransformers();
     this.konvaCanvasStore.forEach((konvaCanvas) => {
       const { konvaStage } = konvaCanvas;
@@ -489,6 +495,7 @@ export class Selector {
     const pageGroups = this.getPageShapeGroups(konvaStage);
     this.disableStageEvents(konvaStage);
     this.bindStageEvents(konvaStage);
+    this.bindMarqueeEvents(konvaStage, { mouseOnly: true });
     this.enableShapeGroups(pageGroups, konvaStage);
     if (this.selectedId) {
       this.selectedShape(this.selectedId, konvaStage);
@@ -519,13 +526,17 @@ export class Selector {
     this.enableShapeGroups(pageGroups, konvaStage);
     this.bindMarqueeEvents(konvaStage);
   }
-  bindMarqueeEvents(konvaStage) {
-    konvaStage.on("mousedown touchstart", (e) => {
+  bindMarqueeEvents(konvaStage, opts = {}) {
+    const { mouseOnly = false } = opts;
+    konvaStage.on(mouseOnly ? "mousedown" : "mousedown touchstart", (e) => {
       if (e.target !== konvaStage) return;
       if (this.isStylusRejected(e.evt)) return;
+      const button = e.evt?.button;
+      if (mouseOnly && button !== void 0 && button !== 0) return;
       if (this.getStylusModeEnabled?.() && e.evt) e.evt.preventDefault();
       this.clearTransformers();
       this.selectedIds = [];
+      this.marqueeRect?.destroy();
       const pos = konvaStage.getRelativePointerPosition();
       if (!pos) return;
       this.marqueeStartPos = pos;
@@ -543,7 +554,7 @@ export class Selector {
       });
       this.getBackgroundLayer(konvaStage).add(this.marqueeRect);
     });
-    konvaStage.on("mousemove touchmove", (e) => {
+    konvaStage.on(mouseOnly ? "mousemove" : "mousemove touchmove", (e) => {
       if (!this.marqueeRect || !this.marqueeStartPos || !this.marqueeStage) return;
       if (this.isStylusRejected(e.evt)) return;
       if (this.getStylusModeEnabled?.() && e.evt) e.evt.preventDefault();
@@ -556,7 +567,7 @@ export class Selector {
       this.marqueeRect.setAttrs({ x, y, width, height });
       this.marqueeStage.batchDraw();
     });
-    konvaStage.on("mouseup touchend", (e) => {
+    konvaStage.on(mouseOnly ? "mouseup" : "mouseup touchend", (e) => {
       if (!this.marqueeRect || !this.marqueeStage) return;
       if (this.isStylusRejected(e.evt)) return;
       const selectionBox = this.marqueeRect.getClientRect();
@@ -567,6 +578,7 @@ export class Selector {
         this.marqueeStage = null;
         return;
       }
+      if (mouseOnly) this.suppressStageClick = true;
       const groups = this.getPageShapeGroups(this.marqueeStage);
       const matchedIds = [];
       groups.forEach((group) => {

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

@@ -128,6 +128,8 @@ export declare class Painter {
     activateEraser(): void;
     highlightRange(range: Range, annotation: IAnnotationType): void;
     selectAnnotation(id: string): void;
+    /** Clears the current annotation selection without touching the store. */
+    clearSelection(): void;
     initAnnotations(annotations: IAnnotationStore[]): Promise<void>;
     update(id: string, updates: Partial<IAnnotationStore>): void;
     delete(id: string, emit?: boolean): void;

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

@@ -624,6 +624,10 @@ export class Painter {
     this.selector.select(id);
     this.callbacks.setDefaultMode();
   }
+  /** Clears the current annotation selection without touching the store. */
+  clearSelection() {
+    this.selector.delete();
+  }
   async initAnnotations(annotations) {
     annotations.forEach((annotation) => {
       this.saveToStore(annotation, true);

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

@@ -6,8 +6,7 @@ import {
   PDFDict,
   PDFName,
   PDFRawStream,
-  PDFString,
-  StandardFonts
+  PDFString
 } from "pdf-lib";
 import { CHECKBOX_STYLE_TABLE } from "../checkbox-styles.js";
 export async function writeFormFieldsToPdf(pdfDoc, fieldValues, placedDefinitions = []) {
@@ -265,7 +264,7 @@ async function createSignatureField(pdfDoc, page, def, fv) {
   if (def.required) sig.setFlagTo(AcroFieldFlags.Required, true);
   const v = fv?.value;
   const signed = typeof v === "string" && v.startsWith("data:image");
-  const appearanceRef = signed ? await buildSignedSignatureAppearance(pdfDoc, v, width, height) : await buildSignaturePlaceholderAppearance(pdfDoc, width, height);
+  const appearanceRef = signed ? await buildSignedSignatureAppearance(pdfDoc, v, width, height) : buildEmptySignatureAppearance(pdfDoc, width, height);
   const widgetDict = context.obj({
     Type: "Annot",
     Subtype: "Widget",
@@ -282,43 +281,21 @@ async function createSignatureField(pdfDoc, page, def, fv) {
   form.acroForm.addField(fieldRef);
   page.node.addAnnot(widgetRef);
 }
-async function buildSignaturePlaceholderAppearance(pdfDoc, width, height) {
+function buildEmptySignatureAppearance(pdfDoc, width, height) {
   const { context } = pdfDoc;
-  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
-  const label = "Sign here";
-  const fontSize = Math.max(6, Math.min(12, height * 0.4));
-  const textWidth = font.widthOfTextAtSize(label, fontSize);
-  const textHeight = font.heightAtSize(fontSize);
-  const textX = (width - textWidth) / 2;
-  const textY = (height - textHeight) / 2;
-  const ops = [
-    "q",
-    "0.55 0.55 0.55 RG",
-    "0.75 w",
-    "[3 2] 0 d",
-    `0.5 0.5 ${(width - 1).toFixed(3)} ${(height - 1).toFixed(3)} re`,
-    "S",
-    "0.55 0.55 0.55 rg",
-    "BT",
-    `/F1 ${fontSize.toFixed(3)} Tf`,
-    `${textX.toFixed(3)} ${textY.toFixed(3)} Td`,
-    `(${label}) Tj`,
-    "ET",
-    "Q"
-  ].join("\n");
   const dict = context.obj({
     Type: "XObject",
     Subtype: "Form",
     BBox: [0, 0, width, height],
     Matrix: [1, 0, 0, 1, 0, 0],
-    Resources: { Font: { F1: font.ref } }
+    Resources: {}
   });
-  const stream = PDFRawStream.of(dict, new TextEncoder().encode(ops));
+  const stream = PDFRawStream.of(dict, new Uint8Array(0));
   return context.register(stream);
 }
 async function buildSignedSignatureAppearance(pdfDoc, dataUrl, width, height) {
   const match = dataUrl.match(/^data:(image\/[a-zA-Z0-9.+-]+);base64,(.+)$/);
-  if (!match) return buildSignaturePlaceholderAppearance(pdfDoc, width, height);
+  if (!match) return buildEmptySignatureAppearance(pdfDoc, width, height);
   const mimeType = match[1] ?? "";
   const base64 = match[2] ?? "";
   const image = mimeType.includes("jpeg") || mimeType.includes("jpg") ? await pdfDoc.embedJpg(base64) : await pdfDoc.embedPng(base64);

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:color-mix(in srgb,var(--kvw-field-color,#1677ff) 14%,transparent);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:color-mix(in srgb,var(--kvw-field-color,#1677ff) 22%,transparent);border-color:rgba(0,0,0,.2)}.kviewer-form-input:focus{background-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 28%,transparent);border-color:var(--kvw-field-color,var(--color-primary,#3b82f6));outline:2px solid var(--kvw-field-color,var(--color-primary,#3b82f6))}.kviewer-form-uselect{align-items:center;background-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 14%,transparent);border:1px solid transparent;border-radius:0;box-sizing:border-box;color:#000;cursor:pointer;display:flex;height:100%;line-height:1;padding:0 11px 0 2px;width:100%}.kviewer-form-uselect:hover{background-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 22%,transparent);border-color:rgba(0,0,0,.2)}.kviewer-form-uselect:focus-visible{background-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 28%,transparent);outline:2px solid var(--kvw-field-color,var(--color-primary,#3b82f6));outline-offset:-2px}.kviewer-form-uselect:disabled{cursor:default}.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(--kvw-field-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(--kvw-field-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:color-mix(in srgb,var(--kvw-field-color,#3b82f6) 8%,transparent);border-color:var(--kvw-field-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-form-signature--static{cursor:default}.kviewer-form-signature--static:hover{background:rgba(255,255,200,.15);border-color:rgba(0,0,0,.2)}.kviewer-form-signature__marker{align-items:center;display:inline-flex;gap:4px}.kviewer-form-signature__marker-icon{flex:0 0 auto;height:12px;width:12px}
+.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:color-mix(in srgb,var(--kvw-field-color,#1677ff) 14%,transparent);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:color-mix(in srgb,var(--kvw-field-color,#1677ff) 22%,transparent);border-color:rgba(0,0,0,.2)}.kviewer-form-input:focus{background-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 28%,transparent);border-color:var(--kvw-field-color,var(--color-primary,#3b82f6));outline:2px solid var(--kvw-field-color,var(--color-primary,#3b82f6))}.kviewer-form-uselect{align-items:center;background-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 14%,transparent);border:1px solid transparent;border-radius:0;box-sizing:border-box;color:#000;cursor:pointer;display:flex;height:100%;line-height:1;padding:0 11px 0 2px;width:100%}.kviewer-form-uselect:hover{background-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 22%,transparent);border-color:rgba(0,0,0,.2)}.kviewer-form-uselect:focus-visible{background-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 28%,transparent);outline:2px solid var(--kvw-field-color,var(--color-primary,#3b82f6));outline-offset:-2px}.kviewer-form-uselect:disabled{cursor:default}.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(--kvw-field-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(--kvw-field-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:color-mix(in srgb,var(--kvw-field-color,#3b82f6) 8%,transparent);border-color:var(--kvw-field-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-form-field__body--locked .kviewer-form-signature,.kviewer-form-field__body--locked .kviewer-form-signature:hover{border-color:transparent}.kviewer-form-signature--static{cursor:default}.kviewer-form-signature--static:hover{background:rgba(255,255,200,.15);border-color:rgba(0,0,0,.2)}.kviewer-form-signature__marker{align-items:center;display:inline-flex;gap:4px}.kviewer-form-signature__marker-icon{flex:0 0 auto;height:12px;width:12px}

package/dist/runtime/components/AnnotationToolbar.vue

@@ -55,6 +55,9 @@
         <UIcon name="i-lucide-pencil" class="text-sm text-muted" />
       </button>
 
+      <!-- Host-supplied custom items (selectionItems prop) -->
+      <SelectionToolbarItems :items="customItems" :ctx="selectionCtx" />
+
       <!-- Delete -->
       <button
         class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
@@ -69,12 +72,20 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, inject } from "vue";
 import { useViewerState } from "../composables/useViewerState";
 import { useKviewerI18n } from "../composables/useKviewerI18n";
 import { defaultOptions, annotationDefinitions } from "../annotation/engine/config";
 import { AnnotationType } from "../annotation/engine/types";
+import { SELECTION_ITEMS_KEY } from "../selection-items";
+import SelectionToolbarItems from "./SelectionToolbarItems.vue";
 const state = useViewerState();
+const customItems = inject(SELECTION_ITEMS_KEY, void 0);
+const selectionCtx = computed(() => ({
+  kind: "annotation",
+  annotations: state.selectedAnnotations.value.length > 0 ? state.selectedAnnotations.value : state.selectedAnnotation.value ? [state.selectedAnnotation.value] : [],
+  field: null
+}));
 const { t } = useKviewerI18n();
 const colors = defaultOptions.colors;
 const isMultiSelect = computed(() => state.selectedAnnotations.value.length > 1);

package/dist/runtime/components/FormFieldLayer.vue

@@ -2,6 +2,7 @@
   <div
     v-if="fields.length > 0"
     class="kviewer-form-layer"
+    :class="{ 'kviewer-form-layer--interactive': props.pointerEvents === 'auto' }"
     :style="{
   position: 'absolute',
   top: 0,
@@ -11,7 +12,6 @@
   transform: `scale(${props.scale})`,
   transformOrigin: '0 0',
   zIndex: props.zIndex,
-  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.
@@ -57,7 +57,8 @@ watch(() => state.formEditMode.value, (enabled) => {
 });
 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);
+  const keepsSelection = tool === "hand" || tool === AnnotationType.SELECT || isFormFieldTool;
+  if (!keepsSelection) formFields.selectPlacedField(null);
 });
 function onKeyDown(e) {
   if (!selectedFieldId.value) return;
@@ -75,3 +76,7 @@ onBeforeUnmount(() => {
   window.removeEventListener("keydown", onKeyDown);
 });
 </script>
+
+<style>
+.kviewer-form-layer{pointer-events:none}.kviewer-form-layer--interactive .kviewer-form-field{pointer-events:auto}.kviewer-form-layer:not(.kviewer-form-layer--interactive) .kviewer-form-field,.kviewer-form-layer:not(.kviewer-form-layer--interactive) .kviewer-placed-chrome,.kviewer-form-layer:not(.kviewer-form-layer--interactive) .kviewer-placed-toolbar{pointer-events:none}
+</style>

package/dist/runtime/components/PdfPage.vue

@@ -63,6 +63,7 @@
   height: cssHeight + 'px',
   zIndex: 3,
   pointerEvents: annotationPointerEvents,
+  cursor: annotationCursor,
   transform: 'translateZ(0)',
   overflow: 'hidden'
 }"
@@ -134,9 +135,31 @@ const annotationPointerEvents = computed(() => {
   if (state.readonly.value) return "none";
   return isSearchTextInteractive.value ? "none" : isAnnotating.value ? "auto" : "none";
 });
+const annotationCursor = computed(() => {
+  const tool = state.activeTool.value;
+  if (tool === "marquee" || tool === "eraser") return "crosshair";
+  if (typeof tool !== "number") return "";
+  switch (tool) {
+    case AnnotationType.NONE:
+    case AnnotationType.SELECT:
+      return "";
+    // Stamp/signature hide the native cursor behind a floating image
+    // preview (body cursor 'none'); an element cursor here would
+    // override that and bring the arrow back on top of the preview.
+    case AnnotationType.STAMP:
+    case AnnotationType.SIGNATURE:
+      return "";
+    case AnnotationType.HIGHLIGHT:
+    case AnnotationType.STRIKEOUT:
+    case AnnotationType.UNDERLINE:
+      return "text";
+    default:
+      return "crosshair";
+  }
+});
 const isUsingAnnotationTool = computed(() => {
   const tool = state.activeTool.value;
-  return tool === "marquee" || tool === "eraser" || typeof tool === "number" && tool !== AnnotationType.NONE;
+  return tool === "marquee" || tool === "eraser" || typeof tool === "number" && tool !== AnnotationType.NONE && tool !== AnnotationType.SELECT;
 });
 const formFieldPointerEvents = computed(() => {
   if (state.readonly.value) return "none";

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

@@ -0,0 +1,8 @@
+import type { ViewerSelectionContext, ViewerSelectionItem } from '../selection-items.js';
+type __VLS_Props = {
+    items: ViewerSelectionItem[] | undefined;
+    ctx: ViewerSelectionContext;
+};
+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;
+export default _default;

package/dist/runtime/components/SelectionToolbarItems.vue

@@ -0,0 +1,43 @@
+<template>
+  <template v-for="item in visibleItems" :key="item.key">
+    <button
+      v-if="item.type === 'button'"
+      class="flex items-center justify-center h-7 rounded-md hover:bg-default cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="item.icon ? 'w-7' : 'px-2'"
+      :title="item.label"
+      :disabled="item.disabled"
+      :data-testid="`selection-item-${item.key}`"
+      @click="item.onSelect(props.ctx)"
+    >
+      <UIcon v-if="item.icon" :name="item.icon" class="text-sm text-muted" />
+      <span v-else class="text-xs text-muted whitespace-nowrap">{{ item.label }}</span>
+    </button>
+    <USelect
+      v-else-if="item.type === 'select'"
+      :model-value="selectValue(item)"
+      :items="item.items"
+      :placeholder="item.placeholder"
+      :disabled="item.disabled"
+      :aria-label="item.label"
+      :title="item.label"
+      class="w-24"
+      size="sm"
+      :data-testid="`selection-item-${item.key}`"
+      @update:model-value="(v) => item.onUpdate(String(v), props.ctx)"
+    />
+  </template>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  items: { type: null, required: true },
+  ctx: { type: Object, required: true }
+});
+const visibleItems = computed(
+  () => (props.items ?? []).filter((item) => item.visible?.(props.ctx) ?? true)
+);
+function selectValue(item) {
+  return typeof item.value === "function" ? item.value(props.ctx) : item.value;
+}
+</script>

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

@@ -0,0 +1,8 @@
+import type { ViewerSelectionContext, ViewerSelectionItem } from '../selection-items.js';
+type __VLS_Props = {
+    items: ViewerSelectionItem[] | undefined;
+    ctx: ViewerSelectionContext;
+};
+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;
+export default _default;

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

@@ -3,6 +3,7 @@ import type { AddFormFieldPayload, FormFieldDefinition, IAnnotationStore, Placed
 import { type ExportPdfOptions } from '../annotation/pdf-export/export.js';
 import type { ViewerMenuItem } from '../menu-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
+import { type ViewerSelectionItem } from '../selection-items.js';
 import { type KviewerMessageOverrides } from '../composables/useKviewerI18n.js';
 import { type KviewerLocale } from '../i18n/messages.js';
 type __VLS_Props = {
@@ -63,6 +64,11 @@ type __VLS_Props = {
      *  toggles or actions without replacing the entire header. Ignored
      *  when the host supplies a custom `#header` slot. */
     menuItems?: ViewerMenuItem[];
+    /** Custom controls appended to the floating selection popover — shown
+     *  when an annotation or a placed form field (e.g. a signature field)
+     *  is selected. Buttons and selects; every callback receives the
+     *  current selection. See {@link ViewerSelectionItem}. */
+    selectionItems?: ViewerSelectionItem[];
     /** Configures which toolbar tools render and in what order. Entries are
      *  built-in tool IDs (strings) or `{ type: 'slot', ... }` objects that
      *  inject a custom button via a `#tool-<name>` slot. When omitted, the
@@ -202,6 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     messages: KviewerMessageOverrides;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/Viewer.vue

@@ -193,7 +193,8 @@ import {
   triggerRef,
   onMounted,
   onBeforeUnmount,
-  useSlots
+  useSlots,
+  provide
 } from "vue";
 import { useRuntimeConfig } from "#imports";
 import ViewerBar from "./ViewerBar.vue";
@@ -226,6 +227,7 @@ import { isIPad } from "../annotation/engine/input-device";
 import { useInertiaPanzoom } from "../composables/useInertiaPanzoom";
 import { createScriptingManager } from "../composables/useScriptingManager";
 import { createScriptingBridge } from "../composables/useScriptingBridge";
+import { SELECTION_ITEMS_KEY } from "../selection-items";
 import { provideKviewerI18n } from "../composables/useKviewerI18n";
 import { KVIEWER_LOCALES } from "../i18n/messages";
 const props = defineProps({
@@ -248,10 +250,12 @@ const props = defineProps({
   fieldDefaults: { type: Object, required: false, default: void 0 },
   scripting: { type: Boolean, required: false, default: false },
   menuItems: { type: Array, required: false, default: void 0 },
+  selectionItems: { type: Array, required: false, default: void 0 },
   tools: { type: Array, required: false, default: void 0 },
   locale: { type: null, required: false, default: void 0 },
   messages: { type: Object, required: false, default: void 0 }
 });
+provide(SELECTION_ITEMS_KEY, computed(() => props.selectionItems));
 const slots = useSlots();
 const toolSlotNames = computed(
   () => Object.keys(slots).filter((name) => name.startsWith("tool-"))
@@ -316,6 +320,25 @@ watch(
   },
   { immediate: true }
 );
+watch(
+  () => formFieldsState.selectedPlacedFieldId.value,
+  (id) => {
+    if (!id) return;
+    viewerState.painter.value?.clearSelection();
+    viewerState.selectedAnnotation.value = null;
+    viewerState.selectedAnnotations.value = [];
+    viewerState.selectionRect.value = null;
+  }
+);
+watch(
+  [
+    () => viewerState.selectedAnnotation.value,
+    () => viewerState.selectedAnnotations.value
+  ],
+  ([single, multi]) => {
+    if (single || multi.length > 0) formFieldsState.selectPlacedField(null);
+  }
+);
 const signatureStatus = computed(() => formFieldsState.getSignatureFieldStatus());
 const signatureStatusKey = (fields) => fields.map((s) => `${s.id}|${s.fieldName}|${s.signed ? 1 : 0}`).join(";");
 watch(signatureStatus, (next, prev) => {

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

@@ -3,6 +3,7 @@ import type { AddFormFieldPayload, FormFieldDefinition, IAnnotationStore, Placed
 import { type ExportPdfOptions } from '../annotation/pdf-export/export.js';
 import type { ViewerMenuItem } from '../menu-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
+import { type ViewerSelectionItem } from '../selection-items.js';
 import { type KviewerMessageOverrides } from '../composables/useKviewerI18n.js';
 import { type KviewerLocale } from '../i18n/messages.js';
 type __VLS_Props = {
@@ -63,6 +64,11 @@ type __VLS_Props = {
      *  toggles or actions without replacing the entire header. Ignored
      *  when the host supplies a custom `#header` slot. */
     menuItems?: ViewerMenuItem[];
+    /** Custom controls appended to the floating selection popover — shown
+     *  when an annotation or a placed form field (e.g. a signature field)
+     *  is selected. Buttons and selects; every callback receives the
+     *  current selection. See {@link ViewerSelectionItem}. */
+    selectionItems?: ViewerSelectionItem[];
     /** Configures which toolbar tools render and in what order. Entries are
      *  built-in tool IDs (strings) or `{ type: 'slot', ... }` objects that
      *  inject a custom button via a `#tool-<name>` slot. When omitted, the
@@ -202,6 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     messages: KviewerMessageOverrides;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -8,15 +8,15 @@ type __VLS_Props = {
      *  omitted, the default toolbar is rendered. See {@link ViewerToolEntry}. */
     tools?: ViewerToolEntry[];
 };
-declare var __VLS_109: string, __VLS_110: {
+declare var __VLS_104: string, __VLS_105: {
     state: import("../composables/useViewerState.js").ViewerState;
-}, __VLS_154: string, __VLS_155: {
+}, __VLS_149: string, __VLS_150: {
     state: import("../composables/useViewerState.js").ViewerState;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_109>]?: (props: typeof __VLS_110) => any;
+    [K in NonNullable<typeof __VLS_104>]?: (props: typeof __VLS_105) => any;
 } & {
-    [K in NonNullable<typeof __VLS_154>]?: (props: typeof __VLS_155) => any;
+    [K in NonNullable<typeof __VLS_149>]?: (props: typeof __VLS_150) => any;
 };
 declare const __VLS_base: 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: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ViewerBar.vue

@@ -11,11 +11,12 @@
 
         <ZoomControls />
 
+        <!-- No MarqueeTool button: hand mode covers mouse rubber-band
+             selection; `marquee` stays available via the `tools` prop. -->
         <template v-if="!state.readonly.value">
           <USeparator orientation="vertical" class="h-5" :ui="{ border: 'border-accented' }" />
 
           <HandTool />
-          <MarqueeTool />
         </template>
 
         <div class="ml-auto flex items-center gap-2">

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

@@ -8,15 +8,15 @@ type __VLS_Props = {
      *  omitted, the default toolbar is rendered. See {@link ViewerToolEntry}. */
     tools?: ViewerToolEntry[];
 };
-declare var __VLS_109: string, __VLS_110: {
+declare var __VLS_104: string, __VLS_105: {
     state: import("../composables/useViewerState.js").ViewerState;
-}, __VLS_154: string, __VLS_155: {
+}, __VLS_149: string, __VLS_150: {
     state: import("../composables/useViewerState.js").ViewerState;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_109>]?: (props: typeof __VLS_110) => any;
+    [K in NonNullable<typeof __VLS_104>]?: (props: typeof __VLS_105) => any;
 } & {
-    [K in NonNullable<typeof __VLS_154>]?: (props: typeof __VLS_155) => any;
+    [K in NonNullable<typeof __VLS_149>]?: (props: typeof __VLS_150) => any;
 };
 declare const __VLS_base: 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: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -2,6 +2,7 @@ import { type ComponentPublicInstance } from 'vue';
 import type { ViewMode } from '../composables/useViewerState.js';
 import type { FormFieldDefinition, PlacedFieldDefaults, SignatureFieldStatus, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import type { ViewerMenuItem } from '../menu-items.js';
+import type { ViewerSelectionItem } from '../selection-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
@@ -63,6 +64,8 @@ type __VLS_Props = {
     scripting?: boolean;
     /** Forwarded to every Viewer instance — see KViewer's `menuItems`. */
     menuItems?: ViewerMenuItem[];
+    /** Forwarded to every Viewer instance — see KViewer's `selectionItems`. */
+    selectionItems?: ViewerSelectionItem[];
     /** Forwarded to every Viewer instance — see KViewer's `tools`. */
     tools?: ViewerToolEntry[];
     /** Forwarded to every Viewer instance — see KViewer's `clickToSign`. */
@@ -436,6 +439,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     defaultActiveTab: string;
     minTabs: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ViewerTabs.vue

@@ -61,6 +61,7 @@
           :shape-detection="activeTab.shapeDetection ?? shapeDetection"
           :scripting="activeTab.scripting ?? scripting"
           :menu-items="menuItems"
+          :selection-items="selectionItems"
           :tools="tools"
           :role-colors="roleColors"
           :active-role-id="activeRoleId"
@@ -112,6 +113,7 @@ const props = defineProps({
   activeRoleId: { type: [String, null], required: false, default: void 0 },
   scripting: { type: Boolean, required: false, default: false },
   menuItems: { type: Array, required: false, default: void 0 },
+  selectionItems: { type: Array, required: false, default: void 0 },
   tools: { type: Array, required: false, default: void 0 },
   clickToSign: { type: Boolean, required: false, default: false },
   editablePlacedFields: { type: Boolean, required: false, default: false },

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

@@ -2,6 +2,7 @@ import { type ComponentPublicInstance } from 'vue';
 import type { ViewMode } from '../composables/useViewerState.js';
 import type { FormFieldDefinition, PlacedFieldDefaults, SignatureFieldStatus, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import type { ViewerMenuItem } from '../menu-items.js';
+import type { ViewerSelectionItem } from '../selection-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
@@ -63,6 +64,8 @@ type __VLS_Props = {
     scripting?: boolean;
     /** Forwarded to every Viewer instance — see KViewer's `menuItems`. */
     menuItems?: ViewerMenuItem[];
+    /** Forwarded to every Viewer instance — see KViewer's `selectionItems`. */
+    selectionItems?: ViewerSelectionItem[];
     /** Forwarded to every Viewer instance — see KViewer's `tools`. */
     tools?: ViewerToolEntry[];
     /** Forwarded to every Viewer instance — see KViewer's `clickToSign`. */
@@ -436,6 +439,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     defaultActiveTab: string;
     minTabs: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -6,7 +6,10 @@
   'kviewer-form-field--placed': isPlaced,
   'kviewer-form-field--selected': props.selected
 }"
-    :style="[positionStyle, { '--kvw-field-color': chromeColor }]"
+    :style="[positionStyle, {
+  '--kvw-field-color': chromeColor,
+  '--kvw-handle-zoom': handleZoom
+}]"
     :data-element-id="props.field.id"
   >
     <div
@@ -29,6 +32,11 @@
       :page-height="props.pageTransform.height"
       @select="emit('select')"
     />
+
+    <PlacedFieldToolbar
+      v-if="showChrome && props.selected && !state.readonly.value"
+      :field="props.field"
+    />
   </div>
 </template>
 
@@ -44,6 +52,7 @@ import FormDropdown from "./FormDropdown.vue";
 import FormSignatureField from "./FormSignatureField.vue";
 import FormButton from "./FormButton.vue";
 import PlacedFieldChrome from "./PlacedFieldChrome.vue";
+import PlacedFieldToolbar from "./PlacedFieldToolbar.vue";
 const props = defineProps({
   field: { type: Object, required: true },
   pageTransform: { type: Object, required: true },
@@ -58,6 +67,10 @@ const isFormEditMode = computed(() => state.formEditMode.value);
 const showChrome = computed(
   () => isFormEditMode.value || formFields.editablePlacedFields.value && isPlaced.value
 );
+const handleZoom = computed(() => {
+  const totalZoom = (props.scale || 1) * (state.visualZoom.value || 1);
+  return (1 / totalZoom).toFixed(3);
+});
 const chromeColor = computed(() => {
   const id = props.field.roleId;
   if (!id) return "#1677ff";
@@ -77,5 +90,5 @@ const positionStyle = computed(() => {
 </script>
 
 <style>
-.kviewer-form-field__body{height:100%;width:100%}.kviewer-form-field__body--locked{pointer-events:none}.kviewer-form-field--editable{outline:1px dashed color-mix(in srgb,var(--kvw-field-color,#1677ff) 45%,transparent);outline-offset:0}.kviewer-form-field--editable.kviewer-form-field--placed{outline-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 75%,transparent)}.kviewer-form-field--editable.kviewer-form-field--selected{outline:none}
+.kviewer-form-field__body{height:100%;width:100%}.kviewer-form-field__body--locked{pointer-events:none}
 </style>

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

@@ -6,10 +6,16 @@
     ref="rootEl"
     class="kviewer-placed-chrome"
     :class="{ 'kviewer-placed-chrome--selected': selected }"
-    :style="{ '--kvw-handle-zoom': handleZoom }"
     @pointerdown.stop="onChromePointerDown"
     @click.stop
   >
+    <div
+      class="kviewer-placed-chrome__outline"
+      :class="{
+  'kviewer-placed-chrome__outline--placed': field.origin === 'placed',
+  'kviewer-placed-chrome__outline--selected': selected
+}"
+    />
     <div
       v-if="selected"
       class="kviewer-placed-chrome__grip"
@@ -33,15 +39,9 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { useFormFields } from "../../composables/useFormFields";
-import { useViewerState } from "../../composables/useViewerState";
 const rootEl = ref(null);
-const viewerState = useViewerState();
-const handleZoom = computed(() => {
-  const totalZoom = (props.scale || 1) * (viewerState.visualZoom.value || 1);
-  return Math.max(0.4, 1 / totalZoom).toFixed(3);
-});
 const props = defineProps({
   field: { type: Object, required: true },
   selected: { type: Boolean, required: true },
@@ -127,5 +127,5 @@ function onHandlePointerDown(e, name) {
 </script>
 
 <style>
-.kviewer-placed-chrome{cursor:move;inset:0;pointer-events:auto;position:absolute;touch-action:none}.kviewer-placed-chrome--selected{outline:1.5px dashed var(--kvw-field-color,#1677ff);outline-offset:0}.kviewer-placed-chrome__grip{align-items:center;background:color-mix(in srgb,var(--kvw-field-color,#1677ff) 15%,transparent);border:1px solid color-mix(in srgb,var(--kvw-field-color,#1677ff) 40%,transparent);border-radius:calc(3px*var(--kvw-handle-zoom, 1));bottom:calc(100% + 3px*var(--kvw-handle-zoom, 1));color:var(--kvw-field-color,#1677ff);cursor:move;display:flex;font-size:calc(9px*var(--kvw-handle-zoom, 1));gap:calc(3px*var(--kvw-handle-zoom, 1));height:calc(16px*var(--kvw-handle-zoom, 1));left:0;line-height:1;overflow:hidden;padding:0 calc(6px*var(--kvw-handle-zoom, 1)) 0 calc(2px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;right:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.kviewer-placed-chrome__grip-dots{color:var(--kvw-field-color,#1677ff);flex:0 0 auto;height:calc(10px*var(--kvw-handle-zoom, 1));width:calc(10px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__grip-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kviewer-placed-chrome__handle{background:#fff;border:1px solid var(--kvw-field-color,#1677ff);border-radius:2px;height:calc(8px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;touch-action:none;width:calc(8px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle:before{content:"";inset:calc(-8px*var(--kvw-handle-zoom, 1));position:absolute}.kviewer-placed-chrome__handle--n{left:50%;top:calc(-4px*var(--kvw-handle-zoom, 1));transform:translateX(-50%)}.kviewer-placed-chrome__handle--s{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:50%;transform:translateX(-50%)}.kviewer-placed-chrome__handle--e{right:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--w{left:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--ne{right:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--nw{left:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--se{bottom:calc(-4px*var(--kvw-handle-zoom, 1));right:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--sw{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:calc(-4px*var(--kvw-handle-zoom, 1))}
+.kviewer-placed-chrome{cursor:move;inset:0;pointer-events:auto;position:absolute;touch-action:none}.kviewer-placed-chrome__outline{border:1px dashed color-mix(in srgb,var(--kvw-field-color,#1677ff) 45%,transparent);box-sizing:border-box;height:calc(100%/var(--kvw-handle-zoom, 1));left:0;pointer-events:none;position:absolute;top:0;transform:scale(var(--kvw-handle-zoom,1));transform-origin:0 0;width:calc(100%/var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__outline--placed{border-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 75%,transparent)}.kviewer-placed-chrome__outline--selected{border:1.5px dashed var(--kvw-field-color,#1677ff)}.kviewer-placed-chrome__grip{align-items:center;background:color-mix(in srgb,var(--kvw-field-color,#1677ff) 15%,transparent);border:1px solid color-mix(in srgb,var(--kvw-field-color,#1677ff) 40%,transparent);border-radius:4px;bottom:calc(100% + 4px*var(--kvw-handle-zoom, 1));box-sizing:border-box;color:var(--kvw-field-color,#1677ff);cursor:move;display:flex;font-size:12px;gap:4px;height:22px;left:0;line-height:1;overflow:hidden;padding:0 8px 0 3px;pointer-events:auto;position:absolute;touch-action:none;transform:scale(var(--kvw-handle-zoom,1));transform-origin:0 100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(100%/var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__grip-dots{color:var(--kvw-field-color,#1677ff);flex:0 0 auto;height:13px;width:13px}.kviewer-placed-chrome__grip-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kviewer-placed-chrome__handle{background:#fff;border:1px solid var(--kvw-field-color,#1677ff);border-radius:2px;height:8px;pointer-events:auto;position:absolute;touch-action:none;transform:scale(var(--kvw-handle-zoom,1));width:8px}.kviewer-placed-chrome__handle:before{content:"";inset:-8px;position:absolute}.kviewer-placed-chrome__handle--n{left:50%;top:-4px;transform:translateX(-50%) scale(var(--kvw-handle-zoom,1))}.kviewer-placed-chrome__handle--s{bottom:-4px;left:50%;transform:translateX(-50%) scale(var(--kvw-handle-zoom,1))}.kviewer-placed-chrome__handle--e{right:-4px;top:50%;transform:translateY(-50%) scale(var(--kvw-handle-zoom,1))}.kviewer-placed-chrome__handle--w{left:-4px;top:50%;transform:translateY(-50%) scale(var(--kvw-handle-zoom,1))}.kviewer-placed-chrome__handle--ne{right:-4px;top:-4px}.kviewer-placed-chrome__handle--nw{left:-4px;top:-4px}.kviewer-placed-chrome__handle--se{bottom:-4px;right:-4px}.kviewer-placed-chrome__handle--sw{bottom:-4px;left:-4px}
 </style>

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

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+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;
+export default _default;

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

@@ -0,0 +1,51 @@
+<template>
+  <!-- Same pill as AnnotationToolbar, but anchored in the page DOM below
+       the selected field so it follows pan/zoom for free (the Konva
+       selection popover is viewport-fixed because the stage has no DOM
+       anchor to attach to). Stops pointer events so a click here never
+       reaches page-level deselect handlers. -->
+  <div
+    class="kviewer-placed-toolbar"
+    @pointerdown.stop
+    @click.stop
+  >
+    <div class="flex items-center gap-0.5 bg-elevated rounded-lg shadow-lg border border-default p-1">
+      <SelectionToolbarItems :items="customItems" :ctx="selectionCtx" />
+
+      <button
+        class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
+        :title="t('deleteField')"
+        data-testid="placed-field-delete"
+        @click="onDelete"
+      >
+        <UIcon name="i-lucide-trash-2" class="text-sm text-error" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from "vue";
+import { useFormFields } from "../../composables/useFormFields";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
+import { SELECTION_ITEMS_KEY } from "../../selection-items";
+import SelectionToolbarItems from "../SelectionToolbarItems.vue";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const formFields = useFormFields();
+const { t } = useKviewerI18n();
+const customItems = inject(SELECTION_ITEMS_KEY, void 0);
+const selectionCtx = computed(() => ({
+  kind: "field",
+  annotations: [],
+  field: props.field
+}));
+function onDelete() {
+  formFields.removePlacedField(props.field.id);
+}
+</script>
+
+<style>
+.kviewer-placed-toolbar{left:50%;pointer-events:auto;position:absolute;top:calc(100% + 8px*var(--kvw-handle-zoom, 1));transform:translateX(-50%) scale(var(--kvw-handle-zoom,1));transform-origin:50% 0;width:-moz-max-content;width:max-content;z-index:1}
+</style>

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

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+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;
+export default _default;

package/dist/runtime/public-types.d.ts

@@ -1,6 +1,6 @@
 export type { ExportPdfOptions } from './annotation/pdf-export/export.js';
 export type { ViewerTabItem, AddTabOptions } from './components/ViewerTabs.vue.js';
-export type { AddFormFieldPayload, CheckboxStyle, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, PlacedFieldDefaultProps, PlacedFieldDefaults, SignatureData, SignatureFieldStatus, SignatureHandlers, } from './annotation/engine/types.js';
+export type { AddFormFieldPayload, CheckboxStyle, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, IAnnotationStore, PlacedFieldDefaultProps, PlacedFieldDefaults, SignatureData, SignatureFieldStatus, SignatureHandlers, } from './annotation/engine/types.js';
 export type { ViewMode } from './composables/viewMode.js';
 export type { ViewerState, ActiveTool } from './composables/useViewerState.js';
 export type { KViewerApi, KViewerHostApi, KViewerEmbedBridgeOptions, } from './embed/bridge-host.js';
@@ -10,4 +10,5 @@ export { KViewerEmbedClient } from './embed/bridge-client.js';
 export type { EventName as KViewerEmbedEventName, EventPayloads as KViewerEmbedEventPayloads, MethodName as KViewerEmbedMethodName, } from './embed/protocol.js';
 export { KVIEWER_EMBED_PROTOCOL_VERSION, UNSUPPORTED_METHOD_ERROR_NAME as KVIEWER_EMBED_UNSUPPORTED_METHOD_ERROR_NAME, } from './embed/protocol.js';
 export type { ViewerMenuItem, ViewerMenuButtonItem, ViewerMenuCheckboxItem, ViewerMenuSeparatorItem, } from './menu-items.js';
+export type { ViewerSelectionItem, ViewerSelectionButtonItem, ViewerSelectionSelectItem, ViewerSelectionContext, } from './selection-items.js';
 export type { ViewerToolId, ViewerTopToolId, ViewerBottomToolId, ViewerLayoutToolId, ViewerToolEntry, ViewerToolSlot, } from './toolbar-tools.js';

package/dist/runtime/selection-items.d.ts

@@ -0,0 +1,61 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { FormFieldDefinition, IAnnotationStore } from './annotation/engine/types.js';
+/** What the floating selection popover is currently attached to. Passed to
+ *  every custom-item callback so a single item list can serve both the
+ *  Konva annotation selection and the HTML placed-field selection. */
+export interface ViewerSelectionContext {
+    /** `'annotation'` = Konva-drawn annotation(s); `'field'` = a user-placed
+     *  HTML form field (e.g. a signature field). */
+    kind: 'annotation' | 'field';
+    /** The selected annotation(s): one entry for a single selection, several
+     *  for a marquee multi-select, empty when `kind` is `'field'`. */
+    annotations: IAnnotationStore[];
+    /** The selected placed form field. Null when `kind` is `'annotation'`. */
+    field: FormFieldDefinition | null;
+}
+/** A custom control appended to the floating selection popover shown when
+ *  an annotation or a placed form field is selected. Pass an array of
+ *  these to `<KViewer :selection-items="...">` (or `<KViewerTabs>`).
+ *
+ *  Mirrors the `menuItems` discriminated-union pattern; scoped to the
+ *  controls a compact floating toolbar can carry. */
+export type ViewerSelectionItem = ViewerSelectionButtonItem | ViewerSelectionSelectItem;
+export interface ViewerSelectionButtonItem {
+    type: 'button';
+    /** Stable key for Vue list rendering. Keep unique within the array. */
+    key: string;
+    /** Tooltip / accessible label. Rendered as text when no icon is set. */
+    label: string;
+    /** Lucide-style icon name. When set, the button is icon-only. */
+    icon?: string;
+    /** Fired on click with the current selection. */
+    onSelect: (ctx: ViewerSelectionContext) => void;
+    /** Disables the item without removing it. */
+    disabled?: boolean;
+    /** Show the item only for selections this predicate accepts. Omit to
+     *  show it for both annotation and field selections. */
+    visible?: (ctx: ViewerSelectionContext) => boolean;
+}
+export interface ViewerSelectionSelectItem {
+    type: 'select';
+    key: string;
+    /** Accessible label / tooltip for the select. */
+    label?: string;
+    /** Options shown in the dropdown. */
+    items: {
+        label: string;
+        value: string;
+    }[];
+    /** Current value — a plain (reactive) string, or a getter deriving it
+     *  from the current selection. */
+    value?: string | ((ctx: ViewerSelectionContext) => string | undefined);
+    placeholder?: string;
+    /** Fired with the chosen option value and the current selection. */
+    onUpdate: (value: string, ctx: ViewerSelectionContext) => void;
+    disabled?: boolean;
+    visible?: (ctx: ViewerSelectionContext) => boolean;
+}
+/** Provided by KViewer so both selection popovers (the Konva annotation
+ *  toolbar and the placed-field toolbar, which lives deep inside the page
+ *  DOM layer) can read the host's items without prop-drilling. */
+export declare const SELECTION_ITEMS_KEY: InjectionKey<Ref<ViewerSelectionItem[] | undefined>>;

package/dist/runtime/selection-items.js

@@ -0,0 +1 @@
+export const SELECTION_ITEMS_KEY = Symbol("kviewer-selection-items");

package/dist/runtime/toolbar-tools.d.ts

@@ -1,7 +1,10 @@
 import type { InjectionKey, Ref } from 'vue';
 import { AnnotationType } from './annotation/engine/types.js';
 /** Built-in tools that live in the top navigation row. Each maps to a
- *  whole self-contained sub-component. `hand` / `marquee` are readonly-gated. */
+ *  whole self-contained sub-component. `hand` / `marquee` are readonly-gated.
+ *  `marquee` has no button in the default toolbar — hand mode rubber-band
+ *  selects on empty-space mouse drags; the dedicated mode remains for hosts
+ *  that want touch-capable multi-select via the `tools` prop. */
 export type ViewerTopToolId = 'menu' | 'pageSettings' | 'zoom' | 'hand' | 'marquee' | 'pageInfo' | 'search';
 /** Built-in tools that live in the second (annotation) row, controlled
  *  per individual button. IDs match the annotation `name` in

package/dist/types.d.mts

@@ -1,4 +1,4 @@
-export { type ActiveTool, type AddFormFieldPayload, type CheckboxStyle, type ExportPdfOptions, type FormFieldDefinition, type FormFieldOrigin, type FormFieldType, type FormFieldValue, type KVIEWER_EMBED_PROTOCOL_VERSION, type KVIEWER_EMBED_UNSUPPORTED_METHOD_ERROR_NAME, type KViewerApi, type KViewerEmbedBridgeOptions, type KViewerEmbedClient, type KViewerEmbedClientOptions, type KViewerEmbedEventName, type KViewerEmbedEventPayloads, type KViewerEmbedMethodName, type KViewerHostApi, type PlacedFieldDefaults, type SignatureData, type SignatureFieldStatus, type SignatureHandlers, type ViewMode, type ViewerBottomToolId, type ViewerLayoutToolId, type ViewerMenuButtonItem, type ViewerMenuCheckboxItem, type ViewerMenuItem, type ViewerMenuSeparatorItem, type ViewerState, type ViewerToolEntry, type ViewerToolId, type ViewerToolSlot, type ViewerTopToolId, type useKViewerEmbedBridge } from '../dist/runtime/public-types.js'
+export { type ActiveTool, type AddFormFieldPayload, type CheckboxStyle, type ExportPdfOptions, type FormFieldDefinition, type FormFieldOrigin, type FormFieldType, type FormFieldValue, type IAnnotationStore, type KVIEWER_EMBED_PROTOCOL_VERSION, type KVIEWER_EMBED_UNSUPPORTED_METHOD_ERROR_NAME, type KViewerApi, type KViewerEmbedBridgeOptions, type KViewerEmbedClient, type KViewerEmbedClientOptions, type KViewerEmbedEventName, type KViewerEmbedEventPayloads, type KViewerEmbedMethodName, type KViewerHostApi, type PlacedFieldDefaults, type SignatureData, type SignatureFieldStatus, type SignatureHandlers, type ViewMode, type ViewerBottomToolId, type ViewerLayoutToolId, type ViewerMenuButtonItem, type ViewerMenuCheckboxItem, type ViewerMenuItem, type ViewerMenuSeparatorItem, type ViewerSelectionButtonItem, type ViewerSelectionContext, type ViewerSelectionItem, type ViewerSelectionSelectItem, type ViewerState, type ViewerToolEntry, type ViewerToolId, type ViewerToolSlot, type ViewerTopToolId, type useKViewerEmbedBridge } from '../dist/runtime/public-types.js'
 
 export { default } from './module.mjs'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",