@marver-design/marver 0.16.1 → 0.17.0

package/dist/shot-z-d-zMzf.mjs

@@ -1,528 +0,0 @@
-import { a as slideSize, i as ROUTE } from "./cli.mjs";
-import { copyFileSync, existsSync, mkdirSync, mkdtempSync, readFileSync, readdirSync, renameSync, rmSync, statSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
-import { randomBytes } from "node:crypto";
-import { tmpdir } from "node:os";
-import { spawn } from "node:child_process";
-//#region src/server/shot.ts
-/**
-* Frame screenshots without a dependency - the system's own Chrome, driven over CDP
-* (Node 22 ships a WebSocket client, so this is ~zero cost).
-*
-* This exists for Live Jam's verify loop: a jam agent has no shell (deliberately - the job
-* packet carries untrusted text), so "look at what you built" must be a capability the dev
-* server provides, not a command the agent runs. The /api/shot endpoint calls this; the
-* `marver shot` CLI and a plain WebFetch both reach that endpoint.
-*
-* Readiness is DETERMINISTIC, not a sleep: poll until #root (or body, for html frames) has
-* children, then wait for fonts. A frame that never mounts fails with the page's own
-* exception text - which is exactly what the agent needs to fix it.
-*/
-const CHROMES = [
-	"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
-	"/Applications/Chromium.app/Contents/MacOS/Chromium",
-	"/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
-	"/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
-	"/usr/bin/google-chrome-stable",
-	"/usr/bin/google-chrome",
-	"/usr/bin/chromium",
-	"/usr/bin/chromium-browser"
-];
-/** The browser binary to drive, or null. MARVER_CHROME overrides; otherwise first known install. */
-function findChrome() {
-	const env = process.env.MARVER_CHROME;
-	if (env) return existsSync(env) ? env : null;
-	return CHROMES.find((p) => existsSync(p)) ?? null;
-}
-const slug = (frameId) => frameId.replace(/\//g, "--");
-const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
-const num = (v) => typeof v === "number" && Number.isFinite(v) && v > 0 ? v : void 0;
-function planShot(frame, viewports, override = {}) {
-	const cw = num(frame.contentWidth);
-	const vpObj = frame.viewport ? viewports[frame.viewport] : void 0;
-	const ow = num(override.w), oh = num(override.h);
-	const sl = slideSize(frame);
-	if (sl) return {
-		width: sl.width,
-		initialHeight: sl.height,
-		fullHeight: false
-	};
-	const fallback = viewports.mobile ?? {
-		width: 390,
-		height: 844
-	};
-	if (cw) {
-		const width = clamp(ow ?? vpObj?.width ?? cw, 320, 1600);
-		return {
-			width,
-			initialHeight: Math.round(width * .75),
-			fullHeight: true
-		};
-	}
-	const vp = vpObj ?? fallback;
-	if (ow || oh) return {
-		width: clamp(ow ?? vp.width, 120, 3840),
-		initialHeight: clamp(oh ?? vp.height, 80, 2160),
-		fullHeight: false
-	};
-	return {
-		width: vp.width,
-		initialHeight: vp.height,
-		fullHeight: false
-	};
-}
-/** Resolve a frame from the manifest and screenshot it - the shared core behind BOTH
-*  transports (the HTTP /api/shot endpoint and the file-drop inbox), so they validate and
-*  name output identically. `origin` is the dev server's own base URL. */
-async function shootFrame(opts) {
-	const { root, viewports, frameId, theme, origin, scale = 2, size } = opts;
-	if (!/^[a-z0-9-]+$/i.test(theme)) return {
-		ok: false,
-		error: "invalid theme"
-	};
-	if (!Number.isInteger(scale) || scale < 1 || scale > 4) return {
-		ok: false,
-		error: "invalid scale"
-	};
-	let manifest = {};
-	try {
-		manifest = JSON.parse(readFileSync(join(root, "design", "manifest.json"), "utf8"));
-	} catch {}
-	const frame = (manifest.frames ?? []).find((f) => f.id === frameId);
-	if (!frame) return {
-		ok: false,
-		error: `unknown frame "${frameId}" - ids are in design/manifest.json`
-	};
-	const plan = planShot(frame, viewports, size);
-	if (frame.kind !== "html") try {
-		const { scanAssetRefs } = await import("./build-B4yPgFNF.mjs");
-		const { ensurePoster } = await import("./poster-CoyobbGW.mjs");
-		const refs = scanAssetRefs(readFileSync(join(root, frame.file), "utf8"), frame.file);
-		for (const r of refs) if (r.endsWith(".poster.png")) await ensurePoster(join(root, "design", "assets"), r.slice(0, -11));
-	} catch {}
-	const shotsDir = join(root, "design", ".local", "shots");
-	mkdirSync(shotsDir, { recursive: true });
-	sweepTemps(shotsDir);
-	const explicit = opts.scale !== void 0;
-	const relFor = (used) => {
-		const tag = !explicit || scale === 2 && used === 2 ? "" : used === scale ? `@${scale}x` : `@${scale}x-as-${used}x`;
-		return `design/.local/shots/${slug(frameId)}--${theme}${tag}.png`;
-	};
-	const tmp = join(shotsDir, `.${slug(frameId)}--${theme}.${randomBytes(6).toString("hex")}.tmp.png`);
-	const result = await capture({
-		url: frame.kind === "html" ? `${origin}/${frame.file}?theme=${encodeURIComponent(theme)}` : `${origin}${ROUTE}/frame/?id=${encodeURIComponent(frameId)}&theme=${encodeURIComponent(theme)}`,
-		width: plan.width,
-		height: plan.initialHeight,
-		out: tmp,
-		fullHeight: plan.fullHeight,
-		scale
-	});
-	if (!result.ok) {
-		rmSync(tmp, { force: true });
-		return result;
-	}
-	const rel = relFor(result.scale);
-	try {
-		try {
-			renameSync(tmp, join(root, rel));
-		} catch (err) {
-			const code = err.code;
-			if (code !== "EEXIST" && code !== "EPERM") throw err;
-			copyFileSync(tmp, join(root, rel));
-		}
-	} catch (err) {
-		return {
-			ok: false,
-			error: `could not write the shot - ${err.message}`
-		};
-	} finally {
-		rmSync(tmp, { force: true });
-	}
-	return {
-		ok: true,
-		path: rel,
-		width: result.width,
-		height: result.height,
-		scale: result.scale,
-		...result.truncated ? { truncated: true } : {},
-		...result.note ? { note: result.note } : {}
-	};
-}
-/** A crashed process can leave a `.tmp.png` behind; sweep them (older than a minute, so an in-
-*  flight capture in this process is never touched) at the next shot. */
-const sweptAt = /* @__PURE__ */ new Map();
-function sweepTemps(dir) {
-	if (Date.now() - (sweptAt.get(dir) ?? 0) < 6e4) return;
-	sweptAt.set(dir, Date.now());
-	try {
-		for (const f of readdirSync(dir)) {
-			if (!f.endsWith(".tmp.png")) continue;
-			const p = join(dir, f);
-			try {
-				if (Date.now() - statSync(p).mtimeMs > 6e4) rmSync(p, { force: true });
-			} catch {}
-		}
-	} catch {}
-}
-/** One capture at a time PER LANE: shots are seconds apart at most, and a Chrome per
-*  concurrent request would stampede the machine mid-jam. Posters have their own lane - a
-*  frame being shot may ask for its poster mid-render, and on the shot's lane that request
-*  would wait for the very shot that is waiting for it. */
-const chains = /* @__PURE__ */ new Map();
-function capture(req, lane = "shot") {
-	const run = (chains.get(lane) ?? Promise.resolve()).then(() => captureNow(req), () => captureNow(req));
-	chains.set(lane, run);
-	return run;
-}
-/** The capture budget. Chrome's surface tops out near 16384 device px per SIDE, and a bitmap is
-*  also bounded by its AREA: 64M device px (~256 MiB RGBA) is comfortably rendered, encoded and
-*  pasted, where a 3840×2160@4 (133M px) can stall the renderer or the paste target. Both limits
-*  are exported so the tests hold the same numbers. */
-const SURFACE = 16384;
-const AREA = 64e6;
-const fits = (w, h, dsf) => w * dsf <= 16384 && h * dsf <= 16384 && w * h * dsf * dsf <= 64e6;
-/** The tallest CSS height a full-height capture of `width` can hold at `dsf`. */
-const capFor = (width, dsf) => Math.max(1, Math.min(Math.floor(SURFACE / dsf), Math.floor(AREA / (width * dsf * dsf))));
-async function captureNow({ url, width, height, out, fullHeight = false, timeoutMs = 3e4, scale: wantScale = 2, clip }) {
-	let scale = Math.min(4, Math.max(1, Math.round(wantScale)));
-	while (scale > 1 && !fits(width, height, scale)) scale--;
-	const bin = findChrome();
-	if (!bin) return {
-		ok: false,
-		error: "no Chrome/Chromium found - install one or set MARVER_CHROME to a browser binary"
-	};
-	const profile = mkdtempSync(join(tmpdir(), "mv-shot-"));
-	const chrome = spawn(bin, [
-		"--headless=new",
-		"--disable-gpu",
-		"--hide-scrollbars",
-		"--no-first-run",
-		"--no-default-browser-check",
-		"--disable-extensions",
-		`--user-data-dir=${profile}`,
-		"--remote-debugging-port=0",
-		"about:blank"
-	], { stdio: [
-		"ignore",
-		"ignore",
-		"pipe"
-	] });
-	let ws = null;
-	let watchdog;
-	try {
-		const wsUrl = await new Promise((resolve, reject) => {
-			let buf = "";
-			const to = setTimeout(() => reject(/* @__PURE__ */ new Error("the browser did not expose devtools in time")), 15e3);
-			chrome.stderr?.on("data", (d) => {
-				buf += d;
-				const m = /DevTools listening on (ws:\/\/\S+)/.exec(buf);
-				if (m) {
-					clearTimeout(to);
-					resolve(m[1]);
-				}
-			});
-			chrome.on("error", (e) => {
-				clearTimeout(to);
-				reject(e);
-			});
-			chrome.on("exit", () => {
-				clearTimeout(to);
-				reject(/* @__PURE__ */ new Error("the browser exited before exposing devtools"));
-			});
-		});
-		ws = new WebSocket(wsUrl);
-		await new Promise((res, rej) => {
-			ws.onopen = () => res();
-			ws.onerror = () => rej(/* @__PURE__ */ new Error("devtools socket failed"));
-		});
-		let seq = 0;
-		const pending = /* @__PURE__ */ new Map();
-		let lastException = "";
-		const failPending = (why) => {
-			for (const [id, cb] of pending) {
-				pending.delete(id);
-				cb({ error: { message: why } });
-			}
-		};
-		ws.onclose = () => failPending("devtools socket closed");
-		ws.onerror = () => failPending("devtools socket error");
-		ws.onmessage = (e) => {
-			let m;
-			try {
-				m = JSON.parse(String(e.data));
-			} catch {
-				return;
-			}
-			if (m.id && pending.has(m.id)) {
-				pending.get(m.id)(m);
-				pending.delete(m.id);
-			}
-			if (m.method === "Runtime.exceptionThrown") {
-				const d = m.params?.exceptionDetails;
-				lastException = String(d?.exception?.description ?? d?.text ?? "").split("\n")[0];
-			}
-		};
-		const send = (method, params = {}, sessionId) => new Promise((res, rej) => {
-			const id = ++seq;
-			pending.set(id, (m) => m.error ? rej(/* @__PURE__ */ new Error(`${method}: ${m.error.message}`)) : res(m.result));
-			try {
-				ws.send(JSON.stringify({
-					id,
-					method,
-					params,
-					sessionId
-				}));
-			} catch (e) {
-				pending.delete(id);
-				rej(e);
-			}
-		});
-		const sendD = (method, params, ms = 1500) => Promise.race([send(method, params, sessionId), new Promise((_, rej) => setTimeout(() => rej(/* @__PURE__ */ new Error(`${method} timed out`)), ms))]);
-		const hardBy = Date.now() + timeoutMs + 15e3;
-		watchdog = setTimeout(() => {
-			try {
-				chrome.kill("SIGKILL");
-			} catch {}
-		}, timeoutMs + 15e3);
-		const RESERVE = 21e3;
-		const discretionary = () => hardBy - RESERVE - Date.now();
-		const { targetId } = await send("Target.createTarget", { url: "about:blank" });
-		const { sessionId } = await send("Target.attachToTarget", {
-			targetId,
-			flatten: true
-		});
-		await send("Emulation.setDeviceMetricsOverride", {
-			width,
-			height,
-			deviceScaleFactor: scale,
-			mobile: false
-		}, sessionId);
-		await send("Page.enable", {}, sessionId);
-		await send("Runtime.enable", {}, sessionId);
-		const nav = await send("Page.navigate", { url }, sessionId);
-		if (nav?.errorText && nav.errorText !== "net::ERR_ABORTED") return {
-			ok: false,
-			error: `could not load the frame (${nav.errorText}) - is the dev server reachable at ${new URL(url).origin}?`
-		};
-		const t0 = Date.now();
-		let ready = false;
-		while (Date.now() - t0 < timeoutMs) {
-			if ((await send("Runtime.evaluate", {
-				expression: `(() => { const el = document.getElementById('root') ?? document.body; return !!el && el.childElementCount > 0 && document.readyState !== 'loading' })()`,
-				returnByValue: true
-			}, sessionId).catch(() => null))?.result?.value) {
-				ready = true;
-				break;
-			}
-			await new Promise((r2) => setTimeout(r2, 150));
-		}
-		if (!ready) return {
-			ok: false,
-			error: `the frame never rendered${lastException ? ` - the page threw: ${lastException}` : " (no exception surfaced - is the dev server reachable from this machine?)"}`
-		};
-		const SETTLED = `(() => {
-      if (typeof window.__mvLodBusy === 'function' && window.__mvLodBusy() > 0) return false
-      if (typeof window.__mvPosterBusy === 'function' && window.__mvPosterBusy() > 0) return false
-      const H = window.innerHeight, W = window.innerWidth
-      for (const im of document.images) {
-        if (im.complete) continue
-        const r = im.getBoundingClientRect()
-        if (r.bottom < 0 || r.top > H || r.right < 0 || r.left > W) continue
-        return false
-      }
-      for (const c of document.querySelectorAll('.mv-chart')) if (!c.querySelector('svg, canvas')) return false
-      for (const d of document.querySelectorAll('.mv-diagram')) if (!d.querySelector('.mv-diagram-svg svg, .mv-diagram-err')) return false
-      return true
-    })()`;
-		const wait = (ms) => new Promise((r) => setTimeout(r, ms));
-		const settle = async (budgetMs) => {
-			const total = Math.min(budgetMs, discretionary());
-			if (total <= 0) return false;
-			const by = Date.now() + total;
-			const left = () => Math.max(1, by - Date.now());
-			await sendD("Runtime.evaluate", {
-				expression: `window.postMessage({type:'sh:camera',moving:false,scale:1}, location.origin)`,
-				returnByValue: true
-			}, left()).catch(() => null);
-			await sendD("Runtime.evaluate", {
-				expression: "document.fonts.ready.then(() => true)",
-				awaitPromise: true,
-				returnByValue: true
-			}, left()).catch(() => null);
-			let ok = false;
-			while (Date.now() < by) {
-				if ((await sendD("Runtime.evaluate", {
-					expression: SETTLED,
-					returnByValue: true
-				}, left()).catch(() => null))?.result?.value === true) {
-					ok = true;
-					break;
-				}
-				await wait(Math.min(100, left()));
-			}
-			if (Date.now() < by) await sendD("Runtime.evaluate", {
-				expression: "new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r(true))))",
-				awaitPromise: true,
-				returnByValue: true
-			}, Math.min(1e3, left())).catch(() => null);
-			if (Date.now() < by) await wait(Math.min(ok ? 150 : 250, left()));
-			return ok;
-		};
-		await settle(3e3);
-		const errEval = await send("Runtime.evaluate", {
-			expression: "window.__mvFrameError || \"\"",
-			returnByValue: true
-		}, sessionId).catch(() => null);
-		const frameError = typeof errEval?.result?.value === "string" ? errEval.result.value : "";
-		if (frameError) return {
-			ok: false,
-			error: `the frame rendered an error - ${frameError}`
-		};
-		let capW = width, capH = height, truncated = false, note = "";
-		if (fullHeight) {
-			const measureH = async () => {
-				const v = (await sendD("Runtime.evaluate", {
-					expression: `Math.ceil((document.querySelector('.mv-doc')||document.getElementById('root')||document.body).getBoundingClientRect().height)`,
-					returnByValue: true
-				}).catch(() => null))?.result?.value;
-				return typeof v === "number" && Number.isFinite(v) ? v : 0;
-			};
-			const lodIdle = async () => {
-				const v = (await sendD("Runtime.evaluate", {
-					expression: `(typeof window.__mvLodBusy==='function')?window.__mvLodBusy():0`,
-					returnByValue: true
-				}).catch(() => null))?.result?.value;
-				return typeof v === "number" ? v === 0 : true;
-			};
-			let measured = 0;
-			const growFit = async (dsf, capCss, deadline) => {
-				let h = Math.max(height, 2e3), prev = -1;
-				for (let i = 0; i < 8 && Date.now() < deadline; i++) {
-					await sendD("Emulation.setDeviceMetricsOverride", {
-						width,
-						height: Math.min(h, capCss),
-						deviceScaleFactor: dsf,
-						mobile: false
-					}).catch(() => {});
-					if (Date.now() >= deadline) break;
-					await sendD("Runtime.evaluate", {
-						expression: "document.fonts.ready.then(()=>true)",
-						awaitPromise: true,
-						returnByValue: true
-					}).catch(() => null);
-					if (Date.now() >= deadline) break;
-					for (let j = 0; j < 10 && Date.now() < deadline && !await lodIdle(); j++) await wait(100);
-					if (Date.now() >= deadline) break;
-					await wait(150);
-					if (Date.now() >= deadline) break;
-					const m = await measureH();
-					if (m > 0) measured = m;
-					const capped = Math.min(h, capCss);
-					if (capped >= capCss) break;
-					if (m > 0 && m <= capped && m === prev) break;
-					prev = m;
-					h = Math.max(m, capped);
-				}
-			};
-			const settleDeadline = Date.now() + Math.max(0, Math.min(6e3, discretionary()));
-			const asked = scale;
-			await growFit(scale, capFor(width, scale), settleDeadline);
-			if (measured > capFor(width, scale) && scale > 2) {
-				scale = 2;
-				await growFit(2, capFor(width, 2), settleDeadline);
-			}
-			if (measured > capFor(width, scale) && scale > 1) {
-				scale = 1;
-				await growFit(1, capFor(width, 1), settleDeadline);
-			}
-			const cap = capFor(width, scale);
-			capW = width;
-			if (measured > cap) {
-				capH = cap;
-				truncated = true;
-				note = `frame is ${measured}px tall; captured the top ${cap}px - split it or reduce its height`;
-			} else capH = clamp(measured || height, 80, cap);
-			if (scale < asked && !truncated) note = `frame is ${measured}px tall - too tall for ${asked}x, captured at ${scale}x`;
-			await sendD("Emulation.setDeviceMetricsOverride", {
-				width: capW,
-				height: capH,
-				deviceScaleFactor: scale,
-				mobile: false
-			}, 5e3);
-			await wait(Math.min(300, Math.max(0, discretionary())));
-			await settle(Math.max(1200, settleDeadline - Date.now()));
-			const m2 = await measureH();
-			if (m2 > capH) {
-				if (m2 <= cap) capH = m2;
-				else {
-					capH = cap;
-					truncated = true;
-					note = `frame is ${m2}px tall; captured the top ${cap}px - split it or reduce its height`;
-				}
-				await sendD("Emulation.setDeviceMetricsOverride", {
-					width: capW,
-					height: capH,
-					deviceScaleFactor: scale,
-					mobile: false
-				}, 5e3);
-				await settle(600);
-			}
-		}
-		let capX = 0, capY = 0;
-		if (clip) {
-			const box = (await sendD("Runtime.evaluate", {
-				expression: `(() => { const el = document.querySelector(${JSON.stringify(clip)}); if (!el) return null; const b = el.getBoundingClientRect(); return { x: b.x, y: b.y, w: b.width, h: b.height } })()`,
-				returnByValue: true
-			}, 2e3).catch(() => null))?.result?.value;
-			if (!box || box.w < 1 || box.h < 1) return {
-				ok: false,
-				error: `nothing to capture at "${clip}"`
-			};
-			capX = Math.max(0, Math.floor(box.x));
-			capY = Math.max(0, Math.floor(box.y));
-			capW = Math.max(1, Math.round(box.w));
-			capH = Math.max(1, Math.round(box.h));
-		}
-		const shot = await sendD("Page.captureScreenshot", {
-			format: "png",
-			captureBeyondViewport: true,
-			clip: {
-				x: capX,
-				y: capY,
-				width: capW,
-				height: capH,
-				scale: 1
-			}
-		}, 15e3);
-		writeFileSync(out, Buffer.from(String(shot.data), "base64"));
-		return {
-			ok: true,
-			width: capW,
-			height: capH,
-			scale,
-			...truncated ? { truncated: true } : {},
-			...note ? { note } : {}
-		};
-	} catch (err) {
-		return {
-			ok: false,
-			error: err.message
-		};
-	} finally {
-		if (watchdog) clearTimeout(watchdog);
-		try {
-			ws?.close();
-		} catch {}
-		chrome.kill("SIGKILL");
-		chrome.once("exit", () => {
-			try {
-				rmSync(profile, {
-					recursive: true,
-					force: true
-				});
-			} catch {}
-		});
-	}
-}
-//#endregion
-export { capture, findChrome, shootFrame };