MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

Latest revision as of 18:48, 29 April 2026

/**
 * gr_annotations.js  —  grantha.io inline Comments + Bookmarks  (v2)
 * ══════════════════════════════════════════════════════════════════════
 *
 * CHANGES FROM v1
 * ────────────────
 * • Mobile support: selectionchange + touchend events trigger the FAB
 *   on iOS/Android. Long-press to select text now shows the comment/
 *   bookmark strip correctly.
 * • Anonymous comments: any visitor (logged-in or not) can comment.
 *   A name field is shown to anonymous users. Comments are stored on
 *   Talk:<PageTitle>/GrComments as before and emailed to
 *   feedback@anandamakaranda.in via mailto: (anon) or MW EmailUser
 *   (logged-in, falls back to mailto: if email not configured).
 * • Email target changed to feedback@anandamakaranda.in.
 * • "Add comment" tooltip localised to "टिप्पणी".
 * • "Bookmark" tooltip localised to "चिह्नांकन".
 *
 * BEHAVIOUR
 * ──────────
 * 1. User selects text anywhere in #mw-content-text (desktop mouse or
 *    mobile long-press).
 * 2. FAB strip (Comment / Bookmark) appears near the selection.
 * 3. Clicking Comment:
 *    – Opens composer. Anonymous users see a "Your name" field.
 *    – On submit: wraps selection in yellow highlight, saves to wiki,
 *      emails feedback@anandamakaranda.in, updates panel.
 * 4. Clicking Bookmark:
 *    – Opens name composer. Saves to localStorage, wraps in blue highlight.
 * 5. Right panel (slide-in overlay):
 *    – Tab 1: Comments   (loaded from Talk page)
 *    – Tab 2: Bookmarks  (localStorage)
 *
 * STORAGE
 * ───────
 * Comments  → Talk:<PageTitle>/GrComments  ({{GrComment|…}} templates)
 * Bookmarks → localStorage key grantha_bm_<pageName>
 * Highlight anchors → localStorage key grantha_cmt_<pageName>
 *
 * NOTIFICATION
 * ────────────
 * Logged-in  : MW EmailUser API → feedback@anandamakaranda.in (admin account)
 *              Falls back to Talk page notification + mailto: link.
 * Anonymous  : Opens mailto:feedback@anandamakaranda.in in a new tab.
 *              The comment is still stored on the wiki Talk page.
 * ══════════════════════════════════════════════════════════════════════
 */

/* global mw, $ */
( function () {
  'use strict';

  // ── Configuration ────────────────────────────────────────────────────
  var FEEDBACK_EMAIL = 'feedback@anandamakaranda.in';
  var CONTENT_SEL   = '#mw-content-text';
  var BM_LS_KEY     = 'grantha_bm_'  + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );
  var CMT_LS_KEY    = 'grantha_cmt_' + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );
  var pageTitle     = ( window.mw && mw.config.get( 'wgPageName' ) ) || '';
  var commentsPage  = 'Talk:' + pageTitle + '/GrComments';
  var currentUser   = ( window.mw && mw.config.get( 'wgUserName' ) ) || '';
  var userInitial   = currentUser ? currentUser.charAt( 0 ).toUpperCase() : '?';

  // Run on all content namespaces except the /GrComments page itself
  if ( window.mw ) {
    var ns = mw.config.get( 'wgNamespaceNumber' );
    if ( ns < 0 ) return;
    if ( /\/GrComments$/.test( pageTitle ) ) return;
  }

  // ── State ────────────────────────────────────────────────────────────
  var _selRange   = null;
  var _selText    = '';
  var _selRect    = null;
  var _comments   = [];
  var _bookmarks  = [];
  var _cmtLoaded  = false;
  var _activeTab  = 'comments';

  // Mobile: track whether FAB was dismissed for the current selection
  var _selVersion = 0;   // incremented on each new selectionchange
  var _fabSelVer  = -1;  // the _selVersion when FAB was last shown

  // ── Helpers ──────────────────────────────────────────────────────────
  function uid() {
    return 'gra_' + Date.now() + '_' + Math.random().toString(36).slice(2,7);
  }
  function esc( s ) {
    return String( s || '' )
      .replace(/&/g,'&amp;').replace(/</g,'&lt;')
      .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function nowIso() {
    return new Date().toISOString().replace(/\.\d{3}Z$/,'Z');
  }
  function fmtTs( ts ) {
    try {
      var d = new Date( ts );
      return d.toLocaleDateString('en-IN',{day:'numeric',month:'short',year:'numeric'})
           + ' ' + d.toLocaleTimeString('en-IN',{hour:'2-digit',minute:'2-digit',hour12:false});
    } catch(e){ return ts; }
  }
  function clamp( v, lo, hi ) { return Math.max(lo, Math.min(hi, v)); }
  function isMobile() { return window.innerWidth < 768 || 'ontouchstart' in window; }

  // ── DOM references ───────────────────────────────────────────────────
  var $fab, $panel, $backdrop;
  var $cmpComposer, $cmpInput, $cmpSubmit, $cmpName;
  var $bmComposer, $bmInput, $bmSubmit;
  var $tabComments, $tabBookmarks;
  var $paneComments, $paneBookmarks;

  // ════════════════════════════════════════════════════════════════════
  // DOM BUILDER
  // ════════════════════════════════════════════════════════════════════

  function buildDom() {

    // ── FAB strip ────────────────────────────────────────────────────
    $fab = $( [
      '<div id="gra-fab" role="toolbar" aria-label="Comment / Bookmark">',
      '  <button class="gra-fab-btn" id="gra-fab-comment" type="button" aria-label="Add comment">',
      '    <span class="gra-icon gra-icon-comment" aria-hidden="true"></span>',
      '    <span class="gra-fab-tooltip">Comment</span>',
      '  </button>',
      '  <button class="gra-fab-btn" id="gra-fab-bookmark" type="button" aria-label="Bookmark">',
      '    <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',
      '    <span class="gra-fab-tooltip">Bookmark</span>',
      '  </button>',
      '</div>',
    ].join('') );
    $( 'body' ).append( $fab );

    // ── Comment composer ─────────────────────────────────────────────
    // Anonymous users see an extra "Your name" field (hidden for logged-in)
    var nameRow = currentUser ? '' : [
      '  <div class="gra-composer-name-row">',
      '    <input class="gra-composer-input gra-name-input" id="gra-cmp-name"',
      '      type="text" placeholder="Your name (optional)" autocomplete="name">',
      '  </div>',
    ].join('');

    $cmpComposer = $( [
      '<div class="gra-composer" id="gra-cmp-composer" role="dialog" aria-label="Add comment">',
      '  <div class="gra-composer-user">',
      '    <div class="gra-avatar" id="gra-cmp-avatar">' + esc(currentUser ? userInitial : '?') + '</div>',
      '    <div class="gra-composer-uname">' + esc(currentUser || 'Guest') + '</div>',
      '  </div>',
      nameRow,
      '  <textarea class="gra-composer-input" id="gra-cmp-input"',
      '    placeholder="Write a comment…" rows="3"></textarea>',
      '  <div class="gra-composer-actions">',
      '    <button class="gra-btn-cancel" id="gra-cmp-cancel">Cancel</button>',
      '    <button class="gra-btn-submit" id="gra-cmp-submit" disabled>Comment</button>',
      '  </div>',
      '</div>',
    ].join('') );
    $( 'body' ).append( $cmpComposer );

    // ── Bookmark composer ─────────────────────────────────────────────
    $bmComposer = $( [
      '<div class="gra-bm-composer" id="gra-bm-composer" role="dialog" aria-label="Bookmark">',
      '  <div class="gra-bm-composer-label">',
      '    <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',
      '    Save bookmark',
      '  </div>',
      '  <input class="gra-composer-input" id="gra-bm-input"',
      '    type="text" placeholder="Name this bookmark…" autocomplete="off">',
      '  <div class="gra-composer-actions">',
      '    <button class="gra-btn-cancel" id="gra-bm-cancel">Cancel</button>',
      '    <button class="gra-btn-submit" id="gra-bm-submit">Save</button>',
      '  </div>',
      '</div>',
    ].join('') );
    $( 'body' ).append( $bmComposer );

    // ── Right panel ───────────────────────────────────────────────────
    $panel = $( [
      '<div id="gra-panel" role="complementary" aria-label="Comments">',
      '  <div id="gra-panel-head">',
      '    <div id="gra-panel-title"></div>',
      '    <button id="gra-panel-close" title="Close">✕</button>',
      '  </div>',
      '  <div id="gra-tabs">',
      '    <button class="gra-tab gra-tab-active" id="gra-tab-comments">',
      '      <span class="gra-icon gra-icon-comment" aria-hidden="true"></span> Comments',
      '    </button>',
      '    <button class="gra-tab" id="gra-tab-bookmarks">',
      '      <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span> Bookmarks',
      '    </button>',
      '  </div>',
      '  <div id="gra-panel-body">',
      '    <div class="gra-pane gra-pane-active" id="gra-pane-comments"></div>',
      '    <div class="gra-pane"              id="gra-pane-bookmarks"></div>',
      '  </div>',
      '</div>',
    ].join('') );
    $( 'body' ).append( $panel );

    $backdrop = $( '<div id="gra-backdrop" aria-hidden="true"></div>' );
    $( 'body' ).append( $backdrop );

    // Toggle FAB (bottom-right, persistent)
    var $toggle = $( [
      '<button id="gra-toggle" aria-label="Comments">',
      '  <span class="gra-icon gra-icon-comment" id="gra-toggle-icon" aria-hidden="true"></span>',
      '  <span id="gra-toggle-badge" aria-live="polite"></span>',
      '</button>',
    ].join('') );
    $( 'body' ).append( $toggle );
    $toggle.on( 'click', function() {
      $panel.hasClass('gra-panel-open') ? closePanel() : openPanel( _activeTab );
    } );

    // Cache
    $( '#gra-panel-title' )
      .text( pageTitle.replace(/_/g,' ').split('/')[0].slice(0,30) );
    $tabComments  = $( '#gra-tab-comments' );
    $tabBookmarks = $( '#gra-tab-bookmarks' );
    $paneComments = $( '#gra-pane-comments' );
    $paneBookmarks= $( '#gra-pane-bookmarks' );
    $cmpInput     = $( '#gra-cmp-input' );
    $cmpSubmit    = $( '#gra-cmp-submit' );
    $cmpName      = $( '#gra-cmp-name' );   // may be empty set for logged-in users
    $bmInput      = $( '#gra-bm-input' );
    $bmSubmit     = $( '#gra-bm-submit' );
  }

  // ════════════════════════════════════════════════════════════════════
  // SELECTION — desktop + mobile
  // ════════════════════════════════════════════════════════════════════

  function captureSelection() {
    var sel = window.getSelection();
    if ( !sel || sel.isCollapsed || !sel.rangeCount ) return false;
    var range = sel.getRangeAt(0);
    var text  = sel.toString().trim();
    if ( !text || text.length < 2 ) return false;

    var contentEl = document.querySelector( CONTENT_SEL );
    if ( !contentEl ) return false;
    var start = range.commonAncestorContainer;
    if ( start.nodeType === 3 ) start = start.parentNode;
    if ( !contentEl.contains( start ) ) return false;

    _selText  = text;
    _selRange = range.cloneRange();
    _selRect  = range.getBoundingClientRect();
    return true;
  }

  function tryShowFab() {
    if ( $cmpComposer.hasClass('gra-composer-visible') ) return;
    if ( $bmComposer.hasClass('gra-composer-visible')  ) return;
    if ( captureSelection() ) {
      _fabSelVer = _selVersion;
      showFab( _selRect );
    } else {
      hideFab();
    }
  }

  // ════════════════════════════════════════════════════════════════════
  // FAB POSITIONING
  // ════════════════════════════════════════════════════════════════════

  function showFab( rect ) {
    if ( !rect ) return;
    var fabW = 46, fabH = 84;
    var top  = rect.top + ( rect.height / 2 ) - ( fabH / 2 );
    var left = rect.right + 10;
    if ( left + fabW > window.innerWidth - 8 ) left = rect.left - fabW - 10;
    top  = clamp( top,  8, window.innerHeight - fabH - 8 );
    left = clamp( left, 8, window.innerWidth  - fabW - 8 );
    $fab.css({ top: top + 'px', left: left + 'px' }).addClass('gra-fab-visible');
  }

  function hideFab() { $fab.removeClass('gra-fab-visible'); }

  // ════════════════════════════════════════════════════════════════════
  // COMPOSER POSITIONING
  // ════════════════════════════════════════════════════════════════════

  function positionComposer( $el ) {
    if ( !_selRect ) return;
    var W  = 308;
    var top  = _selRect.bottom + 8;
    var left = _selRect.left;
    if ( left + W > window.innerWidth - 8 ) left = window.innerWidth - W - 8;
    left = Math.max( left, 8 );
    if ( top + 200 > window.innerHeight ) top = _selRect.top - 210;
    top  = Math.max( top, 8 );
    // On very small screens center it
    if ( window.innerWidth < 400 ) left = ( window.innerWidth - W ) / 2;
    $el.css({ top: top + 'px', left: left + 'px' });
  }

  // ════════════════════════════════════════════════════════════════════
  // WRAP SELECTION
  // ════════════════════════════════════════════════════════════════════

  function wrapSelection( id, cssClass ) {
    if ( !_selRange ) return null;
    var range = _selRange;
    _selRange = null;
    try {
      var span = document.createElement('span');
      span.className = cssClass;
      span.setAttribute('data-gra-id', id);
      range.surroundContents( span );
      return span;
    } catch (e) {
      try {
        var frag = range.extractContents();
        var sp2  = document.createElement('span');
        sp2.className = cssClass;
        sp2.setAttribute('data-gra-id', id);
        sp2.appendChild(frag);
        range.insertNode(sp2);
        return sp2;
      } catch(e2) { return null; }
    }
  }

  // ════════════════════════════════════════════════════════════════════
  // COMMENT FLOW
  // ════════════════════════════════════════════════════════════════════

  function openCommentComposer() {
    hideFab();
    positionComposer( $cmpComposer );
    $cmpComposer.addClass('gra-composer-visible');
    // On mobile, delay focus so keyboard doesn't displace the composer
    setTimeout( function() { $cmpInput.focus(); }, isMobile() ? 300 : 0 );
  }

  function closeCommentComposer() {
    $cmpComposer.removeClass('gra-composer-visible');
    $cmpInput.val('');
    if ( $cmpName.length ) $cmpName.val('');
    $cmpSubmit.prop('disabled', true);
    _selRange = null; _selText = ''; _selRect = null;
  }

  function submitComment() {
    var text = $cmpInput.val().trim();
    if ( !text ) return;

    // Resolve author name: logged-in user or anonymous name or "अतिथि"
    var author = currentUser
      || ( $cmpName.length ? $cmpName.val().trim() : '' )
      || 'Guest';

    var id    = uid();
    var ts    = nowIso();
    var quote = _selText.slice(0,120) + (_selText.length > 120 ? '…' : '');

    var span = wrapSelection( id, 'gra-comment-highlight' );
    if ( span ) span.setAttribute('data-gra-quote', quote);

    var entry = { id:id, author:author, ts:ts, quote:quote, text:text };
    _comments.push( entry );
    persistCommentHighlight( id, quote );
    saveCommentToWiki( id, author, quote, text, ts, id );
    notifyByEmail( id, author, quote, text, ts );

    renderCommentCards();
    closeCommentComposer();
    openPanel('comments');
  }

  function saveCommentToWiki( id, author, quote, text, ts, anchorId ) {
    if ( !window.mw ) return;
    var api = new mw.Api();
    api.get({
      action:'query', prop:'revisions', titles:commentsPage,
      rvprop:'content', rvslots:'main', formatversion:2,
    }).then(function(data){
      var page = ((data.query && data.query.pages)||[])[0]||{};
      var existing = '';
      if (page.revisions && page.revisions[0]) {
        var rev = page.revisions[0];
        existing = rev.slots ? rev.slots.main.content : rev['*'] || '';
      }
      var entry = '{{GrComment\n'
                + '| id        = ' + id   + '\n'
                + '| author    = ' + author + '\n'
                + '| timestamp = ' + ts   + '\n'
                + '| quote     = ' + quote.replace(/\n/g,' ') + '\n'
                + '| text      = ' + text.replace(/\n/g,' ')  + '\n'
                + '}}\n';
      var updated = (existing.trim() ? existing.trim() + '\n\n' : '') + entry;
      api.postWithEditToken({
        action:'edit', title:commentsPage, text:updated,
        summary:'Comment — ' + author,
        bot:0,
      }).then(function(){
        // Silently notify admin by appending a compact notice to their Talk page.
        // MediaWiki Echo picks this up and sends an email to whoever watches that page.
        // This is completely invisible to the commenter — no browser hijack.
        var adminTalk = 'User_talk:Chandrashekars';
        var artPath   = (mw.config.get('wgArticlePath')||'/wiki/$1');
        var link      = window.location.origin
                      + artPath.replace('$1', pageTitle)
                      + (anchorId ? '#' + anchorId : '');
        var notice = '\n<!-- grantha-comment-notify -->\n'
                   + '; [[' + pageTitle.replace(/_/g,' ') + ']] — ' + author + '\n'
                   + ': ' + quote.slice(0,80) + '\n'
                   + ': ' + link + '\n';
        new mw.Api().postWithEditToken({
          action:'edit', title:adminTalk, section:'new',
          sectiontitle:'New comment on ' + pageTitle.replace(/_/g,' '),
          text:notice,
          summary:'Comment notification',
          bot:1,   /* bot=1 suppresses Echo "someone edited your talk page" popup
                      but still triggers email watchlist notifications */
        }).catch(function(){});   /* silent — never block the comment flow */
      }).catch(function(){});
    }).catch(function(){});
  }

  function notifyByEmail( anchorId, author, quote, text, ts ) {
    /* Notification is handled server-side by MediaWiki's Echo extension
     * when saveCommentToWiki() edits the Talk page — no client-side
     * mailto needed. A mailto would abruptly open the user's mail app
     * mid-session which breaks the commenting flow entirely. */
  }

  // ── Load + parse comments ────────────────────────────────────────────
  function loadComments( cb ) {
    if ( _cmtLoaded ) { if (cb) cb(); return; }
    if ( !window.mw ) { _cmtLoaded = true; if (cb) cb(); return; }
    new mw.Api().get({
      action:'query', prop:'revisions', titles:commentsPage,
      rvprop:'content', rvslots:'main', formatversion:2,
    }).then(function(data){
      var page = ((data.query && data.query.pages)||[])[0]||{};
      var wt = '';
      if (page.revisions && page.revisions[0]) {
        var rev = page.revisions[0];
        wt = rev.slots ? rev.slots.main.content : rev['*'] || '';
      }
      _comments = parseCommentsWt(wt);
      _cmtLoaded = true;
      if (cb) cb();
    }).catch(function(){ _cmtLoaded = true; if (cb) cb(); });
  }

  function parseCommentsWt( wt ) {
    var out = [], re = /\{\{GrComment\s*\n([\s\S]*?)\}\}/g, m;
    while ((m = re.exec(wt)) !== null) {
      var block = m[1], f = {}, lr = /\|\s*([\w_]+)\s*=\s*([\s\S]*?)(?=\n\||\n\}\}|$)/g, lm;
      while ((lm = lr.exec(block)) !== null) f[lm[1].trim()] = lm[2].trim();
      if (f.id) out.push({ id:f.id, author:f.author||'अतिथि', ts:f.timestamp||'', quote:f.quote||'', text:f.text||'' });
    }
    return out;
  }

  // ════════════════════════════════════════════════════════════════════
  // BOOKMARK FLOW
  // ════════════════════════════════════════════════════════════════════

  function openBookmarkComposer() {
    hideFab();
    positionComposer( $bmComposer );
    $bmComposer.addClass('gra-composer-visible');
    setTimeout( function() { $bmInput.focus(); }, isMobile() ? 300 : 0 );
  }

  function closeBookmarkComposer() {
    $bmComposer.removeClass('gra-composer-visible');
    $bmInput.val('');
    _selRange = null; _selText = ''; _selRect = null;
  }

  function submitBookmark() {
    var name  = $bmInput.val().trim() || ('Bookmark ' + (_bookmarks.length + 1));
    var id    = uid();
    var quote = _selText.slice(0,120) + (_selText.length > 120 ? '…' : '');
    var span  = wrapSelection(id, 'gra-bookmark-highlight');
    if (span) { span.setAttribute('data-gra-id', id); span.setAttribute('data-gra-name', name); }
    _bookmarks.push({ id:id, name:name, quote:quote, ts:nowIso() });
    persistBookmarks();
    renderBookmarkCards();
    closeBookmarkComposer();
    openPanel('bookmarks');
  }

  function deleteBookmark( id ) {
    _bookmarks = _bookmarks.filter(function(b){ return b.id !== id; });
    var span = document.querySelector('[data-gra-id="'+id+'"].gra-bookmark-highlight');
    if (span) {
      var parent = span.parentNode;
      while (span.firstChild) parent.insertBefore(span.firstChild, span);
      parent.removeChild(span);
    }
    persistBookmarks(); renderBookmarkCards();
  }

  function persistBookmarks() {
    try { localStorage.setItem(BM_LS_KEY, JSON.stringify(_bookmarks)); } catch(e){}
  }
  function loadBookmarks() {
    try { var r = localStorage.getItem(BM_LS_KEY); if (r) _bookmarks = JSON.parse(r)||[]; } catch(e){}
  }

  // ════════════════════════════════════════════════════════════════════
  // PANEL
  // ════════════════════════════════════════════════════════════════════

  function openPanel(tab) {
    _activeTab = tab || _activeTab;
    switchTab(_activeTab);
    $panel.addClass('gra-panel-open');
    $backdrop.addClass('gra-backdrop-visible');
  }
  function closePanel() {
    $panel.removeClass('gra-panel-open');
    $backdrop.removeClass('gra-backdrop-visible');
  }
  function switchTab(tab) {
    _activeTab = tab;
    $tabComments.toggleClass('gra-tab-active', tab==='comments');
    $tabBookmarks.toggleClass('gra-tab-active', tab==='bookmarks');
    $paneComments.toggleClass('gra-pane-active', tab==='comments');
    $paneBookmarks.toggleClass('gra-pane-active', tab==='bookmarks');
    if (tab==='comments') loadComments(function(){ renderCommentCards(); });
    else renderBookmarkCards();
  }

  // ════════════════════════════════════════════════════════════════════
  // RENDER CARDS
  // ════════════════════════════════════════════════════════════════════

  function renderCommentCards() {
    if (!_comments.length) {
      $paneComments.html('<div class="gra-empty-state">No comments yet.<br>Select text and click 💬 to add one.</div>');
      return;
    }
    var html = '';
    _comments.slice().reverse().forEach(function(c){
      html += '<div class="gra-comment-card" data-gra-id="' + esc(c.id) + '">'
            + '<div class="gra-card-header">'
            + '<div class="gra-avatar">' + esc((c.author||'?').charAt(0).toUpperCase()) + '</div>'
            + '<div class="gra-card-meta">'
            + '<div class="gra-card-author">' + esc(c.author) + '</div>'
            + (c.ts ? '<div class="gra-card-ts">' + esc(fmtTs(c.ts)) + '</div>' : '')
            + '</div></div>'
            + (c.quote ? '<div class="gra-card-quote">' + esc(c.quote) + '</div>' : '')
            + '<div class="gra-card-text">' + esc(c.text) + '</div>'
            + '</div>';
    });
    $paneComments.html(html);
  }

  function renderBookmarkCards() {
    if (!_bookmarks.length) {
      $paneBookmarks.html('<div class="gra-empty-state">No bookmarks yet.<br>Select text and click 🔖 to save one.</div>');
      return;
    }
    var html = '';
    _bookmarks.slice().reverse().forEach(function(b){
      html += '<div class="gra-bookmark-card" data-gra-id="' + esc(b.id) + '">'
            + '<span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>'
            + '<div class="gra-bookmark-info">'
            + '<div class="gra-bookmark-name">' + esc(b.name) + '</div>'
            + (b.quote ? '<div class="gra-bookmark-quote">' + esc(b.quote) + '</div>' : '')
            + '</div>'
            + '<button class="gra-bookmark-del" data-del-id="' + esc(b.id) + '" title="Remove">×</button>'
            + '</div>';
    });
    $paneBookmarks.html(html);
  }

  // ════════════════════════════════════════════════════════════════════
  // SCROLL TO HIGHLIGHT
  // ════════════════════════════════════════════════════════════════════

  function scrollToHighlight(id) {
    var el = document.querySelector('[data-gra-id="' + id + '"]');
    if (!el) return;
    el.scrollIntoView({ behavior:'smooth', block:'center' });
    el.classList.add('gra-hl-active');
    setTimeout(function(){ el.classList.remove('gra-hl-active'); }, 2000);
  }

  // ════════════════════════════════════════════════════════════════════
  // EVENT WIRING  (desktop + mobile)
  // ════════════════════════════════════════════════════════════════════

  function wireEvents() {

    // ── Desktop: mouseup / keyup ──────────────────────────────────
    $( document ).on('mouseup keyup', function(e){
      if ( e.type === 'mouseup' && e.button !== 0 ) return;  // left-click only
      setTimeout( tryShowFab, 20 );
    });

    // ── Mobile: selectionchange (iOS + Android) ───────────────────
    // 'selectionchange' fires continuously while user drags selection handles.
    // We debounce it and only act after the user has stopped for 400ms.
    var _selChangeTimer = null;
    document.addEventListener('selectionchange', function() {
      _selVersion++;
      clearTimeout( _selChangeTimer );
      var v = _selVersion;
      _selChangeTimer = setTimeout(function(){
        // Only trigger if this is still the latest selectionchange
        if ( v !== _selVersion ) return;
        if ( _fabSelVer === v ) return;  // already showed FAB for this selection
        tryShowFab();
      }, 400);
    });

    // ── Mobile: touchend fallback (catch tap-to-end-selection) ────
    document.addEventListener('touchend', function(e){
      // Don't fire if tapping the FAB itself
      if ( $fab[0] && $fab[0].contains(e.target) ) return;
      if ( $cmpComposer[0] && $cmpComposer[0].contains(e.target) ) return;
      if ( $bmComposer[0]  && $bmComposer[0].contains(e.target)  ) return;
      // Small delay — browser settles selection after touchend
      setTimeout( tryShowFab, 80 );
    }, { passive: true });

    // ── Click outside → hide FAB ──────────────────────────────────
    $( document ).on('mousedown touchstart', function(e){
      var t = e.target;
      if ( $fab[0] && $fab[0].contains(t) ) return;
      if ( $cmpComposer[0] && $cmpComposer[0].contains(t) ) return;
      if ( $bmComposer[0]  && $bmComposer[0].contains(t)  ) return;
      hideFab();
    });

    // ── FAB buttons ───────────────────────────────────────────────
    $( '#gra-fab-comment' ).on('click touchend', function(e){
      e.preventDefault(); e.stopPropagation();
      // Re-capture in case selection was cleared by the tap
      if ( !_selRange && !captureSelection() ) return;
      openCommentComposer();
    });
    $( '#gra-fab-bookmark' ).on('click touchend', function(e){
      e.preventDefault(); e.stopPropagation();
      if ( !_selRange && !captureSelection() ) return;
      openBookmarkComposer();
    });

    // ── Comment composer ──────────────────────────────────────────
    $cmpInput.on('input', function(){
      $cmpSubmit.prop('disabled', !$( this ).val().trim());
    });
    $( '#gra-cmp-cancel' ).on('click', function(){ closeCommentComposer(); hideFab(); });
    $cmpSubmit.on('click', submitComment);
    $cmpInput.on('keydown', function(e){
      if ((e.ctrlKey||e.metaKey) && e.key==='Enter') submitComment();
      if (e.key==='Escape') { closeCommentComposer(); hideFab(); }
    });

    // ── Bookmark composer ─────────────────────────────────────────
    $( '#gra-bm-cancel' ).on('click', function(){ closeBookmarkComposer(); hideFab(); });
    $bmSubmit.on('click', submitBookmark);
    $bmInput.on('keydown', function(e){
      if (e.key==='Enter') submitBookmark();
      if (e.key==='Escape') { closeBookmarkComposer(); hideFab(); }
    });

    // ── Panel ─────────────────────────────────────────────────────
    $( '#gra-panel-close' ).on('click', closePanel);
    $backdrop.on('click touchstart', closePanel);
    $tabComments.on('click', function(){ switchTab('comments'); });
    $tabBookmarks.on('click', function(){ switchTab('bookmarks'); });

    // Click comment card → scroll to highlight
    $paneComments.on('click', '.gra-comment-card', function(){
      var id = $( this ).attr('data-gra-id');
      if (id) { closePanel(); scrollToHighlight(id); }
    });
    // Click bookmark card → scroll
    $paneBookmarks.on('click', '.gra-bookmark-card', function(e){
      if ($( e.target ).hasClass('gra-bookmark-del')) return;
      var id = $( this ).attr('data-gra-id');
      if (id) { closePanel(); scrollToHighlight(id); }
    });
    // Delete bookmark
    $paneBookmarks.on('click', '.gra-bookmark-del', function(e){
      e.stopPropagation();
      var id = $( this ).attr('data-del-id');
      if (id) deleteBookmark(id);
    });

    // Highlight in text → open panel
    $( CONTENT_SEL ).on('click', '.gra-comment-highlight', function(){
      var id = $( this ).attr('data-gra-id');
      openPanel('comments');
      setTimeout(function(){
        var $card = $paneComments.find('[data-gra-id="'+id+'"]');
        if ($card.length) {
          $card.addClass('gra-card-active');
          $card[0].scrollIntoView({behavior:'smooth', block:'nearest'});
          setTimeout(function(){ $card.removeClass('gra-card-active'); }, 2000);
        }
      }, 100);
    });
    $( CONTENT_SEL ).on('click', '.gra-bookmark-highlight', function(){
      var id = $( this ).attr('data-gra-id');
      openPanel('bookmarks');
      setTimeout(function(){
        var $card = $paneBookmarks.find('[data-gra-id="'+id+'"]');
        if ($card.length) $card[0].scrollIntoView({behavior:'smooth', block:'nearest'});
      }, 100);
    });

    // Escape
    $( document ).on('keydown', function(e){
      if (e.key !== 'Escape') return;
      if ($cmpComposer.hasClass('gra-composer-visible')) { closeCommentComposer(); hideFab(); }
      else if ($bmComposer.hasClass('gra-composer-visible')) { closeBookmarkComposer(); hideFab(); }
      else closePanel();
    });
  }

  // ════════════════════════════════════════════════════════════════════
  // RESTORE HIGHLIGHTS on page reload
  // ════════════════════════════════════════════════════════════════════

  function persistCommentHighlight(id, quote) {
    try {
      var s = JSON.parse(localStorage.getItem(CMT_LS_KEY)||'[]');
      s = s.filter(function(h){ return h.id !== id; });
      s.push({id:id, quote:quote});
      localStorage.setItem(CMT_LS_KEY, JSON.stringify(s));
    } catch(e){}
  }

  function restoreCommentHighlights() {
    var s = [];
    try { s = JSON.parse(localStorage.getItem(CMT_LS_KEY)||'[]'); } catch(e){}
    s.forEach(function(h){
      if (!h.quote || !h.id) return;
      if (document.querySelector('[data-gra-id="'+h.id+'"].gra-comment-highlight')) return;
      var needle = h.quote.replace(/…$/,'').trim().slice(0,80);
      if (!needle) return;
      var range = findTextInContent(document.querySelector(CONTENT_SEL), needle);
      if (range) {
        var sp = document.createElement('span');
        sp.className = 'gra-comment-highlight';
        sp.setAttribute('data-gra-id', h.id);
        try { range.surroundContents(sp); } catch(e){}
      }
    });
  }

  function restoreBookmarkHighlights() {
    _bookmarks.forEach(function(b){
      if (!b.quote) return;
      if (document.querySelector('[data-gra-id="'+b.id+'"].gra-bookmark-highlight')) return;
      var needle = b.quote.replace(/…$/,'').trim().slice(0,60);
      if (!needle) return;
      var found = findTextInContent(document.querySelector(CONTENT_SEL), needle);
      if (found) {
        var sp = document.createElement('span');
        sp.className = 'gra-bookmark-highlight';
        sp.setAttribute('data-gra-id', b.id);
        sp.setAttribute('data-gra-name', b.name);
        try { found.surroundContents(sp); } catch(e){}
      }
    });
  }

  function findTextInContent(root, needle) {
    if (!root) return null;
    var text = root.textContent || '';
    var idx  = text.indexOf(needle);
    if (idx < 0) return null;
    var iter = document.createNodeIterator(root, NodeFilter.SHOW_TEXT, null, false);
    var pos = 0, node, startNode, startOffset, endNode, endOffset;
    while ((node = iter.nextNode())) {
      var len = node.nodeValue.length;
      if (!startNode && pos + len > idx) { startNode = node; startOffset = idx - pos; }
      var endIdx = idx + needle.length;
      if (startNode && pos + len >= endIdx) { endNode = node; endOffset = endIdx - pos; break; }
      pos += len;
    }
    if (!startNode || !endNode) return null;
    var r = document.createRange();
    r.setStart(startNode, startOffset);
    r.setEnd(endNode, endOffset);
    return r;
  }

  // ════════════════════════════════════════════════════════════════════
  // BOOT
  // ════════════════════════════════════════════════════════════════════

  $( function () {
    buildDom();
    wireEvents();
    loadBookmarks();
    restoreBookmarkHighlights();
    restoreCommentHighlights();
    loadComments(function(){});  // pre-load comments in background
  });

}() );