stimulus-pdf-viewer-rails 0.3.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43f0f370e8cb71ab25bae045345269c4567e3afaecb6a15f43dfe8dd26b4766c
-  data.tar.gz: ce65b690119f2d649ef611f227e4da9bfddf4f27da9273221a9653211eb84445
+  metadata.gz: 6fe6b668cbffa8acaf9ade9ef15614aad4d7677e3dc505bebe4065ba8ccdb726
+  data.tar.gz: f8f51d4e310e36beb6dd51efc9dd3501daaa15067b2a853912d074427a04b9f7
 SHA512:
-  metadata.gz: cd3c15bcfccb692d88527594f57cbcbe280b7c0ec79b84f15a8c36016e907b29431554098602042c51ed80a2cdd1601ced8782cf33ae9fd4fba216c29a764ffa
-  data.tar.gz: c275cb1442a607111a11564d1ecf5326c69be6653ef497c49c45f602c0d4f44e38373b9d6d5308cc821ba92c1933bdc4f929185de0f524533a60b84d52bb7d6f
+  metadata.gz: ad37d63e9f0c26f373b293737818fd85121bf78945f8e97ab06371f75d2aa3ac6b8b4b9976a27cb5553b5cb3f738b51258a82541761bb78531116e34fa27e90f
+  data.tar.gz: 41b654cae115f12ef9a8f33c80d5d0645657cbccc7b70ee94651dd557b2ea416b38ace501b7a0e43cf9387dc8b16237c2f7e442915d338e1c03dd0ee3108ad45

data/app/assets/javascripts/stimulus-pdf-viewer.esm.js

@@ -2578,12 +2578,12 @@ class AnnotationEditToolbar {
     });
 
     // Handle keyboard shortcuts
-    document.addEventListener("keydown", (e) => {
+    this._keydownHandler = (e) => {
       if (this.element.classList.contains("hidden")) return
 
       // Don't intercept if user is typing
       const activeEl = document.activeElement;
-      if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA")) return
+      if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable)) return
 
       if (e.key === "Escape") {
         if (this.colorDropdownOpen) {
@@ -2613,7 +2613,8 @@ class AnnotationEditToolbar {
           this.onComment(this.currentAnnotation);
         }
       }
-    });
+    };
+    document.addEventListener("keydown", this._keydownHandler);
   }
 
   _toggleColorDropdown() {
@@ -2722,6 +2723,347 @@ class AnnotationEditToolbar {
   }
 
   destroy() {
+    if (this._keydownHandler) {
+      document.removeEventListener("keydown", this._keydownHandler);
+    }
+    this.element.remove();
+  }
+}
+
+class AnnotationDetailPanel {
+  constructor(options = {}) {
+    this.container = options.container;
+    this.onColorChange = options.onColorChange;
+    this.onDelete = options.onDelete;
+    this.onEdit = options.onEdit;
+    this.onComment = options.onComment;
+    this.onClose = options.onClose;
+    this.colors = options.colors || ColorPicker.COLORS.map(c => c.value);
+
+    this.currentAnnotation = null;
+    this.anchorElement = null;
+    this.colorDropdownOpen = false;
+
+    this._createPanel();
+    this._setupEventListeners();
+  }
+
+  _createPanel() {
+    this.element = document.createElement("div");
+    this.element.className = "annotation-detail-panel hidden";
+    this.element.innerHTML = `
+      <div class="annotation-detail-header">
+        <div class="annotation-detail-header-info">
+          <span class="annotation-detail-type"></span>
+        </div>
+        <div class="annotation-detail-header-actions">
+          <button class="toolbar-btn comment-btn hidden" title="Add Comment (C)">
+            ${Icons.comment}
+          </button>
+          <button class="color-picker-btn" title="Change color" aria-haspopup="true" aria-expanded="false">
+            <span class="color-swatch"></span>
+            ${Icons.chevronDown}
+          </button>
+          <div class="color-dropdown hidden">
+            ${this.colors.map(color => `
+              <button class="color-option" data-color="${color}" aria-selected="false">
+                <span class="color-swatch" style="background-color: ${color}"></span>
+              </button>
+            `).join("")}
+          </div>
+          <button class="toolbar-btn edit-btn hidden" title="Edit (E)">
+            ${Icons.edit}
+          </button>
+          <div class="toolbar-divider"></div>
+          <button class="toolbar-btn delete-btn" title="Delete (Delete)">
+            ${Icons.delete}
+          </button>
+          <div class="toolbar-divider"></div>
+          <button class="annotation-detail-close" title="Close (Escape)">
+            ${Icons.close}
+          </button>
+        </div>
+      </div>
+      <div class="annotation-detail-body">
+        <div class="annotation-detail-text hidden"></div>
+        <div class="annotation-detail-content-slot"></div>
+      </div>
+    `;
+
+    this.commentBtn = this.element.querySelector(".comment-btn");
+    this.editBtn = this.element.querySelector(".edit-btn");
+    this.typeLabel = this.element.querySelector(".annotation-detail-type");
+    this.textContent = this.element.querySelector(".annotation-detail-text");
+    this.contentSlot = this.element.querySelector(".annotation-detail-content-slot");
+  }
+
+  _setupEventListeners() {
+    // Prevent pointer/click events inside the panel from triggering annotation tools
+    // Tools listen on pointerdown on the pages container, so we must stop all phases
+    this.element.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+    });
+    this.element.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+
+    // Close button
+    this.element.querySelector(".annotation-detail-close").addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.onClose?.();
+    });
+
+    // Color picker button
+    const colorBtn = this.element.querySelector(".color-picker-btn");
+    colorBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._toggleColorDropdown();
+    });
+
+    // Color options
+    this.element.querySelectorAll(".color-option").forEach(option => {
+      option.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this._selectColor(option.dataset.color);
+      });
+    });
+
+    // Comment button
+    this.commentBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (this.currentAnnotation && this.onComment) {
+        this.onComment(this.currentAnnotation);
+      }
+    });
+
+    // Edit button
+    this.editBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (this.currentAnnotation && this.onEdit) {
+        this.onEdit(this.currentAnnotation);
+      }
+    });
+
+    // Delete button (hide is handled by _deselectAnnotation cascade)
+    this.element.querySelector(".delete-btn").addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (this.currentAnnotation && this.onDelete) {
+        this.onDelete(this.currentAnnotation);
+      }
+    });
+
+    // Close color dropdown on outside click
+    document.addEventListener("click", (e) => {
+      if (this.colorDropdownOpen && !this.element.contains(e.target)) {
+        this._closeColorDropdown();
+      }
+    });
+
+    // Keyboard shortcuts
+    this._keydownHandler = (e) => {
+      if (this.element.classList.contains("hidden")) return
+
+      const activeEl = document.activeElement;
+      if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable)) return
+
+      if (e.key === "Escape") {
+        if (this.colorDropdownOpen) {
+          this._closeColorDropdown();
+        } else {
+          this.onClose?.();
+        }
+        e.preventDefault();
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        if (this.currentAnnotation && this.onDelete) {
+          this.onDelete(this.currentAnnotation);
+        }
+      } else if (e.key === "e" || e.key === "E") {
+        if (this.currentAnnotation?.annotation_type === "note" && this.onEdit) {
+          e.preventDefault();
+          this.onEdit(this.currentAnnotation);
+        }
+      } else if (e.key === "c" || e.key === "C") {
+        const supportsComment = ["highlight", "line", "ink"].includes(this.currentAnnotation?.annotation_type);
+        if (supportsComment && this.onComment) {
+          e.preventDefault();
+          this.onComment(this.currentAnnotation);
+        }
+      }
+    };
+    document.addEventListener("keydown", this._keydownHandler);
+  }
+
+  _toggleColorDropdown() {
+    if (this.colorDropdownOpen) {
+      this._closeColorDropdown();
+    } else {
+      this._openColorDropdown();
+    }
+  }
+
+  _openColorDropdown() {
+    const dropdown = this.element.querySelector(".color-dropdown");
+    const btn = this.element.querySelector(".color-picker-btn");
+    dropdown.classList.remove("hidden");
+    btn.setAttribute("aria-expanded", "true");
+    this.colorDropdownOpen = true;
+  }
+
+  _closeColorDropdown() {
+    const dropdown = this.element.querySelector(".color-dropdown");
+    const btn = this.element.querySelector(".color-picker-btn");
+    dropdown.classList.add("hidden");
+    btn.setAttribute("aria-expanded", "false");
+    this.colorDropdownOpen = false;
+  }
+
+  _selectColor(color) {
+    if (this.currentAnnotation && this.onColorChange) {
+      this.onColorChange(this.currentAnnotation, color);
+    }
+    this._updateSelectedColor(color);
+    this._closeColorDropdown();
+  }
+
+  _updateSelectedColor(color) {
+    const swatch = this.element.querySelector(".color-picker-btn .color-swatch");
+    swatch.style.backgroundColor = color;
+
+    this.element.querySelectorAll(".color-option").forEach(option => {
+      option.setAttribute("aria-selected", option.dataset.color === color ? "true" : "false");
+    });
+  }
+
+  _getTypeLabel(annotationType) {
+    const labels = {
+      highlight: "Highlight",
+      line: "Underline",
+      note: "Note",
+      ink: "Drawing"
+    };
+    return labels[annotationType] || "Annotation"
+  }
+
+  show(annotation, anchorElement, options = {}) {
+    this.currentAnnotation = annotation;
+    this.anchorElement = anchorElement;
+
+    // Update header info
+    const page = annotation.page || 1;
+    this.typeLabel.textContent = `${this._getTypeLabel(annotation.annotation_type)} \u2014 Page ${page}`;
+
+    // Update color swatch
+    const color = annotation.color || ColorPicker.DEFAULT_HIGHLIGHT_COLOR;
+    this._updateSelectedColor(color);
+
+    // Show/hide buttons based on annotation type
+    const isNote = annotation.annotation_type === "note";
+    const supportsComment = ["highlight", "line", "ink"].includes(annotation.annotation_type);
+    this.commentBtn.classList.toggle("hidden", !supportsComment);
+    this.editBtn.classList.toggle("hidden", !isNote);
+
+    if (supportsComment) {
+      const hasComment = annotation.contents && annotation.contents.trim();
+      this.commentBtn.title = hasComment ? "Edit Comment (C)" : "Add Comment (C)";
+    }
+
+    // Show annotation text content if present
+    if (annotation.contents) {
+      this.textContent.textContent = annotation.contents;
+      this.textContent.classList.remove("hidden");
+    } else {
+      this.textContent.textContent = "";
+      this.textContent.classList.add("hidden");
+    }
+
+    // Inject custom content if provided (HTML string or DOM element)
+    if (options.content) {
+      if (typeof options.content === "string") {
+        this.contentSlot.innerHTML = options.content;
+      } else {
+        this.contentSlot.innerHTML = "";
+        this.contentSlot.appendChild(options.content);
+      }
+    }
+
+    // Position and show the panel
+    this._positionPanel(anchorElement);
+    this.element.classList.remove("hidden");
+  }
+
+  _positionPanel(anchorElement) {
+    const pageContainer = anchorElement.closest(".pdf-page");
+    if (!pageContainer) return
+
+    // Append to page container so it scrolls with the page
+    pageContainer.appendChild(this.element);
+
+    // Get annotation position relative to the page
+    const anchorRect = anchorElement.getBoundingClientRect();
+    const pageRect = pageContainer.getBoundingClientRect();
+
+    const anchorTop = anchorRect.top - pageRect.top;
+    const anchorLeft = anchorRect.left - pageRect.left;
+    const anchorRight = anchorLeft + anchorRect.width;
+    const pageWidth = pageRect.width;
+
+    const panelWidth = parseInt(
+      getComputedStyle(this.element).getPropertyValue("--panel-width") || "320", 10
+    );
+
+    // Try to position to the right of the annotation
+    if (anchorRight + panelWidth + 12 <= pageWidth) {
+      this.element.style.left = `${anchorRight + 8}px`;
+      this.element.style.right = "auto";
+    }
+    // Fall back to the left side
+    else if (anchorLeft - panelWidth - 12 >= 0) {
+      this.element.style.left = `${anchorLeft - panelWidth - 8}px`;
+      this.element.style.right = "auto";
+    }
+    // Fall back to below the annotation (centered)
+    else {
+      const centerX = anchorLeft + anchorRect.width / 2;
+      this.element.style.left = `${Math.max(8, centerX - panelWidth / 2)}px`;
+      this.element.style.right = "auto";
+    }
+
+    // Vertical alignment: align top of panel with top of annotation
+    this.element.style.top = `${anchorTop}px`;
+  }
+
+  hide() {
+    this._closeColorDropdown();
+    this.element.classList.add("hidden");
+    this.currentAnnotation = null;
+    this.anchorElement = null;
+
+    // Clear text content
+    this.textContent.textContent = "";
+    this.textContent.classList.add("hidden");
+
+    // Clear injected content (but preserve the slot container)
+    this.contentSlot.innerHTML = "";
+
+    // Remove from parent when hidden
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+
+  isVisible() {
+    return !this.element.classList.contains("hidden")
+  }
+
+  getContentContainer() {
+    return this.contentSlot
+  }
+
+  destroy() {
+    if (this._keydownHandler) {
+      document.removeEventListener("keydown", this._keydownHandler);
+    }
     this.element.remove();
   }
 }
@@ -6772,6 +7114,18 @@ class PdfViewer {
       onDeselect: this._deselectAnnotation.bind(this)
     });
 
+    // Detail panel (opt-in: replaces edit toolbar when enabled)
+    if (this.options.detailPanel && this.bodyContainer) {
+      this.annotationDetailPanel = new AnnotationDetailPanel({
+        container: this.bodyContainer,
+        onColorChange: this._onAnnotationColorChange.bind(this),
+        onDelete: this._onAnnotationDelete.bind(this),
+        onEdit: this._onAnnotationEdit.bind(this),
+        onComment: this._onAnnotationComment.bind(this),
+        onClose: this._deselectAnnotation.bind(this)
+      });
+    }
+
     this.undoBar = new UndoBar(this.undoBarContainer, {
       onUndo: this._onAnnotationUndo.bind(this)
     });
@@ -6911,8 +7265,8 @@ class PdfViewer {
 
     // Deselect annotation when clicking outside
     this.pagesContainer.addEventListener("click", (e) => {
-      // Don't deselect if clicking on an annotation or the edit toolbar
-      if (e.target.closest(".annotation") || e.target.closest(".annotation-edit-toolbar")) {
+      // Don't deselect if clicking on an annotation, edit toolbar, or detail panel
+      if (e.target.closest(".annotation") || e.target.closest(".annotation-edit-toolbar") || e.target.closest(".annotation-detail-panel")) {
         return
       }
       // Skip if an annotation was just created (click follows pointerup from text selection)
@@ -7127,9 +7481,9 @@ class PdfViewer {
     // Remember if this annotation was selected
     const wasSelected = this.selectedAnnotation && this.selectedAnnotation.id === annotation.id;
 
-    // Hide toolbar before re-render (it will be re-shown after)
+    // Hide annotation UI before re-render (it will be re-shown after)
     if (wasSelected) {
-      this.annotationEditToolbar.hide();
+      this._hideAnnotationUI();
     }
 
     this._renderAnnotationsForPage(annotation.page, this.viewer.getPageContainer(annotation.page));
@@ -7147,7 +7501,7 @@ class PdfViewer {
           this.selectedAnnotation = updatedAnnotation;
           this.selectedAnnotationElement = element;
           element.classList.add("selected");
-          this.annotationEditToolbar.show(updatedAnnotation, element);
+          this._showAnnotationUI(updatedAnnotation, element);
         }
       }
     }
@@ -7794,7 +8148,7 @@ class PdfViewer {
       if (this.selectedAnnotationElement !== element) {
         this.selectedAnnotationElement = element;
         element.classList.add("selected");
-        this.annotationEditToolbar.show(annotation, element, pageHeight);
+        this._showAnnotationUI(annotation, element, pageHeight);
       }
       return
     }
@@ -7807,8 +8161,8 @@ class PdfViewer {
     this.selectedAnnotationElement = element;
     element.classList.add("selected");
 
-    // Show the edit toolbar below the annotation (includes note content for notes)
-    this.annotationEditToolbar.show(annotation, element, pageHeight);
+    // Show the appropriate annotation UI
+    this._showAnnotationUI(annotation, element, pageHeight);
 
     this.container.dispatchEvent(new CustomEvent("pdf-viewer:annotation-selected", {
       bubbles: true,
@@ -7816,6 +8170,33 @@ class PdfViewer {
     }));
   }
 
+  _showAnnotationUI(annotation, element, pageHeight) {
+    if (this.annotationDetailPanel) {
+      this.annotationDetailPanel.show(annotation, element);
+      this.container.dispatchEvent(new CustomEvent("pdf-viewer:detail-panel-opened", {
+        bubbles: true,
+        detail: { annotation, element }
+      }));
+    } else {
+      this.annotationEditToolbar.show(annotation, element, pageHeight);
+    }
+  }
+
+  _hideAnnotationUI() {
+    if (this.annotationDetailPanel) {
+      const annotation = this.annotationDetailPanel.currentAnnotation;
+      this.annotationDetailPanel.hide();
+      if (annotation) {
+        this.container.dispatchEvent(new CustomEvent("pdf-viewer:detail-panel-closed", {
+          bubbles: true,
+          detail: { annotation, annotationId: annotation.id }
+        }));
+      }
+    } else {
+      this.annotationEditToolbar.hide();
+    }
+  }
+
   _deselectAnnotation() {
     const previousAnnotation = this.selectedAnnotation;
 
@@ -7825,8 +8206,8 @@ class PdfViewer {
     this.selectedAnnotation = null;
     this.selectedAnnotationElement = null;
 
-    // Hide the edit toolbar
-    this.annotationEditToolbar.hide();
+    // Hide the annotation UI (detail panel or edit toolbar)
+    this._hideAnnotationUI();
 
     if (previousAnnotation) {
       this.container.dispatchEvent(new CustomEvent("pdf-viewer:annotation-deselected", {
@@ -8001,6 +8382,7 @@ class PdfViewer {
 
     this.viewer.destroy();
     this.annotationEditToolbar.destroy();
+    this.annotationDetailPanel?.destroy();
     this.undoBar.destroy();
     this.thumbnailSidebar?.destroy();
     this.annotationSidebar?.destroy();
@@ -8027,7 +8409,8 @@ class pdf_viewer_controller extends Controller {
     trackingUrl: String,
     initialPage: Number,
     initialAnnotation: String,
-    autoHeight: { type: Boolean, default: true }
+    autoHeight: { type: Boolean, default: true },
+    detailPanel: { type: Boolean, default: false }
   }
 
   initialize() {
@@ -8048,7 +8431,8 @@ class pdf_viewer_controller extends Controller {
       userName: this.userNameValue,
       documentId: this.documentIdValue,
       initialPage: this.initialPageValue || 1,
-      initialAnnotation: this.initialAnnotationValue
+      initialAnnotation: this.initialAnnotationValue,
+      detailPanel: this.detailPanelValue
     });
 
     // Set up the toolbar

data/app/assets/javascripts/stimulus-pdf-viewer.js

@@ -2598,12 +2598,12 @@
       });
 
       // Handle keyboard shortcuts
-      document.addEventListener("keydown", (e) => {
+      this._keydownHandler = (e) => {
         if (this.element.classList.contains("hidden")) return
 
         // Don't intercept if user is typing
         const activeEl = document.activeElement;
-        if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA")) return
+        if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable)) return
 
         if (e.key === "Escape") {
           if (this.colorDropdownOpen) {
@@ -2633,7 +2633,8 @@
             this.onComment(this.currentAnnotation);
           }
         }
-      });
+      };
+      document.addEventListener("keydown", this._keydownHandler);
     }
 
     _toggleColorDropdown() {
@@ -2742,6 +2743,347 @@
     }
 
     destroy() {
+      if (this._keydownHandler) {
+        document.removeEventListener("keydown", this._keydownHandler);
+      }
+      this.element.remove();
+    }
+  }
+
+  class AnnotationDetailPanel {
+    constructor(options = {}) {
+      this.container = options.container;
+      this.onColorChange = options.onColorChange;
+      this.onDelete = options.onDelete;
+      this.onEdit = options.onEdit;
+      this.onComment = options.onComment;
+      this.onClose = options.onClose;
+      this.colors = options.colors || ColorPicker.COLORS.map(c => c.value);
+
+      this.currentAnnotation = null;
+      this.anchorElement = null;
+      this.colorDropdownOpen = false;
+
+      this._createPanel();
+      this._setupEventListeners();
+    }
+
+    _createPanel() {
+      this.element = document.createElement("div");
+      this.element.className = "annotation-detail-panel hidden";
+      this.element.innerHTML = `
+      <div class="annotation-detail-header">
+        <div class="annotation-detail-header-info">
+          <span class="annotation-detail-type"></span>
+        </div>
+        <div class="annotation-detail-header-actions">
+          <button class="toolbar-btn comment-btn hidden" title="Add Comment (C)">
+            ${Icons.comment}
+          </button>
+          <button class="color-picker-btn" title="Change color" aria-haspopup="true" aria-expanded="false">
+            <span class="color-swatch"></span>
+            ${Icons.chevronDown}
+          </button>
+          <div class="color-dropdown hidden">
+            ${this.colors.map(color => `
+              <button class="color-option" data-color="${color}" aria-selected="false">
+                <span class="color-swatch" style="background-color: ${color}"></span>
+              </button>
+            `).join("")}
+          </div>
+          <button class="toolbar-btn edit-btn hidden" title="Edit (E)">
+            ${Icons.edit}
+          </button>
+          <div class="toolbar-divider"></div>
+          <button class="toolbar-btn delete-btn" title="Delete (Delete)">
+            ${Icons.delete}
+          </button>
+          <div class="toolbar-divider"></div>
+          <button class="annotation-detail-close" title="Close (Escape)">
+            ${Icons.close}
+          </button>
+        </div>
+      </div>
+      <div class="annotation-detail-body">
+        <div class="annotation-detail-text hidden"></div>
+        <div class="annotation-detail-content-slot"></div>
+      </div>
+    `;
+
+      this.commentBtn = this.element.querySelector(".comment-btn");
+      this.editBtn = this.element.querySelector(".edit-btn");
+      this.typeLabel = this.element.querySelector(".annotation-detail-type");
+      this.textContent = this.element.querySelector(".annotation-detail-text");
+      this.contentSlot = this.element.querySelector(".annotation-detail-content-slot");
+    }
+
+    _setupEventListeners() {
+      // Prevent pointer/click events inside the panel from triggering annotation tools
+      // Tools listen on pointerdown on the pages container, so we must stop all phases
+      this.element.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+      });
+      this.element.addEventListener("click", (e) => {
+        e.stopPropagation();
+      });
+
+      // Close button
+      this.element.querySelector(".annotation-detail-close").addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.onClose?.();
+      });
+
+      // Color picker button
+      const colorBtn = this.element.querySelector(".color-picker-btn");
+      colorBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this._toggleColorDropdown();
+      });
+
+      // Color options
+      this.element.querySelectorAll(".color-option").forEach(option => {
+        option.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this._selectColor(option.dataset.color);
+        });
+      });
+
+      // Comment button
+      this.commentBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (this.currentAnnotation && this.onComment) {
+          this.onComment(this.currentAnnotation);
+        }
+      });
+
+      // Edit button
+      this.editBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (this.currentAnnotation && this.onEdit) {
+          this.onEdit(this.currentAnnotation);
+        }
+      });
+
+      // Delete button (hide is handled by _deselectAnnotation cascade)
+      this.element.querySelector(".delete-btn").addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (this.currentAnnotation && this.onDelete) {
+          this.onDelete(this.currentAnnotation);
+        }
+      });
+
+      // Close color dropdown on outside click
+      document.addEventListener("click", (e) => {
+        if (this.colorDropdownOpen && !this.element.contains(e.target)) {
+          this._closeColorDropdown();
+        }
+      });
+
+      // Keyboard shortcuts
+      this._keydownHandler = (e) => {
+        if (this.element.classList.contains("hidden")) return
+
+        const activeEl = document.activeElement;
+        if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable)) return
+
+        if (e.key === "Escape") {
+          if (this.colorDropdownOpen) {
+            this._closeColorDropdown();
+          } else {
+            this.onClose?.();
+          }
+          e.preventDefault();
+        } else if (e.key === "Delete" || e.key === "Backspace") {
+          e.preventDefault();
+          if (this.currentAnnotation && this.onDelete) {
+            this.onDelete(this.currentAnnotation);
+          }
+        } else if (e.key === "e" || e.key === "E") {
+          if (this.currentAnnotation?.annotation_type === "note" && this.onEdit) {
+            e.preventDefault();
+            this.onEdit(this.currentAnnotation);
+          }
+        } else if (e.key === "c" || e.key === "C") {
+          const supportsComment = ["highlight", "line", "ink"].includes(this.currentAnnotation?.annotation_type);
+          if (supportsComment && this.onComment) {
+            e.preventDefault();
+            this.onComment(this.currentAnnotation);
+          }
+        }
+      };
+      document.addEventListener("keydown", this._keydownHandler);
+    }
+
+    _toggleColorDropdown() {
+      if (this.colorDropdownOpen) {
+        this._closeColorDropdown();
+      } else {
+        this._openColorDropdown();
+      }
+    }
+
+    _openColorDropdown() {
+      const dropdown = this.element.querySelector(".color-dropdown");
+      const btn = this.element.querySelector(".color-picker-btn");
+      dropdown.classList.remove("hidden");
+      btn.setAttribute("aria-expanded", "true");
+      this.colorDropdownOpen = true;
+    }
+
+    _closeColorDropdown() {
+      const dropdown = this.element.querySelector(".color-dropdown");
+      const btn = this.element.querySelector(".color-picker-btn");
+      dropdown.classList.add("hidden");
+      btn.setAttribute("aria-expanded", "false");
+      this.colorDropdownOpen = false;
+    }
+
+    _selectColor(color) {
+      if (this.currentAnnotation && this.onColorChange) {
+        this.onColorChange(this.currentAnnotation, color);
+      }
+      this._updateSelectedColor(color);
+      this._closeColorDropdown();
+    }
+
+    _updateSelectedColor(color) {
+      const swatch = this.element.querySelector(".color-picker-btn .color-swatch");
+      swatch.style.backgroundColor = color;
+
+      this.element.querySelectorAll(".color-option").forEach(option => {
+        option.setAttribute("aria-selected", option.dataset.color === color ? "true" : "false");
+      });
+    }
+
+    _getTypeLabel(annotationType) {
+      const labels = {
+        highlight: "Highlight",
+        line: "Underline",
+        note: "Note",
+        ink: "Drawing"
+      };
+      return labels[annotationType] || "Annotation"
+    }
+
+    show(annotation, anchorElement, options = {}) {
+      this.currentAnnotation = annotation;
+      this.anchorElement = anchorElement;
+
+      // Update header info
+      const page = annotation.page || 1;
+      this.typeLabel.textContent = `${this._getTypeLabel(annotation.annotation_type)} \u2014 Page ${page}`;
+
+      // Update color swatch
+      const color = annotation.color || ColorPicker.DEFAULT_HIGHLIGHT_COLOR;
+      this._updateSelectedColor(color);
+
+      // Show/hide buttons based on annotation type
+      const isNote = annotation.annotation_type === "note";
+      const supportsComment = ["highlight", "line", "ink"].includes(annotation.annotation_type);
+      this.commentBtn.classList.toggle("hidden", !supportsComment);
+      this.editBtn.classList.toggle("hidden", !isNote);
+
+      if (supportsComment) {
+        const hasComment = annotation.contents && annotation.contents.trim();
+        this.commentBtn.title = hasComment ? "Edit Comment (C)" : "Add Comment (C)";
+      }
+
+      // Show annotation text content if present
+      if (annotation.contents) {
+        this.textContent.textContent = annotation.contents;
+        this.textContent.classList.remove("hidden");
+      } else {
+        this.textContent.textContent = "";
+        this.textContent.classList.add("hidden");
+      }
+
+      // Inject custom content if provided (HTML string or DOM element)
+      if (options.content) {
+        if (typeof options.content === "string") {
+          this.contentSlot.innerHTML = options.content;
+        } else {
+          this.contentSlot.innerHTML = "";
+          this.contentSlot.appendChild(options.content);
+        }
+      }
+
+      // Position and show the panel
+      this._positionPanel(anchorElement);
+      this.element.classList.remove("hidden");
+    }
+
+    _positionPanel(anchorElement) {
+      const pageContainer = anchorElement.closest(".pdf-page");
+      if (!pageContainer) return
+
+      // Append to page container so it scrolls with the page
+      pageContainer.appendChild(this.element);
+
+      // Get annotation position relative to the page
+      const anchorRect = anchorElement.getBoundingClientRect();
+      const pageRect = pageContainer.getBoundingClientRect();
+
+      const anchorTop = anchorRect.top - pageRect.top;
+      const anchorLeft = anchorRect.left - pageRect.left;
+      const anchorRight = anchorLeft + anchorRect.width;
+      const pageWidth = pageRect.width;
+
+      const panelWidth = parseInt(
+        getComputedStyle(this.element).getPropertyValue("--panel-width") || "320", 10
+      );
+
+      // Try to position to the right of the annotation
+      if (anchorRight + panelWidth + 12 <= pageWidth) {
+        this.element.style.left = `${anchorRight + 8}px`;
+        this.element.style.right = "auto";
+      }
+      // Fall back to the left side
+      else if (anchorLeft - panelWidth - 12 >= 0) {
+        this.element.style.left = `${anchorLeft - panelWidth - 8}px`;
+        this.element.style.right = "auto";
+      }
+      // Fall back to below the annotation (centered)
+      else {
+        const centerX = anchorLeft + anchorRect.width / 2;
+        this.element.style.left = `${Math.max(8, centerX - panelWidth / 2)}px`;
+        this.element.style.right = "auto";
+      }
+
+      // Vertical alignment: align top of panel with top of annotation
+      this.element.style.top = `${anchorTop}px`;
+    }
+
+    hide() {
+      this._closeColorDropdown();
+      this.element.classList.add("hidden");
+      this.currentAnnotation = null;
+      this.anchorElement = null;
+
+      // Clear text content
+      this.textContent.textContent = "";
+      this.textContent.classList.add("hidden");
+
+      // Clear injected content (but preserve the slot container)
+      this.contentSlot.innerHTML = "";
+
+      // Remove from parent when hidden
+      if (this.element.parentNode) {
+        this.element.parentNode.removeChild(this.element);
+      }
+    }
+
+    isVisible() {
+      return !this.element.classList.contains("hidden")
+    }
+
+    getContentContainer() {
+      return this.contentSlot
+    }
+
+    destroy() {
+      if (this._keydownHandler) {
+        document.removeEventListener("keydown", this._keydownHandler);
+      }
       this.element.remove();
     }
   }
@@ -6792,6 +7134,18 @@
         onDeselect: this._deselectAnnotation.bind(this)
       });
 
+      // Detail panel (opt-in: replaces edit toolbar when enabled)
+      if (this.options.detailPanel && this.bodyContainer) {
+        this.annotationDetailPanel = new AnnotationDetailPanel({
+          container: this.bodyContainer,
+          onColorChange: this._onAnnotationColorChange.bind(this),
+          onDelete: this._onAnnotationDelete.bind(this),
+          onEdit: this._onAnnotationEdit.bind(this),
+          onComment: this._onAnnotationComment.bind(this),
+          onClose: this._deselectAnnotation.bind(this)
+        });
+      }
+
       this.undoBar = new UndoBar(this.undoBarContainer, {
         onUndo: this._onAnnotationUndo.bind(this)
       });
@@ -6931,8 +7285,8 @@
 
       // Deselect annotation when clicking outside
       this.pagesContainer.addEventListener("click", (e) => {
-        // Don't deselect if clicking on an annotation or the edit toolbar
-        if (e.target.closest(".annotation") || e.target.closest(".annotation-edit-toolbar")) {
+        // Don't deselect if clicking on an annotation, edit toolbar, or detail panel
+        if (e.target.closest(".annotation") || e.target.closest(".annotation-edit-toolbar") || e.target.closest(".annotation-detail-panel")) {
           return
         }
         // Skip if an annotation was just created (click follows pointerup from text selection)
@@ -7147,9 +7501,9 @@
       // Remember if this annotation was selected
       const wasSelected = this.selectedAnnotation && this.selectedAnnotation.id === annotation.id;
 
-      // Hide toolbar before re-render (it will be re-shown after)
+      // Hide annotation UI before re-render (it will be re-shown after)
       if (wasSelected) {
-        this.annotationEditToolbar.hide();
+        this._hideAnnotationUI();
       }
 
       this._renderAnnotationsForPage(annotation.page, this.viewer.getPageContainer(annotation.page));
@@ -7167,7 +7521,7 @@
             this.selectedAnnotation = updatedAnnotation;
             this.selectedAnnotationElement = element;
             element.classList.add("selected");
-            this.annotationEditToolbar.show(updatedAnnotation, element);
+            this._showAnnotationUI(updatedAnnotation, element);
           }
         }
       }
@@ -7814,7 +8168,7 @@
         if (this.selectedAnnotationElement !== element) {
           this.selectedAnnotationElement = element;
           element.classList.add("selected");
-          this.annotationEditToolbar.show(annotation, element, pageHeight);
+          this._showAnnotationUI(annotation, element, pageHeight);
         }
         return
       }
@@ -7827,8 +8181,8 @@
       this.selectedAnnotationElement = element;
       element.classList.add("selected");
 
-      // Show the edit toolbar below the annotation (includes note content for notes)
-      this.annotationEditToolbar.show(annotation, element, pageHeight);
+      // Show the appropriate annotation UI
+      this._showAnnotationUI(annotation, element, pageHeight);
 
       this.container.dispatchEvent(new CustomEvent("pdf-viewer:annotation-selected", {
         bubbles: true,
@@ -7836,6 +8190,33 @@
       }));
     }
 
+    _showAnnotationUI(annotation, element, pageHeight) {
+      if (this.annotationDetailPanel) {
+        this.annotationDetailPanel.show(annotation, element);
+        this.container.dispatchEvent(new CustomEvent("pdf-viewer:detail-panel-opened", {
+          bubbles: true,
+          detail: { annotation, element }
+        }));
+      } else {
+        this.annotationEditToolbar.show(annotation, element, pageHeight);
+      }
+    }
+
+    _hideAnnotationUI() {
+      if (this.annotationDetailPanel) {
+        const annotation = this.annotationDetailPanel.currentAnnotation;
+        this.annotationDetailPanel.hide();
+        if (annotation) {
+          this.container.dispatchEvent(new CustomEvent("pdf-viewer:detail-panel-closed", {
+            bubbles: true,
+            detail: { annotation, annotationId: annotation.id }
+          }));
+        }
+      } else {
+        this.annotationEditToolbar.hide();
+      }
+    }
+
     _deselectAnnotation() {
       const previousAnnotation = this.selectedAnnotation;
 
@@ -7845,8 +8226,8 @@
       this.selectedAnnotation = null;
       this.selectedAnnotationElement = null;
 
-      // Hide the edit toolbar
-      this.annotationEditToolbar.hide();
+      // Hide the annotation UI (detail panel or edit toolbar)
+      this._hideAnnotationUI();
 
       if (previousAnnotation) {
         this.container.dispatchEvent(new CustomEvent("pdf-viewer:annotation-deselected", {
@@ -8021,6 +8402,7 @@
 
       this.viewer.destroy();
       this.annotationEditToolbar.destroy();
+      this.annotationDetailPanel?.destroy();
       this.undoBar.destroy();
       this.thumbnailSidebar?.destroy();
       this.annotationSidebar?.destroy();
@@ -8047,7 +8429,8 @@
       trackingUrl: String,
       initialPage: Number,
       initialAnnotation: String,
-      autoHeight: { type: Boolean, default: true }
+      autoHeight: { type: Boolean, default: true },
+      detailPanel: { type: Boolean, default: false }
     }
 
     initialize() {
@@ -8068,7 +8451,8 @@
         userName: this.userNameValue,
         documentId: this.documentIdValue,
         initialPage: this.initialPageValue || 1,
-        initialAnnotation: this.initialAnnotationValue
+        initialAnnotation: this.initialAnnotationValue,
+        detailPanel: this.detailPanelValue
       });
 
       // Set up the toolbar

data/app/assets/stylesheets/stimulus-pdf-viewer.scss

@@ -877,6 +877,214 @@
   }
 }
 
+// Annotation Detail Panel (anchored card for annotation threads)
+.annotation-detail-panel {
+  --panel-bg: #ffffff;
+  --panel-border: #c8c8d0;
+  --panel-shadow: 0 4px 12px rgba(58, 57, 68, 0.15);
+  --panel-header-bg: #f0f0f4;
+  --panel-fg: #2e2e56;
+  --panel-fg-secondary: #5b5b66;
+  --panel-hover-bg: #e0e0e6;
+  --panel-focus-color: #0060df;
+  --panel-width: 320px;
+
+  position: absolute;
+  z-index: 1000;
+  width: var(--panel-width);
+  display: flex;
+  flex-direction: column;
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  border-radius: 8px;
+  box-shadow: var(--panel-shadow);
+  pointer-events: auto;
+  cursor: default;
+
+  .annotation-detail-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px;
+    padding: 6px 4px 6px 12px;
+    background: var(--panel-header-bg);
+    border-bottom: 1px solid var(--panel-border);
+    min-height: 36px;
+  }
+
+  .annotation-detail-header-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .annotation-detail-type {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--panel-fg-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .annotation-detail-header-actions {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0;
+    flex-shrink: 0;
+  }
+
+  .toolbar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--panel-fg);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--panel-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--panel-focus-color);
+      outline-offset: -2px;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .toolbar-divider {
+    width: 0;
+    height: 20px;
+    border-left: 1px solid var(--panel-border);
+    margin: 0 2px;
+  }
+
+  .color-picker-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    padding: 0 6px 0 8px;
+    height: 28px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--panel-hover-bg);
+    }
+
+    .color-swatch {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+      border-radius: 50%;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .color-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    padding: 8px;
+    background: var(--panel-header-bg);
+    border: 1px solid var(--panel-border);
+    border-radius: 6px;
+    box-shadow: var(--panel-shadow);
+    white-space: nowrap;
+    z-index: 1;
+
+    .color-option {
+      width: auto;
+      height: auto;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+
+      .color-swatch {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        outline-offset: 2px;
+      }
+
+      &:hover .color-swatch,
+      &:focus .color-swatch {
+        outline: 2px solid var(--panel-focus-color);
+      }
+
+      &[aria-selected="true"] .color-swatch {
+        outline: 2px solid var(--panel-focus-color);
+      }
+    }
+  }
+
+  .annotation-detail-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--panel-fg-secondary);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--panel-hover-bg);
+      color: var(--panel-fg);
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .annotation-detail-body {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  .annotation-detail-text {
+    padding: 10px 12px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--panel-fg);
+    white-space: pre-wrap;
+    word-break: break-word;
+    border-bottom: 1px solid var(--panel-border);
+  }
+
+  .annotation-detail-content-slot {
+    // Host app injects content here (e.g. Turbo Frames)
+    &:empty {
+      display: none;
+    }
+  }
+}
+
 // Underline annotations
 .annotation-underline {
   // Container styles - dimensions set by JS
@@ -2447,6 +2655,31 @@
     }
   }
 
+  // Detail panel
+  .annotation-detail-panel {
+    border: 1px solid CanvasText;
+    background: Canvas;
+    color: CanvasText;
+
+    .annotation-detail-header {
+      border-bottom: 1px solid CanvasText;
+    }
+
+    .toolbar-btn,
+    .annotation-detail-close,
+    .color-picker-btn {
+      border: 1px solid ButtonText;
+
+      &:hover {
+        border-color: Highlight;
+      }
+    }
+
+    .color-dropdown .color-option .color-swatch {
+      forced-color-adjust: none;
+    }
+  }
+
   // Popup and dialogs
   .annotation-popup {
     border: 1px solid CanvasText;

data/lib/stimulus_pdf_viewer/rails/version.rb

@@ -1,7 +1,7 @@
 module StimulusPdfViewer
   module Rails
-    VERSION = "0.3.0"
+    VERSION = "0.3.1"
     # This should match the npm package version
-    STIMULUS_PDF_VIEWER_VERSION = "0.3.0"
+    STIMULUS_PDF_VIEWER_VERSION = "0.3.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: stimulus-pdf-viewer-rails
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.1
 platform: ruby
 authors:
 - Jeremy Baker
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-02 00:00:00.000000000 Z
+date: 2026-04-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties