reflet-sdk 0.4.2 → 0.4.3

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 { n as RefletContext, t as REFLET_Z_INDEX } from "./z-index-_Q9PWbfY.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";
@@ -810,7 +810,7 @@ function collectPageContext(options) {
 }
 //#endregion
 //#region src/feedback/types.ts
-const SDK_VERSION = "0.4.2";
+const SDK_VERSION = "0.4.3";
 const DEFAULT_WIDGET_LABELS = {
 	annotateHint: "Draw on the screenshot to point at the problem.",
 	attachElement: "Attach this element",
@@ -1169,6 +1169,54 @@ function useTextAnnotation(options) {
 	};
 }
 //#endregion
+//#region src/feedback/ui/widget-keys.ts
+const KEY_EVENTS = [
+	"keydown",
+	"keyup",
+	"keypress"
+];
+function isWidgetNode(node) {
+	if (node instanceof ShadowRoot) return node.host.hasAttribute(WIDGET_MARKER);
+	return node instanceof Element && node.hasAttribute("data-reflet-widget");
+}
+function startsInWidget(event) {
+	return event.composedPath().some(isWidgetNode);
+}
+function relayInsideWidget(event) {
+	const target = event.composedPath()[0];
+	if (!(event instanceof KeyboardEvent && target && startsInWidget(event))) return;
+	event.stopImmediatePropagation();
+	const relay = new KeyboardEvent(event.type, {
+		altKey: event.altKey,
+		bubbles: true,
+		cancelable: true,
+		charCode: event.charCode,
+		code: event.code,
+		ctrlKey: event.ctrlKey,
+		isComposing: event.isComposing,
+		key: event.key,
+		keyCode: event.keyCode,
+		location: event.location,
+		metaKey: event.metaKey,
+		repeat: event.repeat,
+		shiftKey: event.shiftKey
+	});
+	target.dispatchEvent(relay);
+	if (relay.defaultPrevented) event.preventDefault();
+}
+if (typeof window !== "undefined") for (const type of KEY_EVENTS) window.addEventListener(type, relayInsideWidget, true);
+function listenToKeydown(anchor, onKeyDown, capture = false) {
+	const widgetRoot = anchor?.getRootNode();
+	const targets = widgetRoot instanceof ShadowRoot ? [document, widgetRoot] : [document];
+	const listener = (event) => {
+		if (event instanceof KeyboardEvent) onKeyDown(event);
+	};
+	for (const target of targets) target.addEventListener("keydown", listener, capture);
+	return () => {
+		for (const target of targets) target.removeEventListener("keydown", listener, capture);
+	};
+}
+//#endregion
 //#region src/feedback/ui/floating/use-details-popover.ts
 function useDetailsPopover() {
 	const [open, setOpen] = useState(false);
@@ -1196,11 +1244,11 @@ function useDetailsPopover() {
 			summaryRef.current?.focus();
 		};
 		document.addEventListener("pointerdown", dismissOutside);
-		document.addEventListener("keydown", dismissWithEscape, true);
+		const stopListeningToKeys = listenToKeydown(detailsRef.current, dismissWithEscape, true);
 		window.addEventListener("resize", reposition);
 		return () => {
 			document.removeEventListener("pointerdown", dismissOutside);
-			document.removeEventListener("keydown", dismissWithEscape, true);
+			stopListeningToKeys();
 			window.removeEventListener("resize", reposition);
 		};
 	}, []);
@@ -2456,1726 +2504,1732 @@ function SelectionOutline({ node }) {
 	});
 }
 //#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
-	};
+//#region src/feedback/core/console-recorder.ts
+const DEFAULT_LIMIT = 30;
+const MAX_MESSAGE_LENGTH = 1e3;
+const RECORDED_METHODS = ["error", "warn"];
+function serializeArgument(value) {
+	if (typeof value === "string") return value;
+	if (value instanceof Error) return `${value.name}: ${value.message}`;
+	if (value === null || value === void 0) return String(value);
+	if (typeof value === "object") try {
+		return JSON.stringify(value) ?? "[unserializable]";
+	} catch {
+		return "[unserializable]";
+	}
+	if (typeof value === "function") return "[function]";
+	return String(value);
 }
-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);
-	};
+function formatMessage(args) {
+	const message = args.map(serializeArgument).join(" ");
+	return message.length > MAX_MESSAGE_LENGTH ? `${message.slice(0, 999)}…` : message;
 }
-//#endregion
-//#region src/feedback/ui/floating/use-floating-position.ts
-const EDGE_GAP$1 = 12;
-const KEYBOARD_STEP = 24;
-const KEY_DIRECTIONS = {
-	ArrowDown: {
-		x: 0,
-		y: KEYBOARD_STEP
-	},
-	ArrowLeft: {
-		x: -24,
-		y: 0
-	},
-	ArrowRight: {
-		x: KEYBOARD_STEP,
-		y: 0
-	},
-	ArrowUp: {
-		x: 0,
-		y: -24
-	}
-};
-function clampPosition(point, bounds, viewport = visibleViewport()) {
-	return {
-		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))
+/**
+* Buffers the console noise a user saw right before reporting a bug.
+* Wrappers delegate to the previous implementation, so nothing is swallowed.
+*/
+function startConsoleRecorder(options) {
+	const limit = options?.limit ?? DEFAULT_LIMIT;
+	const buffer = [];
+	let active = true;
+	const push = (level, message) => {
+		if (!(active && message)) return;
+		buffer.push({
+			level,
+			message,
+			timestamp: Date.now()
+		});
+		if (buffer.length > limit) buffer.splice(0, buffer.length - limit);
 	};
-}
-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();
-		const anchor = {
-			x: horizontalEdge === "right" ? visible.left + visible.width - fitted.x - bounds.width : fitted.x - visible.left,
-			y: verticalEdge === "bottom" ? visible.top + visible.height - fitted.y - bounds.height : fitted.y - visible.top
-		};
-		setPosition((current) => current?.x === anchor.x && current.y === anchor.y ? current : anchor);
-	}, [horizontalEdge, verticalEdge]);
-	const keepInViewport = useCallback(() => {
-		const bounds = rootRef.current?.getBoundingClientRect();
-		if (!bounds) return;
-		const fitted = clampPosition(bounds, bounds, viewport);
-		if (Math.abs(fitted.x - bounds.x) > .5 || Math.abs(fitted.y - bounds.y) > .5) moveTo(fitted, bounds);
-	}, [moveTo, viewport]);
-	useLayoutEffect(() => {
-		keepInViewport();
-	}, [keepInViewport]);
-	useEffect(() => {
-		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(keepInViewport);
-		if (rootRef.current) observer?.observe(rootRef.current);
-		const stopListening = onViewportChange(() => setViewport(visibleViewport()));
-		return () => {
-			observer?.disconnect();
-			stopListening();
-		};
-	}, [keepInViewport]);
-	const onPointerDown = (event) => {
-		const bounds = rootRef.current?.getBoundingClientRect();
-		if (!bounds || event.button !== 0) return;
-		event.currentTarget.setPointerCapture(event.pointerId);
-		gesture.current = {
-			x: event.clientX - bounds.x,
-			y: event.clientY - bounds.y
+	const originals = /* @__PURE__ */ new Map();
+	const wrappers = /* @__PURE__ */ new Map();
+	for (const method of RECORDED_METHODS) {
+		const original = console[method];
+		const wrapper = (...args) => {
+			push(method, formatMessage(args));
+			Reflect.apply(original, console, args);
 		};
+		originals.set(method, original);
+		wrappers.set(method, wrapper);
+		console[method] = wrapper;
+	}
+	const onError = (event) => {
+		const where = event.filename ? ` (${event.filename}:${event.lineno}:${event.colno})` : "";
+		push("error", `${event.message}${where}`);
 	};
-	const onPointerMove = (event) => {
-		const bounds = rootRef.current?.getBoundingClientRect();
-		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) => {
-		const direction = KEY_DIRECTIONS[event.key];
-		const bounds = rootRef.current?.getBoundingClientRect();
-		if (!(bounds && direction)) return;
-		event.preventDefault();
-		moveTo({
-			x: bounds.x + direction.x,
-			y: bounds.y + direction.y
-		}, bounds);
+	const onRejection = (event) => {
+		push("error", `Unhandled rejection: ${serializeArgument(event.reason)}`);
 	};
-	const viewportStyles = `.root { --rf-viewport-width: ${viewport.width}px; --rf-viewport-top: ${viewport.top}px; --rf-viewport-bottom: ${viewport.bottom}px; --rf-viewport-left: ${viewport.left}px; --rf-viewport-right: ${viewport.right}px; }`;
-	const anchorStyles = position ? `.root[data-moved="true"] { left: auto; right: auto; top: auto; bottom: auto; ${horizontalEdge}: ${position.x + viewport[horizontalEdge]}px; ${verticalEdge}: ${position.y + viewport[verticalEdge]}px; }` : "";
+	window.addEventListener("error", onError);
+	window.addEventListener("unhandledrejection", onRejection);
 	return {
-		handleProps: {
-			onKeyDown,
-			onLostPointerCapture: () => {
-				gesture.current = null;
-			},
-			onPointerCancel: () => {
-				gesture.current = null;
-			},
-			onPointerDown,
-			onPointerMove,
-			onPointerUp: () => {
-				gesture.current = null;
+		events: () => buffer.slice(),
+		stop: () => {
+			if (!active) return;
+			active = false;
+			buffer.length = 0;
+			for (const method of RECORDED_METHODS) {
+				const original = originals.get(method);
+				if (original && console[method] === wrappers.get(method)) console[method] = original;
 			}
-		},
-		position,
-		rootRef,
-		styles: viewportStyles + anchorStyles
+			window.removeEventListener("error", onError);
+			window.removeEventListener("unhandledrejection", onRejection);
+		}
 	};
 }
 //#endregion
-//#region src/feedback/ui/floating/floating-widget.tsx
-function FloatingWidget({ labels, position, state }) {
-	const [minimized, setMinimized] = useState(false);
-	const launcherRef = useRef(null);
-	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?.button.focus({ preventScroll: true });
-	}, [state.step, state.annotationTrigger]);
-	useEffect(() => {
-		if (!showPanel || state.step !== "compose") return;
-		const onKeyDown = (event) => {
-			if (event instanceof KeyboardEvent && event.key === "Escape" && !event.defaultPrevented) {
-				setMinimized(true);
-				requestAnimationFrame(() => launcherRef.current?.focus());
-			}
-		};
-		const widgetRoot = floating.rootRef.current?.getRootNode();
-		document.addEventListener("keydown", onKeyDown);
-		widgetRoot?.addEventListener("keydown", onKeyDown);
-		return () => {
-			document.removeEventListener("keydown", onKeyDown);
-			widgetRoot?.removeEventListener("keydown", onKeyDown);
-		};
-	}, [
-		floating.rootRef,
-		showPanel,
-		state.step
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "root",
-		"data-editing": state.isOpen && (state.step === "picking" || state.step === "annotate"),
-		"data-moved": Boolean(floating.position),
-		"data-position": position,
-		ref: floating.rootRef,
-		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",
-					children: [/* @__PURE__ */ jsx("button", {
-						"aria-label": labels.moveFeedback,
-						className: "icon-btn drag-handle",
-						title: labels.moveFeedback,
-						type: "button",
-						...floating.handleProps,
-						children: /* @__PURE__ */ jsx(GripIcon, {})
-					}), /* @__PURE__ */ jsx("button", {
-						"aria-label": labels.minimize,
-						className: "icon-btn",
-						onClick: minimize,
-						title: labels.minimize,
-						type: "button",
-						children: /* @__PURE__ */ jsx(CloseIcon, {})
-					})]
-				}),
-				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;
+//#region src/feedback/core/submission/upload-screenshots.ts
+async function uploadImage(transport, image) {
+	const { uploadUrl } = await transport.getScreenshotUploadUrl();
+	return transport.uploadImage(uploadUrl, image);
 }
-function pickableElements() {
-	return Array.from(document.body.querySelectorAll("*")).filter(isPickable);
+async function prepareScreenshot(transport, screenshot, index) {
+	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);
+		const prepared = [{
+			annotatedStorageId: annotated ? await uploadImage(transport, annotated) : void 0,
+			annotations: annotations.length > 0 ? toWireAnnotations(annotations) : void 0,
+			captureSource: "widget",
+			filename: `screenshot-${index + 1}.png`,
+			height: image.height,
+			mimeType: image.mimeType,
+			pageUrl: context.url,
+			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);
+	}
 }
-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;
+async function uploadScreenshots(transport, submission) {
+	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;
+	});
 }
-function climb(from) {
-	let candidate = from.parentElement;
-	while (candidate && !isPickable(candidate)) candidate = candidate.parentElement;
-	return candidate;
+//#endregion
+//#region src/feedback/core/submit.ts
+const MAX_TITLE_LENGTH = 100;
+const NEWLINE = /\r?\n/;
+function deriveTitle(message) {
+	const firstLine = message.split(NEWLINE).map((line) => line.trim()).find(Boolean) ?? "";
+	if (firstLine.length <= MAX_TITLE_LENGTH) return firstLine;
+	const clipped = firstLine.slice(0, 99);
+	const lastSpace = clipped.lastIndexOf(" ");
+	return `${(lastSpace > 0 ? clipped.slice(0, lastSpace) : clipped).trimEnd()}…`;
 }
-function descend(from) {
-	let candidate = from.firstElementChild;
-	while (candidate && !isPickable(candidate)) candidate = candidate.nextElementSibling;
-	return candidate;
+function buildDescription(params) {
+	const { email, isAnonymous, message } = params;
+	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
+	return `${message.trim()}${contact}`;
 }
-function sibling(from, direction) {
-	let candidate = from[direction];
-	while (candidate && !isPickable(candidate)) candidate = candidate[direction];
-	return candidate;
+async function attachPreparedScreenshots(transport, result) {
+	const results = await Promise.allSettled(result.pendingScreenshots.map((screenshot) => transport.saveScreenshot({
+		...screenshot,
+		feedbackId: result.feedbackId
+	})));
+	const pendingScreenshots = result.pendingScreenshots.filter((_, index) => results[index]?.status === "rejected");
+	return {
+		feedbackId: result.feedbackId,
+		pendingScreenshots
+	};
 }
-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;
+async function createReportWithScreenshots(transport, submission, pendingScreenshots) {
+	const { feedbackId } = await transport.create({
+		context: submission.context,
+		description: buildDescription(submission),
+		title: deriveTitle(submission.message)
+	});
+	return attachPreparedScreenshots(transport, {
+		feedbackId,
+		pendingScreenshots
+	});
 }
-//#endregion
-//#region src/feedback/ui/picker.tsx
-const LABEL_HEIGHT = 24;
-const LABEL_GAP = 6;
-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));
+async function submitWidgetFeedback(transport, submission) {
+	if (!deriveTitle(submission.message)) throw new Error("Please describe your feedback before sending it.");
+	return createReportWithScreenshots(transport, submission, await uploadScreenshots(transport, submission));
 }
-function elementUnder(x, y) {
-	const element = document.elementFromPoint(x, y);
-	if (!element || isWidgetOwned(element)) return null;
-	return element;
+function isStorageResponse(value) {
+	return typeof value === "object" && value !== null && typeof Reflect.get(value, "storageId") === "string";
 }
-function describeTarget(element) {
+function createFeedbackTransport(client) {
 	return {
-		componentName: resolveComponentStack(getFiberFromNode(element))[0],
-		element,
-		label: describeElement(element),
-		rect: element.getBoundingClientRect(),
-		region: describeRegion(element)
+		create: (params) => client.create(params),
+		getScreenshotUploadUrl: () => client.getScreenshotUploadUrl(),
+		saveScreenshot: (params) => client.saveScreenshot(params),
+		uploadImage: async (uploadUrl, image) => {
+			const response = await fetch(uploadUrl, {
+				body: image.blob,
+				headers: { "Content-Type": image.mimeType },
+				method: "POST"
+			});
+			if (!response.ok) throw new Error(`Screenshot upload failed (${response.status})`);
+			const payload = await response.json();
+			if (!isStorageResponse(payload)) throw new Error("Screenshot upload returned no storage id");
+			return payload.storageId;
+		}
 	};
 }
-/**
-* 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
+//#endregion
+//#region src/feedback/ui/state/use-feedback-submission.ts
+function useFeedbackSubmission(options) {
+	const [activeRequest, setActiveRequest] = useState(null);
+	const [pendingReport, setPendingReport] = useState(null);
+	const requestRef = useRef(null);
+	useEffect(() => () => {
+		requestRef.current = null;
+	}, []);
+	const resetSubmission = useCallback(() => {
+		requestRef.current = null;
+		setPendingReport(null);
+		setActiveRequest(null);
+	}, []);
+	const finishSubmission = (result) => {
+		if (result.pendingScreenshots.length > 0) {
+			setPendingReport(result);
+			options.onError(options.partialUploadMessage);
+			return;
+		}
+		setPendingReport(null);
+		options.onSubmitted(result.feedbackId);
+	};
+	const submit = async (draft) => {
+		if (requestRef.current) return;
+		if (!options.client) {
+			options.onError("Reflet is missing a publicKey. Pass one to RefletFeedback or RefletProvider.");
+			return;
+		}
+		const request = {};
+		requestRef.current = request;
+		setActiveRequest(request);
+		options.onError(null);
+		try {
+			const transport = createFeedbackTransport(options.client);
+			const result = pendingReport ? await attachPreparedScreenshots(transport, pendingReport) : await submitWidgetFeedback(transport, draft);
+			if (requestRef.current === request) finishSubmission(result);
+		} catch (error) {
+			if (requestRef.current === request) options.onError(error instanceof Error ? error.message : "Something went wrong. Please try again.");
+		} finally {
+			if (requestRef.current === request) {
+				requestRef.current = null;
+				setActiveRequest(null);
+			}
+		}
 	};
 	return {
-		bottom: window.innerHeight - visibleTop + NOTE_GAP,
-		left
+		hasPendingAttachments: pendingReport !== null,
+		isEditingDisabled: activeRequest !== null || pendingReport !== null,
+		isSubmitting: activeRequest !== null,
+		resetSubmission,
+		submit
 	};
 }
-/**
-* 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. 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({ 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]);
+//#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 ownedDrafts = useRef(/* @__PURE__ */ new Map());
+	const captureRequest = useRef(null);
 	useEffect(() => {
-		const swallow = (event) => {
-			if (targetsWidget(event)) return;
-			event.preventDefault();
-			event.stopPropagation();
-		};
-		const aimAt = (x, y) => {
-			const element = elementUnder(x, y);
-			if (!element) return;
-			setTarget((current) => current?.element === element ? {
-				...current,
-				rect: element.getBoundingClientRect()
-			} : describeTarget(element));
-		};
-		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) 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);
-				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", onPointerDown, true);
-		document.addEventListener("pointerup", onPointerUp, true);
-		document.addEventListener("mousedown", swallow, true);
-		document.addEventListener("mouseup", swallow, 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";
+		const drafts = ownedDrafts.current;
 		return () => {
-			document.removeEventListener("pointermove", onMove, true);
-			document.removeEventListener("pointerdown", onPointerDown, true);
-			document.removeEventListener("pointerup", onPointerUp, true);
-			document.removeEventListener("mousedown", swallow, true);
-			document.removeEventListener("mouseup", swallow, true);
-			document.removeEventListener("click", swallow, true);
-			document.removeEventListener("keydown", onKeyDown, true);
-			window.removeEventListener("scroll", onScroll, true);
-			document.body.style.cursor = previousCursor;
+			captureRequest.current = null;
+			for (const draft of drafts.values()) releaseDraft(draft);
+			drafts.clear();
 		};
-	}, [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,
-				translate: `${rect.left}px ${rect.top}px`,
-				width: rect.width
+	}, []);
+	const storeScreenshot = useCallback((screenshot) => {
+		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];
+		});
+		setActiveId(screenshot.id);
+	}, []);
+	const cancelPendingCapture = useCallback(() => {
+		captureRequest.current = null;
+		setPendingCapture(null);
+	}, []);
+	const takeScreenshot = useCallback(async (request) => {
+		captureRequest.current = request;
+		setPendingCapture(request);
+		onError(null);
+		const context = collectPageContext({ sdkVersion: SDK_VERSION });
+		const image = await captureViewport().catch(() => null);
+		if (captureRequest.current !== request) {
+			releaseCapture(image);
+			return;
+		}
+		cancelPendingCapture();
+		if (!image) {
+			onError(captureFailed);
+			return;
+		}
+		storeScreenshot({
+			...request,
+			annotations: [],
+			context,
+			image
+		});
+	}, [
+		cancelPendingCapture,
+		captureFailed,
+		onError,
+		storeScreenshot
+	]);
+	const takeCapture = useCallback(() => {
+		if (!captureRequest.current) takeScreenshot({
+			id: crypto.randomUUID(),
+			source: "manual"
+		});
+	}, [takeScreenshot]);
+	const refreshAutomatic = useCallback(() => {
+		takeScreenshot({
+			id: ownedDrafts.current.keys().next().value ?? captureRequest.current?.id ?? crypto.randomUUID(),
+			source: "automatic"
+		});
+	}, [takeScreenshot]);
+	const retakeCapture = useCallback((id) => {
+		if (!captureRequest.current && ownedDrafts.current.has(id)) takeScreenshot({
+			id,
+			source: "manual"
+		});
+	}, [takeScreenshot]);
+	const removeCapture = useCallback((id) => {
+		if (captureRequest.current?.id === id) cancelPendingCapture();
+		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 draft of ownedDrafts.current.values()) releaseDraft(draft);
+		ownedDrafts.current.clear();
+		setScreenshots([]);
+		setActiveId(null);
+	}, [cancelPendingCapture]);
+	const setAnnotations = useCallback((annotations) => {
+		setScreenshots((previous) => previous.map((item) => item.id === activeId ? {
+			...item,
+			annotations
+		} : item));
+	}, [activeId]);
+	const setSelectionComment = useCallback((id, comment) => {
+		setScreenshots((previous) => previous.map((item) => item.id === id && item.selection ? {
+			...item,
+			selection: {
+				...item.selection,
+				comment
 			}
-		}),
-		rect && target && !pinned && /* @__PURE__ */ jsxs("div", {
-			className: "picker-label",
-			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 })]
-		}),
-		pinned ? /* @__PURE__ */ jsxs("form", {
-			className: "picker-note glass",
-			onSubmit: (event) => {
-				event.preventDefault();
-				onPick(pinned.element, note.trim());
-			},
-			style: noteStyle(pinned.rect, view),
-			children: [
-				/* @__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
-			})]
-		})
-	] });
+		} : item));
+	}, []);
+	return {
+		activeScreenshot: screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null,
+		cancelPendingCapture,
+		pendingCapture,
+		refreshAutomatic,
+		removeCapture,
+		resetScreenshots,
+		retakeCapture,
+		screenshots,
+		selectScreenshot: setActiveId,
+		setAnnotations,
+		setSelectionComment,
+		storeScreenshot,
+		takeCapture
+	};
 }
 //#endregion
-//#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; }
-
-.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) {
-  .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; }
+//#region src/feedback/ui/state/use-widget-config.ts
+function dismissalDuration(days) {
+	return days !== void 0 && Number.isFinite(days) && days > 0 ? days : null;
 }
-@media (pointer: coarse) and (max-width: 360px) {
-  .toolbar { gap: 4px; padding-inline: 2px; }
-  .toolbar .group { padding: 0; }
+function useWidgetConfig(props) {
+	const context = useContext(RefletContext);
+	const publicKey = props.publicKey ?? context?.publicKey;
+	const baseUrl = props.baseUrl ?? context?.baseUrl;
+	const user = props.user ?? context?.user;
+	const userToken = props.userToken ?? context?.userToken;
+	return {
+		client: useMemo(() => publicKey ? new Reflet({
+			baseUrl,
+			publicKey,
+			user,
+			userToken
+		}) : null, [
+			baseUrl,
+			publicKey,
+			user,
+			userToken
+		]),
+		dismissalKey: `reflet-feedback-dismissed:${publicKey ?? "default"}:${user?.id ?? "anonymous"}`,
+		dismissForDays: dismissalDuration(props.dismissForDays),
+		isAnonymous: !(user || userToken)
+	};
 }
-`;
 //#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; flex-direction: column; gap: 2px; padding: 6px; border-radius: 26px; }
-.message-row textarea {
-  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;
-}
-.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: 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-options { position: relative; }
-summary { cursor: pointer; list-style: none; }
-summary::-webkit-details-marker { display: none; }
-.options-popover { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 12px); width: min(240px, calc(100vw - 40px)); max-height: calc(50dvh - 68px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--rf-radius); animation: rf-in 160ms var(--rf-ease); }
-.composer-options[data-placement="below"] .options-popover { top: calc(100% + 12px); bottom: auto; }
-.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: 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; }
-.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; }
-.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: 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: 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; }
-.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-badge { position: absolute; left: 5px; top: 5px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--rf-pill); color: var(--rf-accent); }
-.selection-badge svg { width: 12px; height: 12px; }
-@media (pointer: coarse) {
-  .message-row { border-radius: 28px; }
-  .capture-slot { width: 64px; }
-  .message-row textarea { font-size: 16px; }
-  .submit { width: 44px; height: 44px; }
-  :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 { min-height: 44px; }
-}
-@media (max-width: 480px) {
-  .email-scrim { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 40%); animation: rf-fade 200ms var(--rf-ease); }
-  .email-prompt { position: fixed; left: 0; right: 0; bottom: 0; gap: 14px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; animation: rf-drawer-in 280ms var(--rf-ease); }
-  .email-prompt h2 { font-size: 17px; }
-  .email-prompt p { font-size: 13px; }
-  .email-prompt-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
-  .email-prompt-actions .ghost-btn, .email-prompt-actions .primary-btn { justify-content: center; min-height: 48px; }
+//#region src/feedback/ui/use-capture-sync.ts
+const RESIZE_DEBOUNCE = 400;
+/**
+* Calls `refresh` whenever the page the reporter is looking at changes shape:
+* SPA routes (which never fire popstate on push/replace — history methods must
+* be patched) and window resizes, debounced. Keeps the frozen screenshot and
+* page context describing what the reporter currently sees.
+*/
+function useCaptureSync(enabled, refresh) {
+	useEffect(() => {
+		if (!enabled) return;
+		const history = window.history;
+		const originalPush = history.pushState;
+		const originalReplace = history.replaceState;
+		const hadOwnPush = Object.hasOwn(history, "pushState");
+		const hadOwnReplace = Object.hasOwn(history, "replaceState");
+		history.pushState = function pushState(data, unused, url) {
+			const result = originalPush.call(history, data, unused, url);
+			refresh();
+			return result;
+		};
+		history.replaceState = function replaceState(data, unused, url) {
+			const result = originalReplace.call(history, data, unused, url);
+			refresh();
+			return result;
+		};
+		window.addEventListener("popstate", refresh);
+		let resizeTimer;
+		const onResize = () => {
+			window.clearTimeout(resizeTimer);
+			resizeTimer = window.setTimeout(refresh, RESIZE_DEBOUNCE);
+		};
+		window.addEventListener("resize", onResize);
+		return () => {
+			if (hadOwnPush) history.pushState = originalPush;
+			else Reflect.deleteProperty(history, "pushState");
+			if (hadOwnReplace) history.replaceState = originalReplace;
+			else Reflect.deleteProperty(history, "replaceState");
+			window.removeEventListener("popstate", refresh);
+			window.clearTimeout(resizeTimer);
+			window.removeEventListener("resize", onResize);
+		};
+	}, [enabled, refresh]);
 }
-@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);
-  will-change: translate;
-  transition: translate 130ms var(--rf-ease);
+//#region src/feedback/ui/use-widget-state.ts
+const SUCCESS_CLOSE_DELAY = 2400;
+const IS_APPLE = /Mac|iPhone|iPad/;
+const MILLISECONDS_PER_DAY = 864e5;
+function readDismissedUntil(key) {
+	if (typeof window === "undefined") return 0;
+	try {
+		const value = Number.parseInt(window.localStorage.getItem(key) ?? "", 10);
+		if (Number.isFinite(value) && value > Date.now()) return value;
+		window.localStorage.removeItem(key);
+	} catch {
+		return 0;
+	}
+	return 0;
 }
-.picker-box[data-pinned="true"] { transition: none; }
-.picker-label {
-  position: fixed;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: min(420px, 90vw);
-  height: 24px;
-  padding: 0 8px;
-  font-size: 11.5px;
-  font-weight: 500;
-  color: var(--rf-accent-text);
-  background: var(--rf-accent);
-  border-radius: 6px;
-  box-shadow: var(--rf-shadow-float);
-  white-space: nowrap;
-  overflow: hidden;
-  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;
+function writeDismissedUntil(key, until) {
+	try {
+		window.localStorage.setItem(key, String(until));
+	} catch {}
 }
-.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;
+function matchesHotkey(event, hotkey, platform = typeof navigator === "undefined" ? "" : navigator.platform) {
+	const parts = hotkey.toLowerCase().split("+").map((part) => part.trim());
+	const key = parts.at(-1);
+	if (!key || event.key.toLowerCase() !== key) return false;
+	const isApple = IS_APPLE.test(platform);
+	const wantsMod = parts.includes("mod");
+	const expected = {
+		alt: parts.includes("alt") || parts.includes("option"),
+		ctrl: parts.includes("ctrl") || wantsMod && !isApple,
+		meta: parts.includes("meta") || parts.includes("cmd") || wantsMod && isApple,
+		shift: parts.includes("shift")
+	};
+	return event.altKey === expected.alt && event.ctrlKey === expected.ctrl && event.metaKey === expected.meta && event.shiftKey === expected.shift;
 }
-.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; }
+function useWidgetState(props) {
+	const { client, dismissalKey, dismissForDays, isAnonymous } = useWidgetConfig(props);
+	const [isOpen, setIsOpen] = useState(false);
+	const [annotationTrigger, setAnnotationTrigger] = useState(null);
+	const [step, setStep] = useState("compose");
+	const [message, setMessage] = useState("");
+	const [email, setEmail] = useState("");
+	const [honeypot, setHoneypot] = useState("");
+	const [isElementCapturing, setIsElementCapturing] = useState(false);
+	const successTimer = useRef(null);
+	const [error, setError] = useState(null);
+	const [dismissedUntil, setDismissedUntil] = useState(() => readDismissedUntil(dismissalKey));
+	const pickRef = useRef(0);
+	useEffect(() => () => {
+		pickRef.current++;
+		if (successTimer.current) clearTimeout(successTimer.current);
+	}, []);
+	const consoleRef = useRef(null);
+	useEffect(() => {
+		setDismissedUntil(readDismissedUntil(dismissalKey));
+	}, [dismissalKey]);
+	useEffect(() => {
+		if (props.captureConsole === false) return;
+		const recorder = startConsoleRecorder();
+		consoleRef.current = recorder;
+		return () => {
+			consoleRef.current = null;
+			recorder.stop();
+		};
+	}, [props.captureConsole]);
+	const captureFailed = props.labels?.captureFailed ?? DEFAULT_WIDGET_LABELS.captureFailed;
+	const gallery = useScreenshotDrafts(captureFailed, setError);
+	const { activeScreenshot, cancelPendingCapture, refreshAutomatic, resetScreenshots, storeScreenshot } = gallery;
+	const capture = activeScreenshot?.image ?? null;
+	const annotations = activeScreenshot?.annotations ?? [];
+	const isCapturing = gallery.pendingCapture !== null || isElementCapturing;
+	const submission = useFeedbackSubmission({
+		client,
+		onError: setError,
+		onSubmitted: (feedbackId) => {
+			setStep("success");
+			props.onSubmit?.({ feedbackId });
+			successTimer.current = setTimeout(close, SUCCESS_CLOSE_DELAY);
+		},
+		partialUploadMessage: props.labels?.attachmentUploadFailed ?? DEFAULT_WIDGET_LABELS.attachmentUploadFailed
+	});
+	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 && !gallery.screenshots.some((draft) => draft.selection) && props.captureOnOpen !== false, refreshAutomatic);
+	const reset = useCallback(() => {
+		if (successTimer.current) clearTimeout(successTimer.current);
+		setAnnotationTrigger(null);
+		resetSubmission();
+		pickRef.current++;
+		setIsElementCapturing(false);
+		resetScreenshots();
+		setMessage("");
+		setEmail("");
+		setHoneypot("");
+		setError(null);
+		setStep("compose");
+	}, [resetSubmission, resetScreenshots]);
+	const close = useCallback(() => {
+		setIsOpen(false);
+		reset();
+		props.onClose?.();
+	}, [reset, props.onClose]);
+	const dismiss = useCallback(() => {
+		if (dismissForDays === null) return;
+		const until = Date.now() + dismissForDays * MILLISECONDS_PER_DAY;
+		writeDismissedUntil(dismissalKey, until);
+		setIsOpen(false);
+		reset();
+		setDismissedUntil(until);
+		props.onDismiss?.({ until });
+	}, [
+		dismissForDays,
+		dismissalKey,
+		props.onDismiss,
+		reset
+	]);
+	const open = useCallback(() => {
+		setIsOpen(true);
+		setStep("compose");
+		props.onOpen?.();
+		if (props.captureOnOpen !== false) refreshAutomatic();
+	}, [
+		props.captureOnOpen,
+		props.onOpen,
+		refreshAutomatic
+	]);
+	const selectElement = useCallback(async (element, note = "") => {
+		cancelPendingCapture();
+		setIsElementCapturing(true);
+		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 });
+		const [fresh, closeUp] = await Promise.all([captureViewport().catch(() => null), captureElementCloseUp(element).catch(() => null)]);
+		if (pickRef.current !== pick) {
+			releaseCapture(fresh);
+			releaseCapture(closeUp);
+			return;
+		}
+		setIsElementCapturing(false);
+		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"
+		});
+	}, [
+		cancelPendingCapture,
+		captureFailed,
+		storeScreenshot
+	]);
+	const selections = gallery.screenshots.flatMap(({ selection }) => selection ? [selection] : []);
+	const firstElementNote = selections.find(({ comment }) => comment)?.comment;
+	const reportedMessage = message.trim() || firstElementNote || "";
+	const submit = () => {
+		if (honeypot) {
+			setStep("success");
+			return;
+		}
+		setStep("compose");
+		return submission.submit({
+			context: {
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.4.3" }),
+				consoleEvents: consoleRef.current?.events(),
+				metadata: props.metadata,
+				selections
+			},
+			email,
+			isAnonymous,
+			message: reportedMessage,
+			screenshots: gallery.screenshots
+		});
+	};
+	const requestSubmit = () => {
+		if (isAnonymous && email.length === 0 && !submission.hasPendingAttachments && !honeypot) {
+			setStep("email");
+			return;
+		}
+		return submit();
+	};
+	return {
+		activeScreenshot,
+		annotateScreenshot: (id, trigger) => {
+			setAnnotationTrigger(trigger);
+			gallery.selectScreenshot(id);
+			setStep("annotate");
+		},
+		annotations,
+		annotationTrigger,
+		canDismiss: dismissForDays !== null,
+		canSubmit: reportedMessage.length > 0,
+		capture,
+		close,
+		dismiss,
+		dismissForDays,
+		email,
+		error,
+		hasPendingAttachments: submission.hasPendingAttachments,
+		honeypot,
+		isAnonymous,
+		isCapturing,
+		isDismissed: dismissedUntil > Date.now(),
+		isEditingDisabled: submission.isEditingDisabled,
+		isOpen,
+		isSubmitting: submission.isSubmitting,
+		message,
+		open,
+		pendingCapture: gallery.pendingCapture,
+		removeCapture: gallery.removeCapture,
+		requestSubmit,
+		retakeCapture: gallery.retakeCapture,
+		screenshots: gallery.screenshots,
+		selectElement,
+		selections,
+		setAnnotations: gallery.setAnnotations,
+		setEmail,
+		setHoneypot,
+		setMessage,
+		setSelectionComment: gallery.setSelectionComment,
+		setStep,
+		step,
+		submit,
+		takeCapture: gallery.takeCapture
+	};
 }
-
-`;
 //#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;
+//#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
+	};
 }
-
-*, *::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);
+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);
+	};
 }
-.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);
+//#endregion
+//#region src/feedback/ui/floating/use-floating-position.ts
+const EDGE_GAP$1 = 12;
+const KEYBOARD_STEP = 24;
+const KEY_DIRECTIONS = {
+	ArrowDown: {
+		x: 0,
+		y: KEYBOARD_STEP
+	},
+	ArrowLeft: {
+		x: -24,
+		y: 0
+	},
+	ArrowRight: {
+		x: KEYBOARD_STEP,
+		y: 0
+	},
+	ArrowUp: {
+		x: 0,
+		y: -24
+	}
+};
+function clampPosition(point, bounds, viewport = visibleViewport()) {
+	return {
+		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))
+	};
 }
-.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);
+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();
+		const anchor = {
+			x: horizontalEdge === "right" ? visible.left + visible.width - fitted.x - bounds.width : fitted.x - visible.left,
+			y: verticalEdge === "bottom" ? visible.top + visible.height - fitted.y - bounds.height : fitted.y - visible.top
+		};
+		setPosition((current) => current?.x === anchor.x && current.y === anchor.y ? current : anchor);
+	}, [horizontalEdge, verticalEdge]);
+	const keepInViewport = useCallback(() => {
+		const bounds = rootRef.current?.getBoundingClientRect();
+		if (!bounds) return;
+		const fitted = clampPosition(bounds, bounds, viewport);
+		if (Math.abs(fitted.x - bounds.x) > .5 || Math.abs(fitted.y - bounds.y) > .5) moveTo(fitted, bounds);
+	}, [moveTo, viewport]);
+	useLayoutEffect(() => {
+		keepInViewport();
+	}, [keepInViewport]);
+	useEffect(() => {
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(keepInViewport);
+		if (rootRef.current) observer?.observe(rootRef.current);
+		const stopListening = onViewportChange(() => setViewport(visibleViewport()));
+		return () => {
+			observer?.disconnect();
+			stopListening();
+		};
+	}, [keepInViewport]);
+	const onPointerDown = (event) => {
+		const bounds = rootRef.current?.getBoundingClientRect();
+		if (!bounds || event.button !== 0) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		gesture.current = {
+			x: event.clientX - bounds.x,
+			y: event.clientY - bounds.y
+		};
+	};
+	const onPointerMove = (event) => {
+		const bounds = rootRef.current?.getBoundingClientRect();
+		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) => {
+		const direction = KEY_DIRECTIONS[event.key];
+		const bounds = rootRef.current?.getBoundingClientRect();
+		if (!(bounds && direction)) return;
+		event.preventDefault();
+		moveTo({
+			x: bounds.x + direction.x,
+			y: bounds.y + direction.y
+		}, bounds);
+	};
+	const viewportStyles = `.root { --rf-viewport-width: ${viewport.width}px; --rf-viewport-top: ${viewport.top}px; --rf-viewport-bottom: ${viewport.bottom}px; --rf-viewport-left: ${viewport.left}px; --rf-viewport-right: ${viewport.right}px; }`;
+	const anchorStyles = position ? `.root[data-moved="true"] { left: auto; right: auto; top: auto; bottom: auto; ${horizontalEdge}: ${position.x + viewport[horizontalEdge]}px; ${verticalEdge}: ${position.y + viewport[verticalEdge]}px; }` : "";
+	return {
+		handleProps: {
+			onKeyDown,
+			onLostPointerCapture: () => {
+				gesture.current = null;
+			},
+			onPointerCancel: () => {
+				gesture.current = null;
+			},
+			onPointerDown,
+			onPointerMove,
+			onPointerUp: () => {
+				gesture.current = null;
+			}
+		},
+		position,
+		rootRef,
+		styles: viewportStyles + anchorStyles
+	};
 }
-.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);
+//#endregion
+//#region src/feedback/ui/floating/floating-widget.tsx
+function FloatingWidget({ hotkey, labels, position, state }) {
+	const [minimized, setMinimized] = useState(false);
+	const launcherRef = useRef(null);
+	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?.button.focus({ preventScroll: true });
+	}, [state.step, state.annotationTrigger]);
+	useEffect(() => {
+		if (!showPanel || state.step !== "compose") return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape" && !event.defaultPrevented) {
+				setMinimized(true);
+				requestAnimationFrame(() => launcherRef.current?.focus());
+			}
+		};
+		return listenToKeydown(floating.rootRef.current, onKeyDown);
+	}, [
+		floating.rootRef,
+		showPanel,
+		state.step
+	]);
+	const { close, isOpen, open } = state;
+	useEffect(() => {
+		if (!hotkey) return;
+		const toggleOnHotkey = (event) => {
+			if (matchesHotkey(event, hotkey)) {
+				event.preventDefault();
+				if (isOpen) close();
+				else open();
+			}
+		};
+		return listenToKeydown(floating.rootRef.current, toggleOnHotkey, true);
+	}, [
+		close,
+		floating.rootRef,
+		hotkey,
+		isOpen,
+		open
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "root",
+		"data-editing": state.isOpen && (state.step === "picking" || state.step === "annotate"),
+		"data-moved": Boolean(floating.position),
+		"data-position": position,
+		ref: floating.rootRef,
+		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",
+					children: [/* @__PURE__ */ jsx("button", {
+						"aria-label": labels.moveFeedback,
+						className: "icon-btn drag-handle",
+						title: labels.moveFeedback,
+						type: "button",
+						...floating.handleProps,
+						children: /* @__PURE__ */ jsx(GripIcon, {})
+					}), /* @__PURE__ */ jsx("button", {
+						"aria-label": labels.minimize,
+						className: "icon-btn",
+						onClick: minimize,
+						title: labels.minimize,
+						type: "button",
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					})]
+				}),
+				labels,
+				state
+			}) : /* @__PURE__ */ jsx(Launcher, {
+				buttonRef: launcherRef,
+				isOpen: false,
+				label: state.isOpen ? labels.resume : labels.trigger,
+				onClick: () => {
+					setMinimized(false);
+					if (!state.isOpen) state.open();
+				}
+			})
+		]
+	});
 }
-.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; }
+//#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;
 }
-.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);
+function isPickable(element) {
+	if (!element || element === document.documentElement || isWidgetOwned(element)) return false;
+	const rect = element.getBoundingClientRect();
+	return rect.width > 0 && rect.height > 0;
 }
-.glass::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--rf-bg);
-  pointer-events: none;
+function pickableElements() {
+	return Array.from(document.body.querySelectorAll("*")).filter(isPickable);
 }
-@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);
-  }
+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;
 }
-@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
-  .glass::before { background: var(--rf-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
+function climb(from) {
+	let candidate = from.parentElement;
+	while (candidate && !isPickable(candidate)) candidate = candidate.parentElement;
+	return candidate;
 }
-.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; }
+function descend(from) {
+	let candidate = from.firstElementChild;
+	while (candidate && !isPickable(candidate)) candidate = candidate.nextElementSibling;
+	return candidate;
 }
-`;
-//#endregion
-//#region src/feedback/ui/shadow-portal.tsx
-const DARK_QUERY = "(prefers-color-scheme: dark)";
-const KEY_EVENTS = [
-	"keydown",
-	"keyup",
-	"keypress"
-];
-function useResolvedTheme(theme) {
-	const [systemDark, setSystemDark] = useState(false);
-	useEffect(() => {
-		if (theme !== "auto" || typeof window.matchMedia !== "function") return;
-		const query = window.matchMedia(DARK_QUERY);
-		setSystemDark(query.matches);
-		const onChange = (event) => setSystemDark(event.matches);
-		query.addEventListener("change", onChange);
-		return () => query.removeEventListener("change", onChange);
-	}, [theme]);
-	if (theme === "auto") return systemDark ? "dark" : "light";
-	return theme;
+function sibling(from, direction) {
+	let candidate = from[direction];
+	while (candidate && !isPickable(candidate)) candidate = candidate[direction];
+	return candidate;
 }
-/**
-* Hosts the widget in a shadow root: the app's CSS cannot reach the panel and
-* the panel's CSS cannot reach the app. Direct DOM work is unavoidable here —
-* React has no declarative way to create a shadow root.
-*/
-function ShadowPortal({ children, offset, primaryColor, theme }) {
-	const [shadowRoot, setShadowRoot] = useState(null);
-	const resolvedTheme = useResolvedTheme(theme);
-	useEffect(() => {
-		const host = document.createElement("div");
-		host.setAttribute(WIDGET_MARKER, "");
-		const root = host.attachShadow({ mode: "open" });
-		for (const type of KEY_EVENTS) root.addEventListener(type, (event) => event.stopPropagation());
-		const style = document.createElement("style");
-		style.textContent = WIDGET_STYLES;
-		root.append(style);
-		document.body.append(host);
-		setShadowRoot(root);
-		return () => host.remove();
-	}, []);
-	useEffect(() => {
-		const host = shadowRoot?.host;
-		if (!(host instanceof HTMLElement)) return;
-		host.setAttribute("data-theme", resolvedTheme);
-		host.style.setProperty("--rf-offset", `${offset}px`);
-		if (primaryColor) host.style.setProperty("--rf-primary", primaryColor);
-	}, [
-		shadowRoot,
-		resolvedTheme,
-		primaryColor,
-		offset
-	]);
-	if (!shadowRoot) return null;
-	return createPortal(children, shadowRoot);
+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/core/console-recorder.ts
-const DEFAULT_LIMIT = 30;
-const MAX_MESSAGE_LENGTH = 1e3;
-const RECORDED_METHODS = ["error", "warn"];
-function serializeArgument(value) {
-	if (typeof value === "string") return value;
-	if (value instanceof Error) return `${value.name}: ${value.message}`;
-	if (value === null || value === void 0) return String(value);
-	if (typeof value === "object") try {
-		return JSON.stringify(value) ?? "[unserializable]";
-	} catch {
-		return "[unserializable]";
-	}
-	if (typeof value === "function") return "[function]";
-	return String(value);
+//#region src/feedback/ui/picker.tsx
+const LABEL_HEIGHT = 24;
+const LABEL_GAP = 6;
+const NOTE_WIDTH = 300;
+const NOTE_GAP = 10;
+const EDGE_GAP = 12;
+function elementUnder(x, y) {
+	const element = document.elementFromPoint(x, y);
+	if (!element || isWidgetOwned(element)) return null;
+	return element;
 }
-function formatMessage(args) {
-	const message = args.map(serializeArgument).join(" ");
-	return message.length > MAX_MESSAGE_LENGTH ? `${message.slice(0, 999)}…` : message;
+function describeTarget(element) {
+	return {
+		componentName: resolveComponentStack(getFiberFromNode(element))[0],
+		element,
+		label: describeElement(element),
+		rect: element.getBoundingClientRect(),
+		region: describeRegion(element)
+	};
 }
 /**
-* Buffers the console noise a user saw right before reporting a bug.
-* Wrappers delegate to the previous implementation, so nothing is swallowed.
+* 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 startConsoleRecorder(options) {
-	const limit = options?.limit ?? DEFAULT_LIMIT;
-	const buffer = [];
-	let active = true;
-	const push = (level, message) => {
-		if (!(active && message)) return;
-		buffer.push({
-			level,
-			message,
-			timestamp: Date.now()
-		});
-		if (buffer.length > limit) buffer.splice(0, buffer.length - limit);
-	};
-	const originals = /* @__PURE__ */ new Map();
-	const wrappers = /* @__PURE__ */ new Map();
-	for (const method of RECORDED_METHODS) {
-		const original = console[method];
-		const wrapper = (...args) => {
-			push(method, formatMessage(args));
-			Reflect.apply(original, console, args);
-		};
-		originals.set(method, original);
-		wrappers.set(method, wrapper);
-		console[method] = wrapper;
-	}
-	const onError = (event) => {
-		const where = event.filename ? ` (${event.filename}:${event.lineno}:${event.colno})` : "";
-		push("error", `${event.message}${where}`);
-	};
-	const onRejection = (event) => {
-		push("error", `Unhandled rejection: ${serializeArgument(event.reason)}`);
+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
 	};
-	window.addEventListener("error", onError);
-	window.addEventListener("unhandledrejection", onRejection);
 	return {
-		events: () => buffer.slice(),
-		stop: () => {
-			if (!active) return;
-			active = false;
-			buffer.length = 0;
-			for (const method of RECORDED_METHODS) {
-				const original = originals.get(method);
-				if (original && console[method] === wrappers.get(method)) console[method] = original;
-			}
-			window.removeEventListener("error", onError);
-			window.removeEventListener("unhandledrejection", onRejection);
-		}
+		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. 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({ labels, onCancel, onPick }) {
+	const [target, setTarget] = useState(null);
+	const [pinned, setPinned] = useState(null);
+	const [note, setNote] = useState("");
+	const pickerRef = useRef(null);
+	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 (startsInWidget(event)) return;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		const aimAt = (x, y) => {
+			const element = elementUnder(x, y);
+			if (!element) return;
+			setTarget((current) => current?.element === element ? {
+				...current,
+				rect: element.getBoundingClientRect()
+			} : describeTarget(element));
+		};
+		const onMove = (event) => {
+			if (pinnedRef.current || startsInWidget(event)) return;
+			aimAt(event.clientX, event.clientY);
+		};
+		const onPointerDown = (event) => {
+			if (startsInWidget(event)) return;
+			swallow(event);
+			if (!pinnedRef.current) aimAt(event.clientX, event.clientY);
+		};
+		const onPointerUp = (event) => {
+			if (startsInWidget(event)) return;
+			swallow(event);
+			if (pinnedRef.current) return;
+			const element = elementUnder(event.clientX, event.clientY);
+			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);
+				onEscape();
+				return;
+			}
+			if (pinnedRef.current || startsInWidget(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", onPointerDown, true);
+		document.addEventListener("pointerup", onPointerUp, true);
+		document.addEventListener("mousedown", swallow, true);
+		document.addEventListener("mouseup", swallow, true);
+		document.addEventListener("click", swallow, true);
+		const stopListeningToKeys = listenToKeydown(pickerRef.current, 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", onPointerDown, true);
+			document.removeEventListener("pointerup", onPointerUp, true);
+			document.removeEventListener("mousedown", swallow, true);
+			document.removeEventListener("mouseup", swallow, true);
+			document.removeEventListener("click", swallow, true);
+			stopListeningToKeys();
+			window.removeEventListener("scroll", onScroll, true);
+			document.body.style.cursor = previousCursor;
+		};
+	}, [onCancel]);
+	const rect = (pinned ?? target)?.rect;
+	const labelAbove = rect ? rect.top > 30 : true;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: pickerRef,
+		children: [
+			rect && /* @__PURE__ */ jsx("div", {
+				className: "picker-box",
+				"data-pinned": pinned !== null,
+				style: {
+					height: rect.height,
+					translate: `${rect.left}px ${rect.top}px`,
+					width: rect.width
+				}
+			}),
+			rect && target && !pinned && /* @__PURE__ */ jsxs("div", {
+				className: "picker-label",
+				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 })]
+			}),
+			pinned ? /* @__PURE__ */ jsxs("form", {
+				className: "picker-note glass",
+				onSubmit: (event) => {
+					event.preventDefault();
+					onPick(pinned.element, note.trim());
+				},
+				style: noteStyle(pinned.rect, view),
+				children: [
+					/* @__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/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; }
+
+.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) {
+  .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/core/submission/upload-screenshots.ts
-async function uploadImage(transport, image) {
-	const { uploadUrl } = await transport.getScreenshotUploadUrl();
-	return transport.uploadImage(uploadUrl, image);
+//#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; flex-direction: column; gap: 2px; padding: 6px; border-radius: 26px; }
+.message-row textarea {
+  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;
 }
-async function prepareScreenshot(transport, screenshot, index) {
-	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);
-		const prepared = [{
-			annotatedStorageId: annotated ? await uploadImage(transport, annotated) : void 0,
-			annotations: annotations.length > 0 ? toWireAnnotations(annotations) : void 0,
-			captureSource: "widget",
-			filename: `screenshot-${index + 1}.png`,
-			height: image.height,
-			mimeType: image.mimeType,
-			pageUrl: context.url,
-			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);
-	}
+.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: 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-options { position: relative; }
+summary { cursor: pointer; list-style: none; }
+summary::-webkit-details-marker { display: none; }
+.options-popover { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 12px); width: min(240px, calc(100vw - 40px)); max-height: calc(50dvh - 68px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--rf-radius); animation: rf-in 160ms var(--rf-ease); }
+.composer-options[data-placement="below"] .options-popover { top: calc(100% + 12px); bottom: auto; }
+.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: 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; }
+.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; }
+.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: 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: 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; }
+.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-badge { position: absolute; left: 5px; top: 5px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--rf-pill); color: var(--rf-accent); }
+.selection-badge svg { width: 12px; height: 12px; }
+@media (pointer: coarse) {
+  .message-row { border-radius: 28px; }
+  .capture-slot { width: 64px; }
+  .message-row textarea { font-size: 16px; }
+  .submit { width: 44px; height: 44px; }
+  :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 { min-height: 44px; }
 }
-async function uploadScreenshots(transport, submission) {
-	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;
-	});
+@media (max-width: 480px) {
+  .email-scrim { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 40%); animation: rf-fade 200ms var(--rf-ease); }
+  .email-prompt { position: fixed; left: 0; right: 0; bottom: 0; gap: 14px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; animation: rf-drawer-in 280ms var(--rf-ease); }
+  .email-prompt h2 { font-size: 17px; }
+  .email-prompt p { font-size: 13px; }
+  .email-prompt-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
+  .email-prompt-actions .ghost-btn, .email-prompt-actions .primary-btn { justify-content: center; min-height: 48px; }
 }
+@keyframes rf-drawer-in { from { transform: translateY(100%); } }
+`;
 //#endregion
-//#region src/feedback/core/submit.ts
-const MAX_TITLE_LENGTH = 100;
-const NEWLINE = /\r?\n/;
-function deriveTitle(message) {
-	const firstLine = message.split(NEWLINE).map((line) => line.trim()).find(Boolean) ?? "";
-	if (firstLine.length <= MAX_TITLE_LENGTH) return firstLine;
-	const clipped = firstLine.slice(0, 99);
-	const lastSpace = clipped.lastIndexOf(" ");
-	return `${(lastSpace > 0 ? clipped.slice(0, lastSpace) : clipped).trimEnd()}…`;
+//#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);
+  will-change: translate;
+  transition: translate 130ms var(--rf-ease);
 }
-function buildDescription(params) {
-	const { email, isAnonymous, message } = params;
-	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
-	return `${message.trim()}${contact}`;
+.picker-box[data-pinned="true"] { transition: none; }
+.picker-label {
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: min(420px, 90vw);
+  height: 24px;
+  padding: 0 8px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--rf-accent-text);
+  background: var(--rf-accent);
+  border-radius: 6px;
+  box-shadow: var(--rf-shadow-float);
+  white-space: nowrap;
+  overflow: hidden;
+  will-change: translate;
+  transition: translate 130ms var(--rf-ease);
 }
-async function attachPreparedScreenshots(transport, result) {
-	const results = await Promise.allSettled(result.pendingScreenshots.map((screenshot) => transport.saveScreenshot({
-		...screenshot,
-		feedbackId: result.feedbackId
-	})));
-	const pendingScreenshots = result.pendingScreenshots.filter((_, index) => results[index]?.status === "rejected");
-	return {
-		feedbackId: result.feedbackId,
-		pendingScreenshots
-	};
+.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);
 }
-async function createReportWithScreenshots(transport, submission, pendingScreenshots) {
-	const { feedbackId } = await transport.create({
-		context: submission.context,
-		description: buildDescription(submission),
-		title: deriveTitle(submission.message)
-	});
-	return attachPreparedScreenshots(transport, {
-		feedbackId,
-		pendingScreenshots
-	});
+.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);
 }
-async function submitWidgetFeedback(transport, submission) {
-	if (!deriveTitle(submission.message)) throw new Error("Please describe your feedback before sending it.");
-	return createReportWithScreenshots(transport, submission, await uploadScreenshots(transport, submission));
+.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);
 }
-function isStorageResponse(value) {
-	return typeof value === "object" && value !== null && typeof Reflect.get(value, "storageId") === "string";
+.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);
 }
-function createFeedbackTransport(client) {
-	return {
-		create: (params) => client.create(params),
-		getScreenshotUploadUrl: () => client.getScreenshotUploadUrl(),
-		saveScreenshot: (params) => client.saveScreenshot(params),
-		uploadImage: async (uploadUrl, image) => {
-			const response = await fetch(uploadUrl, {
-				body: image.blob,
-				headers: { "Content-Type": image.mimeType },
-				method: "POST"
-			});
-			if (!response.ok) throw new Error(`Screenshot upload failed (${response.status})`);
-			const payload = await response.json();
-			if (!isStorageResponse(payload)) throw new Error("Screenshot upload returned no storage id");
-			return payload.storageId;
-		}
-	};
+.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;
 }
-//#endregion
-//#region src/feedback/ui/state/use-feedback-submission.ts
-function useFeedbackSubmission(options) {
-	const [activeRequest, setActiveRequest] = useState(null);
-	const [pendingReport, setPendingReport] = useState(null);
-	const requestRef = useRef(null);
-	useEffect(() => () => {
-		requestRef.current = null;
-	}, []);
-	const resetSubmission = useCallback(() => {
-		requestRef.current = null;
-		setPendingReport(null);
-		setActiveRequest(null);
-	}, []);
-	const finishSubmission = (result) => {
-		if (result.pendingScreenshots.length > 0) {
-			setPendingReport(result);
-			options.onError(options.partialUploadMessage);
-			return;
-		}
-		setPendingReport(null);
-		options.onSubmitted(result.feedbackId);
-	};
-	const submit = async (draft) => {
-		if (requestRef.current) return;
-		if (!options.client) {
-			options.onError("Reflet is missing a publicKey. Pass one to RefletFeedback or RefletProvider.");
-			return;
-		}
-		const request = {};
-		requestRef.current = request;
-		setActiveRequest(request);
-		options.onError(null);
-		try {
-			const transport = createFeedbackTransport(options.client);
-			const result = pendingReport ? await attachPreparedScreenshots(transport, pendingReport) : await submitWidgetFeedback(transport, draft);
-			if (requestRef.current === request) finishSubmission(result);
-		} catch (error) {
-			if (requestRef.current === request) options.onError(error instanceof Error ? error.message : "Something went wrong. Please try again.");
-		} finally {
-			if (requestRef.current === request) {
-				requestRef.current = null;
-				setActiveRequest(null);
-			}
-		}
-	};
-	return {
-		hasPendingAttachments: pendingReport !== null,
-		isEditingDisabled: activeRequest !== null || pendingReport !== null,
-		isSubmitting: activeRequest !== null,
-		resetSubmission,
-		submit
-	};
+.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;
 }
-//#endregion
-//#region src/feedback/ui/state/use-screenshot-drafts.ts
-function releaseDraft(draft) {
-	releaseCapture(draft?.image);
-	releaseCapture(draft?.closeUp);
+.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; }
 }
-function useScreenshotDrafts(captureFailed, onError) {
-	const [screenshots, setScreenshots] = useState([]);
-	const [activeId, setActiveId] = useState(null);
-	const [pendingCapture, setPendingCapture] = useState(null);
-	const ownedDrafts = useRef(/* @__PURE__ */ new Map());
-	const captureRequest = useRef(null);
-	useEffect(() => {
-		const drafts = ownedDrafts.current;
-		return () => {
-			captureRequest.current = null;
-			for (const draft of drafts.values()) releaseDraft(draft);
-			drafts.clear();
-		};
-	}, []);
-	const storeScreenshot = useCallback((screenshot) => {
-		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];
-		});
-		setActiveId(screenshot.id);
-	}, []);
-	const cancelPendingCapture = useCallback(() => {
-		captureRequest.current = null;
-		setPendingCapture(null);
-	}, []);
-	const takeScreenshot = useCallback(async (request) => {
-		captureRequest.current = request;
-		setPendingCapture(request);
-		onError(null);
-		const context = collectPageContext({ sdkVersion: SDK_VERSION });
-		const image = await captureViewport().catch(() => null);
-		if (captureRequest.current !== request) {
-			releaseCapture(image);
-			return;
-		}
-		cancelPendingCapture();
-		if (!image) {
-			onError(captureFailed);
-			return;
-		}
-		storeScreenshot({
-			...request,
-			annotations: [],
-			context,
-			image
-		});
-	}, [
-		cancelPendingCapture,
-		captureFailed,
-		onError,
-		storeScreenshot
-	]);
-	const takeCapture = useCallback(() => {
-		if (!captureRequest.current) takeScreenshot({
-			id: crypto.randomUUID(),
-			source: "manual"
-		});
-	}, [takeScreenshot]);
-	const refreshAutomatic = useCallback(() => {
-		takeScreenshot({
-			id: ownedDrafts.current.keys().next().value ?? captureRequest.current?.id ?? crypto.randomUUID(),
-			source: "automatic"
-		});
-	}, [takeScreenshot]);
-	const retakeCapture = useCallback((id) => {
-		if (!captureRequest.current && ownedDrafts.current.has(id)) takeScreenshot({
-			id,
-			source: "manual"
-		});
-	}, [takeScreenshot]);
-	const removeCapture = useCallback((id) => {
-		if (captureRequest.current?.id === id) cancelPendingCapture();
-		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 draft of ownedDrafts.current.values()) releaseDraft(draft);
-		ownedDrafts.current.clear();
-		setScreenshots([]);
-		setActiveId(null);
-	}, [cancelPendingCapture]);
-	const setAnnotations = useCallback((annotations) => {
-		setScreenshots((previous) => previous.map((item) => item.id === activeId ? {
-			...item,
-			annotations
-		} : item));
-	}, [activeId]);
-	const setSelectionComment = useCallback((id, comment) => {
-		setScreenshots((previous) => previous.map((item) => item.id === id && item.selection ? {
-			...item,
-			selection: {
-				...item.selection,
-				comment
-			}
-		} : item));
-	}, []);
-	return {
-		activeScreenshot: screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null,
-		cancelPendingCapture,
-		pendingCapture,
-		refreshAutomatic,
-		removeCapture,
-		resetScreenshots,
-		retakeCapture,
-		screenshots,
-		selectScreenshot: setActiveId,
-		setAnnotations,
-		setSelectionComment,
-		storeScreenshot,
-		takeCapture
-	};
+
+`;
+//#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);
 }
-//#endregion
-//#region src/feedback/ui/state/use-widget-config.ts
-function dismissalDuration(days) {
-	return days !== void 0 && Number.isFinite(days) && days > 0 ? days : null;
+
+: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;
 }
-function useWidgetConfig(props) {
-	const context = useContext(RefletContext);
-	const publicKey = props.publicKey ?? context?.publicKey;
-	const baseUrl = props.baseUrl ?? context?.baseUrl;
-	const user = props.user ?? context?.user;
-	const userToken = props.userToken ?? context?.userToken;
-	return {
-		client: useMemo(() => publicKey ? new Reflet({
-			baseUrl,
-			publicKey,
-			user,
-			userToken
-		}) : null, [
-			baseUrl,
-			publicKey,
-			user,
-			userToken
-		]),
-		dismissalKey: `reflet-feedback-dismissed:${publicKey ?? "default"}:${user?.id ?? "anonymous"}`,
-		dismissForDays: dismissalDuration(props.dismissForDays),
-		isAnonymous: !(user || userToken)
-	};
+
+*, *::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);
 }
-//#endregion
-//#region src/feedback/ui/use-capture-sync.ts
-const RESIZE_DEBOUNCE = 400;
-/**
-* Calls `refresh` whenever the page the reporter is looking at changes shape:
-* SPA routes (which never fire popstate on push/replace — history methods must
-* be patched) and window resizes, debounced. Keeps the frozen screenshot and
-* page context describing what the reporter currently sees.
-*/
-function useCaptureSync(enabled, refresh) {
-	useEffect(() => {
-		if (!enabled) return;
-		const history = window.history;
-		const originalPush = history.pushState;
-		const originalReplace = history.replaceState;
-		const hadOwnPush = Object.hasOwn(history, "pushState");
-		const hadOwnReplace = Object.hasOwn(history, "replaceState");
-		history.pushState = function pushState(data, unused, url) {
-			const result = originalPush.call(history, data, unused, url);
-			refresh();
-			return result;
-		};
-		history.replaceState = function replaceState(data, unused, url) {
-			const result = originalReplace.call(history, data, unused, url);
-			refresh();
-			return result;
-		};
-		window.addEventListener("popstate", refresh);
-		let resizeTimer;
-		const onResize = () => {
-			window.clearTimeout(resizeTimer);
-			resizeTimer = window.setTimeout(refresh, RESIZE_DEBOUNCE);
-		};
-		window.addEventListener("resize", onResize);
-		return () => {
-			if (hadOwnPush) history.pushState = originalPush;
-			else Reflect.deleteProperty(history, "pushState");
-			if (hadOwnReplace) history.replaceState = originalReplace;
-			else Reflect.deleteProperty(history, "replaceState");
-			window.removeEventListener("popstate", refresh);
-			window.clearTimeout(resizeTimer);
-			window.removeEventListener("resize", onResize);
-		};
-	}, [enabled, refresh]);
+.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);
 }
-//#endregion
-//#region src/feedback/ui/use-widget-state.ts
-const SUCCESS_CLOSE_DELAY = 2400;
-const IS_APPLE = /Mac|iPhone|iPad/;
-const MILLISECONDS_PER_DAY = 864e5;
-function readDismissedUntil(key) {
-	if (typeof window === "undefined") return 0;
-	try {
-		const value = Number.parseInt(window.localStorage.getItem(key) ?? "", 10);
-		if (Number.isFinite(value) && value > Date.now()) return value;
-		window.localStorage.removeItem(key);
-	} catch {
-		return 0;
-	}
-	return 0;
+.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);
 }
-function writeDismissedUntil(key, until) {
-	try {
-		window.localStorage.setItem(key, String(until));
-	} catch {}
+.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);
 }
-function matchesHotkey(event, hotkey, platform = typeof navigator === "undefined" ? "" : navigator.platform) {
-	const parts = hotkey.toLowerCase().split("+").map((part) => part.trim());
-	const key = parts.at(-1);
-	if (!key || event.key.toLowerCase() !== key) return false;
-	const isApple = IS_APPLE.test(platform);
-	const wantsMod = parts.includes("mod");
-	const expected = {
-		alt: parts.includes("alt") || parts.includes("option"),
-		ctrl: parts.includes("ctrl") || wantsMod && !isApple,
-		meta: parts.includes("meta") || parts.includes("cmd") || wantsMod && isApple,
-		shift: parts.includes("shift")
-	};
-	return event.altKey === expected.alt && event.ctrlKey === expected.ctrl && event.metaKey === expected.meta && event.shiftKey === expected.shift;
+.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
+//#region src/feedback/ui/shadow-portal.tsx
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+function useResolvedTheme(theme) {
+	const [systemDark, setSystemDark] = useState(false);
+	useEffect(() => {
+		if (theme !== "auto" || typeof window.matchMedia !== "function") return;
+		const query = window.matchMedia(DARK_QUERY);
+		setSystemDark(query.matches);
+		const onChange = (event) => setSystemDark(event.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, [theme]);
+	if (theme === "auto") return systemDark ? "dark" : "light";
+	return theme;
 }
-function useWidgetState(props) {
-	const { client, dismissalKey, dismissForDays, isAnonymous } = useWidgetConfig(props);
-	const [isOpen, setIsOpen] = useState(false);
-	const [annotationTrigger, setAnnotationTrigger] = useState(null);
-	const [step, setStep] = useState("compose");
-	const [message, setMessage] = useState("");
-	const [email, setEmail] = useState("");
-	const [honeypot, setHoneypot] = useState("");
-	const [isElementCapturing, setIsElementCapturing] = useState(false);
-	const successTimer = useRef(null);
-	const [error, setError] = useState(null);
-	const [dismissedUntil, setDismissedUntil] = useState(() => readDismissedUntil(dismissalKey));
-	const pickRef = useRef(0);
-	useEffect(() => () => {
-		pickRef.current++;
-		if (successTimer.current) clearTimeout(successTimer.current);
-	}, []);
-	const consoleRef = useRef(null);
+/**
+* Hosts the widget in a shadow root: the app's CSS cannot reach the panel and
+* the panel's CSS cannot reach the app. Direct DOM work is unavoidable here —
+* React has no declarative way to create a shadow root.
+*/
+function ShadowPortal({ children, offset, primaryColor, theme }) {
+	const [shadowRoot, setShadowRoot] = useState(null);
+	const resolvedTheme = useResolvedTheme(theme);
 	useEffect(() => {
-		setDismissedUntil(readDismissedUntil(dismissalKey));
-	}, [dismissalKey]);
+		const host = document.createElement("div");
+		host.setAttribute(WIDGET_MARKER, "");
+		const root = host.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = WIDGET_STYLES;
+		root.append(style);
+		document.body.append(host);
+		setShadowRoot(root);
+		return () => host.remove();
+	}, []);
 	useEffect(() => {
-		if (props.captureConsole === false) return;
-		const recorder = startConsoleRecorder();
-		consoleRef.current = recorder;
-		return () => {
-			consoleRef.current = null;
-			recorder.stop();
-		};
-	}, [props.captureConsole]);
-	const captureFailed = props.labels?.captureFailed ?? DEFAULT_WIDGET_LABELS.captureFailed;
-	const gallery = useScreenshotDrafts(captureFailed, setError);
-	const { activeScreenshot, cancelPendingCapture, refreshAutomatic, resetScreenshots, storeScreenshot } = gallery;
-	const capture = activeScreenshot?.image ?? null;
-	const annotations = activeScreenshot?.annotations ?? [];
-	const isCapturing = gallery.pendingCapture !== null || isElementCapturing;
-	const submission = useFeedbackSubmission({
-		client,
-		onError: setError,
-		onSubmitted: (feedbackId) => {
-			setStep("success");
-			props.onSubmit?.({ feedbackId });
-			successTimer.current = setTimeout(close, SUCCESS_CLOSE_DELAY);
-		},
-		partialUploadMessage: props.labels?.attachmentUploadFailed ?? DEFAULT_WIDGET_LABELS.attachmentUploadFailed
-	});
-	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 && !gallery.screenshots.some((draft) => draft.selection) && props.captureOnOpen !== false, refreshAutomatic);
-	const reset = useCallback(() => {
-		if (successTimer.current) clearTimeout(successTimer.current);
-		setAnnotationTrigger(null);
-		resetSubmission();
-		pickRef.current++;
-		setIsElementCapturing(false);
-		resetScreenshots();
-		setMessage("");
-		setEmail("");
-		setHoneypot("");
-		setError(null);
-		setStep("compose");
-	}, [resetSubmission, resetScreenshots]);
-	const close = useCallback(() => {
-		setIsOpen(false);
-		reset();
-		props.onClose?.();
-	}, [reset, props.onClose]);
-	const dismiss = useCallback(() => {
-		if (dismissForDays === null) return;
-		const until = Date.now() + dismissForDays * MILLISECONDS_PER_DAY;
-		writeDismissedUntil(dismissalKey, until);
-		setIsOpen(false);
-		reset();
-		setDismissedUntil(until);
-		props.onDismiss?.({ until });
-	}, [
-		dismissForDays,
-		dismissalKey,
-		props.onDismiss,
-		reset
-	]);
-	const open = useCallback(() => {
-		setIsOpen(true);
-		setStep("compose");
-		props.onOpen?.();
-		if (props.captureOnOpen !== false) refreshAutomatic();
-	}, [
-		props.captureOnOpen,
-		props.onOpen,
-		refreshAutomatic
-	]);
-	const selectElement = useCallback(async (element, note = "") => {
-		cancelPendingCapture();
-		setIsElementCapturing(true);
-		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 });
-		const [fresh, closeUp] = await Promise.all([captureViewport().catch(() => null), captureElementCloseUp(element).catch(() => null)]);
-		if (pickRef.current !== pick) {
-			releaseCapture(fresh);
-			releaseCapture(closeUp);
-			return;
-		}
-		setIsElementCapturing(false);
-		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"
-		});
+		const host = shadowRoot?.host;
+		if (!(host instanceof HTMLElement)) return;
+		host.setAttribute("data-theme", resolvedTheme);
+		host.style.setProperty("--rf-offset", `${offset}px`);
+		if (primaryColor) host.style.setProperty("--rf-primary", primaryColor);
 	}, [
-		cancelPendingCapture,
-		captureFailed,
-		storeScreenshot
+		shadowRoot,
+		resolvedTheme,
+		primaryColor,
+		offset
 	]);
-	const selections = gallery.screenshots.flatMap(({ selection }) => selection ? [selection] : []);
-	const firstElementNote = selections.find(({ comment }) => comment)?.comment;
-	const reportedMessage = message.trim() || firstElementNote || "";
-	const submit = () => {
-		if (honeypot) {
-			setStep("success");
-			return;
-		}
-		setStep("compose");
-		return submission.submit({
-			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.4.2" }),
-				consoleEvents: consoleRef.current?.events(),
-				metadata: props.metadata,
-				selections
-			},
-			email,
-			isAnonymous,
-			message: reportedMessage,
-			screenshots: gallery.screenshots
-		});
-	};
-	const requestSubmit = () => {
-		if (isAnonymous && email.length === 0 && !submission.hasPendingAttachments && !honeypot) {
-			setStep("email");
-			return;
-		}
-		return submit();
-	};
-	return {
-		activeScreenshot,
-		annotateScreenshot: (id, trigger) => {
-			setAnnotationTrigger(trigger);
-			gallery.selectScreenshot(id);
-			setStep("annotate");
-		},
-		annotations,
-		annotationTrigger,
-		canDismiss: dismissForDays !== null,
-		canSubmit: reportedMessage.length > 0,
-		capture,
-		close,
-		dismiss,
-		dismissForDays,
-		email,
-		error,
-		hasPendingAttachments: submission.hasPendingAttachments,
-		honeypot,
-		isAnonymous,
-		isCapturing,
-		isDismissed: dismissedUntil > Date.now(),
-		isEditingDisabled: submission.isEditingDisabled,
-		isOpen,
-		isSubmitting: submission.isSubmitting,
-		message,
-		open,
-		pendingCapture: gallery.pendingCapture,
-		removeCapture: gallery.removeCapture,
-		requestSubmit,
-		retakeCapture: gallery.retakeCapture,
-		screenshots: gallery.screenshots,
-		selectElement,
-		selections,
-		setAnnotations: gallery.setAnnotations,
-		setEmail,
-		setHoneypot,
-		setMessage,
-		setSelectionComment: gallery.setSelectionComment,
-		setStep,
-		step,
-		submit,
-		takeCapture: gallery.takeCapture
-	};
+	if (!shadowRoot) return null;
+	return createPortal(children, shadowRoot);
 }
 //#endregion
 //#region src/feedback/widget.tsx
@@ -4186,25 +4240,7 @@ function RefletFeedback(props) {
 		...props.labels
 	};
 	const state = useWidgetState(props);
-	const { close, isOpen, open } = state;
-	useEffect(() => {
-		if (!(hotkey && enabled)) return;
-		const onKeyDown = (event) => {
-			if (matchesHotkey(event, hotkey)) {
-				event.preventDefault();
-				if (isOpen) close();
-				else open();
-			}
-		};
-		document.addEventListener("keydown", onKeyDown, true);
-		return () => document.removeEventListener("keydown", onKeyDown, true);
-	}, [
-		close,
-		enabled,
-		hotkey,
-		isOpen,
-		open
-	]);
+	const { isOpen } = state;
 	if (!enabled || state.isDismissed) return null;
 	return /* @__PURE__ */ jsxs(ShadowPortal, {
 		offset,
@@ -4217,6 +4253,7 @@ function RefletFeedback(props) {
 				"data-active": state.isCapturing
 			}),
 			/* @__PURE__ */ jsx(FloatingWidget, {
+				hotkey,
 				labels,
 				position,
 				state