@mrsf/marp-mrsf 0.4.8

package/dist/controller.js

@@ -0,0 +1,1179 @@
+// src/gutter.ts
+function formatMrsfCount(count, max = 9) {
+  return count > max ? `${max}+` : String(count);
+}
+function createMrsfGutterBadgePresentation(context) {
+  const icon = context.resolvedState === "resolved" ? "\u2713" : "\u{1F4AC}";
+  const countText = formatMrsfCount(context.commentCount);
+  const label = `${icon} ${countText}`;
+  const threadSummary = context.threadCount === 1 ? "1 thread" : `${context.threadCount} threads`;
+  const commentSummary = context.commentCount === 1 ? "1 comment" : `${context.commentCount} comments`;
+  return {
+    icon,
+    countText,
+    label,
+    title: `${threadSummary}, ${commentSummary}`,
+    ariaLabel: `${label} on line ${context.line}`
+  };
+}
+function createMrsfGutterAddButtonPresentation(_context) {
+  return {
+    label: "Add",
+    title: "Add comment thread",
+    ariaLabel: "Add comment thread"
+  };
+}
+function resolveMrsfGutterBadgePresentation(context, renderer) {
+  const defaultPresentation = createMrsfGutterBadgePresentation(context);
+  const override = renderer?.({
+    ...context,
+    defaultPresentation
+  });
+  return {
+    ...defaultPresentation,
+    ...override,
+    attributes: {
+      ...defaultPresentation.attributes ?? {},
+      ...override?.attributes ?? {}
+    }
+  };
+}
+function resolveMrsfGutterAddButtonPresentation(context, renderer) {
+  const defaultPresentation = createMrsfGutterAddButtonPresentation(context);
+  const override = renderer?.({
+    ...context,
+    defaultPresentation
+  });
+  return {
+    ...defaultPresentation,
+    ...override,
+    attributes: {
+      ...defaultPresentation.attributes ?? {},
+      ...override?.attributes ?? {}
+    }
+  };
+}
+
+// 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 = `<div class="mrsf-comment${resolvedClass}${replyClass}" data-mrsf-comment-id="${escapeHtml(comment.id)}">`;
+  html += `<div 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 += `</div>`;
+  if (comment.selected_text) {
+    html += `<details class="mrsf-selected-text"><summary class="mrsf-selected-text-summary">${escapeHtml(comment.selected_text)}</summary><div class="mrsf-selected-text-full">${escapeHtml(comment.selected_text)}</div></details>`;
+  }
+  html += `<div class="mrsf-comment-body">${escapeHtml(comment.text)}</div>`;
+  if (interactive) {
+    const line = comment.line != null ? String(comment.line) : "";
+    html += `<div 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 += `</div>`;
+  }
+  html += `</div>`;
+  return html;
+}
+function renderThreadHtml(thread, interactive) {
+  let html = `<div class="mrsf-thread">`;
+  html += renderCommentHtml(thread.comment, false, interactive);
+  if (thread.replies.length > 0) {
+    html += `<div class="mrsf-replies">`;
+    for (const reply of thread.replies) {
+      html += renderCommentHtml(reply, true, interactive);
+    }
+    html += `</div>`;
+  }
+  html += `</div>`;
+  return html;
+}
+
+// src/controller.ts
+var MrsfController = class _MrsfController {
+  container;
+  opts;
+  threads = /* @__PURE__ */ new Map();
+  gutterLeft = null;
+  gutterRight = null;
+  activeTooltip = null;
+  floatingAddButton = null;
+  overlayEl = null;
+  lastSelectionText = null;
+  resizeObserver = null;
+  mutationObserver = null;
+  styleInjected = false;
+  inlineMarks = [];
+  inlineTooltipEl = null;
+  orphanedSection = null;
+  refreshQueued = false;
+  handleResizeBound = this.positionGutterItems.bind(this);
+  handleMutationBound = this.handleMutations.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,
+      gutterRenderers: options.gutterRenderers ?? {}
+    };
+    this.loadCommentData();
+    this.setupOverlayStructure();
+    this.renderGutterItems();
+    this.positionGutterItems();
+    this.renderInlineHighlights();
+    this.renderOrphanedSection();
+    controllerRegistry.add(this);
+    this.resizeObserver = new ResizeObserver(this.handleResizeBound);
+    this.resizeObserver.observe(this.container);
+    if (typeof MutationObserver !== "undefined") {
+      this.mutationObserver = new MutationObserver(this.handleMutationBound);
+      this.mutationObserver.observe(this.container, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+    document.addEventListener("click", this.handleClickBound);
+    if (this.opts.interactive) {
+      document.addEventListener("selectionchange", this.handleSelectionBound);
+    }
+  }
+  /** Remove all controller DOM and listeners. */
+  destroy() {
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+    controllerRegistry.delete(this);
+    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");
+  }
+  /** Recalculate gutter positions after async layout changes such as Mermaid renders. */
+  refresh() {
+    this.positionGutterItems();
+  }
+  // ── 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);
+    }
+  }
+  findCommentById(commentId) {
+    if (!commentId) return null;
+    for (const threadList of this.threads.values()) {
+      for (const thread of threadList) {
+        if (thread.comment.id === commentId) {
+          return thread.comment;
+        }
+        const reply = thread.replies.find((item) => item.id === commentId);
+        if (reply) {
+          return reply;
+        }
+      }
+    }
+    return null;
+  }
+  orderThreadsForDisplay(threads) {
+    return [...threads].sort((left, right) => {
+      if (left.comment.resolved === right.comment.resolved) return 0;
+      return left.comment.resolved ? 1 : -1;
+    });
+  }
+  // ── 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 displayMap = this.collectThreadDisplayMap(lines);
+    const gutter = this.primaryGutter();
+    if (!gutter) return;
+    for (const line of lines) {
+      const threads = displayMap.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;
+  }
+  shouldExpandRange(el) {
+    return el.tagName === "BLOCKQUOTE" || el.tagName === "PRE";
+  }
+  addVisibleLinesForElement(el, seen) {
+    const line = parseInt(el.dataset.mrsfLine ?? "", 10);
+    const startLine = parseInt(el.dataset.mrsfStartLine ?? "", 10);
+    const endLine = parseInt(el.dataset.mrsfEndLine ?? "", 10);
+    if (el.tagName === "PRE" && !isNaN(startLine) && !isNaN(endLine) && endLine > startLine) {
+      const visibleStart = startLine + 1;
+      const visibleEnd = endLine - 1;
+      for (let currentLine = visibleStart; currentLine <= visibleEnd; currentLine++) {
+        seen.add(currentLine);
+      }
+      return;
+    }
+    if (!isNaN(line)) {
+      seen.add(line);
+    }
+    if (this.shouldExpandRange(el) && !isNaN(startLine) && !isNaN(endLine) && endLine > startLine) {
+      for (let currentLine = startLine; currentLine <= endLine; currentLine++) {
+        seen.add(currentLine);
+      }
+    }
+  }
+  /** 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;
+      this.addVisibleLinesForElement(el, seen);
+    }
+    return [...seen].sort((a, b) => a - b);
+  }
+  resolveThreadDisplayLine(thread, availableLines) {
+    const startLine = thread.comment.line;
+    if (startLine == null) return null;
+    const endLine = thread.comment.end_line != null && thread.comment.end_line >= startLine ? thread.comment.end_line : startLine;
+    for (let currentLine = startLine; currentLine <= endLine; currentLine++) {
+      if (availableLines.has(currentLine)) {
+        return currentLine;
+      }
+    }
+    return null;
+  }
+  collectThreadDisplayMap(lines) {
+    const availableLines = new Set(lines);
+    const displayMap = /* @__PURE__ */ new Map();
+    for (const threads of this.threads.values()) {
+      for (const thread of threads) {
+        const displayLine = this.resolveThreadDisplayLine(thread, availableLines);
+        if (displayLine == null) continue;
+        const existing = displayMap.get(displayLine) ?? [];
+        existing.push(thread);
+        displayMap.set(displayLine, existing);
+      }
+    }
+    return displayMap;
+  }
+  createBadgeItem(line, threads) {
+    const item = document.createElement("div");
+    item.className = "mrsf-gutter-item";
+    item.dataset.mrsfGutterLine = String(line);
+    const displayThreads = this.orderThreadsForDisplay(threads);
+    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 presentation = resolveMrsfGutterBadgePresentation(
+      {
+        line,
+        commentCount: total,
+        threadCount: threads.length,
+        resolvedState: allResolved ? "resolved" : threads.some((thread) => thread.comment.resolved) ? "mixed" : "open",
+        highestSeverity,
+        isActive: this.activeTooltip?.parentElement === item
+      },
+      this.opts.gutterRenderers.badge
+    );
+    const badge = document.createElement("span");
+    badge.className = classes.join(" ");
+    if (presentation.className) {
+      badge.classList.add(...presentation.className.split(/\s+/).filter(Boolean));
+    }
+    badge.dataset.mrsfLine = String(line);
+    badge.dataset.mrsfAction = "navigate";
+    badge.dataset.mrsfCommentId = displayThreads[0].comment.id;
+    badge.tabIndex = 0;
+    badge.textContent = presentation.label;
+    badge.title = presentation.title;
+    badge.setAttribute("aria-label", presentation.ariaLabel);
+    for (const [name, value] of Object.entries(presentation.attributes ?? {})) {
+      badge.setAttribute(name, value);
+    }
+    badge.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleTooltip(item, line, displayThreads);
+    });
+    item.appendChild(badge);
+    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 presentation = resolveMrsfGutterAddButtonPresentation(
+      {
+        line,
+        isActive: false
+      },
+      this.opts.gutterRenderers.addButton
+    );
+    const btn = document.createElement("button");
+    btn.className = "mrsf-gutter-add";
+    if (presentation.className) {
+      btn.classList.add(...presentation.className.split(/\s+/).filter(Boolean));
+    }
+    btn.type = "button";
+    btn.dataset.mrsfAction = "add";
+    btn.dataset.mrsfLine = String(line);
+    btn.dataset.mrsfStartLine = String(line);
+    btn.dataset.mrsfEndLine = String(line);
+    btn.title = presentation.title;
+    btn.setAttribute("aria-label", presentation.ariaLabel);
+    btn.textContent = presentation.label;
+    for (const [name, value] of Object.entries(presentation.attributes ?? {})) {
+      btn.setAttribute(name, value);
+    }
+    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");
+      const positioned = [];
+      for (const item of items) {
+        const line = parseInt(item.dataset.mrsfGutterLine, 10);
+        let target = this.findDirectElementForLine(line);
+        if (!target) {
+          target = this.findElementForLine(line);
+        }
+        if (!target) {
+          item.style.display = "none";
+          continue;
+        }
+        const top = this.calculateItemTop(target, line, containerRect);
+        item.style.top = `${top}px`;
+        item.style.display = "";
+        positioned.push({
+          item,
+          target,
+          kind: item.querySelector(".mrsf-badge") ? "badge" : "add"
+        });
+      }
+      this.suppressAddItemsThatShareBadgeTargets(positioned);
+    }
+  }
+  suppressAddItemsThatShareBadgeTargets(positioned) {
+    const badgeTargets = new Set(
+      positioned.filter((entry) => entry.kind === "badge").map((entry) => entry.target)
+    );
+    for (const entry of positioned) {
+      if (entry.kind === "add" && badgeTargets.has(entry.target)) {
+        entry.item.style.display = "none";
+      }
+    }
+  }
+  handleMutations(records) {
+    if (!records.some((record) => this.isExternalContentMutation(record))) {
+      return;
+    }
+    this.queueRefresh();
+  }
+  isExternalContentMutation(record) {
+    const target = record.target instanceof Node ? record.target : null;
+    if (target && this.isControllerOwnedNode(target)) {
+      return false;
+    }
+    for (const node of [...record.addedNodes, ...record.removedNodes]) {
+      if (!this.isControllerOwnedNode(node)) {
+        return true;
+      }
+    }
+    return record.type === "characterData";
+  }
+  isControllerOwnedNode(node) {
+    if (!(node instanceof Element)) {
+      return false;
+    }
+    return Boolean(
+      node.closest(".mrsf-gutter") || node.closest(".mrsf-orphaned-section") || node.closest('script[type="application/mrsf+json"]')
+    );
+  }
+  queueRefresh() {
+    if (this.refreshQueued) return;
+    this.refreshQueued = true;
+    queueMicrotask(() => {
+      this.refreshQueued = false;
+      this.refresh();
+    });
+  }
+  findDirectElementForLine(line) {
+    const els = this.container.querySelectorAll(`[data-mrsf-line="${line}"]`);
+    for (const el of els) {
+      if (el.tagName === "SCRIPT") continue;
+      if (el.closest(".mrsf-gutter")) continue;
+      if (el.classList.contains("mrsf-gutter-item")) continue;
+      return el;
+    }
+    return null;
+  }
+  calculateItemTop(target, line, containerRect) {
+    const targetRect = target.getBoundingClientRect();
+    const rangeTop = targetRect.top - containerRect.top + this.container.scrollTop;
+    if (target.tagName !== "PRE") {
+      return rangeTop;
+    }
+    const startLine = parseInt(target.dataset.mrsfStartLine ?? "", 10);
+    const endLine = parseInt(target.dataset.mrsfEndLine ?? "", 10);
+    const visibleStart = startLine + 1;
+    const visibleEnd = endLine - 1;
+    const visibleLineCount = visibleEnd - visibleStart + 1;
+    if (isNaN(startLine) || isNaN(endLine) || visibleLineCount <= 0 || line < visibleStart || line > visibleEnd) {
+      return rangeTop;
+    }
+    const styles = window.getComputedStyle(target);
+    const paddingTop = parseFloat(styles.paddingTop) || 0;
+    const paddingBottom = parseFloat(styles.paddingBottom) || 0;
+    const contentHeight = Math.max(targetRect.height - paddingTop - paddingBottom, 0);
+    let lineHeight = parseFloat(styles.lineHeight);
+    if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
+      lineHeight = visibleLineCount > 0 ? contentHeight / visibleLineCount : 0;
+    }
+    return rangeTop + paddingTop + (line - visibleStart) * lineHeight;
+  }
+  /**
+   * 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 threads of this.threads.values()) {
+      for (const thread of threads) {
+        if (this.resolveThreadDisplayLine(thread, lineSet) == null) {
+          orphanedThreads.push(thread);
+        }
+      }
+    }
+    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 this.orderThreadsForDisplay(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;
+    const lineSet = new Set(this.collectLines());
+    for (const threads of this.threads.values()) {
+      for (const thread of threads) {
+        const comment = thread.comment;
+        if (!comment.selected_text) continue;
+        const displayLine = this.resolveThreadDisplayLine(thread, lineSet);
+        if (displayLine == null) continue;
+        const el = this.container.querySelector(
+          `[data-mrsf-line="${displayLine}"]:not(script):not(.mrsf-gutter):not(.mrsf-gutter-item)`
+        );
+        if (!el) continue;
+        this.wrapSelectedText(el, comment.selected_text, thread, displayLine);
+      }
+    }
+  }
+  /**
+   * 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, displayLine) {
+    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(displayLine);
+    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);
+    this.applyThemeVariables(tooltip);
+    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`;
+  }
+  applyThemeVariables(el) {
+    const styles = window.getComputedStyle(this.container);
+    const themeVars = [
+      "--mrsf-accent",
+      "--mrsf-badge-bg",
+      "--mrsf-badge-fg",
+      "--mrsf-badge-resolved-bg",
+      "--mrsf-add-bg",
+      "--mrsf-add-fg",
+      "--mrsf-add-border",
+      "--mrsf-tooltip-bg",
+      "--mrsf-tooltip-fg",
+      "--mrsf-tooltip-border",
+      "--mrsf-highlight-bg",
+      "--mrsf-highlight-border",
+      "--mrsf-severity-high",
+      "--mrsf-severity-medium",
+      "--mrsf-severity-low",
+      "--mrsf-font-family"
+    ];
+    for (const name of themeVars) {
+      const value = styles.getPropertyValue(name).trim();
+      if (value) {
+        el.style.setProperty(name, value);
+      }
+    }
+  }
+  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 this.orderThreadsForDisplay(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;
+    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,
+      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);
+    if (!this.selectionBelongsToContainer(range)) {
+      this.hideFloatingAddButton();
+      return;
+    }
+    const rect = range.getBoundingClientRect();
+    if (!rect || rect.width === 0 && rect.height === 0) {
+      this.hideFloatingAddButton();
+      return;
+    }
+    const startAnchor = this.findSelectionAnchor(range.startContainer);
+    const endAnchor = this.findSelectionAnchor(range.endContainer);
+    if (!startAnchor || !endAnchor) {
+      this.hideFloatingAddButton();
+      return;
+    }
+    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);
+  }
+  selectionBelongsToContainer(range) {
+    return this.container.contains(range.commonAncestorContainer) && this.container.contains(range.startContainer) && this.container.contains(range.endContainer);
+  }
+  findSelectionAnchor(node) {
+    const element = node instanceof Element ? node : node.parentElement;
+    const anchor = element?.closest("[data-mrsf-line]") ?? null;
+    return anchor && this.container.contains(anchor) ? anchor : null;
+  }
+  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";
+    this.container.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;
+    const containerRect = this.container.getBoundingClientRect();
+    btn.style.visibility = "hidden";
+    btn.style.display = "block";
+    const width = btn.offsetWidth || 0;
+    const height = btn.offsetHeight || 0;
+    const minTop = this.container.scrollTop;
+    const maxTop = Math.max(minTop, minTop + this.container.clientHeight - height);
+    const minLeft = this.container.scrollLeft;
+    const maxLeft = Math.max(minLeft, minLeft + this.container.clientWidth - width);
+    const preferredTop = rect.top - containerRect.top + this.container.scrollTop - height - margin;
+    const fallbackTop = rect.bottom - containerRect.top + this.container.scrollTop + margin;
+    const unclampedTop = preferredTop < minTop ? fallbackTop : preferredTop;
+    const unclampedLeft = rect.left - containerRect.left + this.container.scrollLeft;
+    const top = Math.min(Math.max(unclampedTop, minTop), maxTop);
+    const left = Math.min(Math.max(unclampedLeft, minLeft), maxLeft);
+    btn.style.top = `${top}px`;
+    btn.style.left = `${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: var(--mrsf-dialog-backdrop, rgba(15, 23, 42, 0.28)); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 12px; }
+.mrsf-dialog { background: var(--mrsf-dialog-bg, var(--mrsf-tooltip-bg, #0f172a)); color: var(--mrsf-dialog-fg, var(--mrsf-tooltip-fg, #e5eefb)); border: 1px solid var(--mrsf-dialog-border, var(--mrsf-tooltip-border, rgba(148, 163, 184, 0.35))); border-radius: 10px; width: min(420px, calc(100vw - 24px)); box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24); font-family: var(--mrsf-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-size: 13px; overflow: hidden; }
+.mrsf-dialog header { padding: 10px 12px; font-weight: 600; line-height: 1.35; border-bottom: 1px solid var(--mrsf-dialog-border, var(--mrsf-tooltip-border, rgba(148, 163, 184, 0.35))); }
+.mrsf-dialog form { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
+.mrsf-dialog-body { padding: 12px; line-height: 1.45; }
+.mrsf-field { display: flex; flex-direction: column; gap: 4px; }
+.mrsf-field label { font-size: 12px; color: var(--mrsf-dialog-muted, color-mix(in srgb, var(--mrsf-dialog-fg, var(--mrsf-tooltip-fg, #e5eefb)) 72%, transparent)); }
+.mrsf-field input, .mrsf-field select, .mrsf-field textarea, .mrsf-field pre { background: var(--mrsf-field-bg, color-mix(in srgb, var(--mrsf-dialog-bg, var(--mrsf-tooltip-bg, #0f172a)) 88%, white)); color: var(--mrsf-dialog-fg, var(--mrsf-tooltip-fg, #e5eefb)); border: 1px solid var(--mrsf-dialog-border, var(--mrsf-tooltip-border, rgba(148, 163, 184, 0.35))); border-radius: 6px; padding: 7px 9px; font-size: 12px; line-height: 1.45; }
+.mrsf-field textarea { min-height: 76px; resize: vertical; }
+.mrsf-field select { min-height: 34px; }
+.mrsf-field pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.mrsf-field input:focus, .mrsf-field select:focus, .mrsf-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--mrsf-accent, #2563eb) 38%, transparent); outline-offset: 1px; }
+.mrsf-actions-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 0; padding: 10px 12px 12px; border-top: 1px solid var(--mrsf-dialog-border, var(--mrsf-tooltip-border, rgba(148, 163, 184, 0.35))); }
+.mrsf-btn { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--mrsf-dialog-border, var(--mrsf-tooltip-border, rgba(148, 163, 184, 0.35))); background: var(--mrsf-button-bg, color-mix(in srgb, var(--mrsf-dialog-bg, var(--mrsf-tooltip-bg, #0f172a)) 82%, white)); color: var(--mrsf-dialog-fg, var(--mrsf-tooltip-fg, #e5eefb)); cursor: pointer; font: inherit; line-height: 1.2; }
+.mrsf-btn-primary { background: var(--mrsf-button-primary-bg, var(--mrsf-accent, #2563eb)); border-color: var(--mrsf-button-primary-bg, var(--mrsf-accent, #2563eb)); color: #fff; }
+.mrsf-helper { font-size: 11px; color: var(--mrsf-dialog-muted, color-mix(in srgb, var(--mrsf-dialog-fg, var(--mrsf-tooltip-fg, #e5eefb)) 72%, transparent)); }
+`;
+    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 sourceComment = action === "edit" ? this.findCommentById(detail.commentId) : null;
+    const selText = detail.selectionText ?? sourceComment?.selected_text ?? "";
+    const line = detail.line ?? detail.start_line ?? sourceComment?.line ?? null;
+    const endLine = detail.end_line ?? detail.line ?? sourceComment?.end_line ?? sourceComment?.line ?? null;
+    const startCol = detail.start_column ?? sourceComment?.start_column ?? null;
+    const endCol = detail.end_column ?? sourceComment?.end_column ?? null;
+    const overlay = document.createElement("div");
+    overlay.className = "mrsf-overlay";
+    this.applyThemeVariables(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;
+    textArea.value = action === "edit" ? sourceComment?.text ?? "" : "";
+    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);
+    });
+    typeSelect.value = action === "edit" ? sourceComment?.type ?? "" : "";
+    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);
+    });
+    severitySelect.value = action === "edit" ? sourceComment?.severity ?? "" : "";
+    field("Severity", severitySelect, "Optional");
+    if (selText) {
+      const pre = document.createElement("pre");
+      pre.textContent = selText;
+      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";
+    this.applyThemeVariables(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.className = "mrsf-dialog-body";
+    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 controllerRegistry = /* @__PURE__ */ new Set();
+var autoInitDone = false;
+function refreshAll() {
+  for (const controller of controllerRegistry) {
+    controller.refresh();
+  }
+}
+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();
+  }
+}
+export {
+  MrsfController,
+  autoInit,
+  refreshAll
+};
+//# sourceMappingURL=controller.js.map