@superblocksteam/library 2.0.132 → 2.0.133-next.0

package/dist/lib/index.js

@@ -4493,6 +4493,38 @@ function EditorHotkeys({ children }) {
 //#region src/edit-mode/screenshot-handler.ts
 let cleanupCallback$1 = void 0;
 const MAX_SCREENSHOT_DIMENSION = 2e3 * .98;
+const SCREENSHOT_WEBP_QUALITY = .8;
+const MAX_SCREENSHOT_BYTES = 256 * 1024;
+/** Decreasing webp qualities tried, in order, to fit {@link MAX_SCREENSHOT_BYTES}. */
+const WEBP_QUALITY_LADDER = [
+	.6,
+	.45,
+	.3
+];
+function dataUrlByteLength(dataUrl) {
+	const commaIndex = dataUrl.indexOf(",");
+	const base64 = commaIndex >= 0 ? dataUrl.slice(commaIndex + 1) : dataUrl;
+	if (base64.length === 0) return 0;
+	const padding = base64.endsWith("==") ? 2 : base64.endsWith("=") ? 1 : 0;
+	return Math.floor(base64.length * 3 / 4) - padding;
+}
+async function enforceByteBudget(dataUrl, reencode, options) {
+	const maxBytes = options?.maxBytes ?? 262144;
+	const qualityLadder = options?.qualityLadder ?? WEBP_QUALITY_LADDER;
+	let best = dataUrl;
+	let bestBytes = dataUrlByteLength(best);
+	if (bestBytes <= maxBytes) return best;
+	for (const quality of qualityLadder) {
+		const candidate = await reencode(quality);
+		const candidateBytes = dataUrlByteLength(candidate);
+		if (candidateBytes < bestBytes) {
+			best = candidate;
+			bestBytes = candidateBytes;
+		}
+		if (bestBytes <= maxBytes) break;
+	}
+	return best;
+}
 /**
 * Calculate the scale factor for screenshot capture to keep the output image's
 * longest edge under Anthropic's many-image per-image limit (2000px).
@@ -4531,25 +4563,45 @@ function loadImage(dataUrl) {
 	});
 }
 /**
-* Downscale a data-URL image so that neither dimension exceeds
-* MAX_SCREENSHOT_DIMENSION. Returns the original if already within limits.
+* Re-encode a data-URL image to webp via a canvas, optionally rescaling.
+* `scale` defaults to 1 (recompress at the same dimensions).
 */
-async function ensureWithinDimensionLimit(dataUrl) {
+async function reencodeWebp(dataUrl, { quality, scale = 1 }) {
 	const img = await loadImage(dataUrl);
-	const { naturalWidth: width, naturalHeight: height } = img;
-	const maxDim = Math.max(width, height);
-	if (maxDim <= MAX_SCREENSHOT_DIMENSION) return dataUrl;
-	console.warn(`[Library Screenshot Handler] Output image ${width}x${height} exceeds ${MAX_SCREENSHOT_DIMENSION}px limit, resizing…`);
-	const scale = MAX_SCREENSHOT_DIMENSION / maxDim;
-	const targetWidth = Math.round(width * scale);
-	const targetHeight = Math.round(height * scale);
+	const targetWidth = Math.max(1, Math.round(img.naturalWidth * scale));
+	const targetHeight = Math.max(1, Math.round(img.naturalHeight * scale));
 	const canvas = document.createElement("canvas");
 	canvas.width = targetWidth;
 	canvas.height = targetHeight;
 	const ctx = canvas.getContext("2d");
 	if (!ctx) throw new Error("Canvas 2d context not available");
 	ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
-	return canvas.toDataURL("image/webp", .85);
+	return canvas.toDataURL("image/webp", quality);
+}
+/**
+* Enforce the model's hard limits on a captured screenshot: first the pixel
+* dimension cap (see {@link MAX_SCREENSHOT_DIMENSION}), then the byte budget
+* (oversized payloads stall the plan-generation stream). Returns the original
+* when it already fits both.
+*/
+async function ensureWithinLimits(dataUrl) {
+	const { naturalWidth: width, naturalHeight: height } = await loadImage(dataUrl);
+	const maxDim = Math.max(width, height);
+	let result = dataUrl;
+	if (maxDim > MAX_SCREENSHOT_DIMENSION) {
+		console.warn(`[Library Screenshot Handler] Output image ${width}x${height} exceeds ${MAX_SCREENSHOT_DIMENSION}px limit, resizing…`);
+		result = await reencodeWebp(dataUrl, {
+			quality: SCREENSHOT_WEBP_QUALITY,
+			scale: MAX_SCREENSHOT_DIMENSION / maxDim
+		});
+	}
+	const dimensionCapped = result;
+	const beforeBytes = dataUrlByteLength(dimensionCapped);
+	result = await enforceByteBudget(dimensionCapped, (quality) => reencodeWebp(dimensionCapped, { quality }));
+	const afterBytes = dataUrlByteLength(result);
+	if (afterBytes < beforeBytes) console.warn(`[Library Screenshot Handler] Recompressed screenshot ${(beforeBytes / 1024).toFixed(0)}KB -> ${(afterBytes / 1024).toFixed(0)}KB to fit ${(MAX_SCREENSHOT_BYTES / 1024).toFixed(0)}KB budget`);
+	if (afterBytes > 262144) console.warn(`[Library Screenshot Handler] Could not bring screenshot under ${(MAX_SCREENSHOT_BYTES / 1024).toFixed(0)}KB budget; sending ${(afterBytes / 1024).toFixed(0)}KB`);
+	return result;
 }
 /**
 * Counts loading indicators in the DOM that signal data is still being
@@ -4643,6 +4695,7 @@ function initializeScreenshotHandler() {
 			const dataUrl = await domToWebp(targetElement, {
 				backgroundColor: "#ffffff",
 				scale,
+				quality: SCREENSHOT_WEBP_QUALITY,
 				...selector && { onCloneNode: (cloned) => {
 					if (cloned instanceof HTMLElement) {
 						const computed = getComputedStyle(targetElement);
@@ -4654,8 +4707,8 @@ function initializeScreenshotHandler() {
 				} }
 			});
 			const captureMs = performance.now() - captureStartTime;
-			console.log(`${LOG_PREFIX} domToWebp completed in ${captureMs.toFixed(1)}ms, output size: ${(dataUrl.length / 1024).toFixed(1)}KB`);
-			const safeDataUrl = await ensureWithinDimensionLimit(dataUrl);
+			console.log(`${LOG_PREFIX} domToWebp completed in ${captureMs.toFixed(1)}ms, output size: ${(dataUrlByteLength(dataUrl) / 1024).toFixed(1)}KB`);
+			const safeDataUrl = await ensureWithinLimits(dataUrl);
 			const totalMs = performance.now() - handlerStartTime;
 			console.log(`${LOG_PREFIX} Screenshot captured successfully! Total: ${totalMs.toFixed(1)}ms (import: ${importMs.toFixed(1)}ms, capture: ${captureMs.toFixed(1)}ms)`);
 			editorBridge.sendCaptureScreenshotResponse(callbackId, safeDataUrl);