kviewer 0.0.10 → 0.0.11

package/dist/runtime/components/panels/PlacedFieldSidebar.vue

@@ -0,0 +1,505 @@
+<template>
+  <!-- Inline sidebar that takes its place in the viewer's flex row.
+       Block-level positioning means it lives strictly inside the page-
+       view section — no fixed-position overlay, so it can never spill
+       under the ViewerBar at the top, and z-index battles with the
+       AnnotationToolbar are moot.
+
+       Always shown while form-edit mode is active so the user has a
+       persistent surface for field properties (and a placeholder hint
+       when nothing is selected yet). -->
+  <aside
+    v-show="state.formEditMode.value"
+    class="kviewer-placed-sidebar relative flex flex-col h-full w-80 shrink-0 border-s border-default bg-elevated overflow-hidden"
+  >
+    <header class="px-4 py-3 border-b border-default shrink-0">
+      <p class="text-highlighted font-semibold truncate">{{ title }}</p>
+      <p v-if="description" class="text-muted text-sm truncate">{{ description }}</p>
+    </header>
+
+    <div class="flex-1 min-h-0 overflow-y-auto">
+      <div v-if="field" class="flex flex-col gap-4 p-4">
+        <div class="flex flex-col gap-1">
+          <label class="text-xs font-medium text-muted">Field name</label>
+          <UInput
+            v-model="nameDraft"
+            size="sm"
+            spellcheck="false"
+            @blur="commitName"
+            @keydown.enter.prevent="commitName"
+          />
+          <p class="text-xs text-muted">
+            Shared names group radio buttons and bind multiple widgets to the same value.
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <UCheckbox
+            :model-value="field.required"
+            label="Required"
+            @update:model-value="onRequired"
+          />
+          <UCheckbox
+            :model-value="field.readOnly"
+            label="Read-only"
+            @update:model-value="onReadOnly"
+          />
+        </div>
+
+        <template v-if="field.fieldType === 'text'">
+          <div class="flex flex-col gap-2">
+            <UCheckbox
+              :model-value="!!field.multiLine"
+              label="Multi-line"
+              @update:model-value="onMultiLine"
+            />
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-medium text-muted">Max length</label>
+              <UInput
+                type="number"
+                :model-value="field.maxLen != null ? String(field.maxLen) : ''"
+                placeholder="No limit"
+                size="sm"
+                min="0"
+                @update:model-value="onMaxLen"
+              />
+            </div>
+          </div>
+        </template>
+
+        <template v-if="field.fieldType === 'checkbox'">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Style</label>
+            <USelect
+              :model-value="field.checkboxStyle ?? 'check'"
+              :items="checkboxStyleItems"
+              size="sm"
+              @update:model-value="onCheckboxStyle"
+            />
+            <p class="text-xs text-muted">
+              Glyph drawn when checked. Saved as <code>/MK /CA</code> on export.
+            </p>
+          </div>
+        </template>
+
+        <template v-if="field.fieldType === 'dropdown'">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Options</label>
+            <div class="flex flex-col gap-1">
+              <div
+                v-for="(opt, i) in field.options ?? []"
+                :key="i"
+                class="flex items-center gap-1"
+              >
+                <UInput
+                  :model-value="opt.displayValue"
+                  size="sm"
+                  spellcheck="false"
+                  placeholder="Label"
+                  class="flex-1"
+                  @update:model-value="(v) => updateOption(i, v)"
+                />
+                <UButton
+                  icon="i-lucide-x"
+                  variant="ghost"
+                  color="neutral"
+                  size="xs"
+                  square
+                  @click="removeOption(i)"
+                />
+              </div>
+            </div>
+            <UButton
+              icon="i-lucide-plus"
+              label="Add option"
+              variant="soft"
+              color="neutral"
+              size="xs"
+              class="mt-1 w-full justify-center"
+              @click="addOption"
+            />
+            <UCheckbox
+              :model-value="field.combo !== false"
+              label="Combo box (collapsible)"
+              class="mt-2"
+              @update:model-value="onCombo"
+            />
+            <UCheckbox
+              :model-value="!!field.editable"
+              label="Allow custom text"
+              @update:model-value="onEditable"
+            />
+            <UCheckbox
+              :model-value="!!field.multiSelect"
+              label="Multi-select"
+              @update:model-value="onMultiSelect"
+            />
+          </div>
+        </template>
+
+        <template v-if="field.fieldType === 'signature'">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Prompt text</label>
+            <UInput
+              v-model="promptDraft"
+              size="sm"
+              spellcheck="false"
+              placeholder="Click to sign"
+              @blur="commitPrompt"
+              @keydown.enter.prevent="commitPrompt"
+            />
+            <p class="text-xs text-muted">
+              Shown on the unsigned widget. Defaults to "Click to sign".
+            </p>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-medium text-muted">Lock fields after signing</label>
+              <USelect
+                :model-value="field.lockAction ?? 'none'"
+                :items="lockActionItems"
+                size="sm"
+                @update:model-value="onLockAction"
+              />
+              <p class="text-xs text-muted">
+                Once this signature is filled, listed fields become read-only
+                inside the viewer. Not preserved on PDF export.
+              </p>
+            </div>
+
+            <div
+              v-if="field.lockAction === 'include' || field.lockAction === 'exclude'"
+              class="flex flex-col gap-1"
+            >
+              <label class="text-xs font-medium text-muted">
+                {{ field.lockAction === "include" ? "Lock these fields" : "Lock all fields except" }}
+              </label>
+              <div
+                v-if="otherFieldNames.length === 0"
+                class="text-xs text-muted italic"
+              >
+                No other named fields in the document.
+              </div>
+              <div v-else class="flex flex-col gap-1 max-h-48 overflow-y-auto">
+                <UCheckbox
+                  v-for="name in otherFieldNames"
+                  :key="name"
+                  :model-value="(field.lockFieldNames ?? []).includes(name)"
+                  :label="name"
+                  @update:model-value="(v) => toggleLockField(name, v === true)"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template v-if="field.fieldType === 'radio'">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Group</label>
+            <USelect
+              :model-value="field.fieldName"
+              :items="radioGroupItems"
+              size="sm"
+              @update:model-value="onRadioGroup"
+            />
+            <p class="text-xs text-muted">
+              Radios sharing a group act as one — picking one clears the others.
+            </p>
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Option value</label>
+            <UInput
+              v-model="buttonValueDraft"
+              size="sm"
+              spellcheck="false"
+              @blur="commitButtonValue"
+              @keydown.enter.prevent="commitButtonValue"
+            />
+            <p class="text-xs text-muted">
+              Value stored when this option is selected. Must be unique inside the group.
+            </p>
+          </div>
+        </template>
+
+        <div class="flex flex-col gap-1 text-xs text-muted">
+          <div>Type: <span class="font-medium">{{ field.fieldType }}</span></div>
+          <div>Page: <span class="font-medium">{{ field.pageNumber }}</span></div>
+        </div>
+
+        <UButton
+          color="error"
+          variant="soft"
+          icon="i-lucide-trash-2"
+          block
+          @click="onDelete"
+        >
+          Delete field
+        </UButton>
+      </div>
+      <div v-else class="text-sm text-muted p-4">
+        Select a placed field to edit its properties.
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { CHECKBOX_STYLE_OPTIONS } from "../../annotation/checkbox-styles";
+import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
+const checkboxStyleItems = CHECKBOX_STYLE_OPTIONS;
+const formFields = useFormFields();
+const state = useViewerState();
+const field = computed(() => {
+  const id = formFields.selectedPlacedFieldId.value;
+  if (!id) return null;
+  return formFields.getFieldById(id) ?? null;
+});
+const title = computed(() => {
+  if (!field.value) return "Field properties";
+  return field.value.fieldName;
+});
+const description = computed(() => {
+  if (!field.value) return void 0;
+  return `${labelForType(field.value.fieldType)} on page ${field.value.pageNumber}`;
+});
+function labelForType(t) {
+  switch (t) {
+    case "text":
+      return "Text field";
+    case "checkbox":
+      return "Checkbox";
+    case "radio":
+      return "Radio button";
+    case "signature":
+      return "Signature field";
+    case "dropdown":
+      return "Dropdown";
+    case "button":
+      return "Button";
+    default:
+      return "Field";
+  }
+}
+const nameDraft = ref("");
+const buttonValueDraft = ref("");
+const promptDraft = ref("");
+watch(field, (f) => {
+  nameDraft.value = f?.fieldName ?? "";
+  buttonValueDraft.value = f?.buttonValue ?? "";
+  promptDraft.value = f?.promptText ?? "";
+}, { immediate: true });
+const lockActionItems = [
+  { label: "None", value: "none" },
+  { label: "All other fields", value: "all" },
+  { label: "Selected fields only", value: "include" },
+  { label: "All except selected", value: "exclude" }
+];
+const NEW_GROUP_SENTINEL = "__new_radio_group__";
+const radioGroupItems = computed(() => {
+  const names = /* @__PURE__ */ new Set();
+  for (const defs of formFields.fieldDefinitions.value.values()) {
+    for (const d of defs) {
+      if (d.fieldType === "radio" && d.fieldName) names.add(d.fieldName);
+    }
+  }
+  const sorted = Array.from(names).sort();
+  return [
+    ...sorted.map((n) => ({ label: n, value: n })),
+    { label: "+ New group", value: NEW_GROUP_SENTINEL }
+  ];
+});
+const otherFieldNames = computed(() => {
+  const current = field.value;
+  if (!current) return [];
+  const names = /* @__PURE__ */ new Set();
+  for (const defs of formFields.fieldDefinitions.value.values()) {
+    for (const d of defs) {
+      if (d.id === current.id) continue;
+      if (!d.fieldName) continue;
+      names.add(d.fieldName);
+    }
+  }
+  return Array.from(names).sort();
+});
+function commitName() {
+  if (!field.value) return;
+  const v = nameDraft.value.trim();
+  if (!v || v === field.value.fieldName) {
+    nameDraft.value = field.value.fieldName;
+    return;
+  }
+  formFields.updatePlacedField(field.value.id, { fieldName: v });
+}
+function commitButtonValue() {
+  if (!field.value) return;
+  const v = buttonValueDraft.value.trim();
+  if (!v || v === field.value.buttonValue) {
+    buttonValueDraft.value = field.value.buttonValue ?? "";
+    return;
+  }
+  formFields.updatePlacedField(field.value.id, { buttonValue: v });
+}
+function commitPrompt() {
+  if (!field.value) return;
+  const v = promptDraft.value.trim();
+  const next = v === "" ? void 0 : v;
+  if (next === field.value.promptText) return;
+  formFields.updatePlacedField(field.value.id, { promptText: next });
+}
+function onLockAction(v) {
+  if (!field.value) return;
+  if (v === "none") {
+    formFields.updatePlacedField(field.value.id, {
+      lockAction: void 0,
+      lockFieldNames: void 0
+    });
+    return;
+  }
+  formFields.updatePlacedField(field.value.id, {
+    lockAction: v,
+    // Initialize an empty list when switching to include/exclude so the
+    // checkbox UI binds against an array immediately.
+    lockFieldNames: field.value.lockFieldNames ?? []
+  });
+}
+function nextFreeRadioGroupName() {
+  const used = /* @__PURE__ */ new Set();
+  for (const defs of formFields.fieldDefinitions.value.values()) {
+    for (const d of defs) used.add(d.fieldName);
+  }
+  let n = 1;
+  while (used.has(`Radio_${n}`)) n += 1;
+  return `Radio_${n}`;
+}
+function nextFreeOptionValue(groupName, ignoreId) {
+  const used = /* @__PURE__ */ new Set();
+  for (const defs of formFields.fieldDefinitions.value.values()) {
+    for (const d of defs) {
+      if (d.id === ignoreId) continue;
+      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 onRadioGroup(v) {
+  if (!field.value) return;
+  if (v === field.value.fieldName) return;
+  if (v === NEW_GROUP_SENTINEL) {
+    const name = nextFreeRadioGroupName();
+    formFields.updatePlacedField(field.value.id, {
+      fieldName: name,
+      buttonValue: "Option_1"
+    });
+    return;
+  }
+  const current = field.value.buttonValue ?? "";
+  const collides = (() => {
+    if (!current) return true;
+    for (const defs of formFields.fieldDefinitions.value.values()) {
+      for (const d of defs) {
+        if (d.id === field.value.id) continue;
+        if (d.fieldType === "radio" && d.fieldName === v && d.buttonValue === current) {
+          return true;
+        }
+      }
+    }
+    return false;
+  })();
+  const buttonValue = collides ? nextFreeOptionValue(v, field.value.id) : current;
+  formFields.updatePlacedField(field.value.id, {
+    fieldName: v,
+    buttonValue
+  });
+}
+function toggleLockField(name, checked) {
+  if (!field.value) return;
+  const current = new Set(field.value.lockFieldNames ?? []);
+  if (checked) current.add(name);
+  else current.delete(name);
+  formFields.updatePlacedField(field.value.id, {
+    lockFieldNames: Array.from(current)
+  });
+}
+function onRequired(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { required: v === true });
+}
+function onReadOnly(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { readOnly: v === true });
+}
+function onMultiLine(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { multiLine: v === true });
+}
+function onMaxLen(v) {
+  if (!field.value) return;
+  const n = typeof v === "number" ? v : Number.parseInt(v, 10);
+  const next = Number.isFinite(n) && n > 0 ? n : void 0;
+  formFields.updatePlacedField(field.value.id, { maxLen: next });
+}
+function onDelete() {
+  if (!field.value) return;
+  formFields.removePlacedField(field.value.id);
+}
+function onCheckboxStyle(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { checkboxStyle: v });
+}
+function updateOption(i, displayValue) {
+  if (!field.value) return;
+  const next = (field.value.options ?? []).slice();
+  if (!next[i]) return;
+  next[i] = { exportValue: displayValue, displayValue };
+  formFields.updatePlacedField(field.value.id, { options: next });
+}
+function addOption() {
+  if (!field.value) return;
+  const existing = field.value.options ?? [];
+  const label = `Option ${existing.length + 1}`;
+  const next = [...existing, { exportValue: label, displayValue: label }];
+  formFields.updatePlacedField(field.value.id, { options: next });
+}
+function removeOption(i) {
+  if (!field.value) return;
+  const next = (field.value.options ?? []).slice();
+  next.splice(i, 1);
+  formFields.updatePlacedField(field.value.id, { options: next });
+}
+function onCombo(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { combo: v === true });
+}
+function onEditable(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { editable: v === true });
+}
+function onMultiSelect(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { multiSelect: v === true });
+}
+function onDocPointerDown(e) {
+  if (!formFields.selectedPlacedFieldId.value) return;
+  const target = e.target;
+  if (!target) return;
+  if (target.closest(".kviewer-form-field")) return;
+  if (target.closest(".kviewer-placed-sidebar")) return;
+  if (target.closest('[role="dialog"]')) return;
+  if (target.closest("[data-reka-popper-content-wrapper]")) return;
+  formFields.selectPlacedField(null);
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("pointerdown", onDocPointerDown, true);
+  onBeforeUnmount(() => {
+    window.removeEventListener("pointerdown", onDocPointerDown, true);
+  });
+}
+</script>

package/dist/runtime/components/panels/PlacedFieldSidebar.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/components/tools/FormFieldTools.d.vue.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/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,7 @@ export declare function createAnnotationEngine(viewerState: ViewerState, options
     userName?: string;
     onRequestTextInput: PainterCallbacks['onRequestTextInput'];
     onRequestDeleteConfirm?: PainterCallbacks['onRequestDeleteConfirm'];
+    onPlaceField?: PainterCallbacks['onPlaceField'];
     freehandGroupingDelay?: number;
     setExternalGesturesEnabled?: (enabled: boolean) => void;
 }): Painter;

package/dist/runtime/composables/useAnnotationEngine.js

@@ -60,7 +60,8 @@ export function createAnnotationEngine(viewerState, options) {
       viewerState.history.commit();
     },
     onRequestTextInput: options.onRequestTextInput,
-    onRequestDeleteConfirm: options.onRequestDeleteConfirm
+    onRequestDeleteConfirm: options.onRequestDeleteConfirm,
+    onPlaceField: options.onPlaceField
   };
   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 { 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,33 @@ 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;
+    /** Update a placed field's rect, name, or flags. */
+    updatePlacedField: (id: string, patch: Partial<FormFieldDefinition>) => void;
+    /** Remove a placed field and its value. */
+    removePlacedField: (id: string) => void;
+    /** 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;
+    /** 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;
 }