@epam/pdf-highlighter-kit 0.0.6 → 0.0.8

package/README.md

@@ -91,10 +91,20 @@ export interface BBox {
   page: number;
 }
 
+export interface BBoxDimensions {
+  width: number;
+  height: number;
+}
+
+export type BBoxOrigin = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export type InteractionMode = 'select' | 'highlight' | 'hybrid';
+
 export interface HighlightStyle {
   backgroundColor: string;
   borderColor?: string;
   borderWidth?: string;
+  outline?: string;
   opacity?: number;
   hoverOpacity?: number;
   pulseAnimation?: boolean;
@@ -102,20 +112,30 @@ export interface HighlightStyle {
 
 export interface HighlightLabelStyle {
   fontSize?: string | number;
+  opacity?: number;
   color?: string;
   backgroundColor?: string;
   padding?: string;
-  borderRadius?: string;
+  borderRadius?: string; // e.g. '2px' or shorthand '2px 2px 0 0'
   fontFamily?: string;
   fontWeight?: string | number;
   border?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  outline?: string;
   whiteSpace?: string;
   iconSize?: string | number; // size for beforeIcon (e.g. 14 or '14px')
+  iconColor?: string;
+  offsetLeft?: number;
+  offsetTop?: number;
+  outlineRight?: string;
 }
 
 export interface InputHighlightData {
   id: string;
   bboxes: BBox[];
+  bboxOrigin?: BBoxOrigin;
+  bboxSourceDimensions?: BBoxDimensions;
   style?: HighlightStyle;
   label?: string;
   beforeIcon?: string; // inline SVG string (trusted content only, e.g. Tabler icons)
@@ -125,12 +145,29 @@ export interface InputHighlightData {
 }
 ```
 
+If `bboxSourceDimensions` is provided, each bbox coordinate is recalculated against the actual page size:
+
+```ts
+scaledX = (x / bboxSourceDimensions.width) * actualPageWidth;
+scaledY = (y / bboxSourceDimensions.height) * actualPageHeight;
+```
+
+Priority (highest to lowest):
+
+- `highlight.bboxOrigin` / `highlight.bboxSourceDimensions`
+- global viewer options (`bboxOrigin`, `bboxSourceDimensions`)
+
 ## Configuration Options
 
-### ViewerConfig
+### ViewerOptions
 
 ```ts
-interface ViewerConfig {
+export interface HighlightsConfig {
+  enableMultilineHover?: boolean;
+  defaultStyle?: HighlightStyle;
+}
+
+export interface ViewerOptions {
   // Enable text selection functionality
   enableTextSelection?: boolean;
 
@@ -144,22 +181,23 @@ interface ViewerConfig {
   maxCachedPages?: number;
 
   // Interaction mode: 'select' | 'highlight' | 'hybrid'
-  interactionMode?: 'select' | 'highlight' | 'hybrid';
+  interactionMode?: InteractionMode;
 
-  // Custom styles configuration (viewer/selection CSS). Highlight styles are per-highlight.
-  customStyles?: StyleConfig;
+  // Performance mode (smaller frame budget)
+  performanceMode?: boolean;
 
-  // PDF.js worker source URL
-  workerSrc?: string;
+  // Enable accessibility helpers
+  accessibility?: boolean;
 
   // Highlight UI config (style is per highlight)
-  highlightsConfig?: {
-    enableMultilineHover?: boolean;
-  };
+  highlightsConfig?: HighlightsConfig;
 
   // Coordinate origin for incoming bbox values
   // Default: 'bottom-right'
-  bboxOrigin?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  bboxOrigin?: BBoxOrigin;
+
+  // Page dimensions for which bbox coordinates were calculated
+  bboxSourceDimensions?: BBoxDimensions;
 }
 ```
 
@@ -167,11 +205,11 @@ interface ViewerConfig {
 
 ### Main Methods
 
-#### `init(container: HTMLElement, config?: ViewerConfig): Promise<void>`
+#### `init(container: HTMLElement, config?: ViewerOptions): Promise<void>`
 
 Initialize the viewer with a container element and optional configuration.
 
-#### `loadPDF(source: string | ArrayBuffer): Promise<void>`
+#### `loadPDF(source: string | ArrayBuffer | Blob): Promise<void>`
 
 Load a PDF document from URL or ArrayBuffer.
 
@@ -187,22 +225,19 @@ Add a single highlight (incremental update).
 
 Remove highlight by its `id`.
 
-#### `updateHighlightStyle(termId: string, stylePatch: Partial<HighlightStyle>): void`
-
-Update highlight style by id (patch merge).
+#### `updateHighlightStyle(termId: string, stylePatch: Partial<HighlightStyle>, labelStylePatch?: Partial<HighlightLabelStyle>): void`
 
-#### `goToHighlight(termId: string, bboxIndex?: number): void`
+Update highlight style by id (patch merge). Optionally pass `labelStylePatch` to update label styles as well.
 
-Navigate to a specific highlight occurrence. `bboxIndex` defaults to `0`.
+#### `goToHighlight(termId: string, occurrenceIndex?: number): void`
 
-#### `nextHighlight(termId?: string): void` / `previousHighlight(termId?: string): void`
+Navigate to a specific highlight occurrence. `occurrenceIndex` defaults to `0`.
 
-Navigate across highlight occurrences:
+#### `nextHighlight(): void` / `previousHighlight(): void`
 
-- without `termId` → across all highlights in document order
-- with `termId` → only within that highlight’s occurrences
+Navigate across all highlight occurrences in document order.
 
-#### `goToPage(pageNumber: number): void`
+#### `setPage(pageNumber: number): void`
 
 Navigate to a specific page (1-based).
 
@@ -210,7 +245,7 @@ Navigate to a specific page (1-based).
 
 Zoom in or out of the PDF.
 
-#### `setZoom(scale: number): void`
+#### `setZoom(value: ZoomMode | number): void`
 
 Set a specific zoom level (e.g., 1.0 for 100%, 1.5 for 150%).
 
@@ -240,7 +275,7 @@ viewer.addEventListener('pdfLoaded', (e) => {
 });
 
 viewer.addEventListener('pageChanged', (e) => {
-  console.log('Current page:', e.pageNumber);
+  console.log('Current page:', e.currentPage);
 });
 
 viewer.addEventListener('zoomChanged', (e) => {
@@ -256,7 +291,7 @@ viewer.addEventListener('renderError', (e) => {
 });
 
 viewer.addEventListener('highlightsLoaded', (e) => {
-  console.log('Highlights loaded:', e.data?.length ?? 0);
+  console.log('Highlights loaded:', e.count);
 });
 
 viewer.addEventListener('highlightHover', (e) => {

package/dist/PDFHighlightViewer.d.ts

@@ -1,5 +1,6 @@
 import { PDFHighlightViewer as IPDFHighlightViewer } from './api';
-import { ViewerOptions, TextRange, SelectionWithMetadata, PerformanceMetrics, HighlightAnalytics, AccessibilityFeatures, InteractionMode, InputHighlightData, HighlightStyle, ZoomValue, ThumbnailOptions } from './types';
+import { ViewerOptions, TextRange, SelectionWithMetadata, PerformanceMetrics, HighlightAnalytics, AccessibilityFeatures, InteractionMode, InputHighlightData, HighlightStyle, HighlightLabelStyle, ZoomValue, ThumbnailOptions } from './types';
+type EventCallback = (data?: unknown) => void;
 export declare class PDFHighlightViewer implements IPDFHighlightViewer {
     private pdfEngine;
     private viewportManager;
@@ -105,7 +106,7 @@ export declare class PDFHighlightViewer implements IPDFHighlightViewer {
     loadHighlights(data: InputHighlightData[]): void;
     addHighlight(highlight: InputHighlightData): void;
     removeHighlight(termId: string): void;
-    updateHighlightStyle(termId: string, stylePatch: Partial<HighlightStyle>): void;
+    updateHighlightStyle(termId: string, stylePatch: Partial<HighlightStyle>, labelStylePatch?: Partial<HighlightLabelStyle>): void;
     /**
      * Update unified layer for a specific page
      */
@@ -150,9 +151,9 @@ export declare class PDFHighlightViewer implements IPDFHighlightViewer {
     enableProfiling(): void;
     disableProfiling(): void;
     accessibility: AccessibilityFeatures;
-    addEventListener(event: string, callback: (...args: any[]) => void): void;
-    removeEventListener(event: string, callback: (...args: any[]) => void): void;
-    emit(event: string, data?: any): void;
+    addEventListener(event: string, callback: EventCallback): void;
+    removeEventListener(event: string, callback: EventCallback): void;
+    emit(event: string, data?: unknown): void;
     exportAsImage(format?: 'png' | 'jpeg', quality?: number): Promise<Blob>;
     getViewport(): {
         pageNumber: number;
@@ -173,6 +174,8 @@ export declare class PDFHighlightViewer implements IPDFHighlightViewer {
     private addHighlightsToPage;
     private getHighlightById;
     private getHighlightStyle;
+    private getLabelOffsets;
+    private getLabelsForTerm;
     private getHighlightElements;
     /**
      * Update highlights colors for specified page

package/dist/PDFHighlightViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PDFHighlightViewer.d.ts","sourceRoot":"","sources":["../src/PDFHighlightViewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,IAAI,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,aAAa,EAIb,SAAS,EACT,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAElB,cAAc,EACd,SAAS,EAET,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAajB,qBAAa,kBAAmB,YAAW,mBAAmB;IAC5D,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,oBAAoB,CAAuB;IAEnD,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,cAAc,CAAkC;IAExD,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,eAAe,CAKrB;IACF,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,YAAY,CAAO;IAC3B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,QAAQ,CAAM;IAEtB,OAAO,CAAC,cAAc,CAAwD;IAC9E,OAAO,CAAC,iBAAiB,CAAO;IAEhC,OAAO,CAAC,cAAc,CAA+D;IACrF,OAAO,CAAC,cAAc,CAA6B;IACnD,OAAO,CAAC,SAAS,CAKf;;IAyCI,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAgC1E;;OAEG;IACH,OAAO,CAAC,cAAc;IAgBtB;;OAEG;IACH,OAAO,CAAC,OAAO;IAiHf;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,YAAY;IA8DpB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAW9B;;OAEG;YACW,iBAAiB;IAmB/B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAY1B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAoC1B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAgCjE;;OAEG;YACW,oBAAoB;IA6BlC;;OAEG;YACW,gBAAgB;YAyBhB,qBAAqB;IAoBnC;;OAEG;YACW,UAAU;IAgDxB,YAAY,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAMlD,OAAO,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAQjC,OAAO,IAAI,MAAM;IAIjB,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAU/B,OAAO,CAAC,SAAS;YAUH,WAAW;YAKX,cAAc;YAKd,gBAAgB;IAW9B,MAAM,IAAI,IAAI;IAId,OAAO,IAAI,IAAI;IAIf,SAAS,IAAI,IAAI;IAIjB,cAAc,IAAI,MAAM;IAIxB,aAAa,IAAI,MAAM;IAIjB,aAAa,CACjB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,CAAC,EAAE,gBAAgB,GACzB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAIpC,oBAAoB,CACxB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,CAAC,EAAE,gBAAgB,GACzB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAc/B;;OAEG;IACH,mBAAmB,IAAI,IAAI;IAe3B;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAgB5B;;OAEG;IACH,mBAAmB,IAAI,OAAO;IAU9B;;OAEG;IACH,sBAAsB,IAAI,OAAO;IAQjC,cAAc,CAAC,IAAI,EAAE,kBAAkB,EAAE,GAAG,IAAI;IAchD,YAAY,CAAC,SAAS,EAAE,kBAAkB,GAAG,IAAI;IA4BjD,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IA4BrC,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAkC/E;;OAEG;IACH,OAAO,CAAC,sBAAsB;IA6B9B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAmB9B;;OAEG;YACW,oBAAoB;IA0DlC,aAAa;sBACC,IAAI;uBAIH,IAAI;4BAIC,MAAM;uCAKK,qBAAqB,GAAG,IAAI;8BAIrC,IAAI;4BAIJ,SAAS,KAAG,IAAI;iCAKZ,OAAO,GAAG,WAAW,GAAG,UAAU,KAAa,IAAI;+CAQpC,cAAc,KAAG,kBAAkB,GAAG,IAAI;MAuBjF;IAMF,OAAO,CAAC,iBAAiB;IAiCzB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,SAAI,GAAG,IAAI;IAkCxD,aAAa,IAAI,IAAI;IASrB,iBAAiB,IAAI,IAAI;IASzB,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAyB9D,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,kBAAkB,EAAE;IAwBrD,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI;IAI/C,kBAAkB,IAAI,eAAe;IAQrC,qBAAqB,IAAI,kBAAkB;IAmB3C;;OAEG;IACH,cAAc,IAAI;QAChB,aAAa,EAAE,MAAM,CAAC;QACtB,UAAU,EAAE,MAAM,CAAC;QACnB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,gBAAgB,EAAE,MAAM,CAAC;KAC1B;IAaD,YAAY,IAAI,kBAAkB;IAIlC,eAAe,IAAI,IAAI;IAKvB,gBAAgB,IAAI,IAAI;IASxB,aAAa,EAAE,qBAAqB,CAgClC;IAMF,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG,IAAI;IAIzE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG,IAAI;IAS5E,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,GAAG,IAAI;IAgBrC,aAAa,CAAC,MAAM,GAAE,KAAK,GAAG,MAAc,EAAE,OAAO,SAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAyB3E,WAAW;;;;;;;;;;;IAcX,OAAO,IAAI,IAAI;IAWf,OAAO,CAAC,4BAA4B;IAapC;;OAEG;YACW,mBAAmB;IAmLjC,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,oBAAoB;IAQ5B;;SAEK;IACL,sBAAsB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE;IAgDhE;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAShC,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,oBAAoB;IAmC5B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAM9B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,wBAAwB;IAKhC;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IASvB;;OAEG;IACH,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IA4C3C;;OAEG;IACH,6BAA6B,CAAC,oBAAoB,UAAO,GAAG,IAAI;IA8ChE;;OAEG;YACW,kBAAkB;IAyIhC;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAwClC;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAmD5B,OAAO,IAAI,IAAI;CAsBhB;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"PDFHighlightViewer.d.ts","sourceRoot":"","sources":["../src/PDFHighlightViewer.ts"],"names":[],"mappings":"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"}

package/dist/PDFHighlightViewer.js

@@ -5,8 +5,8 @@ import { UnifiedLayerBuilder } from './core/unified-layer-builder';
 import { UnifiedInteractionHandler } from './core/interaction-handler';
 import { PerformanceOptimizer } from './core/performance-optimizer';
 import { buildHighlightsIndex } from './utils/highlight-adapter';
-import { applyLabelStyle, applyIconStyle, normalizeSize } from './utils/label-style';
-import { sanitizeIconHtml } from './utils/sanitize-icon-html';
+import { applyHighlightVisualStyle, getHighlightBaseOpacity, getHighlightHoverOpacity, resolveHighlightStyle, } from './utils/highlight-style';
+import { appendLabelIcon, applyBaseOutlineStyle, applyLabelOutlineStyle, applyLabelStyle, } from './utils/label-style';
 const CONTAINER_PADDING = 40;
 const ZOOM_STEP = 1.2;
 export class PDFHighlightViewer {
@@ -797,7 +797,7 @@ export class PDFHighlightViewer {
         }
         this.emit('highlightRemoved', { termId, pages: Array.from(affectedPages) });
     }
-    updateHighlightStyle(termId, stylePatch) {
+    updateHighlightStyle(termId, stylePatch, labelStylePatch) {
         const prev = this.highlightsIndex.byId.get(termId);
         if (!prev)
             return;
@@ -807,6 +807,12 @@ export class PDFHighlightViewer {
                 ...(prev.style ?? {}),
                 ...stylePatch,
             },
+            labelStyle: labelStylePatch
+                ? {
+                    ...(prev.labelStyle ?? {}),
+                    ...labelStylePatch,
+                }
+                : prev.labelStyle,
         };
         const affectedPages = new Set();
         prev.bboxes.forEach((b) => affectedPages.add(b.page));
@@ -837,7 +843,7 @@ export class PDFHighlightViewer {
         const normalizedHighlights = this.highlightsIndex.highlights.map((highlight) => ({
             ...highlight,
             bboxes: highlight.bboxes.map((bbox) => {
-                const normalized = this.normalizeBBoxForPage(bbox, bbox.page);
+                const normalized = this.normalizeBBoxForPage(bbox, bbox.page, highlight.bboxSourceDimensions, highlight.bboxOrigin);
                 return {
                     ...bbox,
                     x1: normalized.x1,
@@ -925,7 +931,7 @@ export class PDFHighlightViewer {
         for (const h of this.highlightsIndex.highlights) {
             for (let i = 0; i < h.bboxes.length; i++) {
                 const b = h.bboxes[i];
-                const normalized = this.normalizeBBoxForPage(b, b.page);
+                const normalized = this.normalizeBBoxForPage(b, b.page, h.bboxSourceDimensions, h.bboxOrigin);
                 list.push({
                     termId: h.id,
                     pageNumber: b.page,
@@ -946,7 +952,7 @@ export class PDFHighlightViewer {
         if (!bbox)
             return;
         const page = bbox.page;
-        const normalizedBBox = this.normalizeBBoxForPage(bbox, page);
+        const normalizedBBox = this.normalizeBBoxForPage(bbox, page, highlight.bboxSourceDimensions, highlight.bboxOrigin);
         this.highlightSelectedTerm(termId);
         this.setPage(page);
         void this.renderPage(page)
@@ -1174,14 +1180,12 @@ export class PDFHighlightViewer {
             highlightLayer.style.pointerEvents = 'none';
             for (const highlight of this.highlightsIndex.highlights) {
                 const style = highlight.style;
-                const backgroundColor = style?.backgroundColor ?? '#666666';
-                const borderColor = style?.borderColor ?? backgroundColor;
-                const borderWidth = style?.borderWidth ?? '1px';
+                const resolvedStyle = resolveHighlightStyle(style);
                 for (let bboxIndex = 0; bboxIndex < highlight.bboxes.length; bboxIndex++) {
                     const bbox = highlight.bboxes[bboxIndex];
                     if (bbox.page !== pageNumber)
                         continue;
-                    const normalizedBBox = this.normalizeBBoxForPage(bbox, pageNumber);
+                    const normalizedBBox = this.normalizeBBoxForPage(bbox, pageNumber, highlight.bboxSourceDimensions, highlight.bboxOrigin);
                     const highlightDiv = document.createElement('div');
                     highlightDiv.className = 'highlight';
                     highlightDiv.setAttribute('data-term-id', highlight.id);
@@ -1196,62 +1200,108 @@ export class PDFHighlightViewer {
                     highlightDiv.style.top = `${top}px`;
                     highlightDiv.style.width = `${width}px`;
                     highlightDiv.style.height = `${height}px`;
-                    highlightDiv.style.backgroundColor = backgroundColor;
-                    highlightDiv.style.border = `${borderWidth} solid ${borderColor}`;
                     highlightDiv.style.pointerEvents = 'auto';
                     highlightDiv.style.cursor = 'pointer';
                     highlightDiv.style.boxSizing = 'border-box';
                     highlightDiv.style.userSelect = 'none';
-                    highlightDiv.style.mixBlendMode = 'multiply';
-                    const baseOpacity = typeof style?.opacity === 'number' ? style.opacity : 0.3;
+                    const highlightVisual = document.createElement('span');
+                    highlightVisual.className = 'highlight-visual';
+                    applyHighlightVisualStyle(highlightVisual, resolvedStyle);
+                    applyBaseOutlineStyle(highlightVisual, style);
+                    highlightDiv.appendChild(highlightVisual);
+                    const baseOpacity = getHighlightBaseOpacity(style);
                     const overlappingCount = this.countOverlappingHighlights(highlightLayer, normalizedBBox, scale);
                     const effectiveOpacity = Math.max(0.05, baseOpacity / Math.max(1, overlappingCount * 0.7));
-                    highlightDiv.style.opacity = effectiveOpacity.toString();
+                    highlightVisual.style.opacity = effectiveOpacity.toString();
                     highlightDiv.dataset.originalOpacity = effectiveOpacity.toString();
-                    const hoverOpacity = typeof style?.hoverOpacity === 'number'
-                        ? style.hoverOpacity
-                        : Math.min(0.6, effectiveOpacity + 0.2);
-                    const labelColor = style?.borderColor ?? style?.backgroundColor ?? '#666666';
+                    const hoverOpacity = getHighlightHoverOpacity(style, effectiveOpacity);
+                    const termLabelsSelector = `.highlight-label[data-term-id="${highlight.id}"]`;
                     highlightDiv.addEventListener('mouseenter', () => {
                         if (this.options.highlightsConfig?.enableMultilineHover) {
                             const same = highlightLayer.querySelectorAll(`.highlight[data-term-id="${highlight.id}"]`);
-                            same.forEach((el) => (el.style.opacity = String(hoverOpacity)));
+                            same.forEach((el) => {
+                                const htmlEl = el;
+                                const visual = htmlEl.querySelector('.highlight-visual');
+                                if (visual)
+                                    visual.style.opacity = String(hoverOpacity);
+                            });
+                            this.getLabelsForTerm(highlightLayer, highlight.id).forEach((sameLabel) => {
+                                sameLabel.style.opacity = String(hoverOpacity);
+                            });
                             const other = highlightLayer.querySelectorAll(`.highlight[data-term-id]:not([data-term-id="${highlight.id}"])`);
-                            other.forEach((el) => (el.style.opacity = '0.1'));
+                            other.forEach((el) => {
+                                const htmlEl = el;
+                                const visual = htmlEl.querySelector('.highlight-visual');
+                                if (visual)
+                                    visual.style.opacity = '0.1';
+                            });
+                            highlightLayer
+                                .querySelectorAll(`.highlight-label:not([data-term-id="${highlight.id}"])`)
+                                .forEach((otherLabel) => {
+                                otherLabel.style.opacity = '0.1';
+                            });
                         }
                         else {
-                            highlightDiv.style.opacity = String(hoverOpacity);
-                        }
-                        const labelEl = highlightDiv.querySelector('.highlight-label');
-                        if (labelEl) {
-                            labelEl.style.borderColor = borderColor;
+                            highlightVisual.style.opacity = String(hoverOpacity);
                         }
+                        highlightLayer.querySelectorAll(termLabelsSelector).forEach((labelEl) => {
+                            labelEl.style.opacity = String(hoverOpacity);
+                        });
                     });
                     highlightDiv.addEventListener('mouseleave', () => {
                         if (this.options.highlightsConfig?.enableMultilineHover) {
                             const all = highlightLayer.querySelectorAll('.highlight[data-term-id]');
+                            const baseOpacityByTermId = new Map();
                             all.forEach((el) => {
-                                const original = el.dataset.originalOpacity ?? '0.3';
-                                el.style.opacity = original;
+                                const htmlEl = el;
+                                const original = htmlEl.dataset.originalOpacity ?? '0.3';
+                                const visual = htmlEl.querySelector('.highlight-visual');
+                                if (visual)
+                                    visual.style.opacity = original;
+                                const termId = htmlEl.getAttribute('data-term-id');
+                                if (termId) {
+                                    baseOpacityByTermId.set(termId, original);
+                                }
+                            });
+                            highlightLayer
+                                .querySelectorAll('.highlight-label')
+                                .forEach((allLabel) => {
+                                const allTermId = allLabel.getAttribute('data-term-id');
+                                if (!allTermId)
+                                    return;
+                                const fallbackBaseOpacity = baseOpacityByTermId.get(allTermId);
+                                if (fallbackBaseOpacity !== undefined) {
+                                    allLabel.style.opacity = fallbackBaseOpacity;
+                                    return;
+                                }
+                                const allHighlight = this.getHighlightById(allTermId);
+                                allLabel.style.opacity = String(typeof allHighlight?.style?.opacity === 'number'
+                                    ? allHighlight.style.opacity
+                                    : 0.3);
                             });
                         }
                         else {
-                            highlightDiv.style.opacity = highlightDiv.dataset.originalOpacity ?? '0.3';
-                        }
-                        const labelEl = highlightDiv.querySelector('.highlight-label');
-                        if (labelEl) {
-                            labelEl.style.borderColor = labelColor;
+                            highlightVisual.style.opacity = highlightDiv.dataset.originalOpacity ?? '0.3';
                         }
+                        highlightLayer.querySelectorAll(termLabelsSelector).forEach((labelEl) => {
+                            labelEl.style.opacity = String(effectiveOpacity);
+                        });
                     });
                     highlightLayer.appendChild(highlightDiv);
                     if (highlight.label || highlight.beforeIcon) {
                         const labelEl = document.createElement('span');
                         labelEl.className = 'highlight-label';
                         labelEl.setAttribute('data-term-id', highlight.id);
+                        labelEl.setAttribute('data-bbox-index', String(bboxIndex));
+                        labelEl.dataset.baseLeft = String(left);
+                        labelEl.dataset.baseTop = String(top);
+                        const { left: labelOffsetLeft, top: labelOffsetTop } = this.getLabelOffsets(highlight.labelStyle);
                         labelEl.style.position = 'absolute';
-                        labelEl.style.left = '0';
+                        labelEl.style.left = `${left + labelOffsetLeft}px`;
+                        labelEl.style.top = `${top + labelOffsetTop}px`;
+                        labelEl.style.boxSizing = 'border-box';
+                        labelEl.style.zIndex = '3';
                         labelEl.style.transform = 'translateX(-100%)';
-                        labelEl.style.top = '-1px';
                         labelEl.style.display = 'flex';
                         labelEl.style.alignItems = 'center';
                         labelEl.style.justifyContent = 'flex-end';
@@ -1259,28 +1309,20 @@ export class PDFHighlightViewer {
                         labelEl.style.pointerEvents = 'auto';
                         labelEl.style.cursor = 'pointer';
                         labelEl.style.whiteSpace = 'nowrap';
-                        labelEl.style.border = `1px solid ${labelColor}`;
-                        applyLabelStyle(labelEl, highlight.labelStyle);
-                        if (highlight.beforeIcon) {
-                            const iconWrap = document.createElement('span');
-                            iconWrap.className = 'highlight-label-icon';
-                            iconWrap.innerHTML = sanitizeIconHtml(highlight.beforeIcon);
-                            const svg = iconWrap.querySelector('svg');
-                            if (svg) {
-                                svg.removeAttribute('width');
-                                svg.removeAttribute('height');
-                            }
-                            const iconSize = highlight.labelStyle?.iconSize;
-                            const size = normalizeSize(iconSize);
-                            iconWrap.style.width = size;
-                            iconWrap.style.height = size;
-                            applyIconStyle(iconWrap, highlight.labelStyle);
-                            labelEl.appendChild(iconWrap);
+                        if (highlight.labelStyle?.borderColor !== undefined ||
+                            highlight.labelStyle?.borderWidth !== undefined) {
+                            const borderColor = highlight.labelStyle?.borderColor ?? 'currentColor';
+                            const borderWidth = highlight.labelStyle?.borderWidth ?? '1px';
+                            labelEl.style.border = `${borderWidth} solid ${borderColor}`;
                         }
+                        applyLabelOutlineStyle(labelEl, highlight.labelStyle);
+                        applyLabelStyle(labelEl, highlight.labelStyle);
+                        labelEl.style.opacity = String(effectiveOpacity);
+                        appendLabelIcon(labelEl, highlight.beforeIcon, highlight.labelStyle);
                         if (highlight.label) {
                             labelEl.appendChild(document.createTextNode(highlight.label));
                         }
-                        highlightDiv.appendChild(labelEl);
+                        highlightLayer.appendChild(labelEl);
                     }
                 }
             }
@@ -1305,6 +1347,15 @@ export class PDFHighlightViewer {
     getHighlightStyle(termId) {
         return this.getHighlightById(termId)?.style;
     }
+    getLabelOffsets(style) {
+        return {
+            left: style?.offsetLeft ?? 0,
+            top: style?.offsetTop ?? -1,
+        };
+    }
+    getLabelsForTerm(highlightLayer, termId) {
+        return Array.from(highlightLayer.querySelectorAll(`.highlight-label[data-term-id="${termId}"]`));
+    }
     getHighlightElements(root, termId) {
         const selector = termId
             ? `.highlight[data-term-id="${termId}"], .highlight-wrapper[data-term-id="${termId}"]`
@@ -1326,29 +1377,60 @@ export class PDFHighlightViewer {
             const termId = el.getAttribute('data-term-id');
             if (!termId)
                 return;
+            const highlight = this.getHighlightById(termId);
             const style = this.getHighlightStyle(termId);
-            const bg = style?.backgroundColor ?? el.style.backgroundColor ?? '#666666';
-            const borderColor = style?.borderColor ?? bg;
-            const borderWidth = style?.borderWidth ?? '1px';
-            el.style.backgroundColor = bg;
-            el.style.border = `${borderWidth} solid ${borderColor}`;
+            const { backgroundColor: bg, borderColor, borderWidth, } = resolveHighlightStyle(style, el.style.backgroundColor || '#666666');
+            const visual = el.querySelector('.highlight-visual') ?? el;
+            visual.style.backgroundColor = bg;
+            visual.style.border = `${borderWidth} solid ${borderColor}`;
+            applyBaseOutlineStyle(visual, style);
+            const highlightBaseOpacity = typeof style?.opacity === 'number'
+                ? style.opacity
+                : parseFloat(el.dataset.originalOpacity ?? '0.3');
+            const bboxIdx = el.getAttribute('data-bbox-index');
+            const isWrapper = el.classList.contains('highlight-wrapper');
+            const labelStyle = highlight?.labelStyle;
+            const labelEl = isWrapper
+                ? el.querySelector('.highlight-label')
+                : bboxIdx !== null
+                    ? highlightLayer.querySelector(`.highlight-label[data-term-id="${termId}"][data-bbox-index="${bboxIdx}"]`)
+                    : highlightLayer.querySelector(`.highlight-label[data-term-id="${termId}"]`);
+            if (labelEl) {
+                if (!isWrapper) {
+                    const baseLabelLeft = parseFloat(labelEl.dataset.baseLeft ?? '0');
+                    const baseLabelTop = parseFloat(labelEl.dataset.baseTop ?? '0');
+                    const { left: labelOffsetLeft, top: labelOffsetTop } = this.getLabelOffsets(labelStyle);
+                    labelEl.style.left = `${baseLabelLeft + labelOffsetLeft}px`;
+                    labelEl.style.top = `${baseLabelTop + labelOffsetTop}px`;
+                }
+                applyLabelStyle(labelEl, labelStyle);
+                applyLabelOutlineStyle(labelEl, labelStyle);
+                labelEl.style.opacity = String(highlightBaseOpacity);
+            }
             if (this.options.highlightsConfig?.enableMultilineHover &&
                 hoveredIds &&
                 Array.isArray(hoveredIds)) {
-                const baseOpacity = typeof style?.opacity === 'number'
-                    ? style.opacity
+                const baseOpacity = style
+                    ? getHighlightBaseOpacity(style)
                     : parseFloat(el.dataset.originalOpacity ?? '0.3');
-                const hoverOpacity = typeof style?.hoverOpacity === 'number'
-                    ? style.hoverOpacity
-                    : Math.min(0.6, baseOpacity + 0.2);
+                const hoverOpacity = getHighlightHoverOpacity(style, baseOpacity);
                 if (hoveredIds.includes(termId)) {
-                    el.style.opacity = String(hoverOpacity);
+                    visual.style.opacity = String(hoverOpacity);
+                    if (labelEl) {
+                        labelEl.style.opacity = String(hoverOpacity);
+                    }
                 }
                 else if (hoveredIds.length > 0) {
-                    el.style.opacity = '0.1';
+                    visual.style.opacity = '0.1';
+                    if (labelEl) {
+                        labelEl.style.opacity = '0.1';
+                    }
                 }
                 else {
-                    el.style.opacity = String(baseOpacity);
+                    visual.style.opacity = String(baseOpacity);
+                    if (labelEl) {
+                        labelEl.style.opacity = String(baseOpacity);
+                    }
                 }
             }
         });
@@ -1358,10 +1440,16 @@ export class PDFHighlightViewer {
      */
     buildSpatialIndexForPage(pageNumber) {
         const refs = this.highlightsIndex.pages[String(pageNumber)] ?? [];
-        const normalizedRefs = refs.map((ref) => ({
-            ...ref,
-            bbox: this.normalizeBBoxForPage({ ...ref.bbox, page: ref.page }, ref.page),
-        }));
+        const normalizedRefs = refs.map((ref) => {
+            const highlight = this.highlightsIndex.byId.get(ref.id);
+            return {
+                ...ref,
+                bbox: this.normalizeBBoxForPage(highlight?.bboxes[ref.bboxIndex] ?? {
+                    ...ref.bbox,
+                    page: ref.page,
+                }, ref.page, highlight?.bboxSourceDimensions, highlight?.bboxOrigin),
+            };
+        });
         this.performanceOptimizer.buildSpatialIndex(normalizedRefs, pageNumber);
     }
     toPageCoordinateDimensions(pixelDimensions) {
@@ -1371,8 +1459,9 @@ export class PDFHighlightViewer {
             height: pixelDimensions.height / scale,
         };
     }
-    normalizeBBoxForPage(bbox, pageNumber) {
-        const origin = this.options.bboxOrigin ?? 'bottom-right';
+    normalizeBBoxForPage(bbox, pageNumber, bboxSourceDimensions, bboxOrigin) {
+        const origin = bboxOrigin ?? this.options.bboxOrigin ?? 'bottom-right';
+        const computedSourceDimensions = bboxSourceDimensions ?? this.options.bboxSourceDimensions;
         const pixelDimensions = this.pageDimensions.get(pageNumber);
         if (!pixelDimensions) {
             throw new Error(`Page dimensions for page ${pageNumber} are not available`);
@@ -1382,13 +1471,23 @@ export class PDFHighlightViewer {
         let x2 = bbox.x2;
         let y1 = bbox.y1;
         let y2 = bbox.y2;
+        if (computedSourceDimensions &&
+            computedSourceDimensions.width &&
+            computedSourceDimensions.height) {
+            const xScale = pageWidth / computedSourceDimensions.width;
+            const yScale = pageHeight / computedSourceDimensions.height;
+            x1 *= xScale;
+            x2 *= xScale;
+            y1 *= yScale;
+            y2 *= yScale;
+        }
         if (origin.endsWith('right')) {
-            x1 = pageWidth - bbox.x1;
-            x2 = pageWidth - bbox.x2;
+            x1 = pageWidth - x1;
+            x2 = pageWidth - x2;
         }
         if (origin.startsWith('bottom')) {
-            y1 = pageHeight - bbox.y1;
-            y2 = pageHeight - bbox.y2;
+            y1 = pageHeight - y1;
+            y2 = pageHeight - y2;
         }
         return {
             x1: Math.min(x1, x2),
@@ -1549,6 +1648,9 @@ export class PDFHighlightViewer {
             // textLayer.style.opacity = '0.1'; // Uncomment for debugging text boundaries
             // Process text items with proper PDF coordinate transformation
             textContent.items.forEach((item) => {
+                if (!('str' in item) || !('transform' in item) || !('fontName' in item)) {
+                    return;
+                }
                 if (!item.str || !item.str.trim())
                     return; // Skip empty text
                 const textSpan = document.createElement('span');