kviewer 0.3.2 → 0.3.4

package/dist/runtime/components/Viewer.vue

@@ -193,7 +193,8 @@ import {
   triggerRef,
   onMounted,
   onBeforeUnmount,
-  useSlots
+  useSlots,
+  provide
 } from "vue";
 import { useRuntimeConfig } from "#imports";
 import ViewerBar from "./ViewerBar.vue";
@@ -214,6 +215,7 @@ import {
 } from "../annotation/pdf-import/decode";
 import { getTimestampString } from "../annotation/engine/utils";
 import { downloadPdfBytes } from "../annotation/pdf-export/download";
+import { printPdfBytes } from "../annotation/pdf-export/print";
 import { exportAnnotationsToPdf } from "../annotation/pdf-export/export";
 import { createPageVirtualization } from "../composables/usePageVirtualization";
 import { createPageProxyCache } from "../composables/usePageProxyCache";
@@ -225,6 +227,7 @@ import { isIPad } from "../annotation/engine/input-device";
 import { useInertiaPanzoom } from "../composables/useInertiaPanzoom";
 import { createScriptingManager } from "../composables/useScriptingManager";
 import { createScriptingBridge } from "../composables/useScriptingBridge";
+import { SELECTION_ITEMS_KEY } from "../selection-items";
 import { provideKviewerI18n } from "../composables/useKviewerI18n";
 import { KVIEWER_LOCALES } from "../i18n/messages";
 const props = defineProps({
@@ -247,10 +250,12 @@ const props = defineProps({
   fieldDefaults: { type: Object, required: false, default: void 0 },
   scripting: { type: Boolean, required: false, default: false },
   menuItems: { type: Array, required: false, default: void 0 },
+  selectionItems: { type: Array, required: false, default: void 0 },
   tools: { type: Array, required: false, default: void 0 },
   locale: { type: null, required: false, default: void 0 },
   messages: { type: Object, required: false, default: void 0 }
 });
+provide(SELECTION_ITEMS_KEY, computed(() => props.selectionItems));
 const slots = useSlots();
 const toolSlotNames = computed(
   () => Object.keys(slots).filter((name) => name.startsWith("tool-"))
@@ -260,7 +265,7 @@ const fieldPlacedCallbacks = /* @__PURE__ */ new Set();
 const signedStatusCallbacks = /* @__PURE__ */ new Set();
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
-const { state: viewerState, setScrollToPageFn, setDownloadPdfFn, setApplyScaleFn } = provideViewerState();
+const { state: viewerState, setScrollToPageFn, setDownloadPdfFn, setPrintPdfFn, setApplyScaleFn } = provideViewerState();
 watchEffect(() => {
   viewerState.readonly.value = props.readonly ?? false;
 });
@@ -315,6 +320,25 @@ watch(
   },
   { immediate: true }
 );
+watch(
+  () => formFieldsState.selectedPlacedFieldId.value,
+  (id) => {
+    if (!id) return;
+    viewerState.painter.value?.clearSelection();
+    viewerState.selectedAnnotation.value = null;
+    viewerState.selectedAnnotations.value = [];
+    viewerState.selectionRect.value = null;
+  }
+);
+watch(
+  [
+    () => viewerState.selectedAnnotation.value,
+    () => viewerState.selectedAnnotations.value
+  ],
+  ([single, multi]) => {
+    if (single || multi.length > 0) formFieldsState.selectPlacedField(null);
+  }
+);
 const signatureStatus = computed(() => formFieldsState.getSignatureFieldStatus());
 const signatureStatusKey = (fields) => fields.map((s) => `${s.id}|${s.fieldName}|${s.signed ? 1 : 0}`).join(";");
 watch(signatureStatus, (next, prev) => {
@@ -806,6 +830,18 @@ async function exportPdf(options = {}) {
   }
   return bytes;
 }
+async function printPdf(options = {}) {
+  if (scriptingManager?.isReady()) {
+    await scriptingManager.dispatchWillPrint().catch(() => {
+    });
+  }
+  const bytes = await exportPdf({ ...options, download: false });
+  await printPdfBytes(bytes);
+  if (scriptingManager?.isReady()) {
+    scriptingManager.dispatchDidPrint().catch(() => {
+    });
+  }
+}
 async function importAnnotations(annotations, options) {
   const mode = options?.mode ?? "replace";
   const normalized = normalizeImportedAnnotations(
@@ -1025,6 +1061,9 @@ onMounted(() => {
   setDownloadPdfFn(async () => {
     await exportPdf({ download: true });
   });
+  setPrintPdfFn(async () => {
+    await printPdf();
+  });
   loadDocument();
   window.addEventListener("keydown", onGlobalKeydown);
 });
@@ -1094,6 +1133,10 @@ defineExpose({
   getAnnotations: () => painter?.getData() ?? [],
   importAnnotations,
   exportPdf,
+  /** Export the document (same options as `exportPdf`, minus `download`)
+   *  and open the browser's print dialog on the resulting vector PDF —
+   *  full print quality, unlike printing the screen canvases. */
+  printPdf,
   getKonvaCanvasState,
   getFormFieldValues: () => formFieldsState.getAllFieldValues(),
   setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value),

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

@@ -3,6 +3,7 @@ import type { AddFormFieldPayload, FormFieldDefinition, IAnnotationStore, Placed
 import { type ExportPdfOptions } from '../annotation/pdf-export/export.js';
 import type { ViewerMenuItem } from '../menu-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
+import { type ViewerSelectionItem } from '../selection-items.js';
 import { type KviewerMessageOverrides } from '../composables/useKviewerI18n.js';
 import { type KviewerLocale } from '../i18n/messages.js';
 type __VLS_Props = {
@@ -63,6 +64,11 @@ type __VLS_Props = {
      *  toggles or actions without replacing the entire header. Ignored
      *  when the host supplies a custom `#header` slot. */
     menuItems?: ViewerMenuItem[];
+    /** Custom controls appended to the floating selection popover — shown
+     *  when an annotation or a placed form field (e.g. a signature field)
+     *  is selected. Buttons and selects; every callback receives the
+     *  current selection. See {@link ViewerSelectionItem}. */
+    selectionItems?: ViewerSelectionItem[];
     /** Configures which toolbar tools render and in what order. Entries are
      *  built-in tool IDs (strings) or `{ type: 'slot', ... }` objects that
      *  inject a custom button via a `#tool-<name>` slot. When omitted, the
@@ -78,6 +84,11 @@ type __VLS_Props = {
     messages?: KviewerMessageOverrides;
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
+/** Print via the real PDF instead of the on-screen canvases: export the
+ *  document (annotations + form values baked in) and hand the vector bytes
+ *  to the browser's native PDF print pipeline. Screen canvases are sized
+ *  for the monitor and would come out blurry on paper. */
+declare function printPdf(options?: ExportPdfOptions): Promise<void>;
 type ImportMode = 'replace' | 'merge';
 declare function importAnnotations(annotations: IAnnotationStore[], options?: {
     mode?: ImportMode;
@@ -100,6 +111,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getAnnotations: () => IAnnotationStore[];
     importAnnotations: typeof importAnnotations;
     exportPdf: typeof exportPdf;
+    /** Export the document (same options as `exportPdf`, minus `download`)
+     *  and open the browser's print dialog on the resulting vector PDF —
+     *  full print quality, unlike printing the screen canvases. */
+    printPdf: typeof printPdf;
     getKonvaCanvasState: typeof getKonvaCanvasState;
     getFormFieldValues: () => import("../annotation/engine/types.js").FormFieldValue[];
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
@@ -180,6 +195,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     clickToSign: boolean;
     readonly: boolean;
     active: boolean;
+    formEditMode: boolean;
     locale: KviewerLocale;
     menuItems: ViewerMenuItem[];
     tools: ViewerToolEntry[];
@@ -188,11 +204,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
     shapeDetection: boolean;
-    formEditMode: boolean;
     roleColors: Record<string, string>;
     activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     messages: KviewerMessageOverrides;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -8,15 +8,15 @@ type __VLS_Props = {
      *  omitted, the default toolbar is rendered. See {@link ViewerToolEntry}. */
     tools?: ViewerToolEntry[];
 };
-declare var __VLS_109: string, __VLS_110: {
+declare var __VLS_104: string, __VLS_105: {
     state: import("../composables/useViewerState.js").ViewerState;
-}, __VLS_154: string, __VLS_155: {
+}, __VLS_149: string, __VLS_150: {
     state: import("../composables/useViewerState.js").ViewerState;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_109>]?: (props: typeof __VLS_110) => any;
+    [K in NonNullable<typeof __VLS_104>]?: (props: typeof __VLS_105) => any;
 } & {
-    [K in NonNullable<typeof __VLS_154>]?: (props: typeof __VLS_155) => any;
+    [K in NonNullable<typeof __VLS_149>]?: (props: typeof __VLS_150) => any;
 };
 declare const __VLS_base: 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: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ViewerBar.vue

@@ -11,11 +11,12 @@
 
         <ZoomControls />
 
+        <!-- No MarqueeTool button: hand mode covers mouse rubber-band
+             selection; `marquee` stays available via the `tools` prop. -->
         <template v-if="!state.readonly.value">
           <USeparator orientation="vertical" class="h-5" :ui="{ border: 'border-accented' }" />
 
           <HandTool />
-          <MarqueeTool />
         </template>
 
         <div class="ml-auto flex items-center gap-2">

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

@@ -8,15 +8,15 @@ type __VLS_Props = {
      *  omitted, the default toolbar is rendered. See {@link ViewerToolEntry}. */
     tools?: ViewerToolEntry[];
 };
-declare var __VLS_109: string, __VLS_110: {
+declare var __VLS_104: string, __VLS_105: {
     state: import("../composables/useViewerState.js").ViewerState;
-}, __VLS_154: string, __VLS_155: {
+}, __VLS_149: string, __VLS_150: {
     state: import("../composables/useViewerState.js").ViewerState;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_109>]?: (props: typeof __VLS_110) => any;
+    [K in NonNullable<typeof __VLS_104>]?: (props: typeof __VLS_105) => any;
 } & {
-    [K in NonNullable<typeof __VLS_154>]?: (props: typeof __VLS_155) => any;
+    [K in NonNullable<typeof __VLS_149>]?: (props: typeof __VLS_150) => any;
 };
 declare const __VLS_base: 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: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -2,6 +2,7 @@ import { type ComponentPublicInstance } from 'vue';
 import type { ViewMode } from '../composables/useViewerState.js';
 import type { FormFieldDefinition, PlacedFieldDefaults, SignatureFieldStatus, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import type { ViewerMenuItem } from '../menu-items.js';
+import type { ViewerSelectionItem } from '../selection-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
@@ -63,6 +64,8 @@ type __VLS_Props = {
     scripting?: boolean;
     /** Forwarded to every Viewer instance — see KViewer's `menuItems`. */
     menuItems?: ViewerMenuItem[];
+    /** Forwarded to every Viewer instance — see KViewer's `selectionItems`. */
+    selectionItems?: ViewerSelectionItem[];
     /** Forwarded to every Viewer instance — see KViewer's `tools`. */
     tools?: ViewerToolEntry[];
     /** Forwarded to every Viewer instance — see KViewer's `clickToSign`. */
@@ -436,6 +439,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     defaultActiveTab: string;
     minTabs: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ViewerTabs.vue

@@ -61,6 +61,7 @@
           :shape-detection="activeTab.shapeDetection ?? shapeDetection"
           :scripting="activeTab.scripting ?? scripting"
           :menu-items="menuItems"
+          :selection-items="selectionItems"
           :tools="tools"
           :role-colors="roleColors"
           :active-role-id="activeRoleId"
@@ -112,6 +113,7 @@ const props = defineProps({
   activeRoleId: { type: [String, null], required: false, default: void 0 },
   scripting: { type: Boolean, required: false, default: false },
   menuItems: { type: Array, required: false, default: void 0 },
+  selectionItems: { type: Array, required: false, default: void 0 },
   tools: { type: Array, required: false, default: void 0 },
   clickToSign: { type: Boolean, required: false, default: false },
   editablePlacedFields: { type: Boolean, required: false, default: false },

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

@@ -2,6 +2,7 @@ import { type ComponentPublicInstance } from 'vue';
 import type { ViewMode } from '../composables/useViewerState.js';
 import type { FormFieldDefinition, PlacedFieldDefaults, SignatureFieldStatus, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import type { ViewerMenuItem } from '../menu-items.js';
+import type { ViewerSelectionItem } from '../selection-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
@@ -63,6 +64,8 @@ type __VLS_Props = {
     scripting?: boolean;
     /** Forwarded to every Viewer instance — see KViewer's `menuItems`. */
     menuItems?: ViewerMenuItem[];
+    /** Forwarded to every Viewer instance — see KViewer's `selectionItems`. */
+    selectionItems?: ViewerSelectionItem[];
     /** Forwarded to every Viewer instance — see KViewer's `tools`. */
     tools?: ViewerToolEntry[];
     /** Forwarded to every Viewer instance — see KViewer's `clickToSign`. */
@@ -436,6 +439,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     defaultActiveTab: string;
     minTabs: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -6,7 +6,10 @@
   'kviewer-form-field--placed': isPlaced,
   'kviewer-form-field--selected': props.selected
 }"
-    :style="[positionStyle, { '--kvw-field-color': chromeColor }]"
+    :style="[positionStyle, {
+  '--kvw-field-color': chromeColor,
+  '--kvw-handle-zoom': handleZoom
+}]"
     :data-element-id="props.field.id"
   >
     <div
@@ -29,6 +32,11 @@
       :page-height="props.pageTransform.height"
       @select="emit('select')"
     />
+
+    <PlacedFieldToolbar
+      v-if="showChrome && props.selected && !state.readonly.value"
+      :field="props.field"
+    />
   </div>
 </template>
 
@@ -44,6 +52,7 @@ import FormDropdown from "./FormDropdown.vue";
 import FormSignatureField from "./FormSignatureField.vue";
 import FormButton from "./FormButton.vue";
 import PlacedFieldChrome from "./PlacedFieldChrome.vue";
+import PlacedFieldToolbar from "./PlacedFieldToolbar.vue";
 const props = defineProps({
   field: { type: Object, required: true },
   pageTransform: { type: Object, required: true },
@@ -58,6 +67,10 @@ const isFormEditMode = computed(() => state.formEditMode.value);
 const showChrome = computed(
   () => isFormEditMode.value || formFields.editablePlacedFields.value && isPlaced.value
 );
+const handleZoom = computed(() => {
+  const totalZoom = (props.scale || 1) * (state.visualZoom.value || 1);
+  return (1 / totalZoom).toFixed(3);
+});
 const chromeColor = computed(() => {
   const id = props.field.roleId;
   if (!id) return "#1677ff";
@@ -77,5 +90,5 @@ 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 color-mix(in srgb,var(--kvw-field-color,#1677ff) 45%,transparent);outline-offset:0}.kviewer-form-field--editable.kviewer-form-field--placed{outline-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 75%,transparent)}.kviewer-form-field--editable.kviewer-form-field--selected{outline:none}
+.kviewer-form-field__body{height:100%;width:100%}.kviewer-form-field__body--locked{pointer-events:none}
 </style>

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

@@ -6,10 +6,16 @@
     ref="rootEl"
     class="kviewer-placed-chrome"
     :class="{ 'kviewer-placed-chrome--selected': selected }"
-    :style="{ '--kvw-handle-zoom': handleZoom }"
     @pointerdown.stop="onChromePointerDown"
     @click.stop
   >
+    <div
+      class="kviewer-placed-chrome__outline"
+      :class="{
+  'kviewer-placed-chrome__outline--placed': field.origin === 'placed',
+  'kviewer-placed-chrome__outline--selected': selected
+}"
+    />
     <div
       v-if="selected"
       class="kviewer-placed-chrome__grip"
@@ -33,15 +39,9 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { 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 },
@@ -127,5 +127,5 @@ function onHandlePointerDown(e, name) {
 </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 var(--kvw-field-color,#1677ff);outline-offset:0}.kviewer-placed-chrome__grip{align-items:center;background:color-mix(in srgb,var(--kvw-field-color,#1677ff) 15%,transparent);border:1px solid color-mix(in srgb,var(--kvw-field-color,#1677ff) 40%,transparent);border-radius:calc(3px*var(--kvw-handle-zoom, 1));bottom:calc(100% + 3px*var(--kvw-handle-zoom, 1));color:var(--kvw-field-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:var(--kvw-field-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 var(--kvw-field-color,#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))}
+.kviewer-placed-chrome{cursor:move;inset:0;pointer-events:auto;position:absolute;touch-action:none}.kviewer-placed-chrome__outline{border:1px dashed color-mix(in srgb,var(--kvw-field-color,#1677ff) 45%,transparent);box-sizing:border-box;height:calc(100%/var(--kvw-handle-zoom, 1));left:0;pointer-events:none;position:absolute;top:0;transform:scale(var(--kvw-handle-zoom,1));transform-origin:0 0;width:calc(100%/var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__outline--placed{border-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 75%,transparent)}.kviewer-placed-chrome__outline--selected{border:1.5px dashed var(--kvw-field-color,#1677ff)}.kviewer-placed-chrome__grip{align-items:center;background:color-mix(in srgb,var(--kvw-field-color,#1677ff) 15%,transparent);border:1px solid color-mix(in srgb,var(--kvw-field-color,#1677ff) 40%,transparent);border-radius:4px;bottom:calc(100% + 4px*var(--kvw-handle-zoom, 1));box-sizing:border-box;color:var(--kvw-field-color,#1677ff);cursor:move;display:flex;font-size:12px;gap:4px;height:22px;left:0;line-height:1;overflow:hidden;padding:0 8px 0 3px;pointer-events:auto;position:absolute;touch-action:none;transform:scale(var(--kvw-handle-zoom,1));transform-origin:0 100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(100%/var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__grip-dots{color:var(--kvw-field-color,#1677ff);flex:0 0 auto;height:13px;width:13px}.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 var(--kvw-field-color,#1677ff);border-radius:2px;height:8px;pointer-events:auto;position:absolute;touch-action:none;transform:scale(var(--kvw-handle-zoom,1));width:8px}.kviewer-placed-chrome__handle:before{content:"";inset:-8px;position:absolute}.kviewer-placed-chrome__handle--n{left:50%;top:-4px;transform:translateX(-50%) scale(var(--kvw-handle-zoom,1))}.kviewer-placed-chrome__handle--s{bottom:-4px;left:50%;transform:translateX(-50%) scale(var(--kvw-handle-zoom,1))}.kviewer-placed-chrome__handle--e{right:-4px;top:50%;transform:translateY(-50%) scale(var(--kvw-handle-zoom,1))}.kviewer-placed-chrome__handle--w{left:-4px;top:50%;transform:translateY(-50%) scale(var(--kvw-handle-zoom,1))}.kviewer-placed-chrome__handle--ne{right:-4px;top:-4px}.kviewer-placed-chrome__handle--nw{left:-4px;top:-4px}.kviewer-placed-chrome__handle--se{bottom:-4px;right:-4px}.kviewer-placed-chrome__handle--sw{bottom:-4px;left:-4px}
 </style>

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

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+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;
+export default _default;

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

@@ -0,0 +1,51 @@
+<template>
+  <!-- Same pill as AnnotationToolbar, but anchored in the page DOM below
+       the selected field so it follows pan/zoom for free (the Konva
+       selection popover is viewport-fixed because the stage has no DOM
+       anchor to attach to). Stops pointer events so a click here never
+       reaches page-level deselect handlers. -->
+  <div
+    class="kviewer-placed-toolbar"
+    @pointerdown.stop
+    @click.stop
+  >
+    <div class="flex items-center gap-0.5 bg-elevated rounded-lg shadow-lg border border-default p-1">
+      <SelectionToolbarItems :items="customItems" :ctx="selectionCtx" />
+
+      <button
+        class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
+        :title="t('deleteField')"
+        data-testid="placed-field-delete"
+        @click="onDelete"
+      >
+        <UIcon name="i-lucide-trash-2" class="text-sm text-error" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from "vue";
+import { useFormFields } from "../../composables/useFormFields";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
+import { SELECTION_ITEMS_KEY } from "../../selection-items";
+import SelectionToolbarItems from "../SelectionToolbarItems.vue";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const formFields = useFormFields();
+const { t } = useKviewerI18n();
+const customItems = inject(SELECTION_ITEMS_KEY, void 0);
+const selectionCtx = computed(() => ({
+  kind: "field",
+  annotations: [],
+  field: props.field
+}));
+function onDelete() {
+  formFields.removePlacedField(props.field.id);
+}
+</script>
+
+<style>
+.kviewer-placed-toolbar{left:50%;pointer-events:auto;position:absolute;top:calc(100% + 8px*var(--kvw-handle-zoom, 1));transform:translateX(-50%) scale(var(--kvw-handle-zoom,1));transform-origin:50% 0;width:-moz-max-content;width:max-content;z-index:1}
+</style>

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

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+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;
+export default _default;

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

@@ -13,6 +13,16 @@
           data-testid="viewer-download"
           @click="onDownload"
         />
+        <UButton
+          icon="i-lucide-printer"
+          :label="t('print')"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          class="w-full justify-start"
+          data-testid="viewer-print"
+          @click="onPrint"
+        />
         <UButton
           :icon="state.shapeDetection.value ? 'i-lucide-square-check-big' : 'i-lucide-square-dashed'"
           :label="state.shapeDetection.value ? t('disableFormFieldDetection') : t('detectFormFields')"
@@ -76,4 +86,11 @@ async function onDownload() {
     console.error("Failed to export PDF from menu action", error);
   }
 }
+async function onPrint() {
+  try {
+    await state.printPdf();
+  } catch (error) {
+    console.error("Failed to print PDF from menu action", error);
+  }
+}
 </script>

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

@@ -44,6 +44,11 @@ export interface ScriptingManager {
      *  PageOpen action can fire (the manager's `updatefromsandbox` /
      *  pagerendered handling in pdf_viewer.mjs). */
     notifyPageRendered: (pageNumber: number) => void;
+    /** Run the document's `WillPrint` action and wait for the sandbox to
+     *  finish it (scripts may adjust field values before printing). */
+    dispatchWillPrint: () => Promise<void>;
+    /** Fire the document's `DidPrint` action. */
+    dispatchDidPrint: () => Promise<void>;
     /** Bind a document to the sandbox. Safe to call repeatedly — pass
      *  null to detach (e.g. before swapping documents). */
     setDocument: (pdfDoc: PDFDocumentProxy | null) => Promise<void>;

package/dist/runtime/composables/useScriptingManager.js

@@ -104,6 +104,12 @@ export async function createScriptingManager(deps) {
     notifyPageRendered(pageNumber) {
       eventBus.dispatch("pagerendered", { source: window, pageNumber });
     },
+    async dispatchWillPrint() {
+      await manager.dispatchWillPrint();
+    },
+    async dispatchDidPrint() {
+      await manager.dispatchDidPrint();
+    },
     async setDocument(pdfDoc) {
       await manager.setDocument(pdfDoc);
     },

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

@@ -54,6 +54,7 @@ export interface ViewerState {
     setStylusMode: (enabled: boolean) => void;
     scrollToPage: (pageNumber: number) => void;
     downloadPdf: () => Promise<void>;
+    printPdf: () => Promise<void>;
     history: AnnotationHistory;
     readonly: Ref<boolean>;
     shapeDetection: Ref<boolean>;
@@ -66,6 +67,7 @@ export interface ViewerStateProvider {
     state: ViewerState;
     setScrollToPageFn: (fn: (pageNumber: number) => void) => void;
     setDownloadPdfFn: (fn: () => Promise<void>) => void;
+    setPrintPdfFn: (fn: () => Promise<void>) => void;
     /** Register how custom-scale changes are applied. The Viewer registers a
      *  position-preserving commit (zoom about the viewport centre); without
      *  one, setScale falls back to a plain scale write. */

package/dist/runtime/composables/useViewerState.js

@@ -152,12 +152,16 @@ export function provideViewerState() {
   }
   let _scrollToPageFn = null;
   let _downloadPdfFn = null;
+  let _printPdfFn = null;
   function scrollToPage(pageNumber) {
     _scrollToPageFn?.(pageNumber);
   }
   async function downloadPdf() {
     await _downloadPdfFn?.();
   }
+  async function printPdf() {
+    await _printPdfFn?.();
+  }
   const history = createAnnotationHistory(annotations, painter);
   const state = {
     scale,
@@ -200,6 +204,7 @@ export function provideViewerState() {
     setStylusMode,
     scrollToPage,
     downloadPdf,
+    printPdf,
     history,
     readonly,
     shapeDetection: shapeDetectionEnabled,
@@ -217,6 +222,9 @@ export function provideViewerState() {
     setDownloadPdfFn(fn) {
       _downloadPdfFn = fn;
     },
+    setPrintPdfFn(fn) {
+      _printPdfFn = fn;
+    },
     setApplyScaleFn(fn) {
       _applyScaleFn = fn;
     }

package/dist/runtime/embed/bridge-client.d.ts

@@ -44,6 +44,10 @@ export declare class KViewerEmbedClient {
         skipped: number;
     }>;
     exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
+    /** Open the viewer's print dialog on the exported (vector) PDF —
+     *  annotations and form values included, at full print quality.
+     *  Resolves once the dialog is up, not when printing finishes. */
+    printPdf(options?: Omit<ExportPdfOptions, 'download' | 'fileName'>): Promise<void>;
     getFormFieldValues(): Promise<FormFieldValue[]>;
     setFormFieldValue(fieldName: string, value: string | boolean | string[]): Promise<void>;
     addFormField(payload: AddFormFieldPayload): Promise<FormFieldDefinition>;

package/dist/runtime/embed/bridge-client.js

@@ -60,6 +60,12 @@ export class KViewerEmbedClient {
   exportPdf(options) {
     return this.call("exportPdf", options);
   }
+  /** Open the viewer's print dialog on the exported (vector) PDF —
+   *  annotations and form values included, at full print quality.
+   *  Resolves once the dialog is up, not when printing finishes. */
+  printPdf(options) {
+    return this.call("printPdf", options);
+  }
   getFormFieldValues() {
     return this.call("getFormFieldValues");
   }

package/dist/runtime/embed/bridge-host.d.ts

@@ -17,6 +17,7 @@ export interface KViewerApi {
         skipped: number;
     }>;
     exportPdf: (options?: ExportPdfOptions) => Promise<Uint8Array>;
+    printPdf: (options?: ExportPdfOptions) => Promise<void>;
     getFormFieldValues: () => FormFieldValue[];
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
     addFormField: (payload: AddFormFieldPayload) => FormFieldDefinition;
@@ -39,6 +40,14 @@ export interface KViewerApi {
     getViewedPages: () => number[];
     resetViewedPages: () => void;
 }
+/**
+ * What the bridge actually requires of a host. Every capability is
+ * optional so an embedding application can hand over an adapter exposing
+ * only the parts it uses — a real `<KViewer>` ref satisfies this too.
+ * Unimplemented methods surface as an `UNSUPPORTED_METHOD_ERROR_NAME`
+ * response instead of breaking initialization.
+ */
+export type KViewerHostApi = Partial<KViewerApi>;
 export interface KViewerEmbedBridgeOptions {
     /**
      * Origin of the parent window that hosts this iframe. Used both as
@@ -67,5 +76,5 @@ interface BridgeHandle {
     /** Manually tear down listeners. Called automatically on scope dispose. */
     unmount: () => void;
 }
-export declare function useKViewerEmbedBridge(viewerRef: Ref<KViewerApi | null | undefined>, options: KViewerEmbedBridgeOptions): BridgeHandle;
+export declare function useKViewerEmbedBridge(viewerRef: Ref<KViewerHostApi | null | undefined>, options: KViewerEmbedBridgeOptions): BridgeHandle;
 export type { MethodName };