MediaWiki:Gadget-figureSource.js

/* Gadget-figureSource — click-to-source provenance for archived documents.
 *
 * Two modes, keyed on the page:
 *
 * ARCHIVE PAGES (any page with a published figures sidecar,
 * Data:<page>.figures.json): every located figure becomes clickable. Click →
 * an anchored popover showing a CROP of the source PDF with the figure's
 * stored rectangle boxed in coral, plus its tags (row label, column header,
 * caption, p./t. address). The wiki row stays visible beside the popover —
 * the review gesture is "does the wiki cell match the source?", so nothing
 * may cover the cell being compared.
 *
 * Bot:PDF viewer: the full-page stage — ?doc=<archive page>&fig=<figure id>
 * renders the whole PDF page with the box, prev/next paging. Deep-linkable:
 * a figure's evidence is a URL.
 *
 * Data contract: Data:<page>.figures.json (by_id figures — see
 * tools/doc_archive/output/figures.py). Boxes are PDF points, top-left
 * origin; the sidecar's `loc` fields are DOM-computable (table ordinal +
 * expanded grid r/c; chunk + in-order prose occurrences). The mirrored PDF
 * is File:<page with "/"->"-">.pdf, served same-origin via Special:FilePath.
 * NEVER guesses: a figure the sidecar could not locate gets an honest
 * "no source location" popover, and a DOM cell whose text disagrees with
 * the sidecar entry is skipped with a console warning.
 */
(function () {
    'use strict';

    var PDFJS = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
    var PDFJS_WORKER = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
    var VIEWER_PAGE = 'Bot:PDF viewer';
    var RENDER_SCALE = 1.6;          // offscreen page render (points -> px)
    var CROP_MARGIN_X = 110;         // context around the box, PDF points
    var CROP_MARGIN_Y = 16;

    var coral = (getComputedStyle(document.documentElement)
        .getPropertyValue('--ed-accent') || '#f07662').trim() || '#f07662';

    // ── zero-dependency stand-ins for mw.util / mw.loader ──────────────────
    // Deliberate: on this wiki mediawiki.util can hang at "loading" under the
    // page's heavy module soup (VE, popups, SMW), and a gadget waits FOREVER
    // for a declared dependency (found live: the gadget sat at "loaded" while
    // its dependency never resolved). This gadget therefore depends on
    // nothing beyond the startup config, which is always present before
    // gadgets execute.
    var SCRIPT = mw.config.get('wgScript');            // "/w/index.php"
    var ARTICLE = mw.config.get('wgArticlePath');      // "/wiki/$1"
    function esc(s) {
        return String(s).replace(/[&<>"']/g, function (ch) {
            return '&#' + ch.charCodeAt(0) + ';';
        });
    }
    function rawUrl(title) {
        return SCRIPT + '?title=' + encodeURIComponent(title) + '&action=raw';
    }
    function pageUrl(title, params) {
        if (!params) {
            return ARTICLE.replace('$1', encodeURIComponent(title)
                .replace(/%2F/g, '/').replace(/%3A/g, ':'));
        }
        var q = Object.keys(params).map(function (k) {
            return k + '=' + encodeURIComponent(params[k]);
        }).join('&');
        return SCRIPT + '?title=' + encodeURIComponent(title) + '&' + q;
    }
    function addStyle(css) {
        var el = document.createElement('style');
        el.textContent = css;
        document.head.appendChild(el);
    }
    function getScript(url) {
        return new Promise(function (resolve, reject) {
            var el = document.createElement('script');
            el.src = url;
            el.onload = resolve;
            el.onerror = reject;
            document.head.appendChild(el);
        });
    }

    // ── shared: pdf.js + page-canvas cache ─────────────────────────────────
    var pdfjsReady = null;
    function loadPdfJs() {
        if (!pdfjsReady) {
            pdfjsReady = getScript(PDFJS).then(function () {
                window.pdfjsLib.GlobalWorkerOptions.workerSrc = PDFJS_WORKER;
                return window.pdfjsLib;
            });
        }
        return pdfjsReady;
    }

    function mirrorUrl(pageTitle) {
        var file = pageTitle.replace(/\//g, '-') + '.pdf';
        return pageUrl('Special:FilePath/' + file);
    }

    function PdfDoc(url) {                      // one per document, pages cached
        this.url = url;
        this.doc = null;
        this.pages = {};                        // pageno -> {canvas, viewport}
    }
    PdfDoc.prototype.page = function (n) {
        var self = this;
        return loadPdfJs().then(function (lib) {
            self.doc = self.doc || lib.getDocument(self.url).promise;
            return self.doc;
        }).then(function (doc) {
            if (self.pages[n]) { return self.pages[n]; }
            return doc.getPage(n).then(function (pg) {
                var viewport = pg.getViewport({ scale: RENDER_SCALE });
                var canvas = document.createElement('canvas');
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                return pg.render({ canvasContext: canvas.getContext('2d'),
                                   viewport: viewport }).promise
                    .then(function () {
                        self.pages[n] = { canvas: canvas, viewport: viewport };
                        return self.pages[n];
                    });
            });
        });
    };

    // ── archive mode: map sidecar locators onto the DOM ────────────────────
    // Mirror of finmodel wiki_cells.expand_table: dense grid honoring
    // colspan/rowspan, so sidecar (r, c) means the same thing here.
    function expandTable(table) {
        var grid = [];                          // r -> c -> cell element
        var pending = {};                       // c -> [element, rowsLeft]
        var trs = table.querySelectorAll('tr');
        for (var r = 0; r < trs.length; r++) {
            var row = [], c = 0;
            var cells = trs[r].children;
            for (var i = 0; i < cells.length; i++) {
                while (pending[c]) {
                    row[c] = pending[c][0];
                    if (--pending[c][1] === 0) { delete pending[c]; }
                    c++;
                }
                var cell = cells[i];
                if (cell.tagName !== 'TD' && cell.tagName !== 'TH') { continue; }
                var cs = parseInt(cell.getAttribute('colspan') || '1', 10);
                var rs = parseInt(cell.getAttribute('rowspan') || '1', 10);
                for (var k = 0; k < cs; k++) {
                    row[c] = cell;
                    if (rs > 1) { pending[c] = [cell, rs - 1]; }
                    c++;
                }
            }
            while (pending[c]) {
                row[c] = pending[c][0];
                if (--pending[c][1] === 0) { delete pending[c]; }
                c++;
            }
            grid.push(row);
        }
        return grid;
    }

    function cellText(el) {
        var clone = el.cloneNode(true);
        // rendered {{fn ref}} sups + hidden footnote bodies are not cell text
        clone.querySelectorAll('sup.ed-fn-ref, .ed-fn-body').forEach(function (s) {
            s.remove();
        });
        return clone.textContent.replace(/\s+/g, ' ').trim();
    }

    // The chunk a node belongs to = the nearest PRECEDING ed-chunk anchor.
    function chunkOf(node) {
        var anchors = document.querySelectorAll('span.ed-chunk[id]');
        var best = null;
        for (var i = 0; i < anchors.length; i++) {
            var pos = anchors[i].compareDocumentPosition(node);
            /* anchor precedes node */
            if (pos & Node.DOCUMENT_POSITION_FOLLOWING) { best = anchors[i]; }
        }
        if (!best) { return null; }
        var m = best.id.match(/-c(\d+)$/);
        return m ? parseInt(m[1], 10) : null;
    }

    // Wrap the chunk's prose figures IN SIDECAR ORDER with a moving cursor —
    // reproduces the builder's in-chunk ordering without re-implementing its
    // materiality rules in JS.
    function tagProse(entries, tag) {
        var byChunk = {};
        entries.forEach(function (e) {
            (byChunk[e.loc.chunk] = byChunk[e.loc.chunk] || []).push(e);
        });
        Object.keys(byChunk).forEach(function (chunk) {
            var list = byChunk[chunk].sort(function (a, b) {
                return a.loc.n - b.loc.n;
            });
            var anchor = document.querySelector(
                'span.ed-chunk[id$="-c' + chunk + '"]');
            if (!anchor) { return; }
            var root = anchor.closest('h6') || anchor;
            var walker = document.createTreeWalker(
                document.body, NodeFilter.SHOW_TEXT, null);
            walker.currentNode = root;
            var idx = 0, node;
            while (idx < list.length && (node = walker.nextNode())) {
                if (node.parentElement.closest('table, .fig-card, .fig-banner')) { continue; }
                if (chunkOf(node) !== parseInt(chunk, 10)) { break; }
                var at, from = 0;
                while (idx < list.length &&
                       (at = node.data.indexOf(list[idx].text, from)) !== -1) {
                    var range = document.createRange();
                    range.setStart(node, at);
                    range.setEnd(node, at + list[idx].text.length);
                    var span = document.createElement('span');
                    span.className = 'fig-src';
                    range.surroundContents(span);
                    tag(span, list[idx]);
                    idx++;
                    // continue in the tail text node created by the wrap
                    node = span.nextSibling;
                    if (!node || node.nodeType !== Node.TEXT_NODE) { break; }
                    walker.currentNode = span;
                    from = 0;
                }
            }
            if (idx < list.length) {
                console.warn('[figureSource] chunk ' + chunk + ': ' +
                            (list.length - idx) + ' prose figure(s) not found');
            }
        });
    }

    function buildArchiveMode(sidecar) {
        var byEl = new Map();
        var tag = function (el, entry) {
            el.classList.add('fig-src');
            // tabindex is the LOAD-BEARING iOS detail (the footnote cue
            // template ships it too): a focusable element passes Safari's
            // "clickable" heuristic, so taps reliably synthesize click
            // events for document-delegated listeners. Without it, taps on
            // a bare td/span inside a scroll wrapper produce NOTHING.
            el.setAttribute('tabindex', '0');
            byEl.set(el, entry);
        };

        // cells — sidecar table ordinal ↔ DOM .wikitable ordinal
        var tables = Array.prototype.filter.call(
            document.querySelectorAll('#mw-content-text table.wikitable'),
            function (t) { return !t.closest('.fig-card, .fig-banner'); });
        var grids = tables.map(expandTable);
        var located = sidecar.figures.concat(sidecar.unmatched || []);
        var skipped = 0;
        located.forEach(function (entry) {
            if (entry.loc.kind !== 'cell') { return; }
            var grid = grids[entry.loc.table];
            var el = grid && grid[entry.loc.r] && grid[entry.loc.r][entry.loc.c];
            if (!el) { skipped++; return; }
            if (cellText(el).indexOf(entry.text) === -1) {
                console.warn('[figureSource] t' + entry.loc.table + ' r' +
                            entry.loc.r + 'c' + entry.loc.c +
                            ': DOM says "' + cellText(el) + '", sidecar "' +
                            entry.text + '" — skipped');
                skipped++;
                return;
            }
            tag(el, entry);
        });

        // prose
        tagProse(located.filter(function (e) {
            return e.loc.kind === 'prose';
        }), tag);

        console.info('[figureSource] tagged ' + byEl.size + ' figure(s), ' +
               skipped + ' skipped');
        return byEl;
    }

    function tagsHtml(el, entry) {
        // Address order, outer -> inner (user design): caption (which
        // table, incl. its [t. N] index) -> column header -> row label —
        // the same drill-down the sidecar's own locator uses.
        var parts = [];
        if (entry.loc.kind === 'cell') {
            var table = el.closest('table');
            var grid = expandTable(table);
            var cap = table.querySelector('caption');
            if (cap) { parts.push(cellText(cap)); }
            var headers = [];
            for (var h = 0; h < grid.length; h++) {
                var rowEls = grid[h] || [];
                var isHeader = rowEls.length &&
                    rowEls.every(function (c) { return c && c.tagName === 'TH'; });
                if (!isHeader) { break; }
                var cell = rowEls[entry.loc.c];
                var t = cell && cellText(cell);
                if (t && headers.indexOf(t) === -1) { headers.push(t); }
            }
            if (headers.length) { parts.push(headers.join(' · ')); }
            var label = grid[entry.loc.r] && grid[entry.loc.r][0];
            if (label && label !== el) { parts.push(cellText(label)); }
        } else {
            parts.push('chunk ' + entry.loc.chunk);
        }
        // one line, middle-dot separated ("Solvency II ratio (%) · FY24 · …")
        return parts.length
            ? '<div class="fig-tags">' + parts.map(esc).join(' · ') + '</div>'
            : '';
    }

    // ── source peek — the FOOTNOTE pattern (Common.js .ed-fn machinery) ────
    // One body-appended surface, never an in-flow element: a fixed CARD on
    // hover (desktop), a full-width top BANNER on tap (touch). Body-appended
    // means root stacking context — no sticky column or table scroll wrapper
    // can cover or clip it, the bug class the old in-flow popover had.
    // Desktop: hover = peek (card is pointer-events:none, like .ed-fn-popover,
    // so it can hold no link), click = open the viewer. Touch: tap = banner
    // (interactive, carries the open link), next tap anywhere dismisses.

    function addressOf(entry) {
        return entry.page
            ? 'p. ' + entry.page
            : (entry.reason === 'ambiguous'
                ? 'no source location (ambiguous ×' + entry.candidates + ')'
                : 'no source location (' + (entry.reason || 'unmatched') + ')');
    }

    function peekHtml(el, entry, withLink) {
        var openHref = pageUrl(VIEWER_PAGE, {
            doc: mw.config.get('wgPageName'), fig: entry.id || '' });
        return '<div class="fig-crop">' +
            (entry.rect ? '<canvas></canvas>' : '') + '</div>' +
            tagsHtml(el, entry) +
            '<div class="fig-addr"><span>' + esc(addressOf(entry)) +
            '</span>' + (withLink && entry.id ? '<a href="' + openHref +
            '" target="_blank">open ↗</a>' : '') + '</div>';
    }

    function renderCrop(container, entry, pdf) {
        if (!entry.rect) { return; }
        pdf.page(entry.page).then(function (pg) {
            var s = pg.viewport.scale;
            var x0 = Math.max(0, (entry.rect[0] - CROP_MARGIN_X) * s);
            var y0 = Math.max(0, (entry.rect[1] - CROP_MARGIN_Y) * s);
            var w = Math.min(pg.canvas.width - x0,
                             (entry.rect[2] - entry.rect[0] + 2 * CROP_MARGIN_X) * s);
            var h = Math.min(pg.canvas.height - y0,
                             (entry.rect[3] - entry.rect[1] + 2 * CROP_MARGIN_Y) * s);
            var cv = container.querySelector('canvas');
            if (!cv) { return; }         // peek already dismissed
            cv.width = w; cv.height = h;
            var ctx = cv.getContext('2d');
            ctx.drawImage(pg.canvas, x0, y0, w, h, 0, 0, w, h);
            ctx.strokeStyle = coral;
            ctx.lineWidth = 2;
            ctx.strokeRect((entry.rect[0]) * s - x0 - 2,
                           (entry.rect[1]) * s - y0 - 2,
                           (entry.rect[2] - entry.rect[0]) * s + 4,
                           (entry.rect[3] - entry.rect[1]) * s + 4);
        }, function () {
            var crop = container.querySelector('.fig-crop');
            if (crop) { crop.textContent = 'mirror PDF not available'; }
        });
    }

    function attachPeek(byEl, pdf) {
        var box = null, activeCue = null;
        function close() {
            if (box) { box.remove(); box = null; }
            activeCue = null;
            document.removeEventListener('click', onAway, true);
        }
        function onAway(e) {
            // clicks INSIDE the surface never dismiss it — the open link
            // must be clickable on both surfaces
            if (box && box.contains(e.target)) { return; }
            if (!cueOf(e)) { close(); }
        }
        function cueOf(e) {
            var t = e.target;
            if (!t || !t.closest) { return null; }
            if (t.closest('.ed-fn')) { return null; }  // footnote cues win
            var el = t.closest('.fig-src');
            return el && byEl.has(el) ? el : null;
        }
        var touch = window.matchMedia &&
            window.matchMedia('(hover: none)').matches;

        if (touch) {
            // tap -> top banner (interactive: it carries the open link);
            // the next tap anywhere dismisses — .ed-fn banner behavior
            document.addEventListener('click', function (e) {
                var cue = cueOf(e);
                if (!cue) { return; }
                e.preventDefault();
                e.stopPropagation();
                close();
                var entry = byEl.get(cue);
                box = document.createElement('div');
                box.className = 'fig-banner';
                box.innerHTML = peekHtml(cue, entry, true);
                document.body.appendChild(box);
                renderCrop(box, entry, pdf);
                setTimeout(function () {
                    document.addEventListener('click', onAway, true);
                }, 0);
            }, false);
        } else {
            // Desktop: CLICK -> anchored card below the cell — the original
            // UI, which the user preferred over a hover peek (and which the
            // touch banner mirrors). The card carries the open link, so
            // unlike the footnote hover popover it is interactive.
            document.addEventListener('click', function (e) {
                if (box && box.contains(e.target)) { return; }
                var cue = cueOf(e);
                if (!cue) { return; }
                e.preventDefault();
                e.stopPropagation();
                close();
                activeCue = cue;
                var entry = byEl.get(cue);
                box = document.createElement('div');
                box.className = 'fig-card';
                box.innerHTML = peekHtml(cue, entry, true);
                document.body.appendChild(box);
                // page coordinates (absolute), so the card scrolls WITH the
                // page like the original; left clamped for narrow viewports
                var r = cue.getBoundingClientRect();
                box.style.left = Math.max(8, Math.min(r.left + window.scrollX,
                    window.scrollX + document.documentElement.clientWidth -
                    box.offsetWidth - 8)) + 'px';
                box.style.top = (r.bottom + window.scrollY + 6) + 'px';
                renderCrop(box, entry, pdf);
                setTimeout(function () {
                    document.addEventListener('click', onAway, true);
                }, 0);
            }, false);
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape') { close(); }
            });
        }
    }

    // ── viewer mode (Bot:PDF viewer) ───────────────────────────────────────
    function runViewer() {
        var q = new URLSearchParams(location.search);
        var doc = q.get('doc'), figId = q.get('fig');
        var root = document.querySelector('#mw-content-text');
        if (!doc) {
            root.textContent = 'Missing ?doc=<archive page title>.';
            return;
        }
        // NB: this wiki serves EMPTY 200s for missing action=raw pages —
        // existence must be tested on the body, never on r.ok.
        fetch(rawUrl('Data:' + doc + '.figures.json'))
            .then(function (r) { return r.text(); })
            .then(function (t) {
                if (!t) { throw new Error('no sidecar for ' + doc); }
                return JSON.parse(t);
            })
            .then(function (sidecar) {
                var fig = null;
                sidecar.figures.forEach(function (f) {
                    if (f.id === figId) { fig = f; }
                });
                var pdf = new PdfDoc(mirrorUrl(doc));
                var page = fig ? fig.page : parseInt(q.get('page') || '1', 10);
                // The document name IS the back link (no separate "← back"),
                // and the page label sits BETWEEN prev and next (user design).
                root.innerHTML =
                    '<div class="fig-viewer-bar"><a class="fig-doc" href="' +
                    pageUrl(doc) + '">' + esc(doc.replace(/_/g, ' ')) +
                    '</a><span class="fig-controls">' +
                    '<button class="fig-prev">‹ prev</button>' +
                    '<span class="fig-viewer-page"></span>' +
                    '<button class="fig-next">next ›</button></span></div>' +
                    '<div class="fig-stage"><div class="fig-page">' +
                    '<canvas></canvas><div class="fig-box"></div></div></div>';
                var render = function () {
                    pdf.page(page).then(function (pg) {
                        var cv = root.querySelector('canvas');
                        cv.width = pg.canvas.width;
                        cv.height = pg.canvas.height;
                        cv.getContext('2d').drawImage(pg.canvas, 0, 0);
                        root.querySelector('.fig-viewer-page').textContent =
                            ' page ' + page;
                        var box = root.querySelector('.fig-box');
                        if (fig && fig.page === page) {
                            // PERCENT coordinates: the canvas is responsive
                            // (max-width:100%), so px offsets computed at
                            // render scale would drift the moment CSS scales
                            // the bitmap — percentages track the displayed
                            // size for free.
                            var s = pg.viewport.scale;
                            var W = pg.canvas.width, H = pg.canvas.height;
                            box.style.display = 'block';
                            box.style.left = ((fig.rect[0] * s - 3) / W * 100) + '%';
                            box.style.top = ((fig.rect[1] * s - 3) / H * 100) + '%';
                            box.style.width = (((fig.rect[2] - fig.rect[0]) * s + 6) / W * 100) + '%';
                            box.style.height = (((fig.rect[3] - fig.rect[1]) * s + 6) / H * 100) + '%';
                            box.scrollIntoView({ block: 'center' });
                        } else {
                            box.style.display = 'none';
                        }
                    });
                };
                root.querySelector('.fig-prev').onclick = function () {
                    if (page > 1) { page--; render(); }
                };
                root.querySelector('.fig-next').onclick = function () {
                    page++; render();
                };
                render();
            })
            .catch(function (e) {
                root.textContent = 'Could not load: ' + e.message;
            });
    }

    // ── archive-mode bootstrap ─────────────────────────────────────────────
    function runArchive() {
        var title = mw.config.get('wgPageName').replace(/_/g, ' ');
        fetch(rawUrl('Data:' + title + '.figures.json'))
            .then(function (r) { return r.text(); })
            .then(function (t) {                 // empty 200 = no sidecar here
                var sidecar = t ? JSON.parse(t) : null;
                if (!sidecar || !sidecar.figures) { return; }
                var byEl = buildArchiveMode(sidecar);
                if (!byEl.size) { return; }
                attachPeek(byEl, new PdfDoc(mirrorUrl(title)));
            });
    }

    addStyle(
        '.fig-src{cursor:pointer}' +
        '.fig-src:hover{text-decoration:underline;' +
        'text-decoration-color:' + coral + ';text-underline-offset:3px}' +
        // full-bleed crop: the popover's own ink border frames the image
        // (no inner padding/margins); only the text block below is inset.
        // All popover text follows the house small size, footer in page ink.
        // ── peek surfaces, mirroring the footnote machinery ──
        // .fig-card = .ed-fn-popover's shape: fixed, body-appended (root
        // stacking context — never clipped by a table scroll wrapper),
        // pointer-events:none, ink frame, house shadow. Color is pinned to
        // --text-dark because body-attached elements inherit the SKIN's
        // #202122, not the content area's ink.
        // absolute (page coords) so it scrolls with the page like the
        // original popover; interactive because it carries the open link
        '.fig-card{position:absolute;z-index:2147483647;' +
        'max-width:min(420px,90vw);background:#fff;padding:0;' +
        'border:1px solid #0d0d0d;color:var(--text-dark,#0d0d0d);' +
        'box-shadow:0 4px 16px rgba(43,41,38,.18);pointer-events:auto}' +
        // full-bleed crop in both surfaces (declare border/margin — an
        // omitted property lets a stale stacked stylesheet rule survive)
        '.fig-card canvas,.fig-banner canvas{width:100%;height:auto;' +
        'display:block;border:0;margin:0}' +
        '.fig-card .fig-crop{border-bottom:1px solid #ddd}' +
        '.fig-card .fig-crop:empty,.fig-banner .fig-crop:empty{display:none}' +
        '.fig-tags{font-size:var(--ed-small,14px);line-height:1.45}' +
        '.fig-card .fig-tags{padding:8px 10px 0}' +
        '.fig-addr{display:flex;justify-content:space-between;' +
        'font-size:var(--ed-small,14px);color:inherit}' +
        '.fig-card .fig-addr{padding:6px 10px 10px}' +
        // .fig-banner = .ed-fn-banner's shape: full-width, pinned to the
        // top, near-black, safe-area padded — the touch surface, and it IS
        // interactive (carries the open link), unlike the hover card
        '.fig-banner{position:fixed;top:0;left:0;right:0;' +
        'z-index:2147483647;box-sizing:border-box;' +
        'padding:calc(0.9em + env(safe-area-inset-top)) 1.2em 0.9em;' +
        'background:rgba(20,18,16,0.92);color:#fff;' +
        'font-size:var(--ed-small,14px);line-height:1.5}' +
        '.fig-banner canvas{margin-bottom:8px}' +
        '.fig-banner .fig-addr{margin-top:4px}' +
        '.fig-banner a{color:#fff;text-decoration:underline}' +
        // one explicit size for every bar item — name, page label, buttons —
        // so nothing inherits a divergent size from the surrounding skin
        // --ed-small is THE house small size (chunk markers, tables, infobox
        // all use it) — the viewer chrome follows it by contract, not by a
        // literal that happens to match today
        '.fig-viewer-bar{display:flex;gap:14px;align-items:center;' +
        'padding:8px 0;margin-bottom:12px;' +
        'font-size:var(--ed-small,14px);border-bottom:0}' +
        '.fig-viewer-bar .fig-doc{font-weight:bold;' +
        'font-size:var(--ed-small,14px)}' +
        '.fig-controls{display:flex;gap:10px;align-items:center;' +
        'margin-left:auto}' +
        '.fig-viewer-bar button{font:inherit;' +
        'font-size:var(--ed-small,14px);background:#fff;' +
        'border:1px solid #0d0d0d;padding:2px 12px;cursor:pointer}' +
        '.fig-stage{overflow:auto;text-align:center}' +
        // the page frame: ink border so the white page reads as an OBJECT on
        // the white wiki background; position:relative so the coral box is
        // canvas-anchored (absolute children resolve against the padding box,
        // so the border adds no offset) — centering via the stage no longer
        // drifts the box on wide windows
        '.fig-page{position:relative;display:inline-block;' +
        'border:1px solid #0d0d0d;background:#fff}' +
        // responsive page: never wider than the column, so the right border
        // stays visible and no horizontal scrollbar (the house dark
        // scrollbar was the "thick dark line" under the page)
        '.fig-page canvas{display:block;max-width:100%;height:auto}' +
        '.fig-box{position:absolute;display:none;border:3px solid ' + coral +
        ';pointer-events:none}');

    function boot() {
        if (mw.config.get('wgPageName') === VIEWER_PAGE.replace(/ /g, '_')) {
            runViewer();
        } else if (mw.config.get('wgNamespaceNumber') === 0) {
            runArchive();
        }
    }
    // A dependency-free gadget can execute before the content is parsed.
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', boot);
    } else {
        boot();
    }
}());