awwwards-mcp 1.0.0

package/dist/motion.js

@@ -0,0 +1,360 @@
+import { spawn } from "node:child_process";
+import { createHash } from "node:crypto";
+import { existsSync, mkdirSync, mkdtempSync, readdirSync, renameSync, rmSync, statSync, } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { CAPTURE_INSTALL_HINT } from "./capture.js";
+export const MOTION_FFMPEG_HINT = "Motion recording needs ffmpeg-static, which is an optional dependency.\n" +
+    "Install it with:  npm install -D ffmpeg-static\n" +
+    "Then retry record_site_motion.";
+// Recording-pass timings, tuned against the 30s MCP tool ceiling. The
+// validated script (scripts/record-scrollthrough.mjs) spends well past 45s
+// (7s dwell, 600ms scroll steps, 750ms hover dwells, 16 targets, 4 clicks),
+// so the tool constrains every dial:
+//   goto ....................... (network; not budgeted — waitStrategy decides)
+//   preloader dwell ............ 4.0s   (script: 7s; also covers the fixed
+//                                       "load" settle capture.ts applies —
+//                                       one top-of-page wait serves both)
+//   lazy-render pre-scroll ...... ≤ ~1s  (bounded 40ms-step pass, back to top:
+//                                       the ceiling is min(page height, 450 ×
+//                                       24 = 10.8k px, matching the tour cap,
+//                                       so the walk can never exceed ~1s — the
+//                                       capped tour below still renders lazy
+//                                       content on taller pages)
+//   stepped scroll tour ........ ~8.4s  (450px steps / 350ms settle, capped at
+//                                       MAX_SCROLL_STEPS=24 ≈ 10.8k px of page
+//                                       height so tall pages cannot blow the
+//                                       budget)
+//   interaction pass ........... ~14s   (≤12 targets × [250ms into-view settle
+//                                       + cursor move + 500ms hover dwell]
+//                                       ≈ 10.2s, ≤3 safe clicks × 650ms ≈ 2s,
+//                                       1.5s return-to-top)
+// Recording worst case ≈ 27s, then context.close() flush + the ffmpeg strip
+// pass ≈ 1–2s — inside the 30s ceiling with ~3s genuine headroom for goto
+// variance (slow networks, heavy preloads).
+const DWELL_MS = 4000;
+const SCROLL_STEP = 450;
+const SCROLL_SETTLE_MS = 350;
+const MAX_SCROLL_STEPS = 24;
+const SCROLL_INTO_VIEW_SETTLE_MS = 250;
+const HOVER_DWELL_MS = 500;
+const CLICK_SETTLE_MS = 650;
+const MAX_HOVER_TARGETS = 12;
+const MAX_CLICKS = 3;
+const TOP_RETURN_MS = 1500;
+// Default ffmpeg invocation: tile the recorded video into one filmstrip JPEG
+// (a frame every 4s, 720px wide, cols x rows grid, single output frame).
+// Exported for direct testing; callers inject ffmpegFn to replace it.
+const FFMPEG_TIMEOUT_MS = 60_000;
+export async function runFfmpeg(bin, video, strip, frames) {
+    const cols = Math.ceil(Math.sqrt(frames));
+    const rows = Math.ceil(frames / cols);
+    await new Promise((resolve, reject) => {
+        const child = spawn(bin, ["-y", "-i", video, "-vf", `fps=1/4,scale=720:-1,tile=${cols}x${rows}`, "-frames:v", "1", strip], { stdio: "ignore", windowsHide: true });
+        // Deadline: a hung ffmpeg (wedged pipe, dead filesystem) must not hang the
+        // tool call forever — kill the child and reject so the caller gets the
+        // install-hint error path.
+        const timer = setTimeout(() => {
+            child.kill();
+            reject(new Error(`ffmpeg timed out after ${FFMPEG_TIMEOUT_MS / 1000}s`));
+        }, FFMPEG_TIMEOUT_MS);
+        child.on("error", (err) => {
+            clearTimeout(timer);
+            reject(err); // spawn failure (missing binary, ...)
+        });
+        child.on("close", (code) => {
+            clearTimeout(timer);
+            code === 0 ? resolve() : reject(new Error(`ffmpeg exited with code ${code}`));
+        });
+    });
+}
+// Lazy-render pre-scroll for the motion pass. Same loop shape as structure.ts's
+// preScroll, but bounded: the walk ceiling is min(page height, 450 × 24 = 10.8k
+// px, matching MAX_SCROLL_STEPS) so a 50k-px page costs ≤ ~1s instead of ~4.5s
+// — the capped scroll tour below still renders lazy content on taller pages.
+async function boundedPreScroll(page) {
+    await page.evaluate(async () => {
+        const g = globalThis;
+        const ceiling = Math.min(g.document.documentElement.scrollHeight, 450 * 24);
+        const step = 450;
+        for (let y = 0; y < ceiling; y += step) {
+            g.window.scrollTo(0, y);
+            await new Promise((r) => setTimeout(r, 40));
+        }
+        g.window.scrollTo(0, 0);
+        await new Promise((r) => setTimeout(r, 150));
+    });
+}
+// Record a motion-through video of a live site so motion is visible to agents
+// — static captures hide it. Ported from scripts/record-scrollthrough.mjs and
+// structured like capture.ts (injectable loader, in-band install hints,
+// runtime errors propagate to the handler). Covers three animation classes:
+//   1. preloader / entrance animations (initial dwell)
+//   2. scroll-triggered animations (slow stepped scroll tour)
+//   3. hover + click animations (a virtual cursor — Playwright's video does
+//      not render the real one — visits interactive elements and dwells so
+//      :hover transitions play on camera; safe same-page targets are clicked)
+// Returns the renamed .webm path plus the filmstrip JPEG inline as base64.
+export async function recordSiteMotion(url, opts) {
+    // Resolve ffmpeg first: it is the cheap check and a missing binary must not
+    // pay for a browser launch. An explicit ffmpegPath: null short-circuits too.
+    let ffmpegBin = null;
+    if (opts.ffmpegPath !== undefined) {
+        ffmpegBin = opts.ffmpegPath;
+    }
+    else {
+        try {
+            // "as string" keeps ffmpeg-static an unresolved optional dependency at
+            // compile time; Node resolves it (and may throw) at runtime.
+            const mod = await import("ffmpeg-static");
+            ffmpegBin = mod?.default ?? mod;
+        }
+        catch {
+            return { error: MOTION_FFMPEG_HINT };
+        }
+    }
+    if (!ffmpegBin)
+        return { error: MOTION_FFMPEG_HINT };
+    let chromium;
+    try {
+        ({ chromium } = await (opts.loader ?? (() => import("playwright")))());
+    }
+    catch {
+        return { error: CAPTURE_INSTALL_HINT };
+    }
+    let browser;
+    try {
+        browser = await chromium.launch();
+    }
+    catch {
+        return { error: CAPTURE_INSTALL_HINT };
+    }
+    const frames = opts.frames ?? 16;
+    const hash = createHash("sha1").update(url).digest("hex").slice(0, 10);
+    const videoPath = join(opts.cacheImagesDir, `motion-${hash}.webm`);
+    const stripPath = join(opts.cacheImagesDir, `motion-${hash}-strip.jpg`);
+    // Per-call tmp isolation: each run records into its own mkdtemp dir, so a
+    // stale partial video from a crashed run (e.g. goto timeout → context.close()
+    // still flushes a partial .webm) or a concurrent run's video can never be
+    // globbed and filmed under this URL's hash.
+    mkdirSync(opts.cacheImagesDir, { recursive: true });
+    // Stale-tmp sweep: a SIGKILLed run never reaches the finally below, so its
+    // per-call tmp dir (and any partial .webm in it) leaks. Best-effort hygiene:
+    // unlink leftover .video-tmp-* dirs, but only ones older than 10 minutes —
+    // a dir younger than that belongs to a concurrent recording (per-call
+    // isolation above documents concurrency as supported), and deleting it
+    // would make that run's glob come up empty.
+    const SWEEP_AGE_MS = 10 * 60_000;
+    try {
+        const now = Date.now();
+        for (const entry of readdirSync(opts.cacheImagesDir)) {
+            if (!entry.startsWith(".video-tmp-"))
+                continue;
+            const full = join(opts.cacheImagesDir, entry);
+            try {
+                if (statSync(full).mtimeMs < now - SWEEP_AGE_MS) {
+                    rmSync(full, { recursive: true, force: true });
+                }
+            }
+            catch {
+                /* vanished between readdir and stat — nothing left to clean */
+            }
+        }
+    }
+    catch {
+        /* sweep is best-effort; mkdtemp below still proceeds */
+    }
+    const videoTmp = mkdtempSync(join(opts.cacheImagesDir, ".video-tmp-"));
+    const waitStrategy = opts.waitStrategy ?? "load";
+    try {
+        const context = await browser.newContext({
+            viewport: { width: 1440, height: 900 },
+            recordVideo: { dir: videoTmp, size: { width: 1440, height: 900 } },
+        });
+        try {
+            const page = await context.newPage();
+            await page.goto(url, { waitUntil: waitStrategy, timeout: 45_000 });
+            // Preloader + entrance animations on camera. This top-of-page wait also
+            // stands in for capture.ts's fixed 3s "load" settle (see budget above).
+            await page.waitForTimeout(DWELL_MS);
+            // Pre-render lazy sections so the tour films settled layout (bounded —
+            // see boundedPreScroll; a huge page must not burn the budget here).
+            await boundedPreScroll(page);
+            // Virtual cursor: an SVG arrow injected into the page, moved alongside
+            // page.mouse (page.evaluate serializes plain data only, so snippets are
+            // self-contained and reach browser globals through globalThis — the
+            // Node tsconfig has no DOM lib).
+            await page.evaluate(() => {
+                const doc = globalThis.document;
+                const cur = doc.createElement("div");
+                cur.id = "__recorder_cursor";
+                cur.style.cssText =
+                    "position:fixed;left:0;top:0;width:22px;height:22px;z-index:2147483647;" +
+                        "pointer-events:none;transform:translate(-2px,-2px);transition:transform .12s ease;" +
+                        "filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));";
+                cur.innerHTML =
+                    '<svg width="22" height="22" viewBox="0 0 22 22"><path d="M4 2l14 8-6 1.2L15 18l-2.6 1.2L9.6 12 5 16z" ' +
+                        'fill="#fff" stroke="#111" stroke-width="1.4"/></svg>';
+                doc.body.appendChild(cur);
+            });
+            const moveCursor = async (x, y) => {
+                await page.mouse.move(x, y, { steps: 12 });
+                await page.evaluate(([mx, my]) => {
+                    const cur = globalThis.document.getElementById("__recorder_cursor");
+                    cur?.style.setProperty("transform", `translate(${mx - 2}px,${my - 2}px)`);
+                }, [x, y]);
+            };
+            // Slow scroll down so every scroll-triggered animation fires on camera.
+            const totalHeight = await page.evaluate(() => Math.round(globalThis.document.body.scrollHeight));
+            const steps = Math.min(Math.ceil(totalHeight / SCROLL_STEP), MAX_SCROLL_STEPS);
+            for (let i = 1; i <= steps; i++) {
+                await page.evaluate((top) => globalThis.window.scrollTo({ top, behavior: "instant" }), i * SCROLL_STEP);
+                await page.waitForTimeout(SCROLL_SETTLE_MS);
+            }
+            // Interaction-pass target discovery (runs IN THE PAGE): classic
+            // interactive selectors PLUS anything whose computed cursor is "pointer"
+            // — the browser's own "I'm interactive" signal. Pointer cursor inherits
+            // to descendants, so only elements whose PARENT is not pointer count
+            // (the top of each pointer region); otherwise one `body { cursor:
+            // pointer }` would nominate the whole page. The tour then spreads the
+            // kept targets evenly down the page (top to bottom), not DOM order.
+            const targets = await page.evaluate(
+            // MAX_HOVER_TARGETS is passed as an evaluate argument: page.evaluate
+            // serializes the callback into the browser context, where Node-side
+            // module constants are not in scope (a bare reference is a
+            // ReferenceError at record time).
+            (maxTargets) => {
+                const g = globalThis;
+                const doc = g.document;
+                const isVisibleBox = (r) => r.width >= 24 && r.height >= 16;
+                const abs = (r) => Math.round(r.top + g.scrollY);
+                const out = [];
+                const seen = new Set();
+                const push = (el) => {
+                    const r = el.getBoundingClientRect();
+                    if (!isVisibleBox(r))
+                        return;
+                    const top = abs(r);
+                    if (top < 0 || top > doc.body.scrollHeight)
+                        return;
+                    const cx = Math.round(r.left + r.width / 2);
+                    const cy = Math.round(top + r.height / 2);
+                    const key = `${cx},${cy}`;
+                    if (seen.has(key))
+                        return;
+                    seen.add(key);
+                    const href = el.getAttribute ? el.getAttribute("href") : null;
+                    out.push({
+                        x: cx,
+                        y: cy,
+                        safeClick: (el.tagName === "A" && (!href || String(href).startsWith("#"))) ||
+                            (el.tagName === "BUTTON" && el.type !== "submit"),
+                    });
+                };
+                // Pass 1: classic interactive selectors (always trusted).
+                for (const el of doc.querySelectorAll('a, button, [role="button"], input, .oval-btn, .btn')) {
+                    push(el);
+                }
+                // Pass 2: cursor:pointer discovery — custom interactive surfaces
+                // with unknown markup. Skip the pointer region's top (compare
+                // against the parent). Bounded by ITERATIONS only (the 3k-element
+                // walk below); no pool cap — dedupe plus the 12-target spread at
+                // the end bound the output anyway, and an out.length cap here would
+                // silently disable pointer discovery on link-dense pages.
+                let visited = 0;
+                for (const el of doc.querySelectorAll("body *")) {
+                    if (++visited > 3000)
+                        break;
+                    if (g.getComputedStyle(el).cursor !== "pointer")
+                        continue;
+                    const parent = el.parentElement;
+                    if (parent && g.getComputedStyle(parent).cursor === "pointer")
+                        continue; // inherited
+                    push(el);
+                }
+                out.sort((a, b) => a.y - b.y);
+                const keep = Math.min(maxTargets, out.length);
+                const spread = [];
+                for (let i = 0; i < keep; i++) {
+                    spread.push(out[Math.round((i * (out.length - 1)) / Math.max(1, keep - 1))]);
+                }
+                return spread;
+            }, MAX_HOVER_TARGETS);
+            let clicked = 0;
+            for (const t of targets) {
+                try {
+                    // Bring the element into view, then hover: move the real mouse so
+                    // :hover transitions fire, with the virtual cursor following it.
+                    await page.evaluate((y) => globalThis.window.scrollTo({
+                        top: Math.max(0, y - 380),
+                        behavior: "instant",
+                    }), t.y);
+                    await page.waitForTimeout(SCROLL_INTO_VIEW_SETTLE_MS);
+                    const box = await page.evaluate(([x, absY]) => {
+                        const g = globalThis;
+                        const el = g.document.elementFromPoint(x, absY - g.scrollY);
+                        if (!el)
+                            return null;
+                        const r = el.getBoundingClientRect();
+                        return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+                    }, [t.x, t.y]);
+                    if (!box)
+                        continue;
+                    await moveCursor(box.x, box.y);
+                    await page.waitForTimeout(HOVER_DWELL_MS); // let the hover transition play
+                    if (t.safeClick && clicked < MAX_CLICKS) {
+                        await page.mouse.down();
+                        await page.mouse.up(); // :active + click effects
+                        clicked++;
+                        await page.waitForTimeout(CLICK_SETTLE_MS); // let the click animation play
+                    }
+                }
+                catch {
+                    // detached/overlaid element — skip and continue the tour
+                }
+            }
+            // Return to top so the video ends where it started.
+            await page.evaluate(() => globalThis.window.scrollTo({ top: 0, behavior: "instant" }));
+            await page.waitForTimeout(TOP_RETURN_MS);
+        }
+        finally {
+            // Closing the context is what flushes the .webm to disk.
+            try {
+                await context.close();
+            }
+            catch {
+                /* flush is best-effort */
+            }
+        }
+        // Video handoff: the glob only sees THIS call's flushed .webm (fresh
+        // per-call tmp dir). Rename it to its stable, URL-keyed name in
+        // cacheImagesDir while the tmp dir still exists.
+        const webms = readdirSync(videoTmp).filter((f) => f.endsWith(".webm"));
+        if (webms.length === 0) {
+            // Not an install problem — plain failure, no install advice attached.
+            return { error: "recording failed: no video file was produced" };
+        }
+        renameSync(join(videoTmp, webms[0]), videoPath);
+    }
+    finally {
+        try {
+            await browser.close();
+        }
+        catch {
+            /* keep the primary error */
+        }
+        // Drop this run's tmp dir last: any partial video flushed by a mid-run
+        // failure dies here instead of leaking into a later run's glob.
+        rmSync(videoTmp, { recursive: true, force: true });
+    }
+    const ffmpegFn = opts.ffmpegFn ?? runFfmpeg;
+    try {
+        await ffmpegFn(ffmpegBin, videoPath, stripPath, frames);
+    }
+    catch {
+        return { error: MOTION_FFMPEG_HINT };
+    }
+    if (!existsSync(stripPath))
+        return { error: MOTION_FFMPEG_HINT };
+    return { file: videoPath, base64: (await readFile(stripPath)).toString("base64"), frames };
+}

package/dist/parsers.js

@@ -0,0 +1,161 @@
+const ENTITIES = {
+    """: '"',
+    "&": "&",
+    "'": "'",
+    "'": "'",
+    "&lt;": "<",
+    "&gt;": ">",
+    "&nbsp;": " ",
+};
+export function decodeEntities(s) {
+    return s.replace(/&(?:quot|amp|#0?39|lt|gt|nbsp);/g, (e) => ENTITIES[e] ?? e);
+}
+const AWARD_LABELS = {
+    sotd: "Site of the Day",
+    dev: "Developer Award",
+    hm: "Honorable Mention",
+    sotm: "Site of the Month",
+    mobile: "Mobile Excellence",
+    ecom: "E-Commerce Award",
+};
+// Card JSON blob and its markup: the blob sits in data-collectable-model-value
+// immediately before the card markup. The blob is HTML-entity-escaped JSON, so
+// the closing quote of the attribute is the first raw `">` after the split point.
+export function parseListing(html) {
+    const sites = [];
+    const parts = html.split('data-collectable-model-value="');
+    for (const part of parts.slice(1)) {
+        const end = part.indexOf('">');
+        if (end < 0)
+            continue;
+        let meta;
+        try {
+            meta = JSON.parse(decodeEntities(part.slice(0, end)));
+        }
+        catch {
+            continue;
+        }
+        if (!meta?.slug || !meta?.title)
+            continue;
+        if (meta.type && meta.type !== "submission")
+            continue;
+        const card = part.slice(end, end + 8000); // one card block is ~3KB; 8KB is safe
+        const detailMatch = card.match(/href="(\/sites\/[^"#?]+)"/);
+        if (!detailMatch)
+            continue; // collections/other modules are not site cards
+        const liveMatch = card.match(/class="figure-rollover__bt"[^>]*href="(https?:\/\/[^"]+)"/);
+        const awards = [...card.matchAll(/budget-tag--([a-z-]+)/g)].map((m) => AWARD_LABELS[m[1]] ?? m[1]);
+        sites.push({
+            id: meta.id ?? 0,
+            slug: meta.slug,
+            title: decodeEntities(meta.title),
+            createdAt: meta.createdAt ?? 0,
+            tags: Array.isArray(meta.tags) ? meta.tags.map(decodeEntities) : [],
+            thumbnailPath: meta.images?.thumbnail ?? "",
+            liveUrl: liveMatch ? decodeEntities(liveMatch[1]) : null,
+            detailPath: detailMatch[1],
+            awards: [...new Set(awards)],
+        });
+    }
+    return sites;
+}
+function stripTags(s) {
+    return decodeEntities(s.replace(/<[^>]+>/g, " ")).replace(/\s+/g, " ").trim();
+}
+export function parseDetail(html, slug) {
+    const palette = [
+        ...new Set([...html.matchAll(/<strong>HEX<\/strong>\s*#([0-9A-Fa-f]{6})/g)].map((m) => `#${m[1].toUpperCase()}`)),
+    ];
+    const techIdx = html.indexOf("Technologies & Tools</h2>");
+    const techSection = techIdx >= 0 ? html.slice(techIdx, techIdx + 6000) : "";
+    const technologies = [
+        ...new Set([...techSection.matchAll(/class="button button--tag"[^>]*>([^<]+)</g)].map((m) => stripTags(m[1]))),
+    ].filter(Boolean);
+    const elStart = html.indexOf(">Elements</h2>");
+    const elEnd = elStart >= 0 ? html.indexOf(">Color Palette</h2>", elStart) : -1;
+    const elSection = elStart >= 0 && elEnd > elStart ? html.slice(elStart, elEnd) : "";
+    const elements = [...elSection.matchAll(/collectableTitle&quot;:&quot;(.+?)&quot;/g)].map((m) => decodeEntities(m[1]));
+    const awards = [...html.matchAll(/(Site of the Day|Developer Award|Honorable Mention|Site of the Month|Mobile Excellence|E-Commerce Award)\s*[-–]\s*([A-Z][a-z]+ \d{1,2}, \d{4})/g)].map((m) => ({ title: m[1], date: m[2] }));
+    const descIdx = html.indexOf(">Description</h2>");
+    const descMatch = descIdx >= 0
+        ? html.slice(descIdx, descIdx + 3000).match(/<h3 class="heading-6">([\s\S]{0,2000}?)<\/h3>/)
+        : null;
+    const ogMatch = html.match(/property="og:image" content="([^"]+)"/);
+    // Live site: the h1 anchor points at the awarded site itself
+    // (verified: <h1 class="heading-1 text-uppercase"> <a href="https://..." target="_blank" rel="noopener">TITLE</a>).
+    // Fallback: first blank-target noopener anchor to a non-awwwards host.
+    const h1Match = html.match(/<h1 class="heading-1[^"]*">\s*<a href="(https?:\/\/(?!www\.awwwards\.com|assets\.awwwards\.com)[^"]+)"[^>]*>([\s\S]*?)<\/a>/);
+    const liveFallback = h1Match
+        ? null
+        : html.match(/href="(https?:\/\/(?!www\.awwwards\.com|assets\.awwwards\.com)[^"]+)"[^>]*target="_blank" rel="noopener"/);
+    const liveUrl = h1Match?.[1] ?? liveFallback?.[1] ?? null;
+    const titleMatch = html.match(/property="og:title" content="([^"]+)"/);
+    return {
+        slug,
+        title: titleMatch ? decodeEntities(titleMatch[1]) : (h1Match ? stripTags(h1Match[2]) : null),
+        description: descMatch ? stripTags(descMatch[1]) || null : null,
+        palette,
+        technologies,
+        elements,
+        awards,
+        ogImage: ogMatch ? decodeEntities(ogMatch[1]) : null,
+        liveUrl: liveUrl ? decodeEntities(liveUrl) : null,
+        score: parseScore(html),
+    };
+}
+// Displayed overall jury score, e.g. c-heading-score__note">→ 7.37<sup>/ 10</sup>.
+// Non-award pages have no such heading → null.
+export function parseScore(html) {
+    const m = /c-heading-score__note[^>]*>[^<]*?([\d]+(?:\.\d{1,2})?)/.exec(html);
+    return m ? parseFloat(m[1]) : null;
+}
+const NON_FILTERS = new Set(["sites_of_the_day"]);
+// Filter taxonomy from listing-page sidebars: color filters link to
+// /websites/%23<HEX>/ and tag/technology filters to /websites/<slug>/. Award
+// collections (sites_of_the_day) are not tags — they are exposed via the
+// `award` argument on the search tool instead.
+export function parseCategories(html) {
+    const colors = [
+        ...new Set([...html.matchAll(/href="\/websites\/%23([0-9A-Fa-f]{6})\/"/g)].map((m) => `#${m[1].toUpperCase()}`)),
+    ].sort();
+    const filters = [
+        ...new Set([...html.matchAll(/href="\/websites\/([a-z0-9-]{2,60})\/"/g)].map((m) => m[1])),
+    ]
+        .filter((s) => !NON_FILTERS.has(s))
+        .sort();
+    return { colors, filters };
+}
+// Elements section highlights: null means the page has no Elements section
+// (a legitimate empty); an empty array means the section exists but no blobs
+// parsed — the markup changed and the parser needs updating.
+export function parseElements(html) {
+    const start = html.indexOf(">Elements</h2>");
+    if (start < 0)
+        return null;
+    const end = html.indexOf(">Color Palette</h2>", start);
+    const section = end > start ? html.slice(start, end) : html.slice(start);
+    const elements = [];
+    const parts = section.split('data-collectable-model-value="');
+    for (const part of parts.slice(1)) {
+        const stop = part.indexOf('">');
+        if (stop < 0)
+            continue;
+        let blob;
+        try {
+            blob = JSON.parse(decodeEntities(part.slice(0, stop)));
+        }
+        catch {
+            continue;
+        }
+        const mediaPath = blob?.collectableImage;
+        // Only element media (videos/posters live under element/); other blobs
+        // (site card, collections) must not leak in if the end bound is missing.
+        if (typeof mediaPath === "string" && mediaPath.startsWith("element/")) {
+            elements.push({
+                title: decodeEntities(String(blob.collectableTitle ?? "")),
+                mediaPath,
+            });
+        }
+    }
+    return elements;
+}