reflet-sdk 0.4.0 → 0.4.2

package/dist/feedback.js

@@ -810,7 +810,7 @@ function collectPageContext(options) {
 }
 //#endregion
 //#region src/feedback/types.ts
-const SDK_VERSION = "0.4.0";
+const SDK_VERSION = "0.4.2";
 const DEFAULT_WIDGET_LABELS = {
 	annotateHint: "Draw on the screenshot to point at the problem.",
 	attachElement: "Attach this element",
@@ -821,7 +821,6 @@ const DEFAULT_WIDGET_LABELS = {
 	captureFailed: "Screenshot unavailable. Try again or send without it.",
 	capturing: "Taking screenshot…",
 	clearAnnotations: "Clear drawing",
-	clearSelection: "Remove selected element",
 	descriptionPlaceholder: "What would you like to share?",
 	dismissForDays: "Hide for {days} days",
 	done: "Done",
@@ -830,6 +829,8 @@ const DEFAULT_WIDGET_LABELS = {
 	emailInvalid: "Enter a valid email address.",
 	emailLabel: "Email",
 	emailPlaceholder: "you@company.com",
+	emailPromptBody: "We only use it to follow up on this report.",
+	emailPromptTitle: "Add your email?",
 	errorGeneric: "Something went wrong. Please try again.",
 	errorTitleRequired: "Tell us a bit about it first.",
 	minimize: "Minimize feedback",
@@ -844,6 +845,7 @@ const DEFAULT_WIDGET_LABELS = {
 	retakeHint: "Screenshot of this page",
 	retryAttachments: "Retry attachments",
 	screenshot: "Screenshot",
+	sendWithoutEmail: "Send without email",
 	submit: "Send feedback",
 	successMessage: "We read every report. Thanks for taking the time.",
 	successTitle: "Feedback sent",
@@ -1013,9 +1015,6 @@ function CheckIcon({ size = 28 }) {
 function GripIcon() {
 	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01" }) });
 }
-function MinusIcon() {
-	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
-}
 function MoreIcon() {
 	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h.01M12 12h.01M19 12h.01" }) });
 }
@@ -1736,7 +1735,7 @@ function toImagePoint(canvas, clientX, clientY) {
 		y: Math.max(0, Math.min(canvas.height, (clientY - bounds.top) / bounds.height * canvas.height))
 	};
 }
-function Annotator({ capture, labels, editor }) {
+function Annotator({ capture, labels, editor, note }) {
 	const { annotations, onChange, onDone, onRetake } = editor;
 	const morph = useImageMorph(editor.trigger, onDone);
 	const dialogRef = useRef(null);
@@ -1856,6 +1855,16 @@ function Annotator({ capture, labels, editor }) {
 					onRetake: onRetake ? () => morph.close(onRetake) : void 0
 				},
 				labels
+			}),
+			note && /* @__PURE__ */ jsxs("div", {
+				className: "element-note glass",
+				children: [/* @__PURE__ */ jsx(TargetIcon, {}), /* @__PURE__ */ jsx("textarea", {
+					"aria-label": labels.elementNote,
+					maxLength: 2e3,
+					onChange: (event) => note.onChange(event.target.value),
+					placeholder: labels.elementNotePlaceholder,
+					value: note.comment
+				})]
 			})
 		]
 	});
@@ -1877,6 +1886,156 @@ function Launcher({ isOpen, label, onClick, buttonRef }) {
 	});
 }
 //#endregion
+//#region src/feedback/ui/composer/capture-slot.tsx
+function CaptureSlot({ labels, state }) {
+	const disabled = state.isCapturing || state.isEditingDisabled;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "capture-slot glass",
+		children: [/* @__PURE__ */ jsx("button", {
+			"aria-label": labels.attachScreenshot,
+			className: "capture-action",
+			disabled,
+			onClick: state.takeCapture,
+			title: labels.attachScreenshot,
+			type: "button",
+			children: /* @__PURE__ */ jsx(CameraIcon, {})
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": labels.pickElement,
+			className: "capture-action",
+			disabled,
+			onClick: () => state.setStep("picking"),
+			title: labels.pickElement,
+			type: "button",
+			children: /* @__PURE__ */ jsx(TargetIcon, {})
+		})]
+	});
+}
+//#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 SELECTION_ANNOTATION_PREFIX = "selection-";
+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)
+	};
+}
+function isSelectionAnnotation({ id }) {
+	return id.startsWith(SELECTION_ANNOTATION_PREFIX);
+}
+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_ANNOTATION_PREFIX}${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/ui/annotation/screenshot-preview.tsx
 function ScreenshotPreview({ annotations, capture }) {
 	const { canvasRef } = useAnnotationCanvas(capture, annotations);
@@ -1895,103 +2054,66 @@ function ScreenshotPreview({ annotations, capture }) {
 //#endregion
 //#region src/feedback/ui/composer/screenshot-card.tsx
 function ScreenshotCard({ item, labels, state }) {
-	const { draft, number, multiple } = item;
+	const { draft, number } = item;
+	const previewRef = useRef(null);
 	const isCapturing = state.pendingCapture?.id === draft.id;
 	const disabled = state.isEditingDisabled || state.isCapturing;
+	const drawings = draft.annotations.filter((annotation) => !isSelectionAnnotation(annotation));
 	return /* @__PURE__ */ jsxs("fieldset", {
 		"aria-label": `${labels.screenshot} ${number}`,
-		className: "screenshot-attachment glass",
-		children: [/* @__PURE__ */ jsxs("button", {
-			"aria-label": labels.annotateHint,
-			className: "screenshot-preview",
-			disabled,
-			onClick: (event) => state.annotateScreenshot(draft.id, event.currentTarget),
-			type: "button",
-			children: [/* @__PURE__ */ jsx(ScreenshotPreview, {
-				annotations: draft.annotations,
-				capture: draft.image
-			}), /* @__PURE__ */ jsxs("span", {
-				className: "attachment-caption glass",
-				children: [
-					/* @__PURE__ */ jsx(PencilIcon, {}),
-					/* @__PURE__ */ jsx("span", {
-						className: "attachment-caption-label",
-						children: labels.screenshot
-					}),
-					multiple && /* @__PURE__ */ jsx("span", { children: number }),
-					draft.annotations.length > 0 && /* @__PURE__ */ jsx("span", {
-						className: "annotation-count",
-						children: draft.annotations.length
-					})
-				]
-			})]
-		}), isCapturing ? /* @__PURE__ */ jsxs("div", {
-			className: "capture-progress glass",
-			role: "status",
-			children: [/* @__PURE__ */ jsx("span", { className: "spinner" }), labels.capturing]
-		}) : /* @__PURE__ */ jsxs("div", {
-			className: "attachment-actions glass",
-			children: [/* @__PURE__ */ jsx("button", {
-				"aria-label": labels.recapture,
-				className: "icon-btn",
-				disabled,
-				onClick: () => state.retakeCapture(draft.id),
-				title: labels.recapture,
-				type: "button",
-				children: /* @__PURE__ */ jsx(CameraIcon, {})
-			}), /* @__PURE__ */ jsx("button", {
-				"aria-label": labels.removeScreenshot,
-				className: "icon-btn",
-				disabled,
-				onClick: () => state.removeCapture(draft.id),
-				title: labels.removeScreenshot,
-				type: "button",
-				children: /* @__PURE__ */ jsx(TrashIcon, {})
-			})]
-		})]
+		className: "screenshot-attachment",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "screenshot-preview glass",
+				ref: previewRef,
+				children: /* @__PURE__ */ jsx(ScreenshotPreview, {
+					annotations: draft.annotations,
+					capture: draft.image
+				})
+			}),
+			draft.selection && /* @__PURE__ */ jsx("span", {
+				className: "selection-badge glass",
+				title: draft.selection.comment ?? draft.selection.label,
+				children: /* @__PURE__ */ jsx(TargetIcon, {})
+			}),
+			drawings.length > 0 && /* @__PURE__ */ jsx("span", {
+				className: "annotation-count glass",
+				children: drawings.length
+			}),
+			isCapturing ? /* @__PURE__ */ jsxs("div", {
+				className: "capture-progress glass",
+				role: "status",
+				children: [/* @__PURE__ */ jsx("span", { className: "spinner" }), labels.capturing]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "attachment-actions glass",
+				children: [/* @__PURE__ */ jsx("button", {
+					"aria-label": labels.annotateHint,
+					className: "icon-btn annotate-action",
+					disabled,
+					onClick: (event) => {
+						if (previewRef.current) state.annotateScreenshot(draft.id, {
+							button: event.currentTarget,
+							thumbnail: previewRef.current
+						});
+					},
+					title: labels.annotateHint,
+					type: "button",
+					children: /* @__PURE__ */ jsx(PencilIcon, {})
+				}), /* @__PURE__ */ jsx("button", {
+					"aria-label": labels.removeScreenshot,
+					className: "icon-btn",
+					disabled,
+					onClick: () => state.removeCapture(draft.id),
+					title: labels.removeScreenshot,
+					type: "button",
+					children: /* @__PURE__ */ jsx(TrashIcon, {})
+				})]
+			})
+		]
 	});
 }
 //#endregion
 //#region src/feedback/ui/composer/attachments.tsx
-function SelectedElement({ labels, state }) {
-	if (!state.selection) return null;
-	const { comment, componentStack, label, selector, sourceLocation } = state.selection;
-	const component = componentStack[0];
-	return /* @__PURE__ */ jsxs("div", {
-		className: "selection-chip glass",
-		children: [/* @__PURE__ */ jsxs("button", {
-			"aria-label": labels.pickElement,
-			className: "selection-label",
-			disabled: state.isEditingDisabled || state.isCapturing,
-			onClick: () => state.setStep("picking"),
-			title: comment ?? sourceLocation ?? selector,
-			type: "button",
-			children: [
-				state.elementCapture ? /* @__PURE__ */ jsx("img", {
-					alt: "",
-					height: 32,
-					src: state.elementCapture.objectUrl,
-					width: 32
-				}) : /* @__PURE__ */ jsx(TargetIcon, {}),
-				/* @__PURE__ */ jsx("span", {
-					className: "selection-name",
-					children: component ? `<${component}>` : label
-				}),
-				comment && /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: comment
-				})
-			]
-		}), /* @__PURE__ */ jsx("button", {
-			"aria-label": labels.clearSelection,
-			className: "icon-btn",
-			disabled: state.isEditingDisabled || state.isCapturing,
-			onClick: state.clearSelection,
-			type: "button",
-			children: /* @__PURE__ */ jsx(CloseIcon, {})
-		})]
-	});
-}
 function Attachments({ labels, state }) {
 	const stripRef = useRef(null);
 	const count = state.screenshots.length;
@@ -2000,41 +2122,102 @@ function Attachments({ labels, state }) {
 		if (strip && count > 0) strip.scrollTo?.({ left: strip.scrollWidth });
 	}, [count]);
 	const isAdding = state.pendingCapture && !state.screenshots.some(({ id }) => id === state.pendingCapture?.id);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: "attachments",
-		children: [/* @__PURE__ */ jsx(SelectedElement, {
-			labels,
-			state
-		}), /* @__PURE__ */ jsxs(ScrollArea.Root, {
-			className: "screenshot-scroll-area",
-			children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
-				"aria-label": labels.screenshot,
-				className: "screenshot-strip",
-				ref: stripRef,
-				role: "region",
-				children: /* @__PURE__ */ jsxs(ScrollArea.Content, {
-					className: "screenshot-strip-content",
-					children: [state.screenshots.map((draft, index) => /* @__PURE__ */ jsx(ScreenshotCard, {
-						item: {
-							draft,
-							multiple: count > 1,
-							number: index + 1
-						},
-						labels,
-						state
-					}, draft.id)), isAdding && /* @__PURE__ */ jsxs("div", {
-						"aria-label": labels.capturing,
-						className: "attachment-skeleton glass",
-						role: "status",
-						children: [/* @__PURE__ */ jsx(CameraIcon, {}), /* @__PURE__ */ jsx("span", { children: labels.capturing })]
-					})]
-				})
-			}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
-				className: "screenshot-scrollbar",
-				orientation: "horizontal",
-				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "screenshot-scroll-thumb" })
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "attachment-row",
+			children: [/* @__PURE__ */ jsx(CaptureSlot, {
+				labels,
+				state
+			}), /* @__PURE__ */ jsxs(ScrollArea.Root, {
+				className: "screenshot-scroll-area",
+				children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+					"aria-label": labels.screenshot,
+					className: "screenshot-strip",
+					ref: stripRef,
+					role: "region",
+					children: /* @__PURE__ */ jsxs(ScrollArea.Content, {
+						className: "screenshot-strip-content",
+						children: [state.screenshots.map((draft, index) => /* @__PURE__ */ jsx(ScreenshotCard, {
+							item: {
+								draft,
+								number: index + 1
+							},
+							labels,
+							state
+						}, draft.id)), isAdding && /* @__PURE__ */ jsxs("div", {
+							"aria-label": labels.capturing,
+							className: "attachment-skeleton glass",
+							role: "status",
+							children: [/* @__PURE__ */ jsx(CameraIcon, {}), /* @__PURE__ */ jsx("span", { children: labels.capturing })]
+						})]
+					})
+				}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+					className: "screenshot-scrollbar",
+					orientation: "horizontal",
+					children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "screenshot-scroll-thumb" })
+				})]
 			})]
-		})]
+		})
+	});
+}
+//#endregion
+//#region src/feedback/ui/composer/email-prompt.tsx
+function EmailPrompt({ labels, state }) {
+	const inputRef = useRef(null);
+	const [invalid, setInvalid] = useState(false);
+	useEffect(() => {
+		inputRef.current?.focus();
+	}, []);
+	return /* @__PURE__ */ jsxs("form", {
+		className: "email-prompt glass",
+		onSubmit: (event) => {
+			event.preventDefault();
+			state.submit();
+		},
+		children: [
+			/* @__PURE__ */ jsx("h2", { children: labels.emailPromptTitle }),
+			/* @__PURE__ */ jsx("p", { children: labels.emailPromptBody }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "email-field",
+				children: [/* @__PURE__ */ jsx("input", {
+					"aria-invalid": invalid,
+					"aria-label": labels.emailLabel,
+					autoComplete: "email",
+					onChange: (event) => {
+						setInvalid(false);
+						state.setEmail(event.target.value);
+					},
+					onInvalid: (event) => {
+						event.preventDefault();
+						setInvalid(true);
+					},
+					placeholder: labels.emailPlaceholder,
+					ref: inputRef,
+					type: "email",
+					value: state.email
+				}), invalid && /* @__PURE__ */ jsx("span", {
+					role: "alert",
+					children: labels.emailInvalid
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "email-prompt-actions",
+				children: [/* @__PURE__ */ jsx("button", {
+					className: "ghost-btn",
+					onClick: () => {
+						state.setEmail("");
+						state.submit();
+					},
+					type: "button",
+					children: labels.sendWithoutEmail
+				}), /* @__PURE__ */ jsx("button", {
+					className: "primary-btn",
+					type: "submit",
+					children: labels.submit
+				})]
+			})
+		]
 	});
 }
 //#endregion
@@ -2110,64 +2293,37 @@ function ComposerOptions({ labels, state }) {
 	});
 }
 //#endregion
-//#region src/feedback/ui/composer/controls.tsx
-function ComposerControls({ floatingControls, labels, state }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "composer-toolbar",
-		children: [floatingControls, /* @__PURE__ */ jsxs("div", {
-			className: "composer-controls glass",
-			children: [
-				/* @__PURE__ */ jsx("button", {
-					"aria-label": labels.attachScreenshot,
-					className: "icon-btn",
-					disabled: state.isCapturing || state.isEditingDisabled,
-					onClick: state.takeCapture,
-					title: labels.attachScreenshot,
-					type: "button",
-					children: /* @__PURE__ */ jsx(CameraIcon, {})
-				}),
-				/* @__PURE__ */ jsx("button", {
-					"aria-label": labels.pickElement,
-					className: "icon-btn",
-					disabled: state.isEditingDisabled || state.isCapturing,
-					onClick: () => state.setStep("picking"),
-					title: labels.pickElement,
-					type: "button",
-					children: /* @__PURE__ */ jsx(TargetIcon, {})
-				}),
-				/* @__PURE__ */ jsx(ComposerOptions, {
-					labels,
-					state
-				})
-			]
-		})]
-	});
-}
-//#endregion
 //#region src/feedback/ui/composer/message-input.tsx
-function MessageInput({ labels, state }) {
-	const [expanded, setExpanded] = useState(false);
+function MessageInput({ floatingControls, labels, state }) {
 	const submitLabel = state.hasPendingAttachments ? labels.retryAttachments : labels.submit;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "message-row glass",
-		"data-expanded": expanded,
 		children: [/* @__PURE__ */ jsx("textarea", {
 			"aria-label": labels.descriptionPlaceholder,
 			disabled: state.isEditingDisabled,
 			maxLength: 4e3,
 			onChange: (event) => state.setMessage(event.target.value),
-			onFocus: () => setExpanded(true),
 			placeholder: labels.descriptionPlaceholder,
-			rows: expanded ? 3 : 1,
+			rows: 3,
 			value: state.message
-		}), /* @__PURE__ */ jsx("button", {
-			"aria-busy": state.isSubmitting,
-			"aria-label": submitLabel,
-			className: "submit",
-			disabled: state.isSubmitting || state.isCapturing || !state.canSubmit,
-			title: submitLabel,
-			type: "submit",
-			children: state.isSubmitting ? /* @__PURE__ */ jsx("span", { className: "spinner" }) : /* @__PURE__ */ jsx(ArrowIcon, {})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "message-actions",
+			children: [
+				floatingControls,
+				/* @__PURE__ */ jsx(ComposerOptions, {
+					labels,
+					state
+				}),
+				/* @__PURE__ */ jsx("button", {
+					"aria-busy": state.isSubmitting,
+					"aria-label": submitLabel,
+					className: "submit",
+					disabled: state.isSubmitting || state.isCapturing || !state.canSubmit,
+					title: submitLabel,
+					type: "submit",
+					children: state.isSubmitting ? /* @__PURE__ */ jsx("span", { className: "spinner" }) : /* @__PURE__ */ jsx(ArrowIcon, {})
+				})
+			]
 		})]
 	});
 }
@@ -2193,6 +2349,26 @@ function FeedbackPanel({ floatingControls, labels, state }) {
 			children: floatingControls
 		})]
 	});
+	if (state.step === "email") return /* @__PURE__ */ jsxs("section", {
+		"aria-label": labels.emailPromptTitle,
+		className: "panel",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": labels.back,
+				className: "email-scrim",
+				onClick: () => state.setStep("compose"),
+				type: "button"
+			}),
+			/* @__PURE__ */ jsx(EmailPrompt, {
+				labels,
+				state
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "composer-toolbar",
+				children: floatingControls
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("section", {
 		"aria-label": labels.title,
 		className: "panel",
@@ -2205,14 +2381,10 @@ function FeedbackPanel({ floatingControls, labels, state }) {
 			className: "composer",
 			onSubmit: (event) => {
 				event.preventDefault();
-				state.submit();
+				state.requestSubmit();
 			},
 			children: [
 				/* @__PURE__ */ jsx(MessageInput, {
-					labels,
-					state
-				}),
-				/* @__PURE__ */ jsx(ComposerControls, {
 					floatingControls,
 					labels,
 					state
@@ -2343,13 +2515,18 @@ function clampPosition(point, bounds, viewport = visibleViewport()) {
 		y: Math.max(viewport.top + EDGE_GAP$1, Math.min(point.y, viewport.top + viewport.height - bounds.height - EDGE_GAP$1))
 	};
 }
-function useFloatingPosition(corner = "bottom-right") {
+function useFloatingPosition(corner = "bottom-right", isPanelOpen = false) {
 	const rootRef = useRef(null);
 	const gesture = useRef(null);
 	const [position, setPosition] = useState(null);
+	const [positionedPanelOpen, setPositionedPanelOpen] = useState(isPanelOpen);
 	const [viewport, setViewport] = useState(visibleViewport);
 	const horizontalEdge = corner.endsWith("right") ? "right" : "left";
 	const verticalEdge = corner.startsWith("bottom") ? "bottom" : "top";
+	if (positionedPanelOpen !== isPanelOpen) {
+		setPositionedPanelOpen(isPanelOpen);
+		setPosition(null);
+	}
 	const moveTo = useCallback((point, bounds) => {
 		const fitted = clampPosition(point, bounds);
 		const visible = visibleViewport();
@@ -2388,9 +2565,11 @@ function useFloatingPosition(corner = "bottom-right") {
 	};
 	const onPointerMove = (event) => {
 		const bounds = rootRef.current?.getBoundingClientRect();
-		if (bounds && gesture.current) moveTo({
-			x: event.clientX - gesture.current.x,
-			y: event.clientY - gesture.current.y
+		const grab = gesture.current;
+		if (!(bounds && grab && event.currentTarget.hasPointerCapture(event.pointerId))) return;
+		moveTo({
+			x: event.clientX - grab.x,
+			y: event.clientY - grab.y
 		}, bounds);
 	};
 	const onKeyDown = (event) => {
@@ -2408,6 +2587,9 @@ function useFloatingPosition(corner = "bottom-right") {
 	return {
 		handleProps: {
 			onKeyDown,
+			onLostPointerCapture: () => {
+				gesture.current = null;
+			},
 			onPointerCancel: () => {
 				gesture.current = null;
 			},
@@ -2427,26 +2609,35 @@ function useFloatingPosition(corner = "bottom-right") {
 function FloatingWidget({ labels, position, state }) {
 	const [minimized, setMinimized] = useState(false);
 	const launcherRef = useRef(null);
-	const floating = useFloatingPosition(position);
 	const showPanel = state.isOpen && !minimized;
+	const floating = useFloatingPosition(position, showPanel);
 	const minimize = () => {
 		setMinimized(true);
 		requestAnimationFrame(() => launcherRef.current?.focus());
 	};
 	useEffect(() => {
-		if (state.step === "compose") state.annotationTrigger?.focus({ preventScroll: true });
+		if (state.step === "compose") state.annotationTrigger?.button.focus({ preventScroll: true });
 	}, [state.step, state.annotationTrigger]);
 	useEffect(() => {
 		if (!showPanel || state.step !== "compose") return;
 		const onKeyDown = (event) => {
-			if (event.key === "Escape" && !event.defaultPrevented) {
+			if (event instanceof KeyboardEvent && event.key === "Escape" && !event.defaultPrevented) {
 				setMinimized(true);
 				requestAnimationFrame(() => launcherRef.current?.focus());
 			}
 		};
+		const widgetRoot = floating.rootRef.current?.getRootNode();
 		document.addEventListener("keydown", onKeyDown);
-		return () => document.removeEventListener("keydown", onKeyDown);
-	}, [showPanel, state.step]);
+		widgetRoot?.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+			widgetRoot?.removeEventListener("keydown", onKeyDown);
+		};
+	}, [
+		floating.rootRef,
+		showPanel,
+		state.step
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "root",
 		"data-editing": state.isOpen && (state.step === "picking" || state.step === "annotate"),
@@ -2455,10 +2646,10 @@ function FloatingWidget({ labels, position, state }) {
 		ref: floating.rootRef,
 		children: [
 			/* @__PURE__ */ jsx("style", { children: floating.styles }),
-			showPanel && state.step === "compose" && /* @__PURE__ */ jsx(SelectionOutline, { node: state.selectedNode }),
+			showPanel && state.step === "compose" && state.screenshots.map(({ id, selectedNode }) => selectedNode ? /* @__PURE__ */ jsx(SelectionOutline, { node: selectedNode }, id) : null),
 			showPanel ? /* @__PURE__ */ jsx(FeedbackPanel, {
 				floatingControls: /* @__PURE__ */ jsxs("div", {
-					className: "floating-controls glass",
+					className: "floating-controls",
 					children: [/* @__PURE__ */ jsx("button", {
 						"aria-label": labels.moveFeedback,
 						className: "icon-btn drag-handle",
@@ -2472,7 +2663,7 @@ function FloatingWidget({ labels, position, state }) {
 						onClick: minimize,
 						title: labels.minimize,
 						type: "button",
-						children: /* @__PURE__ */ jsx(MinusIcon, {})
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
 					})]
 				}),
 				labels,
@@ -2807,9 +2998,15 @@ const ANNOTATOR_STYLES = `
 .overlay[data-opening="true"] .editor { pointer-events: none; }
 .overlay[data-closing="true"] { pointer-events: none; }
 .overlay[data-closing="true"]::before { opacity: 0; }
-.overlay[data-closing="true"] .toolbar { opacity: 0; transform: translateY(8px); }
+.overlay[data-closing="true"] .toolbar, .overlay[data-closing="true"] .element-note { opacity: 0; transform: translateY(8px); }
+
+.element-note { order: 1; display: flex; align-items: flex-start; gap: 10px; width: min(560px, calc(100vw - 32px)); margin: 0 auto 10px; padding: 10px 14px; border-radius: var(--rf-radius); transition: opacity 180ms var(--rf-ease), transform 180ms var(--rf-ease); }
+.element-note svg { flex: none; margin-top: 4px; opacity: 0.7; }
+.element-note textarea { flex: 1; min-width: 0; height: 42px; max-height: 96px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; resize: none; }
+.element-note textarea:focus { outline: none; }
+.element-note:focus-within { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
 
-.toolbar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; transition: opacity 180ms var(--rf-ease), transform 180ms var(--rf-ease); padding: 4px 12px max(16px, env(safe-area-inset-bottom)); }
+.toolbar { order: 2; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; transition: opacity 180ms var(--rf-ease), transform 180ms var(--rf-ease); padding: 4px 12px max(16px, env(safe-area-inset-bottom)); }
 .toolbar .group { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--rf-pill); }
 .tool[aria-pressed="true"], .tool[data-selected="true"] { background: var(--rf-primary); color: var(--rf-primary-text); }
 .color-picker { position: relative; }
@@ -2864,22 +3061,21 @@ const COMPOSER_STYLES = `
 .panel { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; outline: none; animation: rf-in 240ms var(--rf-ease); }
 .success-panel { border-radius: var(--rf-radius); }
 .composer { position: relative; display: flex; flex-direction: column; gap: 8px; }
-.message-row { display: flex; align-items: flex-end; gap: 4px; padding: 4px; border-radius: 26px; }
+.message-row { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 26px; }
 .message-row textarea {
-  flex: 1; width: 0; min-height: 36px; height: 36px; max-height: min(140px, 30dvh);
-  margin: 0; padding: 8px 10px 8px 12px; border: 0; border-radius: 20px; resize: none;
+  width: 100%; height: 76px; max-height: min(140px, 30dvh);
+  margin: 0; padding: 6px 6px 0 8px; border: 0; resize: none;
   background: transparent; line-height: 20px;
 }
-.panel:focus-within .message-row[data-expanded="true"] textarea { height: 76px; }
+.message-actions { display: flex; align-items: center; gap: 2px; }
 .message-row textarea::placeholder { color: var(--rf-text-muted); }
 .message-row textarea:focus { outline: none; }
 .message-row:has(textarea:focus-visible) { border-color: color-mix(in srgb, var(--rf-accent) 40%, var(--rf-glass-stroke)); }
-.submit { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: var(--rf-pill); background: var(--rf-primary); color: var(--rf-primary-text); transition: opacity 160ms var(--rf-ease), transform 160ms var(--rf-ease); }
+.submit { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--rf-pill); background: var(--rf-primary); color: var(--rf-primary-text); transition: opacity 160ms var(--rf-ease), transform 160ms var(--rf-ease); }
 .submit svg { transform: rotate(-45deg); }
 .submit:hover:enabled { transform: scale(1.05); }
 .submit:disabled { background: var(--rf-bg-hover); color: var(--rf-text-muted); opacity: .65; }
 .composer-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
-.composer-controls { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--rf-pill); }
 .composer-options { position: relative; }
 summary { cursor: pointer; list-style: none; }
 summary::-webkit-details-marker { display: none; }
@@ -2892,47 +3088,67 @@ summary::-webkit-details-marker { display: none; }
 .dismiss-btn:hover { background: var(--rf-bg-hover); }
 .version-info { font-size: 10px; color: var(--rf-text-muted); padding: 4px 8px 0; border-top: 1px solid var(--rf-border); text-decoration: none; }
 .version-info:hover { color: var(--rf-text); }
+.email-scrim { display: none; }
+.email-prompt { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; animation: rf-in 240ms var(--rf-ease); }
+.email-prompt h2 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
+.email-prompt p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--rf-text-muted); }
+.email-prompt .email-field input { min-height: 40px; border-radius: 14px; padding: 0 12px; }
+.email-prompt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
+.email-prompt-actions .ghost-btn { padding: 0 12px; color: var(--rf-text-muted); }
+.primary-btn { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--rf-pill); background: var(--rf-primary); color: var(--rf-primary-text); font-weight: 500; }
+.primary-btn:hover { opacity: .9; }
 .attachments { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
-.screenshot-scroll-area { position: relative; min-width: 0; max-width: calc(100% + 8px); margin: -4px -4px -8px; }
-.screenshot-strip { width: 100%; padding: 4px 4px 8px; overscroll-behavior-x: contain; --rf-fade-start: 0px; --rf-fade-end: 0px; mask-image: linear-gradient(to right, transparent, black var(--rf-fade-start), black calc(100% - var(--rf-fade-end)), transparent); mask-repeat: no-repeat; }
-.screenshot-strip[data-overflow-x-start] { --rf-fade-start: min(24px, var(--scroll-area-overflow-x-start)); }
-.screenshot-strip[data-overflow-x-end] { --rf-fade-end: min(24px, var(--scroll-area-overflow-x-end)); }
+.attachment-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; max-width: 100%; }
+.screenshot-scroll-area { position: relative; min-width: 0; margin: -14px -10px -20px; }
+.screenshot-strip { width: 100%; padding: 14px 10px 20px; overscroll-behavior-x: contain; --rf-fade-start: 0px; --rf-fade-end: 0px; mask-image: linear-gradient(to right, transparent, black var(--rf-fade-start), black calc(100% - var(--rf-fade-end)), transparent); mask-repeat: no-repeat; }
+.screenshot-strip[data-overflow-x-start] { --rf-fade-start: calc(10px + min(24px, var(--scroll-area-overflow-x-start))); }
+.screenshot-strip[data-overflow-x-end] { --rf-fade-end: calc(10px + min(24px, var(--scroll-area-overflow-x-end))); }
 .screenshot-strip-content { display: flex; align-items: flex-end; gap: 8px; }
 .screenshot-scroll-area:has(.screenshot-strip-content:empty) { display: none; }
-.attachments:has(.screenshot-strip-content:empty):not(:has(.selection-chip)) { display: none; }
+.capture-slot { display: flex; flex-direction: column; gap: 2px; flex: none; width: 56px; height: var(--rf-attachment-height); padding: 3px; border: 1px dashed var(--rf-border); border-radius: var(--rf-radius); box-shadow: none; }
+.capture-action { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; border-radius: 5px; color: var(--rf-text-muted); transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease); }
+.capture-action:first-child { border-radius: 16px 16px 5px 5px; }
+.capture-action:last-child { border-radius: 5px 5px 16px 16px; }
+.capture-action:hover:enabled { background: var(--rf-bg-hover); color: var(--rf-text); }
 .screenshot-scrollbar { height: 4px; margin: 0 8px 2px; opacity: 0; transition: opacity 150ms var(--rf-ease); }
 .screenshot-scrollbar[data-hovering], .screenshot-scrollbar[data-scrolling] { opacity: 1; }
 .screenshot-scroll-thumb { border-radius: var(--rf-pill); background: var(--rf-border); }
-.capture-progress { position: absolute; inset: 3px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border-radius: 16px; color: var(--rf-text-muted); font-size: 10px; }
+.capture-progress { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border-radius: inherit; color: var(--rf-text-muted); font-size: 10px; }
 .attachments:empty { display: none; }
-.screenshot-attachment, .attachment-skeleton { position: relative; flex: none; margin: 0; min-width: 0; width: 128px; height: 78px; padding: 3px; border-radius: var(--rf-radius); animation: rf-in 260ms var(--rf-ease); }
-.screenshot-preview { display: block; position: relative; width: 100%; height: 100%; padding: 0; overflow: hidden; border-radius: 16px; }
-.screenshot-preview img, .screenshot-preview canvas { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; outline: 1px solid var(--rf-hairline); outline-offset: -1px; }
+.screenshot-attachment, .attachment-skeleton { position: relative; flex: none; margin: 0; min-width: 0; width: 128px; height: var(--rf-attachment-height); padding: 0; border-radius: 16px; animation: rf-in 260ms var(--rf-ease); }
+.screenshot-attachment { border: 0; }
+.screenshot-preview { display: block; position: relative; width: 100%; height: 100%; padding: 0; border-radius: inherit; overflow: hidden; }
+.screenshot-preview img, .screenshot-preview canvas { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
 .screenshot-preview canvas { position: absolute; inset: 0; pointer-events: none; }
-.attachment-caption { position: absolute; left: 5px; bottom: 5px; display: flex; align-items: center; gap: 4px; padding: 3px 6px; font-size: 10px; font-variant-numeric: tabular-nums; border-radius: var(--rf-pill); color: var(--rf-text); }
-.attachment-caption svg { width: 12px; height: 12px; }
-.annotation-count { color: var(--rf-text); font-weight: 600; }
-.attachment-actions { position: absolute; right: 4px; bottom: -4px; display: flex; gap: 1px; padding: 1px; border-radius: var(--rf-pill); opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity 150ms var(--rf-ease), transform 150ms var(--rf-ease); }
-.screenshot-attachment:hover .attachment-actions, .screenshot-attachment:focus-within .attachment-actions { opacity: 1; pointer-events: auto; transform: none; }
-.screenshot-attachment:hover .attachment-caption, .screenshot-attachment:focus-within .attachment-caption { opacity: 0; }
+.annotation-count { position: absolute; left: 5px; bottom: 5px; min-width: 20px; padding: 2px 6px; border-radius: var(--rf-pill); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; color: var(--rf-text); }
+.attachment-actions { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 1px; padding: 1px; border-radius: var(--rf-pill); }
+.attachment-actions .icon-btn { width: 28px; height: 28px; }
+.attachment-actions svg { width: 14px; height: 14px; }
 .attachment-skeleton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--rf-text-muted); font-size: 11px; }
 .attachment-skeleton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--rf-bg-subtle); animation: rf-fade 800ms alternate infinite; }
-.selection-chip { display: flex; align-items: center; max-width: 100%; padding: 3px; border-radius: var(--rf-pill); }
-.selection-label { display: flex; align-items: center; min-width: 0; gap: 6px; padding: 0 6px; font-size: 11px; }
-.selection-name { flex: none; font-weight: 600; color: var(--rf-accent); }
-.selection-label img { object-fit: contain; border-radius: var(--rf-pill); outline: 1px solid var(--rf-hairline); outline-offset: -1px; }
+.selection-badge { position: absolute; left: 5px; top: 5px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--rf-pill); color: var(--rf-accent); }
+.selection-badge svg { width: 12px; height: 12px; }
 @media (pointer: coarse) {
   .message-row { border-radius: 28px; }
-  .message-row textarea { font-size: 16px; min-height: 44px; height: 44px; padding-top: 12px; }
+  .capture-slot { width: 64px; }
+  .message-row textarea { font-size: 16px; }
   .submit { width: 44px; height: 44px; }
-  .attachment-actions { opacity: 1; pointer-events: auto; transform: none; }
-  .attachment-caption { top: 4px; bottom: auto; right: 4px; left: auto; }
-  .attachment-caption-label { display: none; }
-  .screenshot-attachment:hover .attachment-caption, .screenshot-attachment:focus-within .attachment-caption { opacity: 1; }
-  .screenshot-attachment, .attachment-skeleton { height: 96px; }
+  :host { --rf-attachment-height: 96px; }
+  .attachment-actions { right: 5px; bottom: 5px; }
+  .attachment-actions .icon-btn { width: 34px; height: 34px; }
+  .selection-badge { width: 24px; height: 24px; }
   .email-field input { font-size: 16px; }
-  .dismiss-btn, .selection-label { min-height: 44px; }
+  .dismiss-btn { min-height: 44px; }
 }
+@media (max-width: 480px) {
+  .email-scrim { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 40%); animation: rf-fade 200ms var(--rf-ease); }
+  .email-prompt { position: fixed; left: 0; right: 0; bottom: 0; gap: 14px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; animation: rf-drawer-in 280ms var(--rf-ease); }
+  .email-prompt h2 { font-size: 17px; }
+  .email-prompt p { font-size: 13px; }
+  .email-prompt-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
+  .email-prompt-actions .ghost-btn, .email-prompt-actions .primary-btn { justify-content: center; min-height: 48px; }
+}
+@keyframes rf-drawer-in { from { transform: translateY(100%); } }
 `;
 //#endregion
 //#region src/feedback/ui/floating/picker-styles.ts
@@ -2997,7 +3213,7 @@ const PICKER_STYLES = `
   color: var(--rf-text);
   background: var(--rf-bg);
   border-radius: var(--rf-pill);
-  box-shadow: var(--rf-shadow);
+  box-shadow: var(--rf-ring), var(--rf-shadow);
   animation: rf-fade 240ms var(--rf-ease);
 }
 .picker-instruction { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -3093,14 +3309,16 @@ const WIDGET_STYLES = `
   --rf-spectrum: conic-gradient(#ff5757, #ffde59, #6bdb78, #4ac9fa, #8b5cf6, #ef73dc, #ff5757);
   --rf-radius: 20px;
   --rf-pill: 999px;
+  --rf-attachment-height: 78px;
   --rf-width: 360px;
   --rf-glass: rgb(255 255 255 / 72%);
   --rf-glass-highlight: rgb(255 255 255 / 90%);
   --rf-glass-stroke: rgb(255 255 255 / 70%);
   --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 1px rgb(15 15 15 / 4%);
+  --rf-shadow-low: 0 1px 2px rgb(15 15 15 / 6%), 0 4px 10px -4px rgb(15 15 15 / 10%);
+  --rf-shadow: 0 2px 5px -1px rgb(15 15 15 / 7%), 0 12px 32px -8px rgb(15 15 15 / 16%);
   --rf-shadow-float: 0 4px 12px -3px rgb(15 15 15 / 35%);
   --rf-ease: cubic-bezier(0.16, 1, 0.3, 1);
   color-scheme: light;
@@ -3124,8 +3342,9 @@ const WIDGET_STYLES = `
   --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%);
+  --rf-ring: 0 0 0 1px rgb(255 255 255 / 7%);
+  --rf-shadow-low: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 10px -4px rgb(0 0 0 / 40%);
+  --rf-shadow: 0 2px 5px -1px rgb(0 0 0 / 35%), 0 14px 36px -10px rgb(0 0 0 / 55%);
   --rf-shadow-float: 0 4px 14px -3px rgb(0 0 0 / 55%);
   color-scheme: dark;
 }
@@ -3173,8 +3392,8 @@ svg { flex-shrink: 0; }
 .launcher-icon { display: flex; width: 15px; height: 15px; }
 .launcher-icon .on-close { display: none; }
 .floating-controls {
-  display: flex; align-items: center; padding: 3px; flex: none;
-  border-radius: var(--rf-pill);
+  display: flex; align-items: center; flex: none;
+  margin-right: auto; padding-left: 3px;
   animation: rf-in 220ms var(--rf-ease);
 }
 .drag-handle { touch-action: none; cursor: grab; }
@@ -3236,6 +3455,11 @@ ${PICKER_STYLES}
 //#endregion
 //#region src/feedback/ui/shadow-portal.tsx
 const DARK_QUERY = "(prefers-color-scheme: dark)";
+const KEY_EVENTS = [
+	"keydown",
+	"keyup",
+	"keypress"
+];
 function useResolvedTheme(theme) {
 	const [systemDark, setSystemDark] = useState(false);
 	useEffect(() => {
@@ -3261,6 +3485,7 @@ function ShadowPortal({ children, offset, primaryColor, theme }) {
 		const host = document.createElement("div");
 		host.setAttribute(WIDGET_MARKER, "");
 		const root = host.attachShadow({ mode: "open" });
+		for (const type of KEY_EVENTS) root.addEventListener(type, (event) => event.stopPropagation());
 		const style = document.createElement("style");
 		style.textContent = WIDGET_STYLES;
 		root.append(style);
@@ -3358,140 +3583,18 @@ 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/submission/upload-screenshots.ts
 async function uploadImage(transport, image) {
 	const { uploadUrl } = await transport.getScreenshotUploadUrl();
 	return transport.uploadImage(uploadUrl, image);
 }
 async function prepareScreenshot(transport, screenshot, index) {
-	const { image, annotations, context } = screenshot;
+	const { closeUp, image, annotations, context } = screenshot;
 	const annotated = annotations.length > 0 ? await renderAnnotatedImage(image, annotations) : null;
 	if (annotations.length > 0 && !annotated) throw new Error("Could not render your annotations. Please try again.");
 	try {
 		const storageId = await uploadImage(transport, image);
-		return {
+		const prepared = [{
 			annotatedStorageId: annotated ? await uploadImage(transport, annotated) : void 0,
 			annotations: annotations.length > 0 ? toWireAnnotations(annotations) : void 0,
 			captureSource: "widget",
@@ -3502,28 +3605,27 @@ async function prepareScreenshot(transport, screenshot, index) {
 			size: image.blob.size,
 			storageId,
 			width: image.width
-		};
+		}];
+		if (closeUp) prepared.push({
+			captureSource: "element",
+			filename: `element-${index + 1}.png`,
+			height: closeUp.height,
+			mimeType: closeUp.mimeType,
+			pageUrl: context.url,
+			size: closeUp.blob.size,
+			storageId: await uploadImage(transport, closeUp),
+			width: closeUp.width
+		});
+		return prepared;
 	} finally {
 		releaseCapture(annotated);
 	}
 }
 async function uploadScreenshots(transport, submission) {
-	const prepared = (await Promise.allSettled(submission.screenshots.map((screenshot, index) => prepareScreenshot(transport, screenshot, index)))).map((result) => {
+	return (await Promise.allSettled(submission.screenshots.map((screenshot, index) => prepareScreenshot(transport, screenshot, index)))).flatMap((result) => {
 		if (result.status === "rejected") throw result.reason;
 		return result.value;
 	});
-	const element = submission.element;
-	if (element) prepared.push({
-		captureSource: "element",
-		filename: "element.png",
-		height: element.height,
-		mimeType: element.mimeType,
-		pageUrl: submission.context.url,
-		size: element.blob.size,
-		storageId: await uploadImage(transport, element),
-		width: element.width
-	});
-	return prepared;
 }
 //#endregion
 //#region src/feedback/core/submit.ts
@@ -3643,36 +3745,28 @@ function useFeedbackSubmission(options) {
 	};
 }
 //#endregion
-//#region src/feedback/ui/state/use-owned-capture.ts
-function useOwnedCapture() {
-	const [image, setImage] = useState(null);
-	const ownedImage = useRef(null);
-	useEffect(() => () => releaseCapture(ownedImage.current), []);
-	return [image, useCallback((nextImage) => {
-		releaseCapture(ownedImage.current);
-		ownedImage.current = nextImage;
-		setImage(nextImage);
-	}, [])];
-}
-//#endregion
 //#region src/feedback/ui/state/use-screenshot-drafts.ts
+function releaseDraft(draft) {
+	releaseCapture(draft?.image);
+	releaseCapture(draft?.closeUp);
+}
 function useScreenshotDrafts(captureFailed, onError) {
 	const [screenshots, setScreenshots] = useState([]);
 	const [activeId, setActiveId] = useState(null);
 	const [pendingCapture, setPendingCapture] = useState(null);
-	const ownedImages = useRef(/* @__PURE__ */ new Map());
+	const ownedDrafts = useRef(/* @__PURE__ */ new Map());
 	const captureRequest = useRef(null);
 	useEffect(() => {
-		const images = ownedImages.current;
+		const drafts = ownedDrafts.current;
 		return () => {
 			captureRequest.current = null;
-			for (const image of images.values()) releaseCapture(image);
-			images.clear();
+			for (const draft of drafts.values()) releaseDraft(draft);
+			drafts.clear();
 		};
 	}, []);
 	const storeScreenshot = useCallback((screenshot) => {
-		releaseCapture(ownedImages.current.get(screenshot.id));
-		ownedImages.current.set(screenshot.id, screenshot.image);
+		releaseDraft(ownedDrafts.current.get(screenshot.id));
+		ownedDrafts.current.set(screenshot.id, screenshot);
 		setScreenshots((previous) => {
 			return previous.some(({ id }) => id === screenshot.id) ? previous.map((item) => item.id === screenshot.id ? screenshot : item) : [...previous, screenshot];
 		});
@@ -3717,27 +3811,27 @@ function useScreenshotDrafts(captureFailed, onError) {
 	}, [takeScreenshot]);
 	const refreshAutomatic = useCallback(() => {
 		takeScreenshot({
-			id: ownedImages.current.keys().next().value ?? captureRequest.current?.id ?? crypto.randomUUID(),
+			id: ownedDrafts.current.keys().next().value ?? captureRequest.current?.id ?? crypto.randomUUID(),
 			source: "automatic"
 		});
 	}, [takeScreenshot]);
 	const retakeCapture = useCallback((id) => {
-		if (!captureRequest.current && ownedImages.current.has(id)) takeScreenshot({
+		if (!captureRequest.current && ownedDrafts.current.has(id)) takeScreenshot({
 			id,
 			source: "manual"
 		});
 	}, [takeScreenshot]);
 	const removeCapture = useCallback((id) => {
 		if (captureRequest.current?.id === id) cancelPendingCapture();
-		releaseCapture(ownedImages.current.get(id));
-		ownedImages.current.delete(id);
+		releaseDraft(ownedDrafts.current.get(id));
+		ownedDrafts.current.delete(id);
 		setScreenshots((previous) => previous.filter((item) => item.id !== id));
 		setActiveId((current) => current === id ? null : current);
 	}, [cancelPendingCapture]);
 	const resetScreenshots = useCallback(() => {
 		cancelPendingCapture();
-		for (const image of ownedImages.current.values()) releaseCapture(image);
-		ownedImages.current.clear();
+		for (const draft of ownedDrafts.current.values()) releaseDraft(draft);
+		ownedDrafts.current.clear();
 		setScreenshots([]);
 		setActiveId(null);
 	}, [cancelPendingCapture]);
@@ -3747,16 +3841,18 @@ function useScreenshotDrafts(captureFailed, onError) {
 			annotations
 		} : item));
 	}, [activeId]);
-	const clearSelectionAnnotations = useCallback(() => {
-		setScreenshots((previous) => previous.map((item) => ({
+	const setSelectionComment = useCallback((id, comment) => {
+		setScreenshots((previous) => previous.map((item) => item.id === id && item.selection ? {
 			...item,
-			annotations: item.annotations.filter(({ id }) => !id.startsWith("selection-"))
-		})));
+			selection: {
+				...item.selection,
+				comment
+			}
+		} : item));
 	}, []);
 	return {
 		activeScreenshot: screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null,
 		cancelPendingCapture,
-		clearSelectionAnnotations,
 		pendingCapture,
 		refreshAutomatic,
 		removeCapture,
@@ -3765,6 +3861,7 @@ function useScreenshotDrafts(captureFailed, onError) {
 		screenshots,
 		selectScreenshot: setActiveId,
 		setAnnotations,
+		setSelectionComment,
 		storeScreenshot,
 		takeCapture
 	};
@@ -3885,9 +3982,6 @@ function useWidgetState(props) {
 	const [message, setMessage] = useState("");
 	const [email, setEmail] = useState("");
 	const [honeypot, setHoneypot] = useState("");
-	const [elementCapture, replaceElementCapture] = useOwnedCapture();
-	const [selection, setSelection] = useState(null);
-	const [selectedNode, setSelectedNode] = useState(null);
 	const [isElementCapturing, setIsElementCapturing] = useState(false);
 	const successTimer = useRef(null);
 	const [error, setError] = useState(null);
@@ -3912,7 +4006,7 @@ function useWidgetState(props) {
 	}, [props.captureConsole]);
 	const captureFailed = props.labels?.captureFailed ?? DEFAULT_WIDGET_LABELS.captureFailed;
 	const gallery = useScreenshotDrafts(captureFailed, setError);
-	const { activeScreenshot, cancelPendingCapture, clearSelectionAnnotations, refreshAutomatic, resetScreenshots, storeScreenshot } = gallery;
+	const { activeScreenshot, cancelPendingCapture, refreshAutomatic, resetScreenshots, storeScreenshot } = gallery;
 	const capture = activeScreenshot?.image ?? null;
 	const annotations = activeScreenshot?.annotations ?? [];
 	const isCapturing = gallery.pendingCapture !== null || isElementCapturing;
@@ -3929,7 +4023,7 @@ function useWidgetState(props) {
 	const { resetSubmission } = submission;
 	const firstCapture = gallery.pendingCapture ?? gallery.screenshots[0];
 	const canRefreshAutomatically = gallery.screenshots.length <= 1 && firstCapture?.source === "automatic";
-	useCaptureSync(isOpen && !submission.isEditingDisabled && step === "compose" && canRefreshAutomatically && annotations.length === 0 && !selection && props.captureOnOpen !== false, refreshAutomatic);
+	useCaptureSync(isOpen && !submission.isEditingDisabled && step === "compose" && canRefreshAutomatically && annotations.length === 0 && !gallery.screenshots.some((draft) => draft.selection) && props.captureOnOpen !== false, refreshAutomatic);
 	const reset = useCallback(() => {
 		if (successTimer.current) clearTimeout(successTimer.current);
 		setAnnotationTrigger(null);
@@ -3937,19 +4031,12 @@ function useWidgetState(props) {
 		pickRef.current++;
 		setIsElementCapturing(false);
 		resetScreenshots();
-		replaceElementCapture(null);
-		setSelection(null);
-		setSelectedNode(null);
 		setMessage("");
 		setEmail("");
 		setHoneypot("");
 		setError(null);
 		setStep("compose");
-	}, [
-		resetSubmission,
-		resetScreenshots,
-		replaceElementCapture
-	]);
+	}, [resetSubmission, resetScreenshots]);
 	const close = useCallback(() => {
 		setIsOpen(false);
 		reset();
@@ -3986,8 +4073,6 @@ function useWidgetState(props) {
 			...buildElementSelection(element),
 			comment: note.slice(0, MAX_SELECTION_COMMENT_LENGTH)
 		} : buildElementSelection(element);
-		setSelection(picked);
-		setSelectedNode(element);
 		setStep("compose");
 		const pick = ++pickRef.current;
 		const context = collectPageContext({ sdkVersion: SDK_VERSION });
@@ -3998,49 +4083,55 @@ function useWidgetState(props) {
 			return;
 		}
 		setIsElementCapturing(false);
-		if (fresh) storeScreenshot({
+		if (!fresh) {
+			releaseCapture(closeUp);
+			setError(captureFailed);
+			return;
+		}
+		storeScreenshot({
 			annotations: [highlightFor(picked, fresh)],
+			closeUp,
 			context,
 			id: crypto.randomUUID(),
 			image: fresh,
+			selectedNode: element,
+			selection: picked,
 			source: "manual"
 		});
-		else setError(captureFailed);
-		replaceElementCapture(closeUp);
 	}, [
 		cancelPendingCapture,
 		captureFailed,
-		storeScreenshot,
-		replaceElementCapture
+		storeScreenshot
 	]);
-	const clearSelection = useCallback(() => {
-		pickRef.current++;
-		replaceElementCapture(null);
-		setSelection(null);
-		setSelectedNode(null);
-		setIsElementCapturing(false);
-		clearSelectionAnnotations();
-	}, [clearSelectionAnnotations, replaceElementCapture]);
-	const reportedMessage = message.trim() || selection?.comment || "";
+	const selections = gallery.screenshots.flatMap(({ selection }) => selection ? [selection] : []);
+	const firstElementNote = selections.find(({ comment }) => comment)?.comment;
+	const reportedMessage = message.trim() || firstElementNote || "";
 	const submit = () => {
 		if (honeypot) {
 			setStep("success");
 			return;
 		}
+		setStep("compose");
 		return submission.submit({
 			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.4.0" }),
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.4.2" }),
 				consoleEvents: consoleRef.current?.events(),
 				metadata: props.metadata,
-				selection: selection ?? void 0
+				selections
 			},
-			element: elementCapture,
 			email,
 			isAnonymous,
 			message: reportedMessage,
 			screenshots: gallery.screenshots
 		});
 	};
+	const requestSubmit = () => {
+		if (isAnonymous && email.length === 0 && !submission.hasPendingAttachments && !honeypot) {
+			setStep("email");
+			return;
+		}
+		return submit();
+	};
 	return {
 		activeScreenshot,
 		annotateScreenshot: (id, trigger) => {
@@ -4053,11 +4144,9 @@ function useWidgetState(props) {
 		canDismiss: dismissForDays !== null,
 		canSubmit: reportedMessage.length > 0,
 		capture,
-		clearSelection,
 		close,
 		dismiss,
 		dismissForDays,
-		elementCapture,
 		email,
 		error,
 		hasPendingAttachments: submission.hasPendingAttachments,
@@ -4072,15 +4161,16 @@ function useWidgetState(props) {
 		open,
 		pendingCapture: gallery.pendingCapture,
 		removeCapture: gallery.removeCapture,
+		requestSubmit,
 		retakeCapture: gallery.retakeCapture,
 		screenshots: gallery.screenshots,
 		selectElement,
-		selectedNode,
-		selection,
+		selections,
 		setAnnotations: gallery.setAnnotations,
 		setEmail,
 		setHoneypot,
 		setMessage,
+		setSelectionComment: gallery.setSelectionComment,
 		setStep,
 		step,
 		submit,
@@ -4106,8 +4196,8 @@ function RefletFeedback(props) {
 				else open();
 			}
 		};
-		document.addEventListener("keydown", onKeyDown);
-		return () => document.removeEventListener("keydown", onKeyDown);
+		document.addEventListener("keydown", onKeyDown, true);
+		return () => document.removeEventListener("keydown", onKeyDown, true);
 	}, [
 		close,
 		enabled,
@@ -4137,13 +4227,19 @@ function RefletFeedback(props) {
 					annotations: state.annotations,
 					onChange: state.setAnnotations,
 					onDone: () => state.setStep("compose"),
-					onRetake: () => {
+					onRetake: state.activeScreenshot.selection ? void 0 : () => {
 						state.setStep("compose");
 						if (state.activeScreenshot) state.retakeCapture(state.activeScreenshot.id);
 					},
-					trigger: state.annotationTrigger
+					trigger: state.annotationTrigger?.thumbnail
 				},
-				labels
+				labels,
+				note: state.activeScreenshot.selection && {
+					comment: state.activeScreenshot.selection.comment ?? "",
+					onChange: (comment) => {
+						if (state.activeScreenshot) state.setSelectionComment(state.activeScreenshot.id, comment);
+					}
+				}
 			}),
 			isOpen && state.step === "picking" && /* @__PURE__ */ jsx(ElementPicker, {
 				labels,