// The posts FEED's composition (`posts.layout: "feed"`): one HyperFrames page
// for the whole cut -- a column of posts beside the footage, standing on the
// deck, so the two make an L around the picture.
//
// PURE, like chrome-deck.mjs and chrome-posts.mjs: a schedule and a render
// block in, an HTML string out. compose-chrome.mjs copies the assets in beside
// it, writes it and renders it; nothing here touches a file.
//
// ---------------------------------------------------------------------------
// What the column does
// ---------------------------------------------------------------------------
// Before the first post it is its header (who posted, on what) over its
// ground, and nothing else. Each post TICKS IN at its `in` (deck.mjs postSchedule: its
// clip's start + D, the transition's length -- the first clip's too, which
// has no dissolve into it; several on one clip a `posts.seconds` apart): it lands at the TOP, newest first, as a timeline
// reads, and every card already in slides DOWN by its height. The newest
// wears the highlight -- an accent flare that settles to a lit rail and rim --
// until the next one takes it, then rests. A card that no longer fits the
// column fades out as the stack pushes it past the bottom: the oldest scroll
// out. Over a segment the deck hides for (a full-frame card, the teaser) the
// whole column slides off the frame's side edge with it, and back after.
//
// The cut is never paused for it, and nothing moves the footage: the feed's
// footage box is fixed for the whole cut (deck.mjs feedGeometry).
//
// ---------------------------------------------------------------------------
// Why the stack is planned in the page, by a function that lives here
// ---------------------------------------------------------------------------
// How far a card pushes the others, and which ones fall out of the column,
// depend on how tall each card is -- how its words wrap in the deck's own
// face. So the page measures every card once the faces are in and hands the
// heights to `feedCues`, THIS module's function written into the page under a
// fixed name (`embedFn`, docs/quirks.md); the tests call the same function
// with heights of their choosing. Every cue is a fromTo whose FROM is stated:
// a render is a seek per frame, from parallel workers, in any order.
import { deckChoreography, feedGeometry, pageDuration, resolveDeck } from "./deck.mjs";
import { mix, rgba } from "./chrome-deck.mjs";
import { embedFn, PLATFORM_LABEL, postDate, postParagraphs, postWho } from "./chrome-posts.mjs";

const esc = (s) =>
  String(s ?? "")
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");

const r4 = (v) => Math.round(v * 10000) / 10000;

/**
 * The feed's motion, in seconds (and the gap between cards, in px). A new
 * card starts entering `lag` after its `in`, from the column's outer edge,
 * over `enter`; the cards below are pushed down over `push` from the `in`
 * itself, front-loaded, so the room is open (≈ 90 %) before the card comes
 * in over it -- the two never overlap on screen. Its highlight flares `glowAt`
 * into the entrance over `glowUp`, settles to `newest` over `glowDown`, and
 * goes out over `calm` when the next post arrives. A card pushed past the
 * column's bottom fades over `leave`.
 */
export const FEED_MOTION = Object.freeze({
  gap: 16, push: 0.4, lag: 0.22, enter: 0.6, glowAt: 0.2, glowUp: 0.2, glowDown: 1.2, newest: 0.55, calm: 0.8,
  leave: 0.45,
});

/**
 * The column's inner layout, region-local px: the padding, the header (one
 * row: who posted, on what -- nothing a viewer can't see for themselves) and
 * the stack area under it (`stack`: where cards are, and its height --
 * what `feedCues` fits them to). The card's own sizes: its text, meta and QR
 * cell.
 */
export function feedLayout(render) {
  const g = feedGeometry(render);
  const p = resolveDeck(render).posts;
  const W = g.column.width, H = g.column.height;
  const padX = 22;
  const headerTop = 26;
  const headerH = 36;
  const ruleY = headerTop + headerH + 10;
  const stackY = ruleY + 18;
  const bottom = 22;
  const textSize = 24;
  return {
    width: W,
    height: H,
    padX,
    header: { top: headerTop, height: headerH, ruleY },
    stack: { x: padX, y: stackY, width: W - 2 * padX, height: H - stackY - bottom },
    card: {
      rail: 6, pad: 16, qrSize: p.qrSize, plate: p.qrSize + 28, metaSize: 18,
      textSize, lineH: Math.round(textSize * 1.36), maxLines: p.maxLines,
    },
  };
}

/**
 * Everything the feed's timeline does, as data. PURE and SELF-CONTAINED: the
 * page carries this function's own source text (`embedFn`) and calls it with
 * the heights it measured, so it may reference nothing outside its own body.
 *
 * `posts` are `[{ id, in }]` oldest first, `in` in the CUT's clock; `heights`
 * the cards' heights in px; `column` the stack area's height. `visibility` is
 * deckChoreography's (`[{ hide, at: [a, b] }]`): the column slides `slideX` px
 * sideways out of the frame with the deck and back. `enterX` is where a card
 * enters from (the column's outer edge).
 *
 * Card j of n sits at y = Σ (height + gap) of the cards newer than it that
 * are in; it is `c<j>` (autoAlpha, x, y), its highlight `h<j>` (opacity), the
 * whole column `col` (x).
 *
 * @returns {{ init: Record<string, object>, gone: Array<number|null>,
 *   cues: Array<{ k: string, at: number, dur: number, from: object, to: object, ease: string, why: string }> }}
 */
export function feedCues({
  posts, heights, column, visibility = [], startsHidden = false, slideX = 600, enterX = 600,
  gap = 16, push = 0.4, lag = 0.22, enter = 0.6, glowAt = 0.2, glowUp = 0.2, glowDown = 1.2, newest = 0.55,
  calm = 0.8, leave = 0.45,
}) {
  const R = (v) => Math.round(v * 10000) / 10000;
  const MIN = 0.001;
  const n = posts.length;
  const init = { col: { x: startsHidden ? slideX : 0 } };
  for (let j = 0; j < n; j += 1) {
    init[`c${j}`] = { autoAlpha: 0, x: enterX, y: 0 };
    init[`h${j}`] = { opacity: 0 };
  }

  const ev = [];
  const add = (k, at, dur, to, ease, why) => ev.push({ k, at: R(at), dur: R(Math.max(MIN, dur)), to, ease, why });
  const y = new Array(n).fill(0);
  const visible = [];
  const gone = new Array(n).fill(null);
  for (let m = 0; m < n; m += 1) {
    const t = posts[m].in;
    const id = posts[m].id;
    const room = (heights[m] || 0) + gap;
    // Room at the top: every card in moves down by the new one's height, and
    // the oldest that no longer fit fade as they are pushed out of the column
    // (one cue each, so the fade rides the push).
    for (let v = visible.length - 1; v >= 0; v -= 1) {
      const j = visible[v];
      y[j] += room;
      if (y[j] + (heights[j] || 0) <= column) {
        add(`c${j}`, t, push, { y: y[j] }, "power3.out", `push for ${id}`);
        continue;
      }
      add(`c${j}`, t, Math.max(push, leave), { y: y[j], autoAlpha: 0 }, "power2.out", `out for ${id}`);
      gone[j] = t;
      visible.splice(v, 1);
    }
    // The newest hands its highlight on.
    if (m > 0 && gone[m - 1] === null) add(`h${m - 1}`, t, calm, { opacity: 0 }, "power1.out", `calm for ${id}`);
    add(`c${m}`, t + lag, enter, { autoAlpha: 1, x: 0 }, "expo.out", `enter ${id}`);
    add(`h${m}`, t + lag + glowAt, glowUp, { opacity: 1 }, "power2.out", `glow ${id}`);
    add(`h${m}`, t + lag + glowAt + glowUp, glowDown, { opacity: newest }, "power2.inOut", `settle ${id}`);
    visible.unshift(m);
  }
  for (const v of visibility) {
    if (v.at[1] - v.at[0] <= 0 && v.i === 0) continue; // hidden from the first frame: that is init
    add("col", v.at[0], v.at[1] - v.at[0], { x: v.hide ? slideX : 0 }, v.hide ? "power2.in" : "power3.out",
      `${v.hide ? "hide" : "show"} @${v.i}`);
  }

  // Order, clamp (a cue never starts before the last one on its element has
  // ended), and state every from.
  ev.forEach((e, i) => { e.n = i; });
  ev.sort((a, b) => a.at - b.at || a.n - b.n);
  const state = {};
  for (const k of Object.keys(init)) state[k] = { ...init[k] };
  const freeAt = {};
  const cues = [];
  for (const e of ev) {
    let { at, dur } = e;
    const free = freeAt[e.k] ?? -Infinity;
    if (at < free) {
      const end = at + dur;
      at = R(free);
      dur = R(Math.max(MIN, end - at));
    }
    const cur = state[e.k] ?? (state[e.k] = {});
    const from = {};
    for (const q of Object.keys(e.to)) from[q] = cur[q];
    Object.assign(cur, e.to);
    freeAt[e.k] = R(at + dur);
    cues.push({ k: e.k, at, dur, from, to: e.to, ease: e.ease, why: e.why, i: cues.length });
  }
  cues.sort((a, b) => a.at - b.at || a.i - b.i);
  for (const c of cues) delete c.i;
  return { init, gone, cues };
}

/**
 * Who the feed is, for its header: the one author's name and platform when
 * every post is theirs, else "Posts" and every platform there is.
 */
export function feedWho(posts) {
  const names = [...new Set(posts.map((p) => postWho(p).name).filter(Boolean))];
  const platforms = [...new Set(posts.map((p) => PLATFORM_LABEL[p.platform] ?? String(p.platform ?? "")).filter(Boolean))];
  const single = names.length === 1 && platforms.length === 1;
  return { title: single ? names[0] : "Posts", platforms, single };
}

/**
 * The feed composition's HTML, for the whole cut -- or a window of it
 * (`from`/`duration`, a `--chrome-preview`): the root then declares
 * `duration` seconds and the timeline plays the cut's [from, from + duration].
 *
 * `fonts` = `{ regular, bold }` asset-relative paths (DeckSans / DeckSansBold),
 * `qrSrcs` = `{ [postId]: "assets/qrNN.png" }`, `gsap` = the vendored script.
 * `shotSrcs` = `{ [postId]: "assets/shotNN.png" }`: a post with a screenshot
 * (`posts[].shot`) draws it in place of its text card, its QR cell kept.
 * The region is `feedGeometry(render).column`, region-local, transparent
 * outside the panel. `?still=<t>` and the preview's `deck:seek` take CUT seconds.
 */
export function feedHtml(schedule, render, opts = {}) {
  if (schedule.layout !== "feed") throw new Error("feed: the schedule is not a feed's (layout \"feed\")");
  const deck = resolveDeck(render);
  const lay = feedLayout(render);
  const g = feedGeometry(render);
  const pal = render.palette;
  const W = lay.width, H = lay.height;
  const fonts = opts.fonts ?? {};
  const qrSrcs = opts.qrSrcs ?? {};
  const shotSrcs = opts.shotSrcs ?? {};
  const gsapSrc = opts.gsap ?? "assets/gsap.min.js";
  const total = schedule.total;
  const from = Number(opts.from ?? 0);
  const dur = opts.duration != null ? r4(Number(opts.duration)) : r4(total - from);
  if (!(dur > 0)) throw new Error(`feed: nothing to render from ${from}s of a ${total}s cut`);
  const windowed = from > 0 || Math.abs(dur - total) > 1e-6;
  const posts = [...(schedule.posts ?? [])].sort((a, b) => a.in - b.in || a.slot - b.slot);
  if (!posts.length) throw new Error("feed: the schedule places no posts");
  const left = deck.posts.position === "top-left";
  const c = lay.card;
  const who = feedWho(posts);
  const panel = deck.background === "panel";

  // The column's ground meets the deck's top edge in the deck's own colour,
  // so the two read as one surface; the cards stand a step up from it.
  const deckTop = panel ? mix(pal.bg, pal.fg, 0.095) : pal.bg;
  const groundTop = panel ? mix(pal.bg, pal.fg, 0.05) : pal.bg;
  const cardTop = mix(mix(pal.bg, pal.fg, 0.14), pal.accent, 0.06);
  const cardBottom = mix(mix(pal.bg, pal.fg, 0.11), pal.accent, 0.03);

  const cardHtml = posts
    .map((p, j) => {
      const { name, platform } = postWho(p);
      const src = qrSrcs[p.id];
      const shot = shotSrcs[p.id];
      return (
        `<article class="post${shot ? " has-shot" : ""}" data-post="${esc(p.id)}" data-k="c${j}">` +
        (shot
          ? `<div class="body shot-body"><img class="shot" src="${esc(shot)}" alt=""></div>`
          : `<div class="body">` +
            `<div class="meta">` +
            (who.single ? "" : (platform ? `<span class="platform">${esc(platform)}</span>` : "") +
              `<span class="who"><span class="handle">${esc(name)}</span></span>`) +
            `<span class="date">${esc(postDate(p, deck.subtitle.dateFormat))}</span></div>` +
            `<div class="text">${postParagraphs(p.text).map((t) => `<p class="para">${esc(t)}</p>`).join("")}</div>` +
            `</div>`) +
        `<div class="plate">` +
        (src ? `<img src="${esc(src)}" width="${c.qrSize}" height="${c.qrSize}" alt="">` : "") +
        `</div>` +
        `<div class="hl" data-k="h${j}"></div>` +
        `</article>`
      );
    })
    .join("\n            ");

  const vis = deckChoreography(schedule, render).visibility;
  const data = {
    total: r4(total),
    window: windowed ? { from: r4(from), dur } : null,
    column: lay.stack.height,
    maxLines: c.maxLines,
    lineH: c.lineH,
    textSize: c.textSize,
    metaSize: c.metaSize,
    startsHidden: !!schedule.segments?.[0]?.hideDeck,
    // Off the frame's own side edge, a little past it.
    slideX: left ? -(W + 24) : W + 24,
    enterX: left ? -(lay.stack.width + lay.padX) : lay.stack.width + lay.padX,
    visibility: vis.map((v) => ({ i: v.i, hide: v.hide, at: v.at.map(r4) })),
    motion: FEED_MOTION,
    ids: posts.map((p) => p.id),
    posts: posts.map((p) => ({ id: p.id, in: p.in })),
  };
  // `</script>` inside a JSON string would close the tag; an id is the manifest's.
  const json = JSON.stringify(data).replace(/</g, "\\u003c");

  return `<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=${W}, height=${H}" />
    <script src="${esc(gsapSrc)}"></script>
    <style>
      /* The deck's faces, under the deck's private names -- see docs/quirks.md. */
      @font-face { font-family: 'DeckSans'; font-weight: 400; font-style: normal;
                   src: url('${esc(fonts.regular ?? "")}'); }
      @font-face { font-family: 'DeckSansBold'; font-weight: 400; font-style: normal;
                   src: url('${esc(fonts.bold ?? "")}'); }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { width: ${W}px; height: ${H}px; overflow: hidden; background: transparent; }
      body { font-family: 'DeckSans', sans-serif; font-synthesis: none; color: ${pal.fg};
             -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
      #root { position: relative; width: ${W}px; height: ${H}px; overflow: hidden; }
      #feed-clip { position: absolute; left: 0; top: 0; width: ${W}px; height: ${H}px; }
      .col { position: absolute; left: 0; top: 0; width: ${W}px; height: ${H}px; }
      /* The column's ground: the deck's surface carried up the side. */
      .ground { position: absolute; inset: 0;
                background: linear-gradient(180deg, ${groundTop} 0%, ${deckTop} 100%); }
      ${panel ? `.edge { position: absolute; ${left ? "right" : "left"}: 0; top: 0; width: 1px; height: ${H}px;
              background: linear-gradient(0deg, ${rgba(pal.accent, 0.8)} 0px, ${rgba(pal.accent, 0.3)} ${Math.round(H * 0.16)}px,
                          ${rgba(pal.fg, 0.14)} ${Math.round(H * 0.4)}px, ${rgba(pal.fg, 0.14)} ${H}px); }` : ""}
      .head { position: absolute; left: ${lay.padX}px; top: ${lay.header.top}px; width: ${W - 2 * lay.padX}px;
              height: ${lay.header.height}px; }
      .who-row { display: flex; align-items: center; gap: 12px; height: 36px; white-space: nowrap; }
      .platform { flex: none; font-family: 'DeckSansBold', sans-serif; font-size: 16px; line-height: 23px;
                  letter-spacing: 0.03em; color: ${pal.fg}; padding: 1px 11px 2px; border-radius: 999px;
                  background: ${rgba(pal.accent, 0.26)}; box-shadow: inset 0 0 0 1px ${rgba(pal.accent, 0.7)}; }
      .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
               font-family: 'DeckSansBold', sans-serif; font-size: 26px; line-height: 36px; letter-spacing: -0.005em; }
      .rule { position: absolute; left: ${lay.padX}px; top: ${lay.header.ruleY}px; width: ${W - 2 * lay.padX}px;
              height: 1px; background: ${rgba(pal.fg, 0.12)}; }
      .stack { position: absolute; left: ${lay.stack.x}px; top: ${lay.stack.y}px; width: ${lay.stack.width}px;
               height: ${lay.stack.height}px; overflow: hidden; }
      /* A card: lifted off the column with a touch of the accent, its rail
         dim until it is the newest. Hidden until the timeline places it. */
      .post { position: absolute; left: 0; top: 0; width: ${lay.stack.width}px; min-height: ${c.plate}px;
              visibility: hidden; opacity: 0; border-radius: 10px; overflow: hidden;
              border-${left ? "right" : "left"}: ${c.rail}px solid ${rgba(pal.accent, 0.38)};
              background: linear-gradient(180deg, ${cardTop} 0%, ${cardBottom} 100%);
              box-shadow: inset 0 0 0 1px ${rgba(pal.fg, 0.1)}; }
      /* The newest's highlight: a lit rail and an accent rim that flare as it
         lands and settle; out when the next one arrives. Clear of the code. */
      .hl { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none;
            box-shadow: inset 0 0 0 2px ${rgba(pal.accent, 0.95)}, inset 0 0 16px ${rgba(pal.accent, 0.5)}; }
      .hl::before { content: ""; position: absolute; ${left ? "right" : "left"}: 0; top: 0; bottom: 0; width: 4px;
                    background: ${pal.accent}; box-shadow: 0 0 14px 2px ${rgba(pal.accent, 0.6)}; }
      .body { position: relative; width: ${lay.stack.width - c.plate - c.rail}px;${left ? ` margin-left: ${c.plate}px;` : ""}
              padding: ${c.pad - 3}px ${c.pad + 2}px ${c.pad - 2}px ${c.pad + 2}px; }
      .meta { display: flex; align-items: center; gap: 10px;
              font-size: ${c.metaSize}px; line-height: ${Math.round(c.metaSize * 1.3)}px; white-space: nowrap; }
      .meta .platform { font-size: ${c.metaSize - 3}px; line-height: ${c.metaSize + 3}px; padding: 1px 9px 2px; }
      .who { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
      .handle { font-family: 'DeckSansBold', sans-serif; color: ${pal.fg}; }
      .date { color: ${mix(pal.muted, pal.fg, 0.35)}; flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
      .text { margin-top: 6px; font-size: ${c.textSize}px; line-height: ${c.lineH}px; color: ${pal.fg}; }
      /* Each paragraph is clamped to what is left of maxLines when the page
         measures (clampText), so the ellipsis always ends words, never a blank line. */
      .para { white-space: pre-line; overflow-wrap: anywhere; overflow: hidden;
              display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${c.maxLines}; }
      .para + .para { margin-top: ${Math.round(c.lineH * 0.34)}px; }
      .para.gone { display: none; }
      /* A post's screenshot in place of its words: as wide as the words would
         be, no taller than a full card of them. */
      .shot-body { padding: ${c.pad - 6}px; }
      .shot { display: block; width: 100%; height: auto;
              max-height: ${Math.round(c.metaSize * 1.3) + 6 + c.maxLines * c.lineH + 2 * c.pad}px;
              object-fit: contain; object-position: left top; border-radius: 6px; }
      /* The source cell: the QR in a cell a shade down, as on the deck. */
      .plate { position: absolute; ${left ? "left" : "right"}: 0; top: 0; bottom: 0; width: ${c.plate}px;
               display: flex; align-items: center; justify-content: center;
               background: linear-gradient(180deg, ${mix(cardTop, pal.bg, 0.55)} 0%, ${mix(cardBottom, pal.bg, 0.6)} 100%);
               border-${left ? "right" : "left"}: 1px solid ${rgba(pal.fg, 0.07)}; }
      .plate img { display: block; width: ${c.qrSize}px; height: ${c.qrSize}px; border-radius: 6px;
                   image-rendering: pixelated;
                   box-shadow: 0 0 0 1px ${rgba(pal.fg, 0.25)}, 0 6px 18px rgba(0, 0, 0, 0.35); }
    </style>
  </head>
  <body>
    <div id="root" data-composition-id="feed" data-start="0" data-duration="${pageDuration(dur, schedule.fps ?? render.fps ?? 30)}"
         data-width="${W}" data-height="${H}">
      <div id="feed-clip" class="clip" data-start="0" data-duration="${pageDuration(dur, schedule.fps ?? render.fps ?? 30)}" data-track-index="1">
        <div class="col" data-k="col">
          <div class="ground"></div>
          ${panel ? `<div class="edge"></div>` : ""}
          <div class="head">
            <div class="who-row">
              ${who.platforms.map((p) => `<span class="platform">${esc(p)}</span>`).join("")}
              <span class="title">${esc(who.title)}</span>
            </div>
          </div>
          <div class="rule"></div>
          <div class="stack">
            ${cardHtml}
          </div>
        </div>
      </div>
    </div>

    <script id="feed-data" type="application/json">${json}</script>
    <script>
      const F = JSON.parse(document.getElementById("feed-data").textContent);
      const byK = {};
      for (const el of document.querySelectorAll("[data-k]")) byK[el.dataset.k] = el;
      ${embedFn("feedCues", feedCues)}

      const params = new URLSearchParams(location.search);
      // A window plays the cut's [from, from + dur]; the page is seeked in its own seconds.
      const local = (t) => {
        const v = Number(t) || 0;
        return F.window ? Math.max(0, Math.min(F.window.dur, v - F.window.from)) : Math.max(0, v);
      };
      let tl = null;
      let pending = null;

      // maxLines across a card's paragraphs: each is clamped to the lines
      // still unspent; once they are spent the rest are dropped, and the last
      // one drawn ends in an ellipsis when anything was dropped.
      function clampText(card) {
        let left = F.maxLines;
        let shown = null;
        let cut = false;
        for (const p of card.querySelectorAll(".para")) {
          if (left <= 0) { p.classList.add("gone"); cut = true; continue; }
          p.style.webkitLineClamp = String(left);
          const lines = Math.round(p.getBoundingClientRect().height / F.lineH);
          if (p.scrollHeight > p.clientHeight + 1) cut = true;
          left -= lines;
          shown = { p, lines };
        }
        if (cut && shown && !(shown.p.scrollHeight > shown.p.clientHeight + 1)) {
          shown.p.textContent = shown.p.textContent.replace(/\\s+$/, "") + " …";
          shown.p.style.webkitLineClamp = String(shown.lines);
        }
      }

      // Measure once the faces are in, then plan, place, build and register.
      // The renderer awaits document.fonts.ready before it seeks a frame.
      // A screenshot's height is its picture's: decoded before anything is measured.
      const ready = Promise.all([
        document.fonts.load(F.textSize + "px DeckSans"),
        document.fonts.load(F.metaSize + "px DeckSansBold"),
        ...[...document.querySelectorAll("img.shot")].map((i) => i.decode().catch(() => {})),
      ]).catch(() => {}).then(() => {
        const cards = F.ids.map((_, j) => byK["c" + j]);
        cards.forEach(clampText);
        const heights = cards.map((c) => c.offsetHeight);
        const M = F.motion;
        const plan = feedCues({
          posts: F.posts, heights, column: F.column, visibility: F.visibility, startsHidden: F.startsHidden,
          slideX: F.slideX, enterX: F.enterX, gap: M.gap, push: M.push, lag: M.lag, enter: M.enter,
          glowAt: M.glowAt, glowUp: M.glowUp, glowDown: M.glowDown, newest: M.newest, calm: M.calm,
          leave: M.leave,
        });
        for (const k of Object.keys(plan.init)) if (byK[k]) gsap.set(byK[k], plan.init[k]);
        const inner = gsap.timeline({ paused: true });
        for (const c of plan.cues) {
          const el = byK[c.k];
          if (!el) continue;
          inner.fromTo(el, c.from, { ...c.to, duration: c.dur, ease: c.ease, immediateRender: false }, c.at);
        }
        // The timeline runs to the cut's end, whatever its last cue.
        inner.set({}, {}, F.total);
        tl = inner;
        if (F.window) {
          tl = gsap.timeline({ paused: true });
          tl.add(inner.tweenFromTo(F.window.from, F.window.from + F.window.dur, { duration: F.window.dur, ease: "none" }), 0);
        }
        window.__timelines = window.__timelines || {};
        window.__timelines["feed"] = tl;
        if (typeof window.__hfForceTimelineRebind === "function") window.__hfForceTimelineRebind();
        document.documentElement.dataset.heights = heights.join(",");
        tl.seek(pending ?? 0, false);
        document.documentElement.dataset.ready = "1";
      });

      // The review still, in cut seconds.
      const still = params.get("still");
      if (still !== null) pending = local(still);

      // umtool's live preview: the parent seeks in cut seconds, as it seeks the deck.
      if (params.get("preview") === "1") {
        window.addEventListener("message", (e) => {
          const m = e.data || {};
          if (m.type !== "deck:seek") return;
          pending = local(m.t);
          if (tl) tl.seek(pending, false);
        });
        ready.then(() => {
          if (window.parent !== window) {
            window.parent.postMessage({ type: "feed:ready", total: F.total, ids: F.ids }, "*");
          }
        });
      }
    </script>
  </body>
</html>
`;
}

/** The feed's region in the frame, for the overlay: feedGeometry's column. */
export const feedRegion = (render) => feedGeometry(render).column;