react-pdf-highlighter-plus 1.0.0

package/dist/esm/lib/group-highlights-by-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-highlights-by-page.js","sourceRoot":"","sources":["../../../src/lib/group-highlights-by-page.ts"],"names":[],"mappings":"AAMA,MAAM,qBAAqB,GAAG,CAC5B,UAAoD,EACjC,EAAE,CACrB,UAAU,CAAC,MAAM,CAAoB,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE;IACtD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,GAAG,CAAC;IACb,CAAC;IACD,MAAM,WAAW,GAAG;QAClB,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,UAAU;QAC1C,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;KAChE,CAAC;IAEF,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;QACjC,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QACvB,MAAM,qBAAqB,GAAG;YAC5B,GAAG,SAAS;YACZ,QAAQ,EAAE;gBACR,GAAG,SAAS,CAAC,QAAQ;gBACrB,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CACpC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,KAAK,IAAI,CAAC,UAAU,CACzC;aACF;SACF,CAAC;QACF,GAAG,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,CAAC;AACb,CAAC,EAAE,EAAE,CAAC,CAAC;AAET,eAAe,qBAAqB,CAAC"}

package/dist/esm/lib/optimize-client-rects.d.ts

@@ -0,0 +1,3 @@
+import type { LTWHP } from "../types.js";
+declare const optimizeClientRects: (clientRects: Array<LTWHP>) => Array<LTWHP>;
+export default optimizeClientRects;

package/dist/esm/lib/optimize-client-rects.js

@@ -0,0 +1,65 @@
+const sort = (rects) => rects.sort((A, B) => {
+    const top = (A.pageNumber || 0) * A.top - (B.pageNumber || 0) * B.top;
+    if (top === 0) {
+        return A.left - B.left;
+    }
+    return top;
+});
+const overlaps = (A, B) => A.pageNumber === B.pageNumber &&
+    A.left <= B.left &&
+    B.left <= A.left + A.width;
+const sameLine = (A, B, yMargin = 5) => A.pageNumber === B.pageNumber &&
+    Math.abs(A.top - B.top) < yMargin &&
+    Math.abs(A.height - B.height) < yMargin;
+const inside = (A, B) => A.pageNumber === B.pageNumber &&
+    A.top > B.top &&
+    A.left > B.left &&
+    A.top + A.height < B.top + B.height &&
+    A.left + A.width < B.left + B.width;
+const nextTo = (A, B, xMargin = 10) => {
+    const Aright = A.left + A.width;
+    const Bright = B.left + B.width;
+    return (A.pageNumber === B.pageNumber &&
+        A.left <= B.left &&
+        Aright <= Bright &&
+        B.left - Aright <= xMargin);
+};
+const extendWidth = (A, B) => {
+    // extend width of A to cover B
+    A.width = Math.max(B.width - A.left + B.left, A.width);
+};
+const optimizeClientRects = (clientRects) => {
+    const rects = sort(clientRects);
+    const toRemove = new Set();
+    const firstPass = rects.filter((rect) => {
+        return rects.every((otherRect) => {
+            return !inside(rect, otherRect);
+        });
+    });
+    let passCount = 0;
+    while (passCount <= 2) {
+        firstPass.forEach((A) => {
+            firstPass.forEach((B) => {
+                if (A === B || toRemove.has(A) || toRemove.has(B)) {
+                    return;
+                }
+                if (!sameLine(A, B)) {
+                    return;
+                }
+                if (overlaps(A, B)) {
+                    extendWidth(A, B);
+                    A.height = Math.max(A.height, B.height);
+                    toRemove.add(B);
+                }
+                if (nextTo(A, B)) {
+                    extendWidth(A, B);
+                    toRemove.add(B);
+                }
+            });
+        });
+        passCount += 1;
+    }
+    return firstPass.filter((rect) => !toRemove.has(rect));
+};
+export default optimizeClientRects;
+//# sourceMappingURL=optimize-client-rects.js.map

package/dist/esm/lib/optimize-client-rects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"optimize-client-rects.js","sourceRoot":"","sources":["../../../src/lib/optimize-client-rects.ts"],"names":[],"mappings":"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"}

package/dist/esm/lib/pdfjs-dom.d.ts

@@ -0,0 +1,9 @@
+import { Page } from "../types";
+export declare const getDocument: (elm: any) => Document;
+export declare const getWindow: (elm: any) => typeof window;
+export declare const isHTMLElement: (elm: any) => boolean;
+export declare const isHTMLCanvasElement: (elm: any) => boolean;
+export declare const asElement: (x: any) => HTMLElement;
+export declare const getPageFromElement: (target: HTMLElement) => Page | null;
+export declare const getPagesFromRange: (range: Range) => Page[];
+export declare const findOrCreateContainerLayer: (container: HTMLElement, className: string) => Element | null;

package/dist/esm/lib/pdfjs-dom.js

@@ -0,0 +1,55 @@
+export const getDocument = (elm) => (elm || {}).ownerDocument || document;
+export const getWindow = (elm) => (getDocument(elm) || {}).defaultView || window;
+export const isHTMLElement = (elm) => elm instanceof HTMLElement || elm instanceof getWindow(elm).HTMLElement;
+export const isHTMLCanvasElement = (elm) => elm instanceof HTMLCanvasElement ||
+    elm instanceof getWindow(elm).HTMLCanvasElement;
+export const asElement = (x) => x;
+export const getPageFromElement = (target) => {
+    const node = asElement(target.closest(".page"));
+    if (!node || !isHTMLElement(node)) {
+        return null;
+    }
+    const number = Number(asElement(node).dataset.pageNumber);
+    return { node, number };
+};
+export const getPagesFromRange = (range) => {
+    const startParentElement = range.startContainer.parentElement;
+    const endParentElement = range.endContainer.parentElement;
+    if (!isHTMLElement(startParentElement) || !isHTMLElement(endParentElement)) {
+        return [];
+    }
+    const startPage = getPageFromElement(asElement(startParentElement));
+    const endPage = getPageFromElement(asElement(endParentElement));
+    if (!startPage?.number || !endPage?.number) {
+        return [];
+    }
+    if (startPage.number === endPage.number) {
+        return [startPage];
+    }
+    if (startPage.number === endPage.number - 1) {
+        return [startPage, endPage];
+    }
+    const pages = [];
+    let currentPageNumber = startPage.number;
+    const document = startPage.node.ownerDocument;
+    while (currentPageNumber <= endPage.number) {
+        const currentPage = getPageFromElement(document.querySelector(`[data-page-number='${currentPageNumber}'`));
+        if (currentPage) {
+            pages.push(currentPage);
+        }
+        currentPageNumber++;
+    }
+    return pages;
+};
+export const findOrCreateContainerLayer = (container, className) => {
+    const doc = getDocument(container);
+    let layer = container.querySelector(`.${className}`);
+    // To ensure predictable zIndexing, wait until the pdfjs element has children.
+    if (!layer && container.children.length) {
+        layer = doc.createElement("div");
+        layer.className = className;
+        container.appendChild(layer);
+    }
+    return layer;
+};
+//# sourceMappingURL=pdfjs-dom.js.map

package/dist/esm/lib/pdfjs-dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdfjs-dom.js","sourceRoot":"","sources":["../../../src/lib/pdfjs-dom.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,GAAQ,EAAY,EAAE,CAChD,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,aAAa,IAAI,QAAQ,CAAC;AAExC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAQ,EAAiB,EAAE,CACnD,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,WAAW,IAAI,MAAM,CAAC;AAEjD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAQ,EAAE,EAAE,CACxC,GAAG,YAAY,WAAW,IAAI,GAAG,YAAY,SAAS,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC;AAE1E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAQ,EAAE,EAAE,CAC9C,GAAG,YAAY,iBAAiB;IAChC,GAAG,YAAY,SAAS,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC;AAElD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,CAAM,EAAe,EAAE,CAAC,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAmB,EAAe,EAAE;IACrE,MAAM,IAAI,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAEhD,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,EAAU,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAU,EAAE;IACxD,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC9D,MAAM,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC;IAE1D,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,CAAC;QAC3E,OAAO,EAAY,CAAC;IACtB,CAAC;IAED,MAAM,SAAS,GAAG,kBAAkB,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,kBAAkB,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEhE,IAAI,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAC3C,OAAO,EAAY,CAAC;IACtB,CAAC;IAED,IAAI,SAAS,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;QACxC,OAAO,CAAC,SAAS,CAAW,CAAC;IAC/B,CAAC;IAED,IAAI,SAAS,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC5C,OAAO,CAAC,SAAS,EAAE,OAAO,CAAW,CAAC;IACxC,CAAC;IAED,MAAM,KAAK,GAAW,EAAE,CAAC;IAEzB,IAAI,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC;IAEzC,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;IAE9C,OAAO,iBAAiB,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QAC3C,MAAM,WAAW,GAAG,kBAAkB,CACpC,QAAQ,CAAC,aAAa,CACpB,sBAAsB,iBAAiB,GAAG,CAC5B,CACjB,CAAC;QACF,IAAI,WAAW,EAAE,CAAC;YAChB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1B,CAAC;QACD,iBAAiB,EAAE,CAAC;IACtB,CAAC;IAED,OAAO,KAAe,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,SAAsB,EACtB,SAAiB,EACjB,EAAE;IACF,MAAM,GAAG,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACnC,IAAI,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC;IAErD,8EAA8E;IAC9E,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACxC,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;QAC5B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC"}

package/dist/esm/lib/screenshot.d.ts

@@ -0,0 +1,4 @@
+import { PDFViewer } from "pdfjs-dist/types/web/pdf_viewer";
+import type { LTWH } from "../types";
+declare const screenshot: (position: LTWH, pageNumber: number, viewer: PDFViewer) => string;
+export default screenshot;

package/dist/esm/lib/screenshot.js

@@ -0,0 +1,24 @@
+import { isHTMLCanvasElement } from "./pdfjs-dom";
+const getAreaAsPng = (canvas, position) => {
+    const { left, top, width, height } = position;
+    const doc = canvas ? canvas.ownerDocument : null;
+    // @TODO: cache this?
+    const newCanvas = doc && doc.createElement("canvas");
+    if (!newCanvas || !isHTMLCanvasElement(newCanvas)) {
+        return "";
+    }
+    newCanvas.width = width;
+    newCanvas.height = height;
+    const newCanvasContext = newCanvas.getContext("2d");
+    if (!newCanvasContext || !canvas) {
+        return "";
+    }
+    const dpr = window.devicePixelRatio;
+    newCanvasContext.drawImage(canvas, left * dpr, top * dpr, width * dpr, height * dpr, 0, 0, width, height);
+    return newCanvas.toDataURL("image/png");
+};
+const screenshot = (position, pageNumber, viewer) => {
+    return getAreaAsPng(viewer.getPageView(pageNumber - 1).canvas, position);
+};
+export default screenshot;
+//# sourceMappingURL=screenshot.js.map

package/dist/esm/lib/screenshot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenshot.js","sourceRoot":"","sources":["../../../src/lib/screenshot.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,YAAY,GAAG,CAAC,MAAyB,EAAE,QAAc,EAAU,EAAE;IACzE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC;IAE9C,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC;IACjD,qBAAqB;IACrB,MAAM,SAAS,GAAG,GAAG,IAAI,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAErD,IAAI,CAAC,SAAS,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,EAAE,CAAC;QAClD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;IACxB,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC;IAE1B,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAEpD,IAAI,CAAC,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC;QACjC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,GAAG,GAAW,MAAM,CAAC,gBAAgB,CAAC;IAE5C,gBAAgB,CAAC,SAAS,CACxB,MAAM,EACN,IAAI,GAAG,GAAG,EACV,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,GAAG,EACZ,CAAC,EACD,CAAC,EACD,KAAK,EACL,MAAM,CACP,CAAC;IAEF,OAAO,SAAS,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;AAC1C,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,QAAc,EAAE,UAAkB,EAAE,MAAiB,EAAE,EAAE;IAC3E,OAAO,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAC3E,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/esm/style/AreaHighlight.css

@@ -0,0 +1,134 @@
+.AreaHighlight {
+  position: absolute;
+}
+
+.AreaHighlight__part {
+  cursor: pointer;
+  position: absolute;
+  background: rgba(255, 226, 143, 1);
+  transition: background 0.3s;
+}
+
+.AreaHighlight--scrolledTo .AreaHighlight__part {
+  background: #ff4141;
+}
+
+/* Toolbar wrapper - creates hover bridge between toolbar and highlight */
+.AreaHighlight__toolbar-wrapper {
+  z-index: 10;
+}
+
+/* Toolbar - appears on hover */
+.AreaHighlight__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.AreaHighlight__toolbar--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.AreaHighlight__style-button,
+.AreaHighlight__delete-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: white;
+  border-radius: 3px;
+  padding: 0;
+  transition: background 0.2s;
+}
+
+.AreaHighlight__style-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.AreaHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}
+
+/* Style Panel */
+.AreaHighlight__style-panel {
+  margin-top: 4px;
+  background: rgba(0, 0, 0, 0.9);
+  border-radius: 6px;
+  padding: 8px;
+  min-width: 160px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.AreaHighlight__style-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.AreaHighlight__style-row label {
+  color: #ccc;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-right: 8px;
+}
+
+/* Color options */
+.AreaHighlight__color-options {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.AreaHighlight__color-presets {
+  display: flex;
+  gap: 4px;
+}
+
+.AreaHighlight__color-preset {
+  width: 18px;
+  height: 18px;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.2s, border-color 0.2s;
+  padding: 0;
+}
+
+.AreaHighlight__color-preset:hover {
+  transform: scale(1.15);
+}
+
+.AreaHighlight__color-preset.active {
+  border-color: #b958ff;
+}
+
+.AreaHighlight__color-options input[type="color"] {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.AreaHighlight__color-options input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.AreaHighlight__color-options input[type="color"]::-webkit-color-swatch {
+  border: 1px solid #666;
+  border-radius: 4px;
+}

package/dist/esm/style/DrawingCanvas.css

@@ -0,0 +1,62 @@
+.DrawingCanvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.DrawingCanvas__controls {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 10px;
+  padding: 10px 20px;
+  background-color: rgba(43, 46, 51, 0.95);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+}
+
+.DrawingCanvas__controls button {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s, transform 0.1s;
+}
+
+.DrawingCanvas__controls button:hover {
+  transform: scale(1.02);
+}
+
+.DrawingCanvas__doneButton {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.DrawingCanvas__doneButton:hover {
+  background-color: #45a049;
+}
+
+.DrawingCanvas__cancelButton {
+  background-color: #f44336;
+  color: white;
+}
+
+.DrawingCanvas__cancelButton:hover {
+  background-color: #da190b;
+}
+
+.DrawingCanvas__clearButton {
+  background-color: #ff9800;
+  color: white;
+}
+
+.DrawingCanvas__clearButton:hover {
+  background-color: #e68a00;
+}

package/dist/esm/style/DrawingHighlight.css

@@ -0,0 +1,184 @@
+.DrawingHighlight {
+  position: absolute;
+}
+
+.DrawingHighlight__container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: visible;
+  transition: box-shadow 0.2s ease;
+}
+
+.DrawingHighlight__container:hover {
+  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
+}
+
+.DrawingHighlight__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.DrawingHighlight__container:hover .DrawingHighlight__toolbar {
+  opacity: 1;
+}
+
+.DrawingHighlight__drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: grab;
+  color: white;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+.DrawingHighlight__drag-handle:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.DrawingHighlight__drag-handle:active {
+  cursor: grabbing;
+}
+
+.DrawingHighlight__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 4px;
+  /* Transparent background for drawings */
+  background: transparent;
+}
+
+.DrawingHighlight__image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+}
+
+.DrawingHighlight--scrolledTo .DrawingHighlight__container {
+  box-shadow: 0 0 0 3px #ff4141, 2px 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Style edit button */
+.DrawingHighlight__style-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: white;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+.DrawingHighlight__style-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Style controls dropdown */
+.DrawingHighlight__style-controls {
+  position: absolute;
+  top: 28px;
+  left: 4px;
+  background: rgba(0, 0, 0, 0.85);
+  border-radius: 6px;
+  padding: 8px;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 120px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.DrawingHighlight__color-picker {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.DrawingHighlight__color-button {
+  width: 20px;
+  height: 20px;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.2s, border-color 0.2s;
+  padding: 0;
+}
+
+.DrawingHighlight__color-button:hover {
+  transform: scale(1.15);
+}
+
+.DrawingHighlight__color-button.active {
+  border-color: #b958ff;
+}
+
+.DrawingHighlight__width-picker {
+  display: flex;
+  gap: 4px;
+}
+
+.DrawingHighlight__width-button {
+  background: transparent;
+  color: #f5f5f5;
+  border: 1px solid #666;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 10px;
+  padding: 2px 6px;
+  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
+}
+
+.DrawingHighlight__width-button:hover {
+  border-color: #b958ff;
+}
+
+.DrawingHighlight__width-button.active {
+  color: #b958ff;
+  border-color: #b958ff;
+  background-color: rgba(185, 88, 255, 0.2);
+}
+
+.DrawingHighlight__delete-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: white;
+  border-radius: 3px;
+  padding: 0;
+  transition: background 0.2s;
+}
+
+.DrawingHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}