kviewer 0.0.9 → 0.0.11

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/form-fields/FormButton.vue

@@ -12,6 +12,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { decodeFontName } from "../../annotation/font-style";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
@@ -19,12 +20,23 @@ const props = defineProps({
 });
 const formFields = useFormFields();
 const state = useViewerState();
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
+const FONT_BORDER_SIZE = 2;
+const LINE_HEIGHT_FACTOR = 1.35;
+const DEFAULT_FIELD_FONT_SIZE = 9;
 const buttonStyle = computed(() => {
   const style = {};
-  if (props.field.fontSize && props.field.fontSize > 0) {
-    style.fontSize = `${props.field.fontSize}px`;
-  }
+  const declared = props.field.fontSize && props.field.fontSize > 0 ? props.field.fontSize : DEFAULT_FIELD_FONT_SIZE;
+  const rect = props.field.rect;
+  const rectHeight = Math.abs(rect[3] - rect[1] - FONT_BORDER_SIZE);
+  const computed2 = Math.min(declared, rectHeight / LINE_HEIGHT_FACTOR);
+  style.fontSize = `${Math.round(10 * computed2) / 10}px`;
+  const fontStyle = decodeFontName(props.field.fontName);
+  style.fontFamily = fontStyle.fontFamily;
+  if (fontStyle.fontWeight !== "normal") style.fontWeight = fontStyle.fontWeight;
+  if (fontStyle.fontStyle !== "normal") style.fontStyle = fontStyle.fontStyle;
   if (props.field.color && props.field.color.length >= 3) {
     style.color = `rgb(${props.field.color[0]}, ${props.field.color[1]}, ${props.field.color[2]})`;
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <!-- Detected shape: custom × icon on transparent background -->
+  <!-- Detected shape: lightweight × icon on transparent background -->
   <div
     v-if="isDetected"
     class="kviewer-form-checkbox kviewer-form-checkbox--detected"
@@ -29,20 +29,30 @@
     </svg>
   </div>
 
-  <!-- Real PDF form field: native checkbox -->
-  <div v-else class="kviewer-form-checkbox">
-    <input
-      type="checkbox"
-      :checked="isChecked"
-      :disabled="isReadOnly"
-      :required="props.field.required"
-      @change="onChange"
-    >
+  <!-- Real PDF form field: render a custom box that draws the matching
+       Unicode glyph for whichever `/MK /CA` style is set (default 'check'
+       included). Native HTML checkboxes can't render cross/diamond/star/etc,
+       and rendering the default check via the same path keeps the look
+       consistent across all styles. -->
+  <div
+    v-else
+    class="kviewer-form-checkbox kviewer-form-checkbox--styled"
+    :class="{ 'kviewer-form-checkbox--checked': isChecked }"
+    role="checkbox"
+    :aria-checked="isChecked"
+    :aria-disabled="isReadOnly"
+    tabindex="0"
+    @click="toggle"
+    @keydown.space.prevent="toggle"
+    @keydown.enter.prevent="toggle"
+  >
+    <span v-if="isChecked" class="kviewer-form-checkbox__glyph">{{ styledGlyph }}</span>
   </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { CHECKBOX_STYLE_TABLE } from "../../annotation/checkbox-styles";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
@@ -51,17 +61,23 @@ const props = defineProps({
 const formFields = useFormFields();
 const state = useViewerState();
 const isDetected = computed(() => props.field.shapeType != null);
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
 const isChecked = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   return fv?.value === true;
 });
+const styledGlyph = computed(() => {
+  const style = props.field.checkboxStyle ?? "check";
+  return CHECKBOX_STYLE_TABLE[style]?.glyph ?? CHECKBOX_STYLE_TABLE.check.glyph;
+});
 function toggle() {
   if (isReadOnly.value) return;
   formFields.setFieldValue(props.field.id, !isChecked.value);
 }
-function onChange(event) {
-  const target = event.target;
-  formFields.setFieldValue(props.field.id, target.checked);
-}
 </script>
+
+<style>
+.kviewer-form-checkbox--styled{align-items:center;background:#fff;border:1px solid #444;cursor:pointer;display:flex;height:100%;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.kviewer-form-checkbox--styled[aria-disabled=true]{cursor:not-allowed;opacity:.6}.kviewer-form-checkbox__glyph{color:#000;font-size:clamp(8px,88cqh,64px);font-variant-emoji:text;line-height:1;pointer-events:none}.kviewer-form-checkbox--styled{container-type:size}
+</style>

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

@@ -74,7 +74,9 @@ const props = defineProps({
 });
 const formFields = useFormFields();
 const state = useViewerState();
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
 const datalistId = computed(() => `kviewer-datalist-${props.field.id}`);
 const listBoxSize = computed(() => {
   const optCount = props.field.options?.length ?? 0;

package/dist/runtime/components/form-fields/FormFieldWrapper.d.vue.ts

@@ -2,7 +2,18 @@ import type { FormFieldDefinition } from '../../annotation/engine/types.js';
 type __VLS_Props = {
     field: FormFieldDefinition;
     pageHeight: number;
+    scale: number;
+    /** PDF user-space origin (view[0], view[1]). /Rect coords are in
+     *  default user space; the canvas top-left corresponds to PDF
+     *  (viewOffsetX, viewOffsetY + pageHeight), so we have to subtract. */
+    viewOffsetX?: number;
+    viewOffsetY?: number;
+    selected: boolean;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,33 +1,65 @@
 <template>
   <div
     class="kviewer-form-field"
+    :class="{
+  'kviewer-form-field--editable': showChrome,
+  'kviewer-form-field--placed': isPlaced,
+  'kviewer-form-field--selected': props.selected
+}"
     :style="positionStyle"
   >
-    <FormTextField v-if="props.field.fieldType === 'text'" :field="props.field" />
-    <FormCheckbox v-else-if="props.field.fieldType === 'checkbox'" :field="props.field" />
-    <FormRadioButton v-else-if="props.field.fieldType === 'radio'" :field="props.field" />
-    <FormDropdown v-else-if="props.field.fieldType === 'dropdown'" :field="props.field" />
-    <FormSignatureField v-else-if="props.field.fieldType === 'signature'" :field="props.field" />
-    <FormButton v-else-if="props.field.fieldType === 'button'" :field="props.field" />
+    <div
+      class="kviewer-form-field__body"
+      :class="{ 'kviewer-form-field__body--locked': isFormEditMode }"
+    >
+      <FormTextField v-if="props.field.fieldType === 'text'" :field="props.field" />
+      <FormCheckbox v-else-if="props.field.fieldType === 'checkbox'" :field="props.field" />
+      <FormRadioButton v-else-if="props.field.fieldType === 'radio'" :field="props.field" />
+      <FormDropdown v-else-if="props.field.fieldType === 'dropdown'" :field="props.field" />
+      <FormSignatureField v-else-if="props.field.fieldType === 'signature'" :field="props.field" />
+      <FormButton v-else-if="props.field.fieldType === 'button'" :field="props.field" />
+    </div>
+
+    <PlacedFieldChrome
+      v-if="showChrome"
+      :field="props.field"
+      :selected="props.selected"
+      :scale="props.scale"
+      :page-height="props.pageHeight"
+      @select="emit('select')"
+    />
   </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { useViewerState } from "../../composables/useViewerState";
 import FormTextField from "./FormTextField.vue";
 import FormCheckbox from "./FormCheckbox.vue";
 import FormRadioButton from "./FormRadioButton.vue";
 import FormDropdown from "./FormDropdown.vue";
 import FormSignatureField from "./FormSignatureField.vue";
 import FormButton from "./FormButton.vue";
+import PlacedFieldChrome from "./PlacedFieldChrome.vue";
 const props = defineProps({
   field: { type: Object, required: true },
-  pageHeight: { type: Number, required: true }
+  pageHeight: { type: Number, required: true },
+  scale: { type: Number, required: true },
+  viewOffsetX: { type: Number, required: false },
+  viewOffsetY: { type: Number, required: false },
+  selected: { type: Boolean, required: true }
 });
+const emit = defineEmits(["select"]);
+const state = useViewerState();
+const isPlaced = computed(() => props.field.origin === "placed");
+const isFormEditMode = computed(() => state.formEditMode.value);
+const showChrome = computed(() => isFormEditMode.value);
 const positionStyle = computed(() => {
   const rect = props.field.rect;
-  const left = rect[0];
-  const top = props.pageHeight - rect[3];
+  const vx = props.viewOffsetX ?? 0;
+  const vy = props.viewOffsetY ?? 0;
+  const left = rect[0] - vx;
+  const top = props.pageHeight + vy - rect[3];
   const width = rect[2] - rect[0];
   const height = rect[3] - rect[1];
   return {
@@ -39,3 +71,7 @@ const positionStyle = computed(() => {
   };
 });
 </script>
+
+<style>
+.kviewer-form-field__body{height:100%;width:100%}.kviewer-form-field__body--locked{pointer-events:none}.kviewer-form-field--editable{outline:1px dashed rgba(22,119,255,.45);outline-offset:0}.kviewer-form-field--editable.kviewer-form-field--placed{outline-color:rgba(22,119,255,.75)}.kviewer-form-field--editable.kviewer-form-field--selected{outline:none}
+</style>

package/dist/runtime/components/form-fields/FormFieldWrapper.vue.d.ts

@@ -2,7 +2,18 @@ import type { FormFieldDefinition } from '../../annotation/engine/types.js';
 type __VLS_Props = {
     field: FormFieldDefinition;
     pageHeight: number;
+    scale: number;
+    /** PDF user-space origin (view[0], view[1]). /Rect coords are in
+     *  default user space; the canvas top-left corresponds to PDF
+     *  (viewOffsetX, viewOffsetY + pageHeight), so we have to subtract. */
+    viewOffsetX?: number;
+    viewOffsetY?: number;
+    selected: boolean;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -21,7 +21,9 @@ const props = defineProps({
 });
 const formFields = useFormFields();
 const state = useViewerState();
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
 const isSelected = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   if (!fv) return false;

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

@@ -11,7 +11,7 @@
       alt="Signature"
     >
     <span v-else class="kviewer-form-signature__placeholder">
-      Click to sign
+      {{ props.field.promptText || "Click to sign" }}
     </span>
   </div>
 
@@ -43,6 +43,7 @@ const signatureUrl = computed(() => {
 const hasSigned = computed(() => !!signatureUrl.value);
 async function onClickSign() {
   if (props.field.readOnly || state.readonly.value) return;
+  if (formFields.isFieldLocked(props.field.id)) return;
   if (state.signatures.value.length > 0) {
     const sig = state.signatures.value[0];
     if (sig) {

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

@@ -19,11 +19,13 @@
     :style="fieldStyle"
     class="kviewer-form-input"
     @input="onInput"
+    @scroll="onScroll"
   >
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { decodeFontName } from "../../annotation/font-style";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
@@ -31,18 +33,37 @@ const props = defineProps({
 });
 const formFields = useFormFields();
 const state = useViewerState();
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
 const currentValue = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   return typeof fv?.value === "string" ? fv.value : "";
 });
+const FONT_BORDER_SIZE = 2;
+const LINE_HEIGHT_FACTOR = 1.35;
+const DEFAULT_FIELD_FONT_SIZE = 9;
 const fieldStyle = computed(() => {
   const style = {};
-  if (props.field.fontSize && props.field.fontSize > 0) {
-    style.fontSize = `${props.field.fontSize}px`;
+  const declared = props.field.fontSize && props.field.fontSize > 0 ? props.field.fontSize : DEFAULT_FIELD_FONT_SIZE;
+  const rect = props.field.rect;
+  const rectHeight = Math.abs(rect[3] - rect[1] - FONT_BORDER_SIZE);
+  let computed2;
+  if (props.field.multiLine) {
+    const numberOfLines = Math.max(
+      1,
+      Math.round(rectHeight / (LINE_HEIGHT_FACTOR * declared))
+    );
+    const lineHeight = rectHeight / numberOfLines;
+    computed2 = Math.min(declared, lineHeight / LINE_HEIGHT_FACTOR);
   } else {
-    style.fontSize = "inherit";
+    computed2 = Math.min(declared, rectHeight / LINE_HEIGHT_FACTOR);
   }
+  style.fontSize = `${Math.round(10 * computed2) / 10}px`;
+  const fontStyle = decodeFontName(props.field.fontName);
+  style.fontFamily = fontStyle.fontFamily;
+  if (fontStyle.fontWeight !== "normal") style.fontWeight = fontStyle.fontWeight;
+  if (fontStyle.fontStyle !== "normal") style.fontStyle = fontStyle.fontStyle;
   if (props.field.color && props.field.color.length >= 3) {
     style.color = `rgb(${props.field.color[0]}, ${props.field.color[1]}, ${props.field.color[2]})`;
   }
@@ -54,16 +75,35 @@ const fieldStyle = computed(() => {
     style.textAlign = alignMap[props.field.textAlignment] ?? "left";
   }
   if (props.field.comb && props.field.maxLen && props.field.maxLen > 0) {
-    const rect = props.field.rect;
     const fieldWidth = rect[2] - rect[0];
     const cellWidth = fieldWidth / props.field.maxLen;
-    style.letterSpacing = `${cellWidth - (props.field.fontSize ?? 12) * 0.6}px`;
-    style.fontFamily = "monospace";
+    const charWidth = computed2 * 0.6;
+    style.fontFamily = '"Courier New", Courier, monospace';
+    style.fontWeight = "700";
+    style.textAlign = "left";
+    style.letterSpacing = `${cellWidth - charWidth}px`;
+    style.paddingLeft = `${Math.max(0, (cellWidth - charWidth) / 2)}px`;
+    style.paddingRight = "0";
+    style.paddingTop = "0";
+    style.paddingBottom = "0";
+    style.borderLeftWidth = "0";
+    style.backgroundImage = "linear-gradient(to right, rgba(0, 0, 0, 0.55) 1px, transparent 1px)";
+    style.backgroundSize = `${100 / props.field.maxLen}% 100%`;
+    style.backgroundRepeat = "repeat-x";
+    style.borderTop = "1px solid rgba(0, 0, 0, 0.55)";
+    style.borderBottom = "1px solid rgba(0, 0, 0, 0.55)";
+    style.borderRight = "1px solid rgba(0, 0, 0, 0.55)";
   }
   return style;
 });
 function onInput(event) {
   const target = event.target;
   formFields.setFieldValue(props.field.id, target.value);
+  if (props.field.comb) target.scrollLeft = 0;
+}
+function onScroll(event) {
+  if (!props.field.comb) return;
+  const target = event.target;
+  if (target.scrollLeft !== 0) target.scrollLeft = 0;
 }
 </script>

package/dist/runtime/components/form-fields/PlacedFieldChrome.d.vue.ts

@@ -0,0 +1,16 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+    selected: boolean;
+    /** CSS pixels per PDF unit for the current page. */
+    scale: number;
+    /** PDF-space page height (kept for parity; unused here). */
+    pageHeight: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,131 @@
+<template>
+  <!-- The whole chrome is the interactive surface in form-edit mode:
+       click to select, drag anywhere to move, plus a label bar above and
+       eight resize handles when selected. -->
+  <div
+    ref="rootEl"
+    class="kviewer-placed-chrome"
+    :class="{ 'kviewer-placed-chrome--selected': selected }"
+    :style="{ '--kvw-handle-zoom': handleZoom }"
+    @pointerdown.stop="onChromePointerDown"
+    @click.stop
+  >
+    <div
+      v-if="selected"
+      class="kviewer-placed-chrome__grip"
+      :title="field.fieldName"
+    >
+      <UIcon name="i-lucide-grip-vertical" class="kviewer-placed-chrome__grip-dots" />
+      <span class="kviewer-placed-chrome__grip-label">{{ field.fieldName }}</span>
+    </div>
+
+    <template v-if="selected">
+      <div
+        v-for="h in handles"
+        :key="h.name"
+        class="kviewer-placed-chrome__handle"
+        :class="`kviewer-placed-chrome__handle--${h.name}`"
+        :style="{ cursor: h.cursor }"
+        @pointerdown.stop="(e) => onHandlePointerDown(e, h.name)"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
+const rootEl = ref(null);
+const viewerState = useViewerState();
+const handleZoom = computed(() => {
+  const totalZoom = (props.scale || 1) * (viewerState.visualZoom.value || 1);
+  return Math.max(0.4, 1 / totalZoom).toFixed(3);
+});
+const props = defineProps({
+  field: { type: Object, required: true },
+  selected: { type: Boolean, required: true },
+  scale: { type: Number, required: true },
+  pageHeight: { type: Number, required: true }
+});
+const emit = defineEmits(["select"]);
+const formFields = useFormFields();
+const handles = [
+  { name: "n", cursor: "ns-resize" },
+  { name: "s", cursor: "ns-resize" },
+  { name: "e", cursor: "ew-resize" },
+  { name: "w", cursor: "ew-resize" },
+  { name: "ne", cursor: "nesw-resize" },
+  { name: "nw", cursor: "nwse-resize" },
+  { name: "se", cursor: "nwse-resize" },
+  { name: "sw", cursor: "nesw-resize" }
+];
+function effectiveScale() {
+  const el = rootEl.value;
+  if (!el) return props.scale;
+  const rect = el.getBoundingClientRect();
+  const pdfWidth = props.field.rect[2] - props.field.rect[0];
+  if (pdfWidth <= 0 || rect.width <= 0) return props.scale;
+  return rect.width / pdfWidth;
+}
+const DRAG_THRESHOLD_PX = 3;
+function onChromePointerDown(e) {
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const startRect = [...props.field.rect];
+  const s = effectiveScale();
+  let dragging = false;
+  const onMove = (ev) => {
+    if (!dragging) {
+      const adx = Math.abs(ev.clientX - startX);
+      const ady = Math.abs(ev.clientY - startY);
+      if (adx < DRAG_THRESHOLD_PX && ady < DRAG_THRESHOLD_PX) return;
+      dragging = true;
+    }
+    const dx = (ev.clientX - startX) / s;
+    const dy = (ev.clientY - startY) / s;
+    const pdfDy = -dy;
+    const next = [
+      startRect[0] + dx,
+      startRect[1] + pdfDy,
+      startRect[2] + dx,
+      startRect[3] + pdfDy
+    ];
+    formFields.updatePlacedField(props.field.id, { rect: next });
+  };
+  const onUp = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    if (!dragging) emit("select");
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+}
+function onHandlePointerDown(e, name) {
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const [sx1, sy1, sx2, sy2] = props.field.rect;
+  const s = effectiveScale();
+  const onMove = (ev) => {
+    const dx = (ev.clientX - startX) / s;
+    const dy = (ev.clientY - startY) / s;
+    const pdfDy = -dy;
+    let x1 = sx1, y1 = sy1, x2 = sx2, y2 = sy2;
+    if (name.includes("n")) y2 = Math.max(y1 + 4, sy2 + pdfDy);
+    if (name.includes("s")) y1 = Math.min(y2 - 4, sy1 + pdfDy);
+    if (name.includes("e")) x2 = Math.max(x1 + 4, sx2 + dx);
+    if (name.includes("w")) x1 = Math.min(x2 - 4, sx1 + dx);
+    formFields.updatePlacedField(props.field.id, { rect: [x1, y1, x2, y2] });
+  };
+  const onUp = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+}
+</script>
+
+<style>
+.kviewer-placed-chrome{cursor:move;inset:0;pointer-events:auto;position:absolute;touch-action:none}.kviewer-placed-chrome--selected{outline:1.5px dashed #1677ff;outline-offset:0}.kviewer-placed-chrome__grip{align-items:center;background:rgba(22,119,255,.15);border:1px solid rgba(22,119,255,.4);border-radius:calc(3px*var(--kvw-handle-zoom, 1));bottom:calc(100% + 3px*var(--kvw-handle-zoom, 1));color:#1677ff;cursor:move;display:flex;font-size:calc(9px*var(--kvw-handle-zoom, 1));gap:calc(3px*var(--kvw-handle-zoom, 1));height:calc(16px*var(--kvw-handle-zoom, 1));left:0;line-height:1;overflow:hidden;padding:0 calc(6px*var(--kvw-handle-zoom, 1)) 0 calc(2px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;right:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.kviewer-placed-chrome__grip-dots{color:#1677ff;flex:0 0 auto;height:calc(10px*var(--kvw-handle-zoom, 1));width:calc(10px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__grip-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kviewer-placed-chrome__handle{background:#fff;border:1px solid #1677ff;border-radius:2px;height:calc(8px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;touch-action:none;width:calc(8px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle:before{content:"";inset:calc(-8px*var(--kvw-handle-zoom, 1));position:absolute}.kviewer-placed-chrome__handle--n{left:50%;top:calc(-4px*var(--kvw-handle-zoom, 1));transform:translateX(-50%)}.kviewer-placed-chrome__handle--s{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:50%;transform:translateX(-50%)}.kviewer-placed-chrome__handle--e{right:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--w{left:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--ne{right:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--nw{left:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--se{bottom:calc(-4px*var(--kvw-handle-zoom, 1));right:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--sw{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:calc(-4px*var(--kvw-handle-zoom, 1))}
+</style>

package/dist/runtime/components/form-fields/PlacedFieldChrome.vue.d.ts

@@ -0,0 +1,16 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+    selected: boolean;
+    /** CSS pixels per PDF unit for the current page. */
+    scale: number;
+    /** PDF-space page height (kept for parity; unused here). */
+    pageHeight: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;