reflet-sdk 0.2.0 → 0.3.1

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;
 	}
@@ -94,6 +98,9 @@ const FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
 const MAX_STACK_DEPTH = 6;
 const MAX_FIBER_WALK = 60;
 const MAX_OWNER_WALK = 8;
+const MIN_NAME_LENGTH = 4;
+const CAPITALIZED = /^[A-Z]/;
+const WORD_INSIDE = /[a-z]{2}/;
 const ORIGIN_PREFIX = /^[a-z][\w+.-]*:\/\/[^/]*/i;
 const WEBPACK_PREFIX = /^webpack-internal:\/{2,}(\.\/)?/;
 const STACK_LOCATION = /([^\s()]+):(\d+):(\d+)\)?\s*$/;
@@ -122,6 +129,14 @@ function readName(value) {
 	const name = Reflect.get(value, "name");
 	return typeof name === "string" && name ? name : null;
 }
+/**
+* Minified bundles hand out names like `Ur` or `Sn`. Reporting those as the
+* owning component actively misleads an agent, so only real words get through.
+*/
+function isMeaningfulName(name) {
+	if (name.includes("/") || name.includes("_")) return true;
+	return name.length >= MIN_NAME_LENGTH && CAPITALIZED.test(name) && WORD_INSIDE.test(name);
+}
 function componentName(type, depth = 0) {
 	if (typeof type === "string" || type === null || depth > 3) return null;
 	if (isRecord(type)) {
@@ -130,8 +145,7 @@ function componentName(type, depth = 0) {
 		if (marker === FORWARD_REF_TYPE) return componentName(Reflect.get(type, "render"), depth + 1);
 	}
 	const name = readName(type);
-	if (!name || name.length < 2) return null;
-	return name[0] === name[0]?.toUpperCase() || name.includes("/") ? name : null;
+	return name && isMeaningfulName(name) ? name : null;
 }
 /** Component names owning the fiber, innermost first. */
 function resolveComponentStack(fiber) {
@@ -205,14 +219,206 @@ function inspectReactElement(element) {
 	};
 }
 //#endregion
+//#region src/feedback/core/redact.ts
+/**
+* The picked element's markup leaves the reporter's browser and ends up in an
+* agent prompt, so it is scrubbed here: typed-in values, credentials and
+* anything marked `data-reflet-redact` never make the trip.
+*/
+const EMAIL = /[\w.%+-]+@[\w.-]+\.[a-z]{2,}/gi;
+const LONG_TOKEN = /\b[\w-]{28,}\b/g;
+const OPAQUE_URI = /^(?:data|blob|javascript):/i;
+const WHITESPACE_RUN = /\s+/g;
+const URL_QUERY = /[?#]/;
+const REDACTED = "[redacted]";
+const ELLIPSIS = "…";
+const MAX_ATTRIBUTE_LENGTH = 120;
+const MAX_TEXT_LENGTH$1 = 200;
+const MAX_CHILD_DEPTH = 3;
+const MAX_CLONED_NODES = 400;
+const DROPPED_TAGS = /* @__PURE__ */ new Set([
+	"script",
+	"style",
+	"noscript",
+	"template"
+]);
+const VALUE_HOLDERS = /* @__PURE__ */ new Set([
+	"input",
+	"textarea",
+	"select",
+	"option"
+]);
+const URL_ATTRIBUTES = /* @__PURE__ */ new Set([
+	"src",
+	"srcset",
+	"href",
+	"poster",
+	"action",
+	"formaction"
+]);
+function truncate$1(value, max) {
+	return value.length <= max ? value : `${value.slice(0, max - 1)}${ELLIPSIS}`;
+}
+/** Emails and token-shaped strings, wherever they appear in reported text. */
+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;
+}
+function sanitizeAttributes(element) {
+	const holdsTypedValue = VALUE_HOLDERS.has(element.localName);
+	for (const { name, value } of Array.from(element.attributes)) {
+		if (holdsTypedValue && name === "value") {
+			element.removeAttribute(name);
+			continue;
+		}
+		const cleaned = URL_ATTRIBUTES.has(name) ? sanitizeUrl(value) : maskSecrets(value);
+		element.setAttribute(name, truncate$1(cleaned, MAX_ATTRIBUTE_LENGTH));
+	}
+}
+function collapse(element) {
+	element.replaceChildren(element.ownerDocument.createTextNode(ELLIPSIS));
+}
+function sanitizeTree(element, depth) {
+	sanitizeAttributes(element);
+	if (element.hasAttribute("data-reflet-redact")) {
+		element.replaceChildren(element.ownerDocument.createTextNode(REDACTED));
+		return;
+	}
+	if (element.localName === "svg") {
+		element.replaceChildren();
+		return;
+	}
+	for (const child of Array.from(element.childNodes)) {
+		if (child.nodeType === Node.COMMENT_NODE) {
+			child.remove();
+			continue;
+		}
+		if (child.nodeType === Node.TEXT_NODE) {
+			child.textContent = truncate$1(maskSecrets(child.textContent ?? ""), MAX_TEXT_LENGTH$1);
+			continue;
+		}
+		if (!(child instanceof Element)) continue;
+		if (DROPPED_TAGS.has(child.localName)) {
+			child.remove();
+			continue;
+		}
+		if (depth >= MAX_CHILD_DEPTH) {
+			sanitizeAttributes(child);
+			collapse(child);
+			continue;
+		}
+		sanitizeTree(child, depth + 1);
+	}
+}
+/** Redacted `outerHTML`, shallow-cloned when the subtree is too large to be useful. */
+function sanitizeMarkup(element, maxLength) {
+	const isSmallEnough = element.querySelectorAll("*").length <= MAX_CLONED_NODES;
+	const clone = element.cloneNode(isSmallEnough);
+	if (!(clone instanceof Element)) return "";
+	sanitizeTree(clone, 0);
+	if (!isSmallEnough) collapse(clone);
+	return truncate$1(clone.outerHTML.replace(WHITESPACE_RUN, " "), maxLength);
+}
+//#endregion
 //#region src/feedback/core/element-selector.ts
 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;
+const MIN_PATH_SEGMENTS = 2;
 const MAX_SELECTOR_LENGTH = 600;
 const MAX_SOURCE_LOCATION_LENGTH = 400;
+const TEST_ATTRIBUTES = [
+	"data-testid",
+	"data-test-id",
+	"data-test",
+	"data-cy",
+	"data-qa"
+];
+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;
@@ -223,13 +429,23 @@ function isUnique(selector) {
 function escapeAttributeValue(value) {
 	return value.replace(/["\\]/g, "\\$&");
 }
+function attributeHandle(element, attribute, qualifier) {
+	const value = element.getAttribute(attribute);
+	if (!value || value.length > MAX_HANDLE_VALUE_LENGTH) return null;
+	const selector = `${qualifier}[${attribute}="${escapeAttributeValue(value)}"]`;
+	return isUnique(selector) ? selector : null;
+}
+/** Something an engineer would have written on purpose, unlike a positional path. */
 function uniqueHandle(element) {
 	const id = element.getAttribute("id");
 	if (id && SAFE_ID.test(id) && isUnique(`#${id}`)) return `#${id}`;
-	const testId = element.getAttribute("data-testid");
-	if (testId) {
-		const selector = `[data-testid="${escapeAttributeValue(testId)}"]`;
-		if (isUnique(selector)) return selector;
+	for (const attribute of TEST_ATTRIBUTES) {
+		const handle = attributeHandle(element, attribute, "");
+		if (handle) return handle;
+	}
+	for (const attribute of NAMING_ATTRIBUTES) {
+		const handle = attributeHandle(element, attribute, element.localName);
+		if (handle) return handle;
 	}
 	return null;
 }
@@ -243,6 +459,9 @@ function positionalSegment(element) {
 }
 /**
 * Shortest selector that still resolves back to `element` from the document.
+* Grows the path one ancestor at a time and stops as soon as it is unique, so
+* a stable handle anywhere up the tree replaces the whole positional chain.
+* A bare tag is never enough: positional paths keep a parent for context.
 */
 function buildSelector(element) {
 	if (element === document.documentElement) return "html";
@@ -251,43 +470,62 @@ function buildSelector(element) {
 	if (handle) return handle;
 	const segments = [];
 	let current = element;
-	let depth = 0;
-	while (current && depth < MAX_DEPTH) {
-		if (current === document.body) {
-			segments.unshift("body");
-			break;
-		}
-		if (current === document.documentElement) {
-			segments.unshift("html");
-			break;
-		}
+	for (let depth = 0; current && depth < MAX_DEPTH; depth++) {
 		const ancestorHandle = current === element ? null : uniqueHandle(current);
-		if (ancestorHandle) {
-			segments.unshift(ancestorHandle);
-			break;
-		}
-		segments.unshift(positionalSegment(current));
+		segments.unshift(ancestorHandle ?? positionalSegment(current));
+		const candidate = segments.join(" > ");
+		const isAnchored = segments.length >= MIN_PATH_SEGMENTS;
+		if (ancestorHandle || current === document.body || isAnchored && isUnique(candidate)) return candidate;
 		current = current.parentElement;
-		depth++;
 	}
 	return segments.join(" > ");
 }
 function truncate(value, max) {
 	return value.length <= max ? value : `${value.slice(0, max - 1)}…`;
 }
+function collapseText(value) {
+	return value.replace(WHITESPACE, " ").trim();
+}
 function accessibleLabel(element) {
 	const explicit = element.getAttribute("aria-label") ?? element.getAttribute("title") ?? element.getAttribute("alt") ?? element.getAttribute("placeholder");
 	if (explicit?.trim()) return explicit.trim();
-	return (element.textContent ?? "").replace(WHITESPACE, " ").trim();
+	return collapseText(element.textContent ?? "");
 }
 /** Short human label such as `button "Sign in"` or `div.card`. */
 function describeElement(element) {
 	const tag = element.localName;
-	const label = accessibleLabel(element);
+	const label = maskSecrets(accessibleLabel(element));
 	if (label) return truncate(`${tag} "${label}"`, MAX_LABEL_LENGTH);
 	const firstClass = element.classList.item(0);
 	return truncate(firstClass ? `${tag}.${firstClass}` : tag, MAX_LABEL_LENGTH);
 }
+function describeLandmark(element) {
+	const landmark = element.parentElement?.closest(LANDMARK_SELECTOR);
+	if (!landmark) return null;
+	const name = landmark.getAttribute("aria-label") ?? landmark.getAttribute("title");
+	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 scope.querySelectorAll(HEADING_SELECTOR)) if (probe.comparePoint(heading, 0) < 0) closest = heading;
+	return collapseText(closest?.textContent ?? "") || null;
+}
+/**
+* Where the element sits from a reader's point of view — `dialog "Members" ›
+* Danger zone` says more to an agent than any DOM path can.
+*/
+function describeRegion(element) {
+	const landmark = describeLandmark(element);
+	const heading = headingAbove(element);
+	const parts = [landmark];
+	if (heading && !landmark?.includes(`"${heading}"`)) parts.push(heading);
+	const region = parts.filter((part) => part !== null).join(" › ");
+	return region ? truncate(maskSecrets(region), MAX_REGION_LENGTH) : void 0;
+}
 function getElementRect(element) {
 	const rect = element.getBoundingClientRect();
 	return {
@@ -300,13 +538,16 @@ 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: truncate(element.outerHTML, MAX_HTML_LENGTH),
+		html: sanitizeMarkup(element, MAX_HTML_LENGTH),
 		label: describeElement(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
@@ -383,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,
@@ -396,8 +641,8 @@ function collectPageContext(options) {
 }
 //#endregion
 //#region src/feedback/types.ts
-/** Reported with every submission. Keep in sync with package.json on release. */
-const SDK_VERSION = "0.2.0";
+/** Reported with every submission. */
+const SDK_VERSION = "0.3.1";
 const DEFAULT_WIDGET_LABELS = {
 	annotateHint: "Draw on the screenshot to point at the problem.",
 	attachScreenshot: "Attach a screenshot",
@@ -657,9 +902,10 @@ async function renderAnnotatedImage(source, annotations) {
 }
 //#endregion
 //#region src/feedback/ui/icons.tsx
-function Svg({ children, size = 16 }) {
+function Svg({ children, className, size = 16 }) {
 	return /* @__PURE__ */ jsx("svg", {
 		"aria-hidden": "true",
+		className,
 		fill: "none",
 		height: size,
 		stroke: "currentColor",
@@ -671,14 +917,18 @@ function Svg({ children, size = 16 }) {
 		children
 	});
 }
-function ChatIcon() {
+function ChatIcon({ className }) {
 	return /* @__PURE__ */ jsx(Svg, {
-		size: 18,
+		className,
+		size: 15,
 		children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
 	});
 }
-function CloseIcon() {
-	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+function CloseIcon({ className }) {
+	return /* @__PURE__ */ jsx(Svg, {
+		className,
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
 }
 function BugIcon() {
 	return /* @__PURE__ */ jsx(Svg, {
@@ -941,15 +1191,21 @@ function Annotator({ annotations, capture, labels, onChange, onDone }) {
 }
 //#endregion
 //#region src/feedback/ui/launcher.tsx
-function Launcher({ compact, isOpen, label, onClick }) {
+/**
+* Never changes size between states — the panel opening must not move the
+* button out from under the pointer.
+*/
+function Launcher({ isOpen, label, onClick }) {
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-expanded": isOpen,
-		"aria-label": label,
 		className: "launcher",
-		"data-compact": compact || isOpen ? "true" : "false",
+		"data-open": isOpen,
 		onClick,
 		type: "button",
-		children: [isOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(ChatIcon, {}), !(compact || isOpen) && label]
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "launcher-icon",
+			children: [/* @__PURE__ */ jsx(ChatIcon, { className: "on-open" }), /* @__PURE__ */ jsx(CloseIcon, { className: "on-close" })]
+		}), label]
 	});
 }
 //#endregion
@@ -970,7 +1226,7 @@ const CATEGORY_META = {
 };
 function Attachment({ labels, state }) {
 	if (state.isCapturing) return /* @__PURE__ */ jsxs("div", {
-		className: "attachment",
+		className: "card",
 		children: [/* @__PURE__ */ jsx("div", { className: "thumb" }), /* @__PURE__ */ jsxs("div", {
 			className: "meta",
 			children: [/* @__PURE__ */ jsx("strong", { children: labels.retakeHint }), /* @__PURE__ */ jsx("span", { children: "…" })]
@@ -984,7 +1240,7 @@ function Attachment({ labels, state }) {
 	});
 	const annotationCount = state.annotations.length;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "attachment",
+		className: "card",
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "thumb",
@@ -997,12 +1253,18 @@ function Attachment({ labels, state }) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "meta",
-				children: [/* @__PURE__ */ jsx("strong", { children: labels.retakeHint }), /* @__PURE__ */ jsxs("span", { children: [
-					state.capture.width,
-					"×",
-					state.capture.height,
-					annotationCount > 0 ? ` · ${annotationCount} marks` : ""
-				] })]
+				children: [/* @__PURE__ */ jsx("strong", {
+					className: "truncate",
+					children: labels.retakeHint
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "truncate",
+					children: [
+						state.capture.width,
+						"×",
+						state.capture.height,
+						annotationCount > 0 ? ` · ${annotationCount} marks` : ""
+					]
+				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "actions",
@@ -1036,8 +1298,9 @@ function Attachment({ labels, state }) {
 		]
 	});
 }
-function SelectionChip({ labels, state }) {
-	const { selection } = state;
+/** Shows the reporter exactly what will be sent about the element they picked. */
+function Selection({ labels, state }) {
+	const { elementCapture, selection } = state;
 	if (!selection) return /* @__PURE__ */ jsxs("button", {
 		className: "ghost-btn",
 		onClick: () => state.setStep("picking"),
@@ -1045,24 +1308,45 @@ function SelectionChip({ labels, state }) {
 		children: [/* @__PURE__ */ jsx(TargetIcon, {}), labels.pickElement]
 	});
 	const component = selection.componentStack[0];
-	return /* @__PURE__ */ jsxs("span", {
-		className: "chip",
+	return /* @__PURE__ */ jsxs("div", {
+		className: "card",
 		children: [
-			/* @__PURE__ */ jsx(TargetIcon, {}),
-			/* @__PURE__ */ jsxs("span", {
-				className: "truncate",
-				children: [
-					component ? /* @__PURE__ */ jsx("strong", { children: `<${component}>` }) : selection.label,
-					" ",
-					/* @__PURE__ */ jsx("code", { children: selection.sourceLocation ?? selection.selector })
-				]
+			/* @__PURE__ */ jsx("div", {
+				className: "thumb contain",
+				children: elementCapture && /* @__PURE__ */ jsx("img", {
+					alt: "",
+					height: elementCapture.height,
+					src: elementCapture.objectUrl,
+					width: elementCapture.width
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "meta",
+				children: [/* @__PURE__ */ jsx("strong", {
+					className: "truncate",
+					children: component ? `<${component}>` : selection.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selection.region ?? selection.sourceLocation ?? selection.selector
+				})]
 			}),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": labels.cancel,
-				className: "icon-btn",
-				onClick: state.clearSelection,
-				type: "button",
-				children: /* @__PURE__ */ jsx(CloseIcon, {})
+			/* @__PURE__ */ jsxs("div", {
+				className: "actions",
+				children: [/* @__PURE__ */ jsx("button", {
+					"aria-label": labels.pickElement,
+					className: "icon-btn",
+					onClick: () => state.setStep("picking"),
+					title: labels.pickElement,
+					type: "button",
+					children: /* @__PURE__ */ jsx(TargetIcon, {})
+				}), /* @__PURE__ */ jsx("button", {
+					"aria-label": labels.cancel,
+					className: "icon-btn",
+					onClick: state.clearSelection,
+					title: labels.cancel,
+					type: "button",
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				})]
 			})
 		]
 	});
@@ -1129,13 +1413,15 @@ function FeedbackPanel({ categories, labels, state }) {
 						ref: messageRef,
 						value: state.message
 					}),
-					/* @__PURE__ */ jsx(Attachment, {
-						labels,
-						state
-					}),
-					/* @__PURE__ */ jsx(SelectionChip, {
-						labels,
-						state
+					/* @__PURE__ */ jsxs("div", {
+						className: "attachments",
+						children: [/* @__PURE__ */ jsx(Attachment, {
+							labels,
+							state
+						}), /* @__PURE__ */ jsx(Selection, {
+							labels,
+							state
+						})]
 					}),
 					state.isAnonymous && /* @__PURE__ */ jsx("input", {
 						"aria-label": labels.emailLabel,
@@ -1192,7 +1478,7 @@ function FeedbackPanel({ categories, labels, state }) {
 }
 //#endregion
 //#region src/feedback/ui/picker.tsx
-const LABEL_HEIGHT = 28;
+const LABEL_HEIGHT = 24;
 const LABEL_GAP = 6;
 function isWidgetOwned(element) {
 	return element.closest(`[${WIDGET_MARKER}]`) !== null;
@@ -1205,14 +1491,15 @@ function elementUnder(x, y) {
 function describeTarget(element) {
 	return {
 		componentName: resolveComponentStack(getFiberFromNode(element))[0],
+		element,
 		label: describeElement(element),
 		rect: element.getBoundingClientRect(),
-		selector: buildSelector(element)
+		region: describeRegion(element)
 	};
 }
 /**
 * Points at any element in the page the way a coding agent needs it: the React
-* component that owns it plus a selector that resolves back to it.
+* component that owns it plus the page region it lives in.
 */
 function ElementPicker({ hint, onCancel, onPick }) {
 	const [target, setTarget] = useState(null);
@@ -1223,7 +1510,14 @@ function ElementPicker({ hint, onCancel, onPick }) {
 		};
 		const onMove = (event) => {
 			const element = elementUnder(event.clientX, event.clientY);
-			setTarget(element ? describeTarget(element) : null);
+			if (!element) {
+				setTarget(null);
+				return;
+			}
+			setTarget((current) => current?.element === element ? {
+				...current,
+				rect: element.getBoundingClientRect()
+			} : describeTarget(element));
 		};
 		const onClick = (event) => {
 			swallow(event);
@@ -1255,7 +1549,7 @@ function ElementPicker({ hint, onCancel, onPick }) {
 		};
 	}, [onCancel, onPick]);
 	const rect = target?.rect;
-	const labelAbove = rect ? rect.top > 34 : true;
+	const labelAbove = rect ? rect.top > 30 : true;
 	return /* @__PURE__ */ jsxs("div", { children: [
 		rect && /* @__PURE__ */ jsx("div", {
 			className: "picker-box",
@@ -1272,7 +1566,7 @@ function ElementPicker({ hint, onCancel, onPick }) {
 				left: Math.max(4, rect.left),
 				top: labelAbove ? rect.top - LABEL_HEIGHT - LABEL_GAP : rect.bottom + LABEL_GAP
 			},
-			children: [target.componentName ? /* @__PURE__ */ jsx("strong", { children: `<${target.componentName}>` }) : /* @__PURE__ */ jsx("strong", { children: target.label }), /* @__PURE__ */ jsx("code", { children: target.selector })]
+			children: [/* @__PURE__ */ jsx("strong", { children: target.componentName ? `<${target.componentName}>` : target.label }), target.region && /* @__PURE__ */ jsx("span", { children: target.region })]
 		}),
 		/* @__PURE__ */ jsxs("div", {
 			className: "picker-hint",
@@ -1293,30 +1587,42 @@ function ElementPicker({ hint, onCancel, onPick }) {
 const WIDGET_STYLES = `
 :host {
   --rf-bg: #ffffff;
-  --rf-bg-subtle: #f6f7f9;
-  --rf-border: #e4e6eb;
-  --rf-text: #16181d;
-  --rf-text-muted: #6b7280;
-  --rf-primary: #4f46e5;
+  --rf-bg-subtle: rgb(55 53 47 / 4%);
+  --rf-bg-hover: rgb(55 53 47 / 7%);
+  --rf-border: rgb(55 53 47 / 9%);
+  --rf-text: #37352f;
+  --rf-text-muted: rgb(55 53 47 / 55%);
+  --rf-primary: #37352f;
   --rf-primary-text: #ffffff;
-  --rf-danger: #dc2626;
-  --rf-success: #16a34a;
-  --rf-radius: 14px;
-  --rf-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 12px 32px -8px rgb(16 24 40 / 18%);
-  --rf-ring: 0 0 0 3px color-mix(in srgb, var(--rf-primary) 28%, transparent);
-  --rf-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --rf-accent: #2383e2;
+  --rf-danger: #d44c47;
+  --rf-success: #448361;
+  --rf-radius: 12px;
+  --rf-radius-sm: 8px;
+  --rf-shadow-inset: inset 0 0 0 1px var(--rf-border);
+  --rf-shadow-low: 0 0 0 1px rgb(15 15 15 / 4%), 0 1px 2px rgb(15 15 15 / 6%), 0 4px 10px -4px rgb(15 15 15 / 10%);
+  --rf-shadow: 0 0 0 1px rgb(15 15 15 / 4%), 0 2px 5px -1px rgb(15 15 15 / 7%), 0 12px 32px -8px rgb(15 15 15 / 16%);
+  --rf-ring: 0 0 0 3px color-mix(in srgb, var(--rf-accent) 20%, transparent);
+  --rf-ease: cubic-bezier(0.16, 1, 0.3, 1);
   color-scheme: light;
   all: initial;
   font-family: var(--rf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
 }
 
 :host([data-theme="dark"]) {
-  --rf-bg: #17181c;
-  --rf-bg-subtle: #212228;
-  --rf-border: #2e3038;
-  --rf-text: #f3f4f6;
-  --rf-text-muted: #9aa1ad;
-  --rf-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 16px 40px -12px rgb(0 0 0 / 60%);
+  --rf-bg: #202020;
+  --rf-bg-subtle: rgb(255 255 255 / 5%);
+  --rf-bg-hover: rgb(255 255 255 / 9%);
+  --rf-border: rgb(255 255 255 / 9%);
+  --rf-text: #ebeae8;
+  --rf-text-muted: rgb(255 255 255 / 46%);
+  --rf-primary: #f1efec;
+  --rf-primary-text: #1c1c1b;
+  --rf-accent: #529cca;
+  --rf-danger: #eb5757;
+  --rf-success: #4dab74;
+  --rf-shadow-low: 0 0 0 1px rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 30%), 0 4px 10px -4px rgb(0 0 0 / 40%);
+  --rf-shadow: 0 0 0 1px rgb(255 255 255 / 7%), 0 2px 5px -1px rgb(0 0 0 / 35%), 0 14px 36px -10px rgb(0 0 0 / 55%);
   color-scheme: dark;
 }
 
@@ -1325,19 +1631,19 @@ const WIDGET_STYLES = `
 .root {
   position: fixed;
   z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 13.5px;
   line-height: 1.45;
   color: var(--rf-text);
 }
 
-.root[data-position="bottom-right"] { bottom: var(--rf-offset); right: var(--rf-offset); align-items: flex-end; }
-.root[data-position="bottom-left"] { bottom: var(--rf-offset); left: var(--rf-offset); align-items: flex-start; }
-.root[data-position="top-right"] { top: var(--rf-offset); right: var(--rf-offset); align-items: flex-end; }
-.root[data-position="top-left"] { top: var(--rf-offset); left: var(--rf-offset); align-items: flex-start; }
-
-.stack { display: flex; flex-direction: column; gap: 12px; }
-.root[data-position^="top"] .stack { flex-direction: column-reverse; }
+.root[data-position$="right"] { right: var(--rf-offset); align-items: flex-end; }
+.root[data-position$="left"] { left: var(--rf-offset); align-items: flex-start; }
+.root[data-position^="bottom"] { bottom: var(--rf-offset); }
+.root[data-position^="top"] { top: var(--rf-offset); flex-direction: column-reverse; }
 
 button {
   font: inherit;
@@ -1353,64 +1659,76 @@ button {
 .launcher {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  height: 44px;
-  padding: 0 16px;
-  border-radius: 999px;
+  gap: 6px;
+  height: 32px;
+  padding: 0 11px;
+  border-radius: var(--rf-radius-sm);
   background: var(--rf-primary);
   color: var(--rf-primary-text);
-  font-weight: 550;
-  box-shadow: var(--rf-shadow);
-  transition: transform 160ms var(--rf-ease), filter 160ms var(--rf-ease);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  box-shadow: var(--rf-shadow-low);
+  transition: transform 240ms var(--rf-ease), box-shadow 240ms var(--rf-ease), opacity 160ms var(--rf-ease);
 }
-.launcher:hover { transform: translateY(-1px); filter: brightness(1.06); }
-.launcher:active { transform: translateY(0) scale(0.97); }
-.launcher[data-compact="true"] { width: 44px; padding: 0; justify-content: center; }
+.launcher:hover { transform: translateY(-1px); box-shadow: var(--rf-shadow); }
+.launcher:active { transform: translateY(0) scale(0.98); }
+
+.launcher-icon { position: relative; width: 15px; height: 15px; flex: none; }
+.launcher-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 200ms var(--rf-ease), transform 320ms var(--rf-ease); }
+.launcher-icon .on-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
+.launcher[data-open="true"] .on-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
+.launcher[data-open="true"] .on-close { opacity: 1; transform: none; }
 
 .panel {
-  width: min(384px, calc(100vw - 32px));
-  max-height: min(620px, calc(100vh - 96px));
+  width: min(352px, calc(100vw - 24px));
+  max-height: min(600px, calc(100vh - 96px));
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--rf-bg);
-  border: 1px solid var(--rf-border);
   border-radius: var(--rf-radius);
   box-shadow: var(--rf-shadow);
   animation: rf-in 220ms var(--rf-ease);
 }
+.root[data-position^="bottom"] .panel { transform-origin: bottom center; }
+.root[data-position^="top"] .panel { transform-origin: top center; animation-name: rf-in-top; }
 
 @keyframes rf-in {
-  from { opacity: 0; transform: translateY(8px) scale(0.98); }
-  to { opacity: 1; transform: none; }
+  from { opacity: 0; transform: translateY(6px) scale(0.985); }
+}
+@keyframes rf-in-top {
+  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
 }
+@keyframes rf-fade { from { opacity: 0; } }
 
 @media (prefers-reduced-motion: reduce) {
-  .panel, .launcher { animation: none; transition: none; }
+  *, *::before, *::after { animation: none !important; transition: none !important; }
 }
 
 .head {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 14px 14px 10px;
+  padding: 12px 10px 4px 14px;
 }
-.head h2 { margin: 0; font-size: 15px; font-weight: 600; }
+.head h2 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
 .head .spacer { flex: 1; }
 
 .icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
+  width: 26px;
+  height: 26px;
+  flex: none;
+  border-radius: 6px;
   color: var(--rf-text-muted);
   transition: background 120ms var(--rf-ease), color 120ms var(--rf-ease);
 }
-.icon-btn:hover { background: var(--rf-bg-subtle); color: var(--rf-text); }
+.icon-btn:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
 
-.body { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; overflow-y: auto; }
+.body { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 14px; overflow-y: auto; }
 
 .segmented {
   border: 0;
@@ -1419,94 +1737,88 @@ button {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
-  gap: 4px;
-  padding: 4px;
+  gap: 2px;
+  padding: 2px;
   background: var(--rf-bg-subtle);
-  border-radius: 10px;
+  border-radius: var(--rf-radius-sm);
 }
 .segmented button {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  height: 32px;
-  border-radius: 7px;
-  font-size: 13px;
+  gap: 5px;
+  height: 26px;
+  border-radius: 6px;
+  font-size: 12.5px;
   font-weight: 500;
   color: var(--rf-text-muted);
-  transition: background 140ms var(--rf-ease), color 140ms var(--rf-ease);
+  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
 }
+.segmented button:hover { color: var(--rf-text); }
 .segmented button[aria-pressed="true"] {
   background: var(--rf-bg);
   color: var(--rf-text);
-  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
+  box-shadow: var(--rf-shadow-low);
 }
 
 textarea, input[type="email"] {
   width: 100%;
-  padding: 10px 12px;
+  padding: 8px 10px;
   font: inherit;
   color: var(--rf-text);
   background: var(--rf-bg);
   border: 1px solid var(--rf-border);
-  border-radius: 10px;
-  transition: border-color 140ms var(--rf-ease), box-shadow 140ms var(--rf-ease);
+  border-radius: var(--rf-radius-sm);
+  transition: border-color 160ms var(--rf-ease), box-shadow 160ms var(--rf-ease);
 }
-textarea { min-height: 92px; max-height: 220px; resize: none; }
+textarea { min-height: 84px; max-height: 220px; resize: none; }
 textarea::placeholder, input::placeholder { color: var(--rf-text-muted); }
-textarea:focus, input:focus { outline: none; border-color: var(--rf-primary); box-shadow: var(--rf-ring); }
+textarea:focus, input:focus { outline: none; border-color: color-mix(in srgb, var(--rf-accent) 55%, transparent); box-shadow: var(--rf-ring); }
+
+.attachments { display: flex; flex-wrap: wrap; gap: 6px; }
 
-.attachment {
+.card {
+  flex: 1 0 100%;
   display: flex;
+  align-items: center;
   gap: 10px;
-  padding: 8px;
-  border: 1px solid var(--rf-border);
+  min-width: 0;
+  padding: 6px;
   border-radius: 10px;
   background: var(--rf-bg-subtle);
+  animation: rf-fade 200ms var(--rf-ease);
 }
 .thumb {
   position: relative;
-  flex: 0 0 84px;
-  height: 56px;
+  flex: 0 0 60px;
+  height: 42px;
   overflow: hidden;
   border-radius: 6px;
-  border: 1px solid var(--rf-border);
   background: var(--rf-bg);
+  box-shadow: var(--rf-shadow-inset);
 }
 .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
-.attachment .meta { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
-.attachment .meta strong { font-size: 12.5px; font-weight: 550; }
-.attachment .meta span { font-size: 12px; color: var(--rf-text-muted); }
-.attachment .actions { display: flex; gap: 4px; margin-left: auto; align-items: center; }
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 100%;
-  padding: 5px 8px;
-  font-size: 12px;
-  border: 1px solid var(--rf-border);
-  border-radius: 8px;
-  background: var(--rf-bg-subtle);
-  color: var(--rf-text-muted);
-}
-.chip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--rf-text); }
-.chip .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.thumb.contain img { object-fit: contain; object-position: center; }
+.card .meta { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
+.card .meta strong { font-size: 12.5px; font-weight: 550; }
+.card .meta span { font-size: 11.5px; color: var(--rf-text-muted); }
+.card .actions { display: flex; gap: 2px; margin-left: auto; align-items: center; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
 
-.row { display: flex; gap: 8px; align-items: center; }
 .ghost-btn {
+  flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 32px;
+  height: 30px;
   padding: 0 10px;
-  font-size: 13px;
+  font-size: 12.5px;
   font-weight: 500;
   color: var(--rf-text-muted);
-  border: 1px solid var(--rf-border);
-  border-radius: 9px;
-  transition: background 140ms var(--rf-ease), color 140ms var(--rf-ease);
+  border-radius: var(--rf-radius-sm);
+  box-shadow: var(--rf-shadow-inset);
+  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
 }
 .ghost-btn:hover { background: var(--rf-bg-subtle); color: var(--rf-text); }
 
@@ -1516,53 +1828,55 @@ textarea:focus, input:focus { outline: none; border-color: var(--rf-primary); bo
   justify-content: center;
   gap: 8px;
   width: 100%;
-  height: 38px;
+  height: 32px;
+  margin-top: 2px;
+  font-size: 13px;
   font-weight: 550;
   color: var(--rf-primary-text);
   background: var(--rf-primary);
-  border-radius: 10px;
-  transition: filter 140ms var(--rf-ease);
+  border-radius: var(--rf-radius-sm);
+  transition: opacity 160ms var(--rf-ease), transform 160ms var(--rf-ease);
 }
-.submit:hover:not(:disabled) { filter: brightness(1.06); }
-.submit:disabled { opacity: 0.55; cursor: not-allowed; }
+.submit:hover:not(:disabled) { opacity: 0.88; }
+.submit:active:not(:disabled) { transform: scale(0.99); }
+.submit:disabled { opacity: 0.35; cursor: not-allowed; }
 
-.error { margin: 0; font-size: 12.5px; color: var(--rf-danger); }
-.hint { margin: 0; font-size: 12px; color: var(--rf-text-muted); }
+.error { margin: 0; font-size: 12px; color: var(--rf-danger); }
 
 .footer {
-  min-height: 44px;
+  min-height: 34px;
   padding: 0 14px;
   border-top: 1px solid var(--rf-border);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
-  font-size: 11.5px;
+  font-size: 11px;
   color: var(--rf-text-muted);
 }
 .footer[data-dismissible="true"] { justify-content: space-between; }
-.footer a { color: inherit; text-decoration: none; font-weight: 550; }
+.footer a { color: inherit; text-decoration: none; font-weight: 550; transition: color 120ms var(--rf-ease); }
 .footer a:hover { color: var(--rf-text); }
 .dismiss-btn {
   align-self: stretch;
   color: inherit;
-  font-size: 11.5px;
-  text-decoration: underline;
-  text-underline-offset: 3px;
+  font-size: 11px;
+  transition: color 120ms var(--rf-ease);
 }
 .dismiss-btn:hover { color: var(--rf-text); }
 
-.done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px 36px; text-align: center; }
+.done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px 34px; text-align: center; }
 .done svg { color: var(--rf-success); }
-.done h2 { margin: 0; font-size: 15px; }
-.done p { margin: 0; font-size: 13px; color: var(--rf-text-muted); }
+.done h2 { margin: 0; font-size: 14px; font-weight: 600; }
+.done p { margin: 0; font-size: 12.5px; color: var(--rf-text-muted); }
 
 .spinner {
-  width: 15px;
-  height: 15px;
+  width: 14px;
+  height: 14px;
   border: 2px solid currentColor;
   border-right-color: transparent;
   border-radius: 50%;
+  opacity: 0.6;
   animation: rf-spin 700ms linear infinite;
 }
 @keyframes rf-spin { to { transform: rotate(360deg); } }
@@ -1575,16 +1889,17 @@ textarea:focus, input:focus { outline: none; border-color: var(--rf-primary); bo
   z-index: 2147483001;
   display: flex;
   flex-direction: column;
-  background: rgb(9 10 13 / 78%);
-  backdrop-filter: blur(2px);
+  background: rgb(15 15 15 / 76%);
+  backdrop-filter: blur(3px);
+  animation: rf-fade 180ms var(--rf-ease);
 }
 
 .editor { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 24px 0; min-height: 0; }
 .editor canvas {
   max-width: 100%;
   max-height: 100%;
-  border-radius: 8px;
-  box-shadow: 0 24px 60px -12px rgb(0 0 0 / 60%);
+  border-radius: 10px;
+  box-shadow: 0 20px 60px -16px rgb(0 0 0 / 70%);
   cursor: crosshair;
   touch-action: none;
 }
@@ -1600,97 +1915,106 @@ textarea:focus, input:focus { outline: none; border-color: var(--rf-primary); bo
 .toolbar .group {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 5px;
+  gap: 2px;
+  padding: 4px;
   background: var(--rf-bg);
-  border: 1px solid var(--rf-border);
-  border-radius: 12px;
+  border-radius: 10px;
   box-shadow: var(--rf-shadow);
 }
 .tool {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 8px;
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
   color: var(--rf-text-muted);
-  transition: background 140ms var(--rf-ease), color 140ms var(--rf-ease);
+  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
 }
-.tool:hover { background: var(--rf-bg-subtle); color: var(--rf-text); }
-.tool[aria-pressed="true"] { background: var(--rf-primary); color: var(--rf-primary-text); }
+.tool:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
+.tool[aria-pressed="true"] { background: var(--rf-bg-hover); color: var(--rf-text); }
 .swatch {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   border: 2px solid transparent;
-  transition: transform 140ms var(--rf-ease);
+  transition: transform 200ms var(--rf-ease), border-color 160ms var(--rf-ease);
 }
-.swatch[aria-pressed="true"] { border-color: var(--rf-text); transform: scale(1.12); }
+.swatch[aria-pressed="true"] { border-color: var(--rf-text); transform: scale(1.15); }
 .toolbar .done-btn {
-  height: 34px;
-  padding: 0 14px;
+  height: 30px;
+  padding: 0 13px;
+  font-size: 13px;
   font-weight: 550;
-  border-radius: 8px;
+  border-radius: 7px;
   color: var(--rf-primary-text);
   background: var(--rf-primary);
+  transition: opacity 160ms var(--rf-ease);
 }
+.toolbar .done-btn:hover { opacity: 0.88; }
 
-.picker { position: fixed; inset: 0; z-index: 2147483002; cursor: crosshair; }
 .picker-box {
   position: fixed;
   pointer-events: none;
-  border: 2px solid var(--rf-primary);
-  border-radius: 3px;
-  background: color-mix(in srgb, var(--rf-primary) 12%, transparent);
-  transition: all 90ms var(--rf-ease);
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--rf-accent) 10%, transparent);
+  box-shadow: 0 0 0 2px var(--rf-accent), 0 0 0 5px color-mix(in srgb, var(--rf-accent) 18%, transparent);
+  transition: top 130ms var(--rf-ease), left 130ms var(--rf-ease), width 130ms var(--rf-ease), height 130ms var(--rf-ease);
 }
 .picker-label {
   position: fixed;
   pointer-events: none;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 6px;
   max-width: min(420px, 90vw);
-  padding: 5px 9px;
-  font-size: 12px;
+  height: 24px;
+  padding: 0 8px;
+  font-size: 11.5px;
   font-weight: 500;
-  color: var(--rf-primary-text);
-  background: var(--rf-primary);
-  border-radius: 7px;
+  color: #ffffff;
+  background: var(--rf-accent);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px -3px rgb(15 15 15 / 35%);
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  transition: top 130ms var(--rf-ease), left 130ms var(--rf-ease);
 }
-.picker-label code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.82; }
+.picker-label strong { flex: none; font-weight: 600; }
+.picker-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.75; }
 .picker-hint {
   position: fixed;
   left: 50%;
   bottom: 24px;
   transform: translateX(-50%);
-  padding: 9px 14px;
-  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  font-size: 12.5px;
   color: var(--rf-text);
   background: var(--rf-bg);
-  border: 1px solid var(--rf-border);
   border-radius: 10px;
   box-shadow: var(--rf-shadow);
+  animation: rf-fade 240ms var(--rf-ease);
 }
 .picker-hint kbd {
   padding: 1px 5px;
   font: inherit;
-  font-size: 11.5px;
-  border: 1px solid var(--rf-border);
+  font-size: 11px;
+  color: var(--rf-text-muted);
   border-radius: 4px;
   background: var(--rf-bg-subtle);
+  box-shadow: var(--rf-shadow-inset);
 }
+
 @media (pointer: coarse) {
   .icon-btn, .tool, .swatch {
     width: 44px;
     height: 44px;
   }
 
-  .segmented button, .ghost-btn, .submit, .toolbar .done-btn {
+  .launcher, .segmented button, .ghost-btn, .submit, .toolbar .done-btn {
     min-height: 44px;
   }
 
@@ -1705,7 +2029,6 @@ textarea:focus, input:focus { outline: none; border-color: var(--rf-primary); bo
     justify-content: center;
   }
 }
-
 `;
 //#endregion
 //#region src/feedback/ui/shadow-portal.tsx
@@ -1832,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/;
@@ -1849,20 +2294,20 @@ function buildDescription(params) {
 	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
 	return `[${label}] ${message.trim()}${contact}`;
 }
+async function upload(transport, image) {
+	const { uploadUrl } = await transport.getScreenshotUploadUrl();
+	return await transport.uploadImage(uploadUrl, image);
+}
 async function attachScreenshot(transport, feedbackId, submission) {
 	const { annotated, annotations, context, screenshot } = submission;
 	if (!screenshot) return false;
-	const original = await transport.getScreenshotUploadUrl();
-	const storageId = await transport.uploadImage(original.uploadUrl, screenshot);
-	let annotatedStorageId;
-	if (annotated) {
-		const target = await transport.getScreenshotUploadUrl();
-		annotatedStorageId = await transport.uploadImage(target.uploadUrl, annotated);
-	}
+	const storageId = await upload(transport, screenshot);
+	const annotatedStorageId = annotated ? await upload(transport, annotated) : void 0;
 	const wireAnnotations = toWireAnnotations(annotations);
 	await transport.saveScreenshot({
 		annotatedStorageId,
 		annotations: wireAnnotations.length > 0 ? wireAnnotations : void 0,
+		captureSource: "widget",
 		feedbackId,
 		filename: "screenshot.png",
 		height: screenshot.height,
@@ -1874,6 +2319,21 @@ async function attachScreenshot(transport, feedbackId, submission) {
 	});
 	return true;
 }
+async function attachElement(transport, feedbackId, submission) {
+	const { context, element } = submission;
+	if (!element) return;
+	await transport.saveScreenshot({
+		captureSource: "element",
+		feedbackId,
+		filename: "element.png",
+		height: element.height,
+		mimeType: element.mimeType,
+		pageUrl: context.url,
+		size: element.blob.size,
+		storageId: await upload(transport, element),
+		width: element.width
+	});
+}
 /**
 * Creates the feedback first, then attaches the capture. A failed upload is
 * reported back but never discards what the user wrote.
@@ -1886,12 +2346,8 @@ async function submitWidgetFeedback(transport, submission) {
 		description: buildDescription(submission),
 		title
 	});
-	let screenshotSaved = false;
-	try {
-		screenshotSaved = await attachScreenshot(transport, feedbackId, submission);
-	} catch {
-		screenshotSaved = false;
-	}
+	const screenshotSaved = await attachScreenshot(transport, feedbackId, submission).catch(() => false);
+	await attachElement(transport, feedbackId, submission).catch(() => void 0);
 	return {
 		feedbackId,
 		screenshotSaved
@@ -1919,6 +2375,38 @@ function createFeedbackTransport(client) {
 	};
 }
 //#endregion
+//#region src/feedback/ui/use-route-sync.ts
+/**
+* Calls `refresh` whenever the app navigates client-side while it is active.
+*
+* SPA routes never fire popstate on push/replace — patching history methods is
+* the only way to keep screenshot and URL describing the same page while the
+* reporter is composing.
+*/
+function useRouteSync(enabled, refresh) {
+	useEffect(() => {
+		if (!enabled) return;
+		const originalPush = window.history.pushState.bind(window.history);
+		const originalReplace = window.history.replaceState.bind(window.history);
+		window.history.pushState = function pushState(data, unused, url) {
+			const result = originalPush(data, unused, url);
+			refresh();
+			return result;
+		};
+		window.history.replaceState = function replaceState(data, unused, url) {
+			const result = originalReplace(data, unused, url);
+			refresh();
+			return result;
+		};
+		window.addEventListener("popstate", refresh);
+		return () => {
+			window.history.pushState = originalPush;
+			window.history.replaceState = originalReplace;
+			window.removeEventListener("popstate", refresh);
+		};
+	}, [enabled, refresh]);
+}
+//#endregion
 //#region src/feedback/ui/use-widget-state.ts
 const SUCCESS_CLOSE_DELAY = 2400;
 const IS_APPLE = /Mac|iPhone|iPad/;
@@ -1958,22 +2446,21 @@ 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.
+*/
+function useOwnedCapture() {
+	const [image, setImage] = useState(null);
+	const ref = useRef(null);
+	useEffect(() => {
+		ref.current = image;
+	}, [image]);
+	useEffect(() => () => releaseCapture(ref.current), []);
+	return [image, useCallback((next) => {
+		releaseCapture(ref.current);
+		setImage(next);
+	}, [])];
 }
 function useWidgetState(props) {
 	const context = useContext(RefletContext);
@@ -1990,18 +2477,17 @@ function useWidgetState(props) {
 	const [message, setMessage] = useState("");
 	const [email, setEmail] = useState("");
 	const [honeypot, setHoneypot] = useState("");
-	const [capture, setCapture] = useState(null);
+	const [capture, replaceCapture] = useOwnedCapture();
+	const [elementCapture, replaceElementCapture] = useOwnedCapture();
 	const [annotations, setAnnotations] = useState([]);
 	const [selection, setSelection] = useState(null);
 	const [isCapturing, setIsCapturing] = useState(false);
 	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]);
@@ -2014,23 +2500,22 @@ function useWidgetState(props) {
 			recorder.stop();
 		};
 	}, [props.captureConsole]);
-	useEffect(() => () => {
-		releaseCapture(captureRef.current);
-	}, []);
-	const replaceCapture = useCallback((next) => {
-		releaseCapture(captureRef.current);
-		setCapture(next);
-	}, []);
-	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]);
+	useRouteSync(isOpen && step === "compose" && annotations.length === 0 && !selection && props.captureOnOpen !== false, takeCapture);
 	const reset = useCallback(() => {
-		releaseCapture(captureRef.current);
-		setCapture(null);
+		pickRef.current++;
+		frozenContext.current = null;
+		replaceCapture(null);
+		replaceElementCapture(null);
 		setAnnotations([]);
 		setSelection(null);
 		setMessage("");
@@ -2039,7 +2524,11 @@ function useWidgetState(props) {
 		setError(null);
 		setStep("compose");
 		setCategory(props.defaultCategory ?? "bug");
-	}, [props.defaultCategory]);
+	}, [
+		props.defaultCategory,
+		replaceCapture,
+		replaceElementCapture
+	]);
 	const close = useCallback(() => {
 		setIsOpen(false);
 		reset();
@@ -2069,18 +2558,32 @@ 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;
+		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);
 		setSelection(null);
 		setAnnotations((previous) => previous.filter((item) => !item.id.startsWith("selection-")));
-	}, []);
+	}, [replaceElementCapture]);
 	const removeCapture = useCallback(() => {
+		frozenContext.current = null;
 		replaceCapture(null);
 		setAnnotations([]);
 	}, [replaceCapture]);
@@ -2114,11 +2617,12 @@ function useWidgetState(props) {
 				annotations,
 				category,
 				context: {
-					...collectPageContext({ sdkVersion: SDK_VERSION }),
+					...frozenContext.current ?? collectPageContext({ sdkVersion: "0.3.1" }),
 					consoleEvents: consoleRef.current?.events(),
 					metadata: props.metadata,
 					selection: selection ?? void 0
 				},
+				element: elementCapture,
 				email,
 				isAnonymous,
 				message,
@@ -2139,6 +2643,7 @@ function useWidgetState(props) {
 		category,
 		client,
 		close,
+		elementCapture,
 		email,
 		honeypot,
 		isAnonymous,
@@ -2156,6 +2661,7 @@ function useWidgetState(props) {
 		close,
 		dismiss,
 		dismissForDays,
+		elementCapture,
 		email,
 		error,
 		honeypot,
@@ -2238,22 +2744,18 @@ function RefletFeedback(props) {
 		primaryColor: props.primaryColor,
 		theme,
 		children: [
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
 				className: "root",
 				"data-position": position,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "stack",
-					children: [showPanel && /* @__PURE__ */ jsx(FeedbackPanel, {
-						categories,
-						labels,
-						state
-					}), /* @__PURE__ */ jsx(Launcher, {
-						compact: isOpen,
-						isOpen,
-						label: labels.trigger,
-						onClick: isOpen ? close : open
-					})]
-				})
+				children: [showPanel && /* @__PURE__ */ jsx(FeedbackPanel, {
+					categories,
+					labels,
+					state
+				}), /* @__PURE__ */ jsx(Launcher, {
+					isOpen,
+					label: labels.trigger,
+					onClick: isOpen ? close : open
+				})]
 			}),
 			isOpen && state.step === "annotate" && state.capture && /* @__PURE__ */ jsx(Annotator, {
 				annotations: state.annotations,