kviewer 0.0.1

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

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="kviewer-form-field"
+    :style="positionStyle"
+  >
+    <FormTextField v-if="props.field.fieldType === 'text'" :field="props.field" />
+    <FormCheckbox v-else-if="props.field.fieldType === 'checkbox'" :field="props.field" />
+    <FormRadioButton v-else-if="props.field.fieldType === 'radio'" :field="props.field" />
+    <FormDropdown v-else-if="props.field.fieldType === 'dropdown'" :field="props.field" />
+    <FormSignatureField v-else-if="props.field.fieldType === 'signature'" :field="props.field" />
+    <FormButton v-else-if="props.field.fieldType === 'button'" :field="props.field" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import FormTextField from "./FormTextField.vue";
+import FormCheckbox from "./FormCheckbox.vue";
+import FormRadioButton from "./FormRadioButton.vue";
+import FormDropdown from "./FormDropdown.vue";
+import FormSignatureField from "./FormSignatureField.vue";
+import FormButton from "./FormButton.vue";
+const props = defineProps({
+  field: { type: Object, required: true },
+  pageHeight: { type: Number, required: true }
+});
+const positionStyle = computed(() => {
+  const rect = props.field.rect;
+  const left = rect[0];
+  const top = props.pageHeight - rect[3];
+  const width = rect[2] - rect[0];
+  const height = rect[3] - rect[1];
+  return {
+    position: "absolute",
+    left: `${left}px`,
+    top: `${top}px`,
+    width: `${width}px`,
+    height: `${height}px`
+  };
+});
+</script>

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

@@ -0,0 +1,8 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+    pageHeight: 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/form-fields/FormRadioButton.d.vue.ts

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,30 @@
+<template>
+  <div class="kviewer-form-radio">
+    <input
+      type="radio"
+      :name="props.field.fieldName"
+      :value="props.field.buttonValue"
+      :checked="isSelected"
+      :disabled="props.field.readOnly"
+      :required="props.field.required"
+      @change="onChange"
+    >
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useFormFields } from "../../composables/useFormFields";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const formFields = useFormFields();
+const isSelected = computed(() => {
+  const fv = formFields.getFieldValue(props.field.id);
+  if (!fv) return false;
+  return fv.value === props.field.buttonValue && fv.value !== "";
+});
+function onChange() {
+  formFields.setFieldValue(props.field.id, props.field.buttonValue ?? "");
+}
+</script>

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

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="kviewer-form-signature"
+    :class="{ 'kviewer-form-signature--filled': hasSigned }"
+    @click="onClickSign"
+  >
+    <img
+      v-if="signatureUrl"
+      :src="signatureUrl"
+      class="kviewer-form-signature__preview"
+      alt="Signature"
+    >
+    <span v-else class="kviewer-form-signature__placeholder">
+      Click to sign
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const formFields = useFormFields();
+const state = useViewerState();
+const signatureUrl = computed(() => {
+  const fv = formFields.getFieldValue(props.field.id);
+  if (!fv || typeof fv.value !== "string" || fv.value === "") return null;
+  return fv.value;
+});
+const hasSigned = computed(() => !!signatureUrl.value);
+async function onClickSign() {
+  if (props.field.readOnly) return;
+  if (state.signatures.value.length > 0) {
+    const sig = state.signatures.value[0];
+    if (sig) {
+      formFields.setFieldValue(props.field.id, sig.imageUrl);
+      return;
+    }
+  }
+  if (state.signatureHandlers) {
+    await state.loadSignatures();
+    if (state.signatures.value.length > 0) {
+      const sig = state.signatures.value[0];
+      if (sig) {
+        formFields.setFieldValue(props.field.id, sig.imageUrl);
+        return;
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,66 @@
+<template>
+  <textarea
+    v-if="props.field.multiLine"
+    :value="currentValue"
+    :maxlength="props.field.maxLen || void 0"
+    :readonly="props.field.readOnly"
+    :required="props.field.required"
+    :style="fieldStyle"
+    class="kviewer-form-input"
+    @input="onInput"
+  />
+  <input
+    v-else
+    :type="props.field.password ? 'password' : 'text'"
+    :value="currentValue"
+    :maxlength="props.field.maxLen || void 0"
+    :readonly="props.field.readOnly"
+    :required="props.field.required"
+    :style="fieldStyle"
+    class="kviewer-form-input"
+    @input="onInput"
+  >
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useFormFields } from "../../composables/useFormFields";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const formFields = useFormFields();
+const currentValue = computed(() => {
+  const fv = formFields.getFieldValue(props.field.id);
+  return typeof fv?.value === "string" ? fv.value : "";
+});
+const fieldStyle = computed(() => {
+  const style = {};
+  if (props.field.fontSize && props.field.fontSize > 0) {
+    style.fontSize = `${props.field.fontSize}px`;
+  } else {
+    style.fontSize = "inherit";
+  }
+  if (props.field.color && props.field.color.length >= 3) {
+    style.color = `rgb(${props.field.color[0]}, ${props.field.color[1]}, ${props.field.color[2]})`;
+  }
+  if (props.field.backgroundColor && props.field.backgroundColor.length >= 3) {
+    style.backgroundColor = `rgb(${props.field.backgroundColor[0]}, ${props.field.backgroundColor[1]}, ${props.field.backgroundColor[2]})`;
+  }
+  const alignMap = { 0: "left", 1: "center", 2: "right" };
+  if (props.field.textAlignment != null) {
+    style.textAlign = alignMap[props.field.textAlignment] ?? "left";
+  }
+  if (props.field.comb && props.field.maxLen && props.field.maxLen > 0) {
+    const rect = props.field.rect;
+    const fieldWidth = rect[2] - rect[0];
+    const cellWidth = fieldWidth / props.field.maxLen;
+    style.letterSpacing = `${cellWidth - (props.field.fontSize ?? 12) * 0.6}px`;
+    style.fontFamily = "monospace";
+  }
+  return style;
+});
+function onInput(event) {
+  const target = event.target;
+  formFields.setFieldValue(props.field.id, target.value);
+}
+</script>

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

@@ -0,0 +1,7 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modals/FreeTextModal.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    open: boolean;
+    defaultColor: string;
+    defaultFontSize: number;
+    initialText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    submit: (result: {
+        inputValue: string;
+        color: string;
+        fontSize: number;
+    }) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((result: {
+        inputValue: string;
+        color: string;
+        fontSize: number;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modals/FreeTextModal.vue

@@ -0,0 +1,89 @@
+<template>
+  <UModal
+    v-model:open="isOpen"
+    :title="props.initialText !== void 0 ? 'Edit Text' : 'Free Text'"
+    :ui="{ width: 'sm:max-w-md' }"
+  >
+    <template #body>
+      <div class="flex flex-col gap-3">
+        <UTextarea
+          v-model="inputValue"
+          placeholder="Start typing..."
+          :rows="3"
+          autofocus
+        />
+        <div class="flex items-center justify-between">
+          <div class="flex gap-1">
+            <button
+              v-for="c in colors"
+              :key="c"
+              class="w-6 h-6 rounded-full border-2 cursor-pointer"
+              :class="
+  c === currentColor ? 'border-white ring-2 ring-blue-500' : 'border-transparent'
+"
+              :style="{ backgroundColor: c }"
+              @click="currentColor = c"
+            />
+          </div>
+          <USelect
+            v-model="currentFontSize"
+            :items="fontSizeItems"
+            class="w-20"
+            size="sm"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2 w-full">
+        <UButton variant="ghost" color="neutral" @click="cancel">
+          Cancel
+        </UButton>
+        <UButton :disabled="!inputValue.trim()" @click="submit">OK</UButton>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { defaultOptions } from "../../annotation/engine/config";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  defaultColor: { type: String, required: true },
+  defaultFontSize: { type: Number, required: true },
+  initialText: { type: String, required: false }
+});
+const emit = defineEmits(["update:open", "submit", "cancel"]);
+const isOpen = ref(props.open);
+watch(
+  () => props.open,
+  (v) => {
+    isOpen.value = v;
+    if (v) {
+      inputValue.value = props.initialText ?? "";
+      currentColor.value = props.defaultColor;
+      currentFontSize.value = String(props.defaultFontSize);
+    }
+  }
+);
+watch(isOpen, (v) => emit("update:open", v));
+const inputValue = ref("");
+const currentColor = ref(props.defaultColor);
+const currentFontSize = ref(String(props.defaultFontSize));
+const colors = defaultOptions.colors;
+const fontSizeItems = defaultOptions.fontSize.map((s) => ({
+  label: `${s}px`,
+  value: String(s)
+}));
+function submit() {
+  emit("submit", {
+    inputValue: inputValue.value,
+    color: currentColor.value,
+    fontSize: Number(currentFontSize.value)
+  });
+}
+function cancel() {
+  emit("cancel");
+}
+</script>

package/dist/runtime/components/modals/FreeTextModal.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    open: boolean;
+    defaultColor: string;
+    defaultFontSize: number;
+    initialText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    submit: (result: {
+        inputValue: string;
+        color: string;
+        fontSize: number;
+    }) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((result: {
+        inputValue: string;
+        color: string;
+        fontSize: number;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modals/SignatureDrawModal.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    submit: (imageUrl: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((imageUrl: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modals/SignatureDrawModal.vue

@@ -0,0 +1,120 @@
+<template>
+  <UModal v-model:open="isOpen" title="Draw Signature" :ui="{ content: 'sm:max-w-lg' }">
+    <template #body>
+      <div class="flex flex-col gap-3">
+        <div
+          class="border border-default rounded bg-white relative"
+          :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
+        >
+          <canvas
+            ref="canvasRef"
+            :width="canvasWidth"
+            :height="canvasHeight"
+            class="cursor-crosshair"
+            @pointerdown="onPointerDown"
+            @pointermove="onPointerMove"
+            @pointerup="onPointerUp"
+            @pointerleave="onPointerUp"
+          />
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="flex gap-1">
+            <button
+              v-for="c in signatureColors"
+              :key="c"
+              class="w-6 h-6 rounded-full border-2 cursor-pointer"
+              :class="
+  c === strokeColor ? 'border-white ring-2 ring-blue-500' : 'border-transparent'
+"
+              :style="{ backgroundColor: c }"
+              @click="strokeColor = c"
+            />
+          </div>
+          <UButton variant="ghost" color="neutral" size="xs" @click="clearCanvas">
+            Clear
+          </UButton>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton variant="ghost" color="neutral" @click="cancel">
+          Cancel
+        </UButton>
+        <UButton :disabled="!hasDrawn" @click="submit">
+          Save
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from "vue";
+import { defaultOptions } from "../../annotation/engine/config";
+const props = defineProps({
+  open: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update:open", "submit", "cancel"]);
+const isOpen = ref(props.open);
+watch(
+  () => props.open,
+  async (v) => {
+    isOpen.value = v;
+    if (v) {
+      hasDrawn.value = false;
+      await nextTick();
+      clearCanvas();
+    }
+  }
+);
+watch(isOpen, (v) => emit("update:open", v));
+const canvasWidth = defaultOptions.signature.WIDTH;
+const canvasHeight = defaultOptions.signature.HEIGHT;
+const signatureColors = defaultOptions.signature.COLORS;
+const canvasRef = ref(null);
+const strokeColor = ref(signatureColors[0]);
+const hasDrawn = ref(false);
+let isDrawing = false;
+function getCtx() {
+  return canvasRef.value?.getContext("2d") ?? null;
+}
+function onPointerDown(e) {
+  isDrawing = true;
+  hasDrawn.value = true;
+  const ctx = getCtx();
+  if (!ctx) return;
+  e.target.setPointerCapture(e.pointerId);
+  ctx.strokeStyle = strokeColor.value;
+  ctx.lineWidth = 2;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.beginPath();
+  ctx.moveTo(e.offsetX, e.offsetY);
+}
+function onPointerMove(e) {
+  if (!isDrawing) return;
+  const ctx = getCtx();
+  if (!ctx) return;
+  ctx.lineTo(e.offsetX, e.offsetY);
+  ctx.stroke();
+}
+function onPointerUp() {
+  isDrawing = false;
+}
+function clearCanvas() {
+  const ctx = getCtx();
+  if (!ctx) return;
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  hasDrawn.value = false;
+}
+function submit() {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const imageUrl = canvas.toDataURL("image/png");
+  emit("submit", imageUrl);
+}
+function cancel() {
+  emit("cancel");
+}
+</script>

package/dist/runtime/components/modals/SignatureDrawModal.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    submit: (imageUrl: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((imageUrl: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,85 @@
+<template>
+  <UPopover>
+    <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="Signature"
+    >
+      <UIcon name="i-lucide-pen-tool" class="text-lg" />
+    </button>
+    <template #content>
+      <div class="p-3 min-w-56">
+        <!-- Saved signatures -->
+        <div v-if="state.signatures.value.length > 0" class="flex flex-col gap-1 mb-2">
+          <div
+            v-for="sig in state.signatures.value"
+            :key="sig.id"
+            class="flex items-center gap-2 p-2 rounded hover:bg-elevated cursor-pointer group"
+            :class="{ 'ring-1 ring-primary bg-elevated/50': state.activeSignature.value?.id === sig.id }"
+            @click="selectSignature(sig)"
+          >
+            <img
+              :src="sig.imageUrl"
+              :alt="sig.name || 'Signature'"
+              class="h-8 max-w-36 object-contain bg-white rounded border border-default px-2"
+            >
+            <UButton
+              icon="i-lucide-trash-2"
+              variant="ghost"
+              color="error"
+              size="xs"
+              class="ml-auto opacity-0 group-hover:opacity-100"
+              @click.stop="onDelete(sig.id)"
+            />
+          </div>
+        </div>
+        <p v-else class="text-xs text-muted mb-2">
+          No saved signatures
+        </p>
+
+        <UButton
+          icon="i-lucide-plus"
+          variant="outline"
+          color="neutral"
+          size="xs"
+          block
+          @click="drawModalOpen = true"
+        >
+          Add signature
+        </UButton>
+      </div>
+    </template>
+  </UPopover>
+
+  <ClientOnly>
+    <SignatureDrawModal
+      v-model:open="drawModalOpen"
+      @submit="onDrawSubmit"
+      @cancel="drawModalOpen = false"
+    />
+  </ClientOnly>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useViewerState } from "../../composables/useViewerState";
+import { AnnotationType } from "../../annotation/engine/types";
+import SignatureDrawModal from "../modals/SignatureDrawModal.vue";
+const state = useViewerState();
+const drawModalOpen = ref(false);
+const isActive = computed(() => state.activeTool.value === AnnotationType.SIGNATURE);
+function selectSignature(sig) {
+  state.activeSignature.value = sig;
+  state.selectTool(AnnotationType.SIGNATURE, sig.imageUrl);
+}
+async function onDrawSubmit(imageUrl) {
+  drawModalOpen.value = false;
+  const saved = await state.saveSignature(imageUrl);
+  if (saved) {
+    selectSignature(saved);
+  }
+}
+async function onDelete(id) {
+  await state.deleteSignature(id);
+}
+</script>

package/dist/runtime/components/panels/SignaturePicker.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/panels/StampPicker.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;