@mrsf/markdown-it-mrsf 0.2.0 → 0.4.0

package/dist/controller.js

@@ -1,22 +1,859 @@
+// src/html.ts
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function formatTime(iso) {
+  if (!iso) return "";
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString(void 0, {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+  } catch {
+    return "";
+  }
+}
+function renderCommentHtml(comment, isReply, interactive) {
+  const resolvedClass = comment.resolved ? " mrsf-resolved" : "";
+  const replyClass = isReply ? " mrsf-reply" : "";
+  let html = `<span class="mrsf-comment${resolvedClass}${replyClass}" data-mrsf-comment-id="${escapeHtml(comment.id)}">`;
+  html += `<span class="mrsf-comment-header">`;
+  html += `<span class="mrsf-author">${escapeHtml(comment.author)}</span>`;
+  if (comment.timestamp) {
+    html += `<span class="mrsf-date">${escapeHtml(formatTime(comment.timestamp))}</span>`;
+  }
+  if (comment.severity) {
+    html += `<span class="mrsf-severity mrsf-severity-${escapeHtml(comment.severity)}">${escapeHtml(comment.severity)}</span>`;
+  }
+  if (comment.type) {
+    html += `<span class="mrsf-type">${escapeHtml(comment.type)}</span>`;
+  }
+  if (comment.resolved) {
+    html += `<span class="mrsf-resolved-badge">\u2713 resolved</span>`;
+  }
+  html += `</span>`;
+  if (comment.selected_text) {
+    html += `<details class="mrsf-selected-text"><summary class="mrsf-selected-text-summary">${escapeHtml(comment.selected_text)}</summary><span class="mrsf-selected-text-full">${escapeHtml(comment.selected_text)}</span></details>`;
+  }
+  html += `<span class="mrsf-comment-body">${escapeHtml(comment.text)}</span>`;
+  if (interactive) {
+    const line = comment.line != null ? String(comment.line) : "";
+    html += `<span class="mrsf-actions">`;
+    if (comment.resolved) {
+      html += `<button class="mrsf-action-btn" data-mrsf-action="unresolve" data-mrsf-comment-id="${escapeHtml(comment.id)}" data-mrsf-line="${line}">Unresolve</button>`;
+    } else {
+      html += `<button class="mrsf-action-btn" data-mrsf-action="resolve" data-mrsf-comment-id="${escapeHtml(comment.id)}" data-mrsf-line="${line}">Resolve</button>`;
+    }
+    html += `<button class="mrsf-action-btn" data-mrsf-action="reply" data-mrsf-comment-id="${escapeHtml(comment.id)}" data-mrsf-line="${line}">Reply</button>`;
+    html += `<button class="mrsf-action-btn" data-mrsf-action="edit" data-mrsf-comment-id="${escapeHtml(comment.id)}" data-mrsf-line="${line}">Edit</button>`;
+    html += `<button class="mrsf-action-btn mrsf-action-danger" data-mrsf-action="delete" data-mrsf-comment-id="${escapeHtml(comment.id)}" data-mrsf-line="${line}">Delete</button>`;
+    html += `</span>`;
+  }
+  html += `</span>`;
+  return html;
+}
+function renderThreadHtml(thread, interactive) {
+  let html = `<span class="mrsf-thread">`;
+  html += renderCommentHtml(thread.comment, false, interactive);
+  if (thread.replies.length > 0) {
+    html += `<span class="mrsf-replies">`;
+    for (const reply of thread.replies) {
+      html += renderCommentHtml(reply, true, interactive);
+    }
+    html += `</span>`;
+  }
+  html += `</span>`;
+  return html;
+}
+
 // src/controller.ts
-function init() {
-  document.addEventListener("click", (e) => {
-    const target = e.target.closest(
-      "[data-mrsf-action]"
-    );
+var MrsfController = class _MrsfController {
+  container;
+  opts;
+  threads = /* @__PURE__ */ new Map();
+  gutterLeft = null;
+  gutterRight = null;
+  activeTooltip = null;
+  floatingAddButton = null;
+  overlayEl = null;
+  lastSelectionText = null;
+  resizeObserver = null;
+  styleInjected = false;
+  inlineMarks = [];
+  inlineTooltipEl = null;
+  orphanedSection = null;
+  handleResizeBound = this.positionGutterItems.bind(this);
+  handleClickBound = this.handleClick.bind(this);
+  handleSelectionBound = this.handleSelectionChange.bind(this);
+  constructor(container, options = {}) {
+    this.container = container;
+    this.opts = {
+      gutterPosition: options.gutterPosition ?? "right",
+      interactive: options.interactive ?? false,
+      comments: options.comments ?? [],
+      inlineHighlights: options.inlineHighlights ?? true
+    };
+    this.loadCommentData();
+    this.setupOverlayStructure();
+    this.renderGutterItems();
+    this.positionGutterItems();
+    this.renderInlineHighlights();
+    this.renderOrphanedSection();
+    this.resizeObserver = new ResizeObserver(this.handleResizeBound);
+    this.resizeObserver.observe(this.container);
+    document.addEventListener("click", this.handleClickBound);
+    if (this.opts.interactive) {
+      document.addEventListener("selectionchange", this.handleSelectionBound);
+    }
+  }
+  /** Remove all controller DOM and listeners. */
+  destroy() {
+    this.resizeObserver?.disconnect();
+    document.removeEventListener("click", this.handleClickBound);
+    document.removeEventListener("selectionchange", this.handleSelectionBound);
+    this.removeInlineHighlights();
+    this.orphanedSection?.remove();
+    this.gutterLeft?.remove();
+    this.gutterRight?.remove();
+    this.floatingAddButton?.remove();
+    this.closeOverlay();
+    this.container.classList.remove("mrsf-overlay-root");
+  }
+  // ── Data loading ────────────────────────────────────────
+  loadCommentData() {
+    if (this.opts.comments.length > 0) {
+      this.buildThreadMap(this.opts.comments);
+      return;
+    }
+    const script = this.container.querySelector('script[type="application/mrsf+json"]');
+    if (!script?.textContent) return;
+    try {
+      const data = JSON.parse(script.textContent);
+      if (data.threads) {
+        this.buildThreadMap(data.threads);
+      }
+    } catch {
+    }
+  }
+  buildThreadMap(threads) {
+    this.threads.clear();
+    for (const t of threads) {
+      const line = t.comment.line;
+      if (line == null) continue;
+      const arr = this.threads.get(line) ?? [];
+      arr.push(t);
+      this.threads.set(line, arr);
+    }
+  }
+  // ── Overlay structure ───────────────────────────────────
+  setupOverlayStructure() {
+    this.container.classList.add("mrsf-overlay-root");
+    const pos = this.opts.gutterPosition;
+    if (pos === "left") {
+      this.gutterLeft = this.createGutter("mrsf-gutter-left");
+    } else {
+      this.gutterRight = this.createGutter("mrsf-gutter-right");
+    }
+  }
+  createGutter(cls) {
+    const gutter = document.createElement("div");
+    gutter.className = `mrsf-gutter ${cls}`;
+    this.container.appendChild(gutter);
+    return gutter;
+  }
+  // ── Gutter rendering ───────────────────────────────────
+  /** Build badge/add-button elements for each line in the gutter(s). */
+  renderGutterItems() {
+    const lines = this.collectLines();
+    const gutter = this.primaryGutter();
+    if (!gutter) return;
+    for (const line of lines) {
+      const threads = this.threads.get(line);
+      if (threads && threads.length > 0) {
+        const item = this.createBadgeItem(line, threads);
+        gutter.appendChild(item);
+      } else if (this.opts.interactive) {
+        const item = this.createAddItem(line);
+        gutter.appendChild(item);
+      }
+    }
+  }
+  primaryGutter() {
+    return this.gutterLeft ?? this.gutterRight;
+  }
+  /** Collect all unique line numbers from data-mrsf-line elements, expanding multi-line ranges. */
+  collectLines() {
+    const els = this.container.querySelectorAll("[data-mrsf-line]");
+    const seen = /* @__PURE__ */ new Set();
+    for (const el of els) {
+      if (el.tagName === "SCRIPT") continue;
+      const line = parseInt(el.dataset.mrsfLine, 10);
+      if (isNaN(line)) continue;
+      const startLine = parseInt(el.dataset.mrsfStartLine ?? "", 10);
+      const endLine = parseInt(el.dataset.mrsfEndLine ?? "", 10);
+      if (!isNaN(startLine) && !isNaN(endLine) && endLine > startLine) {
+        for (let l = startLine; l <= endLine; l++) seen.add(l);
+      } else {
+        seen.add(line);
+      }
+    }
+    return [...seen].sort((a, b) => a - b);
+  }
+  createBadgeItem(line, threads) {
+    const item = document.createElement("div");
+    item.className = "mrsf-gutter-item";
+    item.dataset.mrsfGutterLine = String(line);
+    const total = threads.reduce((n, t) => n + 1 + t.replies.length, 0);
+    const allResolved = threads.every((t) => t.comment.resolved);
+    const highestSeverity = threads.reduce((sev, t) => {
+      if (t.comment.severity === "high" || sev === "high") return "high";
+      if (t.comment.severity === "medium" || sev === "medium") return "medium";
+      if (t.comment.severity === "low" || sev === "low") return "low";
+      return sev;
+    }, null);
+    const classes = ["mrsf-badge"];
+    if (allResolved) classes.push("mrsf-badge-resolved");
+    if (highestSeverity === "high" || highestSeverity === "medium") {
+      classes.push(`mrsf-badge-severity-${highestSeverity}`);
+    }
+    const icon = allResolved ? "\u2713" : "\u{1F4AC}";
+    const badge = document.createElement("span");
+    badge.className = classes.join(" ");
+    badge.dataset.mrsfLine = String(line);
+    badge.dataset.mrsfAction = "navigate";
+    badge.dataset.mrsfCommentId = threads[0].comment.id;
+    badge.tabIndex = 0;
+    badge.textContent = `${icon} ${total}`;
+    badge.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleTooltip(item, line, threads);
+    });
+    item.appendChild(badge);
+    if (this.opts.interactive) {
+      const addBtn = this.createAddButton(line);
+      item.appendChild(addBtn);
+    }
+    return item;
+  }
+  createAddItem(line) {
+    const item = document.createElement("div");
+    item.className = "mrsf-gutter-item";
+    item.dataset.mrsfGutterLine = String(line);
+    const addBtn = this.createAddButton(line);
+    item.appendChild(addBtn);
+    return item;
+  }
+  createAddButton(line) {
+    const btn = document.createElement("button");
+    btn.className = "mrsf-gutter-add";
+    btn.dataset.mrsfAction = "add";
+    btn.dataset.mrsfLine = String(line);
+    btn.dataset.mrsfStartLine = String(line);
+    btn.dataset.mrsfEndLine = String(line);
+    btn.setAttribute("aria-label", "Add comment");
+    btn.textContent = "+";
+    return btn;
+  }
+  // ── Positioning ─────────────────────────────────────────
+  /** Measure [data-mrsf-line] elements and set gutter item Y offsets. */
+  positionGutterItems() {
+    const containerRect = this.container.getBoundingClientRect();
+    const gutters = [this.gutterLeft, this.gutterRight].filter(Boolean);
+    for (const gutter of gutters) {
+      const items = gutter.querySelectorAll(".mrsf-gutter-item");
+      for (const item of items) {
+        const line = parseInt(item.dataset.mrsfGutterLine, 10);
+        let target = this.container.querySelector(
+          `[data-mrsf-line="${line}"]:not(script):not(.mrsf-gutter-item)`
+        );
+        if (!target) {
+          target = this.findElementForLine(line);
+        }
+        if (!target) {
+          item.style.display = "none";
+          continue;
+        }
+        const targetRect = target.getBoundingClientRect();
+        const top = targetRect.top - containerRect.top;
+        item.style.top = `${top}px`;
+        item.style.display = "";
+      }
+    }
+  }
+  /**
+   * Find the element whose start-line/end-line range contains the given line.
+   * Used for positioning gutter items on expanded multi-line elements.
+   */
+  findElementForLine(line) {
+    const els = this.container.querySelectorAll("[data-mrsf-start-line][data-mrsf-end-line]");
+    for (const el of els) {
+      if (el.tagName === "SCRIPT") continue;
+      const start = parseInt(el.dataset.mrsfStartLine, 10);
+      const end = parseInt(el.dataset.mrsfEndLine, 10);
+      if (!isNaN(start) && !isNaN(end) && line >= start && line <= end) {
+        return el;
+      }
+    }
+    return null;
+  }
+  // ── Orphaned comments section ────────────────────────────
+  /**
+   * Render orphaned comments (whose line doesn't match any DOM element)
+   * in a dedicated section at the bottom of the container.
+   */
+  renderOrphanedSection() {
+    const lines = this.collectLines();
+    const lineSet = new Set(lines);
+    const orphanedThreads = [];
+    for (const [line, threads] of this.threads) {
+      if (!lineSet.has(line)) {
+        orphanedThreads.push(...threads);
+      }
+    }
+    if (orphanedThreads.length === 0) return;
+    const section = document.createElement("div");
+    section.className = "mrsf-orphaned-section";
+    const heading = document.createElement("div");
+    heading.className = "mrsf-orphaned-heading";
+    heading.textContent = `Orphaned Comments (${orphanedThreads.length})`;
+    section.appendChild(heading);
+    const interactive = this.opts.interactive;
+    for (const thread of orphanedThreads) {
+      const wrapper = document.createElement("div");
+      wrapper.className = interactive ? "mrsf-orphaned-thread mrsf-interactive" : "mrsf-orphaned-thread";
+      wrapper.innerHTML = renderThreadHtml(thread, interactive);
+      section.appendChild(wrapper);
+    }
+    this.container.appendChild(section);
+    this.orphanedSection = section;
+  }
+  // ── Inline text highlights ──────────────────────────────
+  /**
+   * For comments with `selected_text`, find the matching text in the DOM
+   * and wrap it in a `<mark class="mrsf-inline-highlight">` element with
+   * hover/click behaviour to show the comment tooltip.
+   */
+  renderInlineHighlights() {
+    if (!this.opts.inlineHighlights) return;
+    for (const [line, threads] of this.threads) {
+      for (const thread of threads) {
+        const comment = thread.comment;
+        if (!comment.selected_text) continue;
+        const el = this.container.querySelector(
+          `[data-mrsf-line="${line}"]:not(script):not(.mrsf-gutter):not(.mrsf-gutter-item)`
+        );
+        if (!el) continue;
+        this.wrapSelectedText(el, comment.selected_text, thread);
+      }
+    }
+  }
+  /**
+   * Strip common inline markdown syntax so `selected_text` from source
+   * can be matched against rendered text content.
+   */
+  static stripInlineMarkdown(text) {
+    let s = text;
+    s = s.replace(/`([^`]+)`/g, "$1");
+    s = s.replace(/\*\*(.+?)\*\*/g, "$1");
+    s = s.replace(/__(.+?)__/g, "$1");
+    s = s.replace(/\*(.+?)\*/g, "$1");
+    s = s.replace(/_(.+?)_/g, "$1");
+    s = s.replace(/~~(.+?)~~/g, "$1");
+    return s;
+  }
+  /**
+   * Walk text nodes inside `root` to find `text`, then wrap the matching
+   * range in a `<mark>` element. Falls back to markdown-stripped matching.
+   */
+  wrapSelectedText(root, selectedText, thread) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let accumulated = "";
+    const textNodes = [];
+    let node;
+    while (node = walker.nextNode()) {
+      const start = accumulated.length;
+      accumulated += node.textContent || "";
+      textNodes.push({ node, start, end: accumulated.length });
+    }
+    let matchStart = accumulated.indexOf(selectedText);
+    let matchLen = selectedText.length;
+    if (matchStart === -1) {
+      const stripped = _MrsfController.stripInlineMarkdown(selectedText);
+      if (stripped !== selectedText) {
+        matchStart = accumulated.indexOf(stripped);
+        matchLen = stripped.length;
+      }
+    }
+    if (matchStart === -1) return;
+    const matchEnd = matchStart + matchLen;
+    const range = document.createRange();
+    let startSet = false;
+    for (const tn of textNodes) {
+      if (!startSet && tn.end > matchStart) {
+        range.setStart(tn.node, matchStart - tn.start);
+        startSet = true;
+      }
+      if (startSet && tn.end >= matchEnd) {
+        range.setEnd(tn.node, matchEnd - tn.start);
+        break;
+      }
+    }
+    if (!startSet) return;
+    const mark = document.createElement("mark");
+    mark.className = "mrsf-inline-highlight";
+    mark.dataset.mrsfCommentId = thread.comment.id;
+    mark.dataset.mrsfLine = String(thread.comment.line);
+    try {
+      range.surroundContents(mark);
+    } catch {
+      const fragment = range.extractContents();
+      mark.appendChild(fragment);
+      range.insertNode(mark);
+    }
+    this.inlineMarks.push(mark);
+    mark.addEventListener("mouseenter", () => {
+      this.showInlineTooltip(mark, thread);
+    });
+    mark.addEventListener("mouseleave", (e) => {
+      const related = e.relatedTarget;
+      if (related && this.inlineTooltipEl?.contains(related)) return;
+      this.scheduleHideInlineTooltip();
+    });
+    mark.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (this.inlineTooltipEl && this.inlineTooltipEl.dataset.mrsfForMark === thread.comment.id) {
+        this.hideInlineTooltip();
+      } else {
+        this.showInlineTooltip(mark, thread);
+      }
+    });
+  }
+  showInlineTooltip(mark, thread) {
+    this.hideInlineTooltip();
+    const tooltip = document.createElement("div");
+    tooltip.className = this.opts.interactive ? "mrsf-inline-tooltip mrsf-interactive mrsf-tooltip-visible" : "mrsf-inline-tooltip mrsf-tooltip-visible";
+    tooltip.dataset.mrsfForMark = thread.comment.id;
+    tooltip.innerHTML = renderThreadHtml(thread, this.opts.interactive);
+    tooltip.addEventListener("mouseenter", () => {
+      this.cancelHideInlineTooltip();
+    });
+    tooltip.addEventListener("mouseleave", () => {
+      this.hideInlineTooltip();
+    });
+    document.body.appendChild(tooltip);
+    this.inlineTooltipEl = tooltip;
+    const rect = mark.getBoundingClientRect();
+    const margin = 4;
+    const tooltipH = tooltip.offsetHeight;
+    if (rect.bottom + margin + tooltipH > window.innerHeight) {
+      tooltip.style.top = `${rect.top - tooltipH - margin}px`;
+    } else {
+      tooltip.style.top = `${rect.bottom + margin}px`;
+    }
+    tooltip.style.left = `${Math.max(0, rect.left)}px`;
+  }
+  hideInlineTimeout = null;
+  scheduleHideInlineTooltip() {
+    this.hideInlineTimeout = setTimeout(() => this.hideInlineTooltip(), 120);
+  }
+  cancelHideInlineTooltip() {
+    if (this.hideInlineTimeout) {
+      clearTimeout(this.hideInlineTimeout);
+      this.hideInlineTimeout = null;
+    }
+  }
+  hideInlineTooltip() {
+    this.cancelHideInlineTooltip();
+    if (this.inlineTooltipEl) {
+      this.inlineTooltipEl.remove();
+      this.inlineTooltipEl = null;
+    }
+  }
+  /** Remove all inline marks, unwrapping their contents back to text. */
+  removeInlineHighlights() {
+    this.hideInlineTooltip();
+    for (const mark of this.inlineMarks) {
+      const parent = mark.parentNode;
+      if (!parent) continue;
+      while (mark.firstChild) {
+        parent.insertBefore(mark.firstChild, mark);
+      }
+      parent.removeChild(mark);
+    }
+    this.inlineMarks = [];
+  }
+  // ── Tooltip ─────────────────────────────────────────────
+  toggleTooltip(anchor, line, threads) {
+    if (this.activeTooltip && this.activeTooltip.parentElement === anchor) {
+      this.hideTooltip();
+      return;
+    }
+    this.hideTooltip();
+    this.showTooltip(anchor, line, threads);
+  }
+  showTooltip(anchor, line, threads) {
+    const tooltip = document.createElement("div");
+    const interactive = this.opts.interactive;
+    tooltip.className = interactive ? "mrsf-tooltip mrsf-interactive mrsf-tooltip-visible" : "mrsf-tooltip mrsf-tooltip-visible";
+    tooltip.dataset.mrsfLine = String(line);
+    let html = "";
+    for (const thread of threads) {
+      html += renderThreadHtml(thread, interactive);
+    }
+    if (interactive) {
+      html += `<div class="mrsf-tooltip-actions"><button class="mrsf-action-btn" data-mrsf-action="add" data-mrsf-line="${line}" data-mrsf-start-line="${line}" data-mrsf-end-line="${line}">Add comment</button></div>`;
+    }
+    tooltip.innerHTML = html;
+    anchor.appendChild(tooltip);
+    this.activeTooltip = tooltip;
+  }
+  hideTooltip() {
+    if (this.activeTooltip) {
+      this.activeTooltip.remove();
+      this.activeTooltip = null;
+    }
+  }
+  // ── Click handling ──────────────────────────────────────
+  handleClick(e) {
+    const target = e.target.closest("[data-mrsf-action]");
+    if (!target && this.activeTooltip) {
+      const tooltipClick = e.target.closest(".mrsf-tooltip");
+      if (!tooltipClick) {
+        this.hideTooltip();
+      }
+      return;
+    }
     if (!target) return;
     const action = target.dataset.mrsfAction;
-    const commentId = target.dataset.mrsfCommentId;
-    if (!action || !commentId) return;
+    if (!action) return;
+    const commentId = target.dataset.mrsfCommentId ?? null;
     const lineStr = target.dataset.mrsfLine;
     const line = lineStr ? parseInt(lineStr, 10) : null;
+    const selectionText = target.dataset.mrsfSelection ?? this.lastSelectionText ?? null;
+    const startLineStr = target.dataset.mrsfStartLine;
+    const endLineStr = target.dataset.mrsfEndLine;
+    const startColStr = target.dataset.mrsfStartColumn;
+    const endColStr = target.dataset.mrsfEndColumn;
+    const startLine = startLineStr ? parseInt(startLineStr, 10) : line ?? null;
+    const endLine = endLineStr ? parseInt(endLineStr, 10) : line ?? null;
+    const startColumn = startColStr ? parseInt(startColStr, 10) : null;
+    const endColumn = endColStr ? parseInt(endColStr, 10) : null;
     e.preventDefault();
     e.stopPropagation();
-    const detail = { commentId, line, action };
+    const detail = {
+      commentId,
+      line,
+      action,
+      selectionText,
+      start_line: startLine,
+      end_line: endLine,
+      start_column: startColumn,
+      end_column: endColumn
+    };
+    if (action === "add" || action === "edit" || action === "reply") {
+      if (action === "add") {
+        this.hideFloatingAddButton();
+      }
+      this.openForm(action, detail);
+      return;
+    }
+    if (action === "resolve" || action === "unresolve" || action === "delete") {
+      this.openConfirm(action, detail);
+      return;
+    }
     document.dispatchEvent(
       new CustomEvent(`mrsf:${action}`, { detail, bubbles: true })
     );
-  });
+  }
+  // ── Selection handling ──────────────────────────────────
+  handleSelectionChange() {
+    const sel = document.getSelection();
+    if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
+      this.hideFloatingAddButton();
+      return;
+    }
+    const text = sel.toString().trim();
+    if (!text) {
+      this.hideFloatingAddButton();
+      return;
+    }
+    const range = sel.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    if (!rect || rect.width === 0 && rect.height === 0) {
+      this.hideFloatingAddButton();
+      return;
+    }
+    const startAnchor = range.startContainer.parentElement?.closest(
+      "[data-mrsf-line]"
+    );
+    const endAnchor = range.endContainer.parentElement?.closest(
+      "[data-mrsf-line]"
+    );
+    const startLineStr = startAnchor?.dataset.mrsfStartLine ?? startAnchor?.dataset.mrsfLine;
+    const endLineStr = endAnchor?.dataset.mrsfEndLine ?? endAnchor?.dataset.mrsfLine ?? startLineStr;
+    const startLine = startLineStr ? parseInt(startLineStr, 10) : null;
+    const endLine = endLineStr ? parseInt(endLineStr, 10) : startLine;
+    const startColumn = range.startContainer.nodeType === Node.TEXT_NODE ? range.startOffset : null;
+    const endColumn = range.endContainer.nodeType === Node.TEXT_NODE ? range.endOffset : null;
+    this.showFloatingAddButton(startLine, endLine, startColumn, endColumn, rect, text);
+  }
+  ensureFloatingAddButton() {
+    if (this.floatingAddButton) return this.floatingAddButton;
+    const btn = document.createElement("button");
+    btn.textContent = "Add comment";
+    btn.className = "mrsf-add-inline-button";
+    btn.dataset.mrsfAction = "add";
+    btn.style.display = "none";
+    btn.style.position = "absolute";
+    btn.style.zIndex = "1200";
+    document.body.appendChild(btn);
+    this.floatingAddButton = btn;
+    return btn;
+  }
+  hideFloatingAddButton() {
+    if (!this.floatingAddButton) return;
+    this.floatingAddButton.style.display = "none";
+    this.floatingAddButton.dataset.mrsfLine = "";
+    this.floatingAddButton.dataset.mrsfStartLine = "";
+    this.floatingAddButton.dataset.mrsfEndLine = "";
+    this.lastSelectionText = null;
+  }
+  showFloatingAddButton(startLine, endLine, startColumn, endColumn, rect, selectionText) {
+    const btn = this.ensureFloatingAddButton();
+    if (startLine != null) {
+      btn.dataset.mrsfLine = String(startLine);
+      btn.dataset.mrsfStartLine = String(startLine);
+      btn.dataset.mrsfEndLine = String(endLine ?? startLine);
+    } else {
+      delete btn.dataset.mrsfLine;
+      delete btn.dataset.mrsfStartLine;
+      delete btn.dataset.mrsfEndLine;
+    }
+    if (startColumn != null) {
+      btn.dataset.mrsfStartColumn = String(startColumn);
+    } else {
+      delete btn.dataset.mrsfStartColumn;
+    }
+    if (endColumn != null) {
+      btn.dataset.mrsfEndColumn = String(endColumn);
+    } else {
+      delete btn.dataset.mrsfEndColumn;
+    }
+    this.lastSelectionText = selectionText;
+    const margin = 6;
+    btn.style.visibility = "hidden";
+    btn.style.display = "block";
+    const height = btn.offsetHeight || 0;
+    const top = window.scrollY + rect.top - height - margin;
+    const left = window.scrollX + rect.left;
+    btn.style.top = `${Math.max(0, top)}px`;
+    btn.style.left = `${Math.max(0, left)}px`;
+    btn.style.visibility = "visible";
+  }
+  // ── Dialog: form (add/edit/reply) ───────────────────────
+  injectStyles() {
+    if (this.styleInjected) return;
+    const css = `
+.mrsf-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2000; display: flex; align-items: center; justify-content: center; }
+.mrsf-dialog { background: var(--mrsf-dialog-bg, var(--vp-c-bg, #1e1e1e)); color: var(--mrsf-dialog-fg, var(--vp-c-text-1, #f3f3f3)); border: 1px solid var(--mrsf-dialog-border, var(--vp-c-divider, #444)); border-radius: 8px; width: min(520px, 90vw); box-shadow: 0 10px 40px rgba(0,0,0,0.35); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+.mrsf-dialog header { padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--mrsf-dialog-border, var(--vp-c-divider, #333)); }
+.mrsf-dialog form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.mrsf-field { display: flex; flex-direction: column; gap: 6px; }
+.mrsf-field label { font-size: 13px; color: var(--mrsf-dialog-muted, var(--vp-c-text-2, #ccc)); }
+.mrsf-field input, .mrsf-field select, .mrsf-field textarea { background: var(--mrsf-field-bg, var(--vp-c-bg-soft, #252526)); color: var(--mrsf-dialog-fg, var(--vp-c-text-1, #f3f3f3)); border: 1px solid var(--mrsf-dialog-border, var(--vp-c-divider, #3c3c3c)); border-radius: 4px; padding: 6px 8px; font-size: 13px; }
+.mrsf-field textarea { min-height: 100px; resize: vertical; }
+.mrsf-actions-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 0; padding: 12px 16px 16px; border-top: 1px solid var(--mrsf-dialog-border, var(--vp-c-divider, #333)); }
+.mrsf-btn { padding: 6px 12px; border-radius: 4px; border: 1px solid var(--mrsf-dialog-border, var(--vp-c-divider, #3c3c3c)); background: var(--mrsf-button-bg, var(--vp-c-bg-soft, #2d2d30)); color: var(--mrsf-dialog-fg, var(--vp-c-text-1, #f3f3f3)); cursor: pointer; }
+.mrsf-btn-primary { background: var(--mrsf-button-primary-bg, #0e639c); border-color: var(--mrsf-button-primary-bg, #0e639c); color: #fff; }
+.mrsf-helper { font-size: 12px; color: var(--mrsf-dialog-muted, var(--vp-c-text-2, #aaa)); }
+`;
+    const style = document.createElement("style");
+    style.textContent = css;
+    document.head.appendChild(style);
+    this.styleInjected = true;
+  }
+  closeOverlay() {
+    if (this.overlayEl?.parentElement) {
+      this.overlayEl.parentElement.removeChild(this.overlayEl);
+    }
+    this.overlayEl = null;
+  }
+  openForm(action, detail) {
+    if (window.mrsfDisableBuiltinUi) return;
+    this.injectStyles();
+    this.closeOverlay();
+    const selText = detail.selectionText ?? "";
+    const line = detail.line ?? detail.start_line ?? null;
+    const endLine = detail.end_line ?? detail.line ?? null;
+    const startCol = detail.start_column ?? null;
+    const endCol = detail.end_column ?? null;
+    const overlay = document.createElement("div");
+    overlay.className = "mrsf-overlay";
+    const dialog = document.createElement("div");
+    dialog.className = "mrsf-dialog";
+    const header = document.createElement("header");
+    header.textContent = action === "add" ? "Add comment" : action === "edit" ? "Edit comment" : "Reply";
+    dialog.appendChild(header);
+    const form = document.createElement("form");
+    const field = (labelText, inputEl, helper) => {
+      const wrap = document.createElement("div");
+      wrap.className = "mrsf-field";
+      const label = document.createElement("label");
+      label.textContent = labelText;
+      wrap.appendChild(label);
+      wrap.appendChild(inputEl);
+      if (helper) {
+        const h = document.createElement("div");
+        h.className = "mrsf-helper";
+        h.textContent = helper;
+        wrap.appendChild(h);
+      }
+      form.appendChild(wrap);
+    };
+    const textArea = document.createElement("textarea");
+    textArea.name = "text";
+    textArea.required = true;
+    field("Comment text", textArea);
+    const typeSelect = document.createElement("select");
+    typeSelect.name = "type";
+    ["", "suggestion", "issue", "question", "accuracy", "style", "clarity"].forEach((t) => {
+      const opt = document.createElement("option");
+      opt.value = t;
+      opt.textContent = t || "(none)";
+      typeSelect.appendChild(opt);
+    });
+    field("Type", typeSelect, "Optional");
+    const severitySelect = document.createElement("select");
+    severitySelect.name = "severity";
+    ["", "low", "medium", "high"].forEach((s) => {
+      const opt = document.createElement("option");
+      opt.value = s;
+      opt.textContent = s || "(none)";
+      severitySelect.appendChild(opt);
+    });
+    field("Severity", severitySelect, "Optional");
+    if (selText) {
+      const pre = document.createElement("pre");
+      pre.textContent = selText;
+      pre.style.margin = "0";
+      pre.style.whiteSpace = "pre-wrap";
+      field("Selected text", pre, "Captured automatically");
+    }
+    const actions = document.createElement("div");
+    actions.className = "mrsf-actions-row";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "mrsf-btn";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.addEventListener("click", () => this.closeOverlay());
+    actions.appendChild(cancelBtn);
+    const submitBtn = document.createElement("button");
+    submitBtn.type = "submit";
+    submitBtn.className = "mrsf-btn mrsf-btn-primary";
+    submitBtn.textContent = action === "add" ? "Add" : action === "reply" ? "Reply" : "Save";
+    actions.appendChild(submitBtn);
+    form.appendChild(actions);
+    form.addEventListener("submit", (ev) => {
+      ev.preventDefault();
+      const detailOut = {
+        action,
+        commentId: detail.commentId,
+        text: textArea.value.trim(),
+        type: typeSelect.value || null,
+        severity: severitySelect.value || null,
+        line,
+        end_line: endLine,
+        start_column: startCol,
+        end_column: endCol,
+        selection_text: selText || null
+      };
+      document.dispatchEvent(new CustomEvent("mrsf:submit", { detail: detailOut, bubbles: true }));
+      this.closeOverlay();
+    });
+    dialog.appendChild(form);
+    overlay.appendChild(dialog);
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) this.closeOverlay();
+    });
+    document.body.appendChild(overlay);
+    this.overlayEl = overlay;
+  }
+  // ── Dialog: confirm (resolve / unresolve / delete) ──────
+  openConfirm(action, detail) {
+    if (window.mrsfDisableBuiltinUi) return;
+    this.injectStyles();
+    this.closeOverlay();
+    const overlay = document.createElement("div");
+    overlay.className = "mrsf-overlay";
+    const dialog = document.createElement("div");
+    dialog.className = "mrsf-dialog";
+    const header = document.createElement("header");
+    header.textContent = action === "delete" ? "Delete comment" : "Change status";
+    dialog.appendChild(header);
+    const body = document.createElement("div");
+    body.style.padding = "16px";
+    body.textContent = action === "delete" ? "Delete this comment?" : action === "resolve" ? "Mark this comment as resolved?" : "Mark this comment as unresolved?";
+    dialog.appendChild(body);
+    const actions = document.createElement("div");
+    actions.className = "mrsf-actions-row";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "mrsf-btn";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.addEventListener("click", () => this.closeOverlay());
+    actions.appendChild(cancelBtn);
+    const confirmBtn = document.createElement("button");
+    confirmBtn.type = "button";
+    confirmBtn.className = "mrsf-btn mrsf-btn-primary";
+    confirmBtn.textContent = action === "delete" ? "Delete" : "Confirm";
+    confirmBtn.addEventListener("click", () => {
+      const detailOut = {
+        action,
+        commentId: detail.commentId,
+        text: "",
+        type: null,
+        severity: null,
+        line: detail.line,
+        end_line: detail.end_line ?? detail.line ?? null,
+        start_column: detail.start_column ?? null,
+        end_column: detail.end_column ?? null,
+        selection_text: detail.selectionText ?? null
+      };
+      document.dispatchEvent(new CustomEvent("mrsf:submit", { detail: detailOut, bubbles: true }));
+      this.closeOverlay();
+    });
+    actions.appendChild(confirmBtn);
+    dialog.appendChild(actions);
+    overlay.appendChild(dialog);
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) this.closeOverlay();
+    });
+    document.body.appendChild(overlay);
+    this.overlayEl = overlay;
+  }
+};
+var autoInitDone = false;
+function autoInit() {
+  if (autoInitDone) return;
+  autoInitDone = true;
+  const containers = document.querySelectorAll("[data-mrsf-controller]");
+  for (const container of containers) {
+    const pos = container.dataset.mrsfGutterPosition;
+    const interactive = container.dataset.mrsfInteractive === "true";
+    new MrsfController(container, { gutterPosition: pos ?? "right", interactive });
+  }
+}
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", autoInit);
+  } else {
+    autoInit();
+  }
 }
-init();
+export {
+  MrsfController,
+  autoInit
+};
 //# sourceMappingURL=controller.js.map