kviewer 0.3.3 → 0.3.5

package/dist/runtime/components/Viewer.vue

@@ -193,7 +193,8 @@ import {
   triggerRef,
   onMounted,
   onBeforeUnmount,
-  useSlots
+  useSlots,
+  provide
 } from "vue";
 import { useRuntimeConfig } from "#imports";
 import ViewerBar from "./ViewerBar.vue";
@@ -226,6 +227,7 @@ import { isIPad } from "../annotation/engine/input-device";
 import { useInertiaPanzoom } from "../composables/useInertiaPanzoom";
 import { createScriptingManager } from "../composables/useScriptingManager";
 import { createScriptingBridge } from "../composables/useScriptingBridge";
+import { SELECTION_ITEMS_KEY } from "../selection-items";
 import { provideKviewerI18n } from "../composables/useKviewerI18n";
 import { KVIEWER_LOCALES } from "../i18n/messages";
 const props = defineProps({
@@ -241,24 +243,26 @@ const props = defineProps({
   active: { type: Boolean, required: false, default: true },
   freehandGroupingDelay: { type: Number, required: false, default: 1e3 },
   formEditMode: { type: Boolean, required: false, default: void 0 },
-  roleColors: { type: Object, required: false, default: void 0 },
-  activeRoleId: { type: [String, null], required: false, default: void 0 },
   clickToSign: { type: Boolean, required: false, default: false },
   editablePlacedFields: { type: Boolean, required: false, default: false },
   fieldDefaults: { type: Object, required: false, default: void 0 },
   scripting: { type: Boolean, required: false, default: false },
   menuItems: { type: Array, required: false, default: void 0 },
+  selectionItems: { type: Array, required: false, default: void 0 },
   tools: { type: Array, required: false, default: void 0 },
   locale: { type: null, required: false, default: void 0 },
   messages: { type: Object, required: false, default: void 0 }
 });
+provide(SELECTION_ITEMS_KEY, computed(() => props.selectionItems));
 const slots = useSlots();
 const toolSlotNames = computed(
   () => Object.keys(slots).filter((name) => name.startsWith("tool-"))
 );
-const emit = defineEmits(["update:formEditMode", "update:activeRoleId", "update:viewedPages", "all-pages-read", "field-placed", "signed-status-changed"]);
+const emit = defineEmits(["update:formEditMode", "update:viewedPages", "all-pages-read", "field-placed", "field-updated", "field-removed", "signed-status-changed"]);
 const fieldPlacedCallbacks = /* @__PURE__ */ new Set();
 const signedStatusCallbacks = /* @__PURE__ */ new Set();
+const fieldUpdatedCallbacks = /* @__PURE__ */ new Set();
+const fieldRemovedCallbacks = /* @__PURE__ */ new Set();
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
 const { state: viewerState, setScrollToPageFn, setDownloadPdfFn, setPrintPdfFn, setApplyScaleFn } = provideViewerState();
@@ -287,6 +291,15 @@ watch(
 );
 const viewerSearch = provideViewerSearch();
 const formFieldsState = provideFormFields();
+formFieldsState.setFieldEventSink((event) => {
+  if (event.type === "updated") {
+    emit("field-updated", event.field, event.patch);
+    for (const cb of fieldUpdatedCallbacks) cb(event.field, event.patch);
+  } else {
+    emit("field-removed", event.field);
+    for (const cb of fieldRemovedCallbacks) cb(event.field);
+  }
+});
 const kviewerPublicConfig = useRuntimeConfig().public.kviewer;
 provideKviewerI18n(
   computed(() => {
@@ -295,13 +308,6 @@ provideKviewerI18n(
   }),
   computed(() => props.messages ?? {})
 );
-watch(
-  () => props.roleColors,
-  (v) => {
-    formFieldsState.setRoleColors(v ?? {});
-  },
-  { immediate: true }
-);
 watch(
   () => props.fieldDefaults,
   (v) => {
@@ -316,6 +322,25 @@ watch(
   },
   { immediate: true }
 );
+watch(
+  () => formFieldsState.selectedPlacedFieldId.value,
+  (id) => {
+    if (!id) return;
+    viewerState.painter.value?.clearSelection();
+    viewerState.selectedAnnotation.value = null;
+    viewerState.selectedAnnotations.value = [];
+    viewerState.selectionRect.value = null;
+  }
+);
+watch(
+  [
+    () => viewerState.selectedAnnotation.value,
+    () => viewerState.selectedAnnotations.value
+  ],
+  ([single, multi]) => {
+    if (single || multi.length > 0) formFieldsState.selectPlacedField(null);
+  }
+);
 const signatureStatus = computed(() => formFieldsState.getSignatureFieldStatus());
 const signatureStatusKey = (fields) => fields.map((s) => `${s.id}|${s.fieldName}|${s.signed ? 1 : 0}`).join(";");
 watch(signatureStatus, (next, prev) => {
@@ -324,22 +349,6 @@ watch(signatureStatus, (next, prev) => {
   emit("signed-status-changed", payload);
   for (const cb of signedStatusCallbacks) cb(payload);
 });
-watch(
-  () => props.activeRoleId,
-  (v) => {
-    if (v === void 0) return;
-    if (formFieldsState.activeRoleId.value !== v) {
-      formFieldsState.setActiveRole(v);
-    }
-  },
-  { immediate: true }
-);
-watch(
-  () => formFieldsState.activeRoleId.value,
-  (v) => {
-    if (props.activeRoleId !== v) emit("update:activeRoleId", v);
-  }
-);
 const pageSettings = providePageSettings(viewerRoot);
 const virtualization = createPageVirtualization();
 setScrollToPageFn((pageNumber) => {
@@ -969,11 +978,9 @@ onMounted(() => {
       for (const cb of fieldPlacedCallbacks) cb(def);
       viewerState.selectTool("hand");
     },
-    getFormFieldPreviewColor: () => {
-      const id = formFieldsState.activeRoleId.value;
-      if (!id) return void 0;
-      return formFieldsState.roleColors.value[id];
-    },
+    // The placement drag preview adopts the fieldColor preset of the tool's
+    // field type, so the rubber-band already shows the signer's color.
+    getFormFieldPreviewColor: (fieldType) => formFieldsState.placedFieldDefaults.value[fieldType]?.fieldColor,
     freehandGroupingDelay: props.freehandGroupingDelay,
     // Suspend panzoom gestures while an annotation is being dragged or
     // transformed. Otherwise single-finger pan runs in parallel with the
@@ -1121,10 +1128,12 @@ defineExpose({
    *  The new field is exported into the PDF on `exportPdf()` like any
    *  field placed via the placement tool. */
   addFormField: (payload) => formFieldsState.addFormField(payload),
-  /** Patch a form field by id (rect, name, flags, type-specific props). */
-  updateFormField: (id, patch) => formFieldsState.updatePlacedField(id, patch),
-  /** Remove a form field by id (drops its value too). */
-  removeFormField: (id) => formFieldsState.removePlacedField(id),
+  /** Patch a form field by id (rect, name, flags, type-specific props).
+   *  Does not fire `field-updated` — that event is for user-driven edits. */
+  updateFormField: (id, patch) => formFieldsState.updatePlacedField(id, patch, { silent: true }),
+  /** Remove a form field by id (drops its value too). Does not fire
+   *  `field-removed` — that event is for user-driven removals. */
+  removeFormField: (id) => formFieldsState.removePlacedField(id, { silent: true }),
   /** All form-field definitions (parsed, detected, and placed), flat. */
   getFormFields: () => formFieldsState.getAllFields(),
   /** Replace the per-field-type presets applied to tool placements.
@@ -1142,6 +1151,20 @@ defineExpose({
     fieldPlacedCallbacks.add(cb);
     return () => fieldPlacedCallbacks.delete(cb);
   },
+  /** Subscribe to user-driven field edits (imperative mirror of the
+   *  `field-updated` event, used by the embed bridge). Returns an
+   *  unsubscribe function. */
+  onFieldUpdated: (cb) => {
+    fieldUpdatedCallbacks.add(cb);
+    return () => fieldUpdatedCallbacks.delete(cb);
+  },
+  /** Subscribe to user-driven field removals (imperative mirror of the
+   *  `field-removed` event, used by the embed bridge). Returns an
+   *  unsubscribe function. */
+  onFieldRemoved: (cb) => {
+    fieldRemovedCallbacks.add(cb);
+    return () => fieldRemovedCallbacks.delete(cb);
+  },
   /** True once every signature field in the document is signed — via a
    *  value applied in this session or a digital signature already in the
    *  source PDF. Vacuously true when the document has no signature
@@ -1149,7 +1172,7 @@ defineExpose({
    *  need "at least one". Use to gate e.g. envelope finalization. */
   getSignedStatus: () => formFieldsState.getSignatureFieldStatus().every((s) => s.signed),
   /** Per-widget signed-state snapshot (id, fieldName, pageNumber,
-   *  signed, roleId). */
+   *  signed). Correlate to host data by `id`. */
   getSignatureFieldStatus: () => formFieldsState.getSignatureFieldStatus(),
   /** Subscribe to signed-status changes (imperative mirror of the
    *  `signed-status-changed` event, used by the embed bridge). Returns

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

@@ -3,6 +3,7 @@ import type { AddFormFieldPayload, FormFieldDefinition, IAnnotationStore, Placed
 import { type ExportPdfOptions } from '../annotation/pdf-export/export.js';
 import type { ViewerMenuItem } from '../menu-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
+import { type ViewerSelectionItem } from '../selection-items.js';
 import { type KviewerMessageOverrides } from '../composables/useKviewerI18n.js';
 import { type KviewerLocale } from '../i18n/messages.js';
 type __VLS_Props = {
@@ -25,16 +26,6 @@ type __VLS_Props = {
      *  with selection chrome, can be moved/resized, and the property panel
      *  is shown. Supports v-model via `v-model:form-edit-mode`. */
     formEditMode?: boolean;
-    /** Map of roleId → CSS color used to color-code form fields in
-     *  form-edit mode. The editor stays unopinionated about role
-     *  definitions: the host owns the role list, names, and color picker,
-     *  and just hands a flat lookup table to the viewer. Unknown or
-     *  missing ids fall back to the default blue. */
-    roleColors?: Record<string, string>;
-    /** Active role id new field placements are auto-tagged with. The host
-     *  drives this — typically by binding it to a role picker in its own
-     *  UI. Supports v-model via `v-model:active-role-id`. */
-    activeRoleId?: string | null;
     /** When true, clicking an unsigned signature field opens kviewer's own
      *  signing flow (saved signature or draw modal). Off by default so hosts
      *  that own the signing process (e.g. an embedding e-sign app) don't get
@@ -63,6 +54,11 @@ type __VLS_Props = {
      *  toggles or actions without replacing the entire header. Ignored
      *  when the host supplies a custom `#header` slot. */
     menuItems?: ViewerMenuItem[];
+    /** Custom controls appended to the floating selection popover — shown
+     *  when an annotation or a placed form field (e.g. a signature field)
+     *  is selected. Buttons and selects; every callback receives the
+     *  current selection. See {@link ViewerSelectionItem}. */
+    selectionItems?: ViewerSelectionItem[];
     /** Configures which toolbar tools render and in what order. Entries are
      *  built-in tool IDs (strings) or `{ type: 'slot', ... }` objects that
      *  inject a custom button via a `#tool-<name>` slot. When omitted, the
@@ -116,9 +112,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
      *  The new field is exported into the PDF on `exportPdf()` like any
      *  field placed via the placement tool. */
     addFormField: (payload: AddFormFieldPayload) => FormFieldDefinition;
-    /** Patch a form field by id (rect, name, flags, type-specific props). */
+    /** Patch a form field by id (rect, name, flags, type-specific props).
+     *  Does not fire `field-updated` — that event is for user-driven edits. */
     updateFormField: (id: string, patch: Partial<FormFieldDefinition>) => void;
-    /** Remove a form field by id (drops its value too). */
+    /** Remove a form field by id (drops its value too). Does not fire
+     *  `field-removed` — that event is for user-driven removals. */
     removeFormField: (id: string) => void;
     /** All form-field definitions (parsed, detected, and placed), flat. */
     getFormFields: () => FormFieldDefinition[];
@@ -132,6 +130,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
      *  `field-placed` event, used by the embed bridge). Returns an
      *  unsubscribe function. */
     onFieldPlaced: (cb: (field: FormFieldDefinition) => void) => (() => void);
+    /** Subscribe to user-driven field edits (imperative mirror of the
+     *  `field-updated` event, used by the embed bridge). Returns an
+     *  unsubscribe function. */
+    onFieldUpdated: (cb: (field: FormFieldDefinition, patch: Partial<FormFieldDefinition>) => void) => (() => void);
+    /** Subscribe to user-driven field removals (imperative mirror of the
+     *  `field-removed` event, used by the embed bridge). Returns an
+     *  unsubscribe function. */
+    onFieldRemoved: (cb: (field: FormFieldDefinition) => void) => (() => void);
     /** True once every signature field in the document is signed — via a
      *  value applied in this session or a digital signature already in the
      *  source PDF. Vacuously true when the document has no signature
@@ -139,7 +145,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
      *  need "at least one". Use to gate e.g. envelope finalization. */
     getSignedStatus: () => boolean;
     /** Per-widget signed-state snapshot (id, fieldName, pageNumber,
-     *  signed, roleId). */
+     *  signed). Correlate to host data by `id`. */
     getSignatureFieldStatus: () => SignatureFieldStatus[];
     /** Subscribe to signed-status changes (imperative mirror of the
      *  `signed-status-changed` event, used by the embed bridge). Returns
@@ -165,8 +171,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "all-pages-read": () => any;
     "field-placed": (field: FormFieldDefinition) => any;
+    "field-updated": (field: FormFieldDefinition, patch: Partial<FormFieldDefinition>) => any;
+    "field-removed": (field: FormFieldDefinition) => any;
     "update:formEditMode": (value: boolean) => any;
-    "update:activeRoleId": (value: string | null) => any;
     "update:viewedPages": (pages: number[]) => any;
     "signed-status-changed": (payload: {
         allSigned: boolean;
@@ -175,8 +182,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onAll-pages-read"?: (() => any) | undefined;
     "onField-placed"?: ((field: FormFieldDefinition) => any) | undefined;
+    "onField-updated"?: ((field: FormFieldDefinition, patch: Partial<FormFieldDefinition>) => any) | undefined;
+    "onField-removed"?: ((field: FormFieldDefinition) => any) | undefined;
     "onUpdate:formEditMode"?: ((value: boolean) => any) | undefined;
-    "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
     "onUpdate:viewedPages"?: ((pages: number[]) => any) | undefined;
     "onSigned-status-changed"?: ((payload: {
         allSigned: boolean;
@@ -198,10 +206,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
     shapeDetection: boolean;
-    roleColors: Record<string, string>;
-    activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     messages: KviewerMessageOverrides;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -8,15 +8,15 @@ type __VLS_Props = {
      *  omitted, the default toolbar is rendered. See {@link ViewerToolEntry}. */
     tools?: ViewerToolEntry[];
 };
-declare var __VLS_109: string, __VLS_110: {
+declare var __VLS_104: string, __VLS_105: {
     state: import("../composables/useViewerState.js").ViewerState;
-}, __VLS_154: string, __VLS_155: {
+}, __VLS_149: string, __VLS_150: {
     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_104>]?: (props: typeof __VLS_105) => any;
 } & {
-    [K in NonNullable<typeof __VLS_154>]?: (props: typeof __VLS_155) => any;
+    [K in NonNullable<typeof __VLS_149>]?: (props: typeof __VLS_150) => 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>;

package/dist/runtime/components/ViewerBar.vue

@@ -11,11 +11,12 @@
 
         <ZoomControls />
 
+        <!-- No MarqueeTool button: hand mode covers mouse rubber-band
+             selection; `marquee` stays available via the `tools` prop. -->
         <template v-if="!state.readonly.value">
           <USeparator orientation="vertical" class="h-5" :ui="{ border: 'border-accented' }" />
 
           <HandTool />
-          <MarqueeTool />
         </template>
 
         <div class="ml-auto flex items-center gap-2">

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

@@ -8,15 +8,15 @@ type __VLS_Props = {
      *  omitted, the default toolbar is rendered. See {@link ViewerToolEntry}. */
     tools?: ViewerToolEntry[];
 };
-declare var __VLS_109: string, __VLS_110: {
+declare var __VLS_104: string, __VLS_105: {
     state: import("../composables/useViewerState.js").ViewerState;
-}, __VLS_154: string, __VLS_155: {
+}, __VLS_149: string, __VLS_150: {
     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_104>]?: (props: typeof __VLS_105) => any;
 } & {
-    [K in NonNullable<typeof __VLS_154>]?: (props: typeof __VLS_155) => any;
+    [K in NonNullable<typeof __VLS_149>]?: (props: typeof __VLS_150) => 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>;

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 { FormFieldDefinition, PlacedFieldDefaults, SignatureFieldStatus, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import type { ViewerMenuItem } from '../menu-items.js';
+import type { ViewerSelectionItem } from '../selection-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
@@ -53,16 +54,13 @@ type __VLS_Props = {
     zoom?: number;
     /** Minimum number of tabs -- prevents closing below this count. */
     minTabs?: number;
-    /** Forwarded to every Viewer instance — see KViewer's `roleColors`. */
-    roleColors?: Record<string, string>;
-    /** Forwarded to every Viewer instance — see KViewer's `activeRoleId`.
-     *  Supports v-model via `v-model:active-role-id`. */
-    activeRoleId?: string | null;
     /** Forwarded to every Viewer instance — see KViewer's `scripting`.
      *  Per-tab override via `ViewerTabItem.scripting` wins when set. */
     scripting?: boolean;
     /** Forwarded to every Viewer instance — see KViewer's `menuItems`. */
     menuItems?: ViewerMenuItem[];
+    /** Forwarded to every Viewer instance — see KViewer's `selectionItems`. */
+    selectionItems?: ViewerSelectionItem[];
     /** Forwarded to every Viewer instance — see KViewer's `tools`. */
     tools?: ViewerToolEntry[];
     /** Forwarded to every Viewer instance — see KViewer's `clickToSign`. */
@@ -79,7 +77,7 @@ declare function addTab(item: Omit<ViewerTabItem, 'id'> & {
 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_34: {
+declare var __VLS_7: {}, __VLS_21: {}, __VLS_35: {
     tab: {
         id: string;
         label: string;
@@ -179,7 +177,7 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_34: {
         shapeDetection?: boolean | undefined;
         scripting?: boolean | undefined;
     };
-}, __VLS_37: {
+}, __VLS_38: {
     tab: {
         id: string;
         label: string;
@@ -279,21 +277,21 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_34: {
         shapeDetection?: boolean | undefined;
         scripting?: boolean | undefined;
     };
-}, __VLS_41: string, __VLS_42: {
+}, __VLS_42: string, __VLS_43: {
     state: import("../composables/useViewerState.js").ViewerState;
-}, __VLS_44: {};
+}, __VLS_45: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
+    [K in NonNullable<typeof __VLS_42>]?: (props: typeof __VLS_43) => any;
 } & {
     'tabs-leading'?: (props: typeof __VLS_7) => any;
 } & {
     'tabs-trailing'?: (props: typeof __VLS_21) => any;
 } & {
-    header?: (props: typeof __VLS_34) => any;
+    header?: (props: typeof __VLS_35) => any;
 } & {
-    footer?: (props: typeof __VLS_37) => any;
+    footer?: (props: typeof __VLS_38) => any;
 } & {
-    empty?: (props: typeof __VLS_44) => any;
+    empty?: (props: typeof __VLS_45) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     addTab: typeof addTab;
@@ -402,7 +400,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     }[];
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "field-placed": (field: FormFieldDefinition) => any;
-    "update:activeRoleId": (value: string | null) => any;
+    "field-updated": (field: FormFieldDefinition, patch: Partial<FormFieldDefinition>) => any;
+    "field-removed": (field: FormFieldDefinition) => any;
     "signed-status-changed": (payload: {
         allSigned: boolean;
         fields: SignatureFieldStatus[];
@@ -413,7 +412,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     "tab-removed": (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onField-placed"?: ((field: FormFieldDefinition) => any) | undefined;
-    "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
+    "onField-updated"?: ((field: FormFieldDefinition, patch: Partial<FormFieldDefinition>) => any) | undefined;
+    "onField-removed"?: ((field: FormFieldDefinition) => any) | undefined;
     "onSigned-status-changed"?: ((payload: {
         allSigned: boolean;
         fields: SignatureFieldStatus[];
@@ -432,10 +432,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     stamps: StampDefinition[];
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
-    roleColors: Record<string, string>;
-    activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     defaultActiveTab: string;
     minTabs: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ViewerTabs.vue

@@ -61,14 +61,14 @@
           :shape-detection="activeTab.shapeDetection ?? shapeDetection"
           :scripting="activeTab.scripting ?? scripting"
           :menu-items="menuItems"
+          :selection-items="selectionItems"
           :tools="tools"
-          :role-colors="roleColors"
-          :active-role-id="activeRoleId"
           :click-to-sign="clickToSign"
           :editable-placed-fields="editablePlacedFields"
           :field-defaults="fieldDefaults"
-          @update:active-role-id="(v) => emit('update:activeRoleId', v)"
           @field-placed="(f) => emit('field-placed', f)"
+          @field-updated="(f, p) => emit('field-updated', f, p)"
+          @field-removed="(f) => emit('field-removed', f)"
           @signed-status-changed="(p) => emit('signed-status-changed', p)"
         >
           <template v-if="$slots.header" #header>
@@ -108,10 +108,9 @@ const props = defineProps({
   viewMode: { type: String, required: false, default: "fit-width" },
   zoom: { type: Number, required: false, default: 1 },
   minTabs: { type: Number, required: false, default: 0 },
-  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 },
+  selectionItems: { type: Array, required: false, default: void 0 },
   tools: { type: Array, required: false, default: void 0 },
   clickToSign: { type: Boolean, required: false, default: false },
   editablePlacedFields: { type: Boolean, required: false, default: false },
@@ -121,7 +120,7 @@ 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", "field-placed", "signed-status-changed"]);
+const emit = defineEmits(["update:activeTab", "tab-added", "tab-close", "tab-removed", "field-placed", "field-updated", "field-removed", "signed-status-changed"]);
 let idCounter = 0;
 function generateId() {
   return `tab-${Date.now()}-${++idCounter}`;

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 { FormFieldDefinition, PlacedFieldDefaults, SignatureFieldStatus, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import type { ViewerMenuItem } from '../menu-items.js';
+import type { ViewerSelectionItem } from '../selection-items.js';
 import type { ViewerToolEntry } from '../toolbar-tools.js';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
@@ -53,16 +54,13 @@ type __VLS_Props = {
     zoom?: number;
     /** Minimum number of tabs -- prevents closing below this count. */
     minTabs?: number;
-    /** Forwarded to every Viewer instance — see KViewer's `roleColors`. */
-    roleColors?: Record<string, string>;
-    /** Forwarded to every Viewer instance — see KViewer's `activeRoleId`.
-     *  Supports v-model via `v-model:active-role-id`. */
-    activeRoleId?: string | null;
     /** Forwarded to every Viewer instance — see KViewer's `scripting`.
      *  Per-tab override via `ViewerTabItem.scripting` wins when set. */
     scripting?: boolean;
     /** Forwarded to every Viewer instance — see KViewer's `menuItems`. */
     menuItems?: ViewerMenuItem[];
+    /** Forwarded to every Viewer instance — see KViewer's `selectionItems`. */
+    selectionItems?: ViewerSelectionItem[];
     /** Forwarded to every Viewer instance — see KViewer's `tools`. */
     tools?: ViewerToolEntry[];
     /** Forwarded to every Viewer instance — see KViewer's `clickToSign`. */
@@ -79,7 +77,7 @@ declare function addTab(item: Omit<ViewerTabItem, 'id'> & {
 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_34: {
+declare var __VLS_7: {}, __VLS_21: {}, __VLS_35: {
     tab: {
         id: string;
         label: string;
@@ -179,7 +177,7 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_34: {
         shapeDetection?: boolean | undefined;
         scripting?: boolean | undefined;
     };
-}, __VLS_37: {
+}, __VLS_38: {
     tab: {
         id: string;
         label: string;
@@ -279,21 +277,21 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_34: {
         shapeDetection?: boolean | undefined;
         scripting?: boolean | undefined;
     };
-}, __VLS_41: string, __VLS_42: {
+}, __VLS_42: string, __VLS_43: {
     state: import("../composables/useViewerState.js").ViewerState;
-}, __VLS_44: {};
+}, __VLS_45: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
+    [K in NonNullable<typeof __VLS_42>]?: (props: typeof __VLS_43) => any;
 } & {
     'tabs-leading'?: (props: typeof __VLS_7) => any;
 } & {
     'tabs-trailing'?: (props: typeof __VLS_21) => any;
 } & {
-    header?: (props: typeof __VLS_34) => any;
+    header?: (props: typeof __VLS_35) => any;
 } & {
-    footer?: (props: typeof __VLS_37) => any;
+    footer?: (props: typeof __VLS_38) => any;
 } & {
-    empty?: (props: typeof __VLS_44) => any;
+    empty?: (props: typeof __VLS_45) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     addTab: typeof addTab;
@@ -402,7 +400,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     }[];
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "field-placed": (field: FormFieldDefinition) => any;
-    "update:activeRoleId": (value: string | null) => any;
+    "field-updated": (field: FormFieldDefinition, patch: Partial<FormFieldDefinition>) => any;
+    "field-removed": (field: FormFieldDefinition) => any;
     "signed-status-changed": (payload: {
         allSigned: boolean;
         fields: SignatureFieldStatus[];
@@ -413,7 +412,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     "tab-removed": (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onField-placed"?: ((field: FormFieldDefinition) => any) | undefined;
-    "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
+    "onField-updated"?: ((field: FormFieldDefinition, patch: Partial<FormFieldDefinition>) => any) | undefined;
+    "onField-removed"?: ((field: FormFieldDefinition) => any) | undefined;
     "onSigned-status-changed"?: ((payload: {
         allSigned: boolean;
         fields: SignatureFieldStatus[];
@@ -432,10 +432,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     stamps: StampDefinition[];
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
-    roleColors: Record<string, string>;
-    activeRoleId: string | null;
     editablePlacedFields: boolean;
     fieldDefaults: PlacedFieldDefaults;
+    selectionItems: ViewerSelectionItem[];
     defaultActiveTab: string;
     minTabs: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;