@epam/pdf-highlighter-kit 0.0.7 → 0.0.9

package/README.md

@@ -82,6 +82,8 @@ Each highlight carries its own style. No categories are required.
 
 **Icon before label:** Optionally set `beforeIcon` to an inline SVG string (e.g. from [Tabler Icons](https://tabler.io/icons)) to render an icon inside the label frame, to the left of the text. The icon inherits the label color via `currentColor`. Use `labelStyle.iconSize` to set the icon size (e.g. `14` or `'14px'`) and `labelStyle.iconColor` to set the icon color (e.g. `'#ff6b6b'`); if `iconColor` is not set, the icon uses the label text color. Only pass trusted SVG content (e.g. from your bundle or `@tabler/icons`); in React with Vite you can use `import iconSvg from '@tabler/icons/icons/outline/alert-circle.svg?raw'` and pass `iconSvg` as `beforeIcon`.
 
+**Scalable label:** Set `isLabelScalable: true` on the highlight so the label’s size (font, padding, icon, border radius) scales with zoom; the label stays proportional to the highlight. Border and outline thickness are not scaled (they stay fixed like the highlight’s outline). Best used with `labelStyle` values in `px` or numbers.
+
 ```ts
 export interface BBox {
   x1: number;
@@ -96,10 +98,15 @@ export interface BBoxDimensions {
   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;
@@ -107,25 +114,34 @@ 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?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  bboxOrigin?: BBoxOrigin;
   bboxSourceDimensions?: BBoxDimensions;
   style?: HighlightStyle;
   label?: string;
   beforeIcon?: string; // inline SVG string (trusted content only, e.g. Tabler icons)
+  isLabelScalable?: boolean; // when true, label size scales with zoom (borders stay fixed)
   labelStyle?: HighlightLabelStyle;
   tooltipText?: string;
   metadata?: Record<string, any>;
@@ -146,10 +162,15 @@ Priority (highest to lowest):
 
 ## Configuration Options
 
-### ViewerConfig
+### ViewerOptions
 
 ```ts
-interface ViewerConfig {
+export interface HighlightsConfig {
+  enableMultilineHover?: boolean;
+  defaultStyle?: HighlightStyle;
+}
+
+export interface ViewerOptions {
   // Enable text selection functionality
   enableTextSelection?: boolean;
 
@@ -163,25 +184,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?: { width: number; height: number };
+  bboxSourceDimensions?: BBoxDimensions;
 }
 ```
 
@@ -189,11 +208,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.
 
@@ -209,22 +228,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).
 
@@ -232,7 +248,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%).
 
@@ -262,7 +278,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) => {
@@ -278,7 +294,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":"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"}
+{"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,EAKb,SAAS,EACT,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAElB,cAAc,EACd,mBAAmB,EACnB,SAAS,EAET,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAuBjB,KAAK,aAAa,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9C,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,CAAoD;IAC1E,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,CAClB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,OAAO,CAAC,cAAc,CAAC,EACnC,eAAe,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAC7C,IAAI;IAwCP;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAkC9B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAmB9B;;OAEG;YACW,oBAAoB;IAoElC,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;IAsCzB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,SAAI,GAAG,IAAI;IAuCxD,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,aAAa,GAAG,IAAI;IAI9D,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IASjE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAgBzC,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;IAiOjC,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,oBAAoB;IAQ5B;;SAEK;IACL,sBAAsB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE;IA0FhE;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,oBAAoB;IAmD5B;;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;IA4IhC;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAwClC;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAmD5B,OAAO,IAAI,IAAI;CAsBhB;AAED,eAAe,kBAAkB,CAAC"}

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, scaleLabelStyle, } 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));
@@ -875,6 +881,7 @@ export class PDFHighlightViewer {
     async reRenderVisiblePages() {
         if (!this.container)
             return;
+        const pageToKeep = this.currentPage;
         console.log('Zoom changed to:', this.currentScale);
         // Clear ALL cached data for the new scale
         this.pdfEngine.clearAllPageCache();
@@ -903,12 +910,15 @@ export class PDFHighlightViewer {
         const avgPageHeight = validDimensions > 0 ? totalHeight / validDimensions : this.defaultPageHeight;
         this.viewportManager.updateDimensions(this.container?.clientHeight || 600, avgPageHeight);
         // Render currently visible pages
-        const scrollTop = this.container.scrollTop;
         const containerHeight = this.container.clientHeight;
-        const visiblePages = this.viewportManager.getVisiblePages(scrollTop, containerHeight);
-        console.log('Re-rendering visible pages at new scale:', visiblePages);
+        // Restore scroll so we stay on the same page after zoom
+        this.container.scrollTop = this.getPageScrollTop(pageToKeep);
+        // Recompute visible pages after scroll restore for correct rendering
+        const scrollTopAfterRestore = this.container.scrollTop;
+        const visiblePagesAfterRestore = this.viewportManager.getVisiblePages(scrollTopAfterRestore, containerHeight);
+        console.log('Re-rendering visible pages at new scale:', visiblePagesAfterRestore);
         // Render visible pages immediately
-        for (const pageNumber of visiblePages) {
+        for (const pageNumber of visiblePagesAfterRestore) {
             try {
                 await this.renderPage(pageNumber);
             }
@@ -1174,9 +1184,7 @@ 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)
@@ -1187,100 +1195,141 @@ export class PDFHighlightViewer {
                     highlightDiv.setAttribute('data-term-id', highlight.id);
                     highlightDiv.setAttribute('data-page', String(pageNumber));
                     highlightDiv.setAttribute('data-bbox-index', String(bboxIndex));
-                    const left = normalizedBBox.x1 * scale;
-                    const top = normalizedBBox.y1 * scale;
-                    const width = (normalizedBBox.x2 - normalizedBBox.x1) * scale;
-                    const height = (normalizedBBox.y2 - normalizedBBox.y1) * scale;
+                    const left = Math.round(normalizedBBox.x1 * scale);
+                    const top = Math.round(normalizedBBox.y1 * scale);
+                    const width = Math.round((normalizedBBox.x2 - normalizedBBox.x1) * scale);
+                    const height = Math.round((normalizedBBox.y2 - normalizedBBox.y1) * scale);
                     highlightDiv.style.position = 'absolute';
                     highlightDiv.style.left = `${left}px`;
                     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 effectiveLabelStyle = highlight.isLabelScalable && scale !== 1
+                            ? scaleLabelStyle(highlight.labelStyle, scale)
+                            : highlight.labelStyle;
                         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(effectiveLabelStyle);
                         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';
-                        labelEl.style.gap = '4px';
+                        labelEl.style.gap = highlight.isLabelScalable ? `${4 * scale}px` : '4px';
                         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 (effectiveLabelStyle?.borderColor !== undefined ||
+                            effectiveLabelStyle?.borderWidth !== undefined) {
+                            const borderColor = effectiveLabelStyle?.borderColor ?? 'currentColor';
+                            const borderWidth = effectiveLabelStyle?.borderWidth ?? '1px';
+                            labelEl.style.border = `${borderWidth} solid ${borderColor}`;
                         }
+                        applyLabelOutlineStyle(labelEl, effectiveLabelStyle);
+                        applyLabelStyle(labelEl, effectiveLabelStyle);
+                        labelEl.style.opacity = String(effectiveOpacity);
+                        appendLabelIcon(labelEl, highlight.beforeIcon, effectiveLabelStyle);
                         if (highlight.label) {
                             labelEl.appendChild(document.createTextNode(highlight.label));
                         }
-                        highlightDiv.appendChild(labelEl);
+                        highlightLayer.appendChild(labelEl);
                     }
                 }
             }
@@ -1305,6 +1354,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 +1384,63 @@ 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 scale = this.currentScale;
+            const effectiveLabelStyle = highlight?.isLabelScalable && scale !== 1
+                ? scaleLabelStyle(highlight.labelStyle, scale)
+                : 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(effectiveLabelStyle);
+                    labelEl.style.left = `${baseLabelLeft + labelOffsetLeft}px`;
+                    labelEl.style.top = `${baseLabelTop + labelOffsetTop}px`;
+                }
+                applyLabelStyle(labelEl, effectiveLabelStyle);
+                applyLabelOutlineStyle(labelEl, effectiveLabelStyle);
+                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);
+                    }
                 }
             }
         });
@@ -1566,6 +1658,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');