kviewer 0.0.1

package/dist/runtime/components/panels/StampPicker.vue

@@ -0,0 +1,46 @@
+<template>
+  <UPopover v-if="state.stamps.value.length > 0" v-model:open="popoverOpen">
+    <button
+      class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors cursor-pointer"
+      :class="isActive ? 'bg-default text-highlighted' : 'text-muted hover:bg-default/50 hover:text-highlighted'"
+      title="Stamp"
+    >
+      <UIcon name="i-lucide-stamp" class="text-lg" />
+    </button>
+    <template #content>
+      <div class="p-3">
+        <div class="grid grid-cols-3 gap-3">
+          <button
+            v-for="stamp in state.stamps.value"
+            :key="stamp.id"
+            class="flex items-center justify-center w-16 h-16 rounded-lg bg-white border-2 cursor-pointer transition-colors"
+            :class="state.activeStamp.value?.id === stamp.id ? 'border-primary' : 'border-transparent hover:border-muted'"
+            :title="stamp.name"
+            @click="selectStamp(stamp)"
+          >
+            <img
+              :src="stamp.previewUrl || stamp.imageUrl"
+              :alt="stamp.name"
+              class="w-10 h-10 object-contain"
+            >
+          </button>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useViewerState } from "../../composables/useViewerState";
+import { AnnotationType } from "../../annotation/engine/types";
+const state = useViewerState();
+const popoverOpen = ref(false);
+const isActive = computed(() => state.activeTool.value === AnnotationType.STAMP);
+function selectStamp(stamp) {
+  state.activeStamp.value = stamp;
+  const dataTransfer = stamp.width || stamp.height ? JSON.stringify({ url: stamp.imageUrl, width: stamp.width, height: stamp.height }) : stamp.imageUrl;
+  state.selectTool(AnnotationType.STAMP, dataTransfer);
+  popoverOpen.value = false;
+}
+</script>

package/dist/runtime/components/panels/StampPicker.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/tools/ActionTools.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/tools/ActionTools.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex items-center gap-1">
+    <UButton
+      icon="i-lucide-undo-2"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      :disabled="!state.history.canUndo.value"
+      @click="state.history.undo"
+    />
+    <UButton
+      icon="i-lucide-redo-2"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      :disabled="!state.history.canRedo.value"
+      @click="state.history.redo"
+    />
+    <UButton
+      icon="i-lucide-eraser"
+      :variant="state.activeTool.value === 'eraser' ? 'soft' : 'ghost'"
+      color="neutral"
+      size="sm"
+      @click="state.selectTool('eraser')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useViewerState } from "../../composables/useViewerState";
+const state = useViewerState();
+</script>

package/dist/runtime/components/tools/ActionTools.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/tools/DrawingTools.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    styleVersion: 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/tools/DrawingTools.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex items-center gap-1">
+    <ToolButton
+      :tool="getDef(AnnotationType.FREEHAND)"
+      :active="state.activeTool.value === AnnotationType.FREEHAND"
+      :indicator-color="indicatorColors[AnnotationType.FREEHAND]"
+      @click="state.selectTool(AnnotationType.FREEHAND)"
+    />
+    <ToolButton
+      :tool="getDef(AnnotationType.FREE_HIGHLIGHT)"
+      :active="state.activeTool.value === AnnotationType.FREE_HIGHLIGHT"
+      :indicator-color="indicatorColors[AnnotationType.FREE_HIGHLIGHT]"
+      @click="state.selectTool(AnnotationType.FREE_HIGHLIGHT)"
+    />
+    <ToolButton
+      :tool="getDef(AnnotationType.FREETEXT)"
+      :active="state.activeTool.value === AnnotationType.FREETEXT"
+      @click="state.selectTool(AnnotationType.FREETEXT)"
+    />
+    <StampPicker />
+    <SignaturePicker />
+    <ToolButton
+      :tool="getDef(AnnotationType.RECTANGLE)"
+      :active="state.activeTool.value === AnnotationType.RECTANGLE"
+      :indicator-color="indicatorColors[AnnotationType.RECTANGLE]"
+      @click="state.selectTool(AnnotationType.RECTANGLE)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useViewerState } from "../../composables/useViewerState";
+import { AnnotationType } from "../../annotation/engine/types";
+import { annotationDefinitions } from "../../annotation/engine/config";
+import ToolButton from "../ToolButton.vue";
+import StampPicker from "../panels/StampPicker.vue";
+import SignaturePicker from "../panels/SignaturePicker.vue";
+const props = defineProps({
+  styleVersion: { type: Number, required: true }
+});
+const state = useViewerState();
+function getDef(type) {
+  return annotationDefinitions.find((d) => d.type === type);
+}
+const indicatorColors = computed(() => {
+  const version = props.styleVersion;
+  return {
+    [AnnotationType.FREEHAND]: getIndicatorColor(AnnotationType.FREEHAND, version),
+    [AnnotationType.FREE_HIGHLIGHT]: getIndicatorColor(AnnotationType.FREE_HIGHLIGHT, version),
+    [AnnotationType.RECTANGLE]: getIndicatorColor(AnnotationType.RECTANGLE, version)
+  };
+});
+function getIndicatorColor(type, _version) {
+  return getDef(type)?.style?.color;
+}
+</script>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    styleVersion: 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/tools/HandTool.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/tools/HandTool.vue

@@ -0,0 +1,14 @@
+<template>
+  <UButton
+    icon="i-lucide-hand"
+    :variant="state.activeTool.value === 'hand' ? 'soft' : 'ghost'"
+    color="neutral"
+    size="xs"
+    @click="state.selectTool('hand')"
+  />
+</template>
+
+<script setup>
+import { useViewerState } from "../../composables/useViewerState";
+const state = useViewerState();
+</script>

package/dist/runtime/components/tools/HandTool.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/tools/MarqueeTool.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/tools/MarqueeTool.vue

@@ -0,0 +1,15 @@
+<template>
+  <UButton
+    icon="i-lucide-square-dashed-mouse-pointer"
+    :variant="state.activeTool.value === 'marquee' ? 'soft' : 'ghost'"
+    color="neutral"
+    size="xs"
+    title="Marquee Select"
+    @click="state.selectTool('marquee')"
+  />
+</template>
+
+<script setup>
+import { useViewerState } from "../../composables/useViewerState";
+const state = useViewerState();
+</script>

package/dist/runtime/components/tools/MarqueeTool.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/tools/PageInfo.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/tools/PageInfo.vue

@@ -0,0 +1,10 @@
+<template>
+  <span v-if="state.totalPages.value" class="text-xs text-muted">
+    {{ state.totalPages.value }} pages
+  </span>
+</template>
+
+<script setup>
+import { useViewerState } from "../../composables/useViewerState";
+const state = useViewerState();
+</script>

package/dist/runtime/components/tools/PageInfo.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/tools/PageSettings.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/tools/PageSettings.vue

@@ -0,0 +1,92 @@
+<template>
+  <UDropdownMenu :items="menuItems" :content="{ align: 'start' }">
+    <UButton
+      icon="i-lucide-file-cog"
+      variant="ghost"
+      color="neutral"
+      size="xs"
+    />
+  </UDropdownMenu>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { usePageSettings } from "../../composables/usePageSettings";
+import { useViewerState } from "../../composables/useViewerState";
+const settings = usePageSettings();
+const state = useViewerState();
+const menuItems = computed(() => [
+  [
+    {
+      label: "Seiten\xFCbergang",
+      type: "label"
+    },
+    {
+      label: "Fortlaufend",
+      icon: "i-lucide-rows-3",
+      type: "checkbox",
+      checked: settings.pageTransition.value === "continuous",
+      onUpdateChecked: () => settings.setPageTransition("continuous")
+    },
+    {
+      label: "Seite f\xFCr Seite",
+      icon: "i-lucide-file",
+      type: "checkbox",
+      checked: settings.pageTransition.value === "single-page",
+      onUpdateChecked: () => settings.setPageTransition("single-page")
+    }
+  ],
+  [
+    {
+      label: "Drehen",
+      type: "label"
+    },
+    {
+      label: "Im Uhrzeigersinn",
+      icon: "i-lucide-rotate-cw",
+      onSelect: () => settings.rotateCW()
+    },
+    {
+      label: "Gegen den Uhrzeigersinn",
+      icon: "i-lucide-rotate-ccw",
+      onSelect: () => settings.rotateCCW()
+    }
+  ],
+  [
+    {
+      label: "Layout",
+      type: "label"
+    },
+    {
+      label: "Einseitig",
+      icon: "i-lucide-square",
+      type: "checkbox",
+      checked: settings.layoutMode.value === "single",
+      onUpdateChecked: () => settings.setLayoutMode("single")
+    },
+    {
+      label: "Zweiseitig",
+      icon: "i-lucide-columns-2",
+      type: "checkbox",
+      checked: settings.layoutMode.value === "double",
+      onUpdateChecked: () => settings.setLayoutMode("double")
+    }
+  ],
+  [
+    {
+      label: "Stiftmodus",
+      icon: "i-lucide-pen-tool",
+      type: "checkbox",
+      checked: state.stylusMode.value,
+      onUpdateChecked: () => state.setStylusMode(!state.stylusMode.value)
+    }
+  ],
+  [
+    {
+      label: "Vollbildansicht",
+      icon: "i-lucide-maximize",
+      onSelect: () => settings.toggleFullscreen()
+    }
+  ]
+]);
+</script>

package/dist/runtime/components/tools/PageSettings.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/tools/SearchTool.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/tools/SearchTool.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="flex items-center gap-1">
+    <UButton
+      icon="i-lucide-search"
+      :variant="search.isOpen.value ? 'soft' : 'ghost'"
+      color="neutral"
+      size="xs"
+      title="Search"
+      @click="toggleOpen"
+    />
+
+    <div
+      v-if="search.isOpen.value"
+      class="flex items-center gap-1 rounded-md border border-default bg-default px-2 py-1"
+    >
+      <UInput
+        ref="queryInputRef"
+        :model-value="search.query.value"
+        placeholder="Find in document..."
+        variant="outline"
+        color="neutral"
+        size="xs"
+        class="w-56"
+        @update:model-value="onQueryChange"
+        @keydown="onInputKeydown"
+      />
+
+      <span class="min-w-16 text-center text-[11px] text-muted">
+        {{ statusLabel }}
+      </span>
+
+      <UButton
+        icon="i-lucide-chevron-up"
+        variant="ghost"
+        color="neutral"
+        size="xs"
+        :disabled="!hasMatches"
+        title="Previous match"
+        @click="search.findPrevious"
+      />
+      <UButton
+        icon="i-lucide-chevron-down"
+        variant="ghost"
+        color="neutral"
+        size="xs"
+        :disabled="!hasMatches"
+        title="Next match"
+        @click="search.findNext"
+      />
+
+      <UButton
+        :variant="search.matchCase.value ? 'soft' : 'ghost'"
+        color="neutral"
+        size="xs"
+        title="Match Case"
+        @click="search.toggleMatchCase"
+      >
+        Aa
+      </UButton>
+      <UButton
+        :variant="search.wholeWord.value ? 'soft' : 'ghost'"
+        color="neutral"
+        size="xs"
+        title="Whole Word"
+        @click="search.toggleWholeWord"
+      >
+        W
+      </UButton>
+      <UButton
+        :variant="search.highlightAll.value ? 'soft' : 'ghost'"
+        color="neutral"
+        size="xs"
+        title="Highlight All"
+        @click="search.toggleHighlightAll"
+      >
+        All
+      </UButton>
+
+      <UButton
+        icon="i-lucide-x"
+        variant="ghost"
+        color="neutral"
+        size="xs"
+        title="Close search"
+        @click="search.close"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useViewerSearch } from "../../composables/useViewerSearch";
+const search = useViewerSearch();
+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";
+  return `${search.currentMatch.value}/${search.totalMatches.value}`;
+});
+function resolveInputElement() {
+  const input = queryInputRef.value?.inputRef ?? queryInputRef.value?.$el?.querySelector("input") ?? null;
+  if (input instanceof HTMLInputElement) {
+    search.setInputElement(input);
+  }
+}
+function toggleOpen() {
+  if (search.isOpen.value) {
+    search.close();
+    return;
+  }
+  search.open();
+  nextTick(() => {
+    resolveInputElement();
+    search.focusInput();
+  });
+}
+function onQueryChange(value) {
+  search.setQuery(String(value ?? ""));
+}
+function onInputKeydown(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    if (event.shiftKey) {
+      search.findPrevious();
+    } else {
+      search.findNext();
+    }
+  }
+  if (event.key === "Escape") {
+    event.preventDefault();
+    search.close();
+  }
+}
+onMounted(() => {
+  resolveInputElement();
+});
+watch(
+  () => search.isOpen.value,
+  (open) => {
+    if (!open) return;
+    nextTick(() => {
+      resolveInputElement();
+      search.focusInput();
+    });
+  }
+);
+</script>

package/dist/runtime/components/tools/SearchTool.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/tools/ToolProperties.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    styleUpdated: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onStyleUpdated?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;