kviewer 0.0.1

package/dist/runtime/components/ViewerBar.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="flex flex-col border-b border-default">
+    <!-- Top navigation bar -->
+    <div class="flex items-center h-10 px-3 gap-2 bg-elevated/50">
+      <UPopover>
+        <UButton icon="i-lucide-menu" variant="ghost" color="neutral" size="xs" />
+        <template #content>
+          <div class="p-1">
+            <UButton
+              icon="i-lucide-download"
+              label="Download"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              class="w-full justify-start"
+              @click="onDownload"
+            />
+          </div>
+        </template>
+      </UPopover>
+      <PageSettings />
+
+      <USeparator orientation="vertical" class="h-5" color="neutral" />
+
+      <ZoomControls />
+
+      <USeparator orientation="vertical" class="h-5" color="neutral" />
+
+      <HandTool />
+      <MarqueeTool />
+
+      <div class="ml-auto flex items-center gap-2">
+        <PageInfo />
+        <SearchTool />
+      </div>
+    </div>
+
+    <!-- Tool bar -->
+    <div class="grid grid-cols-3 items-center h-11 px-3 gap-2 bg-elevated">
+      <div class="justify-self-start">
+        <ToolProperties @style-updated="bumpStyleVersion" />
+      </div>
+
+      <div class="justify-self-center">
+        <DrawingTools :style-version="styleVersion" />
+      </div>
+
+      <div class="justify-self-end flex items-center gap-1">
+        <ActionTools />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useViewerState } from "../composables/useViewerState";
+import { getTimestampString } from "../annotation/engine/utils";
+import { downloadPdfBytes } from "../annotation/pdf-export/download";
+import { exportAnnotationsToPdf } from "../annotation/pdf-export/export";
+import PageSettings from "./tools/PageSettings.vue";
+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 ActionTools from "./tools/ActionTools.vue";
+import PageInfo from "./tools/PageInfo.vue";
+import SearchTool from "./tools/SearchTool.vue";
+import ToolProperties from "./tools/ToolProperties.vue";
+const state = useViewerState();
+const styleVersion = ref(0);
+function bumpStyleVersion() {
+  styleVersion.value += 1;
+}
+async function onDownload() {
+  try {
+    if (!state.doc.value || !state.painter.value) return;
+    const bytes = await exportAnnotationsToPdf({
+      pdfData: await state.doc.value.getData(),
+      annotations: state.painter.value.getData(),
+      options: {
+        flatten: false,
+        preserveOriginalAnnotations: false
+      }
+    });
+    downloadPdfBytes(bytes, `annotated_${getTimestampString()}.pdf`);
+  } catch (error) {
+    console.error("Failed to export PDF from menu action", error);
+  }
+}
+</script>

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

@@ -0,0 +1,381 @@
+import { type ComponentPublicInstance } from 'vue';
+import type { ViewMode } from '../composables/useViewerState.js';
+import type { StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
+export interface ViewerTabItem {
+    /** Unique identifier for the tab. */
+    id: string;
+    /** Display label shown in the tab bar. */
+    label: string;
+    /** PDF source -- same as KViewer's `source` prop. */
+    source: string | Uint8Array | object;
+    /** Icon to show in the tab (Lucide icon name). Defaults to 'i-lucide-file-text'. */
+    icon?: string;
+    /** Whether the tab can be closed. Defaults to true. */
+    closable?: boolean;
+    /** View mode override for this document. */
+    viewMode?: ViewMode;
+    /** Zoom override for this document. */
+    zoom?: number;
+}
+export interface AddTabOptions {
+    /** Insert at specific index. Defaults to end. */
+    index?: number;
+    /** Switch to the new tab immediately. Defaults to true. */
+    activate?: boolean;
+}
+type __VLS_Props = {
+    /** Initial set of document tabs. */
+    items: ViewerTabItem[];
+    /** ID of the initially active tab. Defaults to first item. */
+    defaultActiveTab?: string;
+    /** Stamps forwarded to all Viewer instances. */
+    stamps?: StampDefinition[];
+    /** User name forwarded to all Viewer instances. */
+    userName?: string;
+    /** Signature handlers forwarded to all Viewer instances. */
+    signatureHandlers?: SignatureHandlers;
+    /** Enable text layer on all Viewer instances. */
+    textLayer?: boolean;
+    /** Default view mode for tabs without a per-tab override. */
+    viewMode?: ViewMode;
+    /** Default zoom for tabs without a per-tab override. */
+    zoom?: number;
+    /** Minimum number of tabs -- prevents closing below this count. */
+    minTabs?: number;
+};
+declare function addTab(item: Omit<ViewerTabItem, 'id'> & {
+    id?: string;
+}, options?: AddTabOptions): string;
+declare function removeTab(id: string): boolean;
+declare function activateTab(id: string): void;
+declare function getViewer(id: string): ComponentPublicInstance | null;
+declare var __VLS_7: {}, __VLS_21: {}, __VLS_30: {
+    tab: {
+        id: string;
+        label: string;
+        source: string | object | {
+            [x: number]: number;
+            readonly BYTES_PER_ELEMENT: number;
+            readonly buffer: {
+                readonly byteLength: number;
+                slice: (begin?: number, end?: number) => ArrayBuffer;
+                readonly maxByteLength: number;
+                readonly resizable: boolean;
+                resize: (newByteLength?: number) => void;
+                readonly detached: boolean;
+                transfer: (newByteLength?: number) => ArrayBuffer;
+                transferToFixedLength: (newByteLength?: number) => ArrayBuffer;
+                readonly [Symbol.toStringTag]: "ArrayBuffer";
+            } | {
+                readonly byteLength: number;
+                slice: (begin?: number, end?: number) => SharedArrayBuffer;
+                readonly growable: boolean;
+                readonly maxByteLength: number;
+                grow: (newByteLength?: number) => void;
+                readonly [Symbol.toStringTag]: "SharedArrayBuffer";
+            };
+            readonly byteLength: number;
+            readonly byteOffset: number;
+            copyWithin: (target: number, start: number, end?: number) => Uint8Array<ArrayBufferLike>;
+            every: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any) => boolean;
+            fill: (value: number, start?: number, end?: number) => Uint8Array<ArrayBufferLike>;
+            filter: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => any, thisArg?: any) => Uint8Array<ArrayBuffer>;
+            find: (predicate: (value: number, index: number, obj: Uint8Array<ArrayBufferLike>) => boolean, thisArg?: any) => number | undefined;
+            findIndex: (predicate: (value: number, index: number, obj: Uint8Array<ArrayBufferLike>) => boolean, thisArg?: any) => number;
+            forEach: (callbackfn: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => void, thisArg?: any) => void;
+            indexOf: (searchElement: number, fromIndex?: number) => number;
+            join: (separator?: string) => string;
+            lastIndexOf: (searchElement: number, fromIndex?: number) => number;
+            readonly length: number;
+            map: (callbackfn: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => number, thisArg?: any) => Uint8Array<ArrayBuffer>;
+            reduce: {
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number): number;
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number, initialValue: number): number;
+                <U>(callbackfn: (previousValue: U, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => U, initialValue: U): U;
+            };
+            reduceRight: {
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number): number;
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number, initialValue: number): number;
+                <U>(callbackfn: (previousValue: U, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => U, initialValue: U): U;
+            };
+            reverse: () => Uint8Array<ArrayBufferLike>;
+            set: (array: ArrayLike<number>, offset?: number) => void;
+            slice: (start?: number, end?: number) => Uint8Array<ArrayBuffer>;
+            some: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any) => boolean;
+            sort: (compareFn?: ((a: number, b: number) => number) | undefined) => Uint8Array<ArrayBufferLike>;
+            subarray: (begin?: number, end?: number) => Uint8Array<ArrayBufferLike>;
+            toLocaleString: {
+                (): string;
+                (locales: string | string[], options?: Intl.NumberFormatOptions): string;
+            };
+            toString: () => string;
+            valueOf: () => Uint8Array<ArrayBufferLike>;
+            entries: () => ArrayIterator<[number, number]>;
+            keys: () => ArrayIterator<number>;
+            values: () => ArrayIterator<number>;
+            includes: (searchElement: number, fromIndex?: number) => boolean;
+            at: (index: number) => number | undefined;
+            findLast: {
+                <S extends number>(predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => value is S, thisArg?: any): S | undefined;
+                (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any): number | undefined;
+            };
+            findLastIndex: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any) => number;
+            toReversed: () => Uint8Array<ArrayBuffer>;
+            toSorted: (compareFn?: ((a: number, b: number) => number) | undefined) => Uint8Array<ArrayBuffer>;
+            with: (index: number, value: number) => Uint8Array<ArrayBuffer>;
+            toBase64: (options?: {
+                alphabet?: "base64" | "base64url" | undefined;
+                omitPadding?: boolean | undefined;
+            } | undefined) => string;
+            setFromBase64: (string: string, options?: {
+                alphabet?: "base64" | "base64url" | undefined;
+                lastChunkHandling?: "loose" | "strict" | "stop-before-partial" | undefined;
+            } | undefined) => {
+                read: number;
+                written: number;
+            };
+            toHex: () => string;
+            setFromHex: (string: string) => {
+                read: number;
+                written: number;
+            };
+            [Symbol.iterator]: () => ArrayIterator<number>;
+            readonly [Symbol.toStringTag]: "Uint8Array";
+        };
+        icon?: string | undefined;
+        closable?: boolean | undefined;
+        viewMode?: ViewMode | undefined;
+        zoom?: number | undefined;
+    };
+}, __VLS_33: {
+    tab: {
+        id: string;
+        label: string;
+        source: string | object | {
+            [x: number]: number;
+            readonly BYTES_PER_ELEMENT: number;
+            readonly buffer: {
+                readonly byteLength: number;
+                slice: (begin?: number, end?: number) => ArrayBuffer;
+                readonly maxByteLength: number;
+                readonly resizable: boolean;
+                resize: (newByteLength?: number) => void;
+                readonly detached: boolean;
+                transfer: (newByteLength?: number) => ArrayBuffer;
+                transferToFixedLength: (newByteLength?: number) => ArrayBuffer;
+                readonly [Symbol.toStringTag]: "ArrayBuffer";
+            } | {
+                readonly byteLength: number;
+                slice: (begin?: number, end?: number) => SharedArrayBuffer;
+                readonly growable: boolean;
+                readonly maxByteLength: number;
+                grow: (newByteLength?: number) => void;
+                readonly [Symbol.toStringTag]: "SharedArrayBuffer";
+            };
+            readonly byteLength: number;
+            readonly byteOffset: number;
+            copyWithin: (target: number, start: number, end?: number) => Uint8Array<ArrayBufferLike>;
+            every: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any) => boolean;
+            fill: (value: number, start?: number, end?: number) => Uint8Array<ArrayBufferLike>;
+            filter: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => any, thisArg?: any) => Uint8Array<ArrayBuffer>;
+            find: (predicate: (value: number, index: number, obj: Uint8Array<ArrayBufferLike>) => boolean, thisArg?: any) => number | undefined;
+            findIndex: (predicate: (value: number, index: number, obj: Uint8Array<ArrayBufferLike>) => boolean, thisArg?: any) => number;
+            forEach: (callbackfn: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => void, thisArg?: any) => void;
+            indexOf: (searchElement: number, fromIndex?: number) => number;
+            join: (separator?: string) => string;
+            lastIndexOf: (searchElement: number, fromIndex?: number) => number;
+            readonly length: number;
+            map: (callbackfn: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => number, thisArg?: any) => Uint8Array<ArrayBuffer>;
+            reduce: {
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number): number;
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number, initialValue: number): number;
+                <U>(callbackfn: (previousValue: U, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => U, initialValue: U): U;
+            };
+            reduceRight: {
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number): number;
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number, initialValue: number): number;
+                <U>(callbackfn: (previousValue: U, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => U, initialValue: U): U;
+            };
+            reverse: () => Uint8Array<ArrayBufferLike>;
+            set: (array: ArrayLike<number>, offset?: number) => void;
+            slice: (start?: number, end?: number) => Uint8Array<ArrayBuffer>;
+            some: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any) => boolean;
+            sort: (compareFn?: ((a: number, b: number) => number) | undefined) => Uint8Array<ArrayBufferLike>;
+            subarray: (begin?: number, end?: number) => Uint8Array<ArrayBufferLike>;
+            toLocaleString: {
+                (): string;
+                (locales: string | string[], options?: Intl.NumberFormatOptions): string;
+            };
+            toString: () => string;
+            valueOf: () => Uint8Array<ArrayBufferLike>;
+            entries: () => ArrayIterator<[number, number]>;
+            keys: () => ArrayIterator<number>;
+            values: () => ArrayIterator<number>;
+            includes: (searchElement: number, fromIndex?: number) => boolean;
+            at: (index: number) => number | undefined;
+            findLast: {
+                <S extends number>(predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => value is S, thisArg?: any): S | undefined;
+                (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any): number | undefined;
+            };
+            findLastIndex: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any) => number;
+            toReversed: () => Uint8Array<ArrayBuffer>;
+            toSorted: (compareFn?: ((a: number, b: number) => number) | undefined) => Uint8Array<ArrayBuffer>;
+            with: (index: number, value: number) => Uint8Array<ArrayBuffer>;
+            toBase64: (options?: {
+                alphabet?: "base64" | "base64url" | undefined;
+                omitPadding?: boolean | undefined;
+            } | undefined) => string;
+            setFromBase64: (string: string, options?: {
+                alphabet?: "base64" | "base64url" | undefined;
+                lastChunkHandling?: "loose" | "strict" | "stop-before-partial" | undefined;
+            } | undefined) => {
+                read: number;
+                written: number;
+            };
+            toHex: () => string;
+            setFromHex: (string: string) => {
+                read: number;
+                written: number;
+            };
+            [Symbol.iterator]: () => ArrayIterator<number>;
+            readonly [Symbol.toStringTag]: "Uint8Array";
+        };
+        icon?: string | undefined;
+        closable?: boolean | undefined;
+        viewMode?: ViewMode | undefined;
+        zoom?: number | undefined;
+    };
+}, __VLS_35: {};
+type __VLS_Slots = {} & {
+    'tabs-leading'?: (props: typeof __VLS_7) => any;
+} & {
+    'tabs-trailing'?: (props: typeof __VLS_21) => any;
+} & {
+    header?: (props: typeof __VLS_30) => any;
+} & {
+    footer?: (props: typeof __VLS_33) => any;
+} & {
+    empty?: (props: typeof __VLS_35) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    addTab: typeof addTab;
+    removeTab: typeof removeTab;
+    activateTab: typeof activateTab;
+    getViewer: typeof getViewer;
+    readonly activeTabId: string;
+    readonly tabs: {
+        id: string;
+        label: string;
+        source: string | object | {
+            [x: number]: number;
+            readonly BYTES_PER_ELEMENT: number;
+            readonly buffer: {
+                readonly byteLength: number;
+                slice: (begin?: number, end?: number) => ArrayBuffer;
+                readonly maxByteLength: number;
+                readonly resizable: boolean;
+                resize: (newByteLength?: number) => void;
+                readonly detached: boolean;
+                transfer: (newByteLength?: number) => ArrayBuffer;
+                transferToFixedLength: (newByteLength?: number) => ArrayBuffer;
+                readonly [Symbol.toStringTag]: "ArrayBuffer";
+            } | {
+                readonly byteLength: number;
+                slice: (begin?: number, end?: number) => SharedArrayBuffer;
+                readonly growable: boolean;
+                readonly maxByteLength: number;
+                grow: (newByteLength?: number) => void;
+                readonly [Symbol.toStringTag]: "SharedArrayBuffer";
+            };
+            readonly byteLength: number;
+            readonly byteOffset: number;
+            copyWithin: (target: number, start: number, end?: number) => Uint8Array<ArrayBufferLike>;
+            every: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any) => boolean;
+            fill: (value: number, start?: number, end?: number) => Uint8Array<ArrayBufferLike>;
+            filter: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => any, thisArg?: any) => Uint8Array<ArrayBuffer>;
+            find: (predicate: (value: number, index: number, obj: Uint8Array<ArrayBufferLike>) => boolean, thisArg?: any) => number | undefined;
+            findIndex: (predicate: (value: number, index: number, obj: Uint8Array<ArrayBufferLike>) => boolean, thisArg?: any) => number;
+            forEach: (callbackfn: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => void, thisArg?: any) => void;
+            indexOf: (searchElement: number, fromIndex?: number) => number;
+            join: (separator?: string) => string;
+            lastIndexOf: (searchElement: number, fromIndex?: number) => number;
+            readonly length: number;
+            map: (callbackfn: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => number, thisArg?: any) => Uint8Array<ArrayBuffer>;
+            reduce: {
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number): number;
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number, initialValue: number): number;
+                <U>(callbackfn: (previousValue: U, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => U, initialValue: U): U;
+            };
+            reduceRight: {
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number): number;
+                (callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => number, initialValue: number): number;
+                <U>(callbackfn: (previousValue: U, currentValue: number, currentIndex: number, array: Uint8Array<ArrayBufferLike>) => U, initialValue: U): U;
+            };
+            reverse: () => Uint8Array<ArrayBufferLike>;
+            set: (array: ArrayLike<number>, offset?: number) => void;
+            slice: (start?: number, end?: number) => Uint8Array<ArrayBuffer>;
+            some: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any) => boolean;
+            sort: (compareFn?: ((a: number, b: number) => number) | undefined) => Uint8Array<ArrayBufferLike>;
+            subarray: (begin?: number, end?: number) => Uint8Array<ArrayBufferLike>;
+            toLocaleString: {
+                (): string;
+                (locales: string | string[], options?: Intl.NumberFormatOptions): string;
+            };
+            toString: () => string;
+            valueOf: () => Uint8Array<ArrayBufferLike>;
+            entries: () => ArrayIterator<[number, number]>;
+            keys: () => ArrayIterator<number>;
+            values: () => ArrayIterator<number>;
+            includes: (searchElement: number, fromIndex?: number) => boolean;
+            at: (index: number) => number | undefined;
+            findLast: {
+                <S extends number>(predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => value is S, thisArg?: any): S | undefined;
+                (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any): number | undefined;
+            };
+            findLastIndex: (predicate: (value: number, index: number, array: Uint8Array<ArrayBufferLike>) => unknown, thisArg?: any) => number;
+            toReversed: () => Uint8Array<ArrayBuffer>;
+            toSorted: (compareFn?: ((a: number, b: number) => number) | undefined) => Uint8Array<ArrayBuffer>;
+            with: (index: number, value: number) => Uint8Array<ArrayBuffer>;
+            toBase64: (options?: {
+                alphabet?: "base64" | "base64url" | undefined;
+                omitPadding?: boolean | undefined;
+            } | undefined) => string;
+            setFromBase64: (string: string, options?: {
+                alphabet?: "base64" | "base64url" | undefined;
+                lastChunkHandling?: "loose" | "strict" | "stop-before-partial" | undefined;
+            } | undefined) => {
+                read: number;
+                written: number;
+            };
+            toHex: () => string;
+            setFromHex: (string: string) => {
+                read: number;
+                written: number;
+            };
+            [Symbol.iterator]: () => ArrayIterator<number>;
+            readonly [Symbol.toStringTag]: "Uint8Array";
+        };
+        icon?: string | undefined;
+        closable?: boolean | undefined;
+        viewMode?: ViewMode | undefined;
+        zoom?: number | undefined;
+    }[];
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeTab": (id: string) => any;
+    "tab-added": (tab: ViewerTabItem) => any;
+    "tab-close": (id: string) => any;
+    "tab-removed": (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:activeTab"?: ((id: string) => any) | undefined;
+    "onTab-added"?: ((tab: ViewerTabItem) => any) | undefined;
+    "onTab-close"?: ((id: string) => any) | undefined;
+    "onTab-removed"?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/ViewerTabs.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Tab bar -->
+    <ClientOnly>
+      <div
+        v-if="tabs.length > 0"
+        class="flex items-center border-b border-default bg-elevated/50 overflow-x-auto"
+      >
+        <slot name="tabs-leading" />
+
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          class="group flex items-center gap-1.5 px-3 h-9 text-sm border-r border-default whitespace-nowrap transition-colors shrink-0"
+          :class="[
+  tab.id === activeTabId ? 'bg-elevated text-highlighted border-b-2 border-b-primary' : 'text-muted hover:text-highlighted hover:bg-elevated/80'
+]"
+          @click="activateTab(tab.id)"
+        >
+          <UIcon
+            :name="tab.icon ?? 'i-lucide-file-text'"
+            class="size-4 shrink-0"
+          />
+          <span class="truncate max-w-40">{{ tab.label }}</span>
+          <UButton
+            v-if="tab.closable !== false && tabs.length > minTabs"
+            icon="i-lucide-x"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            class="opacity-0 group-hover:opacity-100 transition-opacity -mr-1"
+            :class="{ 'opacity-100': tab.id === activeTabId }"
+            @click.stop="removeTab(tab.id)"
+          />
+        </button>
+
+        <slot name="tabs-trailing" />
+      </div>
+    </ClientOnly>
+
+    <!-- Viewer container -->
+    <div class="flex-1 relative overflow-hidden">
+      <div
+        v-for="tab in tabs"
+        v-show="tab.id === activeTabId"
+        :key="tab.id"
+        class="absolute inset-0"
+      >
+        <Viewer
+          :ref="(el) => setViewerRef(tab.id, el)"
+          :source="tab.source"
+          :active="tab.id === activeTabId"
+          :stamps="stamps"
+          :text-layer="textLayer"
+          :user-name="userName"
+          :signature-handlers="signatureHandlers"
+          :view-mode="tab.viewMode ?? viewMode"
+          :zoom="tab.zoom ?? zoom"
+        >
+          <template v-if="$slots.header" #header>
+            <slot name="header" :tab="tab" />
+          </template>
+          <template v-if="$slots.footer" #footer>
+            <slot name="footer" :tab="tab" />
+          </template>
+        </Viewer>
+      </div>
+
+      <!-- Empty state when no tabs are open -->
+      <div v-if="tabs.length === 0" class="absolute inset-0">
+        <slot name="empty" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import Viewer from "./Viewer.vue";
+const props = defineProps({
+  items: { type: Array, required: true },
+  defaultActiveTab: { type: String, required: false, default: void 0 },
+  stamps: { type: Array, required: false, default: void 0 },
+  userName: { type: String, required: false, default: void 0 },
+  signatureHandlers: { type: Object, required: false, default: void 0 },
+  textLayer: { type: Boolean, required: false },
+  viewMode: { type: String, required: false, default: "fit-width" },
+  zoom: { type: Number, required: false, default: 1 },
+  minTabs: { type: Number, required: false, default: 0 }
+});
+const emit = defineEmits(["update:activeTab", "tab-added", "tab-close", "tab-removed"]);
+let idCounter = 0;
+function generateId() {
+  return `tab-${Date.now()}-${++idCounter}`;
+}
+const tabs = ref([...props.items]);
+const activeTabId = ref(
+  props.defaultActiveTab ?? props.items[0]?.id ?? ""
+);
+const viewerRefs = /* @__PURE__ */ new Map();
+function setViewerRef(id, el) {
+  if (el) {
+    viewerRefs.set(id, el);
+  } else {
+    viewerRefs.delete(id);
+  }
+}
+watch(
+  () => props.items,
+  (newItems) => {
+    tabs.value = [...newItems];
+    if (!tabs.value.some((t) => t.id === activeTabId.value)) {
+      activeTabId.value = tabs.value[0]?.id ?? "";
+    }
+  }
+);
+function addTab(item, options) {
+  const id = item.id ?? generateId();
+  const tab = {
+    ...item,
+    id,
+    closable: item.closable ?? true
+  };
+  const index = options?.index ?? tabs.value.length;
+  tabs.value.splice(index, 0, tab);
+  if (options?.activate !== false) {
+    activeTabId.value = id;
+    emit("update:activeTab", id);
+  }
+  emit("tab-added", tab);
+  return id;
+}
+function removeTab(id) {
+  const index = tabs.value.findIndex((t) => t.id === id);
+  if (index === -1) return false;
+  if (tabs.value.length <= props.minTabs) return false;
+  emit("tab-close", id);
+  tabs.value.splice(index, 1);
+  viewerRefs.delete(id);
+  if (activeTabId.value === id) {
+    const newIndex = Math.min(index, tabs.value.length - 1);
+    activeTabId.value = tabs.value[newIndex]?.id ?? "";
+    if (activeTabId.value) {
+      emit("update:activeTab", activeTabId.value);
+    }
+  }
+  emit("tab-removed", id);
+  return true;
+}
+function activateTab(id) {
+  if (tabs.value.some((t) => t.id === id)) {
+    activeTabId.value = id;
+    emit("update:activeTab", id);
+  }
+}
+function getViewer(id) {
+  return viewerRefs.get(id) ?? null;
+}
+defineExpose({
+  addTab,
+  removeTab,
+  activateTab,
+  getViewer,
+  get activeTabId() {
+    return activeTabId.value;
+  },
+  get tabs() {
+    return tabs.value;
+  }
+});
+</script>