kviewer 0.2.4 → 0.3.1

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

@@ -1,7 +1,10 @@
 <template>
   <div
     class="kviewer-form-signature"
-    :class="{ 'kviewer-form-signature--filled': hasSigned }"
+    :class="{
+  'kviewer-form-signature--filled': hasSigned,
+  'kviewer-form-signature--static': !clickToSignEnabled
+}"
     @click="onClickSign"
   >
     <img
@@ -10,13 +13,21 @@
       class="kviewer-form-signature__preview"
       :alt="t('signature')"
     >
-    <span v-else class="kviewer-form-signature__placeholder">
+    <span v-else-if="clickToSignEnabled" class="kviewer-form-signature__placeholder">
       {{ props.field.promptText || t("clickToSign") }}
     </span>
+    <!-- click-to-sign off: passive marker — the host owns the signing flow.
+         promptText is a call to action ("Sign here"), so it only applies to
+         the click-to-sign placeholder; the marker stays a neutral label. -->
+    <span v-else class="kviewer-form-signature__placeholder kviewer-form-signature__marker">
+      <UIcon name="i-lucide-signature" class="kviewer-form-signature__marker-icon" />
+      {{ t("signature") }}
+    </span>
   </div>
 
   <ClientOnly>
     <SignatureDrawModal
+      v-if="clickToSignEnabled"
       v-model:open="drawModalOpen"
       @submit="onDrawSubmit"
       @cancel="drawModalOpen = false"
@@ -43,7 +54,9 @@ const signatureUrl = computed(() => {
   return fv.value;
 });
 const hasSigned = computed(() => !!signatureUrl.value);
+const clickToSignEnabled = computed(() => state.clickToSign.value);
 async function onClickSign() {
+  if (!clickToSignEnabled.value) return;
   if (props.field.readOnly || state.readonly.value) return;
   if (formFields.isFieldLocked(props.field.id)) return;
   if (state.signatures.value.length > 0) {

package/dist/runtime/components/modals/FreeTextModal.vue

@@ -2,7 +2,7 @@
   <UModal
     v-model:open="isOpen"
     :title="props.initialText !== void 0 ? t('editText') : t('freeText')"
-    :ui="{ width: 'sm:max-w-md' }"
+    :ui="{ content: 'sm:max-w-md' }"
   >
     <template #body>
       <div class="flex flex-col gap-3">

package/dist/runtime/components/modals/SignatureDrawModal.vue

@@ -1,8 +1,25 @@
 <template>
-  <UModal v-model:open="isOpen" :title="t('drawSignature')" :ui="{ content: 'sm:max-w-2xl' }">
+  <UModal v-model:open="isOpen" :title="t('addSignature')" :ui="{ content: 'sm:max-w-2xl' }">
     <template #body>
       <div class="flex flex-col gap-3">
+        <div class="flex gap-1" role="tablist">
+          <button
+            v-for="tab in tabs"
+            :key="tab"
+            role="tab"
+            :aria-selected="mode === tab"
+            class="px-3 py-1.5 text-sm rounded cursor-pointer"
+            :class="
+  mode === tab ? 'bg-elevated text-highlighted font-medium' : 'text-muted hover:text-default'
+"
+            @click="mode = tab"
+          >
+            {{ tab === "draw" ? t("drawSignature") : t("uploadSignature") }}
+          </button>
+        </div>
+
         <div
+          v-show="mode === 'draw'"
           ref="canvasWrapEl"
           class="border border-default rounded bg-white relative w-full"
           :style="{ aspectRatio: `${canvasAspect}` }"
@@ -16,7 +33,8 @@
             @pointerleave="onPointerUp"
           />
         </div>
-        <div class="flex items-center gap-3">
+
+        <div v-if="mode === 'draw'" class="flex items-center gap-3">
           <div class="flex gap-1">
             <button
               v-for="c in signatureColors"
@@ -33,6 +51,50 @@
             {{ t("clear") }}
           </UButton>
         </div>
+
+        <template v-if="mode === 'upload'">
+          <!-- The checkerboard makes transparency visible, so users can
+               tell whether background removal actually worked before
+               placing the signature on the page. -->
+          <div
+            class="border border-dashed border-default rounded relative w-full flex items-center justify-center bg-checkerboard"
+            :style="{ aspectRatio: `${canvasAspect}` }"
+            @dragover.prevent
+            @drop.prevent="onDrop"
+          >
+            <img
+              v-if="uploadedUrl"
+              :src="uploadedUrl"
+              class="max-w-full max-h-full object-contain"
+              :alt="t('uploadSignature')"
+            >
+            <button
+              v-else
+              class="w-full h-full flex flex-col items-center justify-center gap-1 text-muted text-sm cursor-pointer"
+              @click="fileInputEl?.click()"
+            >
+              <span>{{ t("dropSignatureImage") }}</span>
+              <span class="text-xs">{{ acceptHint }}</span>
+            </button>
+          </div>
+
+          <input
+            ref="fileInputEl"
+            type="file"
+            :accept="accept"
+            class="hidden"
+            @change="onFileChange"
+          >
+
+          <p v-if="uploadError" class="text-sm text-error">{{ uploadError }}</p>
+
+          <div class="flex items-center gap-3">
+            <UButton variant="ghost" color="neutral" size="xs" @click="fileInputEl?.click()">
+              {{ t("chooseImage") }}
+            </UButton>
+            <UCheckbox v-model="removeBackground" size="sm" :label="t('removeWhiteBackground')" />
+          </div>
+        </template>
       </div>
     </template>
     <template #footer>
@@ -40,7 +102,7 @@
         <UButton variant="ghost" color="neutral" @click="cancel">
           {{ t("cancel") }}
         </UButton>
-        <UButton :disabled="!hasDrawn" @click="submit">
+        <UButton :disabled="!hasContent" @click="submit">
           {{ t("save") }}
         </UButton>
       </div>
@@ -49,8 +111,9 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick, onBeforeUnmount } from "vue";
+import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
 import { defaultOptions } from "../../annotation/engine/config";
+import { fitWithin, knockOutWhite } from "../../annotation/utils/signature_image";
 import { useKviewerI18n } from "../../composables/useKviewerI18n";
 const { t } = useKviewerI18n();
 const props = defineProps({
@@ -64,6 +127,8 @@ watch(
     isOpen.value = v;
     if (v) {
       hasDrawn.value = false;
+      mode.value = "draw";
+      resetUpload();
       await nextTick();
       syncCanvasSize();
       clearCanvas();
@@ -71,6 +136,8 @@ watch(
   }
 );
 watch(isOpen, (v) => emit("update:open", v));
+const tabs = ["draw", "upload"];
+const mode = ref("draw");
 const canvasAspect = `${defaultOptions.signature.WIDTH} / ${defaultOptions.signature.HEIGHT}`;
 const signatureColors = defaultOptions.signature.COLORS;
 const canvasRef = ref(null);
@@ -165,7 +232,102 @@ function clearCanvas() {
   ctx.restore();
   hasDrawn.value = false;
 }
+const accept = defaultOptions.signature.ACCEPT;
+const maxSize = defaultOptions.signature.MAX_SIZE;
+const fileInputEl = ref(null);
+const uploadedUrl = ref(null);
+const uploadError = ref(null);
+const removeBackground = ref(true);
+let sourceImage = null;
+const acceptHint = accept.replace(/\./g, "").toUpperCase().replace(/,/g, ", ");
+const maxSizeMb = Math.round(maxSize / (1024 * 1024));
+const hasContent = computed(
+  () => mode.value === "draw" ? hasDrawn.value : !!uploadedUrl.value
+);
+function resetUpload() {
+  uploadedUrl.value = null;
+  uploadError.value = null;
+  sourceImage = null;
+  if (fileInputEl.value) fileInputEl.value.value = "";
+}
+function onDrop(e) {
+  const file = e.dataTransfer?.files?.[0];
+  if (file) void handleFile(file);
+}
+function onFileChange(e) {
+  const file = e.target.files?.[0];
+  if (file) void handleFile(file);
+}
+async function handleFile(file) {
+  uploadError.value = null;
+  const extension = `.${file.name.split(".").pop()?.toLowerCase() ?? ""}`;
+  if (!accept.split(",").includes(extension)) {
+    uploadError.value = t("unsupportedImageType", { accept: acceptHint });
+    return;
+  }
+  if (file.size > maxSize) {
+    uploadError.value = t("imageTooLarge", { size: maxSizeMb });
+    return;
+  }
+  try {
+    sourceImage = await loadImage(file);
+    renderUpload();
+  } catch {
+    sourceImage = null;
+    uploadError.value = t("imageReadFailed");
+  }
+}
+function loadImage(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error("read failed"));
+    reader.onload = () => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = () => reject(new Error("decode failed"));
+      img.src = reader.result;
+    };
+    reader.readAsDataURL(file);
+  });
+}
+const MAX_OUTPUT_SCALE = 3;
+function renderUpload() {
+  const img = sourceImage;
+  if (!img) return;
+  const { width, height } = fitWithin(
+    img.naturalWidth,
+    img.naturalHeight,
+    defaultOptions.signature.WIDTH * MAX_OUTPUT_SCALE,
+    defaultOptions.signature.HEIGHT * MAX_OUTPUT_SCALE
+  );
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) {
+    uploadError.value = t("imageReadFailed");
+    return;
+  }
+  ctx.drawImage(img, 0, 0, width, height);
+  if (removeBackground.value) {
+    try {
+      const imageData = ctx.getImageData(0, 0, width, height);
+      knockOutWhite(imageData.data);
+      ctx.putImageData(imageData, 0, 0);
+    } catch {
+      uploadError.value = t("backgroundRemovalFailed");
+    }
+  }
+  uploadedUrl.value = canvas.toDataURL("image/png");
+}
+watch(removeBackground, () => {
+  if (sourceImage) renderUpload();
+});
 function submit() {
+  if (mode.value === "upload") {
+    if (uploadedUrl.value) emit("submit", uploadedUrl.value);
+    return;
+  }
   const canvas = canvasRef.value;
   if (!canvas) return;
   const imageUrl = canvas.toDataURL("image/png");
@@ -175,3 +337,7 @@ function cancel() {
   emit("cancel");
 }
 </script>
+
+<style scoped>
+.bg-checkerboard{background-color:#fff;background-image:linear-gradient(45deg,#e5e5e5 25%,transparent 0),linear-gradient(-45deg,#e5e5e5 25%,transparent 0),linear-gradient(45deg,transparent 75%,#e5e5e5 0),linear-gradient(-45deg,transparent 75%,#e5e5e5 0);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}
+</style>

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

@@ -1,110 +1,107 @@
 <template>
-  <div class="flex items-center gap-2 px-2 py-1 rounded-md border border-default bg-default/60 lg:min-w-64">
-    <template v-if="supportsProperties">
-      <!-- ── Desktop: inline color buttons + slider (md and above) ── -->
-      <div class="hidden lg:flex items-center gap-1">
-        <button
-          v-for="color in colors"
-          :key="color"
-          class="w-4 h-4 rounded-full border-2 cursor-pointer transition-transform hover:scale-110"
-          :class="color === currentColor ? 'border-white ring-1 ring-primary' : 'border-transparent'"
-          :style="{ backgroundColor: color }"
-          :title="`Color: ${color}`"
-          @click="setColor(color)"
-        />
-      </div>
-
-      <div
-        v-if="activeType === AnnotationType.FREEHAND"
-        class="hidden lg:flex items-center gap-2 min-w-40"
-      >
-        <UIcon name="i-lucide-minus" class="text-[10px] text-muted" />
-        <USlider
-          :model-value="freehandStrokeWidth"
-          :min="1"
-          :max="24"
-          :step="1"
-          size="sm"
-          class="w-28"
-          @update:model-value="setFreehandSize"
-        />
-        <UIcon name="i-lucide-plus" class="text-[10px] text-muted" />
-        <span class="w-9 text-[11px] text-muted text-right tabular-nums">
-          {{ freehandStrokeWidth }}px
-        </span>
-      </div>
+  <!-- Rendered only while a tool with editable style is active — an empty
+       "no properties" pill would just be toolbar noise the rest of the
+       time. The second row is a grid, so the center column stays put. -->
+  <div
+    v-if="supportsProperties"
+    class="flex items-center gap-2 px-2 py-1 rounded-md border border-default bg-default/60 lg:min-w-64"
+  >
+    <!-- ── Desktop: inline color buttons + slider (md and above) ── -->
+    <div class="hidden lg:flex items-center gap-1">
+      <button
+        v-for="color in colors"
+        :key="color"
+        class="w-4 h-4 rounded-full border-2 cursor-pointer transition-transform hover:scale-110"
+        :class="color === currentColor ? 'border-white ring-1 ring-primary' : 'border-transparent'"
+        :style="{ backgroundColor: color }"
+        :title="`Color: ${color}`"
+        @click="setColor(color)"
+      />
+    </div>
 
-      <!-- ── Mobile: two popover buttons (below md) ── -->
-      <div class="flex lg:hidden items-center gap-1">
-        <!-- Color popover -->
-        <UPopover v-model:open="colorPopoverOpen">
-          <button
-            class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
-            :title="t('color')"
-          >
-            <span
-              class="w-4 h-4 rounded-full border border-white/30"
-              :style="{ backgroundColor: currentColor ?? colors[0] }"
-            />
-          </button>
-          <template #content>
-            <div class="p-3">
-              <div class="grid grid-cols-4 gap-1.5">
-                <button
-                  v-for="color in colors"
-                  :key="color"
-                  class="w-7 h-7 rounded-full border-2 cursor-pointer transition-transform hover:scale-110"
-                  :class="color === currentColor ? 'border-white ring-2 ring-primary' : 'border-transparent'"
-                  :style="{ backgroundColor: color }"
-                  @click="setColorAndClose(color)"
-                />
-              </div>
-            </div>
-          </template>
-        </UPopover>
+    <div
+      v-if="activeType === AnnotationType.FREEHAND"
+      class="hidden lg:flex items-center gap-2 min-w-40"
+    >
+      <UIcon name="i-lucide-minus" class="text-[10px] text-muted" />
+      <USlider
+        :model-value="freehandStrokeWidth"
+        :min="1"
+        :max="24"
+        :step="1"
+        size="sm"
+        class="w-28"
+        @update:model-value="setFreehandSize"
+      />
+      <UIcon name="i-lucide-plus" class="text-[10px] text-muted" />
+      <span class="w-9 text-[11px] text-muted text-right tabular-nums">
+        {{ freehandStrokeWidth }}px
+      </span>
+    </div>
 
-        <!-- Stroke width popover (freehand only) -->
-        <UPopover v-if="activeType === AnnotationType.FREEHAND">
-          <button
-            class="flex items-center justify-center h-7 px-1.5 gap-0.5 rounded-md hover:bg-default cursor-pointer"
-            :title="t('strokeWidth')"
-          >
-            <UIcon name="i-lucide-pencil" class="text-sm text-muted" />
-            <span class="text-[10px] text-muted tabular-nums">{{ freehandStrokeWidth }}</span>
-          </button>
-          <template #content>
-            <div class="p-3 flex items-center gap-3">
-              <button
-                class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-default cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
-                :disabled="freehandStrokeWidth <= 1"
-                :title="t('decreaseStrokeWidth')"
-                @click="decrementStrokeWidth"
-              >
-                <UIcon name="i-lucide-minus" class="text-sm" />
-              </button>
-              <span class="w-9 text-center text-sm tabular-nums">
-                {{ freehandStrokeWidth }}px
-              </span>
+    <!-- ── Mobile: two popover buttons (below md) ── -->
+    <div class="flex lg:hidden items-center gap-1">
+      <!-- Color popover -->
+      <UPopover v-model:open="colorPopoverOpen">
+        <button
+          class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
+          :title="t('color')"
+        >
+          <span
+            class="w-4 h-4 rounded-full border border-white/30"
+            :style="{ backgroundColor: currentColor ?? colors[0] }"
+          />
+        </button>
+        <template #content>
+          <div class="p-3">
+            <div class="grid grid-cols-4 gap-1.5">
               <button
-                class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-default cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
-                :disabled="freehandStrokeWidth >= 24"
-                :title="t('increaseStrokeWidth')"
-                @click="incrementStrokeWidth"
-              >
-                <UIcon name="i-lucide-plus" class="text-sm" />
-              </button>
+                v-for="color in colors"
+                :key="color"
+                class="w-7 h-7 rounded-full border-2 cursor-pointer transition-transform hover:scale-110"
+                :class="color === currentColor ? 'border-white ring-2 ring-primary' : 'border-transparent'"
+                :style="{ backgroundColor: color }"
+                @click="setColorAndClose(color)"
+              />
             </div>
-          </template>
-        </UPopover>
-      </div>
-    </template>
+          </div>
+        </template>
+      </UPopover>
 
-    <template v-else>
-      <div class="flex items-center gap-1.5 text-xs text-muted">
-        <UIcon name="i-lucide-sliders-horizontal" class="text-sm" />
-        <span>{{ t("noProperties") }}</span>
-      </div>
-    </template>
+      <!-- Stroke width popover (freehand only) -->
+      <UPopover v-if="activeType === AnnotationType.FREEHAND">
+        <button
+          class="flex items-center justify-center h-7 px-1.5 gap-0.5 rounded-md hover:bg-default cursor-pointer"
+          :title="t('strokeWidth')"
+        >
+          <UIcon name="i-lucide-pencil" class="text-sm text-muted" />
+          <span class="text-[10px] text-muted tabular-nums">{{ freehandStrokeWidth }}</span>
+        </button>
+        <template #content>
+          <div class="p-3 flex items-center gap-3">
+            <button
+              class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-default cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+              :disabled="freehandStrokeWidth <= 1"
+              :title="t('decreaseStrokeWidth')"
+              @click="decrementStrokeWidth"
+            >
+              <UIcon name="i-lucide-minus" class="text-sm" />
+            </button>
+            <span class="w-9 text-center text-sm tabular-nums">
+              {{ freehandStrokeWidth }}px
+            </span>
+            <button
+              class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-default cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+              :disabled="freehandStrokeWidth >= 24"
+              :title="t('increaseStrokeWidth')"
+              @click="incrementStrokeWidth"
+            >
+              <UIcon name="i-lucide-plus" class="text-sm" />
+            </button>
+          </div>
+        </template>
+      </UPopover>
+    </div>
   </div>
 </template>
 

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

@@ -1,5 +1,5 @@
 import { type Ref, type ShallowRef } from 'vue';
-import type { AddFormFieldPayload, CheckboxStyle, DetectedShape, FormFieldDefinition, FormFieldValue, PlaceFieldPayload } from '../annotation/engine/types.js';
+import type { AddFormFieldPayload, CheckboxStyle, DetectedShape, FormFieldDefinition, FormFieldValue, PlaceFieldPayload, PlacedFieldDefaults, SignatureFieldStatus } from '../annotation/engine/types.js';
 export interface FormFieldsState {
     /** Field definitions grouped by page number */
     fieldDefinitions: ShallowRef<Map<number, FormFieldDefinition[]>>;
@@ -35,6 +35,10 @@ export interface FormFieldsState {
     getAllFields: () => FormFieldDefinition[];
     /** All user-placed field definitions (used by export). */
     getPlacedFields: () => FormFieldDefinition[];
+    /** Signed-state snapshot of every signature widget (any origin).
+     *  Reads the reactive defs/values, so computeds over it re-run on
+     *  every signing or field change. */
+    getSignatureFieldStatus: () => SignatureFieldStatus[];
     /** Look up a field definition by id (any origin). */
     getFieldById: (id: string) => FormFieldDefinition | undefined;
     /** Id of the currently selected placed field (null if none). */
@@ -54,6 +58,18 @@ export interface FormFieldsState {
     /** Replace the host-provided color map. Called by KViewer when the
      *  prop changes. */
     setRoleColors: (colors: Record<string, string>) => void;
+    /** Per-field-type presets merged into every tool placement. Host-owned
+     *  via the KViewer `fieldDefaults` prop or the bridge; programmatic
+     *  `addFormField` calls are NOT affected (the payload is explicit). */
+    placedFieldDefaults: ShallowRef<PlacedFieldDefaults>;
+    /** Replace the placement presets. */
+    setPlacedFieldDefaults: (defaults: PlacedFieldDefaults) => void;
+    /** When true, user-placed fields show selection chrome and can be
+     *  moved/resized/deleted in hand mode even outside form-edit mode.
+     *  Parsed/detected fields are unaffected. */
+    editablePlacedFields: Ref<boolean>;
+    /** Enable or disable placed-field editing outside form-edit mode. */
+    setEditablePlacedFields: (enabled: boolean) => 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. */

package/dist/runtime/composables/useFormFields.js

@@ -14,12 +14,20 @@ export function provideFormFields() {
   const selectedPlacedFieldId = ref(null);
   const activeRoleId = ref(null);
   const roleColors = shallowRef({});
+  const placedFieldDefaults = shallowRef({});
+  const editablePlacedFields = ref(false);
   function setActiveRole(id) {
     activeRoleId.value = id;
   }
   function setRoleColors(colors) {
     roleColors.value = colors;
   }
+  function setPlacedFieldDefaults(defaults) {
+    placedFieldDefaults.value = defaults;
+  }
+  function setEditablePlacedFields(enabled) {
+    editablePlacedFields.value = enabled;
+  }
   function selectPlacedField(id) {
     selectedPlacedFieldId.value = id;
   }
@@ -261,10 +269,6 @@ export function provideFormFields() {
     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;
@@ -284,6 +288,15 @@ export function provideFormFields() {
       required: false,
       origin: "placed"
     };
+    const defaults = placedFieldDefaults.value[payload.fieldType];
+    if (defaults) {
+      Object.assign(
+        def,
+        Object.fromEntries(
+          Object.entries(defaults).filter(([, value]) => value !== void 0)
+        )
+      );
+    }
     if (activeRoleId.value) {
       def.roleId = activeRoleId.value;
     }
@@ -291,11 +304,11 @@ export function provideFormFields() {
       def.buttonValue = nextRadioOptionValue(fieldName);
     }
     if (payload.fieldType === "checkbox") {
-      def.checkboxStyle = "check";
+      def.checkboxStyle ??= "check";
     }
     if (payload.fieldType === "dropdown") {
-      def.combo = true;
-      def.options = [{ exportValue: "Option 1", displayValue: "Option 1" }];
+      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]);
@@ -304,7 +317,9 @@ export function provideFormFields() {
       fieldId: id,
       fieldName: def.fieldName,
       fieldType: def.fieldType,
-      value: placedDefaultValue(def.fieldType)
+      // Honors a `defaultValue` preset from placedFieldDefaults, matching
+      // how addFormField initializes values.
+      value: getDefaultValue(def)
     });
     triggerRef(fieldValues);
     if (payload.fieldType === "radio") {
@@ -455,6 +470,25 @@ export function provideFormFields() {
     }
     return false;
   }
+  function getSignatureFieldStatus() {
+    const out = [];
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) {
+        if (d.fieldType !== "signature") continue;
+        const fv = fieldValues.value.get(d.id);
+        const signed = typeof fv?.value === "string" && fv.value !== "" || d.signedInSource === true;
+        const status = {
+          id: d.id,
+          fieldName: d.fieldName,
+          pageNumber: d.pageNumber,
+          signed
+        };
+        if (d.roleId) status.roleId = d.roleId;
+        out.push(status);
+      }
+    }
+    return out;
+  }
   function isFieldLocked(fieldId) {
     const target = getFieldById(fieldId);
     if (!target) return false;
@@ -511,6 +545,7 @@ export function provideFormFields() {
     removePlacedField,
     getAllFields,
     getPlacedFields,
+    getSignatureFieldStatus,
     getFieldById,
     selectedPlacedFieldId,
     selectPlacedField,
@@ -525,7 +560,11 @@ export function provideFormFields() {
     activeRoleId,
     setActiveRole,
     roleColors,
-    setRoleColors
+    setRoleColors,
+    placedFieldDefaults,
+    setPlacedFieldDefaults,
+    editablePlacedFields,
+    setEditablePlacedFields
   };
   provide(FORM_FIELDS_KEY, state);
   return state;

package/dist/runtime/composables/useViewerSearch.js

@@ -156,7 +156,7 @@ export function provideViewerSearch() {
       const end = match.end;
       const isSelected = isSelectedPage && i === selectedMatchIndex;
       const highlightSuffix = isSelected ? " selected" : "";
-      let selectedSpan = null;
+      let selectedSpan;
       if (!prevEnd || begin.divIdx !== prevEnd.divIdx) {
         if (prevEnd) {
           appendTextToDiv(binding, prevEnd.divIdx, prevEnd.offset, void 0);