rails-markup 1.4.3 → 1.4.4

data/app/assets/javascripts/rails_markup/toolbar.js

@@ -1,2779 +0,0 @@
-/**
- * Rails Markup Toolbar — self-contained annotation UI
- * No dependencies (no Stimulus, no importmap). Works in any Rails app.
- *
- * Usage: include via <script> tag, then call:
- *   RailsMarkupToolbar.init({ endpoint: "/feedback/api", accent: "indigo" })
- */
-(function(global) {
-  "use strict";
-
-  if (global.RailsMarkupToolbar) return;
-
-  const RailsMarkupToolbar = {
-    // State
-    annotations: [],
-    outbox: {},
-    legacyMigrations: {},
-    nextId: 1,
-    active: false,
-    serverOnline: false,
-    sessionId: null,
-    sseSource: null,
-    healthInterval: null,
-    hoveredElement: null,
-    selectedText: null,
-    clickedElement: null,
-    activeFilter: "all",
-    editingId: null,
-    _currentScreenshot: null,
-    _storageError: null,
-    _outboxFlushScheduled: false,
-    _outboxFlushTimer: null,
-    _flushPromise: null,
-    _flushAfterPullPromise: null,
-    _healthPromise: null,
-    _pullPromise: null,
-    _pullPageUrl: null,
-    _pullNeeded: true,
-    _syncRetryTimer: null,
-    _syncRetryAttempt: 0,
-    _syncRetryDelay: 0,
-    _syncBaseRetryDelay: 1000,
-    _syncMaxRetryDelay: 30000,
-    _syncMalformedLimit: 3,
-    _syncUnavailable: null,
-    legacyStorageEndpoint: null,
-
-    // Drawing state
-    drawingMode: null,      // null | "arrow" | "rect" | "highlight"
-    drawingCanvas: null,
-    drawingCtx: null,
-    drawingStart: null,
-    drawingHistory: [],
-    _screenshotImg: null,
-
-    // Config
-    endpoint: "/feedback/api",
-    accent: "indigo",
-    position: "bl",
-    size: "default",
-    fabVisible: true,
-    enableScreenshots: true,
-
-    // DOM refs (set in init)
-    root: null,
-
-    init(opts = {}) {
-      const previousPathname = this._currentPathname;
-      const previousPageUrl = this._currentPageUrl;
-      const currentPageUrl = this._pageUrl();
-      this.endpoint = opts.endpoint || "/feedback/api";
-      this.accent = opts.accent || "indigo";
-      this.position = opts.position || "bl";
-      this.size = opts.size || "default";
-      this.fabVisible = opts.fabVisible !== false;
-      this.enableScreenshots = opts.enableScreenshots !== false;
-      this.legacyStorageEndpoint = opts.legacyStorageEndpoint || this.legacyStorageEndpoint;
-      this.healthIntervalMs = (opts.healthInterval || 60) * 1000;
-
-      if (document.getElementById("rm-toolbar-root")) {
-        if (currentPageUrl !== this._currentPageUrl) this._onTurboNavigate();
-        return;
-      }
-
-      if (previousPathname && previousPathname !== window.location.pathname) this._deactivateMode();
-      if (previousPageUrl && previousPageUrl !== currentPageUrl && previousPathname === window.location.pathname) this._deactivateMode();
-      this._currentPathname = window.location.pathname;
-      this._currentPageUrl = currentPageUrl;
-      this._injectStyles();
-      this._injectDOM();
-      this._bindEvents();
-      this._loadFromStorage();
-      this._checkHealth();
-      if (!this.healthInterval) this.healthInterval = setInterval(() => this._checkHealth(), this.healthIntervalMs);
-      if (!this._boundVisibilityChange) {
-        this._boundVisibilityChange = () => this._onVisibilityChange();
-        document.addEventListener("visibilitychange", this._boundVisibilityChange);
-      }
-      if (!this._boundOnline) {
-        this._boundOnline = () => this._onOnline();
-        window.addEventListener("online", this._boundOnline);
-      }
-      this._renderPins();
-      this._updateCount();
-      if (previousPageUrl && previousPageUrl !== this._currentPageUrl && this.serverOnline) this._initSession();
-    },
-
-    destroy() {
-      this._closeAllMenus();
-      this._deactivateMode();
-      if (this.sseSource) { this.sseSource.close(); this.sseSource = null; }
-      if (this.healthInterval) { clearInterval(this.healthInterval); this.healthInterval = null; }
-      if (this._outboxFlushTimer) { clearTimeout(this._outboxFlushTimer); this._outboxFlushTimer = null; }
-      if (this._syncRetryTimer) { clearTimeout(this._syncRetryTimer); this._syncRetryTimer = null; }
-      this._outboxFlushScheduled = false;
-      if (this._boundVisibilityChange) {
-        document.removeEventListener("visibilitychange", this._boundVisibilityChange);
-        this._boundVisibilityChange = null;
-      }
-      if (this._boundOnline) {
-        window.removeEventListener("online", this._boundOnline);
-        this._boundOnline = null;
-      }
-      if (this._boundKeyDown) {
-        document.removeEventListener("keydown", this._boundKeyDown, true);
-        this._boundKeyDown = null;
-      }
-      if (this._onResize) window.removeEventListener("resize", this._onResize);
-      if (this._onScroll) window.removeEventListener("scroll", this._onScroll);
-      if (this._boundTurboFrame) {
-        document.removeEventListener("turbo:frame-render", this._boundTurboFrame);
-        this._boundTurboFrame = null;
-      }
-      if (this._boundMenuDocClick) {
-        document.removeEventListener("click", this._boundMenuDocClick);
-        this._boundMenuDocClick = null;
-      }
-      if (this._boundMenuViewportChange) {
-        document.getElementById("rm-panel-list")
-          ?.removeEventListener("scroll", this._boundMenuViewportChange);
-        window.removeEventListener("resize", this._boundMenuViewportChange);
-        window.removeEventListener("scroll", this._boundMenuViewportChange);
-        this._boundMenuViewportChange = null;
-      }
-      this._onResize = null;
-      this._onScroll = null;
-      const root = document.getElementById("rm-toolbar-root");
-      if (root) root.remove();
-      const pins = document.getElementById("rm-pins-container");
-      if (pins) pins.remove();
-      const styles = document.getElementById("rm-toolbar-styles");
-      if (styles) styles.remove();
-    },
-
-    // ---- DOM injection ----
-
-    _injectStyles() {
-      if (document.getElementById("rm-toolbar-styles")) return;
-      const style = document.createElement("style");
-      style.id = "rm-toolbar-styles";
-      style.textContent = `
-        @keyframes rm-pulse { 0%,100%{box-shadow:0 2px 8px rgba(0,0,0,0.2)} 50%{box-shadow:0 2px 12px rgba(0,0,0,0.3),0 0 0 4px rgba(99,102,241,0.15)} }
-        @keyframes rm-toast-in { from{opacity:0;transform:translateY(16px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
-        @keyframes rm-toast-out { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(16px) scale(0.95)} }
-        #rm-toolbar-root { position:fixed; inset:0; pointer-events:none; z-index:9979; }
-        #rm-toolbar-root * { box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; }
-        .rm-fab, .rm-panel-toggle, .rm-panel, .rm-popup { pointer-events:auto; }
-        .rm-fab { position:fixed; z-index:9980; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
-        .rm-fab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
-        .rm-fab-badge { position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 4px; border-radius:10px; background:#ef4444; color:#fff; font-size:11px; font-weight:700; display:none; align-items:center; justify-content:center; }
-        .rm-panel-toggle { position:fixed; z-index:9980; width:32px; height:32px; border-radius:50%; border:1px solid #e5e7eb; background:rgba(255,255,255,0.9); cursor:pointer; display:none; align-items:center; justify-content:center; color:#6b7280; transition:all 0.2s; backdrop-filter:blur(8px); }
-        .rm-panel-toggle:hover { color:#4361ee; }
-        .rm-panel-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
-        .rm-toast-container { position:fixed; z-index:9983; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
-        .rm-pins-container { position:absolute; top:0; left:0; width:100%; z-index:9979; pointer-events:none; }
-        .rm-pin { pointer-events:auto; }
-        .rm-popup { display:none; position:fixed; z-index:9982; width:360px; max-width:calc(100vw - 24px); background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-radius:16px; box-shadow:0 25px 50px rgba(0,0,0,0.1); border:1px solid rgba(229,231,235,0.8); padding:16px; }
-        #rm-toolbar-root .rm-popup textarea { display:block; width:100%; max-width:100%; font-size:13px; font-weight:400; line-height:1.4; color:#1f2937; height:auto; margin:0; border:1px solid #e5e7eb; border-radius:12px; padding:12px; resize:none; outline:none; font-family:inherit; background:#fff; background-image:none; box-shadow:none; appearance:none; -webkit-appearance:none; transition:border-color 0.15s,box-shadow 0.15s; }
-        #rm-toolbar-root .rm-popup textarea:focus { border:1px solid #818cf8; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
-        #rm-toolbar-root .rm-menu { position:relative; display:inline-block; vertical-align:middle; }
-        #rm-toolbar-root .rm-menu-btn { display:inline-flex; align-items:center; gap:4px; width:auto; height:auto; margin:0; font-size:11px; font-weight:500; line-height:1.4; color:#374151; border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; background:#fff; background-image:none; box-shadow:none; outline:none; text-transform:none; appearance:none; -webkit-appearance:none; cursor:pointer; }
-        #rm-toolbar-root .rm-menu-btn:hover { border-color:#d1d5db; background:#fff; }
-        #rm-toolbar-root .rm-menu-btn:focus { outline:none; border-color:#818cf8; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
-        #rm-toolbar-root .rm-menu-btn[aria-expanded="true"] { border-color:#818cf8; }
-        #rm-toolbar-root .rm-menu-chevron { width:10px; height:10px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.55; }
-        #rm-toolbar-root .rm-menu-list { display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:9984; min-width:100%; padding:4px; margin:0; list-style:none; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,0.12); }
-        #rm-toolbar-root .rm-menu-list.rm-menu-open { display:block; }
-        #rm-toolbar-root .rm-menu-option { display:block; width:100%; margin:0; padding:6px 10px; font-size:11px; font-weight:500; line-height:1.4; color:#374151; text-align:left; border:none; border-radius:6px; background:transparent; background-image:none; box-shadow:none; cursor:pointer; appearance:none; -webkit-appearance:none; }
-        #rm-toolbar-root .rm-menu-option:hover, #rm-toolbar-root .rm-menu-option:focus { background:#f3f4f6; outline:none; }
-        #rm-toolbar-root .rm-menu-option-active { background:#eef2ff; color:#4338ca; }
-        #rm-toolbar-root .rm-menu-compact .rm-menu-btn { font-size:10px; padding:2px 6px; border-radius:4px; color:#6b7280; }
-        #rm-toolbar-root .rm-menu-compact .rm-menu-list, #rm-toolbar-root .rm-menu-list-compact { min-width:120px; right:0; left:auto; }
-        #rm-toolbar-root .rm-menu-compact .rm-menu-option, #rm-toolbar-root .rm-menu-list-compact .rm-menu-option { font-size:10px; padding:5px 8px; }
-        .rm-popup-el { font-size:11px; color:#9ca3af; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4; }
-        .rm-popup-text { font-size:12px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; line-height:1.4; }
-        .rm-popup-actions { display:flex; align-items:center; gap:8px; margin-top:8px; }
-        .rm-popup-actions .rm-count { font-size:10px; color:#d1d5db; margin-left:auto; font-variant-numeric:tabular-nums; }
-        #rm-toolbar-root .rm-btn-cancel { padding:6px 12px; font-size:12px; color:#9ca3af; background:none; background-image:none; border:none; box-shadow:none; cursor:pointer; border-radius:8px; appearance:none; -webkit-appearance:none; }
-        #rm-toolbar-root .rm-btn-cancel:hover { color:#6b7280; }
-        #rm-toolbar-root .rm-btn-submit { padding:6px 16px; font-size:12px; font-weight:500; color:#fff; border:none; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:none; appearance:none; -webkit-appearance:none; }
-        #rm-toolbar-root .rm-btn-submit kbd { font-size:9px; opacity:0.6; font-family:sans-serif; }
-        .rm-panel { display:none; position:fixed; z-index:9981; width:380px; max-width:calc(100vw - 48px); max-height:60vh; background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-radius:16px; box-shadow:0 25px 50px rgba(0,0,0,0.1); border:1px solid rgba(229,231,235,0.8); flex-direction:column; }
-        .rm-panel-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #f3f4f6; }
-        .rm-panel-header h3 { font-size:14px; font-weight:600; color:#1f2937; }
-        .rm-panel-count { min-width:20px; text-align:center; padding:2px 6px; font-size:10px; font-weight:600; border-radius:10px; }
-        .rm-panel-close { padding:6px; color:#d1d5db; background:none; border:none; cursor:pointer; border-radius:8px; }
-        .rm-panel-close:hover { color:#6b7280; }
-        .rm-panel-close svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
-        .rm-filter-chips { display:flex; gap:6px; padding:8px 16px; border-bottom:1px solid #f9fafb; }
-        .rm-chip { padding:4px 8px; font-size:10px; font-weight:500; border-radius:10px; cursor:pointer; transition:all 0.15s; border:none; }
-        .rm-chip-active { color:#fff; }
-        .rm-chip-inactive { background:#f9fafb; color:#9ca3af; }
-        .rm-chip-inactive:hover { color:#6b7280; }
-        .rm-panel-list { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
-        .rm-panel-footer { display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid #f3f4f6; font-size:11px; color:#9ca3af; }
-        .rm-status-dot { width:8px; height:8px; border-radius:50%; background:#d1d5db; }
-        .rm-card { padding:12px; background:#fff; border-radius:8px; border:1px solid #f3f4f6; border-left:3px solid; cursor:pointer; transition:all 0.15s; }
-        .rm-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.05); }
-        .rm-card-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
-        .rm-card-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
-        .rm-card-id { font-size:10px; font-weight:600; color:#9ca3af; }
-        .rm-card-badge { padding:2px 6px; font-size:10px; font-weight:500; border-radius:10px; }
-        .rm-card-body { margin-top:6px; font-size:13px; line-height:1.5; color:#1f2937; }
-        .rm-card-path { margin-top:4px; font-size:10px; color:#d1d5db; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-        .rm-card-thread { margin-top:8px; padding:8px; background:rgba(249,250,251,0.8); border-radius:8px; font-size:12px; color:#6b7280; border-left:2px solid; }
-        .rm-card-thread-role { font-size:10px; font-weight:500; color:#9ca3af; text-transform:uppercase; letter-spacing:0.05em; }
-        .rm-empty { text-align:center; padding:32px 16px; color:#9ca3af; }
-        .rm-empty-icon { font-size:32px; margin-bottom:8px; }
-        .rm-empty-text { font-size:13px; }
-        .rm-pin { position:absolute; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; color:#fff; font-size:10px; font-weight:700; cursor:pointer; transition:transform 0.2s; z-index:9979; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
-        .rm-pin:hover { transform:scale(1.25); }
-        .rm-pin-active { animation:rm-pulse 2s ease-in-out infinite; }
-        .rm-toast { padding:8px 12px; border-radius:8px; border:1px solid; font-size:12px; font-weight:500; box-shadow:0 2px 8px rgba(0,0,0,0.05); animation:rm-toast-in 0.3s ease; }
-      `;
-      document.head.appendChild(style);
-    },
-
-    _injectDOM() {
-      const root = document.createElement("div");
-      root.id = "rm-toolbar-root";
-
-      const accentBg = this._accentBg();
-      const accentBgHover = this._accentBgHover();
-      const accentLight = this._accentLight();
-      const accentText = this._accentText();
-
-      // Position: bl (bottom-left), br (bottom-right), tl (top-left), tr (top-right)
-      const posMap = { bl: "bottom:24px;left:24px;", br: "bottom:24px;right:24px;", tl: "top:24px;left:24px;", tr: "top:24px;right:24px;" };
-      const fabPos = posMap[this.position] || posMap.bl;
-
-      // Size: default (48px), compact (40px), slim (32px)
-      const sizeMap = { "default": { dim: 48, icon: 20 }, compact: { dim: 40, icon: 18 }, slim: { dim: 32, icon: 16 } };
-      const fabSize = sizeMap[this.size] || sizeMap["default"];
-
-      // Panel offset matches FAB position
-      const isRight = this.position === "br" || this.position === "tr";
-      const isTop = this.position === "tl" || this.position === "tr";
-      const panelToggleStyle = isRight ? `${isTop ? 'top' : 'bottom'}:24px;right:${fabSize.dim + 8 + 24}px;` : `${isTop ? 'top' : 'bottom'}:24px;left:${fabSize.dim + 8 + 24}px;`;
-      const panelStyle = isRight
-        ? `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;right:24px;`
-        : `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;left:24px;`;
-      const toastStyle = isRight
-        ? `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;right:24px;`
-        : `${isTop ? 'top' : 'bottom'}:${fabSize.dim + 32}px;left:24px;`;
-
-      root.innerHTML = `
-        <button class="rm-fab" id="rm-fab" style="${fabPos}width:${fabSize.dim}px;height:${fabSize.dim}px;background:${accentBg};color:#fff;${this.fabVisible ? "" : "display:none;"}" title="Toggle annotation mode" aria-label="Toggle annotation mode" aria-expanded="false" aria-controls="rm-panel">
-          <svg viewBox="0 0 24 24" style="width:${fabSize.icon}px;height:${fabSize.icon}px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
-          <span class="rm-fab-badge" id="rm-fab-badge"></span>
-        </button>
-        <button class="rm-panel-toggle" id="rm-panel-toggle" style="${panelToggleStyle}" title="View annotations" aria-label="View annotations" aria-controls="rm-panel">
-          <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h7"/></svg>
-        </button>
-        <div class="rm-toast-container" id="rm-toast-container" style="${toastStyle}"></div>
-        <div class="rm-popup" id="rm-popup" role="dialog" aria-label="Add annotation" aria-modal="false">
-          <div style="margin-bottom:12px">
-            <p class="rm-popup-el" id="rm-popup-el"></p>
-            <p class="rm-popup-text" id="rm-popup-text"></p>
-          </div>
-          <textarea id="rm-popup-input" rows="3" placeholder="What should change?"></textarea>
-          <div style="display:flex;align-items:center;gap:8px;margin-top:12px">
-            ${this._menuMarkup({ inputId: "rm-intent-select", label: "Intent", value: "change", options: this._intentOptions() })}
-            ${this._menuMarkup({ inputId: "rm-severity-select", label: "Severity", value: "suggestion", options: this._severityOptions() })}
-            <span class="rm-count" id="rm-char-count"></span>
-          </div>
-          <div class="rm-popup-actions">
-            <button class="rm-btn-cancel" id="rm-btn-cancel">Cancel</button>
-            <button class="rm-btn-submit" id="rm-btn-submit" style="background:${accentBg}">
-              <span id="rm-submit-label">Add</span>
-              <kbd>⌘↩</kbd>
-            </button>
-          </div>
-        </div>
-        <div class="rm-panel" id="rm-panel" style="${panelStyle}" role="dialog" aria-label="Annotations panel">
-          <div class="rm-panel-header">
-            <div style="display:flex;align-items:center;gap:8px">
-              <h3>Feedback</h3>
-              <span class="rm-panel-count" id="rm-panel-count" style="background:${accentLight};color:${accentText}">0</span>
-            </div>
-            <button class="rm-panel-close" id="rm-panel-close" aria-label="Close annotations panel">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 18L18 6M6 6l12 12"/></svg>
-            </button>
-          </div>
-          <div class="rm-filter-chips" id="rm-filter-chips">
-            <button class="rm-chip rm-chip-active" data-filter="all" style="background:${accentBg}">All</button>
-            <button class="rm-chip rm-chip-inactive" data-filter="pending">Pending</button>
-            <button class="rm-chip rm-chip-inactive" data-filter="resolved">Resolved</button>
-          </div>
-          <div class="rm-panel-list" id="rm-panel-list"></div>
-          <div class="rm-panel-footer">
-            <span class="rm-status-dot" id="rm-status-dot"></span>
-            <span id="rm-status-text">Offline</span>
-          </div>
-        </div>
-      `;
-
-      document.body.appendChild(root);
-      this.root = root;
-      // Pins container lives on body (not inside fixed root); scroll listener keeps them stuck to target elements
-      const pinsContainer = document.createElement("div");
-      pinsContainer.className = "rm-pins-container";
-      pinsContainer.id = "rm-pins-container";
-      document.body.appendChild(pinsContainer);
-      if (!this._onResize) {
-        this._onResize = this._debouncedRepositionPins(250);
-        this._onScroll = this._debouncedRepositionPins(50);
-        window.addEventListener("resize", this._onResize);
-        window.addEventListener("scroll", this._onScroll, { passive: true });
-      }
-    },
-
-    _bindEvents() {
-      const self = this;
-      document.getElementById("rm-fab").addEventListener("click", () => self.toggleMode());
-      document.getElementById("rm-panel-toggle").addEventListener("click", () => self.togglePanel());
-      document.getElementById("rm-panel-close").addEventListener("click", () => self.togglePanel());
-      document.getElementById("rm-btn-cancel").addEventListener("click", () => self._closePopup());
-      document.getElementById("rm-btn-submit").addEventListener("click", (e) => self.submitAnnotation(e));
-      document.getElementById("rm-popup-input").addEventListener("input", () => self._updateCharCount());
-      document.getElementById("rm-filter-chips").addEventListener("click", (e) => {
-        const chip = e.target.closest("[data-filter]");
-        if (chip) self._filterAnnotations(chip.dataset.filter);
-      });
-
-      // Custom menus (intent/severity/status) — button+menu, never native selects
-      // so host FormSelect/Select2 enhancers cannot rewrite our DOM (#4).
-      this.root.addEventListener("click", (e) => {
-        const option = e.target.closest(".rm-menu-option");
-        if (option) {
-          e.preventDefault();
-          e.stopPropagation();
-          this._selectMenuOption(option);
-          return;
-        }
-        const btn = e.target.closest(".rm-menu-btn");
-        if (btn) {
-          e.preventDefault();
-          e.stopPropagation();
-          const menu = this._menuForElement(btn);
-          if (!menu || !this.root.contains(menu)) return;
-          this._toggleMenu(menu);
-          return;
-        }
-        if (!this._menuForElement(e.target)) this._closeAllMenus();
-      });
-      if (!this._boundMenuDocClick) {
-        this._boundMenuDocClick = (e) => {
-          if (!this.root || this._menuForElement(e.target)) return;
-          this._closeAllMenus();
-        };
-        document.addEventListener("click", this._boundMenuDocClick);
-      }
-
-      // Event delegation for cards (status change, edit, delete, or click scrolls to element)
-      const panelList = document.getElementById("rm-panel-list");
-      if (!this._boundMenuViewportChange) {
-        this._boundMenuViewportChange = () => self._closeAllMenus();
-        window.addEventListener("resize", this._boundMenuViewportChange);
-        window.addEventListener("scroll", this._boundMenuViewportChange, { passive: true });
-      }
-      panelList.addEventListener("scroll", this._boundMenuViewportChange, { passive: true });
-      panelList.addEventListener("click", (e) => {
-        const retryBtn = e.target.closest("[data-retry-client-id]");
-        if (retryBtn) {
-          e.stopPropagation();
-          self._retrySync(retryBtn.dataset.retryClientId);
-          return;
-        }
-        // Status menu — leave bubbling for the root menu handler; don't scroll.
-        if (e.target.closest(".rm-menu")) return;
-        // Edit button
-        const editBtn = e.target.closest("[data-edit-id]");
-        if (editBtn) {
-          e.stopPropagation();
-          const id = parseInt(editBtn.dataset.editId, 10);
-          self._editAnnotation(id);
-          return;
-        }
-        // Delete button
-        const deleteBtn = e.target.closest("[data-delete-id]");
-        if (deleteBtn) {
-          e.stopPropagation();
-          const id = parseInt(deleteBtn.dataset.deleteId, 10);
-          self._deleteAnnotation(id);
-          return;
-        }
-        // Card click scrolls to element
-        const card = e.target.closest("[data-card-id]");
-        if (!card) return;
-        const id = parseInt(card.dataset.cardId, 10);
-        const annotation = self.annotations.find(a => a.id === id);
-        if (!annotation) return;
-        const el = self._findElement(annotation);
-        if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
-      });
-
-      // Event delegation for pins (click opens panel + scrolls to card)
-      document.getElementById("rm-pins-container").addEventListener("click", (e) => {
-        const pin = e.target.closest("[data-pin-id]");
-        if (!pin) return;
-        const panel = document.getElementById("rm-panel");
-        if (panel.style.display !== "flex") self.togglePanel();
-        const card = document.querySelector('[data-card-id="' + pin.dataset.pinId + '"]');
-        if (card) card.scrollIntoView({ behavior: "smooth", block: "center" });
-      });
-
-      this._boundMouseMove = (e) => self._handleMouseMove(e);
-      this._boundMouseDown = (e) => self._handleMouseDown(e);
-      this._boundMouseUp = (e) => self._handleMouseUp(e);
-      this._boundClick = (e) => self._handleClick(e);
-      if (!this._boundKeyDown) {
-        this._boundKeyDown = (e) => self._handleKeyDown(e);
-        document.addEventListener("keydown", this._boundKeyDown, true);
-      }
-      this._boundTouchStart = (e) => { if (self.active && e.touches[0]) { const t = e.touches[0]; const el = document.elementFromPoint(t.clientX, t.clientY); if (el && !self._isToolbar(el) && e.cancelable) e.preventDefault(); self._handleMouseDown({ clientX: t.clientX, clientY: t.clientY }); } };
-      this._boundTouchEnd = (e) => { if (self.active && e.changedTouches[0]) { const t = e.changedTouches[0]; const el = document.elementFromPoint(t.clientX, t.clientY); if (el && !self._isToolbar(el)) { e.preventDefault(); self._handleMouseUp({ clientX: t.clientX, clientY: t.clientY, preventDefault(){}, stopPropagation(){} }); } } };
-
-      // Turbo Frames — partial DOM update, reposition pins
-      if (!this._boundTurboFrame) {
-        this._boundTurboFrame = () => self._onTurboFrameRender();
-        document.addEventListener("turbo:frame-render", this._boundTurboFrame);
-      }
-    },
-
-    // ---- Turbo integration ----
-
-    _currentPathname: null,
-    _currentPageUrl: null,
-
-    _onTurboNavigate() {
-      const newPageUrl = this._pageUrl();
-      if (newPageUrl === this._currentPageUrl) return; // same page (anchor change, etc.)
-      this._currentPathname = window.location.pathname;
-      this._currentPageUrl = newPageUrl;
-
-      // Deactivate crosshair mode
-      this._deactivateMode();
-
-      // Close popup
-      const popup = document.getElementById("rm-popup");
-      if (popup && popup.style.display === "block") this._closePopup();
-
-      // Close panel
-      const panel = document.getElementById("rm-panel");
-      if (panel) panel.style.display = "none";
-
-      // Rerender pins for current page (annotations are global, pins are page-specific)
-      this._renderPins();
-      this._updateCount();
-      this._rebuildList();
-
-      // Re-init session for new URL
-      this._pullNeeded = true;
-      if (this.serverOnline) {
-        this._synchronizeCurrentPage(true).catch(error => console.warn("[rails-markup] page sync failed:", error));
-      }
-    },
-
-    _onTurboFrameRender() {
-      // Frame content changed — DOM elements may have moved, reposition pins
-      this._repositionPins();
-    },
-
-    // ---- Mode ----
-
-    toggleMode() {
-      this.active = !this.active;
-      if (this.active) {
-        this._activateMode();
-        // Always open panel when activating annotation mode
-        if (document.getElementById("rm-panel").style.display !== "flex") {
-          this.togglePanel();
-        }
-      } else {
-        this._deactivateMode();
-      }
-    },
-
-    _activateMode() {
-      document.body.style.cursor = "crosshair";
-      const fab = document.getElementById("rm-fab");
-      const iconSize = this._fabIconSize();
-      fab.style.transform = "scale(0.9)";
-      fab.style.boxShadow = `0 0 0 3px ${this._accentBg()}, 0 0 0 6px rgba(99,102,241,0.2)`;
-      fab.innerHTML = `<svg viewBox="0 0 24 24" style="width:${iconSize}px;height:${iconSize}px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"><path d="M6 18L18 6M6 6l12 12"/></svg><span class="rm-fab-badge" id="rm-fab-badge">${document.getElementById("rm-fab-badge")?.textContent || ""}</span>`;
-      document.addEventListener("mousemove", this._boundMouseMove, true);
-      document.addEventListener("mousedown", this._boundMouseDown, true);
-      document.addEventListener("mouseup", this._boundMouseUp, true);
-      document.addEventListener("click", this._boundClick, true);
-      document.addEventListener("touchstart", this._boundTouchStart, true);
-      document.addEventListener("touchend", this._boundTouchEnd, true);
-    },
-
-    _deactivateMode() {
-      this.active = false;
-      document.body.style.cursor = "";
-      const fab = document.getElementById("rm-fab");
-      if (fab) {
-        const iconSize = this._fabIconSize();
-        fab.style.transform = "";
-        fab.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
-        fab.innerHTML = `<svg viewBox="0 0 24 24" style="width:${iconSize}px;height:${iconSize}px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg><span class="rm-fab-badge" id="rm-fab-badge">${this.annotations.length || ""}</span>`;
-        this._updateCount();
-      }
-      document.removeEventListener("mousemove", this._boundMouseMove, true);
-      document.removeEventListener("mousedown", this._boundMouseDown, true);
-      document.removeEventListener("mouseup", this._boundMouseUp, true);
-      document.removeEventListener("click", this._boundClick, true);
-      document.removeEventListener("touchstart", this._boundTouchStart, true);
-      document.removeEventListener("touchend", this._boundTouchEnd, true);
-      this._removeHighlight();
-    },
-
-    // ---- Panel ----
-
-    togglePanel() {
-      const panel = document.getElementById("rm-panel");
-      const fab = document.getElementById("rm-fab");
-      if (panel.style.display === "flex") {
-        panel.style.display = "none";
-        if (fab) fab.setAttribute("aria-expanded", "false");
-      } else {
-        panel.style.display = "flex";
-        if (fab) fab.setAttribute("aria-expanded", "true");
-      }
-    },
-
-    // ---- Mouse handlers ----
-
-    _handleMouseMove(event) {
-      if (!this.active) return;
-      const el = document.elementFromPoint(event.clientX, event.clientY);
-      if (!el || this._isToolbar(el)) { this._removeHighlight(); return; }
-      if (el === this.hoveredElement) return;
-      this._removeHighlight();
-      this.hoveredElement = el;
-      el.dataset.rmOrigOutline = el.style.outline || "";
-      el.style.outline = `2px solid ${this._accentBg()}`;
-      el.style.outlineOffset = "2px";
-    },
-
-    _handleMouseDown(event) {
-      const el = document.elementFromPoint(event.clientX, event.clientY);
-      if (el && !this._isToolbar(el)) {
-        this.clickedElement = el;
-        // Suppress the press so host controls (buttons, drag handles, form
-        // fields) don't act before mouseup/click is blocked. Guard for the
-        // synthetic object passed from the touchstart handler.
-        if (typeof event.preventDefault === "function") event.preventDefault();
-        if (typeof event.stopPropagation === "function") event.stopPropagation();
-      }
-    },
-
-    async _handleMouseUp(event) {
-      if (!this.active) return;
-      const el = this.clickedElement || document.elementFromPoint(event.clientX, event.clientY);
-      if (!el || this._isToolbar(el)) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const sel = window.getSelection();
-      this.selectedText = (sel && sel.toString().trim().length > 0) ? sel.toString().trim() : null;
-      this._currentElement = this._identify(el);
-      this._currentScreenshot = null;
-      if (this.enableScreenshots) {
-        this._currentScreenshot = await this._captureElement(el);
-      }
-      this._showPopup(event.clientX, event.clientY);
-      this.clickedElement = null;
-    },
-
-    _handleClick(event) {
-      if (!this.active) return;
-      const el = event.target;
-      if (this._isToolbar(el)) return;
-      // Block link navigation and Turbo visits while annotating
-      event.preventDefault();
-      event.stopPropagation();
-    },
-
-    _handleKeyDown(event) {
-      const openList = this.root?.querySelector(".rm-menu-list.rm-menu-open");
-      const openMenu = this._menuForElement(openList);
-      if (openMenu) {
-        const options = Array.from(openList.querySelectorAll(".rm-menu-option"));
-        const focusedIndex = options.indexOf(document.activeElement);
-
-        if (event.key === "Escape") {
-          this._closeMenu(openMenu, true);
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-        if (event.key === "Tab") {
-          this._closeMenu(openMenu);
-          return;
-        }
-        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-          const direction = event.key === "ArrowDown" ? 1 : -1;
-          const start = focusedIndex === -1 ? 0 : focusedIndex;
-          const next = (start + direction + options.length) % options.length;
-          options[next]?.focus();
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-        if (event.key === "Home" || event.key === "End") {
-          const option = event.key === "Home" ? options[0] : options[options.length - 1];
-          option?.focus();
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-        if ((event.key === "Enter" || event.key === " ") && focusedIndex !== -1) {
-          this._selectMenuOption(options[focusedIndex]);
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-      }
-
-      const trigger = event.target.closest?.(".rm-menu-btn");
-      if (trigger && this.root?.contains(trigger) &&
-          ["Enter", " ", "ArrowDown", "ArrowUp"].includes(event.key)) {
-        const menu = this._menuForElement(trigger);
-        if (menu) this._openMenu(menu);
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-
-      if (event.key === "Escape") {
-        const popup = document.getElementById("rm-popup");
-        if (popup && popup.style.display === "block") {
-          this._closePopup();
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-        if (this.active) {
-          this._deactivateMode();
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-      }
-      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
-        const popup = document.getElementById("rm-popup");
-        if (popup && popup.style.display === "block") {
-          this.submitAnnotation();
-        }
-      }
-    },
-
-    // ---- Element identification ----
-
-    _identify(el) {
-      const tag = el.tagName.toLowerCase();
-      const id = el.id ? "#" + el.id : "";
-      const cls = Array.from(el.classList).filter(c => !c.startsWith("rm-")).slice(0, 5).map(c => "." + c).join("");
-      const text = (el.textContent || "").trim().slice(0, 80);
-      const rect = el.getBoundingClientRect();
-      return {
-        selector: tag + id + cls,
-        cssPath: this._cssPath(el),
-        nearbyText: text,
-        boundingBox: { top: Math.round(rect.top + window.scrollY), left: Math.round(rect.left + window.scrollX), width: Math.round(rect.width), height: Math.round(rect.height) }
-      };
-    },
-
-    _cssPath(el) {
-      const parts = [];
-      let cur = el;
-      while (cur && cur !== document.body && parts.length < 5) {
-        let sel = cur.tagName.toLowerCase();
-        if (cur.id) { sel += "#" + cur.id; parts.unshift(sel); break; }
-        const parent = cur.parentElement;
-        if (parent) {
-          const sibs = Array.from(parent.children).filter(c => c.tagName === cur.tagName);
-          if (sibs.length > 1) sel += ":nth-of-type(" + (sibs.indexOf(cur) + 1) + ")";
-        }
-        parts.unshift(sel);
-        cur = cur.parentElement;
-      }
-      return parts.join(" > ");
-    },
-
-    // ---- Popup ----
-
-    _intentOptions() {
-      return [
-        ["fix", "Fix"],
-        ["change", "Change"],
-        ["question", "Question"],
-        ["approve", "Approve"]
-      ];
-    },
-
-    _severityOptions() {
-      return [
-        ["suggestion", "Suggestion"],
-        ["important", "Important"],
-        ["blocking", "Blocking"]
-      ];
-    },
-
-    _statusOptions() {
-      return [
-        ["pending", "Pending"],
-        ["acknowledged", "Acknowledged"],
-        ["resolved", "Resolved"],
-        ["dismissed", "Dismissed"]
-      ];
-    },
-
-    _menuMarkup({ inputId, statusId, label, value, options, compact }) {
-      const current = options.find(([v]) => v === value) || options[0];
-      const currentValue = current[0];
-      const currentLabel = current[1];
-      const menuId = inputId ? `rm-menu-${inputId}` : `rm-menu-status-${statusId}`;
-      const listId = `${menuId}-list`;
-      const inputAttrs = inputId
-        ? `id="${inputId}"`
-        : `data-status-id="${statusId}"`;
-      const optionsHtml = options.map(([v, text]) => {
-        const active = v === currentValue;
-        return `<button type="button" class="rm-menu-option${active ? " rm-menu-option-active" : ""}" role="option" data-menu-owner="${menuId}" data-value="${v}" aria-selected="${active ? "true" : "false"}">${text}</button>`;
-      }).join("");
-      return `<div class="rm-menu${compact ? " rm-menu-compact" : ""}" id="${menuId}">` +
-        `<input type="hidden" ${inputAttrs} value="${currentValue}">` +
-        `<button type="button" class="rm-menu-btn" aria-haspopup="listbox" aria-controls="${listId}" aria-expanded="false" title="${this._esc(label)}" aria-label="${this._esc(label)}">` +
-          `<span class="rm-menu-label">${currentLabel}</span>` +
-          `<svg class="rm-menu-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>` +
-        `</button>` +
-        `<div class="rm-menu-list${compact ? " rm-menu-list-compact" : ""}" id="${listId}" role="listbox" data-menu-owner="${menuId}" aria-label="${this._esc(label)}">${optionsHtml}</div>` +
-      `</div>`;
-    },
-
-    _menuForElement(element) {
-      if (!element) return null;
-      const nestedMenu = element.closest?.(".rm-menu");
-      if (nestedMenu) return nestedMenu;
-      const ownerId = element.closest?.("[data-menu-owner]")?.dataset.menuOwner;
-      return ownerId ? document.getElementById(ownerId) : null;
-    },
-
-    _menuList(menu) {
-      if (!menu) return null;
-      return menu.querySelector(".rm-menu-list") ||
-        document.getElementById(`${menu.id}-list`);
-    },
-
-    _selectMenuOption(option) {
-      const menu = this._menuForElement(option);
-      if (!menu || !this.root?.contains(menu)) return;
-      const value = option.dataset.value;
-      const statusInput = menu.querySelector("[data-status-id]");
-      const statusId = statusInput?.dataset.statusId;
-      this._setMenuValue(menu, value);
-      if (!statusId) return;
-      const id = parseInt(statusId, 10);
-      if (Number.isNaN(id)) return;
-      this._changeStatus(id, value);
-      this.root.querySelector(`[data-status-id="${statusId}"]`)
-        ?.closest(".rm-menu")
-        ?.querySelector(".rm-menu-btn")
-        ?.focus();
-    },
-
-    _setMenuValue(inputOrMenu, value, restoreFocus = true) {
-      if (!inputOrMenu) return;
-      const menu = inputOrMenu.classList?.contains("rm-menu")
-        ? inputOrMenu
-        : inputOrMenu.closest?.(".rm-menu");
-      const input = menu
-        ? menu.querySelector('input[type="hidden"]')
-        : inputOrMenu;
-      if (!input) return;
-      const resolvedMenu = menu || input.closest(".rm-menu");
-      input.value = value;
-      if (!resolvedMenu) return;
-      const list = this._menuList(resolvedMenu);
-      const option = list?.querySelector(`.rm-menu-option[data-value="${value}"]`);
-      const label = resolvedMenu.querySelector(".rm-menu-label");
-      if (label && option) label.textContent = option.textContent;
-      list?.querySelectorAll(".rm-menu-option").forEach(opt => {
-        const active = opt.dataset.value === value;
-        opt.classList.toggle("rm-menu-option-active", active);
-        opt.setAttribute("aria-selected", active ? "true" : "false");
-      });
-      this._closeMenu(resolvedMenu, restoreFocus);
-    },
-
-    _toggleMenu(menu) {
-      const open = this._menuList(menu)?.classList.contains("rm-menu-open");
-      this._closeAllMenus();
-      if (!open) this._openMenu(menu);
-    },
-
-    _openMenu(menu) {
-      const list = this._menuList(menu);
-      const btn = menu.querySelector(".rm-menu-btn");
-      if (!list || !btn) return;
-      this._closeAllMenus();
-      const rect = btn.getBoundingClientRect();
-      const gap = 4;
-      const viewportPadding = 8;
-      const compactWidth = menu.classList.contains("rm-menu-compact") ? 120 : 0;
-      const minimumWidth = Math.max(rect.width || 0, compactWidth);
-
-      list._rmMenuPortalOrigin = {
-        parent: list.parentNode,
-        nextSibling: list.nextSibling
-      };
-      this.root.appendChild(list);
-      list.style.pointerEvents = "auto";
-      list.style.position = "fixed";
-      list.style.top = "0px";
-      list.style.bottom = "";
-      list.style.left = "0px";
-      list.style.right = "auto";
-      list.style.minWidth = `${minimumWidth}px`;
-      list.classList.add("rm-menu-open");
-      btn.setAttribute("aria-expanded", "true");
-
-      const menuWidth = Math.max(list.offsetWidth || 0, rect.width || 0, compactWidth);
-      const menuHeight = list.offsetHeight || 0;
-      const spaceBelow = window.innerHeight - rect.bottom - viewportPadding;
-      const spaceAbove = rect.top - viewportPadding;
-      const openUp = menuHeight > spaceBelow && spaceAbove > spaceBelow;
-      const preferredLeft = compactWidth ? rect.right - menuWidth : rect.left;
-      const maxLeft = Math.max(viewportPadding, window.innerWidth - menuWidth - viewportPadding);
-      const left = Math.min(Math.max(viewportPadding, preferredLeft), maxLeft);
-
-      list.style.position = "fixed";
-      list.style.top = openUp ? "" : `${rect.bottom + gap}px`;
-      list.style.bottom = openUp ? `${window.innerHeight - rect.top + gap}px` : "";
-      list.style.left = `${left}px`;
-      list.style.right = "auto";
-      list.style.minWidth = `${minimumWidth}px`;
-      const availableHeight = Math.max(0, (openUp ? spaceAbove : spaceBelow) - gap);
-      list.style.maxHeight = availableHeight ? `${availableHeight}px` : "";
-      list.style.overflowY = menuHeight > availableHeight && availableHeight > 0 ? "auto" : "";
-
-      const selected = list.querySelector('.rm-menu-option[aria-selected="true"]') ||
-        list.querySelector(".rm-menu-option");
-      selected?.focus();
-    },
-
-    _closeMenu(menu, restoreFocus = false) {
-      const list = this._menuList(menu);
-      const btn = menu.querySelector(".rm-menu-btn");
-      if (list) {
-        list.classList.remove("rm-menu-open");
-        ["position", "top", "bottom", "left", "right", "minWidth", "maxHeight", "overflowY", "pointerEvents"]
-          .forEach(property => { list.style[property] = ""; });
-        const origin = list._rmMenuPortalOrigin;
-        if (origin?.parent) {
-          if (origin.nextSibling?.parentNode === origin.parent) {
-            origin.parent.insertBefore(list, origin.nextSibling);
-          } else {
-            origin.parent.appendChild(list);
-          }
-        }
-        delete list._rmMenuPortalOrigin;
-      }
-      if (btn) btn.setAttribute("aria-expanded", "false");
-      if (restoreFocus) btn?.focus();
-    },
-
-    _closeAllMenus() {
-      if (!this.root) return;
-      this.root.querySelectorAll(".rm-menu").forEach(menu => this._closeMenu(menu));
-    },
-
-    _showPopup(x, y) {
-      const popup = document.getElementById("rm-popup");
-      // Clean up previous drawing elements
-      const oldContainer = popup.querySelector(".rm-drawing-container");
-      if (oldContainer) oldContainer.remove();
-      const oldTools = popup.querySelector("[data-draw]");
-      if (oldTools) { const p = oldTools.parentElement; if (p && !p.classList.contains("rm-popup-actions")) p.remove(); }
-      this.drawingCanvas = null;
-      this.drawingCtx = null;
-      this.drawingHistory = [];
-      this.drawingMode = null;
-      this._screenshotImg = null;
-
-      popup.style.display = "block";
-      popup.style.opacity = "0";
-      popup.style.left = "-9999px";
-      popup.style.top = "-9999px";
-      popup.style.width = this._currentScreenshot ? "480px" : "360px";
-      const pw = popup.offsetWidth || (this._currentScreenshot ? 480 : 360);
-      const ph = popup.offsetHeight || 300;
-      let left = Math.min(x + 10, window.innerWidth - pw - 20);
-      let top = Math.min(y + 10, window.innerHeight - ph - 20);
-      left = Math.max(10, left);
-      top = Math.max(10, top);
-      popup.style.left = left + "px";
-      popup.style.top = top + "px";
-      requestAnimationFrame(() => {
-        popup.style.transition = "opacity 0.2s ease";
-        popup.style.opacity = "1";
-      });
-      document.getElementById("rm-popup-el").textContent = this._currentElement.selector;
-      document.getElementById("rm-popup-text").textContent = this.selectedText
-        ? '"' + this.selectedText.slice(0, 60) + '"'
-        : this._currentElement.nearbyText.slice(0, 60);
-      const input = document.getElementById("rm-popup-input");
-      input.value = "";
-      this._setMenuValue(document.getElementById("rm-intent-select"), "change", false);
-      this._setMenuValue(document.getElementById("rm-severity-select"), "suggestion", false);
-      document.getElementById("rm-char-count").textContent = "";
-      document.getElementById("rm-submit-label").textContent = "Add";
-      this._closeAllMenus();
-
-      // Show screenshot preview with drawing tools
-      if (this._currentScreenshot) {
-        this._initDrawing(this._currentScreenshot);
-      }
-
-      setTimeout(() => input.focus(), 50);
-    },
-
-    _closePopup() {
-      this._closeAllMenus();
-      const popup = document.getElementById("rm-popup");
-      popup.style.transition = "opacity 0.15s ease";
-      popup.style.opacity = "0";
-      setTimeout(() => { popup.style.display = "none"; popup.style.transition = ""; popup.style.opacity = ""; popup.style.width = ""; }, 150);
-      document.getElementById("rm-popup-input").value = "";
-      this.selectedText = null;
-      this._currentElement = null;
-      this._currentScreenshot = null;
-      this.drawingCanvas = null;
-      this.drawingCtx = null;
-      this.drawingHistory = [];
-      this.drawingMode = null;
-      this._screenshotImg = null;
-      this.editingId = null;
-      document.getElementById("rm-submit-label").textContent = "Add";
-    },
-
-    _updateCharCount() {
-      const len = document.getElementById("rm-popup-input").value.length;
-      const el = document.getElementById("rm-char-count");
-      el.textContent = len > 0 ? len : "";
-      el.style.color = len > 500 ? "#f87171" : "#d1d5db";
-    },
-
-    // ---- Submit ----
-
-    submitAnnotation(event) {
-      if (event) event.preventDefault();
-      const comment = document.getElementById("rm-popup-input").value.trim();
-      if (!comment) return;
-      const intent = document.getElementById("rm-intent-select").value;
-      const severity = document.getElementById("rm-severity-select").value;
-
-      // If drawing canvas exists, merge drawings onto screenshot
-      const screenshot = this._mergeDrawing() || this._currentScreenshot;
-
-      // Edit existing annotation
-      if (this.editingId) {
-        const existing = this.annotations.find(a => a.id === this.editingId);
-        if (existing) {
-          const dirtyFields = [];
-          if (existing.comment !== comment) dirtyFields.push("content");
-          if (existing.intent !== intent) dirtyFields.push("intent");
-          if (existing.severity !== severity) dirtyFields.push("severity");
-          if (screenshot && existing.screenshot !== screenshot) dirtyFields.push("metadata");
-          const committed = dirtyFields.length === 0 || this._persistLocalMutation("upsert", dirtyFields, () => {
-            existing.comment = comment;
-            existing.intent = intent;
-            existing.severity = severity;
-            if (screenshot) existing.screenshot = screenshot;
-            return existing;
-          });
-          if (!committed) return;
-          this._rebuildList();
-          this._closePopup();
-          return;
-        }
-      }
-
-      // New annotation
-      const annotation = {
-        id: this.nextId,
-        clientId: this._newClientId(),
-        serverId: null,
-        serverRevision: 0,
-        syncState: "pending",
-        serverUpdatedAt: null,
-        dirtyFields: [],
-        revision: 0,
-        comment, intent, severity,
-        element: this._currentElement,
-        selectedText: this.selectedText || null,
-        screenshot: screenshot || null,
-        url: window.location.href,
-        pathname: this._pageUrl(),
-        pageUrl: this._pageUrl(),
-        timestamp: new Date().toISOString(),
-        status: "pending",
-        thread: []
-      };
-
-      const committed = this._persistLocalMutation("upsert", this._browserCreateFields(), () => {
-        this.nextId += 1;
-        this.annotations.push(annotation);
-        return annotation;
-      });
-      if (!committed) return;
-      this._renderPin(annotation);
-      // Rebuild (not append) so a new card honors the active panel filter —
-      // e.g. a pending annotation must not show while "Resolved" is selected.
-      this._rebuildList();
-      this._updateCount();
-      this._closePopup();
-    },
-
-    // ---- Filters ----
-
-    _filterAnnotations(filter) {
-      this.activeFilter = filter;
-      this._updateFilterChips();
-      this._rebuildList();
-    },
-
-    _updateFilterChips() {
-      const chips = document.querySelectorAll("#rm-filter-chips [data-filter]");
-      chips.forEach(chip => {
-        if (chip.dataset.filter === this.activeFilter) {
-          chip.className = "rm-chip rm-chip-active";
-          chip.style.background = this._accentBg();
-          chip.style.color = "#fff";
-        } else {
-          chip.className = "rm-chip rm-chip-inactive";
-          chip.style.background = "#f9fafb";
-          chip.style.color = "#9ca3af";
-        }
-      });
-    },
-
-    _filteredAnnotations() {
-      if (this.activeFilter === "all") return this.annotations;
-      if (this.activeFilter === "pending") return this.annotations.filter(a => a.status === "pending" || a.status === "acknowledged");
-      if (this.activeFilter === "resolved") return this.annotations.filter(a => a.status === "resolved" || a.status === "dismissed");
-      return this.annotations;
-    },
-
-    // ---- Panel cards ----
-
-    _renderCard(annotation) {
-      const list = document.getElementById("rm-panel-list");
-      const card = document.createElement("div");
-      card.className = "rm-card";
-      card.dataset.cardId = annotation.id;
-
-      const borderColor = annotation.status === "resolved" ? "#10b981" : annotation.status === "dismissed" ? "#d1d5db" : this._accentBg();
-      card.style.borderLeftColor = borderColor;
-
-      const dotColor = { pending: "#3b82f6", acknowledged: "#f59e0b", resolved: "#10b981", dismissed: "#d1d5db" }[annotation.status] || "#3b82f6";
-      const intentColors = { fix: { bg: "#fef2f2", text: "#dc2626" }, change: { bg: "#eff6ff", text: "#2563eb" }, question: { bg: "#f5f3ff", text: "#7c3aed" }, approve: { bg: "#ecfdf5", text: "#059669" } };
-      const ic = intentColors[annotation.intent] || intentColors.change;
-
-      let threadHtml = "";
-      const thread = annotation.thread || [];
-      if (thread.length > 0) {
-        const last = thread[thread.length - 1];
-        threadHtml = `<div class="rm-card-thread" style="border-left-color:${this._accentBg()}"><span class="rm-card-thread-role">${this._esc(last.role || "agent")}</span><div style="margin-top:2px">${this._esc(last.message)}</div></div>`;
-      }
-
-      card.innerHTML = `
-        <div class="rm-card-top">
-          <span class="rm-card-dot" style="background:${dotColor}"></span>
-          <span class="rm-card-id">#${annotation.id}</span>
-          <span class="rm-card-badge" style="background:${ic.bg};color:${ic.text}">${annotation.intent}</span>
-          ${annotation.severity !== "suggestion" ? '<span class="rm-card-badge" style="background:#fff7ed;color:#9a3412">' + annotation.severity + '</span>' : ''}
-          <span style="margin-left:auto;display:flex;gap:2px;align-items:center;">
-            ${this._menuMarkup({
-              statusId: annotation.id,
-              label: "Change status",
-              value: annotation.status,
-              options: this._statusOptions(),
-              compact: true
-            })}
-            <button data-edit-id="${annotation.id}" title="Edit" style="padding:2px 4px;background:none;border:none;cursor:pointer;color:#d1d5db;border-radius:4px;display:flex;align-items:center;" onmouseover="this.style.color='#6b7280'" onmouseout="this.style.color='#d1d5db'">
-              <svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
-            </button>
-            <button data-delete-id="${annotation.id}" title="Delete" style="padding:2px 4px;background:none;border:none;cursor:pointer;color:#d1d5db;border-radius:4px;display:flex;align-items:center;" onmouseover="this.style.color='#ef4444'" onmouseout="this.style.color='#d1d5db'">
-              <svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-            </button>
-          </span>
-        </div>
-        <div class="rm-card-body">${this._esc(annotation.comment)}</div>
-        <div class="rm-card-path">${this._esc(annotation.pathname || "")} &rsaquo; ${this._esc(annotation.element?.selector || "")}</div>
-        ${annotation.selectedText ? '<div class="rm-card-path" style="font-style:italic">"' + this._esc(annotation.selectedText.slice(0, 60)) + '"</div>' : ''}
-        ${threadHtml}
-      `;
-
-      list.appendChild(card);
-    },
-
-    _rebuildList() {
-      const list = document.getElementById("rm-panel-list");
-      if (!list) return;
-      this._closeAllMenus();
-      list.innerHTML = "";
-      this._renderStorageError(list);
-      this._renderFailedSync(list);
-      const filtered = this._filteredAnnotations();
-      if (filtered.length === 0) {
-        const empty = document.createElement("div");
-        empty.className = "rm-empty";
-        empty.innerHTML = '<div class="rm-empty-icon">&#9670;</div><div class="rm-empty-text">No annotations yet</div>';
-        list.appendChild(empty);
-        return;
-      }
-      filtered.forEach(a => this._renderCard(a));
-    },
-
-    _renderStorageError(list) {
-      if (!this._storageError) return;
-      const error = document.createElement("div");
-      error.className = "rm-storage-error";
-      error.setAttribute("role", "alert");
-      error.style.cssText = "padding:8px;margin-bottom:8px;border:1px solid #fecaca;border-radius:8px;background:#fef2f2;color:#991b1b;font-size:11px;";
-      error.textContent = this._storageError;
-      list.appendChild(error);
-    },
-
-    _renderFailedSync(list) {
-      const failed = Object.values(this.outbox || {}).filter(entry => entry?.syncState === "failed");
-      if (failed.length === 0) return;
-      const section = document.createElement("div");
-      section.className = "rm-failed-sync";
-      section.setAttribute("role", "status");
-      failed.forEach(entry => {
-        const item = document.createElement("div");
-        item.style.cssText = "display:flex;align-items:center;gap:8px;padding:8px;margin-bottom:8px;border:1px solid #fecaca;border-radius:8px;background:#fef2f2;color:#991b1b;font-size:11px;";
-        const label = entry.type === "delete" ? "Delete failed" : "Sync failed";
-        item.innerHTML = `<span style="flex:1">${label}</span><button type="button" data-retry-client-id="${this._esc(entry.clientId)}" style="border:1px solid #fca5a5;border-radius:6px;background:#fff;padding:3px 7px;color:#991b1b;cursor:pointer">Retry</button>`;
-        section.appendChild(item);
-      });
-      list.appendChild(section);
-    },
-
-    _editAnnotation(id) {
-      const annotation = this.annotations.find(a => a.id === id);
-      if (!annotation) return;
-      this.editingId = id;
-      this._currentElement = annotation.element;
-      this.selectedText = annotation.selectedText;
-      this._currentScreenshot = annotation.screenshot || null;
-
-      // Pre-fill popup fields
-      document.getElementById("rm-popup-el").textContent = annotation.element?.selector || "";
-      document.getElementById("rm-popup-text").textContent = annotation.selectedText
-        ? '"' + annotation.selectedText.slice(0, 60) + '"'
-        : (annotation.element?.nearbyText || "").slice(0, 60);
-      document.getElementById("rm-popup-input").value = annotation.comment;
-      this._setMenuValue(document.getElementById("rm-intent-select"), annotation.intent, false);
-      this._setMenuValue(document.getElementById("rm-severity-select"), annotation.severity, false);
-      document.getElementById("rm-submit-label").textContent = "Save";
-      this._updateCharCount();
-      this._closeAllMenus();
-
-      // Clean up previous drawing elements
-      const popup = document.getElementById("rm-popup");
-      const oldContainer = popup.querySelector(".rm-drawing-container");
-      if (oldContainer) oldContainer.remove();
-      const oldTools = popup.querySelector("[data-draw]");
-      if (oldTools) { const p = oldTools.parentElement; if (p && !p.classList.contains("rm-popup-actions")) p.remove(); }
-      this.drawingCanvas = null;
-      this.drawingCtx = null;
-      this.drawingHistory = [];
-      this.drawingMode = null;
-      this._screenshotImg = null;
-
-      // Position popup centered on screen
-      popup.style.display = "block";
-      popup.style.width = this._currentScreenshot ? "480px" : "360px";
-      const pw = popup.offsetWidth || 360;
-      const ph = popup.offsetHeight || 300;
-      popup.style.left = Math.max(10, Math.round((window.innerWidth - pw) / 2)) + "px";
-      popup.style.top = Math.max(10, Math.round((window.innerHeight - ph) / 2)) + "px";
-      popup.style.opacity = "1";
-
-      if (this._currentScreenshot) {
-        this._initDrawing(this._currentScreenshot);
-      }
-
-      setTimeout(() => document.getElementById("rm-popup-input").focus(), 50);
-    },
-
-    _changeStatus(id, newStatus) {
-      const annotation = this.annotations.find(a => a.id === id);
-      if (!annotation) return;
-      const committed = this._persistLocalMutation("upsert", ["status"], () => {
-        annotation.status = newStatus;
-        return annotation;
-      });
-      if (!committed) return;
-      this._renderPins();
-      this._rebuildList();
-      const label = newStatus.charAt(0).toUpperCase() + newStatus.slice(1);
-      this._showToast(`#${id} marked as ${label}`, newStatus === "resolved" ? "resolved" : "dismissed");
-    },
-
-    _deleteAnnotation(id) {
-      const idx = this.annotations.findIndex(a => a.id === id);
-      if (idx === -1) return;
-      const committed = this._persistLocalMutation("delete", [], () => this.annotations.splice(idx, 1)[0]);
-      if (!committed) return;
-      this._renderPins();
-      this._rebuildList();
-      this._updateCount();
-    },
-
-    _updateCount() {
-      const count = this.annotations.length;
-      const countEl = document.getElementById("rm-panel-count");
-      if (countEl) countEl.textContent = count;
-      const badge = document.getElementById("rm-fab-badge");
-      if (badge) {
-        if (count > 0) { badge.textContent = count; badge.style.display = "flex"; }
-        else { badge.style.display = "none"; }
-      }
-      const toggle = document.getElementById("rm-panel-toggle");
-      if (toggle) toggle.style.display = "flex";
-    },
-
-    // ---- Pins ----
-
-    _renderPin(annotation) {
-      if (!annotation.element?.boundingBox) return;
-      const { top, left, width } = annotation.element.boundingBox;
-      const container = document.getElementById("rm-pins-container");
-      if (!container) return;
-      const isResolved = annotation.status === "resolved" || annotation.status === "dismissed";
-      const pin = document.createElement("div");
-      pin.className = "rm-pin" + (isResolved ? "" : " rm-pin-active");
-      pin.dataset.pinId = annotation.id;
-      pin.style.top = (top - 10) + "px";
-      pin.style.left = (left + width - 10) + "px";
-      pin.style.background = isResolved ? "#d1d5db" : this._accentBg();
-      if (isResolved) pin.style.opacity = "0.6";
-      pin.textContent = annotation.id;
-      pin.title = "#" + annotation.id + ": " + annotation.comment.slice(0, 50);
-      container.appendChild(pin);
-    },
-
-    _renderPins() {
-      const container = document.getElementById("rm-pins-container");
-      if (container) container.innerHTML = "";
-      // Only render pins for annotations on the current page
-      const currentPath = this._pageUrl();
-      this.annotations
-        .filter(a => (a.pageUrl || a.pathname) === currentPath)
-        .forEach(a => this._renderPin(a));
-    },
-
-    _findElement(annotation) {
-      if (!annotation.element) return null;
-      const { cssPath, selector } = annotation.element;
-      if (cssPath) { try { const el = document.querySelector(cssPath); if (el) return el; } catch {} }
-      if (selector) { try { const el = document.querySelector(selector); if (el) return el; } catch {} }
-      return null;
-    },
-
-    _repositionPins() {
-      this.annotations.forEach(annotation => {
-        const el = this._findElement(annotation);
-        if (!el) return;
-        const rect = el.getBoundingClientRect();
-        annotation.element.boundingBox = { top: Math.round(rect.top + window.scrollY), left: Math.round(rect.left + window.scrollX), width: Math.round(rect.width), height: Math.round(rect.height) };
-        const pin = document.querySelector('[data-pin-id="' + annotation.id + '"]');
-        if (pin) { pin.style.top = (annotation.element.boundingBox.top - 10) + "px"; pin.style.left = (annotation.element.boundingBox.left + annotation.element.boundingBox.width - 10) + "px"; }
-      });
-    },
-
-    _debouncedRepositionPins(delay = 250) {
-      let timer = null;
-      return () => { if (timer) clearTimeout(timer); timer = setTimeout(() => this._repositionPins(), delay); };
-    },
-
-    // ---- Highlight ----
-
-    _removeHighlight() {
-      if (this.hoveredElement) {
-        this.hoveredElement.style.outline = this.hoveredElement.dataset.rmOrigOutline || "";
-        this.hoveredElement.style.outlineOffset = "";
-        delete this.hoveredElement.dataset.rmOrigOutline;
-        this.hoveredElement = null;
-      }
-    },
-
-    _isToolbar(el) {
-      const root = document.getElementById("rm-toolbar-root");
-      return root && root.contains(el);
-    },
-
-    // ---- Toast ----
-
-    _showToast(message, type) {
-      const container = document.getElementById("rm-toast-container");
-      if (!container) return;
-      const toast = document.createElement("div");
-      toast.className = "rm-toast";
-      const colors = { resolved: { bg: "#ecfdf5", border: "#a7f3d0", text: "#065f46" }, dismissed: { bg: "#f3f4f6", border: "#e5e7eb", text: "#6b7280" } };
-      const c = colors[type] || { bg: this._accentLight(), border: this._accentBg(), text: this._accentText() };
-      toast.style.background = c.bg;
-      toast.style.borderColor = c.border;
-      toast.style.color = c.text;
-      toast.textContent = message;
-      container.appendChild(toast);
-      setTimeout(() => { toast.style.animation = "rm-toast-out 0.3s ease forwards"; setTimeout(() => toast.remove(), 300); }, 4000);
-    },
-
-    // ---- Storage ----
-
-    _storageKey() {
-      const endpoint = (this.endpoint || "/feedback/api").replace(/\/+$/, "") || "/";
-      return `rm-annotations:${encodeURIComponent(endpoint)}`;
-    },
-    _pageUrl() { return window.location.pathname + window.location.search; },
-    _pageStorageKey() { return this._storageKey() + ":" + this._pageUrl(); },
-
-    _saveToStorage() {
-      try {
-        // Cross-tab storage-event merging is deferred: safely reconciling ordered
-        // upserts and tombstones needs conflict semantics, not a last-write merge.
-        localStorage.setItem(this._storageKey(), JSON.stringify({
-          annotations: this.annotations,
-          nextId: this.nextId,
-          outbox: this.outbox,
-          legacyMigrations: this.legacyMigrations
-        }));
-        return true;
-      }
-      catch (e) {
-        console.warn("[rails-markup] save failed:", e);
-        return false;
-      }
-    },
-
-    _persistLocalMutation(type, dirtyFields, mutate) {
-      return this._commitLocalStateChange(() => {
-        const annotation = mutate();
-        this._queueLocalMutation(type, annotation, dirtyFields);
-      });
-    },
-
-    _queueLocalMutation(type, annotation, dirtyFields) {
-      const currentEntry = this.outbox[annotation.clientId];
-      const revision = Math.max(annotation.revision || 0, currentEntry?.revision || 0) + 1;
-      const baseRevision = Number.isInteger(currentEntry?.baseRevision)
-        ? currentEntry.baseRevision
-        : (Number.isInteger(annotation.serverRevision) ? annotation.serverRevision : 0);
-
-      if (type === "delete") {
-        this.outbox[annotation.clientId] = {
-          type: "delete",
-          clientId: annotation.clientId,
-          revision,
-          baseRevision,
-          syncState: "pending"
-        };
-      } else {
-        const existingDirtyFields = currentEntry?.type === "upsert" ? currentEntry.dirtyFields : [];
-        annotation.dirtyFields = this._mergeDirtyFields(annotation.dirtyFields, existingDirtyFields, dirtyFields);
-        annotation.syncState = "pending";
-        annotation.revision = revision;
-        this.outbox[annotation.clientId] = {
-          type: "upsert",
-          clientId: annotation.clientId,
-          revision,
-          baseRevision,
-          syncState: "pending",
-          annotation: this._desiredState(annotation),
-          dirtyFields: annotation.dirtyFields.slice()
-        };
-      }
-    },
-
-    _commitLocalStateChange(mutate) {
-      const snapshot = this._localStateSnapshot();
-      mutate();
-      if (this._saveToStorage()) {
-        this._storageError = null;
-        this._scheduleOutboxFlush();
-        return true;
-      }
-
-      this.annotations = snapshot.annotations;
-      this.outbox = snapshot.outbox;
-      this.nextId = snapshot.nextId;
-      this.legacyMigrations = snapshot.legacyMigrations;
-      this._storageError = "Changes could not be saved in this browser. Free storage space and try again.";
-      this._renderPins();
-      this._rebuildList();
-      this._updateCount();
-      const panel = document.getElementById("rm-panel");
-      if (panel) panel.style.display = "flex";
-      const fab = document.getElementById("rm-fab");
-      if (fab) fab.setAttribute("aria-expanded", "true");
-      return false;
-    },
-
-    _localStateSnapshot() {
-      return JSON.parse(JSON.stringify({
-        annotations: this.annotations,
-        outbox: this.outbox,
-        nextId: this.nextId,
-        legacyMigrations: this.legacyMigrations
-      }));
-    },
-
-    _mergeDirtyFields(...collections) {
-      const merged = [];
-      collections.flat().forEach(field => {
-        const canonical = field === "selectedText" ? "selected_text" : field;
-        if (canonical && !merged.includes(canonical)) merged.push(canonical);
-      });
-      return merged;
-    },
-
-    _scheduleOutboxFlush() {
-      if (this._outboxFlushScheduled) return;
-      this._outboxFlushScheduled = true;
-      this._outboxFlushTimer = setTimeout(() => {
-        this._outboxFlushScheduled = false;
-        this._outboxFlushTimer = null;
-        Promise.resolve(this._flushOutbox()).catch(error => console.warn("[rails-markup] outbox flush failed:", error));
-      }, 0);
-    },
-
-    _flushOutbox() {
-      if (this._flushPromise) return this._flushPromise;
-      if (this._pullPromise) {
-        if (!this._flushAfterPullPromise) {
-          this._flushAfterPullPromise = this._pullPromise.then(() => {
-            this._flushAfterPullPromise = null;
-            return this._flushOutbox();
-          });
-        }
-        return this._flushAfterPullPromise;
-      }
-      if (!navigator.onLine || !this.serverOnline) return Promise.resolve();
-      if (this._syncRetryTimer) return Promise.resolve();
-
-      this._flushPromise = this._runOutboxFlush().finally(() => {
-        this._flushPromise = null;
-      });
-      return this._flushPromise;
-    },
-
-    async _runOutboxFlush() {
-      const clientIds = Object.keys(this.outbox);
-      for (const clientId of clientIds) {
-        const current = this.outbox[clientId];
-        if (!current || current.syncState === "failed") continue;
-
-        const snapshot = this._immutableCopy(current);
-        let result;
-        try {
-          result = await this._sendOutboxEntry(snapshot);
-        } catch (error) {
-          result = { kind: "retryable", error };
-        }
-
-        if (result.kind === "success") {
-          if (!this._outboxEntryMatches(snapshot)) {
-            const supersedingDelete = this._advanceSupersedingDeleteBaseRevision(snapshot, result.data);
-            if (supersedingDelete === "failed") break;
-            clientIds.push(clientId);
-            continue;
-          }
-          this._handleSyncSuccess(snapshot, result.data);
-          this._resetSyncRetry();
-          continue;
-        }
-        if (result.kind === "auth") {
-          this._setSyncUnavailable(result.message || "Authentication required");
-          break;
-        }
-        if (result.kind === "terminal") {
-          if (!this._outboxEntryMatches(snapshot)) {
-            clientIds.push(clientId);
-            continue;
-          }
-          this._markSyncFailed(snapshot);
-          continue;
-        }
-        if (result.kind === "conflict") {
-          const resolution = this._reconcileSyncConflict(snapshot, result);
-          await this._pullAnnotations();
-          if (resolution === "retry" && this.outbox[clientId]) {
-            clientIds.push(clientId);
-            continue;
-          }
-          this._resetSyncRetry();
-          continue;
-        }
-        if (result.kind === "malformed") {
-          if (!this._outboxEntryMatches(snapshot)) {
-            clientIds.push(clientId);
-            continue;
-          }
-          if (this._recordMalformedResponse(snapshot)) continue;
-          break;
-        }
-
-        this.serverOnline = false;
-        this._updateStatus();
-        this._scheduleSyncRetry(result.retryAfter);
-        break;
-      }
-    },
-
-    _advanceSupersedingDeleteBaseRevision(snapshot, server) {
-      const current = this.outbox[snapshot.clientId];
-      const supersedesUpsert = snapshot.type === "upsert"
-        && current?.type === "delete"
-        && current.clientId === snapshot.clientId
-        && Number.isInteger(current.revision)
-        && current.revision > snapshot.revision
-        && Number.isInteger(server?.revision);
-      if (!supersedesUpsert) return "not-applicable";
-
-      const tombstone = this._immutableCopy(current);
-      const committed = this._commitLocalStateChange(() => {
-        if (!this._outboxEntryMatches(tombstone)) return;
-        const baseRevision = Number.isInteger(tombstone.baseRevision) ? tombstone.baseRevision : 0;
-        this.outbox[snapshot.clientId].baseRevision = Math.max(baseRevision, server.revision);
-      });
-      return committed ? "advanced" : "failed";
-    },
-
-    async _sendOutboxEntry(snapshot) {
-      const request = this._sameOriginMutationRequest(`/annotations/${encodeURIComponent(snapshot.clientId)}`);
-      if (!request) return { kind: "auth", message: "Sync unavailable: endpoint must be same-origin" };
-
-      const options = {
-        method: snapshot.type === "delete" ? "DELETE" : "PUT",
-        headers: request.headers,
-        credentials: "same-origin",
-        redirect: "manual",
-        signal: AbortSignal.timeout(5000)
-      };
-      if (snapshot.type === "delete") {
-        options.body = JSON.stringify({
-          baseRevision: Number.isInteger(snapshot.baseRevision) ? snapshot.baseRevision : 0
-        });
-      } else {
-        options.body = JSON.stringify(Object.assign({}, snapshot.annotation, {
-          dirtyFields: snapshot.dirtyFields || [],
-          baseRevision: Number.isInteger(snapshot.baseRevision) ? snapshot.baseRevision : 0
-        }));
-      }
-
-      const response = await fetch(request.url, options);
-      return this._classifySyncResponse(snapshot, response);
-    },
-
-    _sameOriginMutationRequest(path) {
-      const url = this._sameOriginEndpointUrl(path);
-      if (!url) return null;
-      const headers = { "Content-Type": "application/json", "Accept": "application/json" };
-      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
-      if (csrfToken) headers["X-CSRF-Token"] = csrfToken;
-      return { url, headers };
-    },
-
-    _sameOriginEndpointUrl(path) {
-      try {
-        const rawUrl = `${this.endpoint.replace(/\/$/, "")}/${String(path).replace(/^\//, "")}`;
-        const resolved = new URL(rawUrl, window.location.href);
-        if (resolved.origin !== window.location.origin) return null;
-        return this.endpoint.startsWith("/") && !this.endpoint.startsWith("//")
-          ? resolved.pathname + resolved.search
-          : resolved.href;
-      } catch {
-        return null;
-      }
-    },
-
-    async _classifySyncResponse(snapshot, response) {
-      const status = response.status;
-      if (status >= 300 && status < 400) return { kind: "auth", message: "Authentication required" };
-      if (status === 401 || status === 403 || response.type === "opaqueredirect") {
-        return { kind: "auth", message: "Authentication required" };
-      }
-      if ([408, 425, 429].includes(status) || status >= 500) {
-        return { kind: "retryable", retryAfter: this._retryAfterDelay(response) };
-      }
-      if (status === 409) return this._classifyConflictResponse(snapshot, response);
-      if (status >= 400) return { kind: "terminal" };
-      if (!response.ok) return { kind: "retryable" };
-      if (snapshot.type === "delete") return { kind: "success", data: null };
-
-      const contentType = response.headers.get("Content-Type") || "";
-      if (!contentType.toLowerCase().includes("application/json")) {
-        return { kind: "auth", message: "Sync unavailable: expected JSON" };
-      }
-
-      try {
-        const data = await response.json();
-        if (!this._validServerAnnotation(data, snapshot.clientId)) return { kind: "malformed" };
-        return { kind: "success", data };
-      } catch {
-        return { kind: "malformed" };
-      }
-    },
-
-    async _classifyConflictResponse(snapshot, response) {
-      const contentType = response.headers.get("Content-Type") || "";
-      if (!contentType.toLowerCase().includes("application/json")) return { kind: "malformed" };
-
-      try {
-        const body = await response.json();
-        if (!this._plainObject(body) || !Object.prototype.hasOwnProperty.call(body, "annotation")) {
-          return { kind: "malformed" };
-        }
-        if (body.annotation === null && snapshot.type === "upsert") {
-          return { kind: "conflict", missing: true, data: null };
-        }
-        if (!this._validServerAnnotation(body.annotation, snapshot.clientId)) return { kind: "malformed" };
-        return { kind: "conflict", missing: false, data: body.annotation };
-      } catch {
-        return { kind: "malformed" };
-      }
-    },
-
-    _validServerAnnotation(data, expectedClientId) {
-      if (!this._plainObject(data)) return false;
-      const required = [
-        "id", "clientId", "userId", "authorName", "content", "intent", "severity",
-        "status", "selectedText", "pageUrl", "target", "metadata", "thread",
-        "createdAt", "updatedAt", "revision"
-      ];
-      if (!required.every(key => Object.prototype.hasOwnProperty.call(data, key))) return false;
-      if (typeof data.id !== "string" || data.id.length === 0) return false;
-      if (data.clientId !== expectedClientId) return false;
-      if (!(data.userId === null || Number.isInteger(data.userId))) return false;
-      if (!(data.authorName === null || typeof data.authorName === "string")) return false;
-      if (typeof data.content !== "string") return false;
-      if (!["fix", "change", "question", "approve"].includes(data.intent)) return false;
-      if (!["suggestion", "important", "blocking"].includes(data.severity)) return false;
-      if (!["pending", "acknowledged", "resolved", "dismissed"].includes(data.status)) return false;
-      if (!(data.selectedText === null || typeof data.selectedText === "string")) return false;
-      if (typeof data.pageUrl !== "string" || data.pageUrl.length === 0) return false;
-      if (!this._plainObject(data.target) || !this._plainObject(data.metadata)) return false;
-      if (!Array.isArray(data.thread)) return false;
-      if (!this._validServerTimestamp(data.createdAt) || !this._validServerTimestamp(data.updatedAt)) return false;
-      if (!Number.isInteger(data.revision) || data.revision < 0) return false;
-      return true;
-    },
-
-    _plainObject(value) {
-      return Boolean(value) && typeof value === "object" && !Array.isArray(value);
-    },
-
-    _validServerTimestamp(value) {
-      return typeof value === "string" && value.length > 0 && Number.isFinite(Date.parse(value));
-    },
-
-    _handleSyncSuccess(snapshot, data) {
-      if (!this._outboxEntryMatches(snapshot)) return;
-      this._commitLocalStateChange(() => {
-        if (!this._outboxEntryMatches(snapshot)) return;
-        if (snapshot.type === "upsert") {
-          const annotation = this.annotations.find(candidate => candidate.clientId === snapshot.clientId);
-          if (annotation) this._mergeSuccessfulUpsert(annotation, data, snapshot.dirtyFields || []);
-        }
-        delete this.outbox[snapshot.clientId];
-      });
-      this._renderPins();
-      this._rebuildList();
-      this._updateCount();
-    },
-
-    _mergeSuccessfulUpsert(annotation, server, sentDirtyFields) {
-      if (this._serverRepresentationIsStale(annotation, server)) {
-        annotation.dirtyFields = (annotation.dirtyFields || []).filter(field => !sentDirtyFields.includes(field));
-        annotation.syncState = "synced";
-        return;
-      }
-      annotation.serverId = server.id;
-      annotation.serverRevision = server.revision;
-      annotation.userId = server.userId;
-      annotation.authorName = server.authorName;
-      annotation.createdAt = server.createdAt;
-      annotation.serverUpdatedAt = server.updatedAt || annotation.serverUpdatedAt;
-      annotation.comment = server.content;
-      annotation.intent = server.intent;
-      annotation.severity = server.severity;
-      annotation.status = server.status;
-      annotation.selectedText = server.selectedText;
-      annotation.element = server.target || {};
-      annotation.metadata = server.metadata || {};
-      annotation.thread = server.thread || [];
-      annotation.pageUrl = server.pageUrl || annotation.pageUrl;
-      annotation.pathname = server.pageUrl || annotation.pathname;
-      annotation.dirtyFields = (annotation.dirtyFields || []).filter(field => !sentDirtyFields.includes(field));
-      annotation.syncState = "synced";
-    },
-
-    _reconcileSyncConflict(snapshot, conflict) {
-      if (!this._outboxEntryMatches(snapshot)) return "stop";
-
-      let resolution = "stop";
-      const committed = this._commitLocalStateChange(() => {
-        if (!this._outboxEntryMatches(snapshot)) return;
-        const entry = this.outbox[snapshot.clientId];
-        const annotation = this.annotations.find(candidate => candidate.clientId === snapshot.clientId);
-
-        if (snapshot.type === "delete") {
-          delete this.outbox[snapshot.clientId];
-          if (annotation) this._mergePulledAnnotation(annotation, conflict.data, null);
-          else this.annotations.push(this._annotationFromServer(conflict.data));
-          this._assignDisplayIds();
-          return;
-        }
-
-        if (conflict.missing) {
-          if (entry.missingConflictRebased) {
-            entry.syncState = "failed";
-            if (annotation) annotation.syncState = "failed";
-            return;
-          }
-          if (!annotation) {
-            entry.syncState = "failed";
-            return;
-          }
-          // Recreate once from the complete desired browser state. Replaying a
-          // narrow edit delta onto a new row can omit required fields and lose
-          // the user's annotation to a permanent validation failure.
-          annotation.dirtyFields = this._legacyDirtyFields(annotation);
-          entry.annotation = this._desiredState(annotation);
-          entry.dirtyFields = annotation.dirtyFields.slice();
-          entry.baseRevision = 0;
-          entry.missingConflictRebased = true;
-          annotation.serverId = null;
-          annotation.serverRevision = 0;
-          resolution = "retry";
-          return;
-        }
-
-        if (!annotation) {
-          entry.syncState = "failed";
-          return;
-        }
-        this._mergePulledAnnotation(annotation, conflict.data, entry);
-        entry.annotation = this._desiredState(annotation);
-        entry.dirtyFields = (annotation.dirtyFields || []).slice();
-        entry.baseRevision = conflict.data.revision;
-        delete entry.missingConflictRebased;
-        resolution = "retry";
-      });
-      if (!committed) return "stop";
-      this._renderPins();
-      this._rebuildList();
-      this._updateCount();
-      return resolution;
-    },
-
-    _markSyncFailed(snapshot) {
-      if (!this._outboxEntryMatches(snapshot)) return;
-      this._commitLocalStateChange(() => {
-        const entry = this.outbox[snapshot.clientId];
-        if (!entry || !this._outboxEntryMatches(snapshot)) return;
-        entry.syncState = "failed";
-        const annotation = this.annotations.find(candidate => candidate.clientId === snapshot.clientId);
-        if (annotation) annotation.syncState = "failed";
-      });
-      this._rebuildList();
-    },
-
-    _recordMalformedResponse(snapshot) {
-      if (!this._outboxEntryMatches(snapshot)) return true;
-      const attempts = (this.outbox[snapshot.clientId].malformedAttempts || 0) + 1;
-      if (attempts >= this._syncMalformedLimit) {
-        this._markSyncFailed(snapshot);
-        return true;
-      }
-      this._commitLocalStateChange(() => {
-        if (this._outboxEntryMatches(snapshot)) this.outbox[snapshot.clientId].malformedAttempts = attempts;
-      });
-      this._scheduleSyncRetry();
-      return false;
-    },
-
-    _outboxEntryMatches(snapshot) {
-      const current = this.outbox[snapshot.clientId];
-      return Boolean(current) && JSON.stringify(current) === JSON.stringify(snapshot);
-    },
-
-    _immutableCopy(value) {
-      return JSON.parse(JSON.stringify(value));
-    },
-
-    _retryAfterDelay(response) {
-      const value = response.headers.get("Retry-After");
-      if (!value) return null;
-      const seconds = Number(value);
-      const delay = Number.isFinite(seconds) ? seconds * 1000 : Date.parse(value) - Date.now();
-      if (!Number.isFinite(delay)) return null;
-      return Math.min(this._syncMaxRetryDelay, Math.max(0, delay));
-    },
-
-    _scheduleSyncRetry(requestedDelay) {
-      if (this._syncRetryTimer) return;
-      this._syncRetryAttempt += 1;
-      const exponential = this._syncBaseRetryDelay * (2 ** (this._syncRetryAttempt - 1));
-      this._syncRetryDelay = Math.min(this._syncMaxRetryDelay, requestedDelay ?? exponential);
-      this._syncRetryTimer = setTimeout(async () => {
-        this._syncRetryTimer = null;
-        await this._checkHealth();
-      }, this._syncRetryDelay);
-    },
-
-    _resetSyncRetry() {
-      this._syncRetryAttempt = 0;
-      this._syncRetryDelay = 0;
-      if (this._syncRetryTimer) clearTimeout(this._syncRetryTimer);
-      this._syncRetryTimer = null;
-      this._syncUnavailable = null;
-    },
-
-    _setSyncUnavailable(message) {
-      this.serverOnline = false;
-      this._syncUnavailable = message;
-      this._updateStatus();
-    },
-
-    _retrySync(clientId) {
-      const entry = this.outbox[clientId];
-      if (!entry || entry.syncState !== "failed") return;
-      const committed = this._commitLocalStateChange(() => {
-        entry.syncState = "pending";
-        const annotation = this.annotations.find(candidate => candidate.clientId === clientId);
-        if (annotation) annotation.syncState = "pending";
-      });
-      if (!committed) return;
-      this._rebuildList();
-    },
-
-    _loadFromStorage() {
-      try {
-        let raw = localStorage.getItem(this._storageKey());
-        if (raw) {
-          const data = JSON.parse(raw);
-          const validDocument = data && typeof data === "object" && !Array.isArray(data);
-          this.annotations = validDocument && Array.isArray(data.annotations) ? data.annotations : [];
-          this.nextId = validDocument && Number.isInteger(data.nextId) && data.nextId > 0 ? data.nextId : (this.annotations.length + 1);
-          this.outbox = validDocument && data.outbox && typeof data.outbox === "object" && !Array.isArray(data.outbox) ? data.outbox : {};
-          this.legacyMigrations = validDocument && data.legacyMigrations && typeof data.legacyMigrations === "object" && !Array.isArray(data.legacyMigrations)
-            ? data.legacyMigrations
-            : {};
-        }
-        // Pre-1.3 bare storage has no endpoint provenance, so it is left intact
-        // unless the host explicitly designates this endpoint. Page-qualified
-        // legacy keys are only claimed by a toolbar currently on that exact page.
-        const migratedKeys = this._migrateUnnamespacedStorage();
-        migratedKeys.push(...this._migratePageAnnotations());
-        this._normalizeStoredState();
-        this._recordLegacyMigrations();
-        if (this._saveToStorage()) this._cleanupMigratedKeys(migratedKeys);
-        this._rebuildList();
-        this._updateCount();
-      } catch (e) { console.warn("[rails-markup] load failed:", e); }
-    },
-
-    _migrateUnnamespacedStorage() {
-      const sourceKeys = [];
-      const designatedEndpoint = (this.legacyStorageEndpoint || "").replace(/\/+$/, "");
-      const currentEndpoint = (this.endpoint || "").replace(/\/+$/, "");
-      const claimBareStorage = Boolean(designatedEndpoint) && designatedEndpoint === currentEndpoint;
-      const currentPageKey = `rm-annotations:${this._pageUrl()}`;
-      for (let index = 0; index < localStorage.length; index++) {
-        const key = localStorage.key(index);
-        if ((claimBareStorage && key === "rm-annotations") || key === currentPageKey) sourceKeys.push(key);
-      }
-
-      const migratedKeys = [];
-      const legacyAnnotations = [];
-      const legacyOutbox = {};
-      const consolidatedClientIds = new Set(
-        this.annotations.map(annotation => annotation.clientId).filter(clientId => this._validClientId(clientId))
-      );
-      sourceKeys.forEach(key => {
-        try {
-          const data = JSON.parse(localStorage.getItem(key));
-          if (!this._plainObject(data)) return;
-          const hasAnnotations = Array.isArray(data.annotations);
-          const hasOutbox = key === "rm-annotations" && this._plainObject(data.outbox);
-          if (!hasAnnotations && !hasOutbox) return;
-
-          if (hasAnnotations) {
-            data.annotations.forEach((annotation, index) => {
-              if (!this._plainObject(annotation)) return;
-              const fingerprint = this._legacyMigrationFingerprint(key, index, annotation);
-              const migratedClientId = this.legacyMigrations[fingerprint];
-              if (this._validClientId(migratedClientId) && consolidatedClientIds.has(migratedClientId)) return;
-              if (this._validClientId(migratedClientId)) annotation.clientId = migratedClientId;
-              if (this._validClientId(annotation.clientId) && consolidatedClientIds.has(annotation.clientId)) return;
-              Object.defineProperty(annotation, "_legacyMigrationFingerprint", {
-                configurable: true,
-                value: fingerprint
-              });
-              legacyAnnotations.push(annotation);
-              if (this._validClientId(annotation.clientId)) consolidatedClientIds.add(annotation.clientId);
-            });
-          }
-          if (hasOutbox) Object.assign(legacyOutbox, data.outbox);
-          if (Number.isInteger(data.nextId) && data.nextId > this.nextId) this.nextId = data.nextId;
-          migratedKeys.push(key);
-        } catch {}
-      });
-
-      this.annotations = legacyAnnotations.concat(this.annotations);
-      this.outbox = Object.assign({}, legacyOutbox, this.outbox);
-      return migratedKeys;
-    },
-
-    _migratePageAnnotations() {
-      // Find and merge per-page annotation keys only within this endpoint namespace.
-      const prefix = this._storageKey() + ":";
-      const migratedKeys = [];
-      const seenIds = new Set(this.annotations.map(a => a.id));
-      const consolidatedClientIds = new Set(this.annotations.map(a => a.clientId).filter(clientId => this._validClientId(clientId)));
-      for (let i = 0; i < localStorage.length; i++) {
-        const key = localStorage.key(i);
-        if (key && key.startsWith(prefix)) {
-          try {
-            const data = JSON.parse(localStorage.getItem(key));
-            if (data && Array.isArray(data.annotations)) {
-              data.annotations.forEach((a, index) => {
-                const fingerprint = this._legacyMigrationFingerprint(key, index, a);
-                const migratedClientId = this.legacyMigrations[fingerprint];
-                if (this._validClientId(migratedClientId) && consolidatedClientIds.has(migratedClientId)) return;
-                if (this._validClientId(migratedClientId)) a.clientId = migratedClientId;
-                Object.defineProperty(a, "_legacyMigrationFingerprint", { configurable: true, value: fingerprint });
-                // Legacy ids were per-page counters, so different pages can reuse
-                // the same id. Reassign a fresh id on collision instead of
-                // dropping the annotation (which silently lost data).
-                if (seenIds.has(a.id)) a.id = this.nextId++;
-                seenIds.add(a.id);
-                this.annotations.push(a);
-                if (a.id >= this.nextId) this.nextId = a.id + 1;
-              });
-              migratedKeys.push(key);
-            }
-          } catch {}
-        }
-      }
-      return migratedKeys;
-    },
-
-    _legacyMigrationFingerprint(key, index, annotation) {
-      const input = `${key}\u0000${index}\u0000${JSON.stringify(annotation)}`;
-      let hash = 2166136261;
-      for (let i = 0; i < input.length; i++) hash = Math.imul(hash ^ input.charCodeAt(i), 16777619);
-      return `${key}:${index}:${(hash >>> 0).toString(16)}`;
-    },
-
-    _recordLegacyMigrations() {
-      this.annotations.forEach(annotation => {
-        if (!annotation._legacyMigrationFingerprint) return;
-        this.legacyMigrations[annotation._legacyMigrationFingerprint] = annotation.clientId;
-        delete annotation._legacyMigrationFingerprint;
-      });
-    },
-
-    _cleanupMigratedKeys(keys) {
-      keys.forEach(key => {
-        try { localStorage.removeItem(key); }
-        catch (e) { console.warn("[rails-markup] legacy cleanup failed:", e); }
-      });
-    },
-
-    _normalizeStoredState() {
-      if (!this.outbox || typeof this.outbox !== "object" || Array.isArray(this.outbox)) this.outbox = {};
-
-      const usedClientIds = new Set(this.annotations.map(annotation => annotation.clientId).filter(clientId => this._validClientId(clientId)));
-      const invalidOutboxOwners = this._invalidOutboxOwners();
-      const normalized = this.annotations.map((annotation, index) => {
-        const originalClientId = annotation.clientId;
-        if (!this._validClientId(originalClientId)) {
-          let replacementClientId;
-          do { replacementClientId = this._newClientId(); } while (usedClientIds.has(replacementClientId));
-          usedClientIds.add(replacementClientId);
-          annotation.clientId = replacementClientId;
-          if (invalidOutboxOwners.get(originalClientId) === annotation) this._rekeyOutbox(originalClientId, replacementClientId);
-        }
-        if (annotation.serverId == null) annotation.serverId = annotation.server_id ?? null;
-        if (annotation.serverUpdatedAt == null) annotation.serverUpdatedAt = annotation.server_updated_at ?? null;
-        if (!Number.isInteger(annotation.serverRevision) || annotation.serverRevision < 0) {
-          annotation.serverRevision = Number.isInteger(annotation.server_revision) && annotation.server_revision >= 0
-            ? annotation.server_revision
-            : 0;
-        }
-        if (!Array.isArray(annotation.dirtyFields)) annotation.dirtyFields = [];
-        annotation.pageUrl = annotation.pageUrl || annotation.pathname || this._pageUrl();
-        annotation.pathname = annotation.pageUrl;
-
-        return { annotation, index };
-      });
-
-      this._normalizeOutboxEnvelopes();
-
-      const byClientId = new Map();
-      normalized.forEach(candidate => {
-        const current = byClientId.get(candidate.annotation.clientId);
-        if (!current || this._isNewerLocalRecord(candidate, current)) byClientId.set(candidate.annotation.clientId, candidate);
-      });
-      this.annotations = Array.from(byClientId.values())
-        .sort((left, right) => left.index - right.index)
-        .map(candidate => candidate.annotation);
-
-      this._assignDisplayIds();
-      this.annotations.forEach(annotation => {
-        const mapped = annotation.serverId != null;
-        const queuedEntry = this.outbox[annotation.clientId];
-        const queued = Boolean(queuedEntry);
-        const annotationRevision = Number.isInteger(annotation.revision) && annotation.revision >= 0 ? annotation.revision : 0;
-        annotation.revision = annotationRevision;
-        annotation.syncState = (queued && annotation.syncState === "failed")
-          ? "failed"
-          : ((queued || !mapped) ? "pending" : "synced");
-        if (!this.outbox[annotation.clientId] && !mapped) {
-          annotation.dirtyFields = this._legacyDirtyFields(annotation);
-          this.outbox[annotation.clientId] = {
-            type: "upsert",
-            clientId: annotation.clientId,
-            revision: annotation.revision,
-            baseRevision: annotation.serverRevision,
-            syncState: "pending",
-            annotation: this._desiredState(annotation),
-            dirtyFields: annotation.dirtyFields.slice()
-          };
-        }
-      });
-    },
-
-    _normalizeOutboxEnvelopes() {
-      const normalized = {};
-
-      Object.entries(this.outbox).forEach(([storedClientId, candidate]) => {
-        if (!this._plainObject(candidate)) return;
-
-        const nestedClientId = candidate.annotation?.clientId;
-        const clientId = this._validClientId(nestedClientId)
-          ? nestedClientId
-          : (this._validClientId(candidate.clientId)
-            ? candidate.clientId
-            : (this._validClientId(storedClientId) ? storedClientId : null));
-        if (!clientId) return;
-
-        const type = candidate.type === "delete"
-          ? "delete"
-          : ((candidate.type === "upsert" || this._plainObject(candidate.annotation)) ? "upsert" : null);
-        if (!type) return;
-
-        const annotation = this.annotations.find(record => record.clientId === clientId);
-        const candidateRevision = Number.isInteger(candidate.revision) && candidate.revision >= 0 ? candidate.revision : 0;
-        const annotationRevision = Number.isInteger(annotation?.revision) && annotation.revision >= 0 ? annotation.revision : 0;
-        const candidateBaseRevision = Number.isInteger(candidate.baseRevision) && candidate.baseRevision >= 0
-          ? candidate.baseRevision
-          : 0;
-        const annotationBaseRevision = Number.isInteger(annotation?.serverRevision) && annotation.serverRevision >= 0
-          ? annotation.serverRevision
-          : 0;
-        const envelope = Object.assign({}, candidate, {
-          type,
-          clientId,
-          revision: Math.max(candidateRevision, annotationRevision),
-          baseRevision: Math.max(candidateBaseRevision, annotationBaseRevision),
-          syncState: candidate.syncState === "failed" ? "failed" : "pending"
-        });
-
-        if (type === "upsert") {
-          envelope.annotation = Object.assign({}, candidate.annotation, { clientId });
-          envelope.dirtyFields = this._mergeDirtyFields(candidate.dirtyFields || envelope.annotation.dirtyFields || []);
-        }
-        normalized[clientId] = envelope;
-      });
-
-      this.outbox = normalized;
-    },
-
-    _isNewerLocalRecord(candidate, current) {
-      const timestamp = value => {
-        const parsed = Date.parse(value || "");
-        return Number.isNaN(parsed) ? -Infinity : parsed;
-      };
-      const candidateUpdatedAt = timestamp(candidate.annotation.updatedAt || candidate.annotation.updated_at);
-      const currentUpdatedAt = timestamp(current.annotation.updatedAt || current.annotation.updated_at);
-      if (candidateUpdatedAt !== currentUpdatedAt) return candidateUpdatedAt > currentUpdatedAt;
-      return candidate.index > current.index;
-    },
-
-    _assignDisplayIds() {
-      const validIds = this.annotations
-        .map(annotation => annotation.id)
-        .filter(id => Number.isInteger(id) && id > 0);
-      let candidateId = Math.max(1, Number.isInteger(this.nextId) ? this.nextId : 1, ...validIds.map(id => id + 1));
-      const usedIds = new Set();
-
-      this.annotations.forEach(annotation => {
-        if (!Number.isInteger(annotation.id) || annotation.id <= 0 || usedIds.has(annotation.id)) {
-          while (usedIds.has(candidateId)) candidateId += 1;
-          annotation.id = candidateId++;
-        }
-        usedIds.add(annotation.id);
-      });
-
-      this.nextId = Math.max(candidateId, ...Array.from(usedIds, id => id + 1), 1);
-    },
-
-    _legacyDirtyFields(annotation) {
-      const fields = this._browserCreateFields();
-      if (annotation.status && annotation.status !== "pending") fields.push("status");
-      return fields;
-    },
-
-    _browserCreateFields() {
-      return ["content", "intent", "severity", "selected_text", "target", "page_url", "metadata"];
-    },
-
-    _desiredState(annotation) {
-      const sourceMetadata = annotation.metadata && typeof annotation.metadata === "object" ? annotation.metadata : {};
-      const metadata = {};
-      ["tool", "url", "localId", "sessionId", "screenshot"].forEach(key => {
-        if (sourceMetadata[key] != null) metadata[key] = sourceMetadata[key];
-      });
-      if (metadata.tool == null) metadata.tool = "rails-markup";
-      if (metadata.url == null && annotation.url) metadata.url = annotation.url;
-      if (metadata.localId == null && annotation.id != null) metadata.localId = annotation.id;
-      if (metadata.sessionId == null && this.sessionId != null) metadata.sessionId = this.sessionId;
-      if (metadata.screenshot == null && annotation.screenshot) metadata.screenshot = annotation.screenshot;
-
-      return JSON.parse(JSON.stringify({
-        clientId: annotation.clientId,
-        page_url: annotation.pageUrl || annotation.pathname || this._pageUrl(),
-        content: annotation.comment ?? annotation.content ?? "",
-        intent: annotation.intent,
-        severity: annotation.severity,
-        selected_text: annotation.selectedText ?? annotation.selected_text ?? null,
-        target: annotation.element || annotation.target || {},
-        metadata,
-        status: annotation.status || "pending"
-      }));
-    },
-
-    _validClientId(clientId) {
-      return typeof clientId === "string" && /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(clientId);
-    },
-
-    _invalidOutboxOwners() {
-      const owners = new Map();
-      this.annotations.forEach(annotation => {
-        const clientId = annotation.clientId;
-        if (!clientId || this._validClientId(clientId) || owners.has(clientId) || !this.outbox[clientId]) return;
-
-        const peers = this.annotations.filter(candidate => candidate.clientId === clientId);
-        const desired = this.outbox[clientId].annotation || this.outbox[clientId];
-        const desiredId = desired.id ?? desired.metadata?.localId;
-        const desiredComment = desired.comment ?? desired.content;
-        const owner = peers.find(candidate => desiredId != null && candidate.id === desiredId)
-          || peers.find(candidate => desiredComment != null && (candidate.comment ?? candidate.content) === desiredComment)
-          || peers[0];
-        owners.set(clientId, owner);
-      });
-      return owners;
-    },
-
-    _rekeyOutbox(oldClientId, newClientId) {
-      if (!oldClientId || !this.outbox[oldClientId]) return;
-      const entry = this.outbox[oldClientId];
-      delete this.outbox[oldClientId];
-      if (entry.annotation) entry.annotation.clientId = newClientId;
-      if (entry.clientId) entry.clientId = newClientId;
-      this.outbox[newClientId] = entry;
-    },
-
-    _newClientId() {
-      if (global.crypto && typeof global.crypto.randomUUID === "function") return global.crypto.randomUUID();
-      const bytes = new Uint8Array(16);
-      if (global.crypto && typeof global.crypto.getRandomValues === "function") global.crypto.getRandomValues(bytes);
-      else bytes.forEach((_, index) => { bytes[index] = Math.floor(Math.random() * 256); });
-      bytes[6] = (bytes[6] & 0x0f) | 0x40;
-      bytes[8] = (bytes[8] & 0x3f) | 0x80;
-      const hex = Array.from(bytes, byte => byte.toString(16).padStart(2, "0")).join("");
-      return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
-    },
-
-    // ---- Server sync ----
-
-    _pullAnnotations() {
-      const pageUrl = this._pageUrl();
-      if (this._pullPromise && this._pullPageUrl === pageUrl) return this._pullPromise;
-
-      const previousPull = this._pullPromise;
-      const operation = previousPull
-        ? previousPull.then(() => this._performAnnotationPull(pageUrl))
-        : this._performAnnotationPull(pageUrl);
-      let trackedPull;
-      trackedPull = operation.finally(() => {
-        if (this._pullPromise !== trackedPull) return;
-        this._pullPromise = null;
-        this._pullPageUrl = null;
-      });
-      this._pullPageUrl = pageUrl;
-      this._pullPromise = trackedPull;
-      return trackedPull;
-    },
-
-    _performAnnotationPull(pageUrl) {
-      return this._runAnnotationPull(pageUrl)
-        .then(complete => {
-          this._pullNeeded = !complete;
-          return complete;
-        })
-        .catch(() => {
-          this._pullNeeded = true;
-          return false;
-        });
-    },
-
-    async _runAnnotationPull(pageUrl) {
-      const url = this._sameOriginEndpointUrl(`/annotations?page_url=${encodeURIComponent(pageUrl)}`);
-      if (!url) {
-        this._setSyncUnavailable("Sync unavailable: endpoint must be same-origin");
-        return false;
-      }
-
-      const response = await fetch(url, {
-        method: "GET",
-        headers: { "Accept": "application/json" },
-        credentials: "same-origin",
-        redirect: "manual",
-        signal: AbortSignal.timeout(5000)
-      });
-      if (!response.ok || response.status >= 300 || response.type === "opaqueredirect") return false;
-      const contentType = response.headers.get("Content-Type") || "";
-      if (!contentType.toLowerCase().includes("application/json")) return false;
-
-      let records;
-      try { records = await response.json(); }
-      catch { return false; }
-      if (pageUrl !== this._pageUrl() || !this._validPullRecords(records, pageUrl)) return false;
-      return this._reconcilePull(pageUrl, records);
-    },
-
-    _validPullRecords(records, pageUrl) {
-      if (!Array.isArray(records)) return false;
-      const clientIds = new Set();
-      return records.every(record => {
-        const clientId = record?.clientId;
-        if (!this._validClientId(clientId) || clientIds.has(clientId)) return false;
-        clientIds.add(clientId);
-        return record.pageUrl === pageUrl && this._validServerAnnotation(record, clientId);
-      });
-    },
-
-    _reconcilePull(pageUrl, records) {
-      const committed = this._commitLocalStateChange(() => {
-        const presentClientIds = new Set(records.map(record => record.clientId));
-        records.forEach(server => {
-          const outboxEntry = this.outbox[server.clientId];
-          if (outboxEntry?.type === "delete") return;
-
-          const annotation = this.annotations.find(candidate => candidate.clientId === server.clientId);
-          if (annotation) this._mergePulledAnnotation(annotation, server, outboxEntry);
-          else this.annotations.push(this._annotationFromServer(server));
-        });
-
-        this.annotations = this.annotations.filter(annotation => {
-          const annotationPage = annotation.pageUrl || annotation.pathname;
-          if (annotationPage !== pageUrl || presentClientIds.has(annotation.clientId)) return true;
-          return Boolean(this.outbox[annotation.clientId]) || annotation.syncState !== "synced";
-        });
-
-        this._assignDisplayIds();
-        Object.entries(this.outbox).forEach(([clientId, entry]) => {
-          if (entry?.type !== "upsert") return;
-          const annotation = this.annotations.find(candidate => candidate.clientId === clientId);
-          if (!annotation) return;
-          entry.annotation = this._desiredState(annotation);
-          entry.dirtyFields = (annotation.dirtyFields || []).slice();
-          entry.baseRevision = Number.isInteger(annotation.serverRevision) ? annotation.serverRevision : 0;
-        });
-      });
-      if (!committed) return false;
-      this._renderPins();
-      this._rebuildList();
-      this._updateCount();
-      return true;
-    },
-
-    _mergePulledAnnotation(annotation, server, outboxEntry) {
-      if (this._serverRepresentationIsStale(annotation, server)) return;
-      const dirtyFields = new Set(this._mergeDirtyFields(annotation.dirtyFields || [], outboxEntry?.dirtyFields || []));
-      const browserFields = [
-        ["content", "comment"],
-        ["intent", "intent"],
-        ["severity", "severity"],
-        ["selected_text", "selectedText"],
-        ["target", "element"],
-        ["metadata", "metadata"],
-        ["status", "status"]
-      ];
-      browserFields.forEach(([dirtyField, localField]) => {
-        if (dirtyFields.has(dirtyField)) return;
-        const serverField = {
-          content: "content", selected_text: "selectedText", target: "target"
-        }[dirtyField] || dirtyField;
-        annotation[localField] = this._immutableCopy(server[serverField]);
-      });
-      if (!dirtyFields.has("page_url")) {
-        annotation.pageUrl = server.pageUrl;
-        annotation.pathname = server.pageUrl;
-      }
-      annotation.serverId = server.id;
-      annotation.serverRevision = server.revision;
-      annotation.userId = server.userId;
-      annotation.authorName = server.authorName;
-      annotation.createdAt = server.createdAt;
-      annotation.serverUpdatedAt = server.updatedAt;
-      annotation.thread = this._immutableCopy(server.thread);
-      annotation.dirtyFields = Array.from(dirtyFields);
-      annotation.syncState = outboxEntry ? (outboxEntry.syncState || "pending") : "synced";
-      if (!dirtyFields.has("metadata") && server.metadata?.url) annotation.url = server.metadata.url;
-    },
-
-    _annotationFromServer(server) {
-      return {
-        id: null,
-        clientId: server.clientId,
-        serverId: server.id,
-        serverRevision: server.revision,
-        userId: server.userId,
-        authorName: server.authorName,
-        syncState: "synced",
-        serverUpdatedAt: server.updatedAt,
-        dirtyFields: [],
-        revision: 0,
-        comment: server.content,
-        intent: server.intent,
-        severity: server.severity,
-        status: server.status,
-        selectedText: server.selectedText,
-        element: this._immutableCopy(server.target),
-        metadata: this._immutableCopy(server.metadata),
-        pathname: server.pageUrl,
-        pageUrl: server.pageUrl,
-        url: server.metadata?.url || server.pageUrl,
-        thread: this._immutableCopy(server.thread),
-        createdAt: server.createdAt
-      };
-    },
-
-    _serverRepresentationIsStale(annotation, server) {
-      if (Number.isInteger(annotation.serverRevision) && Number.isInteger(server.revision)) {
-        return server.revision < annotation.serverRevision;
-      }
-      const localTimestamp = Date.parse(annotation.serverUpdatedAt || "");
-      const serverTimestamp = Date.parse(server.updatedAt || "");
-      return Number.isFinite(localTimestamp) && Number.isFinite(serverTimestamp) && serverTimestamp < localTimestamp;
-    },
-
-    _onVisibilityChange() {
-      if (document.hidden) {
-        // Tab hidden — pause health checks to save resources
-        if (this.healthInterval) { clearInterval(this.healthInterval); this.healthInterval = null; }
-      } else {
-        // Tab visible — resume health checks immediately
-        if (!this.healthInterval) {
-          this._checkHealth();
-          this.healthInterval = setInterval(() => this._checkHealth(), this.healthIntervalMs);
-        }
-      }
-    },
-
-    _onOnline() {
-      return this._checkHealth();
-    },
-
-    _checkHealth() {
-      if (this._healthPromise) return this._healthPromise;
-      this._healthPromise = this._runHealthCheck().finally(() => { this._healthPromise = null; });
-      return this._healthPromise;
-    },
-
-    async _runHealthCheck() {
-      try {
-        const healthUrl = this._sameOriginEndpointUrl("/health");
-        if (!healthUrl) {
-          this._setSyncUnavailable("Sync unavailable: endpoint must be same-origin");
-          return;
-        }
-        const resp = await fetch(healthUrl, { signal: AbortSignal.timeout(3000) });
-        const was = this.serverOnline;
-        this.serverOnline = resp.ok;
-        this._updateStatus();
-        if (!was && this.serverOnline) await this._initSession();
-        if (this.serverOnline && (!was || this._pullNeeded)) await this._pullAnnotations();
-        if (this.serverOnline) await this._flushOutbox();
-      } catch {
-        this.serverOnline = false;
-        this._updateStatus();
-      }
-    },
-
-    async _initSession() {
-      if (!this.serverOnline) return;
-      try {
-        const request = this._sameOriginMutationRequest("/sessions");
-        if (!request) {
-          this._setSyncUnavailable("Sync unavailable: endpoint must be same-origin");
-          return;
-        }
-        const resp = await fetch(request.url, {
-          method: "POST", headers: request.headers, credentials: "same-origin",
-          body: JSON.stringify({ url: window.location.href, metadata: { tool: "rails-markup" } }),
-          signal: AbortSignal.timeout(5000)
-        });
-        if (resp.ok) {
-          const data = await resp.json();
-          this.sessionId = data.id;
-        }
-      } catch (e) { console.warn("[rails-markup] session init failed:", e); }
-    },
-
-    async _synchronizeCurrentPage(initializeSession) {
-      if (!this.serverOnline) return;
-      if (initializeSession) await this._initSession();
-      await this._pullAnnotations();
-      await this._flushOutbox();
-    },
-
-    async _pushToServer(annotation) {
-      if (!this.serverOnline) return;
-      try {
-        const request = this._sameOriginMutationRequest(`/sessions/${encodeURIComponent(this.sessionId || "local")}/annotations`);
-        if (!request) {
-          this._setSyncUnavailable("Sync unavailable: endpoint must be same-origin");
-          return;
-        }
-        await fetch(request.url, {
-          method: "POST", headers: request.headers, credentials: "same-origin",
-          body: JSON.stringify({
-            page_url: this._pageUrl(),
-            clientId: annotation.clientId,
-            content: annotation.comment,
-            intent: annotation.intent,
-            severity: annotation.severity,
-            selected_text: annotation.selectedText || null,
-            target: annotation.element || {},
-            metadata: Object.assign(
-              { localId: annotation.id, url: annotation.url },
-              annotation.screenshot ? { screenshot: annotation.screenshot } : {}
-            )
-          }),
-          signal: AbortSignal.timeout(5000)
-        });
-      } catch (e) { console.warn("[rails-markup] push failed:", e); }
-    },
-
-    _updateStatus() {
-      const dot = document.getElementById("rm-status-dot");
-      const text = document.getElementById("rm-status-text");
-      if (dot) {
-        dot.style.background = this.serverOnline ? "#4ade80" : "#d1d5db";
-        dot.style.boxShadow = this.serverOnline ? "0 0 0 2px rgba(74,222,128,0.2)" : "";
-      }
-      if (text) text.textContent = this.serverOnline ? "Connected" : (this._syncUnavailable || "Offline");
-    },
-
-    // ---- Screenshot capture ----
-
-    async _captureElement(element) {
-      try {
-        const rect = element.getBoundingClientRect();
-        const width = Math.min(Math.round(rect.width), 800);
-        const height = Math.min(Math.round(rect.height), 600);
-        if (width < 10 || height < 10) return null;
-
-        const clone = element.cloneNode(true);
-        // Strip scripts and event handlers
-        clone.querySelectorAll("script").forEach(s => s.remove());
-        // Remove cross-origin images to avoid tainting the canvas
-        const origin = location.origin;
-        clone.querySelectorAll("img").forEach(img => {
-          try { if (img.src && !img.src.startsWith(origin) && !img.src.startsWith("data:")) img.removeAttribute("src"); } catch {}
-        });
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        const svg = `<svg xmlns="${svgNS}" width="${width}" height="${height}">
-          <foreignObject width="100%" height="100%">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;">${clone.outerHTML}</div>
-          </foreignObject>
-        </svg>`;
-
-        const canvas = document.createElement("canvas");
-        const scale = Math.min(window.devicePixelRatio || 1, 2);
-        canvas.width = width * scale;
-        canvas.height = height * scale;
-        const ctx = canvas.getContext("2d");
-        ctx.scale(scale, scale);
-
-        const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
-        const url = URL.createObjectURL(blob);
-
-        return new Promise((resolve) => {
-          const img = new Image();
-          img.onload = () => {
-            ctx.drawImage(img, 0, 0, width, height);
-            URL.revokeObjectURL(url);
-            try { resolve(canvas.toDataURL("image/png", 0.7)); } catch { resolve(null); }
-          };
-          img.onerror = () => {
-            URL.revokeObjectURL(url);
-            resolve(null);
-          };
-          img.src = url;
-        });
-      } catch {
-        return null;
-      }
-    },
-
-    // ---- Drawing tools ----
-
-    _initDrawing(screenshotDataUrl) {
-      const popup = document.getElementById("rm-popup");
-      let container = popup.querySelector(".rm-drawing-container");
-      if (container) container.remove();
-
-      container = document.createElement("div");
-      container.className = "rm-drawing-container";
-      container.style.cssText = "position:relative;margin-bottom:12px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb;";
-
-      const img = new Image();
-      img.src = screenshotDataUrl;
-      img.style.cssText = "display:block;max-width:100%;border-radius:8px;";
-      container.appendChild(img);
-
-      const canvas = document.createElement("canvas");
-      canvas.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;";
-      container.appendChild(canvas);
-
-      // Tool buttons
-      const tools = document.createElement("div");
-      tools.style.cssText = "display:flex;gap:4px;padding:6px 0;";
-      tools.innerHTML = `
-        <button type="button" data-draw="arrow" class="rm-pill" style="font-size:11px;padding:4px 10px;">Arrow</button>
-        <button type="button" data-draw="rect" class="rm-pill" style="font-size:11px;padding:4px 10px;">Rect</button>
-        <button type="button" data-draw="highlight" class="rm-pill" style="font-size:11px;padding:4px 10px;">Highlight</button>
-        <button type="button" data-draw="undo" class="rm-pill" style="font-size:11px;padding:4px 10px;margin-left:auto;">Undo</button>
-      `;
-
-      const textarea = popup.querySelector("textarea");
-      popup.insertBefore(tools, textarea);
-      popup.insertBefore(container, tools);
-
-      img.onload = () => {
-        canvas.width = img.naturalWidth || img.offsetWidth;
-        canvas.height = img.naturalHeight || img.offsetHeight;
-        this.drawingCanvas = canvas;
-        this.drawingCtx = canvas.getContext("2d");
-        this._screenshotImg = img;
-        this.drawingHistory = [];
-        this.drawingMode = null;
-        this._bindDrawingEvents(canvas, tools);
-      };
-    },
-
-    _bindDrawingEvents(canvas, tools) {
-      const self = this;
-      let isDrawing = false;
-      let points = [];
-
-      tools.addEventListener("click", (e) => {
-        const btn = e.target.closest("[data-draw]");
-        if (!btn) return;
-        const mode = btn.dataset.draw;
-        if (mode === "undo") {
-          self._undoDrawing();
-          return;
-        }
-        self.drawingMode = mode;
-        tools.querySelectorAll("[data-draw]").forEach(b => {
-          b.style.background = b.dataset.draw === mode ? self._accentBg() : "#fff";
-          b.style.color = b.dataset.draw === mode ? "#fff" : "#374151";
-        });
-      });
-
-      const getPos = (e) => {
-        const rect = canvas.getBoundingClientRect();
-        return {
-          x: (e.clientX - rect.left) * (canvas.width / rect.width),
-          y: (e.clientY - rect.top) * (canvas.height / rect.height)
-        };
-      };
-
-      canvas.addEventListener("mousedown", (e) => {
-        if (!self.drawingMode) return;
-        e.stopPropagation();
-        isDrawing = true;
-        self.drawingStart = getPos(e);
-        points = [self.drawingStart];
-      });
-
-      canvas.addEventListener("mousemove", (e) => {
-        if (!isDrawing || !self.drawingMode) return;
-        e.stopPropagation();
-        const pos = getPos(e);
-        if (self.drawingMode === "highlight") {
-          points.push(pos);
-          self._redrawCanvas();
-          self._drawHighlightPath(points);
-        } else {
-          self._redrawCanvas();
-          self._drawShape(self.drawingMode, self.drawingStart, pos);
-        }
-      });
-
-      canvas.addEventListener("mouseup", (e) => {
-        if (!isDrawing || !self.drawingMode) return;
-        e.stopPropagation();
-        isDrawing = false;
-        const end = getPos(e);
-        if (self.drawingMode === "highlight") {
-          self.drawingHistory.push({ type: "highlight", points: [...points] });
-        } else {
-          self.drawingHistory.push({ type: self.drawingMode, start: self.drawingStart, end: end });
-        }
-        self._redrawCanvas();
-        points = [];
-      });
-    },
-
-    _drawShape(type, start, end) {
-      const ctx = this.drawingCtx;
-      if (!ctx) return;
-      ctx.lineWidth = 3;
-
-      if (type === "arrow") {
-        ctx.strokeStyle = "#ef4444";
-        ctx.beginPath();
-        ctx.moveTo(start.x, start.y);
-        ctx.lineTo(end.x, end.y);
-        ctx.stroke();
-        // Arrowhead
-        const angle = Math.atan2(end.y - start.y, end.x - start.x);
-        const headLen = 12;
-        ctx.beginPath();
-        ctx.moveTo(end.x, end.y);
-        ctx.lineTo(end.x - headLen * Math.cos(angle - Math.PI / 6), end.y - headLen * Math.sin(angle - Math.PI / 6));
-        ctx.moveTo(end.x, end.y);
-        ctx.lineTo(end.x - headLen * Math.cos(angle + Math.PI / 6), end.y - headLen * Math.sin(angle + Math.PI / 6));
-        ctx.stroke();
-      } else if (type === "rect") {
-        ctx.strokeStyle = "#ef4444";
-        ctx.strokeRect(start.x, start.y, end.x - start.x, end.y - start.y);
-      }
-    },
-
-    _drawHighlightPath(points) {
-      const ctx = this.drawingCtx;
-      if (!ctx || points.length < 2) return;
-      ctx.strokeStyle = "rgba(250,204,21,0.5)";
-      ctx.lineWidth = 16;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      ctx.beginPath();
-      ctx.moveTo(points[0].x, points[0].y);
-      for (let i = 1; i < points.length; i++) {
-        ctx.lineTo(points[i].x, points[i].y);
-      }
-      ctx.stroke();
-      ctx.lineWidth = 3;
-    },
-
-    _redrawCanvas() {
-      const ctx = this.drawingCtx;
-      if (!ctx) return;
-      ctx.clearRect(0, 0, this.drawingCanvas.width, this.drawingCanvas.height);
-      this.drawingHistory.forEach(shape => {
-        if (shape.type === "highlight") {
-          this._drawHighlightPath(shape.points);
-        } else {
-          this._drawShape(shape.type, shape.start, shape.end);
-        }
-      });
-    },
-
-    _undoDrawing() {
-      if (this.drawingHistory.length === 0) return;
-      this.drawingHistory.pop();
-      this._redrawCanvas();
-    },
-
-    _mergeDrawing() {
-      if (!this.drawingCanvas || !this._screenshotImg || this.drawingHistory.length === 0) return null;
-      try {
-        const merged = document.createElement("canvas");
-        merged.width = this.drawingCanvas.width;
-        merged.height = this.drawingCanvas.height;
-        const ctx = merged.getContext("2d");
-        ctx.drawImage(this._screenshotImg, 0, 0, merged.width, merged.height);
-        ctx.drawImage(this.drawingCanvas, 0, 0);
-        return merged.toDataURL("image/png", 0.7);
-      } catch {
-        return null;
-      }
-    },
-
-    // ---- Size helpers ----
-
-    _fabIconSize() {
-      const map = { "default": 20, compact: 18, slim: 16 };
-      return map[this.size] || 20;
-    },
-
-    // ---- Color helpers ----
-
-    _accentBg() {
-      const map = { indigo: "#4f46e5", amber: "#f59e0b", blue: "#2563eb", emerald: "#059669", rose: "#e11d48" };
-      return map[this.accent] || map.indigo;
-    },
-    _accentBgHover() {
-      const map = { indigo: "#4338ca", amber: "#d97706", blue: "#1d4ed8", emerald: "#047857", rose: "#be123c" };
-      return map[this.accent] || map.indigo;
-    },
-    _accentLight() {
-      const map = { indigo: "#e0e7ff", amber: "#fef3c7", blue: "#dbeafe", emerald: "#d1fae5", rose: "#ffe4e6" };
-      return map[this.accent] || map.indigo;
-    },
-    _accentText() {
-      const map = { indigo: "#3730a3", amber: "#92400e", blue: "#1e40af", emerald: "#065f46", rose: "#9f1239" };
-      return map[this.accent] || map.indigo;
-    },
-
-    // ---- Helpers ----
-
-    _esc(str) {
-      const div = document.createElement("div");
-      div.textContent = str || "";
-      return div.innerHTML;
-    }
-  };
-
-  global.RailsMarkupToolbar = RailsMarkupToolbar;
-})(typeof window !== "undefined" ? window : this);