kviewer 0.0.11 → 0.1.1

package/dist/runtime/components/Viewer.vue

@@ -2,7 +2,7 @@
   <div ref="viewerRoot" class="flex flex-col h-full">
     <!-- Header slot: defaults to ViewerBar -->
     <slot name="header">
-      <ViewerBar />
+      <ViewerBar :menu-items="props.menuItems" />
     </slot>
 
     <div class="flex flex-1 min-h-0">
@@ -209,6 +209,8 @@ import { provideFormFields } from "../composables/useFormFields";
 import { extractCheckboxStyles, extractButtonCaptions } from "../annotation/parsers/extractCheckboxStyles";
 import { isIPad } from "../annotation/engine/input-device";
 import { useInertiaPanzoom } from "../composables/useInertiaPanzoom";
+import { createScriptingManager } from "../composables/useScriptingManager";
+import { createScriptingBridge } from "../composables/useScriptingBridge";
 const props = defineProps({
   source: { type: null, required: true },
   textLayer: { type: Boolean, required: false },
@@ -221,9 +223,13 @@ const props = defineProps({
   shapeDetection: { type: Boolean, required: false, default: false },
   active: { type: Boolean, required: false, default: true },
   freehandGroupingDelay: { type: Number, required: false, default: 1e3 },
-  formEditMode: { type: Boolean, required: false, default: void 0 }
+  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 },
+  scripting: { type: Boolean, required: false, default: false },
+  menuItems: { type: Array, required: false, default: void 0 }
 });
-const emit = defineEmits(["update:formEditMode"]);
+const emit = defineEmits(["update:formEditMode", "update:activeRoleId"]);
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
 const { state: viewerState, setScrollToPageFn, setDownloadPdfFn } = provideViewerState();
@@ -249,6 +255,29 @@ watch(
 );
 const viewerSearch = provideViewerSearch();
 const formFieldsState = provideFormFields();
+watch(
+  () => props.roleColors,
+  (v) => {
+    formFieldsState.setRoleColors(v ?? {});
+  },
+  { immediate: true }
+);
+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) => {
@@ -267,6 +296,8 @@ const searchIndex = createSearchIndex();
 const shapeDetectionCache = createShapeDetection();
 const doc = shallowRef(null);
 let painter = null;
+let scriptingManager = null;
+let scriptingBridge = null;
 const pageMetas = virtualization.pageMetas;
 const { isPageRendered } = virtualization;
 watch(
@@ -474,6 +505,33 @@ async function loadDocument() {
         totalPages: pdfDoc.numPages
       });
     });
+    if (props.scripting) {
+      try {
+        if (!scriptingManager) {
+          scriptingManager = await createScriptingManager({
+            viewerState: {
+              currentPage: viewerState.currentPage,
+              totalPages: viewerState.totalPages,
+              scale: viewerState.scale,
+              setScale: viewerState.setScale,
+              scrollToPage: viewerState.scrollToPage
+            },
+            virtualization: { isPageRendered: virtualization.isPageRendered },
+            proxyCache: { getPageSync: proxyCache.getPageSync }
+          });
+        }
+        await scriptingManager.setDocument(pdfDoc);
+        scriptingBridge = createScriptingBridge({
+          formFields: formFieldsState,
+          scripting: scriptingManager,
+          pdfDoc
+        });
+      } catch (err) {
+        console.warn("[KViewer] Failed to initialize PDF scripting sandbox:", err);
+        scriptingBridge?.destroy();
+        scriptingBridge = null;
+      }
+    }
   } catch (err) {
     viewerState.error.value = "Failed to load document";
     console.error("[KViewer] Document load error:", err);
@@ -686,6 +744,11 @@ onMounted(() => {
       formFieldsState.addPlacedField(payload);
       viewerState.selectTool("hand");
     },
+    getFormFieldPreviewColor: () => {
+      const id = formFieldsState.activeRoleId.value;
+      if (!id) return void 0;
+      return formFieldsState.roleColors.value[id];
+    },
     freehandGroupingDelay: props.freehandGroupingDelay,
     // Suspend panzoom gestures while an annotation is being dragged or
     // transformed. Otherwise single-finger pan runs in parallel with the
@@ -746,6 +809,9 @@ onMounted(() => {
 watch(
   () => props.source,
   () => {
+    scriptingBridge?.destroy();
+    scriptingBridge = null;
+    scriptingManager?.setDocument(null);
     viewerSearch.reset();
     formFieldsState.reset();
     shapeDetectionCache.clearAllShapeCache();
@@ -787,6 +853,11 @@ onBeforeUnmount(() => {
   scrollContainer.value?.removeEventListener("wheel", onWheel);
   inertiaPanzoom.detach();
   resizeObserver?.disconnect();
+  scriptingBridge?.destroy();
+  scriptingBridge = null;
+  scriptingManager?.destroy().catch(() => {
+  });
+  scriptingManager = null;
   viewerSearch.reset();
   shapeDetectionCache.clearAllShapeCache();
   searchIndex.destroy();
@@ -802,6 +873,16 @@ defineExpose({
   getKonvaCanvasState,
   getFormFieldValues: () => formFieldsState.getAllFieldValues(),
   setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value),
+  /** Add a form field programmatically. Returns the created definition.
+   *  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),
+  /** All form-field definitions (parsed, detected, and placed), flat. */
+  getFormFields: () => formFieldsState.getAllFields(),
   /** Reactive form-edit-mode flag — read with `.value`. */
   formEditMode: viewerState.formEditMode,
   /** Programmatically enter or leave form-edit mode. */

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

@@ -1,6 +1,7 @@
 import { type ViewMode } from '../composables/useViewerState.js';
-import type { IAnnotationStore, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
+import type { AddFormFieldPayload, FormFieldDefinition, IAnnotationStore, StampDefinition, SignatureHandlers } from '../annotation/engine/types.js';
 import { type ExportPdfOptions } from '../annotation/pdf-export/export.js';
+import type { ViewerMenuItem } from '../menu-items.js';
 type __VLS_Props = {
     source: string | Uint8Array | object;
     textLayer?: boolean;
@@ -21,6 +22,29 @@ 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;
+    /** Execute embedded JavaScript inside the PDF — field-level AA scripts
+     *  (Mouse Up, Calculate, Format, Validate, Keystroke), document-level
+     *  open actions, and page-level scripts. Powered by pdf.js's QuickJS
+     *  WASM sandbox (no DOM/network/host-JS escape), but arbitrary JS from
+     *  untrusted PDFs is still real attack surface — default is `false`.
+     *  Treated as read-once per document; toggling at runtime requires
+     *  changing the `source` prop or remounting the component. */
+    scripting?: boolean;
+    /** Extra items appended to the default burger menu (after Download
+     *  and the form-field-detection toggle). Use this to expose app-level
+     *  toggles or actions without replacing the entire header. Ignored
+     *  when the host supplies a custom `#header` slot. */
+    menuItems?: ViewerMenuItem[];
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
 type ImportMode = 'replace' | 'merge';
@@ -44,6 +68,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getKonvaCanvasState: typeof getKonvaCanvasState;
     getFormFieldValues: () => import("../annotation/engine/types.js").FormFieldValue[];
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
+    /** Add a form field programmatically. Returns the created definition.
+     *  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). */
+    updateFormField: (id: string, patch: Partial<FormFieldDefinition>) => void;
+    /** Remove a form field by id (drops its value too). */
+    removeFormField: (id: string) => void;
+    /** All form-field definitions (parsed, detected, and placed), flat. */
+    getFormFields: () => FormFieldDefinition[];
     /** Reactive form-edit-mode flag — read with `.value`. */
     formEditMode: import("vue").Ref<boolean, boolean>;
     /** Programmatically enter or leave form-edit mode. */
@@ -52,19 +86,25 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     toggleFormEditMode: () => boolean;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:formEditMode": (value: boolean) => any;
+    "update:activeRoleId": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:formEditMode"?: ((value: boolean) => any) | undefined;
+    "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
 }>, {
     userName: string;
     freehandGroupingDelay: number;
     zoom: number;
     readonly: boolean;
     active: boolean;
+    menuItems: ViewerMenuItem[];
+    scripting: boolean;
     stamps: StampDefinition[];
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
     shapeDetection: boolean;
     formEditMode: boolean;
+    roleColors: Record<string, string>;
+    activeRoleId: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,3 +1,9 @@
-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>;
+import type { ViewerMenuItem } from '../menu-items.js';
+type __VLS_Props = {
+    /** Extra items appended to the burger menu after the built-ins.
+     *  See {@link ViewerMenuItem}. Pure forwarding from `<KViewer>`. */
+    menuItems?: ViewerMenuItem[];
+};
+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/ViewerBar.vue

@@ -26,6 +26,39 @@
               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>
@@ -89,6 +122,9 @@ import ActionTools from "./tools/ActionTools.vue";
 import PageInfo from "./tools/PageInfo.vue";
 import SearchTool from "./tools/SearchTool.vue";
 import ToolProperties from "./tools/ToolProperties.vue";
+const props = defineProps({
+  menuItems: { type: Array, required: false }
+});
 const state = useViewerState();
 const styleVersion = ref(0);
 function bumpStyleVersion() {

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

@@ -1,3 +1,9 @@
-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>;
+import type { ViewerMenuItem } from '../menu-items.js';
+type __VLS_Props = {
+    /** Extra items appended to the burger menu after the built-ins.
+     *  See {@link ViewerMenuItem}. Pure forwarding from `<KViewer>`. */
+    menuItems?: ViewerMenuItem[];
+};
+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/ViewerTabs.d.vue.ts

@@ -1,6 +1,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';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
     id: string;
@@ -18,6 +19,9 @@ export interface ViewerTabItem {
     zoom?: number;
     /** Enable shape detection for this document. */
     shapeDetection?: boolean;
+    /** Execute embedded PDF JavaScript for this document. See KViewer's
+     *  `scripting` prop — default false, opt-in per tab. */
+    scripting?: boolean;
 }
 export interface AddTabOptions {
     /** Insert at specific index. Defaults to end. */
@@ -48,6 +52,16 @@ 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[];
 };
 declare function addTab(item: Omit<ViewerTabItem, 'id'> & {
     id?: string;
@@ -55,7 +69,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_30: {
+declare var __VLS_7: {}, __VLS_21: {}, __VLS_32: {
     tab: {
         id: string;
         label: string;
@@ -153,8 +167,9 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_30: {
         viewMode?: ViewMode | undefined;
         zoom?: number | undefined;
         shapeDetection?: boolean | undefined;
+        scripting?: boolean | undefined;
     };
-}, __VLS_33: {
+}, __VLS_35: {
     tab: {
         id: string;
         label: string;
@@ -252,18 +267,19 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_30: {
         viewMode?: ViewMode | undefined;
         zoom?: number | undefined;
         shapeDetection?: boolean | undefined;
+        scripting?: boolean | undefined;
     };
-}, __VLS_35: {};
+}, __VLS_37: {};
 type __VLS_Slots = {} & {
     'tabs-leading'?: (props: typeof __VLS_7) => any;
 } & {
     'tabs-trailing'?: (props: typeof __VLS_21) => any;
 } & {
-    header?: (props: typeof __VLS_30) => any;
+    header?: (props: typeof __VLS_32) => any;
 } & {
-    footer?: (props: typeof __VLS_33) => any;
+    footer?: (props: typeof __VLS_35) => any;
 } & {
-    empty?: (props: typeof __VLS_35) => any;
+    empty?: (props: typeof __VLS_37) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     addTab: typeof addTab;
@@ -368,13 +384,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         viewMode?: ViewMode | undefined;
         zoom?: number | undefined;
         shapeDetection?: boolean | undefined;
+        scripting?: boolean | undefined;
     }[];
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeRoleId": (value: string | null) => any;
     "update:activeTab": (id: string) => any;
     "tab-added": (tab: ViewerTabItem) => any;
     "tab-close": (id: string) => any;
     "tab-removed": (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
     "onUpdate:activeTab"?: ((id: string) => any) | undefined;
     "onTab-added"?: ((tab: ViewerTabItem) => any) | undefined;
     "onTab-close"?: ((id: string) => any) | undefined;
@@ -382,9 +401,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     userName: string;
     zoom: number;
+    menuItems: ViewerMenuItem[];
+    scripting: boolean;
     stamps: StampDefinition[];
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
+    roleColors: Record<string, string>;
+    activeRoleId: string | null;
     defaultActiveTab: string;
     minTabs: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ViewerTabs.vue

@@ -59,6 +59,11 @@
           :zoom="activeTab.zoom ?? zoom"
           :readonly="readonly"
           :shape-detection="activeTab.shapeDetection ?? shapeDetection"
+          :scripting="activeTab.scripting ?? scripting"
+          :menu-items="menuItems"
+          :role-colors="roleColors"
+          :active-role-id="activeRoleId"
+          @update:active-role-id="(v) => emit('update:activeRoleId', v)"
         >
           <template v-if="$slots.header" #header>
             <slot name="header" :tab="activeTab" />
@@ -91,9 +96,13 @@ const props = defineProps({
   shapeDetection: { type: Boolean, required: false },
   viewMode: { type: String, required: false, default: "fit-width" },
   zoom: { type: Number, required: false, default: 1 },
-  minTabs: { type: Number, required: false, default: 0 }
+  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 }
 });
-const emit = defineEmits(["update:activeTab", "tab-added", "tab-close", "tab-removed"]);
+const emit = defineEmits(["update:activeTab", "tab-added", "tab-close", "tab-removed", "update:activeRoleId"]);
 let idCounter = 0;
 function generateId() {
   return `tab-${Date.now()}-${++idCounter}`;

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

@@ -1,6 +1,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';
 export interface ViewerTabItem {
     /** Unique identifier for the tab. */
     id: string;
@@ -18,6 +19,9 @@ export interface ViewerTabItem {
     zoom?: number;
     /** Enable shape detection for this document. */
     shapeDetection?: boolean;
+    /** Execute embedded PDF JavaScript for this document. See KViewer's
+     *  `scripting` prop — default false, opt-in per tab. */
+    scripting?: boolean;
 }
 export interface AddTabOptions {
     /** Insert at specific index. Defaults to end. */
@@ -48,6 +52,16 @@ 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[];
 };
 declare function addTab(item: Omit<ViewerTabItem, 'id'> & {
     id?: string;
@@ -55,7 +69,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_30: {
+declare var __VLS_7: {}, __VLS_21: {}, __VLS_32: {
     tab: {
         id: string;
         label: string;
@@ -153,8 +167,9 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_30: {
         viewMode?: ViewMode | undefined;
         zoom?: number | undefined;
         shapeDetection?: boolean | undefined;
+        scripting?: boolean | undefined;
     };
-}, __VLS_33: {
+}, __VLS_35: {
     tab: {
         id: string;
         label: string;
@@ -252,18 +267,19 @@ declare var __VLS_7: {}, __VLS_21: {}, __VLS_30: {
         viewMode?: ViewMode | undefined;
         zoom?: number | undefined;
         shapeDetection?: boolean | undefined;
+        scripting?: boolean | undefined;
     };
-}, __VLS_35: {};
+}, __VLS_37: {};
 type __VLS_Slots = {} & {
     'tabs-leading'?: (props: typeof __VLS_7) => any;
 } & {
     'tabs-trailing'?: (props: typeof __VLS_21) => any;
 } & {
-    header?: (props: typeof __VLS_30) => any;
+    header?: (props: typeof __VLS_32) => any;
 } & {
-    footer?: (props: typeof __VLS_33) => any;
+    footer?: (props: typeof __VLS_35) => any;
 } & {
-    empty?: (props: typeof __VLS_35) => any;
+    empty?: (props: typeof __VLS_37) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     addTab: typeof addTab;
@@ -368,13 +384,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         viewMode?: ViewMode | undefined;
         zoom?: number | undefined;
         shapeDetection?: boolean | undefined;
+        scripting?: boolean | undefined;
     }[];
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeRoleId": (value: string | null) => any;
     "update:activeTab": (id: string) => any;
     "tab-added": (tab: ViewerTabItem) => any;
     "tab-close": (id: string) => any;
     "tab-removed": (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:activeRoleId"?: ((value: string | null) => any) | undefined;
     "onUpdate:activeTab"?: ((id: string) => any) | undefined;
     "onTab-added"?: ((tab: ViewerTabItem) => any) | undefined;
     "onTab-close"?: ((id: string) => any) | undefined;
@@ -382,9 +401,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     userName: string;
     zoom: number;
+    menuItems: ViewerMenuItem[];
+    scripting: boolean;
     stamps: StampDefinition[];
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
+    roleColors: Record<string, string>;
+    activeRoleId: string | null;
     defaultActiveTab: string;
     minTabs: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -6,7 +6,8 @@
   'kviewer-form-field--placed': isPlaced,
   'kviewer-form-field--selected': props.selected
 }"
-    :style="positionStyle"
+    :style="[positionStyle, { '--kvw-field-color': chromeColor }]"
+    :data-element-id="props.field.id"
   >
     <div
       class="kviewer-form-field__body"
@@ -34,6 +35,7 @@
 <script setup>
 import { computed } from "vue";
 import { useViewerState } from "../../composables/useViewerState";
+import { useFormFields } from "../../composables/useFormFields";
 import FormTextField from "./FormTextField.vue";
 import FormCheckbox from "./FormCheckbox.vue";
 import FormRadioButton from "./FormRadioButton.vue";
@@ -51,9 +53,15 @@ const props = defineProps({
 });
 const emit = defineEmits(["select"]);
 const state = useViewerState();
+const formFields = useFormFields();
 const isPlaced = computed(() => props.field.origin === "placed");
 const isFormEditMode = computed(() => state.formEditMode.value);
 const showChrome = computed(() => isFormEditMode.value);
+const chromeColor = computed(() => {
+  const id = props.field.roleId;
+  if (!id) return "#1677ff";
+  return formFields.roleColors.value[id] ?? "#1677ff";
+});
 const positionStyle = computed(() => {
   const rect = props.field.rect;
   const vx = props.viewOffsetX ?? 0;
@@ -73,5 +81,5 @@ const positionStyle = computed(() => {
 </script>
 
 <style>
-.kviewer-form-field__body{height:100%;width:100%}.kviewer-form-field__body--locked{pointer-events:none}.kviewer-form-field--editable{outline:1px dashed rgba(22,119,255,.45);outline-offset:0}.kviewer-form-field--editable.kviewer-form-field--placed{outline-color:rgba(22,119,255,.75)}.kviewer-form-field--editable.kviewer-form-field--selected{outline:none}
+.kviewer-form-field__body{height:100%;width:100%}.kviewer-form-field__body--locked{pointer-events:none}.kviewer-form-field--editable{outline:1px dashed color-mix(in srgb,var(--kvw-field-color,#1677ff) 45%,transparent);outline-offset:0}.kviewer-form-field--editable.kviewer-form-field--placed{outline-color:color-mix(in srgb,var(--kvw-field-color,#1677ff) 75%,transparent)}.kviewer-form-field--editable.kviewer-form-field--selected{outline:none}
 </style>

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

@@ -127,5 +127,5 @@ function onHandlePointerDown(e, name) {
 </script>
 
 <style>
-.kviewer-placed-chrome{cursor:move;inset:0;pointer-events:auto;position:absolute;touch-action:none}.kviewer-placed-chrome--selected{outline:1.5px dashed #1677ff;outline-offset:0}.kviewer-placed-chrome__grip{align-items:center;background:rgba(22,119,255,.15);border:1px solid rgba(22,119,255,.4);border-radius:calc(3px*var(--kvw-handle-zoom, 1));bottom:calc(100% + 3px*var(--kvw-handle-zoom, 1));color:#1677ff;cursor:move;display:flex;font-size:calc(9px*var(--kvw-handle-zoom, 1));gap:calc(3px*var(--kvw-handle-zoom, 1));height:calc(16px*var(--kvw-handle-zoom, 1));left:0;line-height:1;overflow:hidden;padding:0 calc(6px*var(--kvw-handle-zoom, 1)) 0 calc(2px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;right:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.kviewer-placed-chrome__grip-dots{color:#1677ff;flex:0 0 auto;height:calc(10px*var(--kvw-handle-zoom, 1));width:calc(10px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__grip-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kviewer-placed-chrome__handle{background:#fff;border:1px solid #1677ff;border-radius:2px;height:calc(8px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;touch-action:none;width:calc(8px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle:before{content:"";inset:calc(-8px*var(--kvw-handle-zoom, 1));position:absolute}.kviewer-placed-chrome__handle--n{left:50%;top:calc(-4px*var(--kvw-handle-zoom, 1));transform:translateX(-50%)}.kviewer-placed-chrome__handle--s{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:50%;transform:translateX(-50%)}.kviewer-placed-chrome__handle--e{right:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--w{left:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--ne{right:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--nw{left:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--se{bottom:calc(-4px*var(--kvw-handle-zoom, 1));right:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--sw{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:calc(-4px*var(--kvw-handle-zoom, 1))}
+.kviewer-placed-chrome{cursor:move;inset:0;pointer-events:auto;position:absolute;touch-action:none}.kviewer-placed-chrome--selected{outline:1.5px dashed var(--kvw-field-color,#1677ff);outline-offset:0}.kviewer-placed-chrome__grip{align-items:center;background:color-mix(in srgb,var(--kvw-field-color,#1677ff) 15%,transparent);border:1px solid color-mix(in srgb,var(--kvw-field-color,#1677ff) 40%,transparent);border-radius:calc(3px*var(--kvw-handle-zoom, 1));bottom:calc(100% + 3px*var(--kvw-handle-zoom, 1));color:var(--kvw-field-color,#1677ff);cursor:move;display:flex;font-size:calc(9px*var(--kvw-handle-zoom, 1));gap:calc(3px*var(--kvw-handle-zoom, 1));height:calc(16px*var(--kvw-handle-zoom, 1));left:0;line-height:1;overflow:hidden;padding:0 calc(6px*var(--kvw-handle-zoom, 1)) 0 calc(2px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;right:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.kviewer-placed-chrome__grip-dots{color:var(--kvw-field-color,#1677ff);flex:0 0 auto;height:calc(10px*var(--kvw-handle-zoom, 1));width:calc(10px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__grip-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kviewer-placed-chrome__handle{background:#fff;border:1px solid var(--kvw-field-color,#1677ff);border-radius:2px;height:calc(8px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;touch-action:none;width:calc(8px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle:before{content:"";inset:calc(-8px*var(--kvw-handle-zoom, 1));position:absolute}.kviewer-placed-chrome__handle--n{left:50%;top:calc(-4px*var(--kvw-handle-zoom, 1));transform:translateX(-50%)}.kviewer-placed-chrome__handle--s{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:50%;transform:translateX(-50%)}.kviewer-placed-chrome__handle--e{right:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--w{left:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--ne{right:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--nw{left:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--se{bottom:calc(-4px*var(--kvw-handle-zoom, 1));right:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--sw{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:calc(-4px*var(--kvw-handle-zoom, 1))}
 </style>

package/dist/runtime/composables/useAnnotationEngine.d.ts

@@ -5,6 +5,7 @@ export declare function createAnnotationEngine(viewerState: ViewerState, options
     onRequestTextInput: PainterCallbacks['onRequestTextInput'];
     onRequestDeleteConfirm?: PainterCallbacks['onRequestDeleteConfirm'];
     onPlaceField?: PainterCallbacks['onPlaceField'];
+    getFormFieldPreviewColor?: PainterCallbacks['getFormFieldPreviewColor'];
     freehandGroupingDelay?: number;
     setExternalGesturesEnabled?: (enabled: boolean) => void;
 }): Painter;

package/dist/runtime/composables/useAnnotationEngine.js

@@ -61,7 +61,8 @@ export function createAnnotationEngine(viewerState, options) {
     },
     onRequestTextInput: options.onRequestTextInput,
     onRequestDeleteConfirm: options.onRequestDeleteConfirm,
-    onPlaceField: options.onPlaceField
+    onPlaceField: options.onPlaceField,
+    getFormFieldPreviewColor: options.getFormFieldPreviewColor
   };
   const painter = new Painter({
     userName: options.userName ?? "User",