@unrender/cli-win32-x64 0.0.0-stage → 0.0.2

package/unrender/_internal/unrender/probe/probe.mjs

@@ -0,0 +1,385 @@
+// Unrender probe: open a HyperFrames project in HyperFrames' own runtime and record, frame by frame, what the
+// browser draws. Usage: node probe.mjs <projectDir> <out.json> [--fps N] [--hf-dist DIR]
+//
+// It reuses the CLI's snapshot path (bundle with fonts → serve → managed Chrome → renderSeek), so what it sees is
+// what `hyperframes render` draws. Output: canvas, fonts, media, and per element a change-encoded track of its
+// on-screen state (box, opacity, transform, paint order, text runs and line breaks).
+import { readdirSync, readFileSync, writeFileSync, existsSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { homedir } from "node:os";
+import { pathToFileURL } from "node:url";
+import { createHash } from "node:crypto";
+
+const args = process.argv.slice(2);
+const opt = (name, dflt) => {
+  const i = args.indexOf(name);
+  return i >= 0 ? args[i + 1] : dflt;
+};
+const [projectDir, outPath] = args.filter((a, i) => !a.startsWith("--") && !(i > 0 && args[i - 1].startsWith("--")));
+if (!projectDir || !outPath) {
+  console.error("usage: node probe.mjs <projectDir> <out.json> [--fps N] [--hf-dist DIR]");
+  process.exit(2);
+}
+
+function versionOf(dist) {
+  try {
+    return JSON.parse(readFileSync(join(dist, "..", "package.json"), "utf8")).version || "0";
+  } catch {
+    return "0";
+  }
+}
+function newer(a, b) {
+  const pa = a.split(".").map(Number), pb = b.split(".").map(Number);
+  for (let i = 0; i < 3; i++) if ((pa[i] || 0) !== (pb[i] || 0)) return (pa[i] || 0) > (pb[i] || 0);
+  return false;
+}
+function findDist() {
+  const given = opt("--hf-dist", process.env.UNRENDER_HF_DIST);
+  if (given) return given;
+  const root = join(homedir(), ".npm", "_npx");
+  let best = null;
+  for (const d of existsSync(root) ? readdirSync(root) : []) {
+    const dist = join(root, d, "node_modules", "hyperframes", "dist");
+    if (existsSync(dist) && (!best || newer(versionOf(dist), versionOf(best)))) best = dist;
+  }
+  if (!best) throw new Error("HyperFrames isn't installed: run `npx --yes hyperframes --version` once");
+  return best;
+}
+async function load(dist, prefix, names) {
+  const file = readdirSync(dist).find((f) => f.startsWith(prefix) && f.endsWith(".js"));
+  if (!file) throw new Error(`this HyperFrames version has no ${prefix}*.js; unrender needs an update`);
+  const mod = await import(pathToFileURL(join(dist, file)).href);
+  for (const n of names) if (!(n in mod)) throw new Error(`HyperFrames ${prefix} no longer exports ${n}`);
+  return mod;
+}
+
+// ---------------------------------------------------------------- in-page scan (runs inside Chrome)
+
+function installScanner() {
+  const PHASE = { NEG: 0, BLOCK: 1, TEXT: 2, POS: 3, POSZ: 4 };
+  const ATOMIC = new Set(["IMG", "VIDEO", "CANVAS", "SVG", "svg", "IFRAME", "PICTURE", "OBJECT", "EMBED"]);
+  const INLINE = new Set(["inline", "contents"]);
+  const lineCache = new Map();
+
+  const alpha = (c) => {
+    if (!c || c === "transparent") return 0;
+    const m = c.match(/rgba?\(([^)]+)\)/);
+    if (!m) return 1;
+    const p = m[1].split(/[,\s/]+/).filter(Boolean);
+    return p.length > 3 ? parseFloat(p[3]) : 1;
+  };
+  const lin2 = (t) => {
+    if (!t || t === "none") return [1, 0, 0, 1];
+    const m = t.match(/matrix(3d)?\(([^)]+)\)/);
+    if (!m) return [1, 0, 0, 1];
+    const v = m[2].split(",").map(Number);
+    return m[1] ? [v[0], v[1], v[4], v[5]] : [v[0], v[1], v[2], v[3]];
+  };
+  const mul = (p, c) => [p[0] * c[0] + p[2] * c[1], p[1] * c[0] + p[3] * c[1], p[0] * c[2] + p[2] * c[3], p[1] * c[2] + p[3] * c[3]];
+  const inter = (a, b) => {
+    const x = Math.max(a[0], b[0]), y = Math.max(a[1], b[1]);
+    const x2 = Math.min(a[0] + a[2], b[0] + b[2]), y2 = Math.min(a[1] + a[3], b[1] + b[3]);
+    return x2 > x && y2 > y ? [x, y, x2 - x, y2 - y] : null;
+  };
+  const r1 = (v) => Math.round(v * 10) / 10;
+  const r3 = (v) => Math.round(v * 1000) / 1000;
+  // op: an inline child's own opacity; the block's own opacity is the element's (it fades the whole text)
+  const runStyle = (cs, bg, block) => ({
+    color: cs.color, family: cs.fontFamily, weight: cs.fontWeight, style: cs.fontStyle, size: parseFloat(cs.fontSize),
+    deco: cs.textDecorationLine, bg: bg || null,
+    ls: cs.letterSpacing, op: block ? 1 : parseFloat(cs.opacity), tf: null, // transforms never apply to inline boxes
+  });
+  const transformText = (s, tt) => (tt === "uppercase" ? s.toUpperCase() : tt === "lowercase" ? s.toLowerCase() : s);
+
+  // inline content of a block: text runs (descending into inline elements, stopping at blocks)
+  function textRuns(block, blockCs) {
+    const runs = [];
+    const pre = /^pre/.test(blockCs.whiteSpace);
+    // bg: the background of the inline box the text sits in (nested inline children inherit it visually)
+    const visit = (node, cs, bg, block) => {
+      for (const n of node.childNodes) {
+        if (n.nodeType === 3) {
+          let s = n.data;
+          if (!pre) s = s.replace(/\s+/g, " ");
+          if (s) runs.push({ node: n, text: transformText(s, cs.textTransform), tt: cs.textTransform, st: runStyle(cs, bg, block) });
+        } else if (n.nodeType === 1) {
+          if (n.tagName === "BR") {
+            runs.push({ node: null, text: "\n", st: runStyle(cs, bg, block) });
+            continue;
+          }
+          const ccs = getComputedStyle(n);
+          if (ccs.display === "none" || !INLINE.has(ccs.display) || ATOMIC.has(n.tagName)) continue;
+          visit(n, ccs, alpha(ccs.backgroundColor) > 0 ? ccs.backgroundColor : bg, false);
+        }
+      }
+    };
+    visit(block, blockCs, null, true);
+    return runs;
+  }
+
+  // the lines Chrome actually broke the text into: one Range per character, grouped by line top.
+  // Collapsed whitespace has no box, so it drops out on its own.
+  function lineBreaks(runs) {
+    const out = [];
+    const range = document.createRange();
+    let lastTop = null;
+    for (const run of runs) {
+      if (!run.node) {
+        out.push({ text: "\n", st: run.st });
+        lastTop = null;
+        continue;
+      }
+      const raw = run.node.data;
+      let buf = "";
+      for (let i = 0; i < raw.length; i++) {
+        range.setStart(run.node, i);
+        range.setEnd(run.node, i + 1);
+        const rect = range.getClientRects()[0];
+        const space = /\s/.test(raw[i]);
+        if (!rect || (space && rect.width === 0)) continue;
+        const newLine = lastTop !== null && rect.top > lastTop + rect.height * 0.5;
+        if (newLine) {
+          if (buf) out.push({ text: transformText(buf, run.tt), st: run.st });
+          out.push({ text: "\n", st: run.st });
+          buf = "";
+        }
+        if (lastTop === null || newLine) lastTop = rect.top;
+        buf += space ? " " : raw[i];
+      }
+      if (buf) out.push({ text: transformText(buf, run.tt), st: run.st });
+    }
+    return out;
+  }
+
+  function helper(el) {
+    if (el.classList && el.classList.contains("__render_frame__")) return true;
+    const p = el.previousElementSibling;
+    return el.tagName === "CANVAS" && !el.id && !!p && (p.tagName === "VIDEO" || (p.classList && p.classList.contains("__render_frame__")));
+  }
+
+  window.__urScan = function () {
+    const root = document.querySelector("[data-composition-id]");
+    if (!root) return null;
+    const W = window.innerWidth, H = window.innerHeight;
+    const view = [0, 0, W, H];
+    const els = {};
+    let order = 0;
+
+    const walk = (el, key, sel, effOp, clip, lin, prefix, flags, anc) => {
+      const cs = getComputedStyle(el);
+      if (cs.display === "none") return;
+      const op = effOp * parseFloat(cs.opacity || "1");
+      const L = mul(lin, lin2(cs.transform));
+      const b = el.getBoundingClientRect();
+      const box = [b.x, b.y, b.width, b.height];
+      const pos = cs.position !== "static";
+      const z = cs.zIndex === "auto" ? null : parseInt(cs.zIndex, 10);
+      const sc = el === root || (pos && z !== null) || parseFloat(cs.opacity) < 1 || cs.transform !== "none" ||
+        cs.filter !== "none" || cs.mixBlendMode !== "normal" || cs.isolation === "isolate" || cs.clipPath !== "none" ||
+        (cs.maskImage && cs.maskImage !== "none") || cs.position === "fixed" || cs.position === "sticky";
+      const idx = order++;
+      const phase = pos || sc ? (z !== null && z < 0 ? PHASE.NEG : z ? PHASE.POSZ : PHASE.POS) : PHASE.BLOCK;
+      const pk = [...prefix, phase, z || 0, idx];
+      const tag = el.tagName;
+      const atomic = ATOMIC.has(tag);
+      const f = { ...flags };
+      if (cs.mixBlendMode !== "normal") f.blend = 1;
+      if (cs.filter !== "none") f.filter = 1;
+      if (cs.backdropFilter && cs.backdropFilter !== "none") f.backdrop = 1;
+      if (cs.clipPath !== "none" || (cs.maskImage && cs.maskImage !== "none")) f.mask = 1;
+      const seen = clip ? inter(box, clip) : inter(box, view);
+      const visible = cs.visibility === "visible" && op > 0.002 && seen;
+
+      const pseudo = ["::before", "::after"].some((p) => {
+        const pc = getComputedStyle(el, p).content;
+        return pc && pc !== "none" && pc !== "normal";
+      });
+      const paintsBox = alpha(cs.backgroundColor) > 0 || cs.backgroundImage !== "none" || cs.boxShadow !== "none" ||
+        (parseFloat(cs.borderTopWidth) + parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth) +
+          parseFloat(cs.borderBottomWidth) > 0 && cs.borderTopStyle !== "none") ||
+        (cs.outlineStyle !== "none" && parseFloat(cs.outlineWidth) > 0) || pseudo || atomic || f.backdrop;
+
+      let text = null;
+      if (!INLINE.has(cs.display) && !atomic) {
+        const runs = textRuns(el, cs);
+        if (runs.some((r) => r.text.trim())) {
+          // the cache key carries every run's style: a word turning red keeps the text but must change the runs
+          const ck = JSON.stringify(runs.map((r) => [r.text, r.st])) + "@" + Math.round(b.width) + "x" + cs.fontSize;
+          let lines = lineCache.get(ck);
+          if (!lines) {
+            lines = lineBreaks(runs);
+            if (lineCache.size > 5000) lineCache.clear();
+            lineCache.set(ck, lines);
+          }
+          const rng = document.createRange();
+          rng.selectNodeContents(el);
+          const rects = Array.from(rng.getClientRects()).map((r) => [r1(r.x), r1(r.y), r1(r.width), r1(r.height)]);
+          text = {
+            runs: lines.map((r) => [r.text, r.st.color, r.st.family, r.st.weight, r.st.style, r.st.size, r.st.deco, r.st.bg, r.st.ls, r.st.op, r.st.tf]),
+            align: cs.textAlign, lh: cs.lineHeight, shadow: cs.textShadow, stroke: cs.webkitTextStrokeWidth + " " + cs.webkitTextStrokeColor,
+            clipText: cs.webkitBackgroundClip === "text" || cs.backgroundClip === "text" ? 1 : 0,
+            pad: [cs.paddingTop, cs.paddingRight, cs.paddingBottom, cs.paddingLeft].map(parseFloat),
+            radius: parseFloat(cs.borderTopLeftRadius) || 0, ink: rects,
+          };
+        }
+      }
+
+      // inline boxes belong to their text block (their background is a run style), so they aren't separate layers
+      if (visible && (paintsBox || text) && (!INLINE.has(cs.display) || atomic)) {
+        const rec = {
+          b: box.map(r1), c: seen.map(r1), o: r3(op), m: L.map(r3), lw: r1(el.offsetWidth || b.width), lh: r1(el.offsetHeight || b.height),
+          pk, pkt: pos || sc ? pk : [...prefix, PHASE.TEXT, 0, idx],
+          box: paintsBox ? 1 : 0,
+          bg: alpha(cs.backgroundColor) > 0 ? cs.backgroundColor : null,
+          bgi: cs.backgroundImage !== "none" ? 1 : 0,
+          rad: parseFloat(cs.borderTopLeftRadius) || 0, sh: cs.boxShadow !== "none" ? cs.boxShadow : null,
+          f: Object.keys(f).length ? f : undefined,
+        };
+        if (text) rec.t = text;
+        if (tag === "VIDEO" || tag === "AUDIO" || tag === "IMG") {
+          rec.media = { tag, src: el.getAttribute("src") || el.currentSrc || "", fit: cs.objectFit, opos: cs.objectPosition };
+        }
+        els[key] = { sel, anc, tag, id: el.id || "", cls: el.className && el.className.baseVal === undefined ? el.className : "", rec };
+      }
+      if (atomic) return;
+      const childClip = cs.overflow !== "visible" || cs.overflowX !== "visible" ? (clip ? inter(clip, box) || [0, 0, 0, 0] : inter(view, box)) : clip;
+      const childPrefix = sc || pos ? pk : prefix;
+      let i = 0;
+      for (const ch of el.children) {
+        if (helper(ch)) continue; // render-mode frame images after a <video>; mask.js skips them the same way
+        i++;
+        if (ch.tagName === "SCRIPT" || ch.tagName === "STYLE" || ch.tagName === "TEMPLATE") continue;
+        const ckey = ch.id ? "#" + ch.id : key + "/" + i;
+        const csel = ch.id ? "#" + CSS.escape(ch.id) : sel + " > :nth-child(" + i + ")";
+        walk(ch, ckey, csel, op, childClip, L, childPrefix, f, anc.concat(key));
+      }
+    };
+    const rootKey = root.id ? "#" + root.id : "root";
+    const rootSel = root.id ? "#" + CSS.escape(root.id) : "[data-composition-id=\"" + root.getAttribute("data-composition-id") + "\"]";
+    walk(root, rootKey, rootSel, 1, null, [1, 0, 0, 1], [], {}, []);
+    return els;
+  };
+
+  window.__urStatic = function () {
+    const root = document.querySelector("[data-composition-id]");
+    const fonts = [];
+    for (const sheet of Array.from(document.styleSheets)) {
+      let rules;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        continue;
+      }
+      for (const r of Array.from(rules || [])) {
+        if (r.constructor.name === "CSSFontFaceRule") {
+          fonts.push({ family: r.style.getPropertyValue("font-family").replace(/["']/g, "").trim(),
+            weight: r.style.getPropertyValue("font-weight") || "400", style: r.style.getPropertyValue("font-style") || "normal",
+            src: (r.style.getPropertyValue("src").match(/url\(["']?([^"')]+)["']?\)/) || [])[1] || "" });
+        }
+      }
+    }
+    const media = [];
+    document.querySelectorAll("video[data-start], audio[data-start], img[data-start]").forEach((m) => {
+      const a = (k) => m.getAttribute(k);
+      media.push({ tag: m.tagName, id: m.id, src: a("src") || "", start: parseFloat(a("data-start") || "0"),
+        duration: a("data-duration") === null ? null : parseFloat(a("data-duration")),
+        mediaStart: parseFloat(a("data-media-start") || a("data-playback-start") || "0"),
+        volume: a("data-volume") === null ? 1 : parseFloat(a("data-volume")), muted: m.muted || m.hasAttribute("muted"),
+        hasAudio: a("data-has-audio"), loop: m.loop || m.hasAttribute("loop"), rate: parseFloat(a("data-playback-rate") || "1"),
+        track: parseInt(a("data-track-index") || "0", 10) });
+    });
+    const clips = [];
+    root.querySelectorAll(":scope > [data-start]").forEach((c) => clips.push({ id: c.id, start: parseFloat(c.getAttribute("data-start")),
+      duration: parseFloat(c.getAttribute("data-duration") || "0"), tag: c.tagName, track: parseInt(c.getAttribute("data-track-index") || "0", 10) }));
+    return { fonts, media, clips, width: window.innerWidth, height: window.innerHeight,
+      fps: parseFloat(root.getAttribute("data-fps") || "30"), bg: getComputedStyle(document.body).backgroundColor,
+      rootBg: getComputedStyle(root).backgroundColor };
+  };
+}
+
+// ---------------------------------------------------------------- drive
+
+const dist = findDist();
+const { serveStaticProjectHtml } = await load(dist, "staticProjectServer-", ["serveStaticProjectHtml"]);
+const { bundleWithLocalizedFonts } = await load(dist, "bundleWithLocalizedFonts-", ["bundleWithLocalizedFonts"]);
+const cap = await load(dist, "captureCompositionFrame-", ["openSettledCompositionPage", "seekCompositionTimeline", "DENSE_GEOMETRY_SEEK_OPTIONS"]);
+
+const dir = resolve(projectDir);
+const html = await bundleWithLocalizedFonts(dir);
+const server = await serveStaticProjectHtml(dir, html, undefined, [], false);
+const started = Date.now();
+let session;
+try {
+  session = await cap.openSettledCompositionPage(html, server.url, {
+    renderReadyTimeoutMs: 45000, renderReadyWarningSuffix: "the probe may be inaccurate",
+  });
+  const { page } = session;
+  await page.evaluate(`(${installScanner.toString()})()`);
+  const statics = await page.evaluate(() => window.__urStatic());
+  const duration = await page.evaluate(() => {
+    const p = window.__player;
+    const d = p && typeof p.getDuration === "function" ? p.getDuration() : 0;
+    if (Number.isFinite(d) && d > 0) return d;
+    const r = document.querySelector("[data-composition-id][data-duration]");
+    return r ? parseFloat(r.getAttribute("data-duration")) : 0;
+  });
+  const fps = parseFloat(opt("--fps", String(statics.fps || 30)));
+  const frames = Math.max(1, Math.round(duration * fps));
+  // Each element keeps change-encoded channels: vis (on/off), g (box, clip, opacity, transform, layout size),
+  // p (paint order), s (box style), t (text). Inlined data (images, fonts) is stored once in blobs.
+  const blobs = {};
+  const blobRef = (src) => {
+    if (typeof src !== "string" || !src.startsWith("data:")) return src;
+    const id = "blob:" + createHash("sha1").update(src).digest("hex").slice(0, 16);
+    if (!blobs[id]) blobs[id] = src;
+    return id;
+  };
+  statics.fonts = statics.fonts.map((f) => ({ ...f, src: blobRef(f.src) }));
+  const CH = {
+    g: (r) => [...r.b, ...r.c, r.o, ...r.m, r.lw, r.lh],
+    p: (r) => [r.pk, r.pkt],
+    s: (r) => ({ box: r.box, bg: r.bg, bgi: r.bgi, rad: r.rad, sh: r.sh, f: r.f || null }),
+    t: (r) => r.t || null,
+  };
+  const elements = {};
+  const last = {};
+  for (let f = 0; f < frames; f++) {
+    const t = f / fps;
+    await cap.seekCompositionTimeline(page, t, { ...cap.DENSE_GEOMETRY_SEEK_OPTIONS, exactTime: true });
+    const els = (await page.evaluate(() => window.__urScan())) || {};
+    for (const [key, e] of Object.entries(els)) {
+      let el = elements[key];
+      if (!el) {
+        el = elements[key] = { sel: e.sel, anc: e.anc, tag: e.tag, id: e.id, cls: e.cls, vis: [], g: [], p: [], s: [], t: [] };
+        last[key] = { vis: 0 };
+      }
+      if (e.rec.media && !el.media) el.media = { ...e.rec.media, src: blobRef(e.rec.media.src) };
+      const L = last[key];
+      if (!L.vis) {
+        el.vis.push([f, 1]);
+        L.vis = 1;
+      }
+      for (const [ch, pick] of Object.entries(CH)) {
+        const v = JSON.stringify(pick(e.rec));
+        if (L[ch] !== v) {
+          el[ch].push([f, JSON.parse(v)]);
+          L[ch] = v;
+        }
+      }
+    }
+    for (const key of Object.keys(last)) {
+      if (last[key].vis && !(key in els)) {
+        elements[key].vis.push([f, 0]);
+        last[key] = { vis: 0 };
+      }
+    }
+    if (f % Math.max(1, Math.round(fps * 5)) === 0) process.stderr.write(`probe ${t.toFixed(1)}s/${duration.toFixed(1)}s\n`);
+  }
+  writeFileSync(outPath, JSON.stringify({
+    probe: 2, hyperframes: versionOf(dist), project: dir, duration, fps, frames, ...statics, elements, blobs,
+    seconds: (Date.now() - started) / 1000,
+  }));
+} finally {
+  await session?.browser?.close().catch(() => {});
+  await server.close();
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.