// Tests for the posts region (slice P1): the card page (chrome-posts.mjs), its
// window arithmetic, the plan the page runs, compose-chrome's posts path, and
// the overlay that lays each window on the cut -- including one real ffmpeg
// run proving the frames outside a window are untouched.
//
// Run with: pnpm test:scripts
import assert from "node:assert/strict";
import { spawnSync } from "node:child_process";
import { chmodSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
import { tmpdir } from "node:os";
import path from "node:path";
import test from "node:test";
import { fileURLToPath } from "node:url";

import {
  postDate, postParagraphs, postsCues, postsHtml, postWho, snapWindow, windowPosts,
} from "./chrome-posts.mjs";
import { postSchedule, postsGeometry, postWindows, validatePosts } from "./deck.mjs";
import { applyChromeArgs, chromeOverlayChain, chromeRegions, postsRegions } from "./build-video.mjs";

const HERE = path.dirname(fileURLToPath(import.meta.url));

const RENDER = {
  width: 1920,
  height: 1080,
  fps: 30,
  transition: 0.5,
  palette: { bg: "#12101a", fg: "#f4f1ea", muted: "#9a93ad", accent: "#a97bff", amber: "#ffc860" },
  chrome: { engine: "hyperframes", layout: "deck", deck: {} },
};

const CLIPS = [
  { id: "c1", type: "clip", date: "2024-09-05" },
  { id: "c2", type: "clip", date: "2024-10-01" },
  { id: "c3", type: "clip", date: "2025-06-01" },
];
const SEGS = [
  { id: "c1", start: 0, duration: 10 },
  { id: "c2", start: 9.5, duration: 10 },
  { id: "c3", start: 19, duration: 9.5 },
];
const POST = (id, date, extra = {}) => ({
  id, platform: "bluesky", author: "Pirate Software", handle: "piratesoftware.live", date,
  text: `words of ${id}`, url: `https://bsky.app/profile/piratesoftware.live/post/${id}`, ...extra,
});
const HOSTILE = POST("evil", "2024-11-27T02:36:13.745Z", {
  platform: "x",
  handle: '"><img src=x onerror=alert(1)>',
  author: "<b>bold</b>",
  text: "</script><script>alert(1)</script>\nsecond line & 'quotes'\n\nnew paragraph",
});

/** A schedule as the build writes one, posts placed by the core. */
function schedule(posts = [POST("a", "2024-10-19T17:01:17.640Z"), HOSTILE, POST("z", "2026-01-22")]) {
  const placed = postSchedule({ posts, entries: CLIPS, segments: SEGS, D: 0.5, total: 28.5, render: RENDER });
  return {
    version: 1, kind: "deck", estimated: false, fps: 30, transition: 0.5, total: 28.5, multiChannel: false,
    segments: SEGS.map((s) => ({ ...s, type: "clip", end: s.start + s.duration, title: "", subtitle: "", qrUrl: null, hideDeck: false })),
    posts: placed,
  };
}

const FONTS = { regular: "assets/DeckSans.ttf", bold: "assets/DeckSansBold.ttf" };
const dataOf = (html) => JSON.parse(/<script id="posts-data" type="application\/json">(.*?)<\/script>/s.exec(html)[1]);
const near = (a, b, msg) => assert.ok(Math.abs(a - b) < 1e-3, `${msg}: ${a} != ${b}`);

function c2Page(sched = schedule()) {
  const win = snapWindow(postWindows(sched).find((w) => w.segment === "c2"), { fps: 30, total: sched.total });
  const qrSrcs = Object.fromEntries(windowPosts(sched, "c2").map((p, i) => [p.id, `assets/qr0${i}.png`]));
  return { sched, win, qrSrcs, html: postsHtml(sched, RENDER, win, { fonts: FONTS, qrSrcs }) };
}

test("every post in the window has its nodes: date, handle and platform, words, QR", () => {
  const { sched, html, qrSrcs } = c2Page();
  const posts = windowPosts(sched, "c2");
  assert.deepEqual(posts.map((p) => p.id), ["a", "evil"]);
  posts.forEach((p, j) => {
    const open = html.indexOf(`data-post="${p.id}" data-k="c${j}"`);
    assert.ok(open > 0, `no card for ${p.id}`);
    const next = html.indexOf("<article", open + 1);
    const card = html.slice(open, next > 0 ? next : undefined);
    assert.match(card, /class="handle"/);
    assert.match(card, /class="platform"/);
    assert.match(card, /class="date"/);
    assert.match(card, /class="para"/);
    assert.ok(card.includes(`<img src="${qrSrcs[p.id]}" width="120" height="120"`), `${p.id} qr`);
  });
  assert.ok(html.includes(">@piratesoftware.live</span>"));
  assert.ok(html.includes('<span class="platform">Bluesky</span>'));
  assert.ok(html.includes('<span class="platform">X</span>'));
  // A date-time is drawn as its own day, in the deck's date format.
  assert.ok(html.includes('<span class="date">Oct 19, 2024</span>'));
  assert.ok(html.includes('<span class="date">Nov 27, 2024</span>'));
  // The composition contract: the posts region, sized postsGeometry.
  const g = postsGeometry(RENDER);
  assert.match(html, new RegExp(`data-composition-id="posts" data-start="0" data-duration="[\\d.]+"\\s+data-width="${g.width}" data-height="${g.height}"`));
  assert.match(html, /window\.__timelines\["posts"\] = tl/);
});

test("post strings are text: escaped in the page, in attributes and in the inline JSON", () => {
  const { html } = c2Page();
  assert.ok(html.includes("&lt;/script&gt;&lt;script&gt;alert(1)&lt;/script&gt;\nsecond line &amp; &#39;quotes&#39;"));
  assert.ok(html.includes("@&quot;&gt;&lt;img src=x onerror=alert(1)&gt;"));
  assert.doesNotMatch(html, /<img src=x/);
  assert.doesNotMatch(html, /<b>bold<\/b>/);
  // gsap, the data, the runtime -- and no fourth script.
  assert.equal((html.match(/<\/script>/g) ?? []).length, 3);
  assert.equal((html.match(/<script/g) ?? []).length, 3);
  // The JSON carries no post words at all, and nothing that could close its tag.
  const json = /<script id="posts-data" type="application\/json">(.*?)<\/script>/s.exec(html)[1];
  assert.doesNotMatch(json, /</);
  assert.doesNotMatch(json, /alert|words of/);
  // A segment id is the manifest's; it is escaped where it lands.
  const sched = schedule();
  const odd = { ...sched, posts: sched.posts.map((p) => ({ ...p, segment: p.segment === "c2" ? 'c2"<x>' : p.segment })) };
  const page = postsHtml(odd, RENDER, { segment: 'c2"<x>', from: 15, to: 20 }, { fonts: FONTS });
  assert.ok(page.includes('data-segment="c2&quot;&lt;x&gt;"'));
  assert.ok(dataOf(page).segment === 'c2"<x>');
  assert.doesNotMatch(/<script id="posts-data"[^>]*>(.*?)<\/script>/s.exec(page)[1], /</);
});

test("nothing on the page leaves the machine; the post's own link is only in its QR", () => {
  const sched = schedule([POST("a", "2024-10-19"), POST("b", "2024-10-20")]);
  const win = snapWindow(postWindows(sched)[0], { fps: 30, total: sched.total });
  const html = postsHtml(sched, RENDER, win, { fonts: FONTS, qrSrcs: { a: "assets/qr00.png", b: "assets/qr01.png" } });
  assert.doesNotMatch(html, /https?:\/\//, "a URL in the page");
  assert.doesNotMatch(html, /(?:src|href)="\/\//, "a protocol-relative URL");
  assert.doesNotMatch(html, /@import|fonts\.googleapis|cdn\.|<link/);
  assert.match(html, /<script src="assets\/gsap\.min\.js"><\/script>/);
  for (const m of html.matchAll(/font-family: ([^;]+);/g)) {
    assert.match(m[1], /^'DeckSans(?:Bold)?'(?:, sans-serif)?$/, m[1]);
  }
});

test("the page's clamp trims trailing whitespace only: a word ending in s keeps its s", () => {
  const { html } = c2Page();
  // The template literal must emit the regex's backslash: written as /\s+$/
  // in the template, the page received /s+$/ and cut a quoted word's last s.
  const m = /shown\.p\.textContent\.replace\((\/.*?\/), ""\)/.exec(html);
  assert.ok(m, "the clamp's ellipsis line is on the page");
  assert.equal(m[1], "/\\s+$/");
  const re = new Function(`return ${m[1]};`)();
  assert.equal("three Rescues".replace(re, ""), "three Rescues");
  assert.equal("three Rescues \n ".replace(re, ""), "three Rescues");
});

test("the page's times are postSchedule's: data, enter and leave cues", () => {
  const { sched, html, win } = c2Page();
  const d = dataOf(html);
  const posts = windowPosts(sched, "c2");
  assert.deepEqual(d.posts, posts.map((p) => ({ id: p.id, appear: p.appear, out: p.out })));
  assert.equal(d.from, win.from);
  near(d.dur, win.to - win.from, "the window's length");
  // Whatever the heights, each card enters at its appear and leaves over its out.
  const plan = postsCues({
    posts: d.posts, heights: [180, 220], column: d.column, gap: d.gap, enter: d.enter, slide: d.slide,
    enterX: d.enterX, glowAt: d.glowAt, glowUp: d.glowUp, glowDown: d.glowDown, glowRest: d.glowRest,
  });
  // The column is at the frame's right edge: a card comes in from past it.
  assert.equal(d.enterX, 1920 - postsGeometry(RENDER).x);
  posts.forEach((p, j) => {
    const enter = plan.cues.find((c) => c.k === `c${j}` && c.why === `enter ${p.id}`);
    near(enter.at, p.appear, `${p.id} enters`);
    assert.deepEqual(enter.from, { autoAlpha: 0, x: d.enterX });
    assert.deepEqual(enter.to, { autoAlpha: 1, x: 0 });
    // The glow flares as it lands and settles, never to nothing while the card is up.
    const flare = plan.cues.find((c) => c.k === `g${j}` && c.why === `glow ${p.id}`);
    const settle = plan.cues.find((c) => c.k === `g${j}` && c.why === `settle ${p.id}`);
    near(flare.at, p.appear + d.glowAt, `${p.id} flares`);
    assert.deepEqual([flare.from, flare.to], [{ opacity: 0 }, { opacity: 1 }]);
    assert.deepEqual([settle.from, settle.to], [{ opacity: 1 }, { opacity: d.glowRest }]);
    assert.ok(d.glowRest > 0);
    const leave = plan.cues.find((c) => c.k === `c${j}` && c.why === `leave ${p.id}`);
    near(leave.at, p.out[0], `${p.id} leaves`);
    near(leave.at + leave.dur, p.out[1], `${p.id} gone`);
  });
  // The page runs this very function, by its source.
  assert.ok(html.includes(postsCues.toString()));
});

test("postsCues: cards stack top-down; when the next would overflow, the oldest slide up and out", () => {
  const posts = [
    { id: "p0", appear: 10, out: [16, 16.5] },
    { id: "p1", appear: 12, out: [16, 16.5] },
    { id: "p2", appear: 14, out: [16, 16.5] },
  ];
  const fits = postsCues({ posts, heights: [200, 200, 200], column: 838, gap: 14 });
  assert.deepEqual(fits.tops, [0, 214, 428]);
  assert.equal(fits.cues.filter((c) => c.k === "stack").length, 0);
  // Three 300 px cards do not fit 838: the third pushes the first out.
  const over = postsCues({ posts, heights: [300, 300, 300], column: 838, gap: 14 });
  const slides = over.cues.filter((c) => c.k === "stack");
  assert.equal(slides.length, 1);
  near(slides[0].at, 14, "the slide starts as p2 enters");
  assert.deepEqual(slides[0].to, { y: -314 });
  const out0 = over.cues.find((c) => c.k === "c0" && c.why === "slide for p2");
  assert.deepEqual(out0.to, { autoAlpha: 0 });
  // p0 is gone, so only p1 and p2 leave at the end.
  assert.deepEqual(over.cues.filter((c) => c.why.startsWith("leave")).map((c) => c.k), ["c1", "c2"]);
  // A card taller than the room left pushes out everything before it.
  const big = postsCues({ posts, heights: [300, 300, 800], column: 838, gap: 14 });
  assert.deepEqual(big.cues.find((c) => c.k === "stack").to, { y: -628 });
});

test("postsCues: every cue states the from the one before it left, and none overlaps another on one element", () => {
  const posts = [
    { id: "p0", appear: 10, out: [10.5, 11] }, // too short for its enter: the leave is clamped after it
    { id: "p1", appear: 10.2, out: [10.5, 11] },
  ];
  const { init, cues } = postsCues({ posts, heights: [500, 500], column: 838, gap: 14 });
  const state = JSON.parse(JSON.stringify(init));
  const busy = new Map();
  for (const c of cues) {
    for (const [p, v] of Object.entries(c.from)) assert.deepEqual(v, state[c.k]?.[p], `${c.k}.${p} at ${c.at}`);
    Object.assign((state[c.k] ??= {}), c.to);
    assert.ok(c.at >= (busy.get(c.k) ?? 0) - 1e-9, `${c.k} overlaps at ${c.at}`);
    busy.set(c.k, c.at + c.dur);
  }
  for (let i = 1; i < cues.length; i += 1) assert.ok(cues[i].at >= cues[i - 1].at, "in time order");
});

test("snapWindow: outward to the frame grid, never past the cut", () => {
  assert.deepEqual(snapWindow({ segment: "c06", from: 129.9, to: 136.4 }, { fps: 30, total: 350.2 }),
    { segment: "c06", from: 129.9, to: 136.4, f0: 3897, frames: 195 });
  const odd = snapWindow({ segment: "c03", from: 69.567, to: 74.067 }, { fps: 30, total: 350.2 });
  assert.equal(odd.f0, 2087);
  near(odd.from, 2087 / 30, "down to a frame");
  near(odd.to, 2223 / 30, "up to a frame");
  assert.equal(odd.frames, 136);
  // The last clip's leave ends with the cut, and so does its window.
  const end = snapWindow({ segment: "c20", from: 346.9, to: 350.2 }, { fps: 30, total: 350.2 });
  assert.equal(end.f0 + end.frames, 10506);
  assert.throws(() => snapWindow({ segment: "x", from: 5, to: 5 }, { fps: 30, total: 10 }), /empty/);
});

test("postsRegions: one per window, at postsGeometry, offset into the base's clock", () => {
  const sched = schedule();
  const regs = postsRegions(RENDER, "/o/sourced", sched);
  const g = postsGeometry(RENDER);
  assert.deepEqual(regs.map((r) => r.segment), postWindows(sched).map((w) => w.segment));
  for (const r of regs) {
    const s = snapWindow(r.window, { fps: 30, total: sched.total });
    assert.equal(r.name, "posts");
    assert.equal(r.frames, `/o/sourced/chrome/posts-${r.segment}-frames`);
    assert.deepEqual([r.x, r.y, r.width, r.height], [g.x, g.y, g.width, g.height]);
    near(r.offset, s.from, "cut clock");
    assert.equal(r.frameCount, s.frames);
  }
  // A preview at 16 s for 4 s keeps only what it touches, shifted into its own clock.
  const c2 = regs.find((r) => r.segment === "c2");
  const pv = postsRegions(RENDER, "/o/sourced", sched, { shift: 16, clip: { at: 16, dur: 4 } });
  assert.deepEqual(pv.map((r) => r.segment), ["c2"]);
  near(pv[0].offset, c2.offset - 16, "preview clock");
  assert.deepEqual(postsRegions(RENDER, "/o", sched, { clip: { at: 0, dur: 2 } }), []);
  assert.deepEqual(postsRegions(RENDER, "/o", { ...sched, posts: undefined }), []);
});

test("chromeOverlayChain: the deck first, then each window at its second, passed through outside it", () => {
  const sched = schedule();
  const regions = [...chromeRegions(RENDER, "/o/sourced"), ...postsRegions(RENDER, "/o/sourced", sched)];
  const hf = chromeOverlayChain(RENDER, regions, "[v2]", 3);
  const g = postsGeometry(RENDER);
  const [w0, w1] = postsRegions(RENDER, "/o/sourced", sched);
  assert.deepEqual(hf.inputs, [
    "-reinit_filter", "0", "-framerate", "30", "-start_number", "1", "-i", "/o/sourced/chrome/deck-frames/frame_%06d.png",
    "-reinit_filter", "0", "-itsoffset", w0.offset.toFixed(6), "-framerate", "30", "-start_number", "1",
    "-i", `/o/sourced/chrome/posts-${w0.segment}-frames/frame_%06d.png`,
    "-reinit_filter", "0", "-itsoffset", w1.offset.toFixed(6), "-framerate", "30", "-start_number", "1",
    "-i", `/o/sourced/chrome/posts-${w1.segment}-frames/frame_%06d.png`,
  ]);
  assert.equal(
    hf.chain,
    [
      "[3:v]format=rgba[hfa0]",
      "[v2][hfa0]overlay=x=0:y=890:format=yuv444:shortest=1[hf0]",
      "[4:v]format=rgba[hfa1]",
      `[hf0][hfa1]overlay=x=${g.x}:y=${g.y}:format=yuv444:eof_action=pass[hf1]`,
      "[5:v]format=rgba[hfa2]",
      `[hf1][hfa2]overlay=x=${g.x}:y=${g.y}:format=yuv444:eof_action=pass[hf2]`,
      "[hf2]format=yuv420p[vout]",
    ].join(";"),
  );
  // No shortest=1 on a window: it would end the cut where the window ends.
  assert.equal((hf.chain.match(/shortest=1/g) ?? []).length, 1);
  // A preview's window can start before the preview does.
  const pv = chromeOverlayChain(RENDER, [{ ...regions[1], offset: -0.25 }], "[0:v]", 1);
  assert.deepEqual(pv.inputs.slice(0, 4), ["-reinit_filter", "0", "-itsoffset", "-0.250000"]);
});

test("without posts the deck's overlay is exactly what it was", () => {
  const sched = { ...schedule(), posts: undefined };
  const plain = chromeRegions(RENDER, "/o/sourced");
  const withNone = [...plain, ...postsRegions(RENDER, "/o/sourced", sched)];
  assert.deepEqual(chromeOverlayChain(RENDER, withNone, "[v16]", 17), chromeOverlayChain(RENDER, plain, "[v16]", 17));
  assert.equal(
    chromeOverlayChain(RENDER, withNone, "[v16]", 17).chain,
    "[17:v]format=rgba[hfa0];[v16][hfa0]overlay=x=0:y=890:format=yuv444:shortest=1[hf0];[hf0]format=yuv420p[vout]",
  );
  const args = applyChromeArgs("/i.mp4", "/o.mp4", RENDER, { regions: withNone, outLabel: "[hfout]" });
  assert.ok(!args.includes("-itsoffset"));
});

test("postParagraphs, postWho, postDate", () => {
  assert.deepEqual(postParagraphs("one\ntwo\n\n\nthree  \r\n\r\nfour"), ["one\ntwo", "three", "four"]);
  assert.deepEqual(postParagraphs("\n\n  \n"), []);
  assert.deepEqual(postWho({ handle: "@a.b", platform: "x" }), { name: "@a.b", platform: "X" });
  assert.deepEqual(postWho({ author: "Someone", platform: "bluesky" }), { name: "Someone", platform: "Bluesky" });
  assert.equal(postDate({ date: "2026-01-22T00:49:31.418Z" }), "Jan 22, 2026");
  assert.equal(postDate({ date: "2026-01-22T00:49:31.418Z" }, "iso"), "2026-01-22");
});

// ---------------------------------------------------------------------------
// ffmpeg, for real: a window laid at its second leaves every other frame alone
// and the cut's length unchanged.
// ---------------------------------------------------------------------------

const have = (b, a) => spawnSync(b, a, { stdio: "ignore" }).status === 0;
const haveFfmpeg = have("ffmpeg", ["-version"]) && have("magick", ["-version"]);

test("ffmpeg: frames outside a window are the deck-only frames, and the length holds", { skip: !haveFfmpeg }, () => {
  const dir = mkdtempSync(path.join(tmpdir(), "posts-ov-"));
  try {
    const run = (args) => {
      const r = spawnSync("ffmpeg", ["-nostdin", "-v", "error", "-y", ...args], { encoding: "utf8", maxBuffer: 1 << 26 });
      assert.equal(r.status, 0, r.stderr);
      return r.stdout;
    };
    const R = { ...RENDER, fps: 30 };
    // Two 3 s segments crossfaded, as the concat does: 5.5 s, 165 frames.
    run(["-f", "lavfi", "-i", "testsrc2=s=320x180:r=30:d=3", "-pix_fmt", "yuv420p", "-c:v", "libx264", "-crf", "18", path.join(dir, "a.mp4")]);
    run(["-f", "lavfi", "-i", "smptebars=s=320x180:r=30:d=3", "-pix_fmt", "yuv420p", "-c:v", "libx264", "-crf", "18", path.join(dir, "b.mp4")]);
    const seq = (name, n, mixedAt = -1) => {
      const d = path.join(dir, name);
      mkdirSync(d);
      for (let i = 1; i <= n; i += 1) {
        const f = path.join(d, `frame_${String(i).padStart(6, "0")}.png`);
        // One opaque RGB frame among RGBA ones: the renderer's mixed sequence.
        if (i === mixedAt) spawnSync("magick", ["-size", "80x40", "xc:red", `PNG24:${f}`]);
        else spawnSync("magick", ["-size", "80x40", "xc:none", "-fill", "rgba(0,0,255,0.7)", "-draw", "rectangle 5,5 75,35", `PNG32:${f}`]);
      }
      return d;
    };
    const deck = { name: "deck", frames: seq("deck", 165), x: 0, y: 140, width: 80, height: 40 };
    const w1 = { name: "posts", frames: seq("w1", 15, 5), x: 200, y: 10, width: 80, height: 40, offset: 2 };
    // A window that runs past the end of the cut.
    const w2 = { name: "posts", frames: seq("w2", 30), x: 200, y: 60, width: 80, height: 40, offset: 5.2 };
    const frames = (regions) => {
      const hf = chromeOverlayChain(R, regions, "[v1]", 2);
      const out = run([
        "-i", path.join(dir, "a.mp4"), "-i", path.join(dir, "b.mp4"), ...hf.inputs,
        "-filter_complex", `[0:v][1:v]xfade=transition=fade:duration=0.5:offset=2.500[v1];${hf.chain}`,
        "-map", hf.outLabel, "-f", "framemd5", "-",
      ]);
      return out.split("\n").filter((l) => l && !l.startsWith("#")).map((l) => l.split(",").at(-1).trim());
    };
    const base = frames([deck]);
    const laid = frames([deck, w1, w2]);
    assert.equal(base.length, 165);
    assert.equal(laid.length, 165, "the windows did not change the cut's length");
    const differ = laid.map((h, i) => (h === base[i] ? null : i)).filter((i) => i !== null);
    assert.deepEqual(differ, [...Array.from({ length: 15 }, (_, i) => 60 + i), ...Array.from({ length: 9 }, (_, i) => 156 + i)]);
    // A preview's clock: the window starting 0.2 s before it.
    const early = frames([deck, { ...w1, offset: -0.2 }]);
    assert.deepEqual(early.map((h, i) => (h === base[i] ? null : i)).filter((i) => i !== null), [0, 1, 2, 3, 4, 5, 6, 7, 8]);
  } finally {
    rmSync(dir, { recursive: true, force: true });
  }
});

// ---------------------------------------------------------------------------
// compose-chrome's posts path, with a stub renderer.
// ---------------------------------------------------------------------------

const haveTools = have("qrencode", ["-V"]) && have("magick", ["-version"]);

test("composeChrome(posts): project, frames, cache, preview, and the CLI's --segment", { skip: !haveTools }, async () => {
  const { composeChrome } = await import("./compose-chrome.mjs");
  const dir = mkdtempSync(path.join(tmpdir(), "posts-p1-"));
  const prevBin = process.env.HYPERFRAMES_BIN;
  try {
    const stub = path.join(dir, "hf-stub.mjs");
    writeFileSync(stub, `#!/usr/bin/env node
import { appendFileSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
import path from "node:path";
const a = process.argv.slice(2);
const out = a[a.indexOf("--output") + 1], fps = Number(a[a.indexOf("--fps") + 1]), proj = a[a.length - 1];
const dur = Number(/data-duration="([\\d.]+)"/.exec(readFileSync(path.join(proj, "index.html"), "utf8"))[1]);
mkdirSync(out, { recursive: true });
for (let i = 1; i <= Math.round(dur * fps); i += 1) writeFileSync(path.join(out, "frame_" + String(i).padStart(6, "0") + ".png"), "");
appendFileSync(${JSON.stringify(path.join(dir, "runs.log"))}, a.join(" ") + "\\n");
`);
    chmodSync(stub, 0o755);
    process.env.HYPERFRAMES_BIN = stub;
    const manifest = {
      slug: "t", title: "t", provenance: {},
      render: {
        ...RENDER,
        fontRegular: path.join(HERE, "fonts", "IBMPlexMono-Regular.ttf"),
        fontBold: path.join(HERE, "fonts", "IBMPlexMono-Bold.ttf"),
      },
      timeline: [],
    };
    const manifestPath = path.join(dir, "video.manifest.json");
    writeFileSync(manifestPath, JSON.stringify(manifest));
    const sched = schedule();
    const window = postWindows(sched).find((w) => w.segment === "c2");
    const snapped = snapWindow(window, { fps: 30, total: sched.total });
    const runs = () => { try { return readFileSync(path.join(dir, "runs.log"), "utf8").trim().split("\n").length; } catch { return 0; } };
    const chrome = path.join(dir, "out", "sourced", "chrome");

    const first = await composeChrome({ manifestPath, region: "posts", schedule: sched, window, doRender: true });
    assert.equal(first.cached, false);
    assert.equal(first.projDir, path.join(chrome, "posts-c2"));
    assert.equal(first.frames, path.join(chrome, "posts-c2-frames"));
    assert.equal(first.frameCount, snapped.frames);
    assert.deepEqual(first.window, snapped);
    assert.equal(readFileSync(path.join(first.frames, ".key"), "utf8").trim(), first.key);
    const html = readFileSync(path.join(first.projDir, "index.html"), "utf8");
    assert.match(html, /src="assets\/qr00\.png"/);
    assert.match(html, /src="assets\/qr01\.png"/);
    assert.match(html, /url\('assets\/DeckSansBold\.ttf'\)/);
    assert.match(readFileSync(path.join(dir, "runs.log"), "utf8"), /--no-browser-gpu --output/);

    const again = await composeChrome({ manifestPath, region: "posts", schedule: sched, segment: "c2", doRender: true });
    assert.equal(again.cached, true, "the same window by --segment, the same key");
    assert.equal(again.key, first.key);
    assert.equal(runs(), 1);

    // A changed post is a new key.
    const edited = { ...sched, posts: sched.posts.map((p) => (p.id === "a" ? { ...p, text: "edited" } : p)) };
    const third = await composeChrome({ manifestPath, region: "posts", schedule: edited, window, doRender: true });
    assert.equal(third.cached, false);
    assert.equal(runs(), 2);

    // A preview composes beside it and never renders.
    const prev = await composeChrome({ manifestPath, region: "posts", schedule: sched, window, preview: true, doRender: true });
    assert.equal(prev.projDir, path.join(chrome, "posts-preview-c2"));
    assert.equal(prev.frames, null);
    assert.equal(runs(), 2);

    await assert.rejects(composeChrome({ manifestPath, region: "posts", schedule: sched, segment: "c1" }), /no post rides on c1/);
  } finally {
    if (prevBin === undefined) delete process.env.HYPERFRAMES_BIN;
    else process.env.HYPERFRAMES_BIN = prevBin;
    rmSync(dir, { recursive: true, force: true });
  }
});

test("embedFn: the page declares the planner under its own name, whatever the bundler called it", async () => {
  const { embedFn } = await import("./chrome-posts.mjs");
  // A minifier renames the module function; the page must still find `postsCues`.
  const renamed = function d(a) { return a * 2; };
  const src = embedFn("postsCues", renamed);
  assert.equal(new Function(`${src}; return postsCues(21);`)(), 42);
  // And the page the module writes uses it, not a bare toString().
  const { postsCues } = await import("./chrome-posts.mjs");
  assert.match(embedFn("postsCues", postsCues), /^const postsCues = \(function postsCues\(/);
});

test("a post with a screenshot draws it in place of its text card, its QR cell kept; the page waits for it", () => {
  const sched = schedule([POST("a", "2024-10-19T17:01:17.640Z", { shot: "shots/a.png" }), HOSTILE, POST("z", "2026-01-22")]);
  assert.equal(windowPosts(sched, "c2").find((p) => p.id === "a").shot, "shots/a.png");
  const win = snapWindow(postWindows(sched).find((w) => w.segment === "c2"), { fps: 30, total: sched.total });
  const html = postsHtml(sched, RENDER, win, {
    fonts: FONTS, qrSrcs: { a: "assets/qr00.png", evil: "assets/qr01.png" }, shotSrcs: { a: "assets/shot00.png" },
  });
  const open = html.indexOf('data-post="a"');
  const card = html.slice(open, html.indexOf("<article", open + 1));
  assert.match(html, /<article class="post has-shot" data-post="a"/);
  assert.match(card, /<div class="shot-view"><img class="shot" data-k="s\d+" src="assets\/shot00\.png" alt=""><\/div>/);
  assert.doesNotMatch(card, /class="para"|class="meta"/, "no words beside the picture");
  assert.ok(card.includes('<img src="assets/qr00.png"'), "the QR stays");
  // The post without one is the text card it always was.
  const evil = html.slice(html.indexOf('data-post="evil"'));
  assert.match(evil, /class="para"/);
  // Measured only once the picture is decoded.
  assert.match(html, /img\.shot"\)\]\.map\(\(i\) => i\.decode\(\)/);
  // Without shotSrcs the page is the text cards, as before.
  assert.doesNotMatch(postsHtml(sched, RENDER, win, { fonts: FONTS }), /class="shot"/);
});

test("a post's accent, logo and flag mark its card; a post without them is drawn as before", () => {
  const sched = schedule([
    POST("a", "2024-10-19T17:01:17.640Z", { shot: "shots/a.png", accent: "#c98fd6", logo: "brand/l.png", flag: "No source in the article" }),
    POST("b", "2024-11-27"),
  ]);
  const a = windowPosts(sched, "c2").find((p) => p.id === "a");
  assert.deepEqual([a.accent, a.logo, a.flag], ["#c98fd6", "brand/l.png", "No source in the article"]);
  const win = snapWindow(postWindows(sched).find((w) => w.segment === "c2"), { fps: 30, total: sched.total });
  const html = postsHtml(sched, RENDER, win, {
    fonts: FONTS, shotSrcs: { a: "assets/shot00.png" }, logoSrcs: { a: "assets/logo00.png" },
    qrSrcs: { a: "assets/qr00.png", b: "assets/qr01.png" },
  });
  const open = html.indexOf('data-post="a"');
  const card = html.slice(open - 60, html.indexOf("<article", open + 1));
  assert.match(card, /class="post has-shot has-logo"/);
  assert.match(card, /style="--acc: #c98fd6; --acc-rim: rgba\(201, ?143, ?214, ?0\.95\)/);
  assert.ok(card.includes('<div class="flag">No source in the article</div><div class="shot-view"><img class="shot"'), "the flag heads the picture");
  assert.ok(card.includes('<img class="logo" src="assets/logo00.png" alt=""><img src="assets/qr00.png"'), "logo above the QR");
  const b = html.slice(html.indexOf('data-post="b"') - 60);
  assert.doesNotMatch(b.slice(0, b.indexOf("</article>")), /--acc|class="flag"|class="logo"/);
  assert.match(html, /border-left: 6px solid var\(--acc, /);
  // Validation.
  assert.deepEqual(validatePosts([POST("a", "2026-01-01", { accent: "#c98fd6", logo: "brand/l.png", flag: "Found by us" })]), []);
  const bad = validatePosts([POST("a", "2026-01-01", { accent: "pink", logo: "/abs/l.png", flag: "x".repeat(61) })]).join(" | ");
  assert.match(bad, /accent must be a #rrggbb colour/);
  assert.match(bad, /logo must be relative to the manifest/);
  assert.match(bad, /flag must be a short label/);
});

test("shotMaxHeight caps a screenshot's viewport in px; unset, a full card of words does", () => {
  const sched = schedule([POST("a", "2024-10-19T17:01:17.640Z", { shot: "shots/a.png" })]);
  const win = snapWindow(postWindows(sched)[0], { fps: 30, total: sched.total });
  const cap = (render) => /\.shot-view \{[^}]*max-height: (\d+)px/.exec(postsHtml(sched, render, win, { fonts: FONTS, shotSrcs: { a: "assets/shot00.png" } }))[1];
  const tall = { ...RENDER, chrome: { ...RENDER.chrome, deck: { ...RENDER.chrome.deck, posts: { ...RENDER.chrome.deck?.posts, shotMaxHeight: 820 } } } };
  assert.equal(cap(tall), "820");
  assert.notEqual(cap(RENDER), "820");
});

test("postsCues: a tall screenshot holds on its top, pans to its bottom, and holds before it leaves", () => {
  const posts = [{ id: "p0", appear: 10, out: [30, 30.5] }, { id: "p1", appear: 12, out: [30, 30.5] }];
  const plan = postsCues({ posts, heights: [800, 200], pans: [600, 0], column: 2000, enter: 0.5, panHold: 1.2 });
  assert.deepEqual(plan.init.s0, { y: 0 });
  assert.equal(plan.init.s1, undefined, "a screenshot that fits does not pan");
  const pan = plan.cues.filter((c) => c.k === "s0");
  assert.equal(pan.length, 1);
  near(pan[0].at, 10 + 0.5 + 1.2, "after the card lands and a hold on its top");
  near(pan[0].at + pan[0].dur, 30 - 1.2, "a hold on its bottom before it leaves");
  assert.deepEqual([pan[0].from, pan[0].to], [{ y: 0 }, { y: -600 }]);
  // Too little time for the holds: the glide takes all of it.
  const tight = postsCues({ posts: [{ id: "q", appear: 0, out: [2, 2.5] }], heights: [800], pans: [300], column: 2000, enter: 0.5 });
  const g = tight.cues.find((c) => c.k === "s0");
  near(g.at, 0.5, "from the landing");
  near(g.at + g.dur, 2, "to the leave");
});

test("postsHtml: a screenshot sits in a viewport at the card's width, and the page measures its pan", () => {
  const html = postsHtml(
    { fps: 30, total: 40, segments: [{ id: "c1", start: 0, duration: 40 }], posts: [
      { id: "x1", segment: "c1", slot: 0, appear: 2, out: [30, 30.5], platform: "x", handle: "a", date: "2026-01-01", text: "t", shot: "s.png" },
    ] },
    { ...RENDER, chrome: { ...RENDER.chrome, deck: { posts: { shotMaxHeight: 800 } } } },
    { segment: "c1", from: 0, to: 31 },
    { shotSrcs: { x1: "assets/shot0.png" } },
  );
  assert.match(html, /<div class="shot-view"><img class="shot" data-k="s0" src="assets\/shot0.png"/);
  assert.match(html, /\.shot \{ display: block; width: 100%; height: auto; \}/);
  assert.doesNotMatch(html, /\.shot \{[^}]*object-fit/, "never shrunk to fit");
  assert.match(html, /const pans = cards\.map/);
});