kviewer 0.0.10 → 0.1.0

package/dist/runtime/components/tools/FormFieldTools.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex items-center gap-1">
+    <ToolButton
+      :tool="getDef(AnnotationType.FORM_TEXT)"
+      :active="state.activeTool.value === AnnotationType.FORM_TEXT"
+      @click="state.selectTool(AnnotationType.FORM_TEXT)"
+    />
+    <ToolButton
+      :tool="getDef(AnnotationType.FORM_CHECKBOX)"
+      :active="state.activeTool.value === AnnotationType.FORM_CHECKBOX"
+      @click="state.selectTool(AnnotationType.FORM_CHECKBOX)"
+    />
+    <ToolButton
+      :tool="getDef(AnnotationType.FORM_RADIO)"
+      :active="state.activeTool.value === AnnotationType.FORM_RADIO"
+      @click="state.selectTool(AnnotationType.FORM_RADIO)"
+    />
+    <ToolButton
+      :tool="getDef(AnnotationType.FORM_SIGNATURE)"
+      :active="state.activeTool.value === AnnotationType.FORM_SIGNATURE"
+      @click="state.selectTool(AnnotationType.FORM_SIGNATURE)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useViewerState } from "../../composables/useViewerState";
+import { AnnotationType } from "../../annotation/engine/types";
+import { annotationDefinitions } from "../../annotation/engine/config";
+import ToolButton from "../ToolButton.vue";
+const state = useViewerState();
+function getDef(type) {
+  return annotationDefinitions.find((d) => d.type === type);
+}
+</script>

package/dist/runtime/components/tools/FormFieldTools.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -4,6 +4,8 @@ export declare function createAnnotationEngine(viewerState: ViewerState, options
     userName?: string;
     onRequestTextInput: PainterCallbacks['onRequestTextInput'];
     onRequestDeleteConfirm?: PainterCallbacks['onRequestDeleteConfirm'];
+    onPlaceField?: PainterCallbacks['onPlaceField'];
+    getFormFieldPreviewColor?: PainterCallbacks['getFormFieldPreviewColor'];
     freehandGroupingDelay?: number;
     setExternalGesturesEnabled?: (enabled: boolean) => void;
 }): Painter;

package/dist/runtime/composables/useAnnotationEngine.js

@@ -60,7 +60,9 @@ export function createAnnotationEngine(viewerState, options) {
       viewerState.history.commit();
     },
     onRequestTextInput: options.onRequestTextInput,
-    onRequestDeleteConfirm: options.onRequestDeleteConfirm
+    onRequestDeleteConfirm: options.onRequestDeleteConfirm,
+    onPlaceField: options.onPlaceField,
+    getFormFieldPreviewColor: options.getFormFieldPreviewColor
   };
   const painter = new Painter({
     userName: options.userName ?? "User",

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

@@ -1,5 +1,5 @@
-import { type ShallowRef } from 'vue';
-import type { DetectedShape, FormFieldDefinition, FormFieldValue } from '../annotation/engine/types.js';
+import { type Ref, type ShallowRef } from 'vue';
+import type { AddFormFieldPayload, CheckboxStyle, DetectedShape, FormFieldDefinition, FormFieldValue, PlaceFieldPayload } from '../annotation/engine/types.js';
 export interface FormFieldsState {
     /** Field definitions grouped by page number */
     fieldDefinitions: ShallowRef<Map<number, FormFieldDefinition[]>>;
@@ -21,6 +21,52 @@ export interface FormFieldsState {
     resetValues: () => void;
     /** Create synthetic checkbox form fields from detected shapes */
     registerDetectedCheckboxes: (pageNumber: number, shapes: DetectedShape[], scale: number, pageHeight: number) => void;
+    /** Add a user-placed form field (from the placement tool). Returns the created def. */
+    addPlacedField: (payload: PlaceFieldPayload) => FormFieldDefinition;
+    /** Add a form field programmatically. Public API counterpart to
+     *  `addPlacedField` with full control over the field's properties.
+     *  Returns the created definition. */
+    addFormField: (payload: AddFormFieldPayload) => FormFieldDefinition;
+    /** Update a form field's rect, name, or flags. */
+    updatePlacedField: (id: string, patch: Partial<FormFieldDefinition>) => void;
+    /** Remove a form field and its value. */
+    removePlacedField: (id: string) => void;
+    /** All form-field definitions, flattened across pages. */
+    getAllFields: () => FormFieldDefinition[];
+    /** All user-placed field definitions (used by export). */
+    getPlacedFields: () => FormFieldDefinition[];
+    /** Look up a field definition by id (any origin). */
+    getFieldById: (id: string) => FormFieldDefinition | undefined;
+    /** Id of the currently selected placed field (null if none). */
+    selectedPlacedFieldId: Ref<string | null>;
+    /** Select or deselect a placed field. Pass null to deselect. */
+    selectPlacedField: (id: string | null) => void;
+    /** Opaque role id new placements are auto-tagged with. The host owns
+     *  what roles exist; the editor only carries the active id forward to
+     *  newly placed fields and looks up its color via roleColors. */
+    activeRoleId: Ref<string | null>;
+    /** Set or clear the active role for upcoming placements. */
+    setActiveRole: (id: string | null) => void;
+    /** Map from roleId → CSS color, supplied by the host via the KViewer
+     *  `roleColors` prop. Reading this drives the chrome and placement
+     *  preview color. The editor never mutates role definitions itself. */
+    roleColors: ShallowRef<Record<string, string>>;
+    /** Replace the host-provided color map. Called by KViewer when the
+     *  prop changes. */
+    setRoleColors: (colors: Record<string, string>) => void;
+    /** Apply checkbox-style hints (extracted from `/MK /CA` in the source PDF)
+     *  to existing parsed checkbox defs and store the map for any defs
+     *  parsed afterwards. Keyed by checkbox fieldName. */
+    applyCheckboxStyles: (styles: Map<string, CheckboxStyle>) => void;
+    /** Apply push-button captions (extracted from `/MK /CA` in the source
+     *  PDF) to existing parsed button defs and store the map for any defs
+     *  parsed afterwards. Keyed by button fieldName. */
+    applyButtonCaptions: (captions: Map<string, string>) => void;
+    /** Whether this field is locked by another (signed) signature field's
+     *  lock rule. Reactive to both definitions and values, so a UI computed
+     *  that calls this re-runs when any signature is signed or its lock
+     *  rule changes. */
+    isFieldLocked: (fieldId: string) => boolean;
     /** Clear all values and definitions (for document change) */
     reset: () => void;
 }

package/dist/runtime/composables/useFormFields.js

@@ -1,18 +1,100 @@
 import {
   shallowRef,
+  ref,
   triggerRef,
   provide,
   inject
 } from "vue";
 import { parseFormFields } from "../annotation/parsers/parseFormFields.js";
+import { generateUUID } from "../annotation/engine/utils.js";
 const FORM_FIELDS_KEY = Symbol("kviewer-form-fields");
 export function provideFormFields() {
   const fieldDefinitions = shallowRef(/* @__PURE__ */ new Map());
   const fieldValues = shallowRef(/* @__PURE__ */ new Map());
+  const selectedPlacedFieldId = ref(null);
+  const activeRoleId = ref(null);
+  const roleColors = shallowRef({});
+  function setActiveRole(id) {
+    activeRoleId.value = id;
+  }
+  function setRoleColors(colors) {
+    roleColors.value = colors;
+  }
+  function selectPlacedField(id) {
+    selectedPlacedFieldId.value = id;
+  }
+  function getFieldById(id) {
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) {
+        if (d.id === id) return d;
+      }
+    }
+    return void 0;
+  }
+  let checkboxStyleMap = null;
+  let buttonCaptionMap = null;
+  function applyCheckboxStyles(styles) {
+    checkboxStyleMap = styles;
+    let changed = false;
+    for (const [page, defs] of fieldDefinitions.value.entries()) {
+      let pageChanged = false;
+      const next = defs.map((d) => {
+        if (d.fieldType !== "checkbox" || d.origin !== "parsed") return d;
+        const style = styles.get(d.fieldName);
+        if (!style) return d;
+        if (d.originalCheckboxStyle) return d;
+        pageChanged = true;
+        return { ...d, checkboxStyle: d.checkboxStyle ?? style, originalCheckboxStyle: style };
+      });
+      if (pageChanged) {
+        fieldDefinitions.value.set(page, next);
+        changed = true;
+      }
+    }
+    if (changed) triggerRef(fieldDefinitions);
+  }
+  function applyButtonCaptions(captions) {
+    buttonCaptionMap = captions;
+    let changed = false;
+    for (const [page, defs] of fieldDefinitions.value.entries()) {
+      let pageChanged = false;
+      const next = defs.map((d) => {
+        if (d.fieldType !== "button" || d.origin !== "parsed") return d;
+        const caption = captions.get(d.fieldName);
+        if (!caption) return d;
+        if (d.buttonLabel === caption) return d;
+        pageChanged = true;
+        return { ...d, buttonLabel: caption };
+      });
+      if (pageChanged) {
+        fieldDefinitions.value.set(page, next);
+        changed = true;
+      }
+    }
+    if (changed) triggerRef(fieldDefinitions);
+  }
   function parsePageFields(pageNumber, rawAnnotations) {
     if (fieldDefinitions.value.has(pageNumber)) return;
     const defs = parseFormFields(rawAnnotations, pageNumber);
     if (defs.length === 0) return;
+    if (checkboxStyleMap) {
+      for (const def of defs) {
+        if (def.fieldType === "checkbox" && !def.checkboxStyle) {
+          const style = checkboxStyleMap.get(def.fieldName);
+          if (style) {
+            def.checkboxStyle = style;
+            def.originalCheckboxStyle = style;
+          }
+        }
+      }
+    }
+    if (buttonCaptionMap) {
+      for (const def of defs) {
+        if (def.fieldType !== "button") continue;
+        const caption = buttonCaptionMap.get(def.fieldName);
+        if (caption) def.buttonLabel = caption;
+      }
+    }
     fieldDefinitions.value.set(pageNumber, defs);
     triggerRef(fieldDefinitions);
     for (const def of defs) {
@@ -30,11 +112,19 @@ export function provideFormFields() {
     const existing = fieldValues.value.get(fieldId);
     if (!existing) return;
     existing.value = value;
-    if (existing.fieldType === "radio" && typeof value === "string" && value !== "") {
-      const fieldName = existing.fieldName;
-      for (const [id, fv] of fieldValues.value.entries()) {
-        if (id !== fieldId && fv.fieldName === fieldName && fv.fieldType === "radio") {
-          fv.value = "";
+    const { fieldName, fieldType } = existing;
+    if (fieldName) {
+      if (fieldType === "radio" && typeof value === "string" && value !== "") {
+        for (const [id, fv] of fieldValues.value.entries()) {
+          if (id !== fieldId && fv.fieldName === fieldName && fv.fieldType === "radio") {
+            fv.value = "";
+          }
+        }
+      } else if (fieldType !== "radio") {
+        for (const [id, fv] of fieldValues.value.entries()) {
+          if (id !== fieldId && fv.fieldName === fieldName && fv.fieldType === fieldType) {
+            fv.value = value;
+          }
         }
       }
     }
@@ -97,6 +187,7 @@ export function provideFormFields() {
         rect: [pdfX1, pdfY1, pdfX2, pdfY2],
         readOnly: false,
         required: false,
+        origin: "detected",
         exportValue: "Yes",
         defaultValue: "Off",
         shapeType: s.shapeType
@@ -115,6 +206,228 @@ export function provideFormFields() {
     }
     triggerRef(fieldValues);
   }
+  function nextPlacedFieldName(fieldType) {
+    const base = fieldType === "text" ? "Text" : fieldType === "checkbox" ? "Checkbox" : fieldType === "signature" ? "Signature" : fieldType === "dropdown" ? "Dropdown" : fieldType === "radio" ? "Radio" : "Field";
+    const existing = /* @__PURE__ */ new Set();
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) existing.add(d.fieldName);
+    }
+    let n = 1;
+    while (existing.has(`${base}_${n}`)) n += 1;
+    return `${base}_${n}`;
+  }
+  function placedDefaultValue(fieldType) {
+    if (fieldType === "checkbox") return false;
+    return "";
+  }
+  function addPlacedField(payload) {
+    const id = `placed-${generateUUID()}`;
+    let fieldName;
+    if (payload.fieldType === "radio" && selectedPlacedFieldId.value) {
+      const sel = getFieldById(selectedPlacedFieldId.value);
+      fieldName = sel && sel.fieldType === "radio" ? sel.fieldName : nextPlacedFieldName(payload.fieldType);
+    } else {
+      fieldName = nextPlacedFieldName(payload.fieldType);
+    }
+    const def = {
+      id,
+      pageNumber: payload.pageNumber,
+      fieldType: payload.fieldType,
+      fieldName,
+      rect: [...payload.rectPdf],
+      readOnly: false,
+      required: false,
+      origin: "placed"
+    };
+    if (activeRoleId.value) {
+      def.roleId = activeRoleId.value;
+    }
+    if (payload.fieldType === "radio") {
+      def.buttonValue = nextRadioOptionValue(fieldName);
+    }
+    if (payload.fieldType === "checkbox") {
+      def.checkboxStyle = "check";
+    }
+    if (payload.fieldType === "dropdown") {
+      def.combo = true;
+      def.options = [{ exportValue: "Option 1", displayValue: "Option 1" }];
+    }
+    const existingDefs = fieldDefinitions.value.get(payload.pageNumber) ?? [];
+    fieldDefinitions.value.set(payload.pageNumber, [...existingDefs, def]);
+    triggerRef(fieldDefinitions);
+    fieldValues.value.set(id, {
+      fieldId: id,
+      fieldName: def.fieldName,
+      fieldType: def.fieldType,
+      value: placedDefaultValue(def.fieldType)
+    });
+    triggerRef(fieldValues);
+    if (payload.fieldType === "radio") {
+      selectedPlacedFieldId.value = id;
+    }
+    return def;
+  }
+  function addFormField(payload) {
+    const id = `placed-${generateUUID()}`;
+    const fieldName = payload.fieldName ?? nextPlacedFieldName(payload.fieldType);
+    const def = {
+      id,
+      pageNumber: payload.pageNumber,
+      fieldType: payload.fieldType,
+      fieldName,
+      rect: [...payload.rect],
+      readOnly: payload.readOnly ?? false,
+      required: payload.required ?? false,
+      origin: "placed"
+    };
+    if (payload.roleId !== void 0) def.roleId = payload.roleId;
+    if (payload.defaultValue !== void 0) def.defaultValue = payload.defaultValue;
+    if (payload.fontSize !== void 0) def.fontSize = payload.fontSize;
+    if (payload.fontName !== void 0) def.fontName = payload.fontName;
+    if (payload.color !== void 0) def.color = payload.color;
+    if (payload.backgroundColor !== void 0) def.backgroundColor = payload.backgroundColor;
+    if (payload.textAlignment !== void 0) def.textAlignment = payload.textAlignment;
+    if (payload.fieldType === "radio") {
+      def.buttonValue = payload.buttonValue ?? nextRadioOptionValue(fieldName);
+    }
+    if (payload.fieldType === "checkbox") {
+      def.checkboxStyle = payload.checkboxStyle ?? "check";
+    }
+    if (payload.fieldType === "dropdown") {
+      def.combo = payload.combo ?? true;
+      def.options = payload.options ?? [{ exportValue: "Option 1", displayValue: "Option 1" }];
+      if (payload.multiSelect !== void 0) def.multiSelect = payload.multiSelect;
+    }
+    if (payload.fieldType === "text") {
+      if (payload.multiLine !== void 0) def.multiLine = payload.multiLine;
+      if (payload.password !== void 0) def.password = payload.password;
+      if (payload.comb !== void 0) def.comb = payload.comb;
+      if (payload.maxLen !== void 0) def.maxLen = payload.maxLen;
+    }
+    if (payload.fieldType === "signature") {
+      if (payload.promptText !== void 0) def.promptText = payload.promptText;
+      if (payload.lockAction !== void 0) def.lockAction = payload.lockAction;
+      if (payload.lockFieldNames !== void 0) def.lockFieldNames = payload.lockFieldNames;
+    }
+    const existingDefs = fieldDefinitions.value.get(payload.pageNumber) ?? [];
+    fieldDefinitions.value.set(payload.pageNumber, [...existingDefs, def]);
+    triggerRef(fieldDefinitions);
+    fieldValues.value.set(id, {
+      fieldId: id,
+      fieldName: def.fieldName,
+      fieldType: def.fieldType,
+      value: getDefaultValue(def)
+    });
+    triggerRef(fieldValues);
+    return def;
+  }
+  function getAllFields() {
+    const out = [];
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) out.push(d);
+    }
+    return out;
+  }
+  function nextRadioOptionValue(groupName) {
+    const used = /* @__PURE__ */ new Set();
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) {
+        if (d.fieldType === "radio" && d.fieldName === groupName && d.buttonValue) {
+          used.add(d.buttonValue);
+        }
+      }
+    }
+    let n = 1;
+    while (used.has(`Option_${n}`)) n += 1;
+    return `Option_${n}`;
+  }
+  function updatePlacedField(id, patch) {
+    let found;
+    for (const [page, defs] of fieldDefinitions.value.entries()) {
+      const idx = defs.findIndex((d) => d.id === id);
+      if (idx === -1) continue;
+      const existing = defs[idx];
+      const next = { ...existing, ...patch, id: existing.id };
+      const nextDefs = defs.slice();
+      nextDefs[idx] = next;
+      fieldDefinitions.value.set(page, nextDefs);
+      found = next;
+      break;
+    }
+    if (!found) return;
+    triggerRef(fieldDefinitions);
+    const fv = fieldValues.value.get(id);
+    if (fv && (fv.fieldName !== found.fieldName || fv.fieldType !== found.fieldType)) {
+      fv.fieldName = found.fieldName;
+      fv.fieldType = found.fieldType;
+      triggerRef(fieldValues);
+    }
+  }
+  function removePlacedField(id) {
+    let removed = false;
+    for (const [page, defs] of fieldDefinitions.value.entries()) {
+      const idx = defs.findIndex((d) => d.id === id);
+      if (idx === -1) continue;
+      const nextDefs = defs.slice();
+      nextDefs.splice(idx, 1);
+      if (nextDefs.length === 0) {
+        fieldDefinitions.value.delete(page);
+      } else {
+        fieldDefinitions.value.set(page, nextDefs);
+      }
+      removed = true;
+      break;
+    }
+    if (!removed) return;
+    triggerRef(fieldDefinitions);
+    if (fieldValues.value.delete(id)) {
+      triggerRef(fieldValues);
+    }
+    if (selectedPlacedFieldId.value === id) {
+      selectedPlacedFieldId.value = null;
+    }
+  }
+  function getPlacedFields() {
+    const out = [];
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) {
+        if (d.origin === "placed" || d.origin === "detected") {
+          out.push(d);
+          continue;
+        }
+        const rectMoved = d.originalRect && rectChanged(d.rect, d.originalRect);
+        const styleChanged = d.fieldType === "checkbox" && (d.checkboxStyle ?? "check") !== (d.originalCheckboxStyle ?? "check");
+        if (rectMoved || styleChanged) {
+          out.push(d);
+        }
+      }
+    }
+    return out;
+  }
+  function rectChanged(a, b) {
+    for (let i = 0; i < 4; i++) {
+      if (Math.abs((a[i] ?? 0) - (b[i] ?? 0)) > 0.01) return true;
+    }
+    return false;
+  }
+  function isFieldLocked(fieldId) {
+    const target = getFieldById(fieldId);
+    if (!target) return false;
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const sig of defs) {
+        if (sig.fieldType !== "signature") continue;
+        if (!sig.lockAction) continue;
+        if (sig.id === fieldId) continue;
+        const fv = fieldValues.value.get(sig.id);
+        if (!fv || typeof fv.value !== "string" || fv.value === "") continue;
+        if (sig.lockAction === "all") return true;
+        const list = sig.lockFieldNames ?? [];
+        if (sig.lockAction === "include" && list.includes(target.fieldName)) return true;
+        if (sig.lockAction === "exclude" && !list.includes(target.fieldName)) return true;
+      }
+    }
+    return false;
+  }
   function resetValues() {
     for (const [, defs] of fieldDefinitions.value.entries()) {
       for (const def of defs) {
@@ -129,6 +442,9 @@ export function provideFormFields() {
   function reset() {
     fieldDefinitions.value = /* @__PURE__ */ new Map();
     fieldValues.value = /* @__PURE__ */ new Map();
+    selectedPlacedFieldId.value = null;
+    checkboxStyleMap = null;
+    buttonCaptionMap = null;
     triggerRef(fieldDefinitions);
     triggerRef(fieldValues);
   }
@@ -142,8 +458,24 @@ export function provideFormFields() {
     getAllFieldValues,
     setFieldValueByName,
     registerDetectedCheckboxes,
+    addPlacedField,
+    addFormField,
+    updatePlacedField,
+    removePlacedField,
+    getAllFields,
+    getPlacedFields,
+    getFieldById,
+    selectedPlacedFieldId,
+    selectPlacedField,
+    applyCheckboxStyles,
+    applyButtonCaptions,
+    isFieldLocked,
     resetValues,
-    reset
+    reset,
+    activeRoleId,
+    setActiveRole,
+    roleColors,
+    setRoleColors
   };
   provide(FORM_FIELDS_KEY, state);
   return state;

package/dist/runtime/composables/useInertiaPanzoom.js

@@ -281,6 +281,7 @@ export function useInertiaPanzoom(options = {}) {
     }
     function onDown(e) {
       if (e.pointerType === "pen") return;
+      if (e.pointerType === "mouse") return;
       if (!gesturesEnabled) return;
       stopMomentum();
       setWillChangeActive(true);
@@ -425,6 +426,9 @@ export function useInertiaPanzoom(options = {}) {
         pinchStart = null;
         panStart = null;
         setWillChangeActive(false);
+        const b = getBounds();
+        tx = Math.max(b.minX, Math.min(b.maxX, tx));
+        ty = Math.max(b.minY, Math.min(b.maxY, ty));
         apply();
       },
       stop: () => {

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

@@ -4,6 +4,12 @@ export interface PageMeta {
     pageNumber: number;
     width: number;
     height: number;
+    /** PDF user-space origin of the page's visible area (`view[0]`, `view[1]`).
+     *  Almost always (0, 0); non-zero for PDFs whose MediaBox has been
+     *  shifted. Annotations in `/Rect` are in default user space, so any
+     *  layer drawn at the canvas top-left must subtract this origin. */
+    viewOffsetX: number;
+    viewOffsetY: number;
 }
 export interface PageVirtualization {
     pageMetas: ShallowRef<PageMeta[]>;

package/dist/runtime/composables/usePageVirtualization.js

@@ -120,10 +120,16 @@ export function createPageVirtualization() {
   async function fetchPageDimensions(doc, pageNumber) {
     const proxy = await doc.getPage(pageNumber);
     const view = proxy.view;
+    const vx = view[0] ?? 0;
+    const vy = view[1] ?? 0;
+    const vw = view[2] ?? 0;
+    const vh = view[3] ?? 0;
     return {
       pageNumber,
-      width: view[2] - view[0],
-      height: view[3] - view[1]
+      width: vw - vx,
+      height: vh - vy,
+      viewOffsetX: vx,
+      viewOffsetY: vy
     };
   }
   async function init(doc, root) {
@@ -139,7 +145,9 @@ export function createPageVirtualization() {
         metas.push({
           pageNumber: i,
           width: firstMeta.width,
-          height: firstMeta.height
+          height: firstMeta.height,
+          viewOffsetX: firstMeta.viewOffsetX,
+          viewOffsetY: firstMeta.viewOffsetY
         });
       }
     }

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

@@ -57,6 +57,9 @@ export interface ViewerState {
     history: AnnotationHistory;
     readonly: Ref<boolean>;
     shapeDetection: Ref<boolean>;
+    visualZoom: Ref<number>;
+    formEditMode: Ref<boolean>;
+    setFormEditMode: (enabled: boolean) => void;
 }
 export interface ViewerStateProvider {
     state: ViewerState;

package/dist/runtime/composables/useViewerState.js

@@ -65,7 +65,22 @@ export function provideViewerState() {
   }
   const readonly = ref(false);
   const shapeDetectionEnabled = ref(false);
+  const visualZoom = ref(1);
   const stylusMode = ref(false);
+  const formEditMode = 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);
+  }
+  function setFormEditMode(enabled) {
+    if (formEditMode.value === enabled) return;
+    formEditMode.value = enabled;
+    const t = activeTool.value;
+    if (enabled) {
+      if (typeof t === "number" && !isFormFieldTool(t)) selectTool("hand");
+    } else {
+      if (isFormFieldTool(t)) selectTool("hand");
+    }
+  }
   function setStylusMode(enabled) {
     stylusMode.value = enabled;
     if (painter.value) {
@@ -95,6 +110,9 @@ export function provideViewerState() {
   }
   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 = [];
@@ -181,7 +199,10 @@ export function provideViewerState() {
     downloadPdf,
     history,
     readonly,
-    shapeDetection: shapeDetectionEnabled
+    shapeDetection: shapeDetectionEnabled,
+    visualZoom,
+    formEditMode,
+    setFormEditMode
   };
   provide(VIEWER_STATE_KEY, state);
   return {

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

@@ -1,4 +1,4 @@
 export type { ExportPdfOptions } from './annotation/pdf-export/export.js';
 export type { ViewerTabItem, AddTabOptions } from './components/ViewerTabs.vue.js';
-export type { SignatureData, SignatureHandlers } from './annotation/engine/types.js';
+export type { AddFormFieldPayload, CheckboxStyle, FormFieldDefinition, FormFieldOrigin, FormFieldType, FormFieldValue, SignatureData, SignatureHandlers, } from './annotation/engine/types.js';
 export type { ViewMode } from './composables/viewMode.js';

package/dist/types.d.mts

@@ -1,4 +1,4 @@
-export { type ExportPdfOptions, type SignatureData, type SignatureHandlers, type ViewMode } from '../dist/runtime/public-types.js'
+export { type AddFormFieldPayload, type CheckboxStyle, type ExportPdfOptions, type FormFieldDefinition, type FormFieldOrigin, type FormFieldType, type FormFieldValue, type SignatureData, type SignatureHandlers, type ViewMode } from '../dist/runtime/public-types.js'
 
 export { default } from './module.mjs'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",
@@ -28,7 +28,7 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "npm run dev:prepare && nuxt dev playground",
+    "dev": "npm run dev:prepare && portless kviewer nuxt dev playground",
     "dev:build": "nuxt build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",