@marver-design/marver 0.10.0 → 0.10.2

package/dist/{shot-BRgPaFCs.mjs → shot-D7I0MCLu.mjs}

@@ -34,6 +34,29 @@ function findChrome() {
 	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));
+function planShot(frame, viewports) {
+	const cw = typeof frame.contentWidth === "number" && Number.isFinite(frame.contentWidth) && frame.contentWidth > 0 ? frame.contentWidth : void 0;
+	const vpObj = frame.viewport ? viewports[frame.viewport] : void 0;
+	const fallback = viewports.mobile ?? {
+		width: 390,
+		height: 844
+	};
+	if (cw) {
+		const width = clamp(vpObj?.width ?? cw, 320, 1600);
+		return {
+			width,
+			initialHeight: Math.round(width * .75),
+			fullHeight: true
+		};
+	}
+	const vp = vpObj ?? fallback;
+	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. */
@@ -52,24 +75,27 @@ async function shootFrame(opts) {
 		ok: false,
 		error: `unknown frame "${frameId}" - ids are in design/manifest.json`
 	};
-	const vp = viewports[frame.viewport ?? ""] ?? viewports.mobile ?? {
-		width: 390,
-		height: 844
-	};
+	const plan = planShot(frame, viewports);
 	const shotsDir = join(root, "design", ".local", "shots");
 	mkdirSync(shotsDir, { recursive: true });
 	const rel = `design/.local/shots/${slug(frameId)}--${theme}.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: vp.width,
-		height: vp.height,
-		out: join(root, rel)
+		width: plan.width,
+		height: plan.initialHeight,
+		out: join(root, rel),
+		fullHeight: plan.fullHeight
 	});
 	return result.ok ? {
 		ok: true,
 		path: rel,
-		width: vp.width,
-		height: vp.height
+		width: result.width,
+		height: result.height,
+		scale: result.scale,
+		...result.truncated ? {
+			truncated: true,
+			note: result.note
+		} : {}
 	} : result;
 }
 /** One capture at a time: shots are seconds apart at most, and a Chrome per concurrent
@@ -80,7 +106,7 @@ function capture(req) {
 	chain = run;
 	return run;
 }
-async function captureNow({ url, width, height, out, timeoutMs = 3e4 }) {
+async function captureNow({ url, width, height, out, fullHeight = false, timeoutMs = 3e4 }) {
 	const bin = findChrome();
 	if (!bin) return {
 		ok: false,
@@ -172,6 +198,7 @@ async function captureNow({ url, width, height, out, timeoutMs = 3e4 }) {
 				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))]);
 		watchdog = setTimeout(() => {
 			try {
 				chrome.kill("SIGKILL");
@@ -226,9 +253,109 @@ async function captureNow({ url, width, height, out, timeoutMs = 3e4 }) {
 			ok: false,
 			error: `the frame rendered an error - ${frameError}`
 		};
-		const shot = await send("Page.captureScreenshot", { format: "png" }, sessionId);
+		let capW = width, capH = height, scale = 2, truncated = false, note = "";
+		if (fullHeight) {
+			const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+			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 CAP2 = 8192, CAP1 = 16384;
+			const settleDeadline = Date.now() + 6e3;
+			await growFit(2, CAP2, settleDeadline);
+			if (measured > CAP2) {
+				scale = 1;
+				await growFit(1, CAP1, settleDeadline);
+			}
+			const cap = scale === 2 ? CAP2 : CAP1;
+			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);
+			await sendD("Emulation.setDeviceMetricsOverride", {
+				width: capW,
+				height: capH,
+				deviceScaleFactor: scale,
+				mobile: false
+			}, 5e3);
+			if (Date.now() < settleDeadline) {
+				await sendD("Runtime.evaluate", {
+					expression: `window.postMessage({type:'sh:camera',moving:false,scale:1}, location.origin)`,
+					returnByValue: true
+				}).catch(() => null);
+				await wait(300);
+				for (let j = 0; j < 20 && Date.now() < settleDeadline && !await lodIdle(); j++) await wait(100);
+				await sendD("Runtime.evaluate", {
+					expression: "document.fonts.ready.then(()=>true)",
+					awaitPromise: true,
+					returnByValue: true
+				}).catch(() => null);
+			}
+		}
+		const shot = await sendD("Page.captureScreenshot", {
+			format: "png",
+			captureBeyondViewport: true,
+			clip: {
+				x: 0,
+				y: 0,
+				width: capW,
+				height: capH,
+				scale: 1
+			}
+		}, 15e3);
 		writeFileSync(out, Buffer.from(String(shot.data), "base64"));
-		return { ok: true };
+		return {
+			ok: true,
+			width: capW,
+			height: capH,
+			scale,
+			...truncated ? {
+				truncated: true,
+				note
+			} : {}
+		};
 	} catch (err) {
 		return {
 			ok: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marver-design/marver",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "The agent-native design canvas. A design/ folder, one command, a canvas of live frames built from your repo's real components - comment @marver and your own coding agent does the work. The tool ships no AI.",
   "type": "module",
   "private": false,

package/src/client/content/img-lod.ts

@@ -35,6 +35,12 @@ const schedule = (job: () => Promise<void>): void => {
   pump()
 }
 
+// Decode-idle signal for the headless shot: 0 means no decode is running or queued. The shot
+// (src/server/shot.ts) polls this to know each image's first decode has settled - which pins
+// its aspect-ratio and so stabilizes the frame's measured height - before it measures and
+// captures. Harmless and 0 when there are no LOD images (nothing ever decodes).
+if (typeof window !== 'undefined') (window as { __mvLodBusy?: () => number }).__mvLodBusy = () => active + q.length
+
 interface Item { canvas: HTMLCanvasElement; src: string; bucket: number; token: number }
 const items = new Set<Item>()
 let scale = 0.2      // overview default until the shell primes the settled scale on frame-ready

package/src/client/frame-host/bridge.js

@@ -73,7 +73,9 @@ window.addEventListener('message', (e) => {
 })
 
 if (isHtmlFrame) {
-  const ready = () => post({ type: 'sh:ready', id })
+  // stamp the URL revision (see main.tsx) so the shell can drop a ready from a superseded document
+  const gen = new URLSearchParams(location.search).get('r') ?? ''
+  const ready = () => post({ type: 'sh:ready', id, gen })
   document.readyState === 'loading' ? addEventListener('DOMContentLoaded', ready) : ready()
 }
 

package/src/client/frame-host/main.tsx

@@ -77,7 +77,10 @@ async function boot() {
     for (const W of wrappers.reverse()) if (W != null) tree = createElement(W, null, tree)
 
     createRoot(document.getElementById('root')!).render(createElement(Boundary, null, tree))
-    post({ type: 'sh:ready', id, meta: frameMod.meta && typeof frameMod.meta === 'object' ? frameMod.meta : undefined })
+    // stamp the URL revision so the shell can drop a ready queued by a superseded document (one it
+    // auto-renavigated past) - a WindowProxy survives navigation, so a stale ready could otherwise
+    // mark a reloading frame ready. Mirrors the sh:measure generation guard.
+    post({ type: 'sh:ready', id, gen: params.get('r') ?? '', meta: frameMod.meta && typeof frameMod.meta === 'object' ? frameMod.meta : undefined })
   } catch (err) {
     fail((err as Error).message)
   }