@superblocksteam/library 2.0.167-next.0 → 2.0.168-next.0

package/dist/lib/index.js

@@ -1,8 +1,8 @@
 import { n as consoleLogAttributes, t as LibraryEarlyConsoleBuffer } from "../early-console-buffer-DMR1SCsN.js";
-import { C as iframeMessageHandler, E as isEditMode, S as getParentOrigin, T as sendMessageImmediately, _ as generateId, a as tracker, b as editorBridge, c as resolveById, d as useSuperblocksContext, f as useSuperblocksDataTags, g as embedStore, h as useSuperblocksUser, i as getContextFromTraceHeaders, l as SuperblocksContextProvider, m as useSuperblocksProfiles, n as root_store_default, o as addNewPromise, p as useSuperblocksGroups, r as createIframeSpan, s as rejectById, t as ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG, u as getAppMode, v as sendNotification, w as isEmbeddedBySuperblocksFirstParty, x as getEditStore, y as colors } from "../root-store-BYYXPQRA.js";
+import { C as iframeMessageHandler, E as isEditMode, S as getParentOrigin, T as sendMessageImmediately, _ as generateId, a as tracker, b as editorBridge, c as resolveById, d as useSuperblocksContext, f as useSuperblocksDataTags, g as embedStore, h as useSuperblocksUser, i as getContextFromTraceHeaders, l as SuperblocksContextProvider, m as useSuperblocksProfiles, n as root_store_default, o as addNewPromise, p as useSuperblocksGroups, r as createIframeSpan, s as rejectById, t as ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG, u as getAppMode, v as sendNotification, w as isEmbeddedBySuperblocksFirstParty, x as getEditStore, y as colors } from "../root-store-B4NzJHt8.js";
 import { n as initTracerProviderWithOrigin } from "../utils-DXaAwgS_.js";
-import { r as updateSdkApiSourceCode, t as discoverAndRegisterSdkApis } from "../sdk-api-discovery-DvvsdT1z.js";
-import { a as FixWithClarkButton, c as ErrorContent, d as ErrorMessage$1, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, l as ErrorDetails, m as ErrorTitle, n as useJSXContext, o as ActionsContainer, p as ErrorSummary, r as getWidgetAnchorName, s as ErrorContainer, u as ErrorIconContainer } from "../jsx-wrapper-1kyr6-x3.js";
+import { r as updateSdkApiSourceCode, t as discoverAndRegisterSdkApis } from "../sdk-api-discovery-D6Xp39R4.js";
+import { a as FixWithClarkButton, c as ErrorContent, d as ErrorMessage$1, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, l as ErrorDetails, m as ErrorTitle, n as useJSXContext, o as ActionsContainer, p as ErrorSummary, r as getWidgetAnchorName, s as ErrorContainer, u as ErrorIconContainer } from "../jsx-wrapper-CcDmmMUB.js";
 import { PropsCategory } from "@superblocksteam/library-shared/props";
 import { action, computed, makeAutoObservable, makeObservable, observable, reaction, when } from "mobx";
 import { UNSAFE_DataRouterContext, generatePath, useLocation, useNavigate, useParams, useRouteError } from "react-router";
@@ -2389,6 +2389,7 @@ var OperationAPI = class {
 	asyncSocket = new AsyncSocket();
 	isocket = null;
 	applicationId;
+	socketPath = "/sb-updates";
 	connectionGeneration = 0;
 	currentAuthorization;
 	currentAuthorizationAllowsLegacy = false;
@@ -2399,12 +2400,14 @@ var OperationAPI = class {
 	* @throws {Error} if the websocket connection can't be initiated within the
 	* retry budget (RETRY_BUDGET_MS of backoff retries)
 	*/
-	async connect({ peerId, userId, authorization, applicationId, traceContext, connectionType, connectionTarget, connectionStartTime, isRetry }) {
+	async connect({ peerId, userId, authorization, applicationId, traceContext, connectionType, connectionTarget, connectionStartTime, isRetry, socketPath = "/sb-updates" }) {
+		if (socketPath !== "/sb-updates" && socketPath !== "/sb-dev-updates") throw new Error("Unsupported dev server socket path");
 		if (!isRetry) {
 			this.retryAttempts = 0;
 			this.retryWindowStartMs = Date.now();
 		}
 		this.applicationId = applicationId;
+		this.socketPath = socketPath;
 		if (this.currentAuthorization && !this.currentAuthorizationAllowsLegacy && !isDevServerAuthorization(this.currentAuthorization, applicationId)) this.currentAuthorization = void 0;
 		if (shouldUseAuthorizationCandidate(this.currentAuthorization, authorization, applicationId)) {
 			this.currentAuthorization = authorization;
@@ -2419,6 +2422,7 @@ var OperationAPI = class {
 		}
 		try {
 			const result = await connectSocket(this.serverUrl, {
+				socketPath,
 				peerId,
 				userId,
 				getAuthorization: () => this.currentAuthorization,
@@ -2643,6 +2647,7 @@ var OperationAPI = class {
 			return;
 		}
 		await this.connect({
+			socketPath: this.socketPath,
 			peerId,
 			userId,
 			authorization: this.currentAuthorization,
@@ -2679,9 +2684,9 @@ function startSocketHeartbeat(socket, isCurrentConnection, onAuthorizationFailur
 		clearTimeout(timeoutId);
 	};
 }
-async function connectSocket(serverUrl, { peerId, userId, applicationId, getAuthorization, onClose, isCurrentConnection, onAuthorizationFailure, onAuthorizationSuccess, traceContext, connectionType, connectionTarget, connectionStartTime }) {
+async function connectSocket(serverUrl, { socketPath, peerId, userId, applicationId, getAuthorization, onClose, isCurrentConnection, onAuthorizationFailure, onAuthorizationSuccess, traceContext, connectionType, connectionTarget, connectionStartTime }) {
 	if (!serverUrl) return;
-	const wsUrl = new URL("/sb-updates", serverUrl);
+	const wsUrl = new URL(socketPath, serverUrl);
 	wsUrl.searchParams.set("peerId", peerId);
 	if (userId) wsUrl.searchParams.set("userId", userId);
 	wsUrl.searchParams.set("applicationId", applicationId);
@@ -4004,9 +4009,133 @@ function installEditModeErrorCapture(deps = {}) {
 	};
 }
 //#endregion
+//#region src/edit-mode/uncaptured-images.ts
+/** modern-screenshot's own default placeholder: a 1x1 transparent GIF. */
+const TRANSPARENT_PLACEHOLDER = "data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+/** Sizes in captured pixels, so stripes and label look the same at any scale. */
+const STRIPE_PERIOD_PX = 12;
+const LABEL_FONT_PX = 11;
+/** Rendered width of the label in em at this weight, with some margin. */
+const LABEL_WIDTH_EM = 10.5;
+function labelFits({ width, height }, scale) {
+	return width * scale >= LABEL_FONT_PX * LABEL_WIDTH_EM && height * scale >= LABEL_FONT_PX * 2;
+}
+const round = (value) => Math.round(value * 100) / 100;
+/**
+* Drawn at the box's own CSS size so the stripes stay coarse enough to see on
+* a small image; a larger `<img>` sharing the URL scales it up to cover.
+*/
+function uncapturedPlaceholder(box, options) {
+	const width = round(box.width);
+	const height = round(box.height);
+	const period = round(STRIPE_PERIOD_PX / options.scale);
+	const fontSize = round(LABEL_FONT_PX / options.scale);
+	const label = options.label ? `<text x="50%" y="50%" font-family="sans-serif" font-size="${fontSize}" font-weight="600" fill="#52525b" text-anchor="middle" dominant-baseline="middle">Image not captured</text>` : "";
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid slice"><defs><pattern id="h" width="${period}" height="${period}" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="${period}" height="${period}" fill="#f4f4f5"/><rect width="${round(period / 2)}" height="${period}" fill="#d4d4d8"/></pattern></defs><rect width="100%" height="100%" fill="url(#h)"/>` + label + `</svg>`;
+	return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+/**
+* Covers everything modern-screenshot clones: the root itself, open shadow
+* roots, and same-origin iframes.
+*/
+function collectImages(root, images = []) {
+	for (const el of [root, ...Array.from(root.querySelectorAll("*"))]) {
+		if (el.tagName === "IMG") images.push(el);
+		if (el.shadowRoot) for (const child of Array.from(el.shadowRoot.children)) collectImages(child, images);
+		if (el.tagName === "IFRAME") {
+			let body;
+			try {
+				body = el.contentDocument?.body;
+			} catch {}
+			if (body) collectImages(body, images);
+		}
+	}
+	return images;
+}
+/** Strict overlap: an image that only touches the crop's edge is not in it. */
+function overlaps(box, crop) {
+	return box.left < crop.x + crop.width && box.left + box.width > crop.x && box.top < crop.y + crop.height && box.top + box.height > crop.y;
+}
+/**
+* modern-screenshot fetches each URL once, so every `<img>` sharing a URL gets
+* the same placeholder; the smallest box decides whether it fits a label.
+*
+* With a `crop`, the page is rendered whole and then cropped, so an image
+* can be hatched yet absent from the result. Each URL records whether any of
+* its boxes lands inside the crop; positions are taken relative to the root,
+* the space the crop is in. An image inside a same-origin iframe is laid out
+* in the iframe's own space and is treated as inside rather than hidden.
+*/
+function collectRenderedBoxes(root, crop) {
+	const boxes = /* @__PURE__ */ new Map();
+	const rootRect = crop ? root.getBoundingClientRect() : void 0;
+	for (const img of collectImages(root)) {
+		if (!img.complete || img.naturalWidth === 0) continue;
+		const rect = img.getBoundingClientRect();
+		const { width, height } = rect;
+		if (width === 0 || height === 0) continue;
+		const inCrop = !crop || !rootRect || img.ownerDocument !== root.ownerDocument || overlaps({
+			left: rect.left - rootRect.left,
+			top: rect.top - rootRect.top,
+			width,
+			height
+		}, crop);
+		for (const src of new Set([img.currentSrc, img.src])) {
+			if (!src) continue;
+			const known = boxes.get(src);
+			const smaller = !known || width * height < known.size.width * known.size.height;
+			boxes.set(src, {
+				size: smaller ? {
+					width,
+					height
+				} : known.size,
+				inCrop: inCrop || (known?.inCrop ?? false)
+			});
+		}
+	}
+	return boxes;
+}
+/**
+* Only `<img>` elements the page displayed are counted and hatched. CSS
+* backgrounds and SVG `<image>` elements stay transparent and uncounted
+* because the capture gives no way to tell whether the page displayed them,
+* and counting a broken one would tell the agent to ignore a real bug.
+*/
+function createUncapturedImageTracker(root, options) {
+	let renderedBoxes;
+	let count = 0;
+	return {
+		placeholderImage(cloned) {
+			if (!cloned || !("currentSrc" in cloned)) return TRANSPARENT_PLACEHOLDER;
+			renderedBoxes ??= collectRenderedBoxes(root, options.crop);
+			const rendered = renderedBoxes.get(cloned.currentSrc || cloned.src);
+			if (!rendered) return TRANSPARENT_PLACEHOLDER;
+			const box = rendered.size;
+			if (rendered.inCrop) count++;
+			return uncapturedPlaceholder(box, {
+				label: options.labelPlaceholders && labelFits(box, options.scale),
+				scale: options.scale
+			});
+		},
+		/** Distinct image URLs that were hatched inside the captured area. */
+		get count() {
+			return count;
+		}
+	};
+}
+//#endregion
 //#region src/edit-mode/screenshot-handler.ts
 let cleanupCallback$1 = void 0;
-const MAX_SCREENSHOT_DIMENSION = 1568;
+const MAX_SCREENSHOT_DIMENSION_HIGH = 1568;
+const MAX_SCREENSHOT_DIMENSION_LOW = 504;
+/**
+* Resolve a {@link ScreenshotDetail} tier to its max-dimension ceiling. Both
+* tiers are hard caps -- there is no path past MAX_SCREENSHOT_DIMENSION_HIGH
+* regardless of what a caller requests.
+*/
+function resolveMaxDimension(detail) {
+	return detail === "high" ? MAX_SCREENSHOT_DIMENSION_HIGH : MAX_SCREENSHOT_DIMENSION_LOW;
+}
 const SCREENSHOT_WEBP_QUALITY = .8;
 const MAX_SCREENSHOT_BYTES = 256 * 1024;
 /** Decreasing webp qualities tried, in order, to fit {@link MAX_SCREENSHOT_BYTES}. */
@@ -4026,10 +4155,10 @@ const CHECKPOINT_MAX_PIXEL_RATIO = 2;
 * width resolution, because the cap applies to the longest edge. Cropping the
 * capture to the visible area would lift that.
 */
-function screenshotLimits(purpose) {
+function screenshotLimits(purpose, detail) {
 	if (purpose !== "checkpoint") return {
 		maxBytes: MAX_SCREENSHOT_BYTES,
-		maxDimension: MAX_SCREENSHOT_DIMENSION,
+		maxDimension: resolveMaxDimension(detail),
 		pixelRatio: 1,
 		qualityLadder: WEBP_QUALITY_LADDER
 	};
@@ -4070,13 +4199,113 @@ async function enforceByteBudget(dataUrl, reencode, options) {
 * (for the model, Anthropic's many-image per-image limit of 2000px).
 */
 function calculateScreenshotScale(elementWidth, elementHeight, limits = {
-	maxDimension: MAX_SCREENSHOT_DIMENSION,
+	maxDimension: MAX_SCREENSHOT_DIMENSION_HIGH,
 	pixelRatio: 1
 }) {
 	const maxOutputDim = Math.max(elementWidth, elementHeight);
 	return Math.min(limits.pixelRatio, limits.maxDimension / maxOutputDim);
 }
 /**
+* Clamp a requested capture rectangle (`region`, APPS-5714) to the actual
+* full-image bounds. A rectangle that starts or extends past the full image
+* is shifted/truncated to fit inside it, rather than producing an invalid
+* crop; the result never collapses below 1x1.
+*/
+function clampRegionToBounds(fullWidth, fullHeight, region) {
+	const x = Math.min(Math.max(0, region.x), Math.max(0, fullWidth - 1));
+	const y = Math.min(Math.max(0, region.y), Math.max(0, fullHeight - 1));
+	return {
+		x,
+		y,
+		width: Math.max(1, Math.min(region.width, fullWidth - x)),
+		height: Math.max(1, Math.min(region.height, fullHeight - y))
+	};
+}
+/**
+* Decide which capture mode wins and, for every mode but "selector", the
+* crop rectangle to apply to a full-page capture (APPS-5714).
+*
+* Precedence when a caller sets more than one of `selector`/`region`/
+* `fullPage`: selector > region > fullPage > the viewport-bound default. The
+* server tool's Zod schema is where a caller gets a real validation error for
+* setting more than one -- this resolves deterministically rather than
+* erroring, since the browser side has no channel back to the caller for
+* that kind of error.
+*
+* The viewport-bound default crops from the caller's current scroll
+* position, not the top of the page -- otherwise a scrolled preview would
+* silently show the wrong content for the cheapest, most common capture.
+*
+* Also decides `renderScale`: the scale to render the whole page at so
+* `crop` comes out at the target resolution directly, instead of always
+* rendering at native (1) and cropping/downscaling afterward. Computing
+* this from `crop` rather than the full page means the common cases
+* (default viewport, fullPage, most regions) render the page already
+* downscaled -- only a crop that itself needs more detail than a
+* downscaled render could provide still renders at native.
+*/
+function resolveCaptureMode(params, fullPageDimensions, viewportDimensions, limits) {
+	if (params.selector) return { mode: "selector" };
+	let mode;
+	let crop;
+	if (params.region) {
+		mode = "region";
+		crop = clampRegionToBounds(fullPageDimensions.width, fullPageDimensions.height, params.region);
+	} else if (params.fullPage) {
+		mode = "fullPage";
+		crop = {
+			x: 0,
+			y: 0,
+			width: fullPageDimensions.width,
+			height: fullPageDimensions.height
+		};
+	} else {
+		mode = "viewport";
+		crop = clampRegionToBounds(fullPageDimensions.width, fullPageDimensions.height, {
+			x: viewportDimensions.scrollX,
+			y: viewportDimensions.scrollY,
+			width: viewportDimensions.width,
+			height: viewportDimensions.height
+		});
+	}
+	return {
+		mode,
+		crop,
+		renderScale: calculateScreenshotScale(crop.width, crop.height, limits)
+	};
+}
+/**
+* One line of capture geometry for logs. A failure inside the render or crop
+* otherwise reports only an error message, with nothing to say which mode,
+* crop or scale was in play.
+*/
+function describeCaptureForLog(capture) {
+	const parts = [];
+	if (capture.mode) parts.push(`mode=${capture.mode}`);
+	if (capture.pageWidth !== void 0 && capture.pageHeight !== void 0) parts.push(`page=${capture.pageWidth}x${capture.pageHeight}`);
+	if (capture.crop) {
+		const { x, y, width, height } = capture.crop;
+		parts.push(`crop=${width}x${height}@(${x},${y})`);
+	}
+	if (capture.renderScale !== void 0) parts.push(`renderScale=${capture.renderScale.toFixed(2)}`);
+	return parts.length > 0 ? parts.join(", ") : "geometry not resolved yet";
+}
+/**
+* Measure the root in the same coordinate space domToWebp renders it in:
+* modern-screenshot sizes its bitmap from the node's getBoundingClientRect()
+* when no explicit width/height is passed. Crop rectangles and the
+* pageWidth/pageHeight reported to the model must use this space, not the
+* document's scroll extent -- otherwise a crop computed against a larger
+* extent reads past the rendered image and comes back blank or shifted.
+*/
+function measureCaptureRootDimensions(rootElement) {
+	const { width, height } = rootElement.getBoundingClientRect();
+	return {
+		width,
+		height
+	};
+}
+/**
 * Measure the full content dimensions for a target element, accounting for
 * cases where scrolling happens in a nested child rather than the target
 * itself. When the target is the root element its own scrollHeight may only
@@ -4122,8 +4351,30 @@ async function reencodeWebp(dataUrl, { quality, scale = 1 }) {
 	return canvas.toDataURL("image/webp", quality);
 }
 /**
+* Crop a source image to a rectangle and rescale in one pass, via the
+* 9-argument canvas `drawImage` source+dest rectangle form (APPS-5714).
+*
+* `modern-screenshot` has no crop/clip concept of its own -- its `width`/
+* `height` options force the target node's own CSS size before rendering,
+* which reflows the page rather than cropping it -- so this is built on top,
+* the same way {@link reencodeWebp} builds a resize on top of a plain canvas
+* redraw.
+*/
+async function cropAndScale(dataUrl, crop, { quality, scale = 1 }) {
+	const img = await loadImage(dataUrl);
+	const destWidth = Math.max(1, Math.round(crop.width * scale));
+	const destHeight = Math.max(1, Math.round(crop.height * scale));
+	const canvas = document.createElement("canvas");
+	canvas.width = destWidth;
+	canvas.height = destHeight;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Canvas 2d context not available");
+	ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, destWidth, destHeight);
+	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
+* dimension cap (see {@link resolveMaxDimension}), then the byte budget
 * (oversized payloads stall the plan-generation stream). Returns the original
 * when it already fits both.
 */
@@ -4211,18 +4462,24 @@ function initializeScreenshotHandler() {
 	const handleCaptureScreenshot = async ({ data }) => {
 		const handlerStartTime = performance.now();
 		const LOG_PREFIX = "[Library Screenshot Handler]";
-		const { callbackId, purpose, selector } = data.payload;
-		const limits = screenshotLimits(purpose);
-		console.log(`${LOG_PREFIX} Received capture request, callbackId=${callbackId}${selector ? `, selector="${selector}"` : ""}`);
+		const { callbackId, purpose, selector, region, fullPage, detail } = data.payload;
+		const limits = screenshotLimits(purpose, detail);
+		console.log(`${LOG_PREFIX} Received capture request, callbackId=${callbackId}${selector ? `, selector="${selector}"` : ""}${region ? `, region=${JSON.stringify(region)}` : ""}${fullPage ? `, fullPage=true` : ""}${detail ? `, detail="${detail}"` : ""}`);
+		let mode;
+		let pageWidth;
+		let pageHeight;
+		let capturedArea;
+		let capturedRenderScale;
 		try {
 			const importStartTime = performance.now();
-			const { domToWebp } = await import("modern-screenshot");
+			const { createContext, domToWebp } = await import("modern-screenshot");
 			const importMs = performance.now() - importStartTime;
 			console.log(`${LOG_PREFIX} Dynamic import of modern-screenshot took ${importMs.toFixed(1)}ms`);
 			const rootElement = document.getElementById("root");
 			if (!rootElement) throw new Error("Root element not found");
-			let targetElement = rootElement;
-			let targetLabel = "root";
+			let dataUrl;
+			let captureMs;
+			let uncapturedImageTracker;
 			if (selector) {
 				const matched = rootElement.querySelector(selector);
 				const selectorError = !matched ? `Selector "${selector}" did not match any element` : matched.offsetWidth === 0 || matched.offsetHeight === 0 ? `Selector "${selector}" matched an element with no visible dimensions (${matched.offsetWidth}x${matched.offsetHeight})` : null;
@@ -4231,38 +4488,106 @@ function initializeScreenshotHandler() {
 					editorBridge.sendCaptureScreenshotResponse(callbackId, void 0, selectorError);
 					return;
 				}
-				targetElement = matched;
-				targetLabel = `"${selector}"`;
-				console.log(`${LOG_PREFIX} Selector "${selector}" matched element (${matched.offsetWidth}x${matched.offsetHeight})`);
-			}
-			const { width: elementWidth, height: elementHeight } = measureContentDimensions(targetElement, rootElement);
-			const scale = calculateScreenshotScale(elementWidth, elementHeight, limits);
-			const captureStartTime = performance.now();
-			console.log(`${LOG_PREFIX} Starting domToWebp capture of ${targetLabel} (element: ${elementWidth}x${elementHeight}, scale: ${scale.toFixed(2)}, output: ~${Math.round(elementWidth * scale)}x${Math.round(elementHeight * scale)})...`);
-			const dataUrl = await domToWebp(targetElement, {
-				backgroundColor: "#ffffff",
-				scale,
-				quality: SCREENSHOT_WEBP_QUALITY,
-				...selector && { onCloneNode: (cloned) => {
-					if (cloned instanceof HTMLElement) {
-						const computed = getComputedStyle(targetElement);
-						for (let i = 0; i < computed.length; i++) {
-							const prop = computed[i];
-							cloned.style.setProperty(prop, computed.getPropertyValue(prop));
+				const targetElement = matched;
+				mode = "selector";
+				const { width: elementWidth, height: elementHeight } = measureContentDimensions(targetElement, rootElement);
+				const scale = calculateScreenshotScale(elementWidth, elementHeight, limits);
+				const uncapturedImages = createUncapturedImageTracker(targetElement, {
+					labelPlaceholders: purpose !== "checkpoint",
+					scale
+				});
+				uncapturedImageTracker = uncapturedImages;
+				const captureStartTime = performance.now();
+				console.log(`${LOG_PREFIX} Starting domToWebp capture of "${selector}" (element: ${elementWidth}x${elementHeight}, scale: ${scale.toFixed(2)}, output: ~${Math.round(elementWidth * scale)}x${Math.round(elementHeight * scale)})...`);
+				const context = await createContext(targetElement, {
+					type: "image/webp",
+					autoDestruct: true,
+					backgroundColor: "#ffffff",
+					scale,
+					quality: SCREENSHOT_WEBP_QUALITY,
+					onCloneNode: (cloned) => {
+						if (cloned instanceof HTMLElement) {
+							const computed = getComputedStyle(targetElement);
+							for (let i = 0; i < computed.length; i++) {
+								const prop = computed[i];
+								cloned.style.setProperty(prop, computed.getPropertyValue(prop));
+							}
 						}
 					}
-				} }
-			});
-			const captureMs = performance.now() - captureStartTime;
-			console.log(`${LOG_PREFIX} domToWebp completed in ${captureMs.toFixed(1)}ms, output size: ${(dataUrlByteLength(dataUrl) / 1024).toFixed(1)}KB`);
+				});
+				context.fetch.placeholderImage = uncapturedImages.placeholderImage;
+				dataUrl = await domToWebp(context);
+				captureMs = performance.now() - captureStartTime;
+				console.log(`${LOG_PREFIX} domToWebp completed in ${captureMs.toFixed(1)}ms, output size: ${(dataUrlByteLength(dataUrl) / 1024).toFixed(1)}KB`);
+			} else {
+				const { width: measuredPageWidth, height: measuredPageHeight } = measureCaptureRootDimensions(rootElement);
+				pageWidth = measuredPageWidth;
+				pageHeight = measuredPageHeight;
+				const resolved = resolveCaptureMode({
+					region,
+					fullPage
+				}, {
+					width: pageWidth,
+					height: pageHeight
+				}, {
+					width: window.innerWidth,
+					height: window.innerHeight,
+					scrollX: window.scrollX,
+					scrollY: window.scrollY
+				}, limits);
+				mode = resolved.mode;
+				const crop = resolved.crop;
+				capturedArea = crop;
+				const renderScale = resolved.renderScale;
+				capturedRenderScale = renderScale;
+				const uncapturedImages = createUncapturedImageTracker(rootElement, {
+					labelPlaceholders: purpose !== "checkpoint",
+					scale: renderScale,
+					crop
+				});
+				uncapturedImageTracker = uncapturedImages;
+				const captureStartTime = performance.now();
+				console.log(`${LOG_PREFIX} Starting full-page domToWebp capture (mode=${mode}, page: ${pageWidth}x${pageHeight}, crop: ${crop.width}x${crop.height} @ (${crop.x},${crop.y}), renderScale: ${renderScale.toFixed(2)})...`);
+				const context = await createContext(rootElement, {
+					type: "image/webp",
+					autoDestruct: true,
+					backgroundColor: "#ffffff",
+					scale: renderScale,
+					quality: SCREENSHOT_WEBP_QUALITY
+				});
+				context.fetch.placeholderImage = uncapturedImages.placeholderImage;
+				const fullDataUrl = await domToWebp(context);
+				captureMs = performance.now() - captureStartTime;
+				console.log(`${LOG_PREFIX} domToWebp completed in ${captureMs.toFixed(1)}ms, output size: ${(dataUrlByteLength(fullDataUrl) / 1024).toFixed(1)}KB`);
+				dataUrl = await cropAndScale(fullDataUrl, {
+					x: crop.x * renderScale,
+					y: crop.y * renderScale,
+					width: crop.width * renderScale,
+					height: crop.height * renderScale
+				}, { quality: SCREENSHOT_WEBP_QUALITY });
+			}
 			const safeDataUrl = await ensureWithinLimits(dataUrl, limits);
+			const uncapturedImageCount = uncapturedImageTracker.count || void 0;
+			if (uncapturedImageCount) console.warn(`${LOG_PREFIX} ${uncapturedImageCount} image(s) could not be drawn into the capture`);
 			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);
+			editorBridge.sendCaptureScreenshotResponse(callbackId, safeDataUrl, void 0, {
+				pageWidth,
+				pageHeight,
+				mode,
+				crop: capturedArea,
+				uncapturedImageCount
+			});
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : String(error);
 			const totalMs = performance.now() - handlerStartTime;
-			console.error(`${LOG_PREFIX} Error after ${totalMs.toFixed(1)}ms:`, errorMessage, error);
+			console.error(`${LOG_PREFIX} Error after ${totalMs.toFixed(1)}ms (${describeCaptureForLog({
+				mode,
+				pageWidth,
+				pageHeight,
+				crop: capturedArea,
+				renderScale: capturedRenderScale
+			})}):`, errorMessage, error);
 			editorBridge.sendCaptureScreenshotResponse(callbackId, void 0, errorMessage);
 		}
 	};
@@ -4411,6 +4736,7 @@ if (isEditMode()) {
 			});
 			try {
 				await source_update_api_default.connect({
+					socketPath: data.payload.devServerSocketPath,
 					peerId: data.payload.peerId,
 					userId: data.payload.userId,
 					authorization: data.payload.devServerAuthorization,