react-pdf-highlighter-plus 1.0.2 → 1.0.4

package/dist/esm/index.css

@@ -0,0 +1,1221 @@
+/* src/style/PdfHighlighter.css */
+.PdfHighlighter {
+  position: absolute;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  background-color: #333;
+}
+.PdfHighlighter::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.PdfHighlighter::-webkit-scrollbar-thumb {
+  background-color: #9f9f9f;
+  border-radius: 5px;
+}
+.PdfHighlighter::-webkit-scrollbar-thumb:hover {
+  background-color: #d1d1d1;
+}
+.PdfHighlighter::-webkit-scrollbar-track {
+  background-color: #2c2c2c;
+  border-radius: 5px;
+}
+.PdfHighlighter::-webkit-scrollbar-track-piece {
+  background-color: #2c2c2c;
+}
+.PdfHighlighter__tip-container {
+  z-index: 6;
+  position: absolute;
+}
+.PdfHighlighter--disable-selection {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+.PdfHighlighter--freetext-mode {
+  cursor: crosshair;
+}
+.PdfHighlighter--freetext-mode .pdfViewer,
+.PdfHighlighter--freetext-mode .textLayer {
+  cursor: crosshair;
+}
+.PdfHighlighter--image-mode {
+  cursor: crosshair;
+}
+.PdfHighlighter--image-mode .pdfViewer,
+.PdfHighlighter--image-mode .textLayer {
+  cursor: crosshair;
+}
+.PdfHighlighter--drawing-mode {
+  cursor: crosshair;
+}
+.PdfHighlighter--drawing-mode .pdfViewer,
+.PdfHighlighter--drawing-mode .textLayer {
+  cursor: crosshair;
+}
+.PdfHighlighter--area-mode {
+  cursor: crosshair;
+}
+.PdfHighlighter--area-mode .pdfViewer,
+.PdfHighlighter--area-mode .textLayer {
+  cursor: crosshair;
+}
+
+/* src/style/pdf_viewer.css */
+.textLayer {
+  z-index: 2;
+  opacity: 1;
+  mix-blend-mode: multiply;
+  display: flex;
+}
+.annotationLayer {
+  position: absolute;
+  top: 0;
+  z-index: 3;
+}
+html body .textLayer > div:not(.PdfHighlighter__highlight-layer):not(.TextHighlight):not(.TextHighlight-icon) {
+  opacity: 1;
+  mix-blend-mode: multiply;
+}
+.textLayer ::-moz-selection {
+  mix-blend-mode: multiply;
+}
+.textLayer ::selection {
+  mix-blend-mode: multiply;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .textLayer {
+    opacity: 0.5;
+  }
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .textLayer {
+    opacity: 0.5;
+  }
+}
+@supports (-ms-ime-align:auto) {
+  .textLayer {
+    opacity: 0.5;
+  }
+}
+
+/* src/style/DrawingCanvas.css */
+.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;
+}
+
+/* src/style/MouseSelection.css */
+.MouseSelection {
+  position: absolute;
+  border: 1px dashed #333;
+  background: rgba(153, 193, 218, 255);
+  mix-blend-mode: multiply;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .MouseSelection {
+    opacity: 0.5;
+  }
+}
+@supports (-ms-ime-align:auto) {
+  .MouseSelection {
+    opacity: 0.5;
+  }
+}
+
+/* src/style/ShapeCanvas.css */
+.ShapeCanvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.1);
+}
+.ShapeCanvas__controls {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  z-index: 1002;
+}
+.ShapeCanvas__hint {
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  white-space: nowrap;
+}
+.ShapeCanvas__cancelButton {
+  padding: 8px 20px;
+  background: #f44336;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+.ShapeCanvas__cancelButton:hover {
+  background: #d32f2f;
+}
+
+/* src/style/TextHighlight.css */
+.TextHighlight {
+  position: absolute;
+}
+.TextHighlight__parts {
+  opacity: 1;
+}
+.TextHighlight__part {
+  cursor: pointer;
+  position: absolute;
+  background: rgba(255, 226, 143, 1);
+  transition: background 0.3s;
+}
+.TextHighlight--scrolledTo .TextHighlight__part {
+  background: #ff4141;
+}
+.TextHighlight__toolbar-wrapper {
+  z-index: 10;
+}
+.TextHighlight__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;
+}
+.TextHighlight__toolbar--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.TextHighlight__style-button,
+.TextHighlight__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;
+}
+.TextHighlight__style-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.TextHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}
+.TextHighlight__style-panel {
+  margin-top: 4px;
+  background: rgba(0, 0, 0, 0.9);
+  border-radius: 6px;
+  padding: 8px;
+  min-width: 180px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+.TextHighlight__style-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.TextHighlight__style-row:last-child {
+  margin-bottom: 0;
+}
+.TextHighlight__style-row label {
+  color: #ccc;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-right: 8px;
+}
+.TextHighlight__style-buttons {
+  display: flex;
+  gap: 4px;
+}
+.TextHighlight__style-type-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid #666;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #f5f5f5;
+  transition: all 0.2s;
+}
+.TextHighlight__style-type-button:hover {
+  border-color: #b958ff;
+}
+.TextHighlight__style-type-button.active {
+  color: #b958ff;
+  border-color: #b958ff;
+  background: rgba(185, 88, 255, 0.2);
+}
+.TextHighlight__color-options {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.TextHighlight__color-presets {
+  display: flex;
+  gap: 4px;
+}
+.TextHighlight__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;
+}
+.TextHighlight__color-preset:hover {
+  transform: scale(1.15);
+}
+.TextHighlight__color-preset.active {
+  border-color: #b958ff;
+}
+.TextHighlight__color-options input[type=color] {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+}
+.TextHighlight__color-options input[type=color]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.TextHighlight__color-options input[type=color]::-webkit-color-swatch {
+  border: 1px solid #666;
+  border-radius: 4px;
+}
+.TextHighlight__part--underline {
+  background: transparent !important;
+  border-bottom: 2px solid currentColor;
+}
+.TextHighlight__part.TextHighlight__part--strikethrough {
+  background: transparent !important;
+  overflow: visible;
+}
+.TextHighlight__part.TextHighlight__part--strikethrough::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  background-color: currentColor;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* src/style/AreaHighlight.css */
+.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;
+}
+.AreaHighlight__toolbar-wrapper {
+  z-index: 10;
+}
+.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);
+}
+.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;
+}
+.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;
+}
+
+/* src/style/FreetextHighlight.css */
+.FreetextHighlight {
+  position: absolute;
+}
+.FreetextHighlight__container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
+  overflow: visible;
+  transition: box-shadow 0.2s ease;
+}
+.FreetextHighlight__container:hover {
+  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
+}
+.FreetextHighlight__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;
+}
+.FreetextHighlight__container:hover .FreetextHighlight__toolbar {
+  opacity: 1;
+}
+.FreetextHighlight__drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: grab;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  color: white;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+.FreetextHighlight__drag-handle:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.FreetextHighlight__drag-handle:active {
+  cursor: grabbing;
+}
+.FreetextHighlight__edit-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;
+}
+.FreetextHighlight__edit-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.FreetextHighlight__content {
+  flex: 1;
+  padding: 8px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+.FreetextHighlight__text {
+  width: 100%;
+  height: 100%;
+  cursor: text;
+  overflow: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+.FreetextHighlight__input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  resize: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+}
+.FreetextHighlight--scrolledTo .FreetextHighlight__container {
+  box-shadow: 0 0 0 3px #ff4141, 2px 2px 8px rgba(0, 0, 0, 0.2);
+}
+.FreetextHighlight--editing .FreetextHighlight__container {
+  box-shadow: 0 0 0 2px #4a90d9, 2px 2px 8px rgba(0, 0, 0, 0.2);
+}
+.FreetextHighlight__style-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;
+}
+.FreetextHighlight__style-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.FreetextHighlight__style-panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  padding: 8px;
+  z-index: 9999;
+  margin-top: 2px;
+}
+.FreetextHighlight__style-row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.FreetextHighlight__style-row:last-child {
+  margin-bottom: 0;
+}
+.FreetextHighlight__style-row label {
+  font-size: 11px;
+  color: #555;
+  white-space: nowrap;
+}
+.FreetextHighlight__style-row input[type=color] {
+  width: 28px;
+  height: 24px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  padding: 0;
+  cursor: pointer;
+}
+.FreetextHighlight__style-row select {
+  padding: 4px 6px;
+  font-size: 11px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  background: white;
+  cursor: pointer;
+  min-width: 80px;
+}
+.FreetextHighlight__color-options {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.FreetextHighlight__color-presets {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.FreetextHighlight__color-preset {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.15s, border-color 0.15s;
+}
+.FreetextHighlight__color-preset:hover {
+  transform: scale(1.15);
+  border-color: rgba(0, 0, 0, 0.3);
+}
+.FreetextHighlight__color-preset.active {
+  border-color: #333;
+  box-shadow: 0 0 0 1px white, 0 0 0 2px #333;
+}
+.FreetextHighlight__color-preset--transparent {
+  background:
+    linear-gradient(
+      45deg,
+      #ccc 25%,
+      transparent 25%),
+    linear-gradient(
+      -45deg,
+      #ccc 25%,
+      transparent 25%),
+    linear-gradient(
+      45deg,
+      transparent 75%,
+      #ccc 75%),
+    linear-gradient(
+      -45deg,
+      transparent 75%,
+      #ccc 75%);
+  background-size: 8px 8px;
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0px;
+  background-color: white;
+}
+.FreetextHighlight__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;
+}
+.FreetextHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}
+
+/* src/style/ImageHighlight.css */
+.ImageHighlight {
+  position: absolute;
+}
+.ImageHighlight__container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: visible;
+  transition: box-shadow 0.2s ease;
+}
+.ImageHighlight__container:hover {
+  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
+}
+.ImageHighlight__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;
+}
+.ImageHighlight__container:hover .ImageHighlight__toolbar {
+  opacity: 1;
+}
+.ImageHighlight__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;
+}
+.ImageHighlight__drag-handle:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.ImageHighlight__drag-handle:active {
+  cursor: grabbing;
+}
+.ImageHighlight__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.ImageHighlight__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: fill;
+  object-fit: fill;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.ImageHighlight--scrolledTo .ImageHighlight__container {
+  box-shadow: 0 0 0 3px #ff4141, 2px 2px 8px rgba(0, 0, 0, 0.2);
+}
+.ImageHighlight__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;
+}
+.ImageHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}
+
+/* src/style/SignaturePad.css */
+.SignaturePad__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+.SignaturePad__modal {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+.SignaturePad__title {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+.SignaturePad__canvas {
+  display: block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: crosshair;
+  touch-action: none;
+  background: white;
+}
+.SignaturePad__buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  justify-content: flex-end;
+}
+.SignaturePad__button {
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+.SignaturePad__button--clear {
+  background: white;
+  border: 1px solid #ccc;
+  color: #666;
+}
+.SignaturePad__button--clear:hover {
+  background: #f5f5f5;
+  border-color: #999;
+}
+.SignaturePad__button--cancel {
+  background: white;
+  border: 1px solid #ccc;
+  color: #666;
+}
+.SignaturePad__button--cancel:hover {
+  background: #f5f5f5;
+  border-color: #999;
+}
+.SignaturePad__button--done {
+  background: #2196f3;
+  border: 1px solid #2196f3;
+  color: white;
+}
+.SignaturePad__button--done:hover {
+  background: #1976d2;
+  border-color: #1976d2;
+}
+
+/* src/style/DrawingHighlight.css */
+.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;
+  background: transparent;
+}
+.DrawingHighlight__image {
+  max-width: 100%;
+  max-height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.DrawingHighlight--scrolledTo .DrawingHighlight__container {
+  box-shadow: 0 0 0 3px #ff4141, 2px 2px 8px rgba(0, 0, 0, 0.2);
+}
+.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);
+}
+.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);
+}
+
+/* src/style/ShapeHighlight.css */
+.ShapeHighlight {
+  position: absolute;
+}
+.ShapeHighlight__rnd {
+  cursor: move;
+}
+.ShapeHighlight__container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.ShapeHighlight__svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.ShapeHighlight--scrolledTo .ShapeHighlight__svg rect,
+.ShapeHighlight--scrolledTo .ShapeHighlight__svg ellipse,
+.ShapeHighlight--scrolledTo .ShapeHighlight__svg line {
+  stroke: #ff4141 !important;
+}
+.ShapeHighlight--scrolledTo .ShapeHighlight__svg polygon {
+  fill: #ff4141 !important;
+}
+.ShapeHighlight__toolbar-wrapper {
+  z-index: 10;
+}
+.ShapeHighlight__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;
+}
+.ShapeHighlight__toolbar--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.ShapeHighlight__style-button,
+.ShapeHighlight__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;
+}
+.ShapeHighlight__style-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.ShapeHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}
+.ShapeHighlight__style-panel {
+  margin-top: 4px;
+  background: rgba(0, 0, 0, 0.9);
+  border-radius: 6px;
+  padding: 8px;
+  min-width: 180px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+.ShapeHighlight__style-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.ShapeHighlight__style-row:last-child {
+  margin-bottom: 0;
+}
+.ShapeHighlight__style-row label {
+  color: #ccc;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-right: 8px;
+}
+.ShapeHighlight__color-options {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ShapeHighlight__color-presets {
+  display: flex;
+  gap: 4px;
+}
+.ShapeHighlight__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;
+}
+.ShapeHighlight__color-preset:hover {
+  transform: scale(1.15);
+}
+.ShapeHighlight__color-preset.active {
+  border-color: #b958ff;
+}
+.ShapeHighlight__color-options input[type=color] {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+}
+.ShapeHighlight__color-options input[type=color]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.ShapeHighlight__color-options input[type=color]::-webkit-color-swatch {
+  border: 1px solid #666;
+  border-radius: 4px;
+}
+.ShapeHighlight__width-options {
+  display: flex;
+  gap: 4px;
+}
+.ShapeHighlight__width-button {
+  padding: 4px 8px;
+  background: transparent;
+  border: 1px solid #666;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #ccc;
+  font-size: 11px;
+  transition: all 0.2s;
+}
+.ShapeHighlight__width-button:hover {
+  border-color: #b958ff;
+  color: white;
+}
+.ShapeHighlight__width-button.active {
+  background: rgba(185, 88, 255, 0.2);
+  border-color: #b958ff;
+  color: #b958ff;
+}
+/*# sourceMappingURL=index.css.map */