kviewer 0.0.9 → 0.0.11

package/dist/runtime/components/Viewer.vue

@@ -5,11 +5,12 @@
       <ViewerBar />
     </slot>
 
-    <div class="relative flex-1 min-h-0">
+    <div class="flex flex-1 min-h-0">
+      <div class="relative flex-1 min-w-0">
       <div
         ref="scrollContainer"
-        class="absolute inset-0 overflow-auto bg-muted/50"
-        :class="{ 'overflow-hidden': isSinglePageMode }"
+        class="absolute inset-0 overflow-hidden bg-[#F0F3F5] dark:bg-muted/50"
+        style="overscroll-behavior: none"
         data-testid="viewer-scroll"
       >
         <!-- Error state -->
@@ -39,24 +40,29 @@
         </div>
 
         <ClientOnly v-else>
-          <!-- Single-page-at-a-time mode -->
+          <!-- Single-page mode with panzoom for pinch-to-zoom -->
           <div
             v-if="isSinglePageMode && singlePageMeta"
-            class="flex flex-col items-center py-4"
-            :style="{ minHeight: '100%' }"
+            class="panzoom-viewport"
           >
             <div
-              :ref="(el) => onPageRef(singlePageMeta.pageNumber, el)"
-              :style="pageSlotStyle(singlePageMeta)"
-              class="kviewer-page-slot"
+              ref="zoomWrapper"
+              class="flex flex-col items-center justify-center p-4"
+              :style="{ minHeight: '100%' }"
             >
-              <div :style="pageRotationStyle(singlePageMeta)">
-                <PdfPage
-                  :key="singlePageMeta.pageNumber"
-                  :page-number="singlePageMeta.pageNumber"
-                  :page-meta="singlePageMeta"
-                  :scale="pageScale"
-                />
+              <div
+                :ref="(el) => onPageRef(singlePageMeta.pageNumber, el)"
+                :style="pageSlotStyle(singlePageMeta)"
+                class="kviewer-page-slot"
+              >
+                <div :style="pageRotationStyle(singlePageMeta)">
+                  <PdfPage
+                    :key="singlePageMeta.pageNumber"
+                    :page-number="singlePageMeta.pageNumber"
+                    :page-meta="singlePageMeta"
+                    :scale="pageScale"
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -64,38 +70,14 @@
           <!-- Continuous scroll — single-page layout -->
           <div
             v-else-if="pageSettings.layoutMode.value === 'single'"
-            class="flex flex-col items-center gap-4 py-4"
+            class="panzoom-viewport"
           >
             <div
-              v-for="meta in pageMetas"
-              :key="meta.pageNumber"
-              :ref="(el) => onPageRef(meta.pageNumber, el)"
-              :style="pageSlotStyle(meta)"
-              class="kviewer-page-slot"
-            >
-              <div :style="pageRotationStyle(meta)">
-                <PdfPage
-                  v-if="isPageRendered(meta.pageNumber)"
-                  :page-number="meta.pageNumber"
-                  :page-meta="meta"
-                  :scale="pageScale"
-                />
-              </div>
-            </div>
-          </div>
-
-          <!-- Continuous scroll — two-page (side-by-side) layout -->
-          <div
-            v-else
-            class="flex flex-col items-center gap-4 py-4"
-          >
-            <div
-              v-for="(pair, index) in pagedPairs"
-              :key="index"
-              class="flex gap-4"
+              ref="zoomWrapper"
+              class="flex flex-col gap-4 p-4"
             >
               <div
-                v-for="meta in pair"
+                v-for="meta in pageMetas"
                 :key="meta.pageNumber"
                 :ref="(el) => onPageRef(meta.pageNumber, el)"
                 :style="pageSlotStyle(meta)"
@@ -112,12 +94,51 @@
               </div>
             </div>
           </div>
+
+          <!-- Continuous scroll — two-page (side-by-side) layout -->
+          <div
+            v-else
+            class="panzoom-viewport"
+          >
+            <div
+              ref="zoomWrapper"
+              class="flex flex-col gap-4 p-4"
+            >
+              <div
+                v-for="(pair, index) in pagedPairs"
+                :key="index"
+                class="flex gap-4"
+              >
+                <div
+                  v-for="meta in pair"
+                  :key="meta.pageNumber"
+                  :ref="(el) => onPageRef(meta.pageNumber, el)"
+                  :style="pageSlotStyle(meta)"
+                  class="kviewer-page-slot"
+                >
+                  <div :style="pageRotationStyle(meta)">
+                    <PdfPage
+                      v-if="isPageRendered(meta.pageNumber)"
+                      :page-number="meta.pageNumber"
+                      :page-meta="meta"
+                      :scale="pageScale"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </ClientOnly>
       </div>
 
       <ClientOnly>
         <FloatingPageIndicator :scroll-container="scrollContainer" />
       </ClientOnly>
+      </div>
+
+      <ClientOnly v-if="!viewerState.readonly.value">
+        <PlacedFieldSidebar />
+      </ClientOnly>
     </div>
 
     <!-- Footer slot: empty by default -->
@@ -136,6 +157,16 @@
         @submit="onFreeTextSubmit"
         @cancel="onFreeTextCancel"
       />
+      <!-- iOS focus bridge: focused synchronously in the tap handler so the
+           keyboard pops up; modal textarea takes over on mount without
+           closing the keyboard. -->
+      <input
+        ref="iosFocusBridge"
+        type="text"
+        aria-hidden="true"
+        tabindex="-1"
+        class="ios-focus-bridge"
+      >
     </ClientOnly>
   </div>
 </template>
@@ -155,6 +186,7 @@ import {
 import ViewerBar from "./ViewerBar.vue";
 import PdfPage from "./PdfPage.vue";
 import FreeTextModal from "./modals/FreeTextModal.vue";
+import PlacedFieldSidebar from "./panels/PlacedFieldSidebar.vue";
 import AnnotationToolbar from "./AnnotationToolbar.vue";
 import FloatingPageIndicator from "./FloatingPageIndicator.vue";
 import { providePageSettings } from "../composables/usePageSettings";
@@ -174,7 +206,9 @@ import { createPageProxyCache } from "../composables/usePageProxyCache";
 import { createSearchIndex } from "../composables/useSearchIndex";
 import { createShapeDetection } from "../composables/useShapeDetection";
 import { provideFormFields } from "../composables/useFormFields";
-import { isIPad, getTouchDistance, getTouchCenter, clampScale } from "../annotation/engine/input-device";
+import { extractCheckboxStyles, extractButtonCaptions } from "../annotation/parsers/extractCheckboxStyles";
+import { isIPad } from "../annotation/engine/input-device";
+import { useInertiaPanzoom } from "../composables/useInertiaPanzoom";
 const props = defineProps({
   source: { type: null, required: true },
   textLayer: { type: Boolean, required: false },
@@ -186,8 +220,10 @@ const props = defineProps({
   readonly: { type: Boolean, required: false, default: false },
   shapeDetection: { type: Boolean, required: false, default: false },
   active: { type: Boolean, required: false, default: true },
-  freehandGroupingDelay: { type: Number, required: false, default: 1e3 }
+  freehandGroupingDelay: { type: Number, required: false, default: 1e3 },
+  formEditMode: { type: Boolean, required: false, default: void 0 }
 });
+const emit = defineEmits(["update:formEditMode"]);
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
 const { state: viewerState, setScrollToPageFn, setDownloadPdfFn } = provideViewerState();
@@ -197,6 +233,20 @@ watchEffect(() => {
 watchEffect(() => {
   viewerState.shapeDetection.value = props.shapeDetection ?? false;
 });
+watch(
+  () => props.formEditMode,
+  (v) => {
+    if (v === void 0) return;
+    if (viewerState.formEditMode.value !== v) viewerState.formEditMode.value = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => viewerState.formEditMode.value,
+  (v) => {
+    if (props.formEditMode !== v) emit("update:formEditMode", v);
+  }
+);
 const viewerSearch = provideViewerSearch();
 const formFieldsState = provideFormFields();
 const pageSettings = providePageSettings(viewerRoot);
@@ -204,8 +254,12 @@ const virtualization = createPageVirtualization();
 setScrollToPageFn((pageNumber) => {
   if (isSinglePageMode.value) {
     viewerState.currentPage.value = pageNumber;
-  } else {
-    virtualization.scrollToPage(pageNumber);
+    return;
+  }
+  const el = virtualization.getPageElement(pageNumber);
+  if (el) {
+    inertiaPanzoom.scrollToElement(el, { block: "start" });
+    viewerState.currentPage.value = pageNumber;
   }
 });
 const proxyCache = createPageProxyCache();
@@ -241,6 +295,8 @@ const isRotatedSideways = computed(() => {
   const r = pageSettings.rotation.value;
   return r === 90 || r === 270;
 });
+const zoomWrapper = ref(null);
+const inertiaPanzoom = useInertiaPanzoom({ minScale: 0.5, maxScale: 4 });
 function pageSlotStyle(meta) {
   const s = pageScale.value;
   if (isRotatedSideways.value) {
@@ -297,8 +353,10 @@ const pagedPairs = computed(() => {
 });
 const freeTextModalOpen = ref(false);
 const freeTextDefaults = ref({ color: "#ff0000", fontSize: 18 });
+const iosFocusBridge = ref(null);
 let freeTextResolve = null;
 function onRequestTextInput(opts) {
+  iosFocusBridge.value?.focus({ preventScroll: true });
   return new Promise((resolve) => {
     freeTextDefaults.value = {
       color: opts.defaultColor,
@@ -334,14 +392,34 @@ async function loadDocument() {
       pdfjs.GlobalWorkerOptions.workerSrc = workerModule.default;
     }
     const source = props.source;
-    const loadingTask = pdfjs.getDocument(
-      source
-    );
+    const baseParams = source instanceof Uint8Array || typeof source === "string" ? { url: typeof source === "string" ? source : void 0, data: source instanceof Uint8Array ? source : void 0 } : { ...source };
+    const docParams = {
+      ...baseParams,
+      standardFontDataUrl: "/_kviewer/standard_fonts/",
+      cMapUrl: "/_kviewer/cmaps/",
+      cMapPacked: true,
+      useSystemFonts: true
+    };
+    const loadingTask = pdfjs.getDocument(docParams);
     const pdfDoc = await loadingTask.promise;
     doc.value = pdfDoc;
     viewerState.doc.value = pdfDoc;
     viewerState.totalPages.value = pdfDoc.numPages;
     proxyCache.setDocument(pdfDoc);
+    pdfDoc.getData().then(async (bytes) => {
+      const [styles, captions] = await Promise.all([
+        extractCheckboxStyles(bytes),
+        extractButtonCaptions(bytes)
+      ]);
+      if (styles.size > 0) formFieldsState.applyCheckboxStyles(styles);
+      if (captions.size > 0) formFieldsState.applyButtonCaptions(captions);
+    }).catch((err) => console.warn("[KViewer] Failed to read MK data from source PDF:", err));
+    if (!scrollContainer.value) {
+      await nextTick();
+    }
+    if (!scrollContainer.value) {
+      throw new Error("Scroll container not available");
+    }
     await virtualization.init(pdfDoc, scrollContainer.value);
     const metas = virtualization.pageMetas.value;
     if (metas.length > 0) {
@@ -378,7 +456,17 @@ async function loadDocument() {
       );
     }
     viewerSearch.setScrollToPage((pageNumber) => {
-      virtualization.scrollToPage(pageNumber);
+      if (isSinglePageMode.value) {
+        viewerState.currentPage.value = pageNumber;
+        return;
+      }
+      const el = virtualization.getPageElement(pageNumber);
+      if (el) inertiaPanzoom.scrollToElement(el, { block: "start" });
+    });
+    viewerSearch.setScrollToElement((el) => {
+      if (!isSinglePageMode.value) {
+        inertiaPanzoom.scrollToElement(el, { block: "center" });
+      }
     });
     searchIndex.buildIndex(pdfDoc).then(() => {
       viewerSearch.setSearchIndex({
@@ -437,11 +525,13 @@ async function exportPdf(options = {}) {
   const pdfData = await doc.value.getData();
   const exportContext = painter.getExportContext();
   const formFieldValues = formFieldsState.getAllFieldValues();
+  const placedFormFieldDefinitions = formFieldsState.getPlacedFields();
   const bytes = await exportAnnotationsToPdf({
     pdfData,
     annotations: exportContext.annotations,
     options: mergedOptions,
     formFieldValues,
+    placedFormFieldDefinitions,
     originalAnnotationIds: exportContext.originalIds,
     modifiedAnnotationIds: exportContext.modifiedIds,
     deletedAnnotationIds: exportContext.deletedIds
@@ -481,116 +571,97 @@ async function importAnnotations(annotations, options) {
 function getKonvaCanvasState() {
   return painter?.getCanvasState() ?? {};
 }
-let pinchActive = false;
-let pinchStartDistance = 0;
-let pinchStartScale = 1;
-let pinchCurrentRatio = 1;
-let pinchOriginX = 0;
-let pinchOriginY = 0;
-let pinchStartViewportX = 0;
-let pinchStartViewportY = 0;
-let pinchCurrentViewportX = 0;
-let pinchCurrentViewportY = 0;
-function getPinchTarget() {
-  return scrollContainer.value?.firstElementChild;
-}
-function onPinchTouchStart(e) {
-  if (!viewerState.stylusMode.value) return;
-  if (e.touches.length === 2) {
-    const sc = scrollContainer.value;
-    const scRect = sc.getBoundingClientRect();
-    const center = getTouchCenter(e.touches[0], e.touches[1]);
-    pinchActive = true;
-    pinchStartDistance = getTouchDistance(e.touches[0], e.touches[1]);
-    pinchStartScale = viewerState.scale.value;
-    pinchCurrentRatio = 1;
-    pinchStartViewportX = center.x - scRect.left;
-    pinchStartViewportY = center.y - scRect.top;
-    pinchCurrentViewportX = pinchStartViewportX;
-    pinchCurrentViewportY = pinchStartViewportY;
-    pinchOriginX = pinchStartViewportX + sc.scrollLeft;
-    pinchOriginY = pinchStartViewportY + sc.scrollTop;
-    const target = getPinchTarget();
-    if (target) {
-      target.style.transformOrigin = `${pinchOriginX}px ${pinchOriginY}px`;
-      target.style.willChange = "transform";
-    }
-  }
-}
-function onPinchTouchMove(e) {
-  if (!viewerState.stylusMode.value || !pinchActive || e.touches.length < 2) return;
-  e.preventDefault();
-  const sc = scrollContainer.value;
-  if (!sc) return;
-  const scRect = sc.getBoundingClientRect();
-  const currentDistance = getTouchDistance(e.touches[0], e.touches[1]);
-  pinchCurrentRatio = currentDistance / pinchStartDistance;
-  const clamped = clampScale(pinchStartScale * pinchCurrentRatio);
-  pinchCurrentRatio = clamped / pinchStartScale;
-  const center = getTouchCenter(e.touches[0], e.touches[1]);
-  pinchCurrentViewportX = center.x - scRect.left;
-  pinchCurrentViewportY = center.y - scRect.top;
-  const target = getPinchTarget();
-  if (target) target.style.transform = `scale(${pinchCurrentRatio})`;
-  sc.scrollLeft = pinchOriginX * pinchCurrentRatio - pinchCurrentViewportX;
-  sc.scrollTop = pinchOriginY * pinchCurrentRatio - pinchCurrentViewportY;
-}
-function onPinchTouchEnd(e) {
-  if (e.touches.length < 2 && pinchActive) {
-    pinchActive = false;
-    const target = getPinchTarget();
-    if (target) {
-      target.style.transform = "";
-      target.style.willChange = "";
-    }
-    const finalScale = clampScale(pinchStartScale * pinchCurrentRatio);
-    if (Math.abs(finalScale - pinchStartScale) > 0.01) {
-      const layoutRatio = finalScale / pinchStartScale;
-      const newScrollLeft = pinchOriginX * layoutRatio - pinchCurrentViewportX;
-      const newScrollTop = pinchOriginY * layoutRatio - pinchCurrentViewportY;
-      viewerState.setScale(finalScale);
-      nextTick(() => {
-        const sc = scrollContainer.value;
-        if (sc) {
-          sc.scrollLeft = newScrollLeft;
-          sc.scrollTop = newScrollTop;
-        }
-      });
-    }
-    pinchCurrentRatio = 1;
-  }
+function initPanzoom() {
+  inertiaPanzoom.detach();
+  if (!zoomWrapper.value) return;
+  inertiaPanzoom.attach(zoomWrapper.value);
 }
 let wheelCooldown = false;
-function onSinglePageWheel(event) {
-  if (!isSinglePageMode.value) return;
-  event.preventDefault();
-  if (wheelCooldown) return;
-  wheelCooldown = true;
-  setTimeout(() => {
-    wheelCooldown = false;
-  }, 300);
-  const total = viewerState.totalPages.value;
-  const cur = viewerState.currentPage.value;
-  if (event.deltaY > 0 && cur < total) {
-    viewerState.currentPage.value = cur + 1;
-  } else if (event.deltaY < 0 && cur > 1) {
-    viewerState.currentPage.value = cur - 1;
-  }
-}
-function onGlobalKeydown(event) {
-  if (!props.active) return;
+function onWheel(event) {
+  if (event.ctrlKey || event.metaKey) return;
   if (isSinglePageMode.value) {
+    event.preventDefault();
+    if (wheelCooldown) return;
+    wheelCooldown = true;
+    setTimeout(() => {
+      wheelCooldown = false;
+    }, 300);
     const total = viewerState.totalPages.value;
     const cur = viewerState.currentPage.value;
-    if ((event.key === "ArrowDown" || event.key === "PageDown") && cur < total) {
-      event.preventDefault();
+    if (event.deltaY > 0 && cur < total) {
       viewerState.currentPage.value = cur + 1;
-      return;
-    }
-    if ((event.key === "ArrowUp" || event.key === "PageUp") && cur > 1) {
-      event.preventDefault();
+    } else if (event.deltaY < 0 && cur > 1) {
       viewerState.currentPage.value = cur - 1;
-      return;
+    }
+    return;
+  }
+  event.preventDefault();
+  const dx = event.shiftKey ? event.deltaY : event.deltaX;
+  const dy = event.shiftKey ? 0 : event.deltaY;
+  inertiaPanzoom.scrollBy(dx, dy);
+}
+function isTextInputTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable;
+}
+function onGlobalKeydown(event) {
+  if (!props.active) return;
+  const typing = isTextInputTarget(event.target);
+  if (!typing) {
+    if (isSinglePageMode.value) {
+      const total = viewerState.totalPages.value;
+      const cur = viewerState.currentPage.value;
+      if ((event.key === "ArrowDown" || event.key === "PageDown") && cur < total) {
+        event.preventDefault();
+        viewerState.currentPage.value = cur + 1;
+        return;
+      }
+      if ((event.key === "ArrowUp" || event.key === "PageUp") && cur > 1) {
+        event.preventDefault();
+        viewerState.currentPage.value = cur - 1;
+        return;
+      }
+    } else {
+      const vh = scrollContainer.value?.clientHeight ?? 600;
+      const arrowStep = 40;
+      const pageStep = Math.max(100, vh * 0.9);
+      const BIG = 1e9;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, arrowStep);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, -arrowStep);
+          return;
+        case "ArrowRight":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(arrowStep, 0);
+          return;
+        case "ArrowLeft":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(-arrowStep, 0);
+          return;
+        case "PageDown":
+        case " ":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, pageStep);
+          return;
+        case "PageUp":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, -pageStep);
+          return;
+        case "Home":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, -BIG);
+          return;
+        case "End":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, BIG);
+          return;
+      }
     }
   }
   const isFindShortcut = (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "f";
@@ -611,7 +682,16 @@ onMounted(() => {
   painter = createAnnotationEngine(viewerState, {
     userName: props.userName,
     onRequestTextInput,
-    freehandGroupingDelay: props.freehandGroupingDelay
+    onPlaceField: (payload) => {
+      formFieldsState.addPlacedField(payload);
+      viewerState.selectTool("hand");
+    },
+    freehandGroupingDelay: props.freehandGroupingDelay,
+    // Suspend panzoom gestures while an annotation is being dragged or
+    // transformed. Otherwise single-finger pan runs in parallel with the
+    // Konva shape drag on mobile and the two CSS transforms fight every
+    // frame, making text drag feel laggy.
+    setExternalGesturesEnabled: (enabled) => inertiaPanzoom.setGesturesEnabled(enabled)
   });
   viewerState.selectTool(viewerState.activeTool.value);
   if (props.stamps) viewerState.stamps.value = props.stamps;
@@ -630,14 +710,31 @@ onMounted(() => {
       }
     });
     resizeObserver.observe(scrollContainer.value);
-    scrollContainer.value.addEventListener("scroll", () => {
-      viewerState.selectionRect.value = null;
-    }, { passive: true });
-    scrollContainer.value.addEventListener("wheel", onSinglePageWheel, { passive: false });
-    scrollContainer.value.addEventListener("touchstart", onPinchTouchStart, { passive: true });
-    scrollContainer.value.addEventListener("touchmove", onPinchTouchMove, { passive: false });
-    scrollContainer.value.addEventListener("touchend", onPinchTouchEnd, { passive: true });
-    scrollContainer.value.addEventListener("touchcancel", onPinchTouchEnd, { passive: true });
+    scrollContainer.value.addEventListener("wheel", onWheel, { passive: false });
+    inertiaPanzoom.onChange(() => {
+      if (viewerState.selectionRect.value) viewerState.selectionRect.value = null;
+      if (!isSinglePageMode.value) virtualization.updateCurrentPageByRect();
+      const z = inertiaPanzoom.getScale();
+      if (z !== viewerState.visualZoom.value) viewerState.visualZoom.value = z;
+    });
+    nextTick(() => initPanzoom());
+    watch(
+      [isSinglePageMode, () => pageSettings.layoutMode.value],
+      () => nextTick(() => initPanzoom())
+    );
+    watch(
+      [() => viewerState.activeTool.value, () => viewerState.stylusMode.value],
+      ([tool, stylusMode]) => {
+        const enable = stylusMode || tool === "hand";
+        inertiaPanzoom.setGesturesEnabled(enable);
+      },
+      { immediate: true }
+    );
+    watch(() => viewerState.scale.value, async () => {
+      await nextTick();
+      inertiaPanzoom.reset();
+    });
+    watch(() => viewerState.currentPage.value, () => inertiaPanzoom.reset());
   }
   if (isIPad()) {
     viewerState.setStylusMode(true);
@@ -687,11 +784,8 @@ watch(
 );
 onBeforeUnmount(() => {
   window.removeEventListener("keydown", onGlobalKeydown);
-  scrollContainer.value?.removeEventListener("wheel", onSinglePageWheel);
-  scrollContainer.value?.removeEventListener("touchstart", onPinchTouchStart);
-  scrollContainer.value?.removeEventListener("touchmove", onPinchTouchMove);
-  scrollContainer.value?.removeEventListener("touchend", onPinchTouchEnd);
-  scrollContainer.value?.removeEventListener("touchcancel", onPinchTouchEnd);
+  scrollContainer.value?.removeEventListener("wheel", onWheel);
+  inertiaPanzoom.detach();
   resizeObserver?.disconnect();
   viewerSearch.reset();
   shapeDetectionCache.clearAllShapeCache();
@@ -707,6 +801,20 @@ defineExpose({
   exportPdf,
   getKonvaCanvasState,
   getFormFieldValues: () => formFieldsState.getAllFieldValues(),
-  setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value)
+  setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value),
+  /** Reactive form-edit-mode flag — read with `.value`. */
+  formEditMode: viewerState.formEditMode,
+  /** Programmatically enter or leave form-edit mode. */
+  setFormEditMode: (enabled) => viewerState.setFormEditMode(enabled),
+  /** Flip form-edit mode. Returns the new state. */
+  toggleFormEditMode: () => {
+    const next = !viewerState.formEditMode.value;
+    viewerState.setFormEditMode(next);
+    return next;
+  }
 });
 </script>
+
+<style scoped>
+.kviewer-page-slot{margin-left:auto;margin-right:auto}.panzoom-viewport{height:100%;overflow:hidden;position:relative;width:100%}.ios-focus-bridge{border:0;font-size:16px;height:1px;left:0;opacity:0;padding:0;pointer-events:none;position:fixed;top:0;width:1px;z-index:-1}
+</style>

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

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