kviewer 0.2.0 → 0.2.2

package/dist/runtime/components/ViewerBar.vue

@@ -1,117 +1,128 @@
 <template>
   <div class="flex flex-col shrink-0 border-b border-default">
-    <!-- Top navigation bar -->
-    <div class="flex items-center h-[40px] px-3 gap-2 bg-elevated/50">
-      <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="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 ? 'Disable form field detection' : 'Detect form fields'"
-              :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>
-      <PageSettings />
+    <!-- Default layout: omitting `tools` renders today's toolbar verbatim. -->
+    <template v-if="props.tools === void 0">
+      <!-- Top navigation bar -->
+      <div class="flex items-center h-[40px] px-3 gap-2 bg-elevated/50">
+        <ToolbarMenu :menu-items="props.menuItems" />
+        <PageSettings />
 
-      <USeparator orientation="vertical" class="h-5" color="neutral" />
+        <USeparator orientation="vertical" class="h-5" :ui="{ border: 'border-accented' }" />
 
-      <ZoomControls />
+        <ZoomControls />
 
-      <template v-if="!state.readonly.value">
-        <USeparator orientation="vertical" class="h-5" color="neutral" />
+        <template v-if="!state.readonly.value">
+          <USeparator orientation="vertical" class="h-5" :ui="{ border: 'border-accented' }" />
 
-        <HandTool />
-        <MarqueeTool />
-
-        <UButton
-          icon="i-lucide-form-input"
-          :variant="state.formEditMode.value ? 'soft' : 'ghost'"
-          :color="state.formEditMode.value ? 'primary' : 'neutral'"
-          size="xs"
-          :title="state.formEditMode.value ? 'Exit form-edit mode' : 'Enter form-edit mode'"
-          data-testid="form-edit-toggle"
-          @click="state.setFormEditMode(!state.formEditMode.value)"
-        />
-      </template>
+          <HandTool />
+          <MarqueeTool />
+        </template>
 
-      <div class="ml-auto flex items-center gap-2">
-        <PageInfo />
-        <SearchTool />
+        <div class="ml-auto flex items-center gap-2">
+          <PageInfo />
+          <SearchTool />
+        </div>
       </div>
-    </div>
 
-    <!-- Tool bar -->
-    <div v-if="!state.readonly.value" class="grid grid-cols-3 items-center h-[44px] px-3 gap-2 bg-elevated">
-      <div class="justify-self-start">
-        <ToolProperties @style-updated="bumpStyleVersion" />
+      <!-- Tool bar -->
+      <div v-if="!state.readonly.value" class="grid grid-cols-3 items-center h-[44px] px-3 gap-2 bg-elevated">
+        <div class="justify-self-start">
+          <ToolProperties @style-updated="bumpStyleVersion" />
+        </div>
+
+        <div class="justify-self-center">
+          <FormFieldTools v-if="state.formEditMode.value" />
+          <DrawingTools v-else :style-version="styleVersion" />
+        </div>
+
+        <div class="justify-self-end flex items-center gap-1">
+          <ActionTools />
+        </div>
       </div>
+    </template>
 
-      <div class="justify-self-center">
-        <FormFieldTools v-if="state.formEditMode.value" />
-        <DrawingTools v-else :style-version="styleVersion" />
+    <!-- Config-driven layout: `tools` chooses which buttons render, in what
+         order, with custom buttons interleaved via #tool-<name> slots. -->
+    <template v-else>
+      <!-- Top navigation bar -->
+      <div class="flex items-center h-[40px] px-3 gap-2 bg-elevated/50">
+        <template v-for="(entry, i) in topEntries" :key="entryKey(entry, i)">
+          <USeparator v-if="entry === 'separator'" orientation="vertical" class="h-5" :ui="{ border: 'border-accented' }" />
+          <div v-else-if="entry === 'spacer'" class="ml-auto" />
+          <ToolbarMenu v-else-if="entry === 'menu'" :menu-items="props.menuItems" />
+          <PageSettings v-else-if="entry === 'pageSettings'" />
+          <ZoomControls v-else-if="entry === 'zoom'" />
+          <HandTool v-else-if="entry === 'hand' && isEnabled('hand')" />
+          <MarqueeTool v-else-if="entry === 'marquee' && isEnabled('marquee')" />
+          <PageInfo v-else-if="entry === 'pageInfo'" />
+          <SearchTool v-else-if="entry === 'search'" />
+          <slot v-else-if="isSlot(entry)" :name="slotName(entry)" :state="state" />
+        </template>
       </div>
 
-      <div class="justify-self-end flex items-center gap-1">
-        <ActionTools />
+      <!-- Tool bar — hidden entirely in readonly, like the default layout.
+           Columns are split on `spacer`; three columns lay out as a grid so
+           the middle (tools) is centered between properties and actions. -->
+      <div
+        v-if="!state.readonly.value && bottomEntries.length > 0"
+        :class="bottomRowClass"
+      >
+        <div
+          v-for="(segment, si) in bottomSegments"
+          :key="`segment-${si}`"
+          class="flex items-center gap-1"
+          :class="segmentClass(bottomSegments.length, si)"
+        >
+          <template v-for="(entry, i) in segment" :key="entryKey(entry, i)">
+            <USeparator v-if="entry === 'separator'" orientation="vertical" class="h-5" :ui="{ border: 'border-accented' }" />
+            <ToolProperties v-else-if="entry === 'properties'" @style-updated="bumpStyleVersion" />
+            <StampPicker v-else-if="entry === 'stamp' && modeOk('stamp')" />
+            <SignaturePicker v-else-if="entry === 'signature' && modeOk('signature') && state.signatureHandlers" />
+            <UButton
+              v-else-if="entry === 'undo'"
+              icon="i-lucide-undo-2"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              data-testid="action-undo"
+              :disabled="!state.history.canUndo.value"
+              @click="state.history.undo"
+            />
+            <UButton
+              v-else-if="entry === 'redo'"
+              icon="i-lucide-redo-2"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              data-testid="action-redo"
+              :disabled="!state.history.canRedo.value"
+              @click="state.history.redo"
+            />
+            <AnnotationToolButton
+              v-else-if="annotationButtonType(entry) !== void 0 && modeOk(entry)"
+              :type="annotationButtonType(entry)"
+              :data-testid="entry === 'eraser' ? 'action-eraser' : `tool-${entry}`"
+            />
+            <slot v-else-if="isSlot(entry)" :name="slotName(entry)" :state="state" />
+          </template>
+        </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, provide, ref } from "vue";
 import { useViewerState } from "../composables/useViewerState";
+import {
+  ANNOTATION_TOOL_TYPES,
+  BOTTOM_TOOL_IDS,
+  DRAW_TOOLS,
+  FORM_TOOLS,
+  READONLY_HIDDEN_TOP,
+  STYLE_VERSION_KEY,
+  TOP_TOOL_IDS
+} from "../toolbar-tools";
 import PageSettings from "./tools/PageSettings.vue";
 import ZoomControls from "./tools/ZoomControls.vue";
 import HandTool from "./tools/HandTool.vue";
@@ -122,19 +133,90 @@ import ActionTools from "./tools/ActionTools.vue";
 import PageInfo from "./tools/PageInfo.vue";
 import SearchTool from "./tools/SearchTool.vue";
 import ToolProperties from "./tools/ToolProperties.vue";
+import ToolbarMenu from "./tools/ToolbarMenu.vue";
+import AnnotationToolButton from "./tools/AnnotationToolButton.vue";
+import StampPicker from "./panels/StampPicker.vue";
+import SignaturePicker from "./panels/SignaturePicker.vue";
 const props = defineProps({
-  menuItems: { type: Array, required: false }
+  menuItems: { type: Array, required: false },
+  tools: { type: Array, required: false }
 });
 const state = useViewerState();
 const styleVersion = ref(0);
+provide(STYLE_VERSION_KEY, styleVersion);
 function bumpStyleVersion() {
   styleVersion.value += 1;
 }
-async function onDownload() {
-  try {
-    await state.downloadPdf();
-  } catch (error) {
-    console.error("Failed to export PDF from menu action", error);
+function isSlot(entry) {
+  return typeof entry === "object" && entry !== null && entry.type === "slot";
+}
+function slotName(entry) {
+  if (!isSlot(entry)) return "";
+  return `tool-${entry.name ?? entry.key}`;
+}
+function entryKey(entry, index) {
+  return `${isSlot(entry) ? `slot-${entry.key}` : entry}-${index}`;
+}
+function homeRow(entry) {
+  if (typeof entry !== "string") return null;
+  if (TOP_TOOL_IDS.has(entry)) return "top";
+  if (BOTTOM_TOOL_IDS.has(entry)) return "bottom";
+  return null;
+}
+const rows = computed(() => {
+  const top = [];
+  const bottom = [];
+  let current = "top";
+  for (const entry of props.tools ?? []) {
+    const home = homeRow(entry);
+    let row;
+    if (home) {
+      row = home;
+      current = home;
+    } else if (isSlot(entry) && entry.row) {
+      row = entry.row;
+      current = entry.row;
+    } else {
+      row = current;
+    }
+    (row === "top" ? top : bottom).push(entry);
+  }
+  return { top, bottom };
+});
+const topEntries = computed(() => rows.value.top);
+const bottomEntries = computed(() => rows.value.bottom);
+const bottomSegments = computed(() => {
+  const segments = [[]];
+  for (const entry of bottomEntries.value) {
+    if (entry === "spacer") segments.push([]);
+    else segments[segments.length - 1].push(entry);
+  }
+  return segments;
+});
+const bottomRowClass = computed(
+  () => bottomSegments.value.length === 3 ? "grid grid-cols-3 items-center h-[44px] px-3 gap-2 bg-elevated" : "flex items-center h-[44px] px-3 gap-2 bg-elevated"
+);
+function segmentClass(count, index) {
+  if (count === 3) {
+    return ["justify-self-start", "justify-self-center", "justify-self-end"][index] ?? "";
+  }
+  if (count === 2 && index === 1) return "ml-auto";
+  return "";
+}
+function isEnabled(id) {
+  if (state.readonly.value && READONLY_HIDDEN_TOP.has(id)) return false;
+  return true;
+}
+function modeOk(id) {
+  if (FORM_TOOLS.has(id)) return state.formEditMode.value;
+  if (DRAW_TOOLS.has(id)) return !state.formEditMode.value;
+  return true;
+}
+function annotationButtonType(entry) {
+  if (entry === "eraser") return "eraser";
+  if (typeof entry === "string" && entry in ANNOTATION_TOOL_TYPES) {
+    return ANNOTATION_TOOL_TYPES[entry];
   }
+  return void 0;
 }
 </script>

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

@@ -1,9 +1,29 @@
 import type { ViewerMenuItem } from '../menu-items.js';
+import { type ViewerToolEntry } from '../toolbar-tools.js';
 type __VLS_Props = {
     /** Extra items appended to the burger menu after the built-ins.
      *  See {@link ViewerMenuItem}. Pure forwarding from `<KViewer>`. */
     menuItems?: ViewerMenuItem[];
+    /** Configures which toolbar tools render and in what order. When
+     *  omitted, the default toolbar is rendered. See {@link ViewerToolEntry}. */
+    tools?: ViewerToolEntry[];
 };
-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 var __VLS_109: string, __VLS_110: {
+    state: import("../composables/useViewerState.js").ViewerState;
+}, __VLS_154: string, __VLS_155: {
+    state: import("../composables/useViewerState.js").ViewerState;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_109>]?: (props: typeof __VLS_110) => any;
+} & {
+    [K in NonNullable<typeof __VLS_154>]?: (props: typeof __VLS_155) => any;
+};
+declare const __VLS_base: 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 __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.d.vue.ts

@@ -2,6 +2,7 @@ import { type ComponentPublicInstance } from 'vue';
 import type { ViewMode } from '../composables/useViewerState.js';
 import type { StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import type { ViewerMenuItem } from '../menu-items.js';
+import type { ViewerToolEntry } from '../toolbar-tools.js';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
     id: string;
@@ -62,6 +63,8 @@ type __VLS_Props = {
     scripting?: boolean;
     /** Forwarded to every Viewer instance — see KViewer's `menuItems`. */
     menuItems?: ViewerMenuItem[];
+    /** Forwarded to every Viewer instance — see KViewer's `tools`. */
+    tools?: ViewerToolEntry[];
 };
 declare function addTab(item: Omit<ViewerTabItem, 'id'> & {
     id?: string;
@@ -269,8 +272,12 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_32: {
         shapeDetection?: boolean | undefined;
         scripting?: boolean | undefined;
     };
-}, __VLS_37: {};
+}, __VLS_39: string, __VLS_40: {
+    state: import("../composables/useViewerState.js").ViewerState;
+}, __VLS_42: {};
 type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_39>]?: (props: typeof __VLS_40) => any;
+} & {
     'tabs-leading'?: (props: typeof __VLS_7) => any;
 } & {
     'tabs-trailing'?: (props: typeof __VLS_21) => any;
@@ -279,7 +286,7 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_35) => any;
 } & {
-    empty?: (props: typeof __VLS_37) => any;
+    empty?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     addTab: typeof addTab;
@@ -402,6 +409,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     userName: string;
     zoom: number;
     menuItems: ViewerMenuItem[];
+    tools: ViewerToolEntry[];
     scripting: boolean;
     stamps: StampDefinition[];
     signatureHandlers: SignatureHandlers;

package/dist/runtime/components/ViewerTabs.vue

@@ -61,6 +61,7 @@
           :shape-detection="activeTab.shapeDetection ?? shapeDetection"
           :scripting="activeTab.scripting ?? scripting"
           :menu-items="menuItems"
+          :tools="tools"
           :role-colors="roleColors"
           :active-role-id="activeRoleId"
           @update:active-role-id="(v) => emit('update:activeRoleId', v)"
@@ -71,6 +72,11 @@
           <template v-if="$slots.footer" #footer>
             <slot name="footer" :tab="activeTab" />
           </template>
+          <!-- Forward custom #tool-* slots so tabs consumers can inject
+               custom toolbar buttons; tabs-*/header/footer/empty untouched. -->
+          <template v-for="name in toolSlotNames" :key="name" #[name]="scope">
+            <slot :name="name" v-bind="scope" />
+          </template>
         </Viewer>
       </div>
 
@@ -83,7 +89,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, nextTick } from "vue";
+import { ref, computed, watch, nextTick, useSlots } from "vue";
 import Viewer from "./Viewer.vue";
 const props = defineProps({
   items: { type: Array, required: true },
@@ -100,8 +106,13 @@ const props = defineProps({
   roleColors: { type: Object, required: false, default: void 0 },
   activeRoleId: { type: [String, null], required: false, default: void 0 },
   scripting: { type: Boolean, required: false, default: false },
-  menuItems: { type: Array, required: false, default: void 0 }
+  menuItems: { type: Array, required: false, default: void 0 },
+  tools: { type: Array, required: false, default: void 0 }
 });
+const slots = useSlots();
+const toolSlotNames = computed(
+  () => Object.keys(slots).filter((name) => name.startsWith("tool-"))
+);
 const emit = defineEmits(["update:activeTab", "tab-added", "tab-close", "tab-removed", "update:activeRoleId"]);
 let idCounter = 0;
 function generateId() {

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

@@ -2,6 +2,7 @@ import { type ComponentPublicInstance } from 'vue';
 import type { ViewMode } from '../composables/useViewerState.js';
 import type { StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import type { ViewerMenuItem } from '../menu-items.js';
+import type { ViewerToolEntry } from '../toolbar-tools.js';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
     id: string;
@@ -62,6 +63,8 @@ type __VLS_Props = {
     scripting?: boolean;
     /** Forwarded to every Viewer instance — see KViewer's `menuItems`. */
     menuItems?: ViewerMenuItem[];
+    /** Forwarded to every Viewer instance — see KViewer's `tools`. */
+    tools?: ViewerToolEntry[];
 };
 declare function addTab(item: Omit<ViewerTabItem, 'id'> & {
     id?: string;
@@ -269,8 +272,12 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_32: {
         shapeDetection?: boolean | undefined;
         scripting?: boolean | undefined;
     };
-}, __VLS_37: {};
+}, __VLS_39: string, __VLS_40: {
+    state: import("../composables/useViewerState.js").ViewerState;
+}, __VLS_42: {};
 type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_39>]?: (props: typeof __VLS_40) => any;
+} & {
     'tabs-leading'?: (props: typeof __VLS_7) => any;
 } & {
     'tabs-trailing'?: (props: typeof __VLS_21) => any;
@@ -279,7 +286,7 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_35) => any;
 } & {
-    empty?: (props: typeof __VLS_37) => any;
+    empty?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     addTab: typeof addTab;
@@ -402,6 +409,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     userName: string;
     zoom: number;
     menuItems: ViewerMenuItem[];
+    tools: ViewerToolEntry[];
     scripting: boolean;
     stamps: StampDefinition[];
     signatureHandlers: SignatureHandlers;

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

@@ -42,31 +42,33 @@
     </option>
   </select>
 
-  <!-- Standard dropdown combo box -->
-  <select
+  <!-- Standard dropdown combo box. Rendered with Nuxt UI's USelect so the
+       option list is portalled to <body> and shows at a readable size,
+       independent of the page-zoom transform — a native <select> popup is
+       drawn by the OS and can't be styled (issue #71). The closed trigger
+       keeps the field's look and height-fitted font via the
+       .kviewer-form-uselect class + inline fieldStyle. -->
+  <USelect
     v-else
-    :value="currentValue"
+    :items="selectItems"
+    :model-value="currentValue"
     :disabled="isReadOnly"
     :required="props.field.required"
+    placeholder="—"
+    variant="none"
+    color="neutral"
+    size="md"
+    trailing-icon="i-lucide-chevron-down"
     :style="fieldStyle"
-    class="kviewer-form-input kviewer-form-select"
-    @change="onChange"
-  >
-    <option v-if="!props.field.required" value="">
-      —
-    </option>
-    <option
-      v-for="opt in props.field.options ?? []"
-      :key="opt.exportValue"
-      :value="opt.exportValue"
-    >
-      {{ opt.displayValue }}
-    </option>
-  </select>
+    :ui="selectUi"
+    class="kviewer-form-uselect"
+    @update:model-value="onSelectChange"
+  />
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { computeFieldFontSize, decodeFontName } from "../../annotation/font-style";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
@@ -78,10 +80,25 @@ const isReadOnly = computed(
   () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
 );
 const datalistId = computed(() => `kviewer-datalist-${props.field.id}`);
+const isStandardCombo = computed(() => props.field.combo && !props.field.editable);
 const listBoxSize = computed(() => {
   const optCount = props.field.options?.length ?? 0;
   return Math.max(2, optCount);
 });
+const CLEAR_VALUE = "__kviewer_clear__";
+const selectItems = computed(() => {
+  const opts = (props.field.options ?? []).map((o) => ({
+    label: o.displayValue,
+    value: o.exportValue
+  }));
+  if (!props.field.required) opts.unshift({ label: "\u2014", value: CLEAR_VALUE });
+  return opts;
+});
+const selectUi = {
+  trailing: "pe-0.5",
+  trailingIcon: "size-2",
+  content: "min-w-(--reka-select-trigger-width)"
+};
 const currentValue = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   if (!fv) return "";
@@ -90,9 +107,20 @@ const currentValue = computed(() => {
 });
 const fieldStyle = computed(() => {
   const style = {};
-  if (props.field.fontSize && props.field.fontSize > 0) {
-    style.fontSize = `${props.field.fontSize}px`;
+  const rect = props.field.rect;
+  const rectHeight = rect[3] - rect[1];
+  if (isStandardCombo.value) {
+    const declared = props.field.fontSize && props.field.fontSize > 0 ? props.field.fontSize : Infinity;
+    const fill = Math.max(6, Math.min(rectHeight - 3, 14));
+    style.fontSize = `${Math.round(10 * Math.min(declared, fill)) / 10}px`;
+    style.lineHeight = "1";
+  } else {
+    style.fontSize = `${computeFieldFontSize(props.field.fontSize, rectHeight)}px`;
   }
+  const fontStyle = decodeFontName(props.field.fontName);
+  style.fontFamily = fontStyle.fontFamily;
+  if (fontStyle.fontWeight !== "normal") style.fontWeight = fontStyle.fontWeight;
+  if (fontStyle.fontStyle !== "normal") style.fontStyle = fontStyle.fontStyle;
   if (props.field.color && props.field.color.length >= 3) {
     style.color = `rgb(${props.field.color[0]}, ${props.field.color[1]}, ${props.field.color[2]})`;
   }
@@ -114,4 +142,7 @@ function onInputChange(event) {
   const target = event.target;
   formFields.setFieldValue(props.field.id, target.value);
 }
+function onSelectChange(value) {
+  formFields.setFieldValue(props.field.id, value === CLEAR_VALUE ? "" : value);
+}
 </script>

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

@@ -8,10 +8,10 @@
       v-if="signatureUrl"
       :src="signatureUrl"
       class="kviewer-form-signature__preview"
-      alt="Signature"
+      :alt="t('signature')"
     >
     <span v-else class="kviewer-form-signature__placeholder">
-      {{ props.field.promptText || "Click to sign" }}
+      {{ props.field.promptText || t("clickToSign") }}
     </span>
   </div>
 
@@ -28,12 +28,14 @@
 import { ref, computed } from "vue";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
 import SignatureDrawModal from "../modals/SignatureDrawModal.vue";
 const props = defineProps({
   field: { type: Object, required: true }
 });
 const formFields = useFormFields();
 const state = useViewerState();
+const { t } = useKviewerI18n();
 const drawModalOpen = ref(false);
 const signatureUrl = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);

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

@@ -25,7 +25,7 @@
 
 <script setup>
 import { computed } from "vue";
-import { decodeFontName } from "../../annotation/font-style";
+import { computeFieldFontSize, decodeFontName } from "../../annotation/font-style";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
@@ -40,26 +40,15 @@ const currentValue = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   return typeof fv?.value === "string" ? fv.value : "";
 });
-const FONT_BORDER_SIZE = 2;
-const LINE_HEIGHT_FACTOR = 1.35;
-const DEFAULT_FIELD_FONT_SIZE = 9;
 const fieldStyle = computed(() => {
   const style = {};
-  const declared = props.field.fontSize && props.field.fontSize > 0 ? props.field.fontSize : DEFAULT_FIELD_FONT_SIZE;
   const rect = props.field.rect;
-  const rectHeight = Math.abs(rect[3] - rect[1] - FONT_BORDER_SIZE);
-  let computed2;
-  if (props.field.multiLine) {
-    const numberOfLines = Math.max(
-      1,
-      Math.round(rectHeight / (LINE_HEIGHT_FACTOR * declared))
-    );
-    const lineHeight = rectHeight / numberOfLines;
-    computed2 = Math.min(declared, lineHeight / LINE_HEIGHT_FACTOR);
-  } else {
-    computed2 = Math.min(declared, rectHeight / LINE_HEIGHT_FACTOR);
-  }
-  style.fontSize = `${Math.round(10 * computed2) / 10}px`;
+  const computed2 = computeFieldFontSize(
+    props.field.fontSize,
+    rect[3] - rect[1],
+    { multiLine: props.field.multiLine }
+  );
+  style.fontSize = `${computed2}px`;
   const fontStyle = decodeFontName(props.field.fontName);
   style.fontFamily = fontStyle.fontFamily;
   if (fontStyle.fontWeight !== "normal") style.fontWeight = fontStyle.fontWeight;