kviewer 0.2.4 → 0.3.1

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

@@ -60,6 +60,7 @@ export interface ViewerState {
     visualZoom: Ref<number>;
     formEditMode: Ref<boolean>;
     setFormEditMode: (enabled: boolean) => void;
+    clickToSign: Ref<boolean>;
 }
 export interface ViewerStateProvider {
     state: ViewerState;

package/dist/runtime/composables/useViewerState.js

@@ -73,6 +73,7 @@ export function provideViewerState() {
   const visualZoom = ref(1);
   const stylusMode = ref(false);
   const formEditMode = ref(false);
+  const clickToSign = ref(false);
   function isFormFieldTool(t) {
     return typeof t === "number" && (t === AnnotationType.FORM_TEXT || t === AnnotationType.FORM_CHECKBOX || t === AnnotationType.FORM_RADIO || t === AnnotationType.FORM_SIGNATURE);
   }
@@ -96,28 +97,25 @@ export function provideViewerState() {
   const activeStamp = ref(null);
   const signatures = ref([]);
   const activeSignature = ref(null);
-  let _signatureHandlers = null;
+  const _signatureHandlers = shallowRef(null);
   async function loadSignatures() {
-    if (!_signatureHandlers) return;
-    signatures.value = await _signatureHandlers.onLoad();
+    if (!_signatureHandlers.value) return;
+    signatures.value = await _signatureHandlers.value.onLoad();
   }
   async function saveSignature(imageUrl) {
-    if (!_signatureHandlers) return null;
-    const sig = await _signatureHandlers.onSave(imageUrl);
+    if (!_signatureHandlers.value) return null;
+    const sig = await _signatureHandlers.value.onSave(imageUrl);
     signatures.value = [...signatures.value, sig];
     return sig;
   }
   async function deleteSignature(id) {
-    if (!_signatureHandlers) return;
-    await _signatureHandlers.onDelete(id);
+    if (!_signatureHandlers.value) return;
+    await _signatureHandlers.value.onDelete(id);
     signatures.value = signatures.value.filter((s) => s.id !== id);
     if (activeSignature.value?.id === id) activeSignature.value = null;
   }
   function selectTool(tool, dataTransfer) {
     if (readonly.value && tool !== "hand") return;
-    if (isFormFieldTool(tool) && !formEditMode.value) {
-      formEditMode.value = true;
-    }
     activeTool.value = tool;
     selectedAnnotation.value = null;
     selectedAnnotations.value = [];
@@ -187,10 +185,10 @@ export function provideViewerState() {
     signatures,
     activeSignature,
     get signatureHandlers() {
-      return _signatureHandlers;
+      return _signatureHandlers.value;
     },
     set signatureHandlers(v) {
-      _signatureHandlers = v;
+      _signatureHandlers.value = v;
     },
     loadSignatures,
     saveSignature,
@@ -207,7 +205,8 @@ export function provideViewerState() {
     shapeDetection: shapeDetectionEnabled,
     visualZoom,
     formEditMode,
-    setFormEditMode
+    setFormEditMode,
+    clickToSign
   };
   provide(VIEWER_STATE_KEY, state);
   return {

package/dist/runtime/embed/bridge-client.d.ts

@@ -1,5 +1,5 @@
 import type { ExportPdfOptions } from '../annotation/pdf-export/export.js';
-import type { AddFormFieldPayload, FormFieldDefinition, FormFieldValue, IAnnotationStore } from '../annotation/engine/types.js';
+import type { AddFormFieldPayload, FormFieldDefinition, FormFieldValue, IAnnotationStore, PlacedFieldDefaults, SignatureFieldStatus } from '../annotation/engine/types.js';
 import { type EventName, type EventPayloads, type ImportAnnotationsMode } from './protocol.js';
 export interface KViewerEmbedClientOptions {
     /**
@@ -20,8 +20,8 @@ type EventHandler<E extends EventName> = (payload: EventPayloads[E]) => void;
  * Parent-page client that drives a `<KViewer>` instance running inside
  * an iframe. Wraps `postMessage` into a Promise-based RPC mirroring the
  * viewer's exposed methods, and surfaces iframe-emitted events
- * (`ready`, `formEditMode-changed`, `viewedPages-changed`, `all-pages-read`)
- * via `on()`.
+ * (`ready`, `formEditMode-changed`, `viewedPages-changed`, `all-pages-read`,
+ * `field-placed`, `signedStatus-changed`) via `on()`.
  */
 export declare class KViewerEmbedClient {
     private readonly iframe;
@@ -50,6 +50,22 @@ export declare class KViewerEmbedClient {
     updateFormField(id: string, patch: Partial<FormFieldDefinition>): Promise<void>;
     removeFormField(id: string): Promise<void>;
     getFormFields(): Promise<FormFieldDefinition[]>;
+    /** Replace the per-field-type presets applied when the user places a
+     *  field via the placement tools. Subscribe to `on('field-placed', …)`
+     *  for per-field follow-ups (e.g. renaming). */
+    setFieldDefaults(defaults: PlacedFieldDefaults): Promise<void>;
+    /** Enable/disable kviewer's built-in click-to-sign flow on signature
+     *  fields. Off by default — fields render as passive markers so the
+     *  host's own signing process stays the only entry point. */
+    setClickToSign(enabled: boolean): Promise<void>;
+    /** True once every signature field is signed (in-session value or a
+     *  digital signature already in the source PDF). Vacuously true with
+     *  zero signature fields. Use to gate e.g. envelope finalization; for
+     *  a push-style signal subscribe via `on('signedStatus-changed', …)`. */
+    getSignedStatus(): Promise<boolean>;
+    /** Per-widget signed-state snapshot (id, fieldName, pageNumber,
+     *  signed, roleId). */
+    getSignatureFieldStatus(): Promise<SignatureFieldStatus[]>;
     getFormEditMode(): Promise<boolean>;
     setFormEditMode(enabled: boolean): Promise<void>;
     toggleFormEditMode(): Promise<boolean>;

package/dist/runtime/embed/bridge-client.js

@@ -78,6 +78,30 @@ export class KViewerEmbedClient {
   getFormFields() {
     return this.call("getFormFields");
   }
+  /** Replace the per-field-type presets applied when the user places a
+   *  field via the placement tools. Subscribe to `on('field-placed', …)`
+   *  for per-field follow-ups (e.g. renaming). */
+  setFieldDefaults(defaults) {
+    return this.call("setFieldDefaults", defaults);
+  }
+  /** Enable/disable kviewer's built-in click-to-sign flow on signature
+   *  fields. Off by default — fields render as passive markers so the
+   *  host's own signing process stays the only entry point. */
+  setClickToSign(enabled) {
+    return this.call("setClickToSign", enabled);
+  }
+  /** True once every signature field is signed (in-session value or a
+   *  digital signature already in the source PDF). Vacuously true with
+   *  zero signature fields. Use to gate e.g. envelope finalization; for
+   *  a push-style signal subscribe via `on('signedStatus-changed', …)`. */
+  getSignedStatus() {
+    return this.call("getSignedStatus");
+  }
+  /** Per-widget signed-state snapshot (id, fieldName, pageNumber,
+   *  signed, roleId). */
+  getSignatureFieldStatus() {
+    return this.call("getSignatureFieldStatus");
+  }
   getFormEditMode() {
     return this.call("getFormEditMode");
   }

package/dist/runtime/embed/bridge-host.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from 'vue';
 import type { ExportPdfOptions } from '../annotation/pdf-export/export.js';
-import type { AddFormFieldPayload, FormFieldDefinition, FormFieldValue, IAnnotationStore } from '../annotation/engine/types.js';
+import type { AddFormFieldPayload, FormFieldDefinition, FormFieldValue, IAnnotationStore, PlacedFieldDefaults, SignatureFieldStatus } from '../annotation/engine/types.js';
 import { type MethodName } from './protocol.js';
 /**
  * Surface the bridge calls on the KViewer template ref. Mirrors the
@@ -23,6 +23,15 @@ export interface KViewerApi {
     updateFormField: (id: string, patch: Partial<FormFieldDefinition>) => void;
     removeFormField: (id: string) => void;
     getFormFields: () => FormFieldDefinition[];
+    setFieldDefaults: (defaults: PlacedFieldDefaults) => void;
+    setClickToSign: (enabled: boolean) => void;
+    onFieldPlaced: (cb: (field: FormFieldDefinition) => void) => () => void;
+    getSignedStatus: () => boolean;
+    getSignatureFieldStatus: () => SignatureFieldStatus[];
+    onSignedStatusChanged: (cb: (payload: {
+        allSigned: boolean;
+        fields: SignatureFieldStatus[];
+    }) => void) => () => void;
     formEditMode: Ref<boolean>;
     setFormEditMode: (enabled: boolean) => void;
     toggleFormEditMode: () => boolean;

package/dist/runtime/embed/bridge-host.js

@@ -66,6 +66,20 @@ export function useKViewerEmbedBridge(viewerRef, options) {
       }
       case "getFormFields":
         return viewer.getFormFields();
+      case "setFieldDefaults": {
+        const [defaults] = req.args;
+        viewer.setFieldDefaults(defaults);
+        return void 0;
+      }
+      case "setClickToSign": {
+        const [enabled] = req.args;
+        viewer.setClickToSign(enabled);
+        return void 0;
+      }
+      case "getSignedStatus":
+        return viewer.getSignedStatus();
+      case "getSignatureFieldStatus":
+        return viewer.getSignatureFieldStatus();
       case "getFormEditMode":
         return viewer.formEditMode.value;
       case "setFormEditMode": {
@@ -130,6 +144,12 @@ export function useKViewerEmbedBridge(viewerRef, options) {
           viewer.formEditMode,
           (enabled) => postEvent("formEditMode-changed", { enabled })
         ),
+        viewer.onFieldPlaced(
+          (field) => postEvent("field-placed", { field })
+        ),
+        viewer.onSignedStatusChanged(
+          (payload) => postEvent("signedStatus-changed", payload)
+        ),
         // Read-tracking. The getters touch the viewer's reactive viewed-pages
         // state, so watch re-runs them whenever a page is viewed or tracking
         // is reset.

package/dist/runtime/embed/protocol.d.ts

@@ -1,5 +1,5 @@
 import type { ExportPdfOptions } from '../annotation/pdf-export/export.js';
-import type { AddFormFieldPayload, FormFieldDefinition, FormFieldValue, IAnnotationStore } from '../annotation/engine/types.js';
+import type { AddFormFieldPayload, FormFieldDefinition, FormFieldValue, IAnnotationStore, PlacedFieldDefaults, SignatureFieldStatus } from '../annotation/engine/types.js';
 export declare const KVIEWER_EMBED_PROTOCOL_VERSION = 1;
 export declare const REQUEST_KIND: "kviewer:request";
 export declare const RESPONSE_KIND: "kviewer:response";
@@ -47,6 +47,22 @@ export interface MethodSignatures {
         args: [];
         result: FormFieldDefinition[];
     };
+    setFieldDefaults: {
+        args: [defaults: PlacedFieldDefaults];
+        result: undefined;
+    };
+    setClickToSign: {
+        args: [enabled: boolean];
+        result: undefined;
+    };
+    getSignedStatus: {
+        args: [];
+        result: boolean;
+    };
+    getSignatureFieldStatus: {
+        args: [];
+        result: SignatureFieldStatus[];
+    };
     getFormEditMode: {
         args: [];
         result: boolean;
@@ -112,6 +128,17 @@ export interface EventPayloads {
     /** Fires once when the final unseen page is viewed. Re-arms after
      *  `resetViewedPages()` or a new document. */
     'all-pages-read': Record<string, never>;
+    /** The user placed a form field via a placement tool. Patch it with
+     *  `updateFormField()` to set host-driven properties. */
+    'field-placed': {
+        field: FormFieldDefinition;
+    };
+    /** A signature field's signed state changed (signed, cleared, added,
+     *  removed, or renamed). Push-style counterpart to `getSignedStatus()`. */
+    'signedStatus-changed': {
+        allSigned: boolean;
+        fields: SignatureFieldStatus[];
+    };
 }
 export type EventName = keyof EventPayloads;
 export interface EventMessage<E extends EventName = EventName> {

package/dist/runtime/i18n/messages.d.ts

@@ -23,7 +23,6 @@ export declare const messages: {
         readonly strokeWidth: "Stroke width";
         readonly decreaseStrokeWidth: "Decrease stroke width";
         readonly increaseStrokeWidth: "Increase stroke width";
-        readonly noProperties: "No properties";
         readonly detectFormFields: "Detect form fields";
         readonly disableFormFieldDetection: "Disable form field detection";
         readonly fitWidth: "Fit width";
@@ -42,6 +41,14 @@ export declare const messages: {
         readonly freeText: "Free text";
         readonly startTyping: "Start typing...";
         readonly drawSignature: "Draw signature";
+        readonly uploadSignature: "Upload";
+        readonly dropSignatureImage: "Drop an image here or click to choose";
+        readonly chooseImage: "Choose image";
+        readonly removeWhiteBackground: "Remove white background";
+        readonly unsupportedImageType: "Unsupported file type. Allowed: {accept}";
+        readonly imageTooLarge: "Image is too large. Maximum {size} MB";
+        readonly imageReadFailed: "Could not read that image";
+        readonly backgroundRemovalFailed: "Background could not be removed for this image";
         readonly noSavedSignatures: "No saved signatures";
         readonly addSignature: "Add signature";
         readonly selectedCount: "{count} selected";
@@ -142,7 +149,6 @@ export declare const messages: {
         readonly strokeWidth: "Linienstärke";
         readonly decreaseStrokeWidth: "Linienstärke verringern";
         readonly increaseStrokeWidth: "Linienstärke erhöhen";
-        readonly noProperties: "Keine Eigenschaften";
         readonly detectFormFields: "Formularfelder erkennen";
         readonly disableFormFieldDetection: "Formularfeld-Erkennung deaktivieren";
         readonly fitWidth: "Seitenbreite";
@@ -161,6 +167,14 @@ export declare const messages: {
         readonly freeText: "Freitext";
         readonly startTyping: "Text eingeben...";
         readonly drawSignature: "Unterschrift zeichnen";
+        readonly uploadSignature: "Hochladen";
+        readonly dropSignatureImage: "Bild hierher ziehen oder klicken zum Auswählen";
+        readonly chooseImage: "Bild auswählen";
+        readonly removeWhiteBackground: "Weißen Hintergrund entfernen";
+        readonly unsupportedImageType: "Dateityp nicht unterstützt. Erlaubt: {accept}";
+        readonly imageTooLarge: "Bild ist zu groß. Maximal {size} MB";
+        readonly imageReadFailed: "Bild konnte nicht gelesen werden";
+        readonly backgroundRemovalFailed: "Hintergrund konnte für dieses Bild nicht entfernt werden";
         readonly noSavedSignatures: "Keine gespeicherten Unterschriften";
         readonly addSignature: "Unterschrift hinzufügen";
         readonly selectedCount: "{count} ausgewählt";

package/dist/runtime/i18n/messages.js

@@ -16,7 +16,6 @@ export const messages = {
     strokeWidth: "Stroke width",
     decreaseStrokeWidth: "Decrease stroke width",
     increaseStrokeWidth: "Increase stroke width",
-    noProperties: "No properties",
     detectFormFields: "Detect form fields",
     disableFormFieldDetection: "Disable form field detection",
     fitWidth: "Fit width",
@@ -37,6 +36,14 @@ export const messages = {
     freeText: "Free text",
     startTyping: "Start typing...",
     drawSignature: "Draw signature",
+    uploadSignature: "Upload",
+    dropSignatureImage: "Drop an image here or click to choose",
+    chooseImage: "Choose image",
+    removeWhiteBackground: "Remove white background",
+    unsupportedImageType: "Unsupported file type. Allowed: {accept}",
+    imageTooLarge: "Image is too large. Maximum {size} MB",
+    imageReadFailed: "Could not read that image",
+    backgroundRemovalFailed: "Background could not be removed for this image",
     noSavedSignatures: "No saved signatures",
     addSignature: "Add signature",
     selectedCount: "{count} selected",
@@ -141,7 +148,6 @@ export const messages = {
     strokeWidth: "Linienst\xE4rke",
     decreaseStrokeWidth: "Linienst\xE4rke verringern",
     increaseStrokeWidth: "Linienst\xE4rke erh\xF6hen",
-    noProperties: "Keine Eigenschaften",
     detectFormFields: "Formularfelder erkennen",
     disableFormFieldDetection: "Formularfeld-Erkennung deaktivieren",
     fitWidth: "Seitenbreite",
@@ -160,6 +166,14 @@ export const messages = {
     freeText: "Freitext",
     startTyping: "Text eingeben...",
     drawSignature: "Unterschrift zeichnen",
+    uploadSignature: "Hochladen",
+    dropSignatureImage: "Bild hierher ziehen oder klicken zum Ausw\xE4hlen",
+    chooseImage: "Bild ausw\xE4hlen",
+    removeWhiteBackground: "Wei\xDFen Hintergrund entfernen",
+    unsupportedImageType: "Dateityp nicht unterst\xFCtzt. Erlaubt: {accept}",
+    imageTooLarge: "Bild ist zu gro\xDF. Maximal {size} MB",
+    imageReadFailed: "Bild konnte nicht gelesen werden",
+    backgroundRemovalFailed: "Hintergrund konnte f\xFCr dieses Bild nicht entfernt werden",
     noSavedSignatures: "Keine gespeicherten Unterschriften",
     addSignature: "Unterschrift hinzuf\xFCgen",
     selectedCount: "{count} ausgew\xE4hlt",

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, SignatureData, SignatureHandlers, } from './annotation/engine/types.js';
+export type { AddFormFieldPayload, CheckboxStyle, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, 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, KViewerEmbedBridgeOptions, } from './embed/bridge-host.js';

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

@@ -9,7 +9,7 @@ export type ViewerTopToolId = 'menu' | 'pageSettings' | 'zoom' | 'hand' | 'marqu
  *  the text-selection `highlight`). The `select`/`highlight`/`strikeout`/
  *  `underline`/`circle`/`note`/`arrow`/`cloud` entries have no button in
  *  the default toolbar — they are opt-in extras a host may add. */
-export type ViewerBottomToolId = 'properties' | 'freehand' | 'freeHighlight' | 'freeText' | 'stamp' | 'signature' | 'rectangle' | 'formText' | 'formCheckbox' | 'formRadio' | 'formSignature' | 'undo' | 'redo' | 'eraser' | 'select' | 'highlight' | 'strikeout' | 'underline' | 'circle' | 'note' | 'arrow' | 'cloud';
+export type ViewerBottomToolId = 'properties' | 'freehand' | 'freeHighlight' | 'freeText' | 'stamp' | 'signature' | 'rectangle' | 'formText' | 'formCheckbox' | 'formRadio' | 'formSignature' | 'placeText' | 'placeCheckbox' | 'placeRadio' | 'placeSignature' | 'undo' | 'redo' | 'eraser' | 'select' | 'highlight' | 'strikeout' | 'underline' | 'circle' | 'note' | 'arrow' | 'cloud';
 /** Layout primitives usable in either row. `separator` draws a vertical
  *  divider; `spacer` pushes everything after it to the right (flex
  *  `ml-auto`) — this is how you reproduce today's right-aligned group. */

package/dist/runtime/toolbar-tools.js

@@ -46,6 +46,10 @@ export const BOTTOM_TOOL_IDS = /* @__PURE__ */ new Set([
   "formCheckbox",
   "formRadio",
   "formSignature",
+  "placeText",
+  "placeCheckbox",
+  "placeRadio",
+  "placeSignature",
   "undo",
   "redo",
   "eraser",
@@ -67,6 +71,10 @@ export const ANNOTATION_TOOL_TYPES = {
   formCheckbox: AnnotationType.FORM_CHECKBOX,
   formRadio: AnnotationType.FORM_RADIO,
   formSignature: AnnotationType.FORM_SIGNATURE,
+  placeText: AnnotationType.FORM_TEXT,
+  placeCheckbox: AnnotationType.FORM_CHECKBOX,
+  placeRadio: AnnotationType.FORM_RADIO,
+  placeSignature: AnnotationType.FORM_SIGNATURE,
   select: AnnotationType.SELECT,
   highlight: AnnotationType.HIGHLIGHT,
   strikeout: AnnotationType.STRIKEOUT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",
@@ -29,34 +29,34 @@
     "docs"
   ],
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.101",
-    "@nuxt/kit": "^4.4.2",
-    "@nuxt/ui": "^4.6.0",
+    "@iconify-json/lucide": "^1.2.118",
+    "@nuxt/kit": "^4.5.0",
+    "@nuxt/ui": "^4.10.0",
     "@pdf-lib/fontkit": "^1.1.1",
-    "konva": "^10.2.3",
+    "konva": "^10.3.0",
     "pdf-lib": "^1.17.1",
-    "pdfjs-dist": "^6.0.227",
-    "tailwindcss": "^4.2.2"
+    "pdfjs-dist": "^6.1.200",
+    "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
     "@nuxt/devtools": "^3.2.4",
-    "@nuxt/eslint": "1.15.2",
-    "@nuxt/eslint-config": "^1.15.2",
+    "@nuxt/eslint": "1.16.0",
+    "@nuxt/eslint-config": "^1.16.0",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.4.2",
-    "@nuxt/test-utils": "^4.0.0",
-    "@playwright/test": "^1.59.1",
+    "@nuxt/schema": "^4.5.0",
+    "@nuxt/test-utils": "^4.0.3",
+    "@playwright/test": "^1.61.1",
     "@types/node": "latest",
     "canvas": "^3.2.3",
     "changelogen": "^0.6.2",
-    "eslint": "^10.1.0",
-    "nuxt": "^4.4.2",
-    "path2d": "^0.3.1",
-    "pixelmatch": "^7.1.0",
+    "eslint": "^10.7.0",
+    "nuxt": "^4.5.0",
+    "path2d": "^0.3.3",
+    "pixelmatch": "^7.2.0",
     "pngjs": "^7.0.0",
     "typescript": "~6.0.2",
-    "vitest": "^4.1.1",
-    "vue-tsc": "^3.2.6"
+    "vitest": "^4.1.10",
+    "vue-tsc": "^3.3.7"
   },
   "scripts": {
     "dev": "npm run dev:prepare && portless kviewer nuxt dev playground",