reflet-sdk 0.3.2 → 0.3.4

package/dist/feedback.js

@@ -1,14 +1,165 @@
 "use client";
 import { t as Reflet } from "./client-BYuSKJw5.js";
 import { t as RefletContext } from "./react-context-DZw_HHjj.js";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+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";
+import { ScrollArea } from "@base-ui/react/scroll-area";
 import { createPortal } from "react-dom";
 //#region src/feedback/core/capture.ts
 /** Marks every node the widget owns, so captures never include the panel. */
 const WIDGET_MARKER = "data-reflet-widget";
 const MAX_PIXEL_RATIO = 2;
 const DEFAULT_MAX_WIDTH = 2400;
+const MAX_INLINE_BYTES = 3e6;
+const TRANSPARENT_PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+const EXTERNAL_URL = /^(https?:)?\/\//i;
+const CSS_URL = /url\((['"]?)([^)'"]+)\1\)/g;
+function isExternalImageUrl(url) {
+	if (!url || url.startsWith("data:") || url.startsWith("blob:")) return false;
+	if (!EXTERNAL_URL.test(url)) return false;
+	try {
+		return new URL(url, window.location.href).origin !== window.location.origin;
+	} catch {
+		return false;
+	}
+}
+function toDataUrl(url) {
+	return new Promise((resolve) => {
+		fetch(url, { mode: "cors" }).then(async (response) => {
+			if (!response.ok) {
+				resolve(null);
+				return;
+			}
+			const blob = await response.blob();
+			if (blob.size === 0 || blob.size > MAX_INLINE_BYTES) {
+				resolve(null);
+				return;
+			}
+			const reader = new FileReader();
+			reader.onload = () => resolve(typeof reader.result === "string" ? reader.result : null);
+			reader.onerror = () => resolve(null);
+			reader.readAsDataURL(blob);
+		}).catch(() => resolve(null));
+	});
+}
+const PNG_NORMALIZE_TIMEOUT = 750;
+const CAPTURE_TIMEOUT = 1e4;
+const ANIMATION_SETTLE_TIMEOUT = 1e3;
+/**
+* Tiles and sections routinely animate in or reflow (grid drags, entrance
+* transitions); a capture taken mid-flight freezes them displaced. Waits for
+* animations touching the page to finish, capped so an infinite spinner can
+* never stall the report.
+*/
+async function waitForPageAnimations() {
+	if (typeof document.getAnimations !== "function") return;
+	const start = performance.now();
+	while (performance.now() - start < ANIMATION_SETTLE_TIMEOUT) {
+		const running = document.getAnimations().filter((animation) => animation.playState === "running");
+		if (running.length === 0) return;
+		await Promise.race([Promise.allSettled(running.map((animation) => animation.finished)), new Promise((resolve) => setTimeout(resolve, 150))]);
+	}
+}
+/**
+* snapdom awaits `decode()` on images created with `decoding="sync"` — a
+* promise Chrome 151 sometimes never settles (observed for cross-origin
+* webp, cached or inlined). Re-encoding through a canvas yields a PNG data
+* url, which decodes reliably; the load itself goes through `onload`, never
+* `decode()`.
+*/
+function normalizeToPng(dataUrl) {
+	return new Promise((resolve) => {
+		const image = new Image();
+		const timeout = setTimeout(() => resolve(dataUrl), PNG_NORMALIZE_TIMEOUT);
+		image.onload = () => {
+			clearTimeout(timeout);
+			try {
+				if (image.naturalWidth === 0 || image.naturalHeight === 0) {
+					resolve(null);
+					return;
+				}
+				const canvas = document.createElement("canvas");
+				canvas.width = image.naturalWidth;
+				canvas.height = image.naturalHeight;
+				const context = canvas.getContext("2d");
+				if (!context) {
+					resolve(dataUrl);
+					return;
+				}
+				context.drawImage(image, 0, 0);
+				resolve(canvas.toDataURL("image/png"));
+			} catch {
+				resolve(null);
+			}
+		};
+		image.onerror = () => {
+			clearTimeout(timeout);
+			resolve(null);
+		};
+		image.src = dataUrl;
+	});
+}
+async function toInlineUrl(url) {
+	const dataUrl = await toDataUrl(url);
+	if (!dataUrl) return null;
+	return normalizeToPng(dataUrl);
+}
+function remember(swaps, element, name) {
+	swaps.push({
+		element,
+		name,
+		value: element.getAttribute(name)
+	});
+}
+async function inlineImgSource(img, swaps) {
+	const src = img.getAttribute("src");
+	if (!(src && isExternalImageUrl(src))) return;
+	const dataUrl = await toInlineUrl(src);
+	if (dataUrl) {
+		if (img.hasAttribute("srcset")) {
+			remember(swaps, img, "srcset");
+			img.removeAttribute("srcset");
+		}
+		if (img.hasAttribute("sizes")) {
+			remember(swaps, img, "sizes");
+			img.removeAttribute("sizes");
+		}
+	}
+	remember(swaps, img, "src");
+	img.setAttribute("src", dataUrl ?? TRANSPARENT_PIXEL);
+}
+async function inlineBackgroundImages(element, swaps) {
+	const style = element.getAttribute("style");
+	if (!style) return;
+	const urls = [...style.matchAll(CSS_URL)].map((match) => match[2] ?? "");
+	if (!urls.some(isExternalImageUrl)) return;
+	let next = style;
+	for (const url of urls) {
+		if (!isExternalImageUrl(url)) continue;
+		const dataUrl = await toInlineUrl(url);
+		next = next.split(url).join(dataUrl ?? TRANSPARENT_PIXEL);
+	}
+	if (next !== style) {
+		remember(swaps, element, "style");
+		element.setAttribute("style", next);
+	}
+}
+/**
+* Swaps every cross-origin image under `root` for a data URL so the capture
+* cannot hit snapdom's decode-failure hang. Returns the undo list — always
+* run it, even after a failed capture.
+*/
+async function inlineExternalImages(root) {
+	const swaps = [];
+	for (const img of [...root.querySelectorAll("img")]) await inlineImgSource(img, swaps);
+	for (const el of [...root.querySelectorAll("[style*='url(']")]) await inlineBackgroundImages(el, swaps);
+	return swaps;
+}
+function restoreInlinedImages(swaps) {
+	for (const swap of swaps) if (swap.value === null) swap.element.removeAttribute(swap.name);
+	else swap.element.setAttribute(swap.name, swap.value);
+}
 function buildSnapdomOptions(options) {
 	const ratio = options.devicePixelRatio ?? 1;
 	return {
@@ -18,6 +169,7 @@ function buildSnapdomOptions(options) {
 		embedFonts: true,
 		exclude: [`[${WIDGET_MARKER}]`, ...options.excludeSelectors ?? []],
 		fast: true,
+		filter: options.filter,
 		reconcile: true
 	};
 }
@@ -34,7 +186,7 @@ function fitWithin(size, maxWidth) {
 		width: maxWidth
 	};
 }
-function toBlob$1(canvas) {
+function toBlob(canvas) {
 	return new Promise((resolve) => {
 		canvas.toBlob(resolve, "image/png");
 	});
@@ -56,7 +208,7 @@ async function capturedFromCanvas(source, maxWidth) {
 		width: source.width
 	}, maxWidth);
 	const output = fitted.scale === 1 ? source : downscale(source, fitted);
-	const blob = await toBlob$1(output);
+	const blob = await toBlob(output);
 	if (!blob) return null;
 	return {
 		blob,
@@ -78,11 +230,27 @@ async function captureViewport(options = {}) {
 	try {
 		const { snapdom } = await import("@zumer/snapdom");
 		const target = options.element ?? document.documentElement;
-		return await capturedFromCanvas(await snapdom.toCanvas(target, buildSnapdomOptions({
-			devicePixelRatio: window.devicePixelRatio,
-			element: options.element,
-			excludeSelectors: options.excludeSelectors
-		})), options.maxWidth ?? DEFAULT_MAX_WIDTH);
+		await waitForPageAnimations();
+		const swaps = await inlineExternalImages(target);
+		const shoot = (withoutImages = false) => {
+			const attempt = snapdom.toCanvas(target, buildSnapdomOptions({
+				devicePixelRatio: window.devicePixelRatio,
+				element: options.element,
+				excludeSelectors: options.excludeSelectors,
+				filter: withoutImages ? (element) => element.tagName !== "IMG" : void 0
+			}));
+			attempt.catch(() => void 0);
+			return Promise.race([attempt, new Promise((_, reject) => setTimeout(() => reject(/* @__PURE__ */ new Error("capture timed out")), options.timeout ?? CAPTURE_TIMEOUT))]);
+		};
+		let canvas;
+		try {
+			canvas = await shoot();
+		} catch {
+			canvas = await shoot(true);
+		} finally {
+			restoreInlinedImages(swaps);
+		}
+		return await capturedFromCanvas(canvas, options.maxWidth ?? DEFAULT_MAX_WIDTH);
 	} catch {
 		return null;
 	}
@@ -641,29 +809,40 @@ function collectPageContext(options) {
 }
 //#endregion
 //#region src/feedback/types.ts
-/** Reported with every submission. */
-const SDK_VERSION = "0.3.2";
+const SDK_VERSION = "0.3.4";
 const DEFAULT_WIDGET_LABELS = {
 	annotateHint: "Draw on the screenshot to point at the problem.",
+	attachmentUploadFailed: "Your feedback was saved, but some screenshots are still pending. Retry to attach them.",
 	attachScreenshot: "Attach a screenshot",
 	back: "Back",
 	cancel: "Cancel",
+	captureFailed: "Screenshot unavailable. Try again or send without it.",
+	capturing: "Taking screenshot…",
 	categoryBug: "Bug",
 	categoryIdea: "Idea",
+	categoryLabel: "Feedback type",
 	categoryQuestion: "Question",
 	clearAnnotations: "Clear drawing",
-	descriptionPlaceholder: "What happened? What did you expect?",
+	clearSelection: "Remove selected element",
+	descriptionPlaceholder: "What would you like to share?",
 	dismissForDays: "Hide for {days} days",
 	done: "Done",
+	emailInvalid: "Enter a valid email address.",
 	emailLabel: "Email",
 	emailPlaceholder: "you@company.com",
 	errorGeneric: "Something went wrong. Please try again.",
 	errorTitleRequired: "Tell us a bit about it first.",
+	minimize: "Minimize feedback",
+	moreOptions: "More options",
+	moveFeedback: "Move feedback",
 	pickElement: "Point at an element",
 	pickElementHint: "Click the element you are talking about — cancel with",
 	recapture: "Retake",
 	removeScreenshot: "Remove",
+	resume: "Resume feedback",
 	retakeHint: "Screenshot of this page",
+	retryAttachments: "Retry attachments",
+	screenshot: "Screenshot",
 	submit: "Send feedback",
 	successMessage: "We read every report. Thanks for taking the time.",
 	successTitle: "Feedback sent",
@@ -674,15 +853,10 @@ const DEFAULT_WIDGET_LABELS = {
 };
 //#endregion
 //#region src/feedback/core/annotations.ts
-const ANNOTATION_COLORS = [
-	"#ef4444",
-	"#f59e0b",
-	"#22c55e",
-	"#3b82f6",
-	"#111827"
-];
 const BOX_TOOLS = [
+	"text",
 	"rectangle",
+	"spotlight",
 	"highlight",
 	"blur"
 ];
@@ -723,6 +897,7 @@ function simplifyPath(points, tolerance = DEFAULT_PATH_TOLERANCE) {
 	return kept;
 }
 function isDegenerate(annotation) {
+	if (annotation.tool === "text") return !annotation.text?.trim();
 	if (annotation.tool === "pen") return (annotation.points?.length ?? 0) < 2;
 	const { start, end } = annotation;
 	return Math.hypot(end.x - start.x, end.y - start.y) < MIN_GESTURE_LENGTH;
@@ -741,6 +916,7 @@ function toWire(annotation) {
 		return {
 			color,
 			height: rect.height,
+			...tool === "text" ? { text: annotation.text } : {},
 			type: tool,
 			width: rect.width,
 			x: rect.x,
@@ -761,144 +937,20 @@ function toWireAnnotations(annotations) {
 	return annotations.filter((item) => !isDegenerate(item)).map(toWire);
 }
 //#endregion
-//#region src/feedback/core/annotation-renderer.ts
-const STROKE_WIDTH = 3;
-const ARROW_HEAD_SIZE = 16;
-const HIGHLIGHT_ALPHA = .3;
-const REDACTION_FILL = "#111827";
-const PIXEL_BLOCK = 10;
-function scalePoint(point, scale) {
-	return {
-		x: point.x * scale,
-		y: point.y * scale
-	};
-}
-function scaleRect(rect, scale) {
-	return {
-		height: rect.height * scale,
-		width: rect.width * scale,
-		x: rect.x * scale,
-		y: rect.y * scale
-	};
-}
-function isCanvasElement(value) {
-	return typeof HTMLCanvasElement !== "undefined" && value instanceof HTMLCanvasElement;
-}
-/**
-* Downsamples the region and paints it back enlarged, so redacted pixels are
-* unrecoverable. Falls back to an opaque block wherever 2d canvases are absent.
-*/
-function redact(context, rect) {
-	const source = context.canvas;
-	const width = Math.max(1, Math.round(rect.width / PIXEL_BLOCK));
-	const height = Math.max(1, Math.round(rect.height / PIXEL_BLOCK));
-	if (isCanvasElement(source)) {
-		const offscreen = document.createElement("canvas");
-		offscreen.width = width;
-		offscreen.height = height;
-		const offscreenContext = offscreen.getContext("2d");
-		if (offscreenContext) {
-			offscreenContext.imageSmoothingEnabled = true;
-			offscreenContext.drawImage(source, rect.x, rect.y, rect.width, rect.height, 0, 0, width, height);
-			context.drawImage(offscreen, rect.x, rect.y, rect.width, rect.height);
-			return;
-		}
-	}
-	context.fillStyle = REDACTION_FILL;
-	context.fillRect(rect.x, rect.y, rect.width, rect.height);
-}
-function drawArrow(context, start, end, scale) {
-	context.beginPath();
-	context.moveTo(start.x, start.y);
-	context.lineTo(end.x, end.y);
-	context.stroke();
-	const [left, right] = arrowHead(start, end, ARROW_HEAD_SIZE * scale);
-	context.beginPath();
-	context.moveTo(end.x, end.y);
-	context.lineTo(left.x, left.y);
-	context.lineTo(right.x, right.y);
-	context.closePath();
-	context.fill();
-}
-function drawPen(context, points, scale) {
-	const [first, ...rest] = points;
-	if (!first) return;
-	const head = scalePoint(first, scale);
-	context.beginPath();
-	context.moveTo(head.x, head.y);
-	for (const point of rest) {
-		const scaled = scalePoint(point, scale);
-		context.lineTo(scaled.x, scaled.y);
-	}
-	context.stroke();
-}
-function drawAnnotation(context, annotation, scale) {
-	const { color, tool } = annotation;
-	const rect = scaleRect(normalizeRect(annotation.start, annotation.end), scale);
-	context.save();
-	context.lineWidth = STROKE_WIDTH * scale;
-	context.lineCap = "round";
-	context.lineJoin = "round";
-	context.strokeStyle = color;
-	context.fillStyle = color;
-	switch (tool) {
-		case "pen":
-			drawPen(context, annotation.points ?? [], scale);
-			break;
-		case "arrow":
-			drawArrow(context, scalePoint(annotation.start, scale), scalePoint(annotation.end, scale), scale);
-			break;
-		case "rectangle":
-			context.strokeRect(rect.x, rect.y, rect.width, rect.height);
-			break;
-		case "highlight":
-			context.globalAlpha = HIGHLIGHT_ALPHA;
-			context.fillRect(rect.x, rect.y, rect.width, rect.height);
-			break;
-		default: redact(context, rect);
-	}
-	context.restore();
-}
-function drawAnnotations(context, annotations, options) {
-	const scale = options?.scale ?? 1;
-	for (const annotation of annotations) if (!isDegenerate(annotation)) drawAnnotation(context, annotation, scale);
-}
-function loadImage(url) {
-	return new Promise((resolve, reject) => {
-		const image = new Image();
-		image.onload = () => resolve(image);
-		image.onerror = () => reject(/* @__PURE__ */ new Error("Screenshot could not be decoded"));
-		image.src = url;
-	});
-}
-function toBlob(canvas) {
-	return new Promise((resolve) => {
-		canvas.toBlob(resolve, "image/png");
-	});
-}
-/**
-* Burns the annotations into a copy of the capture so reviewers and agents see
-* the drawing without needing to replay the vector data.
-*/
-async function renderAnnotatedImage(source, annotations) {
-	if (annotations.length === 0) return null;
-	const canvas = document.createElement("canvas");
-	canvas.width = source.width;
-	canvas.height = source.height;
-	const context = canvas.getContext("2d");
-	if (!context) return null;
-	const image = await loadImage(source.objectUrl);
-	context.drawImage(image, 0, 0, source.width, source.height);
-	drawAnnotations(context, annotations);
-	const blob = await toBlob(canvas);
-	if (!blob) return null;
-	return {
-		blob,
-		height: source.height,
-		mimeType: "image/png",
-		objectUrl: URL.createObjectURL(blob),
-		width: source.width
-	};
+//#region src/feedback/ui/annotation/color-value.ts
+const DEFAULT_ANNOTATION_COLOR = {
+	baseColor: "#ef4444",
+	strengthPercent: 100
+};
+function annotationColorHex({ baseColor, strengthPercent }) {
+	return `#${[
+		1,
+		3,
+		5
+	].map((offset) => {
+		const channel = Number.parseInt(baseColor.slice(offset, offset + 2), 16);
+		return Math.round(255 + (channel - 255) * strengthPercent / 100).toString(16).padStart(2, "0");
+	}).join("")}`;
 }
 //#endregion
 //#region src/feedback/ui/icons.tsx
@@ -930,28 +982,6 @@ function CloseIcon({ className }) {
 		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
 	});
 }
-function BugIcon() {
-	return /* @__PURE__ */ jsx(Svg, {
-		size: 14,
-		children: /* @__PURE__ */ jsx("path", { d: "M8 6a4 4 0 0 1 8 0M6 10h12v4a6 6 0 0 1-12 0zM3 12h3M18 12h3M4.5 6.5 7 8M19.5 6.5 17 8M4.5 17.5 7 16M19.5 17.5 17 16" })
-	});
-}
-function IdeaIcon() {
-	return /* @__PURE__ */ jsx(Svg, {
-		size: 14,
-		children: /* @__PURE__ */ jsx("path", { d: "M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.5.4.8.9.9 1.5l.1.7h5.2l.1-.7c.1-.6.4-1.1.9-1.5A6 6 0 0 0 12 3" })
-	});
-}
-function QuestionIcon() {
-	return /* @__PURE__ */ jsxs(Svg, {
-		size: 14,
-		children: [/* @__PURE__ */ jsx("circle", {
-			cx: "12",
-			cy: "12",
-			r: "9"
-		}), /* @__PURE__ */ jsx("path", { d: "M9.6 9.4a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.3M12 17h.01" })]
-	});
-}
 function CameraIcon() {
 	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("path", { d: "M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2l1.2-2h8.2l1.2 2h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z" }), /* @__PURE__ */ jsx("circle", {
 		cx: "12",
@@ -975,21 +1005,6 @@ function TrashIcon() {
 function ArrowIcon() {
 	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M5 19 19 5M11 5h8v8" }) });
 }
-function SquareIcon() {
-	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("rect", {
-		height: "13",
-		rx: "1.5",
-		width: "16",
-		x: "4",
-		y: "5.5"
-	}) });
-}
-function HighlightIcon() {
-	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M4 15h16M6 5h12v7H6z" }) });
-}
-function BlurIcon() {
-	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("path", { d: "M12 3c3.5 4 5.5 6.6 5.5 9.2A5.5 5.5 0 0 1 6.5 12.2C6.5 9.6 8.5 7 12 3" }), /* @__PURE__ */ jsx("path", { d: "M9 13h.01M12 15h.01M15 12h.01" })] });
-}
 function UndoIcon() {
 	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M4 9h11a5 5 0 0 1 0 10h-5M4 9l4-4M4 9l4 4" }) });
 }
@@ -1007,83 +1022,742 @@ function CheckIcon({ size = 28 }) {
 		children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7" })
 	});
 }
-//#endregion
-//#region src/feedback/ui/annotator.tsx
-const TOOLS = [
-	{
-		icon: PencilIcon,
-		id: "pen",
-		label: "Draw"
-	},
-	{
-		icon: ArrowIcon,
-		id: "arrow",
-		label: "Arrow"
-	},
-	{
-		icon: SquareIcon,
-		id: "rectangle",
-		label: "Box"
-	},
-	{
-		icon: HighlightIcon,
-		id: "highlight",
-		label: "Highlight"
-	},
-	{
-		icon: BlurIcon,
-		id: "blur",
-		label: "Hide"
-	}
-];
-function toImagePoint(canvas, clientX, clientY) {
-	const bounds = canvas.getBoundingClientRect();
-	return {
-		x: (clientX - bounds.left) / bounds.width * canvas.width,
-		y: (clientY - bounds.top) / bounds.height * canvas.height
-	};
+function GripIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01" }) });
 }
-function Annotator({ annotations, capture, labels, onChange, onDone }) {
-	const canvasRef = useRef(null);
-	const nextId = useRef(0);
-	const [tool, setTool] = useState("pen");
-	const [color, setColor] = useState(ANNOTATION_COLORS[0]);
-	const [draft, setDraft] = useState(null);
-	const [base, setBase] = useState(null);
-	useEffect(() => {
-		let active = true;
-		const image = new Image();
-		image.onload = () => {
-			if (active) setBase(image);
-		};
-		image.src = capture.objectUrl;
-		return () => {
-			active = false;
-			setBase(null);
-		};
-	}, [capture.objectUrl]);
+function MinusIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
+}
+function MoreIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M5 12h.01M12 12h.01M19 12h.01" }) });
+}
+function ChevronDownIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "m7 10 5 5 5-5" }) });
+}
+function SquareIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("rect", {
+		height: "14",
+		rx: "2",
+		width: "14",
+		x: "5",
+		y: "5"
+	}) });
+}
+function TextIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M5 6V4h14v2M12 4v16M8 20h8" }) });
+}
+function SpotlightIcon() {
+	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("path", { d: "M8 4H4v4M16 4h4v4M4 16v4h4M20 16v4h-4" }), /* @__PURE__ */ jsx("rect", {
+		height: "8",
+		rx: "1",
+		width: "8",
+		x: "8",
+		y: "8"
+	})] });
+}
+function HighlightIcon() {
+	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M4 19h16M8 15l8-11 4 3-8 11-4-3ZM7 15l-2 3" }) });
+}
+function BlurIcon() {
+	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("rect", {
+		height: "14",
+		rx: "2",
+		width: "14",
+		x: "5",
+		y: "5"
+	}), /* @__PURE__ */ jsx("path", { d: "M8 8h8v8H8z" })] });
+}
+//#endregion
+//#region src/feedback/ui/annotation/text/text-editor.tsx
+function TextAnnotationEditor({ draft, onCommit, onCancel }) {
+	const [text, setText] = useState(draft.annotation.text ?? "");
+	const inputRef = useRef(null);
+	const id = useId().replaceAll(":", "");
+	useEffect(() => {
+		inputRef.current?.focus();
+	}, []);
+	return /* @__PURE__ */ jsxs("form", {
+		className: "glass text-annotation-editor",
+		id,
+		onSubmit: (event) => {
+			event.preventDefault();
+			onCommit(text);
+		},
+		children: [
+			/* @__PURE__ */ jsx("style", { children: `[id="${id}"] { left: clamp(12px, ${draft.position.x}px, calc(100vw - 252px)); top: clamp(12px, ${draft.position.y}px, calc(100dvh - 148px)); }` }),
+			/* @__PURE__ */ jsx("textarea", {
+				"aria-label": "Text annotation",
+				maxLength: 280,
+				onBlur: (event) => {
+					if (!event.currentTarget.form?.contains(event.relatedTarget)) onCommit(text);
+				},
+				onChange: (event) => setText(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Escape") {
+						event.preventDefault();
+						event.stopPropagation();
+						onCancel();
+					}
+					if (event.key === "Enter" && !event.shiftKey) {
+						event.preventDefault();
+						onCommit(text);
+					}
+				},
+				placeholder: "Type a note…",
+				ref: inputRef,
+				rows: 2,
+				value: text
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-annotation-actions",
+				children: [/* @__PURE__ */ jsx("button", {
+					"aria-label": "Cancel text",
+					className: "tool",
+					onClick: onCancel,
+					type: "button",
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				}), /* @__PURE__ */ jsx("button", {
+					"aria-label": "Apply text",
+					className: "done-btn",
+					type: "submit",
+					children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 })
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/feedback/ui/annotation/text/use-text-annotation.ts
+function containsPoint(annotation, point) {
+	const bounds = normalizeRect(annotation.start, annotation.end);
+	return point.x >= bounds.x && point.x <= bounds.x + bounds.width && point.y >= bounds.y && point.y <= bounds.y + bounds.height;
+}
+function useTextAnnotation(options) {
+	const [textDraft, setTextDraft] = useState(null);
+	const beginText = (canvas, point) => {
+		const bounds = canvas.getBoundingClientRect();
+		const existing = [...options.annotations].reverse().find((item) => item.tool === "text" && containsPoint(item, point));
+		const annotation = existing ?? {
+			color: options.color,
+			end: point,
+			id: crypto.randomUUID(),
+			start: point,
+			tool: "text"
+		};
+		const fontSize = existing ? (existing.end.y - existing.start.y) / (existing.text?.split("\n").length ?? 1) / 1.4 : 18 * canvas.width / bounds.width;
+		setTextDraft({
+			annotation,
+			fontSize,
+			position: {
+				x: bounds.x + annotation.start.x / canvas.width * bounds.width,
+				y: bounds.y + annotation.start.y / canvas.height * bounds.height
+			}
+		});
+	};
+	const commitText = (canvas, text) => {
+		const context = canvas.getContext("2d");
+		if (!(textDraft && context)) return;
+		const value = text.trim();
+		const remaining = options.annotations.filter(({ id }) => id !== textDraft.annotation.id);
+		if (value) {
+			context.font = `${textDraft.fontSize}px ui-sans-serif, system-ui, sans-serif`;
+			const lines = value.split("\n");
+			remaining.push({
+				...textDraft.annotation,
+				end: {
+					x: textDraft.annotation.start.x + Math.max(...lines.map((line) => context.measureText(line).width)),
+					y: textDraft.annotation.start.y + lines.length * textDraft.fontSize * 1.4
+				},
+				text: value
+			});
+		}
+		options.onChange(remaining);
+		setTextDraft(null);
+	};
+	return {
+		beginText,
+		cancelText: () => setTextDraft(null),
+		commitText,
+		textDraft
+	};
+}
+//#endregion
+//#region src/feedback/ui/floating/use-details-popover.ts
+function useDetailsPopover() {
+	const [open, setOpen] = useState(false);
+	const [placement, setPlacement] = useState("above");
+	const [anchorLeft, setAnchorLeft] = useState(0);
+	const detailsRef = useRef(null);
+	const summaryRef = useRef(null);
+	useEffect(() => {
+		const reposition = () => {
+			const bounds = summaryRef.current?.getBoundingClientRect();
+			if (bounds && detailsRef.current?.open) {
+				setAnchorLeft(bounds.left);
+				setPlacement(bounds.bottom < window.innerHeight / 2 ? "below" : "above");
+			}
+		};
+		const dismissOutside = (event) => {
+			const details = detailsRef.current;
+			if (details?.open && !event.composedPath().includes(details)) setOpen(false);
+		};
+		const dismissWithEscape = (event) => {
+			if (event.key !== "Escape" || !detailsRef.current?.open) return;
+			event.preventDefault();
+			event.stopPropagation();
+			setOpen(false);
+			summaryRef.current?.focus();
+		};
+		document.addEventListener("pointerdown", dismissOutside);
+		document.addEventListener("keydown", dismissWithEscape, true);
+		window.addEventListener("resize", reposition);
+		return () => {
+			document.removeEventListener("pointerdown", dismissOutside);
+			document.removeEventListener("keydown", dismissWithEscape, true);
+			window.removeEventListener("resize", reposition);
+		};
+	}, []);
+	const show = () => {
+		const bounds = summaryRef.current?.getBoundingClientRect();
+		if (bounds) {
+			setAnchorLeft(bounds.left);
+			setPlacement(bounds.bottom < window.innerHeight / 2 ? "below" : "above");
+		}
+		setOpen(true);
+	};
+	return {
+		anchorLeft,
+		detailsProps: {
+			"data-placement": placement,
+			open,
+			ref: detailsRef
+		},
+		hide: () => {
+			setOpen(false);
+			summaryRef.current?.focus();
+		},
+		show,
+		summaryProps: {
+			onClick: (event) => {
+				event.preventDefault();
+				if (open) setOpen(false);
+				else show();
+			},
+			ref: summaryRef
+		}
+	};
+}
+//#endregion
+//#region src/feedback/ui/annotation/color-picker.tsx
+function ColorSpectrum({ selection, onChange }) {
+	const inputRef = useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "color-spectrum",
+		children: [/* @__PURE__ */ jsx("button", {
+			"aria-label": "Custom color",
+			onClick: () => inputRef.current?.click(),
+			title: "Custom color",
+			type: "button"
+		}), /* @__PURE__ */ jsx("input", {
+			"aria-hidden": "true",
+			onChange: (event) => onChange({
+				baseColor: event.target.value,
+				strengthPercent: 100
+			}),
+			ref: inputRef,
+			tabIndex: -1,
+			type: "color",
+			value: selection.baseColor
+		})]
+	});
+}
+function ColorControls({ selection, onChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "color-popover glass",
+		children: [/* @__PURE__ */ jsx(Slider.Root, {
+			className: "color-slider",
+			onValueChange: (strengthPercent) => onChange({
+				...selection,
+				strengthPercent
+			}),
+			value: selection.strengthPercent,
+			children: /* @__PURE__ */ jsx(Slider.Control, {
+				className: "color-slider-control",
+				children: /* @__PURE__ */ jsx(Slider.Track, {
+					className: "color-slider-track",
+					children: /* @__PURE__ */ jsx(Slider.Thumb, {
+						"aria-label": "Color strength",
+						className: "color-slider-thumb",
+						getAriaValueText: (_, value) => `${value}% color`
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsx(ColorSpectrum, {
+			onChange,
+			selection
+		})]
+	});
+}
+function ColorPicker({ selection, onChange }) {
+	const popover = useDetailsPopover();
+	const id = useId().replaceAll(":", "");
+	return /* @__PURE__ */ jsxs("details", {
+		className: "color-picker",
+		id,
+		...popover.detailsProps,
+		children: [
+			/* @__PURE__ */ jsx("style", { children: `[id="${id}"] { --rf-color-anchor: ${popover.anchorLeft}px; --annotation-color: ${annotationColorHex(selection)}; --annotation-base-color: ${selection.baseColor}; }` }),
+			/* @__PURE__ */ jsx("summary", {
+				"aria-label": "Annotation color",
+				className: "tool",
+				...popover.summaryProps,
+				title: "Annotation color",
+				children: /* @__PURE__ */ jsx("span", { className: "color-preview" })
+			}),
+			/* @__PURE__ */ jsx(ColorControls, {
+				onChange,
+				selection
+			})
+		]
+	});
+}
+//#endregion
+//#region src/feedback/ui/annotation/tool-menu.tsx
+const EXTRA_TOOLS = [
+	{
+		Icon: SpotlightIcon,
+		id: "spotlight",
+		label: "Spotlight"
+	},
+	{
+		Icon: PencilIcon,
+		id: "pen",
+		label: "Draw"
+	},
+	{
+		Icon: HighlightIcon,
+		id: "highlight",
+		label: "Highlight"
+	},
+	{
+		Icon: BlurIcon,
+		id: "blur",
+		label: "Hide"
+	}
+];
+function DrawingToolMenu({ drawing, editor, labels }) {
+	const popover = useDetailsPopover();
+	return /* @__PURE__ */ jsxs("details", {
+		className: "drawing-menu",
+		...popover.detailsProps,
+		children: [/* @__PURE__ */ jsx("summary", {
+			"aria-label": "More drawing tools",
+			className: "tool",
+			"data-selected": EXTRA_TOOLS.some(({ id }) => id === drawing.tool),
+			title: "More drawing tools",
+			...popover.summaryProps,
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "drawing-popover glass",
+			children: [
+				EXTRA_TOOLS.map(({ id, label, Icon }) => /* @__PURE__ */ jsxs("button", {
+					"aria-pressed": drawing.tool === id,
+					className: "drawing-option",
+					onClick: () => {
+						drawing.setTool(id);
+						popover.hide();
+					},
+					type: "button",
+					children: [/* @__PURE__ */ jsx(Icon, {}), label]
+				}, id)),
+				/* @__PURE__ */ jsx("div", { className: "drawing-divider" }),
+				/* @__PURE__ */ jsxs("button", {
+					className: "drawing-option",
+					disabled: editor.annotations.length === 0,
+					onClick: () => {
+						editor.onChange([]);
+						popover.hide();
+					},
+					type: "button",
+					children: [/* @__PURE__ */ jsx(TrashIcon, {}), labels.clearAnnotations]
+				}),
+				editor.onRetake && /* @__PURE__ */ jsxs("button", {
+					className: "drawing-option",
+					onClick: editor.onRetake,
+					type: "button",
+					children: [/* @__PURE__ */ jsx(CameraIcon, {}), labels.recapture]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/feedback/ui/annotation/toolbar.tsx
+const QUICK_TOOLS = [
+	{
+		Icon: SquareIcon,
+		id: "rectangle",
+		label: "Rectangle"
+	},
+	{
+		Icon: ArrowIcon,
+		id: "arrow",
+		label: "Arrow"
+	},
+	{
+		Icon: TextIcon,
+		id: "text",
+		label: "Text"
+	}
+];
+function AnnotationToolbar({ editor, labels, drawing }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "toolbar",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "group glass",
+			children: [QUICK_TOOLS.map(({ id, label, Icon }) => /* @__PURE__ */ jsx("button", {
+				"aria-label": label,
+				"aria-pressed": drawing.tool === id,
+				className: "tool",
+				onClick: () => drawing.setTool(id),
+				title: label,
+				type: "button",
+				children: /* @__PURE__ */ jsx(Icon, {})
+			}, id)), /* @__PURE__ */ jsx(DrawingToolMenu, {
+				drawing,
+				editor,
+				labels
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "group glass",
+			children: [
+				/* @__PURE__ */ jsx(ColorPicker, {
+					onChange: drawing.setColor,
+					selection: drawing.color
+				}),
+				/* @__PURE__ */ jsx("button", {
+					"aria-label": labels.undo,
+					className: "tool",
+					disabled: editor.annotations.length === 0,
+					onClick: () => editor.onChange(editor.annotations.slice(0, -1)),
+					title: labels.undo,
+					type: "button",
+					children: /* @__PURE__ */ jsx(UndoIcon, {})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					"aria-label": labels.done,
+					className: "done-btn",
+					onClick: editor.onDone,
+					title: labels.done,
+					type: "button",
+					children: /* @__PURE__ */ jsx(CheckIcon, { size: 18 })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/feedback/core/annotation-renderer.ts
+const STROKE_WIDTH = 3;
+const ARROW_HEAD_SIZE = 16;
+const HIGHLIGHT_ALPHA = .3;
+const REDACTION_FILL = "#111827";
+const PIXEL_BLOCK = 10;
+function scalePoint(point, scale) {
+	return {
+		x: point.x * scale,
+		y: point.y * scale
+	};
+}
+function scaleRect(rect, scale) {
+	return {
+		height: rect.height * scale,
+		width: rect.width * scale,
+		x: rect.x * scale,
+		y: rect.y * scale
+	};
+}
+function isCanvasElement(value) {
+	return typeof HTMLCanvasElement !== "undefined" && value instanceof HTMLCanvasElement;
+}
+/**
+* Downsamples the region and paints it back enlarged, so redacted pixels are
+* unrecoverable. Falls back to an opaque block wherever 2d canvases are absent.
+*/
+function redact(context, rect) {
+	const source = context.canvas;
+	const width = Math.max(1, Math.round(rect.width / PIXEL_BLOCK));
+	const height = Math.max(1, Math.round(rect.height / PIXEL_BLOCK));
+	if (isCanvasElement(source)) {
+		const offscreen = document.createElement("canvas");
+		offscreen.width = width;
+		offscreen.height = height;
+		const offscreenContext = offscreen.getContext("2d");
+		if (offscreenContext) {
+			offscreenContext.imageSmoothingEnabled = true;
+			offscreenContext.drawImage(source, rect.x, rect.y, rect.width, rect.height, 0, 0, width, height);
+			context.drawImage(offscreen, rect.x, rect.y, rect.width, rect.height);
+			return;
+		}
+	}
+	context.fillStyle = REDACTION_FILL;
+	context.fillRect(rect.x, rect.y, rect.width, rect.height);
+}
+function drawArrow(context, start, end, scale) {
+	context.beginPath();
+	context.moveTo(start.x, start.y);
+	context.lineTo(end.x, end.y);
+	context.stroke();
+	const [left, right] = arrowHead(start, end, ARROW_HEAD_SIZE * scale);
+	context.beginPath();
+	context.moveTo(end.x, end.y);
+	context.lineTo(left.x, left.y);
+	context.lineTo(right.x, right.y);
+	context.closePath();
+	context.fill();
+}
+function drawPen(context, points, scale) {
+	const [first, ...rest] = points;
+	if (!first) return;
+	const head = scalePoint(first, scale);
+	context.beginPath();
+	context.moveTo(head.x, head.y);
+	for (const point of rest) {
+		const scaled = scalePoint(point, scale);
+		context.lineTo(scaled.x, scaled.y);
+	}
+	context.stroke();
+}
+function drawSpotlight(context, rect) {
+	const { width, height } = context.canvas;
+	context.save();
+	context.fillStyle = REDACTION_FILL;
+	context.globalAlpha = .55;
+	context.fillRect(0, 0, width, rect.y);
+	context.fillRect(0, rect.y + rect.height, width, height - rect.y - rect.height);
+	context.fillRect(0, rect.y, rect.x, rect.height);
+	context.fillRect(rect.x + rect.width, rect.y, width - rect.x - rect.width, rect.height);
+	context.restore();
+	context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+}
+function drawAnnotation(context, annotation, scale) {
+	const { color, tool } = annotation;
+	const rect = scaleRect(normalizeRect(annotation.start, annotation.end), scale);
+	context.save();
+	context.lineWidth = STROKE_WIDTH * scale;
+	context.lineCap = "round";
+	context.lineJoin = "round";
+	context.strokeStyle = color;
+	context.fillStyle = color;
+	switch (tool) {
+		case "text": {
+			const lines = (annotation.text ?? "").split("\n");
+			const lineHeight = rect.height / lines.length;
+			context.font = `${lineHeight / 1.4}px ui-sans-serif, system-ui, sans-serif`;
+			context.textBaseline = "top";
+			for (const [index, line] of lines.entries()) context.fillText(line, rect.x, rect.y + index * lineHeight);
+			break;
+		}
+		case "pen":
+			drawPen(context, annotation.points ?? [], scale);
+			break;
+		case "arrow":
+			drawArrow(context, scalePoint(annotation.start, scale), scalePoint(annotation.end, scale), scale);
+			break;
+		case "spotlight":
+			drawSpotlight(context, rect);
+			break;
+		case "rectangle":
+			context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+			break;
+		case "highlight":
+			context.globalAlpha = HIGHLIGHT_ALPHA;
+			context.fillRect(rect.x, rect.y, rect.width, rect.height);
+			break;
+		default: redact(context, rect);
+	}
+	context.restore();
+}
+function drawAnnotations(context, annotations, options) {
+	const scale = options?.scale ?? 1;
+	for (const annotation of annotations) if (!isDegenerate(annotation)) drawAnnotation(context, annotation, scale);
+}
+function loadImage(url) {
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+		image.onload = () => resolve(image);
+		image.onerror = () => reject(/* @__PURE__ */ new Error("Screenshot could not be decoded"));
+		image.src = url;
+	});
+}
+/**
+* Burns the annotations into a copy of the capture so reviewers and agents see
+* the drawing without needing to replay the vector data.
+*/
+async function renderAnnotatedImage(source, annotations) {
+	if (annotations.length === 0) return null;
+	const canvas = document.createElement("canvas");
+	canvas.width = source.width;
+	canvas.height = source.height;
+	const context = canvas.getContext("2d");
+	if (!context) return null;
+	const image = await loadImage(source.objectUrl);
+	context.drawImage(image, 0, 0, source.width, source.height);
+	drawAnnotations(context, annotations);
+	return await capturedFromCanvas(canvas, source.width);
+}
+//#endregion
+//#region src/feedback/ui/annotation/use-annotation-canvas.ts
+function useAnnotationCanvas(capture, annotations) {
+	const canvasRef = useRef(null);
+	const [bitmap, setBitmap] = useState(null);
+	const [failedUrl, setFailedUrl] = useState(null);
+	useEffect(() => {
+		const image = new Image();
+		image.onload = () => setBitmap(image);
+		image.onerror = () => setFailedUrl(capture.objectUrl);
+		image.src = capture.objectUrl;
+		return () => {
+			image.onload = null;
+			image.onerror = null;
+		};
+	}, [capture.objectUrl]);
+	const isDecoded = bitmap?.src === capture.objectUrl;
 	useEffect(() => {
 		const canvas = canvasRef.current;
 		const context = canvas?.getContext("2d");
-		if (!(canvas && context)) return;
+		if (!(canvas && context && bitmap && isDecoded)) return;
 		context.clearRect(0, 0, canvas.width, canvas.height);
-		if (base) context.drawImage(base, 0, 0, canvas.width, canvas.height);
-		drawAnnotations(context, draft ? [...annotations, draft] : annotations);
+		context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+		drawAnnotations(context, annotations);
 	}, [
 		annotations,
-		base,
-		draft
+		bitmap,
+		isDecoded
 	]);
+	return {
+		canvasRef,
+		hasError: failedUrl === capture.objectUrl,
+		isDecoded
+	};
+}
+//#endregion
+//#region src/feedback/ui/annotation/use-image-morph.ts
+function prefersReducedMotion() {
+	return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function thumbnailFrame(frame, trigger) {
+	const destination = frame.getBoundingClientRect();
+	const thumbnail = trigger.getBoundingClientRect();
+	const scale = Math.max(thumbnail.width / destination.width, thumbnail.height / destination.height);
+	const insetX = (destination.width - thumbnail.width / scale) / 2;
+	return {
+		clipPath: `inset(0px ${insetX}px ${destination.height - thumbnail.height / scale}px ${insetX}px round ${Number.parseFloat(getComputedStyle(trigger).borderRadius) / scale}px)`,
+		transform: `translate(${thumbnail.x - destination.x - insetX * scale}px, ${thumbnail.y - destination.y}px) scale(${scale})`
+	};
+}
+function expandedFrame(visual) {
+	return {
+		clipPath: `inset(0px 0px 0px 0px round ${getComputedStyle(visual).borderRadius})`,
+		transform: "none"
+	};
+}
+const TIMING = {
+	duration: 340,
+	easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+};
+function useImageMorph(trigger, onDone) {
+	const frameRef = useRef(null);
+	const visualRef = useRef(null);
+	const entrance = useRef(null);
+	const exit = useRef(null);
+	const [isOpening, setIsOpening] = useState(false);
+	const [isClosing, setIsClosing] = useState(false);
+	useLayoutEffect(() => {
+		const frame = frameRef.current;
+		const visual = visualRef.current;
+		if (frame && visual?.animate && trigger && !prefersReducedMotion()) {
+			setIsOpening(true);
+			entrance.current = visual.animate([thumbnailFrame(frame, trigger), expandedFrame(visual)], TIMING);
+			entrance.current.finished.then(() => setIsOpening(false), () => void 0);
+		}
+		return () => {
+			entrance.current?.cancel();
+			exit.current?.cancel();
+		};
+	}, [trigger]);
+	const close = (action = onDone) => {
+		if (exit.current) return;
+		const frame = frameRef.current;
+		const visual = visualRef.current;
+		if (!(frame && visual?.animate && trigger) || prefersReducedMotion()) {
+			action();
+			return;
+		}
+		const current = entrance.current?.playState === "running" ? {
+			clipPath: getComputedStyle(visual).clipPath,
+			transform: getComputedStyle(visual).transform
+		} : expandedFrame(visual);
+		entrance.current?.cancel();
+		setIsClosing(true);
+		const animation = visual.animate([current, thumbnailFrame(frame, trigger)], {
+			...TIMING,
+			duration: 260,
+			fill: "forwards"
+		});
+		exit.current = animation;
+		animation.finished.then(action, () => void 0);
+	};
+	return {
+		close,
+		frameRef,
+		isClosing,
+		isOpening,
+		visualRef
+	};
+}
+//#endregion
+//#region src/feedback/ui/annotator.tsx
+function toImagePoint(canvas, clientX, clientY) {
+	const bounds = canvas.getBoundingClientRect();
+	return {
+		x: Math.max(0, Math.min(canvas.width, (clientX - bounds.left) / bounds.width * canvas.width)),
+		y: Math.max(0, Math.min(canvas.height, (clientY - bounds.top) / bounds.height * canvas.height))
+	};
+}
+function Annotator({ capture, labels, editor }) {
+	const { annotations, onChange, onDone, onRetake } = editor;
+	const morph = useImageMorph(editor.trigger, onDone);
+	const dialogRef = useRef(null);
+	const [tool, setTool] = useState("rectangle");
+	const [colorSelection, setColorSelection] = useState(DEFAULT_ANNOTATION_COLOR);
+	const color = annotationColorHex(colorSelection);
+	const [draft, setDraft] = useState(null);
+	const { canvasRef, hasError, isDecoded } = useAnnotationCanvas(capture, draft ? [...annotations, draft] : annotations);
+	const text = useTextAnnotation({
+		annotations,
+		color,
+		onChange
+	});
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		dialog?.showModal();
+		return () => dialog?.close();
+	}, []);
 	const onPointerDown = (event) => {
 		const canvas = canvasRef.current;
-		if (!canvas) return;
-		canvas.setPointerCapture(event.pointerId);
+		if (!(canvas && isDecoded) || event.button !== 0) return;
 		const point = toImagePoint(canvas, event.clientX, event.clientY);
-		nextId.current += 1;
+		if (tool === "text") {
+			event.preventDefault();
+			text.beginText(canvas, point);
+			return;
+		}
+		canvas.setPointerCapture(event.pointerId);
 		setDraft({
 			color,
 			end: point,
-			id: `a${nextId.current}`,
+			id: crypto.randomUUID(),
 			points: tool === "pen" ? [point] : void 0,
 			start: point,
 			tool
@@ -1107,100 +1781,83 @@ function Annotator({ annotations, capture, labels, onChange, onDone }) {
 		if (!isDegenerate(draft)) onChange([...annotations, draft]);
 		setDraft(null);
 	};
-	useEffect(() => {
-		const onKeyDown = (event) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
-				onDone();
-			}
-		};
-		document.addEventListener("keydown", onKeyDown);
-		return () => document.removeEventListener("keydown", onKeyDown);
-	}, [onDone]);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs("dialog", {
+		"aria-label": labels.annotateHint,
 		className: "overlay",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "editor",
-			children: /* @__PURE__ */ jsx("canvas", {
-				height: capture.height,
-				onPointerCancel: onPointerUp,
-				onPointerDown,
-				onPointerMove,
-				onPointerUp,
-				ref: canvasRef,
-				width: capture.width
-			})
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "toolbar",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "group",
-					children: TOOLS.map(({ icon: Icon, id, label }) => /* @__PURE__ */ jsx("button", {
-						"aria-label": label,
-						"aria-pressed": tool === id,
-						className: "tool",
-						onClick: () => setTool(id),
-						title: label,
-						type: "button",
-						children: /* @__PURE__ */ jsx(Icon, {})
-					}, id))
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "group",
-					children: ANNOTATION_COLORS.map((value) => /* @__PURE__ */ jsx("button", {
-						"aria-label": `Color ${value}`,
-						"aria-pressed": color === value,
-						className: "swatch",
-						onClick: () => setColor(value),
-						style: { background: value },
-						type: "button"
-					}, value))
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "group",
-					children: [
-						/* @__PURE__ */ jsx("button", {
-							"aria-label": labels.undo,
-							className: "tool",
-							disabled: annotations.length === 0,
-							onClick: () => onChange(annotations.slice(0, -1)),
-							title: labels.undo,
-							type: "button",
-							children: /* @__PURE__ */ jsx(UndoIcon, {})
-						}),
-						/* @__PURE__ */ jsx("button", {
-							"aria-label": labels.clearAnnotations,
-							className: "tool",
-							disabled: annotations.length === 0,
-							onClick: () => onChange([]),
-							title: labels.clearAnnotations,
-							type: "button",
-							children: /* @__PURE__ */ jsx(TrashIcon, {})
-						}),
-						/* @__PURE__ */ jsx("button", {
-							className: "done-btn",
-							onClick: onDone,
-							type: "button",
-							children: labels.done
-						})
-					]
+		"data-closing": morph.isClosing,
+		"data-opening": morph.isOpening,
+		onCancel: (event) => {
+			event.preventDefault();
+			morph.close();
+		},
+		ref: dialogRef,
+		children: [
+			hasError && /* @__PURE__ */ jsx("p", {
+				className: "error",
+				role: "alert",
+				children: labels.captureFailed
+			}),
+			/* @__PURE__ */ jsx("style", { children: `.editor-image { --rf-capture-ratio: ${capture.width / capture.height}; }` }),
+			/* @__PURE__ */ jsx("div", {
+				className: "editor",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "editor-image",
+					ref: morph.frameRef,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "editor-visual",
+						ref: morph.visualRef,
+						children: [/* @__PURE__ */ jsx("img", {
+							alt: "",
+							height: capture.height,
+							src: capture.objectUrl,
+							width: capture.width
+						}), /* @__PURE__ */ jsx("canvas", {
+							"data-tool": tool,
+							height: capture.height,
+							onPointerCancel: () => setDraft(null),
+							onPointerDown,
+							onPointerMove,
+							onPointerUp,
+							ref: canvasRef,
+							width: capture.width
+						})]
+					})
 				})
-			]
-		})]
+			}),
+			text.textDraft && /* @__PURE__ */ jsx(TextAnnotationEditor, {
+				draft: text.textDraft,
+				onCancel: text.cancelText,
+				onCommit: (value) => {
+					if (canvasRef.current) text.commitText(canvasRef.current, value);
+				}
+			}, text.textDraft.annotation.id),
+			/* @__PURE__ */ jsx(AnnotationToolbar, {
+				drawing: {
+					color: colorSelection,
+					setColor: setColorSelection,
+					setTool,
+					tool
+				},
+				editor: {
+					annotations,
+					onChange,
+					onDone: () => morph.close(),
+					onRetake: onRetake ? () => morph.close(onRetake) : void 0
+				},
+				labels
+			})
+		]
 	});
 }
 //#endregion
 //#region src/feedback/ui/launcher.tsx
-/**
-* Never changes size between states — the panel opening must not move the
-* button out from under the pointer.
-*/
-function Launcher({ isOpen, label, onClick }) {
+function Launcher({ isOpen, label, onClick, buttonRef }) {
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-expanded": isOpen,
-		className: "launcher",
+		className: "launcher glass",
 		"data-open": isOpen,
 		onClick,
+		ref: buttonRef,
 		type: "button",
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "launcher-icon",
@@ -1209,271 +1866,571 @@ function Launcher({ isOpen, label, onClick }) {
 	});
 }
 //#endregion
-//#region src/feedback/ui/panel.tsx
-const CATEGORY_META = {
-	bug: {
-		icon: BugIcon,
-		labelKey: "categoryBug"
-	},
-	idea: {
-		icon: IdeaIcon,
-		labelKey: "categoryIdea"
-	},
-	question: {
-		icon: QuestionIcon,
-		labelKey: "categoryQuestion"
-	}
-};
-function Attachment({ labels, state }) {
-	if (state.isCapturing) return /* @__PURE__ */ jsxs("div", {
-		className: "card",
-		children: [/* @__PURE__ */ jsx("div", { className: "thumb" }), /* @__PURE__ */ jsxs("div", {
-			className: "meta",
-			children: [/* @__PURE__ */ jsx("strong", { children: labels.retakeHint }), /* @__PURE__ */ jsx("span", { children: "…" })]
-		})]
-	});
-	if (!state.capture) return /* @__PURE__ */ jsxs("button", {
-		className: "ghost-btn",
-		onClick: () => state.takeCapture(),
-		type: "button",
-		children: [/* @__PURE__ */ jsx(CameraIcon, {}), labels.attachScreenshot]
-	});
-	const annotationCount = state.annotations.length;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "card",
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "thumb",
-				children: /* @__PURE__ */ jsx("img", {
-					alt: "",
-					height: state.capture.height,
-					src: state.capture.objectUrl,
-					width: state.capture.width
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "meta",
-				children: [/* @__PURE__ */ jsx("strong", {
-					className: "truncate",
-					children: labels.retakeHint
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "truncate",
-					children: [
-						state.capture.width,
-						"×",
-						state.capture.height,
-						annotationCount > 0 ? ` · ${annotationCount} marks` : ""
-					]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "actions",
+//#region src/feedback/ui/annotation/screenshot-preview.tsx
+function ScreenshotPreview({ annotations, capture }) {
+	const { canvasRef } = useAnnotationCanvas(capture, annotations);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("img", {
+		alt: "",
+		draggable: false,
+		height: capture.height,
+		src: capture.objectUrl,
+		width: capture.width
+	}), annotations.length > 0 && /* @__PURE__ */ jsx("canvas", {
+		height: capture.height,
+		ref: canvasRef,
+		width: capture.width
+	})] });
+}
+//#endregion
+//#region src/feedback/ui/composer/screenshot-card.tsx
+function ScreenshotCard({ item, labels, state }) {
+	const { draft, number, multiple } = item;
+	const isCapturing = state.pendingCapture?.id === draft.id;
+	const disabled = state.isEditingDisabled || state.isCapturing;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"aria-label": `${labels.screenshot} ${number}`,
+		className: "screenshot-attachment glass",
+		children: [/* @__PURE__ */ jsxs("button", {
+			"aria-label": labels.annotateHint,
+			className: "screenshot-preview",
+			disabled,
+			onClick: (event) => state.annotateScreenshot(draft.id, event.currentTarget),
+			type: "button",
+			children: [/* @__PURE__ */ jsx(ScreenshotPreview, {
+				annotations: draft.annotations,
+				capture: draft.image
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "attachment-caption glass",
 				children: [
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": labels.annotateHint,
-						className: "icon-btn",
-						onClick: () => state.setStep("annotate"),
-						title: labels.annotateHint,
-						type: "button",
-						children: /* @__PURE__ */ jsx(PencilIcon, {})
+					/* @__PURE__ */ jsx(PencilIcon, {}),
+					/* @__PURE__ */ jsx("span", {
+						className: "attachment-caption-label",
+						children: labels.screenshot
 					}),
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": labels.recapture,
-						className: "icon-btn",
-						onClick: () => state.takeCapture(),
-						title: labels.recapture,
-						type: "button",
-						children: /* @__PURE__ */ jsx(CameraIcon, {})
-					}),
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": labels.removeScreenshot,
-						className: "icon-btn",
-						onClick: state.removeCapture,
-						title: labels.removeScreenshot,
-						type: "button",
-						children: /* @__PURE__ */ jsx(TrashIcon, {})
+					multiple && /* @__PURE__ */ jsx("span", { children: number }),
+					draft.annotations.length > 0 && /* @__PURE__ */ jsx("span", {
+						className: "annotation-count",
+						children: draft.annotations.length
 					})
 				]
-			})
-		]
+			})]
+		}), isCapturing ? /* @__PURE__ */ jsxs("div", {
+			className: "capture-progress glass",
+			role: "status",
+			children: [/* @__PURE__ */ jsx("span", { className: "spinner" }), labels.capturing]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "attachment-actions glass",
+			children: [/* @__PURE__ */ jsx("button", {
+				"aria-label": labels.recapture,
+				className: "icon-btn",
+				disabled,
+				onClick: () => state.retakeCapture(draft.id),
+				title: labels.recapture,
+				type: "button",
+				children: /* @__PURE__ */ jsx(CameraIcon, {})
+			}), /* @__PURE__ */ jsx("button", {
+				"aria-label": labels.removeScreenshot,
+				className: "icon-btn",
+				disabled,
+				onClick: () => state.removeCapture(draft.id),
+				title: labels.removeScreenshot,
+				type: "button",
+				children: /* @__PURE__ */ jsx(TrashIcon, {})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/feedback/ui/composer/attachments.tsx
+function SelectedElement({ labels, state }) {
+	if (!state.selection) return null;
+	const component = state.selection.componentStack[0];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "selection-chip glass",
+		children: [/* @__PURE__ */ jsxs("button", {
+			"aria-label": labels.pickElement,
+			className: "selection-label",
+			disabled: state.isEditingDisabled || state.isCapturing,
+			onClick: () => state.setStep("picking"),
+			title: state.selection.sourceLocation ?? state.selection.selector,
+			type: "button",
+			children: [state.elementCapture ? /* @__PURE__ */ jsx("img", {
+				alt: "",
+				height: 32,
+				src: state.elementCapture.objectUrl,
+				width: 32
+			}) : /* @__PURE__ */ jsx(TargetIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: component ? `<${component}>` : state.selection.label
+			})]
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": labels.clearSelection,
+			className: "icon-btn",
+			disabled: state.isEditingDisabled || state.isCapturing,
+			onClick: state.clearSelection,
+			type: "button",
+			children: /* @__PURE__ */ jsx(CloseIcon, {})
+		})]
 	});
 }
-/** Shows the reporter exactly what will be sent about the element they picked. */
-function Selection({ labels, state }) {
-	const { elementCapture, selection } = state;
-	if (!selection) return /* @__PURE__ */ jsxs("button", {
-		className: "ghost-btn",
-		onClick: () => state.setStep("picking"),
-		type: "button",
-		children: [/* @__PURE__ */ jsx(TargetIcon, {}), labels.pickElement]
-	});
-	const component = selection.componentStack[0];
+function Attachments({ labels, state }) {
+	const stripRef = useRef(null);
+	const count = state.screenshots.length;
+	useEffect(() => {
+		const strip = stripRef.current;
+		if (strip && count > 0) strip.scrollTo?.({ left: strip.scrollWidth });
+	}, [count]);
+	const isAdding = state.pendingCapture && !state.screenshots.some(({ id }) => id === state.pendingCapture?.id);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "card",
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "thumb contain",
-				children: elementCapture && /* @__PURE__ */ jsx("img", {
-					alt: "",
-					height: elementCapture.height,
-					src: elementCapture.objectUrl,
-					width: elementCapture.width
+		className: "attachments",
+		children: [/* @__PURE__ */ jsx(SelectedElement, {
+			labels,
+			state
+		}), /* @__PURE__ */ jsxs(ScrollArea.Root, {
+			className: "screenshot-scroll-area",
+			children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				"aria-label": labels.screenshot,
+				className: "screenshot-strip",
+				ref: stripRef,
+				role: "region",
+				children: /* @__PURE__ */ jsxs(ScrollArea.Content, {
+					className: "screenshot-strip-content",
+					children: [state.screenshots.map((draft, index) => /* @__PURE__ */ jsx(ScreenshotCard, {
+						item: {
+							draft,
+							multiple: count > 1,
+							number: index + 1
+						},
+						labels,
+						state
+					}, draft.id)), isAdding && /* @__PURE__ */ jsxs("div", {
+						"aria-label": labels.capturing,
+						className: "attachment-skeleton glass",
+						role: "status",
+						children: [/* @__PURE__ */ jsx(CameraIcon, {}), /* @__PURE__ */ jsx("span", { children: labels.capturing })]
+					})]
 				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "meta",
-				children: [/* @__PURE__ */ jsx("strong", {
-					className: "truncate",
-					children: component ? `<${component}>` : selection.label
-				}), /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: selection.region ?? selection.sourceLocation ?? selection.selector
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "actions",
-				children: [/* @__PURE__ */ jsx("button", {
+			}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+				className: "screenshot-scrollbar",
+				orientation: "horizontal",
+				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "screenshot-scroll-thumb" })
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/feedback/ui/composer/options.tsx
+function ComposerOptions({ labels, state }) {
+	const popover = useDetailsPopover();
+	const [emailInvalid, setEmailInvalid] = useState(false);
+	return /* @__PURE__ */ jsxs("details", {
+		className: "composer-options",
+		...popover.detailsProps,
+		children: [/* @__PURE__ */ jsx("summary", {
+			"aria-label": labels.moreOptions,
+			className: "icon-btn",
+			...popover.summaryProps,
+			title: labels.moreOptions,
+			children: /* @__PURE__ */ jsx(MoreIcon, {})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "options-popover glass",
+			children: [
+				state.isAnonymous && /* @__PURE__ */ jsxs("label", {
+					className: "email-field",
+					children: [
+						labels.emailLabel,
+						/* @__PURE__ */ jsx("input", {
+							"aria-invalid": emailInvalid,
+							"aria-label": labels.emailLabel,
+							autoComplete: "email",
+							disabled: state.isEditingDisabled,
+							onChange: (event) => {
+								setEmailInvalid(false);
+								state.setEmail(event.target.value);
+							},
+							onInvalid: (event) => {
+								event.preventDefault();
+								setEmailInvalid(true);
+								popover.show();
+								const input = event.currentTarget;
+								requestAnimationFrame(() => input.focus());
+							},
+							placeholder: labels.emailPlaceholder,
+							type: "email",
+							value: state.email
+						}),
+						emailInvalid && /* @__PURE__ */ jsx("span", {
+							role: "alert",
+							children: labels.emailInvalid
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					className: "ghost-btn",
+					disabled: state.isSubmitting,
+					onClick: state.close,
+					type: "button",
+					children: [/* @__PURE__ */ jsx(CloseIcon, {}), labels.cancel]
+				}),
+				state.canDismiss && /* @__PURE__ */ jsx("button", {
+					className: "dismiss-btn",
+					disabled: state.isSubmitting,
+					onClick: state.dismiss,
+					type: "button",
+					children: labels.dismissForDays.replace("{days}", String(state.dismissForDays))
+				}),
+				/* @__PURE__ */ jsxs("a", {
+					className: "version-info",
+					href: "https://reflet.app",
+					rel: "noopener noreferrer",
+					target: "_blank",
+					children: ["Reflet SDK ", SDK_VERSION]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/feedback/ui/composer/controls.tsx
+const CATEGORY_LABELS = {
+	bug: "categoryBug",
+	idea: "categoryIdea",
+	question: "categoryQuestion"
+};
+function ComposerControls({ options, labels, state }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "composer-toolbar",
+		children: [options.floatingControls, /* @__PURE__ */ jsxs("div", {
+			className: "composer-controls glass",
+			children: [
+				options.categories.length > 1 && /* @__PURE__ */ jsxs("span", {
+					className: "select-control",
+					children: [/* @__PURE__ */ jsx("select", {
+						"aria-label": labels.categoryLabel,
+						className: "category-select",
+						disabled: state.isEditingDisabled,
+						onChange: (event) => {
+							const category = options.categories.find((value) => value === event.target.value);
+							if (category) state.setCategory(category);
+						},
+						value: state.category,
+						children: options.categories.map((value) => /* @__PURE__ */ jsx("option", {
+							value,
+							children: labels[CATEGORY_LABELS[value]]
+						}, value))
+					}), /* @__PURE__ */ jsx(ChevronDownIcon, {})]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					"aria-label": labels.attachScreenshot,
+					className: "icon-btn",
+					disabled: state.isCapturing || state.isEditingDisabled,
+					onClick: state.takeCapture,
+					title: labels.attachScreenshot,
+					type: "button",
+					children: /* @__PURE__ */ jsx(CameraIcon, {})
+				}),
+				/* @__PURE__ */ jsx("button", {
 					"aria-label": labels.pickElement,
 					className: "icon-btn",
+					disabled: state.isEditingDisabled || state.isCapturing,
 					onClick: () => state.setStep("picking"),
 					title: labels.pickElement,
 					type: "button",
 					children: /* @__PURE__ */ jsx(TargetIcon, {})
-				}), /* @__PURE__ */ jsx("button", {
-					"aria-label": labels.cancel,
-					className: "icon-btn",
-					onClick: state.clearSelection,
-					title: labels.cancel,
-					type: "button",
-					children: /* @__PURE__ */ jsx(CloseIcon, {})
-				})]
-			})
-		]
+				}),
+				/* @__PURE__ */ jsx(ComposerOptions, {
+					labels,
+					state
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/feedback/ui/composer/message-input.tsx
+function MessageInput({ labels, state }) {
+	const [expanded, setExpanded] = useState(false);
+	const submitLabel = state.hasPendingAttachments ? labels.retryAttachments : labels.submit;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "message-row glass",
+		"data-expanded": expanded,
+		children: [/* @__PURE__ */ jsx("textarea", {
+			"aria-label": labels.descriptionPlaceholder,
+			disabled: state.isEditingDisabled,
+			maxLength: 4e3,
+			onChange: (event) => state.setMessage(event.target.value),
+			onFocus: () => setExpanded(true),
+			placeholder: labels.descriptionPlaceholder,
+			rows: expanded ? 3 : 1,
+			value: state.message
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-busy": state.isSubmitting,
+			"aria-label": submitLabel,
+			className: "submit",
+			disabled: state.isSubmitting || state.isCapturing || !state.message.trim(),
+			title: submitLabel,
+			type: "submit",
+			children: state.isSubmitting ? /* @__PURE__ */ jsx("span", { className: "spinner" }) : /* @__PURE__ */ jsx(ArrowIcon, {})
+		})]
 	});
 }
-function FeedbackPanel({ categories, labels, state }) {
-	const messageRef = useRef(null);
+//#endregion
+//#region src/feedback/ui/panel.tsx
+function FeedbackPanel({ options, labels, state }) {
+	const panelRef = useRef(null);
 	useEffect(() => {
-		messageRef.current?.focus();
+		panelRef.current?.focus();
 	}, []);
-	if (state.step === "success") return /* @__PURE__ */ jsx("section", {
+	if (state.step === "success") return /* @__PURE__ */ jsxs("section", {
 		"aria-live": "polite",
 		className: "panel",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "done",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "done success-panel glass",
 			children: [
 				/* @__PURE__ */ jsx(CheckIcon, {}),
 				/* @__PURE__ */ jsx("h2", { children: labels.successTitle }),
 				/* @__PURE__ */ jsx("p", { children: labels.successMessage })
 			]
-		})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "composer-toolbar",
+			children: options.floatingControls
+		})]
 	});
 	return /* @__PURE__ */ jsxs("section", {
 		"aria-label": labels.title,
 		className: "panel",
-		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: "head",
-				children: [
-					/* @__PURE__ */ jsx("h2", { children: labels.title }),
-					/* @__PURE__ */ jsx("span", { className: "spacer" }),
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": labels.cancel,
+		ref: panelRef,
+		tabIndex: -1,
+		children: [/* @__PURE__ */ jsx(Attachments, {
+			labels,
+			state
+		}), /* @__PURE__ */ jsxs("form", {
+			className: "composer",
+			onSubmit: (event) => {
+				event.preventDefault();
+				state.submit();
+			},
+			children: [
+				/* @__PURE__ */ jsx(MessageInput, {
+					labels,
+					state
+				}),
+				/* @__PURE__ */ jsx(ComposerControls, {
+					labels,
+					options,
+					state
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "hp",
+					children: /* @__PURE__ */ jsx("input", {
+						autoComplete: "off",
+						name: "company-website",
+						onChange: (event) => state.setHoneypot(event.target.value),
+						tabIndex: -1,
+						value: state.honeypot
+					})
+				}),
+				state.error && /* @__PURE__ */ jsx("p", {
+					className: "error glass",
+					role: "alert",
+					children: state.error
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/feedback/ui/floating/use-floating-position.ts
+const EDGE_GAP = 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 visibleViewport() {
+	const viewport = window.visualViewport;
+	const left = viewport?.offsetLeft ?? 0;
+	const top = viewport?.offsetTop ?? 0;
+	const width = viewport?.width ?? window.innerWidth;
+	const height = viewport?.height ?? window.innerHeight;
+	return {
+		bottom: window.innerHeight - top - height,
+		height,
+		left,
+		right: window.innerWidth - left - width,
+		top,
+		width
+	};
+}
+function clampPosition(point, bounds, viewport = visibleViewport()) {
+	return {
+		x: Math.max(viewport.left + EDGE_GAP, Math.min(point.x, viewport.left + viewport.width - bounds.width - EDGE_GAP)),
+		y: Math.max(viewport.top + EDGE_GAP, Math.min(point.y, viewport.top + viewport.height - bounds.height - EDGE_GAP))
+	};
+}
+function useFloatingPosition(corner = "bottom-right") {
+	const rootRef = useRef(null);
+	const gesture = useRef(null);
+	const [position, setPosition] = useState(null);
+	const [viewport, setViewport] = useState(visibleViewport);
+	const horizontalEdge = corner.endsWith("right") ? "right" : "left";
+	const verticalEdge = corner.startsWith("bottom") ? "bottom" : "top";
+	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 resizeViewport = () => setViewport(visibleViewport());
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(keepInViewport);
+		if (rootRef.current) observer?.observe(rootRef.current);
+		window.addEventListener("resize", resizeViewport);
+		window.visualViewport?.addEventListener("resize", resizeViewport);
+		window.visualViewport?.addEventListener("scroll", resizeViewport);
+		return () => {
+			observer?.disconnect();
+			window.removeEventListener("resize", resizeViewport);
+			window.visualViewport?.removeEventListener("resize", resizeViewport);
+			window.visualViewport?.removeEventListener("scroll", resizeViewport);
+		};
+	}, [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();
+		if (bounds && gesture.current) moveTo({
+			x: event.clientX - gesture.current.x,
+			y: event.clientY - gesture.current.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,
+			onPointerCancel: () => {
+				gesture.current = null;
+			},
+			onPointerDown,
+			onPointerMove,
+			onPointerUp: () => {
+				gesture.current = null;
+			}
+		},
+		position,
+		rootRef,
+		styles: viewportStyles + anchorStyles
+	};
+}
+//#endregion
+//#region src/feedback/ui/floating/floating-widget.tsx
+function FloatingWidget({ labels, options, state }) {
+	const [minimized, setMinimized] = useState(false);
+	const launcherRef = useRef(null);
+	const floating = useFloatingPosition(options.position);
+	const showPanel = state.isOpen && !minimized;
+	const minimize = () => {
+		setMinimized(true);
+		requestAnimationFrame(() => launcherRef.current?.focus());
+	};
+	useEffect(() => {
+		if (state.step === "compose") state.annotationTrigger?.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());
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [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": options.position,
+		ref: floating.rootRef,
+		children: [/* @__PURE__ */ jsx("style", { children: floating.styles }), showPanel ? /* @__PURE__ */ jsx(FeedbackPanel, {
+			labels,
+			options: {
+				categories: options.categories,
+				floatingControls: /* @__PURE__ */ jsxs("div", {
+					className: "floating-controls glass",
+					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: state.close,
+						onClick: minimize,
+						title: labels.minimize,
 						type: "button",
-						children: /* @__PURE__ */ jsx(CloseIcon, {})
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("form", {
-				className: "body",
-				onSubmit: (event) => {
-					event.preventDefault();
-					state.submit();
-				},
-				children: [
-					categories.length > 1 && /* @__PURE__ */ jsx("fieldset", {
-						className: "segmented",
-						children: categories.map((value) => {
-							const { icon: Icon, labelKey } = CATEGORY_META[value];
-							return /* @__PURE__ */ jsxs("button", {
-								"aria-pressed": state.category === value,
-								onClick: () => state.setCategory(value),
-								type: "button",
-								children: [/* @__PURE__ */ jsx(Icon, {}), labels[labelKey]]
-							}, value);
-						})
-					}),
-					/* @__PURE__ */ jsx("textarea", {
-						"aria-label": labels.descriptionPlaceholder,
-						maxLength: 4e3,
-						onChange: (event) => state.setMessage(event.target.value),
-						placeholder: labels.descriptionPlaceholder,
-						ref: messageRef,
-						value: state.message
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "attachments",
-						children: [/* @__PURE__ */ jsx(Attachment, {
-							labels,
-							state
-						}), /* @__PURE__ */ jsx(Selection, {
-							labels,
-							state
-						})]
-					}),
-					state.isAnonymous && /* @__PURE__ */ jsx("input", {
-						"aria-label": labels.emailLabel,
-						autoComplete: "email",
-						onChange: (event) => state.setEmail(event.target.value),
-						placeholder: labels.emailPlaceholder,
-						type: "email",
-						value: state.email
-					}),
-					/* @__PURE__ */ jsx("div", {
-						"aria-hidden": "true",
-						className: "hp",
-						children: /* @__PURE__ */ jsx("input", {
-							autoComplete: "off",
-							name: "company-website",
-							onChange: (event) => state.setHoneypot(event.target.value),
-							tabIndex: -1,
-							value: state.honeypot
-						})
-					}),
-					state.error && /* @__PURE__ */ jsx("p", {
-						className: "error",
-						children: state.error
-					}),
-					/* @__PURE__ */ jsx("button", {
-						className: "submit",
-						disabled: state.isSubmitting || !state.message.trim(),
-						type: "submit",
-						children: state.isSubmitting ? /* @__PURE__ */ jsx("span", { className: "spinner" }) : labels.submit
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("footer", {
-				className: "footer",
-				"data-dismissible": state.canDismiss,
-				children: [state.canDismiss && /* @__PURE__ */ jsx("button", {
-					className: "dismiss-btn",
-					onClick: state.dismiss,
-					type: "button",
-					children: labels.dismissForDays.replace("{days}", String(state.dismissForDays))
-				}), /* @__PURE__ */ jsxs("span", { children: [
-					"Powered by",
-					" ",
-					/* @__PURE__ */ jsx("a", {
-						href: "https://reflet.app",
-						rel: "noopener noreferrer",
-						target: "_blank",
-						children: "Reflet"
-					})
-				] })]
-			})
-		]
+						children: /* @__PURE__ */ jsx(MinusIcon, {})
+					})]
+				})
+			},
+			state
+		}) : /* @__PURE__ */ jsx(Launcher, {
+			buttonRef: launcherRef,
+			isOpen: false,
+			label: state.isOpen ? labels.resume : labels.trigger,
+			onClick: () => {
+				setMinimized(false);
+				if (!state.isOpen) state.open();
+			}
+		})]
 	});
 }
 //#endregion
@@ -1580,29 +2537,30 @@ function ElementPicker({ hint, onCancel, onPick }) {
 }
 //#endregion
 //#region src/feedback/ui/styles.ts
-/**
-* Styles for the feedback widget. Injected into a shadow root, so nothing here
-* leaks into the host app and nothing from the host app leaks in.
-*/
 const WIDGET_STYLES = `
 :host {
+  --rf-offset: 20px;
   --rf-bg: #ffffff;
   --rf-bg-subtle: rgb(55 53 47 / 4%);
   --rf-bg-hover: rgb(55 53 47 / 7%);
   --rf-border: rgb(55 53 47 / 9%);
   --rf-text: #37352f;
-  --rf-text-muted: rgb(55 53 47 / 55%);
+  --rf-text-muted: rgb(55 53 47 / 68%);
   --rf-primary: #37352f;
   --rf-primary-text: #ffffff;
   --rf-accent: #2383e2;
   --rf-danger: #d44c47;
   --rf-success: #448361;
-  --rf-radius: 12px;
+  --rf-radius: 20px;
+  --rf-pill: 999px;
+  --rf-width: 360px;
+  --rf-glass: rgb(255 255 255 / 72%);
+  --rf-glass-highlight: rgb(255 255 255 / 90%);
+  --rf-glass-stroke: rgb(255 255 255 / 70%);
   --rf-radius-sm: 8px;
   --rf-shadow-inset: inset 0 0 0 1px var(--rf-border);
   --rf-shadow-low: 0 0 0 1px rgb(15 15 15 / 4%), 0 1px 2px rgb(15 15 15 / 6%), 0 4px 10px -4px rgb(15 15 15 / 10%);
   --rf-shadow: 0 0 0 1px rgb(15 15 15 / 4%), 0 2px 5px -1px rgb(15 15 15 / 7%), 0 12px 32px -8px rgb(15 15 15 / 16%);
-  --rf-ring: 0 0 0 3px color-mix(in srgb, var(--rf-accent) 20%, transparent);
   --rf-ease: cubic-bezier(0.16, 1, 0.3, 1);
   color-scheme: light;
   all: initial;
@@ -1611,347 +2569,258 @@ const WIDGET_STYLES = `
 
 :host([data-theme="dark"]) {
   --rf-bg: #202020;
-  --rf-bg-subtle: rgb(255 255 255 / 5%);
-  --rf-bg-hover: rgb(255 255 255 / 9%);
-  --rf-border: rgb(255 255 255 / 9%);
-  --rf-text: #ebeae8;
-  --rf-text-muted: rgb(255 255 255 / 46%);
-  --rf-primary: #f1efec;
-  --rf-primary-text: #1c1c1b;
-  --rf-accent: #529cca;
-  --rf-danger: #eb5757;
-  --rf-success: #4dab74;
-  --rf-shadow-low: 0 0 0 1px rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 30%), 0 4px 10px -4px rgb(0 0 0 / 40%);
-  --rf-shadow: 0 0 0 1px rgb(255 255 255 / 7%), 0 2px 5px -1px rgb(0 0 0 / 35%), 0 14px 36px -10px rgb(0 0 0 / 55%);
-  color-scheme: dark;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-.root {
-  position: fixed;
-  z-index: 2147483000;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  font-family: inherit;
-  font-size: 13.5px;
-  line-height: 1.45;
-  color: var(--rf-text);
-}
-
-.root[data-position$="right"] { right: var(--rf-offset); align-items: flex-end; }
-.root[data-position$="left"] { left: var(--rf-offset); align-items: flex-start; }
-.root[data-position^="bottom"] { bottom: var(--rf-offset); }
-.root[data-position^="top"] { top: var(--rf-offset); flex-direction: column-reverse; }
-
-button {
-  font: inherit;
-  color: inherit;
-  margin: 0;
-  cursor: pointer;
-  border: 0;
-  background: none;
-}
-
-:focus-visible { outline: none; box-shadow: var(--rf-ring); }
-
-.launcher {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 32px;
-  padding: 0 11px;
-  border-radius: var(--rf-radius-sm);
-  background: var(--rf-primary);
-  color: var(--rf-primary-text);
-  font-size: 13px;
-  font-weight: 500;
-  letter-spacing: -0.005em;
-  box-shadow: var(--rf-shadow-low);
-  transition: transform 240ms var(--rf-ease), box-shadow 240ms var(--rf-ease), opacity 160ms var(--rf-ease);
-}
-.launcher:hover { transform: translateY(-1px); box-shadow: var(--rf-shadow); }
-.launcher:active { transform: translateY(0) scale(0.98); }
-
-.launcher-icon { position: relative; width: 15px; height: 15px; flex: none; }
-.launcher-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 200ms var(--rf-ease), transform 320ms var(--rf-ease); }
-.launcher-icon .on-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
-.launcher[data-open="true"] .on-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
-.launcher[data-open="true"] .on-close { opacity: 1; transform: none; }
-
-.panel {
-  width: min(352px, calc(100vw - 24px));
-  max-height: min(600px, calc(100vh - 96px));
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--rf-bg);
-  border-radius: var(--rf-radius);
-  box-shadow: var(--rf-shadow);
-  animation: rf-in 220ms var(--rf-ease);
-}
-.root[data-position^="bottom"] .panel { transform-origin: bottom center; }
-.root[data-position^="top"] .panel { transform-origin: top center; animation-name: rf-in-top; }
-
-@keyframes rf-in {
-  from { opacity: 0; transform: translateY(6px) scale(0.985); }
-}
-@keyframes rf-in-top {
-  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
-}
-@keyframes rf-fade { from { opacity: 0; } }
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation: none !important; transition: none !important; }
-}
-
-.head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 10px 4px 14px;
-}
-.head h2 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
-.head .spacer { flex: 1; }
-
-.icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  flex: none;
-  border-radius: 6px;
-  color: var(--rf-text-muted);
-  transition: background 120ms var(--rf-ease), color 120ms var(--rf-ease);
-}
-.icon-btn:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
-
-.body { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 14px; overflow-y: auto; }
-
-.segmented {
-  border: 0;
-  margin: 0;
-  min-inline-size: 0;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-  gap: 2px;
-  padding: 2px;
-  background: var(--rf-bg-subtle);
-  border-radius: var(--rf-radius-sm);
-}
-.segmented button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  height: 26px;
-  border-radius: 6px;
-  font-size: 12.5px;
-  font-weight: 500;
-  color: var(--rf-text-muted);
-  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
-}
-.segmented button:hover { color: var(--rf-text); }
-.segmented button[aria-pressed="true"] {
-  background: var(--rf-bg);
-  color: var(--rf-text);
-  box-shadow: var(--rf-shadow-low);
-}
-
-textarea, input[type="email"] {
-  width: 100%;
-  padding: 8px 10px;
-  font: inherit;
-  color: var(--rf-text);
-  background: var(--rf-bg);
-  border: 1px solid var(--rf-border);
-  border-radius: var(--rf-radius-sm);
-  transition: border-color 160ms var(--rf-ease), box-shadow 160ms var(--rf-ease);
-}
-textarea { min-height: 84px; max-height: 220px; resize: none; }
-textarea::placeholder, input::placeholder { color: var(--rf-text-muted); }
-textarea:focus, input:focus { outline: none; border-color: color-mix(in srgb, var(--rf-accent) 55%, transparent); box-shadow: var(--rf-ring); }
-
-.attachments { display: flex; flex-wrap: wrap; gap: 6px; }
-
-.card {
-  flex: 1 0 100%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  padding: 6px;
-  border-radius: 10px;
-  background: var(--rf-bg-subtle);
-  animation: rf-fade 200ms var(--rf-ease);
-}
-.thumb {
-  position: relative;
-  flex: 0 0 60px;
-  height: 42px;
-  overflow: hidden;
-  border-radius: 6px;
-  background: var(--rf-bg);
-  box-shadow: var(--rf-shadow-inset);
-}
-.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
-.thumb.contain img { object-fit: contain; object-position: center; }
-.card .meta { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
-.card .meta strong { font-size: 12.5px; font-weight: 550; }
-.card .meta span { font-size: 11.5px; color: var(--rf-text-muted); }
-.card .actions { display: flex; gap: 2px; margin-left: auto; align-items: center; }
-.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
-
-.ghost-btn {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 30px;
-  padding: 0 10px;
-  font-size: 12.5px;
-  font-weight: 500;
-  color: var(--rf-text-muted);
-  border-radius: var(--rf-radius-sm);
-  box-shadow: var(--rf-shadow-inset);
-  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
+  --rf-bg-subtle: rgb(255 255 255 / 5%);
+  --rf-bg-hover: rgb(255 255 255 / 9%);
+  --rf-border: rgb(255 255 255 / 9%);
+  --rf-text: #ebeae8;
+  --rf-text-muted: rgb(255 255 255 / 68%);
+  --rf-glass: rgb(32 32 32 / 78%);
+  --rf-glass-highlight: rgb(255 255 255 / 14%);
+  --rf-glass-stroke: rgb(255 255 255 / 12%);
+  --rf-primary: #f1efec;
+  --rf-primary-text: #1c1c1b;
+  --rf-accent: #529cca;
+  --rf-danger: #eb5757;
+  --rf-success: #4dab74;
+  --rf-shadow-low: 0 0 0 1px rgb(255 255 255 / 6%), 0 1px 2px rgb(0 0 0 / 30%), 0 4px 10px -4px rgb(0 0 0 / 40%);
+  --rf-shadow: 0 0 0 1px rgb(255 255 255 / 7%), 0 2px 5px -1px rgb(0 0 0 / 35%), 0 14px 36px -10px rgb(0 0 0 / 55%);
+  color-scheme: dark;
 }
-.ghost-btn:hover { background: var(--rf-bg-subtle); color: var(--rf-text); }
 
-.submit {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  height: 32px;
-  margin-top: 2px;
-  font-size: 13px;
-  font-weight: 550;
-  color: var(--rf-primary-text);
-  background: var(--rf-primary);
-  border-radius: var(--rf-radius-sm);
-  transition: opacity 160ms var(--rf-ease), transform 160ms var(--rf-ease);
-}
-.submit:hover:not(:disabled) { opacity: 0.88; }
-.submit:active:not(:disabled) { transform: scale(0.99); }
-.submit:disabled { opacity: 0.35; cursor: not-allowed; }
+*, *::before, *::after { box-sizing: border-box; }
 
-.error { margin: 0; font-size: 12px; color: var(--rf-danger); }
 
-.footer {
-  min-height: 34px;
-  padding: 0 14px;
-  border-top: 1px solid var(--rf-border);
+.root {
+  position: fixed;
+  z-index: 2147483000;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  font-size: 11px;
-  color: var(--rf-text-muted);
+  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);
 }
-.footer[data-dismissible="true"] { justify-content: space-between; }
-.footer a { color: inherit; text-decoration: none; font-weight: 550; transition: color 120ms var(--rf-ease); }
-.footer a:hover { color: var(--rf-text); }
-.dismiss-btn {
-  align-self: stretch;
-  color: inherit;
-  font-size: 11px;
-  transition: color 120ms var(--rf-ease);
+.root:has(.panel) { width: min(var(--rf-width), calc(var(--rf-viewport-width, 100vw) - 24px)); }
+.root[data-position$="right"] { right: calc(var(--rf-viewport-right, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
+.root[data-position$="left"] { left: calc(var(--rf-viewport-left, 0px) + max(12px, min(var(--rf-offset), calc((var(--rf-viewport-width, 100vw) - var(--rf-width)) / 2)))); }
+.root[data-position^="bottom"] { bottom: calc(var(--rf-viewport-bottom, 0px) + max(var(--rf-offset), env(safe-area-inset-bottom))); }
+.root[data-position^="top"] { top: calc(var(--rf-viewport-top, 0px) + max(var(--rf-offset), env(safe-area-inset-top))); align-items: flex-start; }
+.root[data-position="bottom-right"] .panel { transform-origin: bottom right; }
+.root[data-position="bottom-left"] .panel { transform-origin: bottom left; }
+.root[data-position^="top"] .panel { transform-origin: top center; }
+.root[data-editing="true"] { visibility: hidden; pointer-events: none; }
+button, select, input, textarea { font: inherit; color: inherit; }
+button { margin: 0; cursor: pointer; border: 0; background: none; }
+button:disabled { cursor: not-allowed; opacity: .4; }
+svg { flex-shrink: 0; }
+:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
+.icon-btn, .tool {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; flex: none; border-radius: var(--rf-pill); color: var(--rf-text-muted);
+  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
 }
-.dismiss-btn:hover { color: var(--rf-text); }
-
-.done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px 34px; text-align: center; }
+.icon-btn:hover, .tool:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
+.launcher {
+  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
+  border-radius: var(--rf-pill); color: var(--rf-text);
+  font-weight: 500;
+  transition: transform 200ms var(--rf-ease), box-shadow 200ms var(--rf-ease);
+}
+.launcher:hover { transform: translateY(-2px); box-shadow: var(--rf-shadow); }
+.launcher-icon { display: flex; width: 15px; height: 15px; }
+.launcher-icon .on-close { display: none; }
+.floating-controls {
+  display: flex; align-items: center; padding: 3px; flex: none;
+  border-radius: var(--rf-pill);
+  animation: rf-in 220ms var(--rf-ease);
+}
+.drag-handle { touch-action: none; cursor: grab; }
+.drag-handle:active { cursor: grabbing; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ghost-btn { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: var(--rf-radius-sm); }
+.ghost-btn:hover { background: var(--rf-bg-hover); }
+.error { margin: 0; padding: 10px 14px; border-radius: var(--rf-radius); font-size: 12px; color: var(--rf-danger); }
+.done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; text-align: center; }
 .done svg { color: var(--rf-success); }
 .done h2 { margin: 0; font-size: 14px; font-weight: 600; }
-.done p { margin: 0; font-size: 12.5px; color: var(--rf-text-muted); }
-
-.spinner {
-  width: 14px;
-  height: 14px;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  opacity: 0.6;
-  animation: rf-spin 700ms linear infinite;
-}
-@keyframes rf-spin { to { transform: rotate(360deg); } }
-
+.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%); }
-
-.overlay {
-  position: fixed;
+@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: 2147483001;
-  display: flex;
-  flex-direction: column;
-  background: rgb(15 15 15 / 76%);
-  backdrop-filter: blur(3px);
-  animation: rf-fade 180ms var(--rf-ease);
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--rf-bg);
+  pointer-events: none;
 }
-
-.editor { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 24px 0; min-height: 0; }
-.editor canvas {
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: 10px;
-  box-shadow: 0 20px 60px -16px rgb(0 0 0 / 70%);
-  cursor: crosshair;
-  touch-action: 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);
+  }
 }
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  flex-wrap: wrap;
-  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .glass::before { background: var(--rf-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
 }
-.toolbar .group {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px;
-  background: var(--rf-bg);
-  border-radius: 10px;
-  box-shadow: var(--rf-shadow);
+.capture-halo { position: fixed; inset: 0; z-index: 2147482999; pointer-events: none; opacity: 0; transition: opacity 500ms var(--rf-ease); }
+.capture-halo[data-active="true"] { opacity: 1; transition-duration: 140ms; }
+.capture-halo::before { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 14px 0 36px -16px var(--rf-accent), inset -14px 0 36px -16px var(--rf-accent), inset 0 0 4px 1px color-mix(in srgb, var(--rf-accent) 35%, transparent); }
+.capture-halo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rf-accent) 20%, transparent), transparent 5%, transparent 95%, color-mix(in srgb, var(--rf-accent) 20%, transparent)); }
+
+.panel { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; outline: none; animation: rf-in 240ms var(--rf-ease); }
+.success-panel { border-radius: var(--rf-radius); }
+.composer { position: relative; display: flex; flex-direction: column; gap: 8px; }
+.message-row { display: flex; align-items: flex-end; gap: 4px; padding: 4px; border-radius: 26px; }
+.message-row textarea {
+  flex: 1; width: 0; min-height: 36px; height: 36px; max-height: min(140px, 30dvh);
+  margin: 0; padding: 8px 10px 8px 12px; border: 0; border-radius: 20px; resize: none;
+  background: transparent; line-height: 20px; transition: height 220ms var(--rf-ease);
+}
+.panel:focus-within .message-row[data-expanded="true"] textarea { height: 76px; }
+.message-row textarea::placeholder { color: var(--rf-text-muted); }
+.message-row textarea:focus { outline: none; }
+.message-row:has(textarea:focus-visible) { border-color: color-mix(in srgb, var(--rf-accent) 40%, var(--rf-glass-stroke)); }
+.submit { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: var(--rf-pill); background: var(--rf-primary); color: var(--rf-primary-text); transition: opacity 160ms var(--rf-ease), transform 160ms var(--rf-ease); }
+.submit svg { transform: rotate(-45deg); }
+.submit:hover:enabled { transform: scale(1.05); }
+.submit:disabled { background: var(--rf-bg-hover); color: var(--rf-text-muted); opacity: .65; }
+.composer-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.composer-controls { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--rf-pill); }
+.select-control { position: relative; display: flex; align-items: center; min-width: 0; }
+.select-control > svg { position: absolute; right: 9px; width: 12px; height: 12px; pointer-events: none; color: var(--rf-text-muted); }
+.category-select { appearance: none; min-width: 0; max-width: 124px; height: 32px; padding: 0 26px 0 12px; border: 0; border-radius: var(--rf-pill); color: var(--rf-text); background: transparent; cursor: pointer; text-overflow: ellipsis; }
+.category-select:hover:hover { background: var(--rf-bg-hover); }
+option { background: var(--rf-bg); color: var(--rf-text); }
+.composer-options { position: relative; }
+summary { cursor: pointer; list-style: none; }
+summary::-webkit-details-marker { display: none; }
+.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: 32px; 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); }
+.attachments { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
+.screenshot-scroll-area { position: relative; min-width: 0; max-width: calc(100% + 8px); margin: -4px -4px -8px; }
+.screenshot-strip { width: 100%; padding: 4px 4px 8px; overscroll-behavior-x: contain; --rf-fade-start: 0px; --rf-fade-end: 0px; mask-image: linear-gradient(to right, transparent, black var(--rf-fade-start), black calc(100% - var(--rf-fade-end)), transparent); mask-repeat: no-repeat; }
+.screenshot-strip[data-overflow-x-start] { --rf-fade-start: min(24px, var(--scroll-area-overflow-x-start)); }
+.screenshot-strip[data-overflow-x-end] { --rf-fade-end: min(24px, var(--scroll-area-overflow-x-end)); }
+.screenshot-strip-content { display: flex; align-items: flex-end; gap: 8px; }
+.screenshot-scroll-area:has(.screenshot-strip-content:empty) { display: none; }
+.attachments:has(.screenshot-strip-content:empty):not(:has(.selection-chip)) { display: none; }
+.screenshot-scrollbar { height: 4px; margin: 0 8px 2px; opacity: 0; transition: opacity 150ms var(--rf-ease); }
+.screenshot-scrollbar[data-hovering], .screenshot-scrollbar[data-scrolling] { opacity: 1; }
+.screenshot-scroll-thumb { border-radius: var(--rf-pill); background: var(--rf-border); }
+.capture-progress { position: absolute; inset: 3px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border-radius: 16px; color: var(--rf-text-muted); font-size: 10px; }
+.attachments:empty { display: none; }
+.screenshot-attachment, .attachment-skeleton { position: relative; flex: none; margin: 0; min-width: 0; width: 128px; height: 78px; padding: 3px; border-radius: var(--rf-radius); animation: rf-in 260ms var(--rf-ease); }
+.screenshot-preview { display: block; position: relative; width: 100%; height: 100%; padding: 0; overflow: hidden; border-radius: 16px; }
+.screenshot-preview img, .screenshot-preview canvas { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
+.screenshot-preview canvas { position: absolute; inset: 0; pointer-events: none; }
+.attachment-caption { position: absolute; left: 5px; bottom: 5px; display: flex; align-items: center; gap: 4px; padding: 3px 6px; font-size: 10px; border-radius: var(--rf-pill); color: var(--rf-text); }
+.attachment-caption svg { width: 12px; height: 12px; }
+.annotation-count { color: var(--rf-text); font-weight: 600; }
+.attachment-actions { position: absolute; right: 4px; bottom: -4px; display: flex; gap: 1px; padding: 1px; border-radius: var(--rf-pill); opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity 150ms var(--rf-ease), transform 150ms var(--rf-ease); }
+.screenshot-attachment:hover .attachment-actions, .screenshot-attachment:focus-within .attachment-actions { opacity: 1; pointer-events: auto; transform: none; }
+.screenshot-attachment:hover .attachment-caption, .screenshot-attachment:focus-within .attachment-caption { opacity: 0; }
+.attachment-skeleton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--rf-text-muted); font-size: 11px; }
+.attachment-skeleton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--rf-bg-subtle); animation: rf-fade 800ms alternate infinite; }
+.selection-chip { display: flex; align-items: center; max-width: 100%; padding: 3px; border-radius: var(--rf-pill); }
+.selection-label { display: flex; align-items: center; min-width: 0; gap: 6px; padding: 0 6px; font-size: 11px; }
+.selection-label img { object-fit: contain; border-radius: var(--rf-pill); }
+@media (pointer: coarse) {
+  .category-select { height: 44px; max-width: 96px; }
+  .message-row { border-radius: 28px; }
+  .message-row textarea { font-size: 16px; min-height: 44px; height: 44px; padding-top: 12px; }
+  .submit { width: 44px; height: 44px; }
+  .attachment-actions { opacity: 1; pointer-events: auto; transform: none; }
+  .attachment-caption { top: 4px; bottom: auto; right: 4px; left: auto; }
+  .attachment-caption-label { display: none; }
+  .screenshot-attachment:hover .attachment-caption, .screenshot-attachment:focus-within .attachment-caption { opacity: 1; }
+  .screenshot-attachment, .attachment-skeleton { height: 96px; }
+  .email-field input { font-size: 16px; }
+  .dismiss-btn, .selection-label { min-height: 44px; }
 }
-.tool {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 7px;
-  color: var(--rf-text-muted);
-  transition: background 160ms var(--rf-ease), color 160ms var(--rf-ease);
+
+
+.overlay { margin: 0; border: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; position: fixed; inset: 0; z-index: 2147483001; display: flex; flex-direction: column; background: color-mix(in srgb, var(--rf-bg) 94%, transparent); animation: rf-editor-in 260ms var(--rf-ease); transition: background 260ms var(--rf-ease); color: var(--rf-text); font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; }
+.overlay::backdrop { background: transparent; }
+@keyframes rf-editor-in { from { background: transparent; } }
+.editor { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 0; container-type: size; }
+.editor-image { width: min(100cqw, calc(100cqh * var(--rf-capture-ratio))); aspect-ratio: var(--rf-capture-ratio); flex: none; position: relative; }
+.editor-visual { position: absolute; inset: 0; border-radius: var(--rf-radius); box-shadow: var(--rf-shadow); transform-origin: top left; overflow: hidden; }
+.editor-visual img, .editor-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: top center; }
+.editor-visual canvas { cursor: crosshair; touch-action: none; }
+.overlay[data-opening="true"] .editor { pointer-events: none; }
+.overlay[data-closing="true"] { pointer-events: none; background: transparent; }
+.overlay[data-closing="true"] .toolbar { opacity: 0; transform: translateY(8px); }
+
+.toolbar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; transition: opacity 180ms var(--rf-ease), transform 180ms var(--rf-ease); padding: 4px 12px max(16px, env(safe-area-inset-bottom)); }
+.toolbar .group { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--rf-pill); }
+.tool[aria-pressed="true"], .tool[data-selected="true"] { background: var(--rf-primary); color: var(--rf-primary-text); }
+.color-picker { position: relative; }
+.color-picker summary { display: flex; justify-content: center; align-items: center; }
+.color-preview { width: 18px; height: 18px; border-radius: 50%; background: var(--annotation-color); box-shadow: inset 0 0 0 1px var(--rf-border); }
+.color-popover { --rf-color-width: 200px; position: absolute; bottom: calc(100% + 14px); left: clamp(calc(12px - var(--rf-color-anchor)), 0px, calc(100vw - var(--rf-color-anchor) - var(--rf-color-width) - 12px)); display: flex; align-items: center; gap: 6px; width: var(--rf-color-width); padding: 4px 4px 4px 14px; border-radius: var(--rf-pill); animation: rf-in 180ms var(--rf-ease); }
+.color-picker[data-placement="below"] .color-popover { top: calc(100% + 14px); bottom: auto; }
+.color-slider { flex: 1; min-width: 0; }
+.color-slider-control { display: flex; align-items: center; height: 32px; width: 100%; touch-action: none; user-select: none; cursor: pointer; }
+.color-slider-track { height: 12px; width: 100%; border-radius: var(--rf-pill); background: linear-gradient(to right, white, var(--annotation-base-color)); box-shadow: inset 0 0 0 1px var(--rf-border); }
+.color-slider-thumb { width: 16px; height: 16px; border: 2px solid white; border-radius: 50%; background: var(--annotation-color); box-shadow: var(--rf-shadow-low); transition: scale 160ms var(--rf-ease); }
+.color-slider-thumb[data-dragging] { scale: 1.12; }
+.color-slider-thumb:has(:focus-visible), .color-spectrum:has(:focus-visible) { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
+.color-spectrum { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
+.color-spectrum::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#ff5757, #ffde59, #6bdb78, #4ac9fa, #8b5cf6, #ef73dc, #ff5757); box-shadow: inset 0 0 0 1px var(--rf-glass-highlight); }
+.color-spectrum:hover { background: var(--rf-bg-hover); }
+.color-spectrum button { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
+.color-spectrum button:focus-visible { outline: none; }
+.color-spectrum input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
+.done-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: var(--rf-pill); color: var(--rf-primary-text); background: var(--rf-primary); }
+.drawing-menu { position: relative; }
+.drawing-popover { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 12px); width: 200px; max-height: calc(50dvh - 68px); overflow-y: auto; padding: 6px; border-radius: var(--rf-radius); }
+.drawing-menu[data-placement="below"] .drawing-popover { top: calc(100% + 12px); bottom: auto; }
+.drawing-option { display: flex; align-items: center; width: 100%; min-height: 36px; gap: 10px; padding: 0 10px; border-radius: 12px; text-align: left; }
+.drawing-option:hover, .drawing-option[aria-pressed="true"] { background: var(--rf-bg-hover); }
+.drawing-divider { height: 1px; margin: 5px; background: var(--rf-border); }
+.editor canvas[data-tool="text"] { cursor: text; }
+.text-annotation-editor { position: fixed; z-index: 3; width: 240px; padding: 8px; border-radius: var(--rf-radius); }
+.text-annotation-editor textarea { display: block; width: 100%; min-height: 64px; max-height: 112px; padding: 6px; border: 0; background: transparent; resize: vertical; font-size: 16px; line-height: 24px; }
+.text-annotation-editor textarea:focus { outline: none; }
+.text-annotation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
+@media (pointer: coarse) {
+  .drawing-option { min-height: 44px; }
+  .done-btn { width: 44px; height: 44px; }
+  .color-popover { --rf-color-width: 232px; padding-left: 16px; }
+  .color-slider-control, .color-spectrum { height: 44px; }
+  .color-spectrum { width: 44px; }
+  .color-slider-thumb, .color-spectrum::before { width: 18px; height: 18px; }
+  .editor { padding: 8px; }
+  .toolbar { gap: 6px; }
+  .toolbar .group { padding: 3px; gap: 0; }
+}
+@media (pointer: coarse) and (max-width: 360px) {
+  .toolbar { gap: 4px; padding-inline: 2px; }
+  .toolbar .group { padding: 0; }
 }
-.tool:hover { background: var(--rf-bg-hover); color: var(--rf-text); }
-.tool[aria-pressed="true"] { background: var(--rf-bg-hover); color: var(--rf-text); }
-.swatch {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  transition: transform 200ms var(--rf-ease), border-color 160ms var(--rf-ease);
-}
-.swatch[aria-pressed="true"] { border-color: var(--rf-text); transform: scale(1.15); }
-.toolbar .done-btn {
-  height: 30px;
-  padding: 0 13px;
-  font-size: 13px;
-  font-weight: 550;
-  border-radius: 7px;
-  color: var(--rf-primary-text);
-  background: var(--rf-primary);
-  transition: opacity 160ms var(--rf-ease);
-}
-.toolbar .done-btn:hover { opacity: 0.88; }
+
 
 .picker-box {
   position: fixed;
@@ -2008,26 +2877,9 @@ textarea:focus, input:focus { outline: none; border-color: color-mix(in srgb, va
   box-shadow: var(--rf-shadow-inset);
 }
 
-@media (pointer: coarse) {
-  .icon-btn, .tool, .swatch {
-    width: 44px;
-    height: 44px;
-  }
-
-  .launcher, .segmented button, .ghost-btn, .submit, .toolbar .done-btn {
-    min-height: 44px;
-  }
-
-  .dismiss-btn, .footer a {
-    display: inline-flex;
-    min-height: 44px;
-    align-items: center;
-  }
 
-  .footer a {
-    min-width: 44px;
-    justify-content: center;
-  }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
 }
 `;
 //#endregion
@@ -2277,10 +3129,55 @@ async function captureElementCloseUp(element) {
 	}
 }
 //#endregion
+//#region src/feedback/core/submission/upload-screenshots.ts
+async function uploadImage(transport, image) {
+	const { uploadUrl } = await transport.getScreenshotUploadUrl();
+	return transport.uploadImage(uploadUrl, image);
+}
+async function prepareScreenshot(transport, screenshot, index) {
+	const { image, annotations, context } = screenshot;
+	const annotated = annotations.length > 0 ? await renderAnnotatedImage(image, annotations) : null;
+	if (annotations.length > 0 && !annotated) throw new Error("Could not render your annotations. Please try again.");
+	try {
+		const storageId = await uploadImage(transport, image);
+		return {
+			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
+		};
+	} finally {
+		releaseCapture(annotated);
+	}
+}
+async function uploadScreenshots(transport, submission) {
+	const prepared = (await Promise.allSettled(submission.screenshots.map((screenshot, index) => prepareScreenshot(transport, screenshot, index)))).map((result) => {
+		if (result.status === "rejected") throw result.reason;
+		return result.value;
+	});
+	const element = submission.element;
+	if (element) prepared.push({
+		captureSource: "element",
+		filename: "element.png",
+		height: element.height,
+		mimeType: element.mimeType,
+		pageUrl: submission.context.url,
+		size: element.blob.size,
+		storageId: await uploadImage(transport, element),
+		width: element.width
+	});
+	return prepared;
+}
+//#endregion
 //#region src/feedback/core/submit.ts
 const MAX_TITLE_LENGTH = 100;
 const NEWLINE = /\r?\n/;
-/** First line of the message, cut on a word boundary so titles stay readable. */
 function deriveTitle(message) {
 	const firstLine = message.split(NEWLINE).map((line) => line.trim()).find(Boolean) ?? "";
 	if (firstLine.length <= MAX_TITLE_LENGTH) return firstLine;
@@ -2294,64 +3191,31 @@ function buildDescription(params) {
 	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
 	return `[${label}] ${message.trim()}${contact}`;
 }
-async function upload(transport, image) {
-	const { uploadUrl } = await transport.getScreenshotUploadUrl();
-	return await transport.uploadImage(uploadUrl, image);
-}
-async function attachScreenshot(transport, feedbackId, submission) {
-	const { annotated, annotations, context, screenshot } = submission;
-	if (!screenshot) return false;
-	const storageId = await upload(transport, screenshot);
-	const annotatedStorageId = annotated ? await upload(transport, annotated) : void 0;
-	const wireAnnotations = toWireAnnotations(annotations);
-	await transport.saveScreenshot({
-		annotatedStorageId,
-		annotations: wireAnnotations.length > 0 ? wireAnnotations : void 0,
-		captureSource: "widget",
-		feedbackId,
-		filename: "screenshot.png",
-		height: screenshot.height,
-		mimeType: screenshot.mimeType,
-		pageUrl: context.url,
-		size: screenshot.blob.size,
-		storageId,
-		width: screenshot.width
-	});
-	return true;
-}
-async function attachElement(transport, feedbackId, submission) {
-	const { context, element } = submission;
-	if (!element) return;
-	await transport.saveScreenshot({
-		captureSource: "element",
-		feedbackId,
-		filename: "element.png",
-		height: element.height,
-		mimeType: element.mimeType,
-		pageUrl: context.url,
-		size: element.blob.size,
-		storageId: await upload(transport, element),
-		width: element.width
-	});
+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
+	};
 }
-/**
-* Creates the feedback first, then attaches the capture. A failed upload is
-* reported back but never discards what the user wrote.
-*/
-async function submitWidgetFeedback(transport, submission) {
-	const title = deriveTitle(submission.message);
-	if (!title) throw new Error("Please describe your feedback before sending it.");
+async function createReportWithScreenshots(transport, submission, pendingScreenshots) {
 	const { feedbackId } = await transport.create({
 		context: submission.context,
 		description: buildDescription(submission),
-		title
+		title: deriveTitle(submission.message)
 	});
-	const screenshotSaved = await attachScreenshot(transport, feedbackId, submission).catch(() => false);
-	await attachElement(transport, feedbackId, submission).catch(() => void 0);
-	return {
+	return attachPreparedScreenshots(transport, {
 		feedbackId,
-		screenshotSaved
-	};
+		pendingScreenshots
+	});
+}
+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 isStorageResponse(value) {
 	return typeof value === "object" && value !== null && typeof Reflect.get(value, "storageId") === "string";
@@ -2375,6 +3239,220 @@ function createFeedbackTransport(client) {
 	};
 }
 //#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-owned-capture.ts
+function useOwnedCapture() {
+	const [image, setImage] = useState(null);
+	const ownedImage = useRef(null);
+	useEffect(() => () => releaseCapture(ownedImage.current), []);
+	return [image, useCallback((nextImage) => {
+		releaseCapture(ownedImage.current);
+		ownedImage.current = nextImage;
+		setImage(nextImage);
+	}, [])];
+}
+//#endregion
+//#region src/feedback/ui/state/use-screenshot-drafts.ts
+function useScreenshotDrafts(captureFailed, onError) {
+	const [screenshots, setScreenshots] = useState([]);
+	const [activeId, setActiveId] = useState(null);
+	const [pendingCapture, setPendingCapture] = useState(null);
+	const ownedImages = useRef(/* @__PURE__ */ new Map());
+	const captureRequest = useRef(null);
+	useEffect(() => {
+		const images = ownedImages.current;
+		return () => {
+			captureRequest.current = null;
+			for (const image of images.values()) releaseCapture(image);
+			images.clear();
+		};
+	}, []);
+	const storeScreenshot = useCallback((screenshot) => {
+		releaseCapture(ownedImages.current.get(screenshot.id));
+		ownedImages.current.set(screenshot.id, screenshot.image);
+		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: ownedImages.current.keys().next().value ?? captureRequest.current?.id ?? crypto.randomUUID(),
+			source: "automatic"
+		});
+	}, [takeScreenshot]);
+	const retakeCapture = useCallback((id) => {
+		if (!captureRequest.current && ownedImages.current.has(id)) takeScreenshot({
+			id,
+			source: "manual"
+		});
+	}, [takeScreenshot]);
+	const removeCapture = useCallback((id) => {
+		if (captureRequest.current?.id === id) cancelPendingCapture();
+		releaseCapture(ownedImages.current.get(id));
+		ownedImages.current.delete(id);
+		setScreenshots((previous) => previous.filter((item) => item.id !== id));
+		setActiveId((current) => current === id ? null : current);
+	}, [cancelPendingCapture]);
+	const resetScreenshots = useCallback(() => {
+		cancelPendingCapture();
+		for (const image of ownedImages.current.values()) releaseCapture(image);
+		ownedImages.current.clear();
+		setScreenshots([]);
+		setActiveId(null);
+	}, [cancelPendingCapture]);
+	const setAnnotations = useCallback((annotations) => {
+		setScreenshots((previous) => previous.map((item) => item.id === activeId ? {
+			...item,
+			annotations
+		} : item));
+	}, [activeId]);
+	const clearSelectionAnnotations = useCallback(() => {
+		setScreenshots((previous) => previous.map((item) => ({
+			...item,
+			annotations: item.annotations.filter(({ id }) => !id.startsWith("selection-"))
+		})));
+	}, []);
+	return {
+		activeScreenshot: screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null,
+		cancelPendingCapture,
+		clearSelectionAnnotations,
+		pendingCapture,
+		refreshAutomatic,
+		removeCapture,
+		resetScreenshots,
+		retakeCapture,
+		screenshots,
+		selectScreenshot: setActiveId,
+		setAnnotations,
+		storeScreenshot,
+		takeCapture
+	};
+}
+//#endregion
+//#region src/feedback/ui/state/use-widget-config.ts
+function defaultCategory(props) {
+	const preferred = props.defaultCategory ?? "bug";
+	return props.categories?.find((category) => category === preferred) ?? props.categories?.[0] ?? preferred;
+}
+function dismissalDuration(days) {
+	return days !== void 0 && Number.isFinite(days) && days > 0 ? days : null;
+}
+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
+		]),
+		defaultCategory: defaultCategory(props),
+		dismissalKey: `reflet-feedback-dismissed:${publicKey ?? "default"}:${user?.id ?? "anonymous"}`,
+		dismissForDays: dismissalDuration(props.dismissForDays),
+		isAnonymous: !(user || userToken)
+	};
+}
+//#endregion
 //#region src/feedback/ui/use-capture-sync.ts
 const RESIZE_DEBOUNCE = 400;
 /**
@@ -2424,7 +3502,6 @@ function useCaptureSync(enabled, refresh) {
 const SUCCESS_CLOSE_DELAY = 2400;
 const IS_APPLE = /Mac|iPhone|iPad/;
 const MILLISECONDS_PER_DAY = 864e5;
-const DISMISSAL_STORAGE_PREFIX = "reflet-feedback-dismissed";
 function readDismissedUntil(key) {
 	if (typeof window === "undefined") return 0;
 	try {
@@ -2441,10 +3518,6 @@ function writeDismissedUntil(key, until) {
 		window.localStorage.setItem(key, String(until));
 	} catch {}
 }
-/**
-* Matches shortcuts written as `alt+f` or `mod+shift+k`, where `mod` is the
-* platform's command key.
-*/
 function matchesHotkey(event, hotkey, platform = typeof navigator === "undefined" ? "" : navigator.platform) {
 	const parts = hotkey.toLowerCase().split("+").map((part) => part.trim());
 	const key = parts.at(-1);
@@ -2459,48 +3532,27 @@ function matchesHotkey(event, hotkey, platform = typeof navigator === "undefined
 	};
 	return event.altKey === expected.alt && event.ctrlKey === expected.ctrl && event.metaKey === expected.meta && event.shiftKey === expected.shift;
 }
-/**
-* A capture whose object URL is revoked the moment it is replaced or dropped —
-* holding one without this leaks the blob for the lifetime of the page.
-*/
-function useOwnedCapture() {
-	const [image, setImage] = useState(null);
-	const ref = useRef(null);
-	useEffect(() => {
-		ref.current = image;
-	}, [image]);
-	useEffect(() => () => releaseCapture(ref.current), []);
-	return [image, useCallback((next) => {
-		releaseCapture(ref.current);
-		setImage(next);
-	}, [])];
-}
 function useWidgetState(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;
-	const isAnonymous = !(user || userToken);
-	const dismissForDays = props.dismissForDays !== void 0 && Number.isFinite(props.dismissForDays) && props.dismissForDays > 0 ? props.dismissForDays : null;
-	const dismissalKey = `${DISMISSAL_STORAGE_PREFIX}:${publicKey ?? "default"}:${user?.id ?? "anonymous"}`;
+	const { client, defaultCategory, dismissalKey, dismissForDays, isAnonymous } = useWidgetConfig(props);
 	const [isOpen, setIsOpen] = useState(false);
+	const [annotationTrigger, setAnnotationTrigger] = useState(null);
 	const [step, setStep] = useState("compose");
-	const [category, setCategory] = useState(props.defaultCategory ?? "bug");
+	const [category, setCategory] = useState(defaultCategory);
 	const [message, setMessage] = useState("");
 	const [email, setEmail] = useState("");
 	const [honeypot, setHoneypot] = useState("");
-	const [capture, replaceCapture] = useOwnedCapture();
 	const [elementCapture, replaceElementCapture] = useOwnedCapture();
-	const [annotations, setAnnotations] = useState([]);
 	const [selection, setSelection] = useState(null);
-	const [isCapturing, setIsCapturing] = useState(false);
-	const [isSubmitting, setIsSubmitting] = useState(false);
+	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);
-	const frozenContext = useRef(null);
 	useEffect(() => {
 		setDismissedUntil(readDismissedUntil(dismissalKey));
 	}, [dismissalKey]);
@@ -2513,33 +3565,45 @@ function useWidgetState(props) {
 			recorder.stop();
 		};
 	}, [props.captureConsole]);
-	/** Frozen at the same instant as the screenshot, so shot and URL always match. */
-	const takeCapture = useCallback(() => {
-		const context = collectPageContext({ sdkVersion: SDK_VERSION });
-		setIsCapturing(true);
-		captureViewport().catch(() => null).then((image) => {
-			setIsCapturing(false);
-			replaceCapture(image);
-			frozenContext.current = image ? context : null;
-		});
-	}, [replaceCapture]);
-	useCaptureSync(isOpen && step === "compose" && annotations.length === 0 && !selection && props.captureOnOpen !== false, takeCapture);
+	const captureFailed = props.labels?.captureFailed ?? DEFAULT_WIDGET_LABELS.captureFailed;
+	const gallery = useScreenshotDrafts(captureFailed, setError);
+	const { activeScreenshot, cancelPendingCapture, clearSelectionAnnotations, 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 && !selection && props.captureOnOpen !== false, refreshAutomatic);
 	const reset = useCallback(() => {
+		if (successTimer.current) clearTimeout(successTimer.current);
+		setAnnotationTrigger(null);
+		resetSubmission();
 		pickRef.current++;
-		frozenContext.current = null;
-		replaceCapture(null);
+		setIsElementCapturing(false);
+		resetScreenshots();
 		replaceElementCapture(null);
-		setAnnotations([]);
 		setSelection(null);
 		setMessage("");
 		setEmail("");
 		setHoneypot("");
 		setError(null);
 		setStep("compose");
-		setCategory(props.defaultCategory ?? "bug");
+		setCategory(defaultCategory);
 	}, [
-		props.defaultCategory,
-		replaceCapture,
+		defaultCategory,
+		resetSubmission,
+		resetScreenshots,
 		replaceElementCapture
 	]);
 	const close = useCallback(() => {
@@ -2565,14 +3629,15 @@ function useWidgetState(props) {
 		setIsOpen(true);
 		setStep("compose");
 		props.onOpen?.();
-		if (props.captureOnOpen !== false) takeCapture();
+		if (props.captureOnOpen !== false) refreshAutomatic();
 	}, [
 		props.captureOnOpen,
 		props.onOpen,
-		takeCapture
+		refreshAutomatic
 	]);
-	/** Fresh pixels so the highlight maps onto the scroll position the element had. */
 	const selectElement = useCallback(async (element) => {
+		cancelPendingCapture();
+		setIsElementCapturing(true);
 		const picked = buildElementSelection(element);
 		setSelection(picked);
 		setStep("compose");
@@ -2584,89 +3649,58 @@ function useWidgetState(props) {
 			releaseCapture(closeUp);
 			return;
 		}
-		replaceCapture(fresh);
+		setIsElementCapturing(false);
+		if (fresh) storeScreenshot({
+			annotations: [highlightFor(picked, fresh)],
+			context,
+			id: crypto.randomUUID(),
+			image: fresh,
+			source: "manual"
+		});
+		else setError(captureFailed);
 		replaceElementCapture(closeUp);
-		frozenContext.current = fresh ? context : null;
-		setAnnotations(fresh ? [highlightFor(picked, fresh)] : []);
-	}, [replaceCapture, replaceElementCapture]);
+	}, [
+		cancelPendingCapture,
+		captureFailed,
+		storeScreenshot,
+		replaceElementCapture
+	]);
 	const clearSelection = useCallback(() => {
 		pickRef.current++;
 		replaceElementCapture(null);
 		setSelection(null);
-		setAnnotations((previous) => previous.filter((item) => !item.id.startsWith("selection-")));
-	}, [replaceElementCapture]);
-	const removeCapture = useCallback(() => {
-		frozenContext.current = null;
-		replaceCapture(null);
-		setAnnotations([]);
-	}, [replaceCapture]);
-	const client = useMemo(() => publicKey ? new Reflet({
-		baseUrl,
-		publicKey,
-		user,
-		userToken
-	}) : null, [
-		baseUrl,
-		publicKey,
-		user,
-		userToken
-	]);
-	const submit = useCallback(async () => {
+		setIsElementCapturing(false);
+		clearSelectionAnnotations();
+	}, [clearSelectionAnnotations, replaceElementCapture]);
+	const submit = () => {
 		if (honeypot) {
 			setStep("success");
 			return;
 		}
-		if (!client) {
-			setError("Reflet is missing a publicKey. Pass one to RefletFeedback or RefletProvider.");
-			return;
-		}
-		setIsSubmitting(true);
-		setError(null);
-		let annotated = null;
-		try {
-			annotated = capture ? await renderAnnotatedImage(capture, annotations) : null;
-			const result = await submitWidgetFeedback(createFeedbackTransport(client), {
-				annotated,
-				annotations,
-				category,
-				context: {
-					...frozenContext.current ?? collectPageContext({ sdkVersion: "0.3.2" }),
-					consoleEvents: consoleRef.current?.events(),
-					metadata: props.metadata,
-					selection: selection ?? void 0
-				},
-				element: elementCapture,
-				email,
-				isAnonymous,
-				message,
-				screenshot: capture
-			});
-			setStep("success");
-			props.onSubmit?.({ feedbackId: result.feedbackId });
-			setTimeout(close, SUCCESS_CLOSE_DELAY);
-		} catch (submitError) {
-			setError(submitError instanceof Error ? submitError.message : "Something went wrong. Please try again.");
-		} finally {
-			releaseCapture(annotated);
-			setIsSubmitting(false);
-		}
-	}, [
-		annotations,
-		capture,
-		category,
-		client,
-		close,
-		elementCapture,
-		email,
-		honeypot,
-		isAnonymous,
-		message,
-		props.metadata,
-		props.onSubmit,
-		selection
-	]);
+		return submission.submit({
+			category,
+			context: {
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.3.4" }),
+				consoleEvents: consoleRef.current?.events(),
+				metadata: props.metadata,
+				selection: selection ?? void 0
+			},
+			element: elementCapture,
+			email,
+			isAnonymous,
+			message,
+			screenshots: gallery.screenshots
+		});
+	};
 	return {
+		activeScreenshot,
+		annotateScreenshot: (id, trigger) => {
+			setAnnotationTrigger(trigger);
+			gallery.selectScreenshot(id);
+			setStep("annotate");
+		},
 		annotations,
+		annotationTrigger,
 		canDismiss: dismissForDays !== null,
 		capture,
 		category,
@@ -2677,18 +3711,23 @@ function useWidgetState(props) {
 		elementCapture,
 		email,
 		error,
+		hasPendingAttachments: submission.hasPendingAttachments,
 		honeypot,
 		isAnonymous,
 		isCapturing,
 		isDismissed: dismissedUntil > Date.now(),
+		isEditingDisabled: submission.isEditingDisabled,
 		isOpen,
-		isSubmitting,
+		isSubmitting: submission.isSubmitting,
 		message,
 		open,
-		removeCapture,
+		pendingCapture: gallery.pendingCapture,
+		removeCapture: gallery.removeCapture,
+		retakeCapture: gallery.retakeCapture,
+		screenshots: gallery.screenshots,
 		selectElement,
 		selection,
-		setAnnotations,
+		setAnnotations: gallery.setAnnotations,
 		setCategory,
 		setEmail,
 		setHoneypot,
@@ -2696,7 +3735,7 @@ function useWidgetState(props) {
 		setStep,
 		step,
 		submit,
-		takeCapture
+		takeCapture: gallery.takeCapture
 	};
 }
 //#endregion
@@ -2706,14 +3745,8 @@ const DEFAULT_CATEGORIES = [
 	"idea",
 	"question"
 ];
-const DEFAULT_OFFSET = 20;
-/**
-* Floating feedback button with a screenshot, annotation and element picker
-* flow. Mount it once, anywhere below `RefletProvider` or with its own
-* `publicKey`.
-*/
 function RefletFeedback(props) {
-	const { categories = DEFAULT_CATEGORIES, enabled = true, hotkey = null, offset = DEFAULT_OFFSET, position = "bottom-right", theme = "auto" } = props;
+	const { categories = DEFAULT_CATEGORIES, enabled = true, hotkey = null, offset = 20, position = "bottom-right", theme = "auto" } = props;
 	const labels = {
 		...DEFAULT_WIDGET_LABELS,
 		...props.labels
@@ -2738,44 +3771,38 @@ function RefletFeedback(props) {
 		isOpen,
 		open
 	]);
-	useEffect(() => {
-		if (!isOpen || state.step !== "compose") return;
-		const onKeyDown = (event) => {
-			if (event.key === "Escape") close();
-		};
-		document.addEventListener("keydown", onKeyDown);
-		return () => document.removeEventListener("keydown", onKeyDown);
-	}, [
-		close,
-		isOpen,
-		state.step
-	]);
 	if (!enabled || state.isDismissed) return null;
-	const showPanel = isOpen && state.step !== "picking" && state.step !== "annotate";
 	return /* @__PURE__ */ jsxs(ShadowPortal, {
 		offset,
 		primaryColor: props.primaryColor,
 		theme,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "root",
-				"data-position": position,
-				children: [showPanel && /* @__PURE__ */ jsx(FeedbackPanel, {
-					categories,
-					labels,
-					state
-				}), /* @__PURE__ */ jsx(Launcher, {
-					isOpen,
-					label: labels.trigger,
-					onClick: isOpen ? close : open
-				})]
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "capture-halo",
+				"data-active": state.isCapturing
 			}),
-			isOpen && state.step === "annotate" && state.capture && /* @__PURE__ */ jsx(Annotator, {
-				annotations: state.annotations,
-				capture: state.capture,
+			/* @__PURE__ */ jsx(FloatingWidget, {
 				labels,
-				onChange: state.setAnnotations,
-				onDone: () => state.setStep("compose")
+				options: {
+					categories,
+					position
+				},
+				state
+			}),
+			isOpen && state.step === "annotate" && state.activeScreenshot && /* @__PURE__ */ jsx(Annotator, {
+				capture: state.activeScreenshot.image,
+				editor: {
+					annotations: state.annotations,
+					onChange: state.setAnnotations,
+					onDone: () => state.setStep("compose"),
+					onRetake: () => {
+						state.setStep("compose");
+						if (state.activeScreenshot) state.retakeCapture(state.activeScreenshot.id);
+					},
+					trigger: state.annotationTrigger
+				},
+				labels
 			}),
 			isOpen && state.step === "picking" && /* @__PURE__ */ jsx(ElementPicker, {
 				hint: labels.pickElementHint,