reflet-sdk 0.6.2 → 0.6.4

package/dist/feedback.js

@@ -1,7 +1,7 @@
 "use client";
 import { n as Reflet } from "./client-DAdWdIFY.js";
-import { A as TargetIcon, B as buildElementSelection, C as GripIcon, D as SpotlightIcon, E as PencilIcon, F as normalizeRect, G as WIDGET_MARKER, I as DEFAULT_WIDGET_LABELS, J as releaseCapture, K as captureViewport, L as SDK_VERSION, M as TrashIcon, N as UndoIcon, O as SquareIcon, P as isDegenerate, R as collectPageContext, S as CloseIcon, T as MoreIcon, _ as BlurIcon, b as CheckIcon, c as useFloatingPosition, d as SelectionOutline, f as drawAnnotations, g as ArrowIcon, h as stopClicksAtHost, i as createFeedbackTransport, j as TextIcon, m as listenToKeydown, o as submitWidgetFeedback, p as listenOnPageAndWidget, r as attachPreparedScreenshots, t as ElementPicker, v as CameraIcon, w as HighlightIcon, x as ChevronDownIcon, y as ChatIcon, z as MAX_SELECTION_COMMENT_LENGTH } from "./picker-DCoAFX5y.js";
-import { n as RefletContext, t as REFLET_Z_INDEX } from "./z-index-BL0SGZEP.js";
+import { A as SquareIcon, B as collectPageContext, C as ChevronDownIcon, D as MoreIcon, E as HighlightIcon, F as UndoIcon, H as buildElementSelection, I as isDegenerate, J as captureViewport, L as normalizeRect, M as TargetIcon, N as TextIcon, O as PencilIcon, P as TrashIcon, R as DEFAULT_WIDGET_LABELS, S as CheckIcon, T as GripIcon, V as MAX_SELECTION_COMMENT_LENGTH, X as capturedViewportSize, Z as releaseCapture, _ as matchesHotkey, b as CameraIcon, c as useFloatingPosition, d as SelectionOutline, f as drawAnnotations, g as isSubmitEnter, h as stopClicksAtHost, i as submitWidgetFeedback, k as SpotlightIcon, m as listenToKeydown, n as createFeedbackTransport, o as ElementPicker, p as listenOnPageAndWidget, q as WIDGET_MARKER, t as attachPreparedScreenshots, v as ArrowIcon, w as CloseIcon, x as ChatIcon, y as BlurIcon, z as SDK_VERSION } from "./submit-Cd-g1Dtg.js";
+import { a as REFLET_Z_INDEX, t as RefletContext } from "./react-context-Caq1fodf.js";
 import { Suspense, lazy, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slider } from "@base-ui/react/slider";
@@ -48,12 +48,13 @@ function TextAnnotationEditor({ draft, onCommit, onCancel }) {
 				},
 				onChange: (event) => setText(event.target.value),
 				onKeyDown: (event) => {
+					if (event.nativeEvent.isComposing) return;
 					if (event.key === "Escape") {
 						event.preventDefault();
 						event.stopPropagation();
 						onCancel();
 					}
-					if (event.key === "Enter" && !event.shiftKey) {
+					if (isSubmitEnter(event.nativeEvent)) {
 						event.preventDefault();
 						onCommit(text);
 					}
@@ -749,7 +750,7 @@ function isSelectionAnnotation({ id }) {
 	return id.startsWith(SELECTION_ANNOTATION_PREFIX);
 }
 function highlightFor(selection, capture) {
-	const scale = capture.width / window.innerWidth;
+	const scale = capture.width / capturedViewportSize().width;
 	const { rect } = selection;
 	return {
 		color: SELECTION_COLOR,
@@ -789,13 +790,23 @@ function ScreenshotCard({ item, labels, state }) {
 	const isCapturing = state.pendingCapture?.id === draft.id;
 	const disabled = state.isEditingDisabled || state.isCapturing;
 	const drawings = draft.annotations.filter((annotation) => !isSelectionAnnotation(annotation));
+	const openScreenshot = (button) => {
+		if (previewRef.current) state.annotateScreenshot(draft.id, {
+			button,
+			thumbnail: previewRef.current
+		});
+	};
 	return /* @__PURE__ */ jsxs("fieldset", {
 		"aria-label": `${labels.screenshot} ${number}`,
 		className: "screenshot-attachment",
 		children: [
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": `${labels.openScreenshot} ${number}`,
 				className: "screenshot-preview glass",
+				disabled,
+				onClick: (event) => openScreenshot(event.currentTarget),
 				ref: previewRef,
+				type: "button",
 				children: /* @__PURE__ */ jsx(ScreenshotPreview, {
 					annotations: draft.annotations,
 					capture: draft.image
@@ -820,12 +831,7 @@ function ScreenshotCard({ item, labels, state }) {
 					"aria-label": labels.annotateHint,
 					className: "icon-btn annotate-action",
 					disabled,
-					onClick: (event) => {
-						if (previewRef.current) state.annotateScreenshot(draft.id, {
-							button: event.currentTarget,
-							thumbnail: previewRef.current
-						});
-					},
+					onClick: (event) => openScreenshot(event.currentTarget),
 					title: labels.annotateHint,
 					type: "button",
 					children: /* @__PURE__ */ jsx(PencilIcon, {})
@@ -1140,703 +1146,138 @@ function FeedbackPanel({ floatingControls, labels, state }) {
 	});
 }
 //#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);
-}
-function formatMessage(args) {
-	const message = args.map(serializeArgument).join(" ");
-	return message.length > MAX_MESSAGE_LENGTH ? `${message.slice(0, 999)}…` : message;
-}
-/**
-* 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()
+//#region src/feedback/ui/floating/use-floating-widget-keyboard.ts
+function useFloatingWidgetKeyboard(options) {
+	const { anchorRef, hotkey, launcher, showPanel, state } = options;
+	useEffect(() => {
+		if (state.step === "compose") state.annotationTrigger?.button.focus({ preventScroll: true });
+	}, [state.step, state.annotationTrigger]);
+	const minimize = launcher.minimize;
+	useEffect(() => {
+		if (!showPanel || state.step !== "compose") return;
+		return listenToKeydown(anchorRef.current, (event) => {
+			if (event.key === "Escape" && !event.defaultPrevented) minimize();
 		});
-		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)}`);
-	};
-	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;
+	}, [
+		anchorRef,
+		minimize,
+		showPanel,
+		state.step
+	]);
+	useWidgetHotkey({
+		anchorRef,
+		hotkey,
+		launcher,
+		state
+	});
+}
+function useWidgetHotkey({ anchorRef, hotkey, launcher, state }) {
+	const { close, isOpen } = state;
+	const open = launcher.triggerProps.onClick;
+	useEffect(() => {
+		if (!hotkey) return;
+		return listenToKeydown(anchorRef.current, (event) => {
+			if (matchesHotkey(event, hotkey)) {
+				event.preventDefault();
+				if (isOpen) close();
+				else open();
 			}
-			window.removeEventListener("error", onError);
-			window.removeEventListener("unhandledrejection", onRejection);
-		}
-	};
+		}, true);
+	}, [
+		anchorRef,
+		close,
+		hotkey,
+		isOpen,
+		open
+	]);
 }
 //#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);
+//#region src/feedback/ui/floating/floating-widget.tsx
+function FloatingWidget({ config, launcher, state }) {
+	const { hotkey, position } = config;
+	const showPanel = state.isOpen && !launcher.minimized;
+	const floating = useFloatingPosition(position, showPanel);
+	useFloatingWidgetKeyboard({
+		anchorRef: floating.rootRef,
+		hotkey,
+		launcher,
+		showPanel,
+		state
+	});
+	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 }), /* @__PURE__ */ jsx(FloatingComposer, {
+			config,
+			launcher,
+			panel: {
+				floating,
+				showPanel,
+				state
 			}
-		}
-	};
+		})]
+	});
+}
+function FloatingComposer({ config, launcher, panel }) {
+	const { labels } = config;
+	const { floating, showPanel, state } = panel;
+	if (!showPanel) return launcher.custom ? null : /* @__PURE__ */ jsx(Launcher, {
+		buttonRef: launcher.triggerProps.ref,
+		isOpen: false,
+		label: state.isOpen ? labels.resume : labels.trigger,
+		onClick: launcher.triggerProps.onClick
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [state.step === "compose" && state.screenshots.map(({ id, selectedNode }) => selectedNode ? /* @__PURE__ */ jsx(SelectionOutline, { node: selectedNode }, id) : null), /* @__PURE__ */ jsx(FeedbackPanel, {
+		floatingControls: /* @__PURE__ */ jsx(FloatingControls, {
+			floating,
+			labels,
+			minimize: launcher.minimize
+		}),
+		labels,
+		state
+	})] });
+}
+function FloatingControls({ labels, floating, minimize }) {
+	return /* @__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, {})
+		})]
+	});
+}
+//#endregion
+//#region src/feedback/ui/floating/use-widget-launcher.ts
+function useWidgetLauncher(state) {
+	const [minimized, setMinimized] = useState(false);
+	const triggerRef = useRef(null);
 	return {
-		hasPendingAttachments: pendingReport !== null,
-		isEditingDisabled: activeRequest !== null || pendingReport !== null,
-		isSubmitting: activeRequest !== null,
-		resetSubmission,
-		submit
-	};
-}
-//#endregion
-//#region src/feedback/ui/state/use-screenshot-drafts.ts
-function releaseDraft(draft) {
-	releaseCapture(draft?.image);
-}
-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));
-	}, []);
-	const activeScreenshot = screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null;
-	const firstCapture = pendingCapture ?? screenshots[0];
-	return {
-		activeScreenshot,
-		cancelPendingCapture,
-		canRefreshAutomatically: screenshots.length <= 1 && firstCapture?.source === "automatic" && (activeScreenshot?.annotations.length ?? 0) === 0 && !screenshots.some((draft) => draft.selection),
-		pendingCapture,
-		refreshAutomatic,
-		removeCapture,
-		resetScreenshots,
-		retakeCapture,
-		screenshots,
-		selectScreenshot: setActiveId,
-		setAnnotations,
-		setSelectionComment,
-		storeScreenshot,
-		takeCapture
-	};
-}
-//#endregion
-//#region src/feedback/ui/state/use-widget-config.ts
-function dismissalDuration(days) {
-	return days !== void 0 && Number.isFinite(days) && days > 0 ? days : null;
-}
-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),
-		publicKey: publicKey ?? null
-	};
-}
-//#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) {
-	const refreshRef = useRef(refresh);
-	useEffect(() => {
-		refreshRef.current = refresh;
-	});
-	useEffect(() => {
-		if (!enabled) return;
-		const runRefresh = () => refreshRef.current();
-		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);
-			runRefresh();
-			return result;
-		};
-		history.replaceState = function replaceState(data, unused, url) {
-			const result = originalReplace.call(history, data, unused, url);
-			runRefresh();
-			return result;
-		};
-		window.addEventListener("popstate", runRefresh);
-		let resizeTimer;
-		const onResize = () => {
-			window.clearTimeout(resizeTimer);
-			resizeTimer = window.setTimeout(runRefresh, 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", runRefresh);
-			window.clearTimeout(resizeTimer);
-			window.removeEventListener("resize", onResize);
-		};
-	}, [enabled]);
-}
-//#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;
-}
-function writeDismissedUntil(key, until) {
-	try {
-		window.localStorage.setItem(key, String(until));
-	} catch {}
-}
-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;
-}
-function useWidgetState(props) {
-	const { client, dismissalKey, dismissForDays, isAnonymous, publicKey } = 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;
-	useCaptureSync(isOpen && !submission.isEditingDisabled && step === "compose" && gallery.canRefreshAutomatically && 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 = await captureViewport().catch(() => null);
-		if (pickRef.current !== pick) {
-			releaseCapture(fresh);
-			return;
-		}
-		setIsElementCapturing(false);
-		if (!fresh) {
-			setError(captureFailed);
-			return;
-		}
-		storeScreenshot({
-			annotations: [highlightFor(picked, fresh)],
-			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.6.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,
-		publicKey,
-		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/floating/use-floating-widget-keyboard.ts
-function useFloatingWidgetKeyboard(options) {
-	const { anchorRef, hotkey, launcher, showPanel, state } = options;
-	useEffect(() => {
-		if (state.step === "compose") state.annotationTrigger?.button.focus({ preventScroll: true });
-	}, [state.step, state.annotationTrigger]);
-	const minimize = launcher.minimize;
-	useEffect(() => {
-		if (!showPanel || state.step !== "compose") return;
-		return listenToKeydown(anchorRef.current, (event) => {
-			if (event.key === "Escape" && !event.defaultPrevented) minimize();
-		});
-	}, [
-		anchorRef,
-		minimize,
-		showPanel,
-		state.step
-	]);
-	useWidgetHotkey({
-		anchorRef,
-		hotkey,
-		launcher,
-		state
-	});
-}
-function useWidgetHotkey({ anchorRef, hotkey, launcher, state }) {
-	const { close, isOpen } = state;
-	const open = launcher.triggerProps.onClick;
-	useEffect(() => {
-		if (!hotkey) return;
-		return listenToKeydown(anchorRef.current, (event) => {
-			if (matchesHotkey(event, hotkey)) {
-				event.preventDefault();
-				if (isOpen) close();
-				else open();
-			}
-		}, true);
-	}, [
-		anchorRef,
-		close,
-		hotkey,
-		isOpen,
-		open
-	]);
-}
-//#endregion
-//#region src/feedback/ui/floating/floating-widget.tsx
-function FloatingWidget({ config, launcher, state }) {
-	const { hotkey, position } = config;
-	const showPanel = state.isOpen && !launcher.minimized;
-	const floating = useFloatingPosition(position, showPanel);
-	useFloatingWidgetKeyboard({
-		anchorRef: floating.rootRef,
-		hotkey,
-		launcher,
-		showPanel,
-		state
-	});
-	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 }), /* @__PURE__ */ jsx(FloatingComposer, {
-			config,
-			launcher,
-			panel: {
-				floating,
-				showPanel,
-				state
-			}
-		})]
-	});
-}
-function FloatingComposer({ config, launcher, panel }) {
-	const { labels } = config;
-	const { floating, showPanel, state } = panel;
-	if (!showPanel) return launcher.custom ? null : /* @__PURE__ */ jsx(Launcher, {
-		buttonRef: launcher.triggerProps.ref,
-		isOpen: false,
-		label: state.isOpen ? labels.resume : labels.trigger,
-		onClick: launcher.triggerProps.onClick
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [state.step === "compose" && state.screenshots.map(({ id, selectedNode }) => selectedNode ? /* @__PURE__ */ jsx(SelectionOutline, { node: selectedNode }, id) : null), /* @__PURE__ */ jsx(FeedbackPanel, {
-		floatingControls: /* @__PURE__ */ jsx(FloatingControls, {
-			floating,
-			labels,
-			minimize: launcher.minimize
-		}),
-		labels,
-		state
-	})] });
-}
-function FloatingControls({ labels, floating, minimize }) {
-	return /* @__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, {})
-		})]
-	});
-}
-//#endregion
-//#region src/feedback/ui/floating/use-widget-launcher.ts
-function useWidgetLauncher(state) {
-	const [minimized, setMinimized] = useState(false);
-	const triggerRef = useRef(null);
-	return {
-		minimize: () => {
-			setMinimized(true);
-			requestAnimationFrame(() => triggerRef.current?.focus());
-		},
-		minimized,
-		triggerProps: {
-			onClick: () => {
-				setMinimized(false);
-				if (!state.isOpen) state.open();
-			},
-			ref: triggerRef
-		}
+		minimize: () => {
+			setMinimized(true);
+			requestAnimationFrame(() => triggerRef.current?.focus());
+		},
+		minimized,
+		triggerProps: {
+			onClick: () => {
+				setMinimized(false);
+				if (!state.isOpen) state.open();
+			},
+			ref: triggerRef
+		}
 	};
 }
 //#endregion
@@ -1974,6 +1415,8 @@ summary::-webkit-details-marker { 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:disabled { opacity: 1; cursor: default; }
+.screenshot-preview:focus-visible { outline-offset: -2px; }
 .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); }
@@ -2009,6 +1452,8 @@ summary::-webkit-details-marker { display: none; }
 //#endregion
 //#region src/feedback/ui/floating/picker-styles.ts
 const PICKER_STYLES = `
+.picker { position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.elementPicker}; pointer-events: none; }
+.picker-hint, .picker-note { pointer-events: auto; }
 .picker-box {
   position: fixed;
   top: 0;
@@ -2096,17 +1541,15 @@ const PICKER_STYLES = `
 .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;
+  width: 320px;
   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;
@@ -2134,7 +1577,9 @@ const PICKER_STYLES = `
 }
 .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; }
+.picker-note-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
+.picker-note .picker-cancel { padding: 0 10px; }
+.picker-note .submit { margin-left: auto; }
 @media (pointer: coarse) {
   .picker-hint { padding: 6px 8px 6px 14px; }
   .picker-hint kbd { display: none; }
@@ -2272,97 +1717,647 @@ svg { flex-shrink: 0; }
   .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 {
+  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; 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;
+}
+/**
+* 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, "");
+		stopClicksAtHost(host);
+		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(() => {
+		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);
+}
+//#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);
+}
+function formatMessage(args) {
+	const message = args.map(serializeArgument).join(" ");
+	return message.length > MAX_MESSAGE_LENGTH ? `${message.slice(0, 999)}…` : message;
+}
+/**
+* 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);
+	};
+	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)}`);
+	};
+	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);
+		}
+	};
+}
+//#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
+	};
+}
+//#endregion
+//#region src/feedback/ui/state/use-screenshot-drafts.ts
+function releaseDraft(draft) {
+	releaseCapture(draft?.image);
 }
-.glass::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--rf-bg);
-  pointer-events: none;
+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));
+	}, []);
+	const activeScreenshot = screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null;
+	const firstCapture = pendingCapture ?? screenshots[0];
+	return {
+		activeScreenshot,
+		cancelPendingCapture,
+		canRefreshAutomatically: screenshots.length <= 1 && firstCapture?.source === "automatic" && (activeScreenshot?.annotations.length ?? 0) === 0 && !screenshots.some((draft) => draft.selection),
+		pendingCapture,
+		refreshAutomatic,
+		removeCapture,
+		resetScreenshots,
+		retakeCapture,
+		screenshots,
+		selectScreenshot: setActiveId,
+		setAnnotations,
+		setSelectionComment,
+		storeScreenshot,
+		takeCapture
+	};
 }
-@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);
-  }
+//#endregion
+//#region src/feedback/ui/state/use-widget-config.ts
+function dismissalDuration(days) {
+	return days !== void 0 && Number.isFinite(days) && days > 0 ? days : null;
 }
-@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
-  .glass::before { background: var(--rf-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
+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),
+		publicKey: publicKey ?? null
+	};
 }
-.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; 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/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) {
+	const refreshRef = useRef(refresh);
+	useEffect(() => {
+		refreshRef.current = refresh;
+	});
+	useEffect(() => {
+		if (!enabled) return;
+		const runRefresh = () => refreshRef.current();
+		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);
+			runRefresh();
+			return result;
+		};
+		history.replaceState = function replaceState(data, unused, url) {
+			const result = originalReplace.call(history, data, unused, url);
+			runRefresh();
+			return result;
+		};
+		window.addEventListener("popstate", runRefresh);
+		let resizeTimer;
+		const onResize = () => {
+			window.clearTimeout(resizeTimer);
+			resizeTimer = window.setTimeout(runRefresh, 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", runRefresh);
+			window.clearTimeout(resizeTimer);
+			window.removeEventListener("resize", onResize);
+		};
+	}, [enabled]);
 }
-`;
 //#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;
+//#region src/feedback/ui/use-widget-state.ts
+const SUCCESS_CLOSE_DELAY = 2400;
+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;
 }
-/**
-* 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, "");
-		stopClicksAtHost(host);
-		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();
+function writeDismissedUntil(key, until) {
+	try {
+		window.localStorage.setItem(key, String(until));
+	} catch {}
+}
+function useWidgetState(props) {
+	const { client, dismissalKey, dismissForDays, isAnonymous, publicKey } = 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(() => {
-		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);
+		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;
+	useCaptureSync(isOpen && !submission.isEditingDisabled && step === "compose" && gallery.canRefreshAutomatically && 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 });
 	}, [
-		shadowRoot,
-		resolvedTheme,
-		primaryColor,
-		offset
+		dismissForDays,
+		dismissalKey,
+		props.onDismiss,
+		reset
 	]);
-	if (!shadowRoot) return null;
-	return createPortal(children, shadowRoot);
+	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 = await captureViewport().catch(() => null);
+		if (pickRef.current !== pick) {
+			releaseCapture(fresh);
+			return;
+		}
+		setIsElementCapturing(false);
+		if (!fresh) {
+			setError(captureFailed);
+			return;
+		}
+		storeScreenshot({
+			annotations: [highlightFor(picked, fresh)],
+			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.6.4" }),
+				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,
+		publicKey,
+		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/widget.tsx
-const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-DOECMj0S.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
+const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-DgmM3RhW.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
 function RefletFeedback(props) {
 	const state = useWidgetState(props);
 	const launcher = useWidgetLauncher(state);