kviewer 0.2.0 → 0.2.2

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

@@ -5,7 +5,7 @@
       :variant="search.isOpen.value ? 'soft' : 'ghost'"
       color="neutral"
       size="xs"
-      title="Search"
+      :title="t('search')"
       data-testid="search-toggle"
       @click="toggleOpen"
     />
@@ -17,7 +17,7 @@
       <UInput
         ref="queryInputRef"
         :model-value="search.query.value"
-        placeholder="Find in document..."
+        :placeholder="t('searchPlaceholder')"
         variant="outline"
         color="neutral"
         size="xs"
@@ -37,7 +37,7 @@
         color="neutral"
         size="xs"
         :disabled="!hasMatches"
-        title="Previous match"
+        :title="t('previousMatch')"
         @click="search.findPrevious"
       />
       <UButton
@@ -46,7 +46,7 @@
         color="neutral"
         size="xs"
         :disabled="!hasMatches"
-        title="Next match"
+        :title="t('nextMatch')"
         @click="search.findNext"
       />
 
@@ -54,7 +54,7 @@
         :variant="search.matchCase.value ? 'soft' : 'ghost'"
         color="neutral"
         size="xs"
-        title="Match Case"
+        :title="t('matchCase')"
         @click="search.toggleMatchCase"
       >
         Aa
@@ -63,7 +63,7 @@
         :variant="search.wholeWord.value ? 'soft' : 'ghost'"
         color="neutral"
         size="xs"
-        title="Whole Word"
+        :title="t('wholeWord')"
         @click="search.toggleWholeWord"
       >
         W
@@ -72,7 +72,7 @@
         :variant="search.highlightAll.value ? 'soft' : 'ghost'"
         color="neutral"
         size="xs"
-        title="Highlight All"
+        :title="t('highlightAll')"
         @click="search.toggleHighlightAll"
       >
         All
@@ -83,7 +83,7 @@
         variant="ghost"
         color="neutral"
         size="xs"
-        title="Close search"
+        :title="t('closeSearch')"
         @click="search.close"
       />
     </div>
@@ -93,12 +93,14 @@
 <script setup>
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useViewerSearch } from "../../composables/useViewerSearch";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
 const search = useViewerSearch();
+const { t } = useKviewerI18n();
 const queryInputRef = ref(null);
 const hasMatches = computed(() => search.totalMatches.value > 0);
 const statusLabel = computed(() => {
-  if (!search.query.value) return "Type to search";
-  if (search.notFound.value) return "No results";
+  if (!search.query.value) return t("typeToSearch");
+  if (search.notFound.value) return t("noResults");
   return `${search.currentMatch.value}/${search.totalMatches.value}`;
 });
 function resolveInputElement() {

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

@@ -40,7 +40,7 @@
         <UPopover v-model:open="colorPopoverOpen">
           <button
             class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
-            title="Color"
+            :title="t('color')"
           >
             <span
               class="w-4 h-4 rounded-full border border-white/30"
@@ -67,7 +67,7 @@
         <UPopover v-if="activeType === AnnotationType.FREEHAND">
           <button
             class="flex items-center justify-center h-7 px-1.5 gap-0.5 rounded-md hover:bg-default cursor-pointer"
-            title="Stroke width"
+            :title="t('strokeWidth')"
           >
             <UIcon name="i-lucide-pencil" class="text-sm text-muted" />
             <span class="text-[10px] text-muted tabular-nums">{{ freehandStrokeWidth }}</span>
@@ -77,7 +77,7 @@
               <button
                 class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-default cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                 :disabled="freehandStrokeWidth <= 1"
-                title="Decrease stroke width"
+                :title="t('decreaseStrokeWidth')"
                 @click="decrementStrokeWidth"
               >
                 <UIcon name="i-lucide-minus" class="text-sm" />
@@ -88,7 +88,7 @@
               <button
                 class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-default cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                 :disabled="freehandStrokeWidth >= 24"
-                title="Increase stroke width"
+                :title="t('increaseStrokeWidth')"
                 @click="incrementStrokeWidth"
               >
                 <UIcon name="i-lucide-plus" class="text-sm" />
@@ -102,7 +102,7 @@
     <template v-else>
       <div class="flex items-center gap-1.5 text-xs text-muted">
         <UIcon name="i-lucide-sliders-horizontal" class="text-sm" />
-        <span>No properties</span>
+        <span>{{ t("noProperties") }}</span>
       </div>
     </template>
   </div>
@@ -113,8 +113,10 @@ import { computed, ref } from "vue";
 import { defaultOptions, annotationDefinitions } from "../../annotation/engine/config";
 import { AnnotationType } from "../../annotation/engine/types";
 import { useViewerState } from "../../composables/useViewerState";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
 const emit = defineEmits(["styleUpdated"]);
 const state = useViewerState();
+const { t } = useKviewerI18n();
 const colors = defaultOptions.colors;
 const styleVersion = ref(0);
 const colorPopoverOpen = ref(false);

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

@@ -0,0 +1,9 @@
+import type { ViewerMenuItem } from '../../menu-items.js';
+type __VLS_Props = {
+    /** Extra items appended to the burger menu after the built-ins.
+     *  See {@link ViewerMenuItem}. Pure forwarding from `<KViewer>`. */
+    menuItems?: ViewerMenuItem[];
+};
+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

@@ -0,0 +1,79 @@
+<template>
+  <UPopover>
+    <UButton icon="i-lucide-menu" variant="ghost" color="neutral" size="xs" data-testid="viewer-menu" />
+    <template #content>
+      <div class="p-1 flex flex-col gap-0.5">
+        <UButton
+          icon="i-lucide-download"
+          :label="t('download')"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          class="w-full justify-start"
+          data-testid="viewer-download"
+          @click="onDownload"
+        />
+        <UButton
+          :icon="state.shapeDetection.value ? 'i-lucide-square-check-big' : 'i-lucide-square-dashed'"
+          :label="state.shapeDetection.value ? t('disableFormFieldDetection') : t('detectFormFields')"
+          :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"
+        />
+        <!-- Host-supplied menu items appended after the built-ins.
+             A small separator visually marks the boundary; we only
+             render it when there is at least one custom item. -->
+        <template v-if="props.menuItems && props.menuItems.length > 0">
+          <div class="my-1 border-t border-default" />
+          <template v-for="item in props.menuItems" :key="item.key">
+            <div v-if="item.type === 'separator'" class="my-1 border-t border-default" />
+            <UButton
+              v-else-if="item.type === 'button'"
+              :icon="item.icon"
+              :label="item.label"
+              :disabled="item.disabled"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              class="w-full justify-start"
+              :data-testid="`viewer-menu-${item.key}`"
+              @click="item.onSelect()"
+            />
+            <UButton
+              v-else-if="item.type === 'checkbox'"
+              :icon="item.icon ?? (item.checked ? 'i-lucide-check-square' : 'i-lucide-square')"
+              :label="item.label"
+              :variant="item.checked ? 'soft' : 'ghost'"
+              :color="item.checked ? 'primary' : 'neutral'"
+              :disabled="item.disabled"
+              size="xs"
+              class="w-full justify-start"
+              :data-testid="`viewer-menu-${item.key}`"
+              @click="item.onUpdate(!item.checked)"
+            />
+          </template>
+        </template>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script setup>
+import { useViewerState } from "../../composables/useViewerState";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
+const props = defineProps({
+  menuItems: { type: Array, required: false }
+});
+const state = useViewerState();
+const { t } = useKviewerI18n();
+async function onDownload() {
+  try {
+    await state.downloadPdf();
+  } catch (error) {
+    console.error("Failed to export PDF from menu action", error);
+  }
+}
+</script>

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

@@ -0,0 +1,9 @@
+import type { ViewerMenuItem } from '../../menu-items.js';
+type __VLS_Props = {
+    /** Extra items appended to the burger menu after the built-ins.
+     *  See {@link ViewerMenuItem}. Pure forwarding from `<KViewer>`. */
+    menuItems?: ViewerMenuItem[];
+};
+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/ZoomControls.vue

@@ -32,19 +32,27 @@
 <script setup>
 import { computed } from "vue";
 import { useViewerState } from "../../composables/useViewerState";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
 const state = useViewerState();
-const fitModeItems = [
-  { label: "Fit Width", value: "fit-width" },
-  { label: "Fit Page", value: "fit-page" }
-];
-const scaleItems = computed(
-  () => state.scaleOptions.map((s) => ({
+const { t } = useKviewerI18n();
+const fitModeItems = computed(() => [
+  { label: t("fitWidth"), value: "fit-width" },
+  { label: t("fitPage"), value: "fit-page" }
+]);
+const scaleItems = computed(() => {
+  const options = [...state.scaleOptions];
+  const current = state.scale.value;
+  if (state.fitMode.value === "custom" && !options.includes(current)) {
+    options.push(current);
+    options.sort((a, b) => a - b);
+  }
+  return options.map((s) => ({
     label: `${Math.round(s * 100)}%`,
     value: `scale:${s}`
-  }))
-);
+  }));
+});
 const zoomItems = computed(() => [
-  ...fitModeItems,
+  ...fitModeItems.value,
   { label: "---", value: "_separator", disabled: true },
   ...scaleItems.value
 ]);

package/dist/runtime/composables/canvas-limits.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Canvas backing-store limits.
+ *
+ * iOS Safari rejects canvases above ~16.7M pixels — the allocation fails
+ * SILENTLY and the page renders blank. Large PDF pages on iPad (DPR 2,
+ * supersampling) cross that limit at moderate zoom. Other engines allow
+ * far larger canvases; 64M keeps memory bounded without visibly capping
+ * desktop zoom. pdfjs's own viewer applies the same strategy via its
+ * `maxCanvasPixels` option (default 2^24 ≈ 16.7M).
+ */
+export declare const IOS_MAX_CANVAS_PIXELS = 16000000;
+export declare const DEFAULT_MAX_CANVAS_PIXELS = 64000000;
+/**
+ * Clamp a desired render scale so the resulting backing store stays under
+ * `maxPixels`. The canvas's CSS size is set independently, so clamping
+ * only reduces sharpness at extreme zoom instead of blanking the page.
+ *
+ * @param desiredScale page-to-canvas scale (zoom × quality × pixel ratio)
+ * @param baseWidth    page width at scale 1
+ * @param baseHeight   page height at scale 1
+ */
+export declare function clampRenderScale(desiredScale: number, baseWidth: number, baseHeight: number, maxPixels: number): number;

package/dist/runtime/composables/canvas-limits.js

@@ -0,0 +1,10 @@
+export const IOS_MAX_CANVAS_PIXELS = 16e6;
+export const DEFAULT_MAX_CANVAS_PIXELS = 64e6;
+export function clampRenderScale(desiredScale, baseWidth, baseHeight, maxPixels) {
+  const basePixels = baseWidth * baseHeight;
+  if (basePixels <= 0) return desiredScale;
+  if (basePixels * desiredScale * desiredScale <= maxPixels) {
+    return desiredScale;
+  }
+  return Math.sqrt(maxPixels / basePixels);
+}

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

@@ -62,6 +62,12 @@ export interface FormFieldsState {
      *  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;
+    /** Mark parsed signature defs whose source-PDF field is already
+     *  digitally signed (`/V` holds a `/Sig` dict — extracted via the
+     *  pdf-lib side-channel; pdf.js nulls a signature widget's fieldValue
+     *  so the signed state is invisible in its annotation objects). Keyed
+     *  by fully qualified field name. */
+    applySignedSignatures: (names: Set<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

package/dist/runtime/composables/useFormFields.js

@@ -37,6 +37,7 @@ export function provideFormFields() {
   }
   let checkboxStyleMap = null;
   let buttonCaptionMap = null;
+  let signedSignatureNames = null;
   function applyCheckboxStyles(styles) {
     checkboxStyleMap = styles;
     let changed = false;
@@ -77,6 +78,24 @@ export function provideFormFields() {
     }
     if (changed) triggerRef(fieldDefinitions);
   }
+  function applySignedSignatures(names) {
+    signedSignatureNames = names;
+    let changed = false;
+    for (const [page, defs] of fieldDefinitions.value.entries()) {
+      let pageChanged = false;
+      const next = defs.map((d) => {
+        if (d.fieldType !== "signature" || d.origin !== "parsed") return d;
+        if (d.signedInSource || !names.has(d.fieldName)) return d;
+        pageChanged = true;
+        return { ...d, signedInSource: true };
+      });
+      if (pageChanged) {
+        fieldDefinitions.value.set(page, next);
+        changed = true;
+      }
+    }
+    if (changed) triggerRef(fieldDefinitions);
+  }
   function parsePageFields(pageNumber, rawAnnotations) {
     if (fieldDefinitions.value.has(pageNumber)) return;
     const defs = parseFormFields(rawAnnotations, pageNumber);
@@ -99,6 +118,13 @@ export function provideFormFields() {
         if (caption) def.buttonLabel = caption;
       }
     }
+    if (signedSignatureNames) {
+      for (const def of defs) {
+        if (def.fieldType === "signature" && signedSignatureNames.has(def.fieldName)) {
+          def.signedInSource = true;
+        }
+      }
+    }
     fieldDefinitions.value.set(pageNumber, defs);
     triggerRef(fieldDefinitions);
     for (const def of defs) {
@@ -464,6 +490,7 @@ export function provideFormFields() {
     selectedPlacedFieldId.value = null;
     checkboxStyleMap = null;
     buttonCaptionMap = null;
+    signedSignatureNames = null;
     valueWriteSink = null;
     triggerRef(fieldDefinitions);
     triggerRef(fieldValues);
@@ -489,6 +516,7 @@ export function provideFormFields() {
     selectPlacedField,
     applyCheckboxStyles,
     applyButtonCaptions,
+    applySignedSignatures,
     isFieldLocked,
     resetValues,
     reset,

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

@@ -36,5 +36,15 @@ export interface InertiaPanzoomHandle {
     setGesturesEnabled: (enabled: boolean) => void;
     /** Subscribe to transform updates. Returns an unsubscribe function. */
     onChange: (cb: (t: Transform) => void) => () => void;
+    /** Subscribe to the end of a zoom gesture (pinch lifted / ctrl+wheel idle).
+     *  Fires with the current visual scale so the host can commit it into the
+     *  PDF render scale. Returns an unsubscribe function. */
+    onZoomEnd: (cb: (scale: number) => void) => () => void;
+    /** Replace min/max visual scale at runtime (e.g. to cap the *effective*
+     *  zoom when the committed render scale changes). */
+    setScaleLimits: (min: number, max: number) => void;
+    /** Set the transform directly (translate clamped to bounds). In-flight
+     *  gestures are rebased so they continue from the new transform. */
+    setTransform: (t: Partial<Transform>) => void;
 }
 export declare function useInertiaPanzoom(options?: InertiaPanzoomOptions): InertiaPanzoomHandle;

package/dist/runtime/composables/useInertiaPanzoom.js

@@ -6,11 +6,13 @@ const BOUNCE_VELOCITY_DECAY = 0.04;
 const MIN_VELOCITY = 0.01;
 export function useInertiaPanzoom(options = {}) {
   const {
-    minScale = 0.5,
-    maxScale = 4,
     axisLockThreshold = 10,
     axisLockRatio = 2
   } = options;
+  let minScale = options.minScale ?? 0.5;
+  let maxScale = options.maxScale ?? 4;
+  const subscribers = /* @__PURE__ */ new Set();
+  const zoomEndSubscribers = /* @__PURE__ */ new Set();
   let controller = null;
   function attach(target) {
     detach();
@@ -30,7 +32,11 @@ export function useInertiaPanzoom(options = {}) {
     let vy = 0;
     let momentumRaf = 0;
     let lastStepTime = 0;
-    const subscribers = /* @__PURE__ */ new Set();
+    let pinchZoomed = false;
+    let wheelZoomEndTimer = 0;
+    function fireZoomEnd() {
+      zoomEndSubscribers.forEach((cb) => cb(scale));
+    }
     target.style.transformOrigin = "0 0";
     target.style.touchAction = "none";
     parent.style.touchAction = "none";
@@ -320,6 +326,7 @@ export function useInertiaPanzoom(options = {}) {
         const focalY = (pinchStart.midY - rect.top - pinchStart.ty) / pinchStart.s;
         tx = midX - rect.left - newScale * focalX;
         ty = midY - rect.top - newScale * focalY;
+        if (newScale !== scale) pinchZoomed = true;
         scale = newScale;
         apply();
       } else if (pointers.size === 1 && panStart) {
@@ -352,7 +359,7 @@ export function useInertiaPanzoom(options = {}) {
       }
     }
     function onUp(e) {
-      pointers.delete(e.pointerId);
+      if (!pointers.delete(e.pointerId)) return;
       if (pointers.size < 2) pinchStart = null;
       if (pointers.size === 0) {
         const hadPan = panStart !== null;
@@ -365,6 +372,10 @@ export function useInertiaPanzoom(options = {}) {
         }
         if (hadPan && lockedAxis === "y") vx = 0;
         startMomentum();
+        if (pinchZoomed) {
+          pinchZoomed = false;
+          fireZoomEnd();
+        }
       }
     }
     function onWheelZoom(e) {
@@ -382,6 +393,33 @@ export function useInertiaPanzoom(options = {}) {
       ty = my - newScale * focalY;
       scale = newScale;
       apply();
+      clearTimeout(wheelZoomEndTimer);
+      wheelZoomEndTimer = window.setTimeout(fireZoomEnd, 200);
+    }
+    function setTransform(t) {
+      stopMomentum();
+      if (t.scale !== void 0) scale = Math.max(minScale, Math.min(maxScale, t.scale));
+      if (t.tx !== void 0) tx = t.tx;
+      if (t.ty !== void 0) ty = t.ty;
+      const b = getBounds();
+      tx = Math.max(b.minX, Math.min(b.maxX, tx));
+      ty = Math.max(b.minY, Math.min(b.maxY, ty));
+      if (pinchStart && pointers.size >= 2) {
+        const pts = [...pointers.values()];
+        pinchStart = {
+          dist: Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y),
+          midX: (pts[0].x + pts[1].x) / 2,
+          midY: (pts[0].y + pts[1].y) / 2,
+          s: scale,
+          tx,
+          ty
+        };
+      }
+      if (panStart && pointers.size === 1) {
+        const p = [...pointers.values()][0];
+        panStart = { x: p.x, y: p.y, tx, ty, axisLock: panStart.axisLock };
+      }
+      apply();
     }
     function scrollBy(dx, dy) {
       stopMomentum();
@@ -401,6 +439,7 @@ export function useInertiaPanzoom(options = {}) {
       cleanup: () => {
         stopMomentum();
         clearTimeout(hideTimer);
+        clearTimeout(wheelZoomEndTimer);
         parent.removeEventListener("pointerdown", onDown);
         parent.removeEventListener("pointermove", onMove);
         parent.removeEventListener("pointerup", onUp);
@@ -449,10 +488,7 @@ export function useInertiaPanzoom(options = {}) {
           setWillChangeActive(false);
         }
       },
-      onChange: (cb) => {
-        subscribers.add(cb);
-        return () => subscribers.delete(cb);
-      }
+      setTransform
     };
   }
   function detach() {
@@ -470,7 +506,18 @@ export function useInertiaPanzoom(options = {}) {
     scrollToElement: (elem, opts) => controller?.scrollToElement(elem, opts),
     scrollBy: (dx, dy) => controller?.scrollBy(dx, dy),
     setGesturesEnabled: (enabled) => controller?.setGesturesEnabled(enabled),
-    onChange: (cb) => controller?.onChange(cb) ?? (() => {
-    })
+    setTransform: (t) => controller?.setTransform(t),
+    setScaleLimits: (min, max) => {
+      minScale = min;
+      maxScale = max;
+    },
+    onChange: (cb) => {
+      subscribers.add(cb);
+      return () => subscribers.delete(cb);
+    },
+    onZoomEnd: (cb) => {
+      zoomEndSubscribers.add(cb);
+      return () => zoomEndSubscribers.delete(cb);
+    }
   };
 }

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

@@ -0,0 +1,18 @@
+import { type ComputedRef, type InjectionKey } from 'vue';
+import { type KviewerLocale, type MessageKey } from '../i18n/messages.js';
+export type KviewerMessageOverrides = Partial<Record<MessageKey, string>>;
+export declare const kviewerLocaleKey: InjectionKey<ComputedRef<KviewerLocale>>;
+export declare const kviewerMessagesKey: InjectionKey<ComputedRef<KviewerMessageOverrides>>;
+/** Called once by the Viewer root to make locale + overrides available. */
+export declare function provideKviewerI18n(locale: ComputedRef<KviewerLocale>, overrides: ComputedRef<KviewerMessageOverrides>): void;
+/**
+ * Translate built-in viewer strings.
+ *
+ * Resolution order: host override (`messages` prop) → active locale →
+ * English. `{param}` placeholders are substituted from `params`.
+ */
+export declare function useKviewerI18n(): {
+    t: (key: MessageKey, params?: Record<string, string | number>) => string;
+    toolLabel: (name: string) => string;
+    locale: ComputedRef<"en" | "de">;
+};

package/dist/runtime/composables/useKviewerI18n.js

@@ -0,0 +1,29 @@
+import { computed, inject, provide } from "vue";
+import { messages } from "../i18n/messages.js";
+export const kviewerLocaleKey = Symbol("kviewer-locale");
+export const kviewerMessagesKey = Symbol("kviewer-messages");
+export function provideKviewerI18n(locale, overrides) {
+  provide(kviewerLocaleKey, locale);
+  provide(kviewerMessagesKey, overrides);
+}
+export function useKviewerI18n() {
+  const locale = inject(kviewerLocaleKey, computed(() => "en"));
+  const overrides = inject(
+    kviewerMessagesKey,
+    computed(() => ({}))
+  );
+  function t(key, params) {
+    let message = overrides.value[key] ?? messages[locale.value]?.[key] ?? messages.en[key] ?? key;
+    if (params) {
+      for (const [name, value] of Object.entries(params)) {
+        message = message.replace(`{${name}}`, String(value));
+      }
+    }
+    return message;
+  }
+  function toolLabel(name) {
+    const key = `tool${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+    return key in messages.en ? t(key) : name;
+  }
+  return { t, toolLabel, locale };
+}

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

@@ -21,6 +21,17 @@ export interface PageVirtualization {
     pageMetas: ShallowRef<PageMeta[]>;
     currentPage: Ref<number>;
     renderedPages: ComputedRef<Set<number>>;
+    /** Pages that have entered the viewport at least once since the document
+     *  loaded (or since the last `resetViewedPages()`). Marked from scroll/pan
+     *  geometry — not render state — so a fast fling that skips rendering the
+     *  middle pages still counts them as viewed. */
+    viewedPages: ShallowRef<Set<number>>;
+    /** True once every page has been viewed. */
+    allPagesRead: ComputedRef<boolean>;
+    /** Mark a single page as viewed (used by single-page navigation). */
+    markPageViewed: (pageNumber: number) => void;
+    /** Clear the viewed-pages set, e.g. to start a fresh signing session. */
+    resetViewedPages: () => void;
     isPageRendered: (pageNumber: number) => boolean;
     observePage: (pageNumber: number, element: HTMLElement) => void;
     unobservePage: (pageNumber: number) => void;