kviewer 0.0.1

package/dist/runtime/components/AnnotationToolbar.vue

@@ -0,0 +1,125 @@
+<template>
+  <div
+    v-if="hasSelection && state.selectionRect.value"
+    class="fixed z-50 pointer-events-auto"
+    :style="toolbarStyle"
+  >
+    <div class="flex items-center gap-0.5 bg-elevated rounded-lg shadow-lg border border-default p-1">
+      <!-- Color picker (single selection only) -->
+      <UPopover v-if="hasColorEdit && !isMultiSelect">
+        <button
+          class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
+          title="Color"
+        >
+          <UIcon name="i-lucide-palette" class="text-sm text-muted" />
+        </button>
+        <template #content>
+          <div class="p-3">
+            <div class="grid grid-cols-5 gap-1.5">
+              <button
+                v-for="color in colors"
+                :key="color"
+                class="w-6 h-6 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="onColorChange(color)"
+              />
+            </div>
+          </div>
+        </template>
+      </UPopover>
+
+      <!-- Font size picker (free text only) -->
+      <USelect
+        v-if="isFreeText"
+        :model-value="currentFontSize"
+        :items="fontSizeItems"
+        class="w-20"
+        size="sm"
+        @update:model-value="onFontSizeChange"
+      />
+
+      <!-- Selection count badge for multi-select -->
+      <span v-if="isMultiSelect" class="text-xs text-muted px-1.5">
+        {{ state.selectedAnnotations.value.length }} selected
+      </span>
+
+      <!-- Delete -->
+      <button
+        class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
+        title="Delete"
+        @click="onDelete"
+      >
+        <UIcon name="i-lucide-trash-2" class="text-sm text-error" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useViewerState } from "../composables/useViewerState";
+import { defaultOptions, annotationDefinitions } from "../annotation/engine/config";
+import { AnnotationType } from "../annotation/engine/types";
+const state = useViewerState();
+const colors = defaultOptions.colors;
+const isMultiSelect = computed(() => state.selectedAnnotations.value.length > 1);
+const hasSelection = computed(
+  () => state.selectedAnnotation.value !== null || state.selectedAnnotations.value.length > 0
+);
+const selectedDef = computed(() => {
+  const ann = state.selectedAnnotation.value;
+  if (!ann) return null;
+  return annotationDefinitions.find((d) => d.type === ann.type);
+});
+const hasColorEdit = computed(() => {
+  return selectedDef.value?.styleEditable?.color ?? false;
+});
+const currentColor = computed(() => {
+  return state.selectedAnnotation.value?.color ?? selectedDef.value?.style?.color ?? null;
+});
+const isFreeText = computed(
+  () => !isMultiSelect.value && state.selectedAnnotation.value?.type === AnnotationType.FREETEXT
+);
+const currentFontSize = computed(() => {
+  const ann = state.selectedAnnotation.value;
+  return ann?.fontSize ? String(ann.fontSize) : String(defaultOptions.setting.FONT_SIZE);
+});
+const fontSizeItems = defaultOptions.fontSize.map((s) => ({
+  label: `${s}px`,
+  value: String(s)
+}));
+const toolbarStyle = computed(() => {
+  const rect = state.selectionRect.value;
+  if (!rect) return { display: "none" };
+  return {
+    left: `${rect.x + rect.width / 2}px`,
+    top: `${rect.y + rect.height + 8}px`,
+    transform: "translateX(-50%)"
+  };
+});
+function onColorChange(color) {
+  const ann = state.selectedAnnotation.value;
+  if (!ann || !state.painter.value) return;
+  state.painter.value.updateAnnotationStyle(ann, { color });
+  ann.color = color;
+  state.selectedAnnotation.value = { ...ann };
+}
+function onFontSizeChange(value) {
+  const ann = state.selectedAnnotation.value;
+  if (!ann || !state.painter.value) return;
+  const fontSize = Number(value);
+  state.painter.value.updateAnnotationStyle(ann, { fontSize });
+  ann.fontSize = fontSize;
+  state.selectedAnnotation.value = { ...ann };
+}
+function onDelete() {
+  if (isMultiSelect.value) {
+    const ids = state.selectedAnnotations.value.map((a) => a.id);
+    ids.forEach((id) => state.deleteAnnotation(id));
+  } else {
+    const ann = state.selectedAnnotation.value;
+    if (ann) state.deleteAnnotation(ann.id);
+  }
+}
+</script>

package/dist/runtime/components/AnnotationToolbar.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/FloatingPageIndicator.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    scrollContainer: HTMLElement | null;
+};
+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/FloatingPageIndicator.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    class="absolute bottom-0 left-0 right-0 z-10 flex justify-center pb-4"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <!-- Invisible hover zone at the bottom of the viewer -->
+    <div class="absolute inset-x-0 bottom-0 h-16" />
+
+    <div
+      class="relative z-10 flex items-center gap-1 bg-elevated rounded-full px-1 py-0.5 shadow-md
+             transition-opacity duration-300"
+      :class="visible ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+    >
+      <UButton
+        icon="i-lucide-chevron-left"
+        variant="ghost"
+        color="neutral"
+        size="xs"
+        :disabled="state.currentPage.value <= 1"
+        @click="goToPreviousPage"
+      />
+      <span class="text-sm text-muted tabular-nums px-1 select-none">
+        {{ state.currentPage.value }} / {{ state.totalPages.value }}
+      </span>
+      <UButton
+        icon="i-lucide-chevron-right"
+        variant="ghost"
+        color="neutral"
+        size="xs"
+        :disabled="state.currentPage.value >= state.totalPages.value"
+        @click="goToNextPage"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useViewerState } from "../composables/useViewerState";
+const props = defineProps({
+  scrollContainer: { type: null, required: true }
+});
+const state = useViewerState();
+const visible = ref(true);
+const hovered = ref(false);
+let hideTimer = null;
+function scheduleHide() {
+  if (hideTimer) clearTimeout(hideTimer);
+  hideTimer = setTimeout(() => {
+    if (!hovered.value) {
+      visible.value = false;
+    }
+  }, 3e3);
+}
+function onScroll() {
+  visible.value = true;
+  scheduleHide();
+}
+function onMouseEnter() {
+  hovered.value = true;
+  visible.value = true;
+  if (hideTimer) clearTimeout(hideTimer);
+}
+function onMouseLeave() {
+  hovered.value = false;
+  scheduleHide();
+}
+function goToPreviousPage() {
+  const prev = state.currentPage.value - 1;
+  if (prev >= 1) {
+    state.scrollToPage(prev);
+  }
+}
+function goToNextPage() {
+  const next = state.currentPage.value + 1;
+  if (next <= state.totalPages.value) {
+    state.scrollToPage(next);
+  }
+}
+onMounted(() => {
+  scheduleHide();
+  if (props.scrollContainer) {
+    props.scrollContainer.addEventListener("scroll", onScroll, { passive: true });
+  }
+});
+onBeforeUnmount(() => {
+  if (hideTimer) clearTimeout(hideTimer);
+  if (props.scrollContainer) {
+    props.scrollContainer.removeEventListener("scroll", onScroll);
+  }
+});
+</script>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    scrollContainer: HTMLElement | null;
+};
+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/FormFieldLayer.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    pageNumber: number;
+    scale: number;
+    pageWidth: number;
+    pageHeight: number;
+    pointerEvents: string;
+    zIndex: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FormFieldLayer.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    v-if="fields.length > 0"
+    class="kviewer-form-layer"
+    :style="{
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: props.pageWidth + 'px',
+  height: props.pageHeight + 'px',
+  transform: `scale(${props.scale})`,
+  transformOrigin: '0 0',
+  zIndex: props.zIndex,
+  pointerEvents: props.pointerEvents
+}"
+  >
+    <FormFieldWrapper
+      v-for="field in fields"
+      :key="field.id"
+      :field="field"
+      :page-height="props.pageHeight"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useFormFields } from "../composables/useFormFields";
+import FormFieldWrapper from "./form-fields/FormFieldWrapper.vue";
+const props = defineProps({
+  pageNumber: { type: Number, required: true },
+  scale: { type: Number, required: true },
+  pageWidth: { type: Number, required: true },
+  pageHeight: { type: Number, required: true },
+  pointerEvents: { type: String, required: true },
+  zIndex: { type: Number, required: true }
+});
+const formFields = useFormFields();
+const fields = computed(() => formFields.getFieldsForPage(props.pageNumber));
+</script>

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    pageNumber: number;
+    scale: number;
+    pageWidth: number;
+    pageHeight: number;
+    pointerEvents: string;
+    zIndex: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,9 @@
+import type { PageMeta } from '../composables/usePageVirtualization.js';
+type __VLS_Props = {
+    pageNumber: number;
+    pageMeta: PageMeta;
+    scale: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/PdfPage.vue

@@ -0,0 +1,199 @@
+<template>
+  <div
+    class="kviewer-page"
+    :style="{
+  position: 'relative',
+  width: cssWidth + 'px',
+  height: cssHeight + 'px',
+  '--scale-factor': String(props.scale),
+  '--user-unit': String(pageProxy?.userUnit || 1),
+  '--total-scale-factor': String(props.scale * (pageProxy?.userUnit || 1)),
+  '--scale-round-x': '1px',
+  '--scale-round-y': '1px'
+}"
+  >
+    <canvas
+      ref="canvasRef"
+      :style="{ display: 'block', width: cssWidth + 'px', height: cssHeight + 'px' }"
+    />
+    <div
+      ref="textLayerRef"
+      class="kviewer-text-layer textLayer"
+      :class="{ 'kviewer-text-layer--interactive': isSearchTextInteractive }"
+      :style="{
+  width: cssWidth + 'px',
+  height: cssHeight + 'px',
+  pointerEvents: isSearchTextInteractive ? 'auto' : 'none'
+}"
+    />
+    <FormFieldLayer
+      :page-number="props.pageNumber"
+      :scale="props.scale"
+      :page-width="baseWidth"
+      :page-height="baseHeight"
+      :pointer-events="formFieldPointerEvents"
+      :z-index="formFieldZIndex"
+    />
+    <div
+      ref="annotationRef"
+      class="kviewer-annotation-layer"
+      :style="{
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: cssWidth + 'px',
+  height: cssHeight + 'px',
+  zIndex: 3,
+  pointerEvents: annotationPointerEvents
+}"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, shallowRef, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { useViewerState } from "../composables/useViewerState";
+import { useViewerSearch } from "../composables/useViewerSearch";
+import { usePageProxyCache } from "../composables/usePageProxyCache";
+import { useFormFields } from "../composables/useFormFields";
+import { AnnotationType } from "../annotation/engine/types";
+import FormFieldLayer from "./FormFieldLayer.vue";
+const props = defineProps({
+  pageNumber: { type: Number, required: true },
+  pageMeta: { type: Object, required: true },
+  scale: { type: Number, required: true }
+});
+const canvasRef = ref(null);
+const textLayerRef = ref(null);
+const annotationRef = ref(null);
+const state = useViewerState();
+const search = useViewerSearch();
+const proxyCache = usePageProxyCache();
+const formFields = useFormFields();
+const pageProxy = shallowRef(null);
+let currentRenderTask = null;
+let textLayer = null;
+const baseWidth = props.pageMeta.width;
+const baseHeight = props.pageMeta.height;
+const cssWidth = computed(() => baseWidth * props.scale);
+const cssHeight = computed(() => baseHeight * props.scale);
+const isAnnotating = computed(() => {
+  const tool = state.activeTool.value;
+  return tool === "hand" || tool === "marquee" || tool === "eraser" || typeof tool === "number" && tool !== AnnotationType.NONE;
+});
+const isSearchTextInteractive = computed(() => search.isOpen.value && state.activeTool.value === "hand");
+const annotationPointerEvents = computed(() => isSearchTextInteractive.value ? "none" : isAnnotating.value ? "auto" : "none");
+const isUsingAnnotationTool = computed(() => {
+  const tool = state.activeTool.value;
+  return tool === "marquee" || tool === "eraser" || typeof tool === "number" && tool !== AnnotationType.NONE;
+});
+const formFieldPointerEvents = computed(() => isUsingAnnotationTool.value ? "none" : "auto");
+const formFieldZIndex = computed(() => isUsingAnnotationTool.value ? 2 : 4);
+onMounted(async () => {
+  pageProxy.value = await proxyCache.getPage(props.pageNumber);
+  await renderCanvas();
+  await renderTextLayer();
+  initKonva();
+  if (pageProxy.value) {
+    const rawAnnotations = await pageProxy.value.getAnnotations();
+    formFields.parsePageFields(props.pageNumber, rawAnnotations);
+  }
+});
+watch(
+  () => props.scale,
+  async () => {
+    if (!pageProxy.value) return;
+    await renderCanvas();
+    updateTextLayer();
+    if (state.painter.value) {
+      state.painter.value.destroyCanvasForPage(props.pageNumber);
+      initKonva();
+    }
+  }
+);
+async function renderCanvas() {
+  const canvas = canvasRef.value;
+  const proxy = pageProxy.value;
+  if (!canvas || !proxy) return;
+  if (currentRenderTask) {
+    currentRenderTask.cancel();
+    currentRenderTask = null;
+  }
+  const dpr = window.devicePixelRatio || 1;
+  const viewport = proxy.getViewport({
+    scale: props.scale * dpr
+  });
+  canvas.width = viewport.width;
+  canvas.height = viewport.height;
+  try {
+    currentRenderTask = proxy.render({
+      canvasContext: canvas.getContext("2d"),
+      viewport
+    });
+    await currentRenderTask.promise;
+  } catch (e) {
+    if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
+    throw e;
+  } finally {
+    currentRenderTask = null;
+  }
+}
+function initKonva() {
+  if (!annotationRef.value || !state.painter.value) return;
+  state.painter.value.initCanvasForPage(
+    props.pageNumber,
+    annotationRef.value,
+    baseWidth,
+    baseHeight,
+    props.scale
+  );
+}
+async function renderTextLayer() {
+  const container = textLayerRef.value;
+  const proxy = pageProxy.value;
+  if (!container || !proxy) return;
+  const viewport = proxy.getViewport({ scale: props.scale });
+  if (!textLayer) {
+    const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
+    textLayer = new pdfjs.TextLayer({
+      textContentSource: proxy.streamTextContent({
+        includeMarkedContent: true,
+        disableNormalization: true
+      }),
+      container,
+      viewport
+    });
+    await textLayer.render();
+    search.registerPageLayer(
+      props.pageNumber,
+      textLayer.textDivs,
+      textLayer.textContentItemsStr
+    );
+    return;
+  }
+  textLayer.update({ viewport });
+  search.updatePageLayer(
+    props.pageNumber,
+    textLayer.textDivs,
+    textLayer.textContentItemsStr
+  );
+}
+function updateTextLayer() {
+  const proxy = pageProxy.value;
+  if (!textLayer || !proxy) return;
+  const viewport = proxy.getViewport({ scale: props.scale });
+  textLayer.update({ viewport });
+  search.updatePageLayer(
+    props.pageNumber,
+    textLayer.textDivs,
+    textLayer.textContentItemsStr
+  );
+}
+onBeforeUnmount(() => {
+  currentRenderTask?.cancel();
+  textLayer?.cancel();
+  textLayer = null;
+  search.unregisterPageLayer(props.pageNumber);
+  state.painter.value?.destroyCanvasForPage(props.pageNumber);
+});
+</script>

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

@@ -0,0 +1,9 @@
+import type { PageMeta } from '../composables/usePageVirtualization.js';
+type __VLS_Props = {
+    pageNumber: number;
+    pageMeta: PageMeta;
+    scale: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { IAnnotationType } from '../annotation/engine/types.js';
+type __VLS_Props = {
+    tool: IAnnotationType | undefined;
+    active: boolean;
+    indicatorColor?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ToolButton.vue

@@ -0,0 +1,26 @@
+<template>
+  <button
+    v-if="tool"
+    class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors cursor-pointer"
+    :class="active ? 'bg-default text-highlighted' : 'text-muted hover:bg-default/50 hover:text-highlighted'"
+    :title="tool.name"
+    @click="$emit('click')"
+  >
+    <UIcon :name="tool.icon" class="text-lg" />
+    <!-- Color indicator line under icon -->
+    <span
+      v-if="indicatorColor"
+      class="absolute bottom-0.5 left-1.5 right-1.5 h-0.5 rounded-full"
+      :style="{ backgroundColor: indicatorColor }"
+    />
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  tool: { type: null, required: true },
+  active: { type: Boolean, required: true },
+  indicatorColor: { type: String, required: false }
+});
+defineEmits(["click"]);
+</script>

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

@@ -0,0 +1,13 @@
+import type { IAnnotationType } from '../annotation/engine/types.js';
+type __VLS_Props = {
+    tool: IAnnotationType | undefined;
+    active: boolean;
+    indicatorColor?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Toolbar.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/Toolbar.vue

@@ -0,0 +1,11 @@
+<template>
+  <div/>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

package/dist/runtime/components/Toolbar.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/Viewer.d.vue.ts

@@ -0,0 +1,45 @@
+import { type ViewMode } from '../composables/useViewerState.js';
+import type { IAnnotationStore, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
+import { type ExportPdfOptions } from '../annotation/pdf-export/export.js';
+type __VLS_Props = {
+    source: string | Uint8Array | object;
+    textLayer?: boolean;
+    userName?: string;
+    stamps?: StampDefinition[];
+    signatureHandlers?: SignatureHandlers;
+    viewMode?: ViewMode;
+    zoom?: number;
+    /** When false, global keyboard shortcuts (e.g. Cmd+F) are suppressed. Used by ViewerTabs to prevent hidden viewers from capturing input. */
+    active?: boolean;
+};
+declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
+type ImportMode = 'replace' | 'merge';
+declare function importAnnotations(annotations: IAnnotationStore[], options?: {
+    mode?: ImportMode;
+}): Promise<{
+    loaded: number;
+    skipped: number;
+}>;
+declare function getKonvaCanvasState(): Record<number, string>;
+declare var __VLS_1: {}, __VLS_40: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    footer?: (props: typeof __VLS_40) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    getAnnotations: () => IAnnotationStore[];
+    importAnnotations: typeof importAnnotations;
+    exportPdf: typeof exportPdf;
+    getKonvaCanvasState: typeof getKonvaCanvasState;
+    getFormFieldValues: () => import("../annotation/engine/types.js").FormFieldValue[];
+    setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};