npm - @sprid/cli - Versions diffs - 0.1.2 - Mend

@sprid/cli 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/CHANGELOG.md +12 -0
package/LICENSE +14 -0
package/README-post.md +615 -0
package/README.md +249 -0
package/SECURITY.md +18 -0
package/bin.mjs +12 -0
package/package.json +47 -0
package/src/args.mjs +134 -0
package/src/browser.mjs +28 -0
package/src/cli.mjs +257 -0
package/src/commands/auth.mjs +192 -0
package/src/commands/completion.mjs +90 -0
package/src/commands/connect.mjs +586 -0
package/src/commands/docs.mjs +53 -0
package/src/commands/family.mjs +96 -0
package/src/commands/init.mjs +137 -0
package/src/commands/local-tools.mjs +31 -0
package/src/commands/marketing-review.mjs +106 -0
package/src/commands/mcp.mjs +53 -0
package/src/commands/misc.mjs +94 -0
package/src/commands/pinterest.mjs +120 -0
package/src/commands/plan.mjs +230 -0
package/src/commands/post.mjs +41 -0
package/src/commands/reviews.mjs +149 -0
package/src/commands/setup.mjs +220 -0
package/src/commands/status.mjs +217 -0
package/src/commands/studio.mjs +69 -0
package/src/commands/update.mjs +69 -0
package/src/creds.mjs +126 -0
package/src/docs/commands.mjs +152 -0
package/src/docs/guides.generated.mjs +1178 -0
package/src/docs/help.mjs +77 -0
package/src/docs/index.d.mts +18 -0
package/src/docs/index.mjs +45 -0
package/src/docs/queries.d.mts +11 -0
package/src/docs/queries.mjs +77 -0
package/src/endpoint.mjs +17 -0
package/src/evidence.mjs +15 -0
package/src/format.mjs +71 -0
package/src/http.mjs +117 -0
package/src/pending.mjs +27 -0
package/src/post/cli.mjs +2285 -0
package/src/post/json-worker.mjs +12 -0
package/src/post/preview-server.mjs +58 -0
package/src/post/preview.mjs +660 -0
package/src/post/recipes/screen.mjs +290 -0
package/src/post/recipes/stills.mjs +146 -0
package/src/post/rules/platform-rules.d.mts +27 -0
package/src/post/rules/platform-rules.mjs +164 -0
package/src/post/screen/captions.mjs +131 -0
package/src/post/screen/compose.mjs +284 -0
package/src/post/screen/input.mjs +163 -0
package/src/post/screen/sim.mjs +443 -0
package/src/post/screen/simkit.swift +328 -0
package/src/profiles.mjs +61 -0
package/src/release.ts +2 -0
package/src/screenshots.ts +1 -0
package/src/updates.mjs +152 -0

package/src/post/preview.mjs ADDED Viewed

@@ -0,0 +1,660 @@
+// The preview — one page for looking at a whole batch before any of it is real.
+//
+// **A post here is a reel or a carousel.** Both are one card in the grid and
+// one post in the feed; the reel plays and the carousel advances, and the rest
+// of the page cannot tell them apart.
+//
+// **The registry already knows everything this needs**, which is the reason it
+// belongs in the package rather than in a consuming repo's one-off script: a
+// manifest carries the lane, the length, the loudness, the check result and the
+// Sprid state, and the caption sits next to it verbatim. So the preview is a
+// pure function of `social/` plus whatever media is currently on disk, and it
+// costs nothing to throw away and regenerate.
+//
+// Two views, because they answer two different questions:
+//
+//   GRID   is this a batch? Everything at once, small, scannable. What you read
+//          here is variety, repetition, an odd one out, a caption that ran long.
+//   FEED   is this a post? One reel at a time at reading size with its caption
+//          under it, arrow keys between them. It is the only view that answers
+//          "would I stop on this", because that is the shape a reader meets.
+//
+// **A card shows the caption and nothing derived from it.** An earlier hand
+// written version of this page split the caption's first line into a title and
+// printed the remainder as a subtitle above the caption itself, so every card
+// carried the same text twice and neither copy was the thing that ships. The
+// caption IS the record; there is no second description to show.
+const esc = (s) =>
+  String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+const scriptJson = value => JSON.stringify(value).replace(/</g, '\\u003c');
+const mb = (n) => `${(n / 1e6).toFixed(1)} MB`;
+const secs = (ms) => `${(ms / 1000).toFixed(1)}s`;
+/**
+ * @param {{account: string, items: Array, generatedAt: string}} data
+ * @returns {string} a single self-contained HTML file
+ */
+export function renderPreview({ account, items, generatedAt }) {
+  const lanes = [...new Set(items.map((i) => i.lane).filter(Boolean))].sort();
+  const playable = items.filter((i) => i.src || i.slides);
+  return `<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>${esc(account)} — posts</title>
+<style>
+  :root {
+    color-scheme: dark;
+    --bg:#0d0d0f; --card:#17171a; --line:#26262b; --fg:#ededf0; --dim:#8a8a94;
+    --accent:#7fd1a8; --bad:#e2696b; --warn:#e0b45f;
+    /* One post's width. Everything in the feed is measured off it, including
+       how much of the neighbours shows at the edges. */
+    --pw: min(400px, 78vw, calc((100vh - 270px) * 9 / 16));
+  }
+  * { box-sizing:border-box; }
+  body { margin:0; background:var(--bg); color:var(--fg);
+         font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif; }
+  code, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
+  /* ── header ───────────────────────────────────────────────────────────── */
+  header { position:sticky; top:0; z-index:20; background:rgba(13,13,15,.86);
+           backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
+           padding:12px 20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
+  h1 { font-size:15px; margin:0; font-weight:600; letter-spacing:.01em; }
+  .dim { color:var(--dim); }
+  .spacer { flex:1; }
+  input[type=search] { background:#1c1c20; border:1px solid var(--line); color:var(--fg);
+                       padding:6px 10px; border-radius:7px; width:240px; font:inherit; }
+  input[type=search]:focus { outline:none; border-color:#444; }
+  button { background:#1c1c20; border:1px solid var(--line); color:var(--fg);
+           padding:6px 11px; border-radius:7px; cursor:pointer; font:inherit; }
+  button:hover { border-color:#3a3a42; }
+  button.on { background:var(--fg); color:#111; border-color:var(--fg); }
+  /* ── grid ───────────────────────────────────────────────────────────────
+     A card is a frame, a slug, a length and the caption. Everything else was
+     decoration: the lane is already a filter chip, the loudness is the gate's
+     business and the gate reports it, and a passing check is not information,
+     so it is a tick with the detail in its tooltip. */
+  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
+          gap:26px 18px; padding:20px; align-items:start; }
+  .card { margin:0; display:flex; flex-direction:column; gap:7px; min-width:0; }
+  .card[hidden] { display:none; }
+  .frame { position:relative; aspect-ratio:var(--ar, 9/16); background:#131317; cursor:pointer; }
+  .frame video, .frame img { width:100%; height:100%; object-fit:cover; display:block; }
+  /* A deck shows one slide at a time; hovering the card walks the set, which is
+     the fastest way to see whether it holds together as one register. */
+  .frame img { position:absolute; inset:0; opacity:0; }
+  .frame img.on { opacity:1; }
+  .count { position:absolute; top:6px; right:6px; background:rgba(0,0,0,.55); color:#fff;
+           font:10.5px/1 ui-monospace,Menlo,monospace; padding:3px 6px; border-radius:99px; }
+  .frame .gone { position:absolute; inset:0; display:grid; place-items:center;
+                 color:var(--dim); font-size:12px; text-align:center; padding:16px; }
+  figcaption { display:flex; flex-direction:column; gap:5px; min-width:0; }
+  /* One row, always. A slug is an identifier you copy, not prose you read, so
+     it truncates, carries the whole thing in its tooltip, and copies on click. */
+  .slug { font:11.5px/1.45 ui-monospace,Menlo,monospace; color:var(--accent);
+          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:copy; }
+  .slug[data-copied]::after, .build[data-copied]::after { content:" copied"; color:var(--dim); }
+  .line { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:11px; flex-wrap:wrap; }
+  .tick { color:var(--accent); cursor:help; }
+  .fail { color:var(--bad); }
+  .warn { color:var(--warn); }
+  .card .caption { white-space:pre-wrap; font-size:12.5px; line-height:1.55; color:#b9b9c2;
+                   max-height:7.8em; overflow:hidden; cursor:pointer;
+                   mask-image:linear-gradient(#000 72%, transparent); }
+  .card .caption.tall { max-height:none; mask-image:none; }
+  .nocap { color:var(--bad); font-size:12px; }
+  /* How this file was made. One row, the whole command in the tooltip: it is
+     the difference between a batch you can rebuild and one you can only keep. */
+  .build { font:10.5px/1.5 ui-monospace,Menlo,monospace; color:#6d6d78;
+           white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:copy; }
+  .copy { align-self:flex-start; font-size:11px; padding:3px 8px; opacity:0; transition:opacity .12s; }
+  .card:hover .copy { opacity:1; }
+  /* ── feed ─────────────────────────────────────────────────────────────── */
+  /* **Sideways between reels, up and down inside one.** The two axes carry two
+     different movements and giving each its own is what makes the feed read as
+     a reader's feed: a swipe or an arrow moves to the next post, a scroll reads
+     the caption of the one you are on. Stacking both on the vertical axis meant
+     scrolling to finish a caption was also the gesture for "next". */
+  #feed { position:fixed; inset:0; z-index:40; background:#0a0a0c; display:none;
+          overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; gap:34px; }
+  #feed.open { display:flex; }
+  /* The two rails that let the first and last post sit centred. They are flex
+     items because a pseudo-element on a flex container is one. */
+  #feed::before, #feed::after { content:""; flex:0 0 calc((100vw - var(--pw)) / 2); }
+  /* **min-width:0, or the head sets the width.** A flex item's automatic
+     minimum is its content, and a nowrap slug is wider than a post: without
+     this, posts with long slugs came out wider than the others, so no two snap
+     points were the same distance apart and the feed settled off-centre. */
+  .post { flex:0 0 var(--pw); min-width:0; scroll-snap-align:center; scroll-snap-stop:always;
+          height:100vh; padding:64px 0 18px; display:flex; flex-direction:column;
+          /* The neighbours are visible and clearly not the subject. */
+          opacity:.22; transition:opacity .18s ease; }
+  .post.current { opacity:1; }
+  /* No radius, no border: the frame is the reel, and anything drawn around it
+     is a thing the reader will never see. */
+  /* **Reading the caption slides the reel up.** The video is the whole post
+     until you start reading, and then it is a thumbnail of what you are reading
+     about; --shift is set from the caption's own scroll, so one gesture does
+     both. The margin (rather than a transform) is what makes the caption box
+     actually grow into the space, instead of the video sliding over it. */
+  .post video, .post .deck { width:100%; height:auto; aspect-ratio:var(--ar, 9/16);
+                             background:#131317; display:block; position:relative;
+                             margin-top:calc(-1 * var(--shift, 0px)); }
+  .post .deck img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; }
+  .post .deck img.on { opacity:1; }
+  /* Which slide you are on, and how many are left. Instagram's dots, because
+     the thing they answer - "is this deck too long" - is a real review question. */
+  .dots { display:flex; gap:5px; justify-content:center; padding:8px 0 0; }
+  .dot { width:5px; height:5px; border-radius:99px; background:#3a3a42; cursor:pointer; }
+  .dot.on { background:var(--fg); }
+  /* overflow-x:clip rather than the default: a box with overflow-y:auto counts
+     as a horizontal scroller too, and it was swallowing sideways swipes that
+     belong to the feed. Clip is not a scroll container, so they chain. */
+  .post .body { flex:1; min-height:0; overflow-y:auto; overflow-x:clip;
+                padding:12px 2px 0; overscroll-behavior-y:contain; }
+  .post .body::-webkit-scrollbar { width:0; }
+  .post .caption { white-space:pre-wrap; font-size:13.5px; line-height:1.6; color:#dcdce2;
+                   max-height:none; mask-image:none; }
+  #feedbar { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; gap:12px;
+             align-items:center; padding:10px 16px; background:rgba(10,10,12,.92);
+             backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
+             pointer-events:none; }
+  #feedbar > * { pointer-events:auto; }
+  #feedpos { color:var(--dim); font-size:12px; }
+  .keys { color:var(--dim); font-size:11.5px; }
+  .keys kbd { background:#1c1c20; border:1px solid var(--line); border-bottom-width:2px;
+              border-radius:4px; padding:0 4px; font:11px ui-monospace,Menlo,monospace; }
+  @media (max-width:640px) { .keys { display:none; } }
+</style>
+<header>
+  <h1>${esc(account)} <span class="dim">posts</span></h1>
+  <span class="dim">${items.length} post${items.length === 1 ? "" : "s"}${
+    lanes.length > 1 ? ` · ${lanes.map((l) => `${items.filter((i) => i.lane === l).length} ${esc(l)}`).join(" · ")}` : ""
+  }</span>
+  <input type="search" id="q" placeholder="filter slug or caption">
+  ${lanes.length > 1 ? `<span id="lanes">${lanes.map((l) => `<button data-lane="${esc(l)}">${esc(l)}</button>`).join("")}</span>` : ""}
+  <button id="failsonly">failing only</button>
+  <span class="spacer"></span>
+  <button id="tofeed">Feed view</button>
+  <span class="keys"><kbd>f</kbd> feed · <kbd>/</kbd> filter</span>
+</header>
+<div class="grid" id="grid">
+${items.map(card).join("\n")}
+</div>
+<div id="feed">
+  <div id="feedbar">
+    <button id="tofeedclose">← Grid</button>
+    <span id="feedpos"></span>
+    <button id="sound">🔇 Sound off</button>
+    <button id="copyfeed">Copy caption</button>
+    <span class="keys"><kbd>←</kbd><kbd>→</kbd> posts · <kbd>↑</kbd><kbd>↓</kbd> caption · <kbd>[</kbd><kbd>]</kbd> slides · <kbd>space</kbd> pause · <kbd>m</kbd> sound · <kbd>esc</kbd> back</span>
+  </div>
+</div>
+<script>
+// Live reload, when this page is being served rather than opened as a file.
+// The current reel is in the hash, so a refresh comes back to where you were.
+if (location.protocol.startsWith("http")) {
+  const es = new EventSource("/__reload");
+  es.onmessage = () => location.reload();
+}
+const ITEMS = ${scriptJson(
+    playable.map((i) => ({
+      slug: i.slug,
+      lane: i.lane,
+      kind: i.kind ?? "reel",
+      src: i.src,
+      slides: i.slides ?? null,
+      ar: cssRatio(i),
+      caption: i.caption ?? "",
+      meta: metaLine(i),
+    })),
+  )};
+const ALL = ${scriptJson(items.map((i) => ({ slug: i.slug, hasSrc: !!i.src })))};
+/* ── grid behaviour ─────────────────────────────────────────────────────── */
+const grid = document.getElementById("grid");
+const q = document.getElementById("q");
+let laneFilter = null, failsOnly = false;
+function applyFilter() {
+  const needle = q.value.trim().toLowerCase();
+  for (const card of grid.children) {
+    const hay = card.dataset.hay;
+    const ok =
+      (!needle || hay.includes(needle)) &&
+      (!laneFilter || card.dataset.lane === laneFilter) &&
+      (!failsOnly || card.dataset.checks === "fail");
+    card.hidden = !ok;
+  }
+}
+q.addEventListener("input", applyFilter);
+document.getElementById("lanes")?.addEventListener("click", (e) => {
+  const b = e.target.closest("button"); if (!b) return;
+  laneFilter = laneFilter === b.dataset.lane ? null : b.dataset.lane;
+  for (const x of e.currentTarget.children) x.classList.toggle("on", x.dataset.lane === laneFilter);
+  applyFilter();
+});
+document.getElementById("failsonly").addEventListener("click", (e) => {
+  failsOnly = !failsOnly; e.target.classList.toggle("on", failsOnly); applyFilter();
+});
+// Hover previews the clip, click opens it in the feed. Both muted: a grid that
+// makes noise is a grid nobody leaves open.
+for (const card of grid.children) {
+  const frame = card.querySelector(".frame");
+  const v = card.querySelector("video");
+  const imgs = [...card.querySelectorAll(".frame img")];
+  frame.addEventListener("click", () => openFeed(card.dataset.slug));
+  if (v) {
+    frame.addEventListener("mouseenter", () => { v.play().catch(() => {}); });
+    frame.addEventListener("mouseleave", () => { v.pause(); v.currentTime = 0; });
+  } else if (imgs.length > 1) {
+    let t = null, at = 0;
+    frame.addEventListener("mouseenter", () => {
+      t = setInterval(() => {
+        imgs[at].classList.remove("on");
+        at = (at + 1) % imgs.length;
+        imgs[at].classList.add("on");
+      }, 700);
+    });
+    frame.addEventListener("mouseleave", () => {
+      clearInterval(t);
+      imgs[at].classList.remove("on"); at = 0; imgs[0].classList.add("on");
+    });
+  }
+}
+grid.addEventListener("click", (e) => {
+  const b = e.target.closest("button"); if (!b) return;
+  if (b.dataset.copy != null) {
+    navigator.clipboard.writeText(b.closest("figcaption").querySelector(".caption").textContent);
+    b.textContent = "Copied"; setTimeout(() => (b.textContent = "Copy caption"), 1200);
+  }
+});
+grid.addEventListener("click", (e) => {
+  const cap = e.target.closest(".caption");
+  if (cap) cap.classList.toggle("tall");
+  for (const sel of [".slug", ".build"]) {
+    const el = e.target.closest(sel);
+    if (!el) continue;
+    navigator.clipboard.writeText(el.title);
+    el.dataset.copied = "1";
+    setTimeout(() => delete el.dataset.copied, 1000);
+  }
+});
+/* ── feed ───────────────────────────────────────────────────────────────── */
+const feed = document.getElementById("feed");
+const pos = document.getElementById("feedpos");
+let built = false, index = 0, visual = -1, muted = true, settling = false, settleTimer = null;
+/**
+ * Centre one post, by arithmetic.
+ *
+ * **scrollIntoView({ inline: "center" }) does not centre this container**: with
+ * the two rails that let the first and last post sit in the middle, it settled
+ * a full rail short every time, so the reel you had selected sat off to the
+ * right and its neighbour held the centre. The sum is three terms long and it
+ * is right in every browser.
+ */
+function scrollToIndex(behavior) {
+  const el = feed.querySelector(\`.post[data-n="\${index}"]\`);
+  if (!el) return;
+  settling = true;
+  clearTimeout(settleTimer);
+  settleTimer = setTimeout(() => (settling = false), behavior === "smooth" ? 520 : 140);
+  feed.scrollTo({ left: el.offsetLeft - (feed.clientWidth - el.clientWidth) / 2, behavior });
+}
+function build() {
+  if (built) return; built = true;
+  feed.insertAdjacentHTML(
+    "beforeend",
+    ITEMS.map((it, n) => \`
+    <section class="post" data-n="\${n}" data-slug="\${it.slug}" data-kind="\${it.kind}" style="--ar:\${it.ar}">
+      \${
+        it.kind === "carousel"
+          ? \`<div class="deck">\${it.slides.map((src, i) => \`<img alt="" data-src="\${src}" class="\${i === 0 ? "on" : ""}">\`).join("")}</div>
+             <div class="dots">\${it.slides.map((_, i) => \`<span class="dot \${i === 0 ? "on" : ""}" data-i="\${i}"></span>\`).join("")}</div>\`
+          : \`<video preload="none" loop playsinline muted data-src="\${it.src}"></video>\`
+      }
+      <div class="body"><div class="caption"></div></div>
+    </section>\`).join(""),
+  );
+  // The caption goes in as text, never as markup: it is prose from a file and
+  // an ampersand in it must survive.
+  feed.querySelectorAll(".post").forEach((p, n) => { p.querySelector(".caption").textContent = ITEMS[n].caption; });
+  // A tap on a neighbour goes to it, which is what a half-visible thing invites.
+  // On the post you are already on, a tap on a deck steps through its slides.
+  feed.addEventListener("click", (e) => {
+    const p = e.target.closest(".post");
+    if (!p) return;
+    if (Number(p.dataset.n) !== index) return go(Number(p.dataset.n) - index);
+    const dot = e.target.closest(".dot");
+    if (dot) return showSlide(p, Number(dot.dataset.i));
+    const deck = e.target.closest(".deck");
+    if (deck) {
+      const r = deck.getBoundingClientRect();
+      stepSlide(p, e.clientX - r.left < r.width / 2 ? -1 : 1);
+    }
+  });
+  // Only the posts near the viewport hold a src. Seventy-one <video src> at
+  // once is a browser that stalls before it plays anything.
+  // **Which post is the current one is answered twice, at two speeds.**
+  // The look of it - the bright one, the one that plays, the name in the bar -
+  // changes the moment a new post takes the middle of the screen, because a
+  // selection that waits for the scroll to stop feels like the page lagging
+  // behind your hand. The expensive half (loading and dropping video sources,
+  // the address in the URL) waits for the scroll to settle, since doing that
+  // for every post a flick passes over is work nobody sees.
+  let scrollTimer = null, raf = 0;
+  feed.addEventListener("scroll", () => {
+    if (!raf) raf = requestAnimationFrame(() => { raf = 0; markCurrent(nearest()); });
+    clearTimeout(scrollTimer);
+    scrollTimer = setTimeout(settle, 90);
+  });
+  if ("onscrollend" in feed) feed.addEventListener("scrollend", settle);
+  // **A sideways gesture is the browser's, and only the browser's.** Taking it
+  // over cost the trackpad its momentum and its snap - a two-finger swipe moved
+  // the feed in dead little steps - so the handler now touches the vertical
+  // half only, where it has something to add: down reads the caption of the
+  // post you are on, wherever the pointer happens to be. The caption box is
+  // kept out of the way of the other axis in CSS (overflow-x:clip and
+  // overscroll-behavior-y), not here.
+  feed.addEventListener(
+    "wheel",
+    (e) => {
+      if (Math.abs(e.deltaX) >= Math.abs(e.deltaY)) return;
+      e.preventDefault();
+      nudge(e.deltaY);
+    },
+    { passive: false },
+  );
+}
+/** The post whose centre is nearest the middle of the scrollport. */
+function nearest() {
+  const mid = feed.scrollLeft + feed.clientWidth / 2;
+  let best = 0, bestD = Infinity;
+  feed.querySelectorAll(".post").forEach((p, n) => {
+    const d = Math.abs(p.offsetLeft + p.clientWidth / 2 - mid);
+    if (d < bestD) { bestD = d; best = n; }
+  });
+  return best;
+}
+/**
+ * A deck plays too - it just plays slowly.
+ *
+ * **The current carousel advances by itself**, at reading pace, because the
+ * question a batch review asks of a deck is whether it holds together as one
+ * set, and that is a thing you see rather than click through. Space stops it,
+ * the same key that pauses a reel, so the feed has one idea of "playing".
+ */
+let deckTimer = null;
+function slidesOf(post) {
+  return [...post.querySelectorAll(".deck img")];
+}
+function showSlide(post, n) {
+  const imgs = slidesOf(post);
+  if (!imgs.length) return;
+  const at = (n + imgs.length) % imgs.length;
+  imgs.forEach((img, i) => {
+    // A slide is fetched when it is about to be needed, not all at once.
+    if (!img.src && Math.abs(i - at) <= 1) img.src = img.dataset.src;
+    img.classList.toggle("on", i === at);
+  });
+  post.querySelectorAll(".dot").forEach((d, i) => d.classList.toggle("on", i === at));
+  post.dataset.slide = at;
+}
+const stepSlide = (post, d) => showSlide(post, Number(post.dataset.slide ?? 0) + d);
+function playDeck(post) {
+  clearInterval(deckTimer);
+  showSlide(post, Number(post.dataset.slide ?? 0));
+  deckTimer = setInterval(() => stepSlide(post, 1), 2200);
+}
+/** The fast half: what is bright, what plays, what the bar says. Two elements. */
+function markCurrent(n) {
+  if (n === visual) return;
+  const prev = feed.querySelector(\`.post[data-n="\${visual}"]\`);
+  if (prev) {
+    prev.classList.remove("current");
+    prev.querySelector("video")?.pause();
+    // A post you left goes back to being a reel, not a page of text.
+    if (prev.style.getPropertyValue("--shift") !== "0px") {
+      prev.style.setProperty("--shift", "0px");
+      prev.querySelector(".body").scrollTop = 0;
+    }
+  }
+  visual = n;
+  clearInterval(deckTimer);
+  const cur = feed.querySelector(\`.post[data-n="\${n}"]\`);
+  if (cur) {
+    cur.classList.add("current");
+    const v = cur.querySelector("video");
+    if (v) {
+      v.muted = muted;
+      if (v.src) v.play().catch(() => {});
+    } else playDeck(cur);
+  }
+  pos.textContent = \`\${n + 1} / \${ITEMS.length}  ·  \${ITEMS[n].slug}  ·  \${ITEMS[n].meta}\`;
+}
+/** The settled half: the address, and which files are loaded. */
+function settle() {
+  if (settling) return;
+  const n = nearest();
+  if (n === index) return;
+  index = n;
+  sync();
+}
+function sync() {
+  if (feed.classList.contains("open")) history.replaceState(null, "", "#" + encodeURIComponent(ITEMS[index].slug));
+  markCurrent(index);
+  feed.querySelectorAll(".post").forEach((p, n) => {
+    const near = Math.abs(n - index) <= 2;
+    const v = p.querySelector("video");
+    if (!v) {
+      // A deck near the middle shows its first slide, so a neighbour is a
+      // picture rather than a grey box.
+      if (near) showSlide(p, Number(p.dataset.slide ?? 0));
+      return;
+    }
+    if (near && !v.src) {
+      v.preload = "metadata";
+      v.src = v.dataset.src;
+      // A paused <video> paints nothing until it has been somewhere, so a
+      // neighbour showed as a black rectangle. Nudging it a frame in gives the
+      // peek an actual image.
+      v.addEventListener("loadedmetadata", () => { if (v.paused) v.currentTime = 0.05; }, { once: true });
+    }
+    if (!near && v.src) { v.pause(); v.removeAttribute("src"); v.load(); }
+    v.muted = muted;
+    if (n === index) v.play().catch(() => {}); else v.pause();
+  });
+}
+/**
+ * Scrolling a post, in that order: the reel gives way, then the text moves.
+ *
+ * **The first line of a caption is the one that has to stay put.** It carries
+ * the architect, the building and the year, and a plain scroll took it off the
+ * top of the box while the video slid away, so the reader lost the label of
+ * what they were reading. So the first ~55% of the video's height is spent
+ * shrinking the video, with the caption held still, and only what is left over
+ * scrolls the text.
+ */
+function nudge(dy) {
+  const post = feed.querySelector(\`.post[data-n="\${index}"]\`);
+  if (!post) return;
+  const body = post.querySelector(".body");
+  const video = post.querySelector("video");
+  const max = video.getBoundingClientRect().height * 0.55;
+  let shift = parseFloat(post.style.getPropertyValue("--shift") || 0);
+  if (dy > 0) {
+    const use = Math.min(dy, Math.max(0, max - shift));
+    shift += use;
+    body.scrollTop += dy - use;
+  } else {
+    const room = body.scrollTop;
+    const use = Math.min(-dy, room);
+    body.scrollTop -= use;
+    shift = Math.max(0, shift + dy + use);
+  }
+  post.style.setProperty("--shift", shift + "px");
+}
+function openFeed(slug) {
+  build();
+  const n = ITEMS.findIndex((i) => i.slug === slug);
+  index = n < 0 ? 0 : n;
+  visual = -1;
+  feed.classList.add("open");
+  document.body.style.overflow = "hidden";
+  sync();
+  feed.querySelector(\`.post[data-n="\${index}"]\`).scrollIntoView({ behavior: "instant", inline: "center", block: "nearest" });
+}
+function closeFeed() {
+  clearInterval(deckTimer); deckTimer = null;
+  if (location.hash) history.replaceState(null, "", location.pathname);
+  feed.classList.remove("open");
+  document.body.style.overflow = "";
+  feed.querySelectorAll("video").forEach((v) => v.pause());
+}
+function go(delta) {
+  const next = Math.min(ITEMS.length - 1, Math.max(0, index + delta));
+  if (next === index) return;
+  index = next; sync();
+  feed.querySelector(\`.post[data-n="\${index}"]\`).scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+}
+document.getElementById("tofeed").addEventListener("click", () => openFeed(ITEMS[0]?.slug));
+// **The hash is the address of one reel.** It is what makes a card in this page
+// something you can send to somebody, and it is how the feed survives a reload
+// in the middle of a review.
+function fromHash() {
+  const slug = decodeURIComponent(location.hash.slice(1));
+  if (!slug) return closeFeed();
+  if (ITEMS.some((i) => i.slug === slug)) openFeed(slug);
+}
+addEventListener("hashchange", fromHash);
+addEventListener("DOMContentLoaded", fromHash);
+fromHash();
+document.getElementById("tofeedclose").addEventListener("click", closeFeed);
+document.getElementById("sound").addEventListener("click", toggleSound);
+document.getElementById("copyfeed").addEventListener("click", (e) => {
+  navigator.clipboard.writeText(ITEMS[index].caption);
+  e.target.textContent = "Copied"; setTimeout(() => (e.target.textContent = "Copy caption"), 1200);
+});
+function toggleSound() {
+  muted = !muted;
+  document.getElementById("sound").textContent = muted ? "🔇 Sound off" : "🔊 Sound on";
+  sync();
+}
+addEventListener("keydown", (e) => {
+  if (e.target.tagName === "INPUT") { if (e.key === "Escape") e.target.blur(); return; }
+  const open = feed.classList.contains("open");
+  if (e.key === "/") { e.preventDefault(); q.focus(); return; }
+  if (e.key === "f" && !open) return openFeed(ITEMS[0]?.slug);
+  if (!open) return;
+  if (e.key === "Escape") return closeFeed();
+  if (e.key === "ArrowRight" || e.key === "j") { e.preventDefault(); go(1); }
+  if (e.key === "ArrowLeft" || e.key === "k") { e.preventDefault(); go(-1); }
+  // Up and down belong to the caption of the post you are on, not to the feed.
+  if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "PageDown" || e.key === "PageUp") {
+    const body = feed.querySelector(\`.post[data-n="\${index}"] .body\`);
+    if (!body) return;
+    e.preventDefault();
+    const step = e.key.startsWith("Page") ? body.clientHeight * 0.8 : 90;
+    nudge(e.key === "ArrowUp" || e.key === "PageUp" ? -step : step);
+  }
+  if (e.key === "m") toggleSound();
+  if (e.key === " ") {
+    e.preventDefault();
+    const post = feed.querySelector(\`.post[data-n="\${index}"]\`);
+    const v = post.querySelector("video");
+    if (v) return void (v.paused ? v.play().catch(() => {}) : v.pause());
+    if (deckTimer) { clearInterval(deckTimer); deckTimer = null; } else playDeck(post);
+  }
+  // A deck steps by hand with the bracket keys, since the arrows belong to the
+  // feed and to the caption.
+  if (e.key === "[" || e.key === "]") {
+    const post = feed.querySelector(\`.post[data-n="\${index}"]\`);
+    if (post.dataset.kind === "carousel") { clearInterval(deckTimer); deckTimer = null; stepSlide(post, e.key === "]" ? 1 : -1); }
+  }
+});
+</script>
+<p class="dim" style="padding:0 20px 28px;font-size:11.5px">
+  built ${esc(generatedAt)} · <span class="mono">sprid post preview</span>
+</p>
+</html>
+`;
+}
+/** A deck's shape is its own; a reel is 9:16 and says so by not saying it. */
+const cssRatio = (i) => (i.aspect ? i.aspect.replace(":", "/") : "9/16");
+function metaLine(i) {
+  const size =
+    i.kind === "carousel"
+      ? [`${i.slideCount ?? 0} slides`, i.aspect].filter(Boolean).join(" · ")
+      : i.durationMs
+        ? secs(i.durationMs)
+        : null;
+  return [size, i.sizeBytes ? mb(i.sizeBytes) : null, typeof i.lufs === "number" ? `${i.lufs.toFixed(1)} LUFS` : null]
+    .filter(Boolean)
+    .join(" · ");
+}
+function card(i) {
+  const hay = `${i.slug} ${i.lane ?? ""} ${i.caption ?? ""}`.toLowerCase();
+  const marks = [];
+  if (i.checks === "pass")
+    marks.push(`<span class="tick" title="${esc((i.passed ?? []).join(" · ") || "checks")} pass">&#10003;</span>`);
+  if (i.checks === "fail") marks.push(`<span class="fail">${esc(i.failures.join(", ") || "checks fail")}</span>`);
+  if (!i.checks) marks.push(`<span title="run check">?</span>`);
+  if (i.spridStatus && i.spridStatus !== "none") marks.push(`<span>${esc(i.spridStatus)}</span>`);
+  if (i.captionDrifted) marks.push(`<span class="warn">caption changed since draft</span>`);
+  if (i.stale) marks.push(`<span class="warn">file differs from its record</span>`);
+  const frame = i.slides
+    ? i.slides.map((src, n) => `<img src="${esc(src)}" alt="" class="${n === 0 ? "on" : ""}" loading="lazy">`).join("") +
+      `<span class="count">${i.slides.length}</span>`
+    : i.src
+      ? `<video src="${esc(i.src)}" preload="metadata" muted loop playsinline></video>`
+      : `<div class="gone">media not on disk<br><span class="mono">${esc(i.source ?? "")}</span></div>`;
+  return `<figure class="card" data-slug="${esc(i.slug)}" data-lane="${esc(i.lane ?? "")}" data-checks="${i.checks ?? "none"}" data-hay="${esc(hay)}" style="--ar:${cssRatio(i)}">
+  <div class="frame">${frame}</div>
+  <figcaption>
+    <div class="slug" title="${esc(i.slug)}">${esc(i.slug)}</div>
+    <div class="line">${esc(i.kind === "carousel" ? `${i.slideCount ?? 0} slides` : i.durationMs ? secs(i.durationMs) : "")}${marks.length ? " " + marks.join(" ") : ""}</div>
+    ${
+      i.caption
+        ? `<div class="caption">${esc(i.caption)}</div><button class="copy" data-copy>Copy caption</button>`
+        : `<div class="nocap">no caption in the registry</div>`
+    }
+    ${i.build ? `<div class="build" title="${esc(i.build)}">${esc(i.build)}</div>` : ""}
+  </figcaption>
+</figure>`;
+}