kviewer 0.0.10 → 0.1.0

package/dist/runtime/components/FormFieldLayer.vue

@@ -11,7 +11,11 @@
   transform: `scale(${props.scale})`,
   transformOrigin: '0 0',
   zIndex: props.zIndex,
-  pointerEvents: props.pointerEvents
+  pointerEvents: props.pointerEvents,
+  // Force native form controls (inputs, checkboxes, radios, scrollbars)
+  // to render in light mode regardless of the user\'s OS theme — PDF
+  // pages have a white background, so dark-mode controls clash.
+  colorScheme: 'light'
 }"
   >
     <FormFieldWrapper
@@ -19,13 +23,20 @@
       :key="field.id"
       :field="field"
       :page-height="props.pageHeight"
+      :scale="props.scale"
+      :view-offset-x="props.viewOffsetX ?? 0"
+      :view-offset-y="props.viewOffsetY ?? 0"
+      :selected="selectedFieldId === field.id"
+      @select="formFields.selectPlacedField(field.id)"
     />
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted, onBeforeUnmount, watch } from "vue";
 import { useFormFields } from "../composables/useFormFields";
+import { useViewerState } from "../composables/useViewerState";
+import { AnnotationType } from "../annotation/engine/types";
 import FormFieldWrapper from "./form-fields/FormFieldWrapper.vue";
 const props = defineProps({
   pageNumber: { type: Number, required: true },
@@ -33,8 +44,34 @@ const props = defineProps({
   pageWidth: { type: Number, required: true },
   pageHeight: { type: Number, required: true },
   pointerEvents: { type: String, required: true },
-  zIndex: { type: Number, required: true }
+  zIndex: { type: Number, required: true },
+  viewOffsetX: { type: Number, required: false },
+  viewOffsetY: { type: Number, required: false }
 });
 const formFields = useFormFields();
+const state = useViewerState();
 const fields = computed(() => formFields.getFieldsForPage(props.pageNumber));
+const selectedFieldId = formFields.selectedPlacedFieldId;
+watch(() => state.formEditMode.value, (enabled) => {
+  if (!enabled) formFields.selectPlacedField(null);
+});
+watch(() => state.activeTool.value, (tool) => {
+  const isFormFieldTool = typeof tool === "number" && (tool === AnnotationType.FORM_TEXT || tool === AnnotationType.FORM_CHECKBOX || tool === AnnotationType.FORM_RADIO || tool === AnnotationType.FORM_SIGNATURE);
+  if (tool !== "hand" && !isFormFieldTool) formFields.selectPlacedField(null);
+});
+function onKeyDown(e) {
+  if (!selectedFieldId.value) return;
+  if (e.key !== "Delete" && e.key !== "Backspace") return;
+  const target = e.target;
+  const tag = target?.tagName.toLowerCase();
+  if (tag === "input" || tag === "textarea" || target?.isContentEditable) return;
+  const id = selectedFieldId.value;
+  formFields.removePlacedField(id);
+}
+onMounted(() => {
+  window.addEventListener("keydown", onKeyDown);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", onKeyDown);
+});
 </script>

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

@@ -5,6 +5,11 @@ type __VLS_Props = {
     pageHeight: number;
     pointerEvents: string;
     zIndex: number;
+    /** PDF user-space origin offsets (`view[0]`, `view[1]`). Forwarded to
+     *  FormFieldWrapper so /Rect coordinates can be mapped to canvas space
+     *  when the page's MediaBox is not at (0, 0). */
+    viewOffsetX?: number;
+    viewOffsetY?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/PdfPage.vue

@@ -31,6 +31,8 @@
       :scale="props.scale"
       :page-width="baseWidth"
       :page-height="baseHeight"
+      :view-offset-x="viewOffsetX"
+      :view-offset-y="viewOffsetY"
       :pointer-events="formFieldPointerEvents"
       :z-index="formFieldZIndex"
     />
@@ -52,6 +54,7 @@
 
 <script setup>
 import { ref, shallowRef, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { useRuntimeConfig } from "#imports";
 import { useViewerState } from "../composables/useViewerState";
 import { useViewerSearch } from "../composables/useViewerSearch";
 import { usePageProxyCache } from "../composables/usePageProxyCache";
@@ -69,6 +72,10 @@ const props = defineProps({
 const canvasRef = ref(null);
 const textLayerRef = ref(null);
 const annotationRef = ref(null);
+const runtimeConfig = useRuntimeConfig();
+const minRenderPixelRatio = Number(
+  runtimeConfig.public.kviewer?.minRenderPixelRatio ?? 2
+);
 const state = useViewerState();
 const search = useViewerSearch();
 const proxyCache = usePageProxyCache();
@@ -79,6 +86,8 @@ let currentRenderTask = null;
 let textLayer = null;
 const baseWidth = props.pageMeta.width;
 const baseHeight = props.pageMeta.height;
+const viewOffsetX = props.pageMeta.viewOffsetX ?? 0;
+const viewOffsetY = props.pageMeta.viewOffsetY ?? 0;
 const cssWidth = computed(() => baseWidth * props.scale);
 const cssHeight = computed(() => baseHeight * props.scale);
 const isAnnotating = computed(() => {
@@ -125,6 +134,26 @@ onMounted(async () => {
     }
   }
 });
+watch(
+  () => state.shapeDetection.value,
+  async (enabled) => {
+    if (!enabled || !pageProxy.value) return;
+    const viewport = pageProxy.value.getViewport({ scale: props.scale });
+    const shapes = await shapeDetection.preprocessShapesForPage(
+      props.pageNumber,
+      pageProxy.value,
+      viewport
+    );
+    if (shapes.length > 0) {
+      formFields.registerDetectedCheckboxes(
+        props.pageNumber,
+        shapes,
+        props.scale,
+        baseHeight
+      );
+    }
+  }
+);
 watch(
   () => props.scale,
   async () => {
@@ -157,7 +186,7 @@ async function renderCanvas(opts) {
     currentRenderTask.cancel();
     currentRenderTask = null;
   }
-  const dpr = window.devicePixelRatio || 1;
+  const dpr = Math.max(window.devicePixelRatio || 1, minRenderPixelRatio);
   const quality = props.renderQuality ?? 1;
   const viewport = proxy.getViewport({
     scale: props.scale * quality * dpr

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

@@ -1,5 +1,5 @@
 import { type ViewMode } from '../composables/useViewerState.js';
-import type { IAnnotationStore, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
+import type { AddFormFieldPayload, FormFieldDefinition, IAnnotationStore, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import { type ExportPdfOptions } from '../annotation/pdf-export/export.js';
 type __VLS_Props = {
     source: string | Uint8Array | object;
@@ -17,6 +17,20 @@ 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;
+    /** Map of roleId → CSS color used to color-code form fields in
+     *  form-edit mode. The editor stays unopinionated about role
+     *  definitions: the host owns the role list, names, and color picker,
+     *  and just hands a flat lookup table to the viewer. Unknown or
+     *  missing ids fall back to the default blue. */
+    roleColors?: Record<string, string>;
+    /** Active role id new field placements are auto-tagged with. The host
+     *  drives this — typically by binding it to a role picker in its own
+     *  UI. Supports v-model via `v-model:active-role-id`. */
+    activeRoleId?: string | null;
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
 type ImportMode = 'replace' | 'merge';
@@ -27,11 +41,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 +54,29 @@ 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<{}>, {
+    /** Add a form field programmatically. Returns the created definition.
+     *  The new field is exported into the PDF on `exportPdf()` like any
+     *  field placed via the placement tool. */
+    addFormField: (payload: AddFormFieldPayload) => FormFieldDefinition;
+    /** Patch a form field by id (rect, name, flags, type-specific props). */
+    updateFormField: (id: string, patch: Partial<FormFieldDefinition>) => void;
+    /** Remove a form field by id (drops its value too). */
+    removeFormField: (id: string) => void;
+    /** All form-field definitions (parsed, detected, and placed), flat. */
+    getFormFields: () => FormFieldDefinition[];
+    /** 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;
+    "update:activeRoleId": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:formEditMode"?: ((value: boolean) => any) | undefined;
+    "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
+}>, {
     userName: string;
     freehandGroupingDelay: number;
     zoom: number;
@@ -50,6 +86,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
     shapeDetection: boolean;
+    formEditMode: boolean;
+    roleColors: Record<string, string>;
+    activeRoleId: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Viewer.vue

@@ -5,7 +5,8 @@
       <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-hidden bg-[#F0F3F5] dark:bg-muted/50"
@@ -133,6 +134,11 @@
       <ClientOnly>
         <FloatingPageIndicator :scroll-container="scrollContainer" />
       </ClientOnly>
+      </div>
+
+      <ClientOnly v-if="!viewerState.readonly.value">
+        <PlacedFieldSidebar />
+      </ClientOnly>
     </div>
 
     <!-- Footer slot: empty by default -->
@@ -180,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";
@@ -199,6 +206,7 @@ import { createPageProxyCache } from "../composables/usePageProxyCache";
 import { createSearchIndex } from "../composables/useSearchIndex";
 import { createShapeDetection } from "../composables/useShapeDetection";
 import { provideFormFields } from "../composables/useFormFields";
+import { extractCheckboxStyles, extractButtonCaptions } from "../annotation/parsers/extractCheckboxStyles";
 import { isIPad } from "../annotation/engine/input-device";
 import { useInertiaPanzoom } from "../composables/useInertiaPanzoom";
 const props = defineProps({
@@ -212,8 +220,12 @@ 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 },
+  roleColors: { type: Object, required: false, default: void 0 },
+  activeRoleId: { type: [String, null], required: false, default: void 0 }
 });
+const emit = defineEmits(["update:formEditMode", "update:activeRoleId"]);
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
 const { state: viewerState, setScrollToPageFn, setDownloadPdfFn } = provideViewerState();
@@ -223,8 +235,45 @@ 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();
+watch(
+  () => props.roleColors,
+  (v) => {
+    formFieldsState.setRoleColors(v ?? {});
+  },
+  { immediate: true }
+);
+watch(
+  () => props.activeRoleId,
+  (v) => {
+    if (v === void 0) return;
+    if (formFieldsState.activeRoleId.value !== v) {
+      formFieldsState.setActiveRole(v);
+    }
+  },
+  { immediate: true }
+);
+watch(
+  () => formFieldsState.activeRoleId.value,
+  (v) => {
+    if (props.activeRoleId !== v) emit("update:activeRoleId", v);
+  }
+);
 const pageSettings = providePageSettings(viewerRoot);
 const virtualization = createPageVirtualization();
 setScrollToPageFn((pageNumber) => {
@@ -368,14 +417,28 @@ 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();
     }
@@ -487,11 +550,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
@@ -642,6 +707,15 @@ onMounted(() => {
   painter = createAnnotationEngine(viewerState, {
     userName: props.userName,
     onRequestTextInput,
+    onPlaceField: (payload) => {
+      formFieldsState.addPlacedField(payload);
+      viewerState.selectTool("hand");
+    },
+    getFormFieldPreviewColor: () => {
+      const id = formFieldsState.activeRoleId.value;
+      if (!id) return void 0;
+      return formFieldsState.roleColors.value[id];
+    },
     freehandGroupingDelay: props.freehandGroupingDelay,
     // Suspend panzoom gestures while an annotation is being dragged or
     // transformed. Otherwise single-finger pan runs in parallel with the
@@ -670,6 +744,8 @@ onMounted(() => {
     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(
@@ -684,7 +760,10 @@ onMounted(() => {
       },
       { immediate: true }
     );
-    watch(() => viewerState.scale.value, () => inertiaPanzoom.reset());
+    watch(() => viewerState.scale.value, async () => {
+      await nextTick();
+      inertiaPanzoom.reset();
+    });
     watch(() => viewerState.currentPage.value, () => inertiaPanzoom.reset());
   }
   if (isIPad()) {
@@ -752,7 +831,27 @@ defineExpose({
   exportPdf,
   getKonvaCanvasState,
   getFormFieldValues: () => formFieldsState.getAllFieldValues(),
-  setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value)
+  setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value),
+  /** Add a form field programmatically. Returns the created definition.
+   *  The new field is exported into the PDF on `exportPdf()` like any
+   *  field placed via the placement tool. */
+  addFormField: (payload) => formFieldsState.addFormField(payload),
+  /** Patch a form field by id (rect, name, flags, type-specific props). */
+  updateFormField: (id, patch) => formFieldsState.updatePlacedField(id, patch),
+  /** Remove a form field by id (drops its value too). */
+  removeFormField: (id) => formFieldsState.removePlacedField(id),
+  /** All form-field definitions (parsed, detected, and placed), flat. */
+  getFormFields: () => formFieldsState.getAllFields(),
+  /** 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>
 

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

@@ -1,5 +1,5 @@
 import { type ViewMode } from '../composables/useViewerState.js';
-import type { IAnnotationStore, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
+import type { AddFormFieldPayload, FormFieldDefinition, IAnnotationStore, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import { type ExportPdfOptions } from '../annotation/pdf-export/export.js';
 type __VLS_Props = {
     source: string | Uint8Array | object;
@@ -17,6 +17,20 @@ 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;
+    /** Map of roleId → CSS color used to color-code form fields in
+     *  form-edit mode. The editor stays unopinionated about role
+     *  definitions: the host owns the role list, names, and color picker,
+     *  and just hands a flat lookup table to the viewer. Unknown or
+     *  missing ids fall back to the default blue. */
+    roleColors?: Record<string, string>;
+    /** Active role id new field placements are auto-tagged with. The host
+     *  drives this — typically by binding it to a role picker in its own
+     *  UI. Supports v-model via `v-model:active-role-id`. */
+    activeRoleId?: string | null;
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
 type ImportMode = 'replace' | 'merge';
@@ -27,11 +41,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 +54,29 @@ 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<{}>, {
+    /** Add a form field programmatically. Returns the created definition.
+     *  The new field is exported into the PDF on `exportPdf()` like any
+     *  field placed via the placement tool. */
+    addFormField: (payload: AddFormFieldPayload) => FormFieldDefinition;
+    /** Patch a form field by id (rect, name, flags, type-specific props). */
+    updateFormField: (id: string, patch: Partial<FormFieldDefinition>) => void;
+    /** Remove a form field by id (drops its value too). */
+    removeFormField: (id: string) => void;
+    /** All form-field definitions (parsed, detected, and placed), flat. */
+    getFormFields: () => FormFieldDefinition[];
+    /** 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;
+    "update:activeRoleId": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:formEditMode"?: ((value: boolean) => any) | undefined;
+    "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
+}>, {
     userName: string;
     freehandGroupingDelay: number;
     zoom: number;
@@ -50,6 +86,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
     shapeDetection: boolean;
+    formEditMode: boolean;
+    roleColors: Record<string, string>;
+    activeRoleId: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ViewerBar.vue

@@ -5,7 +5,7 @@
       <UPopover>
         <UButton icon="i-lucide-menu" variant="ghost" color="neutral" size="xs" data-testid="viewer-menu" />
         <template #content>
-          <div class="p-1">
+          <div class="p-1 flex flex-col gap-0.5">
             <UButton
               icon="i-lucide-download"
               label="Download"
@@ -16,6 +16,16 @@
               data-testid="viewer-download"
               @click="onDownload"
             />
+            <UButton
+              :icon="state.shapeDetection.value ? 'i-lucide-square-check-big' : 'i-lucide-square-dashed'"
+              :label="state.shapeDetection.value ? 'Disable form field detection' : 'Detect form fields'"
+              :variant="state.shapeDetection.value ? 'soft' : 'ghost'"
+              :color="state.shapeDetection.value ? 'primary' : 'neutral'"
+              size="xs"
+              class="w-full justify-start"
+              data-testid="viewer-toggle-shape-detection"
+              @click="state.shapeDetection.value = !state.shapeDetection.value"
+            />
           </div>
         </template>
       </UPopover>
@@ -30,6 +40,16 @@
 
         <HandTool />
         <MarqueeTool />
+
+        <UButton
+          icon="i-lucide-form-input"
+          :variant="state.formEditMode.value ? 'soft' : 'ghost'"
+          :color="state.formEditMode.value ? 'primary' : 'neutral'"
+          size="xs"
+          :title="state.formEditMode.value ? 'Exit form-edit mode' : 'Enter form-edit mode'"
+          data-testid="form-edit-toggle"
+          @click="state.setFormEditMode(!state.formEditMode.value)"
+        />
       </template>
 
       <div class="ml-auto flex items-center gap-2">
@@ -45,7 +65,8 @@
       </div>
 
       <div class="justify-self-center">
-        <DrawingTools :style-version="styleVersion" />
+        <FormFieldTools v-if="state.formEditMode.value" />
+        <DrawingTools v-else :style-version="styleVersion" />
       </div>
 
       <div class="justify-self-end flex items-center gap-1">
@@ -63,6 +84,7 @@ import ZoomControls from "./tools/ZoomControls.vue";
 import HandTool from "./tools/HandTool.vue";
 import MarqueeTool from "./tools/MarqueeTool.vue";
 import DrawingTools from "./tools/DrawingTools.vue";
+import FormFieldTools from "./tools/FormFieldTools.vue";
 import ActionTools from "./tools/ActionTools.vue";
 import PageInfo from "./tools/PageInfo.vue";
 import SearchTool from "./tools/SearchTool.vue";

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

@@ -48,6 +48,11 @@ type __VLS_Props = {
     zoom?: number;
     /** Minimum number of tabs -- prevents closing below this count. */
     minTabs?: number;
+    /** Forwarded to every Viewer instance — see KViewer's `roleColors`. */
+    roleColors?: Record<string, string>;
+    /** Forwarded to every Viewer instance — see KViewer's `activeRoleId`.
+     *  Supports v-model via `v-model:active-role-id`. */
+    activeRoleId?: string | null;
 };
 declare function addTab(item: Omit<ViewerTabItem, 'id'> & {
     id?: string;
@@ -55,7 +60,7 @@ declare function addTab(item: Omit<ViewerTabItem, 'id'> & {
 declare function removeTab(id: string): boolean;
 declare function activateTab(id: string): void;
 declare function getViewer(id: string): ComponentPublicInstance | null;
-declare var __VLS_7: {}, __VLS_21: {}, __VLS_30: {
+declare var __VLS_7: {}, __VLS_21: {}, __VLS_32: {
     tab: {
         id: string;
         label: string;
@@ -154,7 +159,7 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_30: {
         zoom?: number | undefined;
         shapeDetection?: boolean | undefined;
     };
-}, __VLS_33: {
+}, __VLS_35: {
     tab: {
         id: string;
         label: string;
@@ -253,17 +258,17 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_30: {
         zoom?: number | undefined;
         shapeDetection?: boolean | undefined;
     };
-}, __VLS_35: {};
+}, __VLS_37: {};
 type __VLS_Slots = {} & {
     'tabs-leading'?: (props: typeof __VLS_7) => any;
 } & {
     'tabs-trailing'?: (props: typeof __VLS_21) => any;
 } & {
-    header?: (props: typeof __VLS_30) => any;
+    header?: (props: typeof __VLS_32) => any;
 } & {
-    footer?: (props: typeof __VLS_33) => any;
+    footer?: (props: typeof __VLS_35) => any;
 } & {
-    empty?: (props: typeof __VLS_35) => any;
+    empty?: (props: typeof __VLS_37) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     addTab: typeof addTab;
@@ -370,11 +375,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         shapeDetection?: boolean | undefined;
     }[];
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeRoleId": (value: string | null) => any;
     "update:activeTab": (id: string) => any;
     "tab-added": (tab: ViewerTabItem) => any;
     "tab-close": (id: string) => any;
     "tab-removed": (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
     "onUpdate:activeTab"?: ((id: string) => any) | undefined;
     "onTab-added"?: ((tab: ViewerTabItem) => any) | undefined;
     "onTab-close"?: ((id: string) => any) | undefined;
@@ -385,6 +392,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     stamps: StampDefinition[];
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
+    roleColors: Record<string, string>;
+    activeRoleId: string | null;
     defaultActiveTab: string;
     minTabs: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;