reflet-sdk 0.3.5 → 0.4.1

package/dist/feedback.js

@@ -1,6 +1,6 @@
 "use client";
+import { a as REFLET_Z_INDEX, t as RefletContext } from "./react-context-3_IbhIFB.js";
 import { t as Reflet } from "./client-BYuSKJw5.js";
-import { t as RefletContext } from "./react-context-DZw_HHjj.js";
 import { useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slider } from "@base-ui/react/slider";
@@ -533,6 +533,7 @@ const MAX_DEPTH = 12;
 const MIN_PATH_SEGMENTS = 2;
 const MAX_SELECTOR_LENGTH = 600;
 const MAX_SOURCE_LOCATION_LENGTH = 400;
+const MAX_SELECTION_COMMENT_LENGTH = 2e3;
 const TEST_ATTRIBUTES = [
 	"data-testid",
 	"data-test-id",
@@ -809,40 +810,42 @@ function collectPageContext(options) {
 }
 //#endregion
 //#region src/feedback/types.ts
-const SDK_VERSION = "0.3.5";
+const SDK_VERSION = "0.4.1";
 const DEFAULT_WIDGET_LABELS = {
 	annotateHint: "Draw on the screenshot to point at the problem.",
+	attachElement: "Attach this element",
 	attachmentUploadFailed: "Your feedback was saved, but some screenshots are still pending. Retry to attach them.",
 	attachScreenshot: "Attach a screenshot",
 	back: "Back",
 	cancel: "Cancel",
 	captureFailed: "Screenshot unavailable. Try again or send without it.",
 	capturing: "Taking screenshot…",
-	categoryBug: "Bug",
-	categoryIdea: "Idea",
-	categoryLabel: "Feedback type",
-	categoryQuestion: "Question",
 	clearAnnotations: "Clear drawing",
-	clearSelection: "Remove selected element",
 	descriptionPlaceholder: "What would you like to share?",
 	dismissForDays: "Hide for {days} days",
 	done: "Done",
+	elementNote: "Comment on the picked element",
+	elementNotePlaceholder: "What is wrong with this?",
 	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",
 	moreOptions: "More options",
 	moveFeedback: "Move feedback",
+	pickAnother: "Pick another",
 	pickElement: "Point at an element",
-	pickElementHint: "Click the element you are talking about — cancel with",
+	pickElementHint: "Pick the element you are talking about",
 	recapture: "Retake",
 	removeScreenshot: "Remove",
 	resume: "Resume feedback",
 	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",
@@ -861,7 +864,6 @@ const BOX_TOOLS = [
 	"blur"
 ];
 const MIN_GESTURE_LENGTH = 8;
-const ARROW_HEAD_ANGLE = Math.PI / 7;
 const DEFAULT_PATH_TOLERANCE = 2.5;
 function normalizeRect(start, end) {
 	return {
@@ -871,17 +873,6 @@ function normalizeRect(start, end) {
 		y: Math.min(start.y, end.y)
 	};
 }
-/** The two barbs closing the arrow tip, both `size` px away from `end`. */
-function arrowHead(start, end, size) {
-	const angle = Math.atan2(end.y - start.y, end.x - start.x);
-	if (Math.hypot(end.x - start.x, end.y - start.y) === 0) return [end, end];
-	const barb = (offset) => ({
-		x: end.x - size * Math.cos(angle + offset),
-		y: end.y - size * Math.sin(angle + offset)
-	});
-	return [barb(-ARROW_HEAD_ANGLE), barb(ARROW_HEAD_ANGLE)];
-}
-/** Drops points a user cannot perceive, keeping the payload small. */
 function simplifyPath(points, tolerance = DEFAULT_PATH_TOLERANCE) {
 	if (points.length < 3) return points;
 	const [first, ...rest] = points;
@@ -932,7 +923,6 @@ function toWire(annotation) {
 		y: start.y
 	};
 }
-/** Serializes to the shape the Reflet API stores next to the screenshot. */
 function toWireAnnotations(annotations) {
 	return annotations.filter((item) => !isDegenerate(item)).map(toWire);
 }
@@ -1025,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" }) });
 }
@@ -1457,9 +1444,41 @@ function AnnotationToolbar({ editor, labels, drawing }) {
 	});
 }
 //#endregion
+//#region src/feedback/core/arrow-geometry.ts
+function arrowOutline(start, end) {
+	const dx = end.x - start.x;
+	const dy = end.y - start.y;
+	const length = Math.hypot(dx, dy);
+	if (length === 0) return {
+		points: [],
+		strokeWidth: 0
+	};
+	const shaftWidth = Math.min(20, Math.max(6, length * .025), length * .2);
+	const headLength = Math.min(length * .45, shaftWidth * 3);
+	const headHalfWidth = headLength * .55;
+	const shaftLength = length - headLength;
+	const pointOnArrow = (along, across) => ({
+		x: start.x + (dx * along - dy * across) / length,
+		y: start.y + (dy * along + dx * across) / length
+	});
+	return {
+		points: [
+			pointOnArrow(0, 0),
+			pointOnArrow(shaftLength, -shaftWidth / 2),
+			pointOnArrow(shaftLength, -headHalfWidth),
+			{
+				x: end.x,
+				y: end.y
+			},
+			pointOnArrow(shaftLength, headHalfWidth),
+			pointOnArrow(shaftLength, shaftWidth / 2)
+		],
+		strokeWidth: Math.min(4, length * .02)
+	};
+}
+//#endregion
 //#region src/feedback/core/annotation-renderer.ts
 const STROKE_WIDTH = 3;
-const ARROW_HEAD_SIZE = 16;
 const HIGHLIGHT_ALPHA = .3;
 const REDACTION_FILL = "#111827";
 const PIXEL_BLOCK = 10;
@@ -1480,10 +1499,6 @@ function scaleRect(rect, scale) {
 function isCanvasElement(value) {
 	return typeof HTMLCanvasElement !== "undefined" && value instanceof HTMLCanvasElement;
 }
-/**
-* Downsamples the region and paints it back enlarged, so redacted pixels are
-* unrecoverable. Falls back to an opaque block wherever 2d canvases are absent.
-*/
 function redact(context, rect) {
 	const source = context.canvas;
 	const width = Math.max(1, Math.round(rect.width / PIXEL_BLOCK));
@@ -1503,18 +1518,17 @@ function redact(context, rect) {
 	context.fillStyle = REDACTION_FILL;
 	context.fillRect(rect.x, rect.y, rect.width, rect.height);
 }
-function drawArrow(context, start, end, scale) {
-	context.beginPath();
-	context.moveTo(start.x, start.y);
-	context.lineTo(end.x, end.y);
-	context.stroke();
-	const [left, right] = arrowHead(start, end, ARROW_HEAD_SIZE * scale);
+function drawArrow(context, annotation, scale) {
+	const { points, strokeWidth } = arrowOutline(annotation.start, annotation.end);
+	const [first, ...rest] = points.map((point) => scalePoint(point, scale));
+	if (!first) return;
 	context.beginPath();
-	context.moveTo(end.x, end.y);
-	context.lineTo(left.x, left.y);
-	context.lineTo(right.x, right.y);
+	context.moveTo(first.x, first.y);
+	for (const point of rest) context.lineTo(point.x, point.y);
 	context.closePath();
+	context.lineWidth = strokeWidth * scale;
 	context.fill();
+	context.stroke();
 }
 function drawPen(context, points, scale) {
 	const [first, ...rest] = points;
@@ -1562,7 +1576,7 @@ function drawAnnotation(context, annotation, scale) {
 			drawPen(context, annotation.points ?? [], scale);
 			break;
 		case "arrow":
-			drawArrow(context, scalePoint(annotation.start, scale), scalePoint(annotation.end, scale), scale);
+			drawArrow(context, annotation, scale);
 			break;
 		case "spotlight":
 			drawSpotlight(context, rect);
@@ -1590,10 +1604,6 @@ function loadImage(url) {
 		image.src = url;
 	});
 }
-/**
-* Burns the annotations into a copy of the capture so reviewers and agents see
-* the drawing without needing to replay the vector data.
-*/
 async function renderAnnotatedImage(source, annotations) {
 	if (annotations.length === 0) return null;
 	const canvas = document.createElement("canvas");
@@ -1725,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);
@@ -1845,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
+				})]
 			})
 		]
 	});
@@ -1866,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);
@@ -1884,95 +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 component = state.selection.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: state.selection.sourceLocation ?? state.selection.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: "truncate",
-				children: component ? `<${component}>` : state.selection.label
-			})]
-		}), /* @__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;
@@ -1981,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
@@ -2091,92 +2293,43 @@ function ComposerOptions({ labels, state }) {
 	});
 }
 //#endregion
-//#region src/feedback/ui/composer/controls.tsx
-const CATEGORY_LABELS = {
-	bug: "categoryBug",
-	idea: "categoryIdea",
-	question: "categoryQuestion"
-};
-function ComposerControls({ options, labels, state }) {
+//#region src/feedback/ui/composer/message-input.tsx
+function MessageInput({ floatingControls, labels, state }) {
+	const submitLabel = state.hasPendingAttachments ? labels.retryAttachments : labels.submit;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "composer-toolbar",
-		children: [options.floatingControls, /* @__PURE__ */ jsxs("div", {
-			className: "composer-controls glass",
+		className: "message-row glass",
+		children: [/* @__PURE__ */ jsx("textarea", {
+			"aria-label": labels.descriptionPlaceholder,
+			disabled: state.isEditingDisabled,
+			maxLength: 4e3,
+			onChange: (event) => state.setMessage(event.target.value),
+			placeholder: labels.descriptionPlaceholder,
+			rows: 3,
+			value: state.message
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "message-actions",
 			children: [
-				options.categories.length > 1 && /* @__PURE__ */ jsxs("span", {
-					className: "select-control",
-					children: [/* @__PURE__ */ jsx("select", {
-						"aria-label": labels.categoryLabel,
-						className: "category-select",
-						disabled: state.isEditingDisabled,
-						onChange: (event) => {
-							const category = options.categories.find((value) => value === event.target.value);
-							if (category) state.setCategory(category);
-						},
-						value: state.category,
-						children: options.categories.map((value) => /* @__PURE__ */ jsx("option", {
-							value,
-							children: labels[CATEGORY_LABELS[value]]
-						}, value))
-					}), /* @__PURE__ */ jsx(ChevronDownIcon, {})]
-				}),
-				/* @__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, {})
+				floatingControls,
+				/* @__PURE__ */ jsx(ComposerOptions, {
+					labels,
+					state
 				}),
 				/* @__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
+					"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, {})
 				})
 			]
 		})]
 	});
 }
 //#endregion
-//#region src/feedback/ui/composer/message-input.tsx
-function MessageInput({ labels, state }) {
-	const [expanded, setExpanded] = useState(false);
-	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,
-			value: state.message
-		}), /* @__PURE__ */ jsx("button", {
-			"aria-busy": state.isSubmitting,
-			"aria-label": submitLabel,
-			className: "submit",
-			disabled: state.isSubmitting || state.isCapturing || !state.message.trim(),
-			title: submitLabel,
-			type: "submit",
-			children: state.isSubmitting ? /* @__PURE__ */ jsx("span", { className: "spinner" }) : /* @__PURE__ */ jsx(ArrowIcon, {})
-		})]
-	});
-}
-//#endregion
 //#region src/feedback/ui/panel.tsx
-function FeedbackPanel({ options, labels, state }) {
+function FeedbackPanel({ floatingControls, labels, state }) {
 	const panelRef = useRef(null);
 	useEffect(() => {
 		panelRef.current?.focus();
@@ -2193,9 +2346,29 @@ function FeedbackPanel({ options, labels, state }) {
 			]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "composer-toolbar",
-			children: options.floatingControls
+			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",
@@ -2208,18 +2381,14 @@ function FeedbackPanel({ options, labels, state }) {
 			className: "composer",
 			onSubmit: (event) => {
 				event.preventDefault();
-				state.submit();
+				state.requestSubmit();
 			},
 			children: [
 				/* @__PURE__ */ jsx(MessageInput, {
+					floatingControls,
 					labels,
 					state
 				}),
-				/* @__PURE__ */ jsx(ComposerControls, {
-					labels,
-					options,
-					state
-				}),
 				/* @__PURE__ */ jsx("div", {
 					"aria-hidden": "true",
 					className: "hp",
@@ -2241,8 +2410,86 @@ function FeedbackPanel({ options, labels, state }) {
 	});
 }
 //#endregion
+//#region src/feedback/ui/selection-outline.tsx
+/**
+* Keeps the picked element ringed while the reporter writes about it, so the
+* composer parked next to it is visibly about that element.
+*/
+function SelectionOutline({ node }) {
+	const boxRef = useRef(null);
+	useEffect(() => {
+		const box = boxRef.current;
+		if (!(box && node)) return;
+		let frame = 0;
+		const draw = () => {
+			frame = 0;
+			const rect = node.getBoundingClientRect();
+			const hidden = rect.width === 0 || rect.height === 0 || rect.bottom < 0 || rect.top > window.innerHeight;
+			box.style.opacity = hidden ? "0" : "1";
+			box.style.width = `${rect.width}px`;
+			box.style.height = `${rect.height}px`;
+			box.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
+		};
+		const schedule = () => {
+			frame ||= requestAnimationFrame(draw);
+		};
+		draw();
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(draw);
+		observer?.observe(node);
+		window.addEventListener("scroll", schedule, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", schedule);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer?.disconnect();
+			window.removeEventListener("scroll", schedule, true);
+			window.removeEventListener("resize", schedule);
+		};
+	}, [node]);
+	if (!node) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "selection-outline",
+		ref: boxRef
+	});
+}
+//#endregion
+//#region src/feedback/ui/visible-viewport.ts
+/**
+* The part of the page the reporter can actually see, in fixed-position
+* coordinates. On mobile the keyboard shrinks this without touching
+* `window.innerHeight`, so anything that must stay reachable measures here.
+*/
+function visibleViewport() {
+	const viewport = window.visualViewport;
+	const left = viewport?.offsetLeft ?? 0;
+	const top = viewport?.offsetTop ?? 0;
+	const width = viewport?.width ?? window.innerWidth;
+	const height = viewport?.height ?? window.innerHeight;
+	return {
+		bottom: window.innerHeight - top - height,
+		height,
+		left,
+		right: window.innerWidth - left - width,
+		top,
+		width
+	};
+}
+function onViewportChange(update) {
+	window.addEventListener("resize", update);
+	window.visualViewport?.addEventListener("resize", update);
+	window.visualViewport?.addEventListener("scroll", update);
+	return () => {
+		window.removeEventListener("resize", update);
+		window.visualViewport?.removeEventListener("resize", update);
+		window.visualViewport?.removeEventListener("scroll", update);
+	};
+}
+//#endregion
 //#region src/feedback/ui/floating/use-floating-position.ts
-const EDGE_GAP = 12;
+const EDGE_GAP$1 = 12;
 const KEYBOARD_STEP = 24;
 const KEY_DIRECTIONS = {
 	ArrowDown: {
@@ -2262,34 +2509,24 @@ const KEY_DIRECTIONS = {
 		y: -24
 	}
 };
-function visibleViewport() {
-	const viewport = window.visualViewport;
-	const left = viewport?.offsetLeft ?? 0;
-	const top = viewport?.offsetTop ?? 0;
-	const width = viewport?.width ?? window.innerWidth;
-	const height = viewport?.height ?? window.innerHeight;
-	return {
-		bottom: window.innerHeight - top - height,
-		height,
-		left,
-		right: window.innerWidth - left - width,
-		top,
-		width
-	};
-}
 function clampPosition(point, bounds, viewport = visibleViewport()) {
 	return {
-		x: Math.max(viewport.left + EDGE_GAP, Math.min(point.x, viewport.left + viewport.width - bounds.width - EDGE_GAP)),
-		y: Math.max(viewport.top + EDGE_GAP, Math.min(point.y, viewport.top + viewport.height - bounds.height - EDGE_GAP))
+		x: Math.max(viewport.left + EDGE_GAP$1, Math.min(point.x, viewport.left + viewport.width - bounds.width - EDGE_GAP$1)),
+		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();
@@ -2309,17 +2546,12 @@ function useFloatingPosition(corner = "bottom-right") {
 		keepInViewport();
 	}, [keepInViewport]);
 	useEffect(() => {
-		const resizeViewport = () => setViewport(visibleViewport());
 		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(keepInViewport);
 		if (rootRef.current) observer?.observe(rootRef.current);
-		window.addEventListener("resize", resizeViewport);
-		window.visualViewport?.addEventListener("resize", resizeViewport);
-		window.visualViewport?.addEventListener("scroll", resizeViewport);
+		const stopListening = onViewportChange(() => setViewport(visibleViewport()));
 		return () => {
 			observer?.disconnect();
-			window.removeEventListener("resize", resizeViewport);
-			window.visualViewport?.removeEventListener("resize", resizeViewport);
-			window.visualViewport?.removeEventListener("scroll", resizeViewport);
+			stopListening();
 		};
 	}, [keepInViewport]);
 	const onPointerDown = (event) => {
@@ -2333,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) => {
@@ -2353,6 +2587,9 @@ function useFloatingPosition(corner = "bottom-right") {
 	return {
 		handleProps: {
 			onKeyDown,
+			onLostPointerCapture: () => {
+				gesture.current = null;
+			},
 			onPointerCancel: () => {
 				gesture.current = null;
 			},
@@ -2369,17 +2606,17 @@ function useFloatingPosition(corner = "bottom-right") {
 }
 //#endregion
 //#region src/feedback/ui/floating/floating-widget.tsx
-function FloatingWidget({ labels, options, state }) {
+function FloatingWidget({ labels, position, state }) {
 	const [minimized, setMinimized] = useState(false);
 	const launcherRef = useRef(null);
-	const floating = useFloatingPosition(options.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;
@@ -2396,14 +2633,14 @@ function FloatingWidget({ labels, options, state }) {
 		className: "root",
 		"data-editing": state.isOpen && (state.step === "picking" || state.step === "annotate"),
 		"data-moved": Boolean(floating.position),
-		"data-position": options.position,
+		"data-position": position,
 		ref: floating.rootRef,
-		children: [/* @__PURE__ */ jsx("style", { children: floating.styles }), showPanel ? /* @__PURE__ */ jsx(FeedbackPanel, {
-			labels,
-			options: {
-				categories: options.categories,
+		children: [
+			/* @__PURE__ */ jsx("style", { children: floating.styles }),
+			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",
@@ -2417,28 +2654,87 @@ function FloatingWidget({ labels, options, state }) {
 						onClick: minimize,
 						title: labels.minimize,
 						type: "button",
-						children: /* @__PURE__ */ jsx(MinusIcon, {})
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
 					})]
-				})
-			},
-			state
-		}) : /* @__PURE__ */ jsx(Launcher, {
-			buttonRef: launcherRef,
-			isOpen: false,
-			label: state.isOpen ? labels.resume : labels.trigger,
-			onClick: () => {
-				setMinimized(false);
-				if (!state.isOpen) state.open();
-			}
-		})]
+				}),
+				labels,
+				state
+			}) : /* @__PURE__ */ jsx(Launcher, {
+				buttonRef: launcherRef,
+				isOpen: false,
+				label: state.isOpen ? labels.resume : labels.trigger,
+				onClick: () => {
+					setMinimized(false);
+					if (!state.isOpen) state.open();
+				}
+			})
+		]
 	});
 }
 //#endregion
+//#region src/feedback/ui/floating/element-walk.ts
+const ARROW_SIBLING = {
+	ArrowLeft: "previousElementSibling",
+	ArrowRight: "nextElementSibling"
+};
+const AIM_KEYS = [
+	"Tab",
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+];
+function isWidgetOwned(element) {
+	return element.closest(`[${WIDGET_MARKER}]`) !== null;
+}
+function isPickable(element) {
+	if (!element || element === document.documentElement || isWidgetOwned(element)) return false;
+	const rect = element.getBoundingClientRect();
+	return rect.width > 0 && rect.height > 0;
+}
+function pickableElements() {
+	return Array.from(document.body.querySelectorAll("*")).filter(isPickable);
+}
+function documentStep(from, backwards) {
+	const all = pickableElements();
+	const index = all.indexOf(from);
+	if (all.length === 0) return null;
+	if (index === -1) return all[0] ?? null;
+	return all[(index + (backwards ? -1 : 1) + all.length) % all.length] ?? null;
+}
+function climb(from) {
+	let candidate = from.parentElement;
+	while (candidate && !isPickable(candidate)) candidate = candidate.parentElement;
+	return candidate;
+}
+function descend(from) {
+	let candidate = from.firstElementChild;
+	while (candidate && !isPickable(candidate)) candidate = candidate.nextElementSibling;
+	return candidate;
+}
+function sibling(from, direction) {
+	let candidate = from[direction];
+	while (candidate && !isPickable(candidate)) candidate = candidate[direction];
+	return candidate;
+}
+function stepAim(from, key, backwards) {
+	if (!(from && isPickable(from))) return pickableElements()[0] ?? null;
+	if (key === "Tab") return documentStep(from, backwards);
+	if (key === "ArrowUp") return climb(from);
+	if (key === "ArrowDown") return descend(from);
+	const direction = ARROW_SIBLING[key];
+	return direction ? sibling(from, direction) : null;
+}
+//#endregion
 //#region src/feedback/ui/picker.tsx
 const LABEL_HEIGHT = 24;
 const LABEL_GAP = 6;
-function isWidgetOwned(element) {
-	return element.closest(`[${WIDGET_MARKER}]`) !== null;
+const NOTE_WIDTH = 300;
+const NOTE_GAP = 10;
+const EDGE_GAP = 12;
+/** Events raised by the picker's own note card must reach it, never be swallowed. */
+function targetsWidget(event) {
+	return event.composedPath().some((node) => node instanceof Element && isWidgetOwned(node));
 }
 function elementUnder(x, y) {
 	const element = document.elementFromPoint(x, y);
@@ -2455,257 +2751,322 @@ function describeTarget(element) {
 	};
 }
 /**
+* Pins the note card to the element: below it, flipped above when the visible
+* viewport — what is left of the screen once a mobile keyboard is up — has no
+* room there. Measures against the part of the element actually on screen, so
+* picking a full-height section still leaves the card in view.
+*/
+function noteStyle(rect, view) {
+	const left = Math.min(Math.max(view.left + EDGE_GAP, rect.left), Math.max(view.left + EDGE_GAP, view.left + view.width - NOTE_WIDTH - EDGE_GAP));
+	const visibleTop = Math.max(rect.top, view.top + EDGE_GAP);
+	const visibleBottom = Math.min(rect.bottom, view.top + view.height - EDGE_GAP);
+	if (view.top + view.height - visibleBottom > visibleTop - view.top) return {
+		left,
+		top: visibleBottom + NOTE_GAP
+	};
+	return {
+		bottom: window.innerHeight - visibleTop + NOTE_GAP,
+		left
+	};
+}
+/**
 * Points at any element in the page the way a coding agent needs it: the React
-* component that owns it plus the page region it lives in.
+* component that owns it plus the page region it lives in. Picking never
+* commits on its own — it pins a note card to the element, so the reporter
+* writes about that element right there and confirms. Aiming stays live until
+* then, which is what makes the flow usable without hover, on touch.
 */
-function ElementPicker({ hint, onCancel, onPick }) {
+function ElementPicker({ labels, onCancel, onPick }) {
 	const [target, setTarget] = useState(null);
+	const [pinned, setPinned] = useState(null);
+	const [note, setNote] = useState("");
+	const noteRef = useRef(null);
+	const pinnedRef = useRef(false);
+	const [view, setView] = useState(visibleViewport);
+	const aimRef = useRef(null);
+	useEffect(() => onViewportChange(() => setView(visibleViewport())), []);
+	useEffect(() => {
+		pinnedRef.current = pinned !== null;
+		if (pinned) noteRef.current?.focus({ preventScroll: true });
+	}, [pinned]);
+	useEffect(() => {
+		aimRef.current = target?.element ?? null;
+	}, [target]);
 	useEffect(() => {
 		const swallow = (event) => {
+			if (targetsWidget(event)) return;
 			event.preventDefault();
 			event.stopPropagation();
 		};
-		const onMove = (event) => {
-			const element = elementUnder(event.clientX, event.clientY);
-			if (!element) {
-				setTarget(null);
-				return;
-			}
+		const aimAt = (x, y) => {
+			const element = elementUnder(x, y);
+			if (!element) return;
 			setTarget((current) => current?.element === element ? {
 				...current,
 				rect: element.getBoundingClientRect()
 			} : describeTarget(element));
 		};
-		const onClick = (event) => {
+		const onMove = (event) => {
+			if (pinnedRef.current || targetsWidget(event)) return;
+			aimAt(event.clientX, event.clientY);
+		};
+		const onPointerDown = (event) => {
+			if (targetsWidget(event)) return;
+			swallow(event);
+			if (!pinnedRef.current) aimAt(event.clientX, event.clientY);
+		};
+		const onPointerUp = (event) => {
+			if (targetsWidget(event)) return;
 			swallow(event);
+			if (pinnedRef.current) return;
 			const element = elementUnder(event.clientX, event.clientY);
-			if (element) onPick(element);
+			if (element) setPinned(describeTarget(element));
+		};
+		const moveAim = (key, backwards) => {
+			const next = stepAim(aimRef.current, key, backwards);
+			if (!next) return;
+			next.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+			aimRef.current = next;
+			setTarget(describeTarget(next));
+		};
+		const onEscape = () => {
+			if (pinnedRef.current) {
+				setPinned(null);
+				setNote("");
+				return;
+			}
+			onCancel();
 		};
 		const onKeyDown = (event) => {
 			if (event.key === "Escape") {
 				swallow(event);
-				onCancel();
+				onEscape();
+				return;
 			}
+			if (pinnedRef.current || targetsWidget(event)) return;
+			if (event.key === "Enter") {
+				swallow(event);
+				if (aimRef.current) setPinned(describeTarget(aimRef.current));
+				return;
+			}
+			if (!AIM_KEYS.includes(event.key)) return;
+			swallow(event);
+			moveAim(event.key, event.shiftKey);
+		};
+		const onScroll = () => {
+			setTarget((current) => current ? {
+				...current,
+				rect: current.element.getBoundingClientRect()
+			} : current);
+			setPinned((current) => current ? {
+				...current,
+				rect: current.element.getBoundingClientRect()
+			} : current);
 		};
 		document.addEventListener("pointermove", onMove, true);
-		document.addEventListener("pointerdown", swallow, true);
+		document.addEventListener("pointerdown", onPointerDown, true);
+		document.addEventListener("pointerup", onPointerUp, true);
 		document.addEventListener("mousedown", swallow, true);
 		document.addEventListener("mouseup", swallow, true);
-		document.addEventListener("click", onClick, true);
+		document.addEventListener("click", swallow, true);
 		document.addEventListener("keydown", onKeyDown, true);
+		window.addEventListener("scroll", onScroll, {
+			capture: true,
+			passive: true
+		});
 		const previousCursor = document.body.style.cursor;
 		document.body.style.cursor = "crosshair";
 		return () => {
 			document.removeEventListener("pointermove", onMove, true);
-			document.removeEventListener("pointerdown", swallow, true);
+			document.removeEventListener("pointerdown", onPointerDown, true);
+			document.removeEventListener("pointerup", onPointerUp, true);
 			document.removeEventListener("mousedown", swallow, true);
 			document.removeEventListener("mouseup", swallow, true);
-			document.removeEventListener("click", onClick, true);
+			document.removeEventListener("click", swallow, true);
 			document.removeEventListener("keydown", onKeyDown, true);
+			window.removeEventListener("scroll", onScroll, true);
 			document.body.style.cursor = previousCursor;
 		};
-	}, [onCancel, onPick]);
-	const rect = target?.rect;
+	}, [onCancel]);
+	const rect = (pinned ?? target)?.rect;
 	const labelAbove = rect ? rect.top > 30 : true;
 	return /* @__PURE__ */ jsxs("div", { children: [
 		rect && /* @__PURE__ */ jsx("div", {
 			className: "picker-box",
+			"data-pinned": pinned !== null,
 			style: {
 				height: rect.height,
-				left: rect.left,
-				top: rect.top,
+				translate: `${rect.left}px ${rect.top}px`,
 				width: rect.width
 			}
 		}),
-		rect && target && /* @__PURE__ */ jsxs("div", {
+		rect && target && !pinned && /* @__PURE__ */ jsxs("div", {
 			className: "picker-label",
-			style: {
-				left: Math.max(4, rect.left),
-				top: labelAbove ? rect.top - LABEL_HEIGHT - LABEL_GAP : rect.bottom + LABEL_GAP
-			},
+			style: { translate: `${Math.max(4, rect.left)}px ${labelAbove ? rect.top - LABEL_HEIGHT - LABEL_GAP : rect.bottom + LABEL_GAP}px` },
 			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",
+		pinned ? /* @__PURE__ */ jsxs("form", {
+			className: "picker-note glass",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onPick(pinned.element, note.trim());
+			},
+			style: noteStyle(pinned.rect, view),
 			children: [
-				hint,
-				" ",
-				/* @__PURE__ */ jsx("kbd", { children: "Esc" })
+				/* @__PURE__ */ jsxs("p", {
+					className: "picker-note-target",
+					children: [/* @__PURE__ */ jsx("strong", { children: pinned.componentName ? `<${pinned.componentName}>` : pinned.label }), pinned.region && /* @__PURE__ */ jsx("span", { children: pinned.region })]
+				}),
+				/* @__PURE__ */ jsx("textarea", {
+					"aria-label": labels.elementNote,
+					maxLength: MAX_SELECTION_COMMENT_LENGTH,
+					onChange: (event) => setNote(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key === "Enter" && !event.shiftKey) {
+							event.preventDefault();
+							onPick(pinned.element, note.trim());
+						}
+					},
+					placeholder: labels.elementNotePlaceholder,
+					ref: noteRef,
+					rows: 2,
+					value: note
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "picker-note-actions",
+					children: [/* @__PURE__ */ jsx("button", {
+						className: "picker-cancel",
+						onClick: () => {
+							setPinned(null);
+							setNote("");
+						},
+						type: "button",
+						children: labels.pickAnother
+					}), /* @__PURE__ */ jsx("button", {
+						"aria-label": labels.attachElement,
+						className: "submit",
+						title: labels.attachElement,
+						type: "submit",
+						children: /* @__PURE__ */ jsx(ArrowIcon, {})
+					})]
+				})
 			]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "picker-hint",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "picker-instruction",
+				children: [
+					labels.pickElementHint,
+					" ",
+					/* @__PURE__ */ jsx("kbd", { children: "Tab" }),
+					/* @__PURE__ */ jsx("kbd", { children: "Enter" }),
+					/* @__PURE__ */ jsx("kbd", { children: "Esc" })
+				]
+			}), /* @__PURE__ */ jsx("button", {
+				className: "picker-cancel",
+				onClick: onCancel,
+				type: "button",
+				children: labels.cancel
+			})]
 		})
 	] });
 }
 //#endregion
-//#region src/feedback/ui/styles.ts
-const WIDGET_STYLES = `
-:host {
-  --rf-offset: 20px;
-  --rf-bg: #ffffff;
-  --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 / 68%);
-  --rf-primary: #37352f;
-  --rf-primary-text: #ffffff;
-  --rf-accent: #2383e2;
-  --rf-danger: #d44c47;
-  --rf-success: #448361;
-  --rf-radius: 20px;
-  --rf-pill: 999px;
-  --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-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: #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 / 68%);
-  --rf-glass: rgb(32 32 32 / 78%);
-  --rf-glass-highlight: rgb(255 255 255 / 14%);
-  --rf-glass-stroke: rgb(255 255 255 / 12%);
-  --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;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
+//#region src/feedback/ui/annotation/styles.ts
+const ANNOTATOR_STYLES = `
+.overlay { margin: 0; border: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.annotatorOverlay}; display: flex; flex-direction: column; background: transparent; color: var(--rf-text); font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; }
+.overlay::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--rf-bg) 94%, transparent); animation: rf-editor-in 260ms var(--rf-ease); transition: opacity 260ms var(--rf-ease); }
+.overlay::backdrop { background: transparent; }
+@keyframes rf-editor-in { from { opacity: 0; } }
+.editor { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 0; container-type: size; }
+.editor-image { width: min(100cqw, calc(100cqh * var(--rf-capture-ratio))); aspect-ratio: var(--rf-capture-ratio); flex: none; position: relative; }
+.editor-visual { position: absolute; inset: 0; border-radius: var(--rf-radius); box-shadow: var(--rf-shadow); transform-origin: top left; overflow: hidden; }
+.editor-visual img, .editor-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: top center; outline: 1px solid var(--rf-hairline); outline-offset: -1px; }
+.editor-visual canvas { cursor: crosshair; touch-action: none; }
+.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, .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; }
 
-.root {
-  position: fixed;
-  z-index: 2147483000;
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  font: 13px/1.45 var(--rf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
-  color: var(--rf-text);
-}
-.root:has(.panel) { width: min(var(--rf-width), calc(var(--rf-viewport-width, 100vw) - 24px)); }
-.root[data-position$="right"] { right: calc(var(--rf-viewport-right, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
-.root[data-position$="left"] { left: calc(var(--rf-viewport-left, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
-.root[data-position^="bottom"] { bottom: calc(var(--rf-viewport-bottom, 0px) + max(var(--rf-offset), env(safe-area-inset-bottom))); }
-.root[data-position^="top"] { top: calc(var(--rf-viewport-top, 0px) + max(var(--rf-offset), env(safe-area-inset-top))); align-items: flex-start; }
-.root[data-position="bottom-right"] .panel { transform-origin: bottom right; }
-.root[data-position="bottom-left"] .panel { transform-origin: bottom left; }
-.root[data-position^="top"] .panel { transform-origin: top center; }
-.root[data-editing="true"] { visibility: hidden; pointer-events: none; }
-button, select, input, textarea { font: inherit; color: inherit; }
-button { margin: 0; cursor: pointer; border: 0; background: none; }
-button:disabled { cursor: not-allowed; opacity: .4; }
-svg { flex-shrink: 0; }
-:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
-.icon-btn, .tool {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 32px; height: 32px; flex: none; border-radius: var(--rf-pill); color: var(--rf-text-muted);
-  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
-}
-.icon-btn:hover, .tool:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
-.launcher {
-  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
-  border-radius: var(--rf-pill); color: var(--rf-text);
-  font-weight: 500;
-  transition: transform 200ms var(--rf-ease), box-shadow 200ms var(--rf-ease);
-}
-.launcher:hover { transform: translateY(-2px); box-shadow: var(--rf-shadow); }
-.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);
-  animation: rf-in 220ms var(--rf-ease);
-}
-.drag-handle { touch-action: none; cursor: grab; }
-.drag-handle:active { cursor: grabbing; }
-.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ghost-btn { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: var(--rf-radius-sm); }
-.ghost-btn:hover { background: var(--rf-bg-hover); }
-.error { margin: 0; padding: 10px 14px; border-radius: var(--rf-radius); font-size: 12px; color: var(--rf-danger); }
-.done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; text-align: center; }
-.done svg { color: var(--rf-success); }
-.done h2 { margin: 0; font-size: 14px; font-weight: 600; }
-.done p { margin: 0; font-size: 12px; color: var(--rf-text-muted); }
-.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rf-spin 700ms linear infinite; }
-.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
-@keyframes rf-spin { to { transform: rotate(360deg); } }
-@keyframes rf-in { from { opacity: 0; transform: translateY(5px) scale(.98); } }
-@keyframes rf-fade { from { opacity: 0; } }
+.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; }
+.color-picker summary { display: flex; justify-content: center; align-items: center; }
+.color-preview { width: 18px; height: 18px; border-radius: 50%; background: var(--annotation-color); box-shadow: inset 0 0 0 1px var(--rf-border); }
+.color-popover { --rf-color-width: 200px; position: absolute; bottom: calc(100% + 14px); left: clamp(calc(12px - var(--rf-color-anchor)), 0px, calc(100vw - var(--rf-color-anchor) - var(--rf-color-width) - 12px)); display: flex; align-items: center; gap: 6px; width: var(--rf-color-width); padding: 4px 4px 4px 14px; border-radius: var(--rf-pill); animation: rf-in 180ms var(--rf-ease); }
+.color-picker[data-placement="below"] .color-popover { top: calc(100% + 14px); bottom: auto; }
+.color-slider { flex: 1; min-width: 0; }
+.color-slider-control { display: flex; align-items: center; height: 40px; width: 100%; touch-action: none; user-select: none; cursor: pointer; }
+.color-slider-track { height: 12px; width: 100%; border-radius: var(--rf-pill); background: linear-gradient(to right, var(--rf-swatch-base), var(--annotation-base-color)); box-shadow: inset 0 0 0 1px var(--rf-border); }
+.color-slider-thumb { width: 16px; height: 16px; border: 2px solid var(--rf-swatch-base); border-radius: 50%; background: var(--annotation-color); box-shadow: var(--rf-shadow-low); transition: scale 160ms var(--rf-ease); }
+.color-slider-thumb[data-dragging] { scale: 1.12; }
+.color-slider-thumb:has(:focus-visible) { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
+.color-spectrum { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
+.color-spectrum::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--rf-spectrum); box-shadow: inset 0 0 0 1px var(--rf-glass-highlight); }
+.color-spectrum:hover { background: var(--rf-bg-hover); }
+.color-spectrum button { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
+.color-spectrum button:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
+.color-spectrum input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
+.done-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--rf-pill); color: var(--rf-primary-text); background: var(--rf-primary); }
+.drawing-menu { position: relative; }
+.drawing-popover { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 12px); width: 200px; max-height: calc(50dvh - 68px); overflow-y: auto; padding: 6px; border-radius: var(--rf-radius); }
+.drawing-menu[data-placement="below"] .drawing-popover { top: calc(100% + 12px); bottom: auto; }
+.drawing-option { display: flex; align-items: center; width: 100%; min-height: 40px; gap: 10px; padding: 0 10px; border-radius: 12px; text-align: left; }
+.drawing-option:hover, .drawing-option[aria-pressed="true"] { background: var(--rf-bg-hover); }
+.drawing-divider { height: 1px; margin: 5px; background: var(--rf-border); }
+.editor canvas[data-tool="text"] { cursor: text; }
+.text-annotation-editor { position: fixed; z-index: 3; width: 240px; padding: 8px; border-radius: var(--rf-radius); }
+.text-annotation-editor:focus-within { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
+.text-annotation-editor textarea { display: block; width: 100%; min-height: 64px; max-height: 112px; padding: 6px; border: 0; background: transparent; resize: vertical; font-size: 16px; line-height: 24px; }
+.text-annotation-editor textarea:focus { outline: none; }
+.text-annotation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
 @media (pointer: coarse) {
-  .icon-btn, .tool { width: 44px; height: 44px; }
-  .launcher, .ghost-btn { min-height: 44px; }
-}
-.glass {
-  position: relative;
-  isolation: isolate;
-  border: 1px solid var(--rf-glass-stroke);
-  box-shadow: inset 0 1px 0 var(--rf-glass-highlight), var(--rf-shadow);
-}
-.glass::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--rf-bg);
-  pointer-events: none;
-}
-@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
-  .glass::before {
-    background: var(--rf-glass);
-    -webkit-backdrop-filter: blur(20px) saturate(1.6);
-    backdrop-filter: blur(20px) saturate(1.6);
-  }
+  .drawing-option { min-height: 44px; }
+  .done-btn { width: 44px; height: 44px; }
+  .color-popover { --rf-color-width: 232px; padding-left: 16px; }
+  .color-slider-control, .color-spectrum { height: 44px; }
+  .color-spectrum { width: 44px; }
+  .color-slider-thumb, .color-spectrum::before { width: 18px; height: 18px; }
+  .editor { padding: 8px; }
+  .toolbar { gap: 6px; }
+  .toolbar .group { padding: 3px; gap: 0; }
 }
-@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
-  .glass::before { background: var(--rf-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
+@media (pointer: coarse) and (max-width: 360px) {
+  .toolbar { gap: 4px; padding-inline: 2px; }
+  .toolbar .group { padding: 0; }
 }
-.capture-halo { position: fixed; inset: 0; z-index: 2147482999; pointer-events: none; opacity: 0; transition: opacity 500ms var(--rf-ease); }
-.capture-halo[data-active="true"] { opacity: 1; transition-duration: 140ms; }
-.capture-halo::before { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 14px 0 36px -16px var(--rf-accent), inset -14px 0 36px -16px var(--rf-accent), inset 0 0 4px 1px color-mix(in srgb, var(--rf-accent) 35%, transparent); }
-.capture-halo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rf-accent) 20%, transparent), transparent 5%, transparent 95%, color-mix(in srgb, var(--rf-accent) 20%, transparent)); }
-
+`;
+//#endregion
+//#region src/feedback/ui/composer/styles.ts
+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;
-  background: transparent; line-height: 20px; transition: height 220ms var(--rf-ease);
+  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); }
-.select-control { position: relative; display: flex; align-items: center; min-width: 0; }
-.select-control > svg { position: absolute; right: 9px; width: 12px; height: 12px; pointer-events: none; color: var(--rf-text-muted); }
-.category-select { appearance: none; min-width: 0; max-width: 124px; height: 32px; padding: 0 26px 0 12px; border: 0; border-radius: var(--rf-pill); color: var(--rf-text); background: transparent; cursor: pointer; text-overflow: ellipsis; }
-.category-select:hover:hover { background: var(--rf-bg-hover); }
-option { background: var(--rf-bg); color: var(--rf-text); }
 .composer-options { position: relative; }
 summary { cursor: pointer; list-style: none; }
 summary::-webkit-details-marker { display: none; }
@@ -2714,124 +3075,91 @@ summary::-webkit-details-marker { display: none; }
 .email-field { display: flex; flex-direction: column; gap: 6px; color: var(--rf-text-muted); font-size: 12px; }
 .email-field [role="alert"] { color: var(--rf-danger); }
 .email-field input { width: 100%; padding: 9px; border: 1px solid var(--rf-border); border-radius: var(--rf-radius-sm); background: var(--rf-bg-subtle); color: var(--rf-text); }
-.dismiss-btn { min-height: 32px; text-align: left; padding: 0 8px; border-radius: var(--rf-radius-sm); color: var(--rf-text-muted); }
+.dismiss-btn { min-height: 40px; text-align: left; padding: 0 8px; border-radius: var(--rf-radius-sm); color: var(--rf-text-muted); }
 .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-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; 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-label img { object-fit: contain; border-radius: var(--rf-pill); }
+.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) {
-  .category-select { height: 44px; max-width: 96px; }
   .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; }
 }
-
-
-.overlay { margin: 0; border: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; position: fixed; inset: 0; z-index: 2147483001; display: flex; flex-direction: column; background: color-mix(in srgb, var(--rf-bg) 94%, transparent); animation: rf-editor-in 260ms var(--rf-ease); transition: background 260ms var(--rf-ease); color: var(--rf-text); font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; }
-.overlay::backdrop { background: transparent; }
-@keyframes rf-editor-in { from { background: transparent; } }
-.editor { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 0; container-type: size; }
-.editor-image { width: min(100cqw, calc(100cqh * var(--rf-capture-ratio))); aspect-ratio: var(--rf-capture-ratio); flex: none; position: relative; }
-.editor-visual { position: absolute; inset: 0; border-radius: var(--rf-radius); box-shadow: var(--rf-shadow); transform-origin: top left; overflow: hidden; }
-.editor-visual img, .editor-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: top center; }
-.editor-visual canvas { cursor: crosshair; touch-action: none; }
-.overlay[data-opening="true"] .editor { pointer-events: none; }
-.overlay[data-closing="true"] { pointer-events: none; background: transparent; }
-.overlay[data-closing="true"] .toolbar { opacity: 0; transform: translateY(8px); }
-
-.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 .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; }
-.color-picker summary { display: flex; justify-content: center; align-items: center; }
-.color-preview { width: 18px; height: 18px; border-radius: 50%; background: var(--annotation-color); box-shadow: inset 0 0 0 1px var(--rf-border); }
-.color-popover { --rf-color-width: 200px; position: absolute; bottom: calc(100% + 14px); left: clamp(calc(12px - var(--rf-color-anchor)), 0px, calc(100vw - var(--rf-color-anchor) - var(--rf-color-width) - 12px)); display: flex; align-items: center; gap: 6px; width: var(--rf-color-width); padding: 4px 4px 4px 14px; border-radius: var(--rf-pill); animation: rf-in 180ms var(--rf-ease); }
-.color-picker[data-placement="below"] .color-popover { top: calc(100% + 14px); bottom: auto; }
-.color-slider { flex: 1; min-width: 0; }
-.color-slider-control { display: flex; align-items: center; height: 32px; width: 100%; touch-action: none; user-select: none; cursor: pointer; }
-.color-slider-track { height: 12px; width: 100%; border-radius: var(--rf-pill); background: linear-gradient(to right, white, var(--annotation-base-color)); box-shadow: inset 0 0 0 1px var(--rf-border); }
-.color-slider-thumb { width: 16px; height: 16px; border: 2px solid white; border-radius: 50%; background: var(--annotation-color); box-shadow: var(--rf-shadow-low); transition: scale 160ms var(--rf-ease); }
-.color-slider-thumb[data-dragging] { scale: 1.12; }
-.color-slider-thumb:has(:focus-visible), .color-spectrum:has(:focus-visible) { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
-.color-spectrum { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
-.color-spectrum::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#ff5757, #ffde59, #6bdb78, #4ac9fa, #8b5cf6, #ef73dc, #ff5757); box-shadow: inset 0 0 0 1px var(--rf-glass-highlight); }
-.color-spectrum:hover { background: var(--rf-bg-hover); }
-.color-spectrum button { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
-.color-spectrum button:focus-visible { outline: none; }
-.color-spectrum input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
-.done-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: var(--rf-pill); color: var(--rf-primary-text); background: var(--rf-primary); }
-.drawing-menu { position: relative; }
-.drawing-popover { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 12px); width: 200px; max-height: calc(50dvh - 68px); overflow-y: auto; padding: 6px; border-radius: var(--rf-radius); }
-.drawing-menu[data-placement="below"] .drawing-popover { top: calc(100% + 12px); bottom: auto; }
-.drawing-option { display: flex; align-items: center; width: 100%; min-height: 36px; gap: 10px; padding: 0 10px; border-radius: 12px; text-align: left; }
-.drawing-option:hover, .drawing-option[aria-pressed="true"] { background: var(--rf-bg-hover); }
-.drawing-divider { height: 1px; margin: 5px; background: var(--rf-border); }
-.editor canvas[data-tool="text"] { cursor: text; }
-.text-annotation-editor { position: fixed; z-index: 3; width: 240px; padding: 8px; border-radius: var(--rf-radius); }
-.text-annotation-editor textarea { display: block; width: 100%; min-height: 64px; max-height: 112px; padding: 6px; border: 0; background: transparent; resize: vertical; font-size: 16px; line-height: 24px; }
-.text-annotation-editor textarea:focus { outline: none; }
-.text-annotation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
-@media (pointer: coarse) {
-  .drawing-option { min-height: 44px; }
-  .done-btn { width: 44px; height: 44px; }
-  .color-popover { --rf-color-width: 232px; padding-left: 16px; }
-  .color-slider-control, .color-spectrum { height: 44px; }
-  .color-spectrum { width: 44px; }
-  .color-slider-thumb, .color-spectrum::before { width: 18px; height: 18px; }
-  .editor { padding: 8px; }
-  .toolbar { gap: 6px; }
-  .toolbar .group { padding: 3px; gap: 0; }
+@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; }
 }
-@media (pointer: coarse) and (max-width: 360px) {
-  .toolbar { gap: 4px; padding-inline: 2px; }
-  .toolbar .group { padding: 0; }
-}
-
-
+@keyframes rf-drawer-in { from { transform: translateY(100%); } }
+`;
+//#endregion
+//#region src/feedback/ui/floating/picker-styles.ts
+const PICKER_STYLES = `
 .picker-box {
   position: fixed;
+  top: 0;
+  left: 0;
   pointer-events: none;
   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);
+  will-change: translate;
+  transition: translate 130ms var(--rf-ease);
 }
+.picker-box[data-pinned="true"] { transition: none; }
 .picker-label {
   position: fixed;
+  top: 0;
+  left: 0;
   pointer-events: none;
   display: inline-flex;
   align-items: center;
@@ -2841,45 +3169,278 @@ summary::-webkit-details-marker { display: none; }
   padding: 0 8px;
   font-size: 11.5px;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--rf-accent-text);
   background: var(--rf-accent);
   border-radius: 6px;
-  box-shadow: 0 4px 12px -3px rgb(15 15 15 / 35%);
+  box-shadow: var(--rf-shadow-float);
   white-space: nowrap;
   overflow: hidden;
-  transition: top 130ms var(--rf-ease), left 130ms var(--rf-ease);
+  will-change: translate;
+  transition: translate 130ms var(--rf-ease);
+}
+.picker-label strong { flex: none; font-weight: 600; }
+.picker-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.75; }
+.selection-outline {
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--rf-accent) 7%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rf-accent) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--rf-accent) 14%, transparent);
+  transition: opacity 160ms var(--rf-ease);
+}
+.picker-hint {
+  position: fixed;
+  left: 50%;
+  bottom: calc(24px + env(safe-area-inset-bottom));
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: calc(100vw - 24px);
+  padding: 5px 6px 5px 12px;
+  font-size: 12.5px;
+  color: var(--rf-text);
+  background: var(--rf-bg);
+  border-radius: var(--rf-pill);
+  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; }
+.picker-hint kbd {
+  padding: 1px 5px;
+  font: inherit;
+  font-size: 11px;
+  color: var(--rf-text-muted);
+  border-radius: 4px;
+  background: var(--rf-bg-subtle);
+  box-shadow: var(--rf-shadow-inset);
+}
+.picker-cancel {
+  display: inline-flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 14px;
+  border-radius: var(--rf-pill);
+  font-size: 12.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--rf-text-muted);
+}
+.picker-cancel:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
+.picker-note {
+  position: fixed;
+  z-index: ${REFLET_Z_INDEX.annotatorOverlay};
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 300px;
+  max-width: calc(100vw - 24px);
+  padding: 6px 6px 6px 8px;
+  border-radius: 18px;
+  animation: rf-in 180ms var(--rf-ease);
+}
+.picker-note:focus-within { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
+.picker-note-target {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 2px 4px 0;
+  font-size: 11px;
+  color: var(--rf-text-muted);
+  white-space: nowrap;
+}
+.picker-note-target strong { flex: none; font-weight: 600; color: var(--rf-accent); }
+.picker-note-target span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.picker-note textarea {
+  width: 100%;
+  min-height: 46px;
+  max-height: min(160px, 30dvh);
+  margin: 0;
+  padding: 7px 6px 0;
+  border: 0;
+  resize: none;
+  background: transparent;
+  color: var(--rf-text);
+  font-size: 13px;
+  line-height: 19px;
+}
+.picker-note textarea:focus { outline: none; }
+.picker-note textarea::placeholder { color: var(--rf-text-muted); }
+.picker-note-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+@media (pointer: coarse) {
+  .picker-hint { padding: 6px 8px 6px 14px; }
+  .picker-hint kbd { display: none; }
+  .picker-cancel { height: 44px; padding: 0 18px; font-size: 14px; }
+  .picker-note textarea { font-size: 16px; min-height: 56px; }
+}
+
+`;
+//#endregion
+//#region src/feedback/ui/styles.ts
+const WIDGET_STYLES = `
+:host {
+  --rf-offset: 20px;
+  --rf-bg: #ffffff;
+  --rf-bg-subtle: rgb(55 53 47 / 4%);
+  --rf-bg-hover: rgb(55 53 47 / 7%);
+  --rf-border: rgb(55 53 47 / 9%);
+  --rf-hairline: rgb(15 15 15 / 10%);
+  --rf-text: #37352f;
+  --rf-text-muted: rgb(55 53 47 / 68%);
+  --rf-primary: #37352f;
+  --rf-primary-text: #ffffff;
+  --rf-accent: #2383e2;
+  --rf-accent-text: #ffffff;
+  --rf-danger: #d44c47;
+  --rf-success: #448361;
+  --rf-swatch-base: #ffffff;
+  --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-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;
+  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: #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-hairline: rgb(255 255 255 / 12%);
+  --rf-text: #ebeae8;
+  --rf-text-muted: rgb(255 255 255 / 68%);
+  --rf-glass: rgb(32 32 32 / 78%);
+  --rf-glass-highlight: rgb(255 255 255 / 14%);
+  --rf-glass-stroke: rgb(255 255 255 / 12%);
+  --rf-primary: #f1efec;
+  --rf-primary-text: #1c1c1b;
+  --rf-accent: #529cca;
+  --rf-danger: #eb5757;
+  --rf-success: #4dab74;
+  --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;
 }
-.picker-label strong { flex: none; font-weight: 600; }
-.picker-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.75; }
-.picker-hint {
+
+*, *::before, *::after { box-sizing: border-box; }
+
+
+.root {
   position: fixed;
-  left: 50%;
-  bottom: 24px;
-  transform: translateX(-50%);
+  z-index: ${REFLET_Z_INDEX.widgetRoot};
   display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 7px 12px;
-  font-size: 12.5px;
+  align-items: flex-end;
+  gap: 8px;
+  font: 13px/1.45 var(--rf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
   color: var(--rf-text);
+}
+.root:has(.panel) { width: min(var(--rf-width), calc(var(--rf-viewport-width, 100vw) - 24px)); }
+.root[data-position$="right"] { right: calc(var(--rf-viewport-right, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
+.root[data-position$="left"] { left: calc(var(--rf-viewport-left, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
+.root[data-position^="bottom"] { bottom: calc(var(--rf-viewport-bottom, 0px) + max(var(--rf-offset), env(safe-area-inset-bottom))); }
+.root[data-position^="top"] { top: calc(var(--rf-viewport-top, 0px) + max(var(--rf-offset), env(safe-area-inset-top))); align-items: flex-start; }
+.root[data-position="bottom-right"] .panel { transform-origin: bottom right; }
+.root[data-position="bottom-left"] .panel { transform-origin: bottom left; }
+.root[data-position^="top"] .panel { transform-origin: top center; }
+.root[data-editing="true"] { visibility: hidden; pointer-events: none; }
+button, select, input, textarea { font: inherit; color: inherit; }
+button { margin: 0; cursor: pointer; border: 0; background: none; transition: scale 120ms var(--rf-ease); }
+button:disabled { cursor: not-allowed; opacity: .4; }
+button:active:not(:disabled) { scale: .97; }
+svg { flex-shrink: 0; }
+:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
+.icon-btn, .tool {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 40px; height: 40px; flex: none; border-radius: var(--rf-pill); color: var(--rf-text-muted);
+  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease), scale 120ms var(--rf-ease);
+}
+.icon-btn:hover, .tool:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
+.launcher {
+  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
+  border-radius: var(--rf-pill); color: var(--rf-text);
+  font-weight: 500;
+  transition: transform 200ms var(--rf-ease), box-shadow 200ms var(--rf-ease), scale 120ms var(--rf-ease);
+}
+.launcher:hover { transform: translateY(-2px); box-shadow: var(--rf-shadow); }
+.launcher-icon { display: flex; width: 15px; height: 15px; }
+.launcher-icon .on-close { display: none; }
+.floating-controls {
+  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; }
+.drag-handle:active { cursor: grabbing; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ghost-btn { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border-radius: var(--rf-radius-sm); }
+.ghost-btn:hover { background: var(--rf-bg-hover); }
+.error { margin: 0; padding: 10px 14px; border-radius: var(--rf-radius); font-size: 12px; color: var(--rf-danger); }
+.done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; text-align: center; }
+.done svg { color: var(--rf-success); }
+.done h2 { margin: 0; font-size: 14px; font-weight: 600; }
+.done p { margin: 0; font-size: 12px; color: var(--rf-text-muted); }
+.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rf-spin 700ms linear infinite; }
+.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+@keyframes rf-spin { to { transform: rotate(360deg); } }
+@keyframes rf-in { from { opacity: 0; transform: translateY(5px) scale(.98); } }
+@keyframes rf-fade { from { opacity: 0; } }
+@media (pointer: coarse) {
+  .icon-btn, .tool { width: 44px; height: 44px; }
+  .launcher, .ghost-btn { min-height: 44px; }
+}
+.glass {
+  position: relative;
+  isolation: isolate;
+  border: 1px solid var(--rf-glass-stroke);
+  box-shadow: inset 0 1px 0 var(--rf-glass-highlight), var(--rf-shadow);
+}
+.glass::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
   background: var(--rf-bg);
-  border-radius: 10px;
-  box-shadow: var(--rf-shadow);
-  animation: rf-fade 240ms var(--rf-ease);
+  pointer-events: none;
 }
-.picker-hint kbd {
-  padding: 1px 5px;
-  font: inherit;
-  font-size: 11px;
-  color: var(--rf-text-muted);
-  border-radius: 4px;
-  background: var(--rf-bg-subtle);
-  box-shadow: var(--rf-shadow-inset);
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .glass::before {
+    background: var(--rf-glass);
+    -webkit-backdrop-filter: blur(20px) saturate(1.6);
+    backdrop-filter: blur(20px) saturate(1.6);
+  }
 }
-
-
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .glass::before { background: var(--rf-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
+}
+.capture-halo { position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.captureHalo}; pointer-events: none; opacity: 0; transition: opacity 500ms var(--rf-ease); }
+.capture-halo[data-active="true"] { opacity: 1; transition-duration: 140ms; }
+.capture-halo::before { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 14px 0 36px -16px var(--rf-accent), inset -14px 0 36px -16px var(--rf-accent), inset 0 0 4px 1px color-mix(in srgb, var(--rf-accent) 35%, transparent); }
+.capture-halo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rf-accent) 20%, transparent), transparent 5%, transparent 95%, color-mix(in srgb, var(--rf-accent) 20%, transparent)); }
+${COMPOSER_STYLES}
+${ANNOTATOR_STYLES}
+${PICKER_STYLES}
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation: none !important; transition: none !important; }
+  button:active:not(:disabled) { scale: 1; }
 }
 `;
 //#endregion
@@ -3007,140 +3568,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",
@@ -3151,28 +3590,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
@@ -3186,10 +3624,9 @@ function deriveTitle(message) {
 	return `${(lastSpace > 0 ? clipped.slice(0, lastSpace) : clipped).trimEnd()}…`;
 }
 function buildDescription(params) {
-	const { category, email, isAnonymous, message } = params;
-	const label = category.charAt(0).toUpperCase() + category.slice(1);
+	const { email, isAnonymous, message } = params;
 	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
-	return `[${label}] ${message.trim()}${contact}`;
+	return `${message.trim()}${contact}`;
 }
 async function attachPreparedScreenshots(transport, result) {
 	const results = await Promise.allSettled(result.pendingScreenshots.map((screenshot) => transport.saveScreenshot({
@@ -3293,36 +3730,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];
 		});
@@ -3367,27 +3796,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]);
@@ -3397,16 +3826,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,
@@ -3415,16 +3846,13 @@ function useScreenshotDrafts(captureFailed, onError) {
 		screenshots,
 		selectScreenshot: setActiveId,
 		setAnnotations,
+		setSelectionComment,
 		storeScreenshot,
 		takeCapture
 	};
 }
 //#endregion
 //#region src/feedback/ui/state/use-widget-config.ts
-function defaultCategory(props) {
-	const preferred = props.defaultCategory ?? "bug";
-	return props.categories?.find((category) => category === preferred) ?? props.categories?.[0] ?? preferred;
-}
 function dismissalDuration(days) {
 	return days !== void 0 && Number.isFinite(days) && days > 0 ? days : null;
 }
@@ -3446,7 +3874,6 @@ function useWidgetConfig(props) {
 			user,
 			userToken
 		]),
-		defaultCategory: defaultCategory(props),
 		dismissalKey: `reflet-feedback-dismissed:${publicKey ?? "default"}:${user?.id ?? "anonymous"}`,
 		dismissForDays: dismissalDuration(props.dismissForDays),
 		isAnonymous: !(user || userToken)
@@ -3533,16 +3960,13 @@ 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 useWidgetState(props) {
-	const { client, defaultCategory, dismissalKey, dismissForDays, isAnonymous } = useWidgetConfig(props);
+	const { client, dismissalKey, dismissForDays, isAnonymous } = useWidgetConfig(props);
 	const [isOpen, setIsOpen] = useState(false);
 	const [annotationTrigger, setAnnotationTrigger] = useState(null);
 	const [step, setStep] = useState("compose");
-	const [category, setCategory] = useState(defaultCategory);
 	const [message, setMessage] = useState("");
 	const [email, setEmail] = useState("");
 	const [honeypot, setHoneypot] = useState("");
-	const [elementCapture, replaceElementCapture] = useOwnedCapture();
-	const [selection, setSelection] = useState(null);
 	const [isElementCapturing, setIsElementCapturing] = useState(false);
 	const successTimer = useRef(null);
 	const [error, setError] = useState(null);
@@ -3567,7 +3991,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;
@@ -3584,7 +4008,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);
@@ -3592,20 +4016,12 @@ function useWidgetState(props) {
 		pickRef.current++;
 		setIsElementCapturing(false);
 		resetScreenshots();
-		replaceElementCapture(null);
-		setSelection(null);
 		setMessage("");
 		setEmail("");
 		setHoneypot("");
 		setError(null);
 		setStep("compose");
-		setCategory(defaultCategory);
-	}, [
-		defaultCategory,
-		resetSubmission,
-		resetScreenshots,
-		replaceElementCapture
-	]);
+	}, [resetSubmission, resetScreenshots]);
 	const close = useCallback(() => {
 		setIsOpen(false);
 		reset();
@@ -3635,11 +4051,13 @@ function useWidgetState(props) {
 		props.onOpen,
 		refreshAutomatic
 	]);
-	const selectElement = useCallback(async (element) => {
+	const selectElement = useCallback(async (element, note = "") => {
 		cancelPendingCapture();
 		setIsElementCapturing(true);
-		const picked = buildElementSelection(element);
-		setSelection(picked);
+		const picked = note ? {
+			...buildElementSelection(element),
+			comment: note.slice(0, MAX_SELECTION_COMMENT_LENGTH)
+		} : buildElementSelection(element);
 		setStep("compose");
 		const pick = ++pickRef.current;
 		const context = collectPageContext({ sdkVersion: SDK_VERSION });
@@ -3650,48 +4068,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);
-		setIsElementCapturing(false);
-		clearSelectionAnnotations();
-	}, [clearSelectionAnnotations, replaceElementCapture]);
+	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({
-			category,
 			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.3.5" }),
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.4.1" }),
 				consoleEvents: consoleRef.current?.events(),
 				metadata: props.metadata,
-				selection: selection ?? void 0
+				selections
 			},
-			element: elementCapture,
 			email,
 			isAnonymous,
-			message,
+			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) => {
@@ -3702,13 +4127,11 @@ function useWidgetState(props) {
 		annotations,
 		annotationTrigger,
 		canDismiss: dismissForDays !== null,
+		canSubmit: reportedMessage.length > 0,
 		capture,
-		category,
-		clearSelection,
 		close,
 		dismiss,
 		dismissForDays,
-		elementCapture,
 		email,
 		error,
 		hasPendingAttachments: submission.hasPendingAttachments,
@@ -3723,15 +4146,16 @@ function useWidgetState(props) {
 		open,
 		pendingCapture: gallery.pendingCapture,
 		removeCapture: gallery.removeCapture,
+		requestSubmit,
 		retakeCapture: gallery.retakeCapture,
 		screenshots: gallery.screenshots,
 		selectElement,
-		selection,
+		selections,
 		setAnnotations: gallery.setAnnotations,
-		setCategory,
 		setEmail,
 		setHoneypot,
 		setMessage,
+		setSelectionComment: gallery.setSelectionComment,
 		setStep,
 		step,
 		submit,
@@ -3740,13 +4164,8 @@ function useWidgetState(props) {
 }
 //#endregion
 //#region src/feedback/widget.tsx
-const DEFAULT_CATEGORIES = [
-	"bug",
-	"idea",
-	"question"
-];
 function RefletFeedback(props) {
-	const { categories = DEFAULT_CATEGORIES, enabled = true, hotkey = null, offset = 20, position = "bottom-right", theme = "auto" } = props;
+	const { enabled = true, hotkey = null, offset = 20, position = "bottom-right", theme = "auto" } = props;
 	const labels = {
 		...DEFAULT_WIDGET_LABELS,
 		...props.labels
@@ -3784,10 +4203,7 @@ function RefletFeedback(props) {
 			}),
 			/* @__PURE__ */ jsx(FloatingWidget, {
 				labels,
-				options: {
-					categories,
-					position
-				},
+				position,
 				state
 			}),
 			isOpen && state.step === "annotate" && state.activeScreenshot && /* @__PURE__ */ jsx(Annotator, {
@@ -3796,16 +4212,22 @@ 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, {
-				hint: labels.pickElementHint,
+				labels,
 				onCancel: () => state.setStep("compose"),
 				onPick: state.selectElement
 			})