reflet-sdk 0.3.5 → 0.4.0

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,24 +810,23 @@ function collectPageContext(options) {
 }
 //#endregion
 //#region src/feedback/types.ts
-const SDK_VERSION = "0.3.5";
+const SDK_VERSION = "0.4.0";
 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",
@@ -835,8 +835,9 @@ const DEFAULT_WIDGET_LABELS = {
 	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",
@@ -861,7 +862,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 +871,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 +921,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);
 }
@@ -1457,9 +1445,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 +1500,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 +1519,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 +1577,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 +1605,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");
@@ -1944,7 +1955,8 @@ function ScreenshotCard({ item, labels, state }) {
 //#region src/feedback/ui/composer/attachments.tsx
 function SelectedElement({ labels, state }) {
 	if (!state.selection) return null;
-	const component = state.selection.componentStack[0];
+	const { comment, componentStack, label, selector, sourceLocation } = state.selection;
+	const component = componentStack[0];
 	return /* @__PURE__ */ jsxs("div", {
 		className: "selection-chip glass",
 		children: [/* @__PURE__ */ jsxs("button", {
@@ -1952,17 +1964,24 @@ function SelectedElement({ labels, state }) {
 			className: "selection-label",
 			disabled: state.isEditingDisabled || state.isCapturing,
 			onClick: () => state.setStep("picking"),
-			title: state.selection.sourceLocation ?? state.selection.selector,
+			title: comment ?? sourceLocation ?? selector,
 			type: "button",
-			children: [state.elementCapture ? /* @__PURE__ */ jsx("img", {
-				alt: "",
-				height: 32,
-				src: state.elementCapture.objectUrl,
-				width: 32
-			}) : /* @__PURE__ */ jsx(TargetIcon, {}), /* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: component ? `<${component}>` : state.selection.label
-			})]
+			children: [
+				state.elementCapture ? /* @__PURE__ */ jsx("img", {
+					alt: "",
+					height: 32,
+					src: state.elementCapture.objectUrl,
+					width: 32
+				}) : /* @__PURE__ */ jsx(TargetIcon, {}),
+				/* @__PURE__ */ jsx("span", {
+					className: "selection-name",
+					children: component ? `<${component}>` : label
+				}),
+				comment && /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: comment
+				})
+			]
 		}), /* @__PURE__ */ jsx("button", {
 			"aria-label": labels.clearSelection,
 			className: "icon-btn",
@@ -2092,34 +2111,12 @@ 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 }) {
+function ComposerControls({ floatingControls, labels, state }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "composer-toolbar",
-		children: [options.floatingControls, /* @__PURE__ */ jsxs("div", {
+		children: [floatingControls, /* @__PURE__ */ jsxs("div", {
 			className: "composer-controls glass",
 			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",
@@ -2167,7 +2164,7 @@ function MessageInput({ labels, state }) {
 			"aria-busy": state.isSubmitting,
 			"aria-label": submitLabel,
 			className: "submit",
-			disabled: state.isSubmitting || state.isCapturing || !state.message.trim(),
+			disabled: state.isSubmitting || state.isCapturing || !state.canSubmit,
 			title: submitLabel,
 			type: "submit",
 			children: state.isSubmitting ? /* @__PURE__ */ jsx("span", { className: "spinner" }) : /* @__PURE__ */ jsx(ArrowIcon, {})
@@ -2176,7 +2173,7 @@ function MessageInput({ labels, state }) {
 }
 //#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,7 +2190,7 @@ function FeedbackPanel({ options, labels, state }) {
 			]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "composer-toolbar",
-			children: options.floatingControls
+			children: floatingControls
 		})]
 	});
 	return /* @__PURE__ */ jsxs("section", {
@@ -2216,8 +2213,8 @@ function FeedbackPanel({ options, labels, state }) {
 					state
 				}),
 				/* @__PURE__ */ jsx(ComposerControls, {
+					floatingControls,
 					labels,
-					options,
 					state
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -2241,8 +2238,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,25 +2337,10 @@ 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") {
@@ -2309,17 +2369,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) => {
@@ -2369,10 +2424,10 @@ 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 floating = useFloatingPosition(position);
 	const showPanel = state.isOpen && !minimized;
 	const minimize = () => {
 		setMinimized(true);
@@ -2396,12 +2451,12 @@ 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" && /* @__PURE__ */ jsx(SelectionOutline, { node: state.selectedNode }),
+			showPanel ? /* @__PURE__ */ jsx(FeedbackPanel, {
 				floatingControls: /* @__PURE__ */ jsxs("div", {
 					className: "floating-controls glass",
 					children: [/* @__PURE__ */ jsx("button", {
@@ -2419,26 +2474,85 @@ function FloatingWidget({ labels, options, state }) {
 						type: "button",
 						children: /* @__PURE__ */ jsx(MinusIcon, {})
 					})]
-				})
-			},
-			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,233 +2569,298 @@ 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);
-}
+//#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 { opacity: 0; transform: translateY(8px); }
 
-: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;
+.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: 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) {
+  .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; }
 }
-
-*, *::before, *::after { box-sizing: border-box; }
-
-
-.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);
+@media (pointer: coarse) and (max-width: 360px) {
+  .toolbar { gap: 4px; padding-inline: 2px; }
+  .toolbar .group { padding: 0; }
 }
-.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; } }
-@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);
-  }
-}
-@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: 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; }
@@ -2689,7 +2868,7 @@ svg { flex-shrink: 0; }
 .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);
+  background: transparent; line-height: 20px;
 }
 .panel:focus-within .message-row[data-expanded="true"] textarea { height: 76px; }
 .message-row textarea::placeholder { color: var(--rf-text-muted); }
@@ -2701,11 +2880,6 @@ svg { flex-shrink: 0; }
 .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,7 +2888,7 @@ 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); }
@@ -2733,9 +2907,9 @@ summary::-webkit-details-marker { display: none; }
 .attachments:empty { display: none; }
 .screenshot-attachment, .attachment-skeleton { position: relative; flex: none; margin: 0; min-width: 0; width: 128px; height: 78px; padding: 3px; border-radius: var(--rf-radius); animation: rf-in 260ms var(--rf-ease); }
 .screenshot-preview { display: block; position: relative; width: 100%; height: 100%; padding: 0; overflow: hidden; border-radius: 16px; }
-.screenshot-preview img, .screenshot-preview canvas { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
+.screenshot-preview img, .screenshot-preview canvas { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; outline: 1px solid var(--rf-hairline); outline-offset: -1px; }
 .screenshot-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 { position: absolute; left: 5px; bottom: 5px; display: flex; align-items: center; gap: 4px; padding: 3px 6px; font-size: 10px; font-variant-numeric: tabular-nums; border-radius: var(--rf-pill); color: var(--rf-text); }
 .attachment-caption svg { width: 12px; height: 12px; }
 .annotation-count { color: var(--rf-text); font-weight: 600; }
 .attachment-actions { position: absolute; right: 4px; bottom: -4px; display: flex; gap: 1px; padding: 1px; border-radius: var(--rf-pill); opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity 150ms var(--rf-ease), transform 150ms var(--rf-ease); }
@@ -2745,9 +2919,9 @@ summary::-webkit-details-marker { display: none; }
 .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-name { flex: none; font-weight: 600; color: var(--rf-accent); }
+.selection-label img { object-fit: contain; border-radius: var(--rf-pill); outline: 1px solid var(--rf-hairline); outline-offset: -1px; }
 @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; }
   .submit { width: 44px; height: 44px; }
@@ -2759,79 +2933,26 @@ summary::-webkit-details-marker { display: none; }
   .email-field input { font-size: 16px; }
   .dismiss-btn, .selection-label { 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 (pointer: coarse) and (max-width: 360px) {
-  .toolbar { gap: 4px; padding-inline: 2px; }
-  .toolbar .group { padding: 0; }
-}
-
-
+`;
+//#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,32 +2962,45 @@ 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: 24px;
+  bottom: calc(24px + env(safe-area-inset-bottom));
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 7px 12px;
+  max-width: calc(100vw - 24px);
+  padding: 5px 6px 5px 12px;
   font-size: 12.5px;
   color: var(--rf-text);
   background: var(--rf-bg);
-  border-radius: 10px;
+  border-radius: var(--rf-pill);
   box-shadow: 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;
@@ -2876,10 +3010,227 @@ summary::-webkit-details-marker { display: none; }
   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-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-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-shadow-low: 0 0 0 1px rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 30%), 0 4px 10px -4px rgb(0 0 0 / 40%);
+  --rf-shadow: 0 0 0 1px rgb(255 255 255 / 7%), 0 2px 5px -1px rgb(0 0 0 / 35%), 0 14px 36px -10px rgb(0 0 0 / 55%);
+  --rf-shadow-float: 0 4px 14px -3px rgb(0 0 0 / 55%);
+  color-scheme: dark;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+
+.root {
+  position: fixed;
+  z-index: ${REFLET_Z_INDEX.widgetRoot};
+  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; 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; 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: 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);
+  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);
+  }
+}
+@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
@@ -3186,10 +3537,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({
@@ -3421,10 +3771,6 @@ function useScreenshotDrafts(captureFailed, onError) {
 }
 //#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 +3792,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 +3878,16 @@ 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 [selectedNode, setSelectedNode] = useState(null);
 	const [isElementCapturing, setIsElementCapturing] = useState(false);
 	const successTimer = useRef(null);
 	const [error, setError] = useState(null);
@@ -3594,14 +3939,13 @@ function useWidgetState(props) {
 		resetScreenshots();
 		replaceElementCapture(null);
 		setSelection(null);
+		setSelectedNode(null);
 		setMessage("");
 		setEmail("");
 		setHoneypot("");
 		setError(null);
 		setStep("compose");
-		setCategory(defaultCategory);
 	}, [
-		defaultCategory,
 		resetSubmission,
 		resetScreenshots,
 		replaceElementCapture
@@ -3635,11 +3979,15 @@ function useWidgetState(props) {
 		props.onOpen,
 		refreshAutomatic
 	]);
-	const selectElement = useCallback(async (element) => {
+	const selectElement = useCallback(async (element, note = "") => {
 		cancelPendingCapture();
 		setIsElementCapturing(true);
-		const picked = buildElementSelection(element);
+		const picked = note ? {
+			...buildElementSelection(element),
+			comment: note.slice(0, MAX_SELECTION_COMMENT_LENGTH)
+		} : buildElementSelection(element);
 		setSelection(picked);
+		setSelectedNode(element);
 		setStep("compose");
 		const pick = ++pickRef.current;
 		const context = collectPageContext({ sdkVersion: SDK_VERSION });
@@ -3669,18 +4017,19 @@ function useWidgetState(props) {
 		pickRef.current++;
 		replaceElementCapture(null);
 		setSelection(null);
+		setSelectedNode(null);
 		setIsElementCapturing(false);
 		clearSelectionAnnotations();
 	}, [clearSelectionAnnotations, replaceElementCapture]);
+	const reportedMessage = message.trim() || selection?.comment || "";
 	const submit = () => {
 		if (honeypot) {
 			setStep("success");
 			return;
 		}
 		return submission.submit({
-			category,
 			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.3.5" }),
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.4.0" }),
 				consoleEvents: consoleRef.current?.events(),
 				metadata: props.metadata,
 				selection: selection ?? void 0
@@ -3688,7 +4037,7 @@ function useWidgetState(props) {
 			element: elementCapture,
 			email,
 			isAnonymous,
-			message,
+			message: reportedMessage,
 			screenshots: gallery.screenshots
 		});
 	};
@@ -3702,8 +4051,8 @@ function useWidgetState(props) {
 		annotations,
 		annotationTrigger,
 		canDismiss: dismissForDays !== null,
+		canSubmit: reportedMessage.length > 0,
 		capture,
-		category,
 		clearSelection,
 		close,
 		dismiss,
@@ -3726,9 +4075,9 @@ function useWidgetState(props) {
 		retakeCapture: gallery.retakeCapture,
 		screenshots: gallery.screenshots,
 		selectElement,
+		selectedNode,
 		selection,
 		setAnnotations: gallery.setAnnotations,
-		setCategory,
 		setEmail,
 		setHoneypot,
 		setMessage,
@@ -3740,13 +4089,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 +4128,7 @@ function RefletFeedback(props) {
 			}),
 			/* @__PURE__ */ jsx(FloatingWidget, {
 				labels,
-				options: {
-					categories,
-					position
-				},
+				position,
 				state
 			}),
 			isOpen && state.step === "annotate" && state.activeScreenshot && /* @__PURE__ */ jsx(Annotator, {
@@ -3805,7 +4146,7 @@ function RefletFeedback(props) {
 				labels
 			}),
 			isOpen && state.step === "picking" && /* @__PURE__ */ jsx(ElementPicker, {
-				hint: labels.pickElementHint,
+				labels,
 				onCancel: () => state.setStep("compose"),
 				onPick: state.selectElement
 			})