@khorsheed/dsh-reader 0.3.0 → 0.3.2

package/lib/types/client/extract-article.js

@@ -14,7 +14,10 @@
  * - {@link normalizeRichText} takes markup that is ALREADY known to be a body
  *   (a feed's `content:encoded`, or the block extraction selected) and puts it
  *   through a tag whitelist, so the renderer never sees third-party scripts,
- *   styles, forms or event handlers.
+ *   styles, forms or event handlers. The one sanctioned exception: a content
+ *   embed (`embedElement`) survives as a sandboxed iframe — `allow-scripts`
+ *   without `allow-same-origin`, an opaque origin that cannot see the pane —
+ *   or as a native controls-only media element.
  *
  * Everything runs in the browser because the host runtime has no DOM parser at
  * all; nothing here touches the network.
@@ -55,16 +58,46 @@ const KEEP_TAGS = new Set([
  */
 const DROP_TAGS = new Set([
     'script', 'style', 'template', 'nav', 'header', 'footer', 'aside',
-    'form', 'iframe', 'annotation-xml', 'button', 'select', 'input', 'textarea', 'video',
-    'audio', 'canvas', 'embed', 'link', 'meta', 'base', 'title',
+    'form', 'annotation-xml', 'button', 'select', 'input', 'textarea',
+    'canvas', 'embed', 'link', 'meta', 'base', 'title',
+    // iframe/video/audio are NOT here: the embed is content the page published,
+    // and normalizeNode keeps it (see embedElement) — a sandboxed opaque-origin
+    // frame for an iframe, a native controls player for media. Trackers
+    // (hidden, pixel-sized, untitled-and-unsized iframes) stay dropped there.
     // svg is NOT here: capture-rendered pages carry their rescued figures as
     // inline SVG, which normalizeSvg() whitelists per element/attribute. The
     // strip's selector gains the canonical-case members separately (SVG names are
-    // case-sensitive in an HTML document).
-    'foreignobject',
+    // case-sensitive in an HTML document). `foreignObject` is not here either: its
+    // HTML is a figure's labels, and normalizeSvg() walks it through this file's
+    // own whitelist.
 ]);
 /** The strip selector's exact-case members (SVG camelCase names in an HTML document). */
-const DROP_STRIP_EXTRA = ['foreignObject'];
+const DROP_STRIP_EXTRA = [];
+/**
+ * Page furniture that sits beside an article in the same container and that
+ * no tag or score tells apart from it. Named by id, per site, only where the
+ * id is the platform's own and stable.
+ *
+ * WeChat (mp.weixin.qq.com): `#content_bottom_area` holds the 腾讯公益
+ * donation card (一起捐, the donors' avatars), the like/share bar and the
+ * album modal; `#js_tags_preview_toast` is 「预览时标签不可点」. A rendered
+ * fetch runs the page's scripts, which fill both in, and the winning container
+ * (`.rich_media_area_primary_inner`) holds them next to `#js_content`.
+ */
+const NOISE_SELECTORS = ['#content_bottom_area', '#js_tags_preview_toast'];
+/**
+ * Article roots a platform names itself, taken as the body without scoring.
+ *
+ * WeChat's `#js_content` is exactly the article: the title, byline and the
+ * 「在小说阅读器读本章」 card sit beside it in `#img-content`, and a rendered
+ * fetch fills the page with modal layers (the font-size panel, the complaint
+ * dialog, the comment-identity popover, the a11y labels) that the scorer
+ * measured as one more container of text and let win. The pane renders the
+ * title itself, and the document `<title>` is the article's.
+ */
+const ARTICLE_ROOTS = ['#js_content'];
+/** Below this much text a named root is not trusted (a lazy page not yet filled in). */
+const ARTICLE_ROOT_MIN_TEXT = 120;
 /** Inline elements that survive an inline-only pass. */
 const INLINE_TAGS = new Set(['strong', 'em', 'b', 'i', 'u', 's', 'code', 'a', 'sub', 'sup', 'br']);
 /**
@@ -143,6 +176,9 @@ const KEPT_ATTRIBUTES = {
     // fallback), `display` marks block math (the pane scrolls it horizontally).
     // Everything else — event handlers, `href` on <mi>, style hooks — is stripped.
     math: ['alttext', 'display'],
+    // Set by settleListLabels(): the item writes its own label, so the pane
+    // hides the list's native marker for it.
+    li: ['data-labelled'],
 };
 /**
  * Where lazy-loading scripts stash the real URL when `src` is a placeholder.
@@ -175,10 +211,15 @@ export function extractArticle(pageHtml, baseUrl) {
     const docTitle = doc.title ?? '';
     // Strip the noise subtrees BEFORE scoring, so every candidate is measured on
     // the same terms (a sidebar full of links otherwise wins on raw text mass).
-    for (const node of Array.from(doc.querySelectorAll([...DROP_TAGS, ...DROP_STRIP_EXTRA].join(',')))) {
+    for (const node of Array.from(doc.querySelectorAll([...DROP_TAGS, ...DROP_STRIP_EXTRA, ...NOISE_SELECTORS].join(',')))) {
         node.remove();
     }
-    const scored = scoreCandidates(doc);
+    settleMathJaxTwins(doc.body);
+    settleListLabels(doc.body);
+    const named = ARTICLE_ROOTS
+        .map(selector => doc.querySelector(selector))
+        .find((element) => element !== null && textLengthOf(element) >= ARTICLE_ROOT_MIN_TEXT);
+    const scored = named === undefined ? scoreCandidates(doc) : { element: named, score: 0 };
     if (scored === undefined) {
         return { ok: false, error: 'no text-bearing block found' };
     }
@@ -189,6 +230,9 @@ export function extractArticle(pageHtml, baseUrl) {
     const title = articleTitleOf(scored.element, docTitle);
     const excerpt = articleExcerptOf(scored.element);
     trimLeadingChrome(scored.element, doc);
+    // …and the lead image comes in AFTER the trim: grafted first, it would
+    // stop the masthead walk at its own border and keep the junk behind it.
+    graftLeadingFigures(doc, scored.element, baseUrl);
     // The title block is a custom element, so it has no tag of its own: the
     // normalizer UNWRAPS it and its `<br>`s land at the front of the body. Four
     // blank lines before the first paragraph is not content by any reading, and
@@ -284,7 +328,12 @@ function trimLeadingChrome(root, doc) {
         const text = normalize(node.textContent ?? '');
         if (ROOT_STOPS.has(tag))
             break;
-        if (node.querySelector('img, picture, canvas, video, figure') !== null)
+        // A picture or an embed stops the walk whether it IS this node or sits
+        // inside it — a bare leading <img> has no img DESCENDANT, and dropping it
+        // as "masthead" is how a text-column-less cover used to vanish.
+        if (tag === 'img' || tag === 'picture' || tag === 'figure' || tag === 'video' || tag === 'iframe' || tag === 'audio')
+            break;
+        if (node.querySelector('img, picture, canvas, video, figure, iframe, audio') !== null)
             break;
         if (text.length >= 40)
             break;
@@ -313,13 +362,98 @@ function trimLeadingChrome(root, doc) {
  * a masthead hides in, and a wrapper is judged by what it holds instead.
  */
 const ROOT_STOPS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'table', 'blockquote', 'pre', 'ul', 'ol']);
+/**
+ * The most lead images one graft brings in. A hero is one picture; the second
+ * slot covers the two-image masthead (a logo plate beside the cover). Anything
+ * beyond that is a gallery the page put before its prose, not a lead.
+ */
+const LEAD_GRAFT_MAX = 2;
+/**
+ * The declared width that separates a lead image from an icon. SSR'd hero
+ * markup carries the design width (Next.js writes `width`/`height` on every
+ * `<img>` it optimizes); an icon or avatar that omits it, or declares a small
+ * one, is not the article's cover by any reading.
+ */
+const LEAD_IMAGE_MIN_WIDTH = 480;
+/**
+ * Bring the page's lead image into the body when the scorer left it outside.
+ *
+ * The scorer keeps ONE container — the text-heavy block — and on magazine-style
+ * templates (Anthropic's research posts, measured 2026-10-14) the cover art
+ * sits in a sibling wrapper BEFORE that block: inside the `<article>` but not
+ * inside the winner, so the extracted body came back with zero images on a
+ * page whose hero was the one picture it had.
+ *
+ * Only what PRECEDES the winner qualifies: what follows the text is a
+ * related-stories grid, and a figure already inside the winner needs nothing.
+ * A `<figure>`/`<picture>` qualifies by markup alone (a figure IS content); a
+ * bare `<img>` must also declare a hero-sized width, or every site's top-bar
+ * logo would ride in. Grafting MOVES the elements, so the images normalize
+ * through the same resolver as everything else the body carries.
+ *
+ * @param doc - the parsed document (already stripped of noise subtrees).
+ * @param winner - the container the scorer picked.
+ * @param baseUrl - the page URL, for resolving candidate sources.
+ */
+function graftLeadingFigures(doc, winner, baseUrl) {
+    // The search scope: the OUTERMOST article/main ancestor, not the nearest —
+    // templates nest them (`main > article > wrapper > article > text column`),
+    // and the lead image sits under the outer one, beside the wrapper.
+    let scope = null;
+    for (let el = winner.parentElement; el !== null && el !== doc.body; el = el.parentElement) {
+        if (el.localName === 'article' || el.localName === 'main')
+            scope = el;
+    }
+    scope ??= doc.body;
+    if (scope === null || scope === winner)
+        return;
+    const grafted = [];
+    for (const element of Array.from(scope.querySelectorAll('figure, picture, img'))) {
+        if (grafted.length >= LEAD_GRAFT_MAX)
+            break;
+        if (winner.contains(element))
+            continue;
+        // `winner` FOLLOWING the element means the element precedes the body.
+        if ((element.compareDocumentPosition(winner) & 4 /* Node.DOCUMENT_POSITION_FOLLOWING */) === 0)
+            continue;
+        const tag = element.localName;
+        if (tag === 'figure') {
+            const img = element.querySelector('img');
+            if (img === null || imageSrc(img, baseUrl) === undefined)
+                continue;
+            grafted.push(element);
+            continue;
+        }
+        if (tag === 'picture') {
+            // A figure's own picture rides the figure (it came first in the walk).
+            if (element.closest('figure') !== null)
+                continue;
+            if (pictureImg(element, baseUrl).length === 0)
+                continue;
+            grafted.push(element);
+            continue;
+        }
+        // A bare <img>: covered when a figure/picture ancestor carries it.
+        if (element.closest('figure, picture') !== null)
+            continue;
+        const width = dimensionAttr(element.getAttribute('width'));
+        if (width === undefined || Number(width) < LEAD_IMAGE_MIN_WIDTH)
+            continue;
+        if (imageSrc(element, baseUrl) === undefined)
+            continue;
+        grafted.push(element);
+    }
+    for (const element of grafted.reverse())
+        winner.prepend(element);
+}
 /**
  * Count the figures whose picture is not in the markup.
  *
  * "No picture" means no `<img>`, `<svg>`, `<canvas>`, `<video>` or `<picture>`
  * anywhere inside: the page renders that illustration at runtime. A `<math>`
  * subtree counts as content — a formula-only figure's picture IS its markup —
- * and so does an image-typed `<object>` (the LaTeXML vector-figure shape).
+ * and so does an image-typed `<object>` (the LaTeXML vector-figure shape) and
+ * an iframe/audio embed, which normalizeNode turns into a link that opens it.
  * A composite of styled containers carries its content as TEXT (a capture-
  * rendered figure is a diagram plus property cards): enough non-caption words
  * means the figure is here, even with no raster or vector island.
@@ -337,7 +471,7 @@ const ROOT_STOPS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'table', 'b
 function countScriptFigures(root) {
     let count = 0;
     for (const figure of Array.from(root.querySelectorAll('figure'))) {
-        if (figure.querySelector('img, svg, canvas, video, picture, math, object[type^="image/"]') !== null)
+        if (figure.querySelector('img, svg, canvas, video, picture, math, object[type^="image/"], iframe[src], audio') !== null)
             continue;
         // A composite of styled containers CARRIES its content in the markup (a
         // capture-rendered figure is boxes of text): what is not the caption is
@@ -543,7 +677,8 @@ function normalizeNode(node, baseUrl, inFigure = false) {
         const src = imageSrc(element, baseUrl);
         if (src === undefined)
             return '';
-        return emitImg(src, element.getAttribute('alt'));
+        const width = displayWidth(element);
+        return emitImg(src, element.getAttribute('alt'), width === undefined ? {} : { width });
     }
     // LaTeXML embeds vector figures as image-typed objects: an image in every
     // sense that matters here. Any other object (a PDF, a movie) keeps the old
@@ -556,6 +691,13 @@ function normalizeNode(node, baseUrl, inFigure = false) {
     // either duplicate the image or lose it.
     if (tag === 'picture')
         return pictureImg(element, baseUrl);
+    // A video/audio file or an embedded live frame (Anthropic's research posts
+    // carry their charts as sandboxed iframe artifacts — 16 of them on one page)
+    // cannot PLAY here, but it is content the page published at that spot:
+    // leave a link that opens it where it renders, or the section reads as if
+    // the picture it discusses never existed.
+    if (tag === 'iframe' || tag === 'video' || tag === 'audio')
+        return embedElement(tag, element, baseUrl);
     // The standard no-JS fallback: a lazy-loading script hides the real image in
     // a <noscript>, and a fetch runs no scripts — so the ONLY copy the static
     // markup holds lives here. Recover that image; drop everything else a
@@ -564,14 +706,19 @@ function normalizeNode(node, baseUrl, inFigure = false) {
         return noscriptImg(element, baseUrl);
     // Capture-rendered pages carry their rescued figures as inline SVG with
     // styles inlined onto the elements; the subset walker below keeps the chart
-    // and strips the injection-shaped members (script, foreignObject, SMIL).
+    // and strips the injection-shaped members (script, SMIL) and whitelists foreignObject labels.
     if (tag === 'svg')
-        return normalizeSvg(element);
+        return isResponsiveAlternate(element) ? '' : normalizeSvg(element, baseUrl);
     if (tag === 'br')
         return '<br>';
     if (tag === 'hr')
         return '<hr>';
-    const inner = normalizeChildren(element, baseUrl, inFigure || tag === 'figure');
+    const latexml = tag === 'span' ? latexmlSpan(element) : undefined;
+    let inner = normalizeChildren(element, baseUrl, inFigure || tag === 'figure');
+    if (latexml?.bold === true && inner.trim().length > 0)
+        inner = `<strong>${inner}</strong>`;
+    if (latexml?.italic === true && inner.trim().length > 0)
+        inner = `<em>${inner}</em>`;
     // A figure's composite layout IS its content (a capture-rendered figure is a
     // diagram plus property cards built from styled containers), so inside one
     // the div/span boxes survive as elements with their allowlisted style —
@@ -581,8 +728,16 @@ function normalizeNode(node, baseUrl, inFigure = false) {
         // A kept container with neither text nor style is a shell, not a layout.
         if (inner.trim().length === 0 && style === undefined)
             return '';
-        return `<${tag}${style === undefined ? '' : ` style="${escapeAttribute(style)}"`}>${inner}</${tag}>`;
+        // A bare span is no layout either: it renders exactly as its content.
+        if (tag === 'span' && style === undefined && latexml?.paragraph !== true)
+            return inner;
+        // A LaTeXML paragraph span is a block in the page's stylesheet: kept as a
+        // span, a figure label's lines would run together.
+        const kept = latexml?.paragraph === true ? 'div' : tag;
+        return `<${kept}${style === undefined ? '' : ` style="${escapeAttribute(style)}"`}>${inner}</${kept}>`;
     }
+    if (latexml?.paragraph === true)
+        return `\n${inner}\n`;
     if (!KEEP_TAGS.has(tag)) {
         // Unwrapped block-ish containers leave a word boundary: capture's
         // serialization carries no inter-tag whitespace, and two sibling cards
@@ -605,6 +760,89 @@ function normalizeNode(node, baseUrl, inFigure = false) {
         .join('');
     return `<${tag}${attributes}>${inner}</${tag}>`;
 }
+/**
+ * What a LaTeXML (arXiv HTML) span means through its classes alone.
+ *
+ * LaTeXML writes block paragraphs and font changes as classed spans and lets
+ * its stylesheet do the rest; the extraction carries no stylesheet, so the
+ * meaning is read here or lost.
+ */
+function latexmlSpan(element) {
+    const classes = element.getAttribute('class') ?? '';
+    if (!classes.includes('ltx_'))
+        return undefined;
+    return {
+        paragraph: /\bltx_p\b/.test(classes),
+        bold: /\bltx_font_bold\b/.test(classes),
+        italic: /\bltx_font_italic\b/.test(classes),
+    };
+}
+/** A list item label the list's native disc already draws. */
+const BULLET_LABEL = /^[•∙◦▪▫‣⁃·–—*-]$/;
+/** An item label worth keeping: `1.`, `(2)`, `a)`, `(iv)`. */
+const ITEM_LABEL = /^(?:\(?\d{1,3}[.)]|\(\d{1,3}\)|\(?[a-z]{1,2}[.)]|\([a-z]{1,2}\)|\(?[ivxlc]{1,6}[.)]|\([ivxlc]{1,6}\))$/i;
+/**
+ * Settle list items that write their own label in front of a block.
+ *
+ * LaTeXML (arXiv HTML) turns the native marker off and writes each label as a
+ * text tag before the item's paragraph: `<li><span>•</span> <div><p>…`. Without
+ * the page's stylesheet the native disc comes back next to the written one and
+ * the paragraph drops to the line below. A bare bullet is removed (the disc
+ * stands for it); a real label (`(a)`, `2.`) moves into the first paragraph and
+ * the item is marked `data-labelled` so the pane hides its native marker.
+ *
+ * Matched by structure, not class, so it settles stored bodies too: the label
+ * is the item's whole leading text, and a paragraph block follows it.
+ *
+ * @param root - the subtree to settle in place.
+ * @returns true when anything changed.
+ */
+function settleListLabels(root) {
+    let changed = false;
+    for (const item of Array.from(root.querySelectorAll('li'))) {
+        const label = firstMeaningful(item.firstChild);
+        if (label === null)
+            continue;
+        if (label.nodeType === 1) {
+            const element = label;
+            if (element.localName.toLowerCase() !== 'span' || element.children.length > 0)
+                continue;
+        }
+        else if (label.nodeType !== 3) {
+            continue;
+        }
+        const block = firstMeaningful(label.nextSibling);
+        if (block === null || block.nodeType !== 1)
+            continue;
+        const blockTag = block.localName.toLowerCase();
+        if (blockTag !== 'p' && blockTag !== 'div')
+            continue;
+        const paragraph = blockTag === 'p' ? block : block.querySelector('p');
+        if (paragraph === null)
+            continue;
+        const text = (label.textContent ?? '').trim();
+        if (BULLET_LABEL.test(text)) {
+            label.remove();
+        }
+        else if (ITEM_LABEL.test(text)) {
+            label.remove();
+            paragraph.prepend(`${text} `);
+            item.setAttribute('data-labelled', '');
+        }
+        else {
+            continue;
+        }
+        changed = true;
+    }
+    return changed;
+}
+/** The node itself or the first following sibling that is not blank text. */
+function firstMeaningful(node) {
+    let current = node;
+    while (current !== null && current.nodeType === 3 && (current.textContent ?? '').trim().length === 0)
+        current = current.nextSibling;
+    return current;
+}
 /**
  * Serialize one normalized image.
  *
@@ -617,6 +855,29 @@ function emitImg(src, alt, dimensions = {}) {
     const height = dimensions.height === undefined ? '' : ` height="${dimensions.height}"`;
     return `<img src="${escapeAttribute(src)}"${alt === null ? '' : ` alt="${escapeAttribute(alt)}"`}${width}${height} referrerpolicy="no-referrer">`;
 }
+/**
+ * The width the page shows an image at: its inline `width: Npx`.
+ *
+ * Without it every image renders at its natural size up to the column. A
+ * logo row is where that shows: claude.com ships a 132×128 PNG with
+ * `style="width:48.89px"`, and the reader drew it three times too large. Only
+ * a pixel width counts (`100%`, `auto` and `max-width` say nothing about the
+ * picture), and the column's `max-width: 100%` still caps it. The `width`
+ * attribute is not carried: it is usually the file's own size, which is what
+ * the image renders at anyway.
+ *
+ * @param element - the `<img>`.
+ * @returns the width as an integer string, or `undefined`.
+ */
+function displayWidth(element) {
+    const styled = /(?:^|;)\s*width\s*:\s*(\d+(?:\.\d+)?)px/i.exec(element.getAttribute('style') ?? '');
+    if (styled !== null) {
+        const px = Math.round(Number(styled[1]));
+        if (px >= 1 && px <= 99_999)
+            return String(px);
+    }
+    return undefined;
+}
 /** An integer dimension worth carrying onto the emitted image (nothing else is trusted). */
 function dimensionAttr(value) {
     if (value === null)
@@ -649,6 +910,77 @@ function objectImg(element, baseUrl) {
         ...(height === undefined ? {} : { height }),
     });
 }
+/**
+ * An embed, kept: a sandboxed frame or a native media element.
+ *
+ * The pane used to drop iframes wholesale, then (2026-10-18, same report)
+ * left a placeholder link — the honest floor. But the framing check says the
+ * embeds readers actually hit (Anthropic's artifact charts, 16 on one page)
+ * carry no X-Frame-Options/frame-ancestors, so they CAN render here — the same
+ * way the source page renders them: sandboxed, `allow-scripts` and never
+ * `allow-same-origin`, so the frame's scripts run on an opaque origin with no
+ * sight of this page, no popups, no top navigation. The caption link stays as
+ * the way out (a frame that fails to load still names itself).
+ *
+ * Sizing comes from the page's own layout: the wrapper's aspect box
+ * (`padding-bottom: N%`, the Anthropic/ArtifactEmbed shape), else the frame's
+ * declared dimensions, else the pane's default height.
+ *
+ * The gate is what keeps trackers from ever GETTING a frame: a hidden or
+ * pixel-sized embed, or an iframe with no title AND no content-sized
+ * dimensions (a 200px floor — every measured content embed clears it, every
+ * measured tracker does not), stays dropped. Video/audio become native
+ * `controls` players with `preload="none"` — media elements run no scripts,
+ * and nothing downloads until the reader presses play.
+ *
+ * @param tag - the embed's tag (`iframe`, `video`, `audio`).
+ * @param element - the embed element.
+ * @param baseUrl - base for relative URL resolution.
+ * @returns the embed markup, or an empty string.
+ */
+function embedElement(tag, element, baseUrl) {
+    const style = element.getAttribute('style') ?? '';
+    if (/display\s*:\s*none|visibility\s*:\s*hidden/i.test(style))
+        return '';
+    const width = dimensionAttr(element.getAttribute('width'));
+    const height = dimensionAttr(element.getAttribute('height'));
+    if ((width !== undefined && Number(width) <= 2) || (height !== undefined && Number(height) <= 2))
+        return '';
+    const src = absolutize(element.getAttribute('src'), baseUrl)
+        ?? absolutize(element.querySelector('source')?.getAttribute('src') ?? null, baseUrl);
+    if (src === undefined)
+        return '';
+    const title = (element.getAttribute('title') ?? '').trim();
+    if (tag === 'iframe' && title.length === 0
+        && (width === undefined || Number(width) < 200 || height === undefined || Number(height) < 200))
+        return '';
+    let label = title;
+    if (label.length === 0) {
+        try {
+            label = new URL(src).host;
+        }
+        catch {
+            return '';
+        }
+    }
+    if (tag === 'video' || tag === 'audio') {
+        const poster = tag === 'video' ? absolutize(element.getAttribute('poster'), baseUrl) : undefined;
+        return `<${tag} controls preload="none" src="${escapeAttribute(src)}"${poster === undefined ? '' : ` poster="${escapeAttribute(poster)}"`}></${tag}>`;
+    }
+    let sizing = '';
+    const wrapper = element.parentElement?.getAttribute('style') ?? '';
+    const aspect = /padding-bottom\s*:\s*([\d.]+)%/i.exec(wrapper);
+    if (aspect !== null) {
+        const padding = Number(aspect[1]);
+        if (padding > 5 && padding < 2000)
+            sizing = ` style="aspect-ratio: ${(100 / padding).toFixed(4)}"`;
+    }
+    else if (width !== undefined && height !== undefined) {
+        sizing = ` style="aspect-ratio: ${width} / ${height}"`;
+    }
+    return `<div data-reader-embed="iframe"><iframe src="${escapeAttribute(src)}" title="${escapeAttribute(label)}" sandbox="allow-scripts" loading="lazy" referrerpolicy="no-referrer"${sizing}></iframe>`
+        + `<a href="${escapeAttribute(src)}" rel="noopener noreferrer" target="_blank">${escapeHtml(label)}</a></div>`;
+}
 /* --------------------------------------------------------- the SVG subset */
 /**
  * Inline SVG: the chart markup a capture-rendered page carries.
@@ -662,9 +994,9 @@ function objectImg(element, baseUrl) {
  *   `use`/`symbol`), looked up case-insensitively and emitted in the canonical
  *   SVG casing — the HTML parser's foreign-content adjustment already gave us
  *   that casing, and the emitted string is re-parsed as HTML downstream;
- * - `<script>`, `<foreignObject>` (the HTML-injection vector inside SVG) and
- *   every SMIL element (`animate`, `set`, …) drop with their subtrees — a
- *   static figure needs none of them;
+ * - `<script>` and every SMIL element (`animate`, `set`, …) drop with their
+ *   subtrees — a static figure needs none of them; `<foreignObject>` keeps
+ *   only what the HTML whitelist keeps (diagram labels live there);
  * - attributes come from one whitelist (geometry, presentation, the inlined
  *   `style`, paint-server/clip refs, and `id` — `url(#…)` and `href="#…"` point
  *   at it), and any value containing `url(` must reference a same-document
@@ -684,7 +1016,7 @@ const SVG_TAGS = new Map([
     'linearGradient', 'radialGradient', 'stop', 'use', 'symbol', 'marker', 'desc',
 ].map(name => [name.toLowerCase(), name]));
 /** Subtree-dropped inside SVG: script-capable or animated. (`title` collides with the HTML drop.) */
-const SVG_DROP = new Set(['script', 'foreignobject', 'animate', 'animatemotion', 'animatetransform', 'set']);
+const SVG_DROP = new Set(['script', 'animate', 'animatemotion', 'animatetransform', 'set']);
 /** Attributes kept on SVG elements; everything else (event handlers included) is stripped. */
 const SVG_ATTRIBUTES = [
     'id',
@@ -704,6 +1036,8 @@ const SVG_ATTRIBUTES = [
     'patternContentUnits', 'spreadMethod', 'preserveAspectRatio', 'startOffset',
     'markerWidth', 'markerHeight', 'markerUnits', 'orient', 'refX', 'refY',
     'marker-start', 'marker-mid', 'marker-end',
+    // a foreignObject label box may spill past its nominal size (LaTeXML sets it)
+    'overflow',
 ];
 /** A kept value may only reference this same document: every `url(` must open a `#` fragment. */
 function svgValueSafe(value) {
@@ -719,29 +1053,215 @@ function svgAttributes(element) {
         const value = element.getAttribute(name);
         if (value === null || !svgValueSafe(value))
             continue;
-        parts.push(` ${name}="${escapeAttribute(value)}"`);
+        parts.push(` ${name}="${escapeAttribute(resolveSvgVars(value))}"`);
     }
     return parts.join('');
 }
+/** Custom-property names that read as the page's own ground, not as ink. */
+const SVG_GROUND_VAR = /(^|-)(bg|background|ground|surface|paper|canvas|page)(-|$)/i;
+/**
+ * Rewrite every `var(--…)` in a kept SVG value to something that paints here.
+ *
+ * A statically served chart colors itself through the PAGE's custom
+ * properties (`style="stroke:var(--line)"`), defined in a stylesheet the
+ * extraction never carries. Left as-is, each reference resolves against the
+ * reader's document instead: an undefined one drops the stroke (an axis-less
+ * scatter of black dots — claude.dev's Figure 1), and a name that collides
+ * with a host token paints in a color nobody chose. So no reference survives:
+ * a declared fallback wins, a ground-like name becomes `none` (callout discs
+ * stop hiding what lies under them), and every other one becomes
+ * `currentColor` — the article's ink, legible in both themes. A
+ * capture-rendered page never reaches this: its styles arrive computed.
+ *
+ * @param value - one attribute value.
+ * @returns the value with no custom-property reference left.
+ */
+export function resolveSvgVars(value) {
+    let out = value;
+    for (let guard = 0; guard < 32; guard++) {
+        const start = out.search(/var\(/i);
+        if (start < 0)
+            return out;
+        // The matching paren, and the first top-level comma inside it.
+        let depth = 0;
+        let comma = -1;
+        let end = -1;
+        for (let index = start + 3; index < out.length; index++) {
+            const char = out[index];
+            if (char === '(')
+                depth++;
+            else if (char === ')') {
+                depth--;
+                if (depth === 0) {
+                    end = index;
+                    break;
+                }
+            }
+            else if (char === ',' && depth === 1 && comma < 0)
+                comma = index;
+        }
+        if (end < 0)
+            return out.slice(0, start);
+        const name = out.slice(start + 4, comma < 0 ? end : comma).trim();
+        const fallback = comma < 0 ? '' : out.slice(comma + 1, end).trim();
+        const replacement = fallback.length > 0
+            ? fallback
+            : SVG_GROUND_VAR.test(name.replace(/^--/, '')) ? 'none' : 'currentColor';
+        out = `${out.slice(0, start)}${replacement}${out.slice(end + 1)}`;
+    }
+    return out;
+}
+/** Id/class tokens that mark an `<svg>` as the small-screen copy of a figure. */
+const SVG_ALTERNATE_TOKEN = /^(mobile|narrow|small|compact|sm|xs)$/i;
+/** Whether an element's id or class names it a small-screen variant. */
+function namesAlternate(element) {
+    const names = `${element.getAttribute('id') ?? ''} ${element.getAttribute('class') ?? ''}`;
+    return names.split(/[\s_-]+/).some(token => SVG_ALTERNATE_TOKEN.test(token));
+}
+/**
+ * Whether this `<svg>` is the small-screen duplicate of a sibling figure.
+ *
+ * Responsive pages ship one chart twice — a wide drawing and a narrow one —
+ * and let a media query show one. The extraction carries no stylesheet, so
+ * both would render back to back. The narrow copy drops only when a sibling
+ * `<svg>` NOT marked narrow is there to stand for the figure.
+ *
+ * @param element - a top-level `<svg>`.
+ * @returns true when the element is the duplicate to drop.
+ */
+function isResponsiveAlternate(element) {
+    if (!namesAlternate(element))
+        return false;
+    const parent = element.parentElement;
+    if (parent === null)
+        return false;
+    return Array.from(parent.children).some(sibling => sibling !== element && sibling.localName.toLowerCase() === 'svg' && !namesAlternate(sibling));
+}
+/**
+ * Bring a body stored by an older extractor up to the current rules.
+ *
+ * Bodies are extracted once and cached, so the fixes above that can be
+ * replayed on whitelisted markup (`resolveSvgVars`, `isResponsiveAlternate`,
+ * `settleMathJaxTwins`, `settleListLabels`) would otherwise reach only
+ * articles fetched after they shipped — a cached claude.dev post kept drawing
+ * its figure as bare dots until its TTL ran out. This replays them at display
+ * time. A body with no `<svg>` or `<li>`, or one the current extractor wrote,
+ * comes back as the same string. (What the old extractor DROPPED — a
+ * foreignObject's labels — is not here to restore; that takes a refetch.)
+ *
+ * @param html - a stored (already whitelisted) article body.
+ * @returns the body under the current rules.
+ */
+export function repairStoredBody(html) {
+    if (!/<(?:svg|li)[\s>]/i.test(html) || typeof DOMParser === 'undefined')
+        return html;
+    let doc;
+    try {
+        doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
+    }
+    catch {
+        return html;
+    }
+    let changed = settleMathJaxTwins(doc.body);
+    if (settleListLabels(doc.body))
+        changed = true;
+    for (const svg of Array.from(doc.body.querySelectorAll('svg'))) {
+        // Nested drawings ride their top-level figure's pass.
+        if ((svg.parentElement?.closest('svg') ?? null) !== null)
+            continue;
+        if (isResponsiveAlternate(svg)) {
+            svg.remove();
+            changed = true;
+            continue;
+        }
+        for (const element of [svg, ...Array.from(svg.querySelectorAll('*'))]) {
+            for (const attribute of Array.from(element.attributes)) {
+                if (!/var\(/i.test(attribute.value))
+                    continue;
+                element.setAttribute(attribute.name, resolveSvgVars(attribute.value));
+                changed = true;
+            }
+        }
+    }
+    return changed ? doc.body.innerHTML : html;
+}
+/**
+ * Keep MathJax's MathML copy of a formula and drop its glyph drawing.
+ *
+ * MathJax 2's SVG output renders each formula twice: an `<svg>` assembled
+ * from `<use href="#MJ…">` references into a page-global glyph table, then
+ * the same formula as MathML in a visually-hidden "assistive" span. The
+ * extraction never carries that glyph table, so the drawing degrades to its
+ * fraction bars — stray lines and blank gaps — while the hidden MathML is
+ * the one copy that can still render. The `<svg>` drops, the MathML takes its
+ * place out of its 1px clip wrapper, and the TeX escapes MathJax would have
+ * drawn as bare characters (`\#` → `#`) are undone in its text runs.
+ *
+ * Runs at extraction and again at display time over stored bodies, so it is
+ * idempotent: a settled body has no glyph-reference `<svg>` left to match.
+ *
+ * @param root - the subtree to settle in place.
+ * @returns true when anything changed.
+ */
+function settleMathJaxTwins(root) {
+    let changed = false;
+    for (const svg of Array.from(root.querySelectorAll('svg'))) {
+        if (!drawsMathJaxGlyphs(svg))
+            continue;
+        const twin = svg.nextElementSibling;
+        if (twin === null)
+            continue;
+        let math = null;
+        if (twin.localName.toLowerCase() === 'math') {
+            math = twin;
+        }
+        else if (twin.children.length === 1 && twin.children[0].localName.toLowerCase() === 'math') {
+            math = twin.children[0];
+            twin.replaceWith(math);
+        }
+        if (math === null)
+            continue;
+        svg.remove();
+        for (const text of Array.from(math.querySelectorAll('mtext'))) {
+            const value = text.textContent ?? '';
+            const unescaped = value.replace(/\\([#%&$_{}])/g, '$1');
+            if (unescaped !== value)
+                text.textContent = unescaped;
+        }
+        changed = true;
+    }
+    return changed;
+}
+/** Whether an `<svg>` is drawn from MathJax's page-global glyph table. */
+function drawsMathJaxGlyphs(svg) {
+    return Array.from(svg.querySelectorAll('use')).some(use => /^#MJ/.test(use.getAttribute('href') ?? use.getAttribute('xlink:href') ?? ''));
+}
 /** One SVG subtree → whitelisted markup (or empty). */
-function normalizeSvg(element) {
+function normalizeSvg(element, baseUrl) {
     const name = element.localName.toLowerCase();
     if (SVG_DROP.has(name))
         return '';
+    // A diagram's node labels (LaTeXML's TikZ output writes every one this way).
+    // The HTML inside walks the body's own whitelist — the same subset any
+    // article markup gets — so the injection vector it was dropped for is gone.
+    if (name === 'foreignobject') {
+        const inner = normalizeChildren(element, baseUrl, true);
+        return inner.trim().length === 0 ? '' : `<foreignObject${svgAttributes(element)}>${inner}</foreignObject>`;
+    }
     const canonical = SVG_TAGS.get(name);
     if (canonical === undefined)
-        return normalizeSvgChildren(element);
+        return normalizeSvgChildren(element, baseUrl);
     if (canonical === 'use' || canonical === 'textPath') {
         // A fragment reference only: an external one drops the element outright.
         const href = (element.getAttribute('href') ?? element.getAttribute('xlink:href'))?.trim();
         if (href === undefined || !/^#\S+$/.test(href))
             return '';
-        return `<${canonical} href="${escapeAttribute(href)}"${svgAttributes(element)}>${normalizeSvgChildren(element)}</${canonical}>`;
+        return `<${canonical} href="${escapeAttribute(href)}"${svgAttributes(element)}>${normalizeSvgChildren(element, baseUrl)}</${canonical}>`;
     }
-    return `<${canonical}${svgAttributes(element)}>${normalizeSvgChildren(element)}</${canonical}>`;
+    return `<${canonical}${svgAttributes(element)}>${normalizeSvgChildren(element, baseUrl)}</${canonical}>`;
 }
 /** Every child of an SVG node: text is escaped, elements walk the subset. */
-function normalizeSvgChildren(element) {
+function normalizeSvgChildren(element, baseUrl) {
     const parts = [];
     for (const child of Array.from(element.childNodes)) {
         if (child.nodeType === 3 /* text */) {
@@ -750,7 +1270,7 @@ function normalizeSvgChildren(element) {
         }
         if (child.nodeType !== 1 /* element */)
             continue;
-        parts.push(normalizeSvg(child));
+        parts.push(normalizeSvg(child, baseUrl));
     }
     return parts.join('');
 }
@@ -817,7 +1337,10 @@ function imageSrc(element, baseUrl) {
         if (resolved !== undefined)
             return resolved;
     }
-    return bestSrcset(element.getAttribute('srcset'), baseUrl);
+    // lazysizes-style markup keeps the candidate list in `data-srcset` and leaves
+    // `srcset` to the script that never runs here: read both, the real one first.
+    return bestSrcset(element.getAttribute('srcset'), baseUrl)
+        ?? bestSrcset(element.getAttribute('data-srcset'), baseUrl);
 }
 /**
  * The largest candidate of a `srcset` list.
@@ -875,17 +1398,21 @@ function bestSrcset(value, baseUrl) {
 function pictureImg(element, baseUrl) {
     const fallback = Array.from(element.children).find(child => child.localName === 'img');
     const alt = fallback?.getAttribute('alt') ?? null;
+    // The picture's size is its <img>'s (claude.com's testimonial logos).
+    const width = fallback === undefined ? undefined : displayWidth(fallback);
+    const dimensions = width === undefined ? {} : { width };
     for (const source of Array.from(element.children)) {
         if (source.localName !== 'source')
             continue;
-        const url = bestSrcset(source.getAttribute('srcset'), baseUrl);
+        const url = bestSrcset(source.getAttribute('srcset'), baseUrl)
+            ?? bestSrcset(source.getAttribute('data-srcset'), baseUrl);
         if (url !== undefined)
-            return emitImg(url, alt);
+            return emitImg(url, alt, dimensions);
     }
     if (fallback !== undefined) {
         const url = imageSrc(fallback, baseUrl);
         if (url !== undefined)
-            return emitImg(url, alt);
+            return emitImg(url, alt, dimensions);
     }
     return '';
 }
@@ -963,8 +1490,9 @@ function serializeInline(node) {
             continue;
         // A noscript's fallback image means nothing in an inline summary; the rest
         // of its content ("please enable JavaScript") was never content at all.
-        // An object's fallback text and a chart's text labels are the same chrome.
-        if (tag === 'noscript' || tag === 'object' || tag === 'svg')
+        // An object's fallback text, a chart's text labels and an embed's
+        // placeholder are the same chrome.
+        if (tag === 'noscript' || tag === 'object' || tag === 'svg' || tag === 'iframe' || tag === 'video' || tag === 'audio')
             continue;
         if (tag === 'br') {
             out += ' ';