reflet-sdk 0.3.0 → 0.3.2

package/dist/feedback.js

@@ -17,7 +17,8 @@ function buildSnapdomOptions(options) {
 		dpr: Math.min(Math.max(ratio || 1, 1), MAX_PIXEL_RATIO),
 		embedFonts: true,
 		exclude: [`[${WIDGET_MARKER}]`, ...options.excludeSelectors ?? []],
-		fast: true
+		fast: true,
+		reconcile: true
 	};
 }
 function fitWithin(size, maxWidth) {
@@ -48,6 +49,23 @@ function downscale(canvas, target) {
 	context.drawImage(canvas, 0, 0, target.width, target.height);
 	return resized;
 }
+/** Wraps a rendered canvas as an owned capture, downscaled to `maxWidth`. */
+async function capturedFromCanvas(source, maxWidth) {
+	const fitted = fitWithin({
+		height: source.height,
+		width: source.width
+	}, maxWidth);
+	const output = fitted.scale === 1 ? source : downscale(source, fitted);
+	const blob = await toBlob$1(output);
+	if (!blob) return null;
+	return {
+		blob,
+		height: output.height,
+		mimeType: "image/png",
+		objectUrl: URL.createObjectURL(blob),
+		width: output.width
+	};
+}
 /**
 * Renders what the user is looking at right now.
 *
@@ -60,25 +78,11 @@ async function captureViewport(options = {}) {
 	try {
 		const { snapdom } = await import("@zumer/snapdom");
 		const target = options.element ?? document.documentElement;
-		const canvas = await snapdom.toCanvas(target, buildSnapdomOptions({
+		return await capturedFromCanvas(await snapdom.toCanvas(target, buildSnapdomOptions({
 			devicePixelRatio: window.devicePixelRatio,
 			element: options.element,
 			excludeSelectors: options.excludeSelectors
-		}));
-		const fitted = fitWithin({
-			height: canvas.height,
-			width: canvas.width
-		}, options.maxWidth ?? DEFAULT_MAX_WIDTH);
-		const output = fitted.scale === 1 ? canvas : downscale(canvas, fitted);
-		const blob = await toBlob$1(output);
-		if (!blob) return null;
-		return {
-			blob,
-			height: output.height,
-			mimeType: "image/png",
-			objectUrl: URL.createObjectURL(blob),
-			width: output.width
-		};
+		})), options.maxWidth ?? DEFAULT_MAX_WIDTH);
 	} catch {
 		return null;
 	}
@@ -229,7 +233,7 @@ const URL_QUERY = /[?#]/;
 const REDACTED = "[redacted]";
 const ELLIPSIS = "…";
 const MAX_ATTRIBUTE_LENGTH = 120;
-const MAX_TEXT_LENGTH = 200;
+const MAX_TEXT_LENGTH$1 = 200;
 const MAX_CHILD_DEPTH = 3;
 const MAX_CLONED_NODES = 400;
 const DROPPED_TAGS = /* @__PURE__ */ new Set([
@@ -259,6 +263,36 @@ function truncate$1(value, max) {
 function maskSecrets(value) {
 	return value.replace(EMAIL, REDACTED).replace(LONG_TOKEN, REDACTED);
 }
+const SENSITIVE_PARAM = /token|secret|pass(?:word|wd)?|pwd|auth|jwt|credential|session|sid|key|email|ssn|otp|code|signature|nonce/i;
+const LEADING_QUESTION_MARK = /^\?/;
+function decoded(value) {
+	try {
+		return decodeURIComponent(value);
+	} catch {
+		return value;
+	}
+}
+/**
+* Query strings carry signed-in state (`?token=…`, `?userEmail=…`) straight
+* into stored reports and agent prompts. Values of anything credential- or
+* identity-shaped are masked; every other byte of the address stays intact.
+*/
+function redactUrl(href) {
+	let url;
+	try {
+		url = new URL(href);
+	} catch {
+		return maskSecrets(href);
+	}
+	const pairs = url.search.replace(LEADING_QUESTION_MARK, "").split("&").filter(Boolean);
+	if (!pairs.some((pair) => SENSITIVE_PARAM.test(decoded(pair.split("=")[0] ?? "")))) return href;
+	const query = pairs.map((pair) => {
+		const equals = pair.indexOf("=");
+		if (equals === -1 || !SENSITIVE_PARAM.test(decoded(pair.slice(0, equals)))) return pair;
+		return `${pair.slice(0, equals)}=${REDACTED}`;
+	}).join("&");
+	return `${url.origin}${url.pathname}${query ? `?${query}` : ""}${url.hash}`;
+}
 function sanitizeUrl(value) {
 	if (OPAQUE_URI.test(value)) return `${value.slice(0, value.indexOf(":"))}:${ELLIPSIS}`;
 	return value.split(URL_QUERY)[0] ?? value;
@@ -293,7 +327,7 @@ function sanitizeTree(element, depth) {
 			continue;
 		}
 		if (child.nodeType === Node.TEXT_NODE) {
-			child.textContent = truncate$1(maskSecrets(child.textContent ?? ""), MAX_TEXT_LENGTH);
+			child.textContent = truncate$1(maskSecrets(child.textContent ?? ""), MAX_TEXT_LENGTH$1);
 			continue;
 		}
 		if (!(child instanceof Element)) continue;
@@ -324,6 +358,7 @@ const SAFE_ID = /^[A-Za-z][\w-]*$/;
 const WHITESPACE = /\s+/g;
 const MAX_LABEL_LENGTH = 80;
 const MAX_HTML_LENGTH = 600;
+const MAX_TEXT_LENGTH = 300;
 const MAX_REGION_LENGTH = 160;
 const MAX_HANDLE_VALUE_LENGTH = 80;
 const MAX_DEPTH = 12;
@@ -340,6 +375,50 @@ const TEST_ATTRIBUTES = [
 const NAMING_ATTRIBUTES = ["name", "aria-label"];
 const LANDMARK_SELECTOR = "dialog, [role=\"dialog\"], [role=\"alertdialog\"], main, nav, aside, header, footer, form, section, article";
 const HEADING_SELECTOR = "h1, h2, h3, h4, h5, h6, [role=\"heading\"]";
+/** Elements that start a new visual block — their text gets separated by a space. */
+const BLOCK_TAGS = /* @__PURE__ */ new Set([
+	"address",
+	"article",
+	"aside",
+	"blockquote",
+	"dd",
+	"details",
+	"div",
+	"dl",
+	"dt",
+	"fieldset",
+	"figcaption",
+	"figure",
+	"footer",
+	"form",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"header",
+	"hr",
+	"li",
+	"main",
+	"nav",
+	"ol",
+	"p",
+	"pre",
+	"section",
+	"summary",
+	"table",
+	"td",
+	"th",
+	"tr",
+	"ul"
+]);
+function visibleText(element) {
+	const clone = element.cloneNode(true);
+	if (!(clone instanceof Element)) return "";
+	for (const node of clone.querySelectorAll("*")) if (BLOCK_TAGS.has(node.localName)) node.before(clone.ownerDocument.createTextNode(" "));
+	return collapseText(maskSecrets(clone.textContent ?? ""));
+}
 function isUnique(selector) {
 	try {
 		return document.querySelectorAll(selector).length === 1;
@@ -427,8 +506,12 @@ function describeLandmark(element) {
 	return name?.trim() ? `${landmark.localName} "${collapseText(name)}"` : landmark.localName;
 }
 function headingAbove(element) {
+	const scope = element.closest(LANDMARK_SELECTOR) ?? document.body;
+	const probe = document.createRange();
+	probe.selectNodeContents(element);
+	probe.collapse(true);
 	let closest = null;
-	for (const heading of document.querySelectorAll(HEADING_SELECTOR)) if ((heading.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0) closest = heading;
+	for (const heading of scope.querySelectorAll(HEADING_SELECTOR)) if (probe.comparePoint(heading, 0) < 0) closest = heading;
 	return collapseText(closest?.textContent ?? "") || null;
 }
 /**
@@ -455,6 +538,7 @@ function getElementRect(element) {
 /** Everything an agent needs to find the picked element back in the codebase. */
 function buildElementSelection(element) {
 	const { componentStack, sourceLocation } = inspectReactElement(element);
+	const text = truncate(visibleText(element), MAX_TEXT_LENGTH);
 	return {
 		componentStack,
 		html: sanitizeMarkup(element, MAX_HTML_LENGTH),
@@ -462,7 +546,8 @@ function buildElementSelection(element) {
 		rect: getElementRect(element),
 		region: describeRegion(element),
 		selector: truncate(buildSelector(element), MAX_SELECTOR_LENGTH),
-		sourceLocation: sourceLocation ? truncate(sourceLocation, MAX_SOURCE_LOCATION_LENGTH) : sourceLocation
+		sourceLocation: sourceLocation ? truncate(sourceLocation, MAX_SOURCE_LOCATION_LENGTH) : sourceLocation,
+		text: text || void 0
 	};
 }
 //#endregion
@@ -539,9 +624,13 @@ function collectPageContext(options) {
 			height: window.screen.height,
 			width: window.screen.width
 		},
+		scroll: {
+			x: window.scrollX,
+			y: window.scrollY
+		},
 		sdkVersion: options?.sdkVersion,
 		timezone: resolveTimezone(),
-		url: clip(window.location.href, MAX_URL_LENGTH),
+		url: redactUrl(window.location.href),
 		userAgent: clip(userAgent, MAX_USER_AGENT_LENGTH),
 		viewport: {
 			devicePixelRatio: window.devicePixelRatio,
@@ -553,7 +642,7 @@ function collectPageContext(options) {
 //#endregion
 //#region src/feedback/types.ts
 /** Reported with every submission. */
-const SDK_VERSION = "0.3.0";
+const SDK_VERSION = "0.3.2";
 const DEFAULT_WIDGET_LABELS = {
 	annotateHint: "Draw on the screenshot to point at the problem.",
 	attachScreenshot: "Attach a screenshot",
@@ -2066,6 +2155,128 @@ function startConsoleRecorder(options) {
 	};
 }
 //#endregion
+//#region src/feedback/core/element-capture.ts
+const MIN_CONTEXT_PADDING = 24;
+const MAX_CONTEXT_WIDTH = 2e3;
+const CLOSE_UP_MAX_WIDTH = 1200;
+const SELECTION_COLOR = "#4f46e5";
+const OUTLINE_COLOR = "#4f46e5";
+const OUTLINE_GLOW = "#ffffff";
+const OUTLINE_WIDTH = 3;
+const GLOW_WIDTH = 6;
+const DIM_OVERLAY = "rgba(15, 23, 42, 0.45)";
+/**
+* Tightest ancestor that keeps some breathing room around the pick — the zoom
+* stays zoomed instead of growing to a giant section. Only when nothing up
+* the tree clears the minimum does the widest candidate below the cap win.
+*/
+function contextRootFor(element) {
+	const target = element.getBoundingClientRect();
+	const coversAtLeast = (box, margin) => box.left <= target.left - margin && box.right >= target.right + margin && box.top <= target.top - margin && box.bottom >= target.bottom + margin;
+	let tightest = null;
+	let current = element.parentElement;
+	while (current && current !== document.documentElement) {
+		const box = current.getBoundingClientRect();
+		if (coversAtLeast(box, MIN_CONTEXT_PADDING)) return current;
+		tightest ??= box.width < MAX_CONTEXT_WIDTH ? current : null;
+		current = current.parentElement;
+	}
+	return tightest ?? element;
+}
+/** Where the picked element sits inside the context shot, in image pixels. */
+function closeUpGeometry(params) {
+	const scale = params.rootRect.width > 0 ? params.capture.width / params.rootRect.width : 1;
+	return {
+		height: Math.round(params.elementRect.height * scale),
+		scale,
+		width: Math.round(params.elementRect.width * scale),
+		x: Math.round((params.elementRect.left - params.rootRect.left) * scale),
+		y: Math.round((params.elementRect.top - params.rootRect.top) * scale)
+	};
+}
+/** Rectangle annotation marking the picked element on the viewport shot. */
+function highlightFor(selection, capture) {
+	const scale = capture.width / window.innerWidth;
+	const { rect } = selection;
+	return {
+		color: SELECTION_COLOR,
+		end: {
+			x: (rect.x + rect.width) * scale,
+			y: (rect.y + rect.height) * scale
+		},
+		id: `selection-${rect.x}-${rect.y}`,
+		start: {
+			x: rect.x * scale,
+			y: rect.y * scale
+		},
+		tool: "rectangle"
+	};
+}
+function drawZoneOverlay(context, zone) {
+	context.save();
+	context.fillStyle = DIM_OVERLAY;
+	context.beginPath();
+	context.rect(0, 0, context.canvas.width, context.canvas.height);
+	context.rect(zone.x, zone.y, zone.width, zone.height);
+	context.fill("evenodd");
+	for (const [color, width] of [[OUTLINE_GLOW, GLOW_WIDTH], [OUTLINE_COLOR, OUTLINE_WIDTH]]) {
+		context.strokeStyle = color;
+		context.lineWidth = width * zone.scale;
+		context.strokeRect(zone.x, zone.y, zone.width, zone.height);
+	}
+	context.restore();
+}
+function drawCloseUp(capture, zone) {
+	return new Promise((resolve) => {
+		const canvas = document.createElement("canvas");
+		canvas.width = capture.width;
+		canvas.height = capture.height;
+		const context = canvas.getContext("2d");
+		const image = new Image();
+		image.onload = () => {
+			if (!context) {
+				resolve(null);
+				return;
+			}
+			context.drawImage(image, 0, 0, capture.width, capture.height);
+			drawZoneOverlay(context, zone);
+			resolve(capturedFromCanvas(canvas, CLOSE_UP_MAX_WIDTH));
+		};
+		image.onerror = () => resolve(null);
+		image.src = capture.objectUrl;
+	});
+}
+/**
+* Zoomed view of the picked zone: the surrounding area captured for context,
+* everything outside the selection dimmed and the zone framed with a glowing
+* outline — unambiguous to eyes and vision models alike.
+* Falls back to the plain context shot when the overlay cannot be drawn.
+*/
+async function captureElementCloseUp(element) {
+	try {
+		const root = contextRootFor(element);
+		const rootRect = root.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+		const capture = await captureViewport({
+			element: root,
+			maxWidth: CLOSE_UP_MAX_WIDTH
+		});
+		if (!capture || root === element) return capture;
+		const outlined = await drawCloseUp(capture, closeUpGeometry({
+			capture,
+			elementRect,
+			rootRect
+		}));
+		if (outlined) {
+			releaseCapture(capture);
+			return outlined;
+		}
+		return capture;
+	} catch {
+		return null;
+	}
+}
+//#endregion
 //#region src/feedback/core/submit.ts
 const MAX_TITLE_LENGTH = 100;
 const NEWLINE = /\r?\n/;
@@ -2164,9 +2375,53 @@ function createFeedbackTransport(client) {
 	};
 }
 //#endregion
+//#region src/feedback/ui/use-capture-sync.ts
+const RESIZE_DEBOUNCE = 400;
+/**
+* Calls `refresh` whenever the page the reporter is looking at changes shape:
+* SPA routes (which never fire popstate on push/replace — history methods must
+* be patched) and window resizes, debounced. Keeps the frozen screenshot and
+* page context describing what the reporter currently sees.
+*/
+function useCaptureSync(enabled, refresh) {
+	useEffect(() => {
+		if (!enabled) return;
+		const history = window.history;
+		const originalPush = history.pushState;
+		const originalReplace = history.replaceState;
+		const hadOwnPush = Object.hasOwn(history, "pushState");
+		const hadOwnReplace = Object.hasOwn(history, "replaceState");
+		history.pushState = function pushState(data, unused, url) {
+			const result = originalPush.call(history, data, unused, url);
+			refresh();
+			return result;
+		};
+		history.replaceState = function replaceState(data, unused, url) {
+			const result = originalReplace.call(history, data, unused, url);
+			refresh();
+			return result;
+		};
+		window.addEventListener("popstate", refresh);
+		let resizeTimer;
+		const onResize = () => {
+			window.clearTimeout(resizeTimer);
+			resizeTimer = window.setTimeout(refresh, RESIZE_DEBOUNCE);
+		};
+		window.addEventListener("resize", onResize);
+		return () => {
+			if (hadOwnPush) history.pushState = originalPush;
+			else Reflect.deleteProperty(history, "pushState");
+			if (hadOwnReplace) history.replaceState = originalReplace;
+			else Reflect.deleteProperty(history, "replaceState");
+			window.removeEventListener("popstate", refresh);
+			window.clearTimeout(resizeTimer);
+			window.removeEventListener("resize", onResize);
+		};
+	}, [enabled, refresh]);
+}
+//#endregion
 //#region src/feedback/ui/use-widget-state.ts
 const SUCCESS_CLOSE_DELAY = 2400;
-const ELEMENT_CAPTURE_MAX_WIDTH = 1200;
 const IS_APPLE = /Mac|iPhone|iPad/;
 const MILLISECONDS_PER_DAY = 864e5;
 const DISMISSAL_STORAGE_PREFIX = "reflet-feedback-dismissed";
@@ -2204,23 +2459,6 @@ function matchesHotkey(event, hotkey, platform = typeof navigator === "undefined
 	};
 	return event.altKey === expected.alt && event.ctrlKey === expected.ctrl && event.metaKey === expected.meta && event.shiftKey === expected.shift;
 }
-function highlightFor(selection, capture) {
-	const scale = capture.width / window.innerWidth;
-	const { rect } = selection;
-	return {
-		color: "#4f46e5",
-		end: {
-			x: (rect.x + rect.width) * scale,
-			y: (rect.y + rect.height) * scale
-		},
-		id: `selection-${rect.x}-${rect.y}`,
-		start: {
-			x: rect.x * scale,
-			y: rect.y * scale
-		},
-		tool: "rectangle"
-	};
-}
 /**
 * A capture whose object URL is revoked the moment it is replaced or dropped —
 * holding one without this leaks the blob for the lifetime of the page.
@@ -2260,12 +2498,9 @@ function useWidgetState(props) {
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [error, setError] = useState(null);
 	const [dismissedUntil, setDismissedUntil] = useState(() => readDismissedUntil(dismissalKey));
-	const captureRef = useRef(null);
 	const pickRef = useRef(0);
 	const consoleRef = useRef(null);
-	useEffect(() => {
-		captureRef.current = capture;
-	}, [capture]);
+	const frozenContext = useRef(null);
 	useEffect(() => {
 		setDismissedUntil(readDismissedUntil(dismissalKey));
 	}, [dismissalKey]);
@@ -2278,15 +2513,20 @@ function useWidgetState(props) {
 			recorder.stop();
 		};
 	}, [props.captureConsole]);
-	const takeCapture = useCallback((element) => {
+	/** Frozen at the same instant as the screenshot, so shot and URL always match. */
+	const takeCapture = useCallback(() => {
+		const context = collectPageContext({ sdkVersion: SDK_VERSION });
 		setIsCapturing(true);
-		captureViewport({ element }).catch(() => null).then((image) => {
+		captureViewport().catch(() => null).then((image) => {
 			setIsCapturing(false);
 			replaceCapture(image);
+			frozenContext.current = image ? context : null;
 		});
 	}, [replaceCapture]);
+	useCaptureSync(isOpen && step === "compose" && annotations.length === 0 && !selection && props.captureOnOpen !== false, takeCapture);
 	const reset = useCallback(() => {
 		pickRef.current++;
+		frozenContext.current = null;
 		replaceCapture(null);
 		replaceElementCapture(null);
 		setAnnotations([]);
@@ -2331,21 +2571,24 @@ function useWidgetState(props) {
 		props.onOpen,
 		takeCapture
 	]);
-	const selectElement = useCallback((element) => {
+	/** Fresh pixels so the highlight maps onto the scroll position the element had. */
+	const selectElement = useCallback(async (element) => {
 		const picked = buildElementSelection(element);
 		setSelection(picked);
 		setStep("compose");
-		const current = captureRef.current;
-		if (current) setAnnotations((previous) => [...previous.filter((item) => !item.id.startsWith("selection-")), highlightFor(picked, current)]);
 		const pick = ++pickRef.current;
-		captureViewport({
-			element,
-			maxWidth: ELEMENT_CAPTURE_MAX_WIDTH
-		}).catch(() => null).then((image) => {
-			if (pickRef.current === pick) replaceElementCapture(image);
-			else releaseCapture(image);
-		});
-	}, [replaceElementCapture]);
+		const context = collectPageContext({ sdkVersion: SDK_VERSION });
+		const [fresh, closeUp] = await Promise.all([captureViewport().catch(() => null), captureElementCloseUp(element).catch(() => null)]);
+		if (pickRef.current !== pick) {
+			releaseCapture(fresh);
+			releaseCapture(closeUp);
+			return;
+		}
+		replaceCapture(fresh);
+		replaceElementCapture(closeUp);
+		frozenContext.current = fresh ? context : null;
+		setAnnotations(fresh ? [highlightFor(picked, fresh)] : []);
+	}, [replaceCapture, replaceElementCapture]);
 	const clearSelection = useCallback(() => {
 		pickRef.current++;
 		replaceElementCapture(null);
@@ -2353,6 +2596,7 @@ function useWidgetState(props) {
 		setAnnotations((previous) => previous.filter((item) => !item.id.startsWith("selection-")));
 	}, [replaceElementCapture]);
 	const removeCapture = useCallback(() => {
+		frozenContext.current = null;
 		replaceCapture(null);
 		setAnnotations([]);
 	}, [replaceCapture]);
@@ -2386,7 +2630,7 @@ function useWidgetState(props) {
 				annotations,
 				category,
 				context: {
-					...collectPageContext({ sdkVersion: SDK_VERSION }),
+					...frozenContext.current ?? collectPageContext({ sdkVersion: "0.3.2" }),
 					consoleEvents: consoleRef.current?.events(),
 					metadata: props.metadata,
 					selection: selection ?? void 0