MediaWiki:Gadget-GrAnnotations.js: Difference between revisions

(67 intermediate revisions by 2 users not shown)

Line 1:

/**

* gr_annotations.js — grantha.io inline ~~Comments~~ + Bookmarks

* gr_annotations.js — grantha.io inline Notes + Bookmarks + Footnotes + Feedback (v6 + Strategy B + Footnotes tab)

* ══════════════════════════════════════════════════════════════════════

*

* BEHAVIOUR (~~mirrors Google Docs)~~

* ────────────────────────────────

* 1. User selects text anywhere in mw-content-text.

* 2. A floating action strip (FAB) appears to the right of the selection

* with two icon buttons: Comment and Bookmark.

* 3. Clicking Comment:

* - Opens an inline composer card anchored to the selection position.

* - On submit: wraps the selected text in a yellow highlight span,

* saves the comment to <PageTitle>/Comments via MW edit API,

* posts a notification to the admin user talk page,

* and adds a card to the Comments tab ~~of the right panel.~~

* 4. Clicking Bookmark:

* - Opens a small composer to name the bookmark.

* - On submit: wraps selected text in a blue highlight span,

* saves bookmark in localStorage (per-user, per-page),

* and adds a card to the Bookmarks tab.

* - Clicking a bookmark card scrolls to and flashes that highlight.

* 5. Right panel:

* - Slides in from the right as an overlay (no layout shift).

* - Tab 1: Comments (loads from /Comments wiki page)

* - Tab 2: Bookmarks (loads from localStorage)

* - Panel can be closed via ✕ or clicking the backdrop.

* 6. Clicking any comment/bookmark highlight in the text:

* - Opens the panel to the correct tab and scrolls to the card.

*

* STORAGE

* ───────

* Comments → MediaWiki page: Talk:<PageTitle>/GrComments

* Talk namespace is excluded from XML/PDF exports and never

* shown in the content editor — comments cannot affect exports.

* Format: {{GrComment|id=…|author=…|timestamp=…|quote=…|text=…}}

* Bookmarks → localStorage (per-user, per-page — not shared across users)

* Key: grantha_bm_<pageName>

*

* ADMIN NOTIFICATION

* ──────────────────

* On new comment: sends email via MW EmailUser API (action=emailuser).

* Email contains the comment text and a direct anchor link to the passage.

* Fallback: if admin has no email set, posts to User_talk:ADMIN_USER instead.

* Requires $wgEnableEmail = true and $wgEnableUserEmail = true (MW defaults).

*

* DEPENDENCIES

* ────────────

* • jQuery (loaded by MediaWiki)

* • mw.Api (MediaWiki core)

* • gr_annotations.css (companion stylesheet)

* • /images/commentary.svg, /images/bookmark.svg (Hostinger)

*

* DEPLOY

* ──────

* Add both files to MediaWiki:Common.css / Common.js, or register as

* a gadget in MediaWiki:Gadgets-definition:

* GrAnnotations[ResourceLoader|default]|gr_annotations.js|gr_annotations.css

* ══════════════════════════════════════════════════════════════════════

*/

Line 63:

Line 7:

'use strict';

~~// ── Configuration ────────────────────────────────────────────────────~~

var CONTENT_SEL = '#mw-content-text';

var ~~ADMIN_USER = 'GranthaGate'; // MW username for talk-page fallback~~

var BM_LS_KEY = 'grantha_bm_' + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );

~~var ADMIN_EMAIL = 'admin@grantha.io'; // ← set your email here directly~~

var NT_LS_KEY = 'grantha_nt_' + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );

~~var CONTENT_SEL~~ = '#mw-content-text';

// Writes that have not reached the server yet. Scoped per user and per

var BM_LS_KEY = 'grantha_bm_' + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );

// page where it is built: the keys above are per page, and a shared

var ~~CMT_LS_KEY~~ = '~~grantha_cmt_~~' + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );

// machine has more than one user.

var pageTitle = ( window.mw && mw.config.get( 'wgPageName' ) ) || '';

var Q_LS_KEY = 'grantha_q_v1';

~~/* Comments stored on Talk:<PageTitle>/GrComments — talk namespace is~~

var pageTitle = ( window.mw && mw.config.get( 'wgPageName' ) ) || '';

* excluded from XML/PDF exports and never shown in the content editor,

var currentUser = ( window.mw && mw.config.get( 'wgUserName' ) ) || '';

* so comments cannot tamper with document content or affect exports. */

var userInitial = currentUser ? currentUser.charAt( 0 ).toUpperCase() : '?';

~~var commentsPage = 'Talk:' + pageTitle + '/GrComments~~';

var currentUserEmail = '';

var currentUser = ( window.mw && mw.config.get( 'wgUserName' ) ) || '';

var userInitial = currentUser ? currentUser.charAt( 0 ).toUpperCase() : '?';

// FIXED: was `new mw.Api()` called directly and synchronously here —

// at this point in MediaWiki:Common.js's own load lifecycle,

// mediawiki.api (the module that provides the REAL mw.Api

// constructor) is not guaranteed to have finished loading yet, and

// calling the constructor before it has throws "mw.Api is not a

// constructor" synchronously. Confirmed directly via the real error

// trace, and confirmed this is pre-existing code, not anything

// introduced by the more recent Ullekha/tab changes. Uncaught here

// (the .catch below only ever handled promise rejections, never a

// synchronous throw from the constructor call itself), this would

// halt the REST of this script's own execution — meaning later code

// in this same file (the tab-building logic) may never run at all on

// whatever page load hits this race. mw.loader.using() guarantees the

// module is actually ready before mw.Api is ever touched, regardless

// of load timing. Verified the exact failure mode and the fix

// directly before applying here.

if ( currentUser && window.mw ) {

mw.loader.using( 'mediawiki.api' ).then( function () {

return new mw.Api().get({ action: 'query', meta: 'userinfo', uiprop: 'email', formatversion: 2 });

} ).then( function (data) {

var info = data && data.query && data.query.userinfo;

if ( info && info.email ) currentUserEmail = info.email;

} ).catch( function () {} );

}

~~// Only run on content namespaces, not on the /Comments page itself~~

if ( window.mw ) {

var ns = mw.config.get( 'wgNamespaceNumber' );

if ( ns < 0 ) return;

~~if ( /\/Comments$/.test( pageTitle ) ) return;~~

}

~~// ── State ────────────────────────────────────────────────────────────~~

var _selRange = null;

~~var _sel = null; // current Selection snapshot~~

var _selText = '';

var _selRange = null; ~~// saved Range for wrapping~~

var _selRect = null;

var _selText = ''; ~~// selected text string~~

var _notes = [];

var _selRect = null; ~~// bounding rect of selection~~

var _bookmarks = [];

var ~~_comments~~ = []; ~~// [{id, anchor, author, ts, quote, text}]~~

var _activeTab = 'notes';

var _bookmarks = []; ~~// [{id, name, quote, anchorHtml, ts}]~~

var _selVersion = 0;

var ~~_cmtLoaded~~ = ~~false~~;

var _fabSelVer = -1;

var ~~_activeTab~~ = '~~comments~~'; // ~~'comments' | 'bookmarks'~~

var _mobile = window.innerWidth < 768 || 'ontouchstart' in window;

var _fabTouched = false; // flag to prevent hideActions when tapping fab

~~// ── Helpers ──────────────────────────────────────────────────────────~~

function uid() { return 'gra_' + Date.now() + '_' + Math.random().toString(36).slice(2,7); }

function uid() {

function esc(s) {

return 'gra_' + Date.now() + '_' + Math.random().toString(36).slice(2,7);

return String(s||'').replace(/&/g,'&').replace(/</g,'<')

.replace(/>/g,'>').replace(/"/g,'"');

}

~~function esc( s ) {~~

function nowIso() { return new Date().toISOString().replace(/\.\d{3}Z$/,'Z'); }

~~return String( s || '' )~~

function fmtTs(ts) {

~~.replace(/&/g,'&').replace(/</g,'<')~~

~~.replace(/>/g,'>').replace(/"/g,'"');~~

}

function nowIso() {

return new Date().toISOString().replace(/\.\d{3}Z$/,'Z');

}

function fmtTs( ts ) {

try {

var d = new Date( ts );

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( ~~val~~, ~~min~~, ~~max~~ ) { return Math.max(~~min~~, Math.min(~~max~~, ~~val~~)); }

function clamp(v,lo,hi){ return Math.max(lo,Math.min(hi,v)); }

function isMobile() { return _mobile; }

// The server caps a note at 8192 *bytes* (MAX_TEXT_BYTES), and Devanagari

// runs three bytes to the character, so the real limit is about 2,700

// characters — reachable for the kind of thing people write here. Caught

// at the composer, because the alternative is a note that looks saved,

// sits in the panel all session, and is simply absent the next time the

// page is opened.

var MAX_NOTE_BYTES = 8192;

function byteLength(s) {

try { return new TextEncoder().encode(s).length; }

catch (e) { return unescape(encodeURIComponent(s)).length; }

}

/* ══════════════════════ Store ══════════════════════

* Notes and bookmarks live in the wiki database, in gr_annotations, via

* the GranthaAnnotations extension — which is what lets the same notes

* show up in the mobile app. They used to live only in localStorage, so

* they were stranded in one browser.

*

* localStorage does not go away; it changes job. It is now

* · a cache, so a reload paints the panel instantly instead of waiting

* on the network, and a page read offline still shows notes

* · an outbox mirror, so a write made while offline survives a reload

* The database is the record. The browser is a convenience in front of it.

*

* Anonymous readers have no database row to own, and the API refuses them

* outright, so for them localStorage stays the store exactly as before.

* Every write is optimistic: memory and cache update first, the panel

* re-renders immediately, and the request follows.

*/

var Store = ( function () {

var loggedIn = !!currentUser;

// Rejections the server will never change its mind about. Anything not

// listed here is treated as temporary and retried.

var TERMINAL = { badid: 1, notowner: 1, texttoolong: 1, missingparam: 1 };

var _api = null;

var flushing = null; // the in-flight flush's promise, or null

var outbox = []; // authoritative in memory; mirrored to LS

// mw.Api only exists once mediawiki.api has loaded, and asking for it

// sooner throws. Everything that talks to the server waits on this, so a

// load failure degrades to cache-and-queue instead of throwing.

function ready() {

if ( !window.mw || !mw.loader ) return $.Deferred().reject().promise();

return mw.loader.using( 'mediawiki.api' ).then( function () {

if ( !_api ) _api = new mw.Api();

return _api;

} );

}

function ls( k, v ) {

try {

if ( v === undefined ) return localStorage.getItem( k );

localStorage.setItem( k, v );

return true;

} catch ( e ) { return null; }

}

function readJson( k, fallback ) {

try { return JSON.parse( ls( k ) || '' ) || fallback; } catch ( e ) { return fallback; }

}

function whoami() { return currentUser || null; }

/* ── Outbox ──────────────────────────────────────────────────────

* Held in memory and mirrored to localStorage, not held *in* it. A

* browser that refuses to store — private mode, quota, policy — used to

* mean the write was never sent at all, because the send re-read the

* queue it had just failed to write. Now storage only decides whether an

* unsent write survives a reload.

*

* Keyed per user AND per page: the cache keys have always been per page,

* so a queue scoped only by user cannot describe them. */

function qKey() { return Q_LS_KEY + '_' + ( currentUser || 'anon' ) + '_' + pageTitle; }

function mirror() { ls( qKey(), JSON.stringify( outbox ) ); }

function enqueue( op ) {

// One pending operation per annotation. A note edited twice before the

// network returns should send its final state once, not both states in

// order, and a delete supersedes any save still waiting behind it.

outbox = outbox.filter( function ( x ) { return x.id !== op.id; } );

outbox.push( op );

mirror();

}

// Removes the exact operation that was sent, by identity. Matching on

// id and op instead would let a completing send delete a *newer*

// operation for the same annotation that replaced it mid-flight.

function dequeue( op ) {

var i = outbox.indexOf( op );

if ( i === -1 ) return;

outbox.splice( i, 1 );

mirror();

}

function send( op ) {

var params = { action: 'granthaannotationedit', op: op.op, id: op.id, format: 'json' };

if ( op.op === 'save' ) {

params.page = op.page;

params.type = op.type;

params.quote = op.quote || '';

params.text = op.text || '';

if ( op.ts ) params.ts = op.ts;

}

return ready().then( function ( a ) { return a.postWithToken( 'csrf', params ); } );

}

/* Drain the outbox oldest-first, stopping at the first failure so

* ordering is preserved and a server that is down is not hammered. */

function flush() {

if ( !loggedIn ) return $.Deferred().resolve().promise();

// Return the flush already running rather than a fresh resolved

// promise: load() waits on this before reading, and handing it an

// instantly-resolved promise would let the read race the writes.

if ( flushing ) return flushing;

if ( !outbox.length ) return $.Deferred().resolve().promise();

var d = $.Deferred();

flushing = d.promise();

( function step() {

if ( !outbox.length ) { flushing = null; d.resolve(); return; }

var op = outbox[ 0 ];

send( op ).done( function () {

dequeue( op );

// Guard against a queue that cannot shrink, which would loop

// re-POSTing the same row for ever. Checked by identity, not by

// length: a note written while this request was in flight makes

// the queue longer, and comparing lengths stopped the drain with

// that newer write still unsent.

if ( outbox.indexOf( op ) !== -1 ) { flushing = null; d.resolve(); return; }

step();

} ).fail( function ( code ) {

// Verdicts the server will never change its mind about. Left at

// the head of the queue they block every later write on this page

// for ever, so they are dropped and the drain carries on.

if ( TERMINAL[ code ] ) {

dequeue( op );

step();

return;

}

// Anything else — offline, 5xx, session expired — is temporary.

// Stop here so ordering is kept and a struggling server is not

// hammered; the next write, `online`, or page load retries.

flushing = null;

d.resolve();

} );

}() );

return flushing;

}

function write( op ) {

if ( !loggedIn ) return; // nothing to send, and nothing to accumulate

enqueue( op );

flush();

}

/* ── public ────────────────────────────────────────────────────── */

/* What has been written locally since the last answer from the server.

* The outbox alone is not enough to reconcile with: a note written while

* the initial read was in flight may well have finished its own POST

* first, and would then be gone from the outbox by the time the older

* answer arrives — which would take it off the screen and out of the

* cache. These two maps outlive the outbox entry and are cleared only

* when a read has actually been folded in. */

var localSaves = {}, localDeletes = {};

function save( type, rec ) {

localSaves[ rec.id ] = { type: type, rec: rec };

delete localDeletes[ rec.id ];

write( {

op: 'save', id: rec.id, page: pageTitle, type: type,

quote: rec.quote || '', text: type === 'bookmark' ? rec.name : rec.text,

ts: rec.ts

} );

}

function remove( id ) {

localDeletes[ id ] = true;

delete localSaves[ id ];

write( { op: 'delete', id: id } );

}

/* Cache what is on screen, so the next load of this page paints from it

* before the network answers.

*

* The cache records whose it is, for both signed-in and anonymous

* readers. The keys are per page, not per user, and always have been, so

* without an owner two people sharing a machine would see each other's

* notes — and worse, the next person to sign in would have the previous

* one's notes uploaded into their account by migrate(). Recording null

* for "nobody was signed in" is what makes those two cases tellable

* apart from genuinely pre-upgrade data. */

function cache() {

ls( NT_LS_KEY, JSON.stringify( { u: whoami(), v: _notes } ) );

ls( BM_LS_KEY, JSON.stringify( { u: whoami(), v: _bookmarks } ) );

}

function cached( key ) {

var raw = readJson( key, null );

if ( !raw ) return [];

// A bare array predates this version; only migrate() may claim it.

if ( Array.isArray( raw ) ) return [];

return ( raw.u === whoami() && Array.isArray( raw.v ) ) ? raw.v : [];

}

// ── ~~DOM references~~ (~~populated~~ in ~~boot~~) ~~───────────────────────────────~~

function fromCache() {

var $fab, $panel, $backdrop~~, $panelBody~~;

_notes = cached( NT_LS_KEY );

var $~~cmpComposer~~, $~~cmpInput~~, $~~cmpSubmit~~;

_bookmarks = cached( BM_LS_KEY );

}

/* ── Claiming ────────────────────────────────────────────────────

* Hands over whatever this browser holds with no owner: the bare array

* the old gadget wrote, and the anonymous cache this one writes. Both

* mean "notes taken on this browser with nobody signed in", which is

* what a reader who browsed logged out and then registered has.

*

* There is no "already migrated" flag, deliberately. A flag has to be

* scoped, and every scoping is wrong somewhere: per user alone marked

* every page but the first as done; per user and page was set on the

* first visit even when there was nothing to hand over, so notes taken

* anonymously *afterwards* could never be claimed and were overwritten

* on the next sign-in.

*

* What actually marks the job done is cache(), which replaces the

* ownerless value under the same key with an owned one. After a claim

* there is nothing left to claim, so a note deleted later on another

* device cannot be resurrected by a stale array — and if the browser

* refuses to store, re-claiming is harmless anyway, because the ids are

* unchanged and the server's save is an upsert. */

/* What a signing-in user may claim as their own: the bare array the old

* gadget wrote, and the anonymous cache this one writes. Both mean "this

* browser's notes, with nobody signed in" — which is what someone who

* read logged out and then registered has. Without the second case,

* signing in read them as unclaimable, then overwrote them with the

* server's empty answer and they were gone for good. */

function legacy( key ) {

var raw = readJson( key, null );

if ( Array.isArray( raw ) ) return raw;

if ( raw && raw.u === null && Array.isArray( raw.v ) ) return raw.v;

return [];

}

function migrate() {

if ( !loggedIn ) return false;

var found = false;

legacy( NT_LS_KEY ).forEach( function ( n ) {

if ( !n || !n.id ) return;

// The old gadget imposed no length limit, so a note from before the

// upgrade can be past what the server accepts. Left in, it would sit

// at the head of the queue; dropped here, it stays on screen and in

// the cache, just not synced.

if ( byteLength( n.text || '' ) > MAX_NOTE_BYTES ) return;

found = true;

enqueue( { op: 'save', id: n.id, page: pageTitle, type: 'note',

quote: n.quote || '', text: n.text || '', ts: n.ts } );

} );

legacy( BM_LS_KEY ).forEach( function ( b ) {

if ( !b || !b.id ) return;

found = true;

enqueue( { op: 'save', id: b.id, page: pageTitle, type: 'bookmark',

quote: b.quote || '', text: b.name || '', ts: b.ts } );

} );

return found;

}

/* ── Reconciliation ──────────────────────────────────────────────

* The server's answer describes the moment the request was sent. A note

* written while it was in the air, or a delete, is in the outbox and not

* in that answer — replacing state wholesale would take it off the

* screen and out of the cache, and the reader would watch their note

* disappear. So anything still pending is re-applied on top. */

function reconcile( notes, marks ) {

function apply( list, type ) {

var out = list.filter( function ( r ) {

return !localDeletes[ r.id ] && !localSaves[ r.id ];

} );

Object.keys( localSaves ).forEach( function ( id ) {

var s = localSaves[ id ];

if ( s.type === type ) out.push( s.rec );

} );

return out;

}

return { notes: apply( notes, 'note' ), marks: apply( marks, 'bookmark' ) };

}

/* Fill _notes and _bookmarks. The cache is in place synchronously so the

* first paint is instant; the server's answer lands later. */

function load() {

outbox = readJson( qKey(), [] );

if ( !Array.isArray( outbox ) ) outbox = [];

if ( !loggedIn ) {

// localStorage is the store, not a cache. Accept the owner-stamped

// shape and, once, the bare array the old gadget wrote.

_notes = cached( NT_LS_KEY );

_bookmarks = cached( BM_LS_KEY );

if ( !_notes.length ) _notes = legacy( NT_LS_KEY );

if ( !_bookmarks.length ) _bookmarks = legacy( BM_LS_KEY );

return $.Deferred().resolve( false ).promise();

}

if ( migrate() ) {

// Show what this browser already had straight away. migrate() has

// just claimed it for whoever is signed in now, so what is on screen

// and what is being sent up are the same set — and a first run that

// happens to be offline still shows the reader their notes rather

// than an empty panel.

_notes = legacy( NT_LS_KEY );

_bookmarks = legacy( BM_LS_KEY );

cache();

} else {

fromCache();

}

var d = $.Deferred();

var rows = [];

// 500 is the server's maximum page size, and it orders newest first —

// so a reader with more than that on one page would silently lose

// their *oldest* annotations from the panel and from the cache.

// Follow the continuation until it stops rather than assuming nobody

// will get there.

function fetchFrom( offset ) {

return ready().then( function ( a ) {

var params = {

action: 'granthaannotations', page: pageTitle,

limit: 500, formatversion: 2, format: 'json'

};

if ( offset ) params[ 'continue' ] = offset;

return a.get( params );

} ).then( function ( data ) {

var block = data && data.granthaannotations;

var got = block && block.annotations;

if ( Array.isArray( got ) ) rows = rows.concat( got );

// The module reports its own continuation, inside its own result.

var next = block && block[ 'continue' ];

// Guard against a server that keeps handing back the same offset.

if ( next !== undefined && next !== null && String( next ) !== String( offset ) &&

rows.length < 5000 ) {

return fetchFrom( next );

}

return rows;

} );

}

flush().always( function () {

fetchFrom( null ).done( function () {

var notes = [], marks = [];

rows.forEach( function ( r ) {

if ( r.type === 'bookmark' ) {

marks.push( { id: r.id, name: r.text, quote: r.quote, ts: r.ts } );

} else {

notes.push( { id: r.id, ts: r.ts, quote: r.quote, text: r.text } );

}

} );

// The server returns newest first; the panel reverses for display,

// so hold them oldest-first the way the local arrays always were.

var merged = reconcile( notes.reverse(), marks.reverse() );

_notes = merged.notes;

_bookmarks = merged.marks;

// Folded in, so the local record of what has changed since can

// start again. Anything still unsent stays in the outbox.

localSaves = {}; localDeletes = {};

cache();

d.resolve( true );

} ).fail( function () {

// Offline, or the extension is not installed. The cache already

// loaded, and anything written meanwhile is queued.

d.resolve( false );

} );

return d.promise();

}

if ( loggedIn && window.addEventListener ) {

window.addEventListener( 'online', function () { flush(); } );

}

return { load: load, save: save, remove: remove, cache: cache, flush: flush,

isRemote: function () { return loggedIn; } };

}() );

var $fab, $mobileBar, $panel, $backdrop;

var $ntComposer, $ntInput, $ntSubmit;

var $bmComposer, $bmInput, $bmSubmit;

var $~~tabComments~~, $~~tabBookmarks~~;

var $fbComposer, $fbIssueType, $fbText, $fbEmail, $fbSubmit, $fbQuote;

~~var~~ $~~paneComments~~, $~~paneBookmarks;~~

// CHANGED: added $tabFootnotes / $paneFootnotes alongside the existing

// Notes/Bookmarks tab+pane refs, for the Footnotes tab. REMOVED: the

// ════════════════════════════════════════════════════════════════════

// earlier $tabSandarbha/$paneSandarbha — that feature was replaced by

// ~~DOM BUILDER~~

// the real Ullekha citation-index mechanism (see quickedit.js), which

// ════════════════════════════════════════════════════════════════════

// works entirely through common.js's own site-wide logic and needs no

// panel integration here at all.

var $tabNotes, $tabBookmarks, $tabFootnotes, $paneNotes, $paneBookmarks, $paneFootnotes;

function buildDom() {

~~// ── Floating action strip ────────────────────────────────────────~~

$fab = $( [

'<div id="gra-fab">',

'<div id="gra-fab" role="toolbar" aria-label="Feedback / Notes / Bookmark">',

' <button class="gra-fab-btn" id="gra-fab-~~comment~~" type="button">',

' <button class="gra-fab-btn" id="gra-fab-note" type="button" aria-label="Note">',

' <span class="gra-icon gra-icon-~~comment~~"></span>',

' <span class="gra-icon gra-icon-note" aria-hidden="true"></span>',

' <span class="gra-fab-~~tooltip~~">~~Add comment~~</span>',

' <span class="gra-fab-btn-label">Note</span>',

' </button>',

' <button class="gra-fab-btn" id="gra-fab-bookmark" type="button" aria-label="Mark">',

' <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',

' <span class="gra-fab-btn-label">Mark</span>',

' </button>',

' <button class="gra-fab-btn" id="gra-fab-feedback" type="button" aria-label="Feedback">',

' <span class="gra-icon gra-icon-feedback" aria-hidden="true"></span>',

' <span class="gra-fab-btn-label">Feedback</span>',

' </button>',

' <button class="gra-fab-btn" id="gra-fab-search" type="button" aria-label="Search">',

' <span class="gra-icon gra-icon-search" aria-hidden="true"></span>',

' <span class="gra-fab-btn-label">Search</span>',

' </button>',

' <button class="gra-fab-btn" id="gra-fab-~~bookmark~~" type="button">',

' <button class="gra-fab-btn gra-fab-btn-dismiss" id="gra-fab-dismiss" type="button" aria-label="Dismiss">',

' <span class="gra-icon gra-icon-~~bookmark~~"></span>',

' <span class="gra-icon gra-icon-dismiss" aria-hidden="true"></span>',

' <span class="gra-fab-~~tooltip~~">~~Bookmark~~</span>',

' <span class="gra-fab-btn-label">Close</span>',

' </button>',

'</div>',

].join('') );

$( 'body' ).append( $fab );

$('body').append($fab);

$mobileBar = $('<div id="gra-mobile-bar"></div>');

$('body').append($mobileBar);

// ~~── Comment~~ composer ~~card ────────────────────────────────────────~~

$fbComposer = $( [

$~~cmpComposer~~ = $( [

'<div class="gra-composer" id="gra-fb-composer" role="dialog" aria-label="Send feedback">',

'<div class="gra-composer" id="gra-~~cmp~~-composer">',

' <div class="gra-composer-header">',

' <span class="gra-icon gra-icon-feedback" aria-hidden="true"></span>',

' <strong>Feedback</strong>',

' <button class="gra-btn-x" id="gra-fb-close" title="Close">✕</button>',

' </div>',

' <div class="gra-fb-quote-label">Selected text:</div>',

' <div class="gra-fb-quote" id="gra-fb-quote"></div>',

' <div class="gra-fb-field-label">Issue type</div>',

' <select class="gra-fb-select" id="gra-fb-issue">',

' <option value="">— Choose —</option>',

' <option value="wrong_text">Formatting error</option>',

' <option value="reference_issue">Reference issue</option>',

' <option value="spelling_mistake">Spelling mistake</option>',

' <option value="other">Other</option>',

' </select>',

' <div class="gra-fb-field-label">Details (optional)</div>',

' <textarea class="gra-composer-input" id="gra-fb-text" placeholder="Describe the issue…" rows="3"></textarea>',

' <div class="gra-fb-field-label">Your email (optional)</div>',

' <input class="gra-composer-input gra-fb-email-input" id="gra-fb-email" type="email" placeholder="you@example.com" autocomplete="email">',

' <div class="gra-composer-actions">',

' <button class="gra-btn-cancel" id="gra-fb-cancel">Cancel</button>',

' <button class="gra-btn-submit" id="gra-fb-submit" disabled>Send</button>',

' </div>',

' <div class="gra-fb-status" id="gra-fb-status"></div>',

'</div>',

].join('') );

$('body').append($fbComposer);

$ntComposer = $( [

'<div class="gra-composer" id="gra-nt-composer" role="dialog" aria-label="Add note">',

' <div class="gra-composer-user">',

' <div class="gra~~-avatar" id="gra-cmp~~-avatar">' + esc(userInitial) + '</div>',

' <div class="gra-avatar">' + esc(currentUser ? userInitial : '✎') + '</div>',

' <div class="gra-composer-~~name" id="gra-cmp-name~~">' + esc(currentUser || '~~Anonymous~~') + '</div>',

' <div class="gra-composer-uname">' + esc(currentUser || 'Notes') + '</div>',

' </div>',

~~' <div class="gra-quick-chips" id="gra-quick-chips">',~~

' <textarea class="gra-composer-input" id="gra-nt-input" placeholder="Write a note…" rows="3"></textarea>',

~~' <button class="gra-chip" data-val="Spelling mistake" type="button">Spelling mistake</button>',~~

~~' <button class="gra-chip" data-val="Reference error" type="button">Reference error</button>',~~

~~' <button class="gra-chip" data-val="Others" type="button">Others ▾</button>',~~

~~' </div>',~~

' <textarea class="gra-composer-input" id="gra-~~cmp~~-input"',

' placeholder="~~Describe the issue…~~" rows="3~~"',~~

~~' style="display:none~~"></textarea>',

' <div class="gra-composer-actions">',

' <button class="gra-btn-cancel" id="gra-~~cmp~~-cancel">Cancel</button>',

' <button class="gra-btn-cancel" id="gra-nt-cancel">Cancel</button>',

' <button class="gra-btn-submit" id="gra-~~cmp~~-submit" disabled>~~Comment~~</button>',

' <button class="gra-btn-submit" id="gra-nt-submit" disabled>Save Note</button>',

' </div>',

'</div>',

].join('') );

$('body').append($ntComposer);

~~// ── Bookmark composer card ────────────────────────────────────────~~

$bmComposer = $( [

'<div class="gra-bm-composer" id="gra-bm-composer">',

'<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"></span>',

' <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',

' Save bookmark',

' </div>',

' <input class="gra-composer-input" id="gra-bm-input"',

' <input class="gra-composer-input" id="gra-bm-input" type="text" placeholder="Name this bookmark…" autocomplete="off">',

' type="text" placeholder="~~Bookmark name…~~" autocomplete="off">',

' <div class="gra-composer-actions">',

' <button class="gra-btn-cancel" id="gra-bm-cancel">Cancel</button>',

Line 181:

Line 554:

'</div>',

].join('') );

$( 'body' ).append( $bmComposer );

$('body').append($bmComposer);

~~// ── Right panel ───────────────────────────────────────────────────~~

$panel = $( [

'<div id="gra-panel">',

'<div id="gra-panel" role="complementary" aria-label="Notes">',

' <div id="gra-panel-head">',

' <div></div>',

' <div id="gra-panel-title"></div>',

' <button id="gra-panel-close" title="Close ~~panel~~">✕</button>',

' <button id="gra-panel-close" title="Close">✕</button>',

' </div>',

' <div id="gra-tabs">',

' <button class="gra-tab gra-tab-active" id="gra-tab-~~comments~~">',

' <button class="gra-tab gra-tab-active" id="gra-tab-notes">',

' <span class="gra-icon gra-icon-~~comment~~"></span> ~~Comments~~',

' <span class="gra-icon gra-icon-note" aria-hidden="true"></span> Notes',

' </button>',

' <button class="gra-tab" id="gra-tab-bookmarks">',

' <span class="gra-icon gra-icon-bookmark"></span> Bookmarks',

' <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span> Bookmarks',

' </button>',

' <button class="gra-tab" id="gra-tab-footnotes">',

' <span class="gra-icon gra-icon-footnote" aria-hidden="true"></span> Footnotes',

' </button>',

' </div>',

' <div id="gra-panel-body">',

' <div class="gra-pane gra-pane-active" id="gra-pane-~~comments~~"></div>',

' <div class="gra-pane gra-pane-active" id="gra-pane-notes"></div>',

' <div class="gra-pane" id="gra-pane-bookmarks"></div>',

' <div class="gra-pane" id="gra-pane-footnotes"></div>',

' </div>',

'</div>',

].join('') );

$( 'body' ).append( $panel );

$('body').append($panel);

~~// Backdrop~~

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

$backdrop = $('<div id="gra-backdrop"></div>');

$('body').append($backdrop);

$( 'body' ).append( $backdrop );

~~// Persistent toggle button — always visible, opens the panel~~

var $toggle = $( [

'<button id="gra-toggle" ~~title~~="~~Comments & Bookmarks~~">',

'<button id="gra-toggle" aria-label="Notes">',

' <span class="gra-icon gra-icon-~~comment~~" id="gra-toggle-icon"~~></span>',~~

' <span class="gra-icon gra-icon-note" id="gra-toggle-icon" aria-hidden="true"></span>',

~~' <span id~~="~~gra-toggle-badge~~"></span>',

'</button>',

].join('') );

$( 'body' ).append( $toggle );

$('body').append($toggle);

$toggle.on( 'click', function() {

$toggle.on('click', function() {

~~if (~~ $panel.hasClass('gra-panel-open') ~~) {~~

$panel.hasClass('gra-panel-open') ? closePanel() : openPanel(_activeTab);

closePanel();

});

~~} else {~~

openPanel( _activeTab );

}

} );

~~// Cache references~~

$('#gra-panel-title').text(pageTitle.replace(/_/g,' ').split('/')[0].slice(0,30));

~~$panelBody =~~ $( '#gra-panel-~~body' );~~

$tabNotes = $('#gra-tab-notes');

~~// Set panel~~ title ~~to page name~~

$tabBookmarks = $('#gra-tab-bookmarks');

$( '~~#gra-panel-head div' ).first(~~)

$tabFootnotes = $('#gra-tab-footnotes');

.text( pageTitle.replace(/_/g,' ').split('/')[0].slice(0,30) )

$paneNotes = $('#gra-pane-notes');

~~.css~~({ '~~font~~-~~size':'13px', 'font~~-~~weight~~'~~:'600', 'color':~~'#~~5a3a00~~' });

$paneBookmarks= $('#gra-pane-bookmarks');

$~~tabComments~~ = $( '#gra-tab-~~comments~~' );

$paneFootnotes= $('#gra-pane-footnotes');

$~~tabBookmarks~~ = $( '#gra-~~tab~~-~~bookmarks~~' );

$ntInput = $('#gra-nt-input');

$~~paneComments~~ = $( '#gra-pane-~~comments~~' );

$ntSubmit = $('#gra-nt-submit');

$~~paneBookmarks~~ = $( '#gra-pane-~~bookmarks~~' );

$bmInput = $('#gra-bm-input');

$~~cmpInput~~ = $( '#gra-~~cmp~~-input' );

$bmSubmit = $('#gra-bm-submit');

$~~cmpSubmit~~ = $( '#gra-~~cmp~~-submit' );

$fbIssueType = $('#gra-fb-issue');

$bmInput = $( '#gra-bm-input' );

$fbText = $('#gra-fb-text');

$bmSubmit = $( '#gra-bm-submit' );

$fbEmail = $('#gra-fb-email');

$fbSubmit = $('#gra-fb-submit');

$fbQuote = $('#gra-fb-quote');

}

~~// Disable comment submit when not logged in~~

function captureSelection() {

if ( !~~currentUser~~ ) {

var sel = window.getSelection();

~~$cmpSubmit~~.~~prop~~( '~~disabled~~'~~, true~~ );

if (!sel || sel.isCollapsed || !sel.rangeCount) return false;

~~$cmpComposer~~.~~find~~( '.~~gra~~-~~composer-actions~~' )

var range = sel.getRangeAt(0);

.~~prepend~~( ~~'<a href="' + esc~~( ~~mw ? mw~~.~~util~~.~~getUrl~~('~~Special:UserLogin~~') ~~: '/wiki/Special:UserLogin'~~ ) +

var text = sel.toString().trim();

~~'" style~~=~~"font-size:11px~~;~~color:#999~~;~~margin-right:auto">Log in to comment</a>'~~ );

if (!text || text.length < 2) return false;

}

var contentEl = document.querySelector(CONTENT_SEL);

if (!contentEl) return false;

var ancestor = range.commonAncestorContainer;

if (ancestor.nodeType === 3) ancestor = ancestor.parentNode;

if (!ancestor || !contentEl.contains(ancestor)) return false;

var _editorEl = document.getElementById('se-surface') ||

document.querySelector('.se-outer');

if ( _editorEl && _editorEl.contains(ancestor) ) return false;

if ( document.body.classList.contains('gra-editing') ) return false;

_selText = text;

_selRect = range.getBoundingClientRect();

try { _selRange = range.cloneRange(); }

catch(e){ _selRange = null; }

return true;

}

// ════════════════════════════════════════════════════════════════════

function reCaptureFromDOM() {

~~// FLOATING ACTION STRIP — position & show/hide~~

if (!_selText) return false;

// ════════════════════════════════════════════════════════════════════

var contentEl = document.querySelector(CONTENT_SEL);

if (!contentEl) return false;

var found = findTextInContent(contentEl, _selText.slice(0,80).replace(/…$/,'').trim());

if (!found) return false;

_selRange = found;

return true;

}

function ~~showFab~~( ~~rect~~ ) {

function tryShowActions() {

if ( ~~!rect~~ ) return;

if ($fbComposer && $fbComposer.hasClass('gra-composer-visible')) return;

~~// FAB uses position:fixed — coords are viewport~~-~~relative (no scroll offset needed~~).

if ($ntComposer && $ntComposer.hasClass('gra-composer-visible')) return;

~~// Place strip to the right of the selection;~~ if ~~it would go off~~-~~screen, place to the left.~~

if ($bmComposer && $bmComposer.hasClass('gra-composer-visible')) return;

~~var fabW = 46; var fabH = 84~~;

if (!captureSelection()) { hideActions(); return; }

~~var top = rect.top +~~ ( ~~rect.height / 2~~ ) - ( ~~fabH / 2~~ );

_fabSelVer = _selVersion;

~~var left~~ = ~~rect.right + 10~~;

showFab(_selRect);

}

~~// If too close to right edge~~, ~~flip to~~ left ~~of selection~~

function showFab(rect) {

if ( ~~left + fabW > window.innerWidth - 8~~ ) {

if (!rect) return;

left ~~= rect~~.~~left~~ - ~~fabW~~ - 10;

var fabW, fabH, top, left;

if (_mobile) {

$fab.css({ position: '', top: '', left: '', visibility: '' })

.addClass('gra-fab-visible gra-fab-mobile-docked');

return;

}

// ~~Clamp vertically within viewport~~

fabW = 46; fabH = 126;

top = clamp( top, 8, window.innerHeight - fabH - 8 );

top = rect.top + (rect.height / 2) - (fabH / 2);

~~// Clamp horizontally~~

left = rect.right + 10;

left = clamp( left, 8, window.innerWidth - fabW - 8 );

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() {

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

$fab.removeClass('gra-fab-visible');

function hideActions() { hideFab(); }

function wrapSelection(id, cssClass) {

var range = _selRange;

_selRange = null;

if (!range) return null;

try {

if (!document.contains(range.startContainer) ||

!document.contains(range.endContainer)) return null;

} catch(e) { return null; }

function makeSpan() {

var sp = document.createElement('span');

sp.className = cssClass;

sp.setAttribute('data-gra-id', id);

return sp;

}

try {

var span = makeSpan();

range.surroundContents(span);

if (span.parentNode) return span;

} catch(e) {}

try {

var frag = range.extractContents();

var sp2 = makeSpan();

sp2.appendChild(frag);

range.insertNode(sp2);

if (sp2 && sp2.parentNode) return sp2;

} catch(e2) {}

return null;

}

// ════════════════════════════════════════════════════════════════════

function openFeedbackComposer() {

~~// SELECTION HANDLING~~

hideActions();

// ════════════════════════════════════════════════════════════════════

$fbQuote.text(_selText.slice(0,200) + (_selText.length > 200 ? '…' : ''));

$fbIssueType.val('');

$fbText.val('');

$fbSubmit.prop('disabled', true);

$('#gra-fb-status').text('').removeClass('gra-fb-ok gra-fb-err');

if (currentUserEmail) $fbEmail.val(currentUserEmail);

else $fbEmail.val('');

if (!_mobile) $fbComposer.css({top:'', left:'', transform:''});

$fbComposer.addClass('gra-composer-visible');

$backdrop.addClass('gra-backdrop-visible');

setTimeout(function(){ $fbIssueType.focus(); }, isMobile() ? 300 : 0);

}

function ~~captureSelection~~() {

function closeFeedbackComposer() {

~~var sel = window~~.~~getSelection~~();

$fbComposer.removeClass('gra-composer-visible');

if ( ~~!sel || sel.isCollapsed || !sel.rangeCount~~ ) ~~return false~~;

$backdrop.removeClass('gra-backdrop-visible');

_selRange = null; _selText = ''; _selRect = null;

}

var ~~range~~ = ~~sel~~.~~getRangeAt~~(0);

function submitFeedback() {

var ~~text~~ = ~~sel~~.~~toString~~().trim();

var issueType = $fbIssueType.val();

if ( !text || ~~text~~.~~length < 2~~ ) return ~~false~~;

var details = $fbText.val().trim();

var email = $fbEmail.val().trim();

var quote = $fbQuote.text();

if (!issueType) return;

$fbSubmit.prop('disabled', true).text('Sending…');

$('#gra-fb-status').text('').removeClass('gra-fb-ok gra-fb-err');

var issueLabels = {

wrong_text: 'Formatting error', reference_issue: 'Reference issue',

spelling_mistake: 'Spelling mistake', other: 'Other'

};

var payload = new FormData();

payload.append('issue_type', issueLabels[issueType] || issueType);

payload.append('page', pageTitle.replace(/_/g,' '));

payload.append('url', window.location.href);

payload.append('selected_text', quote);

payload.append('details', details || '');

payload.append('user_email', email || currentUserEmail || '');

payload.append('wiki_user', currentUser || 'anonymous');

fetch('/feedback.php', {method:'POST', body:payload})

.then(function(r){ return r.json(); })

.then(function(data){

if (data && data.ok) showFeedbackSuccess();

else showFeedbackError(data && data.error ? data.error : 'Could not send.');

})

.catch(function(){ showFeedbackError('Network error. Please try again.'); });

}

~~// Must be inside mw-content-text~~

function showFeedbackSuccess() {

~~var contentEl = document~~.~~querySelector~~( ~~CONTENT_SEL~~ );

$fbSubmit.prop('disabled', false).text('Send');

if ( !~~contentEl~~ ) ~~return false~~;

$('#gra-fb-status').text('✓ Feedback sent. Thank you!').addClass('gra-fb-ok');

~~var startEl = range.commonAncestorContainer~~;

setTimeout(closeFeedbackComposer, 2500);

if ( ~~startEl~~.~~nodeType === 3~~ ) ~~startEl = startEl.parentNode~~;

}

if ( ~~!contentEl~~.~~contains~~( ~~startEl~~ ) ) ~~return false~~;

function showFeedbackError(msg) {

$fbSubmit.prop('disabled', false).text('Send');

$('#gra-fb-status').text('✗ ' + msg).addClass('gra-fb-err');

}

~~_selText = text~~;

function openNoteComposer() {

~~_selRange = range~~.~~cloneRange~~();

hideActions();

~~_selRect = range~~.~~getBoundingClientRect~~();

if (!_mobile) $ntComposer.css({ top: '', left: '', transform: '' });

~~return true~~;

$ntComposer.addClass('gra-composer-visible');

$backdrop.addClass('gra-backdrop-visible');

setTimeout(function(){ $ntInput.focus(); }, isMobile() ? 300 : 0);

}

// ════════════════════════════════════════════════════════════════════

function closeNoteComposer() {

~~// COMPOSER POSITIONING~~

$ntComposer.removeClass('gra-composer-visible');

// ════════════════════════════════════════════════════════════════════

$backdrop.removeClass('gra-backdrop-visible');

$ntInput.val('');

$ntSubmit.prop('disabled', true);

_selRange = null; _selText = ''; _selRect = null;

}

function ~~positionComposer~~( ~~$el~~ ) {

function submitNote() {

~~if ( !_selRect ) return;~~

var text = $ntInput.val().trim();

~~// position:fixed — viewport coords only~~

if (!text) return;

var ~~top~~ = ~~_selRect~~.~~bottom + 8;~~

if (byteLength(text) > MAX_NOTE_BYTES) {

~~var left = _selRect~~.~~left~~;

alert('This note is too long to save — please shorten it.');

~~// Keep composer within viewport~~

return;

~~var composerW = 308~~;

if ( ~~left + composerW~~ > ~~window.innerWidth - 8~~ ) {

~~left = window~~.~~innerWidth - composerW - 8~~;

}

~~left~~ = ~~Math~~.~~max~~( ~~left~~, 8 );

var id = uid();

~~// If composer would appear below viewport~~, ~~show above selection instead~~

var ts = nowIso();

if ( ~~top + 160 > window~~.~~innerHeight~~ ) {

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

~~top~~ = ~~_selRect.top - 170~~;

if (!_selRange && _selText) reCaptureFromDOM();

}

var span = wrapSelection(id, 'gra-note-highlight');

~~top = Math~~.~~max~~( ~~top, 8~~ );

if (span) span.setAttribute('data-gra-quote', quote);

~~$el~~.~~css~~(~~{ top: top +~~ 'px', ~~left: left +~~ 'px' });

var rec = {id:id, ts:ts, quote:quote, text:text};

_notes.push(rec);

Store.cache();

Store.save('note', rec);

renderNoteCards(); updateBadge();

closeNoteComposer();

openPanel('notes');

}

// ════════════════════════════════════════════════════════════════════

~~// WRAP SELECTION IN HIGHLIGHT SPAN~~

// ════════════════════════════════════════════════════════════════════

~~function wrapSelection( id~~, ~~cssClass ) {~~

/* ── SHAREABLE CITATION ────────────────────────────────────────────

~~if ( !_selRange ) return null;~~

A bookmark is personal, but what it produces is not: a reference in

~~try {~~

APA form plus a link that resolves for anyone.

~~var span = document~~.~~createElement(~~'span~~');~~

~~span.className = cssClass~~;

The link cannot point at the bookmark itself. A bookmark wraps the

span~~.setAttribute('data~~-~~gra-id',~~ id);

reader's own selection in a span with an id generated in their

~~_selRange~~.~~surroundContents( span );~~

browser; that span is never saved to the page, so #<bookmark-id>

~~return span;~~

resolves for nobody else. The citation therefore anchors to the

~~} catch ( e ) {~~

nearest enclosing block that the PUBLISHED page carries an id for -

~~// surroundContents fails~~ for ~~multi~~-~~element selections;~~

the same ids copyId.js links to, and the same ones cross-references

~~// extract~~ and ~~wrap~~ the ~~fragment~~

across the site already use.

~~try {~~

~~var frag = _selRange~~.~~extractContents~~();

APA 7th, for a work on a website with no date:

~~var span2 = document~~.~~createElement~~(~~'span'~~);

Author. (n.d.). Title (Locator). Site. Retrieved D Month Y, from URL

~~span2~~.~~className~~ = ~~cssClass;~~

n.d. because these works carry no publication date, and a retrieval

~~span2.setAttribute(~~'data-~~gra~~-id', id);

date because a wiki page can change. The block reference is given as

~~span2~~.~~appendChild( frag~~ );

a parenthetical locator after the title, which is where APA puts a

~~_selRange~~.~~insertNode~~( ~~span2~~ );

section or part designation. */

return ~~span2~~;

~~} catch(e2) { return null~~; }

var CITE_BLOCK_SEL = '.verse-block[id], .bhashyam-block[id], .teeka-block[id], ' +

'[data-block-id][id], .gr-apparatus[id], .shloka[id]';

function citeAnchorFor(node) {

var el = node && node.nodeType === 3 ? node.parentNode : node;

while (el && el !== document.body) {

if (el.matches && el.matches(CITE_BLOCK_SEL)) return el;

el = el.parentNode;

}

return null;

}

// ════════════════════════════════════════════════════════════════════

// Walks up from the cited block: an interleaved commentary block states

// ~~COMMENT FLOW~~

// its own work, otherwise the page's title element does.

// ════════════════════════════════════════════════════════════════════

// A reference written in English cites the work in IAST, so prefer the

// transliterated forms the library supplies and keep Devanagari as the

// fallback. common.js writes the library's values onto .gr-doc-title as

// soon as they arrive, so reading the DOM here always gets the current

// names without this module knowing the library exists.

function citeSourceFor(el) {

var n = el;

while (n && n !== document.body) {

if (n.getAttribute && n.getAttribute('data-cite-title')) {

return {

author: n.getAttribute('data-cite-author-iast') ||

n.getAttribute('data-cite-author') || '',

title: n.getAttribute('data-cite-title-iast') ||

n.getAttribute('data-cite-title') || '',

page: n.getAttribute('data-cite-page') || ''

};

}

n = n.parentNode;

}

var t = document.querySelector('.gr-doc-title');

return {

author: (t && (t.getAttribute('data-author-iast') ||

t.getAttribute('data-author'))) || '',

title: (t && (t.getAttribute('data-doc-title-iast') ||

t.getAttribute('data-doc-title') ||

t.textContent.trim())) || document.title,

page: (window.mw && mw.config.get('wgPageName')) || '',

scheme: (t && t.getAttribute('data-locator-scheme')) || ''

};

}

function ~~openCommentComposer~~() {

// Any block carrying a library id gets its author/title filled in from

~~hideFab~~();

// the library, whether common.js injected it or the page was built with

~~positionComposer~~( ~~$cmpComposer~~ );

// it already in place. Doing it here rather than only at injection time

~~$cmpComposer~~.~~addClass~~('~~gra~~-~~composer~~-~~visible~~');

// means a citation never depends on which path put the block on screen.

~~// Don~~'~~t focus the textarea — it~~'~~s hidden until "Others" chip is selected~~.

function hydrateCitationSources(root) {

~~// Focus the composer container so Escape key works~~.

if (!window.grLibrary) return;

~~$cmpComposer[0].focus && $cmpComposer[0]~~.setAttribute('~~tabindex~~', '-1');

var nodes = (root || document).querySelectorAll('[data-cite-grantha-id]');

Array.prototype.forEach.call(nodes, function (el) {

if (el.getAttribute('data-cite-hydrated')) return;

var gid = el.getAttribute('data-cite-grantha-id');

if (!gid) return;

el.setAttribute('data-cite-hydrated', '1');

window.grLibrary.lookup(gid).then(function (g) {

if (!g) return;

if (g.name) el.setAttribute('data-cite-title', g.name);

if (g.nameIAST) el.setAttribute('data-cite-title-iast', g.nameIAST);

if (g.author) el.setAttribute('data-cite-author', g.author);

if (g.authorIAST) el.setAttribute('data-cite-author-iast', g.authorIAST);

});

}

function ~~closeCommentComposer~~() {

// ── LOCATOR ─────────────────────────────────────────────────────────

~~$cmpComposer.removeClass('gra-composer-visible')~~;

// "KKN_C01_S01_V03" is a build artefact, not a reference. A reader

$( '~~#gra-quick-chips .gra-chip~~' ).~~removeClass~~('~~gra-chip-active~~');

// citing it wants 1.1.3, and ideally to be told that those numbers are

~~$cmpInput~~.~~hide~~().~~val~~('');

// adhyaya, valli and mantra. The page declares the division names it

~~$cmpSubmit~~.~~prop~~(~~'disabled'~~, ~~true~~);

// knows (data-locator-scheme); where it declares none we still give the

~~_selRange~~ = ~~null~~;

// dotted form, which is correct for every text - it is only the NAMES

~~_selText = ''~~;

// of the divisions that vary from work to work.

~~_selRect = null~~;

function parseScheme(s) {

var out = {};

(s || '').split(',').forEach(function (pair) {

var i = pair.indexOf('=');

if (i > 0) out[pair.slice(0, i).trim()] = pair.slice(i + 1).trim();

});

return out;

}

~~function submitComment~~() {

// Segments that qualify the passage rather than number it: _B01 is the

~~var text = $cmpInput~~.~~val()~~.~~trim();~~

// first paragraph of the bhashya ON that verse, and a bare letter with

if ( ~~!text || !currentUser~~ ) return;

// no number (Katha's "_I_" for an introduction) marks a position, not a

~~var id~~ = ~~uid();~~

// division. A NUMBERED segment is always part of the path - in

~~var ts~~ = ~~nowIso();~~

// RG_C01_I01_V01 the I is a sukta, and reading it as Katha's

~~var quote~~ = ~~_selText.slice(0, 120) + ( _selText.length > 120 ?~~ '…' ~~: '' )~~;

// introduction marker turned 1.1.1 into "1.1, Sukta 1".

function isQualifier(k, n) { return k === 'B' || !n; }

~~// Wrap text in highlight span~~

function parseLocator(id) {

var ~~span~~ = ~~wrapSelection~~( id, ~~'gra~~-~~comment~~-~~highlight'~~ );

if (!id) return null;

if ( ~~span~~ ) ~~span~~.~~setAttribute~~('~~data-gra-quote~~', ~~quote~~);

var segs = String(id).split('_');

var path = [], qual = [];

for (var i = 1; i < segs.length; i++) {

var m = /^([A-Za-z]+)(\d*)$/.exec(segs[i]);

if (!m) continue;

var k = m[1].toUpperCase(), n = m[2] ? String(parseInt(m[2], 10)) : '';

(isQualifier(k, n) ? qual : path).push({ k: k, n: n });

}

if (!path.length && !qual.length) return null;

return { path: path, qual: qual };

}

~~// Save locally~~

function locatorText(id, scheme) {

var ~~entry~~ = { id:id, ~~author~~:~~currentUser~~, ts:~~ts, quote~~:~~quote~~, ~~text~~:~~text }~~;

var p = parseLocator(id);

~~_comments.push~~( ~~entry~~ );

if (!p) return { numeric: id || '', spelled: '' };

~~// Persist highlight anchor so it survives page refresh~~

var labels = parseScheme(scheme);

~~persistCommentHighlight(~~ id, ~~quote )~~;

var numeric = p.path.map(function (s) { return s.n; }).filter(Boolean).join('.');

var spelledParts = p.path.map(function (s) {

return labels[s.k] ? labels[s.k] + ' ' + s.n : null;

});

var spelled = spelledParts.indexOf(null) === -1 ? spelledParts.join(', ') : '';

p.qual.forEach(function (s) {

var lab = labels[s.k] ||

(s.k === 'B' ? 'bhāṣya' : (s.k === 'I' ? 'intro' : s.k));

var bit = lab + (s.n ? ' ' + s.n : '');

numeric += (numeric ? ', ' : '') + bit;

if (spelled) spelled += ', ' + bit;

});

return { numeric: numeric || id, spelled: spelled };

}

// ~~Persist~~ to ~~wiki~~

// Version stamp, so it is possible to tell from the browser console

~~saveCommentToWiki( id~~, ~~quote, text, ts );~~

// which build of this gadget a page is actually running. Check with

~~notifyAdmin( _activeId || '', quote, text, ts )~~;

// window.grAnnotationsVersion

// APA 7 asks for a retrieval date only when the content is designed to

// change and is not archived. These are settled texts with a fixed

// structure, so the date is omitted. Set true to restore it.

var SHOW_RETRIEVAL_DATE = false;

~~// Update panel~~

window.grAnnotationsVersion = '2026-09-30a';

~~renderCommentCards();~~

~~closeCommentComposer();~~

~~openPanel(~~'~~comments~~');

}

~~function saveCommentToWiki( id~~, ~~quote, text, ts ) {~~

// A citation is worthless if its link doesn't open, so prefer URLs we

if ( ~~!window~~.mw ) ~~return;~~

// KNOW are good over ones we assemble.

~~var api = new~~ mw.~~Api~~();

// - Same page as the reader: use the address they're already at. A wiki

~~api~~.get({

// whose served paths differ from wgArticlePath (or that sits behind a

~~action:~~'~~query~~'~~, prop:~~'~~revisions~~'~~, titles:commentsPage,~~

// rewrite) would otherwise yield a link that 404s.

~~rvprop:~~'~~content~~'~~, rvslots~~:'~~main~~'~~, formatversion:2,~~

// - Another page (an injected teeka block cites its own subpage): use

~~}).then~~(~~function~~(~~data~~){

// mw.util.getUrl, the same builder every working link on the wiki

~~var page~~ = (~~data.query.pages||[]~~)~~[0]||~~{};

// comes from. wgArticlePath is only the last resort.

~~var existing~~ = '';

function citeUrl(pageName, anchorId) {

if (~~page~~.~~revisions~~ && ~~page~~.~~revisions[0]~~) {

var here = (window.mw && mw.config.get('wgPageName')) || '';

~~var rev~~ = ~~page~~.~~revisions[0];~~

var frag = anchorId ? '#' + encodeURIComponent(anchorId) : '';

~~existing = rev~~.~~slots ? rev~~.~~slots.main.content : rev['*'] || ''~~;

var base;

}

if (!pageName || String(pageName) === String(here)) {

var ~~entry~~ = ~~'{{GrComment\n'~~

base = location.origin + location.pathname;

~~+ '| id = ' + id + '\n'~~

} else if (window.mw && mw.util && mw.util.getUrl) {

~~+ '| author = ' + currentUser + '\n'~~

base = location.origin + mw.util.getUrl(String(pageName));

~~+ '| timestamp = ' + ts + '\n'~~

} else {

~~+ '| quote = ' + quote~~.~~replace~~(~~/\n/g,~~' ') ~~+ '\n'~~

var path = (window.mw && mw.config.get('wgArticlePath')) || '/wiki/$1';

~~+ '~~| ~~text =~~ ' ~~+ text.replace(~~/\n/~~g,' ') + '\n'~~

base = location.origin +

~~+ '}}\n~~';

path.replace('$1', String(pageName).split('/').map(encodeURIComponent).join('/'));

~~var updated~~ = ~~(existing.trim() ? existing~~.~~trim() + '\n\n' : '')~~ + ~~entry;~~

}

~~api~~.~~postWithEditToken~~({

return base + frag;

~~action:~~'~~edit~~', ~~title:commentsPage, text:updated,~~

~~summary:'New comment by ' + currentUser + ' on [[' + pageTitle + ']]~~ (~~stored off-page~~)',

~~bot:0,~~

}).~~catch~~(~~function~~(){});

}~~).catch(function(){})~~;

}

~~function notifyAdmin( anchorId~~, ~~quote~~, ~~commentText~~, ~~ts ) {~~

var CITE_MONTHS = ['January','February','March','April','May','June',

~~/* Send notification email directly using MW~~'~~s EmailUser API~~, ~~targeting~~

'July','August','September','October','November','December'];

* ADMIN_EMAIL via the ADMIN_USER account — no server-side SMTP config needed.

* ADMIN_EMAIL is set at the top of this file; change it to any address. */

~~if ( !window.mw ) return~~;

~~var articlePath =~~ ( ~~mw.config.get('wgArticlePath') || '/wiki/$1'~~ )

function retrievedToday() {

~~.replace( '$1', pageTitle );~~

var d = new Date();

var ~~anchorLink~~ = ~~window.location.origin + articlePath~~

return CITE_MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();

+ ( ~~anchorId ? '#' + anchorId : ''~~ );

}

~~var pageDisplay = pageTitle~~.~~replace~~( ~~/_/g, ' '~~ );

~~var subject = '[Grantha~~] ~~New comment on "' + pageDisplay~~ + '~~"';~~

~~var body = 'Page :~~ ' + ~~pageDisplay~~ + '~~\n'~~

~~+ 'By :~~ ' + ( ~~currentUser || 'Anonymous'~~ ) ~~+ '\n'~~

~~+ 'Time : ' + ts + '\n'~~

~~+ 'Passage : "' + quote + '"\n\n'~~

~~+ 'Comment :\n' + commentText + '\n\n'~~

~~+ 'Link : ' + anchorLink + '\n';~~

~~/* Primary: send via MW EmailUser API to ADMIN_USER account.~~

function siteName() {

* The admin account must have ADMIN_EMAIL set in Special:Preferences,

return (window.mw && mw.config.get('wgSiteName')) || location.hostname;

* OR you can hardcode the target as any confirmed MW user. */

~~new mw.Api().post({~~

~~action: 'emailuser',~~

~~target: ADMIN_USER,~~

~~subject: subject,~~

~~text: body,~~

~~token:~~ ~~mw.user.tokens.get( 'csrfToken' ),~~

~~}).catch(~~function(){

~~/* Fallback: post a section to admin talk page for Echo notification */~~

~~if ( !currentUser )~~ return;

~~var wikimsg = '== New comment on [[' + pageDisplay + ']] ==\n'~~

~~+ '; By: ' +~~ ( ~~currentUser || 'Anonymous' ) + '\n'~~

~~+ '; Passage: //' + quote + '//\n'~~

~~+ '; Link: ' + anchorLink + '\n\n'~~

~~+ commentText.slice(0,500)~~

~~+ ( commentText.length > 500 ? '\n~~...' ~~: '~~' )

~~+ '\n\n[[User:Chandrashekars~~|~~Chandrashekars]] ([[User talk:Chandrashekars~~|~~talk]]) 18:31, 25 April 2026 (UTC)';~~

~~new mw.Api().postWithEditToken({~~

~~action:'edit', title:'User_talk:' + ADMIN_USER, section:'new',~~

~~sectiontitle:'Comment on ' + pageDisplay,~~

~~text:wikimsg,~~

~~summary:'Comment notification from [[' + pageDisplay + ']]',~~

~~bot:0,~~

}).~~catch(function(){});~~

});

}

// ~~── Load comments from /Comments wiki page ───────────────────────~~

// APA 7th, webpage on a website (§10.16):

~~function loadComments~~( cb ) {

// Author. (n.d.). Title of work. Site Name. Retrieved <date>, from <URL>

~~if ( _cmtLoaded ) { if (cb) cb~~(); ~~return; }~~

// Two rules this has to honour and an earlier draft did not:

if ( ~~!window~~.mw ) ~~{ _cmtLoaded=true; if(cb)cb(); return; }~~

// 1. No known author -> the TITLE moves into the author position; you

~~new mw~~.~~Api~~().~~get({~~

// never leave a bare "(n.d.)" with nothing in front of it. And when

~~action~~:~~'query'~~, ~~prop:'revisions'~~, ~~titles:commentsPage~~,

// the title occupies that slot the site name is not repeated after it.

~~rvprop:'content'~~, ~~rvslots:'main'~~, ~~formatversion~~:2,

// 2. A locator (our block id) does NOT belong in the reference entry.

}).~~then~~(~~function(data~~){

// The parenthetical slot after a title is for edition/format

var ~~page~~ = (~~data.query.pages~~||~~[])[0]~~||{};

// descriptors, not section numbers. APA puts locators in the in-text

var wt = '';

// citation, so the block id goes there: (Author, n.d., IS_C01_I03).

if (~~page.revisions && page.revisions~~[0]) {

// The retrieval date is correct here because the page is designed to

~~var rev~~ = ~~page~~.~~revisions~~[0];

// change and we link to the live version rather than a permalink.

~~wt = rev.slots ? rev.slots.main.content : rev['~~*~~'] ||~~ '';

// Titles of standalone works are italicised, which only the HTML flavour

}

// of the clipboard can carry.

~~_comments~~ = ~~parseCommentsWt~~(wt);

// The library records names with their honorifics and, often, a

~~_cmtLoaded~~ = ~~true;~~

// parenthetical alias: "Śrīman Madhvācārya (Ānandatīrtha)". A reference

if (cb) cb();

// entry carries the name a reader would look up, so the honorific and

}).~~catch(function(){ _cmtLoaded=true; if~~(~~cb)cb(); }~~);

// the alias come off - leaving "Madhvācārya". Only applied to the

// romanised form; the Devanagari is left exactly as the library has it,

// because there the honorific is fused to the name by sandhi

// (श्रीमत् + आनन्दतीर्थः -> श्रीमदानन्दतीर्थः) and cannot be sliced off safely.

function citationAuthor(name) {

var n = (name || '').trim();

if (!/[A-Za-z]/.test(n)) return n; // Devanagari - leave alone

n = n.replace(/\s*$[^)]*$\s*$/, '').trim();

for (var i = 0; i < 3 && HONORIFIC_RE.test(n); i++) {

n = n.replace(HONORIFIC_RE, '').trim();

}

return n || (name || '').trim();

}

function ~~parseCommentsWt~~( wt ) {

function buildCitation(rec) {

var ~~out~~ = [];

var src = rec.citeSource || {};

var re = ~~/\{\{GrComment\s*\n~~(~~[\s\S]*?~~)~~\}\}/g~~;

var author = citationAuthor(src.author);

var m;

var title = (src.title || '').trim();

~~while ((m~~ = re.~~exec~~(wt)) ~~!== null~~) {

var anchor = rec.anchor || '';

var ~~block~~ = ~~m[1]~~;

var site = (siteName() || '').trim();

var f = {};

var url = citeUrl(src.page, anchor);

var lr = /\|\s*(~~[\w_]+)\s*=\s*([\s\S]*?)(?=\n\||\n\}\}|$~~)/g;

var retrieved = retrievedToday();

var lm;

var loc = locatorText(anchor, src.scheme);

~~while ((lm~~ = lr.~~exec~~(~~block~~)~~) !~~=~~= null~~) {

~~f[lm[1]~~.~~trim~~()~~] = lm[2]~~.~~trim~~();

var head, headHtml, showSite;

}

if (author) {

~~if (f~~.~~id) out~~.~~push~~({

head = author + '. (n.d.). ' + title + '.';

~~id:f~~.~~id, author:f~~.~~author||~~'~~Anonymous',~~

headHtml = esc(author) + '. (n.d.). <i>' + esc(title) + '</i>.';

~~ts:f.timestamp||~~''~~, quote:f~~.~~quote||'', text:f~~.~~text||'~~'

showSite = site && site !== author;

});

} else {

// Title in the author position - italicised there too, and the site

// name is dropped when it would only repeat what the title says.

head = title + '. (n.d.).';

headHtml = '<i>' + esc(title) + '</i>. (n.d.).';

showSite = site && site !== title;

}

return ~~out~~;

// APA 7 (section 9.16) asks for a retrieval date only when the content

// is designed to change and is not archived. A wiki page can change, so

// the date is defensible - but these are settled texts, and a reader may

// reasonably prefer the shorter form. Set SHOW_RETRIEVAL_DATE to false

// for: Author. (n.d.). Title. Site. URL

var tail = SHOW_RETRIEVAL_DATE

? ' Retrieved ' + retrieved + ', from ' + url

: ' ' + url;

var reference = head + (showSite ? ' ' + site + '.' : '') + tail;

var referenceHtml = headHtml + (showSite ? ' ' + esc(site) + '.' : '') + ' '

+ (SHOW_RETRIEVAL_DATE ? 'Retrieved ' + esc(retrieved) + ', from ' : '')

+ '<a href="' + esc(url) + '">' + esc(url) + '</a>';

// The in-text citation carries the locator, expanded: 1.1.3, not

// KKN_C01_S01_V03. The name is shortened the way an in-text citation

// shortens one - the library's parenthetical alias ("Śrīman

// Madhvācārya (Ānandatīrtha)") belongs in the reference, not here.

var shortName = (author || title).replace(/\s*$[^)]*$\s*$/, '').trim();

var inText = '(' + (shortName || author || title) + ', n.d.'

+ (loc.numeric ? ', ' + loc.numeric : '') + ')';

return { reference: reference, referenceHtml: referenceHtml,

inText: inText, url: url,

locator: loc.numeric, locatorSpelled: loc.spelled };

}

// ════════════════════════════════════════════════════════════════════

// html is optional. When given, both flavours go on the clipboard so a

// ~~BOOKMARK FLOW~~

// paste into Word/Docs keeps the italicised title and the live link,

// ════════════════════════════════════════════════════════════════════

// while a paste into a plain field (or the address bar) gets the text.

function copyToClipboard(text, done, html) {

if (html && window.ClipboardItem && navigator.clipboard && navigator.clipboard.write) {

try {

var item = new ClipboardItem({

'text/html': new Blob([html], { type: 'text/html' }),

'text/plain': new Blob([text], { type: 'text/plain' })

});

navigator.clipboard.write([item]).then(done).catch(function () {

plainCopy(text, done);

});

return;

} catch (e) { /* fall through */ }

}

plainCopy(text, done);

}

function plainCopy(text, done) {

if (navigator.clipboard && navigator.clipboard.writeText) {

navigator.clipboard.writeText(text).then(done).catch(function () { legacyCopy(text, done); });

} else { legacyCopy(text, done); }

}

function legacyCopy(text, done) {

var ta = document.createElement('textarea');

ta.value = text;

ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px;';

document.body.appendChild(ta); ta.focus(); ta.select();

try { document.execCommand('copy'); done && done(); } catch (e) {}

document.body.removeChild(ta);

}

function openBookmarkComposer() {

~~hideFab~~();

hideActions();

~~positionComposer~~( $bmComposer );

if (!_mobile) $bmComposer.css({ top: '', left: '', transform: '' });

$bmComposer.addClass('gra-composer-visible');

$~~bmInput~~.~~val~~('').focus();

$backdrop.addClass('gra-backdrop-visible');

setTimeout(function(){ $bmInput.focus(); }, isMobile() ? 300 : 0);

}

function closeBookmarkComposer() {

$bmComposer.removeClass('gra-composer-visible');

$backdrop.removeClass('gra-backdrop-visible');

$bmInput.val('');

_selRange = null;

_selRange = null; _selText = ''; _selRect = null;

_selText = '';

_selRect = null;

}

function submitBookmark() {

var name = $bmInput.val().trim() || ( 'Bookmark ' + (_bookmarks.length+1) );

var name = $bmInput.val().trim() || ('Bookmark ' + (_bookmarks.length+1));

// A bookmark's name is stored in the same column as a note's text and

// is capped the same way.

if (byteLength(name) > MAX_NOTE_BYTES) {

alert('This bookmark name is too long to save — please shorten it.');

return;

}

var id = uid();

~~var ts = nowIso();~~

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

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

if (!_selRange && _selText) reCaptureFromDOM();

// Resolve the citation anchor BEFORE wrapping: wrapSelection inserts a

// ~~Wrap text in bookmark highlight~~ span

// span of its own, and resolving afterwards would just find that.

var span = wrapSelection( id, 'gra-bookmark-highlight' );

var anchorEl = citeAnchorFor(_selRange && _selRange.startContainer);

if ( span ) {

var span = wrapSelection(id, 'gra-bookmark-highlight');

span.setAttribute('data-gra-id', id);

if (span) { span.setAttribute('data-gra-id', id); span.setAttribute('data-gra-name', name); }

span.setAttribute('data-gra-name', name);

if (!anchorEl && span) anchorEl = citeAnchorFor(span);

}

var rec = {id:id, name:name, quote:quote, ts:nowIso(),

anchor: anchorEl ? (anchorEl.id || anchorEl.getAttribute('data-block-id') || '') : '',

var ~~entry~~ = { id:id, name:name, quote:quote, ts:ts };

citeSource: citeSourceFor(anchorEl || document.body)};

_bookmarks.push( ~~entry~~ );

_bookmarks.push(rec);

~~persistBookmarks~~();

Store.cache();

renderBookmarkCards();

Store.save('bookmark', rec);

renderBookmarkCards(); updateBadge();

closeBookmarkComposer();

openPanel('bookmarks');

}

function deleteBookmark( id ) {

function deleteBookmark(id) {

_bookmarks = _bookmarks.filter(function(b){ return b.id !== id; });

~~// Remove highlight span, replace with its text content~~

var span = document.querySelector('[data-gra-id="'+id+'"].gra-bookmark-highlight');

var span = document.querySelector('[data-gra-id="' + id + '"].gra-bookmark-highlight');

if (span && span.parentNode) {

if (span) {

var p = span.parentNode;

var ~~parent~~ = span.parentNode;

while (span.firstChild) p.insertBefore(span.firstChild, span);

while (span.firstChild) ~~parent~~.insertBefore(span.firstChild, span);

p.removeChild(span);

~~parent~~.removeChild(span);

}

~~persistBookmarks~~();

Store.cache(); Store.remove(id); renderBookmarkCards(); updateBadge();

renderBookmarkCards();

}

~~function persistBookmarks() {~~

function openPanel(tab) {

~~try { localStorage.setItem(BM_LS_KEY, JSON.stringify(_bookmarks)); } catch(e){}~~

}

~~function loadBookmarks() {~~

~~try {~~

~~var raw = localStorage.getItem(BM_LS_KEY);~~

~~if (raw) _bookmarks = JSON.parse(raw) || [];~~

~~} catch(e){ _bookmarks = []; }~~

}

// ════════════════════════════════════════════════════════════════════

~~// PANEL — open / close / tabs~~

// ════════════════════════════════════════════════════════════════════

function openPanel( tab ) {

_activeTab = tab || _activeTab;

switchTab( _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');

}

// CHANGED: added the footnotes case, alongside notes/bookmarks.

function switchTab( tab ) {

function switchTab(tab) {

_activeTab = tab;

$~~tabComments~~.toggleClass('gra-tab-active', tab==='~~comments~~');

$tabNotes.toggleClass('gra-tab-active', tab==='notes');

$tabBookmarks.toggleClass('gra-tab-active', tab==='bookmarks');

$~~paneComments~~.toggleClass('gra-pane-active', tab==='~~comments~~');

$tabFootnotes.toggleClass('gra-tab-active', tab==='footnotes');

$paneNotes.toggleClass('gra-pane-active', tab==='notes');

$paneBookmarks.toggleClass('gra-pane-active', tab==='bookmarks');

if (tab==='~~comments~~') {

$paneFootnotes.toggleClass('gra-pane-active', tab==='footnotes');

~~loadComments(function~~()~~{ renderCommentCards~~(~~); }~~);

if (tab==='notes') renderNoteCards();

} else {

else if (tab==='bookmarks') renderBookmarkCards();

renderBookmarkCards();

else renderFootnoteCards();

}

// ════════════════════════════════════════════════════════════════════

function renderNoteCards() {

~~// RENDER CARDS~~

if (!_notes.length) {

// ════════════════════════════════════════════════════════════════════

$paneNotes.html('<div class="gra-empty-state">No notes yet.<br>Select text and tap ✎ to add one.</div>');

function ~~renderCommentCards~~() {

if ( ~~_comments~~.length ~~=== 0~~ ) {

$~~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){

_notes.slice().reverse().forEach(function(n){

html += '<div class="gra-~~comment~~-card" data-gra-id="' + esc(c.id) + '">'

html += '<div class="gra-note-card" data-gra-id="'+esc(n.id)+'">'

+ '<div class="gra-card-header">'

+ '<~~div~~ class="gra-~~avatar~~">~~' + esc((c.author||'?').charAt(0).toUpperCase()) + '~~</~~div~~>'

+ '<span class="gra-icon gra-icon-note" aria-hidden="true"></span>'

+ '<div class="gra-card-meta">'

~~+ '<div class="gra-card-author">' + esc(c.author) + '</div>'~~

+ (n.ts ? '<div class="gra-card-ts">'+esc(fmtTs(n.ts))+'</div>' : '')

+ (c.ts ? '<div class="gra-card-ts">' + esc(fmtTs(c.ts)) + '</div>' : '')

+ '</div>'

+ '<button class="gra-note-del" data-del-id="'+esc(n.id)+'" title="Delete">×</button>'

+ '</div>'

+ (c.quote ? '<div class="gra-card-quote">' + esc(c.quote) + '</div>' : '')

+ (n.quote ? '<div class="gra-card-quote">'+esc(n.quote)+'</div>' : '')

+ '<div class="gra-card-text">' + esc(c.text) + '</div>'

+ '<div class="gra-card-text">'+esc(n.text)+'</div>'

+ '</div>';

});

$~~paneComments~~.html(html);

$paneNotes.html(html);

}

function deleteNote(id) {

_notes = _notes.filter(function(n){ return n.id !== id; });

var span = document.querySelector('[data-gra-id="'+id+'"].gra-note-highlight');

if (span && span.parentNode) {

var p = span.parentNode;

while (span.firstChild) p.insertBefore(span.firstChild, span);

p.removeChild(span);

}

Store.cache(); Store.remove(id); renderNoteCards(); updateBadge();

}

function renderBookmarkCards() {

if ( _bookmarks.length ~~=== 0~~ ) {

if (!_bookmarks.length) {

$paneBookmarks.html('<div class="gra-empty-state">No bookmarks yet.<br>Select text and ~~click~~ 🔖 to save ~~a bookmark~~.</div>');

$paneBookmarks.html('<div class="gra-empty-state">No bookmarks yet.<br>Select text and tap 🔖 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) + '">'

var cite = buildCitation(b);

+ '<span class="gra-icon gra-icon-bookmark"></span>'

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>'

+ '<div class="gra-bookmark-name">'+esc(b.name)+'</div>'

+ (b.quote ? '<div class="gra-bookmark-quote">' + esc(b.quote) + '</div>' : '')

+ (b.quote ? '<div class="gra-bookmark-quote">'+esc(b.quote)+'</div>' : '')

// One button. The reference already carries the work, the

// locator's page and the link, so a separate "copy link" only

// asked the reader to decide something they don't need to.

// The in-text form stays on the card because it is what goes

// in a sentence, but it copies on click rather than earning a

// button of its own.

// Where in the text this sits, spelled out - "Adhyaya 3,

// Mantra 4" rather than MUN_C03_V04. Not part of the citation

// (APA keeps a locator out of the reference entry), so it is

// set apart as a caption and is not included in the copy.

+ (cite.locatorSpelled || cite.locator

? '<div class="gra-bookmark-locator">'

+ esc(cite.locatorSpelled || cite.locator) + '</div>'

: '')

+ '<div class="gra-bookmark-cite">'+cite.referenceHtml+'</div>'

+ '<div class="gra-cite-actions">'

+ '<button type="button" class="gra-cite-copy" data-cite-what="reference"'

+ ' data-cite-id="'+esc(b.id)+'">Copy citation</button>'

+ '</div>'

+ '<button class="gra-bookmark-del" data-del-id="' + esc(b.id) + '" title="Remove ~~bookmark~~">×</button>'

+ '<button class="gra-bookmark-del" data-del-id="'+esc(b.id)+'" title="Remove">×</button>'

+ '</div>';

});

Line 658:

Line 1,254:

}

// ════════════════════════════════════════════════════════════════════

// NEW: Footnotes tab — unlike Notes/Bookmarks, footnotes aren't personal

// ~~SCROLL TO HIGHLIGHT~~

// localStorage annotations, they're real saved page content (QuickEdit

// ════════════════════════════════════════════════════════════════════

// writes .gra-qe-footnotes/.gra-qe-footnote-item directly into the saved

// HTML). So this reads straight off the live DOM on every open, no

// fetch, no storage — verified the scan + both-direction lookup logic

// against realistic saved-footnote HTML before wiring this in (6/6 pass).

function renderFootnoteCards() {

var items = document.querySelectorAll(CONTENT_SEL + ' .gra-qe-footnote-item');

if (!items.length) {

$paneFootnotes.html('<div class="gra-empty-state">No footnotes on this page.</div>');

return;

}

// CHANGED: grouped by source. A moola page now also carries the notes

// of every commentary shown on it, and flattening them into one list

// put a commentary's notes after the moola's with nothing saying which

// was which - the cards were indistinguishable. Each note is filed

// under the heading of the document it came from: the page's own notes

// first, then one section per commentary, in the order the page shows

// them. common.js wraps injected notes in .gr-teeka-notes-group with a

// .gr-teeka-notes-title, which is where the heading comes from.

function groupOf(li) {

var wrap = li.closest ? li.closest('.gr-teeka-notes-group') : null;

if (!wrap) return null;

var t = wrap.querySelector('.gr-teeka-notes-title');

return {

slug: wrap.getAttribute('data-teeka-slug') || '',

title: t ? t.textContent.trim() : ''

};

}

var sections = []; // [{key, title, items: []}] in document order

var byKey = {};

Array.prototype.forEach.call(items, function (li) {

var g = groupOf(li);

var key = g ? g.slug : '';

if (!byKey[key]) {

byKey[key] = { key: key, title: g ? g.title : '', items: [] };

sections.push(byKey[key]);

}

byKey[key].items.push(li);

});

var html = '';

sections.forEach(function (sec) {

if (sec.title) {

html += '<div class="gra-footnote-section-title">' + esc(sec.title) + '</div>';

} else if (sections.length > 1) {

html += '<div class="gra-footnote-section-title gra-footnote-section-own">'

+ esc(pageOwnNotesLabel()) + '</div>';

}

sec.items.forEach(function (li) { html += footnoteCard(li, sec.title); });

});

$paneFootnotes.html(html);

}

// The heading for the page's own notes, shown only when there is at

// least one commentary section to tell them apart from.

function pageOwnNotesLabel() {

var t = document.querySelector('.gr-doc-title');

return (t && t.textContent.trim()) || 'This page';

}

function footnoteCard(li, groupTitle) {

var numEl = li.querySelector('.gra-qe-footnote-num');

var quoteEl = li.querySelector('.gra-qe-footnote-quote');

var textEl = li.querySelector('.gra-qe-footnote-text');

var num = numEl ? numEl.textContent.trim() : '';

// CHANGED: was showing the NUMBER as the card's primary line and the

// footnote's own note text as secondary — nowhere did it show WHICH

// text in the document the footnote actually belongs to, which was

// the whole point of being able to identify one footnote from

// another. Now shows the referenced quote as primary (matching how

// Notes/Bookmarks already identify themselves by quote, not by an

// arbitrary id), with the number as a small prefix and the

// footnote's own note text as secondary. Falls back to the note

// text alone if a footnote predates this change and has no quote

// span at all, rather than showing nothing.

var quote = quoteEl ? quoteEl.textContent : '';

var text = textEl ? textEl.textContent : (quoteEl ? '' : li.textContent);

var primary = quote ? (num + ' ' + quote) : (num + ' ' + text);

var id = li.getAttribute('data-gra-id') || '';

// The commentary's name is repeated on the card itself, not only on

// the section heading: a reader who has scrolled the panel, or who

// arrives at a card by clicking a word in the text, sees the card

// without its heading in view.

return '<div class="gra-bookmark-card gra-footnote-card" data-gra-id="'+esc(id)+'">'

+ '<span class="gra-icon gra-icon-footnote" aria-hidden="true"></span>'

+ '<div class="gra-bookmark-info">'

+ (groupTitle ? '<div class="gra-footnote-source">'+esc(groupTitle)+'</div>' : '')

+ '<div class="gra-bookmark-name">'+esc(primary)+'</div>'

+ (quote ? '<div class="gra-bookmark-quote">'+esc(text)+'</div>' : '')

+ '</div>'

+ '</div>';

}

function scrollToHighlight( id ) {

function scrollToHighlight(id) {

var el = document.querySelector('[data-gra-id="' + id + '"]');

var el = document.querySelector('[data-gra-id="'+id+'"]');

if (!el) return;

el.scrollIntoView({ behavior:'smooth', block:'center' });

el.scrollIntoView({behavior:'smooth', block:'center'});

el.classList.add('gra-hl-active');

setTimeout(function(){ el.classList.remove('gra-hl-active'); }, 2000);

}

// ════════════════════════════════════════════════════════════════════

function wireEvents() {

~~// EVENT WIRING~~

// ════════════════════════════════════════════════════════════════════

function ~~wireEvents~~() {

/* Suppress native context menu inside article content (Android/desktop) */

document.addEventListener('contextmenu', function(e) {

var tag = e.target.tagName;

if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;

var c = document.querySelector(CONTENT_SEL);

if (c && c.contains(e.target)) e.preventDefault();

}, { passive: false });

/~~/ ── Selection → show FAB ──────────────────────────────────────~~

/* Desktop mouseup */

~~// On~~ mouseup~~: capture the selection and show the FAB strip.~~

$(document).on('mouseup', function(e){

/~~/ We use mouseup (not click) so the selection is fully made.~~

if (e.button !== 0) return;

$( document ).on('mouseup', function(e){

if (_mobile) return;

~~// Ignore mouseup on FAB/composer — those are handled separately~~

setTimeout(tryShowActions, 20);

if ~~( $~~(e.~~target).closest('#gra-fab, .gra-composer, .gra-bm-composer').length~~ ) return;

~~// Ignore if a composer is already open~~

if ( ~~$cmpComposer.hasClass('gra-composer-visible') ||~~

~~$bmComposer.hasClass('gra-composer-visible')~~ ) return;

setTimeout(~~function(){~~

~~if ( captureSelection() ) {~~

~~showFab( _selRect );~~

~~} else {~~

~~hideFab();~~

}

}, 10);

});

// ~~── FAB mousedown: block selection collapse ───────────────────~~

/* Separate timers so mobile + desktop never clobber each other */

// ~~Browsers collapse text~~ selection ~~on mousedown~~. ~~preventDefault~~

var _selTimer = null; /* desktop debounce */

/~~/ keeps~~ the selection ~~alive so~~ the ~~click handler can wrap it~~.

var _mobShowTimer = null; /* mobile show-on-touchend */

~~$fab~~.on('~~mousedown~~', function(e){

e.~~preventDefault~~();

/* Mobile: show fab quickly after finger lifts (selection settled).

180ms feels instant while still letting the range stabilise. */

document.addEventListener('touchend', function(e) {

if (!_mobile) return;

if ($fab[0] && $fab[0].contains(e.target)) return;

clearTimeout(_mobShowTimer);

_mobShowTimer = setTimeout(function() {

var sel = window.getSelection();

if (!sel || sel.isCollapsed || !sel.toString().trim()) return;

tryShowActions();

}, 180);

}, { passive: true });

/* Mobile: only HIDE the fab when selection is cleared while it's visible.

(Reposition isn't needed now that the bar is docked, and re-running

showFab here was causing the lag/flicker.) */

document.addEventListener('selectionchange', function() {

if (!_mobile) return;

if (!$fab.hasClass('gra-fab-visible')) return;

var sel = window.getSelection();

if (!sel || sel.isCollapsed || !sel.toString().trim()) {

clearTimeout(_mobShowTimer);

hideActions();

}

});

// ~~── Mousedown outside: hide FAB ───────────────────────────────~~

/* selectionchange debounced (desktop only) */

$( document ).on('~~mousedown~~', function(e){

document.addEventListener('selectionchange', function() {

var $t = $(~~e.target~~);

if (_mobile) return;

if ( !~~$t.closest~~(~~'#gra-fab, .gra-composer, .gra-bm-composer, #gra-toggle, #gra-panel'~~)~~.length ) {~~

_selVersion++;

~~hideFab~~();

clearTimeout(_selTimer);

}

var v = _selVersion;

_selTimer = setTimeout(function(){

if (v !== _selVersion) return;

if (_fabSelVer === v) return;

tryShowActions();

}, 600);

});

// ── ~~FAB~~: ~~Comment button ───────────────────────────────────────~~

/* ── KEY FIX: fab touchstart sets flag to prevent hideActions ── */

$~~( '#gra-~~fab~~-comment' )~~.on('~~click~~', function(e){

$fab[0].addEventListener('touchstart', function(e) {

_fabTouched = true;

/* Don't propagate to document handler */

e.stopPropagation();

~~openCommentComposer~~();

}, { passive: true });

/* Click outside → hide actions (blocked if fab was touched) */

$(document).on('mousedown touchstart', function(e){

if (_fabTouched) { _fabTouched = false; return; }

var t = e.target;

if ($fab[0] && $fab[0].contains(t)) return;

if ($fbComposer[0] && $fbComposer[0].contains(t)) return;

if ($ntComposer[0] && $ntComposer[0].contains(t)) return;

if ($bmComposer[0] && $bmComposer[0].contains(t)) return;

hideActions();

});

// ── FAB: ~~Bookmark button ──────────────────────────────────────~~

/* ── FAB buttons — use touchend for mobile, click for desktop ── */

$( '#gra-fab-bookmark' ).on('click', function(e){

function fabAction(btnId, action) {

e.stopPropagation();

var el = document.getElementById(btnId);

~~openBookmarkComposer~~();

if (!el) return;

/* touchend: fires before document touchstart clears _selRange */

el.addEventListener('touchend', function(e) {

e.preventDefault();

e.stopPropagation();

if (!_selRange && !reCaptureFromDOM()) return;

action();

}, { passive: false });

/* click: for desktop */

el.addEventListener('click', function(e) {

e.preventDefault();

e.stopPropagation();

if (!_selRange && !reCaptureFromDOM()) return;

action();

});

}

fabAction('gra-fab-note', openNoteComposer);

fabAction('gra-fab-bookmark', openBookmarkComposer);

fabAction('gra-fab-feedback', openFeedbackComposer);

document.getElementById('gra-fab-search').addEventListener('touchend', function(e) {

e.preventDefault(); e.stopPropagation();

var q = _selText;

hideActions();

_selRange = null; _selText = ''; _selRect = null;

if (q && window.showSearchDialog) { window.showSearchDialog(q); }

}, { passive: false });

document.getElementById('gra-fab-search').addEventListener('click', function(e) {

e.preventDefault(); e.stopPropagation();

var q = _selText;

hideActions();

_selRange = null; _selText = ''; _selRect = null;

if (q && window.showSearchDialog) { window.showSearchDialog(q); }

else if (q) { $(document).trigger($.Event('keydown', {ctrlKey:true, key:'k', keyCode:75})); }

});

// ── ~~Comment composer ──────────────────────────────────────────~~

/* ── Dismiss button: hide toolbar + clear selection (mobile) ── */

~~/* Quick-select chips~~: ~~clicking a chip selects it and sets comment text.~~

(function () {

* 'Others' chip shows the textarea for free-form input.

var dismissEl = document.getElementById('gra-fab-dismiss');

* Any other chip sets the text directly and enables submit. */

if (!dismissEl) return;

$( ~~'#gra-cmp-composer' ).on( 'click', '.gra-chip',~~ function() {

function doDismiss(e) {

var ~~$chip = $( this );~~

e.preventDefault(); e.stopPropagation();

~~var val~~ = ~~$chip.attr('data-val');~~

hideActions();

~~// Toggle active state — allow deselecting~~

_selRange = null; _selText = ''; _selRect = null;

~~var wasActive = $chip.hasClass('gra-chip-active');~~

if (window.getSelection) {

~~$( '#gra-quick-chips .gra-chip' )~~.~~removeClass~~('gra-~~chip~~-~~active~~');

var s = window.getSelection();

if ( !~~wasActive ) $chip.addClass('gra-chip-active'~~);

if (s && s.removeAllRanges) s.removeAllRanges();

if ( ~~val === 'Others' && !wasActive~~ ) {

}

~~// Show textarea for free-form input~~

~~$cmpInput~~.~~show~~().~~focus~~()~~.val~~('');

~~$cmpSubmit.prop(~~'~~disabled~~'~~, true)~~;

~~} else~~ if ( ~~!wasActive~~ ) {

~~// Pre-fill and hide textarea — chip text is the comment~~

~~$cmpInput~~.~~hide~~(~~).val(val~~);

~~$cmpSubmit.prop~~(~~'disabled', !currentUser);~~

~~} else {~~

~~// Deselected — clear~~

~~$cmpInput~~.~~hide(~~).~~val~~('');

~~$cmpSubmit.prop('disabled', true);~~

}

} );

dismissEl.addEventListener('touchend', doDismiss, { passive: false });

$~~cmpInput~~.on('~~input~~', function(){

dismissEl.addEventListener('click', doDismiss);

$~~cmpSubmit~~.prop('disabled', !$(this).val()~~.trim() || !currentUser~~);

}());

});

$( '#gra-~~cmp~~-cancel' ).on('click', function(){

/* Feedback composer */

~~closeCommentComposer~~();

$fbIssueType.on('change', function(){ $fbSubmit.prop('disabled', !$(this).val()); });

~~hideFab~~();

$('#gra-fb-cancel, #gra-fb-close').on('click', closeFeedbackComposer);

});

$fbSubmit.on('click', submitFeedback);

$~~cmpSubmit~~.on('click', ~~submitComment~~);

$fbText.on('keydown', function(e){ if(e.key==='Escape') closeFeedbackComposer(); });

$~~cmpInput~~.on('keydown', function(e){

~~// Ctrl+Enter or Cmd+Enter submits~~

/* Note composer */

if ((e.ctrlKey||e.metaKey) && e.key==='Enter') ~~{ submitComment~~(); }

$ntInput.on('input', function(){ $ntSubmit.prop('disabled', !$(this).val().trim()); });

if (e.key==='Escape') ~~{ closeCommentComposer~~(); ~~hideFab(); }~~

$('#gra-nt-cancel').on('click', closeNoteComposer);

$ntSubmit.on('click', submitNote);

$ntInput.on('keydown', function(e){

if ((e.ctrlKey||e.metaKey) && e.key==='Enter') submitNote();

if (e.key==='Escape') closeNoteComposer();

});

/~~/ ──~~ Bookmark composer ~~─────────────────────────────────────────~~

/* Bookmark composer */

$( '#gra-bm-cancel' ).on('click', ~~function(){~~

$('#gra-bm-cancel').on('click', closeBookmarkComposer);

closeBookmarkComposer~~();~~

~~hideFab();~~

});

$bmSubmit.on('click', submitBookmark);

$bmInput.on('keydown', function(e){

if (e.key==='Enter') submitBookmark();

if (e.key==='Escape'){ closeBookmarkComposer(); ~~hideFab(); }~~

if (e.key==='Escape') closeBookmarkComposer();

});

// ~~── Panel close ───────────────────────────────────────────────~~

/* Panel */

$( '#gra-panel-close' ).on('click', closePanel);

$('#gra-panel-close').on('click', closePanel);

$backdrop.on('click', closePanel);

$backdrop.on('click touchend', function(e){

e.preventDefault();

~~// ── Tab switching ─────────────────────────────────────────────~~

if ($fbComposer.hasClass('gra-composer-visible')) closeFeedbackComposer();

$~~tabComments~~.on('click', function(){ switchTab('~~comments~~'); });

else if ($ntComposer.hasClass('gra-composer-visible')) closeNoteComposer();

else if ($bmComposer.hasClass('gra-composer-visible')) closeBookmarkComposer();

else closePanel();

});

$tabNotes.on('click', function(){ switchTab('notes'); });

$tabBookmarks.on('click', function(){ switchTab('bookmarks'); });

// NEW: third tab.

$tabFootnotes.on('click', function(){ switchTab('footnotes'); });

~~// ── Panel: click comment card → scroll to highlight ───────────~~

$paneNotes.on('click', '.gra-note-card', function(e){

$~~paneComments~~.on('click', '.gra-~~comment~~-card', function(){

if ($(e.target).hasClass('gra-note-del')) return;

var id = $(this).attr('data-gra-id');

if (id) scrollToHighlight(id);

if (id) { closePanel(); scrollToHighlight(id); }

});

$paneNotes.on('click', '.gra-note-del', function(e){

e.stopPropagation();

var id = $(this).attr('data-del-id');

if (id) deleteNote(id);

});

~~// ── Panel: click bookmark card → scroll to highlight ──────────~~

$paneBookmarks.on('click', '.gra-bookmark-card', function(e){

if ($(e.target).hasClass('gra-bookmark-del')) return;

if ($(e.target).hasClass('gra-cite-copy')) return;

var id = $(this).attr('data-gra-id');

if (id) scrollToHighlight(id);

if (id) { closePanel(); scrollToHighlight(id); }

});

$paneBookmarks.on('click', '.gra-cite-copy', function(e){

e.stopPropagation();

var $btn = $(this), id = $btn.attr('data-cite-id');

var rec = _bookmarks.filter(function(b){ return b.id === id; })[0];

if (!rec) return;

var cite = buildCitation(rec);

var what = $btn.attr('data-cite-what') || 'reference';

// Only the reference carries formatting worth preserving; the in-text

// form and the bare link must stay plain so they survive a paste into

// the address bar.

var text = cite[what] || cite.reference;

var html = (what === 'reference') ? cite.referenceHtml : null;

var was = $btn.text();

copyToClipboard(text, function(){

$btn.text('Copied').addClass('gra-cite-copy--done');

setTimeout(function(){ $btn.text(was).removeClass('gra-cite-copy--done'); }, 1600);

}, html);

});

~~// ── Panel: delete bookmark ────────────────────────────────────~~

$paneBookmarks.on('click', '.gra-bookmark-del', function(e){

e.stopPropagation();

var id = $(this).attr('data-del-id');

if (id) deleteBookmark(id);

});

// CHANGED: footnote highlights now carry data-gra-id (see quickedit.js's

// redesign — plain highlight span, no href/marker element anymore), so

// this can reuse the EXACT same scrollToHighlight(id) helper Notes/

// Bookmarks already use below, instead of custom href-parsing logic

// that broke every time the marker format changed.

$paneFootnotes.on('click', '.gra-footnote-card', function(){

var id = $(this).attr('data-gra-id');

if (id) { closePanel(); scrollToHighlight(id); }

});

~~// ── Click on highlight in text → open panel ───────────────────~~

$(CONTENT_SEL).on('click', '.gra-note-highlight', function(){

$( CONTENT_SEL ).on('click', '.gra-~~comment~~-highlight', function(){

var id = $(this).attr('data-gra-id');

openPanel('~~comments~~');

openPanel('notes');

~~// After render, scroll to matching card~~

setTimeout(function(){

var $card = $~~paneComments~~.find('[data-gra-id="'+id+'"]');

var $card = $paneNotes.find('[data-gra-id="'+id+'"]');

if ($card.length) {

$card.addClass('gra-card-active');

$card[0].scrollIntoView({behavior:'smooth',block:'nearest'});

$card[0].scrollIntoView({behavior:'smooth', block:'nearest'});

setTimeout(function(){ $card.removeClass('gra-card-active'); }, 2000);

}

}, 100);

});

$(CONTENT_SEL).on('click', '.gra-bookmark-highlight', function(){

$( 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'});

// CHANGED: was missing the gra-card-active flash entirely (only

// notes and footnotes had it) — a separate inconsistency from

// the CSS gap below. Now matches the other two exactly.

if ($card.length) {

$card.addClass('gra-card-active');

$card[0].scrollIntoView({behavior:'smooth', block:'nearest'});

setTimeout(function(){ $card.removeClass('gra-card-active'); }, 2000);

}

}, 100);

});

// CHANGED: was .gra-qe-footnote-ref a with e.preventDefault() (it used

// to be a real link). Now a plain highlight span, same as notes/

// bookmarks — no href to prevent, id read directly via data-gra-id,

// and the handler is now identical in shape to the two right above it.

$(CONTENT_SEL).on('click', '.gra-qe-footnote-highlight', function(){

var id = $(this).attr('data-gra-id');

openPanel('footnotes');

setTimeout(function(){

var $card = $paneFootnotes.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);

});

// ~~── Escape key closes panels~~ / ~~composers ─────────────────────~~

// NEW: cross-document links from QuickEdit's Link picker. No real

$( ~~document~~ ).on('~~keydown~~', function(e){

// href is ever saved (confirmed directly: MediaWiki's sanitizer

if (~~e.key==='Escape'~~){

// escapes <a href> into visible literal text on this wiki, even for

~~if ($cmpComposer~~.~~hasClass~~('~~gra~~-~~composer~~-~~visible~~'~~)) { closeCommentComposer(~~); ~~hideFab~~(); }

// a full absolute URL) — the target lives in data-gr-href instead,

~~else if ($bmComposer~~.~~hasClass~~('~~gra-composer-visible~~'~~)) { closeBookmarkComposer(~~); ~~hideFab(); }~~

// and this handler is what actually performs the navigation.

~~else closePanel~~();

$(CONTENT_SEL).on('click', '.gr-crosslink', function(){

}

var href = $(this).attr('data-gr-href');

if (!href) return;

var newWin = window.open(href, '_blank');

if (newWin) newWin.opener = null; // more reliable cross-browser than relying on window.open's features string

});

}

// ════════════════════════════════════════════════════════════════════

$(document).on('keydown', function(e){

~~// RESTORE BOOKMARK HIGHLIGHTS from localStorage on page load~~

if (e.key !== 'Escape') return;

// ════════════════════════════════════════════════════════════════════

if ($fbComposer.hasClass('gra-composer-visible')) closeFeedbackComposer();

~~// Bookmarks store the quote text. We do a best-effort text search~~

else if ($ntComposer.hasClass('gra-composer-visible')) closeNoteComposer();

~~// in the content to re-wrap the same span after page reload.~~

else if ($bmComposer.hasClass('gra-composer-visible')) closeBookmarkComposer();

// (~~Comments are server-stored and we only re-render cards, not re-wrap~~.)

else closePanel();

});

~~// ── Persist comment highlight anchors to localStorage ────────────────~~

~~// We only store {id, quote} — the full comment data lives~~ on ~~the wiki.~~

~~// On reload~~, ~~restoreCommentHighlights re-wraps the quote text in the page~~

~~// so the yellow highlight appears again.~~

function ~~persistCommentHighlight~~( ~~id, quote~~ ) {

~~try~~ {

~~var stored = JSON.parse~~( ~~localStorage~~.~~getItem( CMT_LS_KEY ) ||~~ '[]' );

~~// Deduplicate~~

~~stored = stored~~.~~filter~~( ~~function~~(~~h){ return h.id !== id; }~~ );

~~stored~~.~~push~~( ~~{ id: id, quote: quote }~~ );

~~localStorage~~.~~setItem~~( ~~CMT_LS_KEY, JSON.stringify~~( ~~stored~~ ) );

} ~~catch(e~~){}

}

~~function restoreCommentHighlights()~~ {

// Re-anchors note highlights from _notes, the way bookmarks have always

~~var stored = []~~;

// re-anchored from _bookmarks. This used to read a third store —

~~try { stored = JSON~~.~~parse( localStorage.getItem( CMT_LS_KEY ) || '[]' ); } catch~~(e){}

// NT_LS_KEY + '_hl' — holding {id, quote} pairs that _notes already had,

~~stored~~.forEach( function(h) {

// and which nothing kept in step once notes could also arrive from the

if ( !h.quote || !h.id ) return;

// server. The old key is left alone rather than deleted; it is simply no

if ( document.querySelector( '[data-gra-id="' + h.id + '"].gra-~~comment~~-highlight' ) ) return;

// longer consulted.

var needle = h.quote.replace(/…$/, '').trim().slice(0, 80);

function restoreNoteHighlights() {

if ( !needle ) return;

_notes.forEach(function(h){

var range = findTextInContent( document.querySelector(CONTENT_SEL), needle );

if (!h.quote || !h.id) return;

if ( range ) {

if (document.querySelector('[data-gra-id="'+h.id+'"].gra-note-highlight')) return;

var ~~span~~ = document.createElement('span');

var needle = h.quote.replace(/…$/,'').trim().slice(0,80);

~~span~~.className = 'gra-~~comment~~-highlight';

if (!needle) return;

~~span~~.setAttribute('data-gra-id', h.id);

var range = findTextInContent(document.querySelector(CONTENT_SEL), needle);

try { range.surroundContents(~~span~~); } catch(e){}

if (!range) return;

}

var sp = document.createElement('span');

sp.className = 'gra-note-highlight';

sp.setAttribute('data-gra-id', h.id);

try { range.surroundContents(sp); } catch(e){}

});

}

Line 875:

Line 1,666:

function restoreBookmarkHighlights() {

_bookmarks.forEach(function(b){

if ( !b.quote ) return;

if (!b.quote) return;

~~// Already highlighted from this session~~

if (document.querySelector('[data-gra-id="'+b.id+'"].gra-bookmark-highlight')) return;

if ( document.querySelector('[data-gra-id="'+b.id+'"].gra-bookmark-highlight') ~~) return;~~

~~// Text search — find first occurrence of quote in content~~

~~var contentEl = document.querySelector( CONTENT_SEL );~~

~~if (!contentEl~~) return;

var needle = b.quote.replace(/…$/,'').trim().slice(0,60);

if (!needle) return;

~~// Walk text nodes to find a match~~

var found = findTextInContent(document.querySelector(CONTENT_SEL), needle);

var found = findTextInContent( ~~contentEl~~, needle );

if (!found) return;

if (found) {

var sp = document.createElement('span');

var ~~span~~ = document.createElement('span');

sp.className = 'gra-bookmark-highlight';

~~span~~.className = 'gra-bookmark-highlight';

sp.setAttribute('data-gra-id', b.id);

~~span~~.setAttribute('data-gra-id', b.id);

sp.setAttribute('data-gra-name', b.name);

~~span~~.setAttribute('data-gra-name', b.name);

try { found.surroundContents(sp); } catch(e){}

try {

found.surroundContents(~~span~~);

} catch(e){}

}

});

}

function findTextInContent( root, needle ) {

function findTextInContent(root, needle) {

~~// Returns a Range covering the first occurrence of~~ needle ~~in root's text~~

if (!root || !needle) return null;

var text = root.textContent || '';

var idx = text.indexOf(needle);

if (idx < 0) return null;

~~// Walk to find the exact text nodes~~

var iter = document.createNodeIterator(root, NodeFilter.SHOW_TEXT, null, false);

var pos = 0;

var pos = 0, node, startNode, startOffset, endNode, endOffset;

~~var~~ node, startNode, startOffset, endNode, endOffset;

while ((node = iter.nextNode())) {

var len = node.nodeValue.length;

if (!startNode && pos+len > idx) {

if (!startNode && pos + len > idx) { startNode = node; startOffset = idx - pos; }

startNode = node;

startOffset = idx - pos;

}

var endIdx = idx + needle.length;

if (startNode && pos+len >= endIdx) {

if (startNode && pos + len >= endIdx) { endNode = node; endOffset = endIdx - pos; break; }

endNode = node;

endOffset = endIdx - pos;

break;

}

pos += len;

}

if (!startNode || !endNode) return null;

var ~~range~~ = document.createRange();

try {

~~range~~.setStart(startNode, startOffset);

var r = document.createRange();

~~range~~.setEnd(endNode, endOffset);

r.setStart(startNode, startOffset);

return ~~range~~;

r.setEnd(endNode, endOffset);

return r;

} catch(e){ return null; }

}

// ════════════════════════════════════════════════════════════════════

// REMOVED: injectAnnotationCss(), which JS-injected a defensive

// ~~BOOT~~

// .gra-card-active/.gra-hl-active rule here as a guess, since the real

// ════════════════════════════════════════════════════════════════════

// gr_annotations.css wasn't available at the time. Now that it is,

// confirmed precisely: .gra-hl-active already had working CSS for

// notes and footnotes (that JS rule was unneeded there, though it did

// fill a real gap for bookmarks' .gra-hl-active, which had none at

// all) — and .gra-card-active genuinely only had a rule for

// .gra-note-card, nothing for bookmark or footnote cards, confirming

// that diagnosis exactly. The JS version also risked overriding the

// existing, working note-card style with !important. Fixed directly

// in gr_annotations.css instead — see that file.

$( function () {

$(function() {

_mobile = window.innerWidth < 768 || 'ontouchstart' in window;

window.addEventListener('resize', function(){

_mobile = window.innerWidth < 768 || 'ontouchstart' in window;

});

buildDom();

wireEvents();

~~loadBookmarks();~~

hydrateCitationSources();

~~restoreBookmarkHighlights();~~

// Commentary blocks arrive after the page does, so hydrate again when

~~restoreCommentHighlights~~();

// they land rather than only once at boot.

// ~~Pre-load comment count in background~~

window.addEventListener('gr-new-content', function (e) {

~~loadComments(function(){~~

hydrateCitationSources(e && e.detail && e.detail.container);

// ~~Update tab label with count~~

~~if (_comments~~.~~length > 0) {~~

~~$tabComments~~.~~find~~('~~span.gra~~-~~icon').after(~~

~~' <span style="background:#e53935;color:#fff;border~~-~~radius:9px;~~' +

~~'font-size:10px;padding:0 5px;margin-left:2px;">' + _comments.length + '</span>'~~

);

~~// Update toggle badge~~

~~var $badge = $~~( ~~'#gra-toggle-badge'~~ );

if ( ~~$badge~~.~~length ) $badge~~.~~text( _comments~~.~~length ).css('display','flex'~~);

}

});

} );

function paint() {

try { restoreNoteHighlights(); } catch(e){}

try { restoreBookmarkHighlights(); } catch(e){}

if ($panel.hasClass('gra-panel-open')) switchTab(_activeTab);

updateBadge();

}

// The cache is in place the moment load() returns, so the first paint

// still happens on the old 500 ms timer and feels unchanged. The

// server's answer arrives later and paints again — highlights it adds

// are skipped if already present, so the second pass only fills in what

// the cache did not have: a note made on the phone, or in another

// browser.

var loaded = Store.load();

setTimeout(paint, 500);

loaded.always(paint);

});

// Small count on the toggle, so a reader can tell there is something in

// the panel without opening it — worth having now that notes can arrive

// from another device.

// The count badge is gone. It sat on the round toggle, which clips its

// own overflow to stay circular, so the badge was cut off on every side

// and told the reader nothing they could act on. Kept as a no-op so the

// five call sites that report a change still read clearly.

function updateBadge() { }

}() );

@@ Line 1: / Line 1: @@
 /**
-  * gr_annotations.js  —  grantha.io inline Comments + Bookmarks
+  * gr_annotations.js  —  grantha.io inline Notes + Bookmarks + Footnotes + Feedback  (v6 + Strategy B + Footnotes tab)
- * ══════════════════════════════════════════════════════════════════════
- *
-  * BEHAVIOUR (mirrors Google Docs)
- * ────────────────────────────────
- * 1. User selects text anywhere in mw-content-text.
- * 2. A floating action strip (FAB) appears to the right of the selection
- *    with two icon buttons: Comment and Bookmark.
- * 3. Clicking Comment:
- *    - Opens an inline composer card anchored to the selection position.
- *    - On submit: wraps the selected text in a yellow highlight span,
- *      saves the comment to <PageTitle>/Comments via MW edit API,
- *      posts a notification to the admin user talk page,
- *      and adds a card to the Comments tab of the right panel.
- * 4. Clicking Bookmark:
- *    - Opens a small composer to name the bookmark.
- *    - On submit: wraps selected text in a blue highlight span,
- *      saves bookmark in localStorage (per-user, per-page),
- *      and adds a card to the Bookmarks tab.
- *    - Clicking a bookmark card scrolls to and flashes that highlight.
- * 5. Right panel:
- *    - Slides in from the right as an overlay (no layout shift).
- *    - Tab 1: Comments  (loads from /Comments wiki page)
- *    - Tab 2: Bookmarks (loads from localStorage)
- *    - Panel can be closed via ✕ or clicking the backdrop.
- * 6. Clicking any comment/bookmark highlight in the text:
- *    - Opens the panel to the correct tab and scrolls to the card.
- *
- * STORAGE
- * ───────
- * Comments  → MediaWiki page: Talk:<PageTitle>/GrComments
- *             Talk namespace is excluded from XML/PDF exports and never
- *             shown in the content editor — comments cannot affect exports.
- *             Format: {{GrComment|id=…|author=…|timestamp=…|quote=…|text=…}}
- * Bookmarks → localStorage (per-user, per-page — not shared across users)
- *             Key: grantha_bm_<pageName>
- *
- * ADMIN NOTIFICATION
- * ──────────────────
- * On new comment: sends email via MW EmailUser API (action=emailuser).
- * Email contains the comment text and a direct anchor link to the passage.
- * Fallback: if admin has no email set, posts to User_talk:ADMIN_USER instead.
- * Requires $wgEnableEmail = true and $wgEnableUserEmail = true (MW defaults).
- *
- * DEPENDENCIES
- * ────────────
- * • jQuery (loaded by MediaWiki)
- * • mw.Api  (MediaWiki core)
- * • gr_annotations.css  (companion stylesheet)
- * • /images/commentary.svg, /images/bookmark.svg  (Hostinger)
- *
- * DEPLOY
- * ──────
- * Add both files to MediaWiki:Common.css / Common.js, or register as
- * a gadget in MediaWiki:Gadgets-definition:
- *   GrAnnotations[ResourceLoader|default]|gr_annotations.js|gr_annotations.css
- * ══════════════════════════════════════════════════════════════════════
   */
@@ Line 63: / Line 7: @@
    'use strict';
-  // ── Configuration ────────────────────────────────────────────────────
+   var CONTENT_SEL   = '#mw-content-text';
-   var ADMIN_USER  = 'GranthaGate';   // MW username for talk-page fallback
+   var BM_LS_KEY     = 'grantha_bm_'  + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );
-   var ADMIN_EMAIL = 'admin@grantha.io'; // ← set your email here directly
+   var NT_LS_KEY     = 'grantha_nt_'  + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );
-  var CONTENT_SEL = '#mw-content-text';
+  // Writes that have not reached the server yet. Scoped per user and per
-   var BM_LS_KEY   = 'grantha_bm_'  + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );
+  // page where it is built: the keys above are per page, and a shared
-   var CMT_LS_KEY  = 'grantha_cmt_' + ( ( window.mw && mw.config.get( 'wgPageName' ) ) || '' );
+  // machine has more than one user.
-   var pageTitle   = ( window.mw && mw.config.get( 'wgPageName' ) ) || '';
+  var Q_LS_KEY      = 'grantha_q_v1';
-  /* Comments stored on Talk:<PageTitle>/GrComments — talk namespace is
+   var pageTitle     = ( window.mw && mw.config.get( 'wgPageName' ) ) || '';
-   * excluded from XML/PDF exports and never shown in the content editor,
+   var currentUser   = ( window.mw && mw.config.get( 'wgUserName' ) ) || '';
-   * so comments cannot tamper with document content or affect exports. */
+   var userInitial   = currentUser ? currentUser.charAt( 0 ).toUpperCase() : '?';
-  var commentsPage = 'Talk:' + pageTitle + '/GrComments';
+  var currentUserEmail = '';
-   var currentUser  = ( window.mw && mw.config.get( 'wgUserName' ) ) || '';
-   var userInitial  = currentUser ? currentUser.charAt( 0 ).toUpperCase() : '?';
+  // FIXED: was `new mw.Api()` called directly and synchronously here —
+  // at this point in MediaWiki:Common.js's own load lifecycle,
+  // mediawiki.api (the module that provides the REAL mw.Api
+  // constructor) is not guaranteed to have finished loading yet, and
+  // calling the constructor before it has throws "mw.Api is not a
+  // constructor" synchronously. Confirmed directly via the real error
+  // trace, and confirmed this is pre-existing code, not anything
+  // introduced by the more recent Ullekha/tab changes. Uncaught here
+  // (the .catch below only ever handled promise rejections, never a
+  // synchronous throw from the constructor call itself), this would
+  // halt the REST of this script's own execution — meaning later code
+  // in this same file (the tab-building logic) may never run at all on
+  // whatever page load hits this race. mw.loader.using() guarantees the
+  // module is actually ready before mw.Api is ever touched, regardless
+  // of load timing. Verified the exact failure mode and the fix
+  // directly before applying here.
+  if ( currentUser && window.mw ) {
+    mw.loader.using( 'mediawiki.api' ).then( function () {
+      return new mw.Api().get({ action: 'query', meta: 'userinfo', uiprop: 'email', formatversion: 2 });
+    } ).then( function (data) {
+      var info = data && data.query && data.query.userinfo;
+      if ( info && info.email ) currentUserEmail = info.email;
+    } ).catch( function () {} );
+  }
-  // Only run on content namespaces, not on the /Comments page itself
    if ( window.mw ) {
      var ns = mw.config.get( 'wgNamespaceNumber' );
      if ( ns < 0 ) return;
-    if ( /\/Comments$/.test( pageTitle ) ) return;
    }
-  // ── State ────────────────────────────────────────────────────────────
+   var _selRange   = null;
-  var _sel        = null;   // current Selection snapshot
+   var _selText    = '';
-   var _selRange   = null;   // saved Range for wrapping
+   var _selRect    = null;
-   var _selText    = '';     // selected text string
+   var _notes      = [];
-   var _selRect    = null;   // bounding rect of selection
+   var _bookmarks  = [];
-   var _comments   = [];     // [{id, anchor, author, ts, quote, text}]
+   var _activeTab  = 'notes';
-   var _bookmarks  = [];     // [{id, name, quote, anchorHtml, ts}]
+  var _selVersion = 0;
-   var _cmtLoaded  = false;
+   var _fabSelVer  = -1;
-   var _activeTab  = 'comments';  // 'comments' | 'bookmarks'
+  var _mobile     = window.innerWidth < 768 || 'ontouchstart' in window;
+  var _fabTouched = false;  // flag to prevent hideActions when tapping fab
-  // ── Helpers ──────────────────────────────────────────────────────────
+   function uid() { return 'gra_' + Date.now() + '_' + Math.random().toString(36).slice(2,7); }
-   function uid() {
+  function esc(s) {
-    return 'gra_' + Date.now() + '_' + Math.random().toString(36).slice(2,7);
+    return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;')
+                        .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
-  function esc( s ) {
+   function nowIso() { return new Date().toISOString().replace(/\.\d{3}Z$/,'Z'); }
-    return String( s || '' )
+   function fmtTs(ts) {
-      .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 );
+       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( val, min, max ) { return Math.max(min, Math.min(max, val)); }
+   function clamp(v,lo,hi){ return Math.max(lo,Math.min(hi,v)); }
+  function isMobile() { return _mobile; }
+  // The server caps a note at 8192 *bytes* (MAX_TEXT_BYTES), and Devanagari
+  // runs three bytes to the character, so the real limit is about 2,700
+  // characters — reachable for the kind of thing people write here. Caught
+  // at the composer, because the alternative is a note that looks saved,
+  // sits in the panel all session, and is simply absent the next time the
+  // page is opened.
+  var MAX_NOTE_BYTES = 8192;
+  function byteLength(s) {
+    try { return new TextEncoder().encode(s).length; }
+    catch (e) { return unescape(encodeURIComponent(s)).length; }
+  }
+  /* ══════════════════════ Store ══════════════════════
+   * Notes and bookmarks live in the wiki database, in gr_annotations, via
+   * the GranthaAnnotations extension — which is what lets the same notes
+   * show up in the mobile app. They used to live only in localStorage, so
+   * they were stranded in one browser.
+   *
+   * localStorage does not go away; it changes job. It is now
+   *   · a cache,  so a reload paints the panel instantly instead of waiting
+   *               on the network, and a page read offline still shows notes
+   *   · an outbox mirror, so a write made while offline survives a reload
+   * The database is the record. The browser is a convenience in front of it.
+   *
+   * Anonymous readers have no database row to own, and the API refuses them
+   * outright, so for them localStorage stays the store exactly as before.
+   * Every write is optimistic: memory and cache update first, the panel
+   * re-renders immediately, and the request follows.
+   */
+  var Store = ( function () {
+    var loggedIn = !!currentUser;
+    // Rejections the server will never change its mind about. Anything not
+    // listed here is treated as temporary and retried.
+    var TERMINAL = { badid: 1, notowner: 1, texttoolong: 1, missingparam: 1 };
+    var _api = null;
+    var flushing = null;          // the in-flight flush's promise, or null
+    var outbox = [];              // authoritative in memory; mirrored to LS
+    // mw.Api only exists once mediawiki.api has loaded, and asking for it
+    // sooner throws. Everything that talks to the server waits on this, so a
+    // load failure degrades to cache-and-queue instead of throwing.
+    function ready() {
+      if ( !window.mw || !mw.loader ) return $.Deferred().reject().promise();
+      return mw.loader.using( 'mediawiki.api' ).then( function () {
+        if ( !_api ) _api = new mw.Api();
+        return _api;
+      } );
+    }
+    function ls( k, v ) {
+      try {
+        if ( v === undefined ) return localStorage.getItem( k );
+        localStorage.setItem( k, v );
+        return true;
+      } catch ( e ) { return null; }
+    }
+    function readJson( k, fallback ) {
+      try { return JSON.parse( ls( k ) || '' ) || fallback; } catch ( e ) { return fallback; }
+    }
+    function whoami() { return currentUser || null; }
+    /* ── Outbox ──────────────────────────────────────────────────────
+     * Held in memory and mirrored to localStorage, not held *in* it. A
+     * browser that refuses to store — private mode, quota, policy — used to
+     * mean the write was never sent at all, because the send re-read the
+     * queue it had just failed to write. Now storage only decides whether an
+     * unsent write survives a reload.
+     *
+     * Keyed per user AND per page: the cache keys have always been per page,
+     * so a queue scoped only by user cannot describe them. */
+    function qKey() { return Q_LS_KEY + '_' + ( currentUser || 'anon' ) + '_' + pageTitle; }
+    function mirror() { ls( qKey(), JSON.stringify( outbox ) ); }
+    function enqueue( op ) {
+      // One pending operation per annotation. A note edited twice before the
+      // network returns should send its final state once, not both states in
+      // order, and a delete supersedes any save still waiting behind it.
+      outbox = outbox.filter( function ( x ) { return x.id !== op.id; } );
+      outbox.push( op );
+      mirror();
+    }
+    // Removes the exact operation that was sent, by identity. Matching on
+    // id and op instead would let a completing send delete a *newer*
+    // operation for the same annotation that replaced it mid-flight.
+    function dequeue( op ) {
+      var i = outbox.indexOf( op );
+      if ( i === -1 ) return;
+      outbox.splice( i, 1 );
+      mirror();
+    }
+    function send( op ) {
+      var params = { action: 'granthaannotationedit', op: op.op, id: op.id, format: 'json' };
+      if ( op.op === 'save' ) {
+        params.page = op.page;
+        params.type = op.type;
+        params.quote = op.quote || '';
+        params.text = op.text || '';
+        if ( op.ts ) params.ts = op.ts;
+      }
+      return ready().then( function ( a ) { return a.postWithToken( 'csrf', params ); } );
+    }
+    /* Drain the outbox oldest-first, stopping at the first failure so
+     * ordering is preserved and a server that is down is not hammered. */
+    function flush() {
+      if ( !loggedIn ) return $.Deferred().resolve().promise();
+      // Return the flush already running rather than a fresh resolved
+      // promise: load() waits on this before reading, and handing it an
+      // instantly-resolved promise would let the read race the writes.
+      if ( flushing ) return flushing;
+      if ( !outbox.length ) return $.Deferred().resolve().promise();
+      var d = $.Deferred();
+      flushing = d.promise();
+      ( function step() {
+        if ( !outbox.length ) { flushing = null; d.resolve(); return; }
+        var op = outbox[ 0 ];
+        send( op ).done( function () {
+          dequeue( op );
+          // Guard against a queue that cannot shrink, which would loop
+          // re-POSTing the same row for ever. Checked by identity, not by
+          // length: a note written while this request was in flight makes
+          // the queue longer, and comparing lengths stopped the drain with
+          // that newer write still unsent.
+          if ( outbox.indexOf( op ) !== -1 ) { flushing = null; d.resolve(); return; }
+          step();
+        } ).fail( function ( code ) {
+          // Verdicts the server will never change its mind about. Left at
+          // the head of the queue they block every later write on this page
+          // for ever, so they are dropped and the drain carries on.
+          if ( TERMINAL[ code ] ) {
+            dequeue( op );
+            step();
+            return;
+          }
+          // Anything else — offline, 5xx, session expired — is temporary.
+          // Stop here so ordering is kept and a struggling server is not
+          // hammered; the next write, `online`, or page load retries.
+          flushing = null;
+          d.resolve();
+        } );
+      }() );
+      return flushing;
+    }
+    function write( op ) {
+      if ( !loggedIn ) return;   // nothing to send, and nothing to accumulate
+      enqueue( op );
+      flush();
+    }
+    /* ── public ────────────────────────────────────────────────────── */
+    /* What has been written locally since the last answer from the server.
+     * The outbox alone is not enough to reconcile with: a note written while
+     * the initial read was in flight may well have finished its own POST
+     * first, and would then be gone from the outbox by the time the older
+     * answer arrives — which would take it off the screen and out of the
+     * cache. These two maps outlive the outbox entry and are cleared only
+     * when a read has actually been folded in. */
+    var localSaves = {}, localDeletes = {};
+    function save( type, rec ) {
+      localSaves[ rec.id ] = { type: type, rec: rec };
+      delete localDeletes[ rec.id ];
+      write( {
+        op: 'save', id: rec.id, page: pageTitle, type: type,
+        quote: rec.quote || '', text: type === 'bookmark' ? rec.name : rec.text,
+        ts: rec.ts
+      } );
+    }
+    function remove( id ) {
+      localDeletes[ id ] = true;
+      delete localSaves[ id ];
+      write( { op: 'delete', id: id } );
+    }
+    /* Cache what is on screen, so the next load of this page paints from it
+     * before the network answers.
+     *
+     * The cache records whose it is, for both signed-in and anonymous
+     * readers. The keys are per page, not per user, and always have been, so
+     * without an owner two people sharing a machine would see each other's
+     * notes — and worse, the next person to sign in would have the previous
+     * one's notes uploaded into their account by migrate(). Recording null
+     * for "nobody was signed in" is what makes those two cases tellable
+     * apart from genuinely pre-upgrade data. */
+    function cache() {
+      ls( NT_LS_KEY, JSON.stringify( { u: whoami(), v: _notes } ) );
+      ls( BM_LS_KEY, JSON.stringify( { u: whoami(), v: _bookmarks } ) );
+    }
+    function cached( key ) {
+      var raw = readJson( key, null );
+      if ( !raw ) return [];
+      // A bare array predates this version; only migrate() may claim it.
+      if ( Array.isArray( raw ) ) return [];
+      return ( raw.u === whoami() && Array.isArray( raw.v ) ) ? raw.v : [];
+    }
-  // ── DOM references (populated in boot) ───────────────────────────────
+    function fromCache() {
-   var $fab, $panel, $backdrop, $panelBody;
+      _notes = cached( NT_LS_KEY );
-   var $cmpComposer, $cmpInput, $cmpSubmit;
+      _bookmarks = cached( BM_LS_KEY );
+    }
+    /* ── Claiming ────────────────────────────────────────────────────
+     * Hands over whatever this browser holds with no owner: the bare array
+     * the old gadget wrote, and the anonymous cache this one writes. Both
+     * mean "notes taken on this browser with nobody signed in", which is
+     * what a reader who browsed logged out and then registered has.
+     *
+     * There is no "already migrated" flag, deliberately. A flag has to be
+     * scoped, and every scoping is wrong somewhere: per user alone marked
+     * every page but the first as done; per user and page was set on the
+     * first visit even when there was nothing to hand over, so notes taken
+     * anonymously *afterwards* could never be claimed and were overwritten
+     * on the next sign-in.
+     *
+     * What actually marks the job done is cache(), which replaces the
+     * ownerless value under the same key with an owned one. After a claim
+     * there is nothing left to claim, so a note deleted later on another
+     * device cannot be resurrected by a stale array — and if the browser
+     * refuses to store, re-claiming is harmless anyway, because the ids are
+     * unchanged and the server's save is an upsert. */
+    /* What a signing-in user may claim as their own: the bare array the old
+     * gadget wrote, and the anonymous cache this one writes. Both mean "this
+     * browser's notes, with nobody signed in" — which is what someone who
+     * read logged out and then registered has. Without the second case,
+     * signing in read them as unclaimable, then overwrote them with the
+     * server's empty answer and they were gone for good. */
+    function legacy( key ) {
+      var raw = readJson( key, null );
+      if ( Array.isArray( raw ) ) return raw;
+      if ( raw && raw.u === null && Array.isArray( raw.v ) ) return raw.v;
+      return [];
+    }
+    function migrate() {
+      if ( !loggedIn ) return false;
+      var found = false;
+      legacy( NT_LS_KEY ).forEach( function ( n ) {
+        if ( !n || !n.id ) return;
+        // The old gadget imposed no length limit, so a note from before the
+        // upgrade can be past what the server accepts. Left in, it would sit
+        // at the head of the queue; dropped here, it stays on screen and in
+        // the cache, just not synced.
+        if ( byteLength( n.text || '' ) > MAX_NOTE_BYTES ) return;
+        found = true;
+        enqueue( { op: 'save', id: n.id, page: pageTitle, type: 'note',
+                   quote: n.quote || '', text: n.text || '', ts: n.ts } );
+      } );
+      legacy( BM_LS_KEY ).forEach( function ( b ) {
+        if ( !b || !b.id ) return;
+        found = true;
+        enqueue( { op: 'save', id: b.id, page: pageTitle, type: 'bookmark',
+                   quote: b.quote || '', text: b.name || '', ts: b.ts } );
+      } );
+      return found;
+    }
+    /* ── Reconciliation ──────────────────────────────────────────────
+     * The server's answer describes the moment the request was sent. A note
+     * written while it was in the air, or a delete, is in the outbox and not
+     * in that answer — replacing state wholesale would take it off the
+     * screen and out of the cache, and the reader would watch their note
+     * disappear. So anything still pending is re-applied on top. */
+    function reconcile( notes, marks ) {
+      function apply( list, type ) {
+        var out = list.filter( function ( r ) {
+          return !localDeletes[ r.id ] && !localSaves[ r.id ];
+        } );
+        Object.keys( localSaves ).forEach( function ( id ) {
+          var s = localSaves[ id ];
+          if ( s.type === type ) out.push( s.rec );
+        } );
+        return out;
+      }
+      return { notes: apply( notes, 'note' ), marks: apply( marks, 'bookmark' ) };
+    }
+    /* Fill _notes and _bookmarks. The cache is in place synchronously so the
+     * first paint is instant; the server's answer lands later. */
+    function load() {
+      outbox = readJson( qKey(), [] );
+      if ( !Array.isArray( outbox ) ) outbox = [];
+      if ( !loggedIn ) {
+        // localStorage is the store, not a cache. Accept the owner-stamped
+        // shape and, once, the bare array the old gadget wrote.
+        _notes = cached( NT_LS_KEY );
+        _bookmarks = cached( BM_LS_KEY );
+        if ( !_notes.length ) _notes = legacy( NT_LS_KEY );
+        if ( !_bookmarks.length ) _bookmarks = legacy( BM_LS_KEY );
+        return $.Deferred().resolve( false ).promise();
+      }
+      if ( migrate() ) {
+        // Show what this browser already had straight away. migrate() has
+        // just claimed it for whoever is signed in now, so what is on screen
+        // and what is being sent up are the same set — and a first run that
+        // happens to be offline still shows the reader their notes rather
+        // than an empty panel.
+        _notes = legacy( NT_LS_KEY );
+        _bookmarks = legacy( BM_LS_KEY );
+        cache();
+      } else {
+        fromCache();
+      }
+      var d = $.Deferred();
+      var rows = [];
+      // 500 is the server's maximum page size, and it orders newest first —
+      // so a reader with more than that on one page would silently lose
+      // their *oldest* annotations from the panel and from the cache.
+      // Follow the continuation until it stops rather than assuming nobody
+      // will get there.
+      function fetchFrom( offset ) {
+        return ready().then( function ( a ) {
+          var params = {
+            action: 'granthaannotations', page: pageTitle,
+            limit: 500, formatversion: 2, format: 'json'
+          };
+          if ( offset ) params[ 'continue' ] = offset;
+          return a.get( params );
+        } ).then( function ( data ) {
+          var block = data && data.granthaannotations;
+          var got = block && block.annotations;
+          if ( Array.isArray( got ) ) rows = rows.concat( got );
+          // The module reports its own continuation, inside its own result.
+          var next = block && block[ 'continue' ];
+          // Guard against a server that keeps handing back the same offset.
+          if ( next !== undefined && next !== null && String( next ) !== String( offset ) &&
+               rows.length < 5000 ) {
+            return fetchFrom( next );
+          }
+          return rows;
+        } );
+      }
+      flush().always( function () {
+        fetchFrom( null ).done( function () {
+          var notes = [], marks = [];
+          rows.forEach( function ( r ) {
+            if ( r.type === 'bookmark' ) {
+              marks.push( { id: r.id, name: r.text, quote: r.quote, ts: r.ts } );
+            } else {
+              notes.push( { id: r.id, ts: r.ts, quote: r.quote, text: r.text } );
+            }
+          } );
+          // The server returns newest first; the panel reverses for display,
+          // so hold them oldest-first the way the local arrays always were.
+          var merged = reconcile( notes.reverse(), marks.reverse() );
+          _notes = merged.notes;
+          _bookmarks = merged.marks;
+          // Folded in, so the local record of what has changed since can
+          // start again. Anything still unsent stays in the outbox.
+          localSaves = {}; localDeletes = {};
+          cache();
+          d.resolve( true );
+        } ).fail( function () {
+          // Offline, or the extension is not installed. The cache already
+          // loaded, and anything written meanwhile is queued.
+          d.resolve( false );
+        } );
+      } );
+      return d.promise();
+    }
+    if ( loggedIn && window.addEventListener ) {
+      window.addEventListener( 'online', function () { flush(); } );
+    }
+    return { load: load, save: save, remove: remove, cache: cache, flush: flush,
+             isRemote: function () { return loggedIn; } };
+  }() );
+   var $fab, $mobileBar, $panel, $backdrop;
+   var $ntComposer, $ntInput, $ntSubmit;
    var $bmComposer, $bmInput, $bmSubmit;
-   var $tabComments, $tabBookmarks;
+   var $fbComposer, $fbIssueType, $fbText, $fbEmail, $fbSubmit, $fbQuote;
-   var $paneComments, $paneBookmarks;
+   // CHANGED: added $tabFootnotes / $paneFootnotes alongside the existing
+  // Notes/Bookmarks tab+pane refs, for the Footnotes tab. REMOVED: the
-   // ════════════════════════════════════════════════════════════════════
+  // earlier $tabSandarbha/$paneSandarbha — that feature was replaced by
-   // DOM BUILDER
+   // the real Ullekha citation-index mechanism (see quickedit.js), which
-   // ════════════════════════════════════════════════════════════════════
+   // works entirely through common.js's own site-wide logic and needs no
+   // panel integration here at all.
+  var $tabNotes, $tabBookmarks, $tabFootnotes, $paneNotes, $paneBookmarks, $paneFootnotes;
    function buildDom() {
-    // ── Floating action strip ────────────────────────────────────────
      $fab = $( [
-       '<div id="gra-fab">',
+       '<div id="gra-fab" role="toolbar" aria-label="Feedback / Notes / Bookmark">',
-       '  <button class="gra-fab-btn" id="gra-fab-comment" type="button">',
+      '  <button class="gra-fab-btn" id="gra-fab-note" type="button" aria-label="Note">',
-       '    <span class="gra-icon gra-icon-comment"></span>',
+      '    <span class="gra-icon gra-icon-note" aria-hidden="true"></span>',
-       '    <span class="gra-fab-tooltip">Add comment</span>',
+      '    <span class="gra-fab-btn-label">Note</span>',
+      '  </button>',
+       '  <button class="gra-fab-btn" id="gra-fab-bookmark" type="button" aria-label="Mark">',
+       '    <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',
+       '    <span class="gra-fab-btn-label">Mark</span>',
+      '  </button>',
+      '  <button class="gra-fab-btn" id="gra-fab-feedback" type="button" aria-label="Feedback">',
+      '    <span class="gra-icon gra-icon-feedback" aria-hidden="true"></span>',
+      '    <span class="gra-fab-btn-label">Feedback</span>',
+      '  </button>',
+      '  <button class="gra-fab-btn" id="gra-fab-search" type="button" aria-label="Search">',
+      '    <span class="gra-icon gra-icon-search" aria-hidden="true"></span>',
+      '    <span class="gra-fab-btn-label">Search</span>',
        '  </button>',
-       '  <button class="gra-fab-btn" id="gra-fab-bookmark" type="button">',
+       '  <button class="gra-fab-btn gra-fab-btn-dismiss" id="gra-fab-dismiss" type="button" aria-label="Dismiss">',
-       '    <span class="gra-icon gra-icon-bookmark"></span>',
+       '    <span class="gra-icon gra-icon-dismiss" aria-hidden="true"></span>',
-       '    <span class="gra-fab-tooltip">Bookmark</span>',
+       '    <span class="gra-fab-btn-label">Close</span>',
        '  </button>',
        '</div>',
      ].join('') );
-     $( 'body' ).append( $fab );
+     $('body').append($fab);
+    $mobileBar = $('<div id="gra-mobile-bar"></div>');
+    $('body').append($mobileBar);
-     // ── Comment composer card ────────────────────────────────────────
+     $fbComposer = $( [
-     $cmpComposer = $( [
+      '<div class="gra-composer" id="gra-fb-composer" role="dialog" aria-label="Send feedback">',
-       '<div class="gra-composer" id="gra-cmp-composer">',
+      '  <div class="gra-composer-header">',
+      '    <span class="gra-icon gra-icon-feedback" aria-hidden="true"></span>',
+      '    <strong>Feedback</strong>',
+      '    <button class="gra-btn-x" id="gra-fb-close" title="Close">✕</button>',
+      '  </div>',
+      '  <div class="gra-fb-quote-label">Selected text:</div>',
+      '  <div class="gra-fb-quote" id="gra-fb-quote"></div>',
+      '  <div class="gra-fb-field-label">Issue type</div>',
+      '  <select class="gra-fb-select" id="gra-fb-issue">',
+      '    <option value="">— Choose —</option>',
+      '    <option value="wrong_text">Formatting error</option>',
+      '    <option value="reference_issue">Reference issue</option>',
+      '    <option value="spelling_mistake">Spelling mistake</option>',
+      '    <option value="other">Other</option>',
+      '  </select>',
+      '  <div class="gra-fb-field-label">Details (optional)</div>',
+      '  <textarea class="gra-composer-input" id="gra-fb-text" placeholder="Describe the issue…" rows="3"></textarea>',
+      '  <div class="gra-fb-field-label">Your email (optional)</div>',
+      '  <input class="gra-composer-input gra-fb-email-input" id="gra-fb-email" type="email" placeholder="you@example.com" autocomplete="email">',
+      '  <div class="gra-composer-actions">',
+      '    <button class="gra-btn-cancel" id="gra-fb-cancel">Cancel</button>',
+      '    <button class="gra-btn-submit" id="gra-fb-submit" disabled>Send</button>',
+      '  </div>',
+      '  <div class="gra-fb-status" id="gra-fb-status"></div>',
+      '</div>',
+    ].join('') );
+     $('body').append($fbComposer);
+    $ntComposer = $( [
+       '<div class="gra-composer" id="gra-nt-composer" role="dialog" aria-label="Add note">',
        '  <div class="gra-composer-user">',
-       '    <div class="gra-avatar" id="gra-cmp-avatar">' + esc(userInitial) + '</div>',
+       '    <div class="gra-avatar">' + esc(currentUser ? userInitial : '✎') + '</div>',
-       '    <div class="gra-composer-name" id="gra-cmp-name">' + esc(currentUser || 'Anonymous') + '</div>',
+       '    <div class="gra-composer-uname">' + esc(currentUser || 'Notes') + '</div>',
        '  </div>',
-      '  <div class="gra-quick-chips" id="gra-quick-chips">',
+       '  <textarea class="gra-composer-input" id="gra-nt-input" placeholder="Write a note…" rows="3"></textarea>',
-      '    <button class="gra-chip" data-val="Spelling mistake" type="button">Spelling mistake</button>',
-      '    <button class="gra-chip" data-val="Reference error" type="button">Reference error</button>',
-      '    <button class="gra-chip" data-val="Others" type="button">Others ▾</button>',
-      '  </div>',
-       '  <textarea class="gra-composer-input" id="gra-cmp-input"',
-      '    placeholder="Describe the issue…" rows="3"',
-      '    style="display:none"></textarea>',
        '  <div class="gra-composer-actions">',
-       '    <button class="gra-btn-cancel" id="gra-cmp-cancel">Cancel</button>',
+       '    <button class="gra-btn-cancel" id="gra-nt-cancel">Cancel</button>',
-       '    <button class="gra-btn-submit" id="gra-cmp-submit" disabled>Comment</button>',
+       '    <button class="gra-btn-submit" id="gra-nt-submit" disabled>Save Note</button>',
        '  </div>',
        '</div>',
      ].join('') );
+    $('body').append($ntComposer);
-    // ── Bookmark composer card ────────────────────────────────────────
      $bmComposer = $( [
-       '<div class="gra-bm-composer" id="gra-bm-composer">',
+       '<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"></span>',
+       '    <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span>',
        '    Save bookmark',
        '  </div>',
-       '  <input class="gra-composer-input" id="gra-bm-input"',
+       '  <input class="gra-composer-input" id="gra-bm-input" type="text" placeholder="Name this bookmark…" autocomplete="off">',
-      '    type="text" placeholder="Bookmark name…" autocomplete="off">',
        '  <div class="gra-composer-actions">',
        '    <button class="gra-btn-cancel" id="gra-bm-cancel">Cancel</button>',
@@ Line 181: / Line 554: @@
        '</div>',
      ].join('') );
-     $( 'body' ).append( $bmComposer );
+     $('body').append($bmComposer);
-    // ── Right panel ───────────────────────────────────────────────────
      $panel = $( [
-       '<div id="gra-panel">',
+       '<div id="gra-panel" role="complementary" aria-label="Notes">',
        '  <div id="gra-panel-head">',
-       '    <div></div>',
+       '    <div id="gra-panel-title"></div>',
-       '    <button id="gra-panel-close" title="Close panel">✕</button>',
+       '    <button id="gra-panel-close" title="Close">✕</button>',
        '  </div>',
        '  <div id="gra-tabs">',
-       '    <button class="gra-tab gra-tab-active" id="gra-tab-comments">',
+       '    <button class="gra-tab gra-tab-active" id="gra-tab-notes">',
-       '      <span class="gra-icon gra-icon-comment"></span> Comments',
+       '      <span class="gra-icon gra-icon-note" aria-hidden="true"></span> Notes',
        '    </button>',
        '    <button class="gra-tab" id="gra-tab-bookmarks">',
-       '      <span class="gra-icon gra-icon-bookmark"></span> Bookmarks',
+       '      <span class="gra-icon gra-icon-bookmark" aria-hidden="true"></span> Bookmarks',
+      '    </button>',
+      '    <button class="gra-tab" id="gra-tab-footnotes">',
+      '      <span class="gra-icon gra-icon-footnote" aria-hidden="true"></span> Footnotes',
        '    </button>',
        '  </div>',
        '  <div id="gra-panel-body">',
-       '    <div class="gra-pane gra-pane-active" id="gra-pane-comments"></div>',
+       '    <div class="gra-pane gra-pane-active" id="gra-pane-notes"></div>',
-       '    <div class="gra-pane"              id="gra-pane-bookmarks"></div>',
+       '    <div class="gra-pane" id="gra-pane-bookmarks"></div>',
+      '    <div class="gra-pane" id="gra-pane-footnotes"></div>',
        '  </div>',
        '</div>',
      ].join('') );
-     $( 'body' ).append( $panel );
+     $('body').append($panel);
-    // Backdrop
+     $backdrop = $('<div id="gra-backdrop" aria-hidden="true"></div>');
-     $backdrop = $('<div id="gra-backdrop"></div>');
+     $('body').append($backdrop);
-     $( 'body' ).append( $backdrop );
-    // Persistent toggle button — always visible, opens the panel
      var $toggle = $( [
-       '<button id="gra-toggle" title="Comments &amp; Bookmarks">',
+       '<button id="gra-toggle" aria-label="Notes">',
-       '  <span class="gra-icon gra-icon-comment" id="gra-toggle-icon"></span>',
+       '  <span class="gra-icon gra-icon-note" id="gra-toggle-icon" aria-hidden="true"></span>',
-      '  <span id="gra-toggle-badge"></span>',
        '</button>',
      ].join('') );
-     $( 'body' ).append( $toggle );
+     $('body').append($toggle);
-     $toggle.on( 'click', function() {
+     $toggle.on('click', function() {
-       if ( $panel.hasClass('gra-panel-open') ) {
+       $panel.hasClass('gra-panel-open') ? closePanel() : openPanel(_activeTab);
-        closePanel();
+     });
-      } else {
-        openPanel( _activeTab );
-      }
-     } );
-    // Cache references
+     $('#gra-panel-title').text(pageTitle.replace(/_/g,' ').split('/')[0].slice(0,30));
-     $panelBody     = $( '#gra-panel-body' );
+    $tabNotes     = $('#gra-tab-notes');
-    // Set panel title to page name
+    $tabBookmarks = $('#gra-tab-bookmarks');
-    $( '#gra-panel-head div' ).first()
+     $tabFootnotes = $('#gra-tab-footnotes');
-      .text( pageTitle.replace(/_/g,' ').split('/')[0].slice(0,30) )
+     $paneNotes    = $('#gra-pane-notes');
-      .css({ 'font-size':'13px', 'font-weight':'600', 'color':'#5a3a00' });
+     $paneBookmarks= $('#gra-pane-bookmarks');
-     $tabComments   = $( '#gra-tab-comments' );
+     $paneFootnotes= $('#gra-pane-footnotes');
-     $tabBookmarks  = $( '#gra-tab-bookmarks' );
+     $ntInput      = $('#gra-nt-input');
-     $paneComments  = $( '#gra-pane-comments' );
+     $ntSubmit     = $('#gra-nt-submit');
-     $paneBookmarks = $( '#gra-pane-bookmarks' );
+     $bmInput      = $('#gra-bm-input');
-     $cmpInput      = $( '#gra-cmp-input' );
+     $bmSubmit     = $('#gra-bm-submit');
-     $cmpSubmit     = $( '#gra-cmp-submit' );
+    $fbIssueType  = $('#gra-fb-issue');
-     $bmInput       = $( '#gra-bm-input' );
+    $fbText       = $('#gra-fb-text');
-     $bmSubmit      = $( '#gra-bm-submit' );
+    $fbEmail      = $('#gra-fb-email');
+    $fbSubmit     = $('#gra-fb-submit');
+    $fbQuote      = $('#gra-fb-quote');
+  }
-     // Disable comment submit when not logged in
+  function captureSelection() {
-     if ( !currentUser ) {
+     var sel = window.getSelection();
-      $cmpSubmit.prop( 'disabled', true );
+     if (!sel || sel.isCollapsed || !sel.rangeCount) return false;
-      $cmpComposer.find( '.gra-composer-actions' )
+    var range = sel.getRangeAt(0);
-        .prepend( '<a href="' + esc( mw ? mw.util.getUrl('Special:UserLogin') : '/wiki/Special:UserLogin' ) +
+    var text  = sel.toString().trim();
-                  '" style="font-size:11px;color:#999;margin-right:auto">Log in to comment</a>' );
+    if (!text || text.length < 2) return false;
-     }
+    var contentEl = document.querySelector(CONTENT_SEL);
+    if (!contentEl) return false;
+    var ancestor = range.commonAncestorContainer;
+    if (ancestor.nodeType === 3) ancestor = ancestor.parentNode;
+    if (!ancestor || !contentEl.contains(ancestor)) return false;
+    var _editorEl = document.getElementById('se-surface') ||
+                    document.querySelector('.se-outer');
+    if ( _editorEl && _editorEl.contains(ancestor) ) return false;
+    if ( document.body.classList.contains('gra-editing') ) return false;
+    _selText  = text;
+    _selRect  = range.getBoundingClientRect();
+    try { _selRange = range.cloneRange(); }
+     catch(e){ _selRange = null; }
+    return true;
    }
-   // ════════════════════════════════════════════════════════════════════
+   function reCaptureFromDOM() {
-  // FLOATING ACTION STRIP — position & show/hide
+    if (!_selText) return false;
-   // ════════════════════════════════════════════════════════════════════
+    var contentEl = document.querySelector(CONTENT_SEL);
+    if (!contentEl) return false;
+    var found = findTextInContent(contentEl, _selText.slice(0,80).replace(/…$/,'').trim());
+    if (!found) return false;
+    _selRange = found;
+    return true;
+   }
-   function showFab( rect ) {
+   function tryShowActions() {
-     if ( !rect ) return;
+     if ($fbComposer && $fbComposer.hasClass('gra-composer-visible')) return;
-     // FAB uses position:fixed — coords are viewport-relative (no scroll offset needed).
+     if ($ntComposer && $ntComposer.hasClass('gra-composer-visible')) return;
-     // Place strip to the right of the selection; if it would go off-screen, place to the left.
+     if ($bmComposer && $bmComposer.hasClass('gra-composer-visible')) return;
-    var fabW = 46; var fabH = 84;
+     if (!captureSelection()) { hideActions(); return; }
-     var top  = rect.top + ( rect.height / 2 ) - ( fabH / 2 );
+     _fabSelVer = _selVersion;
-     var left = rect.right + 10;
+    showFab(_selRect);
+  }
-     // If too close to right edge, flip to left of selection
+  function showFab(rect) {
-     if ( left + fabW > window.innerWidth - 8 ) {
+    if (!rect) return;
-       left = rect.left - fabW - 10;
+     var fabW, fabH, top, left;
+     if (_mobile) {
+       $fab.css({ position: '', top: '', left: '', visibility: '' })
+          .addClass('gra-fab-visible gra-fab-mobile-docked');
+      return;
      }
-     // Clamp vertically within viewport
+     fabW = 46; fabH = 126;
-     top = clamp( top, 8, window.innerHeight - fabH - 8 );
+    top  = rect.top + (rect.height / 2) - (fabH / 2);
-    // Clamp horizontally
+    left = rect.right + 10;
-     left = clamp( left, 8, window.innerWidth - fabW - 8 );
+    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() {
+   function hideFab() { $fab.removeClass('gra-fab-visible gra-fab-mobile-docked'); }
-    $fab.removeClass('gra-fab-visible');
+  function hideActions() { hideFab(); }
+  function wrapSelection(id, cssClass) {
+    var range = _selRange;
+    _selRange = null;
+    if (!range) return null;
+    try {
+      if (!document.contains(range.startContainer) ||
+          !document.contains(range.endContainer)) return null;
+    } catch(e) { return null; }
+    function makeSpan() {
+      var sp = document.createElement('span');
+      sp.className = cssClass;
+      sp.setAttribute('data-gra-id', id);
+      return sp;
+    }
+    try {
+      var span = makeSpan();
+      range.surroundContents(span);
+      if (span.parentNode) return span;
+    } catch(e) {}
+    try {
+      var frag = range.extractContents();
+      var sp2  = makeSpan();
+      sp2.appendChild(frag);
+      range.insertNode(sp2);
+      if (sp2 && sp2.parentNode) return sp2;
+    } catch(e2) {}
+    return null;
    }
-   // ════════════════════════════════════════════════════════════════════
+   function openFeedbackComposer() {
-  // SELECTION HANDLING
+    hideActions();
-   // ════════════════════════════════════════════════════════════════════
+    $fbQuote.text(_selText.slice(0,200) + (_selText.length > 200 ? '…' : ''));
+    $fbIssueType.val('');
+    $fbText.val('');
+    $fbSubmit.prop('disabled', true);
+    $('#gra-fb-status').text('').removeClass('gra-fb-ok gra-fb-err');
+    if (currentUserEmail) $fbEmail.val(currentUserEmail);
+    else $fbEmail.val('');
+    if (!_mobile) $fbComposer.css({top:'', left:'', transform:''});
+    $fbComposer.addClass('gra-composer-visible');
+    $backdrop.addClass('gra-backdrop-visible');
+    setTimeout(function(){ $fbIssueType.focus(); }, isMobile() ? 300 : 0);
+   }
-   function captureSelection() {
+   function closeFeedbackComposer() {
-     var sel = window.getSelection();
+     $fbComposer.removeClass('gra-composer-visible');
-     if ( !sel || sel.isCollapsed || !sel.rangeCount ) return false;
+     $backdrop.removeClass('gra-backdrop-visible');
+    _selRange = null; _selText = ''; _selRect = null;
+  }
-     var range    = sel.getRangeAt(0);
+  function submitFeedback() {
-     var text     = sel.toString().trim();
+    var issueType = $fbIssueType.val();
-     if ( !text || text.length < 2 ) return false;
+     var details   = $fbText.val().trim();
+     var email     = $fbEmail.val().trim();
+    var quote     = $fbQuote.text();
+     if (!issueType) return;
+    $fbSubmit.prop('disabled', true).text('Sending…');
+    $('#gra-fb-status').text('').removeClass('gra-fb-ok gra-fb-err');
+    var issueLabels = {
+      wrong_text: 'Formatting error', reference_issue: 'Reference issue',
+      spelling_mistake: 'Spelling mistake', other: 'Other'
+    };
+    var payload = new FormData();
+    payload.append('issue_type',    issueLabels[issueType] || issueType);
+    payload.append('page',          pageTitle.replace(/_/g,' '));
+    payload.append('url',           window.location.href);
+    payload.append('selected_text', quote);
+    payload.append('details',       details || '');
+    payload.append('user_email',    email || currentUserEmail || '');
+    payload.append('wiki_user',     currentUser || 'anonymous');
+    fetch('/feedback.php', {method:'POST', body:payload})
+      .then(function(r){ return r.json(); })
+      .then(function(data){
+        if (data && data.ok) showFeedbackSuccess();
+        else showFeedbackError(data && data.error ? data.error : 'Could not send.');
+      })
+      .catch(function(){ showFeedbackError('Network error. Please try again.'); });
+  }
-    // Must be inside mw-content-text
+  function showFeedbackSuccess() {
-     var contentEl = document.querySelector( CONTENT_SEL );
+     $fbSubmit.prop('disabled', false).text('Send');
-     if ( !contentEl ) return false;
+     $('#gra-fb-status').text('✓ Feedback sent. Thank you!').addClass('gra-fb-ok');
-     var startEl = range.commonAncestorContainer;
+     setTimeout(closeFeedbackComposer, 2500);
-     if ( startEl.nodeType === 3 ) startEl = startEl.parentNode;
+  }
-     if ( !contentEl.contains( startEl ) ) return false;
+  function showFeedbackError(msg) {
+     $fbSubmit.prop('disabled', false).text('Send');
+     $('#gra-fb-status').text('✗ ' + msg).addClass('gra-fb-err');
+  }
-     _selText  = text;
+  function openNoteComposer() {
-     _selRange = range.cloneRange();
+     hideActions();
-     _selRect  = range.getBoundingClientRect();
+     if (!_mobile) $ntComposer.css({ top: '', left: '', transform: '' });
-     return true;
+     $ntComposer.addClass('gra-composer-visible');
+     $backdrop.addClass('gra-backdrop-visible');
+    setTimeout(function(){ $ntInput.focus(); }, isMobile() ? 300 : 0);
    }
-   // ════════════════════════════════════════════════════════════════════
+   function closeNoteComposer() {
-  // COMPOSER POSITIONING
+    $ntComposer.removeClass('gra-composer-visible');
-   // ════════════════════════════════════════════════════════════════════
+    $backdrop.removeClass('gra-backdrop-visible');
+    $ntInput.val('');
+    $ntSubmit.prop('disabled', true);
+    _selRange = null; _selText = ''; _selRect = null;
+   }
-   function positionComposer( $el ) {
+   function submitNote() {
-    if ( !_selRect ) return;
+     var text = $ntInput.val().trim();
-    // position:fixed — viewport coords only
+     if (!text) return;
-     var top  = _selRect.bottom + 8;
+     if (byteLength(text) > MAX_NOTE_BYTES) {
-    var left = _selRect.left;
+       alert('This note is too long to save — please shorten it.');
-     // Keep composer within viewport
+      return;
-    var composerW = 308;
-     if ( left + composerW > window.innerWidth - 8 ) {
-       left = window.innerWidth - composerW - 8;
      }
-     left = Math.max( left, 8 );
+     var id    = uid();
-     // If composer would appear below viewport, show above selection instead
+    var ts    = nowIso();
-     if ( top + 160 > window.innerHeight ) {
+    var quote = _selText.slice(0,120) + (_selText.length > 120 ? '…' : '');
-      top = _selRect.top - 170;
+    if (!_selRange && _selText) reCaptureFromDOM();
-     }
+     var span  = wrapSelection(id, 'gra-note-highlight');
-     top = Math.max( top, 8 );
+     if (span) span.setAttribute('data-gra-quote', quote);
-     $el.css({ top: top + 'px', left: left + 'px' });
+    var rec = {id:id, ts:ts, quote:quote, text:text};
+     _notes.push(rec);
+     Store.cache();
+     Store.save('note', rec);
+    renderNoteCards(); updateBadge();
+    closeNoteComposer();
+    openPanel('notes');
    }
-  // ════════════════════════════════════════════════════════════════════
-  // WRAP SELECTION IN HIGHLIGHT SPAN
-  // ════════════════════════════════════════════════════════════════════
-   function wrapSelection( id, cssClass ) {
+   /* ── SHAREABLE CITATION ────────────────────────────────────────────
-    if ( !_selRange ) return null;
+     A bookmark is personal, but what it produces is not: a reference in
-    try {
+     APA form plus a link that resolves for anyone.
-      var span = document.createElement('span');
-      span.className = cssClass;
+     The link cannot point at the bookmark itself. A bookmark wraps the
-      span.setAttribute('data-gra-id', id);
+     reader's own selection in a span with an id generated in their
-      _selRange.surroundContents( span );
+     browser; that span is never saved to the page, so #<bookmark-id>
-      return span;
+     resolves for nobody else. The citation therefore anchors to the
-    } catch ( e ) {
+     nearest enclosing block that the PUBLISHED page carries an id for -
-      // surroundContents fails for multi-element selections;
+     the same ids copyId.js links to, and the same ones cross-references
-      // extract and wrap the fragment
+     across the site already use.
-      try {
-        var frag = _selRange.extractContents();
+     APA 7th, for a work on a website with no date:
-        var span2 = document.createElement('span');
+       Author. (n.d.). Title (Locator). Site. Retrieved D Month Y, from URL
-        span2.className = cssClass;
+     n.d. because these works carry no publication date, and a retrieval
-        span2.setAttribute('data-gra-id', id);
+     date because a wiki page can change. The block reference is given as
-        span2.appendChild( frag );
+     a parenthetical locator after the title, which is where APA puts a
-        _selRange.insertNode( span2 );
+     section or part designation. */
-        return span2;
-       } catch(e2) { return null; }
+  var CITE_BLOCK_SEL = '.verse-block[id], .bhashyam-block[id], .teeka-block[id], ' +
+                       '[data-block-id][id], .gr-apparatus[id], .shloka[id]';
+  function citeAnchorFor(node) {
+    var el = node && node.nodeType === 3 ? node.parentNode : node;
+    while (el && el !== document.body) {
+      if (el.matches && el.matches(CITE_BLOCK_SEL)) return el;
+       el = el.parentNode;
      }
+    return null;
    }
-   // ════════════════════════════════════════════════════════════════════
+   // Walks up from the cited block: an interleaved commentary block states
-   // COMMENT FLOW
+   // its own work, otherwise the page's title element does.
-   // ════════════════════════════════════════════════════════════════════
+   // A reference written in English cites the work in IAST, so prefer the
+  // transliterated forms the library supplies and keep Devanagari as the
+  // fallback. common.js writes the library's values onto .gr-doc-title as
+  // soon as they arrive, so reading the DOM here always gets the current
+  // names without this module knowing the library exists.
+  function citeSourceFor(el) {
+    var n = el;
+    while (n && n !== document.body) {
+      if (n.getAttribute && n.getAttribute('data-cite-title')) {
+        return {
+          author: n.getAttribute('data-cite-author-iast') ||
+                  n.getAttribute('data-cite-author') || '',
+          title:  n.getAttribute('data-cite-title-iast') ||
+                  n.getAttribute('data-cite-title') || '',
+          page:   n.getAttribute('data-cite-page') || ''
+        };
+      }
+      n = n.parentNode;
+    }
+    var t = document.querySelector('.gr-doc-title');
+    return {
+      author: (t && (t.getAttribute('data-author-iast') ||
+                     t.getAttribute('data-author'))) || '',
+      title:  (t && (t.getAttribute('data-doc-title-iast') ||
+                     t.getAttribute('data-doc-title') ||
+                     t.textContent.trim())) || document.title,
+      page:   (window.mw && mw.config.get('wgPageName')) || '',
+      scheme: (t && t.getAttribute('data-locator-scheme')) || ''
+    };
+  }
-   function openCommentComposer() {
+  // Any block carrying a library id gets its author/title filled in from
-     hideFab();
+  // the library, whether common.js injected it or the page was built with
-     positionComposer( $cmpComposer );
+  // it already in place. Doing it here rather than only at injection time
-     $cmpComposer.addClass('gra-composer-visible');
+  // means a citation never depends on which path put the block on screen.
-    // Don't focus the textarea — it's hidden until "Others" chip is selected.
+   function hydrateCitationSources(root) {
-    // Focus the composer container so Escape key works.
+     if (!window.grLibrary) return;
-     $cmpComposer[0].focus && $cmpComposer[0].setAttribute('tabindex', '-1');
+     var nodes = (root || document).querySelectorAll('[data-cite-grantha-id]');
+     Array.prototype.forEach.call(nodes, function (el) {
+      if (el.getAttribute('data-cite-hydrated')) return;
+      var gid = el.getAttribute('data-cite-grantha-id');
+      if (!gid) return;
+      el.setAttribute('data-cite-hydrated', '1');
+      window.grLibrary.lookup(gid).then(function (g) {
+        if (!g) return;
+        if (g.name)       el.setAttribute('data-cite-title', g.name);
+        if (g.nameIAST)   el.setAttribute('data-cite-title-iast', g.nameIAST);
+        if (g.author)     el.setAttribute('data-cite-author', g.author);
+        if (g.authorIAST) el.setAttribute('data-cite-author-iast', g.authorIAST);
+      });
+    });
    }
-   function closeCommentComposer() {
+  // ── LOCATOR ─────────────────────────────────────────────────────────
-     $cmpComposer.removeClass('gra-composer-visible');
+  // "KKN_C01_S01_V03" is a build artefact, not a reference. A reader
-     $( '#gra-quick-chips .gra-chip' ).removeClass('gra-chip-active');
+  // citing it wants 1.1.3, and ideally to be told that those numbers are
-    $cmpInput.hide().val('');
+  // adhyaya, valli and mantra. The page declares the division names it
-    $cmpSubmit.prop('disabled', true);
+  // knows (data-locator-scheme); where it declares none we still give the
-    _selRange = null;
+  // dotted form, which is correct for every text - it is only the NAMES
-     _selText  = '';
+  // of the divisions that vary from work to work.
-     _selRect  = null;
+   function parseScheme(s) {
+     var out = {};
+     (s || '').split(',').forEach(function (pair) {
+      var i = pair.indexOf('=');
+      if (i > 0) out[pair.slice(0, i).trim()] = pair.slice(i + 1).trim();
+     });
+     return out;
    }
-   function submitComment() {
+   // Segments that qualify the passage rather than number it: _B01 is the
-    var text  = $cmpInput.val().trim();
+  // first paragraph of the bhashya ON that verse, and a bare letter with
-    if ( !text || !currentUser ) return;
+  // no number (Katha's "_I_" for an introduction) marks a position, not a
-    var id    = uid();
+  // division. A NUMBERED segment is always part of the path - in
-    var ts    = nowIso();
+  // RG_C01_I01_V01 the I is a sukta, and reading it as Katha's
-    var quote = _selText.slice(0, 120) + ( _selText.length > 120 ? '…' : '' );
+  // introduction marker turned 1.1.1 into "1.1, Sukta 1".
+  function isQualifier(k, n) { return k === 'B' || !n; }
-     // Wrap text in highlight span
+  function parseLocator(id) {
-     var span = wrapSelection( id, 'gra-comment-highlight' );
+     if (!id) return null;
-    if ( span ) span.setAttribute('data-gra-quote', quote);
+     var segs = String(id).split('_');
+    var path = [], qual = [];
+    for (var i = 1; i < segs.length; i++) {
+      var m = /^([A-Za-z]+)(\d*)$/.exec(segs[i]);
+      if (!m) continue;
+      var k = m[1].toUpperCase(), n = m[2] ? String(parseInt(m[2], 10)) : '';
+      (isQualifier(k, n) ? qual : path).push({ k: k, n: n });
+    }
+    if (!path.length && !qual.length) return null;
+    return { path: path, qual: qual };
+  }
-    // Save locally
+  function locatorText(id, scheme) {
-     var entry = { id:id, author:currentUser, ts:ts, quote:quote, text:text };
+     var p = parseLocator(id);
-    _comments.push( entry );
+    if (!p) return { numeric: id || '', spelled: '' };
-     // Persist highlight anchor so it survives page refresh
+    var labels = parseScheme(scheme);
-     persistCommentHighlight( id, quote );
+    var numeric = p.path.map(function (s) { return s.n; }).filter(Boolean).join('.');
+    var spelledParts = p.path.map(function (s) {
+      return labels[s.k] ? labels[s.k] + ' ' + s.n : null;
+    });
+    var spelled = spelledParts.indexOf(null) === -1 ? spelledParts.join(', ') : '';
+    p.qual.forEach(function (s) {
+      var lab = labels[s.k] ||
+                (s.k === 'B' ? 'bhāṣya' : (s.k === 'I' ? 'intro' : s.k));
+      var bit = lab + (s.n ? ' ' + s.n : '');
+      numeric += (numeric ? ', ' : '') + bit;
+      if (spelled) spelled += ', ' + bit;
+     });
+     return { numeric: numeric || id, spelled: spelled };
+  }
-    // Persist to wiki
+  // Version stamp, so it is possible to tell from the browser console
-    saveCommentToWiki( id, quote, text, ts );
+  // which build of this gadget a page is actually running. Check with
-    notifyAdmin( _activeId || '', quote, text, ts );
+  //   window.grAnnotationsVersion
+  // APA 7 asks for a retrieval date only when the content is designed to
+  // change and is not archived. These are settled texts with a fixed
+  // structure, so the date is omitted. Set true to restore it.
+  var SHOW_RETRIEVAL_DATE = false;
-    // Update panel
+  window.grAnnotationsVersion = '2026-09-30a';
-    renderCommentCards();
-    closeCommentComposer();
-    openPanel('comments');
-  }
-   function saveCommentToWiki( id, quote, text, ts ) {
+   // A citation is worthless if its link doesn't open, so prefer URLs we
-     if ( !window.mw ) return;
+  // KNOW are good over ones we assemble.
-     var api = new mw.Api();
+  //   - Same page as the reader: use the address they're already at. A wiki
-     api.get({
+  //     whose served paths differ from wgArticlePath (or that sits behind a
-      action:'query', prop:'revisions', titles:commentsPage,
+  //     rewrite) would otherwise yield a link that 404s.
-      rvprop:'content', rvslots:'main', formatversion:2,
+  //   - Another page (an injected teeka block cites its own subpage): use
-     }).then(function(data){
+  //     mw.util.getUrl, the same builder every working link on the wiki
-      var page = (data.query.pages||[])[0]||{};
+  //     comes from. wgArticlePath is only the last resort.
-       var existing = '';
+  function citeUrl(pageName, anchorId) {
-      if (page.revisions && page.revisions[0]) {
+     var here = (window.mw && mw.config.get('wgPageName')) || '';
-        var rev = page.revisions[0];
+    var frag = anchorId ? '#' + encodeURIComponent(anchorId) : '';
-        existing = rev.slots ? rev.slots.main.content : rev['*'] || '';
+    var base;
-      }
+     if (!pageName || String(pageName) === String(here)) {
-       var entry = '{{GrComment\n'
+       base = location.origin + location.pathname;
-                + '| id        = ' + id          + '\n'
+    } else if (window.mw && mw.util && mw.util.getUrl) {
-                + '| author    = ' + currentUser + '\n'
+      base = location.origin + mw.util.getUrl(String(pageName));
-                + '| timestamp = ' + ts          + '\n'
+    } else {
-                + '| quote     = ' + quote.replace(/\n/g,' ') + '\n'
+       var path = (window.mw && mw.config.get('wgArticlePath')) || '/wiki/$1';
-                + '| text      = ' + text.replace(/\n/g,' ')  + '\n'
+       base = location.origin +
-                + '}}\n';
+             path.replace('$1', String(pageName).split('/').map(encodeURIComponent).join('/'));
-       var updated = (existing.trim() ? existing.trim() + '\n\n' : '') + entry;
+     }
-      api.postWithEditToken({
+    return base + frag;
-        action:'edit', title:commentsPage, text:updated,
-        summary:'New comment by ' + currentUser + ' on [[' + pageTitle + ']] (stored off-page)',
-        bot:0,
-      }).catch(function(){});
-     }).catch(function(){});
    }
-   function notifyAdmin( anchorId, quote, commentText, ts ) {
+   var CITE_MONTHS = ['January','February','March','April','May','June',
-    /* Send notification email directly using MW's EmailUser API, targeting
+                     'July','August','September','October','November','December'];
-     * ADMIN_EMAIL via the ADMIN_USER account — no server-side SMTP config needed.
-     * ADMIN_EMAIL is set at the top of this file; change it to any address. */
-    if ( !window.mw ) return;
-    var articlePath = ( mw.config.get('wgArticlePath') || '/wiki/$1' )
+  function retrievedToday() {
-                        .replace( '$1', pageTitle );
+     var d = new Date();
-     var anchorLink  = window.location.origin + articlePath
+     return CITE_MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
-                    + ( anchorId ? '#' + anchorId : '' );
+  }
-     var pageDisplay = pageTitle.replace( /_/g, ' ' );
-    var subject     = '[Grantha] New comment on "' + pageDisplay + '"';
-    var body        = 'Page    : ' + pageDisplay + '\n'
-                    + 'By      : ' + ( currentUser || 'Anonymous' ) + '\n'
-                    + 'Time    : ' + ts + '\n'
-                    + 'Passage : "' + quote + '"\n\n'
-                    + 'Comment :\n' + commentText + '\n\n'
-                    + 'Link    : ' + anchorLink + '\n';
-    /* Primary: send via MW EmailUser API to ADMIN_USER account.
+   function siteName() {
-     * The admin account must have ADMIN_EMAIL set in Special:Preferences,
+    return (window.mw && mw.config.get('wgSiteName')) || location.hostname;
-     * OR you can hardcode the target as any confirmed MW user. */
-    new mw.Api().post({
-      action:  'emailuser',
-      target:  ADMIN_USER,
-      subject: subject,
-      text:    body,
-      token:   mw.user.tokens.get( 'csrfToken' ),
-    }).catch(function(){
-      /* Fallback: post a section to admin talk page for Echo notification */
-      if ( !currentUser ) return;
-      var wikimsg = '== New comment on [[' + pageDisplay + ']] ==\n'
-                  + '; By: ' + ( currentUser || 'Anonymous' ) + '\n'
-                  + '; Passage: //' + quote + '//\n'
-                  + '; Link: ' + anchorLink + '\n\n'
-                  + commentText.slice(0,500)
-                  + ( commentText.length > 500 ? '\n...' : '' )
-                  + '\n\n[[User:Chandrashekars|Chandrashekars]] ([[User talk:Chandrashekars|talk]]) 18:31, 25 April 2026 (UTC)';
-      new mw.Api().postWithEditToken({
-        action:'edit', title:'User_talk:' + ADMIN_USER, section:'new',
-        sectiontitle:'Comment on ' + pageDisplay,
-        text:wikimsg,
-        summary:'Comment notification from [[' + pageDisplay + ']]',
-        bot:0,
-      }).catch(function(){});
-    });
    }
-   // ── Load comments from /Comments wiki page ───────────────────────
+   // APA 7th, webpage on a website (§10.16):
-  function loadComments( cb ) {
+  //     Author. (n.d.). Title of work. Site Name. Retrieved <date>, from <URL>
-     if ( _cmtLoaded ) { if (cb) cb(); return; }
+  // Two rules this has to honour and an earlier draft did not:
-    if ( !window.mw ) { _cmtLoaded=true; if(cb)cb(); return; }
+  //   1. No known author -> the TITLE moves into the author position; you
-    new mw.Api().get({
+  //      never leave a bare "(n.d.)" with nothing in front of it. And when
-      action:'query', prop:'revisions', titles:commentsPage,
+  //      the title occupies that slot the site name is not repeated after it.
-      rvprop:'content', rvslots:'main', formatversion:2,
+  //   2. A locator (our block id) does NOT belong in the reference entry.
-    }).then(function(data){
+  //      The parenthetical slot after a title is for edition/format
-      var page = (data.query.pages||[])[0]||{};
+  //      descriptors, not section numbers. APA puts locators in the in-text
-      var wt = '';
+  //      citation, so the block id goes there: (Author, n.d., IS_C01_I03).
-      if (page.revisions && page.revisions[0]) {
+  // The retrieval date is correct here because the page is designed to
-        var rev = page.revisions[0];
+  // change and we link to the live version rather than a permalink.
-        wt = rev.slots ? rev.slots.main.content : rev['*'] || '';
+  // Titles of standalone works are italicised, which only the HTML flavour
-      }
+  // of the clipboard can carry.
-      _comments = parseCommentsWt(wt);
+  // The library records names with their honorifics and, often, a
-       _cmtLoaded = true;
+  // parenthetical alias: "Śrīman Madhvācārya (Ānandatīrtha)". A reference
-      if (cb) cb();
+  // entry carries the name a reader would look up, so the honorific and
-     }).catch(function(){ _cmtLoaded=true; if(cb)cb(); });
+  // the alias come off - leaving "Madhvācārya". Only applied to the
+  // romanised form; the Devanagari is left exactly as the library has it,
+  // because there the honorific is fused to the name by sandhi
+  // (श्रीमत् + आनन्दतीर्थः -> श्रीमदानन्दतीर्थः) and cannot be sliced off safely.
+  var HONORIFIC_RE = /^(?:\u015br\u012b|\u015br\u012bman|\u015br\u012bmat|\u015br\u012bmad|sri|shri|sree)\s+/i;
+  function citationAuthor(name) {
+    var n = (name || '').trim();
+    if (!/[A-Za-z]/.test(n)) return n;            // Devanagari - leave alone
+    n = n.replace(/\s*\([^)]*\)\s*$/, '').trim();
+    for (var i = 0; i < 3 && HONORIFIC_RE.test(n); i++) {
+       n = n.replace(HONORIFIC_RE, '').trim();
+     }
+    return n || (name || '').trim();
    }
-   function parseCommentsWt( wt ) {
+   function buildCitation(rec) {
-     var out = [];
+     var src    = rec.citeSource || {};
-     var re = /\{\{GrComment\s*\n([\s\S]*?)\}\}/g;
+     var author = citationAuthor(src.author);
-     var m;
+     var title  = (src.title  || '').trim();
-     while ((m = re.exec(wt)) !== null) {
+     var anchor = rec.anchor || '';
-      var block = m[1];
+    var site   = (siteName() || '').trim();
-      var f = {};
+    var url    = citeUrl(src.page, anchor);
-      var lr = /\|\s*([\w_]+)\s*=\s*([\s\S]*?)(?=\n\||\n\}\}|$)/g;
+    var retrieved = retrievedToday();
-      var lm;
+    var loc    = locatorText(anchor, src.scheme);
-       while ((lm = lr.exec(block)) !== null) {
-        f[lm[1].trim()] = lm[2].trim();
+    var head, headHtml, showSite;
-       }
+    if (author) {
-       if (f.id) out.push({
+       head = author + '. (n.d.). ' + title + '.';
-        id:f.id, author:f.author||'Anonymous',
+      headHtml = esc(author) + '. (n.d.). <i>' + esc(title) + '</i>.';
-        ts:f.timestamp||'', quote:f.quote||'', text:f.text||''
+       showSite = site && site !== author;
-       });
+    } else {
+       // Title in the author position - italicised there too, and the site
+      // name is dropped when it would only repeat what the title says.
+      head = title + '. (n.d.).';
+      headHtml = '<i>' + esc(title) + '</i>. (n.d.).';
+       showSite = site && site !== title;
      }
-     return out;
+    // APA 7 (section 9.16) asks for a retrieval date only when the content
+    // is designed to change and is not archived. A wiki page can change, so
+    // the date is defensible - but these are settled texts, and a reader may
+    // reasonably prefer the shorter form. Set SHOW_RETRIEVAL_DATE to false
+    // for: Author. (n.d.). Title. Site. URL
+    var tail = SHOW_RETRIEVAL_DATE
+        ? ' Retrieved ' + retrieved + ', from ' + url
+        : ' ' + url;
+    var reference = head + (showSite ? ' ' + site + '.' : '') + tail;
+    var referenceHtml = headHtml + (showSite ? ' ' + esc(site) + '.' : '') + ' '
+        + (SHOW_RETRIEVAL_DATE ? 'Retrieved ' + esc(retrieved) + ', from ' : '')
+        + '<a href="' + esc(url) + '">' + esc(url) + '</a>';
+    // The in-text citation carries the locator, expanded: 1.1.3, not
+    // KKN_C01_S01_V03. The name is shortened the way an in-text citation
+    // shortens one - the library's parenthetical alias ("Śrīman
+    // Madhvācārya (Ānandatīrtha)") belongs in the reference, not here.
+    var shortName = (author || title).replace(/\s*\([^)]*\)\s*$/, '').trim();
+    var inText = '(' + (shortName || author || title) + ', n.d.'
+               + (loc.numeric ? ', ' + loc.numeric : '') + ')';
+     return { reference: reference, referenceHtml: referenceHtml,
+             inText: inText, url: url,
+             locator: loc.numeric, locatorSpelled: loc.spelled };
    }
-   // ════════════════════════════════════════════════════════════════════
+   // html is optional. When given, both flavours go on the clipboard so a
-   // BOOKMARK FLOW
+   // paste into Word/Docs keeps the italicised title and the live link,
-   // ════════════════════════════════════════════════════════════════════
+   // while a paste into a plain field (or the address bar) gets the text.
+  function copyToClipboard(text, done, html) {
+    if (html && window.ClipboardItem && navigator.clipboard && navigator.clipboard.write) {
+      try {
+        var item = new ClipboardItem({
+          'text/html':  new Blob([html], { type: 'text/html' }),
+          'text/plain': new Blob([text], { type: 'text/plain' })
+        });
+        navigator.clipboard.write([item]).then(done).catch(function () {
+          plainCopy(text, done);
+        });
+        return;
+      } catch (e) { /* fall through */ }
+    }
+    plainCopy(text, done);
+  }
+  function plainCopy(text, done) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(done).catch(function () { legacyCopy(text, done); });
+    } else { legacyCopy(text, done); }
+  }
+  function legacyCopy(text, done) {
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px;';
+    document.body.appendChild(ta); ta.focus(); ta.select();
+    try { document.execCommand('copy'); done && done(); } catch (e) {}
+    document.body.removeChild(ta);
+  }
    function openBookmarkComposer() {
-     hideFab();
+     hideActions();
-     positionComposer( $bmComposer );
+     if (!_mobile) $bmComposer.css({ top: '', left: '', transform: '' });
      $bmComposer.addClass('gra-composer-visible');
-     $bmInput.val('').focus();
+     $backdrop.addClass('gra-backdrop-visible');
+    setTimeout(function(){ $bmInput.focus(); }, isMobile() ? 300 : 0);
    }
    function closeBookmarkComposer() {
      $bmComposer.removeClass('gra-composer-visible');
+    $backdrop.removeClass('gra-backdrop-visible');
      $bmInput.val('');
-     _selRange = null;
+     _selRange = null; _selText = ''; _selRect = null;
-    _selText  = '';
-    _selRect  = null;
    }
    function submitBookmark() {
-     var name  = $bmInput.val().trim() || ( 'Bookmark ' + (_bookmarks.length+1) );
+     var name  = $bmInput.val().trim() || ('Bookmark ' + (_bookmarks.length+1));
+    // A bookmark's name is stored in the same column as a note's text and
+    // is capped the same way.
+    if (byteLength(name) > MAX_NOTE_BYTES) {
+      alert('This bookmark name is too long to save — please shorten it.');
+      return;
+    }
      var id    = uid();
-    var ts    = nowIso();
+     var quote = _selText.slice(0,120) + (_selText.length > 120 ? '…' : '');
-     var quote = _selText.slice(0,120) + (_selText.length>120?'…':'');
+    if (!_selRange && _selText) reCaptureFromDOM();
+    // Resolve the citation anchor BEFORE wrapping: wrapSelection inserts a
-     // Wrap text in bookmark highlight span
+     // span of its own, and resolving afterwards would just find that.
-     var span = wrapSelection( id, 'gra-bookmark-highlight' );
+    var anchorEl = citeAnchorFor(_selRange && _selRange.startContainer);
-     if ( span ) {
+     var span  = wrapSelection(id, 'gra-bookmark-highlight');
-      span.setAttribute('data-gra-id', id);
+     if (span) { span.setAttribute('data-gra-id', id); span.setAttribute('data-gra-name', name); }
-      span.setAttribute('data-gra-name', name);
+     if (!anchorEl && span) anchorEl = citeAnchorFor(span);
-     }
+     var rec = {id:id, name:name, quote:quote, ts:nowIso(),
+               anchor: anchorEl ? (anchorEl.id || anchorEl.getAttribute('data-block-id') || '') : '',
-     var entry = { id:id, name:name, quote:quote, ts:ts };
+               citeSource: citeSourceFor(anchorEl || document.body)};
-     _bookmarks.push( entry );
+     _bookmarks.push(rec);
-     persistBookmarks();
+     Store.cache();
-     renderBookmarkCards();
+    Store.save('bookmark', rec);
+     renderBookmarkCards(); updateBadge();
      closeBookmarkComposer();
      openPanel('bookmarks');
    }
-   function deleteBookmark( id ) {
+   function deleteBookmark(id) {
      _bookmarks = _bookmarks.filter(function(b){ return b.id !== id; });
-    // Remove highlight span, replace with its text content
+     var span = document.querySelector('[data-gra-id="'+id+'"].gra-bookmark-highlight');
-     var span = document.querySelector('[data-gra-id="' + id + '"].gra-bookmark-highlight');
+     if (span && span.parentNode) {
-     if (span) {
+       var p = span.parentNode;
-       var parent = span.parentNode;
+       while (span.firstChild) p.insertBefore(span.firstChild, span);
-       while (span.firstChild) parent.insertBefore(span.firstChild, span);
+       p.removeChild(span);
-       parent.removeChild(span);
      }
-     persistBookmarks();
+     Store.cache(); Store.remove(id); renderBookmarkCards(); updateBadge();
-    renderBookmarkCards();
    }
-  function persistBookmarks() {
+   function openPanel(tab) {
-    try { localStorage.setItem(BM_LS_KEY, JSON.stringify(_bookmarks)); } catch(e){}
-  }
-  function loadBookmarks() {
-    try {
-      var raw = localStorage.getItem(BM_LS_KEY);
-      if (raw) _bookmarks = JSON.parse(raw) || [];
-    } catch(e){ _bookmarks = []; }
-  }
-  // ════════════════════════════════════════════════════════════════════
-  // PANEL — open / close / tabs
-  // ════════════════════════════════════════════════════════════════════
-   function openPanel( tab ) {
      _activeTab = tab || _activeTab;
-     switchTab( _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');
    }
+  // CHANGED: added the footnotes case, alongside notes/bookmarks.
-   function switchTab( tab ) {
+   function switchTab(tab) {
      _activeTab = tab;
-     $tabComments.toggleClass('gra-tab-active', tab==='comments');
+     $tabNotes.toggleClass('gra-tab-active', tab==='notes');
      $tabBookmarks.toggleClass('gra-tab-active', tab==='bookmarks');
-     $paneComments.toggleClass('gra-pane-active', tab==='comments');
+     $tabFootnotes.toggleClass('gra-tab-active', tab==='footnotes');
+    $paneNotes.toggleClass('gra-pane-active', tab==='notes');
      $paneBookmarks.toggleClass('gra-pane-active', tab==='bookmarks');
-     if (tab==='comments') {
+     $paneFootnotes.toggleClass('gra-pane-active', tab==='footnotes');
-      loadComments(function(){ renderCommentCards(); });
+    if (tab==='notes') renderNoteCards();
-     } else {
+     else if (tab==='bookmarks') renderBookmarkCards();
-      renderBookmarkCards();
+     else renderFootnoteCards();
-     }
    }
-  // ════════════════════════════════════════════════════════════════════
+   function renderNoteCards() {
-  // RENDER CARDS
+     if (!_notes.length) {
-  // ════════════════════════════════════════════════════════════════════
+       $paneNotes.html('<div class="gra-empty-state">No notes yet.<br>Select text and tap ✎ to add one.</div>');
-   function renderCommentCards() {
-     if ( _comments.length === 0 ) {
-       $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){
+     _notes.slice().reverse().forEach(function(n){
-       html += '<div class="gra-comment-card" data-gra-id="' + esc(c.id) + '">'
+       html += '<div class="gra-note-card" data-gra-id="'+esc(n.id)+'">'
              + '<div class="gra-card-header">'
-             + '<div class="gra-avatar">' + esc((c.author||'?').charAt(0).toUpperCase()) + '</div>'
+             + '<span class="gra-icon gra-icon-note" aria-hidden="true"></span>'
              + '<div class="gra-card-meta">'
-            + '<div class="gra-card-author">' + esc(c.author) + '</div>'
+             + (n.ts ? '<div class="gra-card-ts">'+esc(fmtTs(n.ts))+'</div>' : '')
-             + (c.ts ? '<div class="gra-card-ts">' + esc(fmtTs(c.ts)) + '</div>' : '')
              + '</div>'
+            + '<button class="gra-note-del" data-del-id="'+esc(n.id)+'" title="Delete">×</button>'
              + '</div>'
-             + (c.quote ? '<div class="gra-card-quote">' + esc(c.quote) + '</div>' : '')
+             + (n.quote ? '<div class="gra-card-quote">'+esc(n.quote)+'</div>' : '')
-             + '<div class="gra-card-text">' + esc(c.text) + '</div>'
+             + '<div class="gra-card-text">'+esc(n.text)+'</div>'
              + '</div>';
      });
-     $paneComments.html(html);
+     $paneNotes.html(html);
+  }
+  function deleteNote(id) {
+    _notes = _notes.filter(function(n){ return n.id !== id; });
+    var span = document.querySelector('[data-gra-id="'+id+'"].gra-note-highlight');
+    if (span && span.parentNode) {
+      var p = span.parentNode;
+      while (span.firstChild) p.insertBefore(span.firstChild, span);
+      p.removeChild(span);
+    }
+    Store.cache(); Store.remove(id); renderNoteCards(); updateBadge();
    }
    function renderBookmarkCards() {
-     if ( _bookmarks.length === 0 ) {
+     if (!_bookmarks.length) {
-       $paneBookmarks.html('<div class="gra-empty-state">No bookmarks yet.<br>Select text and click 🔖 to save a bookmark.</div>');
+       $paneBookmarks.html('<div class="gra-empty-state">No bookmarks yet.<br>Select text and tap 🔖 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) + '">'
+      var cite = buildCitation(b);
-             + '<span class="gra-icon gra-icon-bookmark"></span>'
+       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>'
+             + '<div class="gra-bookmark-name">'+esc(b.name)+'</div>'
-             + (b.quote ? '<div class="gra-bookmark-quote">' + esc(b.quote) + '</div>' : '')
+             + (b.quote ? '<div class="gra-bookmark-quote">'+esc(b.quote)+'</div>' : '')
+            // One button. The reference already carries the work, the
+            // locator's page and the link, so a separate "copy link" only
+            // asked the reader to decide something they don't need to.
+            // The in-text form stays on the card because it is what goes
+            // in a sentence, but it copies on click rather than earning a
+            // button of its own.
+            // Where in the text this sits, spelled out - "Adhyaya 3,
+            // Mantra 4" rather than MUN_C03_V04. Not part of the citation
+            // (APA keeps a locator out of the reference entry), so it is
+            // set apart as a caption and is not included in the copy.
+            + (cite.locatorSpelled || cite.locator
+                 ? '<div class="gra-bookmark-locator">'
+                     + esc(cite.locatorSpelled || cite.locator) + '</div>'
+                 : '')
+            + '<div class="gra-bookmark-cite">'+cite.referenceHtml+'</div>'
+            + '<div class="gra-cite-actions">'
+            + '<button type="button" class="gra-cite-copy" data-cite-what="reference"'
+            + ' data-cite-id="'+esc(b.id)+'">Copy citation</button>'
+            + '</div>'
              + '</div>'
-             + '<button class="gra-bookmark-del" data-del-id="' + esc(b.id) + '" title="Remove bookmark">×</button>'
+             + '<button class="gra-bookmark-del" data-del-id="'+esc(b.id)+'" title="Remove">×</button>'
              + '</div>';
      });
@@ Line 658: / Line 1,254: @@
    }
-   // ════════════════════════════════════════════════════════════════════
+   // NEW: Footnotes tab — unlike Notes/Bookmarks, footnotes aren't personal
-   // SCROLL TO HIGHLIGHT
+  // localStorage annotations, they're real saved page content (QuickEdit
-   // ════════════════════════════════════════════════════════════════════
+  // writes .gra-qe-footnotes/.gra-qe-footnote-item directly into the saved
+  // HTML). So this reads straight off the live DOM on every open, no
+   // fetch, no storage — verified the scan + both-direction lookup logic
+   // against realistic saved-footnote HTML before wiring this in (6/6 pass).
+  function renderFootnoteCards() {
+    var items = document.querySelectorAll(CONTENT_SEL + ' .gra-qe-footnote-item');
+    if (!items.length) {
+      $paneFootnotes.html('<div class="gra-empty-state">No footnotes on this page.</div>');
+      return;
+    }
+    // CHANGED: grouped by source. A moola page now also carries the notes
+    // of every commentary shown on it, and flattening them into one list
+    // put a commentary's notes after the moola's with nothing saying which
+    // was which - the cards were indistinguishable. Each note is filed
+    // under the heading of the document it came from: the page's own notes
+    // first, then one section per commentary, in the order the page shows
+    // them. common.js wraps injected notes in .gr-teeka-notes-group with a
+    // .gr-teeka-notes-title, which is where the heading comes from.
+    function groupOf(li) {
+      var wrap = li.closest ? li.closest('.gr-teeka-notes-group') : null;
+      if (!wrap) return null;
+      var t = wrap.querySelector('.gr-teeka-notes-title');
+      return {
+        slug: wrap.getAttribute('data-teeka-slug') || '',
+        title: t ? t.textContent.trim() : ''
+      };
+    }
+    var sections = [];          // [{key, title, items: []}] in document order
+    var byKey = {};
+    Array.prototype.forEach.call(items, function (li) {
+      var g = groupOf(li);
+      var key = g ? g.slug : '';
+      if (!byKey[key]) {
+        byKey[key] = { key: key, title: g ? g.title : '', items: [] };
+        sections.push(byKey[key]);
+      }
+      byKey[key].items.push(li);
+    });
+    var html = '';
+    sections.forEach(function (sec) {
+      if (sec.title) {
+        html += '<div class="gra-footnote-section-title">' + esc(sec.title) + '</div>';
+      } else if (sections.length > 1) {
+        html += '<div class="gra-footnote-section-title gra-footnote-section-own">'
+              + esc(pageOwnNotesLabel()) + '</div>';
+      }
+      sec.items.forEach(function (li) { html += footnoteCard(li, sec.title); });
+    });
+    $paneFootnotes.html(html);
+  }
+  // The heading for the page's own notes, shown only when there is at
+  // least one commentary section to tell them apart from.
+  function pageOwnNotesLabel() {
+    var t = document.querySelector('.gr-doc-title');
+    return (t && t.textContent.trim()) || 'This page';
+  }
+  function footnoteCard(li, groupTitle) {
+      var numEl = li.querySelector('.gra-qe-footnote-num');
+      var quoteEl = li.querySelector('.gra-qe-footnote-quote');
+      var textEl = li.querySelector('.gra-qe-footnote-text');
+      var num = numEl ? numEl.textContent.trim() : '';
+      // CHANGED: was showing the NUMBER as the card's primary line and the
+      // footnote's own note text as secondary — nowhere did it show WHICH
+      // text in the document the footnote actually belongs to, which was
+      // the whole point of being able to identify one footnote from
+      // another. Now shows the referenced quote as primary (matching how
+      // Notes/Bookmarks already identify themselves by quote, not by an
+      // arbitrary id), with the number as a small prefix and the
+      // footnote's own note text as secondary. Falls back to the note
+      // text alone if a footnote predates this change and has no quote
+      // span at all, rather than showing nothing.
+      var quote = quoteEl ? quoteEl.textContent : '';
+      var text = textEl ? textEl.textContent : (quoteEl ? '' : li.textContent);
+      var primary = quote ? (num + ' ' + quote) : (num + ' ' + text);
+      var id = li.getAttribute('data-gra-id') || '';
+      // The commentary's name is repeated on the card itself, not only on
+      // the section heading: a reader who has scrolled the panel, or who
+      // arrives at a card by clicking a word in the text, sees the card
+      // without its heading in view.
+      return '<div class="gra-bookmark-card gra-footnote-card" data-gra-id="'+esc(id)+'">'
+            + '<span class="gra-icon gra-icon-footnote" aria-hidden="true"></span>'
+            + '<div class="gra-bookmark-info">'
+            + (groupTitle ? '<div class="gra-footnote-source">'+esc(groupTitle)+'</div>' : '')
+            + '<div class="gra-bookmark-name">'+esc(primary)+'</div>'
+            + (quote ? '<div class="gra-bookmark-quote">'+esc(text)+'</div>' : '')
+            + '</div>'
+            + '</div>';
+  }
-   function scrollToHighlight( id ) {
+   function scrollToHighlight(id) {
-     var el = document.querySelector('[data-gra-id="' + id + '"]');
+     var el = document.querySelector('[data-gra-id="'+id+'"]');
      if (!el) return;
-     el.scrollIntoView({ behavior:'smooth', block:'center' });
+     el.scrollIntoView({behavior:'smooth', block:'center'});
      el.classList.add('gra-hl-active');
      setTimeout(function(){ el.classList.remove('gra-hl-active'); }, 2000);
    }
-   // ════════════════════════════════════════════════════════════════════
+   function wireEvents() {
-  // EVENT WIRING
-  // ════════════════════════════════════════════════════════════════════
-  function wireEvents() {
+    /* Suppress native context menu inside article content (Android/desktop) */
+    document.addEventListener('contextmenu', function(e) {
+      var tag = e.target.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+      var c = document.querySelector(CONTENT_SEL);
+      if (c && c.contains(e.target)) e.preventDefault();
+    }, { passive: false });
-     // ── Selection → show FAB ──────────────────────────────────────
+     /* Desktop mouseup */
-    // On mouseup: capture the selection and show the FAB strip.
+     $(document).on('mouseup', function(e){
-    // We use mouseup (not click) so the selection is fully made.
+       if (e.button !== 0) return;
-     $( document ).on('mouseup', function(e){
+       if (_mobile) return;
-      // Ignore mouseup on FAB/composer — those are handled separately
+       setTimeout(tryShowActions, 20);
-       if ( $(e.target).closest('#gra-fab, .gra-composer, .gra-bm-composer').length ) return;
-      // Ignore if a composer is already open
-       if ( $cmpComposer.hasClass('gra-composer-visible') ||
-           $bmComposer.hasClass('gra-composer-visible') ) return;
-       setTimeout(function(){
-        if ( captureSelection() ) {
-          showFab( _selRect );
-        } else {
-          hideFab();
-        }
-      }, 10);
      });
-     // ── FAB mousedown: block selection collapse ───────────────────
+     /* Separate timers so mobile + desktop never clobber each other */
-     // Browsers collapse text selection on mousedown. preventDefault
+    var _selTimer    = null;  /* desktop debounce */
-     // keeps the selection alive so the click handler can wrap it.
+     var _mobShowTimer = null; /* mobile show-on-touchend */
-     $fab.on('mousedown', function(e){
-       e.preventDefault();
+    /* Mobile: show fab quickly after finger lifts (selection settled).
+ms feels instant while still letting the range stabilise. */
+    document.addEventListener('touchend', function(e) {
+      if (!_mobile) return;
+      if ($fab[0] && $fab[0].contains(e.target)) return;
+      clearTimeout(_mobShowTimer);
+      _mobShowTimer = setTimeout(function() {
+        var sel = window.getSelection();
+        if (!sel || sel.isCollapsed || !sel.toString().trim()) return;
+        tryShowActions();
+      }, 180);
+    }, { passive: true });
+     /* Mobile: only HIDE the fab when selection is cleared while it's visible.
+       (Reposition isn't needed now that the bar is docked, and re-running
+       showFab here was causing the lag/flicker.) */
+     document.addEventListener('selectionchange', function() {
+       if (!_mobile) return;
+      if (!$fab.hasClass('gra-fab-visible')) return;
+      var sel = window.getSelection();
+      if (!sel || sel.isCollapsed || !sel.toString().trim()) {
+        clearTimeout(_mobShowTimer);
+        hideActions();
+      }
      });
-     // ── Mousedown outside: hide FAB ───────────────────────────────
+     /* selectionchange debounced (desktop only) */
-     $( document ).on('mousedown', function(e){
+     document.addEventListener('selectionchange', function() {
-       var $t = $(e.target);
+      if (_mobile) return;
-      if ( !$t.closest('#gra-fab, .gra-composer, .gra-bm-composer, #gra-toggle, #gra-panel').length ) {
+      _selVersion++;
-         hideFab();
+      clearTimeout(_selTimer);
-       }
+       var v = _selVersion;
+      _selTimer = setTimeout(function(){
+        if (v !== _selVersion) return;
+        if (_fabSelVer === v) return;
+         tryShowActions();
+       }, 600);
      });
-     // ── FAB: Comment button ───────────────────────────────────────
+     /* ── KEY FIX: fab touchstart sets flag to prevent hideActions ── */
-     $( '#gra-fab-comment' ).on('click', function(e){
+     $fab[0].addEventListener('touchstart', function(e) {
+      _fabTouched = true;
+      /* Don't propagate to document handler */
        e.stopPropagation();
-       openCommentComposer();
+    }, { passive: true });
+    /* Click outside → hide actions (blocked if fab was touched) */
+    $(document).on('mousedown touchstart', function(e){
+       if (_fabTouched) { _fabTouched = false; return; }
+      var t = e.target;
+      if ($fab[0]        && $fab[0].contains(t))        return;
+      if ($fbComposer[0] && $fbComposer[0].contains(t)) return;
+      if ($ntComposer[0] && $ntComposer[0].contains(t)) return;
+      if ($bmComposer[0] && $bmComposer[0].contains(t)) return;
+      hideActions();
      });
-     // ── FAB: Bookmark button ──────────────────────────────────────
+     /* ── FAB buttons — use touchend for mobile, click for desktop ── */
-     $( '#gra-fab-bookmark' ).on('click', function(e){
+    function fabAction(btnId, action) {
-       e.stopPropagation();
+      var el = document.getElementById(btnId);
-       openBookmarkComposer();
+      if (!el) return;
+      /* touchend: fires before document touchstart clears _selRange */
+      el.addEventListener('touchend', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!_selRange && !reCaptureFromDOM()) return;
+        action();
+      }, { passive: false });
+      /* click: for desktop */
+      el.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!_selRange && !reCaptureFromDOM()) return;
+        action();
+      });
+    }
+    fabAction('gra-fab-note',     openNoteComposer);
+    fabAction('gra-fab-bookmark', openBookmarkComposer);
+    fabAction('gra-fab-feedback', openFeedbackComposer);
+    document.getElementById('gra-fab-search').addEventListener('touchend', function(e) {
+      e.preventDefault(); e.stopPropagation();
+      var q = _selText;
+      hideActions();
+      _selRange = null; _selText = ''; _selRect = null;
+      if (q && window.showSearchDialog) { window.showSearchDialog(q); }
+    }, { passive: false });
+    document.getElementById('gra-fab-search').addEventListener('click', function(e) {
+       e.preventDefault(); e.stopPropagation();
+       var q = _selText;
+      hideActions();
+      _selRange = null; _selText = ''; _selRect = null;
+      if (q && window.showSearchDialog) { window.showSearchDialog(q); }
+      else if (q) { $(document).trigger($.Event('keydown', {ctrlKey:true, key:'k', keyCode:75})); }
      });
-     // ── Comment composer ──────────────────────────────────────────
+     /* ── Dismiss button: hide toolbar + clear selection (mobile) ── */
-    /* Quick-select chips: clicking a chip selects it and sets comment text.
+     (function () {
-     * 'Others' chip shows the textarea for free-form input.
+       var dismissEl = document.getElementById('gra-fab-dismiss');
-     * Any other chip sets the text directly and enables submit. */
+       if (!dismissEl) return;
-     $( '#gra-cmp-composer' ).on( 'click', '.gra-chip', function() {
+       function doDismiss(e) {
-       var $chip = $( this );
+         e.preventDefault(); e.stopPropagation();
-      var val   = $chip.attr('data-val');
+        hideActions();
-      // Toggle active state — allow deselecting
+         _selRange = null; _selText = ''; _selRect = null;
-      var wasActive = $chip.hasClass('gra-chip-active');
+        if (window.getSelection) {
-      $( '#gra-quick-chips .gra-chip' ).removeClass('gra-chip-active');
+          var s = window.getSelection();
-       if ( !wasActive ) $chip.addClass('gra-chip-active');
+          if (s && s.removeAllRanges) s.removeAllRanges();
-       if ( val === 'Others' && !wasActive ) {
+         }
-         // Show textarea for free-form input
-        $cmpInput.show().focus().val('');
-         $cmpSubmit.prop('disabled', true);
-      } else if ( !wasActive ) {
-        // Pre-fill and hide textarea — chip text is the comment
-        $cmpInput.hide().val(val);
-        $cmpSubmit.prop('disabled', !currentUser);
-      } else {
-        // Deselected — clear
-        $cmpInput.hide().val('');
-         $cmpSubmit.prop('disabled', true);
        }
-     } );
+      dismissEl.addEventListener('touchend', doDismiss, { passive: false });
-     $cmpInput.on('input', function(){
+      dismissEl.addEventListener('click', doDismiss);
-      $cmpSubmit.prop('disabled', !$(this).val().trim() || !currentUser);
+     }());
-    });
-     $( '#gra-cmp-cancel' ).on('click', function(){
+    /* Feedback composer */
-      closeCommentComposer();
+     $fbIssueType.on('change', function(){ $fbSubmit.prop('disabled', !$(this).val()); });
-      hideFab();
+     $('#gra-fb-cancel, #gra-fb-close').on('click', closeFeedbackComposer);
-     });
+    $fbSubmit.on('click', submitFeedback);
-     $cmpSubmit.on('click', submitComment);
+    $fbText.on('keydown', function(e){ if(e.key==='Escape') closeFeedbackComposer(); });
-     $cmpInput.on('keydown', function(e){
-      // Ctrl+Enter or Cmd+Enter submits
+    /* Note composer */
-       if ((e.ctrlKey||e.metaKey) && e.key==='Enter') { submitComment(); }
+    $ntInput.on('input', function(){ $ntSubmit.prop('disabled', !$(this).val().trim()); });
-       if (e.key==='Escape') { closeCommentComposer(); hideFab(); }
+     $('#gra-nt-cancel').on('click', closeNoteComposer);
+     $ntSubmit.on('click', submitNote);
+     $ntInput.on('keydown', function(e){
+       if ((e.ctrlKey||e.metaKey) && e.key==='Enter') submitNote();
+       if (e.key==='Escape') closeNoteComposer();
      });
-     // ── Bookmark composer ─────────────────────────────────────────
+     /* Bookmark composer */
-     $( '#gra-bm-cancel' ).on('click', function(){
+     $('#gra-bm-cancel').on('click', closeBookmarkComposer);
-      closeBookmarkComposer();
-      hideFab();
-    });
      $bmSubmit.on('click', submitBookmark);
      $bmInput.on('keydown', function(e){
        if (e.key==='Enter') submitBookmark();
-       if (e.key==='Escape'){ closeBookmarkComposer(); hideFab(); }
+       if (e.key==='Escape') closeBookmarkComposer();
      });
-     // ── Panel close ───────────────────────────────────────────────
+     /* Panel */
-     $( '#gra-panel-close' ).on('click', closePanel);
+     $('#gra-panel-close').on('click', closePanel);
-     $backdrop.on('click', closePanel);
+     $backdrop.on('click touchend', function(e){
+      e.preventDefault();
-     // ── Tab switching ─────────────────────────────────────────────
+      if ($fbComposer.hasClass('gra-composer-visible')) closeFeedbackComposer();
-     $tabComments.on('click', function(){ switchTab('comments'); });
+      else if ($ntComposer.hasClass('gra-composer-visible')) closeNoteComposer();
+      else if ($bmComposer.hasClass('gra-composer-visible')) closeBookmarkComposer();
+      else closePanel();
+     });
+     $tabNotes.on('click', function(){ switchTab('notes'); });
      $tabBookmarks.on('click', function(){ switchTab('bookmarks'); });
+    // NEW: third tab.
+    $tabFootnotes.on('click', function(){ switchTab('footnotes'); });
-    // ── Panel: click comment card → scroll to highlight ───────────
+     $paneNotes.on('click', '.gra-note-card', function(e){
-     $paneComments.on('click', '.gra-comment-card', function(){
+      if ($(e.target).hasClass('gra-note-del')) return;
        var id = $(this).attr('data-gra-id');
-       if (id) scrollToHighlight(id);
+       if (id) { closePanel(); scrollToHighlight(id); }
+    });
+    $paneNotes.on('click', '.gra-note-del', function(e){
+      e.stopPropagation();
+      var id = $(this).attr('data-del-id');
+      if (id) deleteNote(id);
      });
-    // ── Panel: click bookmark card → scroll to highlight ──────────
      $paneBookmarks.on('click', '.gra-bookmark-card', function(e){
        if ($(e.target).hasClass('gra-bookmark-del')) return;
+      if ($(e.target).hasClass('gra-cite-copy')) return;
        var id = $(this).attr('data-gra-id');
-       if (id) scrollToHighlight(id);
+       if (id) { closePanel(); scrollToHighlight(id); }
+    });
+    $paneBookmarks.on('click', '.gra-cite-copy', function(e){
+      e.stopPropagation();
+      var $btn = $(this), id = $btn.attr('data-cite-id');
+      var rec = _bookmarks.filter(function(b){ return b.id === id; })[0];
+      if (!rec) return;
+      var cite = buildCitation(rec);
+      var what = $btn.attr('data-cite-what') || 'reference';
+      // Only the reference carries formatting worth preserving; the in-text
+      // form and the bare link must stay plain so they survive a paste into
+      // the address bar.
+      var text = cite[what] || cite.reference;
+      var html = (what === 'reference') ? cite.referenceHtml : null;
+      var was = $btn.text();
+      copyToClipboard(text, function(){
+        $btn.text('Copied').addClass('gra-cite-copy--done');
+        setTimeout(function(){ $btn.text(was).removeClass('gra-cite-copy--done'); }, 1600);
+      }, html);
      });
-    // ── Panel: delete bookmark ────────────────────────────────────
      $paneBookmarks.on('click', '.gra-bookmark-del', function(e){
        e.stopPropagation();
        var id = $(this).attr('data-del-id');
        if (id) deleteBookmark(id);
+    });
+    // CHANGED: footnote highlights now carry data-gra-id (see quickedit.js's
+    // redesign — plain highlight span, no href/marker element anymore), so
+    // this can reuse the EXACT same scrollToHighlight(id) helper Notes/
+    // Bookmarks already use below, instead of custom href-parsing logic
+    // that broke every time the marker format changed.
+    $paneFootnotes.on('click', '.gra-footnote-card', function(){
+      var id = $(this).attr('data-gra-id');
+      if (id) { closePanel(); scrollToHighlight(id); }
      });
-    // ── Click on highlight in text → open panel ───────────────────
+     $(CONTENT_SEL).on('click', '.gra-note-highlight', function(){
-     $( CONTENT_SEL ).on('click', '.gra-comment-highlight', function(){
        var id = $(this).attr('data-gra-id');
-       openPanel('comments');
+       openPanel('notes');
-      // After render, scroll to matching card
        setTimeout(function(){
-         var $card = $paneComments.find('[data-gra-id="'+id+'"]');
+         var $card = $paneNotes.find('[data-gra-id="'+id+'"]');
          if ($card.length) {
            $card.addClass('gra-card-active');
-           $card[0].scrollIntoView({behavior:'smooth',block:'nearest'});
+           $card[0].scrollIntoView({behavior:'smooth', block:'nearest'});
            setTimeout(function(){ $card.removeClass('gra-card-active'); }, 2000);
          }
        }, 100);
      });
+     $(CONTENT_SEL).on('click', '.gra-bookmark-highlight', function(){
-     $( 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'});
+        // CHANGED: was missing the gra-card-active flash entirely (only
+        // notes and footnotes had it) — a separate inconsistency from
+        // the CSS gap below. Now matches the other two exactly.
+         if ($card.length) {
+          $card.addClass('gra-card-active');
+          $card[0].scrollIntoView({behavior:'smooth', block:'nearest'});
+          setTimeout(function(){ $card.removeClass('gra-card-active'); }, 2000);
+        }
+      }, 100);
+    });
+    // CHANGED: was .gra-qe-footnote-ref a with e.preventDefault() (it used
+    // to be a real link). Now a plain highlight span, same as notes/
+    // bookmarks — no href to prevent, id read directly via data-gra-id,
+    // and the handler is now identical in shape to the two right above it.
+    $(CONTENT_SEL).on('click', '.gra-qe-footnote-highlight', function(){
+      var id = $(this).attr('data-gra-id');
+      openPanel('footnotes');
+      setTimeout(function(){
+        var $card = $paneFootnotes.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);
      });
-     // ── Escape key closes panels / composers ─────────────────────
+     // NEW: cross-document links from QuickEdit's Link picker. No real
-     $( document ).on('keydown', function(e){
+    // href is ever saved (confirmed directly: MediaWiki's sanitizer
-       if (e.key==='Escape'){
+    // escapes <a href> into visible literal text on this wiki, even for
-        if ($cmpComposer.hasClass('gra-composer-visible')) { closeCommentComposer(); hideFab(); }
+    // a full absolute URL) — the target lives in data-gr-href instead,
-        else if ($bmComposer.hasClass('gra-composer-visible')) { closeBookmarkComposer(); hideFab(); }
+    // and this handler is what actually performs the navigation.
-        else closePanel();
+     $(CONTENT_SEL).on('click', '.gr-crosslink', function(){
-      }
+       var href = $(this).attr('data-gr-href');
+      if (!href) return;
+      var newWin = window.open(href, '_blank');
+      if (newWin) newWin.opener = null; // more reliable cross-browser than relying on window.open's features string
      });
-  }
-  // ════════════════════════════════════════════════════════════════════
+    $(document).on('keydown', function(e){
-  // RESTORE BOOKMARK HIGHLIGHTS from localStorage on page load
+       if (e.key !== 'Escape') return;
-  // ════════════════════════════════════════════════════════════════════
+       if ($fbComposer.hasClass('gra-composer-visible')) closeFeedbackComposer();
-  // Bookmarks store the quote text. We do a best-effort text search
+       else if ($ntComposer.hasClass('gra-composer-visible')) closeNoteComposer();
-  // in the content to re-wrap the same span after page reload.
+       else if ($bmComposer.hasClass('gra-composer-visible')) closeBookmarkComposer();
-  // (Comments are server-stored and we only re-render cards, not re-wrap.)
+      else closePanel();
+     });
-  // ── Persist comment highlight anchors to localStorage ────────────────
-  // We only store {id, quote} — the full comment data lives on the wiki.
-  // On reload, restoreCommentHighlights re-wraps the quote text in the page
-  // so the yellow highlight appears again.
-  function persistCommentHighlight( id, quote ) {
-    try {
-       var stored = JSON.parse( localStorage.getItem( CMT_LS_KEY ) || '[]' );
-       // Deduplicate
-      stored = stored.filter( function(h){ return h.id !== id; } );
-       stored.push( { id: id, quote: quote } );
-       localStorage.setItem( CMT_LS_KEY, JSON.stringify( stored ) );
-     } catch(e){}
    }
-   function restoreCommentHighlights() {
+   // Re-anchors note highlights from _notes, the way bookmarks have always
-    var stored = [];
+  // re-anchored from _bookmarks. This used to read a third store —
-    try { stored = JSON.parse( localStorage.getItem( CMT_LS_KEY ) || '[]' ); } catch(e){}
+  // NT_LS_KEY + '_hl' — holding {id, quote} pairs that _notes already had,
-     stored.forEach( function(h) {
+  // and which nothing kept in step once notes could also arrive from the
-       if ( !h.quote || !h.id ) return;
+  // server. The old key is left alone rather than deleted; it is simply no
-       if ( document.querySelector( '[data-gra-id="' + h.id + '"].gra-comment-highlight' ) ) return;
+  // longer consulted.
-       var needle = h.quote.replace(/…$/, '').trim().slice(0, 80);
+  function restoreNoteHighlights() {
-       if ( !needle ) return;
+     _notes.forEach(function(h){
-       var range = findTextInContent( document.querySelector(CONTENT_SEL), needle );
+       if (!h.quote || !h.id) return;
-       if ( range ) {
+       if (document.querySelector('[data-gra-id="'+h.id+'"].gra-note-highlight')) return;
-        var span = document.createElement('span');
+       var needle = h.quote.replace(/…$/,'').trim().slice(0,80);
-        span.className = 'gra-comment-highlight';
+       if (!needle) return;
-        span.setAttribute('data-gra-id', h.id);
+       var range = findTextInContent(document.querySelector(CONTENT_SEL), needle);
-        try { range.surroundContents(span); } catch(e){}
+       if (!range) return;
-      }
+      var sp = document.createElement('span');
+      sp.className = 'gra-note-highlight';
+      sp.setAttribute('data-gra-id', h.id);
+      try { range.surroundContents(sp); } catch(e){}
      });
    }
@@ Line 875: / Line 1,666: @@
    function restoreBookmarkHighlights() {
      _bookmarks.forEach(function(b){
-       if ( !b.quote ) return;
+       if (!b.quote) return;
-      // Already highlighted from this session
+       if (document.querySelector('[data-gra-id="'+b.id+'"].gra-bookmark-highlight')) return;
-       if ( document.querySelector('[data-gra-id="'+b.id+'"].gra-bookmark-highlight') ) return;
-      // Text search — find first occurrence of quote in content
-      var contentEl = document.querySelector( CONTENT_SEL );
-      if (!contentEl) return;
        var needle = b.quote.replace(/…$/,'').trim().slice(0,60);
        if (!needle) return;
-      // Walk text nodes to find a match
+       var found = findTextInContent(document.querySelector(CONTENT_SEL), needle);
-       var found = findTextInContent( contentEl, needle );
+       if (!found) return;
-       if (found) {
+      var sp = document.createElement('span');
-        var span = document.createElement('span');
+      sp.className = 'gra-bookmark-highlight';
-        span.className = 'gra-bookmark-highlight';
+      sp.setAttribute('data-gra-id', b.id);
-        span.setAttribute('data-gra-id', b.id);
+      sp.setAttribute('data-gra-name', b.name);
-        span.setAttribute('data-gra-name', b.name);
+      try { found.surroundContents(sp); } catch(e){}
-        try {
-          found.surroundContents(span);
-        } catch(e){}
-      }
      });
    }
-   function findTextInContent( root, needle ) {
+   function findTextInContent(root, needle) {
-     // Returns a Range covering the first occurrence of needle in root's text
+     if (!root || !needle) return null;
      var text = root.textContent || '';
      var idx  = text.indexOf(needle);
      if (idx < 0) return null;
-    // Walk to find the exact text nodes
      var iter = document.createNodeIterator(root, NodeFilter.SHOW_TEXT, null, false);
-     var pos  = 0;
+     var pos = 0, node, startNode, startOffset, endNode, endOffset;
-    var node, startNode, startOffset, endNode, endOffset;
      while ((node = iter.nextNode())) {
        var len = node.nodeValue.length;
-       if (!startNode && pos+len > idx) {
+       if (!startNode && pos + len > idx) { startNode = node; startOffset = idx - pos; }
-        startNode   = node;
-        startOffset = idx - pos;
-      }
        var endIdx = idx + needle.length;
-       if (startNode && pos+len >= endIdx) {
+       if (startNode && pos + len >= endIdx) { endNode = node; endOffset = endIdx - pos; break; }
-        endNode   = node;
-        endOffset = endIdx - pos;
-        break;
-      }
        pos += len;
      }
      if (!startNode || !endNode) return null;
-     var range = document.createRange();
+     try {
-    range.setStart(startNode, startOffset);
+      var r = document.createRange();
-    range.setEnd(endNode, endOffset);
+      r.setStart(startNode, startOffset);
-     return range;
+      r.setEnd(endNode, endOffset);
+      return r;
+     } catch(e){ return null; }
    }
-   // ════════════════════════════════════════════════════════════════════
+   // REMOVED: injectAnnotationCss(), which JS-injected a defensive
-   // BOOT
+   // .gra-card-active/.gra-hl-active rule here as a guess, since the real
-   // ════════════════════════════════════════════════════════════════════
+  // gr_annotations.css wasn't available at the time. Now that it is,
+  // confirmed precisely: .gra-hl-active already had working CSS for
+  // notes and footnotes (that JS rule was unneeded there, though it did
+  // fill a real gap for bookmarks' .gra-hl-active, which had none at
+  // all) — and .gra-card-active genuinely only had a rule for
+  // .gra-note-card, nothing for bookmark or footnote cards, confirming
+  // that diagnosis exactly. The JS version also risked overriding the
+  // existing, working note-card style with !important. Fixed directly
+   // in gr_annotations.css instead — see that file.
-   $( function () {
+   $(function() {
+    _mobile = window.innerWidth < 768 || 'ontouchstart' in window;
+    window.addEventListener('resize', function(){
+      _mobile = window.innerWidth < 768 || 'ontouchstart' in window;
+    });
      buildDom();
      wireEvents();
-     loadBookmarks();
+     hydrateCitationSources();
-    restoreBookmarkHighlights();
+     // Commentary blocks arrive after the page does, so hydrate again when
-    restoreCommentHighlights();
+     // they land rather than only once at boot.
-     // Pre-load comment count in background
+    window.addEventListener('gr-new-content', function (e) {
-     loadComments(function(){
+      hydrateCitationSources(e && e.detail && e.detail.container);
-      // Update tab label with count
-      if (_comments.length > 0) {
-        $tabComments.find('span.gra-icon').after(
-          ' <span style="background:#e53935;color:#fff;border-radius:9px;' +
-          'font-size:10px;padding:0 5px;margin-left:2px;">' + _comments.length + '</span>'
-        );
-        // Update toggle badge
-        var $badge = $( '#gra-toggle-badge' );
-        if ( $badge.length ) $badge.text( _comments.length ).css('display','flex');
-      }
      });
-   } );
+    function paint() {
+      try { restoreNoteHighlights(); } catch(e){}
+      try { restoreBookmarkHighlights(); } catch(e){}
+      if ($panel.hasClass('gra-panel-open')) switchTab(_activeTab);
+      updateBadge();
+    }
+    // The cache is in place the moment load() returns, so the first paint
+    // still happens on the old 500 ms timer and feels unchanged. The
+    // server's answer arrives later and paints again — highlights it adds
+    // are skipped if already present, so the second pass only fills in what
+    // the cache did not have: a note made on the phone, or in another
+    // browser.
+    var loaded = Store.load();
+    setTimeout(paint, 500);
+    loaded.always(paint);
+   });
+  // Small count on the toggle, so a reader can tell there is something in
+  // the panel without opening it — worth having now that notes can arrive
+  // from another device.
+  // The count badge is gone. It sat on the round toggle, which clips its
+  // own overflow to stay circular, so the badge was cut off on every side
+  // and told the reader nothing they could act on. Kept as a no-op so the
+  // five call sites that report a change still read clearly.
+  function updateBadge() { }
 }() );